diff --git a/browser_tests/fixtures/utils/vueNodeFixtures.ts b/browser_tests/fixtures/utils/vueNodeFixtures.ts
new file mode 100644
index 0000000000..5c4541b926
--- /dev/null
+++ b/browser_tests/fixtures/utils/vueNodeFixtures.ts
@@ -0,0 +1,131 @@
+import type { Locator, Page } from '@playwright/test'
+
+import type { NodeReference } from './litegraphUtils'
+
+/**
+ * VueNodeFixture provides Vue-specific testing utilities for interacting with
+ * Vue node components. It bridges the gap between litegraph node references
+ * and Vue UI components.
+ */
+export class VueNodeFixture {
+  constructor(
+    private readonly nodeRef: NodeReference,
+    private readonly page: Page
+  ) {}
+
+  /**
+   * Get the node's header element using data-testid
+   */
+  async getHeader(): Promise<Locator> {
+    const nodeId = this.nodeRef.id
+    return this.page.locator(`[data-testid="node-header-${nodeId}"]`)
+  }
+
+  /**
+   * Get the node's title element
+   */
+  async getTitleElement(): Promise<Locator> {
+    const header = await this.getHeader()
+    return header.locator('[data-testid="node-title"]')
+  }
+
+  /**
+   * Get the current title text
+   */
+  async getTitle(): Promise<string> {
+    const titleElement = await this.getTitleElement()
+    return (await titleElement.textContent()) || ''
+  }
+
+  /**
+   * Set a new title by double-clicking and entering text
+   */
+  async setTitle(newTitle: string): Promise<void> {
+    const titleElement = await this.getTitleElement()
+    await titleElement.dblclick()
+
+    const input = (await this.getHeader()).locator(
+      '[data-testid="node-title-input"]'
+    )
+    await input.fill(newTitle)
+    await input.press('Enter')
+  }
+
+  /**
+   * Cancel title editing
+   */
+  async cancelTitleEdit(): Promise<void> {
+    const titleElement = await this.getTitleElement()
+    await titleElement.dblclick()
+
+    const input = (await this.getHeader()).locator(
+      '[data-testid="node-title-input"]'
+    )
+    await input.press('Escape')
+  }
+
+  /**
+   * Check if the title is currently being edited
+   */
+  async isEditingTitle(): Promise<boolean> {
+    const header = await this.getHeader()
+    const input = header.locator('[data-testid="node-title-input"]')
+    return await input.isVisible()
+  }
+
+  /**
+   * Get the collapse/expand button
+   */
+  async getCollapseButton(): Promise<Locator> {
+    const header = await this.getHeader()
+    return header.locator('[data-testid="node-collapse-button"]')
+  }
+
+  /**
+   * Toggle the node's collapsed state
+   */
+  async toggleCollapse(): Promise<void> {
+    const button = await this.getCollapseButton()
+    await button.click()
+  }
+
+  /**
+   * Get the collapse icon element
+   */
+  async getCollapseIcon(): Promise<Locator> {
+    const button = await this.getCollapseButton()
+    return button.locator('i')
+  }
+
+  /**
+   * Get the collapse icon's CSS classes
+   */
+  async getCollapseIconClass(): Promise<string> {
+    const icon = await this.getCollapseIcon()
+    return (await icon.getAttribute('class')) || ''
+  }
+
+  /**
+   * Check if the collapse button is visible
+   */
+  async isCollapseButtonVisible(): Promise<boolean> {
+    const button = await this.getCollapseButton()
+    return await button.isVisible()
+  }
+
+  /**
+   * Get the node's body/content element
+   */
+  async getBody(): Promise<Locator> {
+    const nodeId = this.nodeRef.id
+    return this.page.locator(`[data-testid="node-body-${nodeId}"]`)
+  }
+
+  /**
+   * Check if the node body is visible (not collapsed)
+   */
+  async isBodyVisible(): Promise<boolean> {
+    const body = await this.getBody()
+    return await body.isVisible()
+  }
+}
diff --git a/browser_tests/tests/vueNodes/NodeHeader.spec.ts b/browser_tests/tests/vueNodes/NodeHeader.spec.ts
new file mode 100644
index 0000000000..fd98c04342
--- /dev/null
+++ b/browser_tests/tests/vueNodes/NodeHeader.spec.ts
@@ -0,0 +1,138 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../fixtures/ComfyPage'
+import { VueNodeFixture } from '../../fixtures/utils/vueNodeFixtures'
+
+test.describe('NodeHeader', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Enabled')
+    await comfyPage.setSetting('Comfy.Graph.CanvasMenu', false)
+    await comfyPage.setSetting('Comfy.EnableTooltips', true)
+    await comfyPage.setup()
+    // Load single SaveImage node workflow (positioned below menu bar)
+    await comfyPage.loadWorkflow('single_save_image_node')
+  })
+
+  test('displays node title', async ({ comfyPage }) => {
+    // Get the single SaveImage node from the workflow
+    const nodes = await comfyPage.getNodeRefsByType('SaveImage')
+    expect(nodes.length).toBeGreaterThanOrEqual(1)
+
+    const node = nodes[0]
+    const vueNode = new VueNodeFixture(node, comfyPage.page)
+
+    const title = await vueNode.getTitle()
+    expect(title).toBe('Save Image')
+
+    // Verify title is visible in the header
+    const header = await vueNode.getHeader()
+    await expect(header).toContainText('Save Image')
+  })
+
+  test('allows title renaming', async ({ comfyPage }) => {
+    // Get the single SaveImage node from the workflow
+    const nodes = await comfyPage.getNodeRefsByType('SaveImage')
+    const node = nodes[0]
+    const vueNode = new VueNodeFixture(node, comfyPage.page)
+
+    // Test renaming with Enter
+    await vueNode.setTitle('My Custom Sampler')
+    const newTitle = await vueNode.getTitle()
+    expect(newTitle).toBe('My Custom Sampler')
+
+    // Verify the title is displayed
+    const header = await vueNode.getHeader()
+    await expect(header).toContainText('My Custom Sampler')
+
+    // Test cancel with Escape
+    const titleElement = await vueNode.getTitleElement()
+    await titleElement.dblclick()
+    await comfyPage.nextFrame()
+
+    // Type a different value but cancel
+    const input = (await vueNode.getHeader()).locator(
+      '[data-testid="node-title-input"]'
+    )
+    await input.fill('This Should Be Cancelled')
+    await input.press('Escape')
+    await comfyPage.nextFrame()
+
+    // Title should remain as the previously saved value
+    const titleAfterCancel = await vueNode.getTitle()
+    expect(titleAfterCancel).toBe('My Custom Sampler')
+  })
+
+  test('handles node collapsing', async ({ comfyPage }) => {
+    // Get the single SaveImage node from the workflow
+    const nodes = await comfyPage.getNodeRefsByType('SaveImage')
+    const node = nodes[0]
+    const vueNode = new VueNodeFixture(node, comfyPage.page)
+
+    // Initially should not be collapsed
+    expect(await node.isCollapsed()).toBe(false)
+    const body = await vueNode.getBody()
+    await expect(body).toBeVisible()
+
+    // Collapse the node
+    await vueNode.toggleCollapse()
+    expect(await node.isCollapsed()).toBe(true)
+
+    // Verify node content is hidden
+    const collapsedSize = await node.getSize()
+    await expect(body).not.toBeVisible()
+
+    // Expand again
+    await vueNode.toggleCollapse()
+    expect(await node.isCollapsed()).toBe(false)
+    await expect(body).toBeVisible()
+
+    // Size should be restored
+    const expandedSize = await node.getSize()
+    expect(expandedSize.height).toBeGreaterThanOrEqual(collapsedSize.height)
+  })
+
+  test('shows collapse/expand icon state', async ({ comfyPage }) => {
+    // Get the single SaveImage node from the workflow
+    const nodes = await comfyPage.getNodeRefsByType('SaveImage')
+    const node = nodes[0]
+    const vueNode = new VueNodeFixture(node, comfyPage.page)
+
+    // Check initial expanded state icon
+    let iconClass = await vueNode.getCollapseIconClass()
+    expect(iconClass).toContain('pi-chevron-down')
+
+    // Collapse and check icon
+    await vueNode.toggleCollapse()
+    iconClass = await vueNode.getCollapseIconClass()
+    expect(iconClass).toContain('pi-chevron-right')
+
+    // Expand and check icon
+    await vueNode.toggleCollapse()
+    iconClass = await vueNode.getCollapseIconClass()
+    expect(iconClass).toContain('pi-chevron-down')
+  })
+
+  test('preserves title when collapsing/expanding', async ({ comfyPage }) => {
+    // Get the single SaveImage node from the workflow
+    const nodes = await comfyPage.getNodeRefsByType('SaveImage')
+    const node = nodes[0]
+    const vueNode = new VueNodeFixture(node, comfyPage.page)
+
+    // Set custom title
+    await vueNode.setTitle('Test Sampler')
+    expect(await vueNode.getTitle()).toBe('Test Sampler')
+
+    // Collapse
+    await vueNode.toggleCollapse()
+    expect(await vueNode.getTitle()).toBe('Test Sampler')
+
+    // Expand
+    await vueNode.toggleCollapse()
+    expect(await vueNode.getTitle()).toBe('Test Sampler')
+
+    // Verify title is still displayed
+    const header = await vueNode.getHeader()
+    await expect(header).toContainText('Test Sampler')
+  })
+})
diff --git a/eslint.config.js b/eslint.config.js
index 9f212cfc1e..0a13203bcb 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -13,7 +13,8 @@ export default [
     ignores: [
       'src/scripts/*',
       'src/extensions/core/*',
-      'src/types/vue-shim.d.ts'
+      'src/types/vue-shim.d.ts',
+      'src/lib/litegraph/**/*'
     ]
   },
   {
diff --git a/lint-staged.config.js b/lint-staged.config.js
index 2d1a6f0511..699f13b274 100644
--- a/lint-staged.config.js
+++ b/lint-staged.config.js
@@ -3,7 +3,7 @@ export default {
 
   './**/*.{ts,tsx,vue,mts}': (stagedFiles) => [
     ...formatAndEslint(stagedFiles),
-    'vue-tsc --noEmit'
+    'npm run typecheck'
   ]
 }
 
diff --git a/package-lock.json b/package-lock.json
index eee43ab87f..15f6235001 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,6 @@
         "@alloc/quick-lru": "^5.2.0",
         "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
         "@comfyorg/comfyui-electron-types": "^0.4.43",
-        "@comfyorg/litegraph": "^0.16.3",
         "@primevue/forms": "^4.2.5",
         "@primevue/themes": "^4.2.5",
         "@sentry/vue": "^8.48.0",
@@ -29,6 +28,7 @@
         "@xterm/xterm": "^5.5.0",
         "algoliasearch": "^5.21.0",
         "axios": "^1.8.2",
+        "chart.js": "^4.5.0",
         "dompurify": "^3.2.5",
         "dotenv": "^16.4.5",
         "firebase": "^11.6.0",
@@ -947,12 +947,6 @@
       "integrity": "sha512-o6WFbYn9yAkGbkOwvhPF7pbKDvN0occZ21Tfyhya8CIsIqKpTHLft0aOqo4yhSh+kTxN16FYjsfrTH5Olk4WuA==",
       "license": "GPL-3.0-only"
     },
-    "node_modules/@comfyorg/litegraph": {
-      "version": "0.16.3",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.16.3.tgz",
-      "integrity": "sha512-dst29g8+aZW8sWTYxj3LK1W4lX07elBPWFB1L4HLTkYgkzQoyBkHR1O2lSvAn+7bKagi0Q5PjIcZnWG+JAi0lg==",
-      "license": "MIT"
-    },
     "node_modules/@cspotcode/source-map-support": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
@@ -2543,6 +2537,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+      "license": "MIT"
+    },
     "node_modules/@langchain/core": {
       "version": "0.2.36",
       "resolved": "https://registry.npmjs.org/@langchain/core/-/core-0.2.36.tgz",
@@ -6148,6 +6148,18 @@
         "node": "*"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.0.tgz",
+      "integrity": "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/check-error": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
diff --git a/package.json b/package.json
index 74773da4c7..ab8ba2a7c4 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "build": "npm run typecheck && vite build",
     "build:types": "vite build --config vite.types.config.mts && node scripts/prepare-types.js",
     "zipdist": "node scripts/zipdist.js",
-    "typecheck": "vue-tsc --noEmit",
+    "typecheck": "vue-tsc --build",
     "format": "prettier --write './**/*.{js,ts,tsx,vue,mts}'",
     "format:check": "prettier --check './**/*.{js,ts,tsx,vue,mts}'",
     "test:browser": "npx playwright test",
@@ -76,7 +76,6 @@
     "@alloc/quick-lru": "^5.2.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "^0.4.43",
-    "@comfyorg/litegraph": "^0.16.3",
     "@primevue/forms": "^4.2.5",
     "@primevue/themes": "^4.2.5",
     "@sentry/vue": "^8.48.0",
@@ -93,6 +92,7 @@
     "@xterm/xterm": "^5.5.0",
     "algoliasearch": "^5.21.0",
     "axios": "^1.8.2",
+    "chart.js": "^4.5.0",
     "dompurify": "^3.2.5",
     "dotenv": "^16.4.5",
     "firebase": "^11.6.0",
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 9adab19c7c..9fe38ec955 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -135,6 +135,188 @@ body {
   border: thin solid;
 }
 
+/* Shared markdown content styling for consistent rendering across components */
+.comfy-markdown-content {
+  /* Typography */
+  font-size: 0.875rem; /* text-sm */
+  line-height: 1.6;
+  word-wrap: break-word;
+}
+
+/* Headings */
+.comfy-markdown-content h1 {
+  font-size: 22px; /* text-[22px] */
+  font-weight: 700; /* font-bold */
+  margin-top: 2rem; /* mt-8 */
+  margin-bottom: 1rem; /* mb-4 */
+}
+
+.comfy-markdown-content h1:first-child {
+  margin-top: 0; /* first:mt-0 */
+}
+
+.comfy-markdown-content h2 {
+  font-size: 18px; /* text-[18px] */
+  font-weight: 700; /* font-bold */
+  margin-top: 2rem; /* mt-8 */
+  margin-bottom: 1rem; /* mb-4 */
+}
+
+.comfy-markdown-content h2:first-child {
+  margin-top: 0; /* first:mt-0 */
+}
+
+.comfy-markdown-content h3 {
+  font-size: 16px; /* text-[16px] */
+  font-weight: 700; /* font-bold */
+  margin-top: 2rem; /* mt-8 */
+  margin-bottom: 1rem; /* mb-4 */
+}
+
+.comfy-markdown-content h3:first-child {
+  margin-top: 0; /* first:mt-0 */
+}
+
+.comfy-markdown-content h4,
+.comfy-markdown-content h5,
+.comfy-markdown-content h6 {
+  margin-top: 2rem; /* mt-8 */
+  margin-bottom: 1rem; /* mb-4 */
+}
+
+.comfy-markdown-content h4:first-child,
+.comfy-markdown-content h5:first-child,
+.comfy-markdown-content h6:first-child {
+  margin-top: 0; /* first:mt-0 */
+}
+
+/* Paragraphs */
+.comfy-markdown-content p {
+  margin: 0 0 0.5em;
+}
+
+.comfy-markdown-content p:last-child {
+  margin-bottom: 0;
+}
+
+/* First child reset */
+.comfy-markdown-content *:first-child {
+  margin-top: 0; /* mt-0 */
+}
+
+/* Lists */
+.comfy-markdown-content ul,
+.comfy-markdown-content ol {
+  padding-left: 2rem; /* pl-8 */
+  margin: 0.5rem 0; /* my-2 */
+}
+
+/* Nested lists */
+.comfy-markdown-content ul ul,
+.comfy-markdown-content ol ol,
+.comfy-markdown-content ul ol,
+.comfy-markdown-content ol ul {
+  padding-left: 1.5rem; /* pl-6 */
+  margin: 0.5rem 0; /* my-2 */
+}
+
+.comfy-markdown-content li {
+  margin: 0.5rem 0; /* my-2 */
+}
+
+/* Code */
+.comfy-markdown-content code {
+  color: var(--code-text-color);
+  background-color: var(--code-bg-color);
+  border-radius: 0.25rem; /* rounded */
+  padding: 0.125rem 0.375rem; /* px-1.5 py-0.5 */
+  font-family: monospace;
+}
+
+.comfy-markdown-content pre {
+  background-color: var(--code-block-bg-color);
+  border-radius: 0.25rem; /* rounded */
+  padding: 1rem; /* p-4 */
+  margin: 1rem 0; /* my-4 */
+  overflow-x: auto; /* overflow-x-auto */
+}
+
+.comfy-markdown-content pre code {
+  background-color: transparent; /* bg-transparent */
+  padding: 0; /* p-0 */
+  color: var(--p-text-color);
+}
+
+/* Tables */
+.comfy-markdown-content table {
+  width: 100%; /* w-full */
+  border-collapse: collapse; /* border-collapse */
+}
+
+.comfy-markdown-content th,
+.comfy-markdown-content td {
+  padding: 0.5rem; /* px-2 py-2 */
+}
+
+.comfy-markdown-content th {
+  color: var(--fg-color);
+}
+
+.comfy-markdown-content td {
+  color: var(--drag-text);
+}
+
+.comfy-markdown-content tr {
+  border-bottom: 1px solid var(--content-bg);
+}
+
+.comfy-markdown-content tr:last-child {
+  border-bottom: none;
+}
+
+.comfy-markdown-content thead {
+  border-bottom: 1px solid var(--p-text-color);
+}
+
+/* Links */
+.comfy-markdown-content a {
+  color: var(--drag-text);
+  text-decoration: underline;
+}
+
+/* Media */
+.comfy-markdown-content img,
+.comfy-markdown-content video {
+  max-width: 100%; /* max-w-full */
+  height: auto; /* h-auto */
+  display: block; /* block */
+  margin-bottom: 1rem; /* mb-4 */
+}
+
+/* Blockquotes */
+.comfy-markdown-content blockquote {
+  border-left: 3px solid var(--p-primary-color, var(--primary-bg));
+  padding-left: 0.75em;
+  margin: 0.5em 0;
+  opacity: 0.8;
+}
+
+/* Horizontal rule */
+.comfy-markdown-content hr {
+  border: none;
+  border-top: 1px solid var(--p-border-color, var(--border-color));
+  margin: 1em 0;
+}
+
+/* Strong and emphasis */
+.comfy-markdown-content strong {
+  font-weight: bold;
+}
+
+.comfy-markdown-content em {
+  font-style: italic;
+}
+
 .comfy-modal {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
diff --git a/src/components/common/EditableText.spec.ts b/src/components/common/EditableText.spec.ts
index 2e7b036b55..2d31123b98 100644
--- a/src/components/common/EditableText.spec.ts
+++ b/src/components/common/EditableText.spec.ts
@@ -68,4 +68,73 @@ describe('EditableText', () => {
     // @ts-expect-error fixme ts strict error
     expect(wrapper.emitted('edit')[0]).toEqual(['Test Text'])
   })
+
+  it('cancels editing on escape key', async () => {
+    const wrapper = mountComponent({
+      modelValue: 'Original Text',
+      isEditing: true
+    })
+
+    // Change the input value
+    await wrapper.findComponent(InputText).setValue('Modified Text')
+
+    // Press escape
+    await wrapper.findComponent(InputText).trigger('keyup.escape')
+
+    // Should emit cancel event
+    expect(wrapper.emitted('cancel')).toBeTruthy()
+
+    // Should NOT emit edit event
+    expect(wrapper.emitted('edit')).toBeFalsy()
+
+    // Input value should be reset to original
+    expect(wrapper.findComponent(InputText).props()['modelValue']).toBe(
+      'Original Text'
+    )
+  })
+
+  it('does not save changes when escape is pressed and blur occurs', async () => {
+    const wrapper = mountComponent({
+      modelValue: 'Original Text',
+      isEditing: true
+    })
+
+    // Change the input value
+    await wrapper.findComponent(InputText).setValue('Modified Text')
+
+    // Press escape (which triggers blur internally)
+    await wrapper.findComponent(InputText).trigger('keyup.escape')
+
+    // Manually trigger blur to simulate the blur that happens after escape
+    await wrapper.findComponent(InputText).trigger('blur')
+
+    // Should emit cancel but not edit
+    expect(wrapper.emitted('cancel')).toBeTruthy()
+    expect(wrapper.emitted('edit')).toBeFalsy()
+  })
+
+  it('saves changes on enter but not on escape', async () => {
+    // Test Enter key saves changes
+    const enterWrapper = mountComponent({
+      modelValue: 'Original Text',
+      isEditing: true
+    })
+    await enterWrapper.findComponent(InputText).setValue('Saved Text')
+    await enterWrapper.findComponent(InputText).trigger('keyup.enter')
+    // Trigger blur that happens after enter
+    await enterWrapper.findComponent(InputText).trigger('blur')
+    expect(enterWrapper.emitted('edit')).toBeTruthy()
+    // @ts-expect-error fixme ts strict error
+    expect(enterWrapper.emitted('edit')[0]).toEqual(['Saved Text'])
+
+    // Test Escape key cancels changes with a fresh wrapper
+    const escapeWrapper = mountComponent({
+      modelValue: 'Original Text',
+      isEditing: true
+    })
+    await escapeWrapper.findComponent(InputText).setValue('Cancelled Text')
+    await escapeWrapper.findComponent(InputText).trigger('keyup.escape')
+    expect(escapeWrapper.emitted('cancel')).toBeTruthy()
+    expect(escapeWrapper.emitted('edit')).toBeFalsy()
+  })
 })
diff --git a/src/components/common/EditableText.vue b/src/components/common/EditableText.vue
index 16510d3fd4..c6fa18a8d8 100644
--- a/src/components/common/EditableText.vue
+++ b/src/components/common/EditableText.vue
@@ -14,10 +14,12 @@
       fluid
       :pt="{
         root: {
-          onBlur: finishEditing
+          onBlur: finishEditing,
+          ...inputAttrs
         }
       }"
       @keyup.enter="blurInputElement"
+      @keyup.escape="cancelEditing"
       @click.stop
     />
   </div>
@@ -27,21 +29,41 @@
 import InputText from 'primevue/inputtext'
 import { nextTick, ref, watch } from 'vue'
 
-const { modelValue, isEditing = false } = defineProps<{
+const {
+  modelValue,
+  isEditing = false,
+  inputAttrs = {}
+} = defineProps<{
   modelValue: string
   isEditing?: boolean
+  inputAttrs?: Record<string, any>
 }>()
 
-const emit = defineEmits(['update:modelValue', 'edit'])
+const emit = defineEmits(['update:modelValue', 'edit', 'cancel'])
 const inputValue = ref<string>(modelValue)
 const inputRef = ref<InstanceType<typeof InputText> | undefined>()
+const isCanceling = ref(false)
 
 const blurInputElement = () => {
   // @ts-expect-error - $el is an internal property of the InputText component
   inputRef.value?.$el.blur()
 }
 const finishEditing = () => {
-  emit('edit', inputValue.value)
+  // Don't save if we're canceling
+  if (!isCanceling.value) {
+    emit('edit', inputValue.value)
+  }
+  isCanceling.value = false
+}
+const cancelEditing = () => {
+  // Set canceling flag to prevent blur from saving
+  isCanceling.value = true
+  // Reset to original value
+  inputValue.value = modelValue
+  // Emit cancel event
+  emit('cancel')
+  // Blur the input to exit edit mode
+  blurInputElement()
 }
 watch(
   () => isEditing,
diff --git a/src/components/dialog/content/MissingCoreNodesMessage.vue b/src/components/dialog/content/MissingCoreNodesMessage.vue
index 40347061e4..3c407b666e 100644
--- a/src/components/dialog/content/MissingCoreNodesMessage.vue
+++ b/src/components/dialog/content/MissingCoreNodesMessage.vue
@@ -42,7 +42,6 @@
 </template>
 
 <script setup lang="ts">
-import type { LGraphNode } from '@comfyorg/litegraph'
 import { whenever } from '@vueuse/core'
 import Message from 'primevue/message'
 import { computed, ref } from 'vue'
@@ -50,6 +49,8 @@ import { computed, ref } from 'vue'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
 import { compareVersions } from '@/utils/formatUtil'
 
+import type { LGraphNode } from '../../../lib/litegraph/src/litegraph'
+
 const props = defineProps<{
   missingCoreNodes: Record<string, LGraphNode[]>
 }>()
diff --git a/src/components/graph/DomWidgets.vue b/src/components/graph/DomWidgets.vue
index 9f7117e00a..f489576293 100644
--- a/src/components/graph/DomWidgets.vue
+++ b/src/components/graph/DomWidgets.vue
@@ -11,7 +11,6 @@
 </template>
 
 <script setup lang="ts">
-import type { LGraphNode } from '@comfyorg/litegraph'
 import { whenever } from '@vueuse/core'
 import { computed } from 'vue'
 
@@ -20,6 +19,8 @@ import { useChainCallback } from '@/composables/functional/useChainCallback'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useCanvasStore } from '@/stores/graphStore'
 
+import { type LGraphNode, LiteGraph } from '../../lib/litegraph/src/litegraph'
+
 const domWidgetStore = useDomWidgetStore()
 const widgetStates = computed(() => domWidgetStore.activeWidgetStates)
 
@@ -27,6 +28,9 @@ const updateWidgets = () => {
   const lgCanvas = canvasStore.canvas
   if (!lgCanvas) return
 
+  // Skip updating DOM widgets when Vue nodes mode is enabled
+  if (LiteGraph.vueNodesMode) return
+
   const lowQuality = lgCanvas.low_quality
   for (const widgetState of widgetStates.value) {
     const widget = widgetState.widget
diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index 20173e9ee4..e2a3392845 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -92,7 +92,6 @@
 </template>
 
 <script setup lang="ts">
-import type { LGraphCanvas, LGraphNode } from '@comfyorg/litegraph'
 import { useEventListener, whenever } from '@vueuse/core'
 import {
   computed,
@@ -156,6 +155,11 @@ import { useWorkflowStore } from '@/stores/workflowStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 
+import type {
+  LGraphCanvas,
+  LGraphNode
+} from '../../lib/litegraph/src/litegraph'
+
 const emit = defineEmits<{
   ready: []
 }>()
@@ -649,6 +653,7 @@ onMounted(async () => {
   useCopy()
   usePaste()
   useWorkflowAutoSave()
+  useFeatureFlags() // This will automatically sync Vue nodes flag with LiteGraph
 
   comfyApp.vueAppReady = true
 
diff --git a/src/components/graph/GraphCanvasMenu.vue b/src/components/graph/GraphCanvasMenu.vue
index 8f5d036cbc..c055ee50c2 100644
--- a/src/components/graph/GraphCanvasMenu.vue
+++ b/src/components/graph/GraphCanvasMenu.vue
@@ -60,7 +60,6 @@
 </template>
 
 <script setup lang="ts">
-import { LiteGraph } from '@comfyorg/litegraph'
 import Button from 'primevue/button'
 import ButtonGroup from 'primevue/buttongroup'
 import { computed } from 'vue'
@@ -70,6 +69,8 @@ import { useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
 import { useSettingStore } from '@/stores/settingStore'
 
+import { LiteGraph } from '../../lib/litegraph/src/litegraph'
+
 const { t } = useI18n()
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
diff --git a/src/components/graph/NodeTooltip.vue b/src/components/graph/NodeTooltip.vue
index 48155d0eb5..a40af3a824 100644
--- a/src/components/graph/NodeTooltip.vue
+++ b/src/components/graph/NodeTooltip.vue
@@ -10,11 +10,6 @@
 </template>
 
 <script setup lang="ts">
-import {
-  LiteGraph,
-  isOverNodeInput,
-  isOverNodeOutput
-} from '@comfyorg/litegraph'
 import { useEventListener } from '@vueuse/core'
 import { nextTick, ref } from 'vue'
 
@@ -25,6 +20,12 @@ import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
+import {
+  LiteGraph,
+  isOverNodeInput,
+  isOverNodeOutput
+} from '../../lib/litegraph/src/litegraph'
+
 let idleTimeout: number
 const nodeDefStore = useNodeDefStore()
 const settingStore = useSettingStore()
diff --git a/src/components/graph/SelectionOverlay.vue b/src/components/graph/SelectionOverlay.vue
index aa1f11c766..636a57b49a 100644
--- a/src/components/graph/SelectionOverlay.vue
+++ b/src/components/graph/SelectionOverlay.vue
@@ -13,13 +13,14 @@
 </template>
 
 <script setup lang="ts">
-import { createBounds } from '@comfyorg/litegraph'
 import { whenever } from '@vueuse/core'
 import { ref, watch } from 'vue'
 
 import { useAbsolutePosition } from '@/composables/element/useAbsolutePosition'
 import { useCanvasStore } from '@/stores/graphStore'
 
+import { createBounds } from '../../lib/litegraph/src/litegraph'
+
 const canvasStore = useCanvasStore()
 const { style, updatePosition } = useAbsolutePosition()
 
diff --git a/src/components/graph/TitleEditor.vue b/src/components/graph/TitleEditor.vue
index eabc03bb35..4b17387e11 100644
--- a/src/components/graph/TitleEditor.vue
+++ b/src/components/graph/TitleEditor.vue
@@ -13,8 +13,6 @@
 </template>
 
 <script setup lang="ts">
-import { LGraphGroup, LGraphNode, LiteGraph } from '@comfyorg/litegraph'
-import type { LiteGraphCanvasEvent } from '@comfyorg/litegraph'
 import { useEventListener } from '@vueuse/core'
 import { type CSSProperties, computed, ref, watch } from 'vue'
 
@@ -24,6 +22,13 @@ import { app } from '@/scripts/app'
 import { useCanvasStore, useTitleEditorStore } from '@/stores/graphStore'
 import { useSettingStore } from '@/stores/settingStore'
 
+import {
+  LGraphGroup,
+  LGraphNode,
+  LiteGraph
+} from '../../lib/litegraph/src/litegraph'
+import type { LiteGraphCanvasEvent } from '../../lib/litegraph/src/litegraph'
+
 const settingStore = useSettingStore()
 
 const showInput = ref(false)
diff --git a/src/components/graph/TransformPane.vue b/src/components/graph/TransformPane.vue
index d5cc0f4e22..25305065e6 100644
--- a/src/components/graph/TransformPane.vue
+++ b/src/components/graph/TransformPane.vue
@@ -42,13 +42,14 @@
 </template>
 
 <script setup lang="ts">
-import type { LGraphCanvas } from '@comfyorg/litegraph'
 import { computed, provide } from 'vue'
 
 import { useTransformState } from '@/composables/element/useTransformState'
 import { useCanvasTransformSync } from '@/composables/graph/useCanvasTransformSync'
 import { useTransformSettling } from '@/composables/graph/useTransformSettling'
 
+import type { LGraphCanvas } from '../../lib/litegraph/src/litegraph'
+
 interface TransformPaneProps {
   canvas?: LGraphCanvas
   viewport?: { width: number; height: number }
diff --git a/src/components/graph/selectionToolbox/ColorPickerButton.vue b/src/components/graph/selectionToolbox/ColorPickerButton.vue
index 3f7daacf51..f1b51cd186 100644
--- a/src/components/graph/selectionToolbox/ColorPickerButton.vue
+++ b/src/components/graph/selectionToolbox/ColorPickerButton.vue
@@ -40,8 +40,6 @@
 </template>
 
 <script setup lang="ts">
-import type { ColorOption as CanvasColorOption } from '@comfyorg/litegraph'
-import { LGraphCanvas, LiteGraph, isColorable } from '@comfyorg/litegraph'
 import Button from 'primevue/button'
 import SelectButton from 'primevue/selectbutton'
 import { computed, ref, watch } from 'vue'
@@ -53,6 +51,13 @@ import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { adjustColor } from '@/utils/colorUtil'
 import { getItemsColorOption } from '@/utils/litegraphUtil'
 
+import type { ColorOption as CanvasColorOption } from '../../../lib/litegraph/src/litegraph'
+import {
+  LGraphCanvas,
+  LiteGraph,
+  isColorable
+} from '../../../lib/litegraph/src/litegraph'
+
 const { t } = useI18n()
 const canvasStore = useCanvasStore()
 const colorPaletteStore = useColorPaletteStore()
diff --git a/src/components/graph/selectionToolbox/ExecuteButton.vue b/src/components/graph/selectionToolbox/ExecuteButton.vue
index 2f2717a690..b00d4aaa2d 100644
--- a/src/components/graph/selectionToolbox/ExecuteButton.vue
+++ b/src/components/graph/selectionToolbox/ExecuteButton.vue
@@ -19,7 +19,6 @@
 </template>
 
 <script setup lang="ts">
-import type { LGraphNode } from '@comfyorg/litegraph'
 import Button from 'primevue/button'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -28,6 +27,8 @@ import { useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
 import { isLGraphNode } from '@/utils/litegraphUtil'
 
+import type { LGraphNode } from '../../../lib/litegraph/src/litegraph'
+
 const { t } = useI18n()
 const canvasStore = useCanvasStore()
 const commandStore = useCommandStore()
diff --git a/src/components/graph/vueNodes/InputSlot.vue b/src/components/graph/vueNodes/InputSlot.vue
index 2e5345fdd6..0de2e83b2a 100644
--- a/src/components/graph/vueNodes/InputSlot.vue
+++ b/src/components/graph/vueNodes/InputSlot.vue
@@ -2,44 +2,56 @@
   <div v-if="renderError" class="node-error p-1 text-red-500 text-xs">⚠️</div>
   <div
     v-else
-    class="lg-slot lg-slot--input flex items-center gap-2 py-1 pl-2 pr-4 cursor-crosshair hover:bg-black/5"
+    class="lg-slot lg-slot--input flex items-center cursor-crosshair group"
     :class="{
       'opacity-70': readonly,
       'lg-slot--connected': connected,
-      'lg-slot--compatible': compatible
+      'lg-slot--compatible': compatible,
+      'lg-slot--dot-only': dotOnly,
+      'pr-2 hover:bg-black/5': !dotOnly
+    }"
+    :style="{
+      height: slotHeight + 'px'
     }"
     @pointerdown="handleClick"
   >
     <!-- Connection Dot -->
-    <div
-      class="lg-slot__dot w-3 h-3 rounded-full border-2"
-      :style="{
-        backgroundColor: connected ? slotColor : 'transparent',
-        borderColor: slotColor
-      }"
-    />
+    <div class="w-5 h-5 flex items-center justify-center group/slot">
+      <div
+        class="w-2 h-2 rounded-full bg-white transition-all duration-150 group-hover/slot:w-2.5 group-hover/slot:h-2.5 group-hover/slot:border-2 group-hover/slot:border-white"
+        :style="{
+          backgroundColor: slotColor
+        }"
+      />
+    </div>
 
     <!-- Slot Name -->
-    <span class="text-xs text-surface-700 whitespace-nowrap">
+    <span v-if="!dotOnly" class="text-xs text-surface-700 whitespace-nowrap">
       {{ slotData.name || `Input ${index}` }}
     </span>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { INodeSlot, LGraphNode } from '@comfyorg/litegraph'
 import { computed, onErrorCaptured, ref } from 'vue'
 
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { getSlotColor } from '@/constants/slotColors'
 
+import type {
+  INodeSlot,
+  LGraphNode
+} from '../../../lib/litegraph/src/litegraph'
+import { COMFY_VUE_NODE_DIMENSIONS } from '../../../lib/litegraph/src/litegraph'
+
 interface InputSlotProps {
-  node: LGraphNode
+  node?: LGraphNode
   slotData: INodeSlot
   index: number
   connected?: boolean
   compatible?: boolean
   readonly?: boolean
+  dotOnly?: boolean
 }
 
 const props = defineProps<InputSlotProps>()
@@ -61,6 +73,9 @@ onErrorCaptured((error) => {
 // Get slot color based on type
 const slotColor = computed(() => getSlotColor(props.slotData.type))
 
+// Get slot height from litegraph constants
+const slotHeight = COMFY_VUE_NODE_DIMENSIONS.components.SLOT_HEIGHT
+
 // Handle click events
 const handleClick = (event: PointerEvent) => {
   if (!props.readonly) {
diff --git a/src/components/graph/vueNodes/LGraphNode.vue b/src/components/graph/vueNodes/LGraphNode.vue
index 086d06b1f6..a3b36b2c8d 100644
--- a/src/components/graph/vueNodes/LGraphNode.vue
+++ b/src/components/graph/vueNodes/LGraphNode.vue
@@ -34,7 +34,11 @@
     />
 
     <!-- Node Body - rendered based on LOD level and collapsed state -->
-    <div v-if="!isMinimalLOD && !isCollapsed" class="flex flex-col gap-2 p-2">
+    <div
+      v-if="!isMinimalLOD && !isCollapsed"
+      class="flex flex-col gap-2"
+      :data-testid="`node-body-${nodeData.id}`"
+    >
       <!-- Slots only rendered at full detail -->
       <NodeSlots
         v-if="shouldRenderSlots"
@@ -61,14 +65,6 @@
         :readonly="readonly"
         :lod-level="lodLevel"
       />
-
-      <!-- Placeholder if no widgets and in reduced+ mode -->
-      <div
-        v-if="!nodeData.widgets?.length && !hasCustomContent && !isMinimalLOD"
-        class="text-gray-500 text-sm text-center py-4"
-      >
-        No widgets
-      </div>
     </div>
 
     <!-- Progress bar for executing state -->
@@ -81,7 +77,6 @@
 </template>
 
 <script setup lang="ts">
-import { LiteGraph } from '@comfyorg/litegraph'
 import { computed, onErrorCaptured, ref, toRef, watch } from 'vue'
 
 // Import the VueNodeData type
@@ -89,6 +84,7 @@ import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { LODLevel, useLOD } from '@/composables/graph/useLOD'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 
+import { LiteGraph } from '../../../lib/litegraph/src/litegraph'
 import NodeContent from './NodeContent.vue'
 import NodeHeader from './NodeHeader.vue'
 import NodeSlots from './NodeSlots.vue'
diff --git a/src/components/graph/vueNodes/NodeContent.vue b/src/components/graph/vueNodes/NodeContent.vue
index 8ef236a8bf..d51a48e35a 100644
--- a/src/components/graph/vueNodes/NodeContent.vue
+++ b/src/components/graph/vueNodes/NodeContent.vue
@@ -12,13 +12,14 @@
 </template>
 
 <script setup lang="ts">
-import type { LGraphNode } from '@comfyorg/litegraph'
 import { onErrorCaptured, ref } from 'vue'
 
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import type { LODLevel } from '@/composables/graph/useLOD'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 
+import type { LGraphNode } from '../../../lib/litegraph/src/litegraph'
+
 interface NodeContentProps {
   node?: LGraphNode // For backwards compatibility
   nodeData?: VueNodeData // New clean data structure
diff --git a/src/components/graph/vueNodes/NodeHeader.vue b/src/components/graph/vueNodes/NodeHeader.vue
index 418e354aa7..5abf19b3aa 100644
--- a/src/components/graph/vueNodes/NodeHeader.vue
+++ b/src/components/graph/vueNodes/NodeHeader.vue
@@ -5,6 +5,7 @@
   <div
     v-else
     class="lg-node-header flex items-center justify-between p-2 rounded-t-lg cursor-move"
+    :data-testid="`node-header-${nodeInfo?.id || ''}`"
     :style="{
       backgroundColor: headerColor,
       color: textColor
@@ -15,6 +16,7 @@
     <button
       v-show="!readonly"
       class="bg-transparent border-transparent flex items-center"
+      data-testid="node-collapse-button"
       @click.stop="handleCollapse"
       @dblclick.stop
     >
@@ -25,18 +27,19 @@
     </button>
 
     <!-- Node Title -->
-    <div class="text-sm font-medium truncate flex-1">
+    <div class="text-sm font-medium truncate flex-1" data-testid="node-title">
       <EditableText
         :model-value="displayTitle"
         :is-editing="isEditing"
+        :input-attrs="{ 'data-testid': 'node-title-input' }"
         @edit="handleTitleEdit"
+        @cancel="handleTitleCancel"
       />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { LGraphNode } from '@comfyorg/litegraph'
 import { computed, onErrorCaptured, ref, watch } from 'vue'
 
 import EditableText from '@/components/common/EditableText.vue'
@@ -44,6 +47,8 @@ import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import type { LODLevel } from '@/composables/graph/useLOD'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 
+import type { LGraphNode } from '../../../lib/litegraph/src/litegraph'
+
 interface NodeHeaderProps {
   node?: LGraphNode // For backwards compatibility
   nodeData?: VueNodeData // New clean data structure
@@ -134,4 +139,10 @@ const handleTitleEdit = (newTitle: string) => {
     emit('update:title', trimmedTitle)
   }
 }
+
+const handleTitleCancel = () => {
+  isEditing.value = false
+  // Reset displayTitle to the current node title
+  displayTitle.value = nodeInfo.value?.title || 'Untitled'
+}
 </script>
diff --git a/src/components/graph/vueNodes/NodeSlots.vue b/src/components/graph/vueNodes/NodeSlots.vue
index 76ec3e9a6b..6d1d6ec885 100644
--- a/src/components/graph/vueNodes/NodeSlots.vue
+++ b/src/components/graph/vueNodes/NodeSlots.vue
@@ -2,44 +2,49 @@
   <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
     ⚠️ Node Slots Error
   </div>
-  <div v-else class="lg-node-slots">
-    <!-- For now, render slots info as text to see what's there -->
-    <div v-if="nodeInfo?.inputs?.length" class="mb-2">
-      <div class="text-xs text-gray-400 mb-1">Inputs:</div>
-      <div
-        v-for="(input, index) in nodeInfo.inputs"
+  <div v-else class="lg-node-slots flex justify-between">
+    <div v-if="filteredInputs.length" class="flex flex-col">
+      <InputSlot
+        v-for="(input, index) in filteredInputs"
         :key="`input-${index}`"
-        class="text-xs text-gray-300"
-      >
-        {{ getInputName(input, index) }} ({{ getInputType(input) }})
-      </div>
+        :slot-data="input"
+        :index="getActualInputIndex(input, index)"
+        :readonly="readonly"
+        @slot-click="
+          handleInputSlotClick(getActualInputIndex(input, index), $event)
+        "
+      />
     </div>
 
-    <div v-if="nodeInfo?.outputs?.length">
-      <div class="text-xs text-gray-400 mb-1">Outputs:</div>
-      <div
-        v-for="(output, index) in nodeInfo.outputs"
+    <div v-if="filteredOutputs.length" class="flex flex-col ml-auto">
+      <OutputSlot
+        v-for="(output, index) in filteredOutputs"
         :key="`output-${index}`"
-        class="text-xs text-gray-300"
-      >
-        {{ getOutputName(output, index) }} ({{ getOutputType(output) }})
-      </div>
+        :slot-data="output"
+        :index="index"
+        :readonly="readonly"
+        @slot-click="handleOutputSlotClick(index, $event)"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { LGraphNode } from '@comfyorg/litegraph'
-import { computed, onErrorCaptured, ref } from 'vue'
-
-// import InputSlot from './InputSlot.vue'
-// import OutputSlot from './OutputSlot.vue'
+import { computed, onErrorCaptured, onUnmounted, ref } from 'vue'
 
+import { useEventForwarding } from '@/composables/graph/useEventForwarding'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import type { LODLevel } from '@/composables/graph/useLOD'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { isSlotObject } from '@/utils/typeGuardUtil'
 
+import type {
+  INodeSlot,
+  LGraphNode
+} from '../../../lib/litegraph/src/litegraph'
+import InputSlot from './InputSlot.vue'
+import OutputSlot from './OutputSlot.vue'
+
 interface NodeSlotsProps {
   node?: LGraphNode // For backwards compatibility
   nodeData?: VueNodeData // New clean data structure
@@ -51,34 +56,77 @@ const props = defineProps<NodeSlotsProps>()
 
 const nodeInfo = computed(() => props.nodeData || props.node)
 
-const getInputName = (input: unknown, index: number): string => {
-  if (isSlotObject(input) && input.name) {
-    return input.name
-  }
-  return `Input ${index}`
-}
+// Filter out input slots that have corresponding widgets
+const filteredInputs = computed(() => {
+  if (!nodeInfo.value?.inputs) return []
 
-const getInputType = (input: unknown): string => {
-  if (isSlotObject(input) && input.type) {
-    return input.type
-  }
-  return 'any'
+  return nodeInfo.value.inputs
+    .filter((input) => {
+      // Check if this slot has a widget property (indicating it has a corresponding widget)
+      if (isSlotObject(input) && 'widget' in input && input.widget) {
+        // This slot has a widget, so we should not display it separately
+        return false
+      }
+      return true
+    })
+    .map((input) =>
+      isSlotObject(input)
+        ? input
+        : ({
+            name: typeof input === 'string' ? input : '',
+            type: 'any',
+            boundingRect: [0, 0, 0, 0] as [number, number, number, number]
+          } as INodeSlot)
+    )
+})
+
+// Outputs don't have widgets, so we don't need to filter them
+const filteredOutputs = computed(() => {
+  const outputs = nodeInfo.value?.outputs || []
+  return outputs.map((output) =>
+    isSlotObject(output)
+      ? output
+      : ({
+          name: typeof output === 'string' ? output : '',
+          type: 'any',
+          boundingRect: [0, 0, 0, 0] as [number, number, number, number]
+        } as INodeSlot)
+  )
+})
+
+// Get the actual index of an input slot in the node's inputs array
+// (accounting for filtered widget slots)
+const getActualInputIndex = (
+  input: INodeSlot,
+  filteredIndex: number
+): number => {
+  if (!nodeInfo.value?.inputs) return filteredIndex
+
+  // Find the actual index in the unfiltered inputs array
+  const actualIndex = nodeInfo.value.inputs.findIndex((i) => i === input)
+  return actualIndex !== -1 ? actualIndex : filteredIndex
 }
 
-const getOutputName = (output: unknown, index: number): string => {
-  if (isSlotObject(output) && output.name) {
-    return output.name
-  }
-  return `Output ${index}`
+// Set up event forwarding for slot interactions
+const { handleSlotPointerDown, cleanup } = useEventForwarding()
+
+// Handle input slot click
+const handleInputSlotClick = (_index: number, event: PointerEvent) => {
+  // Forward the event to LiteGraph for native slot handling
+  handleSlotPointerDown(event)
 }
 
-const getOutputType = (output: unknown): string => {
-  if (isSlotObject(output) && output.type) {
-    return output.type
-  }
-  return 'any'
+// Handle output slot click
+const handleOutputSlotClick = (_index: number, event: PointerEvent) => {
+  // Forward the event to LiteGraph for native slot handling
+  handleSlotPointerDown(event)
 }
 
+// Clean up event listeners on unmount
+onUnmounted(() => {
+  cleanup()
+})
+
 // Error boundary implementation
 const renderError = ref<string | null>(null)
 const { toastErrorHandler } = useErrorHandling()
diff --git a/src/components/graph/vueNodes/NodeWidgets.vue b/src/components/graph/vueNodes/NodeWidgets.vue
index 6e8576e9f2..487c1dc7a0 100644
--- a/src/components/graph/vueNodes/NodeWidgets.vue
+++ b/src/components/graph/vueNodes/NodeWidgets.vue
@@ -2,26 +2,48 @@
   <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
     ⚠️ Node Widgets Error
   </div>
-  <div v-else class="lg-node-widgets flex flex-col gap-2">
-    <component
-      :is="widget.vueComponent"
+  <div v-else class="lg-node-widgets flex flex-col gap-2 pr-4">
+    <div
       v-for="(widget, index) in processedWidgets"
       :key="`widget-${index}-${widget.name}`"
-      :widget="widget.simplified"
-      :model-value="widget.value"
-      :readonly="readonly"
-      @update:model-value="widget.updateHandler"
-    />
+      class="lg-widget-container relative flex items-center group"
+    >
+      <!-- Widget Input Slot Dot -->
+      <div
+        class="opacity-0 group-hover:opacity-100 transition-opacity duration-150"
+      >
+        <InputSlot
+          :slot-data="{
+            name: widget.name,
+            type: widget.type,
+            boundingRect: [0, 0, 0, 0]
+          }"
+          :index="index"
+          :readonly="readonly"
+          :dot-only="true"
+          @slot-click="handleWidgetSlotClick($event, widget)"
+        />
+      </div>
+      <!-- Widget Component -->
+      <component
+        :is="widget.vueComponent"
+        :widget="widget.simplified"
+        :model-value="widget.value"
+        :readonly="readonly"
+        class="flex-1"
+        @update:model-value="widget.updateHandler"
+      />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { LGraphNode } from '@comfyorg/litegraph'
-import { computed, onErrorCaptured, ref } from 'vue'
+import { computed, onErrorCaptured, onUnmounted, ref } from 'vue'
 
 // Import widget components directly
 import WidgetInputText from '@/components/graph/vueWidgets/WidgetInputText.vue'
 import { widgetTypeToComponent } from '@/components/graph/vueWidgets/widgetRegistry'
+import { useEventForwarding } from '@/composables/graph/useEventForwarding'
 import type {
   SafeWidgetData,
   VueNodeData
@@ -34,6 +56,9 @@ import {
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
 
+import type { LGraphNode } from '../../../lib/litegraph/src/litegraph'
+import InputSlot from './InputSlot.vue'
+
 interface NodeWidgetsProps {
   node?: LGraphNode
   nodeData?: VueNodeData
@@ -43,6 +68,9 @@ interface NodeWidgetsProps {
 
 const props = defineProps<NodeWidgetsProps>()
 
+// Set up event forwarding for slot interactions
+const { handleSlotPointerDown, cleanup } = useEventForwarding()
+
 // Use widget renderer composable
 const { getWidgetComponent, shouldRenderAsVue } = useWidgetRenderer()
 
@@ -61,6 +89,7 @@ const nodeInfo = computed(() => props.nodeData || props.node)
 
 interface ProcessedWidget {
   name: string
+  type: string
   vueComponent: any
   simplified: SimplifiedWidget
   value: WidgetValue
@@ -110,6 +139,7 @@ const processedWidgets = computed((): ProcessedWidget[] => {
 
     result.push({
       name: widget.name,
+      type: widget.type,
       vueComponent,
       simplified,
       value: widget.value,
@@ -119,4 +149,18 @@ const processedWidgets = computed((): ProcessedWidget[] => {
 
   return result
 })
+
+// Handle widget slot click
+const handleWidgetSlotClick = (
+  event: PointerEvent,
+  _widget: ProcessedWidget
+) => {
+  // Forward the event to LiteGraph for native slot handling
+  handleSlotPointerDown(event)
+}
+
+// Clean up event listeners on unmount
+onUnmounted(() => {
+  cleanup()
+})
 </script>
diff --git a/src/components/graph/vueNodes/OutputSlot.vue b/src/components/graph/vueNodes/OutputSlot.vue
index 16be94ebe0..2edd3f096f 100644
--- a/src/components/graph/vueNodes/OutputSlot.vue
+++ b/src/components/graph/vueNodes/OutputSlot.vue
@@ -2,44 +2,57 @@
   <div v-if="renderError" class="node-error p-1 text-red-500 text-xs">⚠️</div>
   <div
     v-else
-    class="lg-slot lg-slot--output flex items-center gap-2 py-1 pr-2 pl-4 cursor-crosshair hover:bg-black/5 justify-end"
+    class="lg-slot lg-slot--output flex items-center cursor-crosshair justify-end group"
     :class="{
       'opacity-70': readonly,
       'lg-slot--connected': connected,
-      'lg-slot--compatible': compatible
+      'lg-slot--compatible': compatible,
+      'lg-slot--dot-only': dotOnly,
+      'pl-2 hover:bg-black/5': !dotOnly,
+      'justify-center': dotOnly
+    }"
+    :style="{
+      height: slotHeight + 'px'
     }"
     @pointerdown="handleClick"
   >
     <!-- Slot Name -->
-    <span class="text-xs text-surface-700 whitespace-nowrap">
+    <span v-if="!dotOnly" class="text-xs text-surface-700 whitespace-nowrap">
       {{ slotData.name || `Output ${index}` }}
     </span>
 
     <!-- Connection Dot -->
-    <div
-      class="lg-slot__dot w-3 h-3 rounded-full border-2"
-      :style="{
-        backgroundColor: connected ? slotColor : 'transparent',
-        borderColor: slotColor
-      }"
-    />
+    <div class="w-5 h-5 flex items-center justify-center group/slot">
+      <div
+        class="w-2 h-2 rounded-full bg-white transition-all duration-150 group-hover/slot:w-2.5 group-hover/slot:h-2.5 group-hover/slot:border-2 group-hover/slot:border-white"
+        :style="{
+          backgroundColor: slotColor
+        }"
+      />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { INodeSlot, LGraphNode } from '@comfyorg/litegraph'
 import { computed, onErrorCaptured, ref } from 'vue'
 
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { getSlotColor } from '@/constants/slotColors'
 
+import type {
+  INodeSlot,
+  LGraphNode
+} from '../../../lib/litegraph/src/litegraph'
+import { COMFY_VUE_NODE_DIMENSIONS } from '../../../lib/litegraph/src/litegraph'
+
 interface OutputSlotProps {
-  node: LGraphNode
+  node?: LGraphNode
   slotData: INodeSlot
   index: number
   connected?: boolean
   compatible?: boolean
   readonly?: boolean
+  dotOnly?: boolean
 }
 
 const props = defineProps<OutputSlotProps>()
@@ -62,6 +75,9 @@ onErrorCaptured((error) => {
 // Get slot color based on type
 const slotColor = computed(() => getSlotColor(props.slotData.type))
 
+// Get slot height from litegraph constants
+const slotHeight = COMFY_VUE_NODE_DIMENSIONS.components.SLOT_HEIGHT
+
 // Handle click events
 const handleClick = (event: PointerEvent) => {
   if (!props.readonly) {
diff --git a/src/components/graph/vueWidgets/WidgetButton.vue b/src/components/graph/vueWidgets/WidgetButton.vue
index 34f7eb51f9..ae8fb75674 100644
--- a/src/components/graph/vueWidgets/WidgetButton.vue
+++ b/src/components/graph/vueWidgets/WidgetButton.vue
@@ -3,7 +3,12 @@
     <label v-if="widget.name" class="text-sm opacity-80">{{
       widget.name
     }}</label>
-    <Button v-bind="filteredProps" :disabled="readonly" @click="handleClick" />
+    <Button
+      v-bind="filteredProps"
+      :disabled="readonly"
+      size="small"
+      @click="handleClick"
+    />
   </div>
 </template>
 
diff --git a/src/components/graph/vueWidgets/WidgetChart.vue b/src/components/graph/vueWidgets/WidgetChart.vue
index 03491feab1..1c40d35a7f 100644
--- a/src/components/graph/vueWidgets/WidgetChart.vue
+++ b/src/components/graph/vueWidgets/WidgetChart.vue
@@ -1,65 +1,78 @@
 <template>
   <div class="flex flex-col gap-1">
-    <label v-if="widget.name" class="text-sm opacity-80">{{
-      widget.name
-    }}</label>
-    <div class="p-4 border border-gray-300 dark-theme:border-gray-600 rounded">
-      <!-- Simple chart placeholder - can be enhanced with Chart.js when available -->
-      <div
-        v-if="!value || !Array.isArray(value.data)"
-        class="text-center text-gray-500 dark-theme:text-gray-400"
-      >
-        No chart data available
-      </div>
-      <div v-else class="space-y-2">
-        <div v-if="value.title" class="text-center font-semibold">
-          {{ value.title }}
-        </div>
-        <div class="space-y-1">
-          <div
-            v-for="(item, index) in value.data"
-            :key="index"
-            class="flex justify-between items-center"
-          >
-            <span class="text-sm">{{ item.label || `Item ${index + 1}` }}</span>
-            <div class="flex items-center gap-2">
-              <div
-                class="h-3 bg-blue-500 rounded"
-                :style="{
-                  width: `${Math.max((item.value / maxValue) * 100, 5)}px`
-                }"
-              ></div>
-              <span class="text-sm font-mono">{{ item.value }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
+    <div
+      class="p-4 border border-gray-300 dark-theme:border-gray-600 rounded max-h-[48rem]"
+    >
+      <Chart :type="chartType" :data="chartData" :options="chartOptions" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { ChartData } from 'chart.js'
+import Chart from 'primevue/chart'
 import { computed } from 'vue'
 
+import type { ChartInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
-interface ChartData {
-  title?: string
-  data: Array<{
-    label: string
-    value: number
-  }>
-}
+type ChartWidgetOptions = NonNullable<ChartInputSpec['options']>
 
 const value = defineModel<ChartData>({ required: true })
 
-defineProps<{
-  widget: SimplifiedWidget<ChartData>
+const props = defineProps<{
+  widget: SimplifiedWidget<ChartData, ChartWidgetOptions>
   readonly?: boolean
 }>()
 
-const maxValue = computed(() => {
-  if (!value.value?.data?.length) return 1
-  return Math.max(...value.value.data.map((item) => item.value))
-})
+const chartType = computed(() => props.widget.options?.type ?? 'line')
+
+const chartData = computed(() => value.value || { labels: [], datasets: [] })
+
+const chartOptions = computed(() => ({
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      labels: {
+        color: '#FFF',
+        usePointStyle: true,
+        pointStyle: 'circle'
+      }
+    }
+  },
+  scales: {
+    x: {
+      ticks: {
+        color: '#9FA2BD'
+      },
+      grid: {
+        display: true,
+        color: '#9FA2BD',
+        drawTicks: false,
+        drawOnChartArea: true,
+        drawBorder: false
+      },
+      border: {
+        display: true,
+        color: '#9FA2BD'
+      }
+    },
+    y: {
+      ticks: {
+        color: '#9FA2BD'
+      },
+      grid: {
+        display: false,
+        drawTicks: false,
+        drawOnChartArea: false,
+        drawBorder: false
+      },
+      border: {
+        display: true,
+        color: '#9FA2BD'
+      }
+    }
+  }
+}))
 </script>
diff --git a/src/components/graph/vueWidgets/WidgetColorPicker.vue b/src/components/graph/vueWidgets/WidgetColorPicker.vue
index 67d08f0d16..16a3dd3746 100644
--- a/src/components/graph/vueWidgets/WidgetColorPicker.vue
+++ b/src/components/graph/vueWidgets/WidgetColorPicker.vue
@@ -1,9 +1,16 @@
+<!-- Needs custom color picker for alpha support -->
 <template>
   <div class="flex flex-col gap-1">
     <label v-if="widget.name" class="text-sm opacity-80">{{
       widget.name
     }}</label>
-    <ColorPicker v-model="value" v-bind="filteredProps" :disabled="readonly" />
+    <ColorPicker
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      inline
+      @update:model-value="onChange"
+    />
   </div>
 </template>
 
@@ -11,19 +18,31 @@
 import ColorPicker from 'primevue/colorpicker'
 import { computed } from 'vue'
 
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import {
   PANEL_EXCLUDED_PROPS,
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
-const value = defineModel<string>({ required: true })
-
 const props = defineProps<{
   widget: SimplifiedWidget<string>
+  modelValue: string
   readonly?: boolean
 }>()
 
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: '#000000',
+  emit
+})
+
 // ColorPicker specific excluded props include panel/overlay classes
 const COLOR_PICKER_EXCLUDED_PROPS = [...PANEL_EXCLUDED_PROPS] as const
 
diff --git a/src/components/graph/vueWidgets/WidgetFileUpload.vue b/src/components/graph/vueWidgets/WidgetFileUpload.vue
index b8908c734f..29cff10c07 100644
--- a/src/components/graph/vueWidgets/WidgetFileUpload.vue
+++ b/src/components/graph/vueWidgets/WidgetFileUpload.vue
@@ -1,66 +1,323 @@
 <template>
-  <div class="flex flex-col gap-1">
-    <label v-if="widget.name" class="text-sm opacity-80">{{
-      widget.name
-    }}</label>
-    <FileUpload
-      v-bind="filteredProps"
-      :disabled="readonly"
-      @upload="handleUpload"
-      @select="handleSelect"
-      @remove="handleRemove"
-      @clear="handleClear"
-      @error="handleError"
-    />
+  <!-- Replace entire widget with image preview when image is loaded -->
+  <!-- Edge-to-edge: -mx-2 removes the parent's p-2 (8px) padding on each side -->
+  <div
+    v-if="hasImageFile"
+    class="relative -mx-2"
+    style="width: calc(100% + 1rem)"
+  >
+    <!-- Select section above image -->
+    <div class="flex items-center justify-between gap-4 mb-2 px-2">
+      <label
+        v-if="widget.name"
+        class="text-xs opacity-80 min-w-[4em] truncate"
+        >{{ widget.name }}</label
+      >
+      <!-- Group select and folder button together on the right -->
+      <div class="flex items-center gap-1">
+        <!-- TODO: finish once we finish value bindings with Litegraph -->
+        <Select
+          :model-value="selectedFile?.name"
+          :options="[selectedFile?.name || '']"
+          :disabled="true"
+          class="min-w-[8em] max-w-[20em] text-xs"
+          size="small"
+          :pt="{
+            option: 'text-xs'
+          }"
+        />
+        <Button
+          icon="pi pi-folder"
+          size="small"
+          class="!w-8 !h-8"
+          :disabled="readonly"
+          @click="triggerFileInput"
+        />
+      </div>
+    </div>
+
+    <!-- Image preview -->
+    <!-- TODO: change hardcoded colors when design system incorporated -->
+    <div class="relative group">
+      <img :src="imageUrl" :alt="selectedFile?.name" class="w-full h-auto" />
+      <!-- Darkening overlay on hover -->
+      <div
+        class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 pointer-events-none"
+      />
+      <!-- Control buttons in top right on hover -->
+      <div
+        v-if="!readonly"
+        class="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+      >
+        <!-- Edit button -->
+        <button
+          class="w-6 h-6 rounded flex items-center justify-center transition-all duration-150 focus:outline-none border-none"
+          style="background-color: #262729"
+          @click="handleEdit"
+        >
+          <i class="pi pi-pencil text-white text-xs"></i>
+        </button>
+        <!-- Delete button -->
+        <button
+          class="w-6 h-6 rounded flex items-center justify-center transition-all duration-150 focus:outline-none border-none"
+          style="background-color: #262729"
+          @click="clearFile"
+        >
+          <i class="pi pi-times text-white text-xs"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Audio preview when audio file is loaded -->
+  <div
+    v-else-if="hasAudioFile"
+    class="relative -mx-2"
+    style="width: calc(100% + 1rem)"
+  >
+    <!-- Select section above audio player -->
+    <div class="flex items-center justify-between gap-4 mb-2 px-2">
+      <label
+        v-if="widget.name"
+        class="text-xs opacity-80 min-w-[4em] truncate"
+        >{{ widget.name }}</label
+      >
+      <!-- Group select and folder button together on the right -->
+      <div class="flex items-center gap-1">
+        <Select
+          :model-value="selectedFile?.name"
+          :options="[selectedFile?.name || '']"
+          :disabled="true"
+          class="min-w-[8em] max-w-[20em] text-xs"
+          size="small"
+          :pt="{
+            option: 'text-xs'
+          }"
+        />
+        <Button
+          icon="pi pi-folder"
+          size="small"
+          class="!w-8 !h-8"
+          :disabled="readonly"
+          @click="triggerFileInput"
+        />
+      </div>
+    </div>
+
+    <!-- Audio player -->
+    <div class="relative group px-2">
+      <div
+        class="bg-[#1a1b1e] rounded-lg p-4 flex items-center gap-4"
+        style="border: 1px solid #262729"
+      >
+        <!-- Audio icon -->
+        <div class="flex-shrink-0">
+          <i class="pi pi-volume-up text-2xl opacity-60"></i>
+        </div>
+
+        <!-- File info and controls -->
+        <div class="flex-1">
+          <div class="text-sm font-medium mb-1">{{ selectedFile?.name }}</div>
+          <div class="text-xs opacity-60">
+            {{
+              selectedFile ? (selectedFile.size / 1024).toFixed(1) + ' KB' : ''
+            }}
+          </div>
+        </div>
+
+        <!-- Control buttons -->
+        <div v-if="!readonly" class="flex gap-1">
+          <!-- Delete button -->
+          <button
+            class="w-8 h-8 rounded flex items-center justify-center transition-all duration-150 focus:outline-none border-none hover:bg-[#262729]"
+            @click="clearFile"
+          >
+            <i class="pi pi-times text-white text-sm"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Show normal file upload UI when no image or audio is loaded -->
+  <div
+    v-else
+    class="flex flex-col gap-1 w-full border border-solid p-1 rounded-lg"
+    :style="{ borderColor: '#262729' }"
+  >
+    <div
+      class="border border-dashed p-1 rounded-md transition-colors duration-200 hover:border-[#5B5E7D]"
+      :style="{ borderColor: '#262729' }"
+    >
+      <div class="flex flex-col items-center gap-2 w-full py-4">
+        <!-- Quick and dirty file type detection for testing -->
+        <span class="text-xs opacity-60"> Drop your file or </span>
+        <div>
+          <Button
+            label="Browse Files"
+            size="small"
+            class="text-xs"
+            :disabled="readonly"
+            @click="triggerFileInput"
+          />
+        </div>
+      </div>
+    </div>
   </div>
+  <!-- Hidden file input always available for both states -->
+  <input
+    ref="fileInputRef"
+    type="file"
+    class="hidden"
+    :accept="widget.options?.accept"
+    :multiple="false"
+    :disabled="readonly"
+    @change="handleFileChange"
+  />
 </template>
 
 <script setup lang="ts">
-import FileUpload from 'primevue/fileupload'
-import { computed } from 'vue'
+import Button from 'primevue/button'
+import Select from 'primevue/select'
+import { computed, onUnmounted, ref, watch } from 'vue'
 
+// import { useI18n } from 'vue-i18n' // Commented out for testing
+
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
-import {
-  STANDARD_EXCLUDED_PROPS,
-  filterWidgetProps
-} from '@/utils/widgetPropFilter'
 
-// FileUpload doesn't have a traditional v-model, it handles files through events
+// const { t } = useI18n() // Commented out for testing
+
 const props = defineProps<{
   widget: SimplifiedWidget<File[] | null>
+  modelValue: File[] | null
   readonly?: boolean
 }>()
 
-const filteredProps = computed(() =>
-  filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
-)
+const emit = defineEmits<{
+  'update:modelValue': [value: File[] | null]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: null,
+  emit
+})
 
-const handleUpload = (event: any) => {
-  if (!props.readonly && props.widget.callback) {
-    props.widget.callback(event.files)
+const fileInputRef = ref<HTMLInputElement | null>(null)
+
+// Since we only support single file, get the first file
+const selectedFile = computed(() => {
+  const files = localValue.value || []
+  return files.length > 0 ? files[0] : null
+})
+
+// Quick file type detection for testing
+const detectFileType = (file: File) => {
+  const type = file.type?.toLowerCase() || ''
+  const name = file.name?.toLowerCase() || ''
+
+  if (
+    type.startsWith('image/') ||
+    name.match(/\.(jpg|jpeg|png|gif|webp|svg)$/)
+  ) {
+    return 'image'
+  }
+  if (type.startsWith('video/') || name.match(/\.(mp4|webm|ogg|mov)$/)) {
+    return 'video'
   }
+  if (type.startsWith('audio/') || name.match(/\.(mp3|wav|ogg|flac)$/)) {
+    return 'audio'
+  }
+  if (type === 'application/pdf' || name.endsWith('.pdf')) {
+    return 'pdf'
+  }
+  if (type.includes('zip') || name.match(/\.(zip|rar|7z|tar|gz)$/)) {
+    return 'archive'
+  }
+  return 'file'
 }
 
-const handleSelect = (event: any) => {
-  if (!props.readonly && props.widget.callback) {
-    props.widget.callback(event.files)
+// Check if we have an image file
+const hasImageFile = computed(() => {
+  return selectedFile.value && detectFileType(selectedFile.value) === 'image'
+})
+
+// Check if we have an audio file
+const hasAudioFile = computed(() => {
+  return selectedFile.value && detectFileType(selectedFile.value) === 'audio'
+})
+
+// Get image URL for preview
+const imageUrl = computed(() => {
+  if (hasImageFile.value && selectedFile.value) {
+    return URL.createObjectURL(selectedFile.value)
+  }
+  return ''
+})
+
+// // Get audio URL for playback
+// const audioUrl = computed(() => {
+//   if (hasAudioFile.value && selectedFile.value) {
+//     return URL.createObjectURL(selectedFile.value)
+//   }
+//   return ''
+// })
+
+// Clean up image URL when file changes
+watch(imageUrl, (newUrl, oldUrl) => {
+  if (oldUrl && oldUrl !== newUrl) {
+    URL.revokeObjectURL(oldUrl)
   }
+})
+
+const triggerFileInput = () => {
+  fileInputRef.value?.click()
 }
 
-const handleRemove = (event: any) => {
-  if (!props.readonly && props.widget.callback) {
-    props.widget.callback(event.files)
+const handleFileChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  if (!props.readonly && target.files && target.files.length > 0) {
+    // Since we only support single file, take the first one
+    const file = target.files[0]
+
+    // Use the composable's onChange handler with an array
+    onChange([file])
+
+    // Reset input to allow selecting same file again
+    target.value = ''
   }
 }
 
-const handleClear = () => {
-  if (!props.readonly && props.widget.callback) {
-    props.widget.callback([])
+const clearFile = () => {
+  // Clear the file
+  onChange(null)
+
+  // Reset file input
+  if (fileInputRef.value) {
+    fileInputRef.value.value = ''
   }
 }
 
-const handleError = (event: any) => {
-  // Could be extended to handle error reporting
-  console.warn('File upload error:', event)
+const handleEdit = () => {
+  // TODO: hook up with maskeditor
 }
+
+// Clear file input when value is cleared externally
+watch(localValue, (newValue) => {
+  if (!newValue || newValue.length === 0) {
+    if (fileInputRef.value) {
+      fileInputRef.value.value = ''
+    }
+  }
+})
+
+// Clean up image URL on unmount
+onUnmounted(() => {
+  if (imageUrl.value) {
+    URL.revokeObjectURL(imageUrl.value)
+  }
+})
 </script>
diff --git a/src/components/graph/vueWidgets/WidgetGalleria.vue b/src/components/graph/vueWidgets/WidgetGalleria.vue
index faa31ce913..3603b7ab67 100644
--- a/src/components/graph/vueWidgets/WidgetGalleria.vue
+++ b/src/components/graph/vueWidgets/WidgetGalleria.vue
@@ -1,17 +1,27 @@
 <template>
   <div class="flex flex-col gap-1">
-    <label v-if="widget.name" class="text-sm opacity-80">{{
-      widget.name
-    }}</label>
     <Galleria
       v-model:activeIndex="activeIndex"
       :value="galleryImages"
       v-bind="filteredProps"
       :disabled="readonly"
       :show-thumbnails="showThumbnails"
-      :show-indicators="showIndicators"
       :show-nav-buttons="showNavButtons"
       class="max-w-full"
+      :pt="{
+        thumbnails: {
+          class: 'overflow-hidden'
+        },
+        thumbnailContent: {
+          class: 'py-4 px-2'
+        },
+        thumbnailPrevButton: {
+          class: 'm-0'
+        },
+        thumbnailNextButton: {
+          class: 'm-0'
+        }
+      }"
     >
       <template #item="{ item }">
         <img
@@ -21,11 +31,13 @@
         />
       </template>
       <template #thumbnail="{ item }">
-        <img
-          :src="item.thumbnailImageSrc || item.src || item"
-          :alt="item.alt || 'Gallery thumbnail'"
-          class="w-16 h-16 object-cover"
-        />
+        <div class="p-1 w-full h-full">
+          <img
+            :src="item.thumbnailImageSrc || item.src || item"
+            :alt="item.alt || 'Gallery thumbnail'"
+            class="w-full h-full object-cover rounded-lg"
+          />
+        </div>
       </template>
     </Galleria>
   </div>
@@ -85,13 +97,6 @@ const showThumbnails = computed(() => {
   )
 })
 
-const showIndicators = computed(() => {
-  return (
-    props.widget.options?.showIndicators !== false &&
-    galleryImages.value.length > 1
-  )
-})
-
 const showNavButtons = computed(() => {
   return (
     props.widget.options?.showNavButtons !== false &&
@@ -99,3 +104,20 @@ const showNavButtons = computed(() => {
   )
 })
 </script>
+
+<style scoped>
+/* Ensure thumbnail container doesn't overflow */
+:deep(.p-galleria-thumbnails) {
+  overflow: hidden;
+}
+
+/* Constrain thumbnail items to prevent overlap */
+:deep(.p-galleria-thumbnail-item) {
+  flex-shrink: 0;
+}
+
+/* Ensure thumbnail wrapper maintains aspect ratio */
+:deep(.p-galleria-thumbnail) {
+  overflow: hidden;
+}
+</style>
diff --git a/src/components/graph/vueWidgets/WidgetImageCompare.vue b/src/components/graph/vueWidgets/WidgetImageCompare.vue
index 30258919c3..e51413a305 100644
--- a/src/components/graph/vueWidgets/WidgetImageCompare.vue
+++ b/src/components/graph/vueWidgets/WidgetImageCompare.vue
@@ -1,172 +1,70 @@
 <template>
-  <div class="flex flex-col gap-1">
-    <label v-if="widget.name" class="text-sm opacity-80">{{
-      widget.name
-    }}</label>
-    <div
-      class="image-compare-container relative overflow-hidden rounded border border-gray-300 dark-theme:border-gray-600"
-    >
-      <div
-        v-if="!beforeImage || !afterImage"
-        class="p-4 text-center text-gray-500 dark-theme:text-gray-400"
-      >
-        Before and after images required
-      </div>
-      <div v-else class="relative">
-        <!-- After image (base layer) -->
-        <Image
-          v-bind="filteredProps"
-          :src="afterImage"
-          class="w-full h-auto"
-          :alt="afterAlt"
-        />
-        <!-- Before image (overlay layer) -->
-        <div
-          class="absolute top-0 left-0 h-full overflow-hidden transition-all duration-300 ease-in-out"
-          :style="{ width: `${sliderPosition}%` }"
-        >
-          <Image
-            v-bind="filteredProps"
-            :src="beforeImage"
-            class="w-full h-auto"
-            :alt="beforeAlt"
-          />
-        </div>
-        <!-- Slider handle -->
-        <div
-          class="absolute top-0 h-full w-0.5 bg-white shadow-lg cursor-col-resize z-10 transition-all duration-100"
-          :style="{ left: `${sliderPosition}%` }"
-          @mousedown="startDrag"
-          @touchstart="startDrag"
-        >
-          <div
-            class="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-8 h-8 bg-white rounded-full shadow-md flex items-center justify-center"
-          >
-            <div class="w-4 h-4 flex items-center justify-center">
-              <div class="w-0.5 h-3 bg-gray-600 mr-0.5"></div>
-              <div class="w-0.5 h-3 bg-gray-600"></div>
-            </div>
-          </div>
-        </div>
-        <!-- Labels -->
-        <div
-          v-if="showLabels"
-          class="absolute top-2 left-2 px-2 py-1 bg-black bg-opacity-50 text-white text-xs rounded"
-        >
-          {{ beforeLabel }}
-        </div>
-        <div
-          v-if="showLabels"
-          class="absolute top-2 right-2 px-2 py-1 bg-black bg-opacity-50 text-white text-xs rounded"
-        >
-          {{ afterLabel }}
-        </div>
-      </div>
-    </div>
-  </div>
+  <ImageCompare
+    :tabindex="widget.options?.tabindex ?? 0"
+    :aria-label="widget.options?.ariaLabel"
+    :aria-labelledby="widget.options?.ariaLabelledby"
+    :pt="widget.options?.pt"
+    :pt-options="widget.options?.ptOptions"
+    :unstyled="widget.options?.unstyled"
+  >
+    <template #left>
+      <img
+        :src="beforeImage"
+        :alt="beforeAlt"
+        class="w-full h-full object-cover"
+      />
+    </template>
+    <template #right>
+      <img
+        :src="afterImage"
+        :alt="afterAlt"
+        class="w-full h-full object-cover"
+      />
+    </template>
+  </ImageCompare>
 </template>
 
 <script setup lang="ts">
-import Image from 'primevue/image'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import ImageCompare from 'primevue/imagecompare'
+import { computed } from 'vue'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
-import {
-  IMAGE_EXCLUDED_PROPS,
-  filterWidgetProps
-} from '@/utils/widgetPropFilter'
 
 interface ImageCompareValue {
   before: string
   after: string
   beforeAlt?: string
   afterAlt?: string
-  beforeLabel?: string
-  afterLabel?: string
-  showLabels?: boolean
   initialPosition?: number
 }
 
 // Image compare widgets typically don't have v-model, they display comparison
 const props = defineProps<{
-  widget: SimplifiedWidget<ImageCompareValue>
+  widget: SimplifiedWidget<ImageCompareValue | string>
   readonly?: boolean
 }>()
 
-const sliderPosition = ref(50) // Default to 50% (middle)
-const isDragging = ref(false)
-
-const filteredProps = computed(() =>
-  filterWidgetProps(props.widget.options, IMAGE_EXCLUDED_PROPS)
-)
-
 const beforeImage = computed(() => {
   const value = props.widget.value
-  return typeof value === 'string' ? value : value?.before
+  return typeof value === 'string' ? value : value?.before || ''
 })
 
 const afterImage = computed(() => {
   const value = props.widget.value
-  return typeof value === 'string' ? value : value?.after
+  return typeof value === 'string' ? '' : value?.after || ''
 })
 
-const beforeAlt = computed(
-  () => props.widget.value?.beforeAlt || 'Before image'
-)
-const afterAlt = computed(() => props.widget.value?.afterAlt || 'After image')
-const beforeLabel = computed(() => props.widget.value?.beforeLabel || 'Before')
-const afterLabel = computed(() => props.widget.value?.afterLabel || 'After')
-const showLabels = computed(() => props.widget.value?.showLabels !== false)
-
-onMounted(() => {
-  if (props.widget.value?.initialPosition !== undefined) {
-    sliderPosition.value = Math.max(
-      0,
-      Math.min(100, props.widget.value.initialPosition)
-    )
-  }
+const beforeAlt = computed(() => {
+  const value = props.widget.value
+  return typeof value === 'object' && value?.beforeAlt
+    ? value.beforeAlt
+    : 'Before image'
 })
 
-const startDrag = (event: MouseEvent | TouchEvent) => {
-  if (props.readonly) return
-
-  isDragging.value = true
-  event.preventDefault()
-
-  const handleMouseMove = (e: MouseEvent | TouchEvent) => {
-    if (!isDragging.value) return
-    updateSliderPosition(e)
-  }
-
-  const handleMouseUp = () => {
-    isDragging.value = false
-    document.removeEventListener('mousemove', handleMouseMove)
-    document.removeEventListener('mouseup', handleMouseUp)
-    document.removeEventListener('touchmove', handleMouseMove)
-    document.removeEventListener('touchend', handleMouseUp)
-  }
-
-  document.addEventListener('mousemove', handleMouseMove)
-  document.addEventListener('mouseup', handleMouseUp)
-  document.addEventListener('touchmove', handleMouseMove)
-  document.addEventListener('touchend', handleMouseUp)
-}
-
-const updateSliderPosition = (event: MouseEvent | TouchEvent) => {
-  const container = (event.target as HTMLElement).closest(
-    '.image-compare-container'
-  )
-  if (!container) return
-
-  const rect = container.getBoundingClientRect()
-  const clientX = 'touches' in event ? event.touches[0].clientX : event.clientX
-  const x = clientX - rect.left
-  const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100))
-
-  sliderPosition.value = percentage
-}
-
-onUnmounted(() => {
-  isDragging.value = false
+const afterAlt = computed(() => {
+  const value = props.widget.value
+  return typeof value === 'object' && value?.afterAlt
+    ? value.afterAlt
+    : 'After image'
 })
 </script>
diff --git a/src/components/graph/vueWidgets/WidgetInputText.vue b/src/components/graph/vueWidgets/WidgetInputText.vue
index 0f46ec3b67..8cb41dfa9b 100644
--- a/src/components/graph/vueWidgets/WidgetInputText.vue
+++ b/src/components/graph/vueWidgets/WidgetInputText.vue
@@ -1,12 +1,14 @@
 <template>
-  <div class="flex flex-col gap-1">
-    <label v-if="widget.name" class="text-sm opacity-80">{{
+  <div class="flex items-center justify-between gap-4">
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
       widget.name
     }}</label>
     <InputText
       v-model="localValue"
       v-bind="filteredProps"
       :disabled="readonly"
+      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      size="small"
       @update:model-value="onChange"
     />
   </div>
diff --git a/src/components/graph/vueWidgets/WidgetMarkdown.vue b/src/components/graph/vueWidgets/WidgetMarkdown.vue
new file mode 100644
index 0000000000..4749e561cd
--- /dev/null
+++ b/src/components/graph/vueWidgets/WidgetMarkdown.vue
@@ -0,0 +1,95 @@
+<template>
+  <div
+    class="widget-markdown relative w-full cursor-text"
+    @click="startEditing"
+  >
+    <!-- Display mode: Rendered markdown -->
+    <div
+      v-if="!isEditing"
+      class="comfy-markdown-content text-xs min-h-[60px] rounded-lg px-4 py-2 overflow-y-auto"
+      v-html="renderedHtml"
+    />
+
+    <!-- Edit mode: Textarea -->
+    <Textarea
+      v-else
+      ref="textareaRef"
+      v-model="localValue"
+      :disabled="readonly"
+      class="w-full text-xs"
+      size="small"
+      rows="6"
+      :pt="{
+        root: {
+          onBlur: handleBlur
+        }
+      }"
+      @update:model-value="onChange"
+      @click.stop
+      @keydown.stop
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Textarea from 'primevue/textarea'
+import { computed, nextTick, ref } from 'vue'
+
+import { useStringWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string>
+  modelValue: string
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+// State
+const isEditing = ref(false)
+const textareaRef = ref<InstanceType<typeof Textarea> | undefined>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useStringWidgetValue(
+  props.widget,
+  props.modelValue,
+  emit
+)
+
+// Computed
+const renderedHtml = computed(() => {
+  return renderMarkdownToHtml(localValue.value || '')
+})
+
+// Methods
+const startEditing = async () => {
+  if (props.readonly || isEditing.value) return
+
+  isEditing.value = true
+  await nextTick()
+
+  // Focus the textarea
+  // @ts-expect-error - $el is an internal property of the Textarea component
+  textareaRef.value?.$el?.focus()
+}
+
+const handleBlur = () => {
+  isEditing.value = false
+}
+</script>
+
+<style scoped>
+.widget-markdown {
+  background-color: var(--p-muted-color);
+  border: 1px solid var(--p-border-color);
+  border-radius: var(--p-border-radius);
+}
+
+.widget-markdown:hover:not(:has(textarea)) {
+  background-color: var(--p-content-hover-background);
+}
+</style>
diff --git a/src/components/graph/vueWidgets/WidgetMultiSelect.vue b/src/components/graph/vueWidgets/WidgetMultiSelect.vue
index 5d81776f9f..d90bc3ac77 100644
--- a/src/components/graph/vueWidgets/WidgetMultiSelect.vue
+++ b/src/components/graph/vueWidgets/WidgetMultiSelect.vue
@@ -1,9 +1,19 @@
 <template>
-  <div class="flex flex-col gap-1">
-    <label v-if="widget.name" class="text-sm opacity-80">{{
+  <div class="flex items-center justify-between gap-4">
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
       widget.name
     }}</label>
-    <MultiSelect v-model="value" v-bind="filteredProps" :disabled="readonly" />
+    <MultiSelect
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      size="small"
+      :pt="{
+        option: 'text-xs'
+      }"
+      @update:model-value="onChange"
+    />
   </div>
 </template>
 
@@ -11,19 +21,31 @@
 import MultiSelect from 'primevue/multiselect'
 import { computed } from 'vue'
 
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import {
   PANEL_EXCLUDED_PROPS,
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
-const value = defineModel<any[]>({ required: true })
-
 const props = defineProps<{
   widget: SimplifiedWidget<any[]>
+  modelValue: any[]
   readonly?: boolean
 }>()
 
+const emit = defineEmits<{
+  'update:modelValue': [value: any[]]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: [],
+  emit
+})
+
 // MultiSelect specific excluded props include overlay styles
 const MULTISELECT_EXCLUDED_PROPS = [
   ...PANEL_EXCLUDED_PROPS,
diff --git a/src/components/graph/vueWidgets/WidgetSelect.vue b/src/components/graph/vueWidgets/WidgetSelect.vue
index 57f3d75697..710fa8a719 100644
--- a/src/components/graph/vueWidgets/WidgetSelect.vue
+++ b/src/components/graph/vueWidgets/WidgetSelect.vue
@@ -1,6 +1,9 @@
 <template>
-  <div class="flex flex-col gap-1">
-    <label v-if="widget.name" class="text-sm opacity-80">{{
+  <div
+    class="flex items-center justify-between gap-4"
+    :style="{ height: widgetHeight + 'px' }"
+  >
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
       widget.name
     }}</label>
     <Select
@@ -8,6 +11,11 @@
       :options="selectOptions"
       v-bind="filteredProps"
       :disabled="readonly"
+      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      size="small"
+      :pt="{
+        option: 'text-xs'
+      }"
       @update:model-value="onChange"
     />
   </div>
@@ -24,6 +32,8 @@ import {
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
+import { COMFY_VUE_NODE_DIMENSIONS } from '../../../lib/litegraph/src/litegraph'
+
 const props = defineProps<{
   widget: SimplifiedWidget<string | number | undefined>
   modelValue: string | number | undefined
@@ -42,6 +52,9 @@ const { localValue, onChange } = useWidgetValue({
   emit
 })
 
+// Get widget height from litegraph constants
+const widgetHeight = COMFY_VUE_NODE_DIMENSIONS.components.STANDARD_WIDGET_HEIGHT
+
 const filteredProps = computed(() =>
   filterWidgetProps(props.widget.options, PANEL_EXCLUDED_PROPS)
 )
diff --git a/src/components/graph/vueWidgets/WidgetSelectButton.vue b/src/components/graph/vueWidgets/WidgetSelectButton.vue
index 6523bc21c4..95ae3b0ef2 100644
--- a/src/components/graph/vueWidgets/WidgetSelectButton.vue
+++ b/src/components/graph/vueWidgets/WidgetSelectButton.vue
@@ -1,9 +1,20 @@
 <template>
-  <div class="flex flex-col gap-1">
-    <label v-if="widget.name" class="text-sm opacity-80">{{
+  <div class="flex items-center justify-between gap-4">
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
       widget.name
     }}</label>
-    <SelectButton v-model="value" v-bind="filteredProps" :disabled="readonly" />
+    <SelectButton
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      :pt="{
+        pcToggleButton: {
+          label: 'text-xs'
+        }
+      }"
+      @update:model-value="onChange"
+    />
   </div>
 </template>
 
@@ -11,20 +22,42 @@
 import SelectButton from 'primevue/selectbutton'
 import { computed } from 'vue'
 
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import {
   STANDARD_EXCLUDED_PROPS,
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
-const value = defineModel<any>({ required: true })
-
 const props = defineProps<{
   widget: SimplifiedWidget<any>
+  modelValue: any
   readonly?: boolean
 }>()
 
+const emit = defineEmits<{
+  'update:modelValue': [value: any]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: null,
+  emit
+})
+
 const filteredProps = computed(() =>
   filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
 )
 </script>
+
+<style scoped>
+:deep(.p-selectbutton) {
+  border: 1px solid transparent;
+}
+
+:deep(.p-selectbutton:hover) {
+  border-color: currentColor;
+}
+</style>
diff --git a/src/components/graph/vueWidgets/WidgetSlider.vue b/src/components/graph/vueWidgets/WidgetSlider.vue
index bfbda9f833..612a023133 100644
--- a/src/components/graph/vueWidgets/WidgetSlider.vue
+++ b/src/components/graph/vueWidgets/WidgetSlider.vue
@@ -1,20 +1,36 @@
 <template>
-  <div class="flex flex-col gap-1">
-    <label v-if="widget.name" class="text-sm opacity-80">{{
+  <div class="flex items-center gap-4" :style="{ height: widgetHeight + 'px' }">
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
       widget.name
     }}</label>
-    <Slider
-      v-model="localValue"
-      v-bind="filteredProps"
-      :disabled="readonly"
-      @update:model-value="onChange"
-    />
+    <div class="flex items-center gap-2 flex-1 justify-end">
+      <Slider
+        v-model="localValue"
+        v-bind="filteredProps"
+        :disabled="readonly"
+        class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+        @update:model-value="onChange"
+      />
+      <InputText
+        v-model="inputDisplayValue"
+        :disabled="readonly"
+        type="number"
+        :min="widget.options?.min"
+        :max="widget.options?.max"
+        :step="stepValue"
+        class="w-[4em] text-center text-xs px-0"
+        size="small"
+        @blur="handleInputBlur"
+        @keydown="handleInputKeydown"
+      />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import InputText from 'primevue/inputtext'
 import Slider from 'primevue/slider'
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 import { useNumberWidgetValue } from '@/composables/graph/useWidgetValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
@@ -23,6 +39,8 @@ import {
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
+import { COMFY_VUE_NODE_DIMENSIONS } from '../../../lib/litegraph/src/litegraph'
+
 const props = defineProps<{
   widget: SimplifiedWidget<number>
   modelValue: number
@@ -40,7 +58,113 @@ const { localValue, onChange } = useNumberWidgetValue(
   emit
 )
 
+// Get widget height from litegraph constants
+const widgetHeight = COMFY_VUE_NODE_DIMENSIONS.components.STANDARD_WIDGET_HEIGHT
+
 const filteredProps = computed(() =>
   filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
 )
+
+// Get the precision value for proper number formatting
+const precision = computed(() => {
+  const p = props.widget.options?.precision
+  // Treat negative or non-numeric precision as undefined
+  return typeof p === 'number' && p >= 0 ? p : undefined
+})
+
+// Calculate the step value based on precision or widget options
+const stepValue = computed(() => {
+  // If step is explicitly defined in options, use it
+  if (props.widget.options?.step !== undefined) {
+    return String(props.widget.options.step)
+  }
+  // Otherwise, derive from precision
+  if (precision.value !== undefined) {
+    if (precision.value === 0) {
+      return '1'
+    }
+    // For precision > 0, step = 1 / (10^precision)
+    // precision 1 → 0.1, precision 2 → 0.01, etc.
+    return (1 / Math.pow(10, precision.value)).toFixed(precision.value)
+  }
+  // Default to 'any' for unrestricted stepping
+  return 'any'
+})
+
+// Format a number according to the widget's precision
+const formatNumber = (value: number): string => {
+  if (precision.value === undefined) {
+    // No precision specified, return as-is
+    return String(value)
+  }
+  // Use toFixed to ensure correct decimal places
+  return value.toFixed(precision.value)
+}
+
+// Apply precision-based rounding to a number
+const applyPrecision = (value: number): number => {
+  if (precision.value === undefined) {
+    // No precision specified, return as-is
+    return value
+  }
+  if (precision.value === 0) {
+    // Integer precision
+    return Math.round(value)
+  }
+  // Round to the specified decimal places
+  const multiplier = Math.pow(10, precision.value)
+  return Math.round(value * multiplier) / multiplier
+}
+
+// Keep a separate display value for the input field
+const inputDisplayValue = ref(formatNumber(localValue.value))
+
+// Update display value when localValue changes from external sources
+watch(localValue, (newValue) => {
+  inputDisplayValue.value = formatNumber(newValue)
+})
+
+const handleInputBlur = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const value = target.value || '0'
+  const parsed = parseFloat(value)
+
+  if (!isNaN(parsed)) {
+    // Apply precision-based rounding
+    const roundedValue = applyPrecision(parsed)
+    onChange(roundedValue)
+    // Update display value with proper formatting
+    inputDisplayValue.value = formatNumber(roundedValue)
+  }
+}
+
+const handleInputKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Enter') {
+    const target = event.target as HTMLInputElement
+    const value = target.value || '0'
+    const parsed = parseFloat(value)
+
+    if (!isNaN(parsed)) {
+      // Apply precision-based rounding
+      const roundedValue = applyPrecision(parsed)
+      onChange(roundedValue)
+      // Update display value with proper formatting
+      inputDisplayValue.value = formatNumber(roundedValue)
+    }
+  }
+}
 </script>
+
+<style scoped>
+/* Remove number input spinners */
+:deep(input[type='number']::-webkit-inner-spin-button),
+:deep(input[type='number']::-webkit-outer-spin-button) {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+:deep(input[type='number']) {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+</style>
diff --git a/src/components/graph/vueWidgets/WidgetTextarea.vue b/src/components/graph/vueWidgets/WidgetTextarea.vue
index e6ba1730f4..2b994432d7 100644
--- a/src/components/graph/vueWidgets/WidgetTextarea.vue
+++ b/src/components/graph/vueWidgets/WidgetTextarea.vue
@@ -1,29 +1,43 @@
 <template>
-  <div class="flex flex-col gap-1">
-    <label v-if="widget.name" class="text-sm opacity-80">{{
-      widget.name
-    }}</label>
-    <Textarea v-model="value" v-bind="filteredProps" :disabled="readonly" />
-  </div>
+  <Textarea
+    v-model="localValue"
+    v-bind="filteredProps"
+    :disabled="readonly"
+    class="w-full text-xs"
+    size="small"
+    rows="3"
+    @update:model-value="onChange"
+  />
 </template>
 
 <script setup lang="ts">
 import Textarea from 'primevue/textarea'
 import { computed } from 'vue'
 
+import { useStringWidgetValue } from '@/composables/graph/useWidgetValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import {
   INPUT_EXCLUDED_PROPS,
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
-const value = defineModel<string>({ required: true })
-
 const props = defineProps<{
   widget: SimplifiedWidget<string>
+  modelValue: string
   readonly?: boolean
 }>()
 
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useStringWidgetValue(
+  props.widget,
+  props.modelValue,
+  emit
+)
+
 const filteredProps = computed(() =>
   filterWidgetProps(props.widget.options, INPUT_EXCLUDED_PROPS)
 )
diff --git a/src/components/graph/vueWidgets/WidgetToggleSwitch.vue b/src/components/graph/vueWidgets/WidgetToggleSwitch.vue
index 83faa57bc1..7fee347aec 100644
--- a/src/components/graph/vueWidgets/WidgetToggleSwitch.vue
+++ b/src/components/graph/vueWidgets/WidgetToggleSwitch.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex flex-col gap-1">
-    <label v-if="widget.name" class="text-sm opacity-80">{{
+  <div class="flex items-center justify-between gap-4">
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
       widget.name
     }}</label>
     <ToggleSwitch
@@ -44,3 +44,13 @@ const filteredProps = computed(() =>
   filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
 )
 </script>
+
+<style scoped>
+:deep(.p-toggleswitch .p-toggleswitch-slider) {
+  border: 1px solid transparent;
+}
+
+:deep(.p-toggleswitch:hover .p-toggleswitch-slider) {
+  border-color: currentColor;
+}
+</style>
diff --git a/src/components/graph/vueWidgets/WidgetTreeSelect.vue b/src/components/graph/vueWidgets/WidgetTreeSelect.vue
index 412cda05e1..990af664e1 100644
--- a/src/components/graph/vueWidgets/WidgetTreeSelect.vue
+++ b/src/components/graph/vueWidgets/WidgetTreeSelect.vue
@@ -1,9 +1,16 @@
 <template>
-  <div class="flex flex-col gap-1">
-    <label v-if="widget.name" class="text-sm opacity-80">{{
+  <div class="flex items-center justify-between gap-4">
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
       widget.name
     }}</label>
-    <TreeSelect v-model="value" v-bind="filteredProps" :disabled="readonly" />
+    <TreeSelect
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      size="small"
+      @update:model-value="onChange"
+    />
   </div>
 </template>
 
@@ -11,19 +18,31 @@
 import TreeSelect from 'primevue/treeselect'
 import { computed } from 'vue'
 
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import {
   PANEL_EXCLUDED_PROPS,
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
-const value = defineModel<any>({ required: true })
-
 const props = defineProps<{
   widget: SimplifiedWidget<any>
+  modelValue: any
   readonly?: boolean
 }>()
 
+const emit = defineEmits<{
+  'update:modelValue': [value: any]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: null,
+  emit
+})
+
 // TreeSelect specific excluded props
 const TREE_SELECT_EXCLUDED_PROPS = [
   ...PANEL_EXCLUDED_PROPS,
diff --git a/src/components/graph/vueWidgets/widgetRegistry.ts b/src/components/graph/vueWidgets/widgetRegistry.ts
index 0eede8b8dc..295acdfd1a 100644
--- a/src/components/graph/vueWidgets/widgetRegistry.ts
+++ b/src/components/graph/vueWidgets/widgetRegistry.ts
@@ -12,6 +12,7 @@ import WidgetGalleria from './WidgetGalleria.vue'
 import WidgetImage from './WidgetImage.vue'
 import WidgetImageCompare from './WidgetImageCompare.vue'
 import WidgetInputText from './WidgetInputText.vue'
+import WidgetMarkdown from './WidgetMarkdown.vue'
 import WidgetMultiSelect from './WidgetMultiSelect.vue'
 import WidgetSelect from './WidgetSelect.vue'
 import WidgetSelectButton from './WidgetSelectButton.vue'
@@ -42,7 +43,8 @@ export enum WidgetType {
   IMAGECOMPARE = 'IMAGECOMPARE',
   GALLERIA = 'GALLERIA',
   FILEUPLOAD = 'FILEUPLOAD',
-  TREESELECT = 'TREESELECT'
+  TREESELECT = 'TREESELECT',
+  MARKDOWN = 'MARKDOWN'
 }
 
 /**
@@ -69,7 +71,8 @@ export const widgetTypeToComponent: Record<string, Component> = {
   [WidgetType.IMAGECOMPARE]: WidgetImageCompare,
   [WidgetType.GALLERIA]: WidgetGalleria,
   [WidgetType.FILEUPLOAD]: WidgetFileUpload,
-  [WidgetType.TREESELECT]: WidgetTreeSelect
+  [WidgetType.TREESELECT]: WidgetTreeSelect,
+  [WidgetType.MARKDOWN]: WidgetMarkdown
 }
 
 /**
diff --git a/src/components/graph/widgets/TextPreviewWidget.vue b/src/components/graph/widgets/TextPreviewWidget.vue
index 8d161b8e30..579ce6dab2 100644
--- a/src/components/graph/widgets/TextPreviewWidget.vue
+++ b/src/components/graph/widgets/TextPreviewWidget.vue
@@ -12,13 +12,14 @@
 </template>
 
 <script setup lang="ts">
-import { NodeId } from '@comfyorg/litegraph'
 import Skeleton from 'primevue/skeleton'
 import { computed, onMounted, ref, watch } from 'vue'
 
 import { useExecutionStore } from '@/stores/executionStore'
 import { linkifyHtml, nl2br } from '@/utils/formatUtil'
 
+import { NodeId } from '../../../lib/litegraph/src/litegraph'
+
 const modelValue = defineModel<string>({ required: true })
 defineProps<{
   widget?: object
diff --git a/src/components/load3d/Load3DScene.vue b/src/components/load3d/Load3DScene.vue
index b9d385143f..d9d1e5990b 100644
--- a/src/components/load3d/Load3DScene.vue
+++ b/src/components/load3d/Load3DScene.vue
@@ -5,7 +5,6 @@
 </template>
 
 <script setup lang="ts">
-import { LGraphNode } from '@comfyorg/litegraph'
 import { onMounted, onUnmounted, ref, toRaw, watch } from 'vue'
 
 import LoadingOverlay from '@/components/load3d/LoadingOverlay.vue'
@@ -20,6 +19,8 @@ import { t } from '@/i18n'
 import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { useLoad3dService } from '@/services/load3dService'
 
+import { LGraphNode } from '../../lib/litegraph/src/litegraph'
+
 const props = defineProps<{
   node: LGraphNode
   inputSpec: CustomInputSpec
diff --git a/src/components/load3d/controls/RecordingControls.vue b/src/components/load3d/controls/RecordingControls.vue
index 9eb305a47d..884999259f 100644
--- a/src/components/load3d/controls/RecordingControls.vue
+++ b/src/components/load3d/controls/RecordingControls.vue
@@ -75,13 +75,14 @@
 </template>
 
 <script setup lang="ts">
-import { LGraphNode } from '@comfyorg/litegraph'
 import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
 
 import { t } from '@/i18n'
 import { useLoad3dService } from '@/services/load3dService'
 
+import { LGraphNode } from '../../../lib/litegraph/src/litegraph'
+
 const vTooltip = Tooltip
 
 const { hasRecording, isRecording, node, recordingDuration } = defineProps<{
diff --git a/src/components/searchbox/NodeSearchBoxPopover.vue b/src/components/searchbox/NodeSearchBoxPopover.vue
index ad4618989f..3cb759b1a9 100644
--- a/src/components/searchbox/NodeSearchBoxPopover.vue
+++ b/src/components/searchbox/NodeSearchBoxPopover.vue
@@ -33,13 +33,6 @@
 </template>
 
 <script setup lang="ts">
-import {
-  LGraphNode,
-  LiteGraph,
-  LiteGraphCanvasEvent
-} from '@comfyorg/litegraph'
-import { Point } from '@comfyorg/litegraph/dist/interfaces'
-import type { CanvasPointerEvent } from '@comfyorg/litegraph/dist/types/events'
 import { useEventListener } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import Dialog from 'primevue/dialog'
@@ -54,6 +47,13 @@ import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { LinkReleaseTriggerAction } from '@/types/searchBoxTypes'
 import { FuseFilterWithValue } from '@/utils/fuseUtil'
 
+import { Point } from '../../lib/litegraph/src/interfaces'
+import {
+  LGraphNode,
+  LiteGraph,
+  LiteGraphCanvasEvent
+} from '../../lib/litegraph/src/litegraph'
+import type { CanvasPointerEvent } from '../../lib/litegraph/src/types/events'
 import NodeSearchBox from './NodeSearchBox.vue'
 
 let triggerEvent: CanvasPointerEvent | null = null
diff --git a/src/composables/element/useAbsolutePosition.ts b/src/composables/element/useAbsolutePosition.ts
index d334af7c7d..ec38ff9a56 100644
--- a/src/composables/element/useAbsolutePosition.ts
+++ b/src/composables/element/useAbsolutePosition.ts
@@ -1,9 +1,10 @@
-import type { Size, Vector2 } from '@comfyorg/litegraph'
 import { CSSProperties, ref } from 'vue'
 
 import { useCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
 import { useCanvasStore } from '@/stores/graphStore'
 
+import type { Size, Vector2 } from '../../lib/litegraph/src/litegraph'
+
 export interface PositionConfig {
   /* The position of the element on litegraph canvas */
   pos: Vector2
diff --git a/src/composables/element/useCanvasPositionConversion.ts b/src/composables/element/useCanvasPositionConversion.ts
index 77e86ddec0..83191d1743 100644
--- a/src/composables/element/useCanvasPositionConversion.ts
+++ b/src/composables/element/useCanvasPositionConversion.ts
@@ -1,6 +1,7 @@
-import type { LGraphCanvas, Vector2 } from '@comfyorg/litegraph'
 import { useElementBounding } from '@vueuse/core'
 
+import type { LGraphCanvas, Vector2 } from '../../lib/litegraph/src/litegraph'
+
 /**
  * Convert between canvas and client positions
  * @param canvasElement - The canvas element
diff --git a/src/composables/element/useTransformState.ts b/src/composables/element/useTransformState.ts
index 2668b0abf8..5192bd6df4 100644
--- a/src/composables/element/useTransformState.ts
+++ b/src/composables/element/useTransformState.ts
@@ -49,9 +49,10 @@
  * const screenPos = canvasToScreen({ x: nodeX, y: nodeY })
  * ```
  */
-import type { LGraphCanvas } from '@comfyorg/litegraph'
 import { computed, reactive, readonly } from 'vue'
 
+import type { LGraphCanvas } from '../../lib/litegraph/src/litegraph'
+
 export interface Point {
   x: number
   y: number
diff --git a/src/composables/graph/useCanvasTransformSync.ts b/src/composables/graph/useCanvasTransformSync.ts
index 00fc9866f5..3e382492b1 100644
--- a/src/composables/graph/useCanvasTransformSync.ts
+++ b/src/composables/graph/useCanvasTransformSync.ts
@@ -1,6 +1,7 @@
-import type { LGraphCanvas } from '@comfyorg/litegraph'
 import { onUnmounted, ref } from 'vue'
 
+import type { LGraphCanvas } from '../../lib/litegraph/src/litegraph'
+
 export interface CanvasTransformSyncOptions {
   /**
    * Whether to automatically start syncing when canvas is available
diff --git a/src/composables/graph/useEventForwarding.ts b/src/composables/graph/useEventForwarding.ts
new file mode 100644
index 0000000000..7bceb4758b
--- /dev/null
+++ b/src/composables/graph/useEventForwarding.ts
@@ -0,0 +1,186 @@
+import { useCanvasStore } from '@/stores/graphStore'
+
+import type { LGraphCanvas } from '../../lib/litegraph/src/litegraph'
+
+export function useEventForwarding() {
+  const canvasStore = useCanvasStore()
+
+  // Track active drag operation
+  let isDragging = false
+  let dragCleanup: (() => void) | null = null
+  // Store last known position for escape key handling
+  const lastPointerPosition = { x: 0, y: 0 }
+
+  function createSyntheticPointerEvent(
+    originalEvent: PointerEvent,
+    eventType: string
+  ): PointerEvent {
+    // Only copy properties that LiteGraph actually uses
+    return new PointerEvent(eventType, {
+      bubbles: true,
+      cancelable: true,
+      view: window,
+      // Position properties
+      clientX: originalEvent.clientX,
+      clientY: originalEvent.clientY,
+      // Modifier keys
+      ctrlKey: originalEvent.ctrlKey,
+      shiftKey: originalEvent.shiftKey,
+      altKey: originalEvent.altKey,
+      metaKey: originalEvent.metaKey,
+      // Button state
+      button: originalEvent.button,
+      buttons: originalEvent.buttons,
+      // Pointer tracking
+      pointerId: originalEvent.pointerId,
+      isPrimary: originalEvent.isPrimary,
+      pointerType: originalEvent.pointerType
+    })
+  }
+
+  function forwardPointerEvent(
+    originalEvent: PointerEvent,
+    eventType: 'down' | 'move' | 'up'
+  ) {
+    const canvas: LGraphCanvas | null = canvasStore.getCanvas()
+    if (!canvas) {
+      console.warn('No canvas available for event forwarding')
+      return
+    }
+
+    // Prevent original event from bubbling to canvas
+    originalEvent.stopPropagation()
+    originalEvent.preventDefault()
+
+    // Create synthetic event
+    const syntheticEvent = createSyntheticPointerEvent(
+      originalEvent,
+      `pointer${eventType}`
+    )
+
+    // Create a mutable copy of the event for LiteGraph to modify
+    const mutableEvent = syntheticEvent as PointerEvent & {
+      canvasX?: number
+      canvasY?: number
+      deltaX?: number
+      deltaY?: number
+      safeOffsetX?: number
+      safeOffsetY?: number
+    }
+
+    // Let LiteGraph adjust coordinates to graph space
+    // Using 'as any' to bypass TypeScript assertion limitations
+    ;(canvas.adjustMouseEvent as any)(mutableEvent)
+
+    // Forward to appropriate handler
+    switch (eventType) {
+      case 'down':
+        canvas.processMouseDown(mutableEvent)
+        break
+      case 'move':
+        canvas.processMouseMove(mutableEvent)
+        break
+      case 'up':
+        canvas.processMouseUp(mutableEvent)
+        break
+    }
+  }
+
+  // Pre-create event handlers to avoid recreating on each pointerdown
+  const handlePointerMove = (e: PointerEvent) => {
+    if (!isDragging) return
+    // Update last known position
+    lastPointerPosition.x = e.clientX
+    lastPointerPosition.y = e.clientY
+    forwardPointerEvent(e, 'move')
+  }
+
+  const handlePointerUp = (e: PointerEvent) => {
+    if (!isDragging) return
+
+    isDragging = false
+    forwardPointerEvent(e, 'up')
+
+    // Clean up listeners
+    if (dragCleanup) {
+      dragCleanup()
+      dragCleanup = null
+    }
+  }
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    // Handle escape key to cancel drag
+    if (e.key === 'Escape' && isDragging) {
+      isDragging = false
+
+      // Create minimal synthetic cancel event
+      const cancelEvent = new PointerEvent('pointerup', {
+        bubbles: true,
+        cancelable: true,
+        view: window,
+        // Use last known position from the current drag operation
+        clientX: lastPointerPosition.x,
+        clientY: lastPointerPosition.y,
+        button: 0,
+        buttons: 0
+      })
+
+      const canvas: LGraphCanvas | null = canvasStore.getCanvas()
+      if (canvas) {
+        const mutableCancelEvent = cancelEvent as PointerEvent & {
+          canvasX?: number
+          canvasY?: number
+          deltaX?: number
+          deltaY?: number
+          safeOffsetX?: number
+          safeOffsetY?: number
+        }
+        ;(canvas.adjustMouseEvent as any)(mutableCancelEvent)
+        canvas.processMouseUp(mutableCancelEvent)
+      }
+
+      // Clean up
+      if (dragCleanup) {
+        dragCleanup()
+        dragCleanup = null
+      }
+    }
+  }
+
+  function handleSlotPointerDown(originalEvent: PointerEvent) {
+    // Forward the initial pointer down
+    forwardPointerEvent(originalEvent, 'down')
+
+    // Set up drag handling
+    isDragging = true
+    // Initialize last known position
+    lastPointerPosition.x = originalEvent.clientX
+    lastPointerPosition.y = originalEvent.clientY
+
+    // Add global listeners for drag handling
+    document.addEventListener('pointermove', handlePointerMove, true)
+    document.addEventListener('pointerup', handlePointerUp, true)
+    document.addEventListener('keydown', handleKeyDown, true)
+
+    // Store cleanup function
+    dragCleanup = () => {
+      document.removeEventListener('pointermove', handlePointerMove, true)
+      document.removeEventListener('pointerup', handlePointerUp, true)
+      document.removeEventListener('keydown', handleKeyDown, true)
+    }
+  }
+
+  // Cleanup on unmount
+  function cleanup() {
+    isDragging = false
+    if (dragCleanup) {
+      dragCleanup()
+      dragCleanup = null
+    }
+  }
+
+  return {
+    handleSlotPointerDown,
+    cleanup
+  }
+}
diff --git a/src/composables/graph/useGraphNodeManager.ts b/src/composables/graph/useGraphNodeManager.ts
index 2d25bc6e94..d6304bdcca 100644
--- a/src/composables/graph/useGraphNodeManager.ts
+++ b/src/composables/graph/useGraphNodeManager.ts
@@ -2,12 +2,12 @@
  * Vue node lifecycle management for LiteGraph integration
  * Provides event-driven reactivity with performance optimizations
  */
-import type { LGraph, LGraphNode } from '@comfyorg/litegraph'
 import { nextTick, reactive, readonly } from 'vue'
 
 import type { WidgetValue } from '@/types/simplifiedWidget'
 import type { SpatialIndexDebugInfo } from '@/types/spatialIndex'
 
+import type { LGraph, LGraphNode } from '../../lib/litegraph/src/litegraph'
 import { type Bounds, QuadTree } from '../../utils/spatial/QuadTree'
 
 export interface NodeState {
@@ -274,29 +274,41 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
     originalCallback: ((value: unknown) => void) | undefined,
     nodeId: string
   ) => {
+    let updateInProgress = false
+
     return (value: unknown) => {
-      // 1. Update the widget value in LiteGraph (critical for LiteGraph state)
-      // Validate that the value is of an acceptable type
-      if (
-        value !== null &&
-        value !== undefined &&
-        typeof value !== 'string' &&
-        typeof value !== 'number' &&
-        typeof value !== 'boolean' &&
-        typeof value !== 'object'
-      ) {
-        console.warn(`Invalid widget value type: ${typeof value}`)
-        return
-      }
-      widget.value = value
+      if (updateInProgress) return
+      updateInProgress = true
 
-      // 2. Call the original callback if it exists
-      if (originalCallback) {
-        originalCallback.call(widget, value)
-      }
+      try {
+        // 1. Update the widget value in LiteGraph (critical for LiteGraph state)
+        // Validate that the value is of an acceptable type
+        if (
+          value !== null &&
+          value !== undefined &&
+          typeof value !== 'string' &&
+          typeof value !== 'number' &&
+          typeof value !== 'boolean' &&
+          typeof value !== 'object'
+        ) {
+          console.warn(`Invalid widget value type: ${typeof value}`)
+          updateInProgress = false
+          return
+        }
+
+        // Always update widget.value to ensure sync
+        widget.value = value
 
-      // 3. Update Vue state to maintain synchronization
-      updateVueWidgetState(nodeId, widget.name, value)
+        // 2. Call the original callback if it exists
+        if (originalCallback) {
+          originalCallback.call(widget, value)
+        }
+
+        // 3. Update Vue state to maintain synchronization
+        updateVueWidgetState(nodeId, widget.name, value)
+      } finally {
+        updateInProgress = false
+      }
     }
   }
 
diff --git a/src/composables/graph/useWidgetRenderer.ts b/src/composables/graph/useWidgetRenderer.ts
index 40b2f19f02..762d9affa3 100644
--- a/src/composables/graph/useWidgetRenderer.ts
+++ b/src/composables/graph/useWidgetRenderer.ts
@@ -35,22 +35,29 @@ const TYPE_TO_ENUM_MAP: Record<string, string> = {
   // Multiline text
   multiline: WidgetType.TEXTAREA,
   textarea: WidgetType.TEXTAREA,
+  customtext: WidgetType.TEXTAREA,
+  MARKDOWN: WidgetType.MARKDOWN,
 
   // Advanced widgets
   color: WidgetType.COLOR,
   COLOR: WidgetType.COLOR,
   image: WidgetType.IMAGE,
   IMAGE: WidgetType.IMAGE,
+  imagecompare: WidgetType.IMAGECOMPARE,
+  IMAGECOMPARE: WidgetType.IMAGECOMPARE,
+  galleria: WidgetType.GALLERIA,
+  GALLERIA: WidgetType.GALLERIA,
   file: WidgetType.FILEUPLOAD,
+  fileupload: WidgetType.FILEUPLOAD,
   FILEUPLOAD: WidgetType.FILEUPLOAD,
 
   // Button widget
   button: WidgetType.BUTTON,
   BUTTON: WidgetType.BUTTON,
 
-  // Text-based widgets that don't have dedicated components yet
-  MARKDOWN: WidgetType.TEXTAREA, // Markdown should use textarea for now
-  customtext: WidgetType.TEXTAREA // Custom text widgets use textarea for multiline
+  // Chart widget
+  chart: WidgetType.CHART,
+  CHART: WidgetType.CHART
 } as const
 
 /**
diff --git a/src/composables/graph/useWidgetValue.ts b/src/composables/graph/useWidgetValue.ts
index ea957308ed..1cf2fb3530 100644
--- a/src/composables/graph/useWidgetValue.ts
+++ b/src/composables/graph/useWidgetValue.ts
@@ -81,11 +81,6 @@ export function useWidgetValue<T extends WidgetValue = WidgetValue, U = T>({
 
     // 2. Emit to parent component
     emit('update:modelValue', processedValue)
-
-    // 3. Call LiteGraph callback to update authoritative state
-    if (widget.callback) {
-      widget.callback(processedValue)
-    }
   }
 
   // Watch for external updates from LiteGraph
diff --git a/src/composables/node/useNodeAnimatedImage.ts b/src/composables/node/useNodeAnimatedImage.ts
index 3dabb8e9b4..1c4feee3d5 100644
--- a/src/composables/node/useNodeAnimatedImage.ts
+++ b/src/composables/node/useNodeAnimatedImage.ts
@@ -1,10 +1,10 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
-import type { IWidget } from '@comfyorg/litegraph/dist/types/widgets'
-
 import { ANIM_PREVIEW_WIDGET } from '@/scripts/app'
 import { createImageHost } from '@/scripts/ui/imagePreview'
 import { fitDimensionsToNodeWidth } from '@/utils/imageUtil'
 
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import type { IWidget } from '../../lib/litegraph/src/types/widgets'
+
 /**
  * Composable for handling animated image previews in nodes
  */
diff --git a/src/composables/node/useNodeBadge.ts b/src/composables/node/useNodeBadge.ts
index 7363498532..ba36b3e809 100644
--- a/src/composables/node/useNodeBadge.ts
+++ b/src/composables/node/useNodeBadge.ts
@@ -1,8 +1,3 @@
-import {
-  BadgePosition,
-  LGraphBadge,
-  type LGraphNode
-} from '@comfyorg/litegraph'
 import _ from 'lodash'
 import { computed, onMounted, watch } from 'vue'
 
@@ -16,6 +11,12 @@ import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { NodeBadgeMode } from '@/types/nodeSource'
 import { adjustColor } from '@/utils/colorUtil'
 
+import {
+  BadgePosition,
+  LGraphBadge,
+  type LGraphNode
+} from '../../lib/litegraph/src/litegraph'
+
 /**
  * Add LGraphBadge to LGraphNode based on settings.
  *
diff --git a/src/composables/node/useNodeCanvasImagePreview.ts b/src/composables/node/useNodeCanvasImagePreview.ts
index 52759b9d97..5d7cda54bc 100644
--- a/src/composables/node/useNodeCanvasImagePreview.ts
+++ b/src/composables/node/useNodeCanvasImagePreview.ts
@@ -1,7 +1,7 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
-
 import { useImagePreviewWidget } from '@/composables/widgets/useImagePreviewWidget'
 
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+
 const CANVAS_IMAGE_PREVIEW_WIDGET = '$$canvas-image-preview'
 
 /**
diff --git a/src/composables/node/useNodeChatHistory.ts b/src/composables/node/useNodeChatHistory.ts
index 135a48b664..ebbbe83144 100644
--- a/src/composables/node/useNodeChatHistory.ts
+++ b/src/composables/node/useNodeChatHistory.ts
@@ -1,8 +1,8 @@
-import { LGraphNode } from '@comfyorg/litegraph'
-
 import type ChatHistoryWidget from '@/components/graph/widgets/ChatHistoryWidget.vue'
 import { useChatHistoryWidget } from '@/composables/widgets/useChatHistoryWidget'
 
+import { LGraphNode } from '../../lib/litegraph/src/litegraph'
+
 const CHAT_HISTORY_WIDGET_NAME = '$$node-chat-history'
 
 /**
diff --git a/src/composables/node/useNodeDragAndDrop.ts b/src/composables/node/useNodeDragAndDrop.ts
index cb603814c6..7ae0dae43e 100644
--- a/src/composables/node/useNodeDragAndDrop.ts
+++ b/src/composables/node/useNodeDragAndDrop.ts
@@ -1,4 +1,4 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
 
 type DragHandler = (e: DragEvent) => boolean
 type DropHandler<T> = (files: File[]) => Promise<T[]>
diff --git a/src/composables/node/useNodeFileInput.ts b/src/composables/node/useNodeFileInput.ts
index ef61aaa0a0..32f822943f 100644
--- a/src/composables/node/useNodeFileInput.ts
+++ b/src/composables/node/useNodeFileInput.ts
@@ -1,7 +1,7 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
-
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+
 interface FileInputOptions {
   accept?: string
   allow_batch?: boolean
diff --git a/src/composables/node/useNodeImage.ts b/src/composables/node/useNodeImage.ts
index 7504592294..4802428638 100644
--- a/src/composables/node/useNodeImage.ts
+++ b/src/composables/node/useNodeImage.ts
@@ -1,8 +1,8 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
-
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 import { fitDimensionsToNodeWidth } from '@/utils/imageUtil'
 
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+
 const VIDEO_WIDGET_NAME = 'video-preview'
 const VIDEO_DEFAULT_OPTIONS = {
   playsInline: true,
diff --git a/src/composables/node/useNodeImageUpload.ts b/src/composables/node/useNodeImageUpload.ts
index 2abf3b7067..8869bf5643 100644
--- a/src/composables/node/useNodeImageUpload.ts
+++ b/src/composables/node/useNodeImageUpload.ts
@@ -1,5 +1,3 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
-
 import { useNodeDragAndDrop } from '@/composables/node/useNodeDragAndDrop'
 import { useNodeFileInput } from '@/composables/node/useNodeFileInput'
 import { useNodePaste } from '@/composables/node/useNodePaste'
@@ -7,6 +5,8 @@ import type { ResultItemType } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { useToastStore } from '@/stores/toastStore'
 
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+
 const PASTED_IMAGE_EXPIRY_MS = 2000
 
 interface ImageUploadFormFields {
diff --git a/src/composables/node/useNodePaste.ts b/src/composables/node/useNodePaste.ts
index d198db9263..df2f2cd435 100644
--- a/src/composables/node/useNodePaste.ts
+++ b/src/composables/node/useNodePaste.ts
@@ -1,4 +1,4 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
 
 type PasteHandler<T> = (files: File[]) => Promise<T>
 
diff --git a/src/composables/node/useNodePricing.ts b/src/composables/node/useNodePricing.ts
index 3e8891fd82..ebc8685e6a 100644
--- a/src/composables/node/useNodePricing.ts
+++ b/src/composables/node/useNodePricing.ts
@@ -1,5 +1,5 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
-import type { IComboWidget } from '@comfyorg/litegraph/dist/types/widgets'
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import type { IComboWidget } from '../../lib/litegraph/src/types/widgets'
 
 /**
  * Function that calculates dynamic pricing based on node widget values
diff --git a/src/composables/node/useNodeProgressText.ts b/src/composables/node/useNodeProgressText.ts
index 764b3413f7..b0e64760ce 100644
--- a/src/composables/node/useNodeProgressText.ts
+++ b/src/composables/node/useNodeProgressText.ts
@@ -1,7 +1,7 @@
-import { LGraphNode } from '@comfyorg/litegraph'
-
 import { useTextPreviewWidget } from '@/composables/widgets/useProgressTextWidget'
 
+import { LGraphNode } from '../../lib/litegraph/src/litegraph'
+
 const TEXT_PREVIEW_WIDGET_NAME = '$$node-text-preview'
 
 /**
diff --git a/src/composables/node/useWatchWidget.ts b/src/composables/node/useWatchWidget.ts
index e8827d6ec3..1ec59009a1 100644
--- a/src/composables/node/useWatchWidget.ts
+++ b/src/composables/node/useWatchWidget.ts
@@ -1,9 +1,10 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
 import { computedWithControl } from '@vueuse/core'
 import { type ComputedRef, ref } from 'vue'
 
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+
 export interface UseComputedWithWidgetWatchOptions {
   /**
    * Names of widgets to observe for changes.
diff --git a/src/composables/nodePack/useMissingNodes.ts b/src/composables/nodePack/useMissingNodes.ts
index 4327df0c12..04e2ea4ae9 100644
--- a/src/composables/nodePack/useMissingNodes.ts
+++ b/src/composables/nodePack/useMissingNodes.ts
@@ -1,5 +1,3 @@
-import { LGraphNode } from '@comfyorg/litegraph'
-import { NodeProperty } from '@comfyorg/litegraph/dist/LGraphNode'
 import { groupBy } from 'lodash'
 import { computed, onMounted } from 'vue'
 
@@ -9,6 +7,9 @@ import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import type { components } from '@/types/comfyRegistryTypes'
 
+import { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import { NodeProperty } from '../../lib/litegraph/src/litegraph'
+
 /**
  * Composable to find missing NodePacks from workflow
  * Uses the same filtering approach as ManagerDialogContent.vue
diff --git a/src/composables/nodePack/useWorkflowPacks.ts b/src/composables/nodePack/useWorkflowPacks.ts
index 564fb9438a..971edba2d7 100644
--- a/src/composables/nodePack/useWorkflowPacks.ts
+++ b/src/composables/nodePack/useWorkflowPacks.ts
@@ -1,4 +1,3 @@
-import { LGraphNode } from '@comfyorg/litegraph'
 import { computed, onUnmounted, ref } from 'vue'
 
 import { useNodePacks } from '@/composables/nodePack/useNodePacks'
@@ -10,6 +9,8 @@ import { useSystemStatsStore } from '@/stores/systemStatsStore'
 import { SelectedVersion, UseNodePacksOptions } from '@/types/comfyManagerTypes'
 import type { components } from '@/types/comfyRegistryTypes'
 
+import { LGraphNode } from '../../lib/litegraph/src/litegraph'
+
 type WorkflowPack = {
   id:
     | ComfyWorkflowJSON['nodes'][number]['properties']['cnr_id']
diff --git a/src/composables/useCanvasDrop.ts b/src/composables/useCanvasDrop.ts
index 1948b13d3f..9b7699e367 100644
--- a/src/composables/useCanvasDrop.ts
+++ b/src/composables/useCanvasDrop.ts
@@ -1,5 +1,3 @@
-import { LGraphNode } from '@comfyorg/litegraph'
-import { LiteGraph } from '@comfyorg/litegraph'
 import { Ref } from 'vue'
 
 import { usePragmaticDroppable } from '@/composables/usePragmaticDragAndDrop'
@@ -13,6 +11,9 @@ import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { ComfyWorkflow } from '@/stores/workflowStore'
 import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 
+import { LGraphNode } from '../lib/litegraph/src/litegraph'
+import { LiteGraph } from '../lib/litegraph/src/litegraph'
+
 export const useCanvasDrop = (canvasRef: Ref<HTMLCanvasElement>) => {
   const modelToNodeStore = useModelToNodeStore()
   const litegraphService = useLitegraphService()
diff --git a/src/composables/useContextMenuTranslation.ts b/src/composables/useContextMenuTranslation.ts
index 80a47749bd..1690ba0d08 100644
--- a/src/composables/useContextMenuTranslation.ts
+++ b/src/composables/useContextMenuTranslation.ts
@@ -1,13 +1,13 @@
+import { st, te } from '@/i18n'
+import { normalizeI18nKey } from '@/utils/formatUtil'
+
 import type {
   IContextMenuOptions,
   IContextMenuValue,
   INodeInputSlot,
   IWidget
-} from '@comfyorg/litegraph'
-import { LGraphCanvas, LiteGraph } from '@comfyorg/litegraph'
-
-import { st, te } from '@/i18n'
-import { normalizeI18nKey } from '@/utils/formatUtil'
+} from '../lib/litegraph/src/litegraph'
+import { LGraphCanvas, LiteGraph } from '../lib/litegraph/src/litegraph'
 
 /**
  * Add translation for litegraph context menu.
diff --git a/src/composables/useCoreCommands.ts b/src/composables/useCoreCommands.ts
index bef0655cb9..e0a7d43a62 100644
--- a/src/composables/useCoreCommands.ts
+++ b/src/composables/useCoreCommands.ts
@@ -1,11 +1,3 @@
-import {
-  LGraphEventMode,
-  LGraphGroup,
-  LGraphNode,
-  LiteGraph
-} from '@comfyorg/litegraph'
-import { Point } from '@comfyorg/litegraph'
-
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import {
   DEFAULT_DARK_COLOR_PALETTE,
@@ -29,6 +21,14 @@ import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 
+import {
+  LGraphEventMode,
+  LGraphGroup,
+  LGraphNode,
+  LiteGraph
+} from '../lib/litegraph/src/litegraph'
+import { Point } from '../lib/litegraph/src/litegraph'
+
 const moveSelectedNodesVersionAdded = '1.22.2'
 
 export function useCoreCommands(): ComfyCommand[] {
diff --git a/src/composables/useFeatureFlags.ts b/src/composables/useFeatureFlags.ts
index b0b129f702..e503ac9891 100644
--- a/src/composables/useFeatureFlags.ts
+++ b/src/composables/useFeatureFlags.ts
@@ -2,10 +2,12 @@
  * Feature flags composable for Vue node system
  * Provides safe toggles for experimental features
  */
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 
 import { useSettingStore } from '@/stores/settingStore'
 
+import { LiteGraph } from '../lib/litegraph/src/litegraph'
+
 export const useFeatureFlags = () => {
   const settingStore = useSettingStore()
 
@@ -59,10 +61,22 @@ export const useFeatureFlags = () => {
       true
   )
 
+  /**
+   * Sync the Vue nodes feature flag with LiteGraph global settings
+   */
+  const syncVueNodesFlag = () => {
+    LiteGraph.vueNodesMode = isVueNodesEnabled.value
+    console.log('Vue nodes mode:', LiteGraph.vueNodesMode)
+  }
+
+  // Watch for changes and update LiteGraph
+  watch(isVueNodesEnabled, syncVueNodesFlag, { immediate: true })
+
   return {
     isVueNodesEnabled,
     isVueWidgetsEnabled,
     isDevModeEnabled,
-    shouldRenderVueNodes
+    shouldRenderVueNodes,
+    syncVueNodesFlag
   }
 }
diff --git a/src/composables/useGlobalLitegraph.ts b/src/composables/useGlobalLitegraph.ts
index 7a64588c67..de7a9b585c 100644
--- a/src/composables/useGlobalLitegraph.ts
+++ b/src/composables/useGlobalLitegraph.ts
@@ -8,7 +8,7 @@ import {
   LGraphNode,
   LLink,
   LiteGraph
-} from '@comfyorg/litegraph'
+} from '../lib/litegraph/src/litegraph'
 
 /**
  * Assign all properties of LiteGraph to window to make it backward compatible.
diff --git a/src/composables/useLitegraphSettings.ts b/src/composables/useLitegraphSettings.ts
index 83f19c3340..f9911a19ae 100644
--- a/src/composables/useLitegraphSettings.ts
+++ b/src/composables/useLitegraphSettings.ts
@@ -1,9 +1,14 @@
-import { CanvasPointer, LGraphNode, LiteGraph } from '@comfyorg/litegraph'
 import { watchEffect } from 'vue'
 
 import { useCanvasStore } from '@/stores/graphStore'
 import { useSettingStore } from '@/stores/settingStore'
 
+import {
+  CanvasPointer,
+  LGraphNode,
+  LiteGraph
+} from '../lib/litegraph/src/litegraph'
+
 /**
  * Watch for changes in the setting store and update the LiteGraph settings accordingly.
  */
diff --git a/src/composables/usePaste.ts b/src/composables/usePaste.ts
index ce6c68d823..477e5e0706 100644
--- a/src/composables/usePaste.ts
+++ b/src/composables/usePaste.ts
@@ -1,5 +1,3 @@
-import { LiteGraph } from '@comfyorg/litegraph'
-import type { LGraphNode } from '@comfyorg/litegraph'
 import { useEventListener } from '@vueuse/core'
 
 import { ComfyWorkflowJSON } from '@/schemas/comfyWorkflowSchema'
@@ -8,6 +6,9 @@ import { useCanvasStore } from '@/stores/graphStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isAudioNode, isImageNode, isVideoNode } from '@/utils/litegraphUtil'
 
+import { LiteGraph } from '../lib/litegraph/src/litegraph'
+import type { LGraphNode } from '../lib/litegraph/src/litegraph'
+
 /**
  * Adds a handler on paste that extracts and loads images or workflows from pasted JSON data
  */
diff --git a/src/composables/useRefreshableSelection.ts b/src/composables/useRefreshableSelection.ts
index bb19918be4..9181523948 100644
--- a/src/composables/useRefreshableSelection.ts
+++ b/src/composables/useRefreshableSelection.ts
@@ -1,10 +1,11 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
-import type { IBaseWidget } from '@comfyorg/litegraph/dist/types/widgets'
 import { computed, ref, watchEffect } from 'vue'
 
 import { useCanvasStore } from '@/stores/graphStore'
 import { isLGraphNode } from '@/utils/litegraphUtil'
 
+import type { LGraphNode } from '../lib/litegraph/src/litegraph'
+import type { IBaseWidget } from '../lib/litegraph/src/types/widgets'
+
 interface RefreshableItem {
   refresh: () => Promise<void> | void
 }
diff --git a/src/composables/useWorkflowValidation.ts b/src/composables/useWorkflowValidation.ts
index d8823098d0..eb0d2bbbe5 100644
--- a/src/composables/useWorkflowValidation.ts
+++ b/src/composables/useWorkflowValidation.ts
@@ -1,10 +1,10 @@
-import type { ISerialisedGraph } from '@comfyorg/litegraph/dist/types/serialisation'
-
 import type { ComfyWorkflowJSON } from '@/schemas/comfyWorkflowSchema'
 import { validateComfyWorkflow } from '@/schemas/comfyWorkflowSchema'
 import { useToastStore } from '@/stores/toastStore'
 import { fixBadLinks } from '@/utils/linkFixer'
 
+import type { ISerialisedGraph } from '../lib/litegraph/src/types/serialisation'
+
 export interface ValidationResult {
   graphData: ComfyWorkflowJSON | null
 }
diff --git a/src/composables/widgets/useBooleanWidget.ts b/src/composables/widgets/useBooleanWidget.ts
index 233c04aa5b..1284a25a33 100644
--- a/src/composables/widgets/useBooleanWidget.ts
+++ b/src/composables/widgets/useBooleanWidget.ts
@@ -1,11 +1,11 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
-
 import {
   type InputSpec,
   isBooleanInputSpec
 } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { type ComfyWidgetConstructorV2 } from '@/scripts/widgets'
 
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+
 export const useBooleanWidget = () => {
   const widgetConstructor: ComfyWidgetConstructorV2 = (
     node: LGraphNode,
diff --git a/src/composables/widgets/useChartWidget.ts b/src/composables/widgets/useChartWidget.ts
new file mode 100644
index 0000000000..a78d8b877f
--- /dev/null
+++ b/src/composables/widgets/useChartWidget.ts
@@ -0,0 +1,29 @@
+import {
+  type ChartInputSpec,
+  type InputSpec as InputSpecV2,
+  isChartInputSpec
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import type { IChartWidget } from '../../lib/litegraph/src/types/widgets'
+
+export const useChartWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): IChartWidget => {
+    if (!isChartInputSpec(inputSpec)) {
+      throw new Error('Invalid input spec for chart widget')
+    }
+
+    const { name, options = {} } = inputSpec as ChartInputSpec
+
+    const chartType = options.type || 'line'
+
+    const widget = node.addWidget('chart', name, options.data || {}, () => {}, {
+      serialize: true,
+      type: chartType,
+      ...options
+    }) as IChartWidget
+
+    return widget
+  }
+}
diff --git a/src/composables/widgets/useChatHistoryWidget.ts b/src/composables/widgets/useChatHistoryWidget.ts
index 9f807a3c6c..c69c6f0a95 100644
--- a/src/composables/widgets/useChatHistoryWidget.ts
+++ b/src/composables/widgets/useChatHistoryWidget.ts
@@ -1,4 +1,3 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
 import { ref } from 'vue'
 
 import ChatHistoryWidget from '@/components/graph/widgets/ChatHistoryWidget.vue'
@@ -6,6 +5,8 @@ import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
 import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
 
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+
 const PADDING = 16
 
 export const useChatHistoryWidget = (
diff --git a/src/composables/widgets/useColorWidget.ts b/src/composables/widgets/useColorWidget.ts
new file mode 100644
index 0000000000..996aff1c77
--- /dev/null
+++ b/src/composables/widgets/useColorWidget.ts
@@ -0,0 +1,21 @@
+import type {
+  ColorInputSpec,
+  InputSpec as InputSpecV2
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import type { IColorWidget } from '../../lib/litegraph/src/types/widgets'
+
+export const useColorWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): IColorWidget => {
+    const { name, options } = inputSpec as ColorInputSpec
+    const defaultValue = options?.default || '#000000'
+
+    const widget = node.addWidget('color', name, defaultValue, () => {}, {
+      serialize: true
+    }) as IColorWidget
+
+    return widget
+  }
+}
diff --git a/src/composables/widgets/useComboWidget.ts b/src/composables/widgets/useComboWidget.ts
index 25c75fb5cf..8ac6efd1fd 100644
--- a/src/composables/widgets/useComboWidget.ts
+++ b/src/composables/widgets/useComboWidget.ts
@@ -1,5 +1,3 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
-import type { IComboWidget } from '@comfyorg/litegraph/dist/types/widgets'
 import { ref } from 'vue'
 
 import MultiSelectWidget from '@/components/graph/widgets/MultiSelectWidget.vue'
@@ -19,6 +17,8 @@ import {
   addValueControlWidgets
 } from '@/scripts/widgets'
 
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import type { IComboWidget } from '../../lib/litegraph/src/types/widgets'
 import { useRemoteWidget } from './useRemoteWidget'
 
 const getDefaultValue = (inputSpec: ComboInputSpec) => {
diff --git a/src/composables/widgets/useFileUploadWidget.ts b/src/composables/widgets/useFileUploadWidget.ts
new file mode 100644
index 0000000000..9f9aaab0c9
--- /dev/null
+++ b/src/composables/widgets/useFileUploadWidget.ts
@@ -0,0 +1,21 @@
+import type {
+  FileUploadInputSpec,
+  InputSpec as InputSpecV2
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import type { IFileUploadWidget } from '../../lib/litegraph/src/types/widgets'
+
+export const useFileUploadWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): IFileUploadWidget => {
+    const { name, options = {} } = inputSpec as FileUploadInputSpec
+
+    const widget = node.addWidget('fileupload', name, '', () => {}, {
+      serialize: true,
+      ...(options as Record<string, unknown>)
+    }) as IFileUploadWidget
+
+    return widget
+  }
+}
diff --git a/src/composables/widgets/useFloatWidget.ts b/src/composables/widgets/useFloatWidget.ts
index b0768893b3..0dad1c8b97 100644
--- a/src/composables/widgets/useFloatWidget.ts
+++ b/src/composables/widgets/useFloatWidget.ts
@@ -1,5 +1,3 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
-import type { INumericWidget } from '@comfyorg/litegraph/dist/types/widgets'
 import _ from 'lodash'
 
 import {
@@ -9,6 +7,9 @@ import {
 import { type ComfyWidgetConstructorV2 } from '@/scripts/widgets'
 import { useSettingStore } from '@/stores/settingStore'
 
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import type { INumericWidget } from '../../lib/litegraph/src/types/widgets'
+
 function onFloatValueChange(this: INumericWidget, v: number) {
   this.value = this.options.round
     ? _.clamp(
diff --git a/src/composables/widgets/useGalleriaWidget.ts b/src/composables/widgets/useGalleriaWidget.ts
new file mode 100644
index 0000000000..2982b68f40
--- /dev/null
+++ b/src/composables/widgets/useGalleriaWidget.ts
@@ -0,0 +1,27 @@
+import type {
+  GalleriaInputSpec,
+  InputSpec as InputSpecV2
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import type { IGalleriaWidget } from '../../lib/litegraph/src/types/widgets'
+
+export const useGalleriaWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): IGalleriaWidget => {
+    const { name, options = {} } = inputSpec as GalleriaInputSpec
+
+    const widget = node.addWidget(
+      'galleria',
+      name,
+      options.images || [],
+      () => {},
+      {
+        serialize: true,
+        ...options
+      }
+    ) as IGalleriaWidget
+
+    return widget
+  }
+}
diff --git a/src/composables/widgets/useImageCompareWidget.ts b/src/composables/widgets/useImageCompareWidget.ts
new file mode 100644
index 0000000000..3189cc043a
--- /dev/null
+++ b/src/composables/widgets/useImageCompareWidget.ts
@@ -0,0 +1,21 @@
+import type {
+  ImageCompareInputSpec,
+  InputSpec as InputSpecV2
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import type { IImageCompareWidget } from '../../lib/litegraph/src/types/widgets'
+
+export const useImageCompareWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): IImageCompareWidget => {
+    const { name, options = {} } = inputSpec as ImageCompareInputSpec
+
+    const widget = node.addWidget('imagecompare', name, ['', ''], () => {}, {
+      serialize: true,
+      ...options
+    }) as IImageCompareWidget
+
+    return widget
+  }
+}
diff --git a/src/composables/widgets/useImagePreviewWidget.ts b/src/composables/widgets/useImagePreviewWidget.ts
index 1230873b22..1d2486f512 100644
--- a/src/composables/widgets/useImagePreviewWidget.ts
+++ b/src/composables/widgets/useImagePreviewWidget.ts
@@ -1,21 +1,21 @@
+import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { app } from '@/scripts/app'
+import { calculateImageGrid } from '@/scripts/ui/imagePreview'
+import { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+import { useCanvasStore } from '@/stores/graphStore'
+import { useSettingStore } from '@/stores/settingStore'
+import { is_all_same_aspect_ratio } from '@/utils/imageUtil'
+
 import {
   BaseWidget,
   type CanvasPointer,
   type LGraphNode,
   LiteGraph
-} from '@comfyorg/litegraph'
+} from '../../lib/litegraph/src/litegraph'
 import type {
   IBaseWidget,
   IWidgetOptions
-} from '@comfyorg/litegraph/dist/types/widgets'
-
-import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import { app } from '@/scripts/app'
-import { calculateImageGrid } from '@/scripts/ui/imagePreview'
-import { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
-import { useCanvasStore } from '@/stores/graphStore'
-import { useSettingStore } from '@/stores/settingStore'
-import { is_all_same_aspect_ratio } from '@/utils/imageUtil'
+} from '../../lib/litegraph/src/types/widgets'
 
 const renderPreview = (
   ctx: CanvasRenderingContext2D,
diff --git a/src/composables/widgets/useImageUploadWidget.ts b/src/composables/widgets/useImageUploadWidget.ts
index 137b2f42c5..efd04f5014 100644
--- a/src/composables/widgets/useImageUploadWidget.ts
+++ b/src/composables/widgets/useImageUploadWidget.ts
@@ -1,6 +1,3 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
-import { IComboWidget } from '@comfyorg/litegraph/dist/types/widgets'
-
 import { useNodeImage, useNodeVideo } from '@/composables/node/useNodeImage'
 import { useNodeImageUpload } from '@/composables/node/useNodeImageUpload'
 import { useValueTransform } from '@/composables/useValueTransform'
@@ -13,6 +10,9 @@ import { isImageUploadInput } from '@/types/nodeDefAugmentation'
 import { createAnnotatedPath } from '@/utils/formatUtil'
 import { addToComboValues } from '@/utils/litegraphUtil'
 
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import { IComboWidget } from '../../lib/litegraph/src/types/widgets'
+
 const ACCEPTED_IMAGE_TYPES = 'image/png,image/jpeg,image/webp'
 const ACCEPTED_VIDEO_TYPES = 'video/webm,video/mp4'
 
diff --git a/src/composables/widgets/useImageWidget.ts b/src/composables/widgets/useImageWidget.ts
new file mode 100644
index 0000000000..4460b0d624
--- /dev/null
+++ b/src/composables/widgets/useImageWidget.ts
@@ -0,0 +1,21 @@
+import type {
+  ImageInputSpec,
+  InputSpec as InputSpecV2
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import type { IImageWidget } from '../../lib/litegraph/src/types/widgets'
+
+export const useImageWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): IImageWidget => {
+    const { name, options = {} } = inputSpec as ImageInputSpec
+
+    const widget = node.addWidget('image', name, '', () => {}, {
+      serialize: true,
+      ...options
+    }) as IImageWidget
+
+    return widget
+  }
+}
diff --git a/src/composables/widgets/useIntWidget.ts b/src/composables/widgets/useIntWidget.ts
index ee1f51fabc..c69266c304 100644
--- a/src/composables/widgets/useIntWidget.ts
+++ b/src/composables/widgets/useIntWidget.ts
@@ -1,6 +1,3 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
-import type { INumericWidget } from '@comfyorg/litegraph/dist/types/widgets'
-
 import { transformInputSpecV2ToV1 } from '@/schemas/nodeDef/migration'
 import {
   type InputSpec,
@@ -12,6 +9,9 @@ import {
 } from '@/scripts/widgets'
 import { useSettingStore } from '@/stores/settingStore'
 
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import type { INumericWidget } from '../../lib/litegraph/src/types/widgets'
+
 function onValueChange(this: INumericWidget, v: number) {
   // For integers, always round to the nearest step
   // step === 0 is invalid, assign 1 if options.step is 0
diff --git a/src/composables/widgets/useMarkdownWidget.ts b/src/composables/widgets/useMarkdownWidget.ts
index b19d3d9a05..b50a5c65ee 100644
--- a/src/composables/widgets/useMarkdownWidget.ts
+++ b/src/composables/widgets/useMarkdownWidget.ts
@@ -1,4 +1,3 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
 import { Editor as TiptapEditor } from '@tiptap/core'
 import TiptapLink from '@tiptap/extension-link'
 import TiptapTable from '@tiptap/extension-table'
@@ -12,6 +11,8 @@ import { type InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { app } from '@/scripts/app'
 import { type ComfyWidgetConstructorV2 } from '@/scripts/widgets'
 
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+
 function addMarkdownWidget(
   node: LGraphNode,
   name: string,
diff --git a/src/composables/widgets/useMultiSelectWidget.ts b/src/composables/widgets/useMultiSelectWidget.ts
new file mode 100644
index 0000000000..4f03123a6f
--- /dev/null
+++ b/src/composables/widgets/useMultiSelectWidget.ts
@@ -0,0 +1,22 @@
+import type {
+  InputSpec as InputSpecV2,
+  MultiSelectInputSpec
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import type { IMultiSelectWidget } from '../../lib/litegraph/src/types/widgets'
+
+export const useMultiSelectWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): IMultiSelectWidget => {
+    const { name, options = {} } = inputSpec as MultiSelectInputSpec
+
+    const widget = node.addWidget('multiselect', name, [], () => {}, {
+      serialize: true,
+      values: options.values || [],
+      ...options
+    }) as IMultiSelectWidget
+
+    return widget
+  }
+}
diff --git a/src/composables/widgets/useProgressTextWidget.ts b/src/composables/widgets/useProgressTextWidget.ts
index 625f0f9cfc..1dbd259d5b 100644
--- a/src/composables/widgets/useProgressTextWidget.ts
+++ b/src/composables/widgets/useProgressTextWidget.ts
@@ -1,4 +1,3 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
 import { ref } from 'vue'
 
 import TextPreviewWidget from '@/components/graph/widgets/TextPreviewWidget.vue'
@@ -6,6 +5,8 @@ import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
 import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
 
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+
 const PADDING = 16
 
 export const useTextPreviewWidget = (
diff --git a/src/composables/widgets/useRemoteWidget.ts b/src/composables/widgets/useRemoteWidget.ts
index 8cfcfda1fb..0b4bb6c028 100644
--- a/src/composables/widgets/useRemoteWidget.ts
+++ b/src/composables/widgets/useRemoteWidget.ts
@@ -1,11 +1,12 @@
-import { LGraphNode } from '@comfyorg/litegraph'
-import { IWidget } from '@comfyorg/litegraph'
 import axios from 'axios'
 
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import type { RemoteWidgetConfig } from '@/schemas/nodeDefSchema'
 import { api } from '@/scripts/api'
 
+import { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import { IWidget } from '../../lib/litegraph/src/litegraph'
+
 const MAX_RETRIES = 5
 const TIMEOUT = 4096
 
diff --git a/src/composables/widgets/useSelectButtonWidget.ts b/src/composables/widgets/useSelectButtonWidget.ts
new file mode 100644
index 0000000000..6d621de234
--- /dev/null
+++ b/src/composables/widgets/useSelectButtonWidget.ts
@@ -0,0 +1,29 @@
+import type {
+  InputSpec as InputSpecV2,
+  SelectButtonInputSpec
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import type { ISelectButtonWidget } from '../../lib/litegraph/src/types/widgets'
+
+export const useSelectButtonWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): ISelectButtonWidget => {
+    const { name, options = {} } = inputSpec as SelectButtonInputSpec
+    const values = options.values || []
+
+    const widget = node.addWidget(
+      'selectbutton',
+      name,
+      values[0] || '',
+      (_value: string) => {},
+      {
+        serialize: true,
+        values,
+        ...options
+      }
+    ) as ISelectButtonWidget
+
+    return widget
+  }
+}
diff --git a/src/composables/widgets/useStringWidget.ts b/src/composables/widgets/useStringWidget.ts
index d5298338e9..fd38e1fd38 100644
--- a/src/composables/widgets/useStringWidget.ts
+++ b/src/composables/widgets/useStringWidget.ts
@@ -1,5 +1,3 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
-
 import {
   type InputSpec,
   isStringInputSpec
@@ -8,6 +6,8 @@ import { app } from '@/scripts/app'
 import { type ComfyWidgetConstructorV2 } from '@/scripts/widgets'
 import { useSettingStore } from '@/stores/settingStore'
 
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+
 function addMultilineWidget(
   node: LGraphNode,
   name: string,
diff --git a/src/composables/widgets/useTextareaWidget.ts b/src/composables/widgets/useTextareaWidget.ts
new file mode 100644
index 0000000000..3358c9ae44
--- /dev/null
+++ b/src/composables/widgets/useTextareaWidget.ts
@@ -0,0 +1,29 @@
+import type {
+  InputSpec as InputSpecV2,
+  TextareaInputSpec
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import type { ITextareaWidget } from '../../lib/litegraph/src/types/widgets'
+
+export const useTextareaWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): ITextareaWidget => {
+    const { name, options = {} } = inputSpec as TextareaInputSpec
+
+    const widget = node.addWidget(
+      'textarea',
+      name,
+      options.default || '',
+      () => {},
+      {
+        serialize: true,
+        rows: options.rows || 5,
+        cols: options.cols || 50,
+        ...options
+      }
+    ) as ITextareaWidget
+
+    return widget
+  }
+}
diff --git a/src/composables/widgets/useTreeSelectWidget.ts b/src/composables/widgets/useTreeSelectWidget.ts
new file mode 100644
index 0000000000..1ee9820e05
--- /dev/null
+++ b/src/composables/widgets/useTreeSelectWidget.ts
@@ -0,0 +1,25 @@
+import type {
+  InputSpec as InputSpecV2,
+  TreeSelectInputSpec
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import type { ITreeSelectWidget } from '../../lib/litegraph/src/types/widgets'
+
+export const useTreeSelectWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): ITreeSelectWidget => {
+    const { name, options = {} } = inputSpec as TreeSelectInputSpec
+    const isMultiple = options.multiple || false
+    const defaultValue = isMultiple ? [] : ''
+
+    const widget = node.addWidget('treeselect', name, defaultValue, () => {}, {
+      serialize: true,
+      values: options.values || [],
+      multiple: isMultiple,
+      ...options
+    }) as ITreeSelectWidget
+
+    return widget
+  }
+}
diff --git a/src/constants/coreSettings.ts b/src/constants/coreSettings.ts
index 1c41e6cfbb..b6e060c0b7 100644
--- a/src/constants/coreSettings.ts
+++ b/src/constants/coreSettings.ts
@@ -1,11 +1,11 @@
-import { LinkMarkerShape, LiteGraph } from '@comfyorg/litegraph'
-
 import type { ColorPalettes } from '@/schemas/colorPaletteSchema'
 import type { Keybinding } from '@/schemas/keyBindingSchema'
 import { NodeBadgeMode } from '@/types/nodeSource'
 import { LinkReleaseTriggerAction } from '@/types/searchBoxTypes'
 import type { SettingParams } from '@/types/settingTypes'
 
+import { LinkMarkerShape, LiteGraph } from '../lib/litegraph/src/litegraph'
+
 /**
  * Core settings are essential configuration parameters required for ComfyUI's basic functionality.
  * These settings must be present in the settings store and cannot be omitted.
diff --git a/src/extensions/core/contextMenuFilter.ts b/src/extensions/core/contextMenuFilter.ts
index dec9fe4c7c..e6af372c6c 100644
--- a/src/extensions/core/contextMenuFilter.ts
+++ b/src/extensions/core/contextMenuFilter.ts
@@ -1,5 +1,8 @@
-import { LGraphCanvas, LiteGraph, isComboWidget } from '@comfyorg/litegraph'
-
+import {
+  LGraphCanvas,
+  LiteGraph,
+  isComboWidget
+} from '../../lib/litegraph/src/litegraph'
 import { app } from '../../scripts/app'
 
 // Adds filtering to combo context menus
diff --git a/src/extensions/core/groupNode.ts b/src/extensions/core/groupNode.ts
index ccc973390c..bc1c479cea 100644
--- a/src/extensions/core/groupNode.ts
+++ b/src/extensions/core/groupNode.ts
@@ -1,6 +1,3 @@
-import { LiteGraph } from '@comfyorg/litegraph'
-import { LGraphNode, type NodeId } from '@comfyorg/litegraph/dist/LGraphNode'
-
 import { t } from '@/i18n'
 import {
   ComfyLink,
@@ -15,6 +12,8 @@ import { useWidgetStore } from '@/stores/widgetStore'
 import { ComfyExtension } from '@/types/comfy'
 import { deserialiseAndCreate, serialise } from '@/utils/vintageClipboard'
 
+import { LiteGraph } from '../../lib/litegraph/src/litegraph'
+import { LGraphNode, type NodeId } from '../../lib/litegraph/src/litegraph'
 import { api } from '../../scripts/api'
 import { app } from '../../scripts/app'
 import { ManageGroupDialog } from './groupNodeManage'
diff --git a/src/extensions/core/groupNodeManage.ts b/src/extensions/core/groupNodeManage.ts
index 51bec17f47..e04c7e178b 100644
--- a/src/extensions/core/groupNodeManage.ts
+++ b/src/extensions/core/groupNodeManage.ts
@@ -1,11 +1,10 @@
+import { useToastStore } from '@/stores/toastStore'
+
 import {
   type LGraphNode,
   type LGraphNodeConstructor,
   LiteGraph
-} from '@comfyorg/litegraph'
-
-import { useToastStore } from '@/stores/toastStore'
-
+} from '../../lib/litegraph/src/litegraph'
 import { type ComfyApp, app } from '../../scripts/app'
 import { $el } from '../../scripts/ui'
 import { ComfyDialog } from '../../scripts/ui/dialog'
@@ -123,7 +122,7 @@ export class ManageGroupDialog extends ComfyDialog<HTMLDialogElement> {
   getGroupData() {
     this.groupNodeType = LiteGraph.registered_node_types[
       `${PREFIX}${SEPARATOR}` + this.selectedGroup
-    ] as LGraphNodeConstructor<LGraphNode>
+    ] as unknown as LGraphNodeConstructor<LGraphNode>
     this.groupNodeDef = this.groupNodeType.nodeData
     this.groupData = GroupNodeHandler.getGroupData(this.groupNodeType)
   }
diff --git a/src/extensions/core/groupOptions.ts b/src/extensions/core/groupOptions.ts
index 0a044d1f51..5becbe1a36 100644
--- a/src/extensions/core/groupOptions.ts
+++ b/src/extensions/core/groupOptions.ts
@@ -1,10 +1,9 @@
-import { LGraphGroup } from '@comfyorg/litegraph'
-import { LGraphCanvas } from '@comfyorg/litegraph'
-import type { LGraphNode } from '@comfyorg/litegraph'
-import type { Positionable } from '@comfyorg/litegraph/dist/interfaces'
-
 import { useSettingStore } from '@/stores/settingStore'
 
+import type { Positionable } from '../../lib/litegraph/src/interfaces'
+import { LGraphGroup } from '../../lib/litegraph/src/litegraph'
+import { LGraphCanvas } from '../../lib/litegraph/src/litegraph'
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
 import { app } from '../../scripts/app'
 
 function setNodeMode(node: LGraphNode, mode: number) {
diff --git a/src/extensions/core/load3d.ts b/src/extensions/core/load3d.ts
index caa52c143c..36dade366f 100644
--- a/src/extensions/core/load3d.ts
+++ b/src/extensions/core/load3d.ts
@@ -1,7 +1,3 @@
-import type {
-  IComboWidget,
-  IStringWidget
-} from '@comfyorg/litegraph/dist/types/widgets'
 import { nextTick } from 'vue'
 
 import Load3D from '@/components/load3d/Load3D.vue'
@@ -17,6 +13,11 @@ import { useExtensionService } from '@/services/extensionService'
 import { useLoad3dService } from '@/services/load3dService'
 import { useToastStore } from '@/stores/toastStore'
 
+import type {
+  IComboWidget,
+  IStringWidget
+} from '../../lib/litegraph/src/types/widgets'
+
 useExtensionService().registerExtension({
   name: 'Comfy.Load3D',
   settings: [
diff --git a/src/extensions/core/load3d/Load3DConfiguration.ts b/src/extensions/core/load3d/Load3DConfiguration.ts
index 374b309d0f..13fef4e482 100644
--- a/src/extensions/core/load3d/Load3DConfiguration.ts
+++ b/src/extensions/core/load3d/Load3DConfiguration.ts
@@ -1,10 +1,10 @@
-import type { IBaseWidget } from '@comfyorg/litegraph/dist/types/widgets'
-
 import Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
 import { api } from '@/scripts/api'
 import { useSettingStore } from '@/stores/settingStore'
 
+import type { IBaseWidget } from '../../../lib/litegraph/src/types/widgets'
+
 class Load3DConfiguration {
   constructor(private load3d: Load3d) {}
 
diff --git a/src/extensions/core/load3d/Load3d.ts b/src/extensions/core/load3d/Load3d.ts
index 0a14dcc312..82d77f9467 100644
--- a/src/extensions/core/load3d/Load3d.ts
+++ b/src/extensions/core/load3d/Load3d.ts
@@ -1,8 +1,8 @@
-import { LGraphNode } from '@comfyorg/litegraph'
 import * as THREE from 'three'
 
 import { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 
+import { LGraphNode } from '../../../lib/litegraph/src/litegraph'
 import { CameraManager } from './CameraManager'
 import { ControlsManager } from './ControlsManager'
 import { EventManager } from './EventManager'
diff --git a/src/extensions/core/load3d/Load3dAnimation.ts b/src/extensions/core/load3d/Load3dAnimation.ts
index 207b274979..b0cbad9e1e 100644
--- a/src/extensions/core/load3d/Load3dAnimation.ts
+++ b/src/extensions/core/load3d/Load3dAnimation.ts
@@ -1,6 +1,6 @@
-import { LGraphNode } from '@comfyorg/litegraph'
 import * as THREE from 'three'
 
+import { LGraphNode } from '../../../lib/litegraph/src/litegraph'
 import { AnimationManager } from './AnimationManager'
 import Load3d from './Load3d'
 import { Load3DOptions } from './interfaces'
diff --git a/src/extensions/core/load3d/NodeStorage.ts b/src/extensions/core/load3d/NodeStorage.ts
index 7791a1fe22..365cabac3e 100644
--- a/src/extensions/core/load3d/NodeStorage.ts
+++ b/src/extensions/core/load3d/NodeStorage.ts
@@ -1,5 +1,4 @@
-import { LGraphNode } from '@comfyorg/litegraph'
-
+import { LGraphNode } from '../../../lib/litegraph/src/litegraph'
 import { NodeStorageInterface } from './interfaces'
 
 export class NodeStorage implements NodeStorageInterface {
diff --git a/src/extensions/core/load3d/interfaces.ts b/src/extensions/core/load3d/interfaces.ts
index 603740518a..491f3e2267 100644
--- a/src/extensions/core/load3d/interfaces.ts
+++ b/src/extensions/core/load3d/interfaces.ts
@@ -1,4 +1,3 @@
-import { LGraphNode } from '@comfyorg/litegraph'
 import * as THREE from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { ViewHelper } from 'three/examples/jsm/helpers/ViewHelper'
@@ -10,6 +9,8 @@ import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
 
 import { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 
+import { LGraphNode } from '../../../lib/litegraph/src/litegraph'
+
 export type Load3DNodeType = 'Load3D' | 'Preview3D'
 
 export type Load3DAnimationNodeType = 'Load3DAnimation' | 'Preview3DAnimation'
diff --git a/src/extensions/core/nodeTemplates.ts b/src/extensions/core/nodeTemplates.ts
index 05c569a223..261b32c7d5 100644
--- a/src/extensions/core/nodeTemplates.ts
+++ b/src/extensions/core/nodeTemplates.ts
@@ -1,10 +1,9 @@
-import { LGraphCanvas } from '@comfyorg/litegraph'
-
 import { t } from '@/i18n'
 import { useDialogService } from '@/services/dialogService'
 import { useToastStore } from '@/stores/toastStore'
 import { deserialiseAndCreate } from '@/utils/vintageClipboard'
 
+import { LGraphCanvas } from '../../lib/litegraph/src/litegraph'
 import { api } from '../../scripts/api'
 import { app } from '../../scripts/app'
 import { $el, ComfyDialog } from '../../scripts/ui'
diff --git a/src/extensions/core/noteNode.ts b/src/extensions/core/noteNode.ts
index d5cbf0dee2..4f3ba43b83 100644
--- a/src/extensions/core/noteNode.ts
+++ b/src/extensions/core/noteNode.ts
@@ -1,6 +1,5 @@
-import { LGraphCanvas, LiteGraph } from '@comfyorg/litegraph'
-import { LGraphNode } from '@comfyorg/litegraph'
-
+import { LGraphCanvas, LiteGraph } from '../../lib/litegraph/src/litegraph'
+import { LGraphNode } from '../../lib/litegraph/src/litegraph'
 import { app } from '../../scripts/app'
 import { ComfyWidgets } from '../../scripts/widgets'
 
diff --git a/src/extensions/core/rerouteNode.ts b/src/extensions/core/rerouteNode.ts
index 0df8263aba..0f7a03418e 100644
--- a/src/extensions/core/rerouteNode.ts
+++ b/src/extensions/core/rerouteNode.ts
@@ -1,6 +1,9 @@
-import type { IContextMenuValue } from '@comfyorg/litegraph'
-import { LGraphCanvas, LGraphNode, LiteGraph } from '@comfyorg/litegraph'
-
+import type { IContextMenuValue } from '../../lib/litegraph/src/litegraph'
+import {
+  LGraphCanvas,
+  LGraphNode,
+  LiteGraph
+} from '../../lib/litegraph/src/litegraph'
 import { app } from '../../scripts/app'
 import { getWidgetConfig, mergeIfValid, setWidgetConfig } from './widgetInputs'
 
diff --git a/src/extensions/core/simpleTouchSupport.ts b/src/extensions/core/simpleTouchSupport.ts
index 5734ada727..49c0548abd 100644
--- a/src/extensions/core/simpleTouchSupport.ts
+++ b/src/extensions/core/simpleTouchSupport.ts
@@ -1,5 +1,4 @@
-import { LGraphCanvas, LiteGraph } from '@comfyorg/litegraph'
-
+import { LGraphCanvas, LiteGraph } from '../../lib/litegraph/src/litegraph'
 import { app } from '../../scripts/app'
 
 let touchZooming = false
diff --git a/src/extensions/core/slotDefaults.ts b/src/extensions/core/slotDefaults.ts
index c3bfd657e9..31393883c8 100644
--- a/src/extensions/core/slotDefaults.ts
+++ b/src/extensions/core/slotDefaults.ts
@@ -1,5 +1,4 @@
-import { LiteGraph } from '@comfyorg/litegraph'
-
+import { LiteGraph } from '../../lib/litegraph/src/litegraph'
 import { app } from '../../scripts/app'
 import { ComfyWidgets } from '../../scripts/widgets'
 
diff --git a/src/extensions/core/uploadAudio.ts b/src/extensions/core/uploadAudio.ts
index 94a16d04d2..8b83ae64f4 100644
--- a/src/extensions/core/uploadAudio.ts
+++ b/src/extensions/core/uploadAudio.ts
@@ -1,6 +1,3 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
-import type { IStringWidget } from '@comfyorg/litegraph/dist/types/widgets'
-
 import { useNodeDragAndDrop } from '@/composables/node/useNodeDragAndDrop'
 import { useNodeFileInput } from '@/composables/node/useNodeFileInput'
 import { useNodePaste } from '@/composables/node/useNodePaste'
@@ -10,6 +7,8 @@ import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
 import type { DOMWidget } from '@/scripts/domWidget'
 import { useToastStore } from '@/stores/toastStore'
 
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import type { IStringWidget } from '../../lib/litegraph/src/types/widgets'
 import { api } from '../../scripts/api'
 import { app } from '../../scripts/app'
 
diff --git a/src/extensions/core/widgetInputs.ts b/src/extensions/core/widgetInputs.ts
index ee6dab6838..835666f85a 100644
--- a/src/extensions/core/widgetInputs.ts
+++ b/src/extensions/core/widgetInputs.ts
@@ -1,14 +1,3 @@
-import { LGraphNode, LiteGraph } from '@comfyorg/litegraph'
-import type {
-  INodeInputSlot,
-  INodeOutputSlot,
-  ISlotType,
-  LLink,
-  Vector2
-} from '@comfyorg/litegraph'
-import type { CanvasMouseEvent } from '@comfyorg/litegraph/dist/types/events'
-import type { IBaseWidget } from '@comfyorg/litegraph/dist/types/widgets'
-
 import {
   type CallbackParams,
   useChainCallback
@@ -21,6 +10,17 @@ import { mergeInputSpec } from '@/utils/nodeDefUtil'
 import { applyTextReplacements } from '@/utils/searchAndReplace'
 import { isPrimitiveNode } from '@/utils/typeGuardUtil'
 
+import { LGraphNode, LiteGraph } from '../../lib/litegraph/src/litegraph'
+import type {
+  INodeInputSlot,
+  INodeOutputSlot,
+  ISlotType,
+  LLink,
+  Vector2
+} from '../../lib/litegraph/src/litegraph'
+import type { CanvasMouseEvent } from '../../lib/litegraph/src/types/events'
+import type { IBaseWidget } from '../../lib/litegraph/src/types/widgets'
+
 const replacePropertyName = 'Run widget replace on values'
 export class PrimitiveNode extends LGraphNode {
   controlValues?: any[]
diff --git a/src/lib/litegraph/.cursor/rules/unit-test.mdc b/src/lib/litegraph/.cursor/rules/unit-test.mdc
new file mode 100644
index 0000000000..2c6704f3e2
--- /dev/null
+++ b/src/lib/litegraph/.cursor/rules/unit-test.mdc
@@ -0,0 +1,21 @@
+---
+description: Creating unit tests
+globs: 
+alwaysApply: false
+---
+
+# Creating unit tests
+
+- This project uses `vitest` for unit testing
+- Tests are stored in the `test/` directory
+- Tests should be cross-platform compatible; able to run on Windows, macOS, and linux
+  - e.g. the use of `path.resolve`, or `path.join` and `path.sep` to ensure that tests work the same on all platforms
+- Tests should be mocked properly
+  - Mocks should be cleanly written and easy to understand
+  - Mocks should be re-usable where possible
+
+## Unit test style
+
+- Prefer the use of `test.extend` over loose variables
+  - To achieve this, import `test as baseTest` from `vitest`
+- Never use `it`; `test` should be used in place of this
\ No newline at end of file
diff --git a/src/lib/litegraph/.github/workflows/dev-release.yml b/src/lib/litegraph/.github/workflows/dev-release.yml
new file mode 100644
index 0000000000..d947abdfb3
--- /dev/null
+++ b/src/lib/litegraph/.github/workflows/dev-release.yml
@@ -0,0 +1,62 @@
+name: Create Dev Release
+description: Create a nightly-style npm package for a development / experimental branch. Do not use "latest" tag. This will not have a GitHub release / tag by default.
+
+on:
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: "npm tag (`ni pacakge@tag`)"
+        required: true
+        default: "subgraph"
+      gh-release:
+        description: "Draft a GitHub release"
+        type: boolean
+        required: false
+        default: false
+
+jobs:
+  create-release:
+    runs-on: ubuntu-latest
+    if: inputs.gh-release == true
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+
+      - name: Get current version
+        id: current_version
+        run: |
+          CURRENT_VERSION=$(node -p "require('./package.json').version")
+          echo "version=$CURRENT_VERSION" >> $GITHUB_OUTPUT
+
+      - name: Create release
+        id: create_release
+        uses: softprops/action-gh-release@da05d552573ad5aba039eaac05058a918a7bf631
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: v${{ steps.current_version.outputs.version }}
+          draft: true
+          prerelease: true
+          generate_release_notes: true
+          make_latest: "false"
+
+  publish:
+    runs-on: ubuntu-latest
+    if: inputs.tag != 'latest'
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+          registry-url: "https://registry.npmjs.org"
+
+      - run: npm ci
+      - run: npm run build
+      - run: npm publish --access public --tag ${{ inputs.tag }}
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/src/lib/litegraph/.github/workflows/github-release.yml b/src/lib/litegraph/.github/workflows/github-release.yml
new file mode 100644
index 0000000000..22c1bcb7ea
--- /dev/null
+++ b/src/lib/litegraph/.github/workflows/github-release.yml
@@ -0,0 +1,62 @@
+name: Create GitHub Release
+description: Automatically creates a release when a PR is merged that both that changes package.json and has the Release label.
+
+on:
+  pull_request:
+    types: [closed]
+    branches:
+      - main
+      - master
+    paths:
+      - "package.json"
+
+jobs:
+  create-release:
+    runs-on: ubuntu-latest
+    if: >
+      github.event.pull_request.merged == true &&
+      contains(github.event.pull_request.labels.*.name, 'Release')
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+
+      - name: Get current version
+        id: current_version
+        run: |
+          CURRENT_VERSION=$(node -p "require('./package.json').version")
+          echo "version=$CURRENT_VERSION" >> $GITHUB_OUTPUT
+
+      - name: Create release
+        id: create_release
+        uses: softprops/action-gh-release@da05d552573ad5aba039eaac05058a918a7bf631
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: v${{ steps.current_version.outputs.version }}
+          draft: false
+          prerelease: false
+          generate_release_notes: true
+          make_latest: "true"
+
+  publish:
+    runs-on: ubuntu-latest
+    if: >
+      github.event.pull_request.merged == true &&
+      contains(github.event.pull_request.labels.*.name, 'Release')
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+          registry-url: "https://registry.npmjs.org"
+
+      - run: npm ci
+      - run: npm run build
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/src/lib/litegraph/.github/workflows/release-version.yml b/src/lib/litegraph/.github/workflows/release-version.yml
new file mode 100644
index 0000000000..6fb3b91c16
--- /dev/null
+++ b/src/lib/litegraph/.github/workflows/release-version.yml
@@ -0,0 +1,60 @@
+name: Release a New Version
+description: Creates a PR to increment the version. When the PR is merged, it will automatically create a release.
+
+on:
+  workflow_dispatch:
+    inputs:
+      version_type:
+        description: Version increment type
+        required: true
+        default: patch
+        type: choice
+        options: [patch, minor, major, prepatch, preminor, premajor, prerelease]
+      pre_release:
+        description: Pre-release ID (suffix)
+        required: false
+        default: ""
+        type: string
+
+jobs:
+  bump-version:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: "npm"
+
+      - name: Bump version
+        id: bump-version
+        run: |
+          npm version ${{ github.event.inputs.version_type }} --no-git-tag-version
+          NEW_VERSION=$(node -p "require('./package.json').version")
+          echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
+
+      - name: Format PR string
+        id: capitalised
+        run: |
+          CAPITALISED_TYPE=${{ github.event.inputs.version_type }}
+          echo "capitalised=${CAPITALISED_TYPE@u}" >> $GITHUB_OUTPUT
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
+        with:
+          token: ${{ secrets.PR_GH_TOKEN }}
+          commit-message: "[Release] Increment version to ${{ steps.bump-version.outputs.NEW_VERSION }}"
+          title: ${{ steps.bump-version.outputs.NEW_VERSION }}
+          body: |
+            ${{ steps.capitalised.outputs.capitalised }} version increment to ${{ steps.bump-version.outputs.NEW_VERSION }}
+          branch: version-bump-${{ steps.bump-version.outputs.NEW_VERSION }}
+          base: master
+          labels: |
+            Release
diff --git a/src/lib/litegraph/.github/workflows/test-comfyui-frontend.yml b/src/lib/litegraph/.github/workflows/test-comfyui-frontend.yml
new file mode 100644
index 0000000000..d8f416fb6b
--- /dev/null
+++ b/src/lib/litegraph/.github/workflows/test-comfyui-frontend.yml
@@ -0,0 +1,115 @@
+# This action should be kept in sync with
+# https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/.github/workflows/test-ui.yaml
+
+name: Test ComfyUI Frontend
+
+on:
+  workflow_dispatch:
+    inputs:
+      frontend-branch:
+        description: "Frontend branch"
+        required: true
+        default: "main"
+
+  push:
+    branches: [main, master]
+    paths-ignore:
+      - ".cursor/**"
+      - ".husky/**"
+      - ".vscode/**"
+      - ".github/ISSUE_TEMPLATE/**"
+      - "test/**"
+
+  pull_request:
+    branches: [main, master]
+    paths-ignore:
+      - ".cursor/**"
+      - ".husky/**"
+      - ".vscode/**"
+      - ".github/ISSUE_TEMPLATE/**"
+      - "test/**"
+
+jobs:
+  test-comfyui-frontend:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout litegraph
+        uses: actions/checkout@v4
+        with:
+          path: "litegraph"
+
+      - name: Checkout ComfyUI
+        uses: actions/checkout@v4
+        with:
+          repository: "comfyanonymous/ComfyUI"
+          path: "ComfyUI"
+          ref: master
+
+      - name: Checkout ComfyUI_frontend
+        uses: actions/checkout@v4
+        with:
+          repository: "Comfy-Org/ComfyUI_frontend"
+          path: "ComfyUI_frontend"
+          ref: ${{ inputs.frontend-branch }}
+
+      - name: Checkout ComfyUI_devtools
+        uses: actions/checkout@v4
+        with:
+          repository: "Comfy-Org/ComfyUI_devtools"
+          path: "ComfyUI/custom_nodes/ComfyUI_devtools"
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - uses: actions/setup-python@v4
+        with:
+          python-version: "3.10"
+
+      - name: Install requirements
+        run: |
+          python -m pip install --upgrade pip
+          pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cpu
+          pip install -r requirements.txt
+          pip install wait-for-it
+        working-directory: ComfyUI
+
+      - name: Build litegraph
+        run: |
+          npm ci
+          npm run build
+        working-directory: litegraph
+
+      - name: Install updated litegraph in ComfyUI_frontend
+        run: |
+          npm ci
+          npm install ../litegraph
+          npm run build
+        working-directory: ComfyUI_frontend
+
+      - name: Start ComfyUI server
+        run: |
+          python main.py --cpu --multi-user --front-end-root ../ComfyUI_frontend/dist &
+          wait-for-it --service 127.0.0.1:8188 -t 600
+        working-directory: ComfyUI
+
+      - name: Run UI tests
+        run: |
+          npm run test:component
+          npm run test:unit
+        working-directory: ComfyUI_frontend
+
+      - name: Install Playwright Browsers
+        run: npx playwright install chromium --with-deps
+        working-directory: ComfyUI_frontend
+
+      - name: Run Playwright tests (chromium)
+        run: npx playwright test --project=chromium
+        working-directory: ComfyUI_frontend
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: ComfyUI_frontend/playwright-report/
+          retention-days: 30
diff --git a/src/lib/litegraph/.github/workflows/test-lint-format.yml b/src/lib/litegraph/.github/workflows/test-lint-format.yml
new file mode 100644
index 0000000000..355639420e
--- /dev/null
+++ b/src/lib/litegraph/.github/workflows/test-lint-format.yml
@@ -0,0 +1,35 @@
+name: Unit Test, Lint, and Format
+
+on:
+  push:
+    branches: [main, master, "dev*"]
+  pull_request:
+    branches: [main, master, "dev*"]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+
+      - name: Build
+        run: |
+          npm ci
+          npm run build
+
+      - name: Run lint
+        run: |
+          npm run lint:ci
+
+      - name: Run format
+        run: |
+          npm run format
+
+      - name: Run vitest tests
+        run: |
+          npm test -- --reporter=verbose
diff --git a/src/lib/litegraph/.gitignore b/src/lib/litegraph/.gitignore
new file mode 100755
index 0000000000..5721fd8739
--- /dev/null
+++ b/src/lib/litegraph/.gitignore
@@ -0,0 +1,33 @@
+temp/
+temp/*
+coverage/
+
+# Editors
+*.bak
+.project
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+*.code-workspace
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/src/lib/litegraph/.prettierrc b/src/lib/litegraph/.prettierrc
new file mode 100755
index 0000000000..c3be0e5439
--- /dev/null
+++ b/src/lib/litegraph/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "singleQuote": false,
+  "semi": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "overrides": [{ "files": "*.ts", "options": { "requirePragma": true } }],
+  "arrowParens": "avoid"
+}
diff --git a/src/lib/litegraph/API.md b/src/lib/litegraph/API.md
new file mode 100644
index 0000000000..59d728c073
--- /dev/null
+++ b/src/lib/litegraph/API.md
@@ -0,0 +1,203 @@
+# API
+
+This document is intended to provide a brief introduction to new Litegraph APIs.
+
+<detail open>
+
+<summary>
+
+# CanvasPointer API
+
+</summary>
+
+CanvasPointer replaces much of the original pointer handling code. It provides a standard click, double-click, and drag UX for users.
+
+<detail open>
+
+<summary>
+
+## Default behaviour changes
+
+</summary>
+
+- Dragging multiple items no longer requires that the shift key be held down
+  - Clicking an item when multiple nodes / etc are selected will still deselect everything else
+- Clicking a connected link on an input no longer disconnects and reconnects it
+- Double-clicking requires that both clicks occur nearby
+- Provides much room for extension, configuration, and changes
+
+#### Bug fixes
+
+- Intermittent issue where clicking a node slightly displaces it
+- Alt-clicking to add a reroute creates two undo steps
+
+### Selecting multiple items
+
+- `Ctrl + drag` - Begin multi-select
+- `Ctrl + Shift + drag` - Add to selection
+  - `Ctrl + drag`, `Shift` - Alternate add to selection
+- `Ctrl + drag`, `Alt` - Remove from selection
+
+### Click "drift"
+
+A small amount of buffering is performed between down/up events to prevent accidental micro-drag events. If either of the two controls are exceeded, the event will be considered a drag event, not a click.
+
+- `buffterTime` is the maximum time that tiny movements can be ignored (Default: 150ms)
+- `maxClickDrift` controls how far a click can drift from its down event before it is considered a drag (Default: 6)
+
+### Double-click
+
+When double clicking, the double click callback is executed shortly after one normal click callback (if present). At present, dragging from the second click simply invalidates the event - nothing will happen.
+
+- `doubleClickTime` is the maximum time between two `down` events for them to be considered a double click (Default: 300ms)
+- Distance between the two events must be less than `3 * maxClickDrift`
+
+### Configuration
+
+All above configuration is via class static.
+
+```ts
+CanvasPointer.bufferTime = 150
+CanvasPointer.maxClickDrift = 6
+CanvasPointer.doubleClickTime = 300
+```
+
+</detail>
+
+<detail open>
+
+<summary>
+
+## Implementing
+
+</summary>
+
+Clicking, double-clicking, and dragging can now all be configured during the initial `pointerdown` event, and the correct callback(s) will be executed.
+
+A click event can be as simple as:
+
+```ts
+if (node.isClickedInSpot(e.canvasX, e.canvasY))
+  this.pointer.onClick = () => node.gotClickInSpot()
+```
+
+Full usage can be seen in the old `processMouseDown` handler, which is still in place (several monkey patches in the wild).
+
+### Registering a click or drag event
+
+Example usage:
+
+```typescript
+const { pointer } = this
+// Click / double click - executed on pointerup
+pointer.onClick = e => node.executeClick(e)
+pointer.onDoubleClick = node.gotDoubleClick
+
+// Drag events - executed on pointermove
+pointer.onDragStart = e => {
+  node.isBeingDragged = true
+  canvas.startedDragging(e)
+}
+pointer.onDrag = () => {}
+// finally() is preferred where possible, as it is guaranteed to run
+pointer.onDragEnd = () => {}
+
+// Always run, regardless of outcome
+pointer.finally = () => (node.isBeingDragged = false)
+```
+
+## Widgets
+
+Adds `onPointerDown` callback to node widgets. A few benefits of the new API:
+
+- Simplified usage
+- Exposes callbacks like "double click", removing the need to time / measure multiple pointer events
+- Unified UX - same API as used in the rest of Litegraph
+- Honours the user's click speed and pointer accuracy settings
+
+#### Usage
+
+```ts
+// Callbacks for each pointer action can be configured ahead of time
+widget.onPointerDown = function (pointer, node, canvas) {
+  const e = pointer.eDown
+  const offsetFromNode = [e.canvasX - node.pos[0], e.canvasY - node.pos[1]]
+
+  // Click events - no overlap with drag events
+  pointer.onClick = upEvent => {
+    // Provides access to the whole lifecycle of events in every callback
+    console.log(pointer.eDown)
+    console.log(pointer.eMove ?? "Pointer didn't move")
+    console.log(pointer.eUp)
+  }
+  pointer.onDoubleClick = upEvent => this.customFunction(upEvent)
+
+  // Runs once before the first onDrag event
+  pointer.onDragStart = () => {}
+  // Receives every movement event
+  pointer.onDrag = moveEvent => {}
+  // The pointerup event of a drag
+  pointer.onDragEnd = upEvent => {}
+
+  // Semantics of a "finally" block (try/catch).  Once set, the block always executes.
+  pointer.finally = () => {}
+
+  // Return true to cancel regular Litegraph handling of this click / drag
+  return true
+}
+```
+
+</detail>
+
+### TypeScript & JSDoc
+
+In-IDE typing is available for use in at least mainstream editors. It can be added to JS projects using the @comfyorg/litegraph npm package.
+
+```ts
+/** @import { IWidget } from './path/to/@comfyorg/litegraph/litegraph.d.ts' */
+/** @type IWidget */
+const widget = node.widgets[0]
+widget.onPointerDown = function (pointer, node, canvas) {}
+```
+
+#### VS Code
+
+![image](https://github.com/user-attachments/assets/e14afd02-247f-44dc-acbf-6333027cd488)
+
+## Hovering over
+
+Adds API for downstream consumers to handle custom cursors. A bitwise enum of items,
+
+```typescript
+type LGraphCanvasState = {
+  /** If `true`, pointer move events will set the canvas cursor style. */
+  shouldSetCursor: boolean,
+  /** Bit flags indicating what is currently below the pointer. */
+  hoveringOver: CanvasItem,
+  ...
+}
+
+// Disable litegraph cursors
+canvas.state.shouldSetCursor = false
+
+// Checking state - bit operators
+if (canvas.state.hoveringOver & CanvasItem.ResizeSe) element.style.cursor = 'se-resize'
+```
+
+</detail>
+
+# Removed public interfaces
+
+All are unused and incomplete. Have bugs beyond just typescript typing, and are (currently) not worth maintaining. If any of these features are desired down the track, they can be reimplemented.
+
+- Live mode
+- Subgraph
+- `dragged_node`
+
+## LiteGraph
+
+These features have not been maintained, and would require refactoring / rewrites. As code search revealed them to be unused, they are being removed.
+
+- addNodeMethod
+- compareObjects
+- auto_sort_node_types (option)
diff --git a/src/lib/litegraph/CLAUDE.md b/src/lib/litegraph/CLAUDE.md
new file mode 100644
index 0000000000..cebc67dace
--- /dev/null
+++ b/src/lib/litegraph/CLAUDE.md
@@ -0,0 +1,26 @@
+- This codebase has extensive eslint autofix rules and IDEs are configured to use eslint as the format on save tool. Run ESLint instead of manually figuring out whitespace fixes or other trivial style concerns. Review the results and correct any remaining eslint errors.
+- Take advantage of `TypedArray` `subarray` when appropriate.
+- The `size` and `pos` properties of `Rectangle` share the same array buffer (`subarray`); they may be used to set the rectangles size and position.
+- Prefer single line `if` syntax over adding curly braces, when the statement has a very concise expression and concise, single line statement.
+- Do not replace `&&=` or `||=` with `=` when there is no reason to do so. If you do find a reason to remove either `&&=` or `||=`, leave a comment explaining why the removal occurred.
+- You are allowed to research code on https://developer.mozilla.org/ and https://stackoverflow.com without asking.
+- When adding features, always write vitest unit tests using cursor rules in @.cursor
+- When writing methods, prefer returning idiomatic JavaScript `undefined` over `null`.
+
+# Bash commands
+
+- `npm run typecheck` Run the typechecker
+- `npm run build` Build the project
+- `npm run lint:fix` Run ESLint
+
+# Code style
+
+- Always prefer best practices when writing code.
+- Write using concise, legible, and easily maintainable code.
+- Avoid repetition where possible, but not at the expense of code legibility.
+- Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code.
+
+# Workflow
+
+- Be sure to typecheck when you’re done making a series of code changes
+- Prefer running single tests, and not the whole test suite, for performance
diff --git a/src/lib/litegraph/CONTRIBUTING.md b/src/lib/litegraph/CONTRIBUTING.md
new file mode 100755
index 0000000000..45043616b4
--- /dev/null
+++ b/src/lib/litegraph/CONTRIBUTING.md
@@ -0,0 +1,9 @@
+# Contribution Rules
+There are some simple rules that everyone should follow:
+
+### Do not commit files from build folder
+> I usually have horrible merge conflicts when I upload the build version that take me too much time to solve, but I want to keep the build version in the repo, so I guess it would be better if only one of us does the built, which would be me.
+> https://github.com/jagenjo/litegraph.js/pull/155#issuecomment-656602861
+Those files will be updated by owner.
+
+
diff --git a/src/lib/litegraph/LICENSE b/src/lib/litegraph/LICENSE
new file mode 100755
index 0000000000..1b52aa11c1
--- /dev/null
+++ b/src/lib/litegraph/LICENSE
@@ -0,0 +1,19 @@
+Copyright (C) 2013 by Javi Agenjo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/src/lib/litegraph/README.md b/src/lib/litegraph/README.md
new file mode 100755
index 0000000000..1d79f8c7ce
--- /dev/null
+++ b/src/lib/litegraph/README.md
@@ -0,0 +1,173 @@
+# @ComfyOrg/litegraph
+
+This is the litegraph version used in [ComfyUI_frontend](https://github.com/Comfy-Org/ComfyUI_frontend).
+
+It is a fork of the original `litegraph.js`. Some APIs may by unchanged, however it is largely incompatible with the original.
+
+Some early highlights:
+
+- Accumulated comfyUI custom changes (2024-01 ~ 2024-05) (https://github.com/Comfy-Org/litegraph.js/pull/1)
+- Type schema change for ComfyUI_frontend TS migration (https://github.com/Comfy-Org/litegraph.js/pull/3)
+- Zoom fix (https://github.com/Comfy-Org/litegraph.js/pull/7)
+- Emit search box triggering custom events (<https://github.com/Comfy-Org/litegraph.js/pull/10>)
+- Truncate overflowing combo widget text (<https://github.com/Comfy-Org/litegraph.js/pull/17>)
+- Sort node based on ID on graph serialization (<https://github.com/Comfy-Org/litegraph.js/pull/21>)
+- Fix empty input not used when connecting links (<https://github.com/Comfy-Org/litegraph.js/pull/24>)
+- Batch output connection move/disconnect (<https://github.com/Comfy-Org/litegraph.js/pull/39>)
+- And now with hundreds more...
+
+# Install
+
+`npm i @comfyorg/litegraph`
+
+# litegraph.js
+
+A TypeScript library to create graphs in the browser similar to Unreal Blueprints.
+
+<details>
+
+<summary>Description of the original litegraph.js</summary>
+
+A library in Javascript to create graphs in the browser similar to Unreal Blueprints. Nodes can be programmed easily and it includes an editor to construct and tests the graphs.
+
+It can be integrated easily in any existing web applications and graphs can be run without the need of the editor.
+
+</details>
+
+![Node Graph](imgs/node_graph_example.png "Node graph example")
+
+## Features
+
+- Renders on Canvas2D (zoom in/out and panning, easy to render complex interfaces, can be used inside a WebGLTexture)
+- Easy to use editor (searchbox, keyboard shortcuts, multiple selection, context menu, ...)
+- Optimized to support hundreds of nodes per graph (on editor but also on execution)
+- Customizable theme (colors, shapes, background)
+- Callbacks to personalize every action/drawing/event of nodes
+- Graphs can be executed in NodeJS
+- Highly customizable nodes (color, shape, widgets, custom rendering)
+- Easy to integrate in any JS application (one single file, no dependencies)
+- Typescript support
+
+## Installation
+
+You can install it using npm
+
+```bash
+npm install @comfyorg/litegraph
+```
+
+## How to code a new Node type
+
+Here is an example of how to build a node that sums two inputs:
+
+```ts
+import { LiteGraph, LGraphNode } from "./litegraph"
+
+class MyAddNode extends LGraphNode {
+  // Name to show
+  title = "Sum"
+
+  constructor() {
+    this.addInput("A", "number")
+    this.addInput("B", "number")
+    this.addOutput("A+B", "number")
+    this.properties.precision = 1
+  }
+
+  // Function to call when the node is executed
+  onExecute() {
+    var A = this.getInputData(0)
+    if (A === undefined) A = 0
+    var B = this.getInputData(1)
+    if (B === undefined) B = 0
+    this.setOutputData(0, A + B)
+  }
+}
+
+// Register the node type
+LiteGraph.registerNodeType("basic/sum", MyAddNode)
+```
+
+## Server side
+
+It also works server-side using NodeJS although some nodes do not work in server (audio, graphics, input, etc).
+
+```ts
+import { LiteGraph, LGraph } from "./litegraph.js"
+
+const graph = new LGraph()
+
+const firstNode = LiteGraph.createNode("basic/sum")
+graph.add(firstNode)
+
+const secondNode = LiteGraph.createNode("basic/sum")
+graph.add(secondNode)
+
+firstNode.connect(0, secondNode, 1)
+
+graph.start()
+```
+
+## Projects using it
+
+### [ComfyUI](https://github.com/comfyanonymous/ComfyUI)
+
+![ComfyUI default workflow](https://github.com/comfyanonymous/ComfyUI/blob/6efe561c2a7321501b1b27f47039c7616dda1860/comfyui_screenshot.png "ComfyUI default workflow")
+
+### Projects using the original litegraph.js
+
+<details>
+
+<summary>Click to expand</summary>
+
+### [webglstudio.org](http://webglstudio.org)
+
+![WebGLStudio](imgs/webglstudio.gif "WebGLStudio")
+
+### [MOI Elephant](http://moiscript.weebly.com/elephant-systegraveme-nodal.html)
+
+![MOI Elephant](imgs/elephant.gif "MOI Elephant")
+
+### Mynodes
+
+![MyNodes](imgs/mynodes.png "MyNodes")
+
+</details>
+
+## Feedback
+
+Please [open an issue](https://github.com/Comfy-Org/litegraph.js/issues/) on the GitHub repo.
+
+# Development
+
+Litegraph has no runtime dependencies. The build tooling has been tested on Node.JS 20.18.x
+
+## Releasing
+
+Use GitHub actions to release normal versions.
+
+1. Run the `Release a New Version` action, selecting the version incrment type
+1. Merge the resultion PR
+1. A GitHub release is automatically published on merge
+
+### Pre-release
+
+The action directly translates `Version increment type` to the npm version command. `Pre-release ID (suffix)` is the option for the `--preid` argument.
+
+e.g. Use `prerelease` increment type to automatically bump the patch version and create a pre-release version. Subsequent runs of prerelease will update the prerelease version only.
+Use `patch` when ready to remove the pre-release suffix.
+
+## Contributors
+
+You can find the [current list of contributors](https://github.com/Comfy-Org/litegraph.js/graphs/contributors) on GitHub.
+
+### Contributors (pre-fork)
+
+- atlasan
+- kriffe
+- rappestad
+- InventivetalentDev
+- NateScarlet
+- coderofsalvation
+- ilyabesk
+- gausszhou
diff --git a/src/lib/litegraph/imgs/elephant.gif b/src/lib/litegraph/imgs/elephant.gif
new file mode 100755
index 0000000000..3bd28df3c0
Binary files /dev/null and b/src/lib/litegraph/imgs/elephant.gif differ
diff --git a/src/lib/litegraph/imgs/mynodes.png b/src/lib/litegraph/imgs/mynodes.png
new file mode 100755
index 0000000000..29ed2ff9cd
Binary files /dev/null and b/src/lib/litegraph/imgs/mynodes.png differ
diff --git a/src/lib/litegraph/imgs/node_graph_example.png b/src/lib/litegraph/imgs/node_graph_example.png
new file mode 100755
index 0000000000..1ff51fac9a
Binary files /dev/null and b/src/lib/litegraph/imgs/node_graph_example.png differ
diff --git a/src/lib/litegraph/imgs/webglstudio.gif b/src/lib/litegraph/imgs/webglstudio.gif
new file mode 100755
index 0000000000..7ba42947a7
Binary files /dev/null and b/src/lib/litegraph/imgs/webglstudio.gif differ
diff --git a/src/lib/litegraph/package.json b/src/lib/litegraph/package.json
new file mode 100644
index 0000000000..ef2bfac094
--- /dev/null
+++ b/src/lib/litegraph/package.json
@@ -0,0 +1,55 @@
+{
+  "name": "@comfyorg/litegraph",
+  "version": "0.16.3",
+  "type": "module",
+  "description": "A graph node editor similar to PD or UDK Blueprints. It works in an HTML5 Canvas and allows to export graphs to be included in applications.",
+  "main": "./dist/litegraph.umd.js",
+  "module": "./dist/litegraph.es.js",
+  "types": "./dist/litegraph.d.ts",
+  "style": "./dist/css/litegraph.css",
+  "exports": {
+    ".": {
+      "types": "./dist/litegraph.d.ts",
+      "import": "./dist/litegraph.es.js",
+      "require": "./dist/litegraph.umd.js"
+    },
+    "./style.css": "./dist/css/litegraph.css",
+    "./dist/*": "./dist/*.d.ts"
+  },
+  "directories": {
+    "doc": "doc"
+  },
+  "private": false,
+  "scripts": {
+    "build": "tsc && vite build",
+    "dev": "vite",
+    "preview": "vite preview",
+    "watch": "vite build --watch",
+    "test": "vitest",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix",
+    "lint:ci": "eslint src",
+    "format": "prettier --check './src/*.{js,ts,tsx,vue,mts}'",
+    "format:fix": "prettier --write './src/*.{js,ts,tsx,vue,mts}'",
+    "typecheck": "tsc"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Comfy-Org/litegraph.js.git"
+  },
+  "author": "comfyorg",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "bugs": {
+    "url": "https://github.com/Comfy-Org/litegraph.js/issues"
+  },
+  "homepage": "https://github.com/Comfy-Org/litegraph.js",
+  "devDependencies": {
+    "@types/node": "^22.13.9",
+    "jsdom": "^25.0.1",
+    "ts-node": "^10.9.2",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}
diff --git a/src/lib/litegraph/public/css/litegraph.css b/src/lib/litegraph/public/css/litegraph.css
new file mode 100644
index 0000000000..ec23023ebf
--- /dev/null
+++ b/src/lib/litegraph/public/css/litegraph.css
@@ -0,0 +1,638 @@
+/* this CSS contains only the basic CSS needed to run the app and use it */
+
+.lgraphcanvas {
+  /*cursor: crosshair;*/
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  outline: none;
+  font-family: Tahoma, sans-serif;
+}
+
+.lgraphcanvas * {
+  box-sizing: border-box;
+}
+
+.litegraph.litecontextmenu {
+  font-family: Tahoma, sans-serif;
+  position: fixed;
+  top: 100px;
+  left: 100px;
+  min-width: 100px;
+  color: #aaf;
+  padding: 0;
+  box-shadow: 0 0 10px black !important;
+  background-color: #2e2e2e !important;
+  z-index: 10;
+  max-height: -webkit-fill-available;
+  overflow-y: auto;
+}
+
+/* Enable scrolling overflow in Firefox */
+@supports not (max-height: -webkit-fill-available) {
+  .litegraph.litecontextmenu {
+    max-height: 80vh;
+    overflow-y: scroll;
+  }
+}
+
+.litegraph.litecontextmenu.dark {
+  background-color: #000 !important;
+}
+
+.litegraph.litecontextmenu .litemenu-title img {
+  margin-top: 2px;
+  margin-left: 2px;
+  margin-right: 4px;
+}
+
+.litegraph.litecontextmenu .litemenu-entry {
+  margin: 2px;
+  padding: 2px;
+}
+
+.litegraph.litecontextmenu .litemenu-entry.submenu {
+  background-color: #2e2e2e !important;
+}
+
+.litegraph.litecontextmenu.dark .litemenu-entry.submenu {
+  background-color: #000 !important;
+}
+
+.litegraph .litemenubar ul {
+  font-family: Tahoma, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+.litegraph .litemenubar li {
+  font-size: 14px;
+  color: #999;
+  display: inline-block;
+  min-width: 50px;
+  padding-left: 10px;
+  padding-right: 10px;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  cursor: pointer;
+}
+
+.litegraph .litemenubar li:hover {
+  background-color: #777;
+  color: #eee;
+}
+
+.litegraph .litegraph .litemenubar-panel {
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  min-width: 100px;
+  background-color: #444;
+  box-shadow: 0 0 3px black;
+  padding: 4px;
+  border-bottom: 2px solid #aaf;
+  z-index: 10;
+}
+
+.litegraph .litemenu-entry,
+.litemenu-title {
+  font-size: 12px;
+  color: #aaa;
+  padding: 0 0 0 4px;
+  margin: 2px;
+  padding-left: 2px;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: pointer;
+}
+
+.litegraph .litemenu-entry .icon {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  margin: 2px;
+  vertical-align: top;
+}
+
+.litegraph .litemenu-entry.checked .icon {
+  background-color: #aaf;
+}
+
+.litegraph .litemenu-entry .more {
+  float: right;
+  padding-right: 5px;
+}
+
+.litegraph .litemenu-entry.disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.litegraph .litemenu-entry.separator {
+  display: block;
+  border-top: 1px solid #333;
+  border-bottom: 1px solid #666;
+  width: 100%;
+  height: 0px;
+  margin: 3px 0 2px 0;
+  background-color: transparent;
+  padding: 0 !important;
+  cursor: default !important;
+}
+
+.litegraph .litemenu-entry.has_submenu {
+  border-right: 2px solid cyan;
+}
+
+.litegraph .litemenu-title {
+  color: #dde;
+  background-color: #111;
+  margin: 0;
+  padding: 2px;
+  cursor: default;
+}
+
+.litegraph .litemenu-entry:hover:not(.disabled):not(.separator) {
+  background-color: #444 !important;
+  color: #eee;
+  transition: all 0.2s;
+}
+
+.litegraph .litemenu-entry .property_name {
+  display: inline-block;
+  text-align: left;
+  min-width: 80px;
+  min-height: 1.2em;
+}
+
+.litegraph .litemenu-entry .property_value {
+  display: inline-block;
+  background-color: rgba(0, 0, 0, 0.5);
+  text-align: right;
+  min-width: 80px;
+  min-height: 1.2em;
+  vertical-align: middle;
+  padding-right: 10px;
+}
+
+.litegraph.litesearchbox {
+  font-family: Tahoma, sans-serif;
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.5);
+  padding-top: 4px;
+}
+
+.litegraph.litesearchbox input,
+.litegraph.litesearchbox select {
+  margin-top: 3px;
+  min-width: 60px;
+  min-height: 1.5em;
+  background-color: black;
+  border: 0;
+  color: white;
+  padding-left: 10px;
+  margin-right: 5px;
+  max-width: 300px;
+}
+
+.litegraph.litesearchbox .name {
+  display: inline-block;
+  min-width: 60px;
+  min-height: 1.5em;
+  padding-left: 10px;
+}
+
+.litegraph.litesearchbox .helper {
+  overflow: auto;
+  max-height: 200px;
+  margin-top: 2px;
+}
+
+.litegraph.lite-search-item {
+  font-family: Tahoma, sans-serif;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  padding-top: 2px;
+}
+
+.litegraph.lite-search-item.not_in_filter {
+  /*background-color: rgba(50, 50, 50, 0.5);*/
+  /*color: #999;*/
+  color: #b99;
+  font-style: italic;
+}
+
+.litegraph.lite-search-item.generic_type {
+  /*background-color: rgba(50, 50, 50, 0.5);*/
+  /*color: #DD9;*/
+  color: #999;
+  font-style: italic;
+}
+
+.litegraph.lite-search-item:hover,
+.litegraph.lite-search-item.selected {
+  cursor: pointer;
+  background-color: white;
+  color: black;
+}
+
+.litegraph.lite-search-item-type {
+  display: inline-block;
+  background: rgba(0, 0, 0, 0.2);
+  margin-left: 5px;
+  font-size: 14px;
+  padding: 2px 5px;
+  position: relative;
+  top: -2px;
+  opacity: 0.8;
+  border-radius: 4px;
+}
+
+/* DIALOGs ******/
+
+.litegraph .dialog {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -150px;
+  margin-left: -200px;
+
+  background-color: #2a2a2a;
+
+  min-width: 400px;
+  min-height: 200px;
+  box-shadow: 0 0 4px #111;
+  border-radius: 6px;
+}
+
+.litegraph .dialog.settings {
+  left: 10px;
+  top: 10px;
+  height: calc(100% - 20px);
+  margin: auto;
+  max-width: 50%;
+}
+
+.litegraph .dialog.centered {
+  top: 50px;
+  left: 50%;
+  position: absolute;
+  transform: translateX(-50%);
+  min-width: 600px;
+  min-height: 300px;
+  height: calc(100% - 100px);
+  margin: auto;
+}
+
+.litegraph .dialog .close {
+  float: right;
+  margin: 4px;
+  margin-right: 10px;
+  cursor: pointer;
+  font-size: 1.4em;
+}
+
+.litegraph .dialog .close:hover {
+  color: white;
+}
+
+.litegraph .dialog .dialog-header {
+  color: #aaa;
+  border-bottom: 1px solid #161616;
+}
+
+.litegraph .dialog .dialog-header {
+  height: 40px;
+}
+.litegraph .dialog .dialog-footer {
+  height: 50px;
+  padding: 10px;
+  margin: 0;
+  border-top: 1px solid #1a1a1a;
+}
+
+.litegraph .dialog .dialog-header .dialog-title {
+  font: 20px "Arial";
+  margin: 4px;
+  padding: 4px 10px;
+  display: inline-block;
+}
+
+.litegraph .dialog .dialog-content,
+.litegraph .dialog .dialog-alt-content {
+  height: calc(100% - 90px);
+  width: 100%;
+  min-height: 100px;
+  display: inline-block;
+  color: #aaa;
+  /*background-color: black;*/
+  overflow: auto;
+}
+
+.litegraph .dialog .dialog-content h3 {
+  margin: 10px;
+}
+
+.litegraph .dialog .dialog-content .connections {
+  flex-direction: row;
+}
+
+.litegraph .dialog .dialog-content .connections .connections_side {
+  width: calc(50% - 5px);
+  min-height: 100px;
+  background-color: black;
+  display: flex;
+}
+
+.litegraph .dialog .node_type {
+  font-size: 1.2em;
+  display: block;
+  margin: 10px;
+}
+
+.litegraph .dialog .node_desc {
+  opacity: 0.5;
+  display: block;
+  margin: 10px;
+}
+
+.litegraph .dialog .separator {
+  display: block;
+  width: calc(100% - 4px);
+  height: 1px;
+  border-top: 1px solid #000;
+  border-bottom: 1px solid #333;
+  margin: 10px 2px;
+  padding: 0;
+}
+
+.litegraph .dialog .property {
+  margin-bottom: 2px;
+  padding: 4px;
+}
+
+.litegraph .dialog .property:hover {
+  background: #545454;
+}
+
+.litegraph .dialog .property_name {
+  color: #737373;
+  display: inline-block;
+  text-align: left;
+  vertical-align: top;
+  width: 160px;
+  padding-left: 4px;
+  overflow: hidden;
+  margin-right: 6px;
+}
+
+.litegraph .dialog .property:hover .property_name {
+  color: white;
+}
+
+.litegraph .dialog .property_value {
+  display: inline-block;
+  text-align: right;
+  color: #aaa;
+  background-color: #1a1a1a;
+  /*width: calc( 100% - 122px );*/
+  max-width: calc(100% - 162px);
+  min-width: 200px;
+  max-height: 300px;
+  min-height: 20px;
+  padding: 4px;
+  padding-right: 12px;
+  overflow: hidden;
+  cursor: pointer;
+  border-radius: 3px;
+}
+
+.litegraph .dialog .property_value:hover {
+  color: white;
+}
+
+.litegraph .dialog .property.boolean .property_value {
+  padding-right: 30px;
+  color: #a88;
+  /*width: auto;
+    float: right;*/
+}
+
+.litegraph .dialog .property.boolean.bool-on .property_name {
+  color: #8a8;
+}
+.litegraph .dialog .property.boolean.bool-on .property_value {
+  color: #8a8;
+}
+
+.litegraph .dialog .btn {
+  border: 0;
+  border-radius: 4px;
+  padding: 4px 20px;
+  margin-left: 0px;
+  background-color: #060606;
+  color: #8e8e8e;
+}
+
+.litegraph .dialog .btn:hover {
+  background-color: #111;
+  color: #fff;
+}
+
+.litegraph .dialog .btn.delete:hover {
+  background-color: #f33;
+  color: black;
+}
+
+.litegraph .bullet_icon {
+  margin-left: 10px;
+  border-radius: 10px;
+  width: 12px;
+  height: 12px;
+  background-color: #666;
+  display: inline-block;
+  margin-top: 2px;
+  margin-right: 4px;
+  transition: background-color 0.1s ease 0s;
+  -moz-transition: background-color 0.1s ease 0s;
+}
+
+.litegraph .bullet_icon:hover {
+  background-color: #698;
+  cursor: pointer;
+}
+
+/* OLD */
+
+.graphcontextmenu {
+  padding: 4px;
+  min-width: 100px;
+}
+
+.graphcontextmenu-title {
+  color: #dde;
+  background-color: #222;
+  margin: 0;
+  padding: 2px;
+  cursor: default;
+}
+
+.graphmenu-entry {
+  box-sizing: border-box;
+  margin: 2px;
+  padding-left: 20px;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  transition: all linear 0.3s;
+}
+
+.graphmenu-entry.event,
+.litemenu-entry.event {
+  border-left: 8px solid orange;
+  padding-left: 12px;
+}
+
+.graphmenu-entry.disabled {
+  opacity: 0.3;
+}
+
+.graphmenu-entry.submenu {
+  border-right: 2px solid #eee;
+}
+
+.graphmenu-entry:hover {
+  background-color: #555;
+}
+
+.graphmenu-entry.separator {
+  background-color: #111;
+  border-bottom: 1px solid #666;
+  height: 1px;
+  width: calc(100% - 20px);
+  -moz-width: calc(100% - 20px);
+  -webkit-width: calc(100% - 20px);
+}
+
+.graphmenu-entry .property_name {
+  display: inline-block;
+  text-align: left;
+  min-width: 80px;
+  min-height: 1.2em;
+}
+
+.graphmenu-entry .property_value,
+.litemenu-entry .property_value {
+  display: inline-block;
+  background-color: rgba(0, 0, 0, 0.5);
+  text-align: right;
+  min-width: 80px;
+  min-height: 1.2em;
+  vertical-align: middle;
+  padding-right: 10px;
+}
+
+.graphdialog {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  min-height: 2em;
+  background-color: #333;
+  font-size: 1.2em;
+  box-shadow: 0 0 10px black !important;
+  z-index: 10;
+}
+
+.graphdialog.rounded {
+  border-radius: 12px;
+  padding-right: 2px;
+}
+
+.graphdialog .name {
+  display: inline-block;
+  min-width: 60px;
+  min-height: 1.5em;
+  padding-left: 10px;
+}
+
+.graphdialog input,
+.graphdialog textarea,
+.graphdialog select {
+  margin: 3px;
+  min-width: 60px;
+  min-height: 1.5em;
+  background-color: black;
+  border: 0;
+  color: white;
+  padding-left: 10px;
+  outline: none;
+}
+
+.graphdialog textarea {
+  min-height: 150px;
+}
+
+.graphdialog button {
+  margin-top: 3px;
+  vertical-align: top;
+  background-color: #999;
+  border: 0;
+}
+
+.graphdialog button.rounded,
+.graphdialog input.rounded {
+  border-radius: 0 12px 12px 0;
+}
+
+.graphdialog .helper {
+  overflow: auto;
+  max-height: 200px;
+}
+
+.graphdialog .help-item {
+  padding-left: 10px;
+}
+
+.graphdialog .help-item:hover,
+.graphdialog .help-item.selected {
+  cursor: pointer;
+  background-color: white;
+  color: black;
+}
+
+.litegraph .dialog {
+  min-height: 0;
+}
+.litegraph .dialog .dialog-content {
+  display: block;
+}
+.litegraph .graphdialog {
+  display: flex;
+  align-items: center;
+  border-radius: 20px;
+  padding: 4px 10px;
+  position: fixed;
+}
+.litegraph .graphdialog .name {
+  padding: 0;
+  min-height: 0;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.litegraph .graphdialog .value {
+  font-size: 16px;
+  min-height: 0;
+  margin: 0 10px;
+  padding: 2px 5px;
+}
+.litegraph .graphdialog input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+}
+.litegraph .graphdialog button {
+  padding: 4px 18px;
+  border-radius: 20px;
+  cursor: pointer;
+}
diff --git a/src/lib/litegraph/src/CanvasPointer.ts b/src/lib/litegraph/src/CanvasPointer.ts
new file mode 100644
index 0000000000..eba3a02003
--- /dev/null
+++ b/src/lib/litegraph/src/CanvasPointer.ts
@@ -0,0 +1,290 @@
+import type { CompassCorners } from "./interfaces"
+import type { CanvasPointerEvent } from "./types/events"
+
+import { dist2 } from "./measure"
+
+/**
+ * Allows click and drag actions to be declared ahead of time during a pointerdown event.
+ *
+ * By default, it retains the most recent event of each type until it is reset (on pointerup).
+ * - {@link eDown}
+ * - {@link eMove}
+ * - {@link eUp}
+ *
+ * Depending on whether the user clicks or drags the pointer, only the appropriate callbacks are called:
+ * - {@link onClick}
+ * - {@link onDoubleClick}
+ * - {@link onDragStart}
+ * - {@link onDrag}
+ * - {@link onDragEnd}
+ * - {@link finally}
+ * @see
+ * - {@link LGraphCanvas.processMouseDown}
+ * - {@link LGraphCanvas.processMouseMove}
+ * - {@link LGraphCanvas.processMouseUp}
+ */
+export class CanvasPointer {
+  /** Maximum time in milliseconds to ignore click drift */
+  static bufferTime = 150
+
+  /** Maximum gap between pointerup and pointerdown events to be considered as a double click */
+  static doubleClickTime = 300
+
+  /** Maximum offset from click location */
+  static get maxClickDrift() {
+    return this.#maxClickDrift
+  }
+
+  static set maxClickDrift(value) {
+    this.#maxClickDrift = value
+    this.#maxClickDrift2 = value * value
+  }
+
+  static #maxClickDrift = 6
+  /** {@link maxClickDrift} squared.  Used to calculate click drift without `sqrt`. */
+  static #maxClickDrift2 = this.#maxClickDrift ** 2
+
+  /** The element this PointerState should capture input against when dragging. */
+  element: Element
+  /** Pointer ID used by drag capture. */
+  pointerId?: number
+
+  /** Set to true when if the pointer moves far enough after a down event, before the corresponding up event is fired. */
+  dragStarted: boolean = false
+
+  /** The {@link eUp} from the last successful click */
+  eLastDown?: CanvasPointerEvent
+
+  /** Used downstream for touch event support. */
+  isDouble: boolean = false
+  /** Used downstream for touch event support. */
+  isDown: boolean = false
+
+  /** The resize handle currently being hovered or dragged */
+  resizeDirection?: CompassCorners
+
+  /**
+   * If `true`, {@link eDown}, {@link eMove}, and {@link eUp} will be set to
+   * `undefined` when {@link reset} is called.
+   *
+   * Default: `true`
+   */
+  clearEventsOnReset: boolean = true
+
+  /** The last pointerdown event for the primary button */
+  eDown?: CanvasPointerEvent
+  /** The last pointermove event for the primary button */
+  eMove?: CanvasPointerEvent
+  /** The last pointerup event for the primary button */
+  eUp?: CanvasPointerEvent
+
+  /**
+   * If set, as soon as the mouse moves outside the click drift threshold, this action is run once.
+   * @param pointer [DEPRECATED] This parameter will be removed in a future release.
+   * @param eMove The pointermove event of this ongoing drag action.
+   *
+   * It is possible for no `pointermove` events to occur, but still be far from
+   * the original `pointerdown` event. In this case, {@link eMove} will be null, and
+   * {@link onDragEnd} will be called immediately after {@link onDragStart}.
+   */
+  onDragStart?(pointer: this, eMove?: CanvasPointerEvent): unknown
+
+  /**
+   * Called on pointermove whilst dragging.
+   * @param eMove The pointermove event of this ongoing drag action
+   */
+  onDrag?(eMove: CanvasPointerEvent): unknown
+
+  /**
+   * Called on pointerup after dragging (i.e. not called if clicked).
+   * @param upEvent The pointerup or pointermove event that triggered this callback
+   */
+  onDragEnd?(upEvent: CanvasPointerEvent): unknown
+
+  /**
+   * Callback that will be run once, the next time a pointerup event appears to be a normal click.
+   * @param upEvent The pointerup or pointermove event that triggered this callback
+   */
+  onClick?(upEvent: CanvasPointerEvent): unknown
+
+  /**
+   * Callback that will be run once, the next time a pointerup event appears to be a normal click.
+   * @param upEvent The pointerup or pointermove event that triggered this callback
+   */
+  onDoubleClick?(upEvent: CanvasPointerEvent): unknown
+
+  /**
+   * Run-once callback, called at the end of any click or drag, whether or not it was successful in any way.
+   *
+   * The setter of this callback will call the existing value before replacing it.
+   * Therefore, simply setting this value twice will execute the first callback.
+   */
+  get finally() {
+    return this.#finally
+  }
+
+  set finally(value) {
+    try {
+      this.#finally?.()
+    } finally {
+      this.#finally = value
+    }
+  }
+
+  #finally?: () => unknown
+
+  constructor(element: Element) {
+    this.element = element
+  }
+
+  /**
+   * Callback for `pointerdown` events.  To be used as the event handler (or called by it).
+   * @param e The `pointerdown` event
+   */
+  down(e: CanvasPointerEvent): void {
+    this.reset()
+    this.eDown = e
+    this.pointerId = e.pointerId
+    this.element.setPointerCapture(e.pointerId)
+  }
+
+  /**
+   * Callback for `pointermove` events.  To be used as the event handler (or called by it).
+   * @param e The `pointermove` event
+   */
+  move(e: CanvasPointerEvent): void {
+    const { eDown } = this
+    if (!eDown) return
+
+    // No buttons down, but eDown exists - clean up & leave
+    if (!e.buttons) {
+      this.reset()
+      return
+    }
+
+    // Primary button released - treat as pointerup.
+    if (!(e.buttons & eDown.buttons)) {
+      this.#completeClick(e)
+      this.reset()
+      return
+    }
+    this.eMove = e
+    this.onDrag?.(e)
+
+    // Dragging, but no callback to run
+    if (this.dragStarted) return
+
+    const longerThanBufferTime = e.timeStamp - eDown.timeStamp > CanvasPointer.bufferTime
+    if (longerThanBufferTime || !this.#hasSamePosition(e, eDown)) {
+      this.#setDragStarted(e)
+    }
+  }
+
+  /**
+   * Callback for `pointerup` events.  To be used as the event handler (or called by it).
+   * @param e The `pointerup` event
+   */
+  up(e: CanvasPointerEvent): boolean {
+    if (e.button !== this.eDown?.button) return false
+
+    this.#completeClick(e)
+    const { dragStarted } = this
+    this.reset()
+    return !dragStarted
+  }
+
+  #completeClick(e: CanvasPointerEvent): void {
+    const { eDown } = this
+    if (!eDown) return
+
+    this.eUp = e
+
+    if (this.dragStarted) {
+      // A move event already started drag
+      this.onDragEnd?.(e)
+    } else if (!this.#hasSamePosition(e, eDown)) {
+      // Teleport without a move event (e.g. tab out, move, tab back)
+      this.#setDragStarted()
+      this.onDragEnd?.(e)
+    } else if (this.onDoubleClick && this.#isDoubleClick()) {
+      // Double-click event
+      this.onDoubleClick(e)
+      this.eLastDown = undefined
+    } else {
+      // Normal click event
+      this.onClick?.(e)
+      this.eLastDown = eDown
+    }
+  }
+
+  /**
+   * Checks if two events occurred near each other - not further apart than the maximum click drift.
+   * @param a The first event to compare
+   * @param b The second event to compare
+   * @param tolerance2 The maximum distance (squared) before the positions are considered different
+   * @returns `true` if the two events were no more than {@link maxClickDrift} apart, otherwise `false`
+   */
+  #hasSamePosition(
+    a: PointerEvent,
+    b: PointerEvent,
+    tolerance2 = CanvasPointer.#maxClickDrift2,
+  ): boolean {
+    const drift = dist2(a.clientX, a.clientY, b.clientX, b.clientY)
+    return drift <= tolerance2
+  }
+
+  /**
+   * Checks whether the pointer is currently past the max click drift threshold.
+   * @returns `true` if the latest pointer event is past the the click drift threshold
+   */
+  #isDoubleClick(): boolean {
+    const { eDown, eLastDown } = this
+    if (!eDown || !eLastDown) return false
+
+    // Use thrice the drift distance for double-click gap
+    const tolerance2 = (3 * CanvasPointer.#maxClickDrift) ** 2
+    const diff = eDown.timeStamp - eLastDown.timeStamp
+    return diff > 0 &&
+      diff < CanvasPointer.doubleClickTime &&
+      this.#hasSamePosition(eDown, eLastDown, tolerance2)
+  }
+
+  #setDragStarted(eMove?: CanvasPointerEvent): void {
+    this.dragStarted = true
+    this.onDragStart?.(this, eMove)
+    delete this.onDragStart
+  }
+
+  /**
+   * Resets the state of this {@link CanvasPointer} instance.
+   *
+   * The {@link finally} callback is first executed, then all callbacks and intra-click
+   * state is cleared.
+   */
+  reset(): void {
+    // The setter executes the callback before clearing it
+    this.finally = undefined
+    delete this.onClick
+    delete this.onDoubleClick
+    delete this.onDragStart
+    delete this.onDrag
+    delete this.onDragEnd
+
+    this.isDown = false
+    this.isDouble = false
+    this.dragStarted = false
+    this.resizeDirection = undefined
+
+    if (this.clearEventsOnReset) {
+      this.eDown = undefined
+      this.eMove = undefined
+      this.eUp = undefined
+    }
+
+    const { element, pointerId } = this
+    this.pointerId = undefined
+    if (typeof pointerId === "number" && element.hasPointerCapture(pointerId)) {
+      element.releasePointerCapture(pointerId)
+    }
+  }
+}
diff --git a/src/lib/litegraph/src/ContextMenu.ts b/src/lib/litegraph/src/ContextMenu.ts
new file mode 100644
index 0000000000..b525430348
--- /dev/null
+++ b/src/lib/litegraph/src/ContextMenu.ts
@@ -0,0 +1,387 @@
+import type { ContextMenuDivElement, IContextMenuOptions, IContextMenuValue } from "./interfaces"
+
+import { LiteGraph } from "./litegraph"
+
+// TODO: Replace this pattern with something more modern.
+export interface ContextMenu<TValue = unknown> {
+  constructor: new (...args: ConstructorParameters<typeof ContextMenu<TValue>>) => ContextMenu<TValue>
+}
+
+/**
+ * ContextMenu from LiteGUI
+ */
+// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
+export class ContextMenu<TValue = unknown> {
+  options: IContextMenuOptions<TValue>
+  parentMenu?: ContextMenu<TValue>
+  root: ContextMenuDivElement<TValue>
+  current_submenu?: ContextMenu<TValue>
+  lock?: boolean
+
+  controller: AbortController = new AbortController()
+
+  /**
+   * @todo Interface for values requires functionality change - currently accepts
+   * an array of strings, functions, objects, nulls, or undefined.
+   * @param values (allows object { title: "Nice text", callback: function ... })
+   * @param options [optional] Some options:\
+   * - title: title to show on top of the menu
+   * - callback: function to call when an option is clicked, it receives the item information
+   * - ignore_item_callbacks: ignores the callback inside the item, it just calls the options.callback
+   * - event: you can pass a MouseEvent, this way the ContextMenu appears in that position
+   */
+  constructor(values: readonly (string | IContextMenuValue<TValue> | null)[], options: IContextMenuOptions<TValue>) {
+    options ||= {}
+    this.options = options
+
+    // to link a menu with its parent
+    const parent = options.parentMenu
+    if (parent) {
+      if (!(parent instanceof ContextMenu)) {
+        console.error("parentMenu must be of class ContextMenu, ignoring it")
+        options.parentMenu = undefined
+      } else {
+        this.parentMenu = parent
+        this.parentMenu.lock = true
+        this.parentMenu.current_submenu = this
+      }
+      if (parent.options?.className === "dark") {
+        options.className = "dark"
+      }
+    }
+
+    // use strings because comparing classes between windows doesnt work
+    const eventClass = options.event
+      ? options.event.constructor.name
+      : null
+    if (
+      eventClass !== "MouseEvent" &&
+      eventClass !== "CustomEvent" &&
+      eventClass !== "PointerEvent"
+    ) {
+      console.error(`Event passed to ContextMenu is not of type MouseEvent or CustomEvent. Ignoring it. (${eventClass})`)
+      options.event = undefined
+    }
+
+    const root: ContextMenuDivElement<TValue> = document.createElement("div")
+    let classes = "litegraph litecontextmenu litemenubar-panel"
+    if (options.className) classes += ` ${options.className}`
+    root.className = classes
+    root.style.minWidth = "100"
+    root.style.minHeight = "100"
+
+    // Close the context menu when a click occurs outside this context menu or its submenus
+    const { signal } = this.controller
+    const eventOptions = { capture: true, signal }
+
+    if (!this.parentMenu) {
+      document.addEventListener("pointerdown", (e) => {
+        if (e.target instanceof Node && !this.containsNode(e.target)) {
+          this.close()
+        }
+      }, eventOptions)
+    }
+
+    // this prevents the default context browser menu to open in case this menu was created when pressing right button
+    root.addEventListener("pointerup", e => e.preventDefault(), eventOptions)
+
+    // Right button
+    root.addEventListener(
+      "contextmenu",
+      (e) => {
+        if (e.button === 2) e.preventDefault()
+      },
+      eventOptions,
+    )
+
+    root.addEventListener(
+      "pointerdown",
+      (e) => {
+        if (e.button == 2) {
+          this.close()
+          e.preventDefault()
+        }
+      },
+      eventOptions,
+    )
+
+    this.root = root
+
+    // title
+    if (options.title) {
+      const element = document.createElement("div")
+      element.className = "litemenu-title"
+      element.innerHTML = options.title
+      root.append(element)
+    }
+
+    // entries
+    for (let i = 0; i < values.length; i++) {
+      const value = values[i]
+      let name = Array.isArray(values) ? value : String(i)
+
+      if (typeof name !== "string") {
+        name = name != null
+          ? (name.content === undefined ? String(name) : name.content)
+          : name
+      }
+
+      this.addItem(name, value, options)
+    }
+
+    // insert before checking position
+    const ownerDocument = (options.event?.target as Node | null | undefined)?.ownerDocument
+    const root_document = ownerDocument || document
+
+    if (root_document.fullscreenElement)
+      root_document.fullscreenElement.append(root)
+    else
+      root_document.body.append(root)
+
+    // compute best position
+    let left = options.left || 0
+    let top = options.top || 0
+    if (options.event) {
+      left = options.event.clientX - 10
+      top = options.event.clientY - 10
+      if (options.title) top -= 20
+
+      if (parent) {
+        const rect = parent.root.getBoundingClientRect()
+        left = rect.left + rect.width
+      }
+
+      const body_rect = document.body.getBoundingClientRect()
+      const root_rect = root.getBoundingClientRect()
+      if (body_rect.height == 0)
+        console.error("document.body height is 0. That is dangerous, set html,body { height: 100%; }")
+
+      if (body_rect.width && left > body_rect.width - root_rect.width - 10)
+        left = body_rect.width - root_rect.width - 10
+      if (body_rect.height && top > body_rect.height - root_rect.height - 10)
+        top = body_rect.height - root_rect.height - 10
+    }
+
+    root.style.left = `${left}px`
+    root.style.top = `${top}px`
+
+    if (LiteGraph.context_menu_scaling && options.scale) {
+      root.style.transform = `scale(${Math.round(options.scale * 4) * 0.25})`
+    }
+  }
+
+  /**
+   * Checks if {@link node} is inside this context menu or any of its submenus
+   * @param node The {@link Node} to check
+   * @param visited A set of visited menus to avoid circular references
+   * @returns `true` if {@link node} is inside this context menu or any of its submenus
+   */
+  containsNode(node: Node, visited: Set<this> = new Set()): boolean {
+    if (visited.has(this)) return false
+    visited.add(this)
+
+    return this.current_submenu?.containsNode(node, visited) || this.root.contains(node)
+  }
+
+  addItem(
+    name: string | null,
+    value: string | IContextMenuValue<TValue> | null,
+    options: IContextMenuOptions<TValue>,
+  ): HTMLElement {
+    options ||= {}
+
+    const element: ContextMenuDivElement<TValue> = document.createElement("div")
+    element.className = "litemenu-entry submenu"
+
+    let disabled = false
+
+    if (value === null) {
+      element.classList.add("separator")
+    } else {
+      const innerHtml = name === null ? "" : String(name)
+      if (typeof value === "string") {
+        element.innerHTML = innerHtml
+      } else {
+        element.innerHTML = value?.title ?? innerHtml
+
+        if (value.disabled) {
+          disabled = true
+          element.classList.add("disabled")
+          element.setAttribute("aria-disabled", "true")
+        }
+        if (value.submenu || value.has_submenu) {
+          element.classList.add("has_submenu")
+          element.setAttribute("aria-haspopup", "true")
+          element.setAttribute("aria-expanded", "false")
+        }
+        if (value.className) element.className += ` ${value.className}`
+      }
+      element.value = value
+      element.setAttribute("role", "menuitem")
+
+      if (typeof value === "function") {
+        element.dataset["value"] = String(name)
+        element.onclick_callback = value
+      } else {
+        element.dataset["value"] = String(value)
+      }
+    }
+
+    this.root.append(element)
+    if (!disabled) element.addEventListener("click", inner_onclick)
+    if (!disabled && options.autoopen)
+      element.addEventListener("pointerenter", inner_over)
+
+    const setAriaExpanded = () => {
+      const entries = this.root.querySelectorAll("div.litemenu-entry.has_submenu")
+      if (entries) {
+        for (const entry of entries) {
+          entry.setAttribute("aria-expanded", "false")
+        }
+      }
+      element.setAttribute("aria-expanded", "true")
+    }
+
+    function inner_over(this: ContextMenuDivElement<TValue>, e: MouseEvent) {
+      const value = this.value
+      if (!value || !(value as IContextMenuValue).has_submenu) return
+
+      // if it is a submenu, autoopen like the item was clicked
+      inner_onclick.call(this, e)
+      setAriaExpanded()
+    }
+
+    // menu option clicked
+    const that = this
+    function inner_onclick(this: ContextMenuDivElement<TValue>, e: MouseEvent) {
+      const value = this.value
+      let close_parent = true
+
+      that.current_submenu?.close(e)
+      if (
+        (value as IContextMenuValue)?.has_submenu ||
+        (value as IContextMenuValue)?.submenu
+      ) {
+        setAriaExpanded()
+      }
+
+      // global callback
+      if (options.callback) {
+        const r = options.callback.call(
+          this,
+          value,
+          options,
+          e,
+          that,
+          options.node,
+        )
+        if (r === true) close_parent = false
+      }
+
+      // special cases
+      if (typeof value === "object") {
+        if (
+          value.callback &&
+          !options.ignore_item_callbacks &&
+          value.disabled !== true
+        ) {
+          // item callback
+          const r = value.callback.call(
+            this,
+            value,
+            options,
+            e,
+            that,
+            options.extra,
+          )
+          if (r === true) close_parent = false
+        }
+        if (value.submenu) {
+          if (!value.submenu.options) throw "ContextMenu submenu needs options"
+
+          new that.constructor(value.submenu.options, {
+            callback: value.submenu.callback,
+            event: e,
+            parentMenu: that,
+            ignore_item_callbacks: value.submenu.ignore_item_callbacks,
+            title: value.submenu.title,
+            extra: value.submenu.extra,
+            autoopen: options.autoopen,
+          })
+          close_parent = false
+        }
+      }
+
+      if (close_parent && !that.lock) that.close()
+    }
+
+    return element
+  }
+
+  close(e?: MouseEvent, ignore_parent_menu?: boolean): void {
+    this.controller.abort()
+    this.root.remove()
+    if (this.parentMenu && !ignore_parent_menu) {
+      this.parentMenu.lock = false
+      this.parentMenu.current_submenu = undefined
+      if (e === undefined) {
+        this.parentMenu.close()
+      } else if (e && !ContextMenu.isCursorOverElement(e, this.parentMenu.root)) {
+        ContextMenu.trigger(
+          this.parentMenu.root,
+          `${LiteGraph.pointerevents_method}leave`,
+          e,
+        )
+      }
+    }
+    this.current_submenu?.close(e, true)
+  }
+
+  /** @deprecated Likely unused, however code search was inconclusive (too many results to check by hand). */
+  // this code is used to trigger events easily (used in the context menu mouseleave
+  static trigger(
+    element: HTMLDivElement,
+    event_name: string,
+    params: MouseEvent,
+  ): CustomEvent {
+    const evt = document.createEvent("CustomEvent")
+    evt.initCustomEvent(event_name, true, true, params)
+    if (element.dispatchEvent) element.dispatchEvent(evt)
+    // else nothing seems binded here so nothing to do
+    return evt
+  }
+
+  // returns the top most menu
+  getTopMenu(): ContextMenu<TValue> {
+    return this.options.parentMenu
+      ? this.options.parentMenu.getTopMenu()
+      : this
+  }
+
+  getFirstEvent(): MouseEvent | undefined {
+    return this.options.parentMenu
+      ? this.options.parentMenu.getFirstEvent()
+      : this.options.event
+  }
+
+  /** @deprecated Unused. */
+  static isCursorOverElement(
+    event: MouseEvent,
+    element: HTMLDivElement,
+  ): boolean {
+    const left = event.clientX
+    const top = event.clientY
+    const rect = element.getBoundingClientRect()
+    if (!rect) return false
+
+    if (
+      top > rect.top &&
+      top < rect.top + rect.height &&
+      left > rect.left &&
+      left < rect.left + rect.width
+    ) {
+      return true
+    }
+    return false
+  }
+}
diff --git a/src/lib/litegraph/src/CurveEditor.ts b/src/lib/litegraph/src/CurveEditor.ts
new file mode 100644
index 0000000000..f9395e71e5
--- /dev/null
+++ b/src/lib/litegraph/src/CurveEditor.ts
@@ -0,0 +1,195 @@
+import type { Point, Rect } from "./interfaces"
+
+import { clamp, LGraphCanvas } from "./litegraph"
+import { distance } from "./measure"
+
+// used by some widgets to render a curve editor
+
+export class CurveEditor {
+  points: Point[]
+  selected: number
+  nearest: number
+  size: Rect | null
+  must_update: boolean
+  margin: number
+  _nearest?: number
+
+  constructor(points: Point[]) {
+    this.points = points
+    this.selected = -1
+    this.nearest = -1
+    // stores last size used
+    this.size = null
+    this.must_update = true
+    this.margin = 5
+  }
+
+  static sampleCurve(f: number, points: Point[]): number | undefined {
+    if (!points) return
+
+    for (let i = 0; i < points.length - 1; ++i) {
+      const p = points[i]
+      const pn = points[i + 1]
+      if (pn[0] < f) continue
+
+      const r = pn[0] - p[0]
+      if (Math.abs(r) < 0.000_01) return p[1]
+
+      const local_f = (f - p[0]) / r
+      return p[1] * (1.0 - local_f) + pn[1] * local_f
+    }
+    return 0
+  }
+
+  draw(
+    ctx: CanvasRenderingContext2D,
+    size: Rect,
+    graphcanvas?: LGraphCanvas,
+    background_color?: string,
+    line_color?: string,
+    inactive = false,
+  ): void {
+    const points = this.points
+    if (!points) return
+
+    this.size = size
+    const w = size[0] - this.margin * 2
+    const h = size[1] - this.margin * 2
+
+    line_color = line_color || "#666"
+
+    ctx.save()
+    ctx.translate(this.margin, this.margin)
+
+    if (background_color) {
+      ctx.fillStyle = "#111"
+      ctx.fillRect(0, 0, w, h)
+      ctx.fillStyle = "#222"
+      ctx.fillRect(w * 0.5, 0, 1, h)
+      ctx.strokeStyle = "#333"
+      ctx.strokeRect(0, 0, w, h)
+    }
+    ctx.strokeStyle = line_color
+    if (inactive) ctx.globalAlpha = 0.5
+    ctx.beginPath()
+    for (const p of points) {
+      ctx.lineTo(p[0] * w, (1.0 - p[1]) * h)
+    }
+    ctx.stroke()
+    ctx.globalAlpha = 1
+    if (!inactive) {
+      for (const [i, p] of points.entries()) {
+        ctx.fillStyle = this.selected == i
+          ? "#FFF"
+          : (this.nearest == i ? "#DDD" : "#AAA")
+        ctx.beginPath()
+        ctx.arc(p[0] * w, (1.0 - p[1]) * h, 2, 0, Math.PI * 2)
+        ctx.fill()
+      }
+    }
+    ctx.restore()
+  }
+
+  // localpos is mouse in curve editor space
+  onMouseDown(localpos: Point, graphcanvas: LGraphCanvas): boolean | undefined {
+    const points = this.points
+    if (!points) return
+    if (localpos[1] < 0) return
+
+    // this.captureInput(true);
+    if (this.size == null) throw new Error("CurveEditor.size was null or undefined.")
+    const w = this.size[0] - this.margin * 2
+    const h = this.size[1] - this.margin * 2
+    const x = localpos[0] - this.margin
+    const y = localpos[1] - this.margin
+    const pos: Point = [x, y]
+    const max_dist = 30 / graphcanvas.ds.scale
+    // search closer one
+    this.selected = this.getCloserPoint(pos, max_dist)
+    // create one
+    if (this.selected == -1) {
+      const point: Point = [x / w, 1 - y / h]
+      points.push(point)
+      points.sort(function (a, b) {
+        return a[0] - b[0]
+      })
+      this.selected = points.indexOf(point)
+      this.must_update = true
+    }
+    if (this.selected != -1) return true
+  }
+
+  onMouseMove(localpos: Point, graphcanvas: LGraphCanvas): void {
+    const points = this.points
+    if (!points) return
+
+    const s = this.selected
+    if (s < 0) return
+
+    if (this.size == null) throw new Error("CurveEditor.size was null or undefined.")
+    const x = (localpos[0] - this.margin) / (this.size[0] - this.margin * 2)
+    const y = (localpos[1] - this.margin) / (this.size[1] - this.margin * 2)
+    const curvepos: Point = [
+      localpos[0] - this.margin,
+      localpos[1] - this.margin,
+    ]
+    const max_dist = 30 / graphcanvas.ds.scale
+    this._nearest = this.getCloserPoint(curvepos, max_dist)
+    const point = points[s]
+    if (point) {
+      const is_edge_point = s == 0 || s == points.length - 1
+      if (
+        !is_edge_point &&
+        (localpos[0] < -10 ||
+          localpos[0] > this.size[0] + 10 ||
+          localpos[1] < -10 ||
+          localpos[1] > this.size[1] + 10)
+      ) {
+        points.splice(s, 1)
+        this.selected = -1
+        return
+      }
+      // not edges
+      if (!is_edge_point) point[0] = clamp(x, 0, 1)
+      else point[0] = s == 0 ? 0 : 1
+      point[1] = 1.0 - clamp(y, 0, 1)
+      points.sort(function (a, b) {
+        return a[0] - b[0]
+      })
+      this.selected = points.indexOf(point)
+      this.must_update = true
+    }
+  }
+
+  // Former params: localpos, graphcanvas
+  onMouseUp(): boolean {
+    this.selected = -1
+    return false
+  }
+
+  getCloserPoint(pos: Point, max_dist: number): number {
+    const points = this.points
+    if (!points) return -1
+
+    max_dist = max_dist || 30
+    if (this.size == null) throw new Error("CurveEditor.size was null or undefined.")
+    const w = this.size[0] - this.margin * 2
+    const h = this.size[1] - this.margin * 2
+    const num = points.length
+    const p2: Point = [0, 0]
+    let min_dist = 1_000_000
+    let closest = -1
+
+    for (let i = 0; i < num; ++i) {
+      const p = points[i]
+      p2[0] = p[0] * w
+      p2[1] = (1.0 - p[1]) * h
+      const dist = distance(pos, p2)
+      if (dist > min_dist || dist > max_dist) continue
+
+      closest = i
+      min_dist = dist
+    }
+    return closest
+  }
+}
diff --git a/src/lib/litegraph/src/DragAndScale.ts b/src/lib/litegraph/src/DragAndScale.ts
new file mode 100644
index 0000000000..8a56988604
--- /dev/null
+++ b/src/lib/litegraph/src/DragAndScale.ts
@@ -0,0 +1,311 @@
+import type { Point, ReadOnlyRect, Rect } from "./interfaces"
+
+import { EaseFunction, Rectangle } from "./litegraph"
+
+export interface DragAndScaleState {
+  /**
+   * The offset from the top-left of the current canvas viewport to `[0, 0]` in graph space.
+   * Or said another way, the inverse offset of the viewport.
+   */
+  offset: [number, number]
+  /** The scale of the graph. */
+  scale: number
+}
+
+export type AnimationOptions = {
+  /** Duration of the animation in milliseconds. */
+  duration?: number
+  /** Relative target zoom level. 1 means the view is fit exactly on the bounding box. */
+  zoom?: number
+  /** The animation easing function (curve) */
+  easing?: EaseFunction
+}
+
+export class DragAndScale {
+  /**
+   * The state of this DragAndScale instance.
+   *
+   * Implemented as a POCO that can be proxied without side-effects.
+   */
+  state: DragAndScaleState
+  lastState: DragAndScaleState = {
+    offset: [0, 0],
+    scale: 0,
+  }
+
+  /** Maximum scale (zoom in) */
+  max_scale: number
+  /** Minimum scale (zoom out) */
+  min_scale: number
+  enabled: boolean
+  last_mouse: Point
+  element: HTMLCanvasElement
+  visible_area: Rectangle
+  dragging?: boolean
+  viewport?: Rect
+
+  onredraw?(das: DragAndScale): void
+  onChanged?(scale: number, offset: Point): void
+
+  get offset(): [number, number] {
+    return this.state.offset
+  }
+
+  set offset(value: Point) {
+    this.state.offset[0] = value[0]
+    this.state.offset[1] = value[1]
+  }
+
+  get scale(): number {
+    return this.state.scale
+  }
+
+  set scale(value: number) {
+    this.state.scale = value
+  }
+
+  constructor(element: HTMLCanvasElement) {
+    this.state = {
+      offset: [0, 0],
+      scale: 1,
+    }
+    this.max_scale = 10
+    this.min_scale = 0.1
+    this.enabled = true
+    this.last_mouse = [0, 0]
+    this.visible_area = new Rectangle()
+
+    this.element = element
+  }
+
+  /**
+   * Returns `true` if the current state has changed from the previous state.
+   * @returns `true` if the current state has changed from the previous state, otherwise `false`.
+   */
+  #stateHasChanged(): boolean {
+    const current = this.state
+    const previous = this.lastState
+
+    return current.scale !== previous.scale ||
+      current.offset[0] !== previous.offset[0] ||
+      current.offset[1] !== previous.offset[1]
+  }
+
+  computeVisibleArea(viewport: Rect | undefined): void {
+    const { scale, offset, visible_area } = this
+
+    if (this.#stateHasChanged()) {
+      this.onChanged?.(scale, offset)
+      copyState(this.state, this.lastState)
+    }
+
+    if (!this.element) {
+      visible_area[0] = visible_area[1] = visible_area[2] = visible_area[3] = 0
+      return
+    }
+    let { width, height } = this.element
+    let startx = -offset[0]
+    let starty = -offset[1]
+    if (viewport) {
+      startx += viewport[0] / scale
+      starty += viewport[1] / scale
+      width = viewport[2]
+      height = viewport[3]
+    }
+    const endx = startx + width / scale
+    const endy = starty + height / scale
+    visible_area[0] = startx
+    visible_area[1] = starty
+    visible_area.resizeBottomRight(endx, endy)
+  }
+
+  toCanvasContext(ctx: CanvasRenderingContext2D): void {
+    ctx.scale(this.scale, this.scale)
+    ctx.translate(this.offset[0], this.offset[1])
+  }
+
+  convertOffsetToCanvas(pos: Point): Point {
+    return [
+      (pos[0] + this.offset[0]) * this.scale,
+      (pos[1] + this.offset[1]) * this.scale,
+    ]
+  }
+
+  convertCanvasToOffset(pos: Point, out?: Point): Point {
+    out = out || [0, 0]
+    out[0] = pos[0] / this.scale - this.offset[0]
+    out[1] = pos[1] / this.scale - this.offset[1]
+    return out
+  }
+
+  /** @deprecated Has not been kept up to date */
+  mouseDrag(x: number, y: number): void {
+    this.offset[0] += x / this.scale
+    this.offset[1] += y / this.scale
+
+    this.onredraw?.(this)
+  }
+
+  changeScale(value: number, zooming_center?: Point, roundToScaleOne = true): void {
+    if (value < this.min_scale) {
+      value = this.min_scale
+    } else if (value > this.max_scale) {
+      value = this.max_scale
+    }
+    if (value == this.scale) return
+
+    const rect = this.element.getBoundingClientRect()
+    if (!rect) return
+
+    zooming_center = zooming_center ?? [rect.width * 0.5, rect.height * 0.5]
+
+    const normalizedCenter: Point = [
+      zooming_center[0] - rect.x,
+      zooming_center[1] - rect.y,
+    ]
+    const center = this.convertCanvasToOffset(normalizedCenter)
+    this.scale = value
+    if (roundToScaleOne && Math.abs(this.scale - 1) < 0.01) this.scale = 1
+    const new_center = this.convertCanvasToOffset(normalizedCenter)
+    const delta_offset = [
+      new_center[0] - center[0],
+      new_center[1] - center[1],
+    ]
+
+    this.offset[0] += delta_offset[0]
+    this.offset[1] += delta_offset[1]
+
+    this.onredraw?.(this)
+  }
+
+  changeDeltaScale(value: number, zooming_center?: Point): void {
+    this.changeScale(this.scale * value, zooming_center)
+  }
+
+  /**
+   * Fits the view to the specified bounds.
+   * @param bounds The bounds to fit the view to, defined by a rectangle.
+   */
+  fitToBounds(bounds: ReadOnlyRect, { zoom = 0.75 }: { zoom?: number } = {}): void {
+    const cw = this.element.width / window.devicePixelRatio
+    const ch = this.element.height / window.devicePixelRatio
+    let targetScale = this.scale
+
+    if (zoom > 0) {
+      const targetScaleX = (zoom * cw) / Math.max(bounds[2], 300)
+      const targetScaleY = (zoom * ch) / Math.max(bounds[3], 300)
+
+      // Choose the smaller scale to ensure the node fits into the viewport
+      // Ensure we don't go over the max scale
+      targetScale = Math.min(targetScaleX, targetScaleY, this.max_scale)
+    }
+
+    const scaledWidth = cw / targetScale
+    const scaledHeight = ch / targetScale
+
+    // Calculate the target position to center the bounds in the viewport
+    const targetX = -bounds[0] - (bounds[2] * 0.5) + (scaledWidth * 0.5)
+    const targetY = -bounds[1] - (bounds[3] * 0.5) + (scaledHeight * 0.5)
+
+    // Apply the changes immediately
+    this.offset[0] = targetX
+    this.offset[1] = targetY
+    this.scale = targetScale
+  }
+
+  /**
+   * Starts an animation to fit the view around the specified selection of nodes.
+   * @param bounds The bounds to animate the view to, defined by a rectangle.
+   */
+  animateToBounds(
+    bounds: ReadOnlyRect,
+    setDirty: () => void,
+    {
+      duration = 350,
+      zoom = 0.75,
+      easing = EaseFunction.EASE_IN_OUT_QUAD,
+    }: AnimationOptions = {},
+  ) {
+    if (!(duration > 0)) throw new RangeError("Duration must be greater than 0")
+
+    const easeFunctions = {
+      linear: (t: number) => t,
+      easeInQuad: (t: number) => t * t,
+      easeOutQuad: (t: number) => t * (2 - t),
+      easeInOutQuad: (t: number) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
+    }
+    const easeFunction = easeFunctions[easing] ?? easeFunctions.linear
+
+    const startTimestamp = performance.now()
+    const cw = this.element.width / window.devicePixelRatio
+    const ch = this.element.height / window.devicePixelRatio
+    const startX = this.offset[0]
+    const startY = this.offset[1]
+    const startX2 = startX - (cw / this.scale)
+    const startY2 = startY - (ch / this.scale)
+    const startScale = this.scale
+    let targetScale = startScale
+
+    if (zoom > 0) {
+      const targetScaleX = (zoom * cw) / Math.max(bounds[2], 300)
+      const targetScaleY = (zoom * ch) / Math.max(bounds[3], 300)
+
+      // Choose the smaller scale to ensure the node fits into the viewport
+      // Ensure we don't go over the max scale
+      targetScale = Math.min(targetScaleX, targetScaleY, this.max_scale)
+    }
+    const scaledWidth = cw / targetScale
+    const scaledHeight = ch / targetScale
+
+    const targetX = -bounds[0] - (bounds[2] * 0.5) + (scaledWidth * 0.5)
+    const targetY = -bounds[1] - (bounds[3] * 0.5) + (scaledHeight * 0.5)
+    const targetX2 = targetX - scaledWidth
+    const targetY2 = targetY - scaledHeight
+
+    const animate = (timestamp: number) => {
+      const elapsed = timestamp - startTimestamp
+      const progress = Math.min(elapsed / duration, 1)
+      const easedProgress = easeFunction(progress)
+
+      const currentX = startX + ((targetX - startX) * easedProgress)
+      const currentY = startY + ((targetY - startY) * easedProgress)
+      this.offset[0] = currentX
+      this.offset[1] = currentY
+
+      if (zoom > 0) {
+        const currentX2 = startX2 + ((targetX2 - startX2) * easedProgress)
+        const currentY2 = startY2 + ((targetY2 - startY2) * easedProgress)
+        const currentWidth = Math.abs(currentX2 - currentX)
+        const currentHeight = Math.abs(currentY2 - currentY)
+
+        this.scale = Math.min(cw / currentWidth, ch / currentHeight)
+      }
+
+      setDirty()
+
+      if (progress < 1) {
+        animationId = requestAnimationFrame(animate)
+      } else {
+        cancelAnimationFrame(animationId)
+      }
+    }
+    let animationId = requestAnimationFrame(animate)
+  }
+
+  reset(): void {
+    this.scale = 1
+    this.offset[0] = 0
+    this.offset[1] = 0
+  }
+}
+
+/**
+ * Copies the values of one state into another, preserving references.
+ * @param from The state to copy values from.
+ * @param to The state to copy values into.
+ */
+function copyState(from: DragAndScaleState, to: DragAndScaleState): void {
+  to.scale = from.scale
+  to.offset[0] = from.offset[0]
+  to.offset[1] = from.offset[1]
+}
diff --git a/src/lib/litegraph/src/LGraph.ts b/src/lib/litegraph/src/LGraph.ts
new file mode 100644
index 0000000000..ca67b2e019
--- /dev/null
+++ b/src/lib/litegraph/src/LGraph.ts
@@ -0,0 +1,1929 @@
+import type { DragAndScaleState } from "./DragAndScale"
+import type { LGraphEventMap } from "./infrastructure/LGraphEventMap"
+import type {
+  Dictionary,
+  IContextMenuValue,
+  LinkNetwork,
+  LinkSegment,
+  MethodNames,
+  OptionalProps,
+  Point,
+  Positionable,
+} from "./interfaces"
+import type {
+  ExportedSubgraph,
+  ISerialisedGraph,
+  ISerialisedNode,
+  Serialisable,
+  SerialisableGraph,
+  SerialisableReroute,
+} from "./types/serialisation"
+import type { UUID } from './utils/uuid'
+
+import { SUBGRAPH_INPUT_ID, SUBGRAPH_OUTPUT_ID } from './constants'
+import { createUuidv4, zeroUuid } from './utils/uuid'
+
+import { CustomEventTarget } from "./infrastructure/CustomEventTarget"
+import { LGraphCanvas } from "./LGraphCanvas"
+import { LGraphGroup } from "./LGraphGroup"
+import { LGraphNode, type NodeId } from "./LGraphNode"
+import { LiteGraph, SubgraphNode } from "./litegraph"
+import { type LinkId, LLink } from "./LLink"
+import { MapProxyHandler } from "./MapProxyHandler"
+import { alignOutsideContainer, alignToContainer, createBounds } from "./measure"
+import { Reroute, type RerouteId } from "./Reroute"
+import { stringOrEmpty } from "./strings"
+import { type GraphOrSubgraph, Subgraph } from './litegraph'
+import { SubgraphInput } from "./subgraph/SubgraphInput"
+import { SubgraphOutput } from "./subgraph/SubgraphOutput"
+import { getBoundaryLinks, groupResolvedByOutput, mapSubgraphInputsAndLinks, mapSubgraphOutputsAndLinks, multiClone, splitPositionables } from "./subgraph/subgraphUtils"
+import { Alignment, LGraphEventMode } from "./types/globalEnums"
+import { getAllNestedItems } from "./utils/collections"
+
+export interface LGraphState {
+  lastGroupId: number
+  lastNodeId: number
+  lastLinkId: number
+  lastRerouteId: number
+}
+
+type ParamsArray<T extends Record<any, any>, K extends MethodNames<T>> =
+ Parameters<T[K]>[1] extends undefined
+   ? Parameters<T[K]> | Parameters<T[K]>[0]
+   : Parameters<T[K]>
+
+/** Configuration used by {@link LGraph} `config`. */
+export interface LGraphConfig {
+  /** @deprecated Legacy config - unused */
+  align_to_grid?: any
+  links_ontop?: any
+}
+
+export interface LGraphExtra extends Dictionary<unknown> {
+  reroutes?: SerialisableReroute[]
+  linkExtensions?: { id: number, parentId: number | undefined }[]
+  ds?: DragAndScaleState
+}
+
+export interface BaseLGraph {
+  /** The root graph. */
+  readonly rootGraph: LGraph
+}
+
+/**
+ * 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:
+ * + onNodeAdded: when a new node is added to the graph
+ * + onNodeRemoved: when a node inside this graph is removed
+ */
+export class LGraph implements LinkNetwork, BaseLGraph, Serialisable<SerialisableGraph> {
+  static serialisedSchemaVersion = 1 as const
+
+  static STATUS_STOPPED = 1
+  static STATUS_RUNNING = 2
+
+  /** List of LGraph properties that are manually handled by {@link LGraph.configure}. */
+  static readonly ConfigureProperties = new Set([
+    "nodes",
+    "groups",
+    "links",
+    "state",
+    "reroutes",
+    "floatingLinks",
+    "id",
+    "subgraphs",
+    "definitions",
+    "inputs",
+    "outputs",
+    "widgets",
+    "inputNode",
+    "outputNode",
+    "extra",
+  ])
+
+  id: UUID = zeroUuid
+  revision: number = 0
+
+  _version: number = -1
+  /** The backing store for links.  Keys are wrapped in String() */
+  _links: Map<LinkId, LLink> = new Map()
+  /**
+   * Indexed property access is deprecated.
+   * Backwards compatibility with a Proxy has been added, but will eventually be removed.
+   *
+   * Use {@link Map} methods:
+   * ```
+   * const linkId = 123
+   * const link = graph.links.get(linkId)
+   * // Deprecated: const link = graph.links[linkId]
+   * ```
+   */
+  links: Map<LinkId, LLink> & Record<LinkId, LLink>
+  list_of_graphcanvas: LGraphCanvas[] | null
+  status: number = LGraph.STATUS_STOPPED
+
+  state: LGraphState = {
+    lastGroupId: 0,
+    lastNodeId: 0,
+    lastLinkId: 0,
+    lastRerouteId: 0,
+  }
+
+  readonly events = new CustomEventTarget<LGraphEventMap>()
+  readonly _subgraphs: Map<UUID, Subgraph> = new Map()
+
+  _nodes: (LGraphNode | SubgraphNode)[] = []
+  _nodes_by_id: Record<NodeId, LGraphNode> = {}
+  _nodes_in_order: LGraphNode[] = []
+  _nodes_executable: LGraphNode[] | null = null
+  _groups: LGraphGroup[] = []
+  iteration: number = 0
+  globaltime: number = 0
+  /** @deprecated Unused */
+  runningtime: number = 0
+  fixedtime: number = 0
+  fixedtime_lapse: number = 0.01
+  elapsed_time: number = 0.01
+  last_update_time: number = 0
+  starttime: number = 0
+  catch_errors: boolean = true
+  execution_timer_id?: number | null
+  errors_in_execution?: boolean
+  /** @deprecated Unused */
+  execution_time!: number
+  _last_trigger_time?: number
+  filter?: string
+  /** Must contain serialisable values, e.g. primitive types */
+  config: LGraphConfig = {}
+  vars: Dictionary<unknown> = {}
+  nodes_executing: boolean[] = []
+  nodes_actioning: (string | boolean)[] = []
+  nodes_executedAction: string[] = []
+  extra: LGraphExtra = {}
+
+  /** @deprecated Deserialising a workflow sets this unused property. */
+  version?: number
+
+  /** @returns Whether the graph has no items */
+  get empty(): boolean {
+    return this._nodes.length + this._groups.length + this.reroutes.size === 0
+  }
+
+  /** @returns All items on the canvas that can be selected */
+  *positionableItems(): Generator<LGraphNode | LGraphGroup | Reroute> {
+    for (const node of this._nodes) yield node
+    for (const group of this._groups) yield group
+    for (const reroute of this.reroutes.values()) yield reroute
+    return
+  }
+
+  /** Internal only.  Not required for serialisation; calculated on deserialise. */
+  #lastFloatingLinkId: number = 0
+
+  #floatingLinks: Map<LinkId, LLink> = new Map()
+  get floatingLinks(): ReadonlyMap<LinkId, LLink> {
+    return this.#floatingLinks
+  }
+
+  #reroutes = new Map<RerouteId, Reroute>()
+  /** All reroutes in this graph. */
+  public get reroutes(): Map<RerouteId, Reroute> {
+    return this.#reroutes
+  }
+
+  get rootGraph(): LGraph {
+    return this
+  }
+
+  get isRootGraph(): boolean {
+    return this.rootGraph === this
+  }
+
+  /** @deprecated See {@link state}.{@link LGraphState.lastNodeId lastNodeId} */
+  get last_node_id() {
+    return this.state.lastNodeId
+  }
+
+  set last_node_id(value) {
+    this.state.lastNodeId = value
+  }
+
+  /** @deprecated See {@link state}.{@link LGraphState.lastLinkId lastLinkId} */
+  get last_link_id() {
+    return this.state.lastLinkId
+  }
+
+  set last_link_id(value) {
+    this.state.lastLinkId = value
+  }
+
+  onAfterStep?(): void
+  onBeforeStep?(): void
+  onPlayEvent?(): void
+  onStopEvent?(): void
+  onAfterExecute?(): void
+  onExecuteStep?(): void
+  onNodeAdded?(node: LGraphNode): void
+  onNodeRemoved?(node: LGraphNode): void
+  onTrigger?(action: string, param: unknown): void
+  onBeforeChange?(graph: LGraph, info?: LGraphNode): void
+  onAfterChange?(graph: LGraph, info?: LGraphNode | null): void
+  onConnectionChange?(node: LGraphNode): void
+  on_change?(graph: LGraph): void
+  onSerialize?(data: ISerialisedGraph | SerialisableGraph): void
+  onConfigure?(data: ISerialisedGraph | SerialisableGraph): void
+  onGetNodeMenuOptions?(options: (IContextMenuValue<unknown> | null)[], node: LGraphNode): void
+
+  private _input_nodes?: LGraphNode[]
+
+  /**
+   * See {@link LGraph}
+   * @param o data from previous serialization [optional]
+   */
+  constructor(o?: ISerialisedGraph | SerialisableGraph) {
+    if (LiteGraph.debug) console.log("Graph created")
+
+    /** @see MapProxyHandler */
+    const links = this._links
+    MapProxyHandler.bindAllMethods(links)
+    const handler = new MapProxyHandler<LLink>()
+    this.links = new Proxy(links, handler) as Map<LinkId, LLink> & Record<LinkId, LLink>
+
+    this.list_of_graphcanvas = null
+    this.clear()
+
+    if (o) this.configure(o)
+  }
+
+  /**
+   * Removes all nodes from this graph
+   */
+  clear(): void {
+    this.stop()
+    this.status = LGraph.STATUS_STOPPED
+
+    this.id = zeroUuid
+    this.revision = 0
+
+    this.state = {
+      lastGroupId: 0,
+      lastNodeId: 0,
+      lastLinkId: 0,
+      lastRerouteId: 0,
+    }
+
+    // used to detect changes
+    this._version = -1
+    this._subgraphs.clear()
+
+    // safe clear
+    if (this._nodes) {
+      for (const _node of this._nodes) {
+        _node.onRemoved?.()
+      }
+    }
+
+    // nodes
+    this._nodes = []
+    this._nodes_by_id = {}
+    // nodes sorted in execution order
+    this._nodes_in_order = []
+    // nodes that contain onExecute sorted in execution order
+    this._nodes_executable = null
+
+    this._links.clear()
+    this.reroutes.clear()
+    this.#floatingLinks.clear()
+
+    this.#lastFloatingLinkId = 0
+
+    // other scene stuff
+    this._groups = []
+
+    // iterations
+    this.iteration = 0
+
+    // custom data
+    this.config = {}
+    this.vars = {}
+    // to store custom data
+    this.extra = {}
+
+    // timing
+    this.globaltime = 0
+    this.runningtime = 0
+    this.fixedtime = 0
+    this.fixedtime_lapse = 0.01
+    this.elapsed_time = 0.01
+    this.last_update_time = 0
+    this.starttime = 0
+
+    this.catch_errors = true
+
+    this.nodes_executing = []
+    this.nodes_actioning = []
+    this.nodes_executedAction = []
+
+    // notify canvas to redraw
+    this.change()
+
+    this.canvasAction(c => c.clear())
+  }
+
+  get subgraphs(): Map<UUID, Subgraph> {
+    return this.rootGraph._subgraphs
+  }
+
+  get nodes() {
+    return this._nodes
+  }
+
+  get groups() {
+    return this._groups
+  }
+
+  /**
+   * Attach Canvas to this graph
+   */
+  attachCanvas(canvas: LGraphCanvas): void {
+    if (!(canvas instanceof LGraphCanvas)) {
+      throw new TypeError("attachCanvas expects an LGraphCanvas instance")
+    }
+
+    this.primaryCanvas = canvas
+
+    this.list_of_graphcanvas ??= []
+    if (!this.list_of_graphcanvas.includes(canvas)) {
+      this.list_of_graphcanvas.push(canvas)
+    }
+
+    if (canvas.graph === this) return
+
+    canvas.graph?.detachCanvas(canvas)
+    canvas.graph = this
+    canvas.subgraph = undefined
+  }
+
+  /**
+   * Detach Canvas from this graph
+   */
+  detachCanvas(canvas: LGraphCanvas): void {
+    canvas.graph = null
+    const canvases = this.list_of_graphcanvas
+    if (canvases) {
+      const pos = canvases.indexOf(canvas)
+      if (pos !== -1) canvases.splice(pos, 1)
+    }
+  }
+
+  /**
+   * @deprecated Will be removed in 0.9
+   * Starts running this graph every interval milliseconds.
+   * @param interval amount of milliseconds between executions, if 0 then it renders to the monitor refresh rate
+   */
+  start(interval?: number): void {
+    if (this.status == LGraph.STATUS_RUNNING) return
+    this.status = LGraph.STATUS_RUNNING
+
+    this.onPlayEvent?.()
+    this.sendEventToAllNodes("onStart")
+
+    // launch
+    this.starttime = LiteGraph.getTime()
+    this.last_update_time = this.starttime
+    interval ||= 0
+
+    // execute once per frame
+    if (
+      interval == 0 &&
+      typeof window != "undefined" &&
+      window.requestAnimationFrame
+    ) {
+      const on_frame = () => {
+        if (this.execution_timer_id != -1) return
+
+        window.requestAnimationFrame(on_frame)
+        this.onBeforeStep?.()
+        this.runStep(1, !this.catch_errors)
+        this.onAfterStep?.()
+      }
+      this.execution_timer_id = -1
+      on_frame()
+    } else {
+      // execute every 'interval' ms
+      this.execution_timer_id = setInterval(() => {
+        // execute
+        this.onBeforeStep?.()
+        this.runStep(1, !this.catch_errors)
+        this.onAfterStep?.()
+      }, interval)
+    }
+  }
+
+  /**
+   * @deprecated Will be removed in 0.9
+   * Stops the execution loop of the graph
+   */
+  stop(): void {
+    if (this.status == LGraph.STATUS_STOPPED) return
+
+    this.status = LGraph.STATUS_STOPPED
+
+    this.onStopEvent?.()
+
+    if (this.execution_timer_id != null) {
+      if (this.execution_timer_id != -1) {
+        clearInterval(this.execution_timer_id)
+      }
+      this.execution_timer_id = null
+    }
+
+    this.sendEventToAllNodes("onStop")
+  }
+
+  /**
+   * Run N steps (cycles) of the graph
+   * @param num number of steps to run, default is 1
+   * @param do_not_catch_errors [optional] if you want to try/catch errors
+   * @param limit max number of nodes to execute (used to execute from start to a node)
+   */
+  runStep(num: number, do_not_catch_errors: boolean, limit?: number): void {
+    num = num || 1
+
+    const start = LiteGraph.getTime()
+    this.globaltime = 0.001 * (start - this.starttime)
+
+    const nodes = this._nodes_executable || this._nodes
+    if (!nodes) return
+
+    limit = limit || nodes.length
+
+    if (do_not_catch_errors) {
+      // iterations
+      for (let i = 0; i < num; i++) {
+        for (let j = 0; j < limit; ++j) {
+          const node = nodes[j]
+          // FIXME: Looks like copy/paste broken logic - checks for "on", executes "do"
+          if (node.mode == LGraphEventMode.ALWAYS && node.onExecute) {
+            // wrap node.onExecute();
+            node.doExecute?.()
+          }
+        }
+
+        this.fixedtime += this.fixedtime_lapse
+        this.onExecuteStep?.()
+      }
+
+      this.onAfterExecute?.()
+    } else {
+      try {
+        // iterations
+        for (let i = 0; i < num; i++) {
+          for (let j = 0; j < limit; ++j) {
+            const node = nodes[j]
+            if (node.mode == LGraphEventMode.ALWAYS) {
+              node.onExecute?.()
+            }
+          }
+
+          this.fixedtime += this.fixedtime_lapse
+          this.onExecuteStep?.()
+        }
+
+        this.onAfterExecute?.()
+        this.errors_in_execution = false
+      } catch (error) {
+        this.errors_in_execution = true
+        if (LiteGraph.throw_errors) throw error
+
+        if (LiteGraph.debug) console.log("Error during execution:", error)
+        this.stop()
+      }
+    }
+
+    const now = LiteGraph.getTime()
+    let elapsed = now - start
+    if (elapsed == 0) elapsed = 1
+
+    this.execution_time = 0.001 * elapsed
+    this.globaltime += 0.001 * elapsed
+    this.iteration += 1
+    this.elapsed_time = (now - this.last_update_time) * 0.001
+    this.last_update_time = now
+    this.nodes_executing = []
+    this.nodes_actioning = []
+    this.nodes_executedAction = []
+  }
+
+  /**
+   * Updates the graph execution order according to relevance of the nodes (nodes with only outputs have more relevance than
+   * nodes with only inputs.
+   */
+  updateExecutionOrder(): void {
+    this._nodes_in_order = this.computeExecutionOrder(false)
+    this._nodes_executable = []
+    for (const node of this._nodes_in_order) {
+      if (node.onExecute) {
+        this._nodes_executable.push(node)
+      }
+    }
+  }
+
+  // This is more internal, it computes the executable nodes in order and returns it
+  computeExecutionOrder(
+    only_onExecute: boolean,
+    set_level?: boolean,
+  ): LGraphNode[] {
+    const L: LGraphNode[] = []
+    const S: LGraphNode[] = []
+    const M: Dictionary<LGraphNode> = {}
+    // to avoid repeating links
+    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) {
+      if (only_onExecute && !node.onExecute) {
+        continue
+      }
+
+      // add to pending nodes
+      M[node.id] = node
+
+      // num of input connections
+      let num = 0
+      if (node.inputs) {
+        for (const input of node.inputs) {
+          if (input?.link != null) {
+            num += 1
+          }
+        }
+      }
+
+      if (num == 0) {
+        // is a starting node
+        S.push(node)
+        if (set_level) node._level = 1
+      } else {
+        // num of input links
+        if (set_level) node._level = 0
+        remaining_links[node.id] = num
+      }
+    }
+
+    while (true) {
+      // get an starting node
+      const node = S.shift()
+      if (node === undefined) break
+
+      // add to ordered list
+      L.push(node)
+      // remove from the pending nodes
+      delete M[node.id]
+
+      if (!node.outputs) continue
+
+      // for every output
+      for (const output of node.outputs) {
+        // not connected
+        // TODO: Confirm functionality, clean condition
+        if (output?.links == null || output.links.length == 0)
+          continue
+
+        // for every connection
+        for (const link_id of output.links) {
+          const link = this._links.get(link_id)
+          if (!link) continue
+
+          // already visited link (ignore it)
+          if (visited_links[link.id]) continue
+
+          const target_node = this.getNodeById(link.target_id)
+          if (target_node == null) {
+            visited_links[link.id] = true
+            continue
+          }
+
+          if (set_level) {
+            node._level ??= 0
+            if (!target_node._level || target_node._level <= node._level) {
+              target_node._level = node._level + 1
+            }
+          }
+
+          // mark as visited
+          visited_links[link.id] = true
+          // reduce the number of links remaining
+          remaining_links[target_node.id] -= 1
+
+          // if no more links, then add to starters array
+          if (remaining_links[target_node.id] == 0) S.push(target_node)
+        }
+      }
+    }
+
+    // the remaining ones (loops)
+    for (const i in M) {
+      L.push(M[i])
+    }
+
+    if (L.length != this._nodes.length && LiteGraph.debug)
+      console.warn("something went wrong, nodes missing")
+
+    /** Ensure type is set */
+    type OrderedLGraphNode = LGraphNode & { order: number }
+
+    /** Sets the order property of each provided node to its index in {@link nodes}. */
+    function setOrder(nodes: LGraphNode[]): asserts nodes is OrderedLGraphNode[] {
+      const l = nodes.length
+      for (let i = 0; i < l; ++i) {
+        nodes[i].order = i
+      }
+    }
+
+    // save order number in the node
+    setOrder(L)
+
+    // sort now by priority
+    L.sort(function (A, B) {
+      // @ts-expect-error ctor props
+      const Ap = A.constructor.priority || A.priority || 0
+      // @ts-expect-error ctor props
+      const Bp = B.constructor.priority || B.priority || 0
+      // if same priority, sort by order
+
+      return Ap == Bp
+        ? A.order - B.order
+        : Ap - Bp
+    })
+
+    // save order number in the node, again...
+    setOrder(L)
+
+    return L
+  }
+
+  /**
+   * Positions every node in a more readable manner
+   */
+  arrange(margin?: number, layout?: string): void {
+    margin = margin || 100
+
+    const nodes = this.computeExecutionOrder(false, true)
+    const columns: LGraphNode[][] = []
+    for (const node of nodes) {
+      const col = node._level || 1
+      columns[col] ||= []
+      columns[col].push(node)
+    }
+
+    let x = margin
+
+    for (const column of columns) {
+      if (!column) continue
+
+      let max_size = 100
+      let y = margin + LiteGraph.NODE_TITLE_HEIGHT
+      for (const node of column) {
+        node.pos[0] = layout == LiteGraph.VERTICAL_LAYOUT ? y : x
+        node.pos[1] = layout == LiteGraph.VERTICAL_LAYOUT ? x : y
+        const max_size_index = layout == LiteGraph.VERTICAL_LAYOUT ? 1 : 0
+        if (node.size[max_size_index] > max_size) {
+          max_size = node.size[max_size_index]
+        }
+        const node_size_index = layout == LiteGraph.VERTICAL_LAYOUT ? 0 : 1
+        y += node.size[node_size_index] + margin + LiteGraph.NODE_TITLE_HEIGHT
+      }
+      x += max_size + margin
+    }
+
+    this.setDirtyCanvas(true, true)
+  }
+
+  /**
+   * Returns the amount of time the graph has been running in milliseconds
+   * @returns number of milliseconds the graph has been running
+   */
+  getTime(): number {
+    return this.globaltime
+  }
+
+  /**
+   * Returns the amount of time accumulated using the fixedtime_lapse var.
+   * This is used in context where the time increments should be constant
+   * @returns number of milliseconds the graph has been running
+   */
+  getFixedTime(): number {
+    return this.fixedtime
+  }
+
+  /**
+   * Returns the amount of time it took to compute the latest iteration.
+   * Take into account that this number could be not correct
+   * if the nodes are using graphical actions
+   * @returns number of milliseconds it took the last cycle
+   */
+  getElapsedTime(): number {
+    return this.elapsed_time
+  }
+
+  /**
+   * @deprecated Will be removed in 0.9
+   * Sends an event to all the nodes, useful to trigger stuff
+   * @param eventname the name of the event (function to be called)
+   * @param params parameters in array format
+   */
+  sendEventToAllNodes(
+    eventname: string,
+    params?: object | object[],
+    mode?: LGraphEventMode,
+  ): void {
+    mode = mode || LGraphEventMode.ALWAYS
+
+    const nodes = this._nodes_in_order || this._nodes
+    if (!nodes) return
+
+    for (const node of nodes) {
+      // @ts-expect-error deprecated
+      if (!node[eventname] || node.mode != mode) continue
+      if (params === undefined) {
+        // @ts-expect-error deprecated
+        node[eventname]()
+      } else if (params && params.constructor === Array) {
+        // @ts-expect-error deprecated
+        node[eventname].apply(node, params)
+      } else {
+        // @ts-expect-error deprecated
+        node[eventname](params)
+      }
+    }
+  }
+
+  /**
+   * Runs an action on every canvas registered to this graph.
+   * @param action Action to run for every canvas
+   */
+  canvasAction(action: (canvas: LGraphCanvas) => void): void {
+    const canvases = this.list_of_graphcanvas
+    if (!canvases) return
+    for (const canvas of canvases) action(canvas)
+  }
+
+  /** @deprecated See {@link LGraph.canvasAction} */
+  sendActionToCanvas<T extends MethodNames<LGraphCanvas>>(
+    action: T,
+    params?: ParamsArray<LGraphCanvas, T>,
+  ): void {
+    const { list_of_graphcanvas } = this
+    if (!list_of_graphcanvas) return
+
+    for (const c of list_of_graphcanvas) {
+      c[action]?.apply(c, params)
+    }
+  }
+
+  /**
+   * Adds a new node instance to this graph
+   * @param node the instance of the node
+   */
+  add(
+    node: LGraphNode | LGraphGroup,
+    skip_compute_order?: boolean,
+  ): LGraphNode | null | undefined {
+    if (!node) return
+    const { state } = this
+
+    // Ensure created items are snapped
+    if (LiteGraph.alwaysSnapToGrid) {
+      const snapTo = this.getSnapToGridSize()
+      if (snapTo) node.snapToGrid(snapTo)
+    }
+
+    // LEGACY: This was changed from constructor === LGraphGroup
+    // groups
+    if (node instanceof LGraphGroup) {
+      // Assign group ID
+      if (node.id == null || node.id === -1) node.id = ++state.lastGroupId
+      if (node.id > state.lastGroupId) state.lastGroupId = node.id
+
+      this._groups.push(node)
+      this.setDirtyCanvas(true)
+      this.change()
+      node.graph = this
+      this._version++
+      return
+    }
+
+    // nodes
+    if (node.id != -1 && this._nodes_by_id[node.id] != null) {
+      console.warn(
+        "LiteGraph: there is already a node with this ID, changing it",
+      )
+      node.id = LiteGraph.use_uuids
+        ? LiteGraph.uuidv4()
+        : ++state.lastNodeId
+    }
+
+    if (this._nodes.length >= LiteGraph.MAX_NUMBER_OF_NODES) {
+      throw "LiteGraph: max number of nodes in a graph reached"
+    }
+
+    // give him an id
+    if (LiteGraph.use_uuids) {
+      if (node.id == null || node.id == -1)
+        node.id = LiteGraph.uuidv4()
+    } else {
+      if (node.id == null || node.id == -1) {
+        node.id = ++state.lastNodeId
+      } else if (typeof node.id === "number" && state.lastNodeId < node.id) {
+        state.lastNodeId = node.id
+      }
+    }
+
+    node.graph = this
+    this._version++
+
+    this._nodes.push(node)
+    this._nodes_by_id[node.id] = node
+
+    node.onAdded?.(this)
+
+    if (this.config.align_to_grid) node.alignToGrid()
+
+    if (!skip_compute_order) this.updateExecutionOrder()
+
+    this.onNodeAdded?.(node)
+
+    this.setDirtyCanvas(true)
+    this.change()
+
+    // to chain actions
+    return node
+  }
+
+  /**
+   * Removes a node from the graph
+   * @param node the instance of the node
+   */
+  remove(node: LGraphNode | LGraphGroup): void {
+    // LEGACY: This was changed from constructor === LiteGraph.LGraphGroup
+    if (node instanceof LGraphGroup) {
+      this.canvasAction(c => c.deselect(node))
+
+      const index = this._groups.indexOf(node)
+      if (index != -1) {
+        this._groups.splice(index, 1)
+      }
+      node.graph = undefined
+      this._version++
+      this.setDirtyCanvas(true, true)
+      this.change()
+      return
+    }
+
+    // not found
+    if (this._nodes_by_id[node.id] == null) {
+      console.warn("LiteGraph: node not found", node)
+      return
+    }
+    // cannot be removed
+    if (node.ignore_remove) {
+      console.warn("LiteGraph: node cannot be removed", node)
+      return
+    }
+
+    // sure? - almost sure is wrong
+    this.beforeChange()
+
+    const { inputs, outputs } = node
+
+    // disconnect inputs
+    if (inputs) {
+      for (const [i, slot] of inputs.entries()) {
+        if (slot.link != null) node.disconnectInput(i, true)
+      }
+    }
+
+    // disconnect outputs
+    if (outputs) {
+      for (const [i, slot] of outputs.entries()) {
+        if (slot.links?.length) node.disconnectOutput(i)
+      }
+    }
+
+    // Floating links
+    for (const link of this.floatingLinks.values()) {
+      if (link.origin_id === node.id || link.target_id === node.id) {
+        this.removeFloatingLink(link)
+      }
+    }
+
+    // callback
+    node.onRemoved?.()
+
+    node.graph = null
+    this._version++
+
+    // remove from canvas render
+    const { list_of_graphcanvas } = this
+    if (list_of_graphcanvas) {
+      for (const canvas of list_of_graphcanvas) {
+        if (canvas.selected_nodes[node.id])
+          delete canvas.selected_nodes[node.id]
+
+        canvas.deselect(node)
+      }
+    }
+
+    // remove from containers
+    const pos = this._nodes.indexOf(node)
+    if (pos != -1) this._nodes.splice(pos, 1)
+
+    delete this._nodes_by_id[node.id]
+
+    this.onNodeRemoved?.(node)
+
+    // close panels
+    this.canvasAction(c => c.checkPanels())
+
+    this.setDirtyCanvas(true, true)
+    // sure? - almost sure is wrong
+    this.afterChange()
+    this.change()
+
+    this.updateExecutionOrder()
+  }
+
+  /**
+   * Returns a node by its id.
+   */
+  getNodeById(id: NodeId | null | undefined): LGraphNode | null {
+    return id != null
+      ? this._nodes_by_id[id]
+      : null
+  }
+
+  /**
+   * Returns a list of nodes that matches a class
+   * @param classObject the class itself (not an string)
+   * @returns a list with all the nodes of this type
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+  findNodesByClass(classObject: Function, result?: LGraphNode[]): LGraphNode[] {
+    result = result || []
+    result.length = 0
+    const { _nodes } = this
+    for (const node of _nodes) {
+      if (node.constructor === classObject)
+        result.push(node)
+    }
+    return result
+  }
+
+  /**
+   * Returns a list of nodes that matches a type
+   * @param type the name of the node type
+   * @returns a list with all the nodes of this type
+   */
+  findNodesByType(type: string, result: LGraphNode[]): LGraphNode[] {
+    const matchType = type.toLowerCase()
+    result = result || []
+    result.length = 0
+    const { _nodes } = this
+    for (const node of _nodes) {
+      if (node.type?.toLowerCase() == matchType)
+        result.push(node)
+    }
+    return result
+  }
+
+  /**
+   * Returns the first node that matches a name in its title
+   * @param title the name of the node to search
+   * @returns the node or null
+   */
+  findNodeByTitle(title: string): LGraphNode | null {
+    const { _nodes } = this
+    for (const node of _nodes) {
+      if (node.title == title)
+        return node
+    }
+    return null
+  }
+
+  /**
+   * Returns a list of nodes that matches a name
+   * @param title the name of the node to search
+   * @returns a list with all the nodes with this name
+   */
+  findNodesByTitle(title: string): LGraphNode[] {
+    const result: LGraphNode[] = []
+    const { _nodes } = this
+    for (const node of _nodes) {
+      if (node.title == title)
+        result.push(node)
+    }
+    return result
+  }
+
+  /**
+   * Returns the top-most node in this position of the canvas
+   * @param x the x coordinate in canvas space
+   * @param y the y coordinate in canvas space
+   * @param nodeList a list with all the nodes to search from, by default is all the nodes in the graph
+   * @returns the node at this position or null
+   */
+  getNodeOnPos(
+    x: number,
+    y: number,
+    nodeList?: LGraphNode[],
+  ): LGraphNode | null {
+    const nodes = nodeList || this._nodes
+    let i = nodes.length
+    while (--i >= 0) {
+      const node = nodes[i]
+      if (node.isPointInside(x, y)) return node
+    }
+    return null
+  }
+
+  /**
+   * Returns the top-most group in that position
+   * @param x The x coordinate in canvas space
+   * @param y The y coordinate in canvas space
+   * @returns The group or null
+   */
+  getGroupOnPos(x: number, y: number): LGraphGroup | undefined {
+    return this._groups.toReversed().find(g => g.isPointInside(x, y))
+  }
+
+  /**
+   * Returns the top-most group with a titlebar in the provided position.
+   * @param x The x coordinate in canvas space
+   * @param y The y coordinate in canvas space
+   * @returns The group or null
+   */
+  getGroupTitlebarOnPos(x: number, y: number): LGraphGroup | undefined {
+    return this._groups.toReversed().find(g => g.isPointInTitlebar(x, y))
+  }
+
+  /**
+   * Finds a reroute a the given graph point
+   * @param x X co-ordinate in graph space
+   * @param y Y co-ordinate in graph space
+   * @returns The first reroute under the given co-ordinates, or undefined
+   */
+  getRerouteOnPos(x: number, y: number, reroutes?: Iterable<Reroute>): Reroute | undefined {
+    for (const reroute of reroutes ?? this.reroutes.values()) {
+      if (reroute.containsPoint([x, y])) return reroute
+    }
+  }
+
+  /**
+   * Snaps the provided items to a grid.
+   *
+   * Item positions are reounded to the nearest multiple of {@link LiteGraph.CANVAS_GRID_SIZE}.
+   *
+   * When {@link LiteGraph.alwaysSnapToGrid} is enabled
+   * and the grid size is falsy, a default of 1 is used.
+   * @param items The items to be snapped to the grid
+   * @todo Currently only snaps nodes.
+   */
+  snapToGrid(items: Set<Positionable>): void {
+    const snapTo = this.getSnapToGridSize()
+    if (!snapTo) return
+
+    for (const item of getAllNestedItems(items)) {
+      if (!item.pinned) item.snapToGrid(snapTo)
+    }
+  }
+
+  /**
+   * Finds the size of the grid that items should be snapped to when moved.
+   * @returns The size of the grid that items should be snapped to
+   */
+  getSnapToGridSize(): number {
+    // Default to 1 when always snapping
+    return LiteGraph.alwaysSnapToGrid
+      ? LiteGraph.CANVAS_GRID_SIZE || 1
+      : LiteGraph.CANVAS_GRID_SIZE
+  }
+
+  /**
+   * @deprecated Will be removed in 0.9
+   * Checks that the node type matches the node type registered,
+   * used when replacing a nodetype by a newer version during execution
+   * this replaces the ones using the old version with the new version
+   */
+  checkNodeTypes() {
+    const { _nodes } = this
+    for (const [i, node] of _nodes.entries()) {
+      const ctor = LiteGraph.registered_node_types[node.type]
+      if (node.constructor == ctor) continue
+
+      console.log("node being replaced by newer version:", node.type)
+      const newnode = LiteGraph.createNode(node.type)
+      if (!newnode) continue
+      _nodes[i] = newnode
+      newnode.configure(node.serialize())
+      newnode.graph = this
+      this._nodes_by_id[newnode.id] = newnode
+
+      if (node.inputs) newnode.inputs = [...node.inputs]
+      if (node.outputs) newnode.outputs = [...node.outputs]
+    }
+    this.updateExecutionOrder()
+  }
+
+  // ********** GLOBALS *****************
+  trigger(action: string, param: unknown) {
+    this.onTrigger?.(action, param)
+  }
+
+  /** @todo Clean up - never implemented. */
+  triggerInput(name: string, value: any): void {
+    const nodes = this.findNodesByTitle(name)
+    for (const node of nodes) {
+      // @ts-expect-error
+      node.onTrigger(value)
+    }
+  }
+
+  /** @todo Clean up - never implemented. */
+  setCallback(name: string, func: any): void {
+    const nodes = this.findNodesByTitle(name)
+    for (const node of nodes) {
+      // @ts-expect-error
+      node.setTrigger(func)
+    }
+  }
+
+  // used for undo, called before any change is made to the graph
+  beforeChange(info?: LGraphNode): void {
+    this.onBeforeChange?.(this, info)
+    this.canvasAction(c => c.onBeforeChange?.(this))
+  }
+
+  // used to resend actions, called after any change is made to the graph
+  afterChange(info?: LGraphNode | null): void {
+    this.onAfterChange?.(this, info)
+    this.canvasAction(c => c.onAfterChange?.(this))
+  }
+
+  /**
+   * clears the triggered slot animation in all links (stop visual animation)
+   */
+  clearTriggeredSlots(): void {
+    for (const link_info of this._links.values()) {
+      if (!link_info) continue
+
+      if (link_info._last_time) link_info._last_time = 0
+    }
+  }
+
+  /* Called when something visually changed (not the graph!) */
+  change(): void {
+    if (LiteGraph.debug) {
+      console.log("Graph changed")
+    }
+    this.canvasAction(c => c.setDirty(true, true))
+    this.on_change?.(this)
+  }
+
+  setDirtyCanvas(fg: boolean, bg?: boolean): void {
+    this.canvasAction(c => c.setDirty(fg, bg))
+  }
+
+  addFloatingLink(link: LLink): LLink {
+    if (link.id === -1) {
+      link.id = ++this.#lastFloatingLinkId
+    }
+    this.#floatingLinks.set(link.id, link)
+
+    const slot = link.target_id !== -1
+      ? this.getNodeById(link.target_id)?.inputs?.[link.target_slot]
+      : this.getNodeById(link.origin_id)?.outputs?.[link.origin_slot]
+    if (slot) {
+      slot._floatingLinks ??= new Set()
+      slot._floatingLinks.add(link)
+    } else {
+      console.warn(`Adding invalid floating link: target/slot: [${link.target_id}/${link.target_slot}] origin/slot: [${link.origin_id}/${link.origin_slot}]`)
+    }
+
+    const reroutes = LLink.getReroutes(this, link)
+    for (const reroute of reroutes) {
+      reroute.floatingLinkIds.add(link.id)
+    }
+    return link
+  }
+
+  removeFloatingLink(link: LLink): void {
+    this.#floatingLinks.delete(link.id)
+
+    const slot = link.target_id !== -1
+      ? this.getNodeById(link.target_id)?.inputs?.[link.target_slot]
+      : this.getNodeById(link.origin_id)?.outputs?.[link.origin_slot]
+    if (slot) {
+      slot._floatingLinks?.delete(link)
+    }
+
+    const reroutes = LLink.getReroutes(this, link)
+    for (const reroute of reroutes) {
+      reroute.floatingLinkIds.delete(link.id)
+      if (reroute.floatingLinkIds.size === 0) {
+        delete reroute.floating
+      }
+
+      if (reroute.totalLinks === 0) this.removeReroute(reroute.id)
+    }
+  }
+
+  /**
+   * Finds the link with the provided ID.
+   * @param id ID of link to find
+   * @returns The link with the provided {@link id}, otherwise `undefined`. Always returns `undefined` if `id` is nullish.
+   */
+  getLink(id: null | undefined): undefined
+  getLink(id: LinkId | null | undefined): LLink | undefined
+  getLink(id: LinkId | null | undefined): LLink | undefined {
+    return id == null ? undefined : this._links.get(id)
+  }
+
+  /**
+   * Finds the reroute with the provided ID.
+   * @param id ID of reroute to find
+   * @returns The reroute with the provided {@link id}, otherwise `undefined`. Always returns `undefined` if `id` is nullish.
+   */
+  getReroute(id: null | undefined): undefined
+  getReroute(id: RerouteId | null | undefined): Reroute | undefined
+  getReroute(id: RerouteId | null | undefined): Reroute | undefined {
+    return id == null ? undefined : this.reroutes.get(id)
+  }
+
+  /**
+   * Configures a reroute on the graph where ID is already known (probably deserialisation).
+   * Creates the object if it does not exist.
+   * @param serialisedReroute See {@link SerialisableReroute}
+   */
+  setReroute({ id, parentId, pos, linkIds, floating }: OptionalProps<SerialisableReroute, "id">): Reroute {
+    id ??= ++this.state.lastRerouteId
+    if (id > this.state.lastRerouteId) this.state.lastRerouteId = id
+
+    const reroute = this.reroutes.get(id) ?? new Reroute(id, this)
+    reroute.update(parentId, pos, linkIds, floating)
+    this.reroutes.set(id, reroute)
+    return reroute
+  }
+
+  /**
+   * Creates a new reroute and adds it to the graph.
+   * @param pos Position in graph space
+   * @param before The existing link segment (reroute, link) that will be after this reroute,
+   * going from the node output to input.
+   * @returns The newly created reroute - typically ignored.
+   */
+  createReroute(pos: Point, before: LinkSegment): Reroute {
+    const rerouteId = ++this.state.lastRerouteId
+    const linkIds = before instanceof Reroute
+      ? before.linkIds
+      : [before.id]
+    const floatingLinkIds = before instanceof Reroute
+      ? before.floatingLinkIds
+      : [before.id]
+    const reroute = new Reroute(rerouteId, this, pos, before.parentId, linkIds, floatingLinkIds)
+    this.reroutes.set(rerouteId, reroute)
+    for (const linkId of linkIds) {
+      const link = this._links.get(linkId)
+      if (!link) continue
+      if (link.parentId === before.parentId) link.parentId = rerouteId
+
+      const reroutes = LLink.getReroutes(this, link)
+      for (const x of reroutes.filter(x => x.parentId === before.parentId)) {
+        x.parentId = rerouteId
+      }
+    }
+
+    for (const linkId of floatingLinkIds) {
+      const link = this.floatingLinks.get(linkId)
+      if (!link) continue
+      if (link.parentId === before.parentId) link.parentId = rerouteId
+
+      const reroutes = LLink.getReroutes(this, link)
+      for (const x of reroutes.filter(x => x.parentId === before.parentId)) {
+        x.parentId = rerouteId
+      }
+    }
+
+    return reroute
+  }
+
+  /**
+   * Removes a reroute from the graph
+   * @param id ID of reroute to remove
+   */
+  removeReroute(id: RerouteId): void {
+    const { reroutes } = this
+    const reroute = reroutes.get(id)
+    if (!reroute) return
+
+    this.canvasAction(c => c.deselect(reroute))
+
+    // Extract reroute from the reroute chain
+    const { parentId, linkIds, floatingLinkIds } = reroute
+    for (const reroute of reroutes.values()) {
+      if (reroute.parentId === id) reroute.parentId = parentId
+    }
+
+    for (const linkId of linkIds) {
+      const link = this._links.get(linkId)
+      if (link && link.parentId === id) link.parentId = parentId
+    }
+
+    for (const linkId of floatingLinkIds) {
+      const link = this.floatingLinks.get(linkId)
+      if (!link) {
+        console.warn(`Removed reroute had floating link ID that did not exist [${linkId}]`)
+        continue
+      }
+
+      // A floating link is a unique branch; if there is no parent reroute, or
+      // the parent reroute has any other links, remove this floating link.
+      const floatingReroutes = LLink.getReroutes(this, link)
+      const lastReroute = floatingReroutes.at(-1)
+      const secondLastReroute = floatingReroutes.at(-2)
+
+      if (reroute !== lastReroute) {
+        continue
+      } else if (secondLastReroute?.totalLinks !== 1) {
+        this.removeFloatingLink(link)
+      } else if (link.parentId === id) {
+        link.parentId = parentId
+        secondLastReroute.floating = reroute.floating
+      }
+    }
+
+    reroutes.delete(id)
+    // This does not belong here; it should be handled by the caller, or run by a remove-many API.
+    // https://github.com/Comfy-Org/litegraph.js/issues/898
+    this.setDirtyCanvas(false, true)
+  }
+
+  /**
+   * Destroys a link
+   */
+  removeLink(link_id: LinkId): void {
+    const link = this._links.get(link_id)
+    if (!link) return
+
+    const node = this.getNodeById(link.target_id)
+    node?.disconnectInput(link.target_slot, false)
+
+    link.disconnect(this)
+  }
+
+  /**
+   * Creates a new subgraph definition, and adds it to the graph.
+   * @param data Exported data (typically serialised) to configure the new subgraph with
+   * @returns The newly created subgraph definition.
+   */
+  createSubgraph(data: ExportedSubgraph): Subgraph {
+    const { id } = data
+
+    const subgraph = new Subgraph(this.rootGraph, data)
+    this.subgraphs.set(id, subgraph)
+
+    // FE: Create node defs
+    this.rootGraph.events.dispatch("subgraph-created", { subgraph, data })
+    return subgraph
+  }
+
+  convertToSubgraph(items: Set<Positionable>): { subgraph: Subgraph, node: SubgraphNode } {
+    if (items.size === 0) throw new Error("Cannot convert to subgraph: nothing to convert")
+    const { state, revision, config } = this
+
+    const { boundaryLinks, boundaryFloatingLinks, internalLinks, boundaryInputLinks, boundaryOutputLinks } = getBoundaryLinks(this, items)
+    const { nodes, reroutes, groups } = splitPositionables(items)
+
+    const boundingRect = createBounds(items)
+    if (!boundingRect) throw new Error("Failed to create bounding rect for subgraph")
+
+    const resolvedInputLinks = boundaryInputLinks.map(x => x.resolve(this))
+    const resolvedOutputLinks = boundaryOutputLinks.map(x => x.resolve(this))
+
+    const clonedNodes = multiClone(nodes)
+
+    // Inputs, outputs, and links
+    const links = internalLinks.map(x => x.asSerialisable())
+    const inputs = mapSubgraphInputsAndLinks(resolvedInputLinks, links)
+    const outputs = mapSubgraphOutputsAndLinks(resolvedOutputLinks, links)
+
+    // Prepare subgraph data
+    const data = {
+      id: createUuidv4(),
+      name: "New Subgraph",
+      inputNode: {
+        id: SUBGRAPH_INPUT_ID,
+        bounding: [0, 0, 75, 100],
+      },
+      outputNode: {
+        id: SUBGRAPH_OUTPUT_ID,
+        bounding: [0, 0, 75, 100],
+      },
+      inputs,
+      outputs,
+      widgets: [],
+      version: LGraph.serialisedSchemaVersion,
+      state,
+      revision,
+      config,
+      links,
+      nodes: clonedNodes,
+      reroutes: structuredClone([...reroutes].map(reroute => reroute.asSerialisable())),
+      groups: structuredClone([...groups].map(group => group.serialize())),
+    } satisfies ExportedSubgraph
+
+    const subgraph = this.createSubgraph(data)
+    subgraph.configure(data)
+
+    // Position the subgraph input nodes
+    subgraph.inputNode.arrange()
+    subgraph.outputNode.arrange()
+    const { boundingRect: inputRect } = subgraph.inputNode
+    const { boundingRect: outputRect } = subgraph.outputNode
+    alignOutsideContainer(inputRect, Alignment.MidLeft, boundingRect, [50, 0])
+    alignOutsideContainer(outputRect, Alignment.MidRight, boundingRect, [50, 0])
+
+    // Remove items converted to subgraph
+    for (const resolved of resolvedInputLinks) resolved.inputNode?.disconnectInput(resolved.inputNode.inputs.indexOf(resolved.input!), true)
+    for (const resolved of resolvedOutputLinks) resolved.outputNode?.disconnectOutput(resolved.outputNode.outputs.indexOf(resolved.output!), resolved.inputNode)
+
+    for (const node of nodes) this.remove(node)
+    for (const reroute of reroutes) this.removeReroute(reroute.id)
+    for (const group of groups) this.remove(group)
+
+    this.rootGraph.events.dispatch("convert-to-subgraph", {
+      subgraph,
+      bounds: boundingRect,
+      exportedSubgraph: data,
+      boundaryLinks,
+      resolvedInputLinks,
+      resolvedOutputLinks,
+      boundaryFloatingLinks,
+      internalLinks,
+    })
+
+    // Create subgraph node object
+    const subgraphNode = LiteGraph.createNode(subgraph.id, subgraph.name, {
+      inputs: structuredClone(inputs),
+      outputs: structuredClone(outputs),
+    })
+    if (!subgraphNode) throw new Error("Failed to create subgraph node")
+
+    // Resize to inputs/outputs
+    subgraphNode.setSize(subgraphNode.computeSize())
+
+    // Center the subgraph node
+    alignToContainer(subgraphNode._posSize, Alignment.Centre | Alignment.Middle, boundingRect)
+
+    // Add the subgraph node to the graph
+    this.add(subgraphNode)
+
+    // Group matching input links
+    const groupedByOutput = groupResolvedByOutput(resolvedInputLinks)
+
+    // Reconnect input links in parent graph
+    let i = 0
+    for (const [, connections] of groupedByOutput.entries()) {
+      const [firstResolved, ...others] = connections
+      const { output, outputNode, link, subgraphInput } = firstResolved
+
+      // Special handling: Subgraph input node
+      i++
+      if (link.origin_id === SUBGRAPH_INPUT_ID) {
+        link.target_id = subgraphNode.id
+        link.target_slot = i - 1
+        if (subgraphInput instanceof SubgraphInput) {
+          subgraphInput.connect(subgraphNode.findInputSlotByType(link.type, true, true), subgraphNode, link.parentId)
+        } else {
+          throw new TypeError("Subgraph input node is not a SubgraphInput")
+        }
+        console.debug("Reconnect input links in parent graph", { ...link }, this.links.get(link.id), this.links.get(link.id) === link)
+
+        for (const resolved of others) {
+          resolved.link.disconnect(this)
+        }
+        continue
+      }
+
+      if (!output || !outputNode) {
+        console.warn("Convert to Subgraph reconnect: Failed to resolve input link", connections[0])
+        continue
+      }
+
+      const input = subgraphNode.findInputSlotByType(link.type, true, true)
+      outputNode.connectSlots(
+        output,
+        subgraphNode,
+        input,
+        link.parentId,
+      )
+    }
+
+    // Group matching links
+    const outputsGroupedByOutput = groupResolvedByOutput(resolvedOutputLinks)
+
+    // Reconnect output links in parent graph
+    i = 0
+    for (const [, connections] of outputsGroupedByOutput.entries()) {
+      // Special handling: Subgraph output node
+      i++
+      for (const connection of connections) {
+        const { input, inputNode, link, subgraphOutput } = connection
+        if (link.target_id === SUBGRAPH_OUTPUT_ID) {
+          link.origin_id = subgraphNode.id
+          link.origin_slot = i - 1
+          this.links.set(link.id, link)
+          if (subgraphOutput instanceof SubgraphOutput) {
+            subgraphOutput.connect(subgraphNode.findOutputSlotByType(link.type, true, true), subgraphNode, link.parentId)
+          } else {
+            throw new TypeError("Subgraph input node is not a SubgraphInput")
+          }
+          continue
+        }
+
+        if (!input || !inputNode) {
+          console.warn("Convert to Subgraph reconnect: Failed to resolve output link", connection)
+          continue
+        }
+
+        const output = subgraphNode.outputs[i - 1]
+        subgraphNode.connectSlots(
+          output,
+          inputNode,
+          input,
+          link.parentId,
+        )
+      }
+    }
+
+    return { subgraph, node: subgraphNode as SubgraphNode }
+  }
+
+  /**
+   * Resolve a path of subgraph node IDs into a list of subgraph nodes.
+   * Not intended to be run from subgraphs.
+   * @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 NodeId[]): SubgraphNode[] {
+    const result: SubgraphNode[] = []
+    let currentGraph: GraphOrSubgraph = this.rootGraph
+
+    for (const nodeId of nodeIds) {
+      const node: LGraphNode | null = currentGraph.getNodeById(nodeId)
+      if (!node) throw new Error(`Node [${nodeId}] not found.  ID Path: ${nodeIds.join(":")}`)
+      if (!node.isSubgraphNode()) throw new Error(`Node [${nodeId}] is not a SubgraphNode.  ID Path: ${nodeIds.join(":")}`)
+
+      result.push(node)
+      currentGraph = node.subgraph
+    }
+
+    return result
+  }
+
+  /**
+   * Creates a Object containing all the info about this graph, it can be serialized
+   * @deprecated Use {@link asSerialisable}, which returns the newer schema version.
+   * @returns value of the node
+   */
+  serialize(option?: { sortNodes: boolean }): ISerialisedGraph {
+    const { config, state, groups, nodes, reroutes, extra, floatingLinks, definitions } = this.asSerialisable(option)
+    const linkArray = [...this._links.values()]
+    const links = linkArray.map(x => x.serialize())
+
+    if (reroutes?.length) {
+      // Link parent IDs cannot go in 0.4 schema arrays
+      extra.linkExtensions = linkArray
+        .filter(x => x.parentId !== undefined)
+        .map(x => ({ id: x.id, parentId: x.parentId }))
+    }
+
+    extra.reroutes = reroutes?.length ? reroutes : undefined
+    return {
+      id: this.id,
+      revision: this.revision,
+      last_node_id: state.lastNodeId,
+      last_link_id: state.lastLinkId,
+      nodes,
+      links,
+      floatingLinks,
+      groups,
+      definitions,
+      config,
+      extra,
+      version: LiteGraph.VERSION,
+    }
+  }
+
+  /** @returns The drag and scale state of the first attached canvas, otherwise `undefined`. */
+  #getDragAndScale(): DragAndScaleState | undefined {
+    const ds = this.list_of_graphcanvas?.at(0)?.ds
+    if (ds) return { scale: ds.scale, offset: ds.offset }
+  }
+
+  /**
+   * Prepares a shallow copy of this object for immediate serialisation or structuredCloning.
+   * The return value should be discarded immediately.
+   * @param options Serialise options = currently `sortNodes: boolean`, whether to sort nodes by ID.
+   * @returns A shallow copy of parts of this graph, with shallow copies of its serialisable objects.
+   * Mutating the properties of the return object may result in changes to your graph.
+   * It is intended for use with {@link structuredClone} or {@link JSON.stringify}.
+   */
+  asSerialisable(options?: { sortNodes: boolean }): SerialisableGraph & Required<Pick<SerialisableGraph, "nodes" | "groups" | "extra">> {
+    const { id, revision, config, state } = this
+
+    const nodeList = !LiteGraph.use_uuids && options?.sortNodes
+      // @ts-expect-error If LiteGraph.use_uuids is false, ids are numbers.
+      ? [...this._nodes].sort((a, b) => a.id - b.id)
+      : this._nodes
+
+    const nodes = nodeList.map(node => node.serialize())
+    const groups = this._groups.map(x => x.serialize())
+
+    const links = this._links.size ? [...this._links.values()].map(x => x.asSerialisable()) : undefined
+    const floatingLinks = this.floatingLinks.size ? [...this.floatingLinks.values()].map(x => x.asSerialisable()) : undefined
+    const reroutes = this.reroutes.size ? [...this.reroutes.values()].map(x => x.asSerialisable()) : undefined
+
+    // Save scale and offset
+    const extra = { ...this.extra }
+    if (LiteGraph.saveViewportWithGraph) extra.ds = this.#getDragAndScale()
+    if (!extra.ds) delete extra.ds
+
+    const data: ReturnType<typeof this.asSerialisable> = {
+      id,
+      revision,
+      version: LGraph.serialisedSchemaVersion,
+      config,
+      state,
+      groups,
+      nodes,
+      links,
+      floatingLinks,
+      reroutes,
+      extra,
+    }
+
+    if (this.isRootGraph && this._subgraphs.size) {
+      data.definitions = { subgraphs: [...this._subgraphs.values()].map(x => x.asSerialisable()) }
+    }
+
+    this.onSerialize?.(data)
+    return data
+  }
+
+  protected _configureBase(data: ISerialisedGraph | SerialisableGraph): void {
+    const { id, extra } = data
+
+    // Create a new graph ID if none is provided
+    if (id) {
+      this.id = id
+    } else if (this.id === zeroUuid) {
+      this.id = createUuidv4()
+    }
+
+    // Extra
+    this.extra = extra ? structuredClone(extra) : {}
+
+    // Ensure auto-generated serialisation data is removed from extra
+    delete this.extra.linkExtensions
+  }
+
+  /**
+   * Configure a graph from a JSON string
+   * @param data The deserialised object to configure this graph from
+   * @param keep_old If `true`, the graph will not be cleared prior to
+   * adding the configuration.
+   */
+  configure(
+    data: ISerialisedGraph | SerialisableGraph,
+    keep_old?: boolean,
+  ): boolean | undefined {
+    const options: LGraphEventMap["configuring"] = {
+      data,
+      clearGraph: !keep_old,
+    }
+    const mayContinue = this.events.dispatch("configuring", options)
+    if (!mayContinue) return
+
+    try {
+      // TODO: Finish typing configure()
+      if (!data) return
+      if (options.clearGraph) this.clear()
+
+      this._configureBase(data)
+
+      let reroutes: SerialisableReroute[] | undefined
+
+      // TODO: Determine whether this should this fall back to 0.4.
+      if (data.version === 0.4) {
+        const { extra } = data
+        // Deprecated - old schema version, links are arrays
+        if (Array.isArray(data.links)) {
+          for (const linkData of data.links) {
+            const link = LLink.createFromArray(linkData)
+            this._links.set(link.id, link)
+          }
+        }
+        // #region `extra` embeds for v0.4
+
+        // LLink parentIds
+        if (Array.isArray(extra?.linkExtensions)) {
+          for (const linkEx of extra.linkExtensions) {
+            const link = this._links.get(linkEx.id)
+            if (link) link.parentId = linkEx.parentId
+          }
+        }
+
+        // Reroutes
+        reroutes = extra?.reroutes
+
+        // #endregion `extra` embeds for v0.4
+      } else {
+        // New schema - one version so far, no check required.
+
+        // State
+        if (data.state) {
+          const { lastGroupId, lastLinkId, lastNodeId, lastRerouteId } = data.state
+          const { state } = this
+          if (lastGroupId != null) state.lastGroupId = lastGroupId
+          if (lastLinkId != null) state.lastLinkId = lastLinkId
+          if (lastNodeId != null) state.lastNodeId = lastNodeId
+          if (lastRerouteId != null) state.lastRerouteId = lastRerouteId
+        }
+
+        // Links
+        if (Array.isArray(data.links)) {
+          for (const linkData of data.links) {
+            const link = LLink.create(linkData)
+            this._links.set(link.id, link)
+          }
+        }
+
+        reroutes = data.reroutes
+      }
+
+      // Reroutes
+      if (Array.isArray(reroutes)) {
+        for (const rerouteData of reroutes) {
+          this.setReroute(rerouteData)
+        }
+      }
+
+      const nodesData = data.nodes
+
+      // copy all stored fields
+      for (const i in data) {
+        if (LGraph.ConfigureProperties.has(i)) continue
+
+        // @ts-expect-error #574 Legacy property assignment
+        this[i] = data[i]
+      }
+
+      // Subgraph definitions
+      const subgraphs = data.definitions?.subgraphs
+      if (subgraphs) {
+        for (const subgraph of subgraphs) this.createSubgraph(subgraph)
+        for (const subgraph of subgraphs) this.subgraphs.get(subgraph.id)?.configure(subgraph)
+      }
+
+      let error = false
+      const nodeDataMap = new Map<NodeId, ISerialisedNode>()
+
+      // create nodes
+      this._nodes = []
+      if (nodesData) {
+        for (const n_info of nodesData) {
+          // stored info
+          let node = LiteGraph.createNode(String(n_info.type), n_info.title)
+          if (!node) {
+            if (LiteGraph.debug) console.log("Node not found or has errors:", n_info.type)
+
+            // in case of error we create a replacement node to avoid losing info
+            node = new LGraphNode("")
+            node.last_serialization = n_info
+            node.has_errors = true
+            error = true
+            // continue;
+          }
+
+          // id it or it will create a new id
+          node.id = n_info.id
+          // add before configure, otherwise configure cannot create links
+          this.add(node, true)
+          nodeDataMap.set(node.id, n_info)
+        }
+
+        // configure nodes afterwards so they can reach each other
+        for (const [id, nodeData] of nodeDataMap) {
+          this.getNodeById(id)?.configure(nodeData)
+        }
+      }
+
+      // Floating links
+      if (Array.isArray(data.floatingLinks)) {
+        for (const linkData of data.floatingLinks) {
+          const floatingLink = LLink.create(linkData)
+          this.addFloatingLink(floatingLink)
+
+          if (floatingLink.id > this.#lastFloatingLinkId) this.#lastFloatingLinkId = floatingLink.id
+        }
+      }
+
+      // Drop broken reroutes
+      for (const reroute of this.reroutes.values()) {
+        // Drop broken links, and ignore reroutes with no valid links
+        if (!reroute.validateLinks(this._links, this.floatingLinks)) {
+          this.reroutes.delete(reroute.id)
+        }
+      }
+
+      // groups
+      this._groups.length = 0
+      const groupData = data.groups
+      if (groupData) {
+        for (const data of groupData) {
+          // TODO: Search/remove these global object refs
+          const group = new LiteGraph.LGraphGroup()
+          group.configure(data)
+          this.add(group)
+        }
+      }
+
+      this.updateExecutionOrder()
+
+      this.onConfigure?.(data)
+      this._version++
+
+      // Ensure the primary canvas is set to the correct graph
+      const { primaryCanvas } = this
+      const subgraphId = primaryCanvas?.subgraph?.id
+      if (subgraphId) {
+        const subgraph = this.subgraphs.get(subgraphId)
+        if (subgraph) {
+          primaryCanvas.setGraph(subgraph)
+        } else {
+          primaryCanvas.setGraph(this)
+        }
+      }
+
+      this.setDirtyCanvas(true, true)
+      return error
+    } finally {
+      this.events.dispatch("configured")
+    }
+  }
+
+  #canvas?: LGraphCanvas
+  get primaryCanvas(): LGraphCanvas | undefined {
+    return this.rootGraph.#canvas
+  }
+
+  set primaryCanvas(canvas: LGraphCanvas) {
+    this.rootGraph.#canvas = canvas
+  }
+
+  load(url: string | Blob | URL | File, callback: () => void) {
+    const that = this
+
+    // from file
+    if (url instanceof Blob || url instanceof File) {
+      const reader = new FileReader()
+      reader.addEventListener("load", function (event) {
+        const result = stringOrEmpty(event.target?.result)
+        const data = JSON.parse(result)
+        that.configure(data)
+        callback?.()
+      })
+
+      reader.readAsText(url)
+      return
+    }
+
+    // is a string, then an URL
+    const req = new XMLHttpRequest()
+    req.open("GET", url, true)
+    req.send(null)
+    req.addEventListener("load", function () {
+      if (req.status !== 200) {
+        console.error("Error loading graph:", req.status, req.response)
+        return
+      }
+      const data = JSON.parse(req.response)
+      that.configure(data)
+      callback?.()
+    })
+    req.addEventListener("error", (err) => {
+      console.error("Error loading graph:", err)
+    })
+  }
+}
diff --git a/src/lib/litegraph/src/LGraphBadge.ts b/src/lib/litegraph/src/LGraphBadge.ts
new file mode 100644
index 0000000000..48ac2a7cc3
--- /dev/null
+++ b/src/lib/litegraph/src/LGraphBadge.ts
@@ -0,0 +1,126 @@
+import { LGraphIcon, type LGraphIconOptions } from "./LGraphIcon"
+
+export enum BadgePosition {
+  TopLeft = "top-left",
+  TopRight = "top-right",
+}
+
+export interface LGraphBadgeOptions {
+  text: string
+  fgColor?: string
+  bgColor?: string
+  fontSize?: number
+  padding?: number
+  height?: number
+  cornerRadius?: number
+  iconOptions?: LGraphIconOptions
+  xOffset?: number
+  yOffset?: number
+}
+
+export class LGraphBadge {
+  text: string
+  fgColor: string
+  bgColor: string
+  fontSize: number
+  padding: number
+  height: number
+  cornerRadius: number
+  icon?: LGraphIcon
+  xOffset: number
+  yOffset: number
+
+  constructor({
+    text,
+    fgColor = "white",
+    bgColor = "#0F1F0F",
+    fontSize = 12,
+    padding = 6,
+    height = 20,
+    cornerRadius = 5,
+    iconOptions,
+    xOffset = 0,
+    yOffset = 0,
+  }: LGraphBadgeOptions) {
+    this.text = text
+    this.fgColor = fgColor
+    this.bgColor = bgColor
+    this.fontSize = fontSize
+    this.padding = padding
+    this.height = height
+    this.cornerRadius = cornerRadius
+    if (iconOptions) {
+      this.icon = new LGraphIcon(iconOptions)
+    }
+    this.xOffset = xOffset
+    this.yOffset = yOffset
+  }
+
+  get visible() {
+    return this.text.length > 0 || !!this.icon
+  }
+
+  getWidth(ctx: CanvasRenderingContext2D) {
+    if (!this.visible) return 0
+    const { font } = ctx
+    let iconWidth = 0
+    if (this.icon) {
+      ctx.font = `${this.icon.fontSize}px '${this.icon.fontFamily}'`
+      iconWidth = ctx.measureText(this.icon.unicode).width + this.padding
+    }
+    ctx.font = `${this.fontSize}px sans-serif`
+    const textWidth = this.text ? ctx.measureText(this.text).width : 0
+    ctx.font = font
+    return iconWidth + textWidth + this.padding * 2
+  }
+
+  draw(
+    ctx: CanvasRenderingContext2D,
+    x: number,
+    y: number,
+  ): void {
+    if (!this.visible) return
+
+    x += this.xOffset
+    y += this.yOffset
+
+    const { font, fillStyle, textBaseline, textAlign } = ctx
+
+    ctx.font = `${this.fontSize}px sans-serif`
+    const badgeWidth = this.getWidth(ctx)
+    const badgeX = 0
+
+    // Draw badge background
+    ctx.fillStyle = this.bgColor
+    ctx.beginPath()
+    if (ctx.roundRect) {
+      ctx.roundRect(x + badgeX, y, badgeWidth, this.height, this.cornerRadius)
+    } else {
+      // Fallback for browsers that don't support roundRect
+      ctx.rect(x + badgeX, y, badgeWidth, this.height)
+    }
+    ctx.fill()
+
+    let drawX = x + badgeX + this.padding
+    const centerY = y + this.height / 2
+
+    // Draw icon if present
+    if (this.icon) {
+      this.icon.draw(ctx, drawX, centerY)
+      drawX += this.icon.fontSize + this.padding / 2 + 4
+    }
+
+    // Draw badge text
+    if (this.text) {
+      ctx.fillStyle = this.fgColor
+      ctx.textBaseline = "middle"
+      ctx.textAlign = "left"
+      ctx.fillText(this.text, drawX, centerY + 1)
+    }
+
+    ctx.font = font
+    ctx.fillStyle = fillStyle
+    ctx.textBaseline = textBaseline
+    ctx.textAlign = textAlign
+  }
+}
diff --git a/src/lib/litegraph/src/LGraphCanvas.ts b/src/lib/litegraph/src/LGraphCanvas.ts
new file mode 100644
index 0000000000..9bc6092119
--- /dev/null
+++ b/src/lib/litegraph/src/LGraphCanvas.ts
@@ -0,0 +1,7723 @@
+import type { ContextMenu } from "./ContextMenu"
+import type { CustomEventDispatcher, ICustomEventTarget } from "./infrastructure/CustomEventTarget"
+import type { LGraphCanvasEventMap } from "./infrastructure/LGraphCanvasEventMap"
+import type {
+  CanvasColour,
+  ColorOption,
+  ConnectingLink,
+  ContextMenuDivElement,
+  DefaultConnectionColors,
+  Dictionary,
+  Direction,
+  IBoundaryNodes,
+  IColorable,
+  IContextMenuOptions,
+  IContextMenuValue,
+  INodeInputSlot,
+  INodeOutputSlot,
+  INodeSlot,
+  INodeSlotContextItem,
+  ISlotType,
+  LinkSegment,
+  NullableProperties,
+  Point,
+  Positionable,
+  ReadOnlyPoint,
+  ReadOnlyRect,
+  Rect,
+  Size,
+} from "./interfaces"
+import type { LGraph } from "./LGraph"
+import type {
+  CanvasMouseEvent,
+  CanvasPointerEvent,
+  CanvasPointerExtensions,
+} from "./types/events"
+import type { ClipboardItems, SubgraphIO } from "./types/serialisation"
+import type { NeverNever } from "./types/utility"
+import type { PickNevers } from "./types/utility"
+import type { IBaseWidget } from "./types/widgets"
+
+import { LinkConnector } from './canvas/LinkConnector'
+
+import { isOverNodeInput, isOverNodeOutput } from "./canvas/measureSlots"
+import { CanvasPointer } from "./CanvasPointer"
+import { type AnimationOptions, DragAndScale } from "./DragAndScale"
+import { strokeShape } from "./draw"
+import { NullGraphError } from "./infrastructure/NullGraphError"
+import { LGraphGroup } from "./LGraphGroup"
+import { LGraphNode, type NodeId, type NodeProperty } from "./LGraphNode"
+import { LiteGraph, Rectangle, SubgraphNode } from "./litegraph"
+import { type LinkId, LLink } from "./LLink"
+import {
+  containsRect,
+  createBounds,
+  distance,
+  findPointOnCurve,
+  isInRect,
+  isInRectangle,
+  isPointInRect,
+  overlapBounding,
+  snapPoint,
+} from "./measure"
+import { NodeInputSlot } from "./node/NodeInputSlot"
+import { Reroute, type RerouteId } from "./Reroute"
+import { stringOrEmpty } from "./strings"
+import { Subgraph } from "./litegraph"
+import { SubgraphInputNode } from "./subgraph/SubgraphInputNode"
+import { SubgraphIONodeBase } from "./subgraph/SubgraphIONodeBase"
+import { SubgraphOutputNode } from "./subgraph/SubgraphOutputNode"
+import {
+  CanvasItem,
+  LGraphEventMode,
+  LinkDirection,
+  LinkMarkerShape,
+  LinkRenderType,
+  RenderShape,
+  TitleMode,
+} from "./types/globalEnums"
+import { alignNodes, distributeNodes, getBoundaryNodes } from "./utils/arrange"
+import { findFirstNode, getAllNestedItems } from "./utils/collections"
+import { BaseWidget } from "./widgets/BaseWidget"
+import { toConcreteWidget } from "./widgets/widgetMap"
+
+interface IShowSearchOptions {
+  node_to?: LGraphNode | null
+  node_from?: LGraphNode | null
+  slot_from: number | INodeOutputSlot | INodeInputSlot | null | undefined
+  type_filter_in?: ISlotType
+  type_filter_out?: ISlotType | false
+
+  // TODO check for registered_slot_[in/out]_types not empty // this will be checked for functionality enabled : filter on slot type, in and out
+  do_type_filter?: boolean
+  show_general_if_none_on_typefilter?: boolean
+  show_general_after_typefiltered?: boolean
+  hide_on_mouse_leave?: boolean
+  show_all_if_empty?: boolean
+  show_all_on_open?: boolean
+}
+
+interface ICreateNodeOptions {
+  /** input */
+  nodeFrom?: SubgraphInputNode | LGraphNode | null
+  /** input */
+  slotFrom?: number | INodeOutputSlot | INodeInputSlot | SubgraphIO | null
+  /** output */
+  nodeTo?: SubgraphOutputNode | LGraphNode | null
+  /** output */
+  slotTo?: number | INodeOutputSlot | INodeInputSlot | SubgraphIO | null
+  /** pass the event coords */
+
+  /** Create the connection from a reroute */
+  afterRerouteId?: RerouteId
+
+  // FIXME: Should not be optional
+  /** choose a nodetype to add, AUTO to set at first good */
+  nodeType?: string
+  e?: CanvasMouseEvent
+  allow_searchbox?: boolean
+}
+
+interface ICreateDefaultNodeOptions extends ICreateNodeOptions {
+  /** Position of new node */
+  position: Point
+  /** adjust x,y */
+  posAdd?: Point
+  /** alpha, adjust the position x,y based on the new node size w,h */
+  posSizeFix?: Point
+}
+
+interface HasShowSearchCallback {
+  /** See {@link LGraphCanvas.showSearchBox} */
+  showSearchBox: (
+    event: MouseEvent,
+    options?: IShowSearchOptions,
+  ) => HTMLDivElement | void
+}
+
+interface ICloseable {
+  close(): void
+}
+
+interface IDialogExtensions extends ICloseable {
+  modified(): void
+  is_modified: boolean
+}
+
+interface IDialog extends HTMLDivElement, IDialogExtensions {}
+type PromptDialog = Omit<IDialog, "modified">
+
+interface IDialogOptions {
+  position?: Point
+  event?: MouseEvent
+  checkForInput?: boolean
+  closeOnLeave?: boolean
+  onclose?(): void
+}
+
+/** @inheritdoc {@link LGraphCanvas.state} */
+export interface LGraphCanvasState {
+  /** {@link Positionable} items are being dragged on the canvas. */
+  draggingItems: boolean
+  /** The canvas itself is being dragged. */
+  draggingCanvas: boolean
+  /** The canvas is read-only, preventing changes to nodes, disconnecting links, moving items, etc. */
+  readOnly: boolean
+
+  /** Bit flags indicating what is currently below the pointer. */
+  hoveringOver: CanvasItem
+  /** If `true`, pointer move events will set the canvas cursor style. */
+  shouldSetCursor: boolean
+
+  /**
+   * Dirty flag indicating that {@link selectedItems} has changed.
+   * Downstream consumers may reset to false once actioned.
+   */
+  selectionChanged: boolean
+}
+
+/**
+ * The items created by a clipboard paste operation.
+ * Includes maps of original copied IDs to newly created items.
+ */
+interface ClipboardPasteResult {
+  /** All successfully created items */
+  created: Positionable[]
+  /** Map: original node IDs to newly created nodes */
+  nodes: Map<NodeId, LGraphNode>
+  /** Map: original link IDs to new link IDs */
+  links: Map<LinkId, LLink>
+  /** Map: original reroute IDs to newly created reroutes */
+  reroutes: Map<RerouteId, Reroute>
+}
+
+/** Options for {@link LGraphCanvas.pasteFromClipboard}. */
+interface IPasteFromClipboardOptions {
+  /** If `true`, always attempt to connect inputs of pasted nodes - including to nodes that were not pasted. */
+  connectInputs?: boolean
+  /** The position to paste the items at. */
+  position?: Point
+}
+
+interface ICreatePanelOptions {
+  closable?: any
+  window?: any
+  onOpen?: () => void
+  onClose?: () => void
+  width?: any
+  height?: any
+}
+
+const cursors = {
+  NE: "nesw-resize",
+  SE: "nwse-resize",
+  SW: "nesw-resize",
+  NW: "nwse-resize",
+} as const
+
+/**
+ * This class is in charge of rendering one graph inside a canvas. And provides all the interaction required.
+ * Valid callbacks are: onNodeSelected, onNodeDeselected, onShowNodePanel, onNodeDblClicked
+ */
+export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap> {
+  // Optimised buffers used during rendering
+  static #temp = new Float32Array(4)
+  static #temp_vec2 = new Float32Array(2)
+  static #tmp_area = new Float32Array(4)
+  static #margin_area = new Float32Array(4)
+  static #link_bounding = new Float32Array(4)
+  static #lTempA: Point = new Float32Array(2)
+  static #lTempB: Point = new Float32Array(2)
+  static #lTempC: Point = new Float32Array(2)
+
+  static DEFAULT_BACKGROUND_IMAGE = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQBJREFUeNrs1rEKwjAUhlETUkj3vP9rdmr1Ysammk2w5wdxuLgcMHyptfawuZX4pJSWZTnfnu/lnIe/jNNxHHGNn//HNbbv+4dr6V+11uF527arU7+u63qfa/bnmh8sWLBgwYJlqRf8MEptXPBXJXa37BSl3ixYsGDBMliwFLyCV/DeLIMFCxYsWLBMwSt4Be/NggXLYMGCBUvBK3iNruC9WbBgwYJlsGApeAWv4L1ZBgsWLFiwYJmCV/AK3psFC5bBggULloJX8BpdwXuzYMGCBctgwVLwCl7Be7MMFixYsGDBsu8FH1FaSmExVfAxBa/gvVmwYMGCZbBg/W4vAQYA5tRF9QYlv/QAAAAASUVORK5CYII="
+
+  static DEFAULT_EVENT_LINK_COLOR = "#A86"
+
+  /** Link type to colour dictionary. */
+  static link_type_colors: Dictionary<string> = {
+    "-1": LGraphCanvas.DEFAULT_EVENT_LINK_COLOR,
+    "number": "#AAA",
+    "node": "#DCA",
+  }
+
+  static gradients: Record<string, CanvasGradient> = {}
+
+  static search_limit = -1
+  static node_colors: Record<string, ColorOption> = {
+    red: { color: "#322", bgcolor: "#533", groupcolor: "#A88" },
+    brown: { color: "#332922", bgcolor: "#593930", groupcolor: "#b06634" },
+    green: { color: "#232", bgcolor: "#353", groupcolor: "#8A8" },
+    blue: { color: "#223", bgcolor: "#335", groupcolor: "#88A" },
+    pale_blue: {
+      color: "#2a363b",
+      bgcolor: "#3f5159",
+      groupcolor: "#3f789e",
+    },
+    cyan: { color: "#233", bgcolor: "#355", groupcolor: "#8AA" },
+    purple: { color: "#323", bgcolor: "#535", groupcolor: "#a1309b" },
+    yellow: { color: "#432", bgcolor: "#653", groupcolor: "#b58b2a" },
+    black: { color: "#222", bgcolor: "#000", groupcolor: "#444" },
+  }
+
+  /**
+   * @internal Exclusively a workaround for design limitation in {@link LGraphNode.computeSize}.
+   */
+  static _measureText?: (text: string, fontStyle?: string) => number
+
+  /**
+   * The state of this canvas, e.g. whether it is being dragged, or read-only.
+   *
+   * Implemented as a POCO that can be proxied without side-effects.
+   */
+  state: LGraphCanvasState = {
+    draggingItems: false,
+    draggingCanvas: false,
+    readOnly: false,
+    hoveringOver: CanvasItem.Nothing,
+    shouldSetCursor: true,
+    selectionChanged: false,
+  }
+
+  #subgraph?: Subgraph
+  get subgraph(): Subgraph | undefined {
+    return this.#subgraph
+  }
+
+  set subgraph(value: Subgraph | undefined) {
+    if (value !== this.#subgraph) {
+      this.#subgraph = value
+      if (value) this.dispatch("litegraph:set-graph", { oldGraph: this.#subgraph, newGraph: value })
+    }
+  }
+
+  /** Dispatches a custom event on the canvas. */
+  dispatch<T extends keyof NeverNever<LGraphCanvasEventMap>>(type: T, detail: LGraphCanvasEventMap[T]): boolean
+  dispatch<T extends keyof PickNevers<LGraphCanvasEventMap>>(type: T): boolean
+  dispatch<T extends keyof LGraphCanvasEventMap>(type: T, detail?: LGraphCanvasEventMap[T]) {
+    const event = new CustomEvent(type as string, { detail, bubbles: true })
+    return this.canvas.dispatchEvent(event)
+  }
+
+  dispatchEvent<TEvent extends keyof LGraphCanvasEventMap>(type: TEvent, detail: LGraphCanvasEventMap[TEvent]) {
+    this.canvas.dispatchEvent(new CustomEvent(type, { detail }))
+  }
+
+  #updateCursorStyle() {
+    if (!this.state.shouldSetCursor) return
+
+    const crosshairItems =
+      CanvasItem.Node |
+      CanvasItem.RerouteSlot |
+      CanvasItem.SubgraphIoNode |
+      CanvasItem.SubgraphIoSlot
+
+    let cursor = "default"
+    if (this.state.draggingCanvas) {
+      cursor = "grabbing"
+    } else if (this.state.readOnly) {
+      cursor = "grab"
+    } else if (this.pointer.resizeDirection) {
+      cursor = cursors[this.pointer.resizeDirection] ?? cursors.SE
+    } else if (this.state.hoveringOver & crosshairItems) {
+      cursor = "crosshair"
+    } else if (this.state.hoveringOver & CanvasItem.Reroute) {
+      cursor = "grab"
+    }
+
+    this.canvas.style.cursor = cursor
+  }
+
+  // Whether the canvas was previously being dragged prior to pressing space key.
+  // null if space key is not pressed.
+  private _previously_dragging_canvas: boolean | null = null
+
+  // #region Legacy accessors
+  /** @deprecated @inheritdoc {@link LGraphCanvasState.readOnly} */
+  get read_only(): boolean {
+    return this.state.readOnly
+  }
+
+  set read_only(value: boolean) {
+    this.state.readOnly = value
+    this.#updateCursorStyle()
+  }
+
+  get isDragging(): boolean {
+    return this.state.draggingItems
+  }
+
+  set isDragging(value: boolean) {
+    this.state.draggingItems = value
+  }
+
+  get hoveringOver(): CanvasItem {
+    return this.state.hoveringOver
+  }
+
+  set hoveringOver(value: CanvasItem) {
+    this.state.hoveringOver = value
+    this.#updateCursorStyle()
+  }
+
+  /** @deprecated Replace all references with {@link pointer}.{@link CanvasPointer.isDown isDown}. */
+  get pointer_is_down() {
+    return this.pointer.isDown
+  }
+
+  /** @deprecated Replace all references with {@link pointer}.{@link CanvasPointer.isDouble isDouble}. */
+  get pointer_is_double() {
+    return this.pointer.isDouble
+  }
+
+  /** @deprecated @inheritdoc {@link LGraphCanvasState.draggingCanvas} */
+  get dragging_canvas(): boolean {
+    return this.state.draggingCanvas
+  }
+
+  set dragging_canvas(value: boolean) {
+    this.state.draggingCanvas = value
+    this.#updateCursorStyle()
+  }
+
+  /**
+   * @deprecated Use {@link LGraphNode.titleFontStyle} instead.
+   */
+  get title_text_font(): string {
+    return `${LiteGraph.NODE_TEXT_SIZE}px ${LiteGraph.NODE_FONT}`
+  }
+  // #endregion Legacy accessors
+
+  get inner_text_font(): string {
+    return `normal ${LiteGraph.NODE_SUBTEXT_SIZE}px ${LiteGraph.NODE_FONT}`
+  }
+
+  #maximumFrameGap = 0
+  /** Maximum frames per second to render. 0: unlimited. Default: 0 */
+  public get maximumFps() {
+    return this.#maximumFrameGap > Number.EPSILON ? this.#maximumFrameGap / 1000 : 0
+  }
+
+  public set maximumFps(value) {
+    this.#maximumFrameGap = value > Number.EPSILON ? 1000 / value : 0
+  }
+
+  /**
+   * @deprecated Use {@link LiteGraphGlobal.ROUND_RADIUS} instead.
+   */
+  get round_radius() {
+    return LiteGraph.ROUND_RADIUS
+  }
+
+  /**
+   * @deprecated Use {@link LiteGraphGlobal.ROUND_RADIUS} instead.
+   */
+  set round_radius(value: number) {
+    LiteGraph.ROUND_RADIUS = value
+  }
+
+  /**
+   * Render low quality when zoomed out.
+   */
+  get low_quality(): boolean {
+    return this.ds.scale < this.low_quality_zoom_threshold
+  }
+
+  options: {
+    skip_events?: any
+    viewport?: any
+    skip_render?: any
+    autoresize?: any
+  }
+
+  background_image: string
+  readonly ds: DragAndScale
+  readonly pointer: CanvasPointer
+  zoom_modify_alpha: boolean
+  zoom_speed: number
+  node_title_color: string
+  default_link_color: string
+  default_connection_color: {
+    input_off: string
+    input_on: string
+    output_off: string
+    output_on: string
+  }
+
+  default_connection_color_byType: Dictionary<CanvasColour>
+  default_connection_color_byTypeOff: Dictionary<CanvasColour>
+
+  /** Gets link colours. Extremely basic impl. until the legacy object dictionaries are removed. */
+  colourGetter: DefaultConnectionColors = {
+    getConnectedColor: (type: string) =>
+      this.default_connection_color_byType[type] ||
+      this.default_connection_color.output_on,
+    getDisconnectedColor: (type: string) =>
+      this.default_connection_color_byTypeOff[type] ||
+      this.default_connection_color_byType[type] ||
+      this.default_connection_color.output_off,
+  }
+
+  highquality_render: boolean
+  use_gradients: boolean
+  editor_alpha: number
+  pause_rendering: boolean
+  clear_background: boolean
+  clear_background_color: string
+  render_only_selected: boolean
+  show_info: boolean
+  allow_dragcanvas: boolean
+  allow_dragnodes: boolean
+  allow_interaction: boolean
+  multi_select: boolean
+  allow_searchbox: boolean
+  allow_reconnect_links: boolean
+  align_to_grid: boolean
+  drag_mode: boolean
+  dragging_rectangle: Rect | null
+  filter?: string | null
+  set_canvas_dirty_on_mouse_event: boolean
+  always_render_background: boolean
+  render_shadows: boolean
+  render_canvas_border: boolean
+  render_connections_shadows: boolean
+  render_connections_border: boolean
+  render_curved_connections: boolean
+  render_connection_arrows: boolean
+  render_collapsed_slots: boolean
+  render_execution_order: boolean
+  render_link_tooltip: boolean
+
+  /** Shape of the markers shown at the midpoint of links.  Default: Circle */
+  linkMarkerShape: LinkMarkerShape = LinkMarkerShape.Circle
+  links_render_mode: number
+  /** Zoom threshold for low quality rendering. Zoom below this threshold will render low quality. */
+  low_quality_zoom_threshold: number = 0.6
+  /** mouse in canvas coordinates, where 0,0 is the top-left corner of the blue rectangle */
+  readonly mouse: Point
+  /** mouse in graph coordinates, where 0,0 is the top-left corner of the blue rectangle */
+  readonly graph_mouse: Point
+  /** @deprecated LEGACY: REMOVE THIS, USE {@link graph_mouse} INSTEAD */
+  canvas_mouse: Point
+  /** to personalize the search box */
+  onSearchBox?: (helper: Element, str: string, canvas: LGraphCanvas) => any
+  onSearchBoxSelection?: (name: any, event: any, canvas: LGraphCanvas) => void
+  onMouse?: (e: CanvasMouseEvent) => boolean
+  /** to render background objects (behind nodes and connections) in the canvas affected by transform */
+  onDrawBackground?: (ctx: CanvasRenderingContext2D, visible_area: any) => void
+  /** to render foreground objects (above nodes and connections) in the canvas affected by transform */
+  onDrawForeground?: (arg0: CanvasRenderingContext2D, arg1: any) => void
+  connections_width: number
+  /** The current node being drawn by {@link drawNode}.  This should NOT be used to determine the currently selected node.  See {@link selectedItems} */
+  current_node: LGraphNode | null
+  /** used for widgets */
+  node_widget?: [LGraphNode, IBaseWidget] | null
+  /** The link to draw a tooltip for. */
+  over_link_center?: LinkSegment
+  last_mouse_position: Point
+  /** The visible area of this canvas.  Tightly coupled with {@link ds}. */
+  visible_area: Rectangle
+  /** Contains all links and reroutes that were rendered.  Repopulated every render cycle. */
+  renderedPaths: Set<LinkSegment> = new Set()
+  /** @deprecated Replaced by {@link renderedPaths}, but length is set to 0 by some extensions. */
+  visible_links: LLink[] = []
+  /** @deprecated This array is populated and cleared to support legacy extensions. The contents are ignored by Litegraph. */
+  connecting_links: ConnectingLink[] | null
+  linkConnector = new LinkConnector(links => this.connecting_links = links)
+  /** The viewport of this canvas.  Tightly coupled with {@link ds}. */
+  readonly viewport?: Rect
+  autoresize: boolean
+  static active_canvas: LGraphCanvas
+  frame = 0
+  last_draw_time = 0
+  render_time = 0
+  fps = 0
+  /** @deprecated See {@link LGraphCanvas.selectedItems} */
+  selected_nodes: Dictionary<LGraphNode> = {}
+  /** All selected nodes, groups, and reroutes */
+  selectedItems: Set<Positionable> = new Set()
+  /** The group currently being resized. */
+  resizingGroup: LGraphGroup | null = null
+  /** @deprecated See {@link LGraphCanvas.selectedItems} */
+  selected_group: LGraphGroup | null = null
+  /** The nodes that are currently visible on the canvas. */
+  visible_nodes: LGraphNode[] = []
+  /**
+   * The IDs of the nodes that are currently visible on the canvas. More
+   * performant than {@link visible_nodes} for visibility checks.
+   */
+  #visible_node_ids: Set<NodeId> = new Set()
+  node_over?: LGraphNode
+  node_capturing_input?: LGraphNode | null
+  highlighted_links: Dictionary<boolean> = {}
+
+  #visibleReroutes: Set<Reroute> = new Set()
+
+  dirty_canvas: boolean = true
+  dirty_bgcanvas: boolean = true
+  /** A map of nodes that require selective-redraw */
+  dirty_nodes = new Map<NodeId, LGraphNode>()
+  dirty_area?: Rect | null
+  /** @deprecated Unused */
+  node_in_panel?: LGraphNode | null
+  last_mouse: ReadOnlyPoint = [0, 0]
+  last_mouseclick: number = 0
+  graph: LGraph | Subgraph | null
+  get _graph(): LGraph | Subgraph {
+    if (!this.graph) throw new NullGraphError()
+    return this.graph
+  }
+
+  canvas: HTMLCanvasElement & ICustomEventTarget<LGraphCanvasEventMap>
+  bgcanvas: HTMLCanvasElement
+  ctx: CanvasRenderingContext2D
+  _events_binded?: boolean
+  _mousedown_callback?(e: PointerEvent): void
+  _mousewheel_callback?(e: WheelEvent): void
+  _mousemove_callback?(e: PointerEvent): void
+  _mouseup_callback?(e: PointerEvent): void
+  _mouseout_callback?(e: PointerEvent): void
+  _mousecancel_callback?(e: PointerEvent): void
+  _key_callback?(e: KeyboardEvent): void
+  bgctx?: CanvasRenderingContext2D | null
+  is_rendering?: boolean
+  /** @deprecated Panels */
+  block_click?: boolean
+  /** @deprecated Panels */
+  last_click_position?: Point | null
+  resizing_node?: LGraphNode | null
+  /** @deprecated See {@link LGraphCanvas.resizingGroup} */
+  selected_group_resizing?: boolean
+  /** @deprecated See {@link pointer}.{@link CanvasPointer.dragStarted dragStarted} */
+  last_mouse_dragging?: boolean
+  onMouseDown?: (arg0: CanvasMouseEvent) => void
+  _highlight_pos?: Point
+  _highlight_input?: INodeInputSlot
+  // TODO: Check if panels are used
+  /** @deprecated Panels */
+  node_panel?: any
+  /** @deprecated Panels */
+  options_panel?: any
+  _bg_img?: HTMLImageElement
+  _pattern?: CanvasPattern
+  _pattern_img?: HTMLImageElement
+  // TODO: This looks like another panel thing
+  prompt_box?: PromptDialog | null
+  search_box?: HTMLDivElement
+  /** @deprecated Panels */
+  SELECTED_NODE?: LGraphNode
+  /** @deprecated Panels */
+  NODEPANEL_IS_OPEN?: boolean
+
+  /** Once per frame check of snap to grid value.  @todo Update on change. */
+  #snapToGrid?: number
+  /** Set on keydown, keyup. @todo */
+  #shiftDown: boolean = false
+
+  /** If true, enable drag zoom. Ctrl+Shift+Drag Up/Down: zoom canvas. */
+  dragZoomEnabled: boolean = false
+  /** The start position of the drag zoom. */
+  #dragZoomStart: { pos: Point, scale: number } | null = null
+
+  getMenuOptions?(): IContextMenuValue<string>[]
+  getExtraMenuOptions?(
+    canvas: LGraphCanvas,
+    options: IContextMenuValue<string>[],
+  ): IContextMenuValue<string>[]
+  static active_node: LGraphNode
+  /** called before modifying the graph */
+  onBeforeChange?(graph: LGraph): void
+  /** called after modifying the graph */
+  onAfterChange?(graph: LGraph): void
+  onClear?: () => void
+  /** called after moving a node @deprecated Does not handle multi-node move, and can return the wrong node. */
+  onNodeMoved?: (node_dragged: LGraphNode | undefined) => void
+  /** @deprecated Called with the deprecated {@link selected_nodes} when the selection changes. Replacement not yet impl. */
+  onSelectionChange?: (selected: Dictionary<Positionable>) => void
+  /** called when rendering a tooltip */
+  onDrawLinkTooltip?: (
+    ctx: CanvasRenderingContext2D,
+    link: LLink | null,
+    canvas?: LGraphCanvas,
+  ) => boolean
+
+  /** to render foreground objects not affected by transform (for GUIs) */
+  onDrawOverlay?: (ctx: CanvasRenderingContext2D) => void
+  onRenderBackground?: (
+    canvas: HTMLCanvasElement,
+    ctx: CanvasRenderingContext2D,
+  ) => boolean
+
+  onNodeDblClicked?: (n: LGraphNode) => void
+  onShowNodePanel?: (n: LGraphNode) => void
+  onNodeSelected?: (node: LGraphNode) => void
+  onNodeDeselected?: (node: LGraphNode) => void
+  onRender?: (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D) => void
+
+  /**
+   * Creates a new instance of LGraphCanvas.
+   * @param canvas The canvas HTML element (or its id) to use, or null / undefined to leave blank.
+   * @param graph The graph that owns this canvas.
+   * @param options
+   */
+  constructor(
+    canvas: HTMLCanvasElement,
+    graph: LGraph,
+    options?: LGraphCanvas["options"],
+  ) {
+    options ||= {}
+    this.options = options
+
+    // if(graph === undefined)
+    // throw ("No graph assigned");
+    this.background_image = LGraphCanvas.DEFAULT_BACKGROUND_IMAGE
+
+    this.ds = new DragAndScale(canvas)
+    this.pointer = new CanvasPointer(canvas)
+
+    this.linkConnector.events.addEventListener("link-created", () => this.#dirty())
+
+    // @deprecated Workaround: Keep until connecting_links is removed.
+    this.linkConnector.events.addEventListener("reset", () => {
+      this.connecting_links = null
+      this.dirty_bgcanvas = true
+    })
+
+    // Dropped a link on the canvas
+    this.linkConnector.events.addEventListener("dropped-on-canvas", (customEvent) => {
+      if (!this.connecting_links) return
+
+      const e = customEvent.detail
+      this.emitEvent({
+        subType: "empty-release",
+        originalEvent: e,
+        linkReleaseContext: { links: this.connecting_links },
+      })
+
+      const firstLink = this.linkConnector.renderLinks[0]
+
+      // No longer in use
+      // add menu when releasing link in empty space
+      if (LiteGraph.release_link_on_empty_shows_menu) {
+        const linkReleaseContext = this.linkConnector.state.connectingTo === "input"
+          ? {
+            node_from: firstLink.node as LGraphNode,
+            slot_from: firstLink.fromSlot as INodeOutputSlot,
+            type_filter_in: firstLink.fromSlot.type,
+          }
+          : {
+            node_to: firstLink.node as LGraphNode,
+            slot_to: firstLink.fromSlot as INodeInputSlot,
+            type_filter_out: firstLink.fromSlot.type,
+          }
+
+        const afterRerouteId = firstLink.fromReroute?.id
+
+        if ("shiftKey" in e && e.shiftKey) {
+          if (this.allow_searchbox) {
+            this.showSearchBox(e as unknown as MouseEvent, linkReleaseContext as IShowSearchOptions)
+          }
+        } else if (this.linkConnector.state.connectingTo === "input") {
+          this.showConnectionMenu({ nodeFrom: firstLink.node as LGraphNode, slotFrom: firstLink.fromSlot as INodeOutputSlot, e, afterRerouteId })
+        } else {
+          this.showConnectionMenu({ nodeTo: firstLink.node as LGraphNode, slotTo: firstLink.fromSlot as INodeInputSlot, e, afterRerouteId })
+        }
+      }
+    })
+
+    // otherwise it generates ugly patterns when scaling down too much
+    this.zoom_modify_alpha = true
+    // in range (1.01, 2.5). Less than 1 will invert the zoom direction
+    this.zoom_speed = 1.1
+
+    this.node_title_color = LiteGraph.NODE_TITLE_COLOR
+    this.default_link_color = LiteGraph.LINK_COLOR
+    this.default_connection_color = {
+      input_off: "#778",
+      input_on: "#7F7",
+      output_off: "#778",
+      output_on: "#7F7",
+    }
+    this.default_connection_color_byType = {
+      /* number: "#7F7",
+            string: "#77F",
+            boolean: "#F77", */
+    }
+    this.default_connection_color_byTypeOff = {
+      /* number: "#474",
+            string: "#447",
+            boolean: "#744", */
+    }
+
+    this.highquality_render = true
+    // set to true to render titlebar with gradients
+    this.use_gradients = false
+    // used for transition
+    this.editor_alpha = 1
+    this.pause_rendering = false
+    this.clear_background = true
+    this.clear_background_color = "#222"
+
+    this.render_only_selected = true
+    this.show_info = true
+    this.allow_dragcanvas = true
+    this.allow_dragnodes = true
+    // allow to control widgets, buttons, collapse, etc
+    this.allow_interaction = true
+    // allow selecting multi nodes without pressing extra keys
+    this.multi_select = false
+    this.allow_searchbox = true
+    // allows to change a connection with having to redo it again
+    this.allow_reconnect_links = true
+    // snap to grid
+    this.align_to_grid = false
+
+    this.drag_mode = false
+    this.dragging_rectangle = null
+
+    // allows to filter to only accept some type of nodes in a graph
+    this.filter = null
+
+    // forces to redraw the canvas on mouse events (except move)
+    this.set_canvas_dirty_on_mouse_event = true
+    this.always_render_background = false
+    this.render_shadows = true
+    this.render_canvas_border = true
+    // too much cpu
+    this.render_connections_shadows = false
+    this.render_connections_border = true
+    this.render_curved_connections = false
+    this.render_connection_arrows = false
+    this.render_collapsed_slots = true
+    this.render_execution_order = false
+    this.render_link_tooltip = true
+
+    this.links_render_mode = LinkRenderType.SPLINE_LINK
+
+    this.mouse = [0, 0]
+    this.graph_mouse = [0, 0]
+    this.canvas_mouse = this.graph_mouse
+
+    this.connections_width = 3
+
+    this.current_node = null
+    this.node_widget = null
+    this.last_mouse_position = [0, 0]
+    this.visible_area = this.ds.visible_area
+    // Explicitly null-checked
+    this.connecting_links = null
+
+    // to constraint render area to a portion of the canvas
+    this.viewport = options.viewport || null
+
+    // link canvas and graph
+    this.graph = graph
+    graph?.attachCanvas(this)
+
+    // TypeScript strict workaround: cannot use method to initialize properties.
+    this.canvas = undefined!
+    this.bgcanvas = undefined!
+    this.ctx = undefined!
+
+    this.setCanvas(canvas, options.skip_events)
+    this.clear()
+
+    LGraphCanvas._measureText = (text: string, fontStyle = this.inner_text_font) => {
+      const { ctx } = this
+      const { font } = ctx
+      try {
+        ctx.font = fontStyle
+        return ctx.measureText(text).width
+      } finally {
+        ctx.font = font
+      }
+    }
+
+    if (!options.skip_render) {
+      this.startRendering()
+    }
+
+    this.autoresize = options.autoresize
+  }
+
+  static onGroupAdd(info: unknown, entry: unknown, mouse_event: MouseEvent): void {
+    const canvas = LGraphCanvas.active_canvas
+
+    const group = new LiteGraph.LGraphGroup()
+    group.pos = canvas.convertEventToCanvasOffset(mouse_event)
+    if (!canvas.graph) throw new NullGraphError()
+    canvas.graph.add(group)
+  }
+
+  /**
+   * @deprecated Functionality moved to {@link getBoundaryNodes}.  The new function returns null on failure, instead of an object with all null properties.
+   * Determines the furthest nodes in each direction
+   * @param nodes the nodes to from which boundary nodes will be extracted
+   * @returns
+   */
+  static getBoundaryNodes(
+    nodes: LGraphNode[] | Dictionary<LGraphNode>,
+  ): NullableProperties<IBoundaryNodes> {
+    const _nodes = Array.isArray(nodes) ? nodes : Object.values(nodes)
+    return (
+      getBoundaryNodes(_nodes) ?? {
+        top: null,
+        right: null,
+        bottom: null,
+        left: null,
+      }
+    )
+  }
+
+  /**
+   * @deprecated Functionality moved to {@link alignNodes}.  The new function does not set dirty canvas.
+   * @param nodes a list of nodes
+   * @param direction Direction to align the nodes
+   * @param align_to Node to align to (if null, align to the furthest node in the given direction)
+   */
+  static alignNodes(
+    nodes: Dictionary<LGraphNode>,
+    direction: Direction,
+    align_to?: LGraphNode,
+  ): void {
+    alignNodes(Object.values(nodes), direction, align_to)
+    LGraphCanvas.active_canvas.setDirty(true, true)
+  }
+
+  static onNodeAlign(
+    value: IContextMenuValue,
+    options: IContextMenuOptions,
+    event: MouseEvent,
+    prev_menu: ContextMenu<string>,
+    node: LGraphNode,
+  ): void {
+    new LiteGraph.ContextMenu(["Top", "Bottom", "Left", "Right"], {
+      event,
+      callback: inner_clicked,
+      parentMenu: prev_menu,
+    })
+
+    function inner_clicked(value: string) {
+      alignNodes(
+        Object.values(LGraphCanvas.active_canvas.selected_nodes),
+        value.toLowerCase() as Direction,
+        node,
+      )
+      LGraphCanvas.active_canvas.setDirty(true, true)
+    }
+  }
+
+  static onGroupAlign(
+    value: IContextMenuValue,
+    options: IContextMenuOptions,
+    event: MouseEvent,
+    prev_menu: ContextMenu<string>,
+  ): void {
+    new LiteGraph.ContextMenu(["Top", "Bottom", "Left", "Right"], {
+      event,
+      callback: inner_clicked,
+      parentMenu: prev_menu,
+    })
+
+    function inner_clicked(value: string) {
+      alignNodes(
+        Object.values(LGraphCanvas.active_canvas.selected_nodes),
+        value.toLowerCase() as Direction,
+      )
+      LGraphCanvas.active_canvas.setDirty(true, true)
+    }
+  }
+
+  static createDistributeMenu(
+    value: IContextMenuValue,
+    options: IContextMenuOptions,
+    event: MouseEvent,
+    prev_menu: ContextMenu<string>,
+  ): void {
+    new LiteGraph.ContextMenu(["Vertically", "Horizontally"], {
+      event,
+      callback: inner_clicked,
+      parentMenu: prev_menu,
+    })
+
+    function inner_clicked(value: string) {
+      const canvas = LGraphCanvas.active_canvas
+      distributeNodes(Object.values(canvas.selected_nodes), value === "Horizontally")
+      canvas.setDirty(true, true)
+    }
+  }
+
+  static onMenuAdd(
+    value: unknown,
+    options: unknown,
+    e: MouseEvent,
+    prev_menu?: ContextMenu<string>,
+    callback?: (node: LGraphNode | null) => void,
+  ): boolean | undefined {
+    const canvas = LGraphCanvas.active_canvas
+    const ref_window = canvas.getCanvasWindow()
+    const { graph } = canvas
+    if (!graph) return
+
+    inner_onMenuAdded("", prev_menu)
+    return false
+
+    type AddNodeMenu = Omit<IContextMenuValue<string>, "callback"> & {
+      callback: (
+        value: { value: string },
+        event: Event,
+        mouseEvent: MouseEvent,
+        contextMenu: ContextMenu<string>
+      ) => void
+    }
+
+    function inner_onMenuAdded(base_category: string, prev_menu?: ContextMenu<string>): void {
+      if (!graph) return
+
+      const categories = LiteGraph
+        .getNodeTypesCategories(canvas.filter || graph.filter)
+        .filter(category => category.startsWith(base_category))
+      const entries: AddNodeMenu[] = []
+
+      for (const category of categories) {
+        if (!category) continue
+
+        const base_category_regex = new RegExp(`^(${base_category})`)
+        const category_name = category
+          .replace(base_category_regex, "")
+          .split("/", 1)[0]
+        const category_path =
+          base_category === ""
+            ? `${category_name}/`
+            : `${base_category}${category_name}/`
+
+        let name = category_name
+        // in case it has a namespace like "shader::math/rand" it hides the namespace
+        if (name.includes("::")) name = name.split("::", 2)[1]
+
+        const index = entries.findIndex(entry => entry.value === category_path)
+        if (index === -1) {
+          entries.push({
+            value: category_path,
+            content: name,
+            has_submenu: true,
+            callback: function (value, event, mouseEvent, contextMenu) {
+              inner_onMenuAdded(value.value, contextMenu)
+            },
+          })
+        }
+      }
+
+      const nodes = LiteGraph.getNodeTypesInCategory(
+        base_category.slice(0, -1),
+        canvas.filter || graph.filter,
+      )
+
+      for (const node of nodes) {
+        if (node.skip_list) continue
+
+        const entry: AddNodeMenu = {
+          value: node.type,
+          content: node.title,
+          has_submenu: false,
+          callback: function (value, event, mouseEvent, contextMenu) {
+            if (!canvas.graph) throw new NullGraphError()
+
+            const first_event = contextMenu.getFirstEvent()
+            canvas.graph.beforeChange()
+            const node = LiteGraph.createNode(value.value)
+            if (node) {
+              if (!first_event) throw new TypeError("Context menu event was null. This should not occur in normal usage.")
+              node.pos = canvas.convertEventToCanvasOffset(first_event)
+              canvas.graph.add(node)
+            } else {
+              console.warn("Failed to create node of type:", value.value)
+            }
+
+            callback?.(node)
+            canvas.graph.afterChange()
+          },
+        }
+
+        entries.push(entry)
+      }
+
+      // @ts-expect-error Remove param ref_window - unused
+      new LiteGraph.ContextMenu(entries, { event: e, parentMenu: prev_menu }, ref_window)
+    }
+  }
+
+  static onMenuCollapseAll() {}
+  static onMenuNodeEdit() {}
+
+  /** @param _options Parameter is never used */
+  static showMenuNodeOptionalOutputs(
+    v: unknown,
+    /** Unused - immediately overwritten */
+    _options: INodeOutputSlot[],
+    e: MouseEvent,
+    prev_menu: ContextMenu<INodeSlotContextItem>,
+    node: LGraphNode,
+  ): boolean | undefined {
+    if (!node) return
+
+    const canvas = LGraphCanvas.active_canvas
+
+    let entries: (IContextMenuValue<INodeSlotContextItem> | null)[] = []
+
+    if (LiteGraph.do_add_triggers_slots && node.findOutputSlot("onExecuted") == -1) {
+      entries.push({ content: "On Executed", value: ["onExecuted", LiteGraph.EVENT, { nameLocked: true }], className: "event" })
+    }
+    // add callback for modifing the menu elements onMenuNodeOutputs
+    const retEntries = node.onMenuNodeOutputs?.(entries)
+    if (retEntries) entries = retEntries
+
+    if (!entries.length) return
+
+    new LiteGraph.ContextMenu<INodeSlotContextItem>(
+      entries,
+      {
+        event: e,
+        callback: inner_clicked,
+        parentMenu: prev_menu,
+        node,
+      },
+    )
+
+    function inner_clicked(this: ContextMenuDivElement<INodeSlotContextItem>, v: IContextMenuValue<INodeSlotContextItem>, e: any, prev: any) {
+      if (!node) return
+
+      // TODO: This is a static method, so the below "that" appears broken.
+      if (v.callback) v.callback.call(this, node, v, e, prev)
+
+      if (!v.value) return
+
+      const value = v.value[1]
+
+      if (value &&
+        (typeof value === "object" || Array.isArray(value))) {
+        // submenu why?
+        const entries = []
+        for (const i in value) {
+          entries.push({ content: i, value: value[i] })
+        }
+        new LiteGraph.ContextMenu(entries, {
+          event: e,
+          callback: inner_clicked,
+          parentMenu: prev_menu,
+          node,
+        })
+        return false
+      }
+
+      const { graph } = node
+      if (!graph) throw new NullGraphError()
+
+      graph.beforeChange()
+      node.addOutput(v.value[0], v.value[1], v.value[2])
+
+      // a callback to the node when adding a slot
+      node.onNodeOutputAdd?.(v.value)
+      canvas.setDirty(true, true)
+      graph.afterChange()
+    }
+
+    return false
+  }
+
+  /** @param value Parameter is never used */
+  static onShowMenuNodeProperties(
+    value: NodeProperty | undefined,
+    options: unknown,
+    e: MouseEvent,
+    prev_menu: ContextMenu<string>,
+    node: LGraphNode,
+  ): boolean | undefined {
+    if (!node || !node.properties) return
+
+    const canvas = LGraphCanvas.active_canvas
+    const ref_window = canvas.getCanvasWindow()
+
+    const entries: IContextMenuValue<string>[] = []
+    for (const i in node.properties) {
+      value = node.properties[i] !== undefined ? node.properties[i] : " "
+      if (typeof value == "object")
+        value = JSON.stringify(value)
+      const info = node.getPropertyInfo(i)
+      if (info.type == "enum" || info.type == "combo")
+        value = LGraphCanvas.getPropertyPrintableValue(value, info.values)
+
+      // value could contain invalid html characters, clean that
+      value = LGraphCanvas.decodeHTML(stringOrEmpty(value))
+      entries.push({
+        content:
+         `<span class='property_name'>${info.label || i}</span>` +
+         `<span class='property_value'>${value}</span>`,
+        value: i,
+      })
+    }
+    if (!entries.length) {
+      return
+    }
+
+    new LiteGraph.ContextMenu<string>(
+      entries,
+      {
+        event: e,
+        callback: inner_clicked,
+        parentMenu: prev_menu,
+        allow_html: true,
+        node,
+      },
+      // @ts-expect-error Unused
+      ref_window,
+    )
+
+    function inner_clicked(this: ContextMenuDivElement, v: { value: any }) {
+      if (!node) return
+
+      const rect = this.getBoundingClientRect()
+      canvas.showEditPropertyValue(node, v.value, {
+        position: [rect.left, rect.top],
+      })
+    }
+
+    return false
+  }
+
+  /** @deprecated */
+  static decodeHTML(str: string): string {
+    const e = document.createElement("div")
+    e.textContent = str
+    return e.innerHTML
+  }
+
+  static onMenuResizeNode(
+    value: IContextMenuValue,
+    options: IContextMenuOptions,
+    e: MouseEvent,
+    menu: ContextMenu,
+    node: LGraphNode,
+  ): void {
+    if (!node) return
+
+    const fApplyMultiNode = function (node: LGraphNode) {
+      node.setSize(node.computeSize())
+    }
+
+    const canvas = LGraphCanvas.active_canvas
+    if (!canvas.selected_nodes || Object.keys(canvas.selected_nodes).length <= 1) {
+      fApplyMultiNode(node)
+    } else {
+      for (const i in canvas.selected_nodes) {
+        fApplyMultiNode(canvas.selected_nodes[i])
+      }
+    }
+
+    canvas.setDirty(true, true)
+  }
+
+  // TODO refactor :: this is used fot title but not for properties!
+  static onShowPropertyEditor(
+    item: { property: keyof LGraphNode, type: string },
+    options: IContextMenuOptions<string>,
+    e: MouseEvent,
+    menu: ContextMenu<string>,
+    node: LGraphNode,
+  ): void {
+    const property = item.property || "title"
+    const value = node[property]
+
+    const title = document.createElement("span")
+    title.className = "name"
+    title.textContent = property
+
+    const input = document.createElement("input")
+    Object.assign(input, { type: "text", className: "value", autofocus: true })
+
+    const button = document.createElement("button")
+    button.textContent = "OK"
+
+    // TODO refactor :: use createDialog ?
+    const dialog = Object.assign(document.createElement("div"), {
+      is_modified: false,
+      className: "graphdialog",
+      close: () => dialog.remove(),
+    })
+    dialog.append(title, input, button)
+
+    input.value = String(value)
+    input.addEventListener("blur", function () {
+      this.focus()
+    })
+    input.addEventListener("keydown", (e: KeyboardEvent) => {
+      dialog.is_modified = true
+      if (e.key == "Escape") {
+        // ESC
+        dialog.close()
+      } else if (e.key == "Enter") {
+        // save
+        inner()
+      } else if (!e.target || !("localName" in e.target) || e.target.localName != "textarea") {
+        return
+      }
+      e.preventDefault()
+      e.stopPropagation()
+    })
+
+    const canvas = LGraphCanvas.active_canvas
+    const canvasEl = canvas.canvas
+
+    const rect = canvasEl.getBoundingClientRect()
+    const offsetx = rect ? -20 - rect.left : -20
+    const offsety = rect ? -20 - rect.top : -20
+
+    if (e) {
+      dialog.style.left = `${e.clientX + offsetx}px`
+      dialog.style.top = `${e.clientY + offsety}px`
+    } else {
+      dialog.style.left = `${canvasEl.width * 0.5 + offsetx}px`
+      dialog.style.top = `${canvasEl.height * 0.5 + offsety}px`
+    }
+
+    button.addEventListener("click", inner)
+
+    if (canvasEl.parentNode == null) throw new TypeError("canvasEl.parentNode was null")
+    canvasEl.parentNode.append(dialog)
+
+    input.focus()
+
+    let dialogCloseTimer: number
+    dialog.addEventListener("mouseleave", function () {
+      if (LiteGraph.dialog_close_on_mouse_leave) {
+        if (!dialog.is_modified && LiteGraph.dialog_close_on_mouse_leave) {
+          dialogCloseTimer = setTimeout(
+            dialog.close,
+            LiteGraph.dialog_close_on_mouse_leave_delay,
+          )
+        }
+      }
+    })
+    dialog.addEventListener("mouseenter", function () {
+      if (LiteGraph.dialog_close_on_mouse_leave) {
+        if (dialogCloseTimer) clearTimeout(dialogCloseTimer)
+      }
+    })
+
+    function inner() {
+      if (input) setValue(input.value)
+    }
+
+    function setValue(value: NodeProperty) {
+      if (item.type == "Number") {
+        value = Number(value)
+      } else if (item.type == "Boolean") {
+        value = Boolean(value)
+      }
+      // @ts-expect-error Requires refactor.
+      node[property] = value
+      dialog.remove()
+      canvas.setDirty(true, true)
+    }
+  }
+
+  static getPropertyPrintableValue(value: unknown, values: unknown[] | object | undefined): string | undefined {
+    if (!values) return String(value)
+
+    if (Array.isArray(values)) {
+      return String(value)
+    }
+
+    if (typeof values === "object") {
+      let desc_value = ""
+      for (const k in values) {
+        // @ts-expect-error deprecated #578
+        if (values[k] != value) continue
+
+        desc_value = k
+        break
+      }
+      return `${String(value)} (${desc_value})`
+    }
+  }
+
+  static onMenuNodeCollapse(
+    value: IContextMenuValue,
+    options: IContextMenuOptions,
+    e: MouseEvent,
+    menu: ContextMenu,
+    node: LGraphNode,
+  ): void {
+    if (!node.graph) throw new NullGraphError()
+
+    node.graph.beforeChange()
+
+    const fApplyMultiNode = function (node: LGraphNode) {
+      node.collapse()
+    }
+
+    const graphcanvas = LGraphCanvas.active_canvas
+    if (!graphcanvas.selected_nodes || Object.keys(graphcanvas.selected_nodes).length <= 1) {
+      fApplyMultiNode(node)
+    } else {
+      for (const i in graphcanvas.selected_nodes) {
+        fApplyMultiNode(graphcanvas.selected_nodes[i])
+      }
+    }
+
+    node.graph.afterChange()
+  }
+
+  static onMenuToggleAdvanced(
+    value: IContextMenuValue,
+    options: IContextMenuOptions,
+    e: MouseEvent,
+    menu: ContextMenu,
+    node: LGraphNode,
+  ): void {
+    if (!node.graph) throw new NullGraphError()
+
+    node.graph.beforeChange()
+    const fApplyMultiNode = function (node: LGraphNode) {
+      node.toggleAdvanced()
+    }
+
+    const graphcanvas = LGraphCanvas.active_canvas
+    if (!graphcanvas.selected_nodes || Object.keys(graphcanvas.selected_nodes).length <= 1) {
+      fApplyMultiNode(node)
+    } else {
+      for (const i in graphcanvas.selected_nodes) {
+        fApplyMultiNode(graphcanvas.selected_nodes[i])
+      }
+    }
+    node.graph.afterChange()
+  }
+
+  static onMenuNodeMode(
+    value: IContextMenuValue,
+    options: IContextMenuOptions,
+    e: MouseEvent,
+    menu: ContextMenu,
+    node: LGraphNode,
+  ): boolean {
+    new LiteGraph.ContextMenu(
+      LiteGraph.NODE_MODES,
+      { event: e, callback: inner_clicked, parentMenu: menu, node },
+    )
+
+    function inner_clicked(v: string) {
+      if (!node) return
+
+      const kV = Object.values(LiteGraph.NODE_MODES).indexOf(v)
+      const fApplyMultiNode = function (node: LGraphNode) {
+        if (kV !== -1 && LiteGraph.NODE_MODES[kV]) {
+          node.changeMode(kV)
+        } else {
+          console.warn(`unexpected mode: ${v}`)
+          node.changeMode(LGraphEventMode.ALWAYS)
+        }
+      }
+
+      const graphcanvas = LGraphCanvas.active_canvas
+      if (!graphcanvas.selected_nodes || Object.keys(graphcanvas.selected_nodes).length <= 1) {
+        fApplyMultiNode(node)
+      } else {
+        for (const i in graphcanvas.selected_nodes) {
+          fApplyMultiNode(graphcanvas.selected_nodes[i])
+        }
+      }
+    }
+
+    return false
+  }
+
+  /** @param value Parameter is never used */
+  static onMenuNodeColors(
+    value: IContextMenuValue<string | null>,
+    options: IContextMenuOptions,
+    e: MouseEvent,
+    menu: ContextMenu<string | null>,
+    node: LGraphNode,
+  ): boolean {
+    if (!node) throw "no node for color"
+
+    const values: IContextMenuValue<string | null, unknown, { value: string | null }>[] = []
+    values.push({
+      value: null,
+      content: "<span style='display: block; padding-left: 4px;'>No color</span>",
+    })
+
+    for (const i in LGraphCanvas.node_colors) {
+      const color = LGraphCanvas.node_colors[i]
+      value = {
+        value: i,
+        content: `<span style='display: block; color: #999; padding-left: 4px;` +
+          ` border-left: 8px solid ${color.color}; background-color:${color.bgcolor}'>${i}</span>`,
+      }
+      values.push(value)
+    }
+    new LiteGraph.ContextMenu<string | null>(values, {
+      event: e,
+      callback: inner_clicked,
+      parentMenu: menu,
+      node,
+    })
+
+    function inner_clicked(v: IContextMenuValue<string>) {
+      if (!node) return
+
+      const fApplyColor = function (item: IColorable) {
+        const colorOption = v.value ? LGraphCanvas.node_colors[v.value] : null
+        item.setColorOption(colorOption)
+      }
+
+      const canvas = LGraphCanvas.active_canvas
+      if (!canvas.selected_nodes || Object.keys(canvas.selected_nodes).length <= 1) {
+        fApplyColor(node)
+      } else {
+        for (const i in canvas.selected_nodes) {
+          fApplyColor(canvas.selected_nodes[i])
+        }
+      }
+      canvas.setDirty(true, true)
+    }
+
+    return false
+  }
+
+  static onMenuNodeShapes(
+    value: IContextMenuValue<typeof LiteGraph.VALID_SHAPES[number]>,
+    options: IContextMenuOptions<typeof LiteGraph.VALID_SHAPES[number]>,
+    e: MouseEvent,
+    menu?: ContextMenu<typeof LiteGraph.VALID_SHAPES[number]>,
+    node?: LGraphNode,
+  ): boolean {
+    if (!node) throw "no node passed"
+
+    new LiteGraph.ContextMenu<typeof LiteGraph.VALID_SHAPES[number]>(LiteGraph.VALID_SHAPES, {
+      event: e,
+      callback: inner_clicked,
+      parentMenu: menu,
+      node,
+    })
+
+    function inner_clicked(v: typeof LiteGraph.VALID_SHAPES[number]) {
+      if (!node) return
+      if (!node.graph) throw new NullGraphError()
+
+      node.graph.beforeChange()
+
+      const fApplyMultiNode = function (node: LGraphNode) {
+        node.shape = v
+      }
+
+      const canvas = LGraphCanvas.active_canvas
+      if (!canvas.selected_nodes || Object.keys(canvas.selected_nodes).length <= 1) {
+        fApplyMultiNode(node)
+      } else {
+        for (const i in canvas.selected_nodes) {
+          fApplyMultiNode(canvas.selected_nodes[i])
+        }
+      }
+
+      node.graph.afterChange()
+      canvas.setDirty(true)
+    }
+
+    return false
+  }
+
+  static onMenuNodeRemove(): void {
+    LGraphCanvas.active_canvas.deleteSelected()
+  }
+
+  static onMenuNodeClone(
+    value: IContextMenuValue,
+    options: IContextMenuOptions,
+    e: MouseEvent,
+    menu: ContextMenu,
+    node: LGraphNode,
+  ): void {
+    const { graph } = node
+    if (!graph) throw new NullGraphError()
+    graph.beforeChange()
+
+    const newSelected = new Set<LGraphNode>()
+
+    const fApplyMultiNode = function (node: LGraphNode, newNodes: Set<LGraphNode>): void {
+      if (node.clonable === false) return
+
+      const newnode = node.clone()
+      if (!newnode) return
+
+      newnode.pos = [node.pos[0] + 5, node.pos[1] + 5]
+      if (!node.graph) throw new NullGraphError()
+
+      node.graph.add(newnode)
+      newNodes.add(newnode)
+    }
+
+    const canvas = LGraphCanvas.active_canvas
+    if (!canvas.selected_nodes || Object.keys(canvas.selected_nodes).length <= 1) {
+      fApplyMultiNode(node, newSelected)
+    } else {
+      for (const i in canvas.selected_nodes) {
+        fApplyMultiNode(canvas.selected_nodes[i], newSelected)
+      }
+    }
+
+    if (newSelected.size) {
+      canvas.selectNodes([...newSelected])
+    }
+
+    graph.afterChange()
+
+    canvas.setDirty(true, true)
+  }
+
+  /**
+   * clears all the data inside
+   *
+   */
+  clear(): void {
+    this.frame = 0
+    this.last_draw_time = 0
+    this.render_time = 0
+    this.fps = 0
+
+    // this.scale = 1;
+    // this.offset = [0,0];
+    this.dragging_rectangle = null
+
+    this.selected_nodes = {}
+    this.selected_group = null
+    this.selectedItems.clear()
+    this.state.selectionChanged = true
+    this.onSelectionChange?.(this.selected_nodes)
+
+    this.visible_nodes = []
+    this.node_over = undefined
+    this.node_capturing_input = null
+    this.connecting_links = null
+    this.highlighted_links = {}
+
+    this.dragging_canvas = false
+
+    this.#dirty()
+    this.dirty_area = null
+
+    this.node_in_panel = null
+    this.node_widget = null
+
+    this.last_mouse = [0, 0]
+    this.last_mouseclick = 0
+    this.pointer.reset()
+    this.visible_area.set([0, 0, 0, 0])
+
+    this.onClear?.()
+  }
+
+  /**
+   * Assigns a new graph to this canvas.
+   */
+  setGraph(newGraph: LGraph | Subgraph): void {
+    const { graph } = this
+    if (newGraph === graph) return
+
+    this.clear()
+    newGraph.attachCanvas(this)
+
+    this.dispatch("litegraph:set-graph", { newGraph, oldGraph: graph })
+    this.#dirty()
+  }
+
+  openSubgraph(subgraph: Subgraph): void {
+    const { graph } = this
+    if (!graph) throw new NullGraphError()
+
+    const options = { bubbles: true, detail: { subgraph, closingGraph: graph }, cancelable: true }
+    const mayContinue = this.canvas.dispatchEvent(new CustomEvent("subgraph-opening", options))
+    if (!mayContinue) return
+
+    this.clear()
+    this.subgraph = subgraph
+    this.setGraph(subgraph)
+
+    this.canvas.dispatchEvent(new CustomEvent("subgraph-opened", options))
+  }
+
+  /**
+   * @returns the visually active graph (in case there are more in the stack)
+   */
+  getCurrentGraph(): LGraph | null {
+    return this.graph
+  }
+
+  /**
+   * Finds the canvas if required, throwing on failure.
+   * @param canvas Canvas element, or its element ID
+   * @returns The canvas element
+   * @throws If {@link canvas} is an element ID that does not belong to a valid HTML canvas element
+   */
+  #validateCanvas(
+    canvas: string | HTMLCanvasElement,
+  ): HTMLCanvasElement & { data?: LGraphCanvas } {
+    if (typeof canvas === "string") {
+      const el = document.getElementById(canvas)
+      if (!(el instanceof HTMLCanvasElement)) throw "Error validating LiteGraph canvas: Canvas element not found"
+      return el
+    }
+    return canvas
+  }
+
+  /**
+   * Sets the current HTML canvas element.
+   * Calls bindEvents to add input event listeners, and (re)creates the background canvas.
+   * @param canvas The canvas element to assign, or its HTML element ID.  If null or undefined, the current reference is cleared.
+   * @param skip_events If true, events on the previous canvas will not be removed.  Has no effect on the first invocation.
+   */
+  setCanvas(canvas: string | HTMLCanvasElement, skip_events?: boolean) {
+    const element = this.#validateCanvas(canvas)
+    if (element === this.canvas) return
+    // maybe detach events from old_canvas
+    if (!element && this.canvas && !skip_events) this.unbindEvents()
+
+    this.canvas = element
+    this.ds.element = element
+    this.pointer.element = element
+
+    if (!element) return
+
+    // TODO: classList.add
+    element.className += " lgraphcanvas"
+    element.data = this
+
+    // Background canvas: To render objects behind nodes (background, links, groups)
+    this.bgcanvas = document.createElement("canvas")
+    this.bgcanvas.width = this.canvas.width
+    this.bgcanvas.height = this.canvas.height
+
+    const ctx = element.getContext?.("2d")
+    if (ctx == null) {
+      if (element.localName != "canvas") {
+        throw `Element supplied for LGraphCanvas must be a <canvas> element, you passed a ${element.localName}`
+      }
+      throw "This browser doesn't support Canvas"
+    }
+    this.ctx = ctx
+
+    if (!skip_events) this.bindEvents()
+  }
+
+  /** Captures an event and prevents default - returns false. */
+  _doNothing(e: Event): boolean {
+    // console.log("pointerevents: _doNothing "+e.type);
+    e.preventDefault()
+    return false
+  }
+
+  /** Captures an event and prevents default - returns true. */
+  _doReturnTrue(e: Event): boolean {
+    e.preventDefault()
+    return true
+  }
+
+  /**
+   * binds mouse, keyboard, touch and drag events to the canvas
+   */
+  bindEvents(): void {
+    if (this._events_binded) {
+      console.warn("LGraphCanvas: events already binded")
+      return
+    }
+
+    const { canvas } = this
+    // hack used when moving canvas between windows
+    const { document } = this.getCanvasWindow()
+
+    this._mousedown_callback = this.processMouseDown.bind(this)
+    this._mousewheel_callback = this.processMouseWheel.bind(this)
+    this._mousemove_callback = this.processMouseMove.bind(this)
+    this._mouseup_callback = this.processMouseUp.bind(this)
+    this._mouseout_callback = this.processMouseOut.bind(this)
+    this._mousecancel_callback = this.processMouseCancel.bind(this)
+
+    canvas.addEventListener("pointerdown", this._mousedown_callback, true)
+    canvas.addEventListener("wheel", this._mousewheel_callback, false)
+
+    canvas.addEventListener("pointerup", this._mouseup_callback, true)
+    canvas.addEventListener("pointermove", this._mousemove_callback)
+    canvas.addEventListener("pointerout", this._mouseout_callback)
+    canvas.addEventListener("pointercancel", this._mousecancel_callback, true)
+
+    canvas.addEventListener("contextmenu", this._doNothing)
+
+    // Keyboard
+    this._key_callback = this.processKey.bind(this)
+
+    canvas.addEventListener("keydown", this._key_callback, true)
+    // keyup event must be bound on the document
+    document.addEventListener("keyup", this._key_callback, true)
+
+    canvas.addEventListener("dragover", this._doNothing, false)
+    canvas.addEventListener("dragend", this._doNothing, false)
+    canvas.addEventListener("dragenter", this._doReturnTrue, false)
+
+    this._events_binded = true
+  }
+
+  /**
+   * unbinds mouse events from the canvas
+   */
+  unbindEvents(): void {
+    if (!this._events_binded) {
+      console.warn("LGraphCanvas: no events binded")
+      return
+    }
+
+    // console.log("pointerevents: unbindEvents");
+    const { document } = this.getCanvasWindow()
+    const { canvas } = this
+
+    // Assertions: removing nullish is fine.
+    canvas.removeEventListener("pointercancel", this._mousecancel_callback!)
+    canvas.removeEventListener("pointerout", this._mouseout_callback!)
+    canvas.removeEventListener("pointermove", this._mousemove_callback!)
+    canvas.removeEventListener("pointerup", this._mouseup_callback!)
+    canvas.removeEventListener("pointerdown", this._mousedown_callback!)
+    canvas.removeEventListener("wheel", this._mousewheel_callback!)
+    canvas.removeEventListener("keydown", this._key_callback!)
+    document.removeEventListener("keyup", this._key_callback!)
+    canvas.removeEventListener("contextmenu", this._doNothing)
+    canvas.removeEventListener("dragenter", this._doReturnTrue)
+
+    this._mousedown_callback = undefined
+    this._mousewheel_callback = undefined
+    this._key_callback = undefined
+
+    this._events_binded = false
+  }
+
+  /**
+   * Ensures the canvas will be redrawn on the next frame by setting the dirty flag(s).
+   * Without parameters, this function does nothing.
+   * @todo Impl. `setDirty()` or similar as shorthand to redraw everything.
+   * @param fgcanvas If true, marks the foreground canvas as dirty (nodes and anything drawn on top of them).  Default: false
+   * @param bgcanvas If true, mark the background canvas as dirty (background, groups, links).  Default: false
+   */
+  setDirty(fgcanvas: boolean, bgcanvas?: boolean): void {
+    if (fgcanvas) this.dirty_canvas = true
+    if (bgcanvas) this.dirty_bgcanvas = true
+  }
+
+  /** Marks the entire canvas as dirty. */
+  #dirty(): void {
+    this.dirty_canvas = true
+    this.dirty_bgcanvas = true
+  }
+
+  #linkConnectorDrop(): void {
+    const { graph, linkConnector, pointer } = this
+    if (!graph) throw new NullGraphError()
+
+    pointer.onDragEnd = upEvent => linkConnector.dropLinks(graph, upEvent)
+    pointer.finally = () => this.linkConnector.reset(true)
+  }
+
+  /**
+   * Used to attach the canvas in a popup
+   * @returns returns the window where the canvas is attached (the DOM root node)
+   */
+  getCanvasWindow(): Window {
+    if (!this.canvas) return window
+
+    const doc = this.canvas.ownerDocument
+    // @ts-expect-error Check if required
+    return doc.defaultView || doc.parentWindow
+  }
+
+  /**
+   * starts rendering the content of the canvas when needed
+   *
+   */
+  startRendering(): void {
+    // already rendering
+    if (this.is_rendering) return
+
+    this.is_rendering = true
+    renderFrame.call(this)
+
+    /** Render loop */
+    function renderFrame(this: LGraphCanvas) {
+      if (!this.pause_rendering) {
+        this.draw()
+      }
+
+      const window = this.getCanvasWindow()
+      if (this.is_rendering) {
+        if (this.#maximumFrameGap > 0) {
+          // Manual FPS limit
+          const gap = this.#maximumFrameGap - (LiteGraph.getTime() - this.last_draw_time)
+          setTimeout(renderFrame.bind(this), Math.max(1, gap))
+        } else {
+          // FPS limited by refresh rate
+          window.requestAnimationFrame(renderFrame.bind(this))
+        }
+      }
+    }
+  }
+
+  /**
+   * stops rendering the content of the canvas (to save resources)
+   *
+   */
+  stopRendering(): void {
+    this.is_rendering = false
+    /*
+    if(this.rendering_timer_id)
+    {
+        clearInterval(this.rendering_timer_id);
+        this.rendering_timer_id = null;
+    }
+    */
+  }
+
+  /* LiteGraphCanvas input */
+  // used to block future mouse events (because of im gui)
+  blockClick(): void {
+    this.block_click = true
+    this.last_mouseclick = 0
+  }
+
+  /**
+   * Gets the widget at the current cursor position.
+   * @param node Optional node to check for widgets under cursor
+   * @returns The widget located at the current cursor position, if any is found.
+   * @deprecated Use {@link LGraphNode.getWidgetOnPos} instead.
+   * ```ts
+   * const [x, y] = canvas.graph_mouse
+   * const widget = canvas.node_over?.getWidgetOnPos(x, y, true)
+   * ```
+   */
+  getWidgetAtCursor(node?: LGraphNode): IBaseWidget | undefined {
+    node ??= this.node_over
+    return node?.getWidgetOnPos(this.graph_mouse[0], this.graph_mouse[1], true)
+  }
+
+  /**
+   * Clears highlight and mouse-over information from nodes that should not have it.
+   *
+   * Intended to be called when the pointer moves away from a node.
+   * @param node The node that the mouse is now over
+   * @param e MouseEvent that is triggering this
+   */
+  updateMouseOverNodes(node: LGraphNode | null, e: CanvasMouseEvent): void {
+    if (!this.graph) throw new NullGraphError()
+
+    const { pointer } = this
+    const nodes = this.graph._nodes
+    for (const otherNode of nodes) {
+      if (otherNode.mouseOver && node != otherNode) {
+        // mouse leave
+        if (!pointer.eDown) pointer.resizeDirection = undefined
+        otherNode.mouseOver = undefined
+        this._highlight_input = undefined
+        this._highlight_pos = undefined
+        this.linkConnector.overWidget = undefined
+
+        // Hover transitions
+        // TODO: Implement single lerp ease factor for current progress on hover in/out.
+        // In drawNode, multiply by ease factor and differential value (e.g. bg alpha +0.5).
+        otherNode.lostFocusAt = LiteGraph.getTime()
+
+        this.node_over?.onMouseLeave?.(e)
+        this.node_over = undefined
+        this.dirty_canvas = true
+      }
+    }
+  }
+
+  processMouseDown(e: PointerEvent): void {
+    if (this.dragZoomEnabled && e.ctrlKey && e.shiftKey && !e.altKey && e.buttons) {
+      this.#dragZoomStart = { pos: [e.x, e.y], scale: this.ds.scale }
+      return
+    }
+
+    const { graph, pointer } = this
+    this.adjustMouseEvent(e)
+    if (e.isPrimary) pointer.down(e)
+
+    if (this.set_canvas_dirty_on_mouse_event) this.dirty_canvas = true
+
+    if (!graph) return
+
+    const ref_window = this.getCanvasWindow()
+    LGraphCanvas.active_canvas = this
+
+    const x = e.clientX
+    const y = e.clientY
+    this.ds.viewport = this.viewport
+    const is_inside = !this.viewport || isInRect(x, y, this.viewport)
+
+    if (!is_inside) return
+
+    const node = graph.getNodeOnPos(e.canvasX, e.canvasY, this.visible_nodes) ?? undefined
+
+    this.mouse[0] = x
+    this.mouse[1] = y
+    this.graph_mouse[0] = e.canvasX
+    this.graph_mouse[1] = e.canvasY
+    this.last_click_position = [this.mouse[0], this.mouse[1]]
+
+    pointer.isDouble = pointer.isDown && e.isPrimary
+    pointer.isDown = true
+
+    this.canvas.focus()
+
+    LiteGraph.closeAllContextMenus(ref_window)
+
+    if (this.onMouse?.(e) == true) return
+
+    // left button mouse / single finger
+    if (e.button === 0 && !pointer.isDouble) {
+      this.#processPrimaryButton(e, node)
+    } else if (e.button === 1) {
+      this.#processMiddleButton(e, node)
+    } else if (
+      (e.button === 2 || pointer.isDouble) &&
+      this.allow_interaction &&
+      !this.read_only
+    ) {
+      // Right / aux button
+      const { linkConnector, subgraph } = this
+
+      // Sticky select - won't remove single nodes
+      if (subgraph?.inputNode.containsPoint(this.graph_mouse)) {
+        // Subgraph input node
+        this.processSelect(subgraph.inputNode, e, true)
+        subgraph.inputNode.onPointerDown(e, pointer, linkConnector)
+      } else if (subgraph?.outputNode.containsPoint(this.graph_mouse)) {
+        // Subgraph output node
+        this.processSelect(subgraph.outputNode, e, true)
+        subgraph.outputNode.onPointerDown(e, pointer, linkConnector)
+      } else {
+        if (node) {
+          this.processSelect(node, e, true)
+        } else if (this.links_render_mode !== LinkRenderType.HIDDEN_LINK) {
+        // Reroutes
+          const reroute = graph.getRerouteOnPos(e.canvasX, e.canvasY, this.#visibleReroutes)
+          if (reroute) {
+            if (e.altKey) {
+              pointer.onClick = (upEvent) => {
+                if (upEvent.altKey) {
+                // Ensure deselected
+                  if (reroute.selected) {
+                    this.deselect(reroute)
+                    this.onSelectionChange?.(this.selected_nodes)
+                  }
+                  reroute.remove()
+                }
+              }
+            } else {
+              this.processSelect(reroute, e, true)
+            }
+          }
+        }
+
+        // Show context menu for the node or group under the pointer
+        pointer.onClick ??= () => this.processContextMenu(node, e)
+      }
+    }
+
+    this.last_mouse = [x, y]
+    this.last_mouseclick = LiteGraph.getTime()
+    this.last_mouse_dragging = true
+
+    graph.change()
+
+    // this is to ensure to defocus(blur) if a text input element is on focus
+    if (
+      !ref_window.document.activeElement ||
+      (ref_window.document.activeElement.nodeName.toLowerCase() != "input" &&
+        ref_window.document.activeElement.nodeName.toLowerCase() != "textarea")
+    ) {
+      e.preventDefault()
+    }
+    e.stopPropagation()
+
+    this.onMouseDown?.(e)
+  }
+
+  /**
+   * Returns the first matching positionable item at the given co-ordinates.
+   *
+   * Order of preference:
+   * - Subgraph IO Nodes
+   * - Reroutes
+   * - Group titlebars
+   * @param x The x coordinate in canvas space
+   * @param y The y coordinate in canvas space
+   * @returns The positionable item or undefined
+   */
+  #getPositionableOnPos(x: number, y: number): Positionable | undefined {
+    const ioNode = this.subgraph?.getIoNodeOnPos(x, y)
+    if (ioNode) return ioNode
+
+    for (const reroute of this.#visibleReroutes) {
+      if (reroute.containsPoint([x, y])) return reroute
+    }
+
+    return this.graph?.getGroupTitlebarOnPos(x, y)
+  }
+
+  #processPrimaryButton(e: CanvasPointerEvent, node: LGraphNode | undefined) {
+    const { pointer, graph, linkConnector, subgraph } = this
+    if (!graph) throw new NullGraphError()
+
+    const x = e.canvasX
+    const y = e.canvasY
+
+    // Modifiers
+    const ctrlOrMeta = e.ctrlKey || e.metaKey
+
+    // Multi-select drag rectangle
+    if (ctrlOrMeta && !e.altKey) {
+      const dragRect = new Float32Array(4)
+      dragRect[0] = x
+      dragRect[1] = y
+      dragRect[2] = 1
+      dragRect[3] = 1
+
+      pointer.onClick = (eUp) => {
+        // Click, not drag
+        const clickedItem = node ?? this.#getPositionableOnPos(eUp.canvasX, eUp.canvasY)
+        this.processSelect(clickedItem, eUp)
+      }
+      pointer.onDragStart = () => this.dragging_rectangle = dragRect
+      pointer.onDragEnd = upEvent => this.#handleMultiSelect(upEvent, dragRect)
+      pointer.finally = () => this.dragging_rectangle = null
+      return
+    }
+
+    if (this.read_only) {
+      pointer.finally = () => this.dragging_canvas = false
+      this.dragging_canvas = true
+      return
+    }
+
+    // clone node ALT dragging
+    if (LiteGraph.alt_drag_do_clone_nodes && e.altKey && !e.ctrlKey && node && this.allow_interaction) {
+      const node_data = node.clone()?.serialize()
+      if (node_data?.type != null) {
+        const cloned = LiteGraph.createNode(node_data.type)
+        if (cloned) {
+          cloned.configure(node_data)
+          cloned.pos[0] += 5
+          cloned.pos[1] += 5
+
+          if (this.allow_dragnodes) {
+            pointer.onDragStart = (pointer) => {
+              graph.add(cloned, false)
+              this.#startDraggingItems(cloned, pointer)
+            }
+            pointer.onDragEnd = e => this.#processDraggedItems(e)
+          } else {
+          // TODO: Check if before/after change are necessary here.
+            graph.beforeChange()
+            graph.add(cloned, false)
+            graph.afterChange()
+          }
+
+          return
+        }
+      }
+    }
+
+    // Node clicked
+    if (node && (this.allow_interaction || node.flags.allow_interaction)) {
+      this.#processNodeClick(e, ctrlOrMeta, node)
+    } else {
+      // Subgraph IO nodes
+      if (subgraph) {
+        const { inputNode, outputNode } = subgraph
+
+        if (processSubgraphIONode(this, inputNode)) return
+        if (processSubgraphIONode(this, outputNode)) return
+
+        function processSubgraphIONode(canvas: LGraphCanvas, ioNode: SubgraphInputNode | SubgraphOutputNode) {
+          if (!ioNode.containsPoint([x, y])) return false
+
+          ioNode.onPointerDown(e, pointer, linkConnector)
+          pointer.onClick ??= () => canvas.processSelect(ioNode, e)
+          pointer.onDragStart ??= () => canvas.#startDraggingItems(ioNode, pointer, true)
+          pointer.onDragEnd ??= eUp => canvas.#processDraggedItems(eUp)
+          return true
+        }
+      }
+
+      // Reroutes
+      if (this.links_render_mode !== LinkRenderType.HIDDEN_LINK) {
+        for (const reroute of this.#visibleReroutes) {
+          const overReroute = reroute.containsPoint([x, y])
+          if (!reroute.isSlotHovered && !overReroute) continue
+
+          if (overReroute) {
+            pointer.onClick = () => this.processSelect(reroute, e)
+            if (!e.shiftKey) {
+              pointer.onDragStart = pointer => this.#startDraggingItems(reroute, pointer, true)
+              pointer.onDragEnd = e => this.#processDraggedItems(e)
+            }
+          }
+
+          if (reroute.isOutputHovered || (overReroute && e.shiftKey)) {
+            linkConnector.dragFromReroute(graph, reroute)
+            this.#linkConnectorDrop()
+          }
+
+          if (reroute.isInputHovered) {
+            linkConnector.dragFromRerouteToOutput(graph, reroute)
+            this.#linkConnectorDrop()
+          }
+
+          reroute.hideSlots()
+          this.dirty_bgcanvas = true
+          return
+        }
+      }
+
+      // Links - paths of links & reroutes
+      // Set the width of the line for isPointInStroke checks
+      const { lineWidth } = this.ctx
+      this.ctx.lineWidth = this.connections_width + 7
+      const dpi = window?.devicePixelRatio || 1
+
+      for (const linkSegment of this.renderedPaths) {
+        const centre = linkSegment._pos
+        if (!centre) continue
+
+        // If we shift click on a link then start a link from that input
+        if (
+          (e.shiftKey || e.altKey) &&
+          linkSegment.path &&
+          this.ctx.isPointInStroke(linkSegment.path, x * dpi, y * dpi)
+        ) {
+          this.ctx.lineWidth = lineWidth
+
+          if (e.shiftKey && !e.altKey) {
+            linkConnector.dragFromLinkSegment(graph, linkSegment)
+            this.#linkConnectorDrop()
+
+            return
+          } else if (e.altKey && !e.shiftKey) {
+            const newReroute = graph.createReroute([x, y], linkSegment)
+            pointer.onDragStart = pointer => this.#startDraggingItems(newReroute, pointer)
+            pointer.onDragEnd = e => this.#processDraggedItems(e)
+            return
+          }
+        } else if (isInRectangle(x, y, centre[0] - 4, centre[1] - 4, 8, 8)) {
+          this.ctx.lineWidth = lineWidth
+
+          pointer.onClick = () => this.showLinkMenu(linkSegment, e)
+          pointer.onDragStart = () => this.dragging_canvas = true
+          pointer.finally = () => this.dragging_canvas = false
+
+          // clear tooltip
+          this.over_link_center = undefined
+          return
+        }
+      }
+
+      // Restore line width
+      this.ctx.lineWidth = lineWidth
+
+      // Groups
+      const group = graph.getGroupOnPos(x, y)
+      this.selected_group = group ?? null
+      if (group) {
+        if (group.isInResize(x, y)) {
+          // Resize group
+          const b = group.boundingRect
+          const offsetX = x - (b[0] + b[2])
+          const offsetY = y - (b[1] + b[3])
+
+          pointer.onDragStart = () => this.resizingGroup = group
+          pointer.onDrag = (eMove) => {
+            if (this.read_only) return
+
+            // Resize only by the exact pointer movement
+            const pos: Point = [
+              eMove.canvasX - group.pos[0] - offsetX,
+              eMove.canvasY - group.pos[1] - offsetY,
+            ]
+            // Unless snapping.
+            if (this.#snapToGrid) snapPoint(pos, this.#snapToGrid)
+
+            const resized = group.resize(pos[0], pos[1])
+            if (resized) this.dirty_bgcanvas = true
+          }
+          pointer.finally = () => this.resizingGroup = null
+        } else {
+          const f = group.font_size || LiteGraph.DEFAULT_GROUP_FONT_SIZE
+          const headerHeight = f * 1.4
+          if (
+            isInRectangle(
+              x,
+              y,
+              group.pos[0],
+              group.pos[1],
+              group.size[0],
+              headerHeight,
+            )
+          ) {
+            // In title bar
+            pointer.onClick = () => this.processSelect(group, e)
+            pointer.onDragStart = (pointer) => {
+              group.recomputeInsideNodes()
+              this.#startDraggingItems(group, pointer, true)
+            }
+            pointer.onDragEnd = e => this.#processDraggedItems(e)
+          }
+        }
+
+        pointer.onDoubleClick = () => {
+          this.emitEvent({
+            subType: "group-double-click",
+            originalEvent: e,
+            group,
+          })
+        }
+      } else {
+        pointer.onDoubleClick = () => {
+          // Double click within group should not trigger the searchbox.
+          if (this.allow_searchbox) {
+            this.showSearchBox(e)
+            e.preventDefault()
+          }
+          this.emitEvent({
+            subType: "empty-double-click",
+            originalEvent: e,
+          })
+        }
+      }
+    }
+
+    if (
+      !pointer.onDragStart &&
+      !pointer.onClick &&
+      !pointer.onDrag &&
+      this.allow_dragcanvas
+    ) {
+      pointer.onClick = () => this.processSelect(null, e)
+      pointer.finally = () => this.dragging_canvas = false
+      this.dragging_canvas = true
+    }
+  }
+
+  /**
+   * Processes a pointerdown event inside the bounds of a node.  Part of {@link processMouseDown}.
+   * @param e The pointerdown event
+   * @param ctrlOrMeta Ctrl or meta key is pressed
+   * @param node The node to process a click event for
+   */
+  #processNodeClick(
+    e: CanvasPointerEvent,
+    ctrlOrMeta: boolean,
+    node: LGraphNode,
+  ): void {
+    const { pointer, graph, linkConnector } = this
+    if (!graph) throw new NullGraphError()
+
+    const x = e.canvasX
+    const y = e.canvasY
+
+    pointer.onClick = () => this.processSelect(node, e)
+
+    // Immediately bring to front
+    if (!node.flags.pinned) {
+      this.bringToFront(node)
+    }
+
+    // Collapse toggle
+    const inCollapse = node.isPointInCollapse(x, y)
+    if (inCollapse) {
+      pointer.onClick = () => {
+        node.collapse()
+        this.setDirty(true, true)
+      }
+    } else if (!node.flags.collapsed) {
+      const { inputs, outputs } = node
+
+      // Outputs
+      if (outputs) {
+        for (const [i, output] of outputs.entries()) {
+          const link_pos = node.getOutputPos(i)
+          if (isInRectangle(x, y, link_pos[0] - 15, link_pos[1] - 10, 30, 20)) {
+            // Drag multiple output links
+            if (e.shiftKey && (output.links?.length || output._floatingLinks?.size)) {
+              linkConnector.moveOutputLink(graph, output)
+              this.#linkConnectorDrop()
+              return
+            }
+
+            // New output link
+            linkConnector.dragNewFromOutput(graph, node, output)
+            this.#linkConnectorDrop()
+
+            if (LiteGraph.shift_click_do_break_link_from) {
+              if (e.shiftKey) {
+                node.disconnectOutput(i)
+              }
+            } else if (LiteGraph.ctrl_alt_click_do_break_link) {
+              if (ctrlOrMeta && e.altKey && !e.shiftKey) {
+                node.disconnectOutput(i)
+              }
+            }
+
+            // TODO: Move callbacks to the start of this closure (onInputClick is already correct).
+            pointer.onDoubleClick = () => node.onOutputDblClick?.(i, e)
+            pointer.onClick = () => node.onOutputClick?.(i, e)
+
+            return
+          }
+        }
+      }
+
+      // Inputs
+      if (inputs) {
+        for (const [i, input] of inputs.entries()) {
+          const link_pos = node.getInputPos(i)
+          const isInSlot = input instanceof NodeInputSlot
+            ? isInRect(x, y, input.boundingRect)
+            : isInRectangle(x, y, link_pos[0] - 15, link_pos[1] - 10, 30, 20)
+
+          if (isInSlot) {
+            pointer.onDoubleClick = () => node.onInputDblClick?.(i, e)
+            pointer.onClick = () => node.onInputClick?.(i, e)
+
+            const shouldBreakLink = LiteGraph.ctrl_alt_click_do_break_link &&
+              ctrlOrMeta &&
+              e.altKey &&
+              !e.shiftKey
+            if (input.link !== null || input._floatingLinks?.size) {
+              // Existing link
+              if (shouldBreakLink || LiteGraph.click_do_break_link_to) {
+                node.disconnectInput(i, true)
+              } else if (e.shiftKey || this.allow_reconnect_links) {
+                linkConnector.moveInputLink(graph, input)
+              }
+            }
+
+            // Dragging a new link from input to output
+            if (!linkConnector.isConnecting) {
+              linkConnector.dragNewFromInput(graph, node, input)
+            }
+
+            this.#linkConnectorDrop()
+            this.dirty_bgcanvas = true
+
+            return
+          }
+        }
+      }
+    }
+
+    // Click was inside the node, but not on input/output, or resize area
+    const pos: Point = [x - node.pos[0], y - node.pos[1]]
+
+    // Widget
+    const widget = node.getWidgetOnPos(x, y)
+    if (widget) {
+      this.#processWidgetClick(e, node, widget)
+      this.node_widget = [node, widget]
+    } else {
+      // Node background
+      pointer.onDoubleClick = () => {
+        // Double-click
+        // Check if it's a double click on the title bar
+        // Note: pos[1] is the y-coordinate of the node's body
+        // If clicking on node header (title), pos[1] is negative
+        if (pos[1] < 0 && !inCollapse) {
+          node.onNodeTitleDblClick?.(e, pos, this)
+        } else if (node instanceof SubgraphNode) {
+          this.openSubgraph(node.subgraph)
+        }
+
+        node.onDblClick?.(e, pos, this)
+        this.emitEvent({
+          subType: "node-double-click",
+          originalEvent: e,
+          node,
+        })
+        this.processNodeDblClicked(node)
+      }
+
+      // Mousedown callback - can block drag
+      if (node.onMouseDown?.(e, pos, this) || !this.allow_dragnodes)
+        return
+
+      // Check for resize AFTER checking all other interaction areas
+      if (!node.flags.collapsed) {
+        const resizeDirection = node.findResizeDirection(x, y)
+        if (resizeDirection) {
+          pointer.resizeDirection = resizeDirection
+          const startBounds = new Rectangle(node.pos[0], node.pos[1], node.size[0], node.size[1])
+
+          pointer.onDragStart = () => {
+            graph.beforeChange()
+            this.resizing_node = node
+          }
+
+          pointer.onDrag = (eMove) => {
+            if (this.read_only) return
+
+            const deltaX = eMove.canvasX - x
+            const deltaY = eMove.canvasY - y
+
+            const newBounds = new Rectangle(startBounds.x, startBounds.y, startBounds.width, startBounds.height)
+
+            // Handle resize based on the direction
+            switch (resizeDirection) {
+            case "NE": // North-East (top-right)
+              newBounds.y = startBounds.y + deltaY
+              newBounds.width = startBounds.width + deltaX
+              newBounds.height = startBounds.height - deltaY
+              break
+            case "SE": // South-East (bottom-right)
+              newBounds.width = startBounds.width + deltaX
+              newBounds.height = startBounds.height + deltaY
+              break
+            case "SW": // South-West (bottom-left)
+              newBounds.x = startBounds.x + deltaX
+              newBounds.width = startBounds.width - deltaX
+              newBounds.height = startBounds.height + deltaY
+              break
+            case "NW": // North-West (top-left)
+              newBounds.x = startBounds.x + deltaX
+              newBounds.y = startBounds.y + deltaY
+              newBounds.width = startBounds.width - deltaX
+              newBounds.height = startBounds.height - deltaY
+              break
+            }
+
+            // Apply snapping to position changes
+            if (this.#snapToGrid) {
+              if (resizeDirection.includes("N") || resizeDirection.includes("W")) {
+                const originalX = newBounds.x
+                const originalY = newBounds.y
+
+                snapPoint(newBounds.pos, this.#snapToGrid)
+
+                // Adjust size to compensate for snapped position
+                if (resizeDirection.includes("N")) {
+                  newBounds.height += originalY - newBounds.y
+                }
+                if (resizeDirection.includes("W")) {
+                  newBounds.width += originalX - newBounds.x
+                }
+              }
+
+              snapPoint(newBounds.size, this.#snapToGrid)
+            }
+
+            // Apply snapping to size changes
+
+            // Enforce minimum size
+            const min = node.computeSize()
+            if (newBounds.width < min[0]) {
+              // If resizing from left, adjust position to maintain right edge
+              if (resizeDirection.includes("W")) {
+                newBounds.x = startBounds.x + startBounds.width - min[0]
+              }
+              newBounds.width = min[0]
+            }
+            if (newBounds.height < min[1]) {
+              // If resizing from top, adjust position to maintain bottom edge
+              if (resizeDirection.includes("N")) {
+                newBounds.y = startBounds.y + startBounds.height - min[1]
+              }
+              newBounds.height = min[1]
+            }
+
+            node.pos = newBounds.pos
+            node.setSize(newBounds.size)
+
+            this.#dirty()
+          }
+
+          pointer.onDragEnd = () => {
+            this.#dirty()
+            graph.afterChange(node)
+          }
+          pointer.finally = () => {
+            this.resizing_node = null
+            pointer.resizeDirection = undefined
+          }
+
+          // Set appropriate cursor for resize direction
+          this.canvas.style.cursor = cursors[resizeDirection]
+          return
+        }
+      }
+
+      // Drag node
+      pointer.onDragStart = pointer => this.#startDraggingItems(node, pointer, true)
+      pointer.onDragEnd = e => this.#processDraggedItems(e)
+    }
+
+    this.dirty_canvas = true
+  }
+
+  #processWidgetClick(e: CanvasPointerEvent, node: LGraphNode, widget: IBaseWidget) {
+    const { pointer } = this
+
+    // Custom widget - CanvasPointer
+    if (typeof widget.onPointerDown === "function") {
+      const handled = widget.onPointerDown(pointer, node, this)
+      if (handled) return
+    }
+
+    const oldValue = widget.value
+
+    const pos = this.graph_mouse
+    const x = pos[0] - node.pos[0]
+    const y = pos[1] - node.pos[1]
+
+    const widgetInstance = toConcreteWidget(widget, node, false)
+    if (widgetInstance) {
+      pointer.onClick = () => widgetInstance.onClick({
+        e,
+        node,
+        canvas: this,
+      })
+      pointer.onDrag = eMove => widgetInstance.onDrag?.({
+        e: eMove,
+        node,
+        canvas: this,
+      })
+    } else if (widget.mouse) {
+      const result = widget.mouse(e, [x, y], node)
+      if (result != null) this.dirty_canvas = result
+    }
+
+    // value changed
+    if (oldValue != widget.value) {
+      node.onWidgetChanged?.(widget.name, widget.value, oldValue, widget)
+      if (!node.graph) throw new NullGraphError()
+      node.graph._version++
+    }
+
+    // Clean up state var
+    pointer.finally = () => {
+      // Legacy custom widget callback
+      if (widget.mouse) {
+        const { eUp } = pointer
+        if (!eUp) return
+        const { canvasX, canvasY } = eUp
+        widget.mouse(eUp, [canvasX - node.pos[0], canvasY - node.pos[1]], node)
+      }
+
+      this.node_widget = null
+    }
+  }
+
+  /**
+   * Pointer middle button click processing.  Part of {@link processMouseDown}.
+   * @param e The pointerdown event
+   * @param node The node to process a click event for
+   */
+  #processMiddleButton(e: CanvasPointerEvent, node: LGraphNode | undefined) {
+    const { pointer } = this
+
+    if (
+      LiteGraph.middle_click_slot_add_default_node &&
+      node &&
+      this.allow_interaction &&
+      !this.read_only &&
+      !this.connecting_links &&
+      !node.flags.collapsed
+    ) {
+      // not dragging mouse to connect two slots
+      let mClikSlot: INodeSlot | false = false
+      let mClikSlot_index: number | false = false
+      let mClikSlot_isOut: boolean = false
+      const { inputs, outputs } = node
+
+      // search for outputs
+      if (outputs) {
+        for (const [i, output] of outputs.entries()) {
+          const link_pos = node.getOutputPos(i)
+          if (isInRectangle(e.canvasX, e.canvasY, link_pos[0] - 15, link_pos[1] - 10, 30, 20)) {
+            mClikSlot = output
+            mClikSlot_index = i
+            mClikSlot_isOut = true
+            break
+          }
+        }
+      }
+
+      // search for inputs
+      if (inputs) {
+        for (const [i, input] of inputs.entries()) {
+          const link_pos = node.getInputPos(i)
+          if (isInRectangle(e.canvasX, e.canvasY, link_pos[0] - 15, link_pos[1] - 10, 30, 20)) {
+            mClikSlot = input
+            mClikSlot_index = i
+            mClikSlot_isOut = false
+            break
+          }
+        }
+      }
+      // Middle clicked a slot
+      if (mClikSlot && mClikSlot_index !== false) {
+        const alphaPosY =
+          0.5 -
+          (mClikSlot_index + 1) /
+          (mClikSlot_isOut ? outputs.length : inputs.length)
+        const node_bounding = node.getBounding()
+        // estimate a position: this is a bad semi-bad-working mess .. REFACTOR with
+        // a correct autoplacement that knows about the others slots and nodes
+        const posRef: Point = [
+          !mClikSlot_isOut
+            ? node_bounding[0]
+            : node_bounding[0] + node_bounding[2],
+          e.canvasY - 80,
+        ]
+
+        pointer.onClick = () => this.createDefaultNodeForSlot({
+          nodeFrom: !mClikSlot_isOut ? null : node,
+          slotFrom: !mClikSlot_isOut ? null : mClikSlot_index,
+          nodeTo: !mClikSlot_isOut ? node : null,
+          slotTo: !mClikSlot_isOut ? mClikSlot_index : null,
+          position: posRef,
+          nodeType: "AUTO",
+          posAdd: [!mClikSlot_isOut ? -30 : 30, -alphaPosY * 130],
+          posSizeFix: [!mClikSlot_isOut ? -1 : 0, 0],
+        })
+      }
+    }
+
+    // Drag canvas using middle mouse button
+    if (this.allow_dragcanvas) {
+      pointer.onDragStart = () => this.dragging_canvas = true
+      pointer.finally = () => this.dragging_canvas = false
+    }
+  }
+
+  #processDragZoom(e: PointerEvent): void {
+    // stop canvas zoom action
+    if (!e.buttons) {
+      this.#dragZoomStart = null
+      return
+    }
+
+    const start = this.#dragZoomStart
+    if (!start) throw new TypeError("Drag-zoom state object was null")
+    if (!this.graph) throw new NullGraphError()
+
+    // calculate delta
+    const deltaY = e.y - start.pos[1]
+    const startScale = start.scale
+
+    const scale = startScale - deltaY / 100
+
+    this.ds.changeScale(scale, start.pos)
+    this.graph.change()
+  }
+
+  /**
+   * Called when a mouse move event has to be processed
+   */
+  processMouseMove(e: PointerEvent): void {
+    if (this.dragZoomEnabled && e.ctrlKey && e.shiftKey && this.#dragZoomStart) {
+      this.#processDragZoom(e)
+      return
+    }
+
+    if (this.autoresize) this.resize()
+
+    if (this.set_canvas_dirty_on_mouse_event) this.dirty_canvas = true
+
+    const { graph, resizingGroup, linkConnector, pointer, subgraph } = this
+    if (!graph) return
+
+    LGraphCanvas.active_canvas = this
+    this.adjustMouseEvent(e)
+    const mouse: ReadOnlyPoint = [e.clientX, e.clientY]
+    this.mouse[0] = mouse[0]
+    this.mouse[1] = mouse[1]
+    const delta = [
+      mouse[0] - this.last_mouse[0],
+      mouse[1] - this.last_mouse[1],
+    ]
+    this.last_mouse = mouse
+    const { canvasX: x, canvasY: y } = e
+    this.graph_mouse[0] = x
+    this.graph_mouse[1] = y
+
+    if (e.isPrimary) pointer.move(e)
+
+    /** See {@link state}.{@link LGraphCanvasState.hoveringOver hoveringOver} */
+    let underPointer = CanvasItem.Nothing
+    if (subgraph) {
+      underPointer |= subgraph.inputNode.onPointerMove(e)
+      underPointer |= subgraph.outputNode.onPointerMove(e)
+    }
+
+    if (this.block_click) {
+      e.preventDefault()
+      return
+    }
+
+    e.dragging = this.last_mouse_dragging
+
+    if (this.node_widget) {
+      // Legacy widget mouse callbacks for pointermove events
+      const [node, widget] = this.node_widget
+
+      if (widget?.mouse) {
+        const relativeX = x - node.pos[0]
+        const relativeY = y - node.pos[1]
+        const result = widget.mouse(e, [relativeX, relativeY], node)
+        if (result != null) this.dirty_canvas = result
+      }
+    }
+
+    // get node over
+    const node = graph.getNodeOnPos(
+      x,
+      y,
+      this.visible_nodes,
+    )
+
+    const dragRect = this.dragging_rectangle
+    if (dragRect) {
+      dragRect[2] = x - dragRect[0]
+      dragRect[3] = y - dragRect[1]
+      this.dirty_canvas = true
+    } else if (resizingGroup) {
+      // Resizing a group
+      underPointer |= CanvasItem.Group
+      pointer.resizeDirection = "SE"
+    } else if (this.dragging_canvas) {
+      this.ds.offset[0] += delta[0] / this.ds.scale
+      this.ds.offset[1] += delta[1] / this.ds.scale
+      this.#dirty()
+    } else if (
+      (this.allow_interaction || node?.flags.allow_interaction) &&
+      !this.read_only
+    ) {
+      if (linkConnector.isConnecting) this.dirty_canvas = true
+
+      // remove mouseover flag
+      this.updateMouseOverNodes(node, e)
+
+      // mouse over a node
+      if (node) {
+        underPointer |= CanvasItem.Node
+
+        if (node.redraw_on_mouse) this.dirty_canvas = true
+
+        // For input/output hovering
+        // to store the output of isOverNodeInput
+        const pos: Point = [0, 0]
+        const inputId = isOverNodeInput(node, x, y, pos)
+        const outputId = isOverNodeOutput(node, x, y, pos)
+        const overWidget = node.getWidgetOnPos(x, y, true) ?? undefined
+
+        if (!node.mouseOver) {
+          // mouse enter
+          node.mouseOver = {}
+          this.node_over = node
+          this.dirty_canvas = true
+
+          for (const reroute of this.#visibleReroutes) {
+            reroute.hideSlots()
+            this.dirty_bgcanvas = true
+          }
+          node.onMouseEnter?.(e)
+        }
+
+        // in case the node wants to do something
+        node.onMouseMove?.(e, [x - node.pos[0], y - node.pos[1]], this)
+
+        // The input the mouse is over has changed
+        const { mouseOver } = node
+        if (
+          mouseOver.inputId !== inputId ||
+          mouseOver.outputId !== outputId ||
+          mouseOver.overWidget !== overWidget
+        ) {
+          mouseOver.inputId = inputId
+          mouseOver.outputId = outputId
+          mouseOver.overWidget = overWidget
+
+          // State reset
+          linkConnector.overWidget = undefined
+
+          // Check if link is over anything it could connect to - record position of valid target for snap / highlight
+          if (linkConnector.isConnecting) {
+            const firstLink = linkConnector.renderLinks.at(0)
+
+            // Default: nothing highlighted
+            let highlightPos: Point | undefined
+            let highlightInput: INodeInputSlot | undefined
+
+            if (!firstLink || !linkConnector.isNodeValidDrop(node)) {
+              // No link, or none of the dragged links may be dropped here
+            } else if (linkConnector.state.connectingTo === "input") {
+              if (overWidget) {
+                // Check widgets first - inputId is only valid if over the input socket
+                const slot = node.getSlotFromWidget(overWidget)
+
+                if (slot && linkConnector.isInputValidDrop(node, slot)) {
+                  highlightInput = slot
+                  highlightPos = node.getInputSlotPos(slot)
+                  linkConnector.overWidget = overWidget
+                }
+              }
+
+              // Not over a valid widget - treat drop on invalid widget same as node background
+              if (!linkConnector.overWidget) {
+                if (inputId === -1 && outputId === -1) {
+                // Node background / title under the pointer
+                  const result = node.findInputByType(firstLink.fromSlot.type)
+                  if (result) {
+                    highlightInput = result.slot
+                    highlightPos = node.getInputSlotPos(result.slot)
+                  }
+                } else if (
+                  inputId != -1 &&
+                  node.inputs[inputId] &&
+                  LiteGraph.isValidConnection(firstLink.fromSlot.type, node.inputs[inputId].type)
+                ) {
+                  highlightPos = pos
+                  // XXX CHECK THIS
+                  highlightInput = node.inputs[inputId]
+                }
+
+                if (highlightInput) {
+                  const widget = node.getWidgetFromSlot(highlightInput)
+                  if (widget) linkConnector.overWidget = widget
+                }
+              }
+            } else if (linkConnector.state.connectingTo === "output") {
+              // Connecting from an input to an output
+              if (inputId === -1 && outputId === -1) {
+                const result = node.findOutputByType(firstLink.fromSlot.type)
+                if (result) {
+                  highlightPos = node.getOutputPos(result.index)
+                }
+              } else {
+                // check if I have a slot below de mouse
+                if (
+                  outputId != -1 &&
+                  node.outputs[outputId] &&
+                  LiteGraph.isValidConnection(firstLink.fromSlot.type, node.outputs[outputId].type)
+                ) {
+                  highlightPos = pos
+                }
+              }
+            }
+            this._highlight_pos = highlightPos
+            this._highlight_input = highlightInput
+          }
+
+          this.dirty_canvas = true
+        }
+
+        // Resize direction - only show resize cursor if not over inputs/outputs/widgets
+        if (!pointer.eDown) {
+          if (inputId === -1 && outputId === -1 && !overWidget) {
+            pointer.resizeDirection = node.findResizeDirection(x, y)
+          } else {
+            // Clear resize direction when over inputs/outputs/widgets
+            pointer.resizeDirection &&= undefined
+          }
+        }
+      } else {
+        // Reroutes
+        underPointer = this.#updateReroutes(underPointer)
+
+        // Not over a node
+        const segment = this.#getLinkCentreOnPos(e)
+        if (this.over_link_center !== segment) {
+          underPointer |= CanvasItem.Link
+          this.over_link_center = segment
+          this.dirty_bgcanvas = true
+        }
+
+        if (this.canvas) {
+          const group = graph.getGroupOnPos(x, y)
+          if (
+            group &&
+            !e.ctrlKey &&
+            !this.read_only &&
+            group.isInResize(x, y)
+          ) {
+            pointer.resizeDirection = "SE"
+          } else {
+            pointer.resizeDirection &&= undefined
+          }
+        }
+      }
+
+      // send event to node if capturing input (used with widgets that allow drag outside of the area of the node)
+      if (this.node_capturing_input && this.node_capturing_input != node) {
+        this.node_capturing_input.onMouseMove?.(
+          e,
+          [
+            x - this.node_capturing_input.pos[0],
+            y - this.node_capturing_input.pos[1],
+          ],
+          this,
+        )
+      }
+
+      // Items being dragged
+      if (this.isDragging) {
+        const selected = this.selectedItems
+        const allItems = e.ctrlKey ? selected : getAllNestedItems(selected)
+
+        const deltaX = delta[0] / this.ds.scale
+        const deltaY = delta[1] / this.ds.scale
+        for (const item of allItems) {
+          item.move(deltaX, deltaY, true)
+        }
+
+        this.#dirty()
+      }
+    }
+
+    this.hoveringOver = underPointer
+
+    e.preventDefault()
+    return
+  }
+
+  /**
+   * Updates the hover / snap state of all visible reroutes.
+   * @returns The original value of {@link underPointer}, with any found reroute items added.
+   */
+  #updateReroutes(underPointer: CanvasItem): CanvasItem {
+    const { graph, pointer, linkConnector } = this
+    if (!graph) throw new NullGraphError()
+
+    // Update reroute hover state
+    if (!pointer.isDown) {
+      let anyChanges = false
+      for (const reroute of this.#visibleReroutes) {
+        anyChanges ||= reroute.updateVisibility(this.graph_mouse)
+
+        if (reroute.isSlotHovered) underPointer |= CanvasItem.RerouteSlot
+      }
+      if (anyChanges) this.dirty_bgcanvas = true
+    } else if (linkConnector.isConnecting) {
+      // Highlight the reroute that the mouse is over
+      for (const reroute of this.#visibleReroutes) {
+        if (reroute.containsPoint(this.graph_mouse)) {
+          if (linkConnector.isRerouteValidDrop(reroute)) {
+            linkConnector.overReroute = reroute
+            this._highlight_pos = reroute.pos
+          }
+
+          return underPointer |= CanvasItem.RerouteSlot
+        }
+      }
+    }
+
+    this._highlight_pos &&= undefined
+    linkConnector.overReroute &&= undefined
+    return underPointer
+  }
+
+  /**
+   * Start dragging an item, optionally including all other selected items.
+   *
+   * ** This function sets the {@link CanvasPointer.finally}() callback. **
+   * @param item The item that the drag event started on
+   * @param pointer The pointer event that initiated the drag, e.g. pointerdown
+   * @param sticky If `true`, the item is added to the selection - see {@link processSelect}
+   */
+  #startDraggingItems(item: Positionable, pointer: CanvasPointer, sticky = false): void {
+    this.emitBeforeChange()
+    this.graph?.beforeChange()
+    // Ensure that dragging is properly cleaned up, on success or failure.
+    pointer.finally = () => {
+      this.isDragging = false
+      this.graph?.afterChange()
+      this.emitAfterChange()
+    }
+
+    this.processSelect(item, pointer.eDown, sticky)
+    this.isDragging = true
+  }
+
+  /**
+   * Handles shared clean up and placement after items have been dragged.
+   * @param e The event that completed the drag, e.g. pointerup, pointermove
+   */
+  #processDraggedItems(e: CanvasPointerEvent): void {
+    const { graph } = this
+    if (e.shiftKey || LiteGraph.alwaysSnapToGrid)
+      graph?.snapToGrid(this.selectedItems)
+
+    this.dirty_canvas = true
+    this.dirty_bgcanvas = true
+
+    // TODO: Replace legacy behaviour: callbacks were never extended for multiple items
+    this.onNodeMoved?.(findFirstNode(this.selectedItems))
+  }
+
+  /**
+   * Called when a mouse up event has to be processed
+   */
+  processMouseUp(e: PointerEvent): void {
+    // early exit for extra pointer
+    if (e.isPrimary === false) return
+
+    const { graph, pointer } = this
+    if (!graph) return
+
+    LGraphCanvas.active_canvas = this
+
+    this.adjustMouseEvent(e)
+
+    const now = LiteGraph.getTime()
+    e.click_time = now - this.last_mouseclick
+
+    /** The mouseup event occurred near the mousedown event. */
+    /** Normal-looking click event - mouseUp occurred near mouseDown, without dragging. */
+    const isClick = pointer.up(e)
+    if (isClick === true) {
+      pointer.isDown = false
+      pointer.isDouble = false
+      // Required until all link behaviour is added to Pointer API
+      this.connecting_links = null
+      this.dragging_canvas = false
+
+      graph.change()
+
+      e.stopPropagation()
+      e.preventDefault()
+      return
+    }
+
+    this.last_mouse_dragging = false
+    this.last_click_position = null
+
+    // used to avoid sending twice a click in an immediate button
+    this.block_click &&= false
+
+    if (e.button === 0) {
+      // left button
+      this.selected_group = null
+
+      this.isDragging = false
+
+      const x = e.canvasX
+      const y = e.canvasY
+
+      if (!this.linkConnector.isConnecting) {
+        this.dirty_canvas = true
+
+        // @ts-expect-error Unused param
+        this.node_over?.onMouseUp?.(e, [x - this.node_over.pos[0], y - this.node_over.pos[1]], this)
+        this.node_capturing_input?.onMouseUp?.(e, [
+          x - this.node_capturing_input.pos[0],
+          y - this.node_capturing_input.pos[1],
+        ])
+      }
+    } else if (e.button === 1) {
+      // middle button
+      this.dirty_canvas = true
+      this.dragging_canvas = false
+    } else if (e.button === 2) {
+      // right button
+      this.dirty_canvas = true
+    }
+
+    pointer.isDown = false
+    pointer.isDouble = false
+
+    graph.change()
+
+    e.stopPropagation()
+    e.preventDefault()
+    return
+  }
+
+  /**
+   * Called when the mouse moves off the canvas.  Clears all node hover states.
+   * @param e
+   */
+  processMouseOut(e: MouseEvent): void {
+    // TODO: Check if document.contains(e.relatedTarget) - handle mouseover node textarea etc.
+    this.adjustMouseEvent(e)
+    this.updateMouseOverNodes(null, e)
+  }
+
+  processMouseCancel(): void {
+    console.warn("Pointer cancel!")
+    this.pointer.reset()
+  }
+
+  /**
+   * Called when a mouse wheel event has to be processed
+   */
+  processMouseWheel(e: WheelEvent): void {
+    if (!this.graph || !this.allow_dragcanvas) return
+
+    // TODO: Mouse wheel zoom rewrite
+    // @ts-expect-error
+    const delta = e.wheelDeltaY ?? e.detail * -60
+
+    this.adjustMouseEvent(e)
+
+    const pos: Point = [e.clientX, e.clientY]
+    if (this.viewport && !isPointInRect(pos, this.viewport)) return
+
+    let { scale } = this.ds
+
+    if (
+      LiteGraph.macTrackpadGestures &&
+      (!LiteGraph.macGesturesRequireMac || navigator.userAgent.includes("Mac"))
+    ) {
+      if (e.ctrlKey) {
+        scale *= 1 + e.deltaY * (1 - this.zoom_speed) * 0.18
+        this.ds.changeScale(scale, [e.clientX, e.clientY], false)
+      } else {
+        this.ds.offset[0] -= e.deltaX * 1.18 * (1 / scale)
+        this.ds.offset[1] -= e.deltaY * 1.18 * (1 / scale)
+      }
+    } else {
+      if (delta > 0) {
+        scale *= this.zoom_speed
+      } else if (delta < 0) {
+        scale *= 1 / (this.zoom_speed)
+      }
+      this.ds.changeScale(scale, [e.clientX, e.clientY])
+    }
+
+    this.graph.change()
+
+    e.preventDefault()
+    return
+  }
+
+  #noItemsSelected(): void {
+    const event = new CustomEvent("litegraph:no-items-selected", { bubbles: true })
+    this.canvas.dispatchEvent(event)
+  }
+
+  /**
+   * process a key event
+   */
+  processKey(e: KeyboardEvent): void {
+    this.#shiftDown = e.shiftKey
+
+    const { graph } = this
+    if (!graph) return
+
+    let block_default = false
+    // @ts-expect-error
+    if (e.target.localName == "input") return
+
+    if (e.type == "keydown") {
+      // TODO: Switch
+      if (e.key === " ") {
+        // space
+        this.read_only = true
+        if (this._previously_dragging_canvas === null) {
+          this._previously_dragging_canvas = this.dragging_canvas
+        }
+        this.dragging_canvas = this.pointer.isDown
+        block_default = true
+      } else if (e.key === "Escape") {
+        // esc
+        if (this.linkConnector.isConnecting) {
+          this.linkConnector.reset()
+          e.preventDefault()
+          return
+        }
+        this.node_panel?.close()
+        this.options_panel?.close()
+        if (this.node_panel || this.options_panel) block_default = true
+      } else if (e.keyCode === 65 && e.ctrlKey) {
+        // select all Control A
+        this.selectItems()
+        block_default = true
+      } else if (e.keyCode === 67 && (e.metaKey || e.ctrlKey) && !e.shiftKey) {
+        // copy
+        if (this.selected_nodes) {
+          this.copyToClipboard()
+          block_default = true
+        }
+      } else if (e.keyCode === 86 && (e.metaKey || e.ctrlKey)) {
+        // paste
+        this.pasteFromClipboard({ connectInputs: e.shiftKey })
+      } else if (e.key === "Delete" || e.key === "Backspace") {
+        // delete or backspace
+        // @ts-expect-error
+        if (e.target.localName != "input" && e.target.localName != "textarea") {
+          if (this.selectedItems.size === 0) {
+            this.#noItemsSelected()
+            return
+          }
+
+          this.deleteSelected()
+          block_default = true
+        }
+      }
+
+      // TODO
+      for (const node of Object.values(this.selected_nodes)) {
+        node.onKeyDown?.(e)
+      }
+    } else if (e.type == "keyup") {
+      if (e.key === " ") {
+        // space
+        this.read_only = false
+        this.dragging_canvas = (this._previously_dragging_canvas ?? false) && this.pointer.isDown
+        this._previously_dragging_canvas = null
+      }
+
+      for (const node of Object.values(this.selected_nodes)) {
+        node.onKeyUp?.(e)
+      }
+    }
+
+    // TODO: Do we need to remeasure and recalculate everything on every key down/up?
+    graph.change()
+
+    if (block_default) {
+      e.preventDefault()
+      e.stopImmediatePropagation()
+    }
+  }
+
+  /**
+   * Copies canvas items to an internal, app-specific clipboard backed by local storage.
+   * When called without parameters, it copies {@link selectedItems}.
+   * @param items The items to copy.  If nullish, all selected items are copied.
+   */
+  copyToClipboard(items?: Iterable<Positionable>): void {
+    const serialisable: Required<ClipboardItems> = {
+      nodes: [],
+      groups: [],
+      reroutes: [],
+      links: [],
+    }
+
+    // Create serialisable objects
+    for (const item of items ?? this.selectedItems) {
+      if (item instanceof LGraphNode) {
+        // Nodes
+        if (item.clonable === false) continue
+
+        const cloned = item.clone()?.serialize()
+        if (!cloned) continue
+
+        cloned.id = item.id
+        serialisable.nodes.push(cloned)
+
+        // Links
+        if (item.inputs) {
+          for (const { link: linkId } of item.inputs) {
+            if (linkId == null) continue
+
+            const link = this.graph?._links.get(linkId)?.asSerialisable()
+            if (link) serialisable.links.push(link)
+          }
+        }
+      } else if (item instanceof LGraphGroup) {
+        // Groups
+        serialisable.groups.push(item.serialize())
+      } else if (item instanceof Reroute) {
+        // Reroutes
+        serialisable.reroutes.push(item.asSerialisable())
+      }
+    }
+
+    localStorage.setItem(
+      "litegrapheditor_clipboard",
+      JSON.stringify(serialisable),
+    )
+  }
+
+  emitEvent(detail: LGraphCanvasEventMap["litegraph:canvas"]): void {
+    this.canvas.dispatchEvent(
+      new CustomEvent("litegraph:canvas", {
+        bubbles: true,
+        detail,
+      }),
+    )
+  }
+
+  /** @todo Refactor to where it belongs - e.g. Deleting / creating nodes is not actually canvas event. */
+  emitBeforeChange(): void {
+    this.emitEvent({
+      subType: "before-change",
+    })
+  }
+
+  /** @todo See {@link emitBeforeChange} */
+  emitAfterChange(): void {
+    this.emitEvent({
+      subType: "after-change",
+    })
+  }
+
+  /**
+   * Pastes the items from the canvas "clipbaord" - a local storage variable.
+   */
+  _pasteFromClipboard(options: IPasteFromClipboardOptions = {}): ClipboardPasteResult | undefined {
+    const {
+      connectInputs = false,
+      position = this.graph_mouse,
+    } = options
+
+    // if ctrl + shift + v is off, return when isConnectUnselected is true (shift is pressed) to maintain old behavior
+    if (!LiteGraph.ctrl_shift_v_paste_connect_unselected_outputs && connectInputs) return
+
+    const data = localStorage.getItem("litegrapheditor_clipboard")
+    if (!data) return
+
+    const { graph } = this
+    if (!graph) throw new NullGraphError()
+    graph.beforeChange()
+
+    // Parse & initialise
+    const parsed: ClipboardItems = JSON.parse(data)
+    parsed.nodes ??= []
+    parsed.groups ??= []
+    parsed.reroutes ??= []
+    parsed.links ??= []
+
+    // Find top-left-most boundary
+    let offsetX = Infinity
+    let offsetY = Infinity
+    for (const item of [...parsed.nodes, ...parsed.reroutes]) {
+      if (item.pos == null) throw new TypeError("Invalid node encounterd on paste.  `pos` was null.")
+
+      if (item.pos[0] < offsetX) offsetX = item.pos[0]
+      if (item.pos[1] < offsetY) offsetY = item.pos[1]
+    }
+
+    // TODO: Remove when implementing `asSerialisable`
+    if (parsed.groups) {
+      for (const group of parsed.groups) {
+        if (group.bounding[0] < offsetX) offsetX = group.bounding[0]
+        if (group.bounding[1] < offsetY) offsetY = group.bounding[1]
+      }
+    }
+
+    const results: ClipboardPasteResult = {
+      created: [],
+      nodes: new Map<NodeId, LGraphNode>(),
+      links: new Map<LinkId, LLink>(),
+      reroutes: new Map<RerouteId, Reroute>(),
+    }
+    const { created, nodes, links, reroutes } = results
+
+    // const failedNodes: ISerialisedNode[] = []
+
+    // Groups
+    for (const info of parsed.groups) {
+      info.id = -1
+
+      const group = new LGraphGroup()
+      group.configure(info)
+      graph.add(group)
+      created.push(group)
+    }
+
+    // Nodes
+    for (const info of parsed.nodes) {
+      const node = info.type == null ? null : LiteGraph.createNode(info.type)
+      if (!node) {
+        // failedNodes.push(info)
+        continue
+      }
+
+      nodes.set(info.id, node)
+      info.id = -1
+
+      node.configure(info)
+      graph.add(node)
+
+      created.push(node)
+    }
+
+    // Reroutes
+    for (const info of parsed.reroutes) {
+      const { id, ...rerouteInfo } = info
+
+      const reroute = graph.setReroute(rerouteInfo)
+      created.push(reroute)
+      reroutes.set(id, reroute)
+    }
+
+    // Remap reroute parentIds for pasted reroutes
+    for (const reroute of reroutes.values()) {
+      if (reroute.parentId == null) continue
+
+      const mapped = reroutes.get(reroute.parentId)
+      if (mapped) reroute.parentId = mapped.id
+    }
+
+    // Links
+    for (const info of parsed.links) {
+      // Find the copied node / reroute ID
+      let outNode: LGraphNode | null | undefined = nodes.get(info.origin_id)
+      let afterRerouteId: number | undefined
+      if (info.parentId != null) afterRerouteId = reroutes.get(info.parentId)?.id
+
+      // If it wasn't copied, use the original graph value
+      if (connectInputs && LiteGraph.ctrl_shift_v_paste_connect_unselected_outputs) {
+        outNode ??= graph.getNodeById(info.origin_id)
+        afterRerouteId ??= info.parentId
+      }
+
+      const inNode = nodes.get(info.target_id)
+      if (inNode) {
+        const link = outNode?.connect(
+          info.origin_slot,
+          inNode,
+          info.target_slot,
+          afterRerouteId,
+        )
+        if (link) links.set(info.id, link)
+      }
+    }
+
+    // Remap linkIds
+    for (const reroute of reroutes.values()) {
+      const ids = [...reroute.linkIds].map(x => links.get(x)?.id ?? x)
+      reroute.update(reroute.parentId, undefined, ids, reroute.floating)
+
+      // Remove any invalid items
+      if (!reroute.validateLinks(graph.links, graph.floatingLinks)) {
+        graph.removeReroute(reroute.id)
+      }
+    }
+
+    // Adjust positions
+    for (const item of created) {
+      item.pos[0] += position[0] - offsetX
+      item.pos[1] += position[1] - offsetY
+    }
+
+    // TODO: Report failures, i.e. `failedNodes`
+
+    this.selectItems(created)
+
+    graph.afterChange()
+
+    return results
+  }
+
+  pasteFromClipboard(options: IPasteFromClipboardOptions = {}): void {
+    this.emitBeforeChange()
+    try {
+      this._pasteFromClipboard(options)
+    } finally {
+      this.emitAfterChange()
+    }
+  }
+
+  processNodeDblClicked(n: LGraphNode): void {
+    this.onShowNodePanel?.(n)
+    this.onNodeDblClicked?.(n)
+
+    this.setDirty(true)
+  }
+
+  #handleMultiSelect(e: CanvasPointerEvent, dragRect: Float32Array) {
+    // Process drag
+    // Convert Point pair (pos, offset) to Rect
+    const { graph, selectedItems, subgraph } = this
+    if (!graph) throw new NullGraphError()
+
+    const w = Math.abs(dragRect[2])
+    const h = Math.abs(dragRect[3])
+    if (dragRect[2] < 0) dragRect[0] -= w
+    if (dragRect[3] < 0) dragRect[1] -= h
+    dragRect[2] = w
+    dragRect[3] = h
+
+    // Select nodes - any part of the node is in the select area
+    const isSelected = new Set<Positionable>()
+    const notSelected: Positionable[] = []
+
+    if (subgraph) {
+      const { inputNode, outputNode } = subgraph
+
+      if (overlapBounding(dragRect, inputNode.boundingRect)) {
+        addPositionable(inputNode)
+      }
+      if (overlapBounding(dragRect, outputNode.boundingRect)) {
+        addPositionable(outputNode)
+      }
+    }
+
+    for (const nodeX of graph._nodes) {
+      if (overlapBounding(dragRect, nodeX.boundingRect)) {
+        addPositionable(nodeX)
+      }
+    }
+
+    // Select groups - the group is wholly inside the select area
+    for (const group of graph.groups) {
+      if (!containsRect(dragRect, group._bounding)) continue
+
+      group.recomputeInsideNodes()
+      addPositionable(group)
+    }
+
+    // Select reroutes - the centre point is inside the select area
+    for (const reroute of graph.reroutes.values()) {
+      if (!isPointInRect(reroute.pos, dragRect)) continue
+
+      selectedItems.add(reroute)
+      reroute.selected = true
+      addPositionable(reroute)
+    }
+
+    if (e.shiftKey) {
+      // Add to selection
+      for (const item of notSelected) this.select(item)
+    } else if (e.altKey) {
+      // Remove from selection
+      for (const item of isSelected) this.deselect(item)
+    } else {
+      // Replace selection
+      for (const item of selectedItems.values()) {
+        if (!isSelected.has(item)) this.deselect(item)
+      }
+      for (const item of notSelected) this.select(item)
+    }
+    this.onSelectionChange?.(this.selected_nodes)
+
+    function addPositionable(item: Positionable): void {
+      if (!item.selected || !selectedItems.has(item)) notSelected.push(item)
+      else isSelected.add(item)
+    }
+  }
+
+  /**
+   * Determines whether to select or deselect an item that has received a pointer event.  Will deselect other nodes if
+   * @param item Canvas item to select/deselect
+   * @param e The MouseEvent to handle
+   * @param sticky Prevents deselecting individual nodes (as used by aux/right-click)
+   * @remarks
+   * Accessibility: anyone using {@link mutli_select} always deselects when clicking empty space.
+   */
+  processSelect<TPositionable extends Positionable = LGraphNode>(
+    item: TPositionable | null | undefined,
+    e: CanvasMouseEvent | undefined,
+    sticky: boolean = false,
+  ): void {
+    const addModifier = e?.shiftKey
+    const subtractModifier = e != null && (e.metaKey || e.ctrlKey)
+    const eitherModifier = addModifier || subtractModifier
+    const modifySelection = eitherModifier || this.multi_select
+
+    if (!item) {
+      if (!eitherModifier || this.multi_select) this.deselectAll()
+    } else if (!item.selected || !this.selectedItems.has(item)) {
+      if (!modifySelection) this.deselectAll(item)
+      this.select(item)
+    } else if (modifySelection && !sticky) {
+      this.deselect(item)
+    } else if (!sticky) {
+      this.deselectAll(item)
+    } else {
+      return
+    }
+    this.onSelectionChange?.(this.selected_nodes)
+    this.setDirty(true)
+  }
+
+  /**
+   * Selects a {@link Positionable} item.
+   * @param item The canvas item to add to the selection.
+   */
+  select<TPositionable extends Positionable = LGraphNode>(item: TPositionable): void {
+    if (item.selected && this.selectedItems.has(item)) return
+
+    item.selected = true
+    this.selectedItems.add(item)
+    this.state.selectionChanged = true
+    if (!(item instanceof LGraphNode)) return
+
+    // Node-specific handling
+    item.onSelected?.()
+    this.selected_nodes[item.id] = item
+
+    this.onNodeSelected?.(item)
+
+    // Highlight links
+    if (item.inputs) {
+      for (const input of item.inputs) {
+        if (input.link == null) continue
+        this.highlighted_links[input.link] = true
+      }
+    }
+    if (item.outputs) {
+      for (const id of item.outputs.flatMap(x => x.links)) {
+        if (id == null) continue
+        this.highlighted_links[id] = true
+      }
+    }
+  }
+
+  /**
+   * Deselects a {@link Positionable} item.
+   * @param item The canvas item to remove from the selection.
+   */
+  deselect<TPositionable extends Positionable = LGraphNode>(item: TPositionable): void {
+    if (!item.selected && !this.selectedItems.has(item)) return
+
+    item.selected = false
+    this.selectedItems.delete(item)
+    this.state.selectionChanged = true
+    if (!(item instanceof LGraphNode)) return
+
+    // Node-specific handling
+    item.onDeselected?.()
+    delete this.selected_nodes[item.id]
+
+    this.onNodeDeselected?.(item)
+
+    // Should be moved to top of function, and throw if null
+    const { graph } = this
+    if (!graph) return
+
+    // Clear link highlight
+    if (item.inputs) {
+      for (const input of item.inputs) {
+        if (input.link == null) continue
+
+        const node = LLink.getOriginNode(graph, input.link)
+        if (node && this.selectedItems.has(node)) continue
+
+        delete this.highlighted_links[input.link]
+      }
+    }
+    if (item.outputs) {
+      for (const id of item.outputs.flatMap(x => x.links)) {
+        if (id == null) continue
+
+        const node = LLink.getTargetNode(graph, id)
+        if (node && this.selectedItems.has(node)) continue
+
+        delete this.highlighted_links[id]
+      }
+    }
+  }
+
+  /** @deprecated See {@link LGraphCanvas.processSelect} */
+  processNodeSelected(item: LGraphNode, e: CanvasMouseEvent): void {
+    this.processSelect(
+      item,
+      e,
+      e && (e.shiftKey || e.metaKey || e.ctrlKey || this.multi_select),
+    )
+  }
+
+  /** @deprecated See {@link LGraphCanvas.select} */
+  selectNode(node: LGraphNode, add_to_current_selection?: boolean): void {
+    if (node == null) {
+      this.deselectAll()
+    } else {
+      this.selectNodes([node], add_to_current_selection)
+    }
+  }
+
+  get empty(): boolean {
+    if (!this.graph) throw new NullGraphError()
+    return this.graph.empty
+  }
+
+  get positionableItems() {
+    if (!this.graph) throw new NullGraphError()
+    return this.graph.positionableItems()
+  }
+
+  /**
+   * Selects several items.
+   * @param items Items to select - if falsy, all items on the canvas will be selected
+   * @param add_to_current_selection If set, the items will be added to the current selection instead of replacing it
+   */
+  selectItems(items?: Positionable[], add_to_current_selection?: boolean): void {
+    const itemsToSelect = items ?? this.positionableItems
+    if (!add_to_current_selection) this.deselectAll()
+    for (const item of itemsToSelect) this.select(item)
+    this.onSelectionChange?.(this.selected_nodes)
+    this.setDirty(true)
+  }
+
+  /**
+   * selects several nodes (or adds them to the current selection)
+   * @deprecated See {@link LGraphCanvas.selectItems}
+   */
+  selectNodes(nodes?: LGraphNode[], add_to_current_selection?: boolean): void {
+    this.selectItems(nodes, add_to_current_selection)
+  }
+
+  /** @deprecated See {@link LGraphCanvas.deselect} */
+  deselectNode(node: LGraphNode): void {
+    this.deselect(node)
+  }
+
+  /**
+   * Deselects all items on the canvas.
+   * @param keepSelected If set, this item will not be removed from the selection.
+   */
+  deselectAll(keepSelected?: Positionable): void {
+    if (!this.graph) return
+
+    const selected = this.selectedItems
+    if (!selected.size) return
+
+    let wasSelected: Positionable | undefined
+    for (const sel of selected) {
+      if (sel === keepSelected) {
+        wasSelected = sel
+        continue
+      }
+      sel.onDeselected?.()
+      sel.selected = false
+    }
+    selected.clear()
+    if (wasSelected) selected.add(wasSelected)
+
+    this.setDirty(true)
+
+    // Legacy code
+    const oldNode = keepSelected?.id == null ? null : this.selected_nodes[keepSelected.id]
+    this.selected_nodes = {}
+    this.current_node = null
+    this.highlighted_links = {}
+
+    if (keepSelected instanceof LGraphNode) {
+      // Handle old object lookup
+      if (oldNode) this.selected_nodes[oldNode.id] = oldNode
+
+      // Highlight links
+      if (keepSelected.inputs) {
+        for (const input of keepSelected.inputs) {
+          if (input.link == null) continue
+          this.highlighted_links[input.link] = true
+        }
+      }
+      if (keepSelected.outputs) {
+        for (const id of keepSelected.outputs.flatMap(x => x.links)) {
+          if (id == null) continue
+          this.highlighted_links[id] = true
+        }
+      }
+    }
+
+    this.state.selectionChanged = true
+    this.onSelectionChange?.(this.selected_nodes)
+  }
+
+  /** @deprecated See {@link LGraphCanvas.deselectAll} */
+  deselectAllNodes(): void {
+    this.deselectAll()
+  }
+
+  /**
+   * Deletes all selected items from the graph.
+   * @todo Refactor deletion task to LGraph.  Selection is a canvas property, delete is a graph action.
+   */
+  deleteSelected(): void {
+    const { graph } = this
+    if (!graph) throw new NullGraphError()
+
+    this.emitBeforeChange()
+    graph.beforeChange()
+
+    for (const item of this.selectedItems) {
+      if (item instanceof LGraphNode) {
+        const node = item
+        if (node.block_delete) continue
+        node.connectInputToOutput()
+        graph.remove(node)
+        this.onNodeDeselected?.(node)
+      } else if (item instanceof LGraphGroup) {
+        graph.remove(item)
+      } else if (item instanceof Reroute) {
+        graph.removeReroute(item.id)
+      }
+    }
+
+    this.selected_nodes = {}
+    this.selectedItems.clear()
+    this.current_node = null
+    this.highlighted_links = {}
+
+    this.state.selectionChanged = true
+    this.onSelectionChange?.(this.selected_nodes)
+    this.setDirty(true)
+    graph.afterChange()
+    this.emitAfterChange()
+  }
+
+  /**
+   * deletes all nodes in the current selection from the graph
+   * @deprecated See {@link LGraphCanvas.deleteSelected}
+   */
+  deleteSelectedNodes(): void {
+    this.deleteSelected()
+  }
+
+  /**
+   * centers the camera on a given node
+   */
+  centerOnNode(node: LGraphNode): void {
+    const dpi = window?.devicePixelRatio || 1
+    this.ds.offset[0] =
+      -node.pos[0] -
+      node.size[0] * 0.5 +
+      (this.canvas.width * 0.5) / (this.ds.scale * dpi)
+    this.ds.offset[1] =
+      -node.pos[1] -
+      node.size[1] * 0.5 +
+      (this.canvas.height * 0.5) / (this.ds.scale * dpi)
+    this.setDirty(true, true)
+  }
+
+  /**
+   * adds some useful properties to a mouse event, like the position in graph coordinates
+   */
+  adjustMouseEvent<T extends MouseEvent>(
+    e: T & Partial<CanvasPointerExtensions>,
+  ): asserts e is T & CanvasMouseEvent {
+    let clientX_rel = e.clientX
+    let clientY_rel = e.clientY
+
+    if (this.canvas) {
+      const b = this.canvas.getBoundingClientRect()
+      clientX_rel -= b.left
+      clientY_rel -= b.top
+    }
+
+    e.safeOffsetX = clientX_rel
+    e.safeOffsetY = clientY_rel
+
+    // TODO: Find a less brittle way to do this
+
+    // Only set deltaX and deltaY if not already set.
+    // If deltaX and deltaY are already present, they are read-only.
+    // Setting them would result browser error => zoom in/out feature broken.
+    if (e.deltaX === undefined)
+      e.deltaX = clientX_rel - this.last_mouse_position[0]
+    if (e.deltaY === undefined)
+      e.deltaY = clientY_rel - this.last_mouse_position[1]
+
+    this.last_mouse_position[0] = clientX_rel
+    this.last_mouse_position[1] = clientY_rel
+
+    e.canvasX = clientX_rel / this.ds.scale - this.ds.offset[0]
+    e.canvasY = clientY_rel / this.ds.scale - this.ds.offset[1]
+  }
+
+  /**
+   * changes the zoom level of the graph (default is 1), you can pass also a place used to pivot the zoom
+   */
+  setZoom(value: number, zooming_center: Point) {
+    this.ds.changeScale(value, zooming_center)
+    this.#dirty()
+  }
+
+  /**
+   * converts a coordinate from graph coordinates to canvas2D coordinates
+   */
+  convertOffsetToCanvas(pos: Point, out: Point): Point {
+    // @ts-expect-error Unused param
+    return this.ds.convertOffsetToCanvas(pos, out)
+  }
+
+  /**
+   * converts a coordinate from Canvas2D coordinates to graph space
+   */
+  convertCanvasToOffset(pos: Point, out?: Point): Point {
+    return this.ds.convertCanvasToOffset(pos, out)
+  }
+
+  // converts event coordinates from canvas2D to graph coordinates
+  convertEventToCanvasOffset(e: MouseEvent): Point {
+    const rect = this.canvas.getBoundingClientRect()
+    // TODO: -> this.ds.convertCanvasToOffset
+    return this.convertCanvasToOffset([
+      e.clientX - rect.left,
+      e.clientY - rect.top,
+    ])
+  }
+
+  /**
+   * brings a node to front (above all other nodes)
+   */
+  bringToFront(node: LGraphNode): void {
+    const { graph } = this
+    if (!graph) throw new NullGraphError()
+
+    const i = graph._nodes.indexOf(node)
+    if (i == -1) return
+
+    graph._nodes.splice(i, 1)
+    graph._nodes.push(node)
+  }
+
+  /**
+   * sends a node to the back (below all other nodes)
+   */
+  sendToBack(node: LGraphNode): void {
+    const { graph } = this
+    if (!graph) throw new NullGraphError()
+
+    const i = graph._nodes.indexOf(node)
+    if (i == -1) return
+
+    graph._nodes.splice(i, 1)
+    graph._nodes.unshift(node)
+  }
+
+  /**
+   * Determines which nodes are visible and populates {@link out} with the results.
+   * @param nodes The list of nodes to check - if falsy, all nodes in the graph will be checked
+   * @param out Array to write visible nodes into - if falsy, a new array is created instead
+   * @returns Array passed ({@link out}), or a new array containing all visible nodes
+   */
+  computeVisibleNodes(nodes?: LGraphNode[], out?: LGraphNode[]): LGraphNode[] {
+    const visible_nodes = out || []
+    visible_nodes.length = 0
+    if (!this.graph) throw new NullGraphError()
+
+    const _nodes = nodes || this.graph._nodes
+    for (const node of _nodes) {
+      node.updateArea(this.ctx)
+      // Not in visible area
+      if (!overlapBounding(this.visible_area, node.renderArea)) continue
+
+      visible_nodes.push(node)
+    }
+    return visible_nodes
+  }
+
+  /**
+   * Checks if a node is visible on the canvas.
+   * @param node The node to check
+   * @returns `true` if the node is visible, otherwise `false`
+   */
+  isNodeVisible(node: LGraphNode): boolean {
+    return this.#visible_node_ids.has(node.id)
+  }
+
+  /**
+   * renders the whole canvas content, by rendering in two separated canvas, one containing the background grid and the connections, and one containing the nodes)
+   */
+  draw(force_canvas?: boolean, force_bgcanvas?: boolean): void {
+    if (!this.canvas || this.canvas.width == 0 || this.canvas.height == 0) return
+
+    // fps counting
+    const now = LiteGraph.getTime()
+    this.render_time = (now - this.last_draw_time) * 0.001
+    this.last_draw_time = now
+
+    if (this.graph) this.ds.computeVisibleArea(this.viewport)
+
+    // Compute node size before drawing links.
+    if (this.dirty_canvas || force_canvas) {
+      this.computeVisibleNodes(undefined, this.visible_nodes)
+      // Update visible node IDs
+      this.#visible_node_ids = new Set(this.visible_nodes.map(node => node.id))
+
+      // Arrange subgraph IO nodes
+      const { subgraph } = this
+      if (subgraph) {
+        subgraph.inputNode.arrange()
+        subgraph.outputNode.arrange()
+      }
+    }
+
+    if (
+      this.dirty_bgcanvas ||
+      force_bgcanvas ||
+      this.always_render_background ||
+      (this.graph?._last_trigger_time &&
+        now - this.graph._last_trigger_time < 1000)
+    ) {
+      this.drawBackCanvas()
+    }
+
+    if (this.dirty_canvas || force_canvas) this.drawFrontCanvas()
+
+    this.fps = this.render_time ? 1.0 / this.render_time : 0
+    this.frame++
+  }
+
+  /**
+   * draws the front canvas (the one containing all the nodes)
+   */
+  drawFrontCanvas(): void {
+    this.dirty_canvas = false
+
+    const { ctx, canvas, graph, linkConnector } = this
+
+    // @ts-expect-error
+    if (ctx.start2D && !this.viewport) {
+      // @ts-expect-error
+      ctx.start2D()
+      ctx.restore()
+      ctx.setTransform(1, 0, 0, 1, 0, 0)
+    }
+
+    // clip dirty area if there is one, otherwise work in full canvas
+    const area = this.viewport || this.dirty_area
+    if (area) {
+      ctx.save()
+      ctx.beginPath()
+      ctx.rect(area[0], area[1], area[2], area[3])
+      ctx.clip()
+    }
+
+    // TODO: Set snapping value when changed instead of once per frame
+    this.#snapToGrid = this.#shiftDown || LiteGraph.alwaysSnapToGrid
+      ? this.graph?.getSnapToGridSize()
+      : undefined
+
+    // clear
+    // canvas.width = canvas.width;
+    if (this.clear_background) {
+      if (area) ctx.clearRect(area[0], area[1], area[2], area[3])
+      else ctx.clearRect(0, 0, canvas.width, canvas.height)
+    }
+
+    // draw bg canvas
+    if (this.bgcanvas == this.canvas) {
+      this.drawBackCanvas()
+    } else {
+      const scale = window.devicePixelRatio
+      ctx.drawImage(
+        this.bgcanvas,
+        0,
+        0,
+        this.bgcanvas.width / scale,
+        this.bgcanvas.height / scale,
+      )
+    }
+
+    // rendering
+    this.onRender?.(canvas, ctx)
+
+    // info widget
+    if (this.show_info) {
+      this.renderInfo(ctx, area ? area[0] : 0, area ? area[1] : 0)
+    }
+
+    if (graph) {
+      // apply transformations
+      ctx.save()
+      this.ds.toCanvasContext(ctx)
+
+      // draw nodes
+      const { visible_nodes } = this
+      const drawSnapGuides = this.#snapToGrid && this.isDragging
+
+      for (const node of visible_nodes) {
+        ctx.save()
+
+        // Draw snap shadow
+        if (drawSnapGuides && this.selectedItems.has(node))
+          this.drawSnapGuide(ctx, node)
+
+        // Localise co-ordinates to node position
+        ctx.translate(node.pos[0], node.pos[1])
+
+        // Draw
+        this.drawNode(node, ctx)
+
+        ctx.restore()
+      }
+
+      // Draw subgraph IO nodes
+      this.subgraph?.draw(ctx, this.colourGetter)
+
+      // on top (debug)
+      if (this.render_execution_order) {
+        this.drawExecutionOrder(ctx)
+      }
+
+      // connections ontop?
+      if (graph.config.links_ontop) {
+        this.drawConnections(ctx)
+      }
+
+      if (linkConnector.isConnecting) {
+        // current connection (the one being dragged by the mouse)
+        const { renderLinks } = linkConnector
+        const highlightPos = this.#getHighlightPosition()
+        ctx.lineWidth = this.connections_width
+
+        for (const renderLink of renderLinks) {
+          const { fromSlot, fromPos: pos, fromDirection, dragDirection } = renderLink
+          const connShape = fromSlot.shape
+          const connType = fromSlot.type
+
+          const colour = connType === LiteGraph.EVENT
+            ? LiteGraph.EVENT_LINK_COLOR
+            : LiteGraph.CONNECTING_LINK_COLOR
+
+          // the connection being dragged by the mouse
+          this.renderLink(
+            ctx,
+            pos,
+            highlightPos,
+            null,
+            false,
+            null,
+            colour,
+            fromDirection,
+            dragDirection,
+          )
+
+          ctx.beginPath()
+          if (connType === LiteGraph.EVENT || connShape === RenderShape.BOX) {
+            ctx.rect(pos[0] - 6 + 0.5, pos[1] - 5 + 0.5, 14, 10)
+            ctx.rect(
+              highlightPos[0] - 6 + 0.5,
+              highlightPos[1] - 5 + 0.5,
+              14,
+              10,
+            )
+          } else if (connShape === RenderShape.ARROW) {
+            ctx.moveTo(pos[0] + 8, pos[1] + 0.5)
+            ctx.lineTo(pos[0] - 4, pos[1] + 6 + 0.5)
+            ctx.lineTo(pos[0] - 4, pos[1] - 6 + 0.5)
+            ctx.closePath()
+          } else {
+            ctx.arc(pos[0], pos[1], 4, 0, Math.PI * 2)
+            ctx.arc(highlightPos[0], highlightPos[1], 4, 0, Math.PI * 2)
+          }
+          ctx.fill()
+        }
+
+        // Gradient half-border over target node
+        this.#renderSnapHighlight(ctx, highlightPos)
+      }
+
+      // Area-selection rectangle
+      if (this.dragging_rectangle) {
+        const { eDown, eMove } = this.pointer
+        ctx.strokeStyle = "#FFF"
+
+        if (eDown && eMove) {
+          // Do not scale the selection box
+          const transform = ctx.getTransform()
+          const ratio = Math.max(1, window.devicePixelRatio)
+          ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
+
+          const x = eDown.safeOffsetX
+          const y = eDown.safeOffsetY
+          ctx.strokeRect(x, y, eMove.safeOffsetX - x, eMove.safeOffsetY - y)
+
+          ctx.setTransform(transform)
+        } else {
+          // Fallback to legacy behaviour
+          const [x, y, w, h] = this.dragging_rectangle
+          ctx.strokeRect(x, y, w, h)
+        }
+      }
+
+      // on top of link center
+      if (!this.isDragging && this.over_link_center && this.render_link_tooltip) {
+        this.drawLinkTooltip(ctx, this.over_link_center)
+      } else {
+        this.onDrawLinkTooltip?.(ctx, null)
+      }
+
+      // custom info
+      this.onDrawForeground?.(ctx, this.visible_area)
+
+      ctx.restore()
+    }
+
+    this.onDrawOverlay?.(ctx)
+
+    if (area) ctx.restore()
+  }
+
+  /** @returns If the pointer is over a link centre marker, the link segment it belongs to.  Otherwise, `undefined`.  */
+  #getLinkCentreOnPos(e: CanvasMouseEvent): LinkSegment | undefined {
+    for (const linkSegment of this.renderedPaths) {
+      const centre = linkSegment._pos
+      if (!centre) continue
+
+      if (isInRectangle(e.canvasX, e.canvasY, centre[0] - 4, centre[1] - 4, 8, 8)) {
+        return linkSegment
+      }
+    }
+  }
+
+  /** Get the target snap / highlight point in graph space */
+  #getHighlightPosition(): ReadOnlyPoint {
+    return LiteGraph.snaps_for_comfy
+      ? this.linkConnector.state.snapLinksPos ?? this._highlight_pos ?? this.graph_mouse
+      : this.graph_mouse
+  }
+
+  /**
+   * Renders indicators showing where a link will connect if released.
+   * Partial border over target node and a highlight over the slot itself.
+   * @param ctx Canvas 2D context
+   */
+  #renderSnapHighlight(
+    ctx: CanvasRenderingContext2D,
+    highlightPos: ReadOnlyPoint,
+  ): void {
+    const linkConnectorSnap = !!this.linkConnector.state.snapLinksPos
+    if (!this._highlight_pos && !linkConnectorSnap) return
+
+    ctx.fillStyle = "#ffcc00"
+    ctx.beginPath()
+    const shape = this._highlight_input?.shape
+
+    if (shape === RenderShape.ARROW) {
+      ctx.moveTo(highlightPos[0] + 8, highlightPos[1] + 0.5)
+      ctx.lineTo(highlightPos[0] - 4, highlightPos[1] + 6 + 0.5)
+      ctx.lineTo(highlightPos[0] - 4, highlightPos[1] - 6 + 0.5)
+      ctx.closePath()
+    } else {
+      ctx.arc(highlightPos[0], highlightPos[1], 6, 0, Math.PI * 2)
+    }
+    ctx.fill()
+
+    const { linkConnector } = this
+    const { overReroute, overWidget } = linkConnector
+    if (!LiteGraph.snap_highlights_node || !linkConnector.isConnecting || linkConnectorSnap) return
+
+    // Reroute highlight
+    overReroute?.drawHighlight(ctx, "#ffcc00aa")
+
+    // Ensure we're mousing over a node and connecting a link
+    const node = this.node_over
+    if (!node) return
+
+    const { strokeStyle, lineWidth } = ctx
+
+    const area = node.boundingRect
+    const gap = 3
+    const radius = LiteGraph.ROUND_RADIUS + gap
+
+    const x = area[0] - gap
+    const y = area[1] - gap
+    const width = area[2] + gap * 2
+    const height = area[3] + gap * 2
+
+    ctx.beginPath()
+    ctx.roundRect(x, y, width, height, radius)
+
+    // TODO: Currently works on LTR slots only.  Add support for other directions.
+    const start = linkConnector.state.connectingTo === "output" ? 0 : 1
+    const inverter = start ? -1 : 1
+
+    // Radial highlight centred on highlight pos
+    const hx = highlightPos[0]
+    const hy = highlightPos[1]
+    const gRadius = width < height
+      ? width
+      : width * Math.max(height / width, 0.5)
+
+    const gradient = ctx.createRadialGradient(hx, hy, 0, hx, hy, gRadius)
+    gradient.addColorStop(1, "#00000000")
+    gradient.addColorStop(0, "#ffcc00aa")
+
+    // Linear gradient over half the node.
+    const linearGradient = ctx.createLinearGradient(x, y, x + width, y)
+    linearGradient.addColorStop(0.5, "#00000000")
+    linearGradient.addColorStop(start + 0.67 * inverter, "#ddeeff33")
+    linearGradient.addColorStop(start + inverter, "#ffcc0055")
+
+    /**
+     * Workaround for a canvas render issue.
+     * In Chromium 129 (2024-10-15), rounded corners can be rendered with the wrong part of a gradient colour.
+     * Occurs only at certain thicknesses / arc sizes.
+     */
+    ctx.setLineDash([radius, radius * 0.001])
+
+    ctx.lineWidth = 1
+    ctx.strokeStyle = linearGradient
+    ctx.stroke()
+
+    if (overWidget) {
+      const { computedHeight } = overWidget
+
+      ctx.beginPath()
+      const { pos: [nodeX, nodeY] } = node
+      const height = LiteGraph.NODE_WIDGET_HEIGHT
+      if (
+        overWidget.type.startsWith("custom") &&
+        computedHeight != null &&
+        computedHeight > height * 2
+      ) {
+        // Most likely DOM widget text box
+        ctx.rect(
+          nodeX + 9,
+          nodeY + overWidget.y + 9,
+          (overWidget.width ?? area[2]) - 18,
+          computedHeight - 18,
+        )
+      } else {
+        // Regular widget, probably
+        ctx.roundRect(
+          nodeX + BaseWidget.margin,
+          nodeY + overWidget.y,
+          overWidget.width ?? area[2],
+          height,
+          height * 0.5,
+        )
+      }
+      ctx.stroke()
+    }
+
+    ctx.strokeStyle = gradient
+    ctx.stroke()
+
+    ctx.setLineDash([])
+    ctx.lineWidth = lineWidth
+    ctx.strokeStyle = strokeStyle
+  }
+
+  /**
+   * draws some useful stats in the corner of the canvas
+   */
+  renderInfo(ctx: CanvasRenderingContext2D, x: number, y: number): void {
+    x = x || 10
+    y = y || this.canvas.offsetHeight - 80
+
+    ctx.save()
+    ctx.translate(x, y)
+
+    ctx.font = `10px ${LiteGraph.DEFAULT_FONT}`
+    ctx.fillStyle = "#888"
+    ctx.textAlign = "left"
+    if (this.graph) {
+      ctx.fillText(`T: ${this.graph.globaltime.toFixed(2)}s`, 5, 13 * 1)
+      ctx.fillText(`I: ${this.graph.iteration}`, 5, 13 * 2)
+      ctx.fillText(`N: ${this.graph._nodes.length} [${this.visible_nodes.length}]`, 5, 13 * 3)
+      ctx.fillText(`V: ${this.graph._version}`, 5, 13 * 4)
+      ctx.fillText(`FPS:${this.fps.toFixed(2)}`, 5, 13 * 5)
+    } else {
+      ctx.fillText("No graph selected", 5, 13 * 1)
+    }
+    ctx.restore()
+  }
+
+  /**
+   * draws the back canvas (the one containing the background and the connections)
+   */
+  drawBackCanvas(): void {
+    const canvas = this.bgcanvas
+    if (
+      canvas.width != this.canvas.width ||
+      canvas.height != this.canvas.height
+    ) {
+      canvas.width = this.canvas.width
+      canvas.height = this.canvas.height
+    }
+
+    if (!this.bgctx) {
+      this.bgctx = this.bgcanvas.getContext("2d")
+    }
+    const ctx = this.bgctx
+    if (!ctx) throw new TypeError("Background canvas context was null.")
+
+    const viewport = this.viewport || [0, 0, ctx.canvas.width, ctx.canvas.height]
+
+    // clear
+    if (this.clear_background) {
+      ctx.clearRect(viewport[0], viewport[1], viewport[2], viewport[3])
+    }
+
+    const bg_already_painted = this.onRenderBackground
+      ? this.onRenderBackground(canvas, ctx)
+      : false
+
+    // reset in case of error
+    if (!this.viewport) {
+      const scale = window.devicePixelRatio
+      ctx.restore()
+      ctx.setTransform(scale, 0, 0, scale, 0, 0)
+    }
+
+    if (this.graph) {
+      // apply transformations
+      ctx.save()
+      this.ds.toCanvasContext(ctx)
+
+      // render BG
+      if (
+        this.ds.scale < 1.5 &&
+        !bg_already_painted &&
+        this.clear_background_color
+      ) {
+        ctx.fillStyle = this.clear_background_color
+        ctx.fillRect(
+          this.visible_area[0],
+          this.visible_area[1],
+          this.visible_area[2],
+          this.visible_area[3],
+        )
+      }
+
+      if (this.background_image && this.ds.scale > 0.5 && !bg_already_painted) {
+        if (this.zoom_modify_alpha) {
+          ctx.globalAlpha = (1.0 - 0.5 / this.ds.scale) * this.editor_alpha
+        } else {
+          ctx.globalAlpha = this.editor_alpha
+        }
+        ctx.imageSmoothingEnabled = false
+        if (!this._bg_img || this._bg_img.name != this.background_image) {
+          this._bg_img = new Image()
+          this._bg_img.name = this.background_image
+          this._bg_img.src = this.background_image
+          const that = this
+          this._bg_img.addEventListener("load", function () {
+            that.draw(true, true)
+          })
+        }
+
+        let pattern = this._pattern
+        if (pattern == null && this._bg_img.width > 0) {
+          pattern = ctx.createPattern(this._bg_img, "repeat") ?? undefined
+          this._pattern_img = this._bg_img
+          this._pattern = pattern
+        }
+
+        // NOTE: This ridiculous kludge provides a significant performance increase when rendering many large (> canvas width) paths in HTML canvas.
+        // I could find no documentation or explanation.  Requires that the BG image is set.
+        if (pattern) {
+          ctx.fillStyle = pattern
+          ctx.fillRect(
+            this.visible_area[0],
+            this.visible_area[1],
+            this.visible_area[2],
+            this.visible_area[3],
+          )
+          ctx.fillStyle = "transparent"
+        }
+
+        ctx.globalAlpha = 1.0
+        ctx.imageSmoothingEnabled = true
+      }
+
+      // groups
+      if (this.graph._groups.length) {
+        this.drawGroups(canvas, ctx)
+      }
+
+      this.onDrawBackground?.(ctx, this.visible_area)
+
+      // DEBUG: show clipping area
+      // ctx.fillStyle = "red";
+      // ctx.fillRect( this.visible_area[0] + 10, this.visible_area[1] + 10, this.visible_area[2] - 20, this.visible_area[3] - 20);
+      // bg
+      if (this.render_canvas_border) {
+        ctx.strokeStyle = "#235"
+        ctx.strokeRect(0, 0, canvas.width, canvas.height)
+      }
+
+      if (this.render_connections_shadows) {
+        ctx.shadowColor = "#000"
+        ctx.shadowOffsetX = 0
+        ctx.shadowOffsetY = 0
+        ctx.shadowBlur = 6
+      } else {
+        ctx.shadowColor = "rgba(0,0,0,0)"
+      }
+
+      // draw connections
+      this.drawConnections(ctx)
+
+      ctx.shadowColor = "rgba(0,0,0,0)"
+
+      // restore state
+      ctx.restore()
+    }
+
+    this.dirty_bgcanvas = false
+    // Forces repaint of the front canvas.
+    this.dirty_canvas = true
+  }
+
+  /**
+   * draws the given node inside the canvas
+   */
+  drawNode(node: LGraphNode, ctx: CanvasRenderingContext2D): void {
+    this.current_node = node
+
+    // Skip all node rendering when Vue nodes mode is enabled
+    if (LiteGraph.vueNodesMode) {
+      return
+    }
+
+    const color = node.renderingColor
+    const bgcolor = node.renderingBgColor
+
+    const { low_quality, editor_alpha } = this
+    ctx.globalAlpha = editor_alpha
+
+    if (this.render_shadows && !low_quality) {
+      ctx.shadowColor = LiteGraph.DEFAULT_SHADOW_COLOR
+      ctx.shadowOffsetX = 2 * this.ds.scale
+      ctx.shadowOffsetY = 2 * this.ds.scale
+      ctx.shadowBlur = 3 * this.ds.scale
+    } else {
+      ctx.shadowColor = "transparent"
+    }
+
+    // custom draw collapsed method (draw after shadows because they are affected)
+    if (node.flags.collapsed && node.onDrawCollapsed?.(ctx, this) == true)
+      return
+
+    // clip if required (mask)
+    const shape = node._shape || RenderShape.BOX
+    const size = LGraphCanvas.#temp_vec2
+    size.set(node.renderingSize)
+
+    if (node.collapsed) {
+      ctx.font = this.inner_text_font
+    }
+
+    if (node.clip_area) {
+      // Start clipping
+      ctx.save()
+      ctx.beginPath()
+      if (shape == RenderShape.BOX) {
+        ctx.rect(0, 0, size[0], size[1])
+      } else if (shape == RenderShape.ROUND) {
+        ctx.roundRect(0, 0, size[0], size[1], [10])
+      } else if (shape == RenderShape.CIRCLE) {
+        ctx.arc(size[0] * 0.5, size[1] * 0.5, size[0] * 0.5, 0, Math.PI * 2)
+      }
+      ctx.clip()
+    }
+
+    // draw shape
+    this.drawNodeShape(
+      node,
+      ctx,
+      size,
+      color,
+      bgcolor,
+      !!node.selected,
+    )
+
+    if (!low_quality) {
+      node.drawBadges(ctx)
+    }
+
+    ctx.shadowColor = "transparent"
+
+    // TODO: Legacy behaviour: onDrawForeground received ctx in this state
+    ctx.strokeStyle = LiteGraph.NODE_BOX_OUTLINE_COLOR
+
+    // Draw Foreground
+    node.onDrawForeground?.(ctx, this, this.canvas)
+
+    // connection slots
+    ctx.font = this.inner_text_font
+
+    // render inputs and outputs
+    node._setConcreteSlots()
+    if (!node.collapsed) {
+      node.arrange()
+      node.drawSlots(ctx, {
+        fromSlot: this.linkConnector.renderLinks[0]?.fromSlot as INodeOutputSlot | INodeInputSlot,
+        colorContext: this.colourGetter,
+        editorAlpha: this.editor_alpha,
+        lowQuality: this.low_quality,
+      })
+
+      ctx.textAlign = "left"
+      ctx.globalAlpha = 1
+
+      this.drawNodeWidgets(node, null, ctx)
+    } else if (this.render_collapsed_slots) {
+      node.drawCollapsedSlots(ctx)
+    }
+
+    if (node.clip_area) {
+      ctx.restore()
+    }
+
+    ctx.globalAlpha = 1.0
+  }
+
+  /**
+   * Draws the link mouseover effect and tooltip.
+   * @param ctx Canvas 2D context to draw on
+   * @param link The link to render the mouseover effect for
+   * @remarks
+   * Called against {@link LGraphCanvas.over_link_center}.
+   * @todo Split tooltip from hover, so it can be drawn / eased separately
+   */
+  drawLinkTooltip(ctx: CanvasRenderingContext2D, link: LinkSegment): void {
+    const pos = link._pos
+    ctx.fillStyle = "black"
+    ctx.beginPath()
+    if (this.linkMarkerShape === LinkMarkerShape.Arrow) {
+      const transform = ctx.getTransform()
+      ctx.translate(pos[0], pos[1])
+      // Assertion: Number.isFinite guarantees this is a number.
+      if (Number.isFinite(link._centreAngle)) ctx.rotate(link._centreAngle as number)
+      ctx.moveTo(-2, -3)
+      ctx.lineTo(+4, 0)
+      ctx.lineTo(-2, +3)
+      ctx.setTransform(transform)
+    } else if (
+      this.linkMarkerShape == null ||
+      this.linkMarkerShape === LinkMarkerShape.Circle
+    ) {
+      ctx.arc(pos[0], pos[1], 3, 0, Math.PI * 2)
+    }
+    ctx.fill()
+
+    // @ts-expect-error TODO: Better value typing
+    const { data } = link
+    if (data == null) return
+
+    // @ts-expect-error TODO: Better value typing
+    if (this.onDrawLinkTooltip?.(ctx, link, this) == true) return
+
+    let text: string | null = null
+
+    if (typeof data === "number")
+      text = data.toFixed(2)
+    else if (typeof data === "string")
+      text = `"${data}"`
+    else if (typeof data === "boolean")
+      text = String(data)
+    else if (data.toToolTip)
+      text = data.toToolTip()
+    else
+      text = `[${data.constructor.name}]`
+
+    if (text == null) return
+
+    // Hard-coded tooltip limit
+    text = text.substring(0, 30)
+
+    ctx.font = "14px Courier New"
+    const info = ctx.measureText(text)
+    const w = info.width + 20
+    const h = 24
+    ctx.shadowColor = "black"
+    ctx.shadowOffsetX = 2
+    ctx.shadowOffsetY = 2
+    ctx.shadowBlur = 3
+    ctx.fillStyle = "#454"
+    ctx.beginPath()
+    ctx.roundRect(pos[0] - w * 0.5, pos[1] - 15 - h, w, h, [3])
+    ctx.moveTo(pos[0] - 10, pos[1] - 15)
+    ctx.lineTo(pos[0] + 10, pos[1] - 15)
+    ctx.lineTo(pos[0], pos[1] - 5)
+    ctx.fill()
+    ctx.shadowColor = "transparent"
+    ctx.textAlign = "center"
+    ctx.fillStyle = "#CEC"
+    ctx.fillText(text, pos[0], pos[1] - 15 - h * 0.3)
+  }
+
+  /**
+   * Draws the shape of the given node on the canvas
+   * @param node The node to draw
+   * @param ctx 2D canvas rendering context used to draw
+   * @param size Size of the background to draw, in graph units.  Differs from node size if collapsed, etc.
+   * @param fgcolor Foreground colour - used for text
+   * @param bgcolor Background colour of the node
+   * @param _selected Whether to render the node as selected.  Likely to be removed in future, as current usage is simply the selected property of the node.
+   */
+  drawNodeShape(
+    node: LGraphNode,
+    ctx: CanvasRenderingContext2D,
+    size: Size,
+    fgcolor: CanvasColour,
+    bgcolor: CanvasColour,
+    _selected: boolean,
+  ): void {
+    // Rendering options
+    ctx.strokeStyle = fgcolor
+    ctx.fillStyle = bgcolor
+
+    const title_height = LiteGraph.NODE_TITLE_HEIGHT
+    const { low_quality } = this
+
+    const { collapsed } = node.flags
+    const shape = node.renderingShape
+    const { title_mode } = node
+
+    const render_title = title_mode == TitleMode.TRANSPARENT_TITLE || title_mode == TitleMode.NO_TITLE
+      ? false
+      : true
+
+    // Normalised node dimensions
+    const area = LGraphCanvas.#tmp_area
+    area.set(node.boundingRect)
+    area[0] -= node.pos[0]
+    area[1] -= node.pos[1]
+
+    const old_alpha = ctx.globalAlpha
+
+    // Draw node background (shape)
+    ctx.beginPath()
+    if (shape == RenderShape.BOX || low_quality) {
+      ctx.rect(area[0], area[1], area[2], area[3])
+    } else if (shape == RenderShape.ROUND || shape == RenderShape.CARD) {
+      ctx.roundRect(
+        area[0],
+        area[1],
+        area[2],
+        area[3],
+        shape == RenderShape.CARD
+          ? [LiteGraph.ROUND_RADIUS, LiteGraph.ROUND_RADIUS, 0, 0]
+          : [LiteGraph.ROUND_RADIUS],
+      )
+    } else if (shape == RenderShape.CIRCLE) {
+      ctx.arc(size[0] * 0.5, size[1] * 0.5, size[0] * 0.5, 0, Math.PI * 2)
+    }
+    ctx.fill()
+
+    // Separator - title bar <-> body
+    if (!collapsed && render_title) {
+      ctx.shadowColor = "transparent"
+      ctx.fillStyle = "rgba(0,0,0,0.2)"
+      ctx.fillRect(0, -1, area[2], 2)
+    }
+    ctx.shadowColor = "transparent"
+
+    node.onDrawBackground?.(ctx)
+
+    // Title bar background (remember, it is rendered ABOVE the node)
+    if (render_title || title_mode == TitleMode.TRANSPARENT_TITLE) {
+      node.drawTitleBarBackground(ctx, {
+        scale: this.ds.scale,
+        low_quality,
+      })
+
+      // title box
+      node.drawTitleBox(ctx, {
+        scale: this.ds.scale,
+        low_quality,
+        box_size: 10,
+      })
+
+      ctx.globalAlpha = old_alpha
+
+      // title text
+      node.drawTitleText(ctx, {
+        scale: this.ds.scale,
+        default_title_color: this.node_title_color,
+        low_quality,
+      })
+
+      // custom title render
+      node.onDrawTitle?.(ctx)
+    }
+
+    // Draw stroke styles
+    for (const getStyle of Object.values(node.strokeStyles)) {
+      const strokeStyle = getStyle.call(node)
+      if (strokeStyle) {
+        strokeShape(ctx, area, {
+          shape,
+          title_height,
+          title_mode,
+          collapsed,
+          ...strokeStyle,
+        })
+      }
+    }
+
+    node.drawProgressBar(ctx)
+
+    // these counter helps in conditioning drawing based on if the node has been executed or an action occurred
+    if (node.execute_triggered != null && node.execute_triggered > 0) node.execute_triggered--
+    if (node.action_triggered != null && node.action_triggered > 0) node.action_triggered--
+  }
+
+  /**
+   * Draws a snap guide for a {@link Positionable} item.
+   *
+   * Initial design was a simple white rectangle representing the location the
+   * item would land if dropped.
+   * @param ctx The 2D canvas context to draw on
+   * @param item The item to draw a snap guide for
+   * @param shape The shape of the snap guide to draw
+   * @todo Update to align snapping with boundingRect
+   * @todo Shapes
+   */
+  drawSnapGuide(
+    ctx: CanvasRenderingContext2D,
+    item: Positionable,
+    shape = RenderShape.ROUND,
+  ) {
+    const snapGuide = LGraphCanvas.#temp
+    snapGuide.set(item.boundingRect)
+
+    // Not all items have pos equal to top-left of bounds
+    const { pos } = item
+    const offsetX = pos[0] - snapGuide[0]
+    const offsetY = pos[1] - snapGuide[1]
+
+    // Normalise boundingRect to pos to snap
+    snapGuide[0] += offsetX
+    snapGuide[1] += offsetY
+    if (this.#snapToGrid) snapPoint(snapGuide, this.#snapToGrid)
+    snapGuide[0] -= offsetX
+    snapGuide[1] -= offsetY
+
+    const { globalAlpha } = ctx
+    ctx.globalAlpha = 1
+    ctx.beginPath()
+    const [x, y, w, h] = snapGuide
+    if (shape === RenderShape.CIRCLE) {
+      const midX = x + (w * 0.5)
+      const midY = y + (h * 0.5)
+      const radius = Math.min(w * 0.5, h * 0.5)
+      ctx.arc(midX, midY, radius, 0, Math.PI * 2)
+    } else {
+      ctx.rect(x, y, w, h)
+    }
+
+    ctx.lineWidth = 0.5
+    ctx.strokeStyle = "#FFFFFF66"
+    ctx.fillStyle = "#FFFFFF22"
+    ctx.fill()
+    ctx.stroke()
+    ctx.globalAlpha = globalAlpha
+  }
+
+  drawConnections(ctx: CanvasRenderingContext2D): void {
+    this.renderedPaths.clear()
+    if (this.links_render_mode === LinkRenderType.HIDDEN_LINK) return
+
+    const { graph, subgraph } = this
+    if (!graph) throw new NullGraphError()
+
+    const visibleReroutes: Reroute[] = []
+
+    const now = LiteGraph.getTime()
+    const { visible_area } = this
+    LGraphCanvas.#margin_area[0] = visible_area[0] - 20
+    LGraphCanvas.#margin_area[1] = visible_area[1] - 20
+    LGraphCanvas.#margin_area[2] = visible_area[2] + 40
+    LGraphCanvas.#margin_area[3] = visible_area[3] + 40
+
+    // draw connections
+    ctx.lineWidth = this.connections_width
+
+    ctx.fillStyle = "#AAA"
+    ctx.strokeStyle = "#AAA"
+    ctx.globalAlpha = this.editor_alpha
+    // for every node
+    const nodes = graph._nodes
+    for (const node of nodes) {
+      // for every input (we render just inputs because it is easier as every slot can only have one input)
+      const { inputs } = node
+      if (!inputs?.length) continue
+
+      for (const [i, input] of inputs.entries()) {
+        if (!input || input.link == null) continue
+
+        const link_id = input.link
+        const link = graph._links.get(link_id)
+        if (!link) continue
+
+        const endPos = node.getInputPos(i)
+
+        // find link info
+        const start_node = graph.getNodeById(link.origin_id)
+        if (start_node == null) continue
+
+        const outputId = link.origin_slot
+        const startPos: Point = outputId === -1
+          ? [start_node.pos[0] + 10, start_node.pos[1] + 10]
+          : start_node.getOutputPos(outputId)
+
+        const output = start_node.outputs[outputId]
+        if (!output) continue
+
+        this.#renderAllLinkSegments(ctx, link, startPos, endPos, visibleReroutes, now, output.dir, input.dir)
+      }
+    }
+
+    if (subgraph) {
+      for (const output of subgraph.inputNode.slots) {
+        if (!output.linkIds.length) continue
+
+        // find link info
+        for (const linkId of output.linkIds) {
+          const resolved = LLink.resolve(linkId, graph)
+          if (!resolved) continue
+
+          const { link, inputNode, input } = resolved
+          if (!inputNode || !input) continue
+
+          const endPos = inputNode.getInputPos(link.target_slot)
+
+          this.#renderAllLinkSegments(ctx, link, output.pos, endPos, visibleReroutes, now, input.dir, input.dir)
+        }
+      }
+
+      for (const input of subgraph.outputNode.slots) {
+        if (!input.linkIds.length) continue
+
+        // find link info
+        const resolved = LLink.resolve(input.linkIds[0], graph)
+        if (!resolved) continue
+
+        const { link, outputNode, output } = resolved
+        if (!outputNode || !output) continue
+
+        const startPos = outputNode.getOutputPos(link.origin_slot)
+
+        this.#renderAllLinkSegments(ctx, link, startPos, input.pos, visibleReroutes, now, output.dir, input.dir)
+      }
+    }
+
+    if (graph.floatingLinks.size > 0) {
+      this.#renderFloatingLinks(ctx, graph, visibleReroutes, now)
+    }
+
+    const rerouteSet = this.#visibleReroutes
+    rerouteSet.clear()
+
+    // Render reroutes, ordered by number of non-floating links
+    visibleReroutes.sort((a, b) => a.linkIds.size - b.linkIds.size)
+    for (const reroute of visibleReroutes) {
+      rerouteSet.add(reroute)
+
+      if (
+        this.#snapToGrid &&
+        this.isDragging &&
+        this.selectedItems.has(reroute)
+      ) {
+        this.drawSnapGuide(ctx, reroute, RenderShape.CIRCLE)
+      }
+      reroute.draw(ctx, this._pattern)
+
+      // Never draw slots when the pointer is down
+      if (!this.pointer.isDown) reroute.drawSlots(ctx)
+    }
+    ctx.globalAlpha = 1
+  }
+
+  #renderFloatingLinks(ctx: CanvasRenderingContext2D, graph: LGraph, visibleReroutes: Reroute[], now: number) {
+    // Render floating links with 3/4 current alpha
+    const { globalAlpha } = ctx
+    ctx.globalAlpha = globalAlpha * 0.33
+
+    // Floating reroutes
+    for (const link of graph.floatingLinks.values()) {
+      const reroutes = LLink.getReroutes(graph, link)
+      const firstReroute = reroutes[0]
+      const reroute = reroutes.at(-1)
+      if (!firstReroute || !reroute?.floating) continue
+
+      // Input not connected
+      if (reroute.floating.slotType === "input") {
+        const node = graph.getNodeById(link.target_id)
+        if (!node) continue
+
+        const startPos = firstReroute.pos
+        const endPos = node.getInputPos(link.target_slot)
+        const endDirection = node.inputs[link.target_slot]?.dir
+
+        firstReroute._dragging = true
+        this.#renderAllLinkSegments(ctx, link, startPos, endPos, visibleReroutes, now, LinkDirection.CENTER, endDirection, true)
+      } else {
+        const node = graph.getNodeById(link.origin_id)
+        if (!node) continue
+
+        const startPos = node.getOutputPos(link.origin_slot)
+        const endPos = reroute.pos
+        const startDirection = node.outputs[link.origin_slot]?.dir
+
+        link._dragging = true
+        this.#renderAllLinkSegments(ctx, link, startPos, endPos, visibleReroutes, now, startDirection, LinkDirection.CENTER, true)
+      }
+    }
+    ctx.globalAlpha = globalAlpha
+  }
+
+  #renderAllLinkSegments(
+    ctx: CanvasRenderingContext2D,
+    link: LLink,
+    startPos: Point,
+    endPos: Point,
+    visibleReroutes: Reroute[],
+    now: number,
+    startDirection?: LinkDirection,
+    endDirection?: LinkDirection,
+    disabled: boolean = false,
+  ) {
+    const { graph, renderedPaths } = this
+    if (!graph) return
+
+    // Get all points this link passes through
+    const reroutes = LLink.getReroutes(graph, link)
+    const points: [Point, ...Point[], Point] = [
+      startPos,
+      ...reroutes.map(x => x.pos),
+      endPos,
+    ]
+
+    // Bounding box of all points (bezier overshoot on long links will be cut)
+    const pointsX = points.map(x => x[0])
+    const pointsY = points.map(x => x[1])
+    LGraphCanvas.#link_bounding[0] = Math.min(...pointsX)
+    LGraphCanvas.#link_bounding[1] = Math.min(...pointsY)
+    LGraphCanvas.#link_bounding[2] = Math.max(...pointsX) - LGraphCanvas.#link_bounding[0]
+    LGraphCanvas.#link_bounding[3] = Math.max(...pointsY) - LGraphCanvas.#link_bounding[1]
+
+    // skip links outside of the visible area of the canvas
+    if (!overlapBounding(LGraphCanvas.#link_bounding, LGraphCanvas.#margin_area))
+      return
+
+    const start_dir = startDirection || LinkDirection.RIGHT
+    const end_dir = endDirection || LinkDirection.LEFT
+
+    // Has reroutes
+    if (reroutes.length) {
+      let startControl: Point | undefined
+
+      const l = reroutes.length
+      for (let j = 0; j < l; j++) {
+        const reroute = reroutes[j]
+
+        // Only render once
+        if (!renderedPaths.has(reroute)) {
+          renderedPaths.add(reroute)
+          visibleReroutes.push(reroute)
+          reroute._colour = link.color ||
+            LGraphCanvas.link_type_colors[link.type] ||
+            this.default_link_color
+
+          const prevReroute = graph.getReroute(reroute.parentId)
+          const rerouteStartPos = prevReroute?.pos ?? startPos
+          reroute.calculateAngle(this.last_draw_time, graph, rerouteStartPos)
+
+          // Skip the first segment if it is being dragged
+          if (!reroute._dragging) {
+            this.renderLink(
+              ctx,
+              rerouteStartPos,
+              reroute.pos,
+              link,
+              false,
+              0,
+              null,
+              startControl === undefined ? start_dir : LinkDirection.CENTER,
+              LinkDirection.CENTER,
+              {
+                startControl,
+                endControl: reroute.controlPoint,
+                reroute,
+                disabled,
+              },
+            )
+          }
+        }
+
+        if (!startControl && reroutes.at(-1)?.floating?.slotType === "input") {
+          // Floating link connected to an input
+          startControl = [0, 0]
+        } else {
+          // Calculate start control for the next iter control point
+          const nextPos = reroutes[j + 1]?.pos ?? endPos
+          const dist = Math.min(Reroute.maxSplineOffset, distance(reroute.pos, nextPos) * 0.25)
+          startControl = [dist * reroute.cos, dist * reroute.sin]
+        }
+      }
+
+      // Skip the last segment if it is being dragged
+      if (link._dragging) return
+
+      // Use runtime fallback; TypeScript cannot evaluate this correctly.
+      const segmentStartPos = points.at(-2) ?? startPos
+
+      // Render final link segment
+      this.renderLink(
+        ctx,
+        segmentStartPos,
+        endPos,
+        link,
+        false,
+        0,
+        null,
+        LinkDirection.CENTER,
+        end_dir,
+        { startControl, disabled },
+      )
+      // Skip normal render when link is being dragged
+    } else if (!link._dragging) {
+      this.renderLink(
+        ctx,
+        startPos,
+        endPos,
+        link,
+        false,
+        0,
+        null,
+        start_dir,
+        end_dir,
+      )
+    }
+    renderedPaths.add(link)
+
+    // event triggered rendered on top
+    if (link?._last_time && now - link._last_time < 1000) {
+      const f = 2.0 - (now - link._last_time) * 0.002
+      const tmp = ctx.globalAlpha
+      ctx.globalAlpha = tmp * f
+      this.renderLink(
+        ctx,
+        startPos,
+        endPos,
+        link,
+        true,
+        f,
+        "white",
+        start_dir,
+        end_dir,
+      )
+      ctx.globalAlpha = tmp
+    }
+  }
+
+  /**
+   * draws a link between two points
+   * @param ctx Canvas 2D rendering context
+   * @param a start pos
+   * @param b end pos
+   * @param link the link object with all the link info
+   * @param skip_border ignore the shadow of the link
+   * @param flow show flow animation (for events)
+   * @param color the color for the link
+   * @param start_dir the direction enum
+   * @param end_dir the direction enum
+   */
+  renderLink(
+    ctx: CanvasRenderingContext2D,
+    a: ReadOnlyPoint,
+    b: ReadOnlyPoint,
+    link: LLink | null,
+    skip_border: boolean,
+    flow: number | null,
+    color: CanvasColour | null,
+    start_dir: LinkDirection,
+    end_dir: LinkDirection,
+    {
+      startControl,
+      endControl,
+      reroute,
+      num_sublines = 1,
+      disabled = false,
+    }: {
+      /** When defined, render data will be saved to this reroute instead of the {@link link}. */
+      reroute?: Reroute
+      /** Offset of the bezier curve control point from {@link a point a} (output side) */
+      startControl?: ReadOnlyPoint
+      /** Offset of the bezier curve control point from {@link b point b} (input side) */
+      endControl?: ReadOnlyPoint
+      /** Number of sublines (useful to represent vec3 or rgb) @todo If implemented, refactor calculations out of the loop */
+      num_sublines?: number
+      /** Whether this is a floating link segment */
+      disabled?: boolean
+    } = {},
+  ): void {
+    const linkColour =
+      link != null && this.highlighted_links[link.id]
+        ? "#FFF"
+        : color ||
+          link?.color ||
+          (link?.type != null && LGraphCanvas.link_type_colors[link.type]) ||
+          this.default_link_color
+    const startDir = start_dir || LinkDirection.RIGHT
+    const endDir = end_dir || LinkDirection.LEFT
+
+    const dist = this.links_render_mode == LinkRenderType.SPLINE_LINK && (!endControl || !startControl)
+      ? distance(a, b)
+      : 0
+
+    // TODO: Subline code below was inserted in the wrong place - should be before this statement
+    if (this.render_connections_border && !this.low_quality) {
+      ctx.lineWidth = this.connections_width + 4
+    }
+    ctx.lineJoin = "round"
+    num_sublines ||= 1
+    if (num_sublines > 1) ctx.lineWidth = 0.5
+
+    // begin line shape
+    const path = new Path2D()
+
+    /** The link or reroute we're currently rendering */
+    const linkSegment = reroute ?? link
+    if (linkSegment) linkSegment.path = path
+
+    const innerA = LGraphCanvas.#lTempA
+    const innerB = LGraphCanvas.#lTempB
+
+    /** Reference to {@link reroute._pos} if present, or {@link link._pos} if present.  Caches the centre point of the link. */
+    const pos: Point = linkSegment?._pos ?? [0, 0]
+
+    for (let i = 0; i < num_sublines; i++) {
+      const offsety = (i - (num_sublines - 1) * 0.5) * 5
+      innerA[0] = a[0]
+      innerA[1] = a[1]
+      innerB[0] = b[0]
+      innerB[1] = b[1]
+
+      if (this.links_render_mode == LinkRenderType.SPLINE_LINK) {
+        if (endControl) {
+          innerB[0] = b[0] + endControl[0]
+          innerB[1] = b[1] + endControl[1]
+        } else {
+          this.#addSplineOffset(innerB, endDir, dist)
+        }
+        if (startControl) {
+          innerA[0] = a[0] + startControl[0]
+          innerA[1] = a[1] + startControl[1]
+        } else {
+          this.#addSplineOffset(innerA, startDir, dist)
+        }
+        path.moveTo(a[0], a[1] + offsety)
+        path.bezierCurveTo(
+          innerA[0],
+          innerA[1] + offsety,
+          innerB[0],
+          innerB[1] + offsety,
+          b[0],
+          b[1] + offsety,
+        )
+
+        // Calculate centre point
+        findPointOnCurve(pos, a, b, innerA, innerB, 0.5)
+
+        if (linkSegment && this.linkMarkerShape === LinkMarkerShape.Arrow) {
+          const justPastCentre = LGraphCanvas.#lTempC
+          findPointOnCurve(justPastCentre, a, b, innerA, innerB, 0.51)
+
+          linkSegment._centreAngle = Math.atan2(
+            justPastCentre[1] - pos[1],
+            justPastCentre[0] - pos[0],
+          )
+        }
+      } else {
+        const l = this.links_render_mode == LinkRenderType.LINEAR_LINK ? 15 : 10
+        switch (startDir) {
+        case LinkDirection.LEFT:
+          innerA[0] += -l
+          break
+        case LinkDirection.RIGHT:
+          innerA[0] += l
+          break
+        case LinkDirection.UP:
+          innerA[1] += -l
+          break
+        case LinkDirection.DOWN:
+          innerA[1] += l
+          break
+        }
+        switch (endDir) {
+        case LinkDirection.LEFT:
+          innerB[0] += -l
+          break
+        case LinkDirection.RIGHT:
+          innerB[0] += l
+          break
+        case LinkDirection.UP:
+          innerB[1] += -l
+          break
+        case LinkDirection.DOWN:
+          innerB[1] += l
+          break
+        }
+        if (this.links_render_mode == LinkRenderType.LINEAR_LINK) {
+          path.moveTo(a[0], a[1] + offsety)
+          path.lineTo(innerA[0], innerA[1] + offsety)
+          path.lineTo(innerB[0], innerB[1] + offsety)
+          path.lineTo(b[0], b[1] + offsety)
+
+          // Calculate centre point
+          pos[0] = (innerA[0] + innerB[0]) * 0.5
+          pos[1] = (innerA[1] + innerB[1]) * 0.5
+
+          if (linkSegment && this.linkMarkerShape === LinkMarkerShape.Arrow) {
+            linkSegment._centreAngle = Math.atan2(
+              innerB[1] - innerA[1],
+              innerB[0] - innerA[0],
+            )
+          }
+        } else if (this.links_render_mode == LinkRenderType.STRAIGHT_LINK) {
+          const midX = (innerA[0] + innerB[0]) * 0.5
+
+          path.moveTo(a[0], a[1])
+          path.lineTo(innerA[0], innerA[1])
+          path.lineTo(midX, innerA[1])
+          path.lineTo(midX, innerB[1])
+          path.lineTo(innerB[0], innerB[1])
+          path.lineTo(b[0], b[1])
+
+          // Calculate centre point
+          pos[0] = midX
+          pos[1] = (innerA[1] + innerB[1]) * 0.5
+
+          if (linkSegment && this.linkMarkerShape === LinkMarkerShape.Arrow) {
+            const diff = innerB[1] - innerA[1]
+            if (Math.abs(diff) < 4) linkSegment._centreAngle = 0
+            else if (diff > 0) linkSegment._centreAngle = Math.PI * 0.5
+            else linkSegment._centreAngle = -(Math.PI * 0.5)
+          }
+        } else {
+          return
+        }
+      }
+    }
+
+    // rendering the outline of the connection can be a little bit slow
+    if (this.render_connections_border && !this.low_quality && !skip_border) {
+      ctx.strokeStyle = "rgba(0,0,0,0.5)"
+      ctx.stroke(path)
+    }
+
+    ctx.lineWidth = this.connections_width
+    ctx.fillStyle = ctx.strokeStyle = linkColour
+    ctx.stroke(path)
+
+    // render arrow in the middle
+    if (
+      this.ds.scale >= 0.6 &&
+      this.highquality_render &&
+      linkSegment
+    ) {
+      // render arrow
+      if (this.render_connection_arrows) {
+        // compute two points in the connection
+        const posA = this.computeConnectionPoint(a, b, 0.25, startDir, endDir)
+        const posB = this.computeConnectionPoint(a, b, 0.26, startDir, endDir)
+        const posC = this.computeConnectionPoint(a, b, 0.75, startDir, endDir)
+        const posD = this.computeConnectionPoint(a, b, 0.76, startDir, endDir)
+
+        // compute the angle between them so the arrow points in the right direction
+        let angleA = 0
+        let angleB = 0
+        if (this.render_curved_connections) {
+          angleA = -Math.atan2(posB[0] - posA[0], posB[1] - posA[1])
+          angleB = -Math.atan2(posD[0] - posC[0], posD[1] - posC[1])
+        } else {
+          angleB = angleA = b[1] > a[1] ? 0 : Math.PI
+        }
+
+        // render arrow
+        const transform = ctx.getTransform()
+        ctx.translate(posA[0], posA[1])
+        ctx.rotate(angleA)
+        ctx.beginPath()
+        ctx.moveTo(-5, -3)
+        ctx.lineTo(0, +7)
+        ctx.lineTo(+5, -3)
+        ctx.fill()
+        ctx.setTransform(transform)
+
+        ctx.translate(posC[0], posC[1])
+        ctx.rotate(angleB)
+        ctx.beginPath()
+        ctx.moveTo(-5, -3)
+        ctx.lineTo(0, +7)
+        ctx.lineTo(+5, -3)
+        ctx.fill()
+        ctx.setTransform(transform)
+      }
+
+      // Draw link centre marker
+      ctx.beginPath()
+      if (this.linkMarkerShape === LinkMarkerShape.Arrow) {
+        const transform = ctx.getTransform()
+        ctx.translate(pos[0], pos[1])
+        if (linkSegment._centreAngle) ctx.rotate(linkSegment._centreAngle)
+        // The math is off, but it currently looks better in chromium
+        ctx.moveTo(-3.2, -5)
+        ctx.lineTo(+7, 0)
+        ctx.lineTo(-3.2, +5)
+        ctx.setTransform(transform)
+      } else if (
+        this.linkMarkerShape == null ||
+        this.linkMarkerShape === LinkMarkerShape.Circle
+      ) {
+        ctx.arc(pos[0], pos[1], 5, 0, Math.PI * 2)
+      }
+      if (disabled) {
+        const { fillStyle, globalAlpha } = ctx
+        ctx.fillStyle = this._pattern ?? "#797979"
+        ctx.globalAlpha = 0.75
+        ctx.fill()
+        ctx.globalAlpha = globalAlpha
+        ctx.fillStyle = fillStyle
+      }
+      ctx.fill()
+
+      if (LLink._drawDebug) {
+        const { fillStyle, font, globalAlpha, lineWidth, strokeStyle } = ctx
+        ctx.globalAlpha = 1
+        ctx.lineWidth = 4
+        ctx.fillStyle = "white"
+        ctx.strokeStyle = "black"
+        ctx.font = "16px Arial"
+
+        const text = String(linkSegment.id)
+        const { width, actualBoundingBoxAscent } = ctx.measureText(text)
+        const x = pos[0] - width * 0.5
+        const y = pos[1] + actualBoundingBoxAscent * 0.5
+        ctx.strokeText(text, x, y)
+        ctx.fillText(text, x, y)
+
+        ctx.font = font
+        ctx.globalAlpha = globalAlpha
+        ctx.lineWidth = lineWidth
+        ctx.fillStyle = fillStyle
+        ctx.strokeStyle = strokeStyle
+      }
+    }
+
+    // render flowing points
+    if (flow) {
+      ctx.fillStyle = linkColour
+      for (let i = 0; i < 5; ++i) {
+        const f = (LiteGraph.getTime() * 0.001 + i * 0.2) % 1
+        const flowPos = this.computeConnectionPoint(a, b, f, startDir, endDir)
+        ctx.beginPath()
+        ctx.arc(flowPos[0], flowPos[1], 5, 0, 2 * Math.PI)
+        ctx.fill()
+      }
+    }
+  }
+
+  /**
+   * Finds a point along a spline represented by a to b, with spline endpoint directions dictacted by start_dir and end_dir.
+   * @param a Start point
+   * @param b End point
+   * @param t Time: distance between points (e.g 0.25 is 25% along the line)
+   * @param start_dir Spline start direction
+   * @param end_dir Spline end direction
+   * @returns The point at {@link t} distance along the spline a-b.
+   */
+  computeConnectionPoint(
+    a: ReadOnlyPoint,
+    b: ReadOnlyPoint,
+    t: number,
+    start_dir: LinkDirection,
+    end_dir: LinkDirection,
+  ): Point {
+    start_dir ||= LinkDirection.RIGHT
+    end_dir ||= LinkDirection.LEFT
+
+    const dist = distance(a, b)
+    const pa: Point = [a[0], a[1]]
+    const pb: Point = [b[0], b[1]]
+
+    this.#addSplineOffset(pa, start_dir, dist)
+    this.#addSplineOffset(pb, end_dir, dist)
+
+    const c1 = (1 - t) * (1 - t) * (1 - t)
+    const c2 = 3 * ((1 - t) * (1 - t)) * t
+    const c3 = 3 * (1 - t) * (t * t)
+    const c4 = t * t * t
+
+    const x = c1 * a[0] + c2 * pa[0] + c3 * pb[0] + c4 * b[0]
+    const y = c1 * a[1] + c2 * pa[1] + c3 * pb[1] + c4 * b[1]
+    return [x, y]
+  }
+
+  /**
+   * Modifies an existing point, adding a single-axis offset.
+   * @param point The point to add the offset to
+   * @param direction The direction to add the offset in
+   * @param dist Distance to offset
+   * @param factor Distance is mulitplied by this value.  Default: 0.25
+   */
+  #addSplineOffset(
+    point: Point,
+    direction: LinkDirection,
+    dist: number,
+    factor = 0.25,
+  ): void {
+    switch (direction) {
+    case LinkDirection.LEFT:
+      point[0] += dist * -factor
+      break
+    case LinkDirection.RIGHT:
+      point[0] += dist * factor
+      break
+    case LinkDirection.UP:
+      point[1] += dist * -factor
+      break
+    case LinkDirection.DOWN:
+      point[1] += dist * factor
+      break
+    }
+  }
+
+  drawExecutionOrder(ctx: CanvasRenderingContext2D): void {
+    ctx.shadowColor = "transparent"
+    ctx.globalAlpha = 0.25
+
+    ctx.textAlign = "center"
+    ctx.strokeStyle = "white"
+    ctx.globalAlpha = 0.75
+
+    const { visible_nodes } = this
+    for (const node of visible_nodes) {
+      ctx.fillStyle = "black"
+      ctx.fillRect(
+        node.pos[0] - LiteGraph.NODE_TITLE_HEIGHT,
+        node.pos[1] - LiteGraph.NODE_TITLE_HEIGHT,
+        LiteGraph.NODE_TITLE_HEIGHT,
+        LiteGraph.NODE_TITLE_HEIGHT,
+      )
+      if (node.order == 0) {
+        ctx.strokeRect(
+          node.pos[0] - LiteGraph.NODE_TITLE_HEIGHT + 0.5,
+          node.pos[1] - LiteGraph.NODE_TITLE_HEIGHT + 0.5,
+          LiteGraph.NODE_TITLE_HEIGHT,
+          LiteGraph.NODE_TITLE_HEIGHT,
+        )
+      }
+      ctx.fillStyle = "#FFF"
+      ctx.fillText(
+        stringOrEmpty(node.order),
+        node.pos[0] + LiteGraph.NODE_TITLE_HEIGHT * -0.5,
+        node.pos[1] - 6,
+      )
+    }
+    ctx.globalAlpha = 1
+  }
+
+  /**
+   * draws the widgets stored inside a node
+   * @deprecated Use {@link LGraphNode.drawWidgets} instead.
+   * @remarks Currently there are extensions hijacking this function, so we cannot remove it.
+   */
+  drawNodeWidgets(
+    node: LGraphNode,
+    _posY: null,
+    ctx: CanvasRenderingContext2D,
+  ): void {
+    node.drawWidgets(ctx, {
+      lowQuality: this.low_quality,
+      editorAlpha: this.editor_alpha,
+    })
+  }
+
+  /**
+   * draws every group area in the background
+   */
+  drawGroups(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D): void {
+    if (!this.graph) return
+
+    const groups = this.graph._groups
+
+    ctx.save()
+    ctx.globalAlpha = 0.5 * this.editor_alpha
+    const drawSnapGuides = this.#snapToGrid && this.isDragging
+
+    for (const group of groups) {
+      // out of the visible area
+      if (!overlapBounding(this.visible_area, group._bounding)) {
+        continue
+      }
+
+      // Draw snap shadow
+      if (drawSnapGuides && this.selectedItems.has(group))
+        this.drawSnapGuide(ctx, group)
+
+      group.draw(this, ctx)
+    }
+
+    ctx.restore()
+  }
+
+  /**
+   * resizes the canvas to a given size, if no size is passed, then it tries to fill the parentNode
+   * @todo Remove or rewrite
+   */
+  resize(width?: number, height?: number): void {
+    if (!width && !height) {
+      const parent = this.canvas.parentElement
+      if (!parent) throw new TypeError("Attempted to resize canvas, but parent element was null.")
+      width = parent.offsetWidth
+      height = parent.offsetHeight
+    }
+
+    if (this.canvas.width == width && this.canvas.height == height) return
+
+    this.canvas.width = width ?? 0
+    this.canvas.height = height ?? 0
+    this.bgcanvas.width = this.canvas.width
+    this.bgcanvas.height = this.canvas.height
+    this.setDirty(true, true)
+  }
+
+  onNodeSelectionChange(): void {}
+
+  /**
+   * Determines the furthest nodes in each direction for the currently selected nodes
+   */
+  boundaryNodesForSelection(): NullableProperties<IBoundaryNodes> {
+    return LGraphCanvas.getBoundaryNodes(this.selected_nodes)
+  }
+
+  showLinkMenu(segment: LinkSegment, e: CanvasMouseEvent): boolean {
+    const { graph } = this
+    if (!graph) throw new NullGraphError()
+
+    const title = "data" in segment && segment.data != null
+      ? segment.data.constructor.name
+      : undefined
+
+    const { origin_id, origin_slot } = segment
+    if (origin_id == null || origin_slot == null) {
+      new LiteGraph.ContextMenu<string>(["Link has no origin"], {
+        event: e,
+        title,
+      })
+      return false
+    }
+
+    const node_left = graph.getNodeById(origin_id)
+    const fromType = node_left?.outputs?.[origin_slot]?.type
+
+    const options = ["Add Node", "Add Reroute", null, "Delete", null]
+
+    const menu = new LiteGraph.ContextMenu<string>(options, {
+      event: e,
+      title,
+      callback: inner_clicked.bind(this),
+    })
+
+    return false
+
+    function inner_clicked(this: LGraphCanvas, v: string, options: unknown, e: MouseEvent) {
+      if (!graph) throw new NullGraphError()
+
+      switch (v) {
+      case "Add Node":
+        LGraphCanvas.onMenuAdd(null, null, e, menu, (node) => {
+          if (!node?.inputs?.length || !node?.outputs?.length || origin_slot == null) return
+
+          // leave the connection type checking inside connectByType
+          const options = { afterRerouteId: segment.parentId }
+          if (node_left?.connectByType(origin_slot, node, fromType ?? "*", options)) {
+            node.pos[0] -= node.size[0] * 0.5
+          }
+        })
+        break
+
+      case "Add Reroute": {
+        try {
+          this.emitBeforeChange()
+          this.adjustMouseEvent(e)
+          graph.createReroute(segment._pos, segment)
+          this.setDirty(false, true)
+        } catch (error) {
+          console.error(error)
+        } finally {
+          this.emitAfterChange()
+        }
+        break
+      }
+
+      case "Delete":
+        graph.removeLink(segment.id)
+        break
+      default:
+      }
+    }
+  }
+
+  createDefaultNodeForSlot(optPass: ICreateDefaultNodeOptions): boolean {
+    type DefaultOptions = ICreateDefaultNodeOptions & {
+      posAdd: Point
+      posSizeFix: Point
+    }
+
+    const opts = Object.assign<DefaultOptions, ICreateDefaultNodeOptions>({
+      nodeFrom: null,
+      slotFrom: null,
+      nodeTo: null,
+      slotTo: null,
+      position: [0, 0],
+      nodeType: undefined,
+      posAdd: [0, 0],
+      posSizeFix: [0, 0],
+    }, optPass)
+    const { afterRerouteId } = opts
+
+    const isFrom = opts.nodeFrom && opts.slotFrom !== null
+    const isTo = !isFrom && opts.nodeTo && opts.slotTo !== null
+
+    if (!isFrom && !isTo) {
+      console.warn(`No data passed to createDefaultNodeForSlot`, opts.nodeFrom, opts.slotFrom, opts.nodeTo, opts.slotTo)
+      return false
+    }
+    if (!opts.nodeType) {
+      console.warn("No type to createDefaultNodeForSlot")
+      return false
+    }
+
+    const nodeX = isFrom ? opts.nodeFrom : opts.nodeTo
+    if (!nodeX) throw new TypeError("nodeX was null when creating default node for slot.")
+
+    let slotX = isFrom ? opts.slotFrom : opts.slotTo
+
+    let iSlotConn: number | false = false
+    if (nodeX instanceof SubgraphIONodeBase) {
+      if (typeof slotX !== "object" || !slotX) {
+        console.warn("Cant get slot information", slotX)
+        return false
+      }
+      const { name } = slotX
+      iSlotConn = nodeX.slots.findIndex(s => s.name === name)
+      slotX = nodeX.slots[iSlotConn]
+      if (!slotX) {
+        console.warn("Cant get slot information", slotX)
+        return false
+      }
+    } else {
+      switch (typeof slotX) {
+      case "string":
+        iSlotConn = isFrom ? nodeX.findOutputSlot(slotX, false) : nodeX.findInputSlot(slotX, false)
+        slotX = isFrom ? nodeX.outputs[slotX] : nodeX.inputs[slotX]
+        break
+      case "object":
+        if (slotX === null) {
+          console.warn("Cant get slot information", slotX)
+          return false
+        }
+
+        // ok slotX
+        iSlotConn = isFrom ? nodeX.findOutputSlot(slotX.name) : nodeX.findInputSlot(slotX.name)
+        break
+      case "number":
+        iSlotConn = slotX
+        slotX = isFrom ? nodeX.outputs[slotX] : nodeX.inputs[slotX]
+        break
+      case "undefined":
+      default:
+        console.warn("Cant get slot information", slotX)
+        return false
+      }
+    }
+
+    // check for defaults nodes for this slottype
+    const fromSlotType = slotX.type == LiteGraph.EVENT ? "_event_" : slotX.type
+    const slotTypesDefault = isFrom
+      ? LiteGraph.slot_types_default_out
+      : LiteGraph.slot_types_default_in
+    if (slotTypesDefault?.[fromSlotType]) {
+      // TODO: Remove "any" kludge
+      let nodeNewType: any = false
+      if (typeof slotTypesDefault[fromSlotType] == "object") {
+        for (const typeX in slotTypesDefault[fromSlotType]) {
+          if (
+            opts.nodeType == slotTypesDefault[fromSlotType][typeX] ||
+            opts.nodeType == "AUTO"
+          ) {
+            nodeNewType = slotTypesDefault[fromSlotType][typeX]
+            break
+          }
+        }
+      } else if (
+        opts.nodeType == slotTypesDefault[fromSlotType] ||
+        opts.nodeType == "AUTO"
+      ) {
+        nodeNewType = slotTypesDefault[fromSlotType]
+      }
+      if (nodeNewType) {
+        // TODO: Remove "any" kludge
+        let nodeNewOpts: any = false
+        if (typeof nodeNewType == "object" && nodeNewType.node) {
+          nodeNewOpts = nodeNewType
+          nodeNewType = nodeNewType.node
+        }
+
+        // that.graph.beforeChange();
+        const newNode = LiteGraph.createNode(nodeNewType)
+        if (newNode) {
+          // if is object pass options
+          if (nodeNewOpts) {
+            if (nodeNewOpts.properties) {
+              for (const i in nodeNewOpts.properties) {
+                newNode.addProperty(i, nodeNewOpts.properties[i])
+              }
+            }
+            if (nodeNewOpts.inputs) {
+              newNode.inputs = []
+              for (const i in nodeNewOpts.inputs) {
+                newNode.addOutput(
+                  nodeNewOpts.inputs[i][0],
+                  nodeNewOpts.inputs[i][1],
+                )
+              }
+            }
+            if (nodeNewOpts.outputs) {
+              newNode.outputs = []
+              for (const i in nodeNewOpts.outputs) {
+                newNode.addOutput(
+                  nodeNewOpts.outputs[i][0],
+                  nodeNewOpts.outputs[i][1],
+                )
+              }
+            }
+            if (nodeNewOpts.title) {
+              newNode.title = nodeNewOpts.title
+            }
+            if (nodeNewOpts.json) {
+              newNode.configure(nodeNewOpts.json)
+            }
+          }
+
+          // add the node
+          if (!this.graph) throw new NullGraphError()
+
+          this.graph.add(newNode)
+          newNode.pos = [
+            opts.position[0] + opts.posAdd[0] + (opts.posSizeFix[0] ? opts.posSizeFix[0] * newNode.size[0] : 0),
+            opts.position[1] + opts.posAdd[1] + (opts.posSizeFix[1] ? opts.posSizeFix[1] * newNode.size[1] : 0),
+          ]
+
+          // Interim API - allow the link connection to be canceled.
+          // TODO: https://github.com/Comfy-Org/litegraph.js/issues/946
+          const detail = { node: newNode, opts }
+          const mayConnectLinks = this.canvas.dispatchEvent(new CustomEvent("connect-new-default-node", { detail, cancelable: true }))
+          if (!mayConnectLinks) return true
+
+          // connect the two!
+          if (isFrom) {
+            if (!opts.nodeFrom) throw new TypeError("createDefaultNodeForSlot - nodeFrom was null")
+            opts.nodeFrom.connectByType(iSlotConn, newNode, fromSlotType, { afterRerouteId })
+          } else {
+            if (!opts.nodeTo) throw new TypeError("createDefaultNodeForSlot - nodeTo was null")
+            opts.nodeTo.connectByTypeOutput(iSlotConn, newNode, fromSlotType, { afterRerouteId })
+          }
+
+          // if connecting in between
+          if (isFrom && isTo) {
+            // TODO
+          }
+
+          return true
+        }
+        console.log(`failed creating ${nodeNewType}`)
+      }
+    }
+    return false
+  }
+
+  showConnectionMenu(optPass: Partial<ICreateNodeOptions & { e: MouseEvent }>): ContextMenu<string> | undefined {
+    const opts = Object.assign<ICreateNodeOptions & HasShowSearchCallback, ICreateNodeOptions>({
+      nodeFrom: null,
+      slotFrom: null,
+      nodeTo: null,
+      slotTo: null,
+      e: undefined,
+      allow_searchbox: this.allow_searchbox,
+      showSearchBox: this.showSearchBox,
+    }, optPass || {})
+    const dirty = () => this.#dirty()
+    const that = this
+    const { graph } = this
+    const { afterRerouteId } = opts
+
+    const isFrom = opts.nodeFrom && opts.slotFrom
+    const isTo = !isFrom && opts.nodeTo && opts.slotTo
+
+    if (!isFrom && !isTo) {
+      console.warn("No data passed to showConnectionMenu")
+      return
+    }
+
+    const nodeX = isFrom ? opts.nodeFrom : opts.nodeTo
+    if (!nodeX) throw new TypeError("nodeX was null when creating default node for slot.")
+    let slotX = isFrom ? opts.slotFrom : opts.slotTo
+
+    let iSlotConn: number
+    if (nodeX instanceof SubgraphIONodeBase) {
+      if (typeof slotX !== "object" || !slotX) {
+        console.warn("Cant get slot information", slotX)
+        return
+      }
+      const { name } = slotX
+      iSlotConn = nodeX.slots.findIndex(s => s.name === name)
+      slotX = nodeX.slots[iSlotConn]
+      if (!slotX) {
+        console.warn("Cant get slot information", slotX)
+        return
+      }
+    } else {
+      switch (typeof slotX) {
+      case "string":
+        iSlotConn = isFrom
+          ? nodeX.findOutputSlot(slotX, false)
+          : nodeX.findInputSlot(slotX, false)
+        slotX = isFrom ? nodeX.outputs[slotX] : nodeX.inputs[slotX]
+        break
+      case "object":
+        if (slotX === null) {
+          console.warn("Cant get slot information", slotX)
+          return
+        }
+
+        // ok slotX
+        iSlotConn = isFrom
+          ? nodeX.findOutputSlot(slotX.name)
+          : nodeX.findInputSlot(slotX.name)
+        break
+      case "number":
+        iSlotConn = slotX
+        slotX = isFrom ? nodeX.outputs[slotX] : nodeX.inputs[slotX]
+        break
+      default:
+        console.warn("Cant get slot information", slotX)
+        return
+      }
+    }
+
+    const options = ["Add Node", "Add Reroute", null]
+
+    if (opts.allow_searchbox) {
+      options.push("Search", null)
+    }
+
+    // get defaults nodes for this slottype
+    const fromSlotType = slotX.type == LiteGraph.EVENT ? "_event_" : slotX.type
+    const slotTypesDefault = isFrom
+      ? LiteGraph.slot_types_default_out
+      : LiteGraph.slot_types_default_in
+    if (slotTypesDefault?.[fromSlotType]) {
+      if (typeof slotTypesDefault[fromSlotType] == "object") {
+        for (const typeX in slotTypesDefault[fromSlotType]) {
+          options.push(slotTypesDefault[fromSlotType][typeX])
+        }
+      } else {
+        options.push(slotTypesDefault[fromSlotType])
+      }
+    }
+
+    // build menu
+    const menu = new LiteGraph.ContextMenu<string>(options, {
+      event: opts.e,
+      extra: slotX,
+      title:
+        (slotX && slotX.name != ""
+          ? slotX.name + (fromSlotType ? " | " : "")
+          : "") + (slotX && fromSlotType ? fromSlotType : ""),
+      callback: inner_clicked,
+    })
+
+    return menu
+
+    // callback
+    function inner_clicked(v: string | undefined, options: IContextMenuOptions<string, INodeInputSlot | INodeOutputSlot>, e: MouseEvent) {
+      switch (v) {
+      case "Add Node":
+        LGraphCanvas.onMenuAdd(null, null, e, menu, function (node) {
+          if (!node) return
+
+          if (isFrom) {
+            if (!opts.nodeFrom) throw new TypeError("Cannot add node to SubgraphInputNode: nodeFrom was null")
+            const slot = opts.nodeFrom.connectByType(iSlotConn, node, fromSlotType, { afterRerouteId })
+            if (!slot) console.warn("Failed to make new connection.")
+            // }
+          } else {
+            if (!opts.nodeTo) throw new TypeError("Cannot add node to SubgraphInputNode: nodeTo was null")
+            opts.nodeTo.connectByTypeOutput(iSlotConn, node, fromSlotType, { afterRerouteId })
+          }
+        })
+        break
+      case "Add Reroute":{
+        const node = isFrom ? opts.nodeFrom : opts.nodeTo
+        const slot = options.extra
+
+        if (!graph) throw new NullGraphError()
+        if (!node) throw new TypeError("Cannot add reroute: node was null")
+        if (!slot) throw new TypeError("Cannot add reroute: slot was null")
+        if (!opts.e) throw new TypeError("Cannot add reroute: CanvasPointerEvent was null")
+
+        if (node instanceof SubgraphIONodeBase) {
+          throw new TypeError("Cannot add floating reroute to Subgraph IO Nodes")
+        } else {
+          const reroute = node.connectFloatingReroute([opts.e.canvasX, opts.e.canvasY], slot, afterRerouteId)
+          if (!reroute) throw new Error("Failed to create reroute")
+        }
+
+        dirty()
+        break
+      }
+      case "Search":
+        if (isFrom) {
+          // @ts-expect-error Subgraph
+          opts.showSearchBox(e, { node_from: opts.nodeFrom, slot_from: slotX, type_filter_in: fromSlotType })
+        } else {
+          // @ts-expect-error Subgraph
+          opts.showSearchBox(e, { node_to: opts.nodeTo, slot_from: slotX, type_filter_out: fromSlotType })
+        }
+        break
+      default: {
+        const customProps = {
+          position: [opts.e?.canvasX ?? 0, opts.e?.canvasY ?? 0],
+          nodeType: v,
+          afterRerouteId,
+        } satisfies Partial<ICreateDefaultNodeOptions>
+
+        const options = Object.assign(opts, customProps)
+        if (!that.createDefaultNodeForSlot(options))
+          break
+      }
+      }
+    }
+  }
+
+  // refactor: there are different dialogs, some uses createDialog some dont
+  prompt(
+    title: string,
+    value: any,
+    callback: (arg0: any) => void,
+    event: CanvasMouseEvent,
+    multiline?: boolean,
+  ): HTMLDivElement {
+    const that = this
+    title = title || ""
+
+    const customProperties = {
+      is_modified: false,
+      className: "graphdialog rounded",
+      innerHTML: multiline
+        ? "<span class='name'></span> <textarea autofocus class='value'></textarea><button class='rounded'>OK</button>"
+        : "<span class='name'></span> <input autofocus type='text' class='value'/><button class='rounded'>OK</button>",
+      close() {
+        that.prompt_box = null
+        if (dialog.parentNode) {
+          dialog.remove()
+        }
+      },
+    } satisfies Partial<IDialog>
+
+    const div = document.createElement("div")
+    const dialog: PromptDialog = Object.assign(div, customProperties)
+
+    const graphcanvas = LGraphCanvas.active_canvas
+    const { canvas } = graphcanvas
+    if (!canvas.parentNode) throw new TypeError("canvas element parentNode was null when opening a prompt.")
+    canvas.parentNode.append(dialog)
+
+    if (this.ds.scale > 1) dialog.style.transform = `scale(${this.ds.scale})`
+
+    let dialogCloseTimer: number
+    let prevent_timeout = 0
+    LiteGraph.pointerListenerAdd(dialog, "leave", function () {
+      if (prevent_timeout) return
+      if (LiteGraph.dialog_close_on_mouse_leave) {
+        if (!dialog.is_modified && LiteGraph.dialog_close_on_mouse_leave) {
+          dialogCloseTimer = setTimeout(
+            dialog.close,
+            LiteGraph.dialog_close_on_mouse_leave_delay,
+          )
+        }
+      }
+    })
+    LiteGraph.pointerListenerAdd(dialog, "enter", function () {
+      if (LiteGraph.dialog_close_on_mouse_leave && dialogCloseTimer)
+        clearTimeout(dialogCloseTimer)
+    })
+    const selInDia = dialog.querySelectorAll("select")
+    if (selInDia) {
+      // if filtering, check focus changed to comboboxes and prevent closing
+      for (const selIn of selInDia) {
+        selIn.addEventListener("click", function () {
+          prevent_timeout++
+        })
+        selIn.addEventListener("blur", function () {
+          prevent_timeout = 0
+        })
+        selIn.addEventListener("change", function () {
+          prevent_timeout = -1
+        })
+      }
+    }
+    this.prompt_box?.close()
+    this.prompt_box = dialog
+
+    const name_element: HTMLSpanElement | null = dialog.querySelector(".name")
+    if (!name_element) throw new TypeError("name_element was null")
+
+    name_element.textContent = title
+    const value_element: HTMLInputElement | null = dialog.querySelector(".value")
+    if (!value_element) throw new TypeError("value_element was null")
+
+    value_element.value = value
+    value_element.select()
+
+    const input = value_element
+    input.addEventListener("keydown", function (e: KeyboardEvent) {
+      dialog.is_modified = true
+      if (e.key == "Escape") {
+        // ESC
+        dialog.close()
+      } else if (
+        e.key == "Enter" &&
+        (e.target as Element).localName != "textarea"
+      ) {
+        if (callback) {
+          callback(this.value)
+        }
+        dialog.close()
+      } else {
+        return
+      }
+      e.preventDefault()
+      e.stopPropagation()
+    })
+
+    const button = dialog.querySelector("button")
+    if (!button) throw new TypeError("button was null when opening prompt")
+
+    button.addEventListener("click", function () {
+      callback?.(input.value)
+      that.setDirty(true)
+      dialog.close()
+    })
+
+    const rect = canvas.getBoundingClientRect()
+    let offsetx = -20
+    let offsety = -20
+    if (rect) {
+      offsetx -= rect.left
+      offsety -= rect.top
+    }
+
+    if (event) {
+      dialog.style.left = `${event.clientX + offsetx}px`
+      dialog.style.top = `${event.clientY + offsety}px`
+    } else {
+      dialog.style.left = `${canvas.width * 0.5 + offsetx}px`
+      dialog.style.top = `${canvas.height * 0.5 + offsety}px`
+    }
+
+    setTimeout(function () {
+      input.focus()
+      const clickTime = Date.now()
+      function handleOutsideClick(e: Event) {
+        if (e.target === canvas && Date.now() - clickTime > 256) {
+          dialog.close()
+          canvas.parentElement?.removeEventListener("click", handleOutsideClick)
+          canvas.parentElement?.removeEventListener("touchend", handleOutsideClick)
+        }
+      }
+      canvas.parentElement?.addEventListener("click", handleOutsideClick)
+      canvas.parentElement?.addEventListener("touchend", handleOutsideClick)
+    }, 10)
+
+    return dialog
+  }
+
+  showSearchBox(
+    event: MouseEvent,
+    searchOptions?: IShowSearchOptions,
+  ): HTMLDivElement {
+    // proposed defaults
+    const options: IShowSearchOptions = {
+      slot_from: null,
+      node_from: null,
+      node_to: null,
+      // TODO check for registered_slot_[in/out]_types not empty
+      // this will be checked for functionality enabled : filter on slot type, in and out
+      do_type_filter: LiteGraph.search_filter_enabled,
+
+      // these are default: pass to set initially set values
+      // @ts-expect-error
+      type_filter_in: false,
+
+      type_filter_out: false,
+      show_general_if_none_on_typefilter: true,
+      show_general_after_typefiltered: true,
+      hide_on_mouse_leave: LiteGraph.search_hide_on_mouse_leave,
+      show_all_if_empty: true,
+      show_all_on_open: LiteGraph.search_show_all_on_open,
+    }
+    Object.assign(options, searchOptions)
+
+    // console.log(options);
+    const that = this
+    const graphcanvas = LGraphCanvas.active_canvas
+    const { canvas } = graphcanvas
+    const root_document = canvas.ownerDocument || document
+
+    const div = document.createElement("div")
+    const dialog = Object.assign(div, {
+      close(this: typeof div) {
+        that.search_box = undefined
+        this.blur()
+        canvas.focus()
+        root_document.body.style.overflow = ""
+
+        // important, if canvas loses focus keys wont be captured
+        setTimeout(() => canvas.focus(), 20)
+        dialog.remove()
+      },
+    } satisfies Partial<HTMLDivElement> & ICloseable)
+    dialog.className = "litegraph litesearchbox graphdialog rounded"
+    dialog.innerHTML = "<span class='name'>Search</span> <input autofocus type='text' class='value rounded'/>"
+    if (options.do_type_filter) {
+      dialog.innerHTML += "<select class='slot_in_type_filter'><option value=''></option></select>"
+      dialog.innerHTML += "<select class='slot_out_type_filter'><option value=''></option></select>"
+    }
+    const helper = document.createElement("div")
+    helper.className = "helper"
+    dialog.append(helper)
+
+    if (root_document.fullscreenElement) {
+      root_document.fullscreenElement.append(dialog)
+    } else {
+      root_document.body.append(dialog)
+      root_document.body.style.overflow = "hidden"
+    }
+
+    // dialog element has been appended
+    let selIn
+    let selOut
+    if (options.do_type_filter) {
+      selIn = dialog.querySelector(".slot_in_type_filter")
+      selOut = dialog.querySelector(".slot_out_type_filter")
+    }
+
+    if (this.ds.scale > 1) {
+      dialog.style.transform = `scale(${this.ds.scale})`
+    }
+
+    // hide on mouse leave
+    if (options.hide_on_mouse_leave) {
+      // FIXME: Remove "any" kludge
+      let prevent_timeout: any = false
+      let timeout_close: number | null = null
+      LiteGraph.pointerListenerAdd(dialog, "enter", function () {
+        if (timeout_close) {
+          clearTimeout(timeout_close)
+          timeout_close = null
+        }
+      })
+      dialog.addEventListener("pointerleave", function () {
+        if (prevent_timeout) return
+
+        const hideDelay = options.hide_on_mouse_leave
+        const delay = typeof hideDelay === "number" ? hideDelay : 500
+        timeout_close = setTimeout(dialog.close, delay)
+      })
+      // if filtering, check focus changed to comboboxes and prevent closing
+      if (options.do_type_filter) {
+        if (!selIn) throw new TypeError("selIn was null when showing search box")
+        if (!selOut) throw new TypeError("selOut was null when showing search box")
+
+        selIn.addEventListener("click", function () {
+          prevent_timeout++
+        })
+        selIn.addEventListener("blur", function () {
+          prevent_timeout = 0
+        })
+        selIn.addEventListener("change", function () {
+          prevent_timeout = -1
+        })
+        selOut.addEventListener("click", function () {
+          prevent_timeout++
+        })
+        selOut.addEventListener("blur", function () {
+          prevent_timeout = 0
+        })
+        selOut.addEventListener("change", function () {
+          prevent_timeout = -1
+        })
+      }
+    }
+
+    // @ts-expect-error Panel?
+    that.search_box?.close()
+    that.search_box = dialog
+
+    let first: string | null = null
+    let timeout: number | null = null
+    let selected: ChildNode | null = null
+
+    const maybeInput = dialog.querySelector("input")
+    if (!maybeInput) throw new TypeError("Could not create search input box.")
+
+    const input = maybeInput
+
+    if (input) {
+      input.addEventListener("blur", function () {
+        this.focus()
+      })
+      input.addEventListener("keydown", function (e) {
+        if (e.key == "ArrowUp") {
+          // UP
+          changeSelection(false)
+        } else if (e.key == "ArrowDown") {
+          // DOWN
+          changeSelection(true)
+        } else if (e.key == "Escape") {
+          // ESC
+          dialog.close()
+        } else if (e.key == "Enter") {
+          if (selected instanceof HTMLElement) {
+            select(unescape(String(selected.dataset["type"])))
+          } else if (first) {
+            select(first)
+          } else {
+            dialog.close()
+          }
+        } else {
+          if (timeout) {
+            clearInterval(timeout)
+          }
+          timeout = setTimeout(refreshHelper, 10)
+          return
+        }
+        e.preventDefault()
+        e.stopPropagation()
+        e.stopImmediatePropagation()
+        return true
+      })
+    }
+
+    // if should filter on type, load and fill selected and choose elements if passed
+    if (options.do_type_filter) {
+      if (selIn) {
+        const aSlots = LiteGraph.slot_types_in
+        const nSlots = aSlots.length
+
+        if (
+          options.type_filter_in == LiteGraph.EVENT ||
+          options.type_filter_in == LiteGraph.ACTION
+        ) {
+          options.type_filter_in = "_event_"
+        }
+        for (let iK = 0; iK < nSlots; iK++) {
+          const opt = document.createElement("option")
+          opt.value = aSlots[iK]
+          opt.innerHTML = aSlots[iK]
+          selIn.append(opt)
+          if (
+            // @ts-expect-error
+            options.type_filter_in !== false &&
+            String(options.type_filter_in).toLowerCase() ==
+            String(aSlots[iK]).toLowerCase()
+          ) {
+            opt.selected = true
+          }
+        }
+        selIn.addEventListener("change", function () {
+          refreshHelper()
+        })
+      }
+      if (selOut) {
+        const aSlots = LiteGraph.slot_types_out
+
+        if (
+          options.type_filter_out == LiteGraph.EVENT ||
+          options.type_filter_out == LiteGraph.ACTION
+        ) {
+          options.type_filter_out = "_event_"
+        }
+        for (const aSlot of aSlots) {
+          const opt = document.createElement("option")
+          opt.value = aSlot
+          opt.innerHTML = aSlot
+          selOut.append(opt)
+          if (
+            options.type_filter_out !== false &&
+            String(options.type_filter_out).toLowerCase() ==
+            String(aSlot).toLowerCase()
+          ) {
+            opt.selected = true
+          }
+        }
+        selOut.addEventListener("change", function () {
+          refreshHelper()
+        })
+      }
+    }
+
+    // compute best position
+    const rect = canvas.getBoundingClientRect()
+
+    const left = (event ? event.clientX : rect.left + rect.width * 0.5) - 80
+    const top = (event ? event.clientY : rect.top + rect.height * 0.5) - 20
+    dialog.style.left = `${left}px`
+    dialog.style.top = `${top}px`
+
+    // To avoid out of screen problems
+    if (event.layerY > rect.height - 200) {
+      helper.style.maxHeight = `${rect.height - event.layerY - 20}px`
+    }
+    requestAnimationFrame(function () {
+      input.focus()
+    })
+    if (options.show_all_on_open) refreshHelper()
+
+    function select(name: string) {
+      if (name) {
+        if (that.onSearchBoxSelection) {
+          that.onSearchBoxSelection(name, event, graphcanvas)
+        } else {
+          if (!graphcanvas.graph) throw new NullGraphError()
+
+          graphcanvas.graph.beforeChange()
+          const node = LiteGraph.createNode(name)
+          if (node) {
+            node.pos = graphcanvas.convertEventToCanvasOffset(event)
+            graphcanvas.graph.add(node, false)
+          }
+
+          // join node after inserting
+          if (options.node_from) {
+            // FIXME: any
+            let iS: any = false
+            switch (typeof options.slot_from) {
+            case "string":
+              iS = options.node_from.findOutputSlot(options.slot_from)
+              break
+            case "object":
+              if (options.slot_from == null) throw new TypeError("options.slot_from was null when showing search box")
+
+              iS = options.slot_from.name
+                ? options.node_from.findOutputSlot(options.slot_from.name)
+                : -1
+              // @ts-expect-error change interface check
+              if (iS == -1 && options.slot_from.slot_index !== undefined) iS = options.slot_from.slot_index
+              break
+            case "number":
+              iS = options.slot_from
+              break
+            default:
+              // try with first if no name set
+              iS = 0
+            }
+            if (options.node_from.outputs[iS] !== undefined) {
+              if (iS !== false && iS > -1) {
+                if (node == null) throw new TypeError("options.slot_from was null when showing search box")
+
+                options.node_from.connectByType(iS, node, options.node_from.outputs[iS].type)
+              }
+            } else {
+              // console.warn("cant find slot " + options.slot_from);
+            }
+          }
+          if (options.node_to) {
+            // FIXME: any
+            let iS: any = false
+            switch (typeof options.slot_from) {
+            case "string":
+              iS = options.node_to.findInputSlot(options.slot_from)
+              break
+            case "object":
+              if (options.slot_from == null) throw new TypeError("options.slot_from was null when showing search box")
+
+              iS = options.slot_from.name
+                ? options.node_to.findInputSlot(options.slot_from.name)
+                : -1
+              // @ts-expect-error change interface check
+              if (iS == -1 && options.slot_from.slot_index !== undefined) iS = options.slot_from.slot_index
+              break
+            case "number":
+              iS = options.slot_from
+              break
+            default:
+              // try with first if no name set
+              iS = 0
+            }
+            if (options.node_to.inputs[iS] !== undefined) {
+              if (iS !== false && iS > -1) {
+                if (node == null) throw new TypeError("options.slot_from was null when showing search box")
+                // try connection
+                options.node_to.connectByTypeOutput(iS, node, options.node_to.inputs[iS].type)
+              }
+            } else {
+              // console.warn("cant find slot_nodeTO " + options.slot_from);
+            }
+          }
+
+          graphcanvas.graph.afterChange()
+        }
+      }
+
+      dialog.close()
+    }
+
+    function changeSelection(forward: boolean) {
+      const prev = selected
+      if (!selected) {
+        selected = forward
+          ? helper.childNodes[0]
+          : helper.childNodes[helper.childNodes.length]
+      } else if (selected instanceof Element) {
+        selected.classList.remove("selected")
+        selected = forward
+          ? selected.nextSibling
+          : selected.previousSibling
+        selected ||= prev
+      }
+
+      if (selected instanceof Element) {
+        selected.classList.add("selected")
+        selected.scrollIntoView({ block: "end", behavior: "smooth" })
+      }
+    }
+
+    function refreshHelper() {
+      timeout = null
+      let str = input.value
+      first = null
+      helper.innerHTML = ""
+      if (!str && !options.show_all_if_empty) return
+
+      if (that.onSearchBox) {
+        const list = that.onSearchBox(helper, str, graphcanvas)
+        if (list) {
+          for (const item of list) {
+            addResult(item)
+          }
+        }
+      } else {
+        let c = 0
+        str = str.toLowerCase()
+        if (!graphcanvas.graph) throw new NullGraphError()
+
+        const filter = graphcanvas.filter || graphcanvas.graph.filter
+
+        // FIXME: any
+        // filter by type preprocess
+        let sIn: any = false
+        let sOut: any = false
+        if (options.do_type_filter && that.search_box) {
+          sIn = that.search_box.querySelector(".slot_in_type_filter")
+          sOut = that.search_box.querySelector(".slot_out_type_filter")
+        }
+
+        const keys = Object.keys(LiteGraph.registered_node_types)
+        const filtered = keys.filter(x => inner_test_filter(x))
+
+        for (const item of filtered) {
+          addResult(item)
+          if (LGraphCanvas.search_limit !== -1 && c++ > LGraphCanvas.search_limit)
+            break
+        }
+
+        // add general type if filtering
+        if (
+          options.show_general_after_typefiltered &&
+          (sIn.value || sOut.value)
+        ) {
+          // FIXME: Undeclared variable again
+          // @ts-expect-error
+          filtered_extra = []
+          for (const i in LiteGraph.registered_node_types) {
+            if (
+              inner_test_filter(i, {
+                inTypeOverride: sIn && sIn.value ? "*" : false,
+                outTypeOverride: sOut && sOut.value ? "*" : false,
+              })
+            ) {
+              // @ts-expect-error
+              filtered_extra.push(i)
+            }
+          }
+          // @ts-expect-error
+          for (const extraItem of filtered_extra) {
+            addResult(extraItem, "generic_type")
+            if (LGraphCanvas.search_limit !== -1 && c++ > LGraphCanvas.search_limit)
+              break
+          }
+        }
+
+        // check il filtering gave no results
+        if (
+          (sIn.value || sOut.value) &&
+          helper.childNodes.length == 0 &&
+          options.show_general_if_none_on_typefilter
+        ) {
+          // @ts-expect-error
+          filtered_extra = []
+          for (const i in LiteGraph.registered_node_types) {
+            if (inner_test_filter(i, { skipFilter: true }))
+              // @ts-expect-error
+              filtered_extra.push(i)
+          }
+          // @ts-expect-error
+          for (const extraItem of filtered_extra) {
+            addResult(extraItem, "not_in_filter")
+            if (LGraphCanvas.search_limit !== -1 && c++ > LGraphCanvas.search_limit)
+              break
+          }
+        }
+
+        function inner_test_filter(
+          type: string,
+          optsIn?: {
+            inTypeOverride?: string | boolean
+            outTypeOverride?: string | boolean
+            skipFilter?: boolean
+          },
+        ): boolean {
+          optsIn = optsIn || {}
+          const optsDef = {
+            skipFilter: false,
+            inTypeOverride: false,
+            outTypeOverride: false,
+          }
+          const opts = Object.assign(optsDef, optsIn)
+          const ctor = LiteGraph.registered_node_types[type]
+          if (filter && ctor.filter != filter) return false
+          if (
+            (!options.show_all_if_empty || str) &&
+            !type.toLowerCase().includes(str) &&
+            (!ctor.title || !ctor.title.toLowerCase().includes(str))
+          ) {
+            return false
+          }
+
+          // filter by slot IN, OUT types
+          if (options.do_type_filter && !opts.skipFilter) {
+            const sType = type
+
+            let sV = opts.inTypeOverride !== false
+              ? opts.inTypeOverride
+              : sIn.value
+            // type is stored
+            if (sIn && sV && LiteGraph.registered_slot_in_types[sV]?.nodes) {
+              const doesInc = LiteGraph.registered_slot_in_types[sV].nodes.includes(sType)
+              if (doesInc === false) return false
+            }
+
+            sV = sOut.value
+            if (opts.outTypeOverride !== false) sV = opts.outTypeOverride
+            // type is stored
+            if (sOut && sV && LiteGraph.registered_slot_out_types[sV]?.nodes) {
+              const doesInc = LiteGraph.registered_slot_out_types[sV].nodes.includes(sType)
+              if (doesInc === false) return false
+            }
+          }
+          return true
+        }
+      }
+
+      function addResult(type: string, className?: string): void {
+        const help = document.createElement("div")
+        first ||= type
+
+        const nodeType = LiteGraph.registered_node_types[type]
+        if (nodeType?.title) {
+          help.textContent = nodeType?.title
+          const typeEl = document.createElement("span")
+          typeEl.className = "litegraph lite-search-item-type"
+          typeEl.textContent = type
+          help.append(typeEl)
+        } else {
+          help.textContent = type
+        }
+
+        help.dataset["type"] = escape(type)
+        help.className = "litegraph lite-search-item"
+        if (className) {
+          help.className += ` ${className}`
+        }
+        help.addEventListener("click", function () {
+          select(unescape(String(this.dataset["type"])))
+        })
+        helper.append(help)
+      }
+    }
+
+    return dialog
+  }
+
+  showEditPropertyValue(
+    node: LGraphNode,
+    property: string,
+    options: IDialogOptions,
+  ): IDialog | undefined {
+    if (!node || node.properties[property] === undefined) return
+
+    options = options || {}
+
+    const info = node.getPropertyInfo(property)
+    const { type } = info
+
+    let input_html = ""
+
+    if (
+      type == "string" ||
+      type == "number" ||
+      type == "array" ||
+      type == "object"
+    ) {
+      input_html = "<input autofocus type='text' class='value'/>"
+    } else if ((type == "enum" || type == "combo") && info.values) {
+      input_html = "<select autofocus type='text' class='value'>"
+      for (const i in info.values) {
+        const v = Array.isArray(info.values) ? info.values[i] : i
+
+        const selected = v == node.properties[property] ? "selected" : ""
+        input_html += `<option value='${v}' ${selected}>${info.values[i]}</option>`
+      }
+      input_html += "</select>"
+    } else if (type == "boolean" || type == "toggle") {
+      const checked = node.properties[property] ? "checked" : ""
+      input_html = `<input autofocus type='checkbox' class='value' ${checked}/>`
+    } else {
+      console.warn(`unknown type: ${type}`)
+      return
+    }
+
+    const dialog = this.createDialog(
+      `<span class='name'>${info.label || property}</span>${input_html}<button>OK</button>`,
+      options,
+    )
+
+    let input: HTMLInputElement | HTMLSelectElement | null
+    if ((type == "enum" || type == "combo") && info.values) {
+      input = dialog.querySelector("select")
+      input?.addEventListener("change", function (e) {
+        dialog.modified()
+        setValue((e.target as HTMLSelectElement)?.value)
+      })
+    } else if (type == "boolean" || type == "toggle") {
+      input = dialog.querySelector("input")
+      input?.addEventListener("click", function () {
+        dialog.modified()
+        // @ts-expect-error
+        setValue(!!input.checked)
+      })
+    } else {
+      input = dialog.querySelector("input")
+      if (input) {
+        input.addEventListener("blur", function () {
+          this.focus()
+        })
+
+        let v = node.properties[property] !== undefined
+          ? node.properties[property]
+          : ""
+        if (type !== "string") {
+          v = JSON.stringify(v)
+        }
+
+        // @ts-expect-error
+        input.value = v
+        input.addEventListener("keydown", function (e) {
+          if (e.key == "Escape") {
+            // ESC
+            dialog.close()
+          } else if (e.key == "Enter") {
+            // ENTER
+            // save
+            inner()
+          } else {
+            dialog.modified()
+            return
+          }
+          e.preventDefault()
+          e.stopPropagation()
+        })
+      }
+    }
+    input?.focus()
+
+    const button = dialog.querySelector("button")
+    if (!button) throw new TypeError("Show edit property value button was null.")
+    button.addEventListener("click", inner)
+
+    function inner() {
+      setValue(input?.value)
+    }
+    const dirty = () => this.#dirty()
+
+    function setValue(value: string | number | undefined) {
+      if (
+        info?.values &&
+        typeof info.values === "object" &&
+        info.values[value] != undefined
+      ) {
+        value = info.values[value]
+      }
+
+      if (typeof node.properties[property] == "number") {
+        value = Number(value)
+      }
+      if (type == "array" || type == "object") {
+        // @ts-expect-error JSON.parse doesn't care.
+        value = JSON.parse(value)
+      }
+      node.properties[property] = value
+      if (node.graph) {
+        node.graph._version++
+      }
+      node.onPropertyChanged?.(property, value)
+      options.onclose?.()
+      dialog.close()
+      dirty()
+    }
+
+    return dialog
+  }
+
+  // TODO refactor, theer are different dialog, some uses createDialog, some dont
+  createDialog(html: string, options: IDialogOptions): IDialog {
+    const def_options = {
+      checkForInput: false,
+      closeOnLeave: true,
+      closeOnLeave_checkModified: true,
+    }
+    options = Object.assign(def_options, options || {})
+
+    const customProperties = {
+      className: "graphdialog",
+      innerHTML: html,
+      is_modified: false,
+      modified() {
+        this.is_modified = true
+      },
+      close(this: IDialog) {
+        this.remove()
+      },
+    } satisfies Partial<IDialog>
+
+    const div = document.createElement("div")
+    const dialog: IDialog = Object.assign(div, customProperties)
+
+    const rect = this.canvas.getBoundingClientRect()
+    let offsetx = -20
+    let offsety = -20
+    if (rect) {
+      offsetx -= rect.left
+      offsety -= rect.top
+    }
+
+    if (options.position) {
+      offsetx += options.position[0]
+      offsety += options.position[1]
+    } else if (options.event) {
+      offsetx += options.event.clientX
+      offsety += options.event.clientY
+    } else {
+      // centered
+      offsetx += this.canvas.width * 0.5
+      offsety += this.canvas.height * 0.5
+    }
+
+    dialog.style.left = `${offsetx}px`
+    dialog.style.top = `${offsety}px`
+
+    if (!this.canvas.parentNode) throw new TypeError("Canvas parent element was null.")
+    this.canvas.parentNode.append(dialog)
+
+    // acheck for input and use default behaviour: save on enter, close on esc
+    if (options.checkForInput) {
+      const aI = dialog.querySelectorAll("input")
+      if (aI) {
+        for (const iX of aI) {
+          iX.addEventListener("keydown", function (e) {
+            dialog.modified()
+            if (e.key == "Escape") {
+              dialog.close()
+            } else if (e.key != "Enter") {
+              return
+            }
+            e.preventDefault()
+            e.stopPropagation()
+          })
+          iX.focus()
+        }
+      }
+    }
+
+    let dialogCloseTimer: number
+    let prevent_timeout = 0
+    dialog.addEventListener("mouseleave", function () {
+      if (prevent_timeout) return
+
+      if (!dialog.is_modified && LiteGraph.dialog_close_on_mouse_leave) {
+        dialogCloseTimer = setTimeout(
+          dialog.close,
+          LiteGraph.dialog_close_on_mouse_leave_delay,
+        )
+      }
+    })
+    dialog.addEventListener("mouseenter", function () {
+      if (options.closeOnLeave || LiteGraph.dialog_close_on_mouse_leave) {
+        if (dialogCloseTimer) clearTimeout(dialogCloseTimer)
+      }
+    })
+    const selInDia = dialog.querySelectorAll("select")
+    // if filtering, check focus changed to comboboxes and prevent closing
+    if (selInDia) {
+      for (const selIn of selInDia) {
+        selIn.addEventListener("click", function () {
+          prevent_timeout++
+        })
+        selIn.addEventListener("blur", function () {
+          prevent_timeout = 0
+        })
+        selIn.addEventListener("change", function () {
+          prevent_timeout = -1
+        })
+      }
+    }
+
+    return dialog
+  }
+
+  createPanel(title: string, options: ICreatePanelOptions) {
+    options = options || {}
+
+    const ref_window = options.window || window
+    // TODO: any kludge
+    const root: any = document.createElement("div")
+    root.className = "litegraph dialog"
+    root.innerHTML = "<div class='dialog-header'><span class='dialog-title'></span></div><div class='dialog-content'></div><div style='display:none;' class='dialog-alt-content'></div><div class='dialog-footer'></div>"
+    root.header = root.querySelector(".dialog-header")
+
+    if (options.width)
+      root.style.width = options.width + (typeof options.width === "number" ? "px" : "")
+    if (options.height)
+      root.style.height = options.height + (typeof options.height === "number" ? "px" : "")
+    if (options.closable) {
+      const close = document.createElement("span")
+      close.innerHTML = "&#10005;"
+      close.classList.add("close")
+      close.addEventListener("click", function () {
+        root.close()
+      })
+      root.header.append(close)
+    }
+    root.title_element = root.querySelector(".dialog-title")
+    root.title_element.textContent = title
+    root.content = root.querySelector(".dialog-content")
+    root.alt_content = root.querySelector(".dialog-alt-content")
+    root.footer = root.querySelector(".dialog-footer")
+
+    root.close = function () {
+      if (typeof root.onClose == "function") root.onClose()
+      root.remove()
+      this.remove()
+    }
+
+    // function to swap panel content
+    root.toggleAltContent = function (force: unknown) {
+      let vTo: string
+      let vAlt: string
+      if (force !== undefined) {
+        vTo = force ? "block" : "none"
+        vAlt = force ? "none" : "block"
+      } else {
+        vTo = root.alt_content.style.display != "block" ? "block" : "none"
+        vAlt = root.alt_content.style.display != "block" ? "none" : "block"
+      }
+      root.alt_content.style.display = vTo
+      root.content.style.display = vAlt
+    }
+
+    root.toggleFooterVisibility = function (force: unknown) {
+      let vTo: string
+      if (force !== undefined) {
+        vTo = force ? "block" : "none"
+      } else {
+        vTo = root.footer.style.display != "block" ? "block" : "none"
+      }
+      root.footer.style.display = vTo
+    }
+
+    root.clear = function () {
+      this.content.innerHTML = ""
+    }
+
+    root.addHTML = function (code: string, classname: string, on_footer: any) {
+      const elem = document.createElement("div")
+      if (classname) elem.className = classname
+      elem.innerHTML = code
+      if (on_footer) root.footer.append(elem)
+      else root.content.append(elem)
+      return elem
+    }
+
+    root.addButton = function (name: any, callback: any, options: any) {
+      // TODO: any kludge
+      const elem: any = document.createElement("button")
+      elem.textContent = name
+      elem.options = options
+      elem.classList.add("btn")
+      elem.addEventListener("click", callback)
+      root.footer.append(elem)
+      return elem
+    }
+
+    root.addSeparator = function () {
+      const elem = document.createElement("div")
+      elem.className = "separator"
+      root.content.append(elem)
+    }
+
+    root.addWidget = function (type: string, name: any, value: unknown, options: { label?: any, type?: any, values?: any, callback?: any }, callback: (arg0: any, arg1: any, arg2: any) => void) {
+      options = options || {}
+      let str_value = String(value)
+      type = type.toLowerCase()
+      if (type == "number" && typeof value === "number") str_value = value.toFixed(3)
+
+      // FIXME: any kludge
+      const elem: HTMLDivElement & { options?: unknown, value?: unknown } = document.createElement("div")
+      elem.className = "property"
+      elem.innerHTML = "<span class='property_name'></span><span class='property_value'></span>"
+      const nameSpan = elem.querySelector(".property_name")
+      if (!nameSpan) throw new TypeError("Property name element was null.")
+
+      nameSpan.textContent = options.label || name
+      // TODO: any kludge
+      const value_element: HTMLSpanElement | null = elem.querySelector(".property_value")
+      if (!value_element) throw new TypeError("Property name element was null.")
+      value_element.textContent = str_value
+      elem.dataset["property"] = name
+      elem.dataset["type"] = options.type || type
+      elem.options = options
+      elem.value = value
+
+      if (type == "code") {
+        elem.addEventListener("click", function () {
+          root.inner_showCodePad(this.dataset["property"])
+        })
+      } else if (type == "boolean") {
+        elem.classList.add("boolean")
+        if (value) elem.classList.add("bool-on")
+        elem.addEventListener("click", () => {
+          const propname = elem.dataset["property"]
+          elem.value = !elem.value
+          elem.classList.toggle("bool-on")
+          if (!value_element) throw new TypeError("Property name element was null.")
+
+          value_element.textContent = elem.value
+            ? "true"
+            : "false"
+          innerChange(propname, elem.value)
+        })
+      } else if (type == "string" || type == "number") {
+        if (!value_element) throw new TypeError("Property name element was null.")
+        value_element.setAttribute("contenteditable", "true")
+        value_element.addEventListener("keydown", function (e) {
+          // allow for multiline
+          if (e.code == "Enter" && (type != "string" || !e.shiftKey)) {
+            e.preventDefault()
+            this.blur()
+          }
+        })
+        value_element.addEventListener("blur", function () {
+          let v: string | number | null = this.textContent
+          const propname = this.parentElement?.dataset["property"]
+          const proptype = this.parentElement?.dataset["type"]
+          if (proptype == "number") v = Number(v)
+          innerChange(propname, v)
+        })
+      } else if (type == "enum" || type == "combo") {
+        const str_value = LGraphCanvas.getPropertyPrintableValue(value, options.values)
+        if (!value_element) throw new TypeError("Property name element was null.")
+        value_element.textContent = str_value ?? ""
+
+        value_element.addEventListener("click", function (event) {
+          const values = options.values || []
+          const propname = this.parentElement?.dataset["property"]
+          const inner_clicked = (v: string | null) => {
+            // node.setProperty(propname,v);
+            // graphcanvas.dirty_canvas = true;
+            this.textContent = v
+            innerChange(propname, v)
+            return false
+          }
+          new LiteGraph.ContextMenu(
+            values,
+            {
+              event,
+              className: "dark",
+              callback: inner_clicked,
+            },
+            // @ts-expect-error
+            ref_window,
+          )
+        })
+      }
+
+      root.content.append(elem)
+
+      function innerChange(name: string | undefined, value: unknown) {
+        options.callback?.(name, value, options)
+        callback?.(name, value, options)
+      }
+
+      return elem
+    }
+
+    if (typeof root.onOpen == "function") root.onOpen()
+
+    return root
+  }
+
+  closePanels(): void {
+    type MightHaveClose = HTMLDivElement & Partial<ICloseable>
+    document.querySelector<MightHaveClose>("#node-panel")?.close?.()
+    document.querySelector<MightHaveClose>("#option-panel")?.close?.()
+  }
+
+  showShowNodePanel(node: LGraphNode): void {
+    this.SELECTED_NODE = node
+    this.closePanels()
+    const ref_window = this.getCanvasWindow()
+    const panel = this.createPanel(node.title || "", {
+      closable: true,
+      window: ref_window,
+      onOpen: () => {
+        this.NODEPANEL_IS_OPEN = true
+      },
+      onClose: () => {
+        this.NODEPANEL_IS_OPEN = false
+        this.node_panel = null
+      },
+    })
+    this.node_panel = panel
+    panel.id = "node-panel"
+    panel.node = node
+    panel.classList.add("settings")
+
+    const inner_refresh = () => {
+      // clear
+      panel.content.innerHTML = ""
+      // @ts-expect-error ctor props
+      panel.addHTML(`<span class='node_type'>${node.type}</span><span class='node_desc'>${node.constructor.desc || ""}</span><span class='separator'></span>`)
+
+      panel.addHTML("<h3>Properties</h3>")
+
+      const fUpdate = (name: string, value: string | number | boolean | object | undefined) => {
+        if (!this.graph) throw new NullGraphError()
+        this.graph.beforeChange(node)
+        switch (name) {
+        case "Title":
+          if (typeof value !== "string") throw new TypeError("Attempting to set title to non-string value.")
+
+          node.title = value
+          break
+        case "Mode": {
+          if (typeof value !== "string") throw new TypeError("Attempting to set mode to non-string value.")
+
+          const kV = Object.values(LiteGraph.NODE_MODES).indexOf(value)
+          if (kV !== -1 && LiteGraph.NODE_MODES[kV]) {
+            node.changeMode(kV)
+          } else {
+            console.warn(`unexpected mode: ${value}`)
+          }
+          break
+        }
+        case "Color":
+          if (typeof value !== "string") throw new TypeError("Attempting to set colour to non-string value.")
+
+          if (LGraphCanvas.node_colors[value]) {
+            node.color = LGraphCanvas.node_colors[value].color
+            node.bgcolor = LGraphCanvas.node_colors[value].bgcolor
+          } else {
+            console.warn(`unexpected color: ${value}`)
+          }
+          break
+        default:
+          node.setProperty(name, value)
+          break
+        }
+        this.graph.afterChange()
+        this.dirty_canvas = true
+      }
+
+      panel.addWidget("string", "Title", node.title, {}, fUpdate)
+
+      const mode = node.mode == null ? undefined : LiteGraph.NODE_MODES[node.mode]
+      panel.addWidget("combo", "Mode", mode, { values: LiteGraph.NODE_MODES }, fUpdate)
+
+      const nodeCol = node.color !== undefined
+        ? Object.keys(LGraphCanvas.node_colors).filter(function (nK) { return LGraphCanvas.node_colors[nK].color == node.color })
+        : ""
+
+      panel.addWidget("combo", "Color", nodeCol, { values: Object.keys(LGraphCanvas.node_colors) }, fUpdate)
+
+      for (const pName in node.properties) {
+        const value = node.properties[pName]
+        const info = node.getPropertyInfo(pName)
+
+        // in case the user wants control over the side panel widget
+        if (node.onAddPropertyToPanel?.(pName, panel)) continue
+
+        panel.addWidget(info.widget || info.type, pName, value, info, fUpdate)
+      }
+
+      panel.addSeparator()
+
+      node.onShowCustomPanelInfo?.(panel)
+
+      // clear
+      panel.footer.innerHTML = ""
+      panel.addButton("Delete", function () {
+        if (node.block_delete) return
+        if (!node.graph) throw new NullGraphError()
+
+        node.graph.remove(node)
+        panel.close()
+      }).classList.add("delete")
+    }
+
+    panel.inner_showCodePad = function (propname: string) {
+      panel.classList.remove("settings")
+      panel.classList.add("centered")
+
+      panel.alt_content.innerHTML = "<textarea class='code'></textarea>"
+      const textarea: HTMLTextAreaElement = panel.alt_content.querySelector("textarea")
+      const fDoneWith = function () {
+        panel.toggleAltContent(false)
+        panel.toggleFooterVisibility(true)
+        textarea.remove()
+        panel.classList.add("settings")
+        panel.classList.remove("centered")
+        inner_refresh()
+      }
+      textarea.value = String(node.properties[propname])
+      textarea.addEventListener("keydown", function (e: KeyboardEvent) {
+        if (e.code == "Enter" && e.ctrlKey) {
+          node.setProperty(propname, textarea.value)
+          fDoneWith()
+        }
+      })
+      panel.toggleAltContent(true)
+      panel.toggleFooterVisibility(false)
+      textarea.style.height = "calc(100% - 40px)"
+
+      const assign = panel.addButton("Assign", function () {
+        node.setProperty(propname, textarea.value)
+        fDoneWith()
+      })
+      panel.alt_content.append(assign)
+      const button = panel.addButton("Close", fDoneWith)
+      button.style.float = "right"
+      panel.alt_content.append(button)
+    }
+
+    inner_refresh()
+
+    if (!this.canvas.parentNode) throw new TypeError("showNodePanel - this.canvas.parentNode was null")
+    this.canvas.parentNode.append(panel)
+  }
+
+  checkPanels(): void {
+    if (!this.canvas) return
+
+    if (!this.canvas.parentNode) throw new TypeError("checkPanels - this.canvas.parentNode was null")
+    const panels = this.canvas.parentNode.querySelectorAll(".litegraph.dialog")
+    for (const panel of panels) {
+      // @ts-expect-error Panel
+      if (!panel.node) continue
+      // @ts-expect-error Panel
+      if (!panel.node.graph || panel.graph != this.graph) panel.close()
+    }
+  }
+
+  getCanvasMenuOptions(): IContextMenuValue<string>[] {
+    let options: IContextMenuValue<string>[]
+    if (this.getMenuOptions) {
+      options = this.getMenuOptions()
+    } else {
+      options = [
+        {
+          content: "Add Node",
+          has_submenu: true,
+          callback: LGraphCanvas.onMenuAdd,
+        },
+        { content: "Add Group", callback: LGraphCanvas.onGroupAdd },
+        // { content: "Arrange", callback: that.graph.arrange },
+        // {content:"Collapse All", callback: LGraphCanvas.onMenuCollapseAll }
+      ]
+      if (Object.keys(this.selected_nodes).length > 1) {
+        options.push({
+          content: "Convert to Subgraph 🆕",
+          callback: () => {
+            if (!this.selectedItems.size) throw new Error("Convert to Subgraph: Nothing selected.")
+            this._graph.convertToSubgraph(this.selectedItems)
+          },
+        }, {
+          content: "Align",
+          has_submenu: true,
+          callback: LGraphCanvas.onGroupAlign,
+        })
+      }
+    }
+
+    const extra = this.getExtraMenuOptions?.(this, options)
+    return Array.isArray(extra)
+      ? options.concat(extra)
+      : options
+  }
+
+  // called by processContextMenu to extract the menu list
+  getNodeMenuOptions(node: LGraphNode) {
+    let options: (IContextMenuValue<string> | IContextMenuValue<string | null> | IContextMenuValue<INodeSlotContextItem> | IContextMenuValue<unknown, LGraphNode> | IContextMenuValue<typeof LiteGraph.VALID_SHAPES[number]> | null)[]
+
+    if (node.getMenuOptions) {
+      options = node.getMenuOptions(this)
+    } else {
+      options = [
+        {
+          content: "Inputs",
+          has_submenu: true,
+          disabled: true,
+        },
+        {
+          content: "Outputs",
+          has_submenu: true,
+          disabled: true,
+          callback: LGraphCanvas.showMenuNodeOptionalOutputs,
+        },
+        null,
+        {
+          content: "Convert to Subgraph 🆕",
+          callback: () => {
+            if (!this.selectedItems.size) throw new Error("Convert to Subgraph: Nothing selected.")
+            this._graph.convertToSubgraph(this.selectedItems)
+          },
+        },
+        {
+          content: "Properties",
+          has_submenu: true,
+          callback: LGraphCanvas.onShowMenuNodeProperties,
+        },
+        {
+          content: "Properties Panel",
+          callback: function (item: any, options: any, e: any, menu: any, node: LGraphNode) { LGraphCanvas.active_canvas.showShowNodePanel(node) },
+        },
+        null,
+        {
+          content: "Title",
+          callback: LGraphCanvas.onShowPropertyEditor,
+        },
+        {
+          content: "Mode",
+          has_submenu: true,
+          callback: LGraphCanvas.onMenuNodeMode,
+        },
+      ]
+      if (node.resizable !== false) {
+        options.push({
+          content: "Resize",
+          callback: LGraphCanvas.onMenuResizeNode,
+        })
+      }
+      if (node.collapsible) {
+        options.push({
+          content: node.collapsed ? "Expand" : "Collapse",
+          callback: LGraphCanvas.onMenuNodeCollapse,
+        })
+      }
+      if (node.widgets?.some(w => w.advanced)) {
+        options.push({
+          content: node.showAdvanced ? "Hide Advanced" : "Show Advanced",
+          callback: LGraphCanvas.onMenuToggleAdvanced,
+        })
+      }
+      options.push(
+        {
+          content: node.pinned ? "Unpin" : "Pin",
+          callback: () => {
+            for (const i in this.selected_nodes) {
+              const node = this.selected_nodes[i]
+              node.pin()
+            }
+            this.setDirty(true, true)
+          },
+        },
+        {
+          content: "Colors",
+          has_submenu: true,
+          callback: LGraphCanvas.onMenuNodeColors,
+        },
+        {
+          content: "Shapes",
+          has_submenu: true,
+          callback: LGraphCanvas.onMenuNodeShapes,
+        },
+        null,
+      )
+    }
+
+    const extra = node.getExtraMenuOptions?.(this, options)
+    if (Array.isArray(extra) && extra.length > 0) {
+      extra.push(null)
+      options = extra.concat(options)
+    }
+
+    if (node.clonable !== false) {
+      options.push({
+        content: "Clone",
+        callback: LGraphCanvas.onMenuNodeClone,
+      })
+    }
+
+    if (Object.keys(this.selected_nodes).length > 1) {
+      options.push({
+        content: "Align Selected To",
+        has_submenu: true,
+        callback: LGraphCanvas.onNodeAlign,
+      }, {
+        content: "Distribute Nodes",
+        has_submenu: true,
+        callback: LGraphCanvas.createDistributeMenu,
+      })
+    }
+
+    options.push(null, {
+      content: "Remove",
+      disabled: !(node.removable !== false && !node.block_delete),
+      callback: LGraphCanvas.onMenuNodeRemove,
+    })
+
+    node.graph?.onGetNodeMenuOptions?.(options, node)
+
+    return options
+  }
+
+  /** @deprecated */
+  getGroupMenuOptions(group: LGraphGroup) {
+    console.warn("LGraphCanvas.getGroupMenuOptions is deprecated, use LGraphGroup.getMenuOptions instead")
+    return group.getMenuOptions()
+  }
+
+  processContextMenu(node: LGraphNode | undefined, event: CanvasMouseEvent): void {
+    const canvas = LGraphCanvas.active_canvas
+    const ref_window = canvas.getCanvasWindow()
+
+    // TODO: Remove type kludge
+    let menu_info: (IContextMenuValue | string | null)[]
+    const options: IContextMenuOptions = {
+      event,
+      callback: inner_option_clicked,
+      extra: node,
+    }
+
+    if (node) {
+      options.title = node.displayType ?? node.type ?? undefined
+      LGraphCanvas.active_node = node
+
+      // check if mouse is in input
+      const slot = node.getSlotInPosition(event.canvasX, event.canvasY)
+      if (slot) {
+        // on slot
+        menu_info = []
+        if (node.getSlotMenuOptions) {
+          menu_info = node.getSlotMenuOptions(slot)
+        } else {
+          if (slot.output?.links?.length || slot.input?.link != null) {
+            menu_info.push({ content: "Disconnect Links", slot })
+          }
+
+          const _slot = slot.input || slot.output
+          if (!_slot) throw new TypeError("Both in put and output slots were null when processing context menu.")
+
+          if (_slot.removable) {
+            menu_info.push(
+              _slot.locked
+                ? "Cannot remove"
+                : { content: "Remove Slot", slot },
+            )
+          }
+          if (!_slot.nameLocked && !(("link" in _slot) && _slot.widget)) {
+            menu_info.push({ content: "Rename Slot", slot })
+          }
+
+          if (node.getExtraSlotMenuOptions) {
+            menu_info.push(...node.getExtraSlotMenuOptions(slot))
+          }
+        }
+        // @ts-expect-error Slot type can be number and has number checks
+        options.title = (slot.input ? slot.input.type : slot.output.type) || "*"
+        if (slot.input && slot.input.type == LiteGraph.ACTION)
+          options.title = "Action"
+
+        if (slot.output && slot.output.type == LiteGraph.EVENT)
+          options.title = "Event"
+      } else {
+        // on node
+        menu_info = this.getNodeMenuOptions(node)
+      }
+    } else {
+      menu_info = this.getCanvasMenuOptions()
+      if (!this.graph) throw new NullGraphError()
+
+      // Check for reroutes
+      if (this.links_render_mode !== LinkRenderType.HIDDEN_LINK) {
+        const reroute = this.graph.getRerouteOnPos(event.canvasX, event.canvasY, this.#visibleReroutes)
+        if (reroute) {
+          menu_info.unshift({
+            content: "Delete Reroute",
+            callback: () => {
+              if (!this.graph) throw new NullGraphError()
+
+              this.graph.removeReroute(reroute.id)
+            },
+          }, null)
+        }
+      }
+
+      const group = this.graph.getGroupOnPos(
+        event.canvasX,
+        event.canvasY,
+      )
+      if (group) {
+        // on group
+        menu_info.push(null, {
+          content: "Edit Group",
+          has_submenu: true,
+          submenu: {
+            title: "Group",
+            extra: group,
+            options: group.getMenuOptions(),
+          },
+        })
+      }
+    }
+
+    // show menu
+    if (!menu_info) return
+
+    // @ts-expect-error Remove param ref_window - unused
+    new LiteGraph.ContextMenu(menu_info, options, ref_window)
+
+    const createDialog = (options: IDialogOptions) => this.createDialog(
+      "<span class='name'>Name</span><input autofocus type='text'/><button>OK</button>",
+      options,
+    )
+    const setDirty = () => this.setDirty(true)
+
+    function inner_option_clicked(v: IContextMenuValue<unknown>, options: IDialogOptions) {
+      if (!v) return
+
+      if (v.content == "Remove Slot") {
+        if (!node?.graph) throw new NullGraphError()
+
+        const info = v.slot
+        if (!info) throw new TypeError("Found-slot info was null when processing context menu.")
+
+        node.graph.beforeChange()
+        if (info.input) {
+          node.removeInput(info.slot)
+        } else if (info.output) {
+          node.removeOutput(info.slot)
+        }
+        node.graph.afterChange()
+        return
+      } else if (v.content == "Disconnect Links") {
+        if (!node?.graph) throw new NullGraphError()
+
+        const info = v.slot
+        if (!info) throw new TypeError("Found-slot info was null when processing context menu.")
+
+        node.graph.beforeChange()
+        if (info.output) {
+          node.disconnectOutput(info.slot)
+        } else if (info.input) {
+          node.disconnectInput(info.slot, true)
+        }
+        node.graph.afterChange()
+        return
+      } else if (v.content == "Rename Slot") {
+        if (!node) throw new TypeError("`node` was null when processing the context menu.")
+
+        const info = v.slot
+        if (!info) throw new TypeError("Found-slot info was null when processing context menu.")
+
+        const slot_info = info.input
+          ? node.getInputInfo(info.slot)
+          : node.getOutputInfo(info.slot)
+        const dialog = createDialog(options)
+
+        const input = dialog.querySelector("input")
+        if (input && slot_info) {
+          input.value = slot_info.label || ""
+        }
+        const inner = function () {
+          if (!node.graph) throw new NullGraphError()
+
+          node.graph.beforeChange()
+          if (input?.value) {
+            if (slot_info) {
+              slot_info.label = input.value
+            }
+            setDirty()
+          }
+          dialog.close()
+          node.graph.afterChange()
+        }
+        dialog.querySelector("button")?.addEventListener("click", inner)
+        if (!input) throw new TypeError("Input element was null when processing context menu.")
+
+        input.addEventListener("keydown", function (e) {
+          dialog.is_modified = true
+          if (e.key == "Escape") {
+            // ESC
+            dialog.close()
+          } else if (e.key == "Enter") {
+            // save
+            inner()
+          } else if ((e.target as Element).localName != "textarea") {
+            return
+          }
+          e.preventDefault()
+          e.stopPropagation()
+        })
+        input.focus()
+      }
+    }
+  }
+
+  /**
+   * Starts an animation to fit the view around the specified selection of nodes.
+   * @param bounds The bounds to animate the view to, defined by a rectangle.
+   */
+  animateToBounds(bounds: ReadOnlyRect, options: AnimationOptions = {}) {
+    const setDirty = () => this.setDirty(true, true)
+    this.ds.animateToBounds(bounds, setDirty, options)
+  }
+
+  /**
+   * Fits the view to the selected nodes with animation.
+   * If nothing is selected, the view is fitted around all items in the graph.
+   */
+  fitViewToSelectionAnimated(options: AnimationOptions = {}) {
+    const items = this.selectedItems.size
+      ? Array.from(this.selectedItems)
+      : this.positionableItems
+    const bounds = createBounds(items)
+    if (!bounds) throw new TypeError("Attempted to fit to view but could not calculate bounds.")
+
+    const setDirty = () => this.setDirty(true, true)
+    this.ds.animateToBounds(bounds, setDirty, options)
+  }
+}
diff --git a/src/lib/litegraph/src/LGraphGroup.ts b/src/lib/litegraph/src/LGraphGroup.ts
new file mode 100644
index 0000000000..285a3bb6e3
--- /dev/null
+++ b/src/lib/litegraph/src/LGraphGroup.ts
@@ -0,0 +1,350 @@
+import type {
+  ColorOption,
+  IColorable,
+  IContextMenuValue,
+  IPinnable,
+  Point,
+  Positionable,
+  Size,
+} from "./interfaces"
+import type { LGraph } from "./LGraph"
+import type { ISerialisedGroup } from "./types/serialisation"
+
+import { NullGraphError } from './infrastructure/NullGraphError'
+
+import { strokeShape } from "./draw"
+import { LGraphCanvas } from "./LGraphCanvas"
+import { LGraphNode } from "./LGraphNode"
+import { LiteGraph } from "./litegraph"
+import {
+  containsCentre,
+  containsRect,
+  createBounds,
+  isInRectangle,
+  isPointInRect,
+  snapPoint,
+} from "./measure"
+
+export interface IGraphGroupFlags extends Record<string, unknown> {
+  pinned?: true
+}
+
+export class LGraphGroup implements Positionable, IPinnable, IColorable {
+  static minWidth = 140
+  static minHeight = 80
+  static resizeLength = 10
+  static padding = 4
+  static defaultColour = "#335"
+
+  id: number
+  color?: string
+  title: string
+  font?: string
+  font_size: number = LiteGraph.DEFAULT_GROUP_FONT || 24
+  _bounding: Float32Array = new Float32Array([
+    10,
+    10,
+    LGraphGroup.minWidth,
+    LGraphGroup.minHeight,
+  ])
+
+  _pos: Point = this._bounding.subarray(0, 2)
+  _size: Size = this._bounding.subarray(2, 4)
+  /** @deprecated See {@link _children} */
+  _nodes: LGraphNode[] = []
+  _children: Set<Positionable> = new Set()
+  graph?: LGraph
+  flags: IGraphGroupFlags = {}
+  selected?: boolean
+
+  constructor(title?: string, id?: number) {
+    // TODO: Object instantiation pattern requires too much boilerplate and null checking.  ID should be passed in via constructor.
+    this.id = id ?? -1
+    this.title = title || "Group"
+
+    const { pale_blue } = LGraphCanvas.node_colors
+    this.color = pale_blue ? pale_blue.groupcolor : "#AAA"
+  }
+
+  /** @inheritdoc {@link IColorable.setColorOption} */
+  setColorOption(colorOption: ColorOption | null): void {
+    if (colorOption == null) {
+      delete this.color
+    } else {
+      this.color = colorOption.groupcolor
+    }
+  }
+
+  /** @inheritdoc {@link IColorable.getColorOption} */
+  getColorOption(): ColorOption | null {
+    return Object.values(LGraphCanvas.node_colors).find(
+      colorOption => colorOption.groupcolor === this.color,
+    ) ?? null
+  }
+
+  /** Position of the group, as x,y co-ordinates in graph space */
+  get pos() {
+    return this._pos
+  }
+
+  set pos(v) {
+    if (!v || v.length < 2) return
+
+    this._pos[0] = v[0]
+    this._pos[1] = v[1]
+  }
+
+  /** Size of the group, as width,height in graph units */
+  get size() {
+    return this._size
+  }
+
+  set size(v) {
+    if (!v || v.length < 2) return
+
+    this._size[0] = Math.max(LGraphGroup.minWidth, v[0])
+    this._size[1] = Math.max(LGraphGroup.minHeight, v[1])
+  }
+
+  get boundingRect() {
+    return this._bounding
+  }
+
+  get nodes() {
+    return this._nodes
+  }
+
+  get titleHeight() {
+    return this.font_size * 1.4
+  }
+
+  get children(): ReadonlySet<Positionable> {
+    return this._children
+  }
+
+  get pinned() {
+    return !!this.flags.pinned
+  }
+
+  /**
+   * Prevents the group being accidentally moved or resized by mouse interaction.
+   * Toggles pinned state if no value is provided.
+   */
+  pin(value?: boolean): void {
+    const newState = value === undefined ? !this.pinned : value
+
+    if (newState) this.flags.pinned = true
+    else delete this.flags.pinned
+  }
+
+  unpin(): void {
+    this.pin(false)
+  }
+
+  configure(o: ISerialisedGroup): void {
+    this.id = o.id
+    this.title = o.title
+    this._bounding.set(o.bounding)
+    this.color = o.color
+    this.flags = o.flags || this.flags
+    if (o.font_size) this.font_size = o.font_size
+  }
+
+  serialize(): ISerialisedGroup {
+    const b = this._bounding
+    return {
+      id: this.id,
+      title: this.title,
+      bounding: [...b],
+      color: this.color,
+      font_size: this.font_size,
+      flags: this.flags,
+    }
+  }
+
+  /**
+   * Draws the group on the canvas
+   * @param graphCanvas
+   * @param ctx
+   */
+  draw(graphCanvas: LGraphCanvas, ctx: CanvasRenderingContext2D): void {
+    const { padding, resizeLength, defaultColour } = LGraphGroup
+    const font_size = this.font_size || LiteGraph.DEFAULT_GROUP_FONT_SIZE
+
+    const [x, y] = this._pos
+    const [width, height] = this._size
+    const color = this.color || defaultColour
+
+    // Titlebar
+    ctx.globalAlpha = 0.25 * graphCanvas.editor_alpha
+    ctx.fillStyle = color
+    ctx.strokeStyle = color
+    ctx.beginPath()
+    ctx.rect(x + 0.5, y + 0.5, width, font_size * 1.4)
+    ctx.fill()
+
+    // Group background, border
+    ctx.fillStyle = color
+    ctx.strokeStyle = color
+    ctx.beginPath()
+    ctx.rect(x + 0.5, y + 0.5, width, height)
+    ctx.fill()
+    ctx.globalAlpha = graphCanvas.editor_alpha
+    ctx.stroke()
+
+    // Resize marker
+    ctx.beginPath()
+    ctx.moveTo(x + width, y + height)
+    ctx.lineTo(x + width - resizeLength, y + height)
+    ctx.lineTo(x + width, y + height - resizeLength)
+    ctx.fill()
+
+    // Title
+    ctx.font = `${font_size}px ${LiteGraph.GROUP_FONT}`
+    ctx.textAlign = "left"
+    ctx.fillText(this.title + (this.pinned ? "📌" : ""), x + padding, y + font_size)
+
+    if (LiteGraph.highlight_selected_group && this.selected) {
+      strokeShape(ctx, this._bounding, {
+        title_height: this.titleHeight,
+        padding,
+      })
+    }
+  }
+
+  resize(width: number, height: number): boolean {
+    if (this.pinned) return false
+
+    this._size[0] = Math.max(LGraphGroup.minWidth, width)
+    this._size[1] = Math.max(LGraphGroup.minHeight, height)
+    return true
+  }
+
+  move(deltaX: number, deltaY: number, skipChildren: boolean = false): void {
+    if (this.pinned) return
+
+    this._pos[0] += deltaX
+    this._pos[1] += deltaY
+    if (skipChildren === true) return
+
+    for (const item of this._children) {
+      item.move(deltaX, deltaY)
+    }
+  }
+
+  /** @inheritdoc */
+  snapToGrid(snapTo: number): boolean {
+    return this.pinned ? false : snapPoint(this.pos, snapTo)
+  }
+
+  recomputeInsideNodes(): void {
+    if (!this.graph) throw new NullGraphError()
+    const { nodes, reroutes, groups } = this.graph
+    const children = this._children
+    this._nodes.length = 0
+    children.clear()
+
+    // Move nodes we overlap the centre point of
+    for (const node of nodes) {
+      if (containsCentre(this._bounding, node.boundingRect)) {
+        this._nodes.push(node)
+        children.add(node)
+      }
+    }
+
+    // Move reroutes we overlap the centre point of
+    for (const reroute of reroutes.values()) {
+      if (isPointInRect(reroute.pos, this._bounding))
+        children.add(reroute)
+    }
+
+    // Move groups we wholly contain
+    for (const group of groups) {
+      if (containsRect(this._bounding, group._bounding))
+        children.add(group)
+    }
+
+    groups.sort((a, b) => {
+      if (a === this) {
+        return children.has(b) ? -1 : 0
+      } else if (b === this) {
+        return children.has(a) ? 1 : 0
+      } else {
+        return 0
+      }
+    })
+  }
+
+  /**
+   * Resizes and moves the group to neatly fit all given {@link objects}.
+   * @param objects All objects that should be inside the group
+   * @param padding Value in graph units to add to all sides of the group.  Default: 10
+   */
+  resizeTo(objects: Iterable<Positionable>, padding: number = 10): void {
+    const boundingBox = createBounds(objects, padding)
+    if (boundingBox === null) return
+
+    this.pos[0] = boundingBox[0]
+    this.pos[1] = boundingBox[1] - this.titleHeight
+    this.size[0] = boundingBox[2]
+    this.size[1] = boundingBox[3] + this.titleHeight
+  }
+
+  /**
+   * Add nodes to the group and adjust the group's position and size accordingly
+   * @param nodes The nodes to add to the group
+   * @param padding The padding around the group
+   */
+  addNodes(nodes: LGraphNode[], padding: number = 10): void {
+    if (!this._nodes && nodes.length === 0) return
+    this.resizeTo([...this.children, ...this._nodes, ...nodes], padding)
+  }
+
+  getMenuOptions(): (IContextMenuValue<string> | IContextMenuValue<string | null> | null)[] {
+    return [
+      {
+        content: this.pinned ? "Unpin" : "Pin",
+        callback: () => {
+          if (this.pinned) this.unpin()
+          else this.pin()
+          this.setDirtyCanvas(false, true)
+        },
+      },
+      null,
+      { content: "Title", callback: LGraphCanvas.onShowPropertyEditor },
+      {
+        content: "Color",
+        has_submenu: true,
+        callback: LGraphCanvas.onMenuNodeColors,
+      },
+      {
+        content: "Font size",
+        property: "font_size",
+        type: "Number",
+        callback: LGraphCanvas.onShowPropertyEditor,
+      },
+      null,
+      { content: "Remove", callback: LGraphCanvas.onMenuNodeRemove },
+    ]
+  }
+
+  isPointInTitlebar(x: number, y: number): boolean {
+    const b = this.boundingRect
+    return isInRectangle(x, y, b[0], b[1], b[2], this.titleHeight)
+  }
+
+  isInResize(x: number, y: number): boolean {
+    const b = this.boundingRect
+    const right = b[0] + b[2]
+    const bottom = b[1] + b[3]
+
+    return (
+      x < right &&
+      y < bottom &&
+      x - right + (y - bottom) > -LGraphGroup.resizeLength
+    )
+  }
+
+  isPointInside = LGraphNode.prototype.isPointInside
+  setDirtyCanvas = LGraphNode.prototype.setDirtyCanvas
+}
diff --git a/src/lib/litegraph/src/LGraphIcon.ts b/src/lib/litegraph/src/LGraphIcon.ts
new file mode 100644
index 0000000000..d185f18b6e
--- /dev/null
+++ b/src/lib/litegraph/src/LGraphIcon.ts
@@ -0,0 +1,68 @@
+export interface LGraphIconOptions {
+  unicode: string
+  fontFamily?: string
+  color?: string
+  bgColor?: string
+  fontSize?: number
+  circlePadding?: number
+  xOffset?: number
+  yOffset?: number
+}
+
+export class LGraphIcon {
+  unicode: string
+  fontFamily: string
+  color: string
+  bgColor?: string
+  fontSize: number
+  circlePadding: number
+  xOffset: number
+  yOffset: number
+
+  constructor({
+    unicode,
+    fontFamily = "PrimeIcons",
+    color = "#e6c200",
+    bgColor,
+    fontSize = 16,
+    circlePadding = 2,
+    xOffset = 0,
+    yOffset = 0,
+  }: LGraphIconOptions) {
+    this.unicode = unicode
+    this.fontFamily = fontFamily
+    this.color = color
+    this.bgColor = bgColor
+    this.fontSize = fontSize
+    this.circlePadding = circlePadding
+    this.xOffset = xOffset
+    this.yOffset = yOffset
+  }
+
+  draw(ctx: CanvasRenderingContext2D, x: number, y: number) {
+    x += this.xOffset
+    y += this.yOffset
+
+    const { font, textBaseline, textAlign, fillStyle } = ctx
+
+    ctx.font = `${this.fontSize}px '${this.fontFamily}'`
+    ctx.textBaseline = "middle"
+    ctx.textAlign = "center"
+    const iconRadius = this.fontSize / 2 + this.circlePadding
+    // Draw icon background circle if bgColor is set
+    if (this.bgColor) {
+      ctx.beginPath()
+      ctx.arc(x + iconRadius, y, iconRadius, 0, 2 * Math.PI)
+      ctx.fillStyle = this.bgColor
+      ctx.fill()
+    }
+    // Draw icon
+    ctx.fillStyle = this.color
+    ctx.fillText(this.unicode, x + iconRadius, y)
+
+    ctx.font = font
+    ctx.textBaseline = textBaseline
+    ctx.textAlign = textAlign
+    ctx.fillStyle = fillStyle
+  }
+}
diff --git a/src/lib/litegraph/src/LGraphNode.ts b/src/lib/litegraph/src/LGraphNode.ts
new file mode 100644
index 0000000000..53fcfa9e87
--- /dev/null
+++ b/src/lib/litegraph/src/LGraphNode.ts
@@ -0,0 +1,3871 @@
+import type { DragAndScale } from "./DragAndScale"
+import type { IDrawBoundingOptions } from "./draw"
+import type { ReadOnlyRectangle } from "./infrastructure/Rectangle"
+import type {
+  ColorOption,
+  CompassCorners,
+  DefaultConnectionColors,
+  Dictionary,
+  IColorable,
+  IContextMenuValue,
+  IFoundSlot,
+  INodeFlags,
+  INodeInputSlot,
+  INodeOutputSlot,
+  INodeSlot,
+  INodeSlotContextItem,
+  IPinnable,
+  ISlotType,
+  Point,
+  Positionable,
+  ReadOnlyPoint,
+  ReadOnlyRect,
+  Rect,
+  Size,
+} from "./interfaces"
+import type { LGraph } from "./LGraph"
+import type { Reroute, RerouteId } from "./Reroute"
+import type { SubgraphInputNode } from "./subgraph/SubgraphInputNode"
+import type { SubgraphOutputNode } from "./subgraph/SubgraphOutputNode"
+import type { CanvasMouseEvent } from "./types/events"
+import type { NodeLike } from "./types/NodeLike"
+import type { ISerialisedNode, SubgraphIO } from "./types/serialisation"
+import type { IBaseWidget, IWidgetOptions, TWidgetType, TWidgetValue } from "./types/widgets"
+
+import { getNodeInputOnPos, getNodeOutputOnPos } from "./canvas/measureSlots"
+import { NullGraphError } from "./infrastructure/NullGraphError"
+import { Rectangle } from "./infrastructure/Rectangle"
+import { BadgePosition, LGraphBadge } from "./LGraphBadge"
+import { LGraphCanvas } from "./LGraphCanvas"
+import { LGraphNodeProperties } from "./LGraphNodeProperties"
+import { type LGraphNodeConstructor, LiteGraph, type Subgraph, type SubgraphNode } from "./litegraph"
+import { LLink } from "./LLink"
+import { createBounds, isInRect, isInRectangle, isPointInRect, snapPoint } from "./measure"
+import { NodeInputSlot } from "./node/NodeInputSlot"
+import { NodeOutputSlot } from "./node/NodeOutputSlot"
+import { inputAsSerialisable, isINodeInputSlot, isWidgetInputSlot, outputAsSerialisable } from "./node/slotUtils"
+import {
+  LGraphEventMode,
+  NodeSlotType,
+  RenderShape,
+  TitleMode,
+} from "./types/globalEnums"
+import { findFreeSlotOfType } from "./utils/collections"
+import { warnDeprecated } from "./utils/feedback"
+import { distributeSpace } from "./utils/spaceDistribution"
+import { toClass } from "./utils/type"
+import { BaseWidget } from "./widgets/BaseWidget"
+import { toConcreteWidget, type WidgetTypeMap } from "./widgets/widgetMap"
+
+// #region Types
+
+export type NodeId = number | string
+
+export type NodeProperty = string | number | boolean | object
+
+export interface INodePropertyInfo {
+  name: string
+  type?: string
+  default_value: NodeProperty | undefined
+}
+
+export interface IMouseOverData {
+  inputId?: number
+  outputId?: number
+  overWidget?: IBaseWidget
+}
+
+export interface ConnectByTypeOptions {
+  /** @deprecated Events */
+  createEventInCase?: boolean
+  /** Allow our wildcard slot to connect to typed slots on remote node. Default: true */
+  wildcardToTyped?: boolean
+  /** Allow our typed slot to connect to wildcard slots on remote node. Default: true */
+  typedToWildcard?: boolean
+  /** The {@link Reroute.id} that the connection is being dragged from. */
+  afterRerouteId?: RerouteId
+}
+
+/** Internal type used for type safety when implementing generic checks for inputs & outputs */
+export interface IGenericLinkOrLinks {
+  links?: INodeOutputSlot["links"]
+  link?: INodeInputSlot["link"]
+}
+
+export interface FindFreeSlotOptions {
+  /** Slots matching these types will be ignored.  Default: [] */
+  typesNotAccepted?: ISlotType[]
+  /** If true, the slot itself is returned instead of the index.  Default: false */
+  returnObj?: boolean
+}
+
+interface DrawSlotsOptions {
+  fromSlot?: INodeInputSlot | INodeOutputSlot
+  colorContext: DefaultConnectionColors
+  editorAlpha: number
+  lowQuality: boolean
+}
+
+interface DrawWidgetsOptions {
+  lowQuality?: boolean
+  editorAlpha?: number
+}
+
+interface DrawTitleOptions {
+  scale: number
+  title_height?: number
+  low_quality?: boolean
+}
+
+interface DrawTitleTextOptions extends DrawTitleOptions {
+  default_title_color: string
+}
+
+interface DrawTitleBoxOptions extends DrawTitleOptions {
+  box_size?: number
+}
+
+/*
+title: string
+pos: [x,y]
+size: [x,y]
+
+input|output: every connection
+    +  { name:string, type:string, pos: [x,y]=Optional, direction: "input"|"output", links: Array });
+
+general properties:
+    + clip_area: if you render outside the node, it will be clipped
+    + unsafe_execution: not allowed for safe execution
+    + skip_repeated_outputs: when adding new outputs, it wont show if there is one already connected
+    + resizable: if set to false it wont be resizable with the mouse
+    + widgets_start_y: widgets start at y distance from the top of the node
+
+flags object:
+    + collapsed: if it is collapsed
+
+supported callbacks:
+    + onAdded: when added to graph (warning: this is called BEFORE the node is configured when loading)
+    + onRemoved: when removed from graph
+    + onStart: when the graph starts playing
+    + onStop: when the graph stops playing
+    + onDrawForeground: render the inside widgets inside the node
+    + onDrawBackground: render the background area inside the node (only in edit mode)
+    + onMouseDown
+    + onMouseMove
+    + onMouseUp
+    + onMouseEnter
+    + onMouseLeave
+    + onExecute: execute the node
+    + onPropertyChanged: when a property is changed in the panel (return true to skip default behaviour)
+    + onGetInputs: returns an array of possible inputs
+    + onGetOutputs: returns an array of possible outputs
+    + onBounding: in case this node has a bigger bounding than the node itself (the callback receives the bounding as [x,y,w,h])
+    + onDblClick: double clicked in the node
+    + onNodeTitleDblClick: double clicked in the node title
+    + onInputDblClick: input slot double clicked (can be used to automatically create a node connected)
+    + onOutputDblClick: output slot double clicked (can be used to automatically create a node connected)
+    + onConfigure: called after the node has been configured
+    + onSerialize: to add extra info when serializing (the callback receives the object that should be filled with the data)
+    + onSelected
+    + onDeselected
+    + onDropItem : DOM item dropped over the node
+    + onDropFile : file dropped over the node
+    + onConnectInput : if returns false the incoming connection will be canceled
+    + onConnectionsChange : a connection changed (new one or removed) (NodeSlotType.INPUT or NodeSlotType.OUTPUT, slot, true if connected, link_info, input_info )
+    + onAction: action slot triggered
+    + getExtraMenuOptions: to add option to context menu
+*/
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
+export interface LGraphNode {
+  constructor: LGraphNodeConstructor
+}
+
+// #endregion Types
+
+/**
+ * Base class for all nodes
+ * @param title a name for the node
+ * @param type a type for the node
+ */
+// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
+export class LGraphNode implements NodeLike, Positionable, IPinnable, IColorable {
+  // Static properties used by dynamic child classes
+  static title?: string
+  static MAX_CONSOLE?: number
+  static type?: string
+  static category?: string
+  static filter?: string
+  static skip_list?: boolean
+
+  static resizeHandleSize = 15
+  static resizeEdgeSize = 5
+
+  /** Default setting for {@link LGraphNode.connectInputToOutput}. @see {@link INodeFlags.keepAllLinksOnBypass} */
+  static keepAllLinksOnBypass: boolean = false
+
+  /** The title text of the node. */
+  title: string
+  /**
+   * The font style used to render the node's title text.
+   */
+  get titleFontStyle(): string {
+    return `${LiteGraph.NODE_TEXT_SIZE}px ${LiteGraph.NODE_FONT}`
+  }
+
+  get innerFontStyle(): string {
+    return `normal ${LiteGraph.NODE_SUBTEXT_SIZE}px ${LiteGraph.NODE_FONT}`
+  }
+
+  get displayType(): string {
+    return this.type
+  }
+
+  graph: LGraph | Subgraph | null = null
+  id: NodeId
+  type: string = ""
+  inputs: INodeInputSlot[] = []
+  outputs: INodeOutputSlot[] = []
+
+  #concreteInputs: NodeInputSlot[] = []
+  #concreteOutputs: NodeOutputSlot[] = []
+
+  properties: Dictionary<NodeProperty | undefined> = {}
+  properties_info: INodePropertyInfo[] = []
+  flags: INodeFlags = {}
+  widgets?: IBaseWidget[]
+
+  /** Property manager for this node */
+  changeTracker: LGraphNodeProperties
+  /**
+   * The amount of space available for widgets to grow into.
+   * @see {@link layoutWidgets}
+   */
+  freeWidgetSpace?: number
+
+  locked?: boolean
+
+  /** Execution order, automatically computed during run @see {@link LGraph.computeExecutionOrder} */
+  order: number = 0
+  mode: LGraphEventMode = LGraphEventMode.ALWAYS
+  last_serialization?: ISerialisedNode
+  serialize_widgets?: boolean
+  /**
+   * The overridden fg color used to render the node.
+   * @see {@link renderingColor}
+   */
+  color?: string
+  /**
+   * The overridden bg color used to render the node.
+   * @see {@link renderingBgColor}
+   */
+  bgcolor?: string
+  /**
+   * The overridden box color used to render the node.
+   * @see {@link renderingBoxColor}
+   */
+  boxcolor?: string
+
+  /** The fg color used to render the node. */
+  get renderingColor(): string {
+    return this.color || this.constructor.color || LiteGraph.NODE_DEFAULT_COLOR
+  }
+
+  /** The bg color used to render the node. */
+  get renderingBgColor(): string {
+    return this.bgcolor || this.constructor.bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR
+  }
+
+  /** The box color used to render the node. */
+  get renderingBoxColor(): string {
+    if (this.boxcolor) return this.boxcolor
+
+    if (LiteGraph.node_box_coloured_when_on) {
+      if (this.action_triggered) return "#FFF"
+      if (this.execute_triggered) return "#AAA"
+    }
+
+    if (LiteGraph.node_box_coloured_by_mode) {
+      const modeColour = LiteGraph.NODE_MODES_COLORS[this.mode ?? LGraphEventMode.ALWAYS]
+      if (modeColour) return modeColour
+    }
+    return LiteGraph.NODE_DEFAULT_BOXCOLOR
+  }
+
+  /** @inheritdoc {@link IColorable.setColorOption} */
+  setColorOption(colorOption: ColorOption | null): void {
+    if (colorOption == null) {
+      delete this.color
+      delete this.bgcolor
+    } else {
+      this.color = colorOption.color
+      this.bgcolor = colorOption.bgcolor
+    }
+  }
+
+  /** @inheritdoc {@link IColorable.getColorOption} */
+  getColorOption(): ColorOption | null {
+    return Object.values(LGraphCanvas.node_colors).find(
+      colorOption =>
+        colorOption.color === this.color && colorOption.bgcolor === this.bgcolor,
+    ) ?? null
+  }
+
+  /**
+   * The stroke styles that should be applied to the node.
+   */
+  strokeStyles: Record<string, (this: LGraphNode) => IDrawBoundingOptions | undefined>
+
+  /**
+   * The progress of node execution. Used to render a progress bar. Value between 0 and 1.
+   */
+  progress?: number
+
+  exec_version?: number
+  action_call?: string
+  execute_triggered?: number
+  action_triggered?: number
+  widgets_up?: boolean
+  widgets_start_y?: number
+  lostFocusAt?: number
+  gotFocusAt?: number
+  badges: (LGraphBadge | (() => LGraphBadge))[] = []
+  badgePosition: BadgePosition = BadgePosition.TopLeft
+  onOutputRemoved?(this: LGraphNode, slot: number): void
+  onInputRemoved?(this: LGraphNode, slot: number, input: INodeInputSlot): void
+  /**
+   * The width of the node when collapsed.
+   * Updated by {@link LGraphCanvas.drawNode}
+   */
+  _collapsed_width?: number
+  /**
+   * Called once at the start of every frame.  Caller may change the values in {@link out}, which will be reflected in {@link boundingRect}.
+   * WARNING: Making changes to boundingRect via onBounding is poorly supported, and will likely result in strange behaviour.
+   */
+  onBounding?(this: LGraphNode, out: Rect): void
+  console?: string[]
+  _level?: number
+  _shape?: RenderShape
+  mouseOver?: IMouseOverData
+  redraw_on_mouse?: boolean
+  resizable?: boolean
+  clonable?: boolean
+  _relative_id?: number
+  clip_area?: boolean
+  ignore_remove?: boolean
+  has_errors?: boolean
+  removable?: boolean
+  block_delete?: boolean
+  selected?: boolean
+  showAdvanced?: boolean
+
+  declare comfyClass?: string
+  declare isVirtualNode?: boolean
+  applyToGraph?(extraLinks?: LLink[]): void
+
+  isSubgraphNode(): this is SubgraphNode {
+    return false
+  }
+
+  /** @inheritdoc {@link renderArea} */
+  #renderArea: Float32Array = new Float32Array(4)
+  /**
+   * Rect describing the node area, including shadows and any protrusions.
+   * Determines if the node is visible.  Calculated once at the start of every frame.
+   */
+  get renderArea(): ReadOnlyRect {
+    return this.#renderArea
+  }
+
+  /** @inheritdoc {@link boundingRect} */
+  #boundingRect: Rectangle = new Rectangle()
+  /**
+   * Cached node position & area as `x, y, width, height`.  Includes changes made by {@link onBounding}, if present.
+   *
+   * Determines the node hitbox and other rendering effects.  Calculated once at the start of every frame.
+   */
+  get boundingRect(): ReadOnlyRectangle {
+    return this.#boundingRect
+  }
+
+  /** The offset from {@link pos} to the top-left of {@link boundingRect}. */
+  get boundingOffset(): ReadOnlyPoint {
+    const { pos: [posX, posY], boundingRect: [bX, bY] } = this
+    return [posX - bX, posY - bY]
+  }
+
+  /** {@link pos} and {@link size} values are backed by this {@link Rect}. */
+  _posSize: Float32Array = new Float32Array(4)
+  _pos: Point = this._posSize.subarray(0, 2)
+  _size: Size = this._posSize.subarray(2, 4)
+
+  public get pos() {
+    return this._pos
+  }
+
+  /** Node position does not necessarily correlate to the top-left corner. */
+  public set pos(value) {
+    if (!value || value.length < 2) return
+
+    this._pos[0] = value[0]
+    this._pos[1] = value[1]
+  }
+
+  public get size() {
+    return this._size
+  }
+
+  public set size(value) {
+    if (!value || value.length < 2) return
+
+    this._size[0] = value[0]
+    this._size[1] = value[1]
+  }
+
+  /**
+   * The size of the node used for rendering.
+   */
+  get renderingSize(): Size {
+    return this.flags.collapsed ? [this._collapsed_width ?? 0, 0] : this._size
+  }
+
+  get shape(): RenderShape | undefined {
+    return this._shape
+  }
+
+  set shape(v: RenderShape | "default" | "box" | "round" | "circle" | "card") {
+    switch (v) {
+    case "default":
+      delete this._shape
+      break
+    case "box":
+      this._shape = RenderShape.BOX
+      break
+    case "round":
+      this._shape = RenderShape.ROUND
+      break
+    case "circle":
+      this._shape = RenderShape.CIRCLE
+      break
+    case "card":
+      this._shape = RenderShape.CARD
+      break
+    default:
+      this._shape = v
+    }
+  }
+
+  /**
+   * The shape of the node used for rendering. @see {@link RenderShape}
+   */
+  get renderingShape(): RenderShape {
+    return this._shape || this.constructor.shape || LiteGraph.NODE_DEFAULT_SHAPE
+  }
+
+  public get is_selected(): boolean | undefined {
+    return this.selected
+  }
+
+  public set is_selected(value: boolean) {
+    this.selected = value
+  }
+
+  public get title_mode(): TitleMode {
+    return this.constructor.title_mode ?? TitleMode.NORMAL_TITLE
+  }
+
+  onConnectInput?(
+    this: LGraphNode,
+    target_slot: number,
+    type: unknown,
+    output: INodeOutputSlot | SubgraphIO,
+    node: LGraphNode | SubgraphInputNode,
+    slot: number,
+  ): boolean
+  onConnectOutput?(
+    this: LGraphNode,
+    slot: number,
+    type: unknown,
+    input: INodeInputSlot | SubgraphIO,
+    target_node: number | LGraphNode | SubgraphOutputNode,
+    target_slot: number,
+  ): boolean
+  onResize?(this: LGraphNode, size: Size): void
+  onPropertyChanged?(
+    this: LGraphNode,
+    name: string,
+    value: unknown,
+    prev_value?: unknown,
+  ): boolean
+  /** Called for each connection that is created, updated, or removed. This includes "restored" connections when deserialising. */
+  onConnectionsChange?(
+    this: LGraphNode,
+    type: ISlotType,
+    index: number,
+    isConnected: boolean,
+    link_info: LLink | null | undefined,
+    inputOrOutput: INodeInputSlot | INodeOutputSlot | SubgraphIO,
+  ): void
+  onInputAdded?(this: LGraphNode, input: INodeInputSlot): void
+  onOutputAdded?(this: LGraphNode, output: INodeOutputSlot): void
+  onConfigure?(this: LGraphNode, serialisedNode: ISerialisedNode): void
+  onSerialize?(this: LGraphNode, serialised: ISerialisedNode): any
+  onExecute?(
+    this: LGraphNode,
+    param?: unknown,
+    options?: { action_call?: any },
+  ): void
+  onAction?(
+    this: LGraphNode,
+    action: string,
+    param: unknown,
+    options: { action_call?: string },
+  ): void
+  onDrawBackground?(
+    this: LGraphNode,
+    ctx: CanvasRenderingContext2D,
+  ): void
+  onNodeCreated?(this: LGraphNode): void
+  /**
+   * Callback invoked by {@link connect} to override the target slot index.
+   * Its return value overrides the target index selection.
+   * @param target_slot The current input slot index
+   * @param requested_slot The originally requested slot index - could be negative, or if using (deprecated) name search, a string
+   * @returns {number | null} If a number is returned, the connection will be made to that input index.
+   * If an invalid index or non-number (false, null, NaN etc) is returned, the connection will be cancelled.
+   */
+  onBeforeConnectInput?(
+    this: LGraphNode,
+    target_slot: number,
+    requested_slot?: number | string,
+  ): number | false | null
+  onShowCustomPanelInfo?(this: LGraphNode, panel: any): void
+  onAddPropertyToPanel?(this: LGraphNode, pName: string, panel: any): boolean
+  onWidgetChanged?(
+    this: LGraphNode,
+    name: string,
+    value: unknown,
+    old_value: unknown,
+    w: IBaseWidget,
+  ): void
+  onDeselected?(this: LGraphNode): void
+  onKeyUp?(this: LGraphNode, e: KeyboardEvent): void
+  onKeyDown?(this: LGraphNode, e: KeyboardEvent): void
+  onSelected?(this: LGraphNode): void
+  getExtraMenuOptions?(
+    this: LGraphNode,
+    canvas: LGraphCanvas,
+    options: (IContextMenuValue<unknown> | null)[],
+  ): (IContextMenuValue<unknown> | null)[]
+  getMenuOptions?(this: LGraphNode, canvas: LGraphCanvas): IContextMenuValue[]
+  onAdded?(this: LGraphNode, graph: LGraph): void
+  onDrawCollapsed?(
+    this: LGraphNode,
+    ctx: CanvasRenderingContext2D,
+    cavnas: LGraphCanvas,
+  ): boolean
+  onDrawForeground?(
+    this: LGraphNode,
+    ctx: CanvasRenderingContext2D,
+    canvas: LGraphCanvas,
+    canvasElement: HTMLCanvasElement,
+  ): void
+  onMouseLeave?(this: LGraphNode, e: CanvasMouseEvent): void
+  /**
+   * Override the default slot menu options.
+   */
+  getSlotMenuOptions?(this: LGraphNode, slot: IFoundSlot): IContextMenuValue[]
+  /**
+   * Add extra menu options to the slot context menu.
+   */
+  getExtraSlotMenuOptions?(this: LGraphNode, slot: IFoundSlot): IContextMenuValue[]
+
+  // FIXME: Re-typing
+  onDropItem?(this: LGraphNode, event: Event): boolean
+  onDropData?(
+    this: LGraphNode,
+    data: string | ArrayBuffer,
+    filename: any,
+    file: any,
+  ): void
+  onDropFile?(this: LGraphNode, file: any): void
+  onInputClick?(this: LGraphNode, index: number, e: CanvasMouseEvent): void
+  onInputDblClick?(this: LGraphNode, index: number, e: CanvasMouseEvent): void
+  onOutputClick?(this: LGraphNode, index: number, e: CanvasMouseEvent): void
+  onOutputDblClick?(this: LGraphNode, index: number, e: CanvasMouseEvent): void
+  // TODO: Return type
+  onGetPropertyInfo?(this: LGraphNode, property: string): any
+  onNodeOutputAdd?(this: LGraphNode, value: unknown): void
+  onNodeInputAdd?(this: LGraphNode, value: unknown): void
+  onMenuNodeInputs?(
+    this: LGraphNode,
+    entries: (IContextMenuValue<INodeSlotContextItem> | null)[],
+  ): (IContextMenuValue<INodeSlotContextItem> | null)[]
+  onMenuNodeOutputs?(
+    this: LGraphNode,
+    entries: (IContextMenuValue<INodeSlotContextItem> | null)[],
+  ): (IContextMenuValue<INodeSlotContextItem> | null)[]
+  onMouseUp?(this: LGraphNode, e: CanvasMouseEvent, pos: Point): void
+  onMouseEnter?(this: LGraphNode, e: CanvasMouseEvent): void
+  /** Blocks drag if return value is truthy. @param pos Offset from {@link LGraphNode.pos}. */
+  onMouseDown?(
+    this: LGraphNode,
+    e: CanvasMouseEvent,
+    pos: Point,
+    canvas: LGraphCanvas,
+  ): boolean
+  /** @param pos Offset from {@link LGraphNode.pos}. */
+  onDblClick?(
+    this: LGraphNode,
+    e: CanvasMouseEvent,
+    pos: Point,
+    canvas: LGraphCanvas,
+  ): void
+  /** @param pos Offset from {@link LGraphNode.pos}. */
+  onNodeTitleDblClick?(
+    this: LGraphNode,
+    e: CanvasMouseEvent,
+    pos: Point,
+    canvas: LGraphCanvas,
+  ): void
+  onDrawTitle?(this: LGraphNode, ctx: CanvasRenderingContext2D): void
+  onDrawTitleText?(
+    this: LGraphNode,
+    ctx: CanvasRenderingContext2D,
+    title_height: number,
+    size: Size,
+    scale: number,
+    title_text_font: string,
+    selected?: boolean,
+  ): void
+  onDrawTitleBox?(
+    this: LGraphNode,
+    ctx: CanvasRenderingContext2D,
+    title_height: number,
+    size: Size,
+    scale: number,
+  ): void
+  onDrawTitleBar?(
+    this: LGraphNode,
+    ctx: CanvasRenderingContext2D,
+    title_height: number,
+    size: Size,
+    scale: number,
+    fgcolor: any,
+  ): void
+  onRemoved?(this: LGraphNode): void
+  onMouseMove?(
+    this: LGraphNode,
+    e: MouseEvent,
+    pos: Point,
+    arg2: LGraphCanvas,
+  ): void
+  onPropertyChange?(this: LGraphNode): void
+  updateOutputData?(this: LGraphNode, origin_slot: number): void
+
+  #getErrorStrokeStyle(this: LGraphNode): IDrawBoundingOptions | undefined {
+    if (this.has_errors) {
+      return {
+        padding: 12,
+        lineWidth: 10,
+        color: LiteGraph.NODE_ERROR_COLOUR,
+      }
+    }
+  }
+
+  #getSelectedStrokeStyle(this: LGraphNode): IDrawBoundingOptions | undefined {
+    if (this.selected) {
+      return {
+        padding: this.has_errors ? 20 : undefined,
+      }
+    }
+  }
+
+  constructor(title: string, type?: string) {
+    this.id = LiteGraph.use_uuids ? LiteGraph.uuidv4() : -1
+    this.title = title || "Unnamed"
+    this.type = type ?? ""
+    this.size = [LiteGraph.NODE_WIDTH, 60]
+    this.pos = [10, 10]
+    this.strokeStyles = {
+      error: this.#getErrorStrokeStyle,
+      selected: this.#getSelectedStrokeStyle,
+    }
+
+    // Initialize property manager with tracked properties
+    this.changeTracker = new LGraphNodeProperties(this)
+  }
+
+  /**
+   * configure a node from an object containing the serialized info
+   */
+  configure(info: ISerialisedNode): void {
+    if (this.graph) {
+      this.graph._version++
+    }
+    for (const j in info) {
+      if (j == "properties") {
+        // i don't want to clone properties, I want to reuse the old container
+        for (const k in info.properties) {
+          this.properties[k] = info.properties[k]
+          this.onPropertyChanged?.(k, info.properties[k])
+        }
+        continue
+      }
+
+      // @ts-expect-error #594
+      if (info[j] == null) {
+        continue
+      // @ts-expect-error #594
+      } else if (typeof info[j] == "object") {
+        // @ts-expect-error #594
+        if (this[j]?.configure) {
+          // @ts-expect-error #594
+          this[j]?.configure(info[j])
+        } else {
+          // @ts-expect-error #594
+          this[j] = LiteGraph.cloneObject(info[j], this[j])
+        }
+      } else {
+        // value
+        // @ts-expect-error #594
+        this[j] = info[j]
+      }
+    }
+
+    if (!info.title) {
+      this.title = this.constructor.title
+    }
+
+    this.inputs ??= []
+    this.inputs = this.inputs.map(input => toClass(NodeInputSlot, input, this))
+    for (const [i, input] of this.inputs.entries()) {
+      const link = this.graph && input.link != null
+        ? this.graph._links.get(input.link)
+        : null
+      this.onConnectionsChange?.(NodeSlotType.INPUT, i, true, link, input)
+      this.onInputAdded?.(input)
+    }
+
+    this.outputs ??= []
+    this.outputs = this.outputs.map(output => toClass(NodeOutputSlot, output, this))
+    for (const [i, output] of this.outputs.entries()) {
+      if (!output.links) continue
+
+      for (const linkId of output.links) {
+        const link = this.graph
+          ? this.graph._links.get(linkId)
+          : null
+        this.onConnectionsChange?.(NodeSlotType.OUTPUT, i, true, link, output)
+      }
+      this.onOutputAdded?.(output)
+    }
+
+    if (this.widgets) {
+      for (const w of this.widgets) {
+        if (!w) continue
+
+        if (w.options?.property && this.properties[w.options.property] != undefined)
+          w.value = JSON.parse(JSON.stringify(this.properties[w.options.property]))
+      }
+
+      if (info.widgets_values) {
+        const widgetsWithValue = this.widgets.filter(w => w.serialize !== false)
+        for (let i = 0; i < info.widgets_values.length; ++i) {
+          const widget = widgetsWithValue[i]
+          if (widget) {
+            widget.value = info.widgets_values[i]
+          }
+        }
+      }
+    }
+
+    // Sync the state of this.resizable.
+    if (this.pinned) this.resizable = false
+
+    this.onConfigure?.(info)
+  }
+
+  /**
+   * serialize the content
+   */
+  serialize(): ISerialisedNode {
+    // create serialization object
+    const o: ISerialisedNode = {
+      id: this.id,
+      type: this.type,
+      pos: [this.pos[0], this.pos[1]],
+      size: [this.size[0], this.size[1]],
+      flags: LiteGraph.cloneObject(this.flags),
+      order: this.order,
+      mode: this.mode,
+      showAdvanced: this.showAdvanced,
+    }
+
+    // special case for when there were errors
+    if (this.constructor === LGraphNode && this.last_serialization)
+      return this.last_serialization
+
+    if (this.inputs) o.inputs = this.inputs.map(input => inputAsSerialisable(input))
+    if (this.outputs) o.outputs = this.outputs.map(output => outputAsSerialisable(output))
+
+    if (this.title && this.title != this.constructor.title) o.title = this.title
+
+    if (this.properties) o.properties = LiteGraph.cloneObject(this.properties)
+
+    const { widgets } = this
+    if (widgets && this.serialize_widgets) {
+      o.widgets_values = []
+      for (const [i, widget] of widgets.entries()) {
+        if (widget.serialize === false) continue
+        // @ts-expect-error #595 No-null
+        o.widgets_values[i] = widget ? widget.value : null
+      }
+    }
+
+    if (!o.type) o.type = this.constructor.type
+
+    if (this.color) o.color = this.color
+    if (this.bgcolor) o.bgcolor = this.bgcolor
+    if (this.boxcolor) o.boxcolor = this.boxcolor
+    if (this.shape) o.shape = this.shape
+
+    if (this.onSerialize?.(o)) console.warn("node onSerialize shouldnt return anything, data should be stored in the object pass in the first parameter")
+
+    return o
+  }
+
+  /* Creates a clone of this node */
+  clone(): LGraphNode | null {
+    if (this.type == null) return null
+    const node = LiteGraph.createNode(this.type)
+    if (!node) return null
+
+    // we clone it because serialize returns shared containers
+    const data = LiteGraph.cloneObject(this.serialize())
+    const { inputs, outputs } = data
+
+    // remove links
+    if (inputs) {
+      for (const input of inputs) {
+        input.link = null
+      }
+    }
+
+    if (outputs) {
+      for (const { links } of outputs) {
+        if (links) links.length = 0
+      }
+    }
+
+    // @ts-expect-error Exceptional case: id is removed so that the graph can assign a new one on add.
+    delete data.id
+
+    if (LiteGraph.use_uuids) data.id = LiteGraph.uuidv4()
+
+    node.configure(data)
+
+    return node
+  }
+
+  /**
+   * serialize and stringify
+   */
+  toString(): string {
+    return JSON.stringify(this.serialize())
+  }
+
+  /**
+   * get the title string
+   */
+  getTitle(): string {
+    return this.title || this.constructor.title
+  }
+
+  /**
+   * sets the value of a property
+   * @param name
+   * @param value
+   */
+  setProperty(name: string, value: TWidgetValue): void {
+    this.properties ||= {}
+    if (value === this.properties[name]) return
+
+    const prev_value = this.properties[name]
+    this.properties[name] = value
+    // abort change
+    if (this.onPropertyChanged?.(name, value, prev_value) === false)
+      this.properties[name] = prev_value
+
+    if (this.widgets) {
+      for (const w of this.widgets) {
+        if (!w) continue
+
+        if (w.options.property == name) {
+          w.value = value
+          break
+        }
+      }
+    }
+  }
+
+  /**
+   * sets the output data
+   * @param slot
+   * @param data
+   */
+  setOutputData(slot: number, data: number | string | boolean | { toToolTip?(): string }): void {
+    const { outputs } = this
+    if (!outputs) return
+
+    // this maybe slow and a niche case
+    if (slot == -1 || slot >= outputs.length) return
+
+    const output_info = outputs[slot]
+    if (!output_info) return
+
+    // store data in the output itself in case we want to debug
+    output_info._data = data
+
+    if (!this.graph) throw new NullGraphError()
+
+    // if there are connections, pass the data to the connections
+    const { links } = outputs[slot]
+    if (links) {
+      for (const id of links) {
+        const link = this.graph._links.get(id)
+        if (link) link.data = data
+      }
+    }
+  }
+
+  /**
+   * sets the output data type, useful when you want to be able to overwrite the data type
+   */
+  setOutputDataType(slot: number, type: ISlotType): void {
+    const { outputs } = this
+    if (!outputs || (slot == -1 || slot >= outputs.length)) return
+
+    const output_info = outputs[slot]
+    if (!output_info) return
+    // store data in the output itself in case we want to debug
+    output_info.type = type
+
+    if (!this.graph) throw new NullGraphError()
+
+    // if there are connections, pass the data to the connections
+    const { links } = outputs[slot]
+    if (links) {
+      for (const id of links) {
+        const link = this.graph._links.get(id)
+        if (link) link.type = type
+      }
+    }
+  }
+
+  /**
+   * Retrieves the input data (data traveling through the connection) from one slot
+   * @param slot
+   * @param force_update if set to true it will force the connected node of this slot to output data into this link
+   * @returns data or if it is not connected returns undefined
+   */
+  getInputData(slot: number, force_update?: boolean): unknown {
+    if (!this.inputs) return
+
+    if (slot >= this.inputs.length || this.inputs[slot].link == null) return
+    if (!this.graph) throw new NullGraphError()
+
+    const link_id = this.inputs[slot].link
+    const link = this.graph._links.get(link_id)
+    // bug: weird case but it happens sometimes
+    if (!link) return null
+
+    if (!force_update) return link.data
+
+    // special case: used to extract data from the incoming connection before the graph has been executed
+    const node = this.graph.getNodeById(link.origin_id)
+    if (!node) return link.data
+
+    if (node.updateOutputData) {
+      node.updateOutputData(link.origin_slot)
+    } else {
+      node.onExecute?.()
+    }
+
+    return link.data
+  }
+
+  /**
+   * Retrieves the input data type (in case this supports multiple input types)
+   * @param slot
+   * @returns datatype in string format
+   */
+  getInputDataType(slot: number): ISlotType | null {
+    if (!this.inputs) return null
+    if (slot >= this.inputs.length || this.inputs[slot].link == null) return null
+    if (!this.graph) throw new NullGraphError()
+
+    const link_id = this.inputs[slot].link
+    const link = this.graph._links.get(link_id)
+    // bug: weird case but it happens sometimes
+    if (!link) return null
+
+    const node = this.graph.getNodeById(link.origin_id)
+    if (!node) return link.type
+
+    const output_info = node.outputs[link.origin_slot]
+    return output_info
+      ? output_info.type
+      : null
+  }
+
+  /**
+   * Retrieves the input data from one slot using its name instead of slot number
+   * @param slot_name
+   * @param force_update if set to true it will force the connected node of this slot to output data into this link
+   * @returns data or if it is not connected returns null
+   */
+  getInputDataByName(slot_name: string, force_update: boolean): unknown {
+    const slot = this.findInputSlot(slot_name)
+    return slot == -1
+      ? null
+      : this.getInputData(slot, force_update)
+  }
+
+  /**
+   * tells you if there is a connection in one input slot
+   * @param slot The 0-based index of the input to check
+   * @returns `true` if the input slot has a link ID (does not perform validation)
+   */
+  isInputConnected(slot: number): boolean {
+    if (!this.inputs) return false
+    return slot < this.inputs.length && this.inputs[slot].link != null
+  }
+
+  /**
+   * tells you info about an input connection (which node, type, etc)
+   * @returns object or null { link: id, name: string, type: string or 0 }
+   */
+  getInputInfo(slot: number): INodeInputSlot | null {
+    return !this.inputs || !(slot < this.inputs.length)
+      ? null
+      : this.inputs[slot]
+  }
+
+  /**
+   * Returns the link info in the connection of an input slot
+   * @returns object or null
+   */
+  getInputLink(slot: number): LLink | null {
+    if (!this.inputs) return null
+
+    if (slot < this.inputs.length) {
+      if (!this.graph) throw new NullGraphError()
+
+      const input = this.inputs[slot]
+      if (input.link != null) {
+        return this.graph._links.get(input.link) ?? null
+      }
+    }
+    return null
+  }
+
+  /**
+   * returns the node connected in the input slot
+   * @returns node or null
+   */
+  getInputNode(slot: number): LGraphNode | null {
+    if (!this.inputs) return null
+    if (slot >= this.inputs.length) return null
+
+    const input = this.inputs[slot]
+    if (!input || input.link === null) return null
+    if (!this.graph) throw new NullGraphError()
+
+    const link_info = this.graph._links.get(input.link)
+    if (!link_info) return null
+
+    return this.graph.getNodeById(link_info.origin_id)
+  }
+
+  /**
+   * returns the value of an input with this name, otherwise checks if there is a property with that name
+   * @returns value
+   */
+  getInputOrProperty(name: string): unknown {
+    const { inputs } = this
+    if (!inputs?.length) {
+      return this.properties ? this.properties[name] : null
+    }
+    if (!this.graph) throw new NullGraphError()
+
+    for (const input of inputs) {
+      if (name == input.name && input.link != null) {
+        const link = this.graph._links.get(input.link)
+        if (link) return link.data
+      }
+    }
+    return this.properties[name]
+  }
+
+  /**
+   * tells you the last output data that went in that slot
+   * @returns object or null
+   */
+  getOutputData(slot: number): unknown {
+    if (!this.outputs) return null
+    if (slot >= this.outputs.length) return null
+
+    const info = this.outputs[slot]
+    return info._data
+  }
+
+  /**
+   * tells you info about an output connection (which node, type, etc)
+   * @returns object or null { name: string, type: string, links: [ ids of links in number ] }
+   */
+  getOutputInfo(slot: number): INodeOutputSlot | null {
+    return !this.outputs || !(slot < this.outputs.length)
+      ? null
+      : this.outputs[slot]
+  }
+
+  /**
+   * tells you if there is a connection in one output slot
+   */
+  isOutputConnected(slot: number): boolean {
+    if (!this.outputs) return false
+    return slot < this.outputs.length && Number(this.outputs[slot].links?.length) > 0
+  }
+
+  /**
+   * tells you if there is any connection in the output slots
+   */
+  isAnyOutputConnected(): boolean {
+    const { outputs } = this
+    if (!outputs) return false
+
+    for (const output of outputs) {
+      if (output.links?.length) return true
+    }
+    return false
+  }
+
+  /**
+   * retrieves all the nodes connected to this output slot
+   */
+  getOutputNodes(slot: number): LGraphNode[] | null {
+    const { outputs } = this
+    if (!outputs || outputs.length == 0) return null
+
+    if (slot >= outputs.length) return null
+
+    const { links } = outputs[slot]
+    if (!links || links.length == 0) return null
+    if (!this.graph) throw new NullGraphError()
+
+    const r: LGraphNode[] = []
+    for (const id of links) {
+      const link = this.graph._links.get(id)
+      if (link) {
+        const target_node = this.graph.getNodeById(link.target_id)
+        if (target_node) {
+          r.push(target_node)
+        }
+      }
+    }
+    return r
+  }
+
+  addOnTriggerInput(): number {
+    const trigS = this.findInputSlot("onTrigger")
+    if (trigS == -1) {
+      this.addInput("onTrigger", LiteGraph.EVENT, {
+        nameLocked: true,
+      })
+      return this.findInputSlot("onTrigger")
+    }
+    return trigS
+  }
+
+  addOnExecutedOutput(): number {
+    const trigS = this.findOutputSlot("onExecuted")
+    if (trigS == -1) {
+      this.addOutput("onExecuted", LiteGraph.ACTION, {
+        nameLocked: true,
+      })
+      return this.findOutputSlot("onExecuted")
+    }
+    return trigS
+  }
+
+  onAfterExecuteNode(param: unknown, options?: { action_call?: any }) {
+    const trigS = this.findOutputSlot("onExecuted")
+    if (trigS != -1) {
+      this.triggerSlot(trigS, param, null, options)
+    }
+  }
+
+  changeMode(modeTo: number): boolean {
+    switch (modeTo) {
+    case LGraphEventMode.ON_EVENT:
+      break
+
+    case LGraphEventMode.ON_TRIGGER:
+      this.addOnTriggerInput()
+      this.addOnExecutedOutput()
+      break
+
+    case LGraphEventMode.NEVER:
+      break
+
+    case LGraphEventMode.ALWAYS:
+      break
+
+      // @ts-expect-error Not impl.
+    case LiteGraph.ON_REQUEST:
+      break
+
+    default:
+      return false
+      break
+    }
+    this.mode = modeTo
+    return true
+  }
+
+  /**
+   * Triggers the node code execution, place a boolean/counter to mark the node as being executed
+   */
+  doExecute(param?: unknown, options?: { action_call?: any }): void {
+    options = options || {}
+    if (this.onExecute) {
+      // enable this to give the event an ID
+      options.action_call ||= `${this.id}_exec_${Math.floor(Math.random() * 9999)}`
+      if (!this.graph) throw new NullGraphError()
+
+      // @ts-expect-error Technically it works when id is a string. Array gets props.
+      this.graph.nodes_executing[this.id] = true
+      this.onExecute(param, options)
+      // @ts-expect-error deprecated
+      this.graph.nodes_executing[this.id] = false
+
+      // save execution/action ref
+      this.exec_version = this.graph.iteration
+      if (options?.action_call) {
+        this.action_call = options.action_call
+        // @ts-expect-error deprecated
+        this.graph.nodes_executedAction[this.id] = options.action_call
+      }
+    }
+    // the nFrames it will be used (-- each step), means "how old" is the event
+    this.execute_triggered = 2
+    this.onAfterExecuteNode?.(param, options)
+  }
+
+  /**
+   * Triggers an action, wrapped by logics to control execution flow
+   * @param action name
+   */
+  actionDo(
+    action: string,
+    param: unknown,
+    options: { action_call?: string },
+  ): void {
+    options = options || {}
+    if (this.onAction) {
+      // enable this to give the event an ID
+      options.action_call ||= `${this.id}_${action || "action"}_${Math.floor(Math.random() * 9999)}`
+      if (!this.graph) throw new NullGraphError()
+
+      // @ts-expect-error deprecated
+      this.graph.nodes_actioning[this.id] = action || "actioning"
+      this.onAction(action, param, options)
+      // @ts-expect-error deprecated
+      this.graph.nodes_actioning[this.id] = false
+
+      // save execution/action ref
+      if (options?.action_call) {
+        this.action_call = options.action_call
+        // @ts-expect-error deprecated
+        this.graph.nodes_executedAction[this.id] = options.action_call
+      }
+    }
+    // the nFrames it will be used (-- each step), means "how old" is the event
+    this.action_triggered = 2
+    this.onAfterExecuteNode?.(param, options)
+  }
+
+  /**
+   * Triggers an event in this node, this will trigger any output with the same name
+   * @param action name ( "on_play", ... ) if action is equivalent to false then the event is send to all
+   */
+  trigger(
+    action: string,
+    param: unknown,
+    options: { action_call?: any },
+  ): void {
+    const { outputs } = this
+    if (!outputs || !outputs.length) {
+      return
+    }
+
+    if (this.graph) this.graph._last_trigger_time = LiteGraph.getTime()
+
+    for (const [i, output] of outputs.entries()) {
+      if (
+        !output ||
+        output.type !== LiteGraph.EVENT ||
+        (action && output.name != action)
+      ) {
+        continue
+      }
+      this.triggerSlot(i, param, null, options)
+    }
+  }
+
+  /**
+   * Triggers a slot event in this node: cycle output slots and launch execute/action on connected nodes
+   * @param slot the index of the output slot
+   * @param link_id [optional] in case you want to trigger and specific output link in a slot
+   */
+  triggerSlot(
+    slot: number,
+    param: unknown,
+    link_id: number | null,
+    options?: { action_call?: any },
+  ): void {
+    options = options || {}
+    if (!this.outputs) return
+
+    if (slot == null) {
+      console.error("slot must be a number")
+      return
+    }
+
+    if (typeof slot !== "number")
+      console.warn("slot must be a number, use node.trigger('name') if you want to use a string")
+
+    const output = this.outputs[slot]
+    if (!output) return
+
+    const links = output.links
+    if (!links || !links.length) return
+
+    if (!this.graph) throw new NullGraphError()
+    this.graph._last_trigger_time = LiteGraph.getTime()
+
+    // for every link attached here
+    for (const id of links) {
+      // to skip links
+      if (link_id != null && link_id != id) continue
+
+      const link_info = this.graph._links.get(id)
+      // not connected
+      if (!link_info) continue
+
+      link_info._last_time = LiteGraph.getTime()
+      const node = this.graph.getNodeById(link_info.target_id)
+      // node not found?
+      if (!node) continue
+
+      if (node.mode === LGraphEventMode.ON_TRIGGER) {
+        // generate unique trigger ID if not present
+        if (!options.action_call)
+          options.action_call = `${this.id}_trigg_${Math.floor(Math.random() * 9999)}`
+        // -- wrapping node.onExecute(param); --
+        node.doExecute?.(param, options)
+      } else if (node.onAction) {
+        // generate unique action ID if not present
+        if (!options.action_call)
+          options.action_call = `${this.id}_act_${Math.floor(Math.random() * 9999)}`
+        // pass the action name
+        const target_connection = node.inputs[link_info.target_slot]
+        node.actionDo(target_connection.name, param, options)
+      }
+    }
+  }
+
+  /**
+   * clears the trigger slot animation
+   * @param slot the index of the output slot
+   * @param link_id [optional] in case you want to trigger and specific output link in a slot
+   */
+  clearTriggeredSlot(slot: number, link_id: number): void {
+    if (!this.outputs) return
+
+    const output = this.outputs[slot]
+    if (!output) return
+
+    const links = output.links
+    if (!links || !links.length) return
+
+    if (!this.graph) throw new NullGraphError()
+
+    // for every link attached here
+    for (const id of links) {
+      // to skip links
+      if (link_id != null && link_id != id) continue
+
+      const link_info = this.graph._links.get(id)
+      // not connected
+      if (!link_info) continue
+
+      link_info._last_time = 0
+    }
+  }
+
+  /**
+   * changes node size and triggers callback
+   */
+  setSize(size: Size): void {
+    this.size = size
+    this.onResize?.(this.size)
+  }
+
+  /**
+   * Expands the node size to fit its content.
+   */
+  expandToFitContent(): void {
+    const newSize = this.computeSize()
+    this.setSize([
+      Math.max(this.size[0], newSize[0]),
+      Math.max(this.size[1], newSize[1]),
+    ])
+  }
+
+  /**
+   * add a new property to this node
+   * @param type string defining the output type ("vec3","number",...)
+   * @param extra_info this can be used to have special properties of the property (like values, etc)
+   */
+  addProperty(
+    name: string,
+    default_value: NodeProperty | undefined,
+    type?: string,
+    extra_info?: Partial<INodePropertyInfo>,
+  ): INodePropertyInfo {
+    const o: INodePropertyInfo = { name, type, default_value }
+    if (extra_info) Object.assign(o, extra_info)
+
+    this.properties_info ||= []
+    this.properties_info.push(o)
+    this.properties ||= {}
+    this.properties[name] = default_value
+    return o
+  }
+
+  /**
+   * add a new output slot to use in this node
+   * @param type string defining the output type ("vec3","number",...)
+   * @param extra_info this can be used to have special properties of an output (label, special color, position, etc)
+   */
+  addOutput<TProperties extends Partial<INodeOutputSlot>>(
+    name: string,
+    type: ISlotType,
+    extra_info?: TProperties,
+  ): INodeOutputSlot & TProperties {
+    const output = Object.assign(
+      new NodeOutputSlot({ name, type, links: null }, this),
+      extra_info,
+    )
+
+    this.outputs ||= []
+    this.outputs.push(output)
+    this.onOutputAdded?.(output)
+
+    if (LiteGraph.auto_load_slot_types)
+      LiteGraph.registerNodeAndSlotType(this, type, true)
+
+    this.expandToFitContent()
+    this.setDirtyCanvas(true, true)
+    return output
+  }
+
+  /**
+   * remove an existing output slot
+   */
+  removeOutput(slot: number): void {
+    this.disconnectOutput(slot)
+    const { outputs } = this
+    outputs.splice(slot, 1)
+
+    for (let i = slot; i < outputs.length; ++i) {
+      const output = outputs[i]
+      if (!output || !output.links) continue
+
+      for (const linkId of output.links) {
+        if (!this.graph) throw new NullGraphError()
+
+        const link = this.graph._links.get(linkId)
+        if (link) link.origin_slot--
+      }
+    }
+
+    this.onOutputRemoved?.(slot)
+    this.setDirtyCanvas(true, true)
+  }
+
+  /**
+   * add a new input slot to use in this node
+   * @param type string defining the input type ("vec3","number",...), it its a generic one use 0
+   * @param extra_info this can be used to have special properties of an input (label, color, position, etc)
+   */
+  addInput<TProperties extends Partial<INodeInputSlot>>(name: string, type: ISlotType, extra_info?: TProperties): INodeInputSlot & TProperties {
+    type ||= 0
+
+    const input = Object.assign(
+      new NodeInputSlot({ name, type, link: null }, this),
+      extra_info,
+    )
+
+    this.inputs ||= []
+    this.inputs.push(input)
+    this.expandToFitContent()
+
+    this.onInputAdded?.(input)
+    LiteGraph.registerNodeAndSlotType(this, type)
+
+    this.setDirtyCanvas(true, true)
+    return input
+  }
+
+  /**
+   * remove an existing input slot
+   */
+  removeInput(slot: number): void {
+    this.disconnectInput(slot, true)
+    const { inputs } = this
+    const slot_info = inputs.splice(slot, 1)
+
+    for (let i = slot; i < inputs.length; ++i) {
+      const input = inputs[i]
+      if (!input?.link) continue
+
+      if (!this.graph) throw new NullGraphError()
+      const link = this.graph._links.get(input.link)
+      if (link) link.target_slot--
+    }
+    this.onInputRemoved?.(slot, slot_info[0])
+    this.setDirtyCanvas(true, true)
+  }
+
+  /**
+   * computes the minimum size of a node according to its inputs and output slots
+   * @returns the total size
+   */
+  computeSize(out?: Size): Size {
+    const ctorSize = this.constructor.size
+    if (ctorSize) return [ctorSize[0], ctorSize[1]]
+
+    const { inputs, outputs, widgets } = this
+    let rows = Math.max(
+      inputs ? inputs.filter(input => !isWidgetInputSlot(input)).length : 1,
+      outputs ? outputs.length : 1,
+    )
+    const size = out || new Float32Array([0, 0])
+    rows = Math.max(rows, 1)
+    // although it should be graphcanvas.inner_text_font size
+    const font_size = LiteGraph.NODE_TEXT_SIZE
+
+    const padLeft = LiteGraph.NODE_TITLE_HEIGHT
+    const padRight = padLeft * 0.33
+    const title_width = padLeft + compute_text_size(this.title, this.titleFontStyle) + padRight
+    let input_width = 0
+    let widgetWidth = 0
+    let output_width = 0
+
+    if (inputs) {
+      for (const input of inputs) {
+        const text = input.label || input.localized_name || input.name || ""
+        const text_width = compute_text_size(text, this.innerFontStyle)
+        if (isWidgetInputSlot(input)) {
+          const widget = this.getWidgetFromSlot(input)
+          if (widget && !this.isWidgetVisible(widget)) continue
+
+          if (text_width > widgetWidth) widgetWidth = text_width
+        } else {
+          if (text_width > input_width) input_width = text_width
+        }
+      }
+    }
+
+    if (outputs) {
+      for (const output of outputs) {
+        const text = output.label || output.localized_name || output.name || ""
+        const text_width = compute_text_size(text, this.innerFontStyle)
+        if (output_width < text_width)
+          output_width = text_width
+      }
+    }
+
+    const minWidth = LiteGraph.NODE_WIDTH * (widgets?.length ? 1.5 : 1)
+    // Text + slot width + centre padding
+    const centrePadding = input_width && output_width ? 5 : 0
+    const slotsWidth = input_width + output_width + (2 * LiteGraph.NODE_SLOT_HEIGHT) + centrePadding
+
+    // Total distance from edge of node to the inner edge of the widget 'previous' arrow button
+    const widgetMargin = BaseWidget.margin + BaseWidget.arrowMargin + BaseWidget.arrowWidth
+    const widgetPadding = BaseWidget.minValueWidth + (2 * widgetMargin)
+    if (widgetWidth) widgetWidth += widgetPadding
+
+    size[0] = Math.max(slotsWidth, widgetWidth, title_width, minWidth)
+    size[1] = (this.constructor.slot_start_y || 0) + rows * LiteGraph.NODE_SLOT_HEIGHT
+
+    // Get widget height & expand size if necessary
+    let widgets_height = 0
+    if (widgets?.length) {
+      for (const widget of widgets) {
+        if (!this.isWidgetVisible(widget)) continue
+
+        let widget_height = 0
+        if (widget.computeSize) {
+          widget_height += widget.computeSize(size[0])[1]
+        } else if (widget.computeLayoutSize) {
+          // Expand widget width if necessary
+          const { minHeight, minWidth } = widget.computeLayoutSize(this)
+          const widgetWidth = minWidth + widgetPadding
+          if (widgetWidth > size[0]) size[0] = widgetWidth
+
+          widget_height += minHeight
+        } else {
+          widget_height += LiteGraph.NODE_WIDGET_HEIGHT
+        }
+        widgets_height += widget_height + 4
+      }
+      widgets_height += 8
+    }
+
+    // compute height using widgets height
+    if (this.widgets_up)
+      size[1] = Math.max(size[1], widgets_height)
+    else if (this.widgets_start_y != null)
+      size[1] = Math.max(size[1], widgets_height + this.widgets_start_y)
+    else
+      size[1] += widgets_height
+
+    function compute_text_size(text: string, fontStyle: string) {
+      return LGraphCanvas._measureText?.(text, fontStyle) ??
+        font_size * (text?.length ?? 0) * 0.6
+    }
+
+    if (this.constructor.min_height && size[1] < this.constructor.min_height) {
+      size[1] = this.constructor.min_height
+    }
+
+    // margin
+    size[1] += 6
+
+    return size
+  }
+
+  inResizeCorner(canvasX: number, canvasY: number): boolean {
+    const rows = this.outputs ? this.outputs.length : 1
+    const outputs_offset = (this.constructor.slot_start_y || 0) + rows * LiteGraph.NODE_SLOT_HEIGHT
+    return isInRectangle(
+      canvasX,
+      canvasY,
+      this.pos[0] + this.size[0] - 15,
+      this.pos[1] + Math.max(this.size[1] - 15, outputs_offset),
+      20,
+      20,
+    )
+  }
+
+  /**
+   * Returns which resize corner the point is over, if any.
+   * @param canvasX X position in canvas coordinates
+   * @param canvasY Y position in canvas coordinates
+   * @returns The compass corner the point is in, otherwise `undefined`.
+   */
+  findResizeDirection(canvasX: number, canvasY: number): CompassCorners | undefined {
+    if (this.resizable === false) return
+
+    const { boundingRect } = this
+    if (!boundingRect.containsXy(canvasX, canvasY)) return
+
+    // Check corners first (they take priority over edges)
+    return boundingRect.findContainingCorner(canvasX, canvasY, LGraphNode.resizeHandleSize)
+  }
+
+  /**
+   * returns all the info available about a property of this node.
+   * @param property name of the property
+   * @returns the object with all the available info
+   */
+  getPropertyInfo(property: string) {
+    let info = null
+
+    // there are several ways to define info about a property
+    // legacy mode
+    const { properties_info } = this
+    if (properties_info) {
+      for (const propInfo of properties_info) {
+        if (propInfo.name == property) {
+          info = propInfo
+          break
+        }
+      }
+    }
+    // litescene mode using the constructor
+    // @ts-expect-error deprecated https://github.com/Comfy-Org/litegraph.js/issues/639
+    if (this.constructor[`@${property}`]) info = this.constructor[`@${property}`]
+
+    if (this.constructor.widgets_info?.[property])
+      info = this.constructor.widgets_info[property]
+
+    // litescene mode using the constructor
+    if (!info && this.onGetPropertyInfo) {
+      info = this.onGetPropertyInfo(property)
+    }
+
+    info ||= {}
+    info.type ||= typeof this.properties[property]
+    if (info.widget == "combo") info.type = "enum"
+
+    return info
+  }
+
+  /**
+   * Defines a widget inside the node, it will be rendered on top of the node, you can control lots of properties
+   * @param type the widget type
+   * @param name the text to show on the widget
+   * @param value the default value
+   * @param callback function to call when it changes (optionally, it can be the name of the property to modify)
+   * @param options the object that contains special properties of this widget
+   * @returns the created widget object
+   */
+  addWidget<Type extends TWidgetType, TValue extends WidgetTypeMap[Type]["value"]>(
+    type: Type,
+    name: string,
+    value: TValue,
+    callback: IBaseWidget["callback"] | string | null,
+    options?: IWidgetOptions | string,
+  ): WidgetTypeMap[Type] | IBaseWidget {
+    this.widgets ||= []
+
+    if (!options && callback && typeof callback === "object") {
+      options = callback
+      callback = null
+    }
+
+    // options can be the property name
+    options ||= {}
+    if (typeof options === "string")
+      options = { property: options }
+
+    // callback can be the property name
+    if (callback && typeof callback === "string") {
+      options.property = callback
+      callback = null
+    }
+
+    const w: IBaseWidget & { type: Type } = {
+      // @ts-expect-error
+      type: type.toLowerCase(),
+      name: name,
+      value: value,
+      callback: typeof callback !== "function" ? undefined : callback,
+      options,
+      y: 0,
+    }
+
+    if (w.options.y !== undefined) {
+      w.y = w.options.y
+    }
+
+    if (!callback && !w.options.callback && !w.options.property) {
+      console.warn("LiteGraph addWidget(...) without a callback or property assigned")
+    }
+    if (type == "combo" && !w.options.values) {
+      throw "LiteGraph addWidget('combo',...) requires to pass values in options: { values:['red','blue'] }"
+    }
+
+    const widget = this.addCustomWidget(w)
+    this.expandToFitContent()
+    return widget
+  }
+
+  addCustomWidget<TPlainWidget extends IBaseWidget>(
+    custom_widget: TPlainWidget,
+  ): TPlainWidget | WidgetTypeMap[TPlainWidget["type"]] {
+    this.widgets ||= []
+    const widget = toConcreteWidget(custom_widget, this, false) ?? custom_widget
+    this.widgets.push(widget)
+    return widget
+  }
+
+  move(deltaX: number, deltaY: number): void {
+    if (this.pinned) return
+
+    this.pos[0] += deltaX
+    this.pos[1] += deltaY
+  }
+
+  /**
+   * Internal method to measure the node for rendering.  Prefer {@link boundingRect} where possible.
+   *
+   * Populates {@link out} with the results in graph space.
+   * Populates {@link _collapsed_width} with the collapsed width if the node is collapsed.
+   * Adjusts for title and collapsed status, but does not call {@link onBounding}.
+   * @param out `x, y, width, height` are written to this array.
+   * @param ctx The canvas context to use for measuring text.
+   */
+  measure(out: Rect, ctx: CanvasRenderingContext2D): void {
+    const titleMode = this.title_mode
+    const renderTitle =
+      titleMode != TitleMode.TRANSPARENT_TITLE &&
+      titleMode != TitleMode.NO_TITLE
+    const titleHeight = renderTitle ? LiteGraph.NODE_TITLE_HEIGHT : 0
+
+    out[0] = this.pos[0]
+    out[1] = this.pos[1] + -titleHeight
+    if (!this.flags?.collapsed) {
+      out[2] = this.size[0]
+      out[3] = this.size[1] + titleHeight
+    } else {
+      ctx.font = this.innerFontStyle
+      this._collapsed_width = Math.min(
+        this.size[0],
+        ctx.measureText(this.getTitle() ?? "").width + LiteGraph.NODE_TITLE_HEIGHT * 2,
+      )
+      out[2] = (this._collapsed_width || LiteGraph.NODE_COLLAPSED_WIDTH)
+      out[3] = LiteGraph.NODE_TITLE_HEIGHT
+    }
+  }
+
+  /**
+   * returns the bounding of the object, used for rendering purposes
+   * @param out {Float32Array[4]?} [optional] a place to store the output, to free garbage
+   * @param includeExternal {boolean?} [optional] set to true to
+   * include the shadow and connection points in the bounding calculation
+   * @returns the bounding box in format of [topleft_cornerx, topleft_cornery, width, height]
+   */
+  getBounding(out?: Rect, includeExternal?: boolean): Rect {
+    out ||= new Float32Array(4)
+
+    const rect = includeExternal ? this.renderArea : this.boundingRect
+    out[0] = rect[0]
+    out[1] = rect[1]
+    out[2] = rect[2]
+    out[3] = rect[3]
+
+    return out
+  }
+
+  /**
+   * Calculates the render area of this node, populating both {@link boundingRect} and {@link renderArea}.
+   * Called automatically at the start of every frame.
+   */
+  updateArea(ctx: CanvasRenderingContext2D): void {
+    const bounds = this.#boundingRect
+    this.measure(bounds, ctx)
+    this.onBounding?.(bounds)
+
+    const renderArea = this.#renderArea
+    renderArea.set(bounds)
+    // 4 offset for collapsed node connection points
+    renderArea[0] -= 4
+    renderArea[1] -= 4
+    // Add shadow & left offset
+    renderArea[2] += 6 + 4
+    // Add shadow & top offsets
+    renderArea[3] += 5 + 4
+  }
+
+  /**
+   * checks if a point is inside the shape of a node
+   */
+  isPointInside(x: number, y: number): boolean {
+    return isInRect(x, y, this.boundingRect)
+  }
+
+  /**
+   * Checks if the provided point is inside this node's collapse button area.
+   * @param x X co-ordinate to check
+   * @param y Y co-ordinate to check
+   * @returns true if the x,y point is in the collapse button area, otherwise false
+   */
+  isPointInCollapse(x: number, y: number): boolean {
+    const squareLength = LiteGraph.NODE_TITLE_HEIGHT
+    return isInRectangle(
+      x,
+      y,
+      this.pos[0],
+      this.pos[1] - squareLength,
+      squareLength,
+      squareLength,
+    )
+  }
+
+  /**
+   * Returns the input slot at the given position. Uses full 20 height, and approximates the label length.
+   * @param pos The graph co-ordinates to check
+   * @returns The input slot at the given position if found, otherwise `undefined`.
+   */
+  getInputOnPos(pos: Point): INodeInputSlot | undefined {
+    return getNodeInputOnPos(this, pos[0], pos[1])?.input
+  }
+
+  /**
+   * Returns the output slot at the given position. Uses full 20x20 box for the slot.
+   * @param pos The graph co-ordinates to check
+   * @returns The output slot at the given position if found, otherwise `undefined`.
+   */
+  getOutputOnPos(pos: Point): INodeOutputSlot | undefined {
+    return getNodeOutputOnPos(this, pos[0], pos[1])?.output
+  }
+
+  /**
+   * Returns the input or output slot at the given position.
+   *
+   * Tries {@link getNodeInputOnPos} first, then {@link getNodeOutputOnPos}.
+   * @param pos The graph co-ordinates to check
+   * @returns The input or output slot at the given position if found, otherwise `undefined`.
+   */
+  getSlotOnPos(pos: Point): INodeInputSlot | INodeOutputSlot | undefined {
+    if (!isPointInRect(pos, this.boundingRect)) return
+
+    return this.getInputOnPos(pos) ?? this.getOutputOnPos(pos)
+  }
+
+  /**
+   * @deprecated Use {@link getSlotOnPos} instead.
+   * checks if a point is inside a node slot, and returns info about which slot
+   * @param x
+   * @param y
+   * @returns if found the object contains { input|output: slot object, slot: number, link_pos: [x,y] }
+   */
+  getSlotInPosition(x: number, y: number): IFoundSlot | null {
+    // search for inputs
+    const { inputs, outputs } = this
+
+    if (inputs) {
+      for (const [i, input] of inputs.entries()) {
+        const pos = this.getInputPos(i)
+        if (isInRectangle(x, y, pos[0] - 10, pos[1] - 10, 20, 20)) {
+          return { input, slot: i, link_pos: pos }
+        }
+      }
+    }
+
+    if (outputs) {
+      for (const [i, output] of outputs.entries()) {
+        const pos = this.getOutputPos(i)
+        if (isInRectangle(x, y, pos[0] - 10, pos[1] - 10, 20, 20)) {
+          return { output, slot: i, link_pos: pos }
+        }
+      }
+    }
+
+    return null
+  }
+
+  /**
+   * Gets the widget on this node at the given co-ordinates.
+   * @param canvasX X co-ordinate in graph space
+   * @param canvasY Y co-ordinate in graph space
+   * @returns The widget found, otherwise `null`
+   */
+  getWidgetOnPos(
+    canvasX: number,
+    canvasY: number,
+    includeDisabled = false,
+  ): IBaseWidget | undefined {
+    const { widgets, pos, size } = this
+    if (!widgets?.length) return
+
+    const x = canvasX - pos[0]
+    const y = canvasY - pos[1]
+    const nodeWidth = size[0]
+
+    for (const widget of widgets) {
+      if (
+        (widget.computedDisabled && !includeDisabled) ||
+        !this.isWidgetVisible(widget)
+      ) {
+        continue
+      }
+
+      const h = widget.computedHeight ??
+        widget.computeSize?.(nodeWidth)[1] ??
+        LiteGraph.NODE_WIDGET_HEIGHT
+
+      const w = widget.width || nodeWidth
+      if (
+        widget.last_y !== undefined &&
+        isInRectangle(x, y, 6, widget.last_y, w - 12, h)
+      ) {
+        return widget
+      }
+    }
+  }
+
+  /**
+   * Returns the input slot with a given name (used for dynamic slots), -1 if not found
+   * @param name the name of the slot to find
+   * @param returnObj if the obj itself wanted
+   * @returns the slot (-1 if not found)
+   */
+  findInputSlot<TReturn extends false>(name: string, returnObj?: TReturn): number
+  findInputSlot<TReturn extends true>(name: string, returnObj?: TReturn): INodeInputSlot
+  findInputSlot(name: string, returnObj: boolean = false) {
+    const { inputs } = this
+    if (!inputs) return -1
+
+    for (const [i, input] of inputs.entries()) {
+      if (name == input.name) {
+        return !returnObj ? i : input
+      }
+    }
+    return -1
+  }
+
+  /**
+   * returns the output slot with a given name (used for dynamic slots), -1 if not found
+   * @param name the name of the slot to find
+   * @param returnObj if the obj itself wanted
+   * @returns the slot (-1 if not found)
+   */
+  findOutputSlot<TReturn extends false>(name: string, returnObj?: TReturn): number
+  findOutputSlot<TReturn extends true>(name: string, returnObj?: TReturn): INodeOutputSlot
+  findOutputSlot(name: string, returnObj: boolean = false) {
+    const { outputs } = this
+    if (!outputs) return -1
+
+    for (const [i, output] of outputs.entries()) {
+      if (name == output.name) {
+        return !returnObj ? i : output
+      }
+    }
+    return -1
+  }
+
+  /**
+   * Finds the first free input slot.
+   * @param optsIn
+   * @returns The index of the first matching slot, the slot itself if returnObj is true, or -1 if not found.
+   */
+  findInputSlotFree<TReturn extends false>(
+    optsIn?: FindFreeSlotOptions & { returnObj?: TReturn },
+  ): number
+  findInputSlotFree<TReturn extends true>(
+    optsIn?: FindFreeSlotOptions & { returnObj?: TReturn },
+  ): INodeInputSlot | -1
+  findInputSlotFree(optsIn?: FindFreeSlotOptions) {
+    return this.#findFreeSlot(this.inputs, optsIn)
+  }
+
+  /**
+   * Finds the first free output slot.
+   * @param optsIn
+   * @returns The index of the first matching slot, the slot itself if returnObj is true, or -1 if not found.
+   */
+  findOutputSlotFree<TReturn extends false>(
+    optsIn?: FindFreeSlotOptions & { returnObj?: TReturn },
+  ): number
+  findOutputSlotFree<TReturn extends true>(
+    optsIn?: FindFreeSlotOptions & { returnObj?: TReturn },
+  ): INodeOutputSlot | -1
+  findOutputSlotFree(optsIn?: FindFreeSlotOptions) {
+    return this.#findFreeSlot(this.outputs, optsIn)
+  }
+
+  /**
+   * Finds the next free slot
+   * @param slots The slots to search, i.e. this.inputs or this.outputs
+   */
+  #findFreeSlot<TSlot extends INodeInputSlot | INodeOutputSlot>(
+    slots: TSlot[],
+    options?: FindFreeSlotOptions,
+  ): TSlot | number {
+    const defaults = {
+      returnObj: false,
+      typesNotAccepted: [],
+    }
+    const opts = Object.assign(defaults, options || {})
+    const length = slots?.length
+    if (!(length > 0)) return -1
+
+    for (let i = 0; i < length; ++i) {
+      const slot: TSlot & IGenericLinkOrLinks = slots[i]
+      if (!slot || slot.link || slot.links?.length) continue
+      if (opts.typesNotAccepted?.includes?.(slot.type)) continue
+      return !opts.returnObj ? i : slot
+    }
+    return -1
+  }
+
+  /**
+   * findSlotByType for INPUTS
+   */
+  findInputSlotByType<TReturn extends false>(
+    type: ISlotType,
+    returnObj?: TReturn,
+    preferFreeSlot?: boolean,
+    doNotUseOccupied?: boolean,
+  ): number
+  findInputSlotByType<TReturn extends true>(
+    type: ISlotType,
+    returnObj?: TReturn,
+    preferFreeSlot?: boolean,
+    doNotUseOccupied?: boolean,
+  ): INodeInputSlot
+  findInputSlotByType(
+    type: ISlotType,
+    returnObj?: boolean,
+    preferFreeSlot?: boolean,
+    doNotUseOccupied?: boolean,
+  ) {
+    return this.#findSlotByType(
+      this.inputs,
+      type,
+      returnObj,
+      preferFreeSlot,
+      doNotUseOccupied,
+    )
+  }
+
+  /**
+   * findSlotByType for OUTPUTS
+   */
+  findOutputSlotByType<TReturn extends false>(
+    type: ISlotType,
+    returnObj?: TReturn,
+    preferFreeSlot?: boolean,
+    doNotUseOccupied?: boolean,
+  ): number
+  findOutputSlotByType<TReturn extends true>(
+    type: ISlotType,
+    returnObj?: TReturn,
+    preferFreeSlot?: boolean,
+    doNotUseOccupied?: boolean,
+  ): INodeOutputSlot
+  findOutputSlotByType(
+    type: ISlotType,
+    returnObj?: boolean,
+    preferFreeSlot?: boolean,
+    doNotUseOccupied?: boolean,
+  ) {
+    return this.#findSlotByType(
+      this.outputs,
+      type,
+      returnObj,
+      preferFreeSlot,
+      doNotUseOccupied,
+    )
+  }
+
+  /**
+   * returns the output (or input) slot with a given type, -1 if not found
+   * @param input uise inputs instead of outputs
+   * @param type the type of the slot to find
+   * @param returnObj if the obj itself wanted
+   * @param preferFreeSlot if we want a free slot (if not found, will return the first of the type anyway)
+   * @returns the slot (-1 if not found)
+   */
+  findSlotByType<TSlot extends true | false, TReturn extends false>(
+    input: TSlot,
+    type: ISlotType,
+    returnObj?: TReturn,
+    preferFreeSlot?: boolean,
+    doNotUseOccupied?: boolean,
+  ): number
+  findSlotByType<TSlot extends true, TReturn extends true>(
+    input: TSlot,
+    type: ISlotType,
+    returnObj?: TReturn,
+    preferFreeSlot?: boolean,
+    doNotUseOccupied?: boolean,
+  ): INodeInputSlot | -1
+  findSlotByType<TSlot extends false, TReturn extends true>(
+    input: TSlot,
+    type: ISlotType,
+    returnObj?: TReturn,
+    preferFreeSlot?: boolean,
+    doNotUseOccupied?: boolean,
+  ): INodeOutputSlot | -1
+  findSlotByType(
+    input: boolean,
+    type: ISlotType,
+    returnObj?: boolean,
+    preferFreeSlot?: boolean,
+    doNotUseOccupied?: boolean,
+  ): number | INodeOutputSlot | INodeInputSlot {
+    return input
+      ? this.#findSlotByType(
+        this.inputs,
+        type,
+        returnObj,
+        preferFreeSlot,
+        doNotUseOccupied,
+      )
+      : this.#findSlotByType(
+        this.outputs,
+        type,
+        returnObj,
+        preferFreeSlot,
+        doNotUseOccupied,
+      )
+  }
+
+  /**
+   * Finds a matching slot from those provided, returning the slot itself or its index in {@link slots}.
+   * @param slots Slots to search (this.inputs or this.outputs)
+   * @param type Type of slot to look for
+   * @param returnObj If true, returns the slot itself.  Otherwise, the index.
+   * @param preferFreeSlot Prefer a free slot, but if none are found, fall back to an occupied slot.
+   * @param doNotUseOccupied Do not fall back to occupied slots.
+   * @see {findSlotByType}
+   * @see {findOutputSlotByType}
+   * @see {findInputSlotByType}
+   * @returns If a match is found, the slot if returnObj is true, otherwise the index.  If no matches are found, -1
+   */
+  #findSlotByType<TSlot extends INodeInputSlot | INodeOutputSlot>(
+    slots: TSlot[],
+    type: ISlotType,
+    returnObj?: boolean,
+    preferFreeSlot?: boolean,
+    doNotUseOccupied?: boolean,
+  ): TSlot | number {
+    const length = slots?.length
+    if (!length) return -1
+
+    // Empty string and * match anything (type:  0)
+    if (type == "" || type == "*") type = 0
+    const sourceTypes = String(type).toLowerCase().split(",")
+
+    // Run the search
+    let occupiedSlot: number | TSlot | null = null
+    for (let i = 0; i < length; ++i) {
+      const slot: TSlot & IGenericLinkOrLinks = slots[i]
+      const destTypes = slot.type == "0" || slot.type == "*"
+        ? ["0"]
+        : String(slot.type).toLowerCase().split(",")
+
+      for (const sourceType of sourceTypes) {
+        // TODO: Remove _event_ entirely.
+        const source = sourceType == "_event_" ? LiteGraph.EVENT : sourceType
+
+        for (const destType of destTypes) {
+          const dest = destType == "_event_" ? LiteGraph.EVENT : destType
+
+          if (source == dest || source === "*" || dest === "*") {
+            if (preferFreeSlot && (slot.links?.length || slot.link != null)) {
+              // In case we can't find a free slot.
+              occupiedSlot ??= returnObj ? slot : i
+              continue
+            }
+            return returnObj ? slot : i
+          }
+        }
+      }
+    }
+
+    return doNotUseOccupied ? -1 : occupiedSlot ?? -1
+  }
+
+  /**
+   * Determines the slot index to connect to when attempting to connect by type.
+   * @param findInputs If true, searches for an input.  Otherwise, an output.
+   * @param node The node at the other end of the connection.
+   * @param slotType The type of slot at the other end of the connection.
+   * @param options Search restrictions to adhere to.
+   * @see {connectByType}
+   * @see {connectByTypeOutput}
+   */
+  findConnectByTypeSlot(
+    findInputs: boolean,
+    node: LGraphNode,
+    slotType: ISlotType,
+    options?: ConnectByTypeOptions,
+  ): number | undefined {
+    // LEGACY: Old options names
+    if (options && typeof options === "object") {
+      if ("firstFreeIfInputGeneralInCase" in options) options.wildcardToTyped = !!options.firstFreeIfInputGeneralInCase
+      if ("firstFreeIfOutputGeneralInCase" in options) options.wildcardToTyped = !!options.firstFreeIfOutputGeneralInCase
+      if ("generalTypeInCase" in options) options.typedToWildcard = !!options.generalTypeInCase
+    }
+    const optsDef: ConnectByTypeOptions = {
+      createEventInCase: true,
+      wildcardToTyped: true,
+      typedToWildcard: true,
+    }
+    const opts = Object.assign(optsDef, options)
+
+    if (!this.graph) throw new NullGraphError()
+
+    if (node && typeof node === "number") {
+      const nodeById = this.graph.getNodeById(node)
+      if (!nodeById) return
+
+      node = nodeById
+    }
+    const slot = node.findSlotByType(findInputs, slotType, false, true)
+    if (slot >= 0 && slot !== null) return slot
+
+    // TODO: Remove or reimpl. events.  WILL CREATE THE onTrigger IN SLOT
+    if (opts.createEventInCase && slotType == LiteGraph.EVENT) {
+      if (findInputs) return -1
+      if (LiteGraph.do_add_triggers_slots) return node.addOnExecutedOutput()
+    }
+
+    // connect to the first general output slot if not found a specific type and
+    if (opts.typedToWildcard) {
+      const generalSlot = node.findSlotByType(findInputs, 0, false, true, true)
+      if (generalSlot >= 0) return generalSlot
+    }
+    // connect to the first free input slot if not found a specific type and this output is general
+    if (
+      opts.wildcardToTyped &&
+      (slotType == 0 || slotType == "*" || slotType == "")
+    ) {
+      const opt = { typesNotAccepted: [LiteGraph.EVENT] }
+      const nonEventSlot = findInputs
+        ? node.findInputSlotFree(opt)
+        : node.findOutputSlotFree(opt)
+      if (nonEventSlot >= 0) return nonEventSlot
+    }
+  }
+
+  /**
+   * Finds the first free output slot with any of the comma-delimited types in {@link type}.
+   *
+   * If no slots are free, falls back in order to:
+   * - The first free wildcard slot
+   * - The first occupied slot
+   * - The first occupied wildcard slot
+   * @param type The {@link ISlotType type} of slot to find
+   * @returns The index and slot if found, otherwise `undefined`.
+   */
+  findOutputByType(type: ISlotType): { index: number, slot: INodeOutputSlot } | undefined {
+    return findFreeSlotOfType(this.outputs, type, output => !output.links?.length)
+  }
+
+  /**
+   * Finds the first free input slot with any of the comma-delimited types in {@link type}.
+   *
+   * If no slots are free, falls back in order to:
+   * - The first free wildcard slot
+   * - The first occupied slot
+   * - The first occupied wildcard slot
+   * @param type The {@link ISlotType type} of slot to find
+   * @returns The index and slot if found, otherwise `undefined`.
+   */
+  findInputByType(type: ISlotType): { index: number, slot: INodeInputSlot } | undefined {
+    return findFreeSlotOfType(this.inputs, type, input => input.link == null)
+  }
+
+  /**
+   * connect this node output to the input of another node BY TYPE
+   * @param slot (could be the number of the slot or the string with the name of the slot)
+   * @param target_node the target node
+   * @param target_slotType the input slot type of the target node
+   * @returns the link_info is created, otherwise null
+   */
+  connectByType(
+    slot: number | string,
+    target_node: LGraphNode,
+    target_slotType: ISlotType,
+    optsIn?: ConnectByTypeOptions,
+  ): LLink | null {
+    const slotIndex = this.findConnectByTypeSlot(
+      true,
+      target_node,
+      target_slotType,
+      optsIn,
+    )
+    if (slotIndex !== undefined)
+      return this.connect(slot, target_node, slotIndex, optsIn?.afterRerouteId)
+
+    console.debug("[connectByType]: no way to connect type:", target_slotType, "to node:", target_node)
+    return null
+  }
+
+  /**
+   * connect this node input to the output of another node BY TYPE
+   * @param slot (could be the number of the slot or the string with the name of the slot)
+   * @param source_node the target node
+   * @param source_slotType the output slot type of the target node
+   * @returns the link_info is created, otherwise null
+   */
+  connectByTypeOutput(
+    slot: number | string,
+    source_node: LGraphNode,
+    source_slotType: ISlotType,
+    optsIn?: ConnectByTypeOptions,
+  ): LLink | null {
+    // LEGACY: Old options names
+    if (typeof optsIn === "object") {
+      if ("firstFreeIfInputGeneralInCase" in optsIn) optsIn.wildcardToTyped = !!optsIn.firstFreeIfInputGeneralInCase
+      if ("generalTypeInCase" in optsIn) optsIn.typedToWildcard = !!optsIn.generalTypeInCase
+    }
+    const slotIndex = this.findConnectByTypeSlot(
+      false,
+      source_node,
+      source_slotType,
+      optsIn,
+    )
+    if (slotIndex !== undefined)
+      return source_node.connect(slotIndex, this, slot, optsIn?.afterRerouteId)
+
+    console.debug("[connectByType]: no way to connect type:", source_slotType, "to node:", source_node)
+    return null
+  }
+
+  canConnectTo(
+    node: NodeLike,
+    toSlot: INodeInputSlot | SubgraphIO,
+    fromSlot: INodeOutputSlot | SubgraphIO,
+  ) {
+    return this.id !== node.id && LiteGraph.isValidConnection(fromSlot.type, toSlot.type)
+  }
+
+  /**
+   * Connect an output of this node to an input of another node
+   * @param slot (could be the number of the slot or the string with the name of the slot)
+   * @param target_node the target node
+   * @param target_slot the input slot of the target node (could be the number of the slot or the string with the name of the slot, or -1 to connect a trigger)
+   * @returns the link_info is created, otherwise null
+   */
+  connect(
+    slot: number | string,
+    target_node: LGraphNode,
+    target_slot: ISlotType,
+    afterRerouteId?: RerouteId,
+  ): LLink | null {
+    // Allow legacy API support for searching target_slot by string, without mutating the input variables
+    let targetIndex: number | null
+
+    const { graph, outputs } = this
+    if (!graph) {
+      // could be connected before adding it to a graph
+      // due to link ids being associated with graphs
+      console.log("Connect: Error, node doesn't belong to any graph. Nodes must be added first to a graph before connecting them.")
+      return null
+    }
+
+    // seek for the output slot
+    if (typeof slot === "string") {
+      slot = this.findOutputSlot(slot)
+      if (slot == -1) {
+        if (LiteGraph.debug) console.log(`Connect: Error, no slot of name ${slot}`)
+        return null
+      }
+    } else if (!outputs || slot >= outputs.length) {
+      if (LiteGraph.debug) console.log("Connect: Error, slot number not found")
+      return null
+    }
+
+    if (target_node && typeof target_node === "number") {
+      const nodeById = graph.getNodeById(target_node)
+      if (!nodeById) throw "target node is null"
+
+      target_node = nodeById
+    }
+    if (!target_node) throw "target node is null"
+
+    // avoid loopback
+    if (target_node == this) return null
+
+    // you can specify the slot by name
+    if (typeof target_slot === "string") {
+      targetIndex = target_node.findInputSlot(target_slot)
+      if (targetIndex == -1) {
+        if (LiteGraph.debug) console.log(`Connect: Error, no slot of name ${targetIndex}`)
+        return null
+      }
+    } else if (target_slot === LiteGraph.EVENT) {
+      // TODO: Events
+      if (LiteGraph.do_add_triggers_slots) {
+        target_node.changeMode(LGraphEventMode.ON_TRIGGER)
+        targetIndex = target_node.findInputSlot("onTrigger")
+      } else {
+        return null
+      }
+    } else if (typeof target_slot === "number") {
+      targetIndex = target_slot
+    } else {
+      targetIndex = 0
+    }
+
+    // Allow target node to change slot
+    if (target_node.onBeforeConnectInput) {
+      // This way node can choose another slot (or make a new one?)
+      const requestedIndex = target_node.onBeforeConnectInput(targetIndex, target_slot)
+      targetIndex = typeof requestedIndex === "number" ? requestedIndex : null
+    }
+
+    if (
+      targetIndex === null ||
+      !target_node.inputs ||
+      targetIndex >= target_node.inputs.length
+    ) {
+      if (LiteGraph.debug) console.log("Connect: Error, slot number not found")
+      return null
+    }
+
+    const input = target_node.inputs[targetIndex]
+    const output = outputs[slot]
+
+    if (!output) return null
+
+    if (output.links?.length) {
+      if (output.type === LiteGraph.EVENT && !LiteGraph.allow_multi_output_for_events) {
+        graph.beforeChange()
+        // @ts-expect-error Unused param
+        this.disconnectOutput(slot, false, { doProcessChange: false })
+      }
+    }
+
+    const link = this.connectSlots(output, target_node, input, afterRerouteId)
+    return link ?? null
+  }
+
+  /**
+   * Connect two slots between two nodes
+   * @param output The output slot to connect
+   * @param inputNode The node that the input slot is on
+   * @param input The input slot to connect
+   * @param afterRerouteId The reroute ID to use for the link
+   * @returns The link that was created, or null if the connection was blocked
+   */
+  connectSlots(
+    output: INodeOutputSlot,
+    inputNode: LGraphNode,
+    input: INodeInputSlot,
+    afterRerouteId: RerouteId | undefined,
+  ): LLink | null | undefined {
+    const { graph } = this
+    if (!graph) throw new NullGraphError()
+
+    const outputIndex = this.outputs.indexOf(output)
+    if (outputIndex === -1) {
+      console.warn("connectSlots: output not found")
+      return
+    }
+    const inputIndex = inputNode.inputs.indexOf(input)
+    if (inputIndex === -1) {
+      console.warn("connectSlots: input not found")
+      return
+    }
+
+    // check targetSlot and check connection types
+    if (!LiteGraph.isValidConnection(output.type, input.type)) {
+      this.setDirtyCanvas(false, true)
+      return null
+    }
+
+    // Allow nodes to block connection
+    if (inputNode.onConnectInput?.(inputIndex, output.type, output, this, outputIndex) === false)
+      return null
+    if (this.onConnectOutput?.(outputIndex, input.type, input, inputNode, inputIndex) === false)
+      return null
+
+    // if there is something already plugged there, disconnect
+    if (inputNode.inputs[inputIndex]?.link != null) {
+      graph.beforeChange()
+      inputNode.disconnectInput(inputIndex, true)
+    }
+
+    const link = new LLink(
+      ++graph.state.lastLinkId,
+      input.type || output.type,
+      this.id,
+      outputIndex,
+      inputNode.id,
+      inputIndex,
+      afterRerouteId,
+    )
+
+    // add to graph links list
+    graph._links.set(link.id, link)
+
+    // connect in output
+    output.links ??= []
+    output.links.push(link.id)
+    // connect in input
+    inputNode.inputs[inputIndex].link = link.id
+
+    // Reroutes
+    const reroutes = LLink.getReroutes(graph, link)
+    for (const reroute of reroutes) {
+      reroute.linkIds.add(link.id)
+      if (reroute.floating) delete reroute.floating
+      reroute._dragging = undefined
+    }
+
+    // If this is the terminus of a floating link, remove it
+    const lastReroute = reroutes.at(-1)
+    if (lastReroute) {
+      for (const linkId of lastReroute.floatingLinkIds) {
+        const link = graph.floatingLinks.get(linkId)
+        if (link?.parentId === lastReroute.id) {
+          graph.removeFloatingLink(link)
+        }
+      }
+    }
+    graph._version++
+
+    // link has been created now, so its updated
+    this.onConnectionsChange?.(
+      NodeSlotType.OUTPUT,
+      outputIndex,
+      true,
+      link,
+      output,
+    )
+
+    inputNode.onConnectionsChange?.(
+      NodeSlotType.INPUT,
+      inputIndex,
+      true,
+      link,
+      input,
+    )
+
+    this.setDirtyCanvas(false, true)
+    graph.afterChange()
+
+    return link
+  }
+
+  connectFloatingReroute(pos: Point, slot: INodeInputSlot | INodeOutputSlot, afterRerouteId?: RerouteId): Reroute {
+    const { graph, id } = this
+    if (!graph) throw new NullGraphError()
+
+    // Assertion: It's either there or it isn't.
+    const inputIndex = this.inputs.indexOf(slot as INodeInputSlot)
+    const outputIndex = this.outputs.indexOf(slot as INodeOutputSlot)
+    if (inputIndex === -1 && outputIndex === -1) throw new Error("Invalid slot")
+
+    const slotType = outputIndex === -1 ? "input" : "output"
+
+    const reroute = graph.setReroute({
+      pos,
+      parentId: afterRerouteId,
+      linkIds: [],
+      floating: { slotType },
+    })
+
+    const parentReroute = graph.getReroute(afterRerouteId)
+    const fromLastFloatingReroute = parentReroute?.floating?.slotType === "output"
+
+    // Adding from an ouput, or a floating reroute that is NOT the tip of an existing floating chain
+    if (afterRerouteId == null || !fromLastFloatingReroute) {
+      const link = new LLink(
+        -1,
+        slot.type,
+        outputIndex === -1 ? -1 : id,
+        outputIndex,
+        inputIndex === -1 ? -1 : id,
+        inputIndex,
+      )
+      link.parentId = reroute.id
+      graph.addFloatingLink(link)
+      return reroute
+    }
+
+    // Adding a new floating reroute from the tip of a floating chain.
+    if (!parentReroute) throw new Error("[connectFloatingReroute] Parent reroute not found")
+
+    const link = parentReroute.getFloatingLinks("output")?.[0]
+    if (!link) throw new Error("[connectFloatingReroute] Floating link not found")
+
+    reroute.floatingLinkIds.add(link.id)
+    link.parentId = reroute.id
+    delete parentReroute.floating
+    return reroute
+  }
+
+  /**
+   * disconnect one output to an specific node
+   * @param slot (could be the number of the slot or the string with the name of the slot)
+   * @param target_node the target node to which this slot is connected [Optional,
+   * if not target_node is specified all nodes will be disconnected]
+   * @returns if it was disconnected successfully
+   */
+  disconnectOutput(slot: string | number, target_node?: LGraphNode): boolean {
+    if (typeof slot === "string") {
+      slot = this.findOutputSlot(slot)
+      if (slot == -1) {
+        if (LiteGraph.debug) console.log(`Connect: Error, no slot of name ${slot}`)
+        return false
+      }
+    } else if (!this.outputs || slot >= this.outputs.length) {
+      if (LiteGraph.debug) console.log("Connect: Error, slot number not found")
+      return false
+    }
+
+    // get output slot
+    const output = this.outputs[slot]
+    if (!output) return false
+
+    if (output._floatingLinks) {
+      for (const link of output._floatingLinks) {
+        if (link.hasOrigin(this.id, slot)) {
+          this.graph?.removeFloatingLink(link)
+        }
+      }
+    }
+
+    if (!output.links || output.links.length == 0) return false
+    const { links } = output
+
+    // one of the output links in this slot
+    const graph = this.graph
+    if (!graph) throw new NullGraphError()
+
+    if (target_node) {
+      const target = typeof target_node === "number"
+        ? graph.getNodeById(target_node)
+        : target_node
+      if (!target) throw "Target Node not found"
+
+      for (const [i, link_id] of links.entries()) {
+        const link_info = graph._links.get(link_id)
+        if (link_info?.target_id != target.id) continue
+
+        // is the link we are searching for...
+        // remove here
+        links.splice(i, 1)
+        const input = target.inputs[link_info.target_slot]
+        // remove there
+        input.link = null
+
+        // remove the link from the links pool
+        link_info.disconnect(graph, "input")
+        graph._version++
+
+        // link_info hasn't been modified so its ok
+        target.onConnectionsChange?.(
+          NodeSlotType.INPUT,
+          link_info.target_slot,
+          false,
+          link_info,
+          input,
+        )
+        this.onConnectionsChange?.(
+          NodeSlotType.OUTPUT,
+          slot,
+          false,
+          link_info,
+          output,
+        )
+
+        break
+      }
+    } else {
+      // all the links in this output slot
+      for (const link_id of links) {
+        const link_info = graph._links.get(link_id)
+        if (!link_info) continue
+
+        const target = graph.getNodeById(link_info.target_id)
+        graph._version++
+
+        if (target) {
+          const input = target.inputs[link_info.target_slot]
+          // remove other side link
+          input.link = null
+
+          // link_info hasn't been modified so its ok
+          target.onConnectionsChange?.(
+            NodeSlotType.INPUT,
+            link_info.target_slot,
+            false,
+            link_info,
+            input,
+          )
+        }
+        // remove the link from the links pool
+        link_info.disconnect(graph, "input")
+
+        this.onConnectionsChange?.(
+          NodeSlotType.OUTPUT,
+          slot,
+          false,
+          link_info,
+          output,
+        )
+      }
+      output.links = null
+    }
+
+    this.setDirtyCanvas(false, true)
+    return true
+  }
+
+  /**
+   * Disconnect one input
+   * @param slot Input slot index, or the name of the slot
+   * @param keepReroutes If `true`, reroutes will not be garbage collected.
+   * @returns true if disconnected successfully or already disconnected, otherwise false
+   */
+  disconnectInput(slot: number | string, keepReroutes?: boolean): boolean {
+    // Allow search by string
+    if (typeof slot === "string") {
+      slot = this.findInputSlot(slot)
+      if (slot == -1) {
+        if (LiteGraph.debug) console.log(`Connect: Error, no slot of name ${slot}`)
+        return false
+      }
+    } else if (!this.inputs || slot >= this.inputs.length) {
+      if (LiteGraph.debug) {
+        console.log("Connect: Error, slot number not found")
+      }
+      return false
+    }
+
+    const input = this.inputs[slot]
+    if (!input) {
+      console.debug("disconnectInput: input not found", slot, this.inputs)
+      return false
+    }
+
+    const { graph } = this
+    if (!graph) throw new NullGraphError()
+
+    // Break floating links
+    if (input._floatingLinks?.size) {
+      for (const link of input._floatingLinks) {
+        graph.removeFloatingLink(link)
+      }
+    }
+
+    const link_id = this.inputs[slot].link
+    if (link_id != null) {
+      this.inputs[slot].link = null
+
+      // remove other side
+      const link_info = graph._links.get(link_id)
+      if (link_info) {
+        // Let SubgraphInput do the disconnect.
+        if (link_info.origin_id === -10 && "inputNode" in graph) {
+          graph.inputNode._disconnectNodeInput(this, input, link_info)
+          return true
+        }
+
+        const target_node = graph.getNodeById(link_info.origin_id)
+        if (!target_node) {
+          console.debug("disconnectInput: target node not found", link_info.origin_id)
+          return false
+        }
+
+        const output = target_node.outputs[link_info.origin_slot]
+        if (!(output?.links?.length)) {
+          console.debug("disconnectInput: output not found", link_info.origin_slot)
+          return false
+        }
+
+        // search in the inputs list for this link
+        let i = 0
+        for (const l = output.links.length; i < l; i++) {
+          if (output.links[i] == link_id) {
+            output.links.splice(i, 1)
+            break
+          }
+        }
+
+        link_info.disconnect(graph, keepReroutes ? "output" : undefined)
+        if (graph) graph._version++
+
+        this.onConnectionsChange?.(
+          NodeSlotType.INPUT,
+          slot,
+          false,
+          link_info,
+          input,
+        )
+        target_node.onConnectionsChange?.(
+          NodeSlotType.OUTPUT,
+          i,
+          false,
+          link_info,
+          output,
+        )
+      }
+    }
+
+    this.setDirtyCanvas(false, true)
+    return true
+  }
+
+  /**
+   * @deprecated Use {@link getInputPos} or {@link getOutputPos} instead.
+   * returns the center of a connection point in canvas coords
+   * @param is_input true if if a input slot, false if it is an output
+   * @param slot_number (could be the number of the slot or the string with the name of the slot)
+   * @param out [optional] a place to store the output, to free garbage
+   * @returns the position
+   */
+  getConnectionPos(is_input: boolean, slot_number: number, out?: Point): Point {
+    out ||= new Float32Array(2)
+
+    const { pos: [nodeX, nodeY], inputs, outputs } = this
+
+    if (this.flags.collapsed) {
+      const w = this._collapsed_width || LiteGraph.NODE_COLLAPSED_WIDTH
+      out[0] = is_input ? nodeX : nodeX + w
+      out[1] = nodeY - LiteGraph.NODE_TITLE_HEIGHT * 0.5
+      return out
+    }
+
+    // weird feature that never got finished
+    if (is_input && slot_number == -1) {
+      out[0] = nodeX + LiteGraph.NODE_TITLE_HEIGHT * 0.5
+      out[1] = nodeY + LiteGraph.NODE_TITLE_HEIGHT * 0.5
+      return out
+    }
+
+    // hard-coded pos
+    const inputPos = inputs?.[slot_number]?.pos
+    const outputPos = outputs?.[slot_number]?.pos
+
+    if (is_input && inputPos) {
+      out[0] = nodeX + inputPos[0]
+      out[1] = nodeY + inputPos[1]
+      return out
+    } else if (!is_input && outputPos) {
+      out[0] = nodeX + outputPos[0]
+      out[1] = nodeY + outputPos[1]
+      return out
+    }
+
+    // default vertical slots
+    const offset = LiteGraph.NODE_SLOT_HEIGHT * 0.5
+    const slotIndex = is_input
+      ? this.#defaultVerticalInputs.indexOf(this.inputs[slot_number])
+      : this.#defaultVerticalOutputs.indexOf(this.outputs[slot_number])
+
+    out[0] = is_input
+      ? nodeX + offset
+      : nodeX + this.size[0] + 1 - offset
+    out[1] =
+      nodeY +
+      (slotIndex + 0.7) * LiteGraph.NODE_SLOT_HEIGHT +
+      (this.constructor.slot_start_y || 0)
+    return out
+  }
+
+  /**
+   * @internal The inputs that are not positioned with absolute coordinates.
+   */
+  get #defaultVerticalInputs() {
+    return this.inputs.filter(
+      slot => !slot.pos && !(this.widgets?.length && isWidgetInputSlot(slot)),
+    )
+  }
+
+  /**
+   * @internal The outputs that are not positioned with absolute coordinates.
+   */
+  get #defaultVerticalOutputs() {
+    return this.outputs.filter((slot: INodeOutputSlot) => !slot.pos)
+  }
+
+  /**
+   * Calculate slot position using Vue node dimensions.
+   * This method uses the COMFY_VUE_NODE_DIMENSIONS constants to match Vue component rendering.
+   * @param isInput Whether this is an input slot (true) or output slot (false)
+   * @param slot The slot object (for widget detection)
+   * @param slotIndex The index of the slot in the appropriate array
+   * @returns The [x, y] position of the slot center in graph coordinates
+   */
+  #calculateVueSlotPosition(isInput: boolean, slot: INodeSlot, slotIndex: number): Point {
+    const { pos: [nodeX, nodeY], size: [width] } = this
+    const dimensions = LiteGraph.COMFY_VUE_NODE_DIMENSIONS.components
+    const spacing = LiteGraph.COMFY_VUE_NODE_DIMENSIONS.spacing
+
+    let slotCenterY: number
+
+    // IMPORTANT: LiteGraph's node position (nodeY) is at the TOP of the body (below the header)
+    // The header is rendered ABOVE this position at negative Y coordinates
+    // So we need to adjust for the difference between LiteGraph's header (30px) and Vue's header (34px)
+    const headerDifference = dimensions.HEADER_HEIGHT - LiteGraph.NODE_TITLE_HEIGHT
+
+    if (isInput && isWidgetInputSlot(slot as INodeInputSlot)) {
+      // Widget input slot - calculate based on widget position
+      // Count regular (non-widget) input slots
+      const regularInputCount = this.#defaultVerticalInputs.length
+
+      // Find widget index
+      const widgetIndex = this.widgets?.findIndex(w => w.name === (slot as INodeInputSlot).widget?.name) ?? 0
+
+      // Y position relative to the node body top (not the header)
+      slotCenterY = headerDifference +
+        (regularInputCount * dimensions.SLOT_HEIGHT) +
+        (regularInputCount > 0 ? spacing.BETWEEN_SLOTS_AND_BODY : 0) +
+        (widgetIndex * (dimensions.STANDARD_WIDGET_HEIGHT + spacing.BETWEEN_WIDGETS)) +
+        (dimensions.STANDARD_WIDGET_HEIGHT / 2)
+    } else {
+      // Regular slot (input or output)
+      // Slots start at the top of the body, but we need to account for Vue's larger header
+      slotCenterY = headerDifference +
+        (slotIndex * dimensions.SLOT_HEIGHT) +
+        (dimensions.SLOT_HEIGHT / 2)
+    }
+
+    // Calculate X position
+    // Input slots: 10px from left edge (center of 20x20 connector)
+    // Output slots: 10px from right edge (center of 20x20 connector)
+    const slotCenterX = isInput ? 10 : width - 10
+
+    return [nodeX + slotCenterX, nodeY + slotCenterY]
+  }
+
+  /**
+   * Gets the position of an input slot, in graph co-ordinates.
+   *
+   * This method is preferred over the legacy {@link getConnectionPos} method.
+   * @param slot Input slot index
+   * @returns Position of the input slot
+   */
+  getInputPos(slot: number): Point {
+    return this.getInputSlotPos(this.inputs[slot])
+  }
+
+  /**
+   * Gets the position of an input slot, in graph co-ordinates.
+   * @param input The actual node input object
+   * @returns Position of the centre of the input slot in graph co-ordinates.
+   */
+  getInputSlotPos(input: INodeInputSlot): Point {
+    const { pos: [nodeX, nodeY] } = this
+
+    if (this.flags.collapsed) {
+      const halfTitle = LiteGraph.NODE_TITLE_HEIGHT * 0.5
+      return [nodeX, nodeY - halfTitle]
+    }
+
+    const { pos } = input
+    if (pos) return [nodeX + pos[0], nodeY + pos[1]]
+
+    // Check if we should use Vue positioning
+    if (LiteGraph.vueNodesMode) {
+      if (isWidgetInputSlot(input)) {
+        // Widget slot - pass the slot object
+        return this.#calculateVueSlotPosition(true, input, -1)
+      } else {
+        // Regular slot - find its index in default vertical inputs
+        const slotIndex = this.#defaultVerticalInputs.indexOf(input)
+        if (slotIndex !== -1) {
+          return this.#calculateVueSlotPosition(true, input, slotIndex)
+        }
+      }
+    }
+
+    // default vertical slots
+    const offsetX = LiteGraph.NODE_SLOT_HEIGHT * 0.5
+    const nodeOffsetY = this.constructor.slot_start_y || 0
+    const slotIndex = this.#defaultVerticalInputs.indexOf(input)
+    const slotY = (slotIndex + 0.7) * LiteGraph.NODE_SLOT_HEIGHT
+
+    return [nodeX + offsetX, nodeY + slotY + nodeOffsetY]
+  }
+
+  /**
+   * Gets the position of an output slot, in graph co-ordinates.
+   *
+   * This method is preferred over the legacy {@link getConnectionPos} method.
+   * @param slot Output slot index
+   * @returns Position of the output slot
+   */
+  getOutputPos(slot: number): Point {
+    const { pos: [nodeX, nodeY], outputs, size: [width] } = this
+
+    if (this.flags.collapsed) {
+      const width = this._collapsed_width || LiteGraph.NODE_COLLAPSED_WIDTH
+      const halfTitle = LiteGraph.NODE_TITLE_HEIGHT * 0.5
+      return [nodeX + width, nodeY - halfTitle]
+    }
+
+    const outputPos = outputs?.[slot]?.pos
+    if (outputPos) return [nodeX + outputPos[0], nodeY + outputPos[1]]
+
+    // Check if we should use Vue positioning
+    if (LiteGraph.vueNodesMode) {
+      const outputSlot = this.outputs[slot]
+      const slotIndex = this.#defaultVerticalOutputs.indexOf(outputSlot)
+      if (slotIndex !== -1) {
+        return this.#calculateVueSlotPosition(false, outputSlot, slotIndex)
+      }
+    }
+
+    // default vertical slots
+    const offsetX = LiteGraph.NODE_SLOT_HEIGHT * 0.5
+    const nodeOffsetY = this.constructor.slot_start_y || 0
+    const slotIndex = this.#defaultVerticalOutputs.indexOf(this.outputs[slot])
+    const slotY = (slotIndex + 0.7) * LiteGraph.NODE_SLOT_HEIGHT
+
+    // TODO: Why +1?
+    return [nodeX + width + 1 - offsetX, nodeY + slotY + nodeOffsetY]
+  }
+
+  /** @inheritdoc */
+  snapToGrid(snapTo: number): boolean {
+    return this.pinned ? false : snapPoint(this.pos, snapTo)
+  }
+
+  /** @see {@link snapToGrid} */
+  alignToGrid(): void {
+    this.snapToGrid(LiteGraph.CANVAS_GRID_SIZE)
+  }
+
+  /* Console output */
+  trace(msg: string): void {
+    this.console ||= []
+    this.console.push(msg)
+    // @ts-expect-error deprecated
+    if (this.console.length > LGraphNode.MAX_CONSOLE)
+      this.console.shift()
+  }
+
+  /* Forces to redraw or the main canvas (LGraphNode) or the bg canvas (links) */
+  setDirtyCanvas(dirty_foreground: boolean, dirty_background?: boolean): void {
+    this.graph?.canvasAction(c => c.setDirty(dirty_foreground, dirty_background))
+  }
+
+  loadImage(url: string): HTMLImageElement {
+    interface AsyncImageElement extends HTMLImageElement { ready?: boolean }
+
+    const img: AsyncImageElement = new Image()
+    img.src = LiteGraph.node_images_path + url
+    img.ready = false
+
+    const dirty = () => this.setDirtyCanvas(true)
+    img.addEventListener("load", function (this: AsyncImageElement) {
+      this.ready = true
+      dirty()
+    })
+    return img
+  }
+
+  /**
+   * Allows to get onMouseMove and onMouseUp events even if the mouse is out of focus
+   * @deprecated Use {@link LGraphCanvas.pointer} instead.
+   */
+  captureInput(v: boolean): void {
+    warnDeprecated("[DEPRECATED] captureInput will be removed in a future version. Please use LGraphCanvas.pointer (CanvasPointer) instead.")
+    if (!this.graph || !this.graph.list_of_graphcanvas) return
+
+    const list = this.graph.list_of_graphcanvas
+
+    for (const c of list) {
+      // releasing somebody elses capture?!
+      if (!v && c.node_capturing_input != this) continue
+
+      // change
+      c.node_capturing_input = v ? this : null
+    }
+  }
+
+  get collapsed() {
+    return !!this.flags.collapsed
+  }
+
+  get collapsible() {
+    return !this.pinned && this.constructor.collapsable !== false
+  }
+
+  /**
+   * Toggle node collapse (makes it smaller on the canvas)
+   */
+  collapse(force?: boolean): void {
+    if (!this.collapsible && !force) return
+    if (!this.graph) throw new NullGraphError()
+    this.graph._version++
+    this.flags.collapsed = !this.flags.collapsed
+    this.setDirtyCanvas(true, true)
+  }
+
+  /**
+   * Toggles advanced mode of the node, showing advanced widgets
+   */
+  toggleAdvanced() {
+    if (!this.widgets?.some(w => w.advanced)) return
+    if (!this.graph) throw new NullGraphError()
+    this.graph._version++
+    this.showAdvanced = !this.showAdvanced
+    this.expandToFitContent()
+    this.setDirtyCanvas(true, true)
+  }
+
+  get pinned() {
+    return !!this.flags.pinned
+  }
+
+  /**
+   * Prevents the node being accidentally moved or resized by mouse interaction.
+   * Toggles pinned state if no value is provided.
+   */
+  pin(v?: boolean): void {
+    if (!this.graph) throw new NullGraphError()
+
+    this.graph._version++
+    this.flags.pinned = v ?? !this.flags.pinned
+    this.resizable = !this.pinned
+    // Delete the flag if unpinned, so that we don't get unnecessary
+    // flags.pinned = false in serialized object.
+    if (!this.pinned) delete this.flags.pinned
+  }
+
+  unpin(): void {
+    this.pin(false)
+  }
+
+  localToScreen(x: number, y: number, dragAndScale: DragAndScale): Point {
+    return [
+      (x + this.pos[0]) * dragAndScale.scale + dragAndScale.offset[0],
+      (y + this.pos[1]) * dragAndScale.scale + dragAndScale.offset[1],
+    ]
+  }
+
+  get width() {
+    return this.collapsed
+      ? this._collapsed_width || LiteGraph.NODE_COLLAPSED_WIDTH
+      : this.size[0]
+  }
+
+  /**
+   * Returns the height of the node, including the title bar.
+   */
+  get height() {
+    return LiteGraph.NODE_TITLE_HEIGHT + this.bodyHeight
+  }
+
+  /**
+   * Returns the height of the node, excluding the title bar.
+   */
+  get bodyHeight() {
+    return this.collapsed ? 0 : this.size[1]
+  }
+
+  drawBadges(ctx: CanvasRenderingContext2D, { gap = 2 } = {}): void {
+    const badgeInstances = this.badges.map(badge =>
+      badge instanceof LGraphBadge ? badge : badge())
+    const isLeftAligned = this.badgePosition === BadgePosition.TopLeft
+
+    let currentX = isLeftAligned
+      ? 0
+      : this.width - badgeInstances.reduce((acc, badge) => acc + badge.getWidth(ctx) + gap, 0)
+    const y = -(LiteGraph.NODE_TITLE_HEIGHT + gap)
+
+    for (const badge of badgeInstances) {
+      badge.draw(ctx, currentX, y - badge.height)
+      currentX += badge.getWidth(ctx) + gap
+    }
+  }
+
+  /**
+   * Renders the node's title bar background
+   */
+  drawTitleBarBackground(ctx: CanvasRenderingContext2D, {
+    scale,
+    title_height = LiteGraph.NODE_TITLE_HEIGHT,
+    low_quality = false,
+  }: DrawTitleOptions): void {
+    const fgcolor = this.renderingColor
+    const shape = this.renderingShape
+    const size = this.renderingSize
+
+    if (this.onDrawTitleBar) {
+      this.onDrawTitleBar(ctx, title_height, size, scale, fgcolor)
+      return
+    }
+
+    if (this.title_mode === TitleMode.TRANSPARENT_TITLE) {
+      return
+    }
+
+    if (this.collapsed) {
+      ctx.shadowColor = LiteGraph.DEFAULT_SHADOW_COLOR
+    }
+
+    ctx.fillStyle = this.constructor.title_color || fgcolor
+    ctx.beginPath()
+
+    if (shape == RenderShape.BOX || low_quality) {
+      ctx.rect(0, -title_height, size[0], title_height)
+    } else if (shape == RenderShape.ROUND || shape == RenderShape.CARD) {
+      ctx.roundRect(
+        0,
+        -title_height,
+        size[0],
+        title_height,
+        this.collapsed
+          ? [LiteGraph.ROUND_RADIUS]
+          : [LiteGraph.ROUND_RADIUS, LiteGraph.ROUND_RADIUS, 0, 0],
+      )
+    }
+    ctx.fill()
+    ctx.shadowColor = "transparent"
+  }
+
+  /**
+   * Renders the node's title box, i.e. the dot in front of the title text that
+   * when clicked toggles the node's collapsed state. The term `title box` comes
+   * from the original LiteGraph implementation.
+   */
+  drawTitleBox(ctx: CanvasRenderingContext2D, {
+    scale,
+    low_quality = false,
+    title_height = LiteGraph.NODE_TITLE_HEIGHT,
+    box_size = 10,
+  }: DrawTitleBoxOptions): void {
+    const size = this.renderingSize
+    const shape = this.renderingShape
+
+    if (this.onDrawTitleBox) {
+      this.onDrawTitleBox(ctx, title_height, size, scale)
+      return
+    }
+
+    if (
+      [RenderShape.ROUND, RenderShape.CIRCLE, RenderShape.CARD].includes(shape)
+    ) {
+      if (low_quality) {
+        ctx.fillStyle = "black"
+        ctx.beginPath()
+        ctx.arc(
+          title_height * 0.5,
+          title_height * -0.5,
+          box_size * 0.5 + 1,
+          0,
+          Math.PI * 2,
+        )
+        ctx.fill()
+      }
+
+      ctx.fillStyle = this.renderingBoxColor
+      if (low_quality) {
+        ctx.fillRect(
+          title_height * 0.5 - box_size * 0.5,
+          title_height * -0.5 - box_size * 0.5,
+          box_size,
+          box_size,
+        )
+      } else {
+        ctx.beginPath()
+        ctx.arc(
+          title_height * 0.5,
+          title_height * -0.5,
+          box_size * 0.5,
+          0,
+          Math.PI * 2,
+        )
+        ctx.fill()
+      }
+    } else {
+      if (low_quality) {
+        ctx.fillStyle = "black"
+        ctx.fillRect(
+          (title_height - box_size) * 0.5 - 1,
+          (title_height + box_size) * -0.5 - 1,
+          box_size + 2,
+          box_size + 2,
+        )
+      }
+      ctx.fillStyle = this.renderingBoxColor
+      ctx.fillRect(
+        (title_height - box_size) * 0.5,
+        (title_height + box_size) * -0.5,
+        box_size,
+        box_size,
+      )
+    }
+  }
+
+  /**
+   * Renders the node's title text.
+   */
+  drawTitleText(ctx: CanvasRenderingContext2D, {
+    scale,
+    default_title_color,
+    low_quality = false,
+    title_height = LiteGraph.NODE_TITLE_HEIGHT,
+  }: DrawTitleTextOptions): void {
+    const size = this.renderingSize
+    const selected = this.selected
+
+    if (this.onDrawTitleText) {
+      this.onDrawTitleText(
+        ctx,
+        title_height,
+        size,
+        scale,
+        this.titleFontStyle,
+        selected,
+      )
+      return
+    }
+
+    // Don't render title text if low quality
+    if (low_quality) {
+      return
+    }
+
+    ctx.font = this.titleFontStyle
+    const rawTitle = this.getTitle() ?? `❌ ${this.type}`
+    const title = String(rawTitle) + (this.pinned ? "📌" : "")
+    if (title) {
+      if (selected) {
+        ctx.fillStyle = LiteGraph.NODE_SELECTED_TITLE_COLOR
+      } else {
+        ctx.fillStyle = this.constructor.title_text_color || default_title_color
+      }
+      if (this.collapsed) {
+        ctx.textAlign = "left"
+        ctx.fillText(
+          // avoid urls too long
+          title.substr(0, 20),
+          title_height,
+          LiteGraph.NODE_TITLE_TEXT_Y - title_height,
+        )
+        ctx.textAlign = "left"
+      } else {
+        ctx.textAlign = "left"
+        ctx.fillText(
+          title,
+          title_height,
+          LiteGraph.NODE_TITLE_TEXT_Y - title_height,
+        )
+      }
+    }
+  }
+
+  /**
+   * Attempts to gracefully bypass this node in all of its connections by reconnecting all links.
+   *
+   * Each input is checked against each output.  This is done on a matching index basis, i.e. input 3 -> output 3.
+   * If there are any input links remaining,
+   * and {@link flags}.{@link INodeFlags.keepAllLinksOnBypass keepAllLinksOnBypass} is `true`,
+   * each input will check for outputs that match, and take the first one that matches
+   * `true`: Try the index matching first, then every input to every output.
+   * `false`: Only matches indexes, e.g. input 3 to output 3.
+   *
+   * If {@link flags}.{@link INodeFlags.keepAllLinksOnBypass keepAllLinksOnBypass} is `undefined`, it will fall back to
+   * the static {@link keepAllLinksOnBypass}.
+   * @returns `true` if any new links were established, otherwise `false`.
+   * @todo Decision: Change API to return array of new links instead?
+   */
+  connectInputToOutput(): boolean | undefined {
+    const { inputs, outputs, graph } = this
+    if (!inputs || !outputs) return
+    if (!graph) throw new NullGraphError()
+
+    const { _links } = graph
+    let madeAnyConnections = false
+
+    // First pass: only match exactly index-to-index
+    for (const [index, input] of inputs.entries()) {
+      if (input.link == null) continue
+
+      const output = outputs[index]
+      if (!output || !LiteGraph.isValidConnection(input.type, output.type)) continue
+
+      const inLink = _links.get(input.link)
+      if (!inLink) continue
+      const inNode = graph.getNodeById(inLink?.origin_id)
+      if (!inNode) continue
+
+      bypassAllLinks(output, inNode, inLink, graph)
+    }
+    // Configured to only use index-to-index matching
+    if (!(this.flags.keepAllLinksOnBypass ?? LGraphNode.keepAllLinksOnBypass))
+      return madeAnyConnections
+
+    // Second pass: match any remaining links
+    for (const input of inputs) {
+      if (input.link == null) continue
+
+      const inLink = _links.get(input.link)
+      if (!inLink) continue
+      const inNode = graph.getNodeById(inLink?.origin_id)
+      if (!inNode) continue
+
+      for (const output of outputs) {
+        if (!LiteGraph.isValidConnection(input.type, output.type)) continue
+
+        bypassAllLinks(output, inNode, inLink, graph)
+        break
+      }
+    }
+    return madeAnyConnections
+
+    function bypassAllLinks(output: INodeOutputSlot, inNode: LGraphNode, inLink: LLink, graph: LGraph) {
+      const outLinks = output.links
+        ?.map(x => _links.get(x))
+        .filter(x => !!x)
+      if (!outLinks?.length) return
+
+      for (const outLink of outLinks) {
+        const outNode = graph.getNodeById(outLink.target_id)
+        if (!outNode) continue
+
+        const result = inNode.connect(
+          inLink.origin_slot,
+          outNode,
+          outLink.target_slot,
+          inLink.parentId,
+        )
+        madeAnyConnections ||= !!result
+      }
+    }
+  }
+
+  /**
+   * Returns `true` if the widget is visible, otherwise `false`.
+   */
+  isWidgetVisible(widget: IBaseWidget): boolean {
+    const isHidden = (
+      this.collapsed ||
+      widget.hidden ||
+      (widget.advanced && !this.showAdvanced)
+    )
+    return !isHidden
+  }
+
+  drawWidgets(ctx: CanvasRenderingContext2D, {
+    lowQuality = false,
+    editorAlpha = 1,
+  }: DrawWidgetsOptions): void {
+    if (!this.widgets) return
+
+    const nodeWidth = this.size[0]
+    const { widgets } = this
+    const H = LiteGraph.NODE_WIDGET_HEIGHT
+    const showText = !lowQuality
+    ctx.save()
+    ctx.globalAlpha = editorAlpha
+
+    for (const widget of widgets) {
+      if (!this.isWidgetVisible(widget)) continue
+
+      const { y } = widget
+      const outlineColour = widget.advanced ? LiteGraph.WIDGET_ADVANCED_OUTLINE_COLOR : LiteGraph.WIDGET_OUTLINE_COLOR
+
+      widget.last_y = y
+      // Disable widget if it is disabled or if the value is passed from socket connection.
+      widget.computedDisabled = widget.disabled || this.getSlotFromWidget(widget)?.link != null
+
+      ctx.strokeStyle = outlineColour
+      ctx.fillStyle = "#222"
+      ctx.textAlign = "left"
+      if (widget.computedDisabled) ctx.globalAlpha *= 0.5
+      const width = widget.width || nodeWidth
+
+      if (typeof widget.draw === "function") {
+        widget.draw(ctx, this, width, y, H, lowQuality)
+      } else {
+        toConcreteWidget(widget, this, false)?.drawWidget(ctx, { width, showText })
+      }
+      ctx.globalAlpha = editorAlpha
+    }
+    ctx.restore()
+  }
+
+  /**
+   * When {@link LGraphNode.collapsed} is `true`, this method draws the node's collapsed slots.
+   */
+  drawCollapsedSlots(ctx: CanvasRenderingContext2D): void {
+    // Render the first connected slot only.
+    for (const slot of this.#concreteInputs) {
+      if (slot.link != null) {
+        slot.drawCollapsed(ctx)
+        break
+      }
+    }
+    for (const slot of this.#concreteOutputs) {
+      if (slot.links?.length) {
+        slot.drawCollapsed(ctx)
+        break
+      }
+    }
+  }
+
+  get slots(): (INodeInputSlot | INodeOutputSlot)[] {
+    return [...this.inputs, ...this.outputs]
+  }
+
+  #measureSlot(slot: NodeInputSlot | NodeOutputSlot, slotIndex: number, isInput: boolean): void {
+    const pos = isInput ? this.getInputPos(slotIndex) : this.getOutputPos(slotIndex)
+
+    if (LiteGraph.vueNodesMode) {
+      // Vue-based slot dimensions
+      const dimensions = LiteGraph.COMFY_VUE_NODE_DIMENSIONS.components
+
+      if (slot.isWidgetInputSlot) {
+        // Widget slots have a 20x20 clickable area centered at the position
+        slot.boundingRect[0] = pos[0] - 10
+        slot.boundingRect[1] = pos[1] - 10
+        slot.boundingRect[2] = 20
+        slot.boundingRect[3] = 20
+      } else {
+        // Regular slots have a 20x20 clickable area for the connector
+        // but the full slot height for vertical spacing
+        slot.boundingRect[0] = pos[0] - 10
+        slot.boundingRect[1] = pos[1] - (dimensions.SLOT_HEIGHT / 2)
+        slot.boundingRect[2] = 20
+        slot.boundingRect[3] = dimensions.SLOT_HEIGHT
+      }
+    } else {
+      // Traditional LiteGraph dimensions
+      slot.boundingRect[0] = pos[0] - LiteGraph.NODE_SLOT_HEIGHT * 0.5
+      slot.boundingRect[1] = pos[1] - LiteGraph.NODE_SLOT_HEIGHT * 0.5
+      slot.boundingRect[2] = slot.isWidgetInputSlot ? BaseWidget.margin : LiteGraph.NODE_SLOT_HEIGHT
+      slot.boundingRect[3] = LiteGraph.NODE_SLOT_HEIGHT
+    }
+  }
+
+  #measureSlots(): ReadOnlyRect | null {
+    const slots: (NodeInputSlot | NodeOutputSlot)[] = []
+
+    for (const [slotIndex, slot] of this.#concreteInputs.entries()) {
+      // Unrecognized nodes (Nodes with error) has inputs but no widgets. Treat
+      // converted inputs as normal inputs.
+      /** Widget input slots are handled in {@link layoutWidgetInputSlots} */
+      if (this.widgets?.length && isWidgetInputSlot(slot)) continue
+
+      this.#measureSlot(slot, slotIndex, true)
+      slots.push(slot)
+    }
+    for (const [slotIndex, slot] of this.#concreteOutputs.entries()) {
+      this.#measureSlot(slot, slotIndex, false)
+      slots.push(slot)
+    }
+
+    return slots.length ? createBounds(slots, 0) : null
+  }
+
+  #getMouseOverSlot(slot: INodeSlot): INodeSlot | null {
+    const isInput = isINodeInputSlot(slot)
+    const mouseOverId = this.mouseOver?.[isInput ? "inputId" : "outputId"] ?? -1
+    if (mouseOverId === -1) {
+      return null
+    }
+    return isInput ? this.inputs[mouseOverId] : this.outputs[mouseOverId]
+  }
+
+  #isMouseOverSlot(slot: INodeSlot): boolean {
+    return this.#getMouseOverSlot(slot) === slot
+  }
+
+  #isMouseOverWidget(widget: IBaseWidget | undefined): boolean {
+    if (!widget) return false
+    return this.mouseOver?.overWidget === widget
+  }
+
+  /**
+   * Returns the input slot that is associated with the given widget.
+   */
+  getSlotFromWidget(widget: IBaseWidget | undefined): INodeInputSlot | undefined {
+    if (widget) return this.inputs.find(slot => isWidgetInputSlot(slot) && slot.widget.name === widget.name)
+  }
+
+  /**
+   * Returns the widget that is associated with the given input slot.
+   */
+  getWidgetFromSlot(slot: INodeInputSlot): IBaseWidget | undefined {
+    if (!isWidgetInputSlot(slot)) return
+    return this.widgets?.find(w => w.name === slot.widget.name)
+  }
+
+  /**
+   * Draws the node's input and output slots.
+   */
+  drawSlots(ctx: CanvasRenderingContext2D, {
+    fromSlot,
+    colorContext,
+    editorAlpha,
+    lowQuality,
+  }: DrawSlotsOptions) {
+    for (const slot of [...this.#concreteInputs, ...this.#concreteOutputs]) {
+      const isValidTarget = fromSlot && slot.isValidTarget(fromSlot)
+      const isMouseOverSlot = this.#isMouseOverSlot(slot)
+
+      // change opacity of incompatible slots when dragging a connection
+      const isValid = !fromSlot || isValidTarget
+      const highlight = isValid && isMouseOverSlot
+
+      // Show slot if it's not a widget input slot
+      // or if it's a widget input slot and satisfies one of the following:
+      // - the mouse is over the widget
+      // - the slot is valid during link drop
+      // - the slot is connected
+      if (
+        isMouseOverSlot ||
+        isValidTarget ||
+        !slot.isWidgetInputSlot ||
+        this.#isMouseOverWidget(this.getWidgetFromSlot(slot)) ||
+        slot.isConnected
+      ) {
+        ctx.globalAlpha = isValid ? editorAlpha : 0.4 * editorAlpha
+        slot.draw(ctx, {
+          colorContext,
+          lowQuality,
+          highlight,
+        })
+      }
+    }
+  }
+
+  /**
+   * Arranges the node's widgets vertically.
+   * Sets following properties on each widget:
+   * -  {@link IBaseWidget.computedHeight}
+   * -  {@link IBaseWidget.y}
+   * @param widgetStartY The y-coordinate of the first widget
+   */
+  #arrangeWidgets(widgetStartY: number): void {
+    if (!this.widgets || !this.widgets.length) return
+
+    const bodyHeight = this.bodyHeight
+    const startY = this.widgets_start_y ?? (
+      (this.widgets_up ? 0 : widgetStartY) + 2
+    )
+
+    let freeSpace = bodyHeight - startY
+
+    // Collect fixed height widgets first
+    let fixedWidgetHeight = 0
+    const growableWidgets: {
+      minHeight: number
+      prefHeight?: number
+      w: IBaseWidget
+    }[] = []
+
+    for (const w of this.widgets) {
+      if (w.computeSize) {
+        const height = w.computeSize()[1] + 4
+        w.computedHeight = height
+        fixedWidgetHeight += height
+      } else if (w.computeLayoutSize) {
+        const { minHeight, maxHeight } = w.computeLayoutSize(this)
+        growableWidgets.push({
+          minHeight,
+          prefHeight: maxHeight,
+          w,
+        })
+      } else {
+        const height = LiteGraph.NODE_WIDGET_HEIGHT + 4
+        w.computedHeight = height
+        fixedWidgetHeight += height
+      }
+    }
+
+    // Calculate remaining space for DOM widgets
+    freeSpace -= fixedWidgetHeight
+    this.freeWidgetSpace = freeSpace
+
+    // Prepare space requests for distribution
+    const spaceRequests = growableWidgets.map(d => ({
+      minSize: d.minHeight,
+      maxSize: d.prefHeight,
+    }))
+
+    // Distribute space among DOM widgets
+    const allocations = distributeSpace(Math.max(0, freeSpace), spaceRequests)
+
+    // Apply computed heights
+    for (const [i, d] of growableWidgets.entries()) {
+      d.w.computedHeight = allocations[i]
+    }
+
+    // Position widgets
+    let y = startY
+    for (const w of this.widgets) {
+      w.y = y
+      y += w.computedHeight ?? 0
+    }
+
+    if (!this.graph) throw new NullGraphError()
+
+    // Grow the node if necessary.
+    // Ref: https://github.com/Comfy-Org/ComfyUI_frontend/issues/2652
+    // TODO: Move the layout logic before drawing of the node shape, so we don't
+    // need to trigger extra round of rendering.
+    if (y > bodyHeight) {
+      this.setSize([this.size[0], y])
+      this.graph.setDirtyCanvas(false, true)
+    }
+  }
+
+  /**
+   * Arranges the layout of the node's widget input slots.
+   */
+  #arrangeWidgetInputSlots(): void {
+    if (!this.widgets) return
+
+    const slotByWidgetName = new Map<string, INodeInputSlot & { index: number }>()
+
+    for (const [i, slot] of this.inputs.entries()) {
+      if (!isWidgetInputSlot(slot)) continue
+
+      slotByWidgetName.set(slot.widget.name, { ...slot, index: i })
+    }
+    if (!slotByWidgetName.size) return
+
+    // Only set custom pos if not using Vue positioning
+    // Vue positioning calculates widget slot positions dynamically
+    if (!LiteGraph.vueNodesMode) {
+      for (const widget of this.widgets) {
+        const slot = slotByWidgetName.get(widget.name)
+        if (!slot) continue
+
+        const actualSlot = this.#concreteInputs[slot.index]
+        const offset = LiteGraph.NODE_SLOT_HEIGHT * 0.5
+        actualSlot.pos = [offset, widget.y + offset]
+        this.#measureSlot(actualSlot, slot.index, true)
+      }
+    } else {
+      // For Vue positioning, just measure the slots without setting pos
+      for (const widget of this.widgets) {
+        const slot = slotByWidgetName.get(widget.name)
+        if (!slot) continue
+
+        this.#measureSlot(this.#concreteInputs[slot.index], slot.index, true)
+      }
+    }
+  }
+
+  /**
+   * @internal Sets the internal concrete slot arrays, ensuring they are instances of
+   * {@link NodeInputSlot} or {@link NodeOutputSlot}.
+   *
+   * A temporary workaround until duck-typed inputs and outputs
+   * have been removed from the ecosystem.
+   */
+  _setConcreteSlots(): void {
+    this.#concreteInputs = this.inputs.map(slot => toClass(NodeInputSlot, slot, this))
+    this.#concreteOutputs = this.outputs.map(slot => toClass(NodeOutputSlot, slot, this))
+  }
+
+  /**
+   * Arranges node elements in preparation for rendering (slots & widgets).
+   */
+  arrange(): void {
+    const slotsBounds = this.#measureSlots()
+    const widgetStartY = slotsBounds ? slotsBounds[1] + slotsBounds[3] - this.pos[1] : 0
+    this.#arrangeWidgets(widgetStartY)
+    this.#arrangeWidgetInputSlots()
+  }
+
+  /**
+   * Draws a progress bar on the node.
+   * @param ctx The canvas context to draw on
+   */
+  drawProgressBar(ctx: CanvasRenderingContext2D): void {
+    if (!this.progress) return
+
+    const originalFillStyle = ctx.fillStyle
+    ctx.fillStyle = "green"
+    ctx.fillRect(
+      0,
+      0,
+      this.width * this.progress,
+      6,
+    )
+    ctx.fillStyle = originalFillStyle
+  }
+}
diff --git a/src/lib/litegraph/src/LGraphNodeProperties.ts b/src/lib/litegraph/src/LGraphNodeProperties.ts
new file mode 100644
index 0000000000..c486415c8a
--- /dev/null
+++ b/src/lib/litegraph/src/LGraphNodeProperties.ts
@@ -0,0 +1,163 @@
+import type { LGraphNode } from "./LGraphNode"
+
+/**
+ * Default properties to track
+ */
+const DEFAULT_TRACKED_PROPERTIES: string[] = [
+  "title",
+  "flags.collapsed",
+]
+
+/**
+ * Manages node properties with optional change tracking and instrumentation.
+ */
+export class LGraphNodeProperties {
+  /** The node this property manager belongs to */
+  node: LGraphNode
+
+  /** Set of property paths that have been instrumented */
+  #instrumentedPaths = new Set<string>()
+
+  constructor(node: LGraphNode) {
+    this.node = node
+
+    this.#setupInstrumentation()
+  }
+
+  /**
+   * Sets up property instrumentation for all tracked properties
+   */
+  #setupInstrumentation(): void {
+    for (const path of DEFAULT_TRACKED_PROPERTIES) {
+      this.#instrumentProperty(path)
+    }
+  }
+
+  /**
+   * Instruments a single property to track changes
+   */
+  #instrumentProperty(path: string): void {
+    const parts = path.split(".")
+
+    if (parts.length > 1) {
+      this.#ensureNestedPath(path)
+    }
+
+    let targetObject: any = this.node
+    let propertyName = parts[0]
+
+    if (parts.length > 1) {
+      for (let i = 0; i < parts.length - 1; i++) {
+        targetObject = targetObject[parts[i]]
+      }
+      propertyName = parts.at(-1)!
+    }
+
+    const hasProperty = Object.prototype.hasOwnProperty.call(targetObject, propertyName)
+    const currentValue = targetObject[propertyName]
+
+    if (!hasProperty) {
+      let value: any = undefined
+
+      Object.defineProperty(targetObject, propertyName, {
+        get: () => value,
+        set: (newValue: any) => {
+          const oldValue = value
+          value = newValue
+          this.#emitPropertyChange(path, oldValue, newValue)
+
+          // Update enumerable: true for non-undefined values, false for undefined
+          const shouldBeEnumerable = newValue !== undefined
+          const currentDescriptor = Object.getOwnPropertyDescriptor(targetObject, propertyName)
+          if (currentDescriptor && currentDescriptor.enumerable !== shouldBeEnumerable) {
+            Object.defineProperty(targetObject, propertyName, {
+              ...currentDescriptor,
+              enumerable: shouldBeEnumerable,
+            })
+          }
+        },
+        enumerable: false,
+        configurable: true,
+      })
+    } else {
+      Object.defineProperty(
+        targetObject,
+        propertyName,
+        this.#createInstrumentedDescriptor(path, currentValue),
+      )
+    }
+
+    this.#instrumentedPaths.add(path)
+  }
+
+  /**
+   * Creates a property descriptor that emits change events
+   */
+  #createInstrumentedDescriptor(propertyPath: string, initialValue: any): PropertyDescriptor {
+    let value = initialValue
+
+    return {
+      get: () => value,
+      set: (newValue: any) => {
+        const oldValue = value
+        value = newValue
+        this.#emitPropertyChange(propertyPath, oldValue, newValue)
+      },
+      enumerable: true,
+      configurable: true,
+    }
+  }
+
+  /**
+   * Emits a property change event if the node is connected to a graph
+   */
+  #emitPropertyChange(propertyPath: string, oldValue: any, newValue: any): void {
+    if (oldValue !== newValue && this.node.graph) {
+      this.node.graph.trigger("node:property:changed", {
+        nodeId: this.node.id,
+        property: propertyPath,
+        oldValue,
+        newValue,
+      })
+    }
+  }
+
+  /**
+   * Ensures parent objects exist for nested properties
+   */
+  #ensureNestedPath(path: string): void {
+    const parts = path.split(".")
+    let current: any = this.node
+
+    // Create all parent objects except the last property
+    for (let i = 0; i < parts.length - 1; i++) {
+      const part = parts[i]
+      if (!current[part]) {
+        current[part] = {}
+      }
+      current = current[part]
+    }
+  }
+
+  /**
+   * Checks if a property is being tracked
+   */
+  isTracked(path: string): boolean {
+    return this.#instrumentedPaths.has(path)
+  }
+
+  /**
+   * Gets the list of tracked properties
+   */
+  getTrackedProperties(): string[] {
+    return [...DEFAULT_TRACKED_PROPERTIES]
+  }
+
+  /**
+   * Custom toJSON method for JSON.stringify
+   * Returns undefined to exclude from serialization since we only use defaults
+   */
+  toJSON(): any {
+    return undefined
+  }
+}
diff --git a/src/lib/litegraph/src/LLink.ts b/src/lib/litegraph/src/LLink.ts
new file mode 100644
index 0000000000..04121aa11e
--- /dev/null
+++ b/src/lib/litegraph/src/LLink.ts
@@ -0,0 +1,437 @@
+import type {
+  CanvasColour,
+  INodeInputSlot,
+  INodeOutputSlot,
+  ISlotType,
+  LinkNetwork,
+  LinkSegment,
+  ReadonlyLinkNetwork,
+} from "./interfaces"
+import type { LGraphNode, NodeId } from "./LGraphNode"
+import type { Reroute, RerouteId } from "./Reroute"
+import type { Serialisable, SerialisableLLink, SubgraphIO } from "./types/serialisation"
+
+import { SUBGRAPH_INPUT_ID, SUBGRAPH_OUTPUT_ID } from './constants'
+
+export type LinkId = number
+
+export type SerialisedLLinkArray = [
+  id: LinkId,
+  origin_id: NodeId,
+  origin_slot: number,
+  target_id: NodeId,
+  target_slot: number,
+  type: ISlotType,
+]
+
+// Resolved connection union; eliminates subgraph in/out as a possibility
+export type ResolvedConnection = BaseResolvedConnection &
+  (
+    (ResolvedSubgraphInput & ResolvedNormalOutput) |
+    (ResolvedNormalInput & ResolvedSubgraphOutput) |
+    (ResolvedNormalInput & ResolvedNormalOutput)
+  )
+
+interface BaseResolvedConnection {
+  link: LLink
+  /** The node on the input side of the link (owns {@link input}) */
+  inputNode?: LGraphNode
+  /** The input the link is connected to (mutually exclusive with {@link subgraphOutput}) */
+  input?: INodeInputSlot
+  /** The node on the output side of the link (owns {@link output}) */
+  outputNode?: LGraphNode
+  /** The output the link is connected to (mutually exclusive with {@link subgraphInput}) */
+  output?: INodeOutputSlot
+  /** The subgraph output the link is connected to (mutually exclusive with {@link input}) */
+  subgraphOutput?: SubgraphIO
+  /** The subgraph input the link is connected to (mutually exclusive with {@link output}) */
+  subgraphInput?: SubgraphIO
+}
+
+interface ResolvedNormalInput {
+  inputNode: LGraphNode | undefined
+  input: INodeInputSlot | undefined
+  subgraphOutput?: undefined
+}
+
+interface ResolvedNormalOutput {
+  outputNode: LGraphNode | undefined
+  output: INodeOutputSlot | undefined
+  subgraphInput?: undefined
+}
+
+interface ResolvedSubgraphInput {
+  inputNode?: undefined
+  /** The actual input slot the link is connected to (mutually exclusive with {@link subgraphOutput}) */
+  input?: undefined
+  subgraphOutput: SubgraphIO
+}
+
+interface ResolvedSubgraphOutput {
+  outputNode?: undefined
+  output?: undefined
+  subgraphInput: SubgraphIO
+}
+
+type BasicReadonlyNetwork = Pick<ReadonlyLinkNetwork, "getNodeById" | "links" | "getLink" | "inputNode" | "outputNode">
+
+// this is the class in charge of storing link information
+export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
+  static _drawDebug = false
+
+  /** Link ID */
+  id: LinkId
+  parentId?: RerouteId
+  type: ISlotType
+  /** Output node ID */
+  origin_id: NodeId
+  /** Output slot index */
+  origin_slot: number
+  /** Input node ID */
+  target_id: NodeId
+  /** Input slot index */
+  target_slot: number
+
+  data?: number | string | boolean | { toToolTip?(): string }
+  _data?: unknown
+  /** Centre point of the link, calculated during render only - can be inaccurate */
+  _pos: Float32Array
+  /** @todo Clean up - never implemented in comfy. */
+  _last_time?: number
+  /** The last canvas 2D path that was used to render this link */
+  path?: Path2D
+  /** @inheritdoc */
+  _centreAngle?: number
+
+  /** @inheritdoc */
+  _dragging?: boolean
+
+  #color?: CanvasColour | null
+  /** Custom colour for this link only */
+  public get color(): CanvasColour | null | undefined {
+    return this.#color
+  }
+
+  public set color(value: CanvasColour) {
+    this.#color = value === "" ? null : value
+  }
+
+  public get isFloatingOutput(): boolean {
+    return this.origin_id === -1 && this.origin_slot === -1
+  }
+
+  public get isFloatingInput(): boolean {
+    return this.target_id === -1 && this.target_slot === -1
+  }
+
+  public get isFloating(): boolean {
+    return this.isFloatingOutput || this.isFloatingInput
+  }
+
+  /** `true` if this link is connected to a subgraph input node (the actual origin is in a different graph). */
+  get originIsIoNode(): boolean {
+    return this.origin_id === SUBGRAPH_INPUT_ID
+  }
+
+  /** `true` if this link is connected to a subgraph output node (the actual target is in a different graph). */
+  get targetIsIoNode(): boolean {
+    return this.target_id === SUBGRAPH_OUTPUT_ID
+  }
+
+  constructor(
+    id: LinkId,
+    type: ISlotType,
+    origin_id: NodeId,
+    origin_slot: number,
+    target_id: NodeId,
+    target_slot: number,
+    parentId?: RerouteId,
+  ) {
+    this.id = id
+    this.type = type
+    this.origin_id = origin_id
+    this.origin_slot = origin_slot
+    this.target_id = target_id
+    this.target_slot = target_slot
+    this.parentId = parentId
+
+    this._data = null
+    // center
+    this._pos = new Float32Array(2)
+  }
+
+  /** @deprecated Use {@link LLink.create} */
+  static createFromArray(data: SerialisedLLinkArray): LLink {
+    return new LLink(data[0], data[5], data[1], data[2], data[3], data[4])
+  }
+
+  /**
+   * LLink static factory: creates a new LLink from the provided data.
+   * @param data Serialised LLink data to create the link from
+   * @returns A new LLink
+   */
+  static create(data: SerialisableLLink): LLink {
+    return new LLink(
+      data.id,
+      data.type,
+      data.origin_id,
+      data.origin_slot,
+      data.target_id,
+      data.target_slot,
+      data.parentId,
+    )
+  }
+
+  /**
+   * Gets all reroutes from the output slot to this segment.  If this segment is a reroute, it will not be included.
+   * @returns An ordered array of all reroutes from the node output to
+   * this reroute or the reroute before it.  Otherwise, an empty array.
+   */
+  static getReroutes(
+    network: Pick<ReadonlyLinkNetwork, "reroutes">,
+    linkSegment: LinkSegment,
+  ): Reroute[] {
+    if (!linkSegment.parentId) return []
+    return network.reroutes
+      .get(linkSegment.parentId)
+      ?.getReroutes() ?? []
+  }
+
+  static getFirstReroute(
+    network: Pick<ReadonlyLinkNetwork, "reroutes">,
+    linkSegment: LinkSegment,
+  ): Reroute | undefined {
+    return LLink.getReroutes(network, linkSegment).at(0)
+  }
+
+  /**
+   * Finds the reroute in the chain after the provided reroute ID.
+   * @param network The network this link belongs to
+   * @param linkSegment The starting point of the search (input side).
+   * Typically the LLink object itself, but can be any link segment.
+   * @param rerouteId The matching reroute will have this set as its {@link parentId}.
+   * @returns The reroute that was found, `undefined` if no reroute was found, or `null` if an infinite loop was detected.
+   */
+  static findNextReroute(
+    network: Pick<ReadonlyLinkNetwork, "reroutes">,
+    linkSegment: LinkSegment,
+    rerouteId: RerouteId,
+  ): Reroute | null | undefined {
+    if (!linkSegment.parentId) return
+    return network.reroutes
+      .get(linkSegment.parentId)
+      ?.findNextReroute(rerouteId)
+  }
+
+  /**
+   * Gets the origin node of a link.
+   * @param network The network to search
+   * @param linkId The ID of the link to get the origin node of
+   * @returns The origin node of the link, or `undefined` if the link is not found or the origin node is not found
+   */
+  static getOriginNode(network: BasicReadonlyNetwork, linkId: LinkId): LGraphNode | undefined {
+    const id = network.links.get(linkId)?.origin_id
+    return network.getNodeById(id) ?? undefined
+  }
+
+  /**
+   * Gets the target node of a link.
+   * @param network The network to search
+   * @param linkId The ID of the link to get the target node of
+   * @returns The target node of the link, or `undefined` if the link is not found or the target node is not found
+   */
+  static getTargetNode(network: BasicReadonlyNetwork, linkId: LinkId): LGraphNode | undefined {
+    const id = network.links.get(linkId)?.target_id
+    return network.getNodeById(id) ?? undefined
+  }
+
+  /**
+   * Resolves a link ID to the link, node, and slot objects.
+   * @param linkId The {@link id} of the link to resolve
+   * @param network The link network to search
+   * @returns An object containing the input and output nodes, as well as the input and output slots.
+   * @remarks This method is heavier than others; it will always resolve all objects.
+   * Whilst the performance difference should in most cases be negligible,
+   * it is recommended to use simpler methods where appropriate.
+   */
+  static resolve(linkId: LinkId | null | undefined, network: BasicReadonlyNetwork): ResolvedConnection | undefined {
+    return network.getLink(linkId)?.resolve(network)
+  }
+
+  /**
+   * Resolves a list of link IDs to the link, node, and slot objects.
+   * Discards invalid link IDs.
+   * @param linkIds An iterable of link {@link id}s to resolve
+   * @param network The link network to search
+   * @returns An array of resolved connections.  If a link is not found, it is not included in the array.
+   * @see {@link LLink.resolve}
+   */
+  static resolveMany(linkIds: Iterable<LinkId>, network: BasicReadonlyNetwork): ResolvedConnection[] {
+    const resolved: ResolvedConnection[] = []
+    for (const id of linkIds) {
+      const r = network.getLink(id)?.resolve(network)
+      if (r) resolved.push(r)
+    }
+    return resolved
+  }
+
+  /**
+   * Resolves the primitive ID values stored in the link to the referenced objects.
+   * @param network The link network to search
+   * @returns An object containing the input and output nodes, as well as the input and output slots.
+   * @remarks This method is heavier than others; it will always resolve all objects.
+   * Whilst the performance difference should in most cases be negligible,
+   * it is recommended to use simpler methods where appropriate.
+   */
+  resolve(network: BasicReadonlyNetwork): ResolvedConnection {
+    const inputNode = this.target_id === -1 ? undefined : network.getNodeById(this.target_id) ?? undefined
+    const input = inputNode?.inputs[this.target_slot]
+    const subgraphInput = this.originIsIoNode ? network.inputNode?.slots[this.origin_slot] : undefined
+    if (subgraphInput) {
+      return { inputNode, input, subgraphInput, link: this }
+    }
+
+    const outputNode = this.origin_id === -1 ? undefined : network.getNodeById(this.origin_id) ?? undefined
+    const output = outputNode?.outputs[this.origin_slot]
+    const subgraphOutput = this.targetIsIoNode ? network.outputNode?.slots[this.target_slot] : undefined
+    if (subgraphOutput) {
+      return { outputNode, output, subgraphInput: undefined, subgraphOutput, link: this }
+    }
+
+    return { inputNode, outputNode, input, output, subgraphInput, subgraphOutput, link: this }
+  }
+
+  configure(o: LLink | SerialisedLLinkArray) {
+    if (Array.isArray(o)) {
+      this.id = o[0]
+      this.origin_id = o[1]
+      this.origin_slot = o[2]
+      this.target_id = o[3]
+      this.target_slot = o[4]
+      this.type = o[5]
+    } else {
+      this.id = o.id
+      this.type = o.type
+      this.origin_id = o.origin_id
+      this.origin_slot = o.origin_slot
+      this.target_id = o.target_id
+      this.target_slot = o.target_slot
+      this.parentId = o.parentId
+    }
+  }
+
+  /**
+   * Checks if the specified node id and output index are this link's origin (output side).
+   * @param nodeId ID of the node to check
+   * @param outputIndex The array index of the node output
+   * @returns `true` if the origin matches, otherwise `false`.
+   */
+  hasOrigin(nodeId: NodeId, outputIndex: number): boolean {
+    return this.origin_id === nodeId && this.origin_slot === outputIndex
+  }
+
+  /**
+   * Checks if the specified node id and input index are this link's target (input side).
+   * @param nodeId ID of the node to check
+   * @param inputIndex The array index of the node input
+   * @returns `true` if the target matches, otherwise `false`.
+   */
+  hasTarget(nodeId: NodeId, inputIndex: number): boolean {
+    return this.target_id === nodeId && this.target_slot === inputIndex
+  }
+
+  /**
+   * Creates a floating link from this link.
+   * @param slotType The side of the link that is still connected
+   * @param parentId The parent reroute ID of the link
+   * @returns A new LLink that is floating
+   */
+  toFloating(slotType: "input" | "output", parentId: RerouteId): LLink {
+    const exported = this.asSerialisable()
+    exported.id = -1
+    exported.parentId = parentId
+
+    if (slotType === "input") {
+      exported.origin_id = -1
+      exported.origin_slot = -1
+    } else {
+      exported.target_id = -1
+      exported.target_slot = -1
+    }
+
+    return LLink.create(exported)
+  }
+
+  /**
+   * Disconnects a link and removes it from the graph, cleaning up any reroutes that are no longer used
+   * @param network The container (LGraph) where reroutes should be updated
+   * @param keepReroutes If `undefined`, reroutes will be automatically removed if no links remain.
+   * If `input` or `output`, reroutes will not be automatically removed, and retain a connection to the input or output, respectively.
+   */
+  disconnect(network: LinkNetwork, keepReroutes?: "input" | "output"): void {
+    const reroutes = LLink.getReroutes(network, this)
+
+    const lastReroute = reroutes.at(-1)
+
+    // When floating from output, 1-to-1 ratio of floating link to final reroute (tree-like)
+    const outputFloating = keepReroutes === "output" &&
+      lastReroute?.linkIds.size === 1 &&
+      lastReroute.floatingLinkIds.size === 0
+
+    // When floating from inputs, the final (input side) reroute may have many floating links
+    if (outputFloating || (keepReroutes === "input" && lastReroute)) {
+      const newLink = LLink.create(this)
+      newLink.id = -1
+
+      if (keepReroutes === "input") {
+        newLink.origin_id = -1
+        newLink.origin_slot = -1
+
+        lastReroute.floating = { slotType: "input" }
+      } else {
+        newLink.target_id = -1
+        newLink.target_slot = -1
+
+        lastReroute.floating = { slotType: "output" }
+      }
+
+      network.addFloatingLink(newLink)
+    }
+
+    for (const reroute of reroutes) {
+      reroute.linkIds.delete(this.id)
+      if (!keepReroutes && !reroute.totalLinks) {
+        network.reroutes.delete(reroute.id)
+      }
+    }
+    network.links.delete(this.id)
+  }
+
+  /**
+   * @deprecated Prefer {@link LLink.asSerialisable} (returns an object, not an array)
+   * @returns An array representing this LLink
+   */
+  serialize(): SerialisedLLinkArray {
+    return [
+      this.id,
+      this.origin_id,
+      this.origin_slot,
+      this.target_id,
+      this.target_slot,
+      this.type,
+    ]
+  }
+
+  asSerialisable(): SerialisableLLink {
+    const copy: SerialisableLLink = {
+      id: this.id,
+      origin_id: this.origin_id,
+      origin_slot: this.origin_slot,
+      target_id: this.target_id,
+      target_slot: this.target_slot,
+      type: this.type,
+    }
+    if (this.parentId) copy.parentId = this.parentId
+    return copy
+  }
+}
diff --git a/src/lib/litegraph/src/LiteGraphGlobal.ts b/src/lib/litegraph/src/LiteGraphGlobal.ts
new file mode 100644
index 0000000000..1d6b6c1ba3
--- /dev/null
+++ b/src/lib/litegraph/src/LiteGraphGlobal.ts
@@ -0,0 +1,960 @@
+import type { Dictionary, ISlotType, Rect, WhenNullish } from "./interfaces"
+
+import { InputIndicators } from "./canvas/InputIndicators"
+import { ContextMenu } from "./ContextMenu"
+import { CurveEditor } from "./CurveEditor"
+import { DragAndScale } from "./DragAndScale"
+import { LabelPosition, SlotDirection, SlotShape, SlotType } from "./draw"
+import { Rectangle } from "./infrastructure/Rectangle"
+import { LGraph } from "./LGraph"
+import { LGraphCanvas } from "./LGraphCanvas"
+import { LGraphGroup } from "./LGraphGroup"
+import { LGraphNode } from "./LGraphNode"
+import { LLink } from "./LLink"
+import { distance, isInsideRectangle, overlapBounding } from "./measure"
+import { Reroute } from "./Reroute"
+import { SubgraphIONodeBase } from "./subgraph/SubgraphIONodeBase"
+import { SubgraphSlot } from "./subgraph/SubgraphSlotBase"
+import {
+  LGraphEventMode,
+  LinkDirection,
+  LinkRenderType,
+  NodeSlotType,
+  RenderShape,
+  TitleMode,
+} from "./types/globalEnums"
+import { createUuidv4 } from "./utils/uuid"
+
+/**
+ * Vue node dimensions configuration for the contract between LiteGraph and Vue components.
+ * These values ensure both systems can independently calculate node, slot, and widget positions
+ * to place them in identical locations.
+ *
+ * IMPORTANT: These values must match the actual rendered dimensions of Vue components
+ * for the positioning contract to work correctly.
+ */
+export const COMFY_VUE_NODE_DIMENSIONS = {
+  spacing: {
+    BETWEEN_SLOTS_AND_BODY: 8,
+    BETWEEN_WIDGETS: 8,
+  },
+  components: {
+    HEADER_HEIGHT: 34, // 18 header + 16 padding
+    SLOT_HEIGHT: 24,
+    STANDARD_WIDGET_HEIGHT: 30,
+  },
+} as const
+
+/**
+ * Type for component height keys
+ */
+export type ComponentHeightKey = keyof typeof COMFY_VUE_NODE_DIMENSIONS.components
+
+/**
+ * The Global Scope. It contains all the registered node classes.
+ */
+export class LiteGraphGlobal {
+  // Enums
+  SlotShape = SlotShape
+  SlotDirection = SlotDirection
+  SlotType = SlotType
+  LabelPosition = LabelPosition
+
+  /** Used in serialised graphs at one point. */
+  VERSION = 0.4 as const
+
+  CANVAS_GRID_SIZE = 10
+
+  NODE_TITLE_HEIGHT = 30
+  NODE_TITLE_TEXT_Y = 20
+  NODE_SLOT_HEIGHT = 20
+  NODE_WIDGET_HEIGHT = 20
+  NODE_WIDTH = 140
+  NODE_MIN_WIDTH = 50
+  NODE_COLLAPSED_RADIUS = 10
+  NODE_COLLAPSED_WIDTH = 80
+  NODE_TITLE_COLOR = "#999"
+  NODE_SELECTED_TITLE_COLOR = "#FFF"
+  NODE_TEXT_SIZE = 14
+  NODE_TEXT_COLOR = "#AAA"
+  NODE_TEXT_HIGHLIGHT_COLOR = "#EEE"
+  NODE_SUBTEXT_SIZE = 12
+  NODE_DEFAULT_COLOR = "#333"
+  NODE_DEFAULT_BGCOLOR = "#353535"
+  NODE_DEFAULT_BOXCOLOR = "#666"
+  NODE_DEFAULT_SHAPE = RenderShape.ROUND
+  NODE_BOX_OUTLINE_COLOR = "#FFF"
+  NODE_ERROR_COLOUR = "#E00"
+  NODE_FONT = "Arial"
+
+  DEFAULT_FONT = "Arial"
+  DEFAULT_SHADOW_COLOR = "rgba(0,0,0,0.5)"
+
+  DEFAULT_GROUP_FONT = 24
+  DEFAULT_GROUP_FONT_SIZE?: any
+  GROUP_FONT = "Arial"
+
+  WIDGET_BGCOLOR = "#222"
+  WIDGET_OUTLINE_COLOR = "#666"
+  WIDGET_ADVANCED_OUTLINE_COLOR = "rgba(56, 139, 253, 0.8)"
+  WIDGET_TEXT_COLOR = "#DDD"
+  WIDGET_SECONDARY_TEXT_COLOR = "#999"
+  WIDGET_DISABLED_TEXT_COLOR = "#666"
+
+  /**
+   * Vue node dimensions configuration for the contract between LiteGraph and Vue components.
+   * These values ensure both systems can independently calculate node, slot, and widget positions
+   * to place them in identical locations.
+   */
+  COMFY_VUE_NODE_DIMENSIONS = COMFY_VUE_NODE_DIMENSIONS
+
+  LINK_COLOR = "#9A9"
+  EVENT_LINK_COLOR = "#A86"
+  CONNECTING_LINK_COLOR = "#AFA"
+
+  /** avoid infinite loops */
+  MAX_NUMBER_OF_NODES = 10_000
+  /** default node position */
+  DEFAULT_POSITION = [100, 100]
+  /** ,"circle" */
+  VALID_SHAPES = ["default", "box", "round", "card"] satisfies ("default" | Lowercase<keyof typeof RenderShape>)[]
+  ROUND_RADIUS = 8
+
+  // shapes are used for nodes but also for slots
+  BOX_SHAPE = RenderShape.BOX
+  ROUND_SHAPE = RenderShape.ROUND
+  CIRCLE_SHAPE = RenderShape.CIRCLE
+  CARD_SHAPE = RenderShape.CARD
+  ARROW_SHAPE = RenderShape.ARROW
+  /** intended for slot arrays */
+  GRID_SHAPE = RenderShape.GRID
+
+  // enums
+  INPUT = NodeSlotType.INPUT
+  OUTPUT = NodeSlotType.OUTPUT
+
+  // TODO: -1 can lead to ambiguity in JS; these should be updated to a more explicit constant or Symbol.
+  /** for outputs */
+  EVENT = -1 as const
+  /** for inputs */
+  ACTION = -1 as const
+
+  /** helper, will add "On Request" and more in the future */
+  NODE_MODES = ["Always", "On Event", "Never", "On Trigger"]
+  /** use with node_box_coloured_by_mode */
+  NODE_MODES_COLORS = ["#666", "#422", "#333", "#224", "#626"]
+  ALWAYS = LGraphEventMode.ALWAYS
+  ON_EVENT = LGraphEventMode.ON_EVENT
+  NEVER = LGraphEventMode.NEVER
+  ON_TRIGGER = LGraphEventMode.ON_TRIGGER
+
+  UP = LinkDirection.UP
+  DOWN = LinkDirection.DOWN
+  LEFT = LinkDirection.LEFT
+  RIGHT = LinkDirection.RIGHT
+  CENTER = LinkDirection.CENTER
+
+  /** helper */
+  LINK_RENDER_MODES = ["Straight", "Linear", "Spline"]
+  HIDDEN_LINK = LinkRenderType.HIDDEN_LINK
+  STRAIGHT_LINK = LinkRenderType.STRAIGHT_LINK
+  LINEAR_LINK = LinkRenderType.LINEAR_LINK
+  SPLINE_LINK = LinkRenderType.SPLINE_LINK
+
+  NORMAL_TITLE = TitleMode.NORMAL_TITLE
+  NO_TITLE = TitleMode.NO_TITLE
+  TRANSPARENT_TITLE = TitleMode.TRANSPARENT_TITLE
+  AUTOHIDE_TITLE = TitleMode.AUTOHIDE_TITLE
+
+  /** arrange nodes vertically */
+  VERTICAL_LAYOUT = "vertical"
+
+  /** used to redirect calls */
+  proxy = null
+  node_images_path = ""
+
+  debug = false
+  catch_exceptions = true
+  throw_errors = true
+  /** if set to true some nodes like Formula would be allowed to evaluate code that comes from unsafe sources (like node configuration), which could lead to exploits */
+  allow_scripts = false
+  /** nodetypes by string */
+  registered_node_types: Record<string, typeof LGraphNode> = {}
+  /** @deprecated used for dropping files in the canvas.  It appears the code that enables this was removed, but the object remains and is references by built-in drag drop. */
+  node_types_by_file_extension: Record<string, { type: string }> = {}
+  /** node types by classname */
+  Nodes: Record<string, typeof LGraphNode> = {}
+  /** used to store vars between graphs */
+  Globals = {}
+
+  /** @deprecated Unused and will be deleted. */
+  searchbox_extras: Dictionary<unknown> = {}
+
+  /** [true!] this make the nodes box (top left circle) coloured when triggered (execute/action), visual feedback */
+  node_box_coloured_when_on = false
+  /** [true!] nodebox based on node mode, visual feedback */
+  node_box_coloured_by_mode = false
+
+  /** [false on mobile] better true if not touch device, TODO add an helper/listener to close if false */
+  dialog_close_on_mouse_leave = false
+  dialog_close_on_mouse_leave_delay = 500
+
+  /** [false!] prefer false if results too easy to break links - implement with ALT or TODO custom keys */
+  shift_click_do_break_link_from = false
+  /** [false!]prefer false, way too easy to break links */
+  click_do_break_link_to = false
+  /** [true!] who accidentally ctrl-alt-clicks on an in/output? nobody! that's who! */
+  ctrl_alt_click_do_break_link = true
+  /** [true!] snaps links when dragging connections over valid targets */
+  snaps_for_comfy = true
+  /** [true!] renders a partial border to highlight when a dragged link is snapped to a node */
+  snap_highlights_node = true
+
+  /**
+   * If `true`, items always snap to the grid - modifier keys are ignored.
+   * When {@link snapToGrid} is falsy, a value of `1` is used.
+   * Default: `false`
+   */
+  alwaysSnapToGrid?: boolean
+
+  /**
+   * When set to a positive number, when nodes are moved their positions will
+   * be rounded to the nearest multiple of this value.  Half up.
+   * Default: `undefined`
+   * @todo Not implemented - see {@link LiteGraph.CANVAS_GRID_SIZE}
+   */
+  snapToGrid?: number
+
+  /** [false on mobile] better true if not touch device, TODO add an helper/listener to close if false */
+  search_hide_on_mouse_leave = true
+  /**
+   * [true!] enable filtering slots type in the search widget
+   * !requires auto_load_slot_types or manual set registered_slot_[in/out]_types and slot_types_[in/out]
+   */
+  search_filter_enabled = false
+  /** [true!] opens the results list when opening the search widget */
+  search_show_all_on_open = true
+
+  /**
+   * [if want false, use true, run, get vars values to be statically set, than disable]
+   * nodes types and nodeclass association with node types need to be calculated,
+   * if dont want this, calculate once and set registered_slot_[in/out]_types and slot_types_[in/out]
+   */
+  auto_load_slot_types = false
+
+  // set these values if not using auto_load_slot_types
+  /** slot types for nodeclass */
+  registered_slot_in_types: Record<string, { nodes: string[] }> = {}
+  /** slot types for nodeclass */
+  registered_slot_out_types: Record<string, { nodes: string[] }> = {}
+  /** slot types IN */
+  slot_types_in: string[] = []
+  /** slot types OUT */
+  slot_types_out: string[] = []
+  /**
+   * specify for each IN slot type a(/many) default node(s), use single string, array, or object
+   * (with node, title, parameters, ..) like for search
+   */
+  slot_types_default_in: Record<string, string[]> = {}
+  /**
+   * specify for each OUT slot type a(/many) default node(s), use single string, array, or object
+   * (with node, title, parameters, ..) like for search
+   */
+  slot_types_default_out: Record<string, string[]> = {}
+
+  /** [true!] very handy, ALT click to clone and drag the new node */
+  alt_drag_do_clone_nodes = false
+
+  /**
+   * [true!] will create and connect event slots when using action/events connections,
+   * !WILL CHANGE node mode when using onTrigger (enable mode colors), onExecuted does not need this
+   */
+  do_add_triggers_slots = false
+
+  /** [false!] being events, it is strongly reccomended to use them sequentially, one by one */
+  allow_multi_output_for_events = true
+
+  /** [true!] allows to create and connect a ndoe clicking with the third button (wheel) */
+  middle_click_slot_add_default_node = false
+
+  /** [true!] dragging a link to empty space will open a menu, add from list, search or defaults */
+  release_link_on_empty_shows_menu = false
+
+  /** "mouse"|"pointer" use mouse for retrocompatibility issues? (none found @ now) */
+  pointerevents_method = "pointer"
+
+  /**
+   * [true!] allows ctrl + shift + v to paste nodes with the outputs of the unselected nodes connected
+   * with the inputs of the newly pasted nodes
+   */
+  ctrl_shift_v_paste_connect_unselected_outputs = true
+
+  // if true, all newly created nodes/links will use string UUIDs for their id fields instead of integers.
+  // use this if you must have node IDs that are unique across all graphs and subgraphs.
+  use_uuids = false
+
+  // Whether to highlight the bounding box of selected groups
+  highlight_selected_group = true
+
+  /** Whether to scale context with the graph when zooming in.  Zooming out never makes context menus smaller. */
+  context_menu_scaling = false
+
+  /**
+   * Debugging flag. Repeats deprecation warnings every time they are reported.
+   * May impact performance.
+   */
+  alwaysRepeatWarnings: boolean = false
+
+  /**
+   * Array of callbacks to execute when Litegraph first reports a deprecated API being used.
+   * @see alwaysRepeatWarnings By default, will not repeat identical messages.
+   */
+  onDeprecationWarning: ((message: string, source?: object) => void)[] = [console.warn]
+
+  /**
+   * If `true`, mouse wheel events will be interpreted as trackpad gestures.
+   * Tested on MacBook M4 Pro.
+   * @default false
+   * @see macGesturesRequireMac
+   */
+  macTrackpadGestures: boolean = false
+
+  /**
+   * If both this setting and {@link macTrackpadGestures} are `true`, trackpad gestures will
+   * only be enabled when the browser user agent includes "Mac".
+   * @default true
+   * @see macTrackpadGestures
+   */
+  macGesturesRequireMac: boolean = true
+
+  /**
+   * If `true`, widget labels and values will both be truncated (proportionally to size),
+   * until they fit within the widget.
+   *
+   * Otherwise, the label will be truncated completely before the value is truncated.
+   * @default false
+   */
+  truncateWidgetTextEvenly: boolean = false
+
+  /**
+   * If `true`, widget values will be completely truncated when shrinking a widget,
+   * before truncating widget labels.  {@link truncateWidgetTextEvenly} must be `false`.
+   * @default false
+   */
+  truncateWidgetValuesFirst: boolean = false
+
+  /**
+   * If `true`, the current viewport scale & offset of the first attached canvas will be included with the graph when exporting.
+   * @default true
+   */
+  saveViewportWithGraph: boolean = true
+
+  /**
+   * Enable Vue nodes mode for rendering and positioning.
+   * When true:
+   * - Nodes will calculate slot positions using Vue component dimensions
+   * - LiteGraph will skip rendering node bodies entirely
+   * - Vue components will handle all node rendering
+   * - LiteGraph continues to render connections, links, and graph background
+   * This should be set by the frontend when the Vue nodes feature is enabled.
+   * @default false
+   */
+  vueNodesMode: boolean = false
+
+  // TODO: Remove legacy accessors
+  LGraph = LGraph
+  LLink = LLink
+  LGraphNode = LGraphNode
+  LGraphGroup = LGraphGroup
+  DragAndScale = DragAndScale
+  LGraphCanvas = LGraphCanvas
+  ContextMenu = ContextMenu
+  CurveEditor = CurveEditor
+  Reroute = Reroute
+
+  constructor() {
+    Object.defineProperty(this, "Classes", { writable: false })
+  }
+
+  Classes = {
+    get SubgraphSlot() { return SubgraphSlot },
+    get SubgraphIONodeBase() { return SubgraphIONodeBase },
+
+    // Rich drawing
+    get Rectangle() { return Rectangle },
+
+    // Debug / helpers
+    get InputIndicators() { return InputIndicators },
+  }
+
+  onNodeTypeRegistered?(type: string, base_class: typeof LGraphNode): void
+  onNodeTypeReplaced?(type: string, base_class: typeof LGraphNode, prev: unknown): void
+
+  /**
+   * Register a node class so it can be listed when the user wants to create a new one
+   * @param type name of the node and path
+   * @param base_class class containing the structure of a node
+   */
+  registerNodeType(type: string, base_class: typeof LGraphNode): void {
+    if (!base_class.prototype)
+      throw "Cannot register a simple object, it must be a class with a prototype"
+    base_class.type = type
+
+    if (this.debug) console.log("Node registered:", type)
+
+    const classname = base_class.name
+
+    const pos = type.lastIndexOf("/")
+    base_class.category = type.substring(0, pos)
+
+    base_class.title ||= classname
+
+    // extend class
+    for (const i in LGraphNode.prototype) {
+      // @ts-expect-error #576 This functionality is deprecated and should be removed.
+      base_class.prototype[i] ||= LGraphNode.prototype[i]
+    }
+
+    const prev = this.registered_node_types[type]
+    if (prev && this.debug) {
+      console.log("replacing node type:", type)
+    }
+
+    this.registered_node_types[type] = base_class
+    if (base_class.constructor.name) this.Nodes[classname] = base_class
+
+    this.onNodeTypeRegistered?.(type, base_class)
+    if (prev) this.onNodeTypeReplaced?.(type, base_class, prev)
+
+    // warnings
+    if (base_class.prototype.onPropertyChange)
+      console.warn(`LiteGraph node class ${type} has onPropertyChange method, it must be called onPropertyChanged with d at the end`)
+
+    // TODO one would want to know input and ouput :: this would allow through registerNodeAndSlotType to get all the slots types
+    if (this.auto_load_slot_types) new base_class(base_class.title || "tmpnode")
+  }
+
+  /**
+   * removes a node type from the system
+   * @param type name of the node or the node constructor itself
+   */
+  unregisterNodeType(type: string | typeof LGraphNode): void {
+    const base_class = typeof type === "string"
+      ? this.registered_node_types[type]
+      : type
+    if (!base_class) throw `node type not found: ${String(type)}`
+
+    delete this.registered_node_types[String(base_class.type)]
+
+    const name = base_class.constructor.name
+    if (name) delete this.Nodes[name]
+  }
+
+  /**
+   * Save a slot type and his node
+   * @param type name of the node or the node constructor itself
+   * @param slot_type name of the slot type (variable type), eg. string, number, array, boolean, ..
+   */
+  registerNodeAndSlotType(
+    type: LGraphNode,
+    slot_type: ISlotType,
+    out?: boolean,
+  ): void {
+    out ||= false
+    // @ts-expect-error Confirm this function no longer supports string types - base_class should always be an instance not a constructor.
+    const base_class = typeof type === "string" && this.registered_node_types[type] !== "anonymous"
+      ? this.registered_node_types[type]
+      : type
+
+    // @ts-expect-error Confirm this function no longer supports string types - base_class should always be an instance not a constructor.
+    const class_type = base_class.constructor.type
+
+    let allTypes = []
+    if (typeof slot_type === "string") {
+      allTypes = slot_type.split(",")
+    } else if (slot_type == this.EVENT || slot_type == this.ACTION) {
+      allTypes = ["_event_"]
+    } else {
+      allTypes = ["*"]
+    }
+
+    for (let slotType of allTypes) {
+      if (slotType === "") slotType = "*"
+
+      const register = out
+        ? this.registered_slot_out_types
+        : this.registered_slot_in_types
+      register[slotType] ??= { nodes: [] }
+
+      const { nodes } = register[slotType]
+      if (!nodes.includes(class_type)) nodes.push(class_type)
+
+      // check if is a new type
+      const types = out
+        ? this.slot_types_out
+        : this.slot_types_in
+      const type = slotType.toLowerCase()
+
+      if (!types.includes(type)) {
+        types.push(type)
+        types.sort()
+      }
+    }
+  }
+
+  /**
+   * Removes all previously registered node's types
+   */
+  clearRegisteredTypes(): void {
+    this.registered_node_types = {}
+    this.node_types_by_file_extension = {}
+    this.Nodes = {}
+    this.searchbox_extras = {}
+  }
+
+  /**
+   * Create a node of a given type with a name. The node is not attached to any graph yet.
+   * @param type full name of the node class. p.e. "math/sin"
+   * @param title a name to distinguish from other nodes
+   * @param options to set options
+   */
+  createNode(
+    type: string,
+    title?: string,
+    options?: Dictionary<unknown>,
+  ): LGraphNode | null {
+    const base_class = this.registered_node_types[type]
+    if (!base_class) {
+      if (this.debug) console.log(`GraphNode type "${type}" not registered.`)
+      return null
+    }
+
+    title = title || base_class.title || type
+
+    let node = null
+
+    if (this.catch_exceptions) {
+      try {
+        node = new base_class(title)
+      } catch (error) {
+        console.error(error)
+        return null
+      }
+    } else {
+      node = new base_class(title)
+    }
+
+    node.type = type
+
+    if (!node.title && title) node.title = title
+    node.properties ||= {}
+    node.properties_info ||= []
+    node.flags ||= {}
+    // call onresize?
+    node.size ||= node.computeSize()
+    node.pos ||= [this.DEFAULT_POSITION[0], this.DEFAULT_POSITION[1]]
+    node.mode ||= LGraphEventMode.ALWAYS
+
+    // extra options
+    if (options) {
+      for (const i in options) {
+        // @ts-expect-error #577 Requires interface
+        node[i] = options[i]
+      }
+    }
+
+    // callback
+    node.onNodeCreated?.()
+
+    return node
+  }
+
+  /**
+   * Returns a registered node type with a given name
+   * @param type full name of the node class. p.e. "math/sin"
+   * @returns the node class
+   */
+  getNodeType(type: string): typeof LGraphNode {
+    return this.registered_node_types[type]
+  }
+
+  /**
+   * Returns a list of node types matching one category
+   * @param category category name
+   * @returns array with all the node classes
+   */
+  getNodeTypesInCategory(category: string, filter?: string) {
+    const r = []
+    for (const i in this.registered_node_types) {
+      const type = this.registered_node_types[i]
+      if (type.filter != filter) continue
+
+      if (category == "") {
+        if (type.category == null) r.push(type)
+      } else if (type.category == category) {
+        r.push(type)
+      }
+    }
+
+    return r
+  }
+
+  /**
+   * Returns a list with all the node type categories
+   * @param filter only nodes with ctor.filter equal can be shown
+   * @returns array with all the names of the categories
+   */
+  getNodeTypesCategories(filter?: string): string[] {
+    const categories: Dictionary<number> = { "": 1 }
+    for (const i in this.registered_node_types) {
+      const type = this.registered_node_types[i]
+      if (type.category && !type.skip_list) {
+        if (type.filter != filter) continue
+
+        categories[type.category] = 1
+      }
+    }
+    const result = []
+    for (const i in categories) {
+      result.push(i)
+    }
+    return result
+  }
+
+  // debug purposes: reloads all the js scripts that matches a wildcard
+  reloadNodes(folder_wildcard: string): void {
+    const tmp = document.getElementsByTagName("script")
+    // weird, this array changes by its own, so we use a copy
+    const script_files = []
+    for (const element of tmp) {
+      script_files.push(element)
+    }
+
+    const docHeadObj = document.getElementsByTagName("head")[0]
+    folder_wildcard = document.location.href + folder_wildcard
+
+    for (const script_file of script_files) {
+      const src = script_file.src
+      if (!src || src.substr(0, folder_wildcard.length) != folder_wildcard)
+        continue
+
+      try {
+        if (this.debug) console.log("Reloading:", src)
+        const dynamicScript = document.createElement("script")
+        dynamicScript.type = "text/javascript"
+        dynamicScript.src = src
+        docHeadObj.append(dynamicScript)
+        script_file.remove()
+      } catch (error) {
+        if (this.throw_errors) throw error
+        if (this.debug) console.log("Error while reloading", src)
+      }
+    }
+
+    if (this.debug) console.log("Nodes reloaded")
+  }
+
+  // separated just to improve if it doesn't work
+  /** @deprecated Prefer {@link structuredClone} */
+  cloneObject<T extends object | undefined | null>(obj: T, target?: T): WhenNullish<T, null> {
+    if (obj == null) return null as WhenNullish<T, null>
+
+    const r = JSON.parse(JSON.stringify(obj))
+    if (!target) return r
+
+    for (const i in r) {
+      // @ts-expect-error deprecated
+      target[i] = r[i]
+    }
+    return target
+  }
+
+  /** @see {@link createUuidv4} @inheritdoc */
+  uuidv4 = createUuidv4
+
+  /**
+   * Returns if the types of two slots are compatible (taking into account wildcards, etc)
+   * @param type_a output
+   * @param type_b input
+   * @returns true if they can be connected
+   */
+  isValidConnection(type_a: ISlotType, type_b: ISlotType): boolean {
+    if (type_a == "" || type_a === "*") type_a = 0
+    if (type_b == "" || type_b === "*") type_b = 0
+    // If generic in/output, matching types (valid for triggers), or event/action types
+    if (
+      !type_a ||
+      !type_b ||
+      type_a == type_b ||
+      (type_a == this.EVENT && type_b == this.ACTION)
+    ) {
+      return true
+    }
+
+    // Enforce string type to handle toLowerCase call (-1 number not ok)
+    type_a = String(type_a)
+    type_b = String(type_b)
+    type_a = type_a.toLowerCase()
+    type_b = type_b.toLowerCase()
+
+    // For nodes supporting multiple connection types
+    if (!type_a.includes(",") && !type_b.includes(","))
+      return type_a == type_b
+
+    // Check all permutations to see if one is valid
+    const supported_types_a = type_a.split(",")
+    const supported_types_b = type_b.split(",")
+    for (const a of supported_types_a) {
+      for (const b of supported_types_b) {
+        if (this.isValidConnection(a, b))
+          return true
+      }
+    }
+
+    return false
+  }
+
+  // used to create nodes from wrapping functions
+  getParameterNames(func: (...args: any) => any): string[] {
+    return String(func)
+      .replaceAll(/\/\/.*$/gm, "") // strip single-line comments
+      .replaceAll(/\s+/g, "") // strip white space
+      .replaceAll(/\/\*[^*/]*\*\//g, "") // strip multi-line comments  /**/
+      .split("){", 1)[0]
+      .replace(/^[^(]*\(/, "") // extract the parameters
+      .replaceAll(/=[^,]+/g, "") // strip any ES6 defaults
+      .split(",")
+      .filter(Boolean) // split & filter [""]
+  }
+
+  /* helper for interaction: pointer, touch, mouse Listeners
+    used by LGraphCanvas DragAndScale ContextMenu */
+  pointerListenerAdd(oDOM: Node, sEvIn: string, fCall: (e: Event) => boolean | void, capture = false): void {
+    if (!oDOM || !oDOM.addEventListener || !sEvIn || typeof fCall !== "function") return
+
+    let sMethod = this.pointerevents_method
+    let sEvent = sEvIn
+
+    // UNDER CONSTRUCTION
+    // convert pointerevents to touch event when not available
+    if (sMethod == "pointer" && !window.PointerEvent) {
+      console.warn("sMethod=='pointer' && !window.PointerEvent")
+      console.log(`Converting pointer[${sEvent}] : down move up cancel enter TO touchstart touchmove touchend, etc ..`)
+      switch (sEvent) {
+      case "down": {
+        sMethod = "touch"
+        sEvent = "start"
+        break
+      }
+      case "move": {
+        sMethod = "touch"
+        // sEvent = "move";
+        break
+      }
+      case "up": {
+        sMethod = "touch"
+        sEvent = "end"
+        break
+      }
+      case "cancel": {
+        sMethod = "touch"
+        // sEvent = "cancel";
+        break
+      }
+      case "enter": {
+        console.log("debug: Should I send a move event?") // ???
+        break
+      }
+      // case "over": case "out": not used at now
+      default: {
+        console.warn(`PointerEvent not available in this browser ? The event ${sEvent} would not be called`)
+      }
+      }
+    }
+
+    switch (sEvent) {
+    // @ts-expect-error
+    // both pointer and move events
+    case "down": case "up": case "move": case "over": case "out": case "enter":
+    {
+      oDOM.addEventListener(sMethod + sEvent, fCall, capture)
+    }
+    // @ts-expect-error
+    // only pointerevents
+    case "leave": case "cancel": case "gotpointercapture": case "lostpointercapture":
+    {
+      if (sMethod != "mouse") {
+        return oDOM.addEventListener(sMethod + sEvent, fCall, capture)
+      }
+    }
+    // not "pointer" || "mouse"
+    default:
+      return oDOM.addEventListener(sEvent, fCall, capture)
+    }
+  }
+
+  pointerListenerRemove(oDOM: Node, sEvent: string, fCall: (e: Event) => boolean | void, capture = false): void {
+    if (!oDOM || !oDOM.removeEventListener || !sEvent || typeof fCall !== "function") return
+
+    switch (sEvent) {
+    // @ts-expect-error
+    // both pointer and move events
+    case "down": case "up": case "move": case "over": case "out": case "enter":
+    {
+      if (this.pointerevents_method == "pointer" || this.pointerevents_method == "mouse") {
+        oDOM.removeEventListener(this.pointerevents_method + sEvent, fCall, capture)
+      }
+    }
+    // @ts-expect-error
+    // only pointerevents
+    case "leave": case "cancel": case "gotpointercapture": case "lostpointercapture":
+    {
+      if (this.pointerevents_method == "pointer") {
+        return oDOM.removeEventListener(this.pointerevents_method + sEvent, fCall, capture)
+      }
+    }
+    // not "pointer" || "mouse"
+    default:
+      return oDOM.removeEventListener(sEvent, fCall, capture)
+    }
+  }
+
+  getTime(): number {
+    return performance.now()
+  }
+
+  distance = distance
+
+  colorToString(c: [number, number, number, number]): string {
+    return (
+      `rgba(${
+        Math.round(c[0] * 255).toFixed()
+      },${
+        Math.round(c[1] * 255).toFixed()
+      },${
+        Math.round(c[2] * 255).toFixed()
+      },${
+        c.length == 4 ? c[3].toFixed(2) : "1.0"
+      })`
+    )
+  }
+
+  isInsideRectangle = isInsideRectangle
+
+  // [minx,miny,maxx,maxy]
+  growBounding(bounding: Rect, x: number, y: number): void {
+    if (x < bounding[0]) {
+      bounding[0] = x
+    } else if (x > bounding[2]) {
+      bounding[2] = x
+    }
+
+    if (y < bounding[1]) {
+      bounding[1] = y
+    } else if (y > bounding[3]) {
+      bounding[3] = y
+    }
+  }
+
+  overlapBounding = overlapBounding
+
+  // point inside bounding box
+  isInsideBounding(p: number[], bb: number[][]): boolean {
+    if (
+      p[0] < bb[0][0] ||
+      p[1] < bb[0][1] ||
+      p[0] > bb[1][0] ||
+      p[1] > bb[1][1]
+    ) {
+      return false
+    }
+    return true
+  }
+
+  // Convert a hex value to its decimal value - the inputted hex must be in the
+  // format of a hex triplet - the kind we use for HTML colours. The function
+  // will return an array with three values.
+  hex2num(hex: string): number[] {
+    if (hex.charAt(0) == "#") {
+      hex = hex.slice(1)
+    // Remove the '#' char - if there is one.
+    }
+    hex = hex.toUpperCase()
+    const hex_alphabets = "0123456789ABCDEF"
+    const value = new Array(3)
+    let k = 0
+    let int1, int2
+    for (let i = 0; i < 6; i += 2) {
+      int1 = hex_alphabets.indexOf(hex.charAt(i))
+      int2 = hex_alphabets.indexOf(hex.charAt(i + 1))
+      value[k] = int1 * 16 + int2
+      k++
+    }
+    return value
+  }
+
+  // Give a array with three values as the argument and the function will return
+  // the corresponding hex triplet.
+  num2hex(triplet: number[]): string {
+    const hex_alphabets = "0123456789ABCDEF"
+    let hex = "#"
+    let int1, int2
+    for (let i = 0; i < 3; i++) {
+      int1 = triplet[i] / 16
+      int2 = triplet[i] % 16
+
+      hex += hex_alphabets.charAt(int1) + hex_alphabets.charAt(int2)
+    }
+    return hex
+  }
+
+  closeAllContextMenus(ref_window: Window = window): void {
+    const elements = [...ref_window.document.querySelectorAll(".litecontextmenu")]
+    if (!elements.length) return
+
+    for (const element of elements) {
+      if ("close" in element && typeof element.close === "function") {
+        element.close()
+      } else {
+        element.remove()
+      }
+    }
+  }
+
+  extendClass(target: any, origin: any): void {
+    for (const i in origin) {
+      // copy class properties
+      if (target.hasOwnProperty(i)) continue
+      target[i] = origin[i]
+    }
+
+    if (origin.prototype) {
+      // copy prototype properties
+      for (const i in origin.prototype) {
+        // only enumerable
+        if (!origin.prototype.hasOwnProperty(i)) continue
+
+        // avoid overwriting existing ones
+        if (target.prototype.hasOwnProperty(i)) continue
+
+        // copy getters
+        if (origin.prototype.__lookupGetter__(i)) {
+          target.prototype.__defineGetter__(
+            i,
+            origin.prototype.__lookupGetter__(i),
+          )
+        } else {
+          target.prototype[i] = origin.prototype[i]
+        }
+
+        // and setters
+        if (origin.prototype.__lookupSetter__(i)) {
+          target.prototype.__defineSetter__(
+            i,
+            origin.prototype.__lookupSetter__(i),
+          )
+        }
+      }
+    }
+  }
+}
diff --git a/src/lib/litegraph/src/MapProxyHandler.ts b/src/lib/litegraph/src/MapProxyHandler.ts
new file mode 100644
index 0000000000..3935d8ce63
--- /dev/null
+++ b/src/lib/litegraph/src/MapProxyHandler.ts
@@ -0,0 +1,65 @@
+/**
+ * Temporary workaround until downstream consumers migrate to Map.
+ * A brittle wrapper with many flaws, but should be fine for simple maps using int indexes.
+ */
+export class MapProxyHandler<V> implements ProxyHandler<Map<number | string, V>> {
+  getOwnPropertyDescriptor(
+    target: Map<number | string, V>,
+    p: string | symbol,
+  ): PropertyDescriptor | undefined {
+    const value = this.get(target, p)
+    if (value) {
+      return {
+        configurable: true,
+        enumerable: true,
+        value,
+      }
+    }
+  }
+
+  has(target: Map<number | string, V>, p: string | symbol): boolean {
+    if (typeof p === "symbol") return false
+
+    const int = parseInt(p, 10)
+    return target.has(!isNaN(int) ? int : p)
+  }
+
+  ownKeys(target: Map<number | string, V>): ArrayLike<string | symbol> {
+    return [...target.keys()].map(String)
+  }
+
+  get(target: Map<number | string, V>, p: string | symbol): any {
+    // Workaround does not support link IDs of "values", "entries", "constructor", etc.
+    if (p in target) return Reflect.get(target, p, target)
+    if (typeof p === "symbol") return
+
+    const int = parseInt(p, 10)
+    return target.get(!isNaN(int) ? int : p)
+  }
+
+  set(target: Map<number | string, V>, p: string | symbol, newValue: any): boolean {
+    if (typeof p === "symbol") return false
+
+    const int = parseInt(p, 10)
+    target.set(!isNaN(int) ? int : p, newValue)
+    return true
+  }
+
+  deleteProperty(target: Map<number | string, V>, p: string | symbol): boolean {
+    return target.delete(p as number | string)
+  }
+
+  static bindAllMethods(map: Map<any, any>): void {
+    map.clear = map.clear.bind(map)
+    map.delete = map.delete.bind(map)
+    map.forEach = map.forEach.bind(map)
+    map.get = map.get.bind(map)
+    map.has = map.has.bind(map)
+    map.set = map.set.bind(map)
+    map.entries = map.entries.bind(map)
+    map.keys = map.keys.bind(map)
+    map.values = map.values.bind(map)
+
+    map[Symbol.iterator] = map[Symbol.iterator].bind(map)
+  }
+}
diff --git a/src/lib/litegraph/src/Reroute.ts b/src/lib/litegraph/src/Reroute.ts
new file mode 100644
index 0000000000..a6344056d0
--- /dev/null
+++ b/src/lib/litegraph/src/Reroute.ts
@@ -0,0 +1,778 @@
+import type {
+  CanvasColour,
+  INodeInputSlot,
+  INodeOutputSlot,
+  LinkNetwork,
+  LinkSegment,
+  Point,
+  Positionable,
+  ReadonlyLinkNetwork,
+  ReadOnlyRect,
+} from "./interfaces"
+import type { LGraphNode, NodeId } from "./LGraphNode"
+import type { Serialisable, SerialisableReroute } from "./types/serialisation"
+
+import { LGraphBadge } from "./LGraphBadge"
+import { type LinkId, LLink } from "./LLink"
+import { distance, isPointInRect } from "./measure"
+
+export type RerouteId = number
+
+/** The input or output slot that an incomplete reroute link is connected to. */
+export interface FloatingRerouteSlot {
+  /** Floating connection to an input or output */
+  slotType: "input" | "output"
+}
+
+/**
+ * Represents an additional point on the graph that a link path will travel through.  Used for visual organisation only.
+ *
+ * Requires no disposal or clean up.
+ * Stores only primitive values (IDs) to reference other items in its network,
+ * and a `WeakRef` to a {@link LinkNetwork} to resolve them.
+ */
+export class Reroute implements Positionable, LinkSegment, Serialisable<SerialisableReroute> {
+  static radius: number = 10
+  /** Maximum distance from reroutes to their bezier curve control points. */
+  static maxSplineOffset: number = 80
+  static drawIdBadge: boolean = false
+  static slotRadius: number = 5
+  /** Distance from reroute centre to slot centre. */
+  static get slotOffset(): number {
+    const gap = Reroute.slotRadius * 0.33
+    return Reroute.radius + gap + Reroute.slotRadius
+  }
+
+  #malloc = new Float32Array(8)
+
+  /** The network this reroute belongs to.  Contains all valid links and reroutes. */
+  #network: WeakRef<LinkNetwork>
+
+  #parentId?: RerouteId
+  public get parentId(): RerouteId | undefined {
+    return this.#parentId
+  }
+
+  /** Ignores attempts to create an infinite loop. @inheritdoc */
+  public set parentId(value) {
+    if (value === this.id) return
+    if (this.getReroutes() === null) return
+    this.#parentId = value
+  }
+
+  public get parent(): Reroute | undefined {
+    return this.#network.deref()?.getReroute(this.#parentId)
+  }
+
+  /** This property is only defined on the last reroute of a floating reroute chain (closest to input end). */
+  floating?: FloatingRerouteSlot
+
+  #pos = this.#malloc.subarray(0, 2)
+  /** @inheritdoc */
+  get pos(): Point {
+    return this.#pos
+  }
+
+  set pos(value: Point) {
+    if (!(value?.length >= 2))
+      throw new TypeError("Reroute.pos is an x,y point, and expects an indexable with at least two values.")
+    this.#pos[0] = value[0]
+    this.#pos[1] = value[1]
+  }
+
+  /** @inheritdoc */
+  get boundingRect(): ReadOnlyRect {
+    const { radius } = Reroute
+    const [x, y] = this.#pos
+    return [x - radius, y - radius, 2 * radius, 2 * radius]
+  }
+
+  /**
+   * Slightly over-sized rectangle, guaranteed to contain the entire surface area for hover detection.
+   * Eliminates most hover positions using an extremely cheap check.
+   */
+  get #hoverArea(): ReadOnlyRect {
+    const xOffset = 2 * Reroute.slotOffset
+    const yOffset = 2 * Math.max(Reroute.radius, Reroute.slotRadius)
+
+    const [x, y] = this.#pos
+    return [x - xOffset, y - yOffset, 2 * xOffset, 2 * yOffset]
+  }
+
+  /** The total number of links & floating links using this reroute */
+  get totalLinks(): number {
+    return this.linkIds.size + this.floatingLinkIds.size
+  }
+
+  /** @inheritdoc */
+  selected?: boolean
+
+  /** The ID ({@link LLink.id}) of every link using this reroute */
+  linkIds: Set<LinkId>
+
+  /** The ID ({@link LLink.id}) of every floating link using this reroute */
+  floatingLinkIds: Set<LinkId>
+
+  /** Cached cos */
+  cos: number = 0
+  sin: number = 0
+
+  /** Bezier curve control point for the "target" (input) side of the link */
+  controlPoint: Point = this.#malloc.subarray(4, 6)
+
+  /** @inheritdoc */
+  path?: Path2D
+  /** @inheritdoc */
+  _centreAngle?: number
+  /** @inheritdoc */
+  _pos: Float32Array = this.#malloc.subarray(6, 8)
+
+  /** @inheritdoc */
+  _dragging?: boolean
+
+  /** Colour of the first link that rendered this reroute */
+  _colour?: CanvasColour
+
+  /** Colour of the first link that rendered this reroute */
+  get colour(): CanvasColour {
+    return this._colour ?? "#18184d"
+  }
+
+  /**
+   * Used to ensure reroute angles are only executed once per frame.
+   * @todo Calculate on change instead.
+   */
+  #lastRenderTime: number = -Infinity
+
+  #inputSlot = new RerouteSlot(this, true)
+  #outputSlot = new RerouteSlot(this, false)
+
+  get isSlotHovered(): boolean {
+    return this.isInputHovered || this.isOutputHovered
+  }
+
+  get isInputHovered(): boolean {
+    return this.#inputSlot.hovering
+  }
+
+  get isOutputHovered(): boolean {
+    return this.#outputSlot.hovering
+  }
+
+  get firstLink(): LLink | undefined {
+    const linkId = this.linkIds.values().next().value
+    return linkId === undefined
+      ? undefined
+      : this.#network
+        .deref()
+        ?.links
+        .get(linkId)
+  }
+
+  get firstFloatingLink(): LLink | undefined {
+    const linkId = this.floatingLinkIds.values().next().value
+    return linkId === undefined
+      ? undefined
+      : this.#network
+        .deref()
+        ?.floatingLinks
+        .get(linkId)
+  }
+
+  /** @inheritdoc */
+  get origin_id(): NodeId | undefined {
+    return this.firstLink?.origin_id
+  }
+
+  /** @inheritdoc */
+  get origin_slot(): number | undefined {
+    return this.firstLink?.origin_slot
+  }
+
+  /**
+   * Initialises a new link reroute object.
+   * @param id Unique identifier for this reroute
+   * @param network The network of links this reroute belongs to.  Internally converted to a WeakRef.
+   * @param pos Position in graph coordinates
+   * @param linkIds Link IDs ({@link LLink.id}) of all links that use this reroute
+   */
+  constructor(
+    public readonly id: RerouteId,
+    network: LinkNetwork,
+    pos?: Point,
+    parentId?: RerouteId,
+    linkIds?: Iterable<LinkId>,
+    floatingLinkIds?: Iterable<LinkId>,
+  ) {
+    this.#network = new WeakRef(network)
+    this.parentId = parentId
+    if (pos) this.pos = pos
+    this.linkIds = new Set(linkIds)
+    this.floatingLinkIds = new Set(floatingLinkIds)
+  }
+
+  /**
+   * Applies a new parentId to the reroute, and optinoally a new position and linkId.
+   * Primarily used for deserialisation.
+   * @param parentId The ID of the reroute prior to this reroute, or
+   * `undefined` if it is the first reroute connected to a nodes output
+   * @param pos The position of this reroute
+   * @param linkIds All link IDs that pass through this reroute
+   */
+  update(
+    parentId: RerouteId | undefined,
+    pos?: Point,
+    linkIds?: Iterable<LinkId>,
+    floating?: FloatingRerouteSlot,
+  ): void {
+    this.parentId = parentId
+    if (pos) this.pos = pos
+    if (linkIds) this.linkIds = new Set(linkIds)
+    this.floating = floating
+  }
+
+  /**
+   * Validates the linkIds this reroute has.  Removes broken links.
+   * @param links Collection of valid links
+   * @returns true if any links remain after validation
+   */
+  validateLinks(links: ReadonlyMap<LinkId, LLink>, floatingLinks: ReadonlyMap<LinkId, LLink>): boolean {
+    const { linkIds, floatingLinkIds } = this
+    for (const linkId of linkIds) {
+      if (!links.has(linkId)) linkIds.delete(linkId)
+    }
+    for (const linkId of floatingLinkIds) {
+      if (!floatingLinks.has(linkId)) floatingLinkIds.delete(linkId)
+    }
+    return linkIds.size > 0 || floatingLinkIds.size > 0
+  }
+
+  /**
+   * Retrieves an ordered array of all reroutes from the node output.
+   * @param visited Internal.  A set of reroutes that this function
+   * has already visited whilst recursing up the chain.
+   * @returns An ordered array of all reroutes from the node output to this reroute, inclusive.
+   * `null` if an infinite loop is detected.
+   * `undefined` if the reroute chain or {@link LinkNetwork} are invalid.
+   */
+  getReroutes(visited = new Set<Reroute>()): Reroute[] | null {
+    // No parentId - last in the chain
+    if (this.#parentId === undefined) return [this]
+    // Invalid chain - looped
+    if (visited.has(this)) return null
+    visited.add(this)
+
+    const parent = this.#network.deref()?.reroutes.get(this.#parentId)
+    // Invalid parent (or network) - drop silently to recover
+    if (!parent) {
+      this.#parentId = undefined
+      return [this]
+    }
+
+    const reroutes = parent.getReroutes(visited)
+    reroutes?.push(this)
+    return reroutes
+  }
+
+  /**
+   * Internal.  Called by {@link LLink.findNextReroute}.  Not intended for use by itself.
+   * @param withParentId The rerouteId to look for
+   * @param visited A set of reroutes that have already been visited
+   * @returns The reroute that was found, `undefined` if no reroute was found, or `null` if an infinite loop was detected.
+   */
+  findNextReroute(
+    withParentId: RerouteId,
+    visited = new Set<Reroute>(),
+  ): Reroute | null | undefined {
+    if (this.#parentId === withParentId) return this
+    if (visited.has(this)) return null
+    visited.add(this)
+    if (this.#parentId === undefined) return
+
+    return this.#network
+      .deref()
+      ?.reroutes
+      .get(this.#parentId)
+      ?.findNextReroute(withParentId, visited)
+  }
+
+  /**
+   * Finds the output node and output slot of the first link passing through this reroute.
+   * @returns The output node and output slot of the first link passing through this reroute, or `undefined` if no link is found.
+   */
+  findSourceOutput(): { node: LGraphNode, output: INodeOutputSlot } | undefined {
+    const link = this.firstLink ?? this.firstFloatingLink
+    if (!link) return
+
+    const node = this.#network.deref()?.getNodeById(link.origin_id)
+    if (!node) return
+
+    return {
+      node,
+      output: node.outputs[link.origin_slot],
+    }
+  }
+
+  /**
+   * Finds the inputs and nodes of (floating) links passing through this reroute.
+   * @returns An array of objects containing the node and input slot of each link passing through this reroute.
+   */
+  findTargetInputs(): { node: LGraphNode, input: INodeInputSlot, link: LLink }[] | undefined {
+    const network = this.#network.deref()
+    if (!network) return
+
+    const results: {
+      node: LGraphNode
+      input: INodeInputSlot
+      link: LLink
+    }[] = []
+
+    addAllResults(network, this.linkIds, network.links)
+    addAllResults(network, this.floatingLinkIds, network.floatingLinks)
+
+    return results
+
+    function addAllResults(
+      network: ReadonlyLinkNetwork,
+      linkIds: Iterable<LinkId>,
+      links: ReadonlyMap<LinkId, LLink>,
+    ) {
+      for (const linkId of linkIds) {
+        const link = links.get(linkId)
+        if (!link) continue
+
+        const node = network.getNodeById(link.target_id)
+        const input = node?.inputs[link.target_slot]
+        if (!input) continue
+
+        results.push({ node, input, link })
+      }
+    }
+  }
+
+  /**
+   * Retrieves all floating links passing through this reroute.
+   * @param from Filters the links by the currently connected link side.
+   * @returns An array of floating links
+   */
+  getFloatingLinks(from: "input" | "output"): LLink[] | undefined {
+    const floatingLinks = this.#network.deref()?.floatingLinks
+    if (!floatingLinks) return
+
+    const idProp = from === "input" ? "origin_id" : "target_id"
+    const out: LLink[] = []
+
+    for (const linkId of this.floatingLinkIds) {
+      const link = floatingLinks.get(linkId)
+      if (link?.[idProp] === -1) out.push(link)
+    }
+    return out
+  }
+
+  /**
+   * Changes the origin node/output of all floating links that pass through this reroute.
+   * @param node The new origin node
+   * @param output The new origin output slot
+   * @param index The slot index of {@link output}
+   */
+  setFloatingLinkOrigin(node: LGraphNode, output: INodeOutputSlot, index: number) {
+    const network = this.#network.deref()
+    const floatingOutLinks = this.getFloatingLinks("output")
+    if (!floatingOutLinks) throw new Error("[setFloatingLinkOrigin]: Invalid network.")
+    if (!floatingOutLinks.length) return
+
+    output._floatingLinks ??= new Set()
+
+    for (const link of floatingOutLinks) {
+      // Update cached floating links
+      output._floatingLinks.add(link)
+
+      network?.getNodeById(link.origin_id)
+        ?.outputs[link.origin_slot]
+        ?._floatingLinks
+        ?.delete(link)
+
+      // Update the floating link
+      link.origin_id = node.id
+      link.origin_slot = index
+    }
+  }
+
+  /** @inheritdoc */
+  move(deltaX: number, deltaY: number) {
+    this.#pos[0] += deltaX
+    this.#pos[1] += deltaY
+  }
+
+  /** @inheritdoc */
+  snapToGrid(snapTo: number): boolean {
+    if (!snapTo) return false
+
+    const { pos } = this
+    pos[0] = snapTo * Math.round(pos[0] / snapTo)
+    pos[1] = snapTo * Math.round(pos[1] / snapTo)
+    return true
+  }
+
+  removeAllFloatingLinks() {
+    for (const linkId of this.floatingLinkIds) {
+      this.removeFloatingLink(linkId)
+    }
+  }
+
+  removeFloatingLink(linkId: LinkId) {
+    const network = this.#network.deref()
+    if (!network) return
+
+    const floatingLink = network.floatingLinks.get(linkId)
+    if (!floatingLink) {
+      console.warn(`[Reroute.removeFloatingLink] Floating link not found: ${linkId}, ignoring and discarding ID.`)
+      this.floatingLinkIds.delete(linkId)
+      return
+    }
+
+    network.removeFloatingLink(floatingLink)
+  }
+
+  /**
+   * Removes a link or floating link from this reroute, by matching link object instance equality.
+   * @param link The link to remove.
+   * @remarks Does not remove the link from the network.
+   */
+  removeLink(link: LLink) {
+    const network = this.#network.deref()
+    if (!network) return
+
+    const floatingLink = network.floatingLinks.get(link.id)
+    if (link === floatingLink) {
+      this.floatingLinkIds.delete(link.id)
+    } else {
+      this.linkIds.delete(link.id)
+    }
+  }
+
+  remove() {
+    const network = this.#network.deref()
+    if (!network) return
+
+    network.removeReroute(this.id)
+  }
+
+  calculateAngle(lastRenderTime: number, network: ReadonlyLinkNetwork, linkStart: Point): void {
+    // Ensure we run once per render
+    if (!(lastRenderTime > this.#lastRenderTime)) return
+    this.#lastRenderTime = lastRenderTime
+
+    const { id, pos: thisPos } = this
+
+    // Add all link angles
+    const angles: number[] = []
+    let sum = 0
+    calculateAngles(this.linkIds, network.links)
+    calculateAngles(this.floatingLinkIds, network.floatingLinks)
+
+    // Invalid - reset
+    if (!angles.length) {
+      this.cos = 0
+      this.sin = 0
+      this.controlPoint[0] = 0
+      this.controlPoint[1] = 0
+      return
+    }
+
+    sum /= angles.length
+
+    const originToReroute = Math.atan2(
+      this.#pos[1] - linkStart[1],
+      this.#pos[0] - linkStart[0],
+    )
+    let diff = (originToReroute - sum) * 0.5
+    if (Math.abs(diff) > Math.PI * 0.5) diff += Math.PI
+    const dist = Math.min(Reroute.maxSplineOffset, distance(linkStart, this.#pos) * 0.25)
+
+    // Store results
+    const originDiff = originToReroute - diff
+    const cos = Math.cos(originDiff)
+    const sin = Math.sin(originDiff)
+
+    this.cos = cos
+    this.sin = sin
+    this.controlPoint[0] = dist * -cos
+    this.controlPoint[1] = dist * -sin
+
+    /**
+     * Calculates the direction of each link and adds it to the array.
+     * @param linkIds The IDs of the links to calculate
+     * @param links The link container from the link network.
+     */
+    function calculateAngles(linkIds: Iterable<LinkId>, links: ReadonlyMap<LinkId, LLink>) {
+      for (const linkId of linkIds) {
+        const link = links.get(linkId)
+        const pos = getNextPos(network, link, id)
+        if (!pos) continue
+
+        const angle = getDirection(thisPos, pos)
+        angles.push(angle)
+        sum += angle
+      }
+    }
+  }
+
+  /**
+   * Renders the reroute on the canvas.
+   * @param ctx Canvas context to draw on
+   * @param backgroundPattern The canvas background pattern; used to make floating reroutes appear washed out.
+   * @remarks Leaves {@link ctx}.fillStyle, strokeStyle, and lineWidth dirty (perf.).
+   */
+  draw(ctx: CanvasRenderingContext2D, backgroundPattern?: CanvasPattern): void {
+    const { globalAlpha } = ctx
+    const { pos } = this
+
+    ctx.beginPath()
+    ctx.arc(pos[0], pos[1], Reroute.radius, 0, 2 * Math.PI)
+
+    if (this.linkIds.size === 0) {
+      ctx.fillStyle = backgroundPattern ?? "#797979"
+      ctx.fill()
+      ctx.globalAlpha = globalAlpha * 0.33
+    }
+
+    ctx.fillStyle = this.colour
+    ctx.lineWidth = Reroute.radius * 0.1
+    ctx.strokeStyle = "rgb(0,0,0,0.5)"
+    ctx.fill()
+    ctx.stroke()
+
+    ctx.fillStyle = "#ffffff55"
+    ctx.strokeStyle = "rgb(0,0,0,0.3)"
+    ctx.beginPath()
+    ctx.arc(pos[0], pos[1], Reroute.radius * 0.8, 0, 2 * Math.PI)
+    ctx.fill()
+    ctx.stroke()
+
+    if (this.selected) {
+      ctx.strokeStyle = "#fff"
+      ctx.beginPath()
+      ctx.arc(pos[0], pos[1], Reroute.radius * 1.2, 0, 2 * Math.PI)
+      ctx.stroke()
+    }
+
+    if (Reroute.drawIdBadge) {
+      const idBadge = new LGraphBadge({ text: this.id.toString() })
+      const x = pos[0] - idBadge.getWidth(ctx) * 0.5
+      const y = pos[1] - idBadge.height - Reroute.radius - 2
+      idBadge.draw(ctx, x, y)
+    }
+
+    ctx.globalAlpha = globalAlpha
+  }
+
+  /**
+   * Draws the input and output slots on the canvas, if the slots are visible.
+   * @param ctx The canvas context to draw on.
+   */
+  drawSlots(ctx: CanvasRenderingContext2D): void {
+    this.#inputSlot.draw(ctx)
+    this.#outputSlot.draw(ctx)
+  }
+
+  drawHighlight(ctx: CanvasRenderingContext2D, colour: CanvasColour): void {
+    const { pos } = this
+
+    const { strokeStyle, lineWidth } = ctx
+    ctx.strokeStyle = colour
+    ctx.lineWidth = 1
+
+    ctx.beginPath()
+    ctx.arc(pos[0], pos[1], Reroute.radius * 1.5, 0, 2 * Math.PI)
+    ctx.stroke()
+
+    ctx.strokeStyle = strokeStyle
+    ctx.lineWidth = lineWidth
+  }
+
+  /**
+   * Updates visibility of the input and output slots, based on the position of the pointer.
+   * @param pos The position of the pointer.
+   * @returns `true` if any changes require a redraw.
+   */
+  updateVisibility(pos: Point): boolean {
+    const input = this.#inputSlot
+    const output = this.#outputSlot
+    input.dirty = false
+    output.dirty = false
+
+    const { firstFloatingLink } = this
+    const hasLink = !!this.firstLink
+
+    const showInput = hasLink || firstFloatingLink?.isFloatingOutput
+    const showOutput = hasLink || firstFloatingLink?.isFloatingInput
+    const showEither = showInput || showOutput
+
+    // Check if even in the vicinity
+    if (showEither && isPointInRect(pos, this.#hoverArea)) {
+      const outlineOnly = this.#contains(pos)
+
+      if (showInput) input.update(pos, outlineOnly)
+      if (showOutput) output.update(pos, outlineOnly)
+    } else {
+      this.hideSlots()
+    }
+
+    return input.dirty || output.dirty
+  }
+
+  /** Prevents rendering of the input and output slots. */
+  hideSlots() {
+    this.#inputSlot.hide()
+    this.#outputSlot.hide()
+  }
+
+  /**
+   * Precisely determines if {@link pos} is inside this reroute.
+   * @param pos The position to check (canvas space)
+   * @returns `true` if {@link pos} is within the reroute's radius.
+   */
+  containsPoint(pos: Point): boolean {
+    return isPointInRect(pos, this.#hoverArea) && this.#contains(pos)
+  }
+
+  #contains(pos: Point): boolean {
+    return distance(this.pos, pos) <= Reroute.radius
+  }
+
+  /** @inheritdoc */
+  asSerialisable(): SerialisableReroute {
+    const { id, parentId, pos, linkIds } = this
+    return {
+      id,
+      parentId,
+      pos: [pos[0], pos[1]],
+      linkIds: [...linkIds],
+      floating: this.floating ? { slotType: this.floating.slotType } : undefined,
+    }
+  }
+}
+
+/**
+ * Represents a slot on a reroute.
+ * @private Designed for internal use within this module.
+ */
+class RerouteSlot {
+  /** The reroute that the slot belongs to. */
+  readonly #reroute: Reroute
+
+  readonly #offsetMultiplier: 1 | -1
+  /** Centre point of this slot. */
+  get pos(): Point {
+    const [x, y] = this.#reroute.pos
+    return [x + Reroute.slotOffset * this.#offsetMultiplier, y]
+  }
+
+  /** Whether any changes require a redraw. */
+  dirty: boolean = false
+
+  #hovering = false
+  /** Whether the pointer is hovering over the slot itself. */
+  get hovering() {
+    return this.#hovering
+  }
+
+  set hovering(value) {
+    if (!Object.is(this.#hovering, value)) {
+      this.#hovering = value
+      this.dirty = true
+    }
+  }
+
+  #showOutline = false
+  /** Whether the slot outline / faint background is visible. */
+  get showOutline() {
+    return this.#showOutline
+  }
+
+  set showOutline(value) {
+    if (!Object.is(this.#showOutline, value)) {
+      this.#showOutline = value
+      this.dirty = true
+    }
+  }
+
+  constructor(reroute: Reroute, isInput: boolean) {
+    this.#reroute = reroute
+    this.#offsetMultiplier = isInput ? -1 : 1
+  }
+
+  /**
+   * Updates the slot's visibility based on the position of the pointer.
+   * @param pos The position of the pointer.
+   * @param outlineOnly If `true`, slot will display with the faded outline only ({@link showOutline}).
+   */
+  update(pos: Point, outlineOnly?: boolean) {
+    if (outlineOnly) {
+      this.hovering = false
+      this.showOutline = true
+    } else {
+      const dist = distance(this.pos, pos)
+      this.hovering = dist <= 2 * Reroute.slotRadius
+      this.showOutline = dist <= 5 * Reroute.slotRadius
+    }
+  }
+
+  /** Hides the slot. */
+  hide() {
+    this.hovering = false
+    this.showOutline = false
+  }
+
+  /**
+   * Draws the slot on the canvas.
+   * @param ctx The canvas context to draw on.
+   */
+  draw(ctx: CanvasRenderingContext2D): void {
+    const { fillStyle, strokeStyle, lineWidth } = ctx
+    const { showOutline, hovering, pos: [x, y] } = this
+    if (!showOutline) return
+
+    try {
+      ctx.fillStyle = hovering
+        ? this.#reroute.colour
+        : "rgba(127,127,127,0.3)"
+      ctx.strokeStyle = "rgb(0,0,0,0.5)"
+      ctx.lineWidth = 1
+
+      ctx.beginPath()
+      ctx.arc(x, y, Reroute.slotRadius, 0, 2 * Math.PI)
+      ctx.fill()
+      ctx.stroke()
+    } finally {
+      ctx.fillStyle = fillStyle
+      ctx.strokeStyle = strokeStyle
+      ctx.lineWidth = lineWidth
+    }
+  }
+}
+
+/**
+ * Retrieves the position of the next reroute in the chain, or the destination input slot on this link.
+ * @param network The network of links
+ * @param link The link representing the current reroute chain
+ * @param id The ID of "this" reroute
+ * @returns The position of the next reroute or the input slot target, otherwise `undefined`.
+ */
+function getNextPos(network: ReadonlyLinkNetwork, link: LLink | undefined, id: RerouteId) {
+  if (!link) return
+
+  const linkPos = LLink.findNextReroute(network, link, id)?.pos
+  if (linkPos) return linkPos
+
+  // Floating link with no input to find
+  if (link.target_id === -1 || link.target_slot === -1) return
+
+  return network.getNodeById(link.target_id)?.getInputPos(link.target_slot)
+}
+
+/** Returns the direction from one point to another in radians. */
+function getDirection(fromPos: Point, toPos: Point) {
+  return Math.atan2(toPos[1] - fromPos[1], toPos[0] - fromPos[0])
+}
diff --git a/src/lib/litegraph/src/canvas/FloatingRenderLink.ts b/src/lib/litegraph/src/canvas/FloatingRenderLink.ts
new file mode 100644
index 0000000000..dfcd9fdea8
--- /dev/null
+++ b/src/lib/litegraph/src/canvas/FloatingRenderLink.ts
@@ -0,0 +1,194 @@
+import type { RenderLink } from "./RenderLink"
+import type { CustomEventTarget } from '../infrastructure/CustomEventTarget'
+import type { LinkConnectorEventMap } from '../infrastructure/LinkConnectorEventMap'
+import type { INodeOutputSlot, LinkNetwork } from '../interfaces'
+import type { INodeInputSlot } from '../interfaces'
+import type { Point } from '../interfaces'
+import type { LGraphNode, NodeId } from '../LGraphNode'
+import type { LLink } from '../LLink'
+import type { Reroute } from '../Reroute'
+import type { SubgraphInput } from '../subgraph/SubgraphInput'
+import type { SubgraphOutput } from '../subgraph/SubgraphOutput'
+
+import { SUBGRAPH_INPUT_ID, SUBGRAPH_OUTPUT_ID } from '../constants'
+import { LinkDirection } from '../types/globalEnums'
+
+/**
+ * Represents a floating link that is currently being dragged from one slot to another.
+ *
+ * This is a heavier, but short-lived convenience data structure. All refs to FloatingRenderLinks should be discarded on drop.
+ * @remarks
+ * At time of writing, Litegraph is using several different styles and methods to handle link dragging.
+ *
+ * Once the library has undergone more substantial changes to the way links are managed,
+ * many properties of this class will be superfluous and removable.
+ */
+export class FloatingRenderLink implements RenderLink {
+  readonly node: LGraphNode
+  readonly fromSlot: INodeOutputSlot | INodeInputSlot
+  readonly fromPos: Point
+  readonly fromDirection: LinkDirection
+  readonly fromSlotIndex: number
+
+  readonly outputNodeId: NodeId = -1
+  readonly outputNode?: LGraphNode
+  readonly outputSlot?: INodeOutputSlot
+  readonly outputIndex: number = -1
+  readonly outputPos?: Point
+
+  readonly inputNodeId: NodeId = -1
+  readonly inputNode?: LGraphNode
+  readonly inputSlot?: INodeInputSlot
+  readonly inputIndex: number = -1
+  readonly inputPos?: Point
+
+  constructor(
+    readonly network: LinkNetwork,
+    readonly link: LLink,
+    readonly toType: "input" | "output",
+    readonly fromReroute: Reroute,
+    readonly dragDirection: LinkDirection = LinkDirection.CENTER,
+  ) {
+    const {
+      origin_id: outputNodeId,
+      target_id: inputNodeId,
+      origin_slot: outputIndex,
+      target_slot: inputIndex,
+    } = link
+
+    if (outputNodeId !== -1) {
+      // Output connected
+      const outputNode = network.getNodeById(outputNodeId) ?? undefined
+      if (!outputNode) throw new Error(`Creating DraggingRenderLink for link [${link.id}] failed: Output node [${outputNodeId}] not found.`)
+
+      const outputSlot = outputNode?.outputs.at(outputIndex)
+      if (!outputSlot) throw new Error(`Creating DraggingRenderLink for link [${link.id}] failed: Output slot [${outputIndex}] not found.`)
+
+      this.outputNodeId = outputNodeId
+      this.outputNode = outputNode
+      this.outputSlot = outputSlot
+      this.outputIndex = outputIndex
+      this.outputPos = outputNode.getOutputPos(outputIndex)
+
+      // RenderLink props
+      this.node = outputNode
+      this.fromSlot = outputSlot
+      this.fromPos = fromReroute?.pos ?? this.outputPos
+      this.fromDirection = LinkDirection.LEFT
+      this.dragDirection = LinkDirection.RIGHT
+      this.fromSlotIndex = outputIndex
+    } else {
+      // Input connected
+      const inputNode = network.getNodeById(inputNodeId) ?? undefined
+      if (!inputNode) throw new Error(`Creating DraggingRenderLink for link [${link.id}] failed: Input node [${inputNodeId}] not found.`)
+
+      const inputSlot = inputNode?.inputs.at(inputIndex)
+      if (!inputSlot) throw new Error(`Creating DraggingRenderLink for link [${link.id}] failed: Input slot [${inputIndex}] not found.`)
+
+      this.inputNodeId = inputNodeId
+      this.inputNode = inputNode
+      this.inputSlot = inputSlot
+      this.inputIndex = inputIndex
+      this.inputPos = inputNode.getInputPos(inputIndex)
+
+      // RenderLink props
+      this.node = inputNode
+      this.fromSlot = inputSlot
+      this.fromDirection = LinkDirection.RIGHT
+      this.fromSlotIndex = inputIndex
+    }
+    this.fromPos = fromReroute.pos
+  }
+
+  canConnectToInput(): boolean {
+    return this.toType === "input"
+  }
+
+  canConnectToOutput(): boolean {
+    return this.toType === "output"
+  }
+
+  canConnectToReroute(reroute: Reroute): boolean {
+    if (this.toType === "input") {
+      if (reroute.origin_id === this.inputNode?.id) return false
+    } else {
+      if (reroute.origin_id === this.outputNode?.id) return false
+    }
+    return true
+  }
+
+  connectToInput(node: LGraphNode, input: INodeInputSlot, _events?: CustomEventTarget<LinkConnectorEventMap>): void {
+    const floatingLink = this.link
+    floatingLink.target_id = node.id
+    floatingLink.target_slot = node.inputs.indexOf(input)
+
+    node.disconnectInput(node.inputs.indexOf(input))
+
+    this.fromSlot._floatingLinks?.delete(floatingLink)
+    input._floatingLinks ??= new Set()
+    input._floatingLinks.add(floatingLink)
+  }
+
+  connectToOutput(node: LGraphNode, output: INodeOutputSlot, _events?: CustomEventTarget<LinkConnectorEventMap>): void {
+    const floatingLink = this.link
+    floatingLink.origin_id = node.id
+    floatingLink.origin_slot = node.outputs.indexOf(output)
+
+    this.fromSlot._floatingLinks?.delete(floatingLink)
+    output._floatingLinks ??= new Set()
+    output._floatingLinks.add(floatingLink)
+  }
+
+  connectToSubgraphInput(input: SubgraphInput, _events?: CustomEventTarget<LinkConnectorEventMap>): void {
+    const floatingLink = this.link
+    floatingLink.origin_id = SUBGRAPH_INPUT_ID
+    floatingLink.origin_slot = input.parent.slots.indexOf(input)
+
+    this.fromSlot._floatingLinks?.delete(floatingLink)
+    input._floatingLinks ??= new Set()
+    input._floatingLinks.add(floatingLink)
+  }
+
+  connectToSubgraphOutput(output: SubgraphOutput, _events?: CustomEventTarget<LinkConnectorEventMap>): void {
+    const floatingLink = this.link
+    floatingLink.origin_id = SUBGRAPH_OUTPUT_ID
+    floatingLink.origin_slot = output.parent.slots.indexOf(output)
+
+    this.fromSlot._floatingLinks?.delete(floatingLink)
+    output._floatingLinks ??= new Set()
+    output._floatingLinks.add(floatingLink)
+  }
+
+  connectToRerouteInput(
+    reroute: Reroute,
+    { node: inputNode, input }: { node: LGraphNode, input: INodeInputSlot },
+    events: CustomEventTarget<LinkConnectorEventMap>,
+  ) {
+    const floatingLink = this.link
+    floatingLink.target_id = inputNode.id
+    floatingLink.target_slot = inputNode.inputs.indexOf(input)
+
+    this.fromSlot._floatingLinks?.delete(floatingLink)
+    input._floatingLinks ??= new Set()
+    input._floatingLinks.add(floatingLink)
+
+    events.dispatch("input-moved", this)
+  }
+
+  connectToRerouteOutput(
+    reroute: Reroute,
+    outputNode: LGraphNode,
+    output: INodeOutputSlot,
+    events: CustomEventTarget<LinkConnectorEventMap>,
+  ) {
+    const floatingLink = this.link
+    floatingLink.origin_id = outputNode.id
+    floatingLink.origin_slot = outputNode.outputs.indexOf(output)
+
+    this.fromSlot._floatingLinks?.delete(floatingLink)
+    output._floatingLinks ??= new Set()
+    output._floatingLinks.add(floatingLink)
+
+    events.dispatch("output-moved", this)
+  }
+}
diff --git a/src/lib/litegraph/src/canvas/InputIndicators.ts b/src/lib/litegraph/src/canvas/InputIndicators.ts
new file mode 100644
index 0000000000..ec10ca354f
--- /dev/null
+++ b/src/lib/litegraph/src/canvas/InputIndicators.ts
@@ -0,0 +1,171 @@
+import type { LGraphCanvas } from '../LGraphCanvas'
+
+/**
+ * A class that can be added to the render cycle to show pointer / keyboard status symbols.
+ *
+ * Used to create videos of feature changes.
+ *
+ * Example usage with ComfyUI_frontend, via console / devtools:
+ *
+ * ```ts
+ * const inputIndicators = new InputIndicators(canvas)
+ * // Dispose:
+ * inputIndicators.dispose()
+ * ```
+ */
+export class InputIndicators implements Disposable {
+  // #region config
+  radius = 8
+  startAngle = 0
+  endAngle = Math.PI * 2
+
+  inactiveColour = "#ffffff10"
+  colour1 = "#ff5f00"
+  colour2 = "#00ff7c"
+  colour3 = "#dea7ff"
+  fontString = "bold 12px Arial"
+  // #endregion
+
+  // #region state
+  enabled: boolean = true
+
+  shiftDown: boolean = false
+  undoDown: boolean = false
+  redoDown: boolean = false
+  ctrlDown: boolean = false
+  altDown: boolean = false
+  mouse0Down: boolean = false
+  mouse1Down: boolean = false
+  mouse2Down: boolean = false
+
+  x: number = 0
+  y: number = 0
+  // #endregion
+
+  controller?: AbortController
+
+  constructor(public canvas: LGraphCanvas) {
+    this.controller = new AbortController()
+    const { signal } = this.controller
+
+    const element = canvas.canvas
+    const options = { capture: true, signal } satisfies AddEventListenerOptions
+
+    element.addEventListener("pointerdown", this.#onPointerDownOrMove, options)
+    element.addEventListener("pointermove", this.#onPointerDownOrMove, options)
+    element.addEventListener("pointerup", this.#onPointerUp, options)
+    element.addEventListener("keydown", this.#onKeyDownOrUp, options)
+    document.addEventListener("keyup", this.#onKeyDownOrUp, options)
+
+    const origDrawFrontCanvas = canvas.drawFrontCanvas.bind(canvas)
+    signal.addEventListener("abort", () => {
+      canvas.drawFrontCanvas = origDrawFrontCanvas
+    })
+
+    canvas.drawFrontCanvas = () => {
+      origDrawFrontCanvas()
+      this.draw()
+    }
+  }
+
+  #onPointerDownOrMove = this.onPointerDownOrMove.bind(this)
+  onPointerDownOrMove(e: MouseEvent): void {
+    this.mouse0Down = (e.buttons & 1) === 1
+    this.mouse1Down = (e.buttons & 4) === 4
+    this.mouse2Down = (e.buttons & 2) === 2
+
+    this.x = e.clientX
+    this.y = e.clientY
+
+    this.canvas.setDirty(true)
+  }
+
+  #onPointerUp = this.onPointerUp.bind(this)
+  onPointerUp(): void {
+    this.mouse0Down = false
+    this.mouse1Down = false
+    this.mouse2Down = false
+  }
+
+  #onKeyDownOrUp = this.onKeyDownOrUp.bind(this)
+  onKeyDownOrUp(e: KeyboardEvent): void {
+    this.ctrlDown = e.ctrlKey
+    this.altDown = e.altKey
+    this.shiftDown = e.shiftKey
+    this.undoDown = e.ctrlKey && e.code === "KeyZ" && e.type === "keydown"
+    this.redoDown = e.ctrlKey && e.code === "KeyY" && e.type === "keydown"
+  }
+
+  draw() {
+    const {
+      canvas: { ctx },
+      radius,
+      startAngle,
+      endAngle,
+      x,
+      y,
+      inactiveColour,
+      colour1,
+      colour2,
+      colour3,
+      fontString,
+    } = this
+
+    const { fillStyle, font } = ctx
+
+    const mouseDotX = x
+    const mouseDotY = y - 80
+
+    const textX = mouseDotX
+    const textY = mouseDotY - 15
+    ctx.font = fontString
+
+    textMarker(textX + 0, textY, "Shift", this.shiftDown ? colour1 : inactiveColour)
+    textMarker(textX + 45, textY + 20, "Alt", this.altDown ? colour2 : inactiveColour)
+    textMarker(textX + 30, textY, "Control", this.ctrlDown ? colour3 : inactiveColour)
+    textMarker(textX - 30, textY, "↩️", this.undoDown ? "#000" : "transparent")
+    textMarker(textX + 45, textY, "↪️", this.redoDown ? "#000" : "transparent")
+
+    ctx.beginPath()
+    drawDot(mouseDotX, mouseDotY)
+    drawDot(mouseDotX + 15, mouseDotY)
+    drawDot(mouseDotX + 30, mouseDotY)
+    ctx.fillStyle = inactiveColour
+    ctx.fill()
+
+    const leftButtonColour = this.mouse0Down ? colour1 : inactiveColour
+    const middleButtonColour = this.mouse1Down ? colour2 : inactiveColour
+    const rightButtonColour = this.mouse2Down ? colour3 : inactiveColour
+    if (this.mouse0Down) mouseMarker(mouseDotX, mouseDotY, leftButtonColour)
+    if (this.mouse1Down) mouseMarker(mouseDotX + 15, mouseDotY, middleButtonColour)
+    if (this.mouse2Down) mouseMarker(mouseDotX + 30, mouseDotY, rightButtonColour)
+
+    ctx.fillStyle = fillStyle
+    ctx.font = font
+
+    function textMarker(x: number, y: number, text: string, colour: string) {
+      ctx.fillStyle = colour
+      ctx.fillText(text, x, y)
+    }
+
+    function mouseMarker(x: number, y: number, colour: string) {
+      ctx.beginPath()
+      ctx.fillStyle = colour
+      drawDot(x, y)
+      ctx.fill()
+    }
+
+    function drawDot(x: number, y: number) {
+      ctx.arc(x, y, radius, startAngle, endAngle)
+    }
+  }
+
+  dispose() {
+    this.controller?.abort()
+    this.controller = undefined
+  }
+
+  [Symbol.dispose](): void {
+    this.dispose()
+  }
+}
diff --git a/src/lib/litegraph/src/canvas/LinkConnector.ts b/src/lib/litegraph/src/canvas/LinkConnector.ts
new file mode 100644
index 0000000000..e58e496450
--- /dev/null
+++ b/src/lib/litegraph/src/canvas/LinkConnector.ts
@@ -0,0 +1,826 @@
+import type { RenderLink } from "./RenderLink"
+import type { LinkConnectorEventMap } from '../infrastructure/LinkConnectorEventMap'
+import type { ConnectingLink, ItemLocator, LinkNetwork, LinkSegment } from '../interfaces'
+import type { INodeInputSlot, INodeOutputSlot } from '../interfaces'
+import type { LGraphNode } from '../LGraphNode'
+import type { Reroute } from '../Reroute'
+import type { SubgraphInput } from '../subgraph/SubgraphInput'
+import type { SubgraphOutput } from '../subgraph/SubgraphOutput'
+import type { CanvasPointerEvent } from '../types/events'
+import type { IBaseWidget } from '../types/widgets'
+
+import { SUBGRAPH_INPUT_ID, SUBGRAPH_OUTPUT_ID } from '../constants'
+import { CustomEventTarget } from '../infrastructure/CustomEventTarget'
+import { LLink } from '../LLink'
+import { Subgraph } from '../litegraph'
+import { SubgraphInputNode } from '../subgraph/SubgraphInputNode'
+import { SubgraphOutputNode } from '../subgraph/SubgraphOutputNode'
+import { LinkDirection } from '../types/globalEnums'
+
+import { FloatingRenderLink } from "./FloatingRenderLink"
+import { MovingInputLink } from "./MovingInputLink"
+import { MovingLinkBase } from "./MovingLinkBase"
+import { MovingOutputLink } from "./MovingOutputLink"
+import { ToInputFromIoNodeLink } from "./ToInputFromIoNodeLink"
+import { ToInputRenderLink } from "./ToInputRenderLink"
+import { ToOutputFromIoNodeLink } from "./ToOutputFromIoNodeLink"
+import { ToOutputFromRerouteLink } from "./ToOutputFromRerouteLink"
+import { ToOutputRenderLink } from "./ToOutputRenderLink"
+
+/**
+ * A Litegraph state object for the {@link LinkConnector}.
+ * References are only held atomically within a function, never passed.
+ * The concrete implementation may be replaced or proxied without side-effects.
+ */
+export interface LinkConnectorState {
+  /**
+   * The type of slot that links are being connected **to**.
+   * - When `undefined`, no operation is being performed.
+   * - A change in this property indicates the start or end of dragging links.
+   */
+  connectingTo: "input" | "output" | undefined
+  multi: boolean
+  /** When `true`, existing links are being repositioned. Otherwise, new links are being created. */
+  draggingExistingLinks: boolean
+  /** When set, connecting links will all snap to this position. */
+  snapLinksPos?: [number, number]
+}
+
+/** Discriminated union to simplify type narrowing. */
+type RenderLinkUnion =
+  | MovingInputLink
+  | MovingOutputLink
+  | FloatingRenderLink
+  | ToInputRenderLink
+  | ToOutputRenderLink
+  | ToInputFromIoNodeLink
+  | ToOutputFromIoNodeLink
+
+export interface LinkConnectorExport {
+  renderLinks: RenderLink[]
+  inputLinks: LLink[]
+  outputLinks: LLink[]
+  floatingLinks: LLink[]
+  state: LinkConnectorState
+  network: LinkNetwork
+}
+
+/**
+ * Component of {@link LGraphCanvas} that handles connecting and moving links.
+ * @see {@link LLink}
+ */
+export class LinkConnector {
+  /**
+   * Link connection state POJO. Source of truth for state of link drag operations.
+   *
+   * Can be replaced or proxied to allow notifications.
+   * Is always dereferenced at the start of an operation.
+   */
+  state: LinkConnectorState = {
+    connectingTo: undefined,
+    multi: false,
+    draggingExistingLinks: false,
+    snapLinksPos: undefined,
+  }
+
+  readonly events = new CustomEventTarget<LinkConnectorEventMap>()
+
+  /** Contains information for rendering purposes only. */
+  readonly renderLinks: RenderLinkUnion[] = []
+
+  /** Existing links that are being moved **to** a new input slot. */
+  readonly inputLinks: LLink[] = []
+  /** Existing links that are being moved **to** a new output slot. */
+  readonly outputLinks: LLink[] = []
+  /** Existing floating links that are being moved to a new slot. */
+  readonly floatingLinks: LLink[] = []
+
+  readonly hiddenReroutes: Set<Reroute> = new Set()
+
+  /** The widget beneath the pointer, if it is a valid connection target. */
+  overWidget?: IBaseWidget
+  /** The type (returned by downstream callback) for {@link overWidget} */
+  overWidgetType?: string
+
+  /** The reroute beneath the pointer, if it is a valid connection target. */
+  overReroute?: Reroute
+
+  readonly #setConnectingLinks: (value: ConnectingLink[]) => void
+
+  constructor(setConnectingLinks: (value: ConnectingLink[]) => void) {
+    this.#setConnectingLinks = setConnectingLinks
+  }
+
+  get isConnecting() {
+    return this.state.connectingTo !== undefined
+  }
+
+  get draggingExistingLinks() {
+    return this.state.draggingExistingLinks
+  }
+
+  /** Drag an existing link to a different input. */
+  moveInputLink(network: LinkNetwork, input: INodeInputSlot): void {
+    if (this.isConnecting) throw new Error("Already dragging links.")
+
+    const { state, inputLinks, renderLinks } = this
+
+    const linkId = input.link
+    if (linkId == null) {
+      // No link connected, check for a floating link
+      const floatingLink = input._floatingLinks?.values().next().value
+      if (floatingLink?.parentId == null) return
+
+      try {
+        const reroute = network.reroutes.get(floatingLink.parentId)
+        if (!reroute) throw new Error(`Invalid reroute id: [${floatingLink.parentId}] for floating link id: [${floatingLink.id}].`)
+
+        const renderLink = new FloatingRenderLink(network, floatingLink, "input", reroute)
+        const mayContinue = this.events.dispatch("before-move-input", renderLink)
+        if (mayContinue === false) return
+
+        renderLinks.push(renderLink)
+      } catch (error) {
+        console.warn(`Could not create render link for link id: [${floatingLink.id}].`, floatingLink, error)
+      }
+
+      floatingLink._dragging = true
+      this.floatingLinks.push(floatingLink)
+    } else {
+      const link = network.links.get(linkId)
+      if (!link) return
+
+      try {
+        const reroute = network.getReroute(link.parentId)
+        const renderLink = new MovingInputLink(network, link, reroute)
+
+        const mayContinue = this.events.dispatch("before-move-input", renderLink)
+        if (mayContinue === false) return
+
+        renderLinks.push(renderLink)
+
+        this.listenUntilReset("input-moved", (e) => {
+          e.detail.link.disconnect(network, "output")
+        })
+      } catch (error) {
+        console.warn(`Could not create render link for link id: [${link.id}].`, link, error)
+        return
+      }
+
+      link._dragging = true
+      inputLinks.push(link)
+    }
+
+    state.connectingTo = "input"
+    state.draggingExistingLinks = true
+
+    this.#setLegacyLinks(false)
+  }
+
+  /** Drag all links from an output to a new output. */
+  moveOutputLink(network: LinkNetwork, output: INodeOutputSlot): void {
+    if (this.isConnecting) throw new Error("Already dragging links.")
+
+    const { state, renderLinks } = this
+
+    // Floating links
+    if (output._floatingLinks?.size) {
+      for (const floatingLink of output._floatingLinks.values()) {
+        try {
+          const reroute = LLink.getFirstReroute(network, floatingLink)
+          if (!reroute) throw new Error(`Invalid reroute id: [${floatingLink.parentId}] for floating link id: [${floatingLink.id}].`)
+
+          const renderLink = new FloatingRenderLink(network, floatingLink, "output", reroute)
+          const mayContinue = this.events.dispatch("before-move-output", renderLink)
+          if (mayContinue === false) continue
+
+          renderLinks.push(renderLink)
+          this.floatingLinks.push(floatingLink)
+        } catch (error) {
+          console.warn(`Could not create render link for link id: [${floatingLink.id}].`, floatingLink, error)
+        }
+      }
+    }
+
+    // Normal links
+    if (output.links?.length) {
+      for (const linkId of output.links) {
+        const link = network.links.get(linkId)
+        if (!link) continue
+
+        const firstReroute = LLink.getFirstReroute(network, link)
+        if (firstReroute) {
+          firstReroute._dragging = true
+          this.hiddenReroutes.add(firstReroute)
+        } else {
+          link._dragging = true
+        }
+        this.outputLinks.push(link)
+
+        try {
+          const renderLink = new MovingOutputLink(network, link, firstReroute, LinkDirection.RIGHT)
+
+          const mayContinue = this.events.dispatch("before-move-output", renderLink)
+          if (mayContinue === false) continue
+
+          renderLinks.push(renderLink)
+        } catch (error) {
+          console.warn(`Could not create render link for link id: [${link.id}].`, link, error)
+          continue
+        }
+      }
+    }
+
+    if (renderLinks.length === 0) return
+
+    state.draggingExistingLinks = true
+    state.multi = true
+    state.connectingTo = "output"
+
+    this.#setLegacyLinks(true)
+  }
+
+  /**
+   * Drags a new link from an output slot to an input slot.
+   * @param network The network that the link being connected belongs to
+   * @param node The node the link is being dragged from
+   * @param output The output slot that the link is being dragged from
+   */
+  dragNewFromOutput(network: LinkNetwork, node: LGraphNode, output: INodeOutputSlot, fromReroute?: Reroute): void {
+    if (this.isConnecting) throw new Error("Already dragging links.")
+
+    const { state } = this
+    const renderLink = new ToInputRenderLink(network, node, output, fromReroute)
+    this.renderLinks.push(renderLink)
+
+    state.connectingTo = "input"
+
+    this.#setLegacyLinks(false)
+  }
+
+  /**
+   * Drags a new link from an input slot to an output slot.
+   * @param network The network that the link being connected belongs to
+   * @param node The node the link is being dragged from
+   * @param input The input slot that the link is being dragged from
+   */
+  dragNewFromInput(network: LinkNetwork, node: LGraphNode, input: INodeInputSlot, fromReroute?: Reroute): void {
+    if (this.isConnecting) throw new Error("Already dragging links.")
+
+    const { state } = this
+    const renderLink = new ToOutputRenderLink(network, node, input, fromReroute)
+    this.renderLinks.push(renderLink)
+
+    state.connectingTo = "output"
+
+    this.#setLegacyLinks(true)
+  }
+
+  dragNewFromSubgraphInput(network: LinkNetwork, inputNode: SubgraphInputNode, input: SubgraphInput, fromReroute?: Reroute): void {
+    if (this.isConnecting) throw new Error("Already dragging links.")
+
+    const renderLink = new ToInputFromIoNodeLink(network, inputNode, input, fromReroute)
+    this.renderLinks.push(renderLink)
+
+    this.state.connectingTo = "input"
+  }
+
+  dragNewFromSubgraphOutput(network: LinkNetwork, outputNode: SubgraphOutputNode, output: SubgraphOutput, fromReroute?: Reroute): void {
+    if (this.isConnecting) throw new Error("Already dragging links.")
+
+    const renderLink = new ToOutputFromIoNodeLink(network, outputNode, output, fromReroute)
+    this.renderLinks.push(renderLink)
+
+    this.state.connectingTo = "output"
+  }
+
+  /**
+   * Drags a new link from a reroute to an input slot.
+   * @param network The network that the link being connected belongs to
+   * @param reroute The reroute that the link is being dragged from
+   */
+  dragFromReroute(network: LinkNetwork, reroute: Reroute): void {
+    if (this.isConnecting) throw new Error("Already dragging links.")
+
+    const link = reroute.firstLink ?? reroute.firstFloatingLink
+    if (!link) {
+      console.warn("No link found for reroute.")
+      return
+    }
+
+    if (link.origin_id === SUBGRAPH_INPUT_ID) {
+      if (!(network instanceof Subgraph)) {
+        console.warn("Subgraph input link found in non-subgraph network.")
+        return
+      }
+
+      const input = network.inputs.at(link.origin_slot)
+      if (!input) throw new Error("No subgraph input found for link.")
+
+      const renderLink = new ToInputFromIoNodeLink(network, network.inputNode, input, reroute)
+      renderLink.fromDirection = LinkDirection.NONE
+      this.renderLinks.push(renderLink)
+
+      this.state.connectingTo = "input"
+
+      this.#setLegacyLinks(false)
+      return
+    }
+
+    const outputNode = network.getNodeById(link.origin_id)
+    if (!outputNode) {
+      console.warn("No output node found for link.", link)
+      return
+    }
+
+    const outputSlot = outputNode.outputs.at(link.origin_slot)
+    if (!outputSlot) {
+      console.warn("No output slot found for link.", link)
+      return
+    }
+
+    const renderLink = new ToInputRenderLink(network, outputNode, outputSlot, reroute)
+    renderLink.fromDirection = LinkDirection.NONE
+    this.renderLinks.push(renderLink)
+
+    this.state.connectingTo = "input"
+
+    this.#setLegacyLinks(false)
+  }
+
+  /**
+   * Drags a new link from a reroute to an output slot.
+   * @param network The network that the link being connected belongs to
+   * @param reroute The reroute that the link is being dragged from
+   */
+  dragFromRerouteToOutput(network: LinkNetwork, reroute: Reroute): void {
+    if (this.isConnecting) throw new Error("Already dragging links.")
+
+    const link = reroute.firstLink ?? reroute.firstFloatingLink
+    if (!link) {
+      console.warn("No link found for reroute.")
+      return
+    }
+
+    if (link.target_id === SUBGRAPH_OUTPUT_ID) {
+      if (!(network instanceof Subgraph)) {
+        console.warn("Subgraph output link found in non-subgraph network.")
+        return
+      }
+
+      const output = network.outputs.at(link.target_slot)
+      if (!output) throw new Error("No subgraph output found for link.")
+
+      const renderLink = new ToOutputFromIoNodeLink(network, network.outputNode, output, reroute)
+      renderLink.fromDirection = LinkDirection.NONE
+      this.renderLinks.push(renderLink)
+
+      this.state.connectingTo = "output"
+
+      this.#setLegacyLinks(false)
+      return
+    }
+
+    const inputNode = network.getNodeById(link.target_id)
+    if (!inputNode) {
+      console.warn("No input node found for link.", link)
+      return
+    }
+
+    const inputSlot = inputNode.inputs.at(link.target_slot)
+    if (!inputSlot) {
+      console.warn("No input slot found for link.", link)
+      return
+    }
+
+    const renderLink = new ToOutputFromRerouteLink(network, inputNode, inputSlot, reroute, this)
+    renderLink.fromDirection = LinkDirection.LEFT
+    this.renderLinks.push(renderLink)
+
+    this.state.connectingTo = "output"
+
+    this.#setLegacyLinks(true)
+  }
+
+  dragFromLinkSegment(network: LinkNetwork, linkSegment: LinkSegment): void {
+    if (this.isConnecting) throw new Error("Already dragging links.")
+
+    const { state } = this
+    if (linkSegment.origin_id == null || linkSegment.origin_slot == null) return
+
+    const node = network.getNodeById(linkSegment.origin_id)
+    if (!node) return
+
+    const slot = node.outputs.at(linkSegment.origin_slot)
+    if (!slot) return
+
+    const reroute = network.getReroute(linkSegment.parentId)
+    const renderLink = new ToInputRenderLink(network, node, slot, reroute)
+    renderLink.fromDirection = LinkDirection.NONE
+    this.renderLinks.push(renderLink)
+
+    state.connectingTo = "input"
+
+    this.#setLegacyLinks(false)
+  }
+
+  /**
+   * Connects the links being droppe
+   * @param event Contains the drop location, in canvas space
+   */
+  dropLinks(locator: ItemLocator, event: CanvasPointerEvent): void {
+    if (!this.isConnecting) {
+      console.warn("Attempted to drop links when not connecting to anything.")
+      return
+    }
+
+    const { renderLinks } = this
+    const mayContinue = this.events.dispatch("before-drop-links", { renderLinks, event })
+    if (mayContinue === false) return
+
+    try {
+      const { canvasX, canvasY } = event
+
+      const ioNode = locator.getIoNodeOnPos?.(canvasX, canvasY)
+      if (ioNode) {
+        this.dropOnIoNode(ioNode, event)
+        return
+      }
+
+      const node = locator.getNodeOnPos(canvasX, canvasY) ?? undefined
+      if (node) {
+        this.dropOnNode(node, event)
+      } else {
+        // Get reroute if no node is found
+        const reroute = locator.getRerouteOnPos(canvasX, canvasY)
+        // Drop output->input link on reroute is not impl.
+        if (reroute && this.isRerouteValidDrop(reroute)) {
+          this.dropOnReroute(reroute, event)
+        } else {
+          this.dropOnNothing(event)
+        }
+      }
+    } finally {
+      this.events.dispatch("after-drop-links", { renderLinks, event })
+    }
+  }
+
+  dropOnIoNode(ioNode: SubgraphInputNode | SubgraphOutputNode, event: CanvasPointerEvent) {
+    const { renderLinks, state } = this
+    const { connectingTo } = state
+    const { canvasX, canvasY } = event
+
+    if (connectingTo === "input" && ioNode instanceof SubgraphOutputNode) {
+      const output = ioNode.getSlotInPosition(canvasX, canvasY)
+      if (!output) throw new Error("No output slot found for link.")
+
+      for (const link of renderLinks) {
+        link.connectToSubgraphOutput(output, this.events)
+      }
+    } else if (connectingTo === "output" && ioNode instanceof SubgraphInputNode) {
+      const input = ioNode.getSlotInPosition(canvasX, canvasY)
+      if (!input) throw new Error("No input slot found for link.")
+
+      for (const link of renderLinks) {
+        link.connectToSubgraphInput(input, this.events)
+      }
+    } else {
+      console.error("Invalid connectingTo state &/ ioNode", connectingTo, ioNode)
+    }
+  }
+
+  dropOnNode(node: LGraphNode, event: CanvasPointerEvent) {
+    const { renderLinks, state } = this
+    const { connectingTo } = state
+    const { canvasX, canvasY } = event
+
+    // Do nothing if every connection would loop back
+    if (renderLinks.every(link => link.node === node)) return
+
+    // To output
+    if (connectingTo === "output") {
+      const output = node.getOutputOnPos([canvasX, canvasY])
+
+      if (output) {
+        this.#dropOnOutput(node, output)
+      } else {
+        this.connectToNode(node, event)
+      }
+    // To input
+    } else if (connectingTo === "input") {
+      const input = node.getInputOnPos([canvasX, canvasY])
+      const inputOrSocket = input ?? node.getSlotFromWidget(this.overWidget)
+
+      // Input slot
+      if (inputOrSocket) {
+        this.#dropOnInput(node, inputOrSocket)
+      } else {
+        // Node background / title
+        this.connectToNode(node, event)
+      }
+    }
+  }
+
+  dropOnReroute(reroute: Reroute, event: CanvasPointerEvent): void {
+    const mayContinue = this.events.dispatch("dropped-on-reroute", { reroute, event })
+    if (mayContinue === false) return
+
+    // Connecting to input
+    if (this.state.connectingTo === "input") {
+      if (this.renderLinks.length !== 1) throw new Error(`Attempted to connect ${this.renderLinks.length} input links to a reroute.`)
+
+      const renderLink = this.renderLinks[0]
+      this._connectOutputToReroute(reroute, renderLink)
+
+      return
+    }
+
+    // Connecting to output
+    for (const link of this.renderLinks) {
+      if (link.toType !== "output") continue
+
+      const result = reroute.findSourceOutput()
+      if (!result) continue
+
+      const { node, output } = result
+      if (!link.canConnectToOutput(node, output)) continue
+
+      link.connectToRerouteOutput(reroute, node, output, this.events)
+    }
+  }
+
+  /** @internal Temporary workaround - requires refactor. */
+  _connectOutputToReroute(reroute: Reroute, renderLink: RenderLinkUnion): void {
+    const results = reroute.findTargetInputs()
+    if (!results?.length) return
+
+    const maybeReroutes = reroute.getReroutes()
+    if (maybeReroutes === null) throw new Error("Reroute loop detected.")
+
+    const originalReroutes = maybeReroutes.slice(0, -1).reverse()
+
+    // From reroute to reroute
+    if (renderLink instanceof ToInputRenderLink) {
+      const { node, fromSlot, fromSlotIndex, fromReroute } = renderLink
+
+      reroute.setFloatingLinkOrigin(node, fromSlot, fromSlotIndex)
+
+      // Clean floating link IDs from reroutes about to be removed from the chain
+      if (fromReroute != null) {
+        for (const originalReroute of originalReroutes) {
+          if (originalReroute.id === fromReroute.id) break
+
+          for (const linkId of reroute.floatingLinkIds) {
+            originalReroute.floatingLinkIds.delete(linkId)
+          }
+        }
+      }
+    }
+
+    // Filter before any connections are re-created
+    const filtered = results.filter(result => renderLink.toType === "input" && canConnectInputLinkToReroute(renderLink, result.node, result.input, reroute))
+
+    for (const result of filtered) {
+      renderLink.connectToRerouteInput(reroute, result, this.events, originalReroutes)
+    }
+
+    return
+  }
+
+  dropOnNothing(event: CanvasPointerEvent): void {
+    // For external event only.
+    const mayContinue = this.events.dispatch("dropped-on-canvas", event)
+    if (mayContinue === false) return
+
+    this.disconnectLinks()
+  }
+
+  /**
+   * Disconnects all moving links.
+   * @remarks This is called when the links are dropped on the canvas.
+   * May be called by consumers to e.g. drag links into a bin / void.
+   */
+  disconnectLinks(): void {
+    for (const link of this.renderLinks) {
+      if (link instanceof MovingLinkBase) {
+        link.disconnect()
+      }
+    }
+  }
+
+  /**
+   * Connects the links being dropped onto a node to the first matching slot.
+   * @param node The node that the links are being dropped on
+   * @param event Contains the drop location, in canvas space
+   */
+  connectToNode(node: LGraphNode, event: CanvasPointerEvent): void {
+    const { state: { connectingTo } } = this
+
+    const mayContinue = this.events.dispatch("dropped-on-node", { node, event })
+    if (mayContinue === false) return
+
+    // Assume all links are the same type, disallow loopback
+    const firstLink = this.renderLinks[0]
+    if (!firstLink) return
+
+    // Use a single type check before looping; ensures all dropped links go to the same slot
+    if (connectingTo === "output") {
+      // Dropping new output link
+      const output = node.findOutputByType(firstLink.fromSlot.type)?.slot
+      console.debug("out", node, output, firstLink.fromSlot)
+      if (output === undefined) {
+        console.warn(`Could not find slot for link type: [${firstLink.fromSlot.type}].`)
+        return
+      }
+
+      this.#dropOnOutput(node, output)
+    } else if (connectingTo === "input") {
+      // Dropping new input link
+      const input = node.findInputByType(firstLink.fromSlot.type)?.slot
+      console.debug("in", node, input, firstLink.fromSlot)
+      if (input === undefined) {
+        console.warn(`Could not find slot for link type: [${firstLink.fromSlot.type}].`)
+        return
+      }
+
+      this.#dropOnInput(node, input)
+    }
+  }
+
+  #dropOnInput(node: LGraphNode, input: INodeInputSlot): void {
+    for (const link of this.renderLinks) {
+      if (!link.canConnectToInput(node, input)) continue
+
+      link.connectToInput(node, input, this.events)
+    }
+  }
+
+  #dropOnOutput(node: LGraphNode, output: INodeOutputSlot): void {
+    for (const link of this.renderLinks) {
+      if (!link.canConnectToOutput(node, output)) {
+        if (link instanceof MovingOutputLink && link.link.parentId !== undefined) {
+          // Reconnect link without reroutes
+          link.outputNode.connectSlots(link.outputSlot, link.inputNode, link.inputSlot, undefined!)
+        }
+        continue
+      }
+
+      link.connectToOutput(node, output, this.events)
+    }
+  }
+
+  isInputValidDrop(node: LGraphNode, input: INodeInputSlot): boolean {
+    return this.renderLinks.some(link => link.canConnectToInput(node, input))
+  }
+
+  isNodeValidDrop(node: LGraphNode): boolean {
+    if (this.state.connectingTo === "output") {
+      return node.outputs.some(output => this.renderLinks.some(link => link.canConnectToOutput(node, output)))
+    }
+
+    return node.inputs.some(input => this.renderLinks.some(link => link.canConnectToInput(node, input)))
+  }
+
+  /**
+   * Checks if a reroute is a valid drop target for any of the links being connected.
+   * @param reroute The reroute that would be dropped on.
+   * @returns `true` if any of the current links being connected are valid for the given reroute.
+   */
+  isRerouteValidDrop(reroute: Reroute): boolean {
+    if (this.state.connectingTo === "input") {
+      const results = reroute.findTargetInputs()
+      if (!results?.length) return false
+
+      for (const { node, input } of results) {
+        for (const renderLink of this.renderLinks) {
+          if (renderLink.toType !== "input") continue
+          if (canConnectInputLinkToReroute(renderLink, node, input, reroute)) return true
+        }
+      }
+    } else {
+      const result = reroute.findSourceOutput()
+      if (!result) return false
+
+      const { node, output } = result
+
+      for (const renderLink of this.renderLinks) {
+        if (renderLink.toType !== "output") continue
+        if (!renderLink.canConnectToReroute(reroute)) continue
+        if (renderLink.canConnectToOutput(node, output)) return true
+      }
+    }
+
+    return false
+  }
+
+  /** Sets connecting_links, used by some extensions still. */
+  #setLegacyLinks(fromSlotIsInput: boolean): void {
+    const links = this.renderLinks.map((link) => {
+      const input = fromSlotIsInput ? link.fromSlot as INodeInputSlot : null
+      const output = fromSlotIsInput ? null : link.fromSlot as INodeOutputSlot
+
+      const afterRerouteId = link instanceof MovingLinkBase ? link.link?.parentId : link.fromReroute?.id
+
+      return {
+        node: link.node as LGraphNode,
+        slot: link.fromSlotIndex,
+        input,
+        output,
+        pos: link.fromPos,
+        afterRerouteId,
+      } satisfies ConnectingLink
+    })
+    this.#setConnectingLinks(links)
+  }
+
+  /**
+   * Exports the current state of the link connector.
+   * @param network The network that the links being connected belong to.
+   * @returns A POJO with the state of the link connector, links being connected, and their network.
+   * @remarks Other than {@link network}, all properties are shallow cloned.
+   */
+  export(network: LinkNetwork): LinkConnectorExport {
+    return {
+      renderLinks: [...this.renderLinks],
+      inputLinks: [...this.inputLinks],
+      outputLinks: [...this.outputLinks],
+      floatingLinks: [...this.floatingLinks],
+      state: { ...this.state },
+      network,
+    }
+  }
+
+  /**
+   * Adds an event listener that will be automatically removed when the reset event is fired.
+   * @param eventName The event to listen for.
+   * @param listener The listener to call when the event is fired.
+   */
+  listenUntilReset<K extends keyof LinkConnectorEventMap>(
+    eventName: K,
+    listener: Parameters<typeof this.events.addEventListener<K>>[1],
+    options?: Parameters<typeof this.events.addEventListener<K>>[2],
+  ) {
+    this.events.addEventListener(eventName, listener, options)
+    this.events.addEventListener("reset", () => this.events.removeEventListener(eventName, listener), { once: true })
+  }
+
+  /**
+   * Resets everything to its initial state.
+   *
+   * Effectively cancels moving or connecting links.
+   */
+  reset(force = false): void {
+    const mayContinue = this.events.dispatch("reset", force)
+    if (mayContinue === false) return
+
+    const { state, outputLinks, inputLinks, hiddenReroutes, renderLinks, floatingLinks } = this
+
+    if (!force && state.connectingTo === undefined) return
+    state.connectingTo = undefined
+
+    for (const link of outputLinks) delete link._dragging
+    for (const link of inputLinks) delete link._dragging
+    for (const link of floatingLinks) delete link._dragging
+    for (const reroute of hiddenReroutes) delete reroute._dragging
+
+    renderLinks.length = 0
+    inputLinks.length = 0
+    outputLinks.length = 0
+    floatingLinks.length = 0
+    hiddenReroutes.clear()
+    state.multi = false
+    state.draggingExistingLinks = false
+    state.snapLinksPos = undefined
+  }
+}
+
+/** Validates that a single {@link RenderLink} can be dropped on the specified reroute. */
+function canConnectInputLinkToReroute(
+  link: ToInputRenderLink | MovingInputLink | FloatingRenderLink | ToInputFromIoNodeLink,
+  inputNode: LGraphNode,
+  input: INodeInputSlot,
+  reroute: Reroute,
+): boolean {
+  const { fromReroute } = link
+
+  if (
+    !link.canConnectToInput(inputNode, input) ||
+    // Would result in no change
+    fromReroute?.id === reroute.id ||
+    // Cannot connect from child to parent reroute
+    fromReroute?.getReroutes()?.includes(reroute)
+  ) {
+    return false
+  }
+
+  // Would result in no change
+  if (link instanceof ToInputRenderLink) {
+    if (reroute.parentId == null) {
+      // Link would make no change - output to reroute
+      if (reroute.firstLink?.hasOrigin(link.node.id, link.fromSlotIndex)) return false
+    } else if (link.fromReroute?.id === reroute.parentId) {
+      return false
+    }
+  }
+  return true
+}
diff --git a/src/lib/litegraph/src/canvas/MovingInputLink.ts b/src/lib/litegraph/src/canvas/MovingInputLink.ts
new file mode 100644
index 0000000000..194fe23d78
--- /dev/null
+++ b/src/lib/litegraph/src/canvas/MovingInputLink.ts
@@ -0,0 +1,96 @@
+import type { CustomEventTarget } from '../infrastructure/CustomEventTarget'
+import type { LinkConnectorEventMap } from '../infrastructure/LinkConnectorEventMap'
+import type { INodeInputSlot, INodeOutputSlot, LinkNetwork, Point } from '../interfaces'
+import type { LGraphNode } from '../LGraphNode'
+import type { LLink } from '../LLink'
+import type { Reroute } from '../Reroute'
+import type { SubgraphOutput } from '../subgraph/SubgraphOutput'
+import type { NodeLike } from '../types/NodeLike'
+import type { SubgraphIO } from '../types/serialisation'
+
+import { LinkDirection } from '../types/globalEnums'
+
+import { MovingLinkBase } from "./MovingLinkBase"
+
+export class MovingInputLink extends MovingLinkBase {
+  override readonly toType = "input"
+
+  readonly node: LGraphNode
+  readonly fromSlot: INodeOutputSlot
+  readonly fromPos: Point
+  readonly fromDirection: LinkDirection
+  readonly fromSlotIndex: number
+
+  constructor(network: LinkNetwork, link: LLink, fromReroute?: Reroute, dragDirection: LinkDirection = LinkDirection.CENTER) {
+    super(network, link, "input", fromReroute, dragDirection)
+
+    this.node = this.outputNode
+    this.fromSlot = this.outputSlot
+    this.fromPos = fromReroute?.pos ?? this.outputPos
+    this.fromDirection = LinkDirection.NONE
+    this.fromSlotIndex = this.outputIndex
+  }
+
+  canConnectToInput(inputNode: NodeLike, input: INodeInputSlot | SubgraphIO): boolean {
+    return this.node.canConnectTo(inputNode, input, this.outputSlot)
+  }
+
+  canConnectToOutput(): false {
+    return false
+  }
+
+  canConnectToReroute(reroute: Reroute): boolean {
+    return reroute.origin_id !== this.inputNode.id
+  }
+
+  connectToInput(inputNode: LGraphNode, input: INodeInputSlot, events: CustomEventTarget<LinkConnectorEventMap>): LLink | null | undefined {
+    if (input === this.inputSlot) return
+
+    this.inputNode.disconnectInput(this.inputIndex, true)
+    const link = this.outputNode.connectSlots(this.outputSlot, inputNode, input, this.fromReroute?.id)
+    if (link) events.dispatch("input-moved", this)
+    return link
+  }
+
+  connectToOutput(): never {
+    throw new Error("MovingInputLink cannot connect to an output.")
+  }
+
+  connectToSubgraphInput(): void {
+    throw new Error("MovingInputLink cannot connect to a subgraph input.")
+  }
+
+  connectToSubgraphOutput(output: SubgraphOutput, events?: CustomEventTarget<LinkConnectorEventMap>): void {
+    const newLink = output.connect(this.fromSlot, this.node, this.fromReroute?.id)
+    events?.dispatch("link-created", newLink)
+  }
+
+  connectToRerouteInput(
+    reroute: Reroute,
+    { node: inputNode, input, link: existingLink }: { node: LGraphNode, input: INodeInputSlot, link: LLink },
+    events: CustomEventTarget<LinkConnectorEventMap>,
+    originalReroutes: Reroute[],
+  ): void {
+    const { outputNode, outputSlot, fromReroute } = this
+
+    // Clean up reroutes
+    for (const reroute of originalReroutes) {
+      if (reroute.id === this.link.parentId) break
+
+      if (reroute.totalLinks === 1) reroute.remove()
+    }
+    // Set the parentId of the reroute we dropped on, to the reroute we dragged from
+    reroute.parentId = fromReroute?.id
+
+    const newLink = outputNode.connectSlots(outputSlot, inputNode, input, existingLink.parentId)
+    if (newLink) events.dispatch("input-moved", this)
+  }
+
+  connectToRerouteOutput(): never {
+    throw new Error("MovingInputLink cannot connect to an output.")
+  }
+
+  disconnect(): boolean {
+    return this.inputNode.disconnectInput(this.inputIndex, true)
+  }
+}
diff --git a/src/lib/litegraph/src/canvas/MovingLinkBase.ts b/src/lib/litegraph/src/canvas/MovingLinkBase.ts
new file mode 100644
index 0000000000..f89fec651f
--- /dev/null
+++ b/src/lib/litegraph/src/canvas/MovingLinkBase.ts
@@ -0,0 +1,93 @@
+import type { RenderLink } from "./RenderLink"
+import type { CustomEventTarget } from '../infrastructure/CustomEventTarget'
+import type { LinkConnectorEventMap } from '../infrastructure/LinkConnectorEventMap'
+import type { INodeInputSlot, INodeOutputSlot, LinkNetwork, Point } from '../interfaces'
+import type { LGraphNode, NodeId } from '../LGraphNode'
+import type { LLink } from '../LLink'
+import type { Reroute } from '../Reroute'
+import type { SubgraphInput } from '../subgraph/SubgraphInput'
+import type { SubgraphOutput } from '../subgraph/SubgraphOutput'
+
+import { LinkDirection } from '../types/globalEnums'
+
+/**
+ * Represents an existing link that is currently being dragged by the user from one slot to another.
+ *
+ * This is a heavier, but short-lived convenience data structure.
+ * All refs to {@link MovingInputLink} and {@link MovingOutputLink} should be discarded on drop.
+ * @remarks
+ * At time of writing, Litegraph is using several different styles and methods to handle link dragging.
+ *
+ * Once the library has undergone more substantial changes to the way links are managed,
+ * many properties of this class will be superfluous and removable.
+ */
+
+export abstract class MovingLinkBase implements RenderLink {
+  abstract readonly node: LGraphNode
+  abstract readonly fromSlot: INodeOutputSlot | INodeInputSlot
+  abstract readonly fromPos: Point
+  abstract readonly fromDirection: LinkDirection
+  abstract readonly fromSlotIndex: number
+
+  readonly outputNodeId: NodeId
+  readonly outputNode: LGraphNode
+  readonly outputSlot: INodeOutputSlot
+  readonly outputIndex: number
+  readonly outputPos: Point
+
+  readonly inputNodeId: NodeId
+  readonly inputNode: LGraphNode
+  readonly inputSlot: INodeInputSlot
+  readonly inputIndex: number
+  readonly inputPos: Point
+
+  constructor(
+    readonly network: LinkNetwork,
+    readonly link: LLink,
+    readonly toType: "input" | "output",
+    readonly fromReroute?: Reroute,
+    readonly dragDirection: LinkDirection = LinkDirection.CENTER,
+  ) {
+    const {
+      origin_id: outputNodeId,
+      target_id: inputNodeId,
+      origin_slot: outputIndex,
+      target_slot: inputIndex,
+    } = link
+
+    // Store output info
+    const outputNode = network.getNodeById(outputNodeId) ?? undefined
+    if (!outputNode) throw new Error(`Creating MovingRenderLink for link [${link.id}] failed: Output node [${outputNodeId}] not found.`)
+
+    const outputSlot = outputNode.outputs.at(outputIndex)
+    if (!outputSlot) throw new Error(`Creating MovingRenderLink for link [${link.id}] failed: Output slot [${outputIndex}] not found.`)
+
+    this.outputNodeId = outputNodeId
+    this.outputNode = outputNode
+    this.outputSlot = outputSlot
+    this.outputIndex = outputIndex
+    this.outputPos = outputNode.getOutputPos(outputIndex)
+
+    // Store input info
+    const inputNode = network.getNodeById(inputNodeId) ?? undefined
+    if (!inputNode) throw new Error(`Creating DraggingRenderLink for link [${link.id}] failed: Input node [${inputNodeId}] not found.`)
+
+    const inputSlot = inputNode.inputs.at(inputIndex)
+    if (!inputSlot) throw new Error(`Creating DraggingRenderLink for link [${link.id}] failed: Input slot [${inputIndex}] not found.`)
+
+    this.inputNodeId = inputNodeId
+    this.inputNode = inputNode
+    this.inputSlot = inputSlot
+    this.inputIndex = inputIndex
+    this.inputPos = inputNode.getInputPos(inputIndex)
+  }
+
+  abstract connectToInput(node: LGraphNode, input: INodeInputSlot, events?: CustomEventTarget<LinkConnectorEventMap>): void
+  abstract connectToOutput(node: LGraphNode, output: INodeOutputSlot, events?: CustomEventTarget<LinkConnectorEventMap>): void
+  abstract connectToSubgraphInput(input: SubgraphInput, events?: CustomEventTarget<LinkConnectorEventMap>): void
+  abstract connectToSubgraphOutput(output: SubgraphOutput, events?: CustomEventTarget<LinkConnectorEventMap>): void
+  abstract connectToRerouteInput(reroute: Reroute, { node, input, link }: { node: LGraphNode, input: INodeInputSlot, link: LLink }, events: CustomEventTarget<LinkConnectorEventMap>, originalReroutes: Reroute[]): void
+  abstract connectToRerouteOutput(reroute: Reroute, outputNode: LGraphNode, output: INodeOutputSlot, events: CustomEventTarget<LinkConnectorEventMap>): void
+
+  abstract disconnect(): boolean
+}
diff --git a/src/lib/litegraph/src/canvas/MovingOutputLink.ts b/src/lib/litegraph/src/canvas/MovingOutputLink.ts
new file mode 100644
index 0000000000..036633f955
--- /dev/null
+++ b/src/lib/litegraph/src/canvas/MovingOutputLink.ts
@@ -0,0 +1,102 @@
+import type { CustomEventTarget } from '../infrastructure/CustomEventTarget'
+import type { LinkConnectorEventMap } from '../infrastructure/LinkConnectorEventMap'
+import type { INodeInputSlot, INodeOutputSlot, LinkNetwork, Point } from '../interfaces'
+import type { LGraphNode } from '../LGraphNode'
+import type { LLink } from '../LLink'
+import type { Reroute } from '../Reroute'
+import type { SubgraphInput } from '../subgraph/SubgraphInput'
+import type { NodeLike } from '../types/NodeLike'
+import type { SubgraphIO } from '../types/serialisation'
+
+import { LinkDirection } from '../types/globalEnums'
+
+import { MovingLinkBase } from "./MovingLinkBase"
+
+export class MovingOutputLink extends MovingLinkBase {
+  override readonly toType = "output"
+
+  readonly node: LGraphNode
+  readonly fromSlot: INodeInputSlot
+  readonly fromPos: Point
+  readonly fromDirection: LinkDirection
+  readonly fromSlotIndex: number
+
+  constructor(network: LinkNetwork, link: LLink, fromReroute?: Reroute, dragDirection: LinkDirection = LinkDirection.CENTER) {
+    super(network, link, "output", fromReroute, dragDirection)
+
+    this.node = this.inputNode
+    this.fromSlot = this.inputSlot
+    this.fromPos = fromReroute?.pos ?? this.inputPos
+    this.fromDirection = LinkDirection.LEFT
+    this.fromSlotIndex = this.inputIndex
+  }
+
+  canConnectToInput(): false {
+    return false
+  }
+
+  canConnectToOutput(outputNode: NodeLike, output: INodeOutputSlot | SubgraphIO): boolean {
+    return outputNode.canConnectTo(this.node, this.inputSlot, output)
+  }
+
+  canConnectToReroute(reroute: Reroute): boolean {
+    return reroute.origin_id !== this.outputNode.id
+  }
+
+  connectToInput(): never {
+    throw new Error("MovingOutputLink cannot connect to an input.")
+  }
+
+  connectToOutput(outputNode: LGraphNode, output: INodeOutputSlot, events: CustomEventTarget<LinkConnectorEventMap>): LLink | null | undefined {
+    if (output === this.outputSlot) return
+
+    const link = outputNode.connectSlots(output, this.inputNode, this.inputSlot, this.link.parentId)
+    if (link) events.dispatch("output-moved", this)
+    return link
+  }
+
+  connectToSubgraphInput(input: SubgraphInput, events?: CustomEventTarget<LinkConnectorEventMap>): void {
+    const newLink = input.connect(this.fromSlot, this.node, this.fromReroute?.id)
+    events?.dispatch("link-created", newLink)
+  }
+
+  connectToSubgraphOutput(): void {
+    throw new Error("MovingOutputLink cannot connect to a subgraph output.")
+  }
+
+  connectToRerouteInput(): never {
+    throw new Error("MovingOutputLink cannot connect to an input.")
+  }
+
+  connectToRerouteOutput(
+    reroute: Reroute,
+    outputNode: LGraphNode,
+    output: INodeOutputSlot,
+    events: CustomEventTarget<LinkConnectorEventMap>,
+  ): void {
+    // Moving output side of links
+    const { inputNode, inputSlot, fromReroute } = this
+
+    // Creating a new link removes floating prop - check before connecting
+    const floatingTerminus = reroute?.floating?.slotType === "output"
+
+    // Connect the first reroute of the link being dragged to the reroute being dropped on
+    if (fromReroute) {
+      fromReroute.parentId = reroute.id
+    } else {
+      // If there are no reroutes, directly connect the link
+      this.link.parentId = reroute.id
+    }
+    // Use the last reroute id on the link to retain all reroutes
+    outputNode.connectSlots(output, inputNode, inputSlot, this.link.parentId)
+
+    // Connecting from the final reroute of a floating reroute chain
+    if (floatingTerminus) reroute.removeAllFloatingLinks()
+
+    events.dispatch("output-moved", this)
+  }
+
+  disconnect(): boolean {
+    return this.outputNode.disconnectOutput(this.outputIndex, this.inputNode)
+  }
+}
diff --git a/src/lib/litegraph/src/canvas/RenderLink.ts b/src/lib/litegraph/src/canvas/RenderLink.ts
new file mode 100644
index 0000000000..cca8617a66
--- /dev/null
+++ b/src/lib/litegraph/src/canvas/RenderLink.ts
@@ -0,0 +1,50 @@
+import type { CustomEventTarget } from '../infrastructure/CustomEventTarget'
+import type { LinkConnectorEventMap } from '../infrastructure/LinkConnectorEventMap'
+import type { LinkNetwork, Point } from '../interfaces'
+import type { LGraphNode } from '../LGraphNode'
+import type { INodeInputSlot, INodeOutputSlot, LLink, Reroute } from '../litegraph'
+import type { SubgraphInput } from '../subgraph/SubgraphInput'
+import type { SubgraphIONodeBase } from '../subgraph/SubgraphIONodeBase'
+import type { SubgraphOutput } from '../subgraph/SubgraphOutput'
+import type { LinkDirection } from '../types/globalEnums'
+
+export interface RenderLink {
+  /** The type of link being connected. */
+  readonly toType: "input" | "output"
+  /** The source {@link Point} of the link being connected. */
+  readonly fromPos: Point
+  /** The direction the link starts off as.  If {@link toType} is `output`, this will be the direction the link input faces. */
+  readonly fromDirection: LinkDirection
+  /** If set, this will force a dragged link "point" from the cursor in the specified direction. */
+  dragDirection: LinkDirection
+
+  /** The network that the link belongs to. */
+  readonly network: LinkNetwork
+  /** The node that the link is being connected from. */
+  readonly node: LGraphNode | SubgraphIONodeBase<SubgraphInput | SubgraphOutput>
+  /** The slot that the link is being connected from. */
+  readonly fromSlot: INodeOutputSlot | INodeInputSlot | SubgraphInput | SubgraphOutput
+  /** The index of the slot that the link is being connected from. */
+  readonly fromSlotIndex: number
+  /** The reroute that the link is being connected from. */
+  readonly fromReroute?: Reroute
+
+  connectToInput(node: LGraphNode, input: INodeInputSlot, events?: CustomEventTarget<LinkConnectorEventMap>): void
+  connectToOutput(node: LGraphNode, output: INodeOutputSlot, events?: CustomEventTarget<LinkConnectorEventMap>): void
+  connectToSubgraphInput(input: SubgraphInput, events?: CustomEventTarget<LinkConnectorEventMap>): void
+  connectToSubgraphOutput(output: SubgraphOutput, events?: CustomEventTarget<LinkConnectorEventMap>): void
+
+  connectToRerouteInput(
+    reroute: Reroute,
+    { node, input, link }: { node: LGraphNode, input: INodeInputSlot, link: LLink },
+    events: CustomEventTarget<LinkConnectorEventMap>,
+    originalReroutes: Reroute[],
+  ): void
+
+  connectToRerouteOutput(
+    reroute: Reroute,
+    outputNode: LGraphNode,
+    output: INodeOutputSlot,
+    events: CustomEventTarget<LinkConnectorEventMap>,
+  ): void
+}
diff --git a/src/lib/litegraph/src/canvas/ToInputFromIoNodeLink.ts b/src/lib/litegraph/src/canvas/ToInputFromIoNodeLink.ts
new file mode 100644
index 0000000000..06b294de45
--- /dev/null
+++ b/src/lib/litegraph/src/canvas/ToInputFromIoNodeLink.ts
@@ -0,0 +1,113 @@
+import type { RenderLink } from "./RenderLink"
+import type { CustomEventTarget } from '../infrastructure/CustomEventTarget'
+import type { LinkConnectorEventMap } from '../infrastructure/LinkConnectorEventMap'
+import type { INodeInputSlot, LinkNetwork, Point } from '../interfaces'
+import type { LGraphNode } from '../LGraphNode'
+import type { LLink } from '../LLink'
+import type { Reroute } from '../Reroute'
+import type { SubgraphInput } from '../subgraph/SubgraphInput'
+import type { SubgraphInputNode } from '../subgraph/SubgraphInputNode'
+import type { NodeLike } from '../types/NodeLike'
+
+import { LinkDirection } from '../types/globalEnums'
+
+/** Connecting TO an input slot. */
+
+export class ToInputFromIoNodeLink implements RenderLink {
+  readonly toType = "input"
+  readonly fromSlotIndex: number
+  readonly fromPos: Point
+  fromDirection: LinkDirection = LinkDirection.RIGHT
+
+  constructor(
+    readonly network: LinkNetwork,
+    readonly node: SubgraphInputNode,
+    readonly fromSlot: SubgraphInput,
+    readonly fromReroute?: Reroute,
+    public dragDirection: LinkDirection = LinkDirection.CENTER,
+  ) {
+    const outputIndex = node.slots.indexOf(fromSlot)
+    if (outputIndex === -1 && fromSlot !== node.emptySlot) {
+      throw new Error(`Creating render link for node [${this.node.id}] failed: Slot index not found.`)
+    }
+
+    this.fromSlotIndex = outputIndex
+    this.fromPos = fromReroute
+      ? fromReroute.pos
+      : fromSlot.pos
+  }
+
+  canConnectToInput(inputNode: NodeLike, input: INodeInputSlot): boolean {
+    return this.node.canConnectTo(inputNode, input, this.fromSlot)
+  }
+
+  canConnectToOutput(): false {
+    return false
+  }
+
+  connectToInput(node: LGraphNode, input: INodeInputSlot, events: CustomEventTarget<LinkConnectorEventMap>) {
+    const { fromSlot, fromReroute } = this
+
+    const newLink = fromSlot.connect(input, node, fromReroute?.id)
+    events.dispatch("link-created", newLink)
+  }
+
+  connectToSubgraphOutput(): void {
+    throw new Error("Not implemented")
+  }
+
+  connectToRerouteInput(
+    reroute: Reroute,
+    {
+      node: inputNode,
+      input,
+      link,
+    }: { node: LGraphNode, input: INodeInputSlot, link: LLink },
+    events: CustomEventTarget<LinkConnectorEventMap>,
+    originalReroutes: Reroute[],
+  ) {
+    const { fromSlot, fromReroute } = this
+
+    // Check before creating new link overwrites the value
+    const floatingTerminus = fromReroute?.floating?.slotType === "output"
+
+    // Set the parentId of the reroute we dropped on, to the reroute we dragged from
+    reroute.parentId = fromReroute?.id
+
+    const newLink = fromSlot.connect(input, inputNode, link.parentId)
+
+    // Connecting from the final reroute of a floating reroute chain
+    if (floatingTerminus) fromReroute.removeAllFloatingLinks()
+
+    // Clean up reroutes
+    for (const reroute of originalReroutes) {
+      if (reroute.id === fromReroute?.id) break
+
+      reroute.removeLink(link)
+      if (reroute.totalLinks === 0) {
+        if (link.isFloating) {
+          // Cannot float from both sides - remove
+          reroute.remove()
+        } else {
+          // Convert to floating
+          const cl = link.toFloating("output", reroute.id)
+          this.network.addFloatingLink(cl)
+          reroute.floating = { slotType: "output" }
+        }
+      }
+    }
+    events.dispatch("link-created", newLink)
+  }
+
+  connectToOutput() {
+    throw new Error("ToInputRenderLink cannot connect to an output.")
+  }
+
+  connectToSubgraphInput(): void {
+    throw new Error("ToInputRenderLink cannot connect to a subgraph input.")
+  }
+
+  connectToRerouteOutput() {
+    throw new Error("ToInputRenderLink cannot connect to an output.")
+  }
+}
diff --git a/src/lib/litegraph/src/canvas/ToInputRenderLink.ts b/src/lib/litegraph/src/canvas/ToInputRenderLink.ts
new file mode 100644
index 0000000000..3823eead45
--- /dev/null
+++ b/src/lib/litegraph/src/canvas/ToInputRenderLink.ts
@@ -0,0 +1,112 @@
+import type { RenderLink } from "./RenderLink"
+import type { CustomEventTarget } from '../infrastructure/CustomEventTarget'
+import type { LinkConnectorEventMap } from '../infrastructure/LinkConnectorEventMap'
+import type { INodeInputSlot, INodeOutputSlot, LinkNetwork, Point } from '../interfaces'
+import type { LGraphNode } from '../LGraphNode'
+import type { LLink } from '../LLink'
+import type { Reroute } from '../Reroute'
+import type { SubgraphOutput } from '../subgraph/SubgraphOutput'
+import type { NodeLike } from '../types/NodeLike'
+
+import { LinkDirection } from '../types/globalEnums'
+
+/** Connecting TO an input slot. */
+
+export class ToInputRenderLink implements RenderLink {
+  readonly toType = "input"
+  readonly fromPos: Point
+  readonly fromSlotIndex: number
+  fromDirection: LinkDirection = LinkDirection.RIGHT
+
+  constructor(
+    readonly network: LinkNetwork,
+    readonly node: LGraphNode,
+    readonly fromSlot: INodeOutputSlot,
+    readonly fromReroute?: Reroute,
+    public dragDirection: LinkDirection = LinkDirection.CENTER,
+  ) {
+    const outputIndex = node.outputs.indexOf(fromSlot)
+    if (outputIndex === -1) throw new Error(`Creating render link for node [${this.node.id}] failed: Slot index not found.`)
+
+    this.fromSlotIndex = outputIndex
+    this.fromPos = fromReroute
+      ? fromReroute.pos
+      : this.node.getOutputPos(outputIndex)
+  }
+
+  canConnectToInput(inputNode: NodeLike, input: INodeInputSlot): boolean {
+    return this.node.canConnectTo(inputNode, input, this.fromSlot)
+  }
+
+  canConnectToOutput(): false {
+    return false
+  }
+
+  connectToInput(node: LGraphNode, input: INodeInputSlot, events: CustomEventTarget<LinkConnectorEventMap>) {
+    const { node: outputNode, fromSlot, fromReroute } = this
+    if (node === outputNode) return
+
+    const newLink = outputNode.connectSlots(fromSlot, node, input, fromReroute?.id)
+    events.dispatch("link-created", newLink)
+  }
+
+  connectToSubgraphOutput(output: SubgraphOutput, events: CustomEventTarget<LinkConnectorEventMap>) {
+    const newLink = output.connect(this.fromSlot, this.node, this.fromReroute?.id)
+    events.dispatch("link-created", newLink)
+  }
+
+  connectToRerouteInput(
+    reroute: Reroute,
+    {
+      node: inputNode,
+      input,
+      link,
+    }: { node: LGraphNode, input: INodeInputSlot, link: LLink },
+    events: CustomEventTarget<LinkConnectorEventMap>,
+    originalReroutes: Reroute[],
+  ) {
+    const { node: outputNode, fromSlot, fromReroute } = this
+
+    // Check before creating new link overwrites the value
+    const floatingTerminus = fromReroute?.floating?.slotType === "output"
+
+    // Set the parentId of the reroute we dropped on, to the reroute we dragged from
+    reroute.parentId = fromReroute?.id
+
+    const newLink = outputNode.connectSlots(fromSlot, inputNode, input, link.parentId)
+
+    // Connecting from the final reroute of a floating reroute chain
+    if (floatingTerminus) fromReroute.removeAllFloatingLinks()
+
+    // Clean up reroutes
+    for (const reroute of originalReroutes) {
+      if (reroute.id === fromReroute?.id) break
+
+      reroute.removeLink(link)
+      if (reroute.totalLinks === 0) {
+        if (link.isFloating) {
+          // Cannot float from both sides - remove
+          reroute.remove()
+        } else {
+          // Convert to floating
+          const cl = link.toFloating("output", reroute.id)
+          this.network.addFloatingLink(cl)
+          reroute.floating = { slotType: "output" }
+        }
+      }
+    }
+    events.dispatch("link-created", newLink)
+  }
+
+  connectToOutput() {
+    throw new Error("ToInputRenderLink cannot connect to an output.")
+  }
+
+  connectToSubgraphInput(): void {
+    throw new Error("ToInputRenderLink cannot connect to a subgraph input.")
+  }
+
+  connectToRerouteOutput() {
+    throw new Error("ToInputRenderLink cannot connect to an output.")
+  }
+}
diff --git a/src/lib/litegraph/src/canvas/ToOutputFromIoNodeLink.ts b/src/lib/litegraph/src/canvas/ToOutputFromIoNodeLink.ts
new file mode 100644
index 0000000000..59704837a4
--- /dev/null
+++ b/src/lib/litegraph/src/canvas/ToOutputFromIoNodeLink.ts
@@ -0,0 +1,87 @@
+import type { RenderLink } from "./RenderLink"
+import type { CustomEventTarget } from '../infrastructure/CustomEventTarget'
+import type { LinkConnectorEventMap } from '../infrastructure/LinkConnectorEventMap'
+import type { INodeOutputSlot, LinkNetwork, Point } from '../interfaces'
+import type { LGraphNode } from '../LGraphNode'
+import type { Reroute } from '../Reroute'
+import type { SubgraphOutput } from '../subgraph/SubgraphOutput'
+import type { SubgraphOutputNode } from '../subgraph/SubgraphOutputNode'
+import type { NodeLike } from '../types/NodeLike'
+import type { SubgraphIO } from '../types/serialisation'
+
+import { LinkDirection } from '../types/globalEnums'
+
+/** Connecting TO an output slot. */
+
+export class ToOutputFromIoNodeLink implements RenderLink {
+  readonly toType = "output"
+  readonly fromPos: Point
+  readonly fromSlotIndex: number
+  fromDirection: LinkDirection = LinkDirection.LEFT
+
+  constructor(
+    readonly network: LinkNetwork,
+    readonly node: SubgraphOutputNode,
+    readonly fromSlot: SubgraphOutput,
+    readonly fromReroute?: Reroute,
+    public dragDirection: LinkDirection = LinkDirection.CENTER,
+  ) {
+    const inputIndex = node.slots.indexOf(fromSlot)
+    if (inputIndex === -1 && fromSlot !== node.emptySlot) {
+      throw new Error(`Creating render link for node [${this.node.id}] failed: Slot index not found.`)
+    }
+
+    this.fromSlotIndex = inputIndex
+    this.fromPos = fromReroute
+      ? fromReroute.pos
+      : fromSlot.pos
+  }
+
+  canConnectToInput(): false {
+    return false
+  }
+
+  canConnectToOutput(outputNode: NodeLike, output: INodeOutputSlot | SubgraphIO): boolean {
+    return this.node.canConnectTo(outputNode, this.fromSlot, output)
+  }
+
+  canConnectToReroute(reroute: Reroute): boolean {
+    if (reroute.origin_id === this.node.id) return false
+    return true
+  }
+
+  connectToOutput(node: LGraphNode, output: INodeOutputSlot, events: CustomEventTarget<LinkConnectorEventMap>) {
+    const { fromSlot, fromReroute } = this
+
+    const newLink = fromSlot.connect(output, node, fromReroute?.id)
+    events.dispatch("link-created", newLink)
+  }
+
+  connectToSubgraphInput(): void {
+    throw new Error("Not implemented")
+  }
+
+  connectToRerouteOutput(
+    reroute: Reroute,
+    outputNode: LGraphNode,
+    output: INodeOutputSlot,
+    events: CustomEventTarget<LinkConnectorEventMap>,
+  ): void {
+    const { fromSlot } = this
+
+    const newLink = fromSlot.connect(output, outputNode, reroute?.id)
+    events.dispatch("link-created", newLink)
+  }
+
+  connectToInput() {
+    throw new Error("ToOutputRenderLink cannot connect to an input.")
+  }
+
+  connectToSubgraphOutput(): void {
+    throw new Error("ToOutputRenderLink cannot connect to a subgraph output.")
+  }
+
+  connectToRerouteInput() {
+    throw new Error("ToOutputRenderLink cannot connect to an input.")
+  }
+}
diff --git a/src/lib/litegraph/src/canvas/ToOutputFromRerouteLink.ts b/src/lib/litegraph/src/canvas/ToOutputFromRerouteLink.ts
new file mode 100644
index 0000000000..d38d52efa1
--- /dev/null
+++ b/src/lib/litegraph/src/canvas/ToOutputFromRerouteLink.ts
@@ -0,0 +1,31 @@
+import type { LinkConnector } from "./LinkConnector"
+import type { LGraphNode } from '../LGraphNode'
+import type { INodeInputSlot, INodeOutputSlot, LinkNetwork } from '../litegraph'
+import type { Reroute } from '../Reroute'
+
+import { ToInputRenderLink } from "./ToInputRenderLink"
+import { ToOutputRenderLink } from "./ToOutputRenderLink"
+
+/**
+ * @internal A workaround class to support connecting to reroutes to node outputs.
+ */
+export class ToOutputFromRerouteLink extends ToOutputRenderLink {
+  constructor(
+    network: LinkNetwork,
+    node: LGraphNode,
+    fromSlot: INodeInputSlot,
+    override readonly fromReroute: Reroute,
+    readonly linkConnector: LinkConnector,
+  ) {
+    super(network, node, fromSlot, fromReroute)
+  }
+
+  override canConnectToReroute(): false {
+    return false
+  }
+
+  override connectToOutput(node: LGraphNode, output: INodeOutputSlot) {
+    const nuRenderLink = new ToInputRenderLink(this.network, node, output)
+    this.linkConnector._connectOutputToReroute(this.fromReroute, nuRenderLink)
+  }
+}
diff --git a/src/lib/litegraph/src/canvas/ToOutputRenderLink.ts b/src/lib/litegraph/src/canvas/ToOutputRenderLink.ts
new file mode 100644
index 0000000000..efcf6b3dc6
--- /dev/null
+++ b/src/lib/litegraph/src/canvas/ToOutputRenderLink.ts
@@ -0,0 +1,85 @@
+import type { RenderLink } from "./RenderLink"
+import type { CustomEventTarget } from '../infrastructure/CustomEventTarget'
+import type { LinkConnectorEventMap } from '../infrastructure/LinkConnectorEventMap'
+import type { INodeInputSlot, INodeOutputSlot, LinkNetwork, Point } from '../interfaces'
+import type { LGraphNode } from '../LGraphNode'
+import type { Reroute } from '../Reroute'
+import type { SubgraphInput } from '../subgraph/SubgraphInput'
+import type { NodeLike } from '../types/NodeLike'
+import type { SubgraphIO } from '../types/serialisation'
+
+import { LinkDirection } from '../types/globalEnums'
+
+/** Connecting TO an output slot. */
+
+export class ToOutputRenderLink implements RenderLink {
+  readonly toType = "output"
+  readonly fromPos: Point
+  readonly fromSlotIndex: number
+  fromDirection: LinkDirection = LinkDirection.LEFT
+
+  constructor(
+    readonly network: LinkNetwork,
+    readonly node: LGraphNode,
+    readonly fromSlot: INodeInputSlot,
+    readonly fromReroute?: Reroute,
+    public dragDirection: LinkDirection = LinkDirection.CENTER,
+  ) {
+    const inputIndex = node.inputs.indexOf(fromSlot)
+    if (inputIndex === -1) throw new Error(`Creating render link for node [${this.node.id}] failed: Slot index not found.`)
+
+    this.fromSlotIndex = inputIndex
+    this.fromPos = fromReroute
+      ? fromReroute.pos
+      : this.node.getInputPos(inputIndex)
+  }
+
+  canConnectToInput(): false {
+    return false
+  }
+
+  canConnectToOutput(outputNode: NodeLike, output: INodeOutputSlot | SubgraphIO): boolean {
+    return this.node.canConnectTo(outputNode, this.fromSlot, output)
+  }
+
+  canConnectToReroute(reroute: Reroute): boolean {
+    if (reroute.origin_id === this.node.id) return false
+    return true
+  }
+
+  connectToOutput(node: LGraphNode, output: INodeOutputSlot, events: CustomEventTarget<LinkConnectorEventMap>) {
+    const { node: inputNode, fromSlot, fromReroute } = this
+    if (!inputNode) return
+
+    const newLink = node.connectSlots(output, inputNode, fromSlot, fromReroute?.id)
+    events.dispatch("link-created", newLink)
+  }
+
+  connectToSubgraphInput(input: SubgraphInput, events?: CustomEventTarget<LinkConnectorEventMap>): void {
+    const newLink = input.connect(this.fromSlot, this.node, this.fromReroute?.id)
+    events?.dispatch("link-created", newLink)
+  }
+
+  connectToRerouteOutput(
+    reroute: Reroute,
+    outputNode: LGraphNode,
+    output: INodeOutputSlot,
+    events: CustomEventTarget<LinkConnectorEventMap>,
+  ): void {
+    const { node: inputNode, fromSlot } = this
+    const newLink = outputNode.connectSlots(output, inputNode, fromSlot, reroute?.id)
+    events.dispatch("link-created", newLink)
+  }
+
+  connectToInput() {
+    throw new Error("ToOutputRenderLink cannot connect to an input.")
+  }
+
+  connectToSubgraphOutput(): void {
+    throw new Error("ToOutputRenderLink cannot connect to a subgraph output.")
+  }
+
+  connectToRerouteInput() {
+    throw new Error("ToOutputRenderLink cannot connect to an input.")
+  }
+}
diff --git a/src/lib/litegraph/src/canvas/measureSlots.ts b/src/lib/litegraph/src/canvas/measureSlots.ts
new file mode 100644
index 0000000000..2d9c54f0d6
--- /dev/null
+++ b/src/lib/litegraph/src/canvas/measureSlots.ts
@@ -0,0 +1,89 @@
+import type { INodeInputSlot, INodeOutputSlot, Point } from '../interfaces'
+import type { LGraphNode } from '../LGraphNode'
+
+import { isInRectangle } from '../measure'
+
+export function getNodeInputOnPos(node: LGraphNode, x: number, y: number): { index: number, input: INodeInputSlot, pos: Point } | undefined {
+  const { inputs } = node
+  if (!inputs) return
+
+  for (const [index, input] of inputs.entries()) {
+    const pos = node.getInputPos(index)
+
+    // TODO: Find a cheap way to measure text, and do it on node label change instead of here
+    // Input icon width + text approximation
+    const nameLength = input.label?.length ?? input.localized_name?.length ?? input.name?.length
+    const width = 20 + (nameLength || 3) * 7
+
+    if (isInRectangle(
+      x,
+      y,
+      pos[0] - 10,
+      pos[1] - 10,
+      width,
+      20,
+    )) {
+      return { index, input, pos }
+    }
+  }
+}
+
+export function getNodeOutputOnPos(node: LGraphNode, x: number, y: number): { index: number, output: INodeOutputSlot, pos: Point } | undefined {
+  const { outputs } = node
+  if (!outputs) return
+
+  for (const [index, output] of outputs.entries()) {
+    const pos = node.getOutputPos(index)
+
+    if (isInRectangle(
+      x,
+      y,
+      pos[0] - 10,
+      pos[1] - 10,
+      40,
+      20,
+    )) {
+      return { index, output, pos }
+    }
+  }
+}
+
+/**
+ * Returns the input slot index if the given position (in graph space) is on top of a node input slot.
+ * A helper function - originally on the prototype of LGraphCanvas.
+ */
+export function isOverNodeInput(
+  node: LGraphNode,
+  canvasx: number,
+  canvasy: number,
+  slot_pos?: Point,
+): number {
+  const result = getNodeInputOnPos(node, canvasx, canvasy)
+  if (!result) return -1
+
+  if (slot_pos) {
+    slot_pos[0] = result.pos[0]
+    slot_pos[1] = result.pos[1]
+  }
+  return result.index
+}
+
+/**
+ * Returns the output slot index if the given position (in graph space) is on top of a node output slot.
+ * A helper function - originally on the prototype of LGraphCanvas.
+ */
+export function isOverNodeOutput(
+  node: LGraphNode,
+  canvasx: number,
+  canvasy: number,
+  slot_pos?: Point,
+): number {
+  const result = getNodeOutputOnPos(node, canvasx, canvasy)
+  if (!result) return -1
+
+  if (slot_pos) {
+    slot_pos[0] = result.pos[0]
+    slot_pos[1] = result.pos[1]
+  }
+  return result.index
+}
diff --git a/src/lib/litegraph/src/constants.ts b/src/lib/litegraph/src/constants.ts
new file mode 100644
index 0000000000..8f0b7a9099
--- /dev/null
+++ b/src/lib/litegraph/src/constants.ts
@@ -0,0 +1,11 @@
+/**
+ * Subgraph constants
+ *
+ * This entire module is exported as `Constants`.
+ */
+
+/** ID of the virtual input node of a subgraph. */
+export const SUBGRAPH_INPUT_ID = -10
+
+/** ID of the virtual output node of a subgraph. */
+export const SUBGRAPH_OUTPUT_ID = -20
diff --git a/src/lib/litegraph/src/draw.ts b/src/lib/litegraph/src/draw.ts
new file mode 100644
index 0000000000..f798100918
--- /dev/null
+++ b/src/lib/litegraph/src/draw.ts
@@ -0,0 +1,240 @@
+import type { Rectangle } from "./infrastructure/Rectangle"
+import type { CanvasColour, Rect } from "./interfaces"
+
+import { LiteGraph } from "./litegraph"
+import { LinkDirection, RenderShape, TitleMode } from "./types/globalEnums"
+
+const ELLIPSIS = "\u2026"
+const TWO_DOT_LEADER = "\u2025"
+const ONE_DOT_LEADER = "\u2024"
+
+export enum SlotType {
+  Array = "array",
+  Event = -1,
+}
+
+/** @see RenderShape */
+export enum SlotShape {
+  Box = RenderShape.BOX,
+  Arrow = RenderShape.ARROW,
+  Grid = RenderShape.GRID,
+  Circle = RenderShape.CIRCLE,
+  HollowCircle = RenderShape.HollowCircle,
+}
+
+/** @see LinkDirection */
+export enum SlotDirection {
+  Up = LinkDirection.UP,
+  Right = LinkDirection.RIGHT,
+  Down = LinkDirection.DOWN,
+  Left = LinkDirection.LEFT,
+}
+
+export enum LabelPosition {
+  Left = "left",
+  Right = "right",
+}
+
+export interface IDrawBoundingOptions {
+  /** The shape to render */
+  shape?: RenderShape
+  /** The radius of the rounded corners for {@link RenderShape.ROUND} and {@link RenderShape.CARD} */
+  round_radius?: number
+  /** Shape will extend above the Y-axis 0 by this amount @deprecated This is node-specific: it should be removed entirely, and behaviour defined by the caller more explicitly */
+  title_height?: number
+  /** @deprecated This is node-specific: it should be removed entirely, and behaviour defined by the caller more explicitly */
+  title_mode?: TitleMode
+  /** The color that should be drawn */
+  color?: CanvasColour
+  /** The distance between the edge of the {@link area} and the middle of the line */
+  padding?: number
+  /** @deprecated This is node-specific: it should be removed entirely, and behaviour defined by the caller more explicitly */
+  collapsed?: boolean
+  /** Thickness of the line drawn (`lineWidth`) */
+  lineWidth?: number
+}
+
+export interface IDrawTextInAreaOptions {
+  /** The canvas to draw the text on. */
+  ctx: CanvasRenderingContext2D
+  /** The text to draw. */
+  text: string
+  /** The area the text will be drawn in. */
+  area: Rectangle
+  /** The alignment of the text. */
+  align?: "left" | "right" | "center"
+}
+
+/**
+ * Draws only the path of a shape on the canvas, without filling.
+ * Used to draw indicators for node status, e.g. "selected".
+ * @param ctx The 2D context to draw on
+ * @param area The position and size of the shape to render
+ */
+export function strokeShape(
+  ctx: CanvasRenderingContext2D,
+  area: Rect,
+  {
+    shape = RenderShape.BOX,
+    round_radius,
+    title_height,
+    title_mode = TitleMode.NORMAL_TITLE,
+    color,
+    padding = 6,
+    collapsed = false,
+    lineWidth: thickness = 1,
+  }: IDrawBoundingOptions = {},
+): void {
+  // These param defaults are not compile-time static, and must be re-evaluated at runtime
+  round_radius ??= LiteGraph.ROUND_RADIUS
+  color ??= LiteGraph.NODE_BOX_OUTLINE_COLOR
+
+  // Adjust area if title is transparent
+  if (title_mode === TitleMode.TRANSPARENT_TITLE) {
+    const height = title_height ?? LiteGraph.NODE_TITLE_HEIGHT
+    area[1] -= height
+    area[3] += height
+  }
+
+  // Set up context
+  const { lineWidth, strokeStyle } = ctx
+  ctx.lineWidth = thickness
+  ctx.globalAlpha = 0.8
+  ctx.strokeStyle = color
+  ctx.beginPath()
+
+  // Draw shape based on type
+  const [x, y, width, height] = area
+  switch (shape) {
+  case RenderShape.BOX: {
+    ctx.rect(
+      x - padding,
+      y - padding,
+      width + 2 * padding,
+      height + 2 * padding,
+    )
+    break
+  }
+  case RenderShape.ROUND:
+  case RenderShape.CARD: {
+    const radius = round_radius + padding
+    const isCollapsed = shape === RenderShape.CARD && collapsed
+    const cornerRadii =
+        isCollapsed || shape === RenderShape.ROUND
+          ? [radius]
+          : [radius, 2, radius, 2]
+    ctx.roundRect(
+      x - padding,
+      y - padding,
+      width + 2 * padding,
+      height + 2 * padding,
+      cornerRadii,
+    )
+    break
+  }
+  case RenderShape.CIRCLE: {
+    const centerX = x + width / 2
+    const centerY = y + height / 2
+    const radius = Math.max(width, height) / 2 + padding
+    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2)
+    break
+  }
+  }
+
+  // Stroke the shape
+  ctx.stroke()
+
+  // Reset context
+  ctx.lineWidth = lineWidth
+  ctx.strokeStyle = strokeStyle
+
+  // TODO: Store and reset value properly.  Callers currently expect this behaviour (e.g. muted nodes).
+  ctx.globalAlpha = 1
+}
+
+/**
+ * Truncates text using binary search to fit within a given width, appending an ellipsis if needed.
+ * @param ctx The canvas rendering context.
+ * @param text The text to truncate.
+ * @param maxWidth The maximum width the text (plus ellipsis) can occupy.
+ * @returns The truncated text, or the original text if it fits.
+ */
+function truncateTextToWidth(ctx: CanvasRenderingContext2D, text: string, maxWidth: number): string {
+  if (!(maxWidth > 0)) return ""
+
+  // Text fits
+  const fullWidth = ctx.measureText(text).width
+  if (fullWidth <= maxWidth) return text
+
+  const ellipsisWidth = ctx.measureText(ELLIPSIS).width * 0.75
+
+  // Can't even fit ellipsis
+  if (ellipsisWidth > maxWidth) {
+    const twoDotsWidth = ctx.measureText(TWO_DOT_LEADER).width * 0.75
+    if (twoDotsWidth < maxWidth) return TWO_DOT_LEADER
+
+    const oneDotWidth = ctx.measureText(ONE_DOT_LEADER).width * 0.75
+    return oneDotWidth < maxWidth ? ONE_DOT_LEADER : ""
+  }
+
+  let min = 0
+  let max = text.length
+  let bestLen = 0
+
+  // Binary search for the longest substring that fits with the ellipsis
+  while (min <= max) {
+    const mid = Math.floor((min + max) * 0.5)
+
+    // Avoid measuring empty string + ellipsis
+    if (mid === 0) {
+      min = mid + 1
+      continue
+    }
+
+    const sub = text.substring(0, mid)
+    const currentWidth = ctx.measureText(sub).width + ellipsisWidth
+
+    if (currentWidth <= maxWidth) {
+      // This length fits, try potentially longer
+      bestLen = mid
+      min = mid + 1
+    } else {
+      // Too long, try shorter
+      max = mid - 1
+    }
+  }
+
+  return bestLen === 0
+    ? ELLIPSIS
+    : text.substring(0, bestLen) + ELLIPSIS
+}
+
+/**
+ * Draws text within an area, truncating it and adding an ellipsis if necessary.
+ */
+export function drawTextInArea({ ctx, text, area, align = "left" }: IDrawTextInAreaOptions) {
+  const { left, right, bottom, width, centreX } = area
+
+  // Text already fits
+  const fullWidth = ctx.measureText(text).width
+  if (fullWidth <= width) {
+    ctx.textAlign = align
+    const x = align === "left" ? left : (align === "right" ? right : centreX)
+    ctx.fillText(text, x, bottom)
+    return
+  }
+
+  // Need to truncate text
+  const truncated = truncateTextToWidth(ctx, text, width)
+  if (truncated.length === 0) return
+
+  // Draw text - left-aligned to prevent bouncing during resize
+  ctx.textAlign = "left"
+  ctx.fillText(truncated.slice(0, -1), left, bottom)
+  ctx.rect(left, bottom, width, 1)
+
+  // Draw the ellipsis, right-aligned to the button
+  ctx.textAlign = "right"
+  const ellipsis = truncated.at(-1)!
+  ctx.fillText(ellipsis, right, bottom, ctx.measureText(ellipsis).width * 0.75)
+}
diff --git a/src/lib/litegraph/src/infrastructure/ConstrainedSize.ts b/src/lib/litegraph/src/infrastructure/ConstrainedSize.ts
new file mode 100644
index 0000000000..0d2132d77c
--- /dev/null
+++ b/src/lib/litegraph/src/infrastructure/ConstrainedSize.ts
@@ -0,0 +1,75 @@
+import type { ReadOnlyRect, ReadOnlySize, Size } from '../interfaces'
+
+import { clamp } from '../litegraph'
+
+/**
+ * Basic width and height, with min/max constraints.
+ *
+ * - The {@link width} and {@link height} properties are readonly
+ * - Size is set via {@link desiredWidth} and {@link desiredHeight} properties
+ * - Width and height are then updated, clamped to min/max values
+ */
+export class ConstrainedSize {
+  #width: number = 0
+  #height: number = 0
+  #desiredWidth: number = 0
+  #desiredHeight: number = 0
+
+  minWidth: number = 0
+  minHeight: number = 0
+  maxWidth: number = Infinity
+  maxHeight: number = Infinity
+
+  get width() {
+    return this.#width
+  }
+
+  get height() {
+    return this.#height
+  }
+
+  get desiredWidth() {
+    return this.#desiredWidth
+  }
+
+  set desiredWidth(value: number) {
+    this.#desiredWidth = value
+    this.#width = clamp(value, this.minWidth, this.maxWidth)
+  }
+
+  get desiredHeight() {
+    return this.#desiredHeight
+  }
+
+  set desiredHeight(value: number) {
+    this.#desiredHeight = value
+    this.#height = clamp(value, this.minHeight, this.maxHeight)
+  }
+
+  constructor(width: number, height: number) {
+    this.desiredWidth = width
+    this.desiredHeight = height
+  }
+
+  static fromSize(size: ReadOnlySize): ConstrainedSize {
+    return new ConstrainedSize(size[0], size[1])
+  }
+
+  static fromRect(rect: ReadOnlyRect): ConstrainedSize {
+    return new ConstrainedSize(rect[2], rect[3])
+  }
+
+  setSize(size: ReadOnlySize): void {
+    this.desiredWidth = size[0]
+    this.desiredHeight = size[1]
+  }
+
+  setValues(width: number, height: number): void {
+    this.desiredWidth = width
+    this.desiredHeight = height
+  }
+
+  toSize(): Size {
+    return [this.#width, this.#height]
+  }
+}
diff --git a/src/lib/litegraph/src/infrastructure/CustomEventTarget.ts b/src/lib/litegraph/src/infrastructure/CustomEventTarget.ts
new file mode 100644
index 0000000000..ee2af803b6
--- /dev/null
+++ b/src/lib/litegraph/src/infrastructure/CustomEventTarget.ts
@@ -0,0 +1,118 @@
+import type { NeverNever, PickNevers } from '../types/utility'
+
+type EventListeners<T> = {
+  readonly [K in keyof T]: ((this: EventTarget, ev: CustomEvent<T[K]>) => any) | EventListenerObject | null
+}
+
+/**
+ * Has strongly-typed overrides of {@link EventTarget.addEventListener} and {@link EventTarget.removeEventListener}.
+ */
+export interface ICustomEventTarget<
+  EventMap extends Record<Keys, unknown>,
+  Keys extends keyof EventMap & string = keyof EventMap & string,
+> {
+  addEventListener<K extends Keys>(
+    type: K,
+    listener: EventListeners<EventMap>[K],
+    options?: boolean | AddEventListenerOptions,
+  ): void
+
+  removeEventListener<K extends Keys>(
+    type: K,
+    listener: EventListeners<EventMap>[K],
+    options?: boolean | EventListenerOptions,
+  ): void
+
+  /** @deprecated Use {@link dispatch}. */
+  dispatchEvent(event: never): boolean
+}
+
+/**
+ * Capable of dispatching strongly-typed events via {@link dispatch}.
+ * Overloads are used to ensure detail param is correctly optional.
+ */
+export interface CustomEventDispatcher<
+  EventMap extends Record<Keys, unknown>,
+  Keys extends keyof EventMap & string = keyof EventMap & string,
+> {
+  dispatch<T extends keyof NeverNever<EventMap>>(type: T, detail: EventMap[T]): boolean
+  dispatch<T extends keyof PickNevers<EventMap>>(type: T): boolean
+}
+
+/**
+ * A strongly-typed, custom {@link EventTarget} that can dispatch and listen for events.
+ *
+ * 1. Define an event map
+ *    ```ts
+ *    export interface CustomEventMap {
+ *      "my-event": { message: string }
+ *      "simple-event": never
+ *    }
+ *    ```
+ *
+ * 2. Create an event emitter
+ *    ```ts
+ *    // By subclassing
+ *    class MyClass extends CustomEventTarget<CustomEventMap> {
+ *      // ...
+ *    }
+ *
+ *    // Or simply create an instance:
+ *    const events = new CustomEventTarget<CustomEventMap>()
+ *    ```
+ *
+ * 3. Dispatch events
+ *    ```ts
+ *    // Extended class
+ *    const myClass = new MyClass()
+ *    myClass.dispatch("my-event", { message: "Hello, world!" })
+ *    myClass.dispatch("simple-event")
+ *
+ *    // Instance
+ *    const events = new CustomEventTarget<CustomEventMap>()
+ *    events.dispatch("my-event", { message: "Hello, world!" })
+ *    events.dispatch("simple-event")
+ *    ```
+ */
+export class CustomEventTarget<
+  EventMap extends Record<Keys, unknown>,
+  Keys extends keyof EventMap & string = keyof EventMap & string,
+>
+  extends EventTarget implements ICustomEventTarget<EventMap, Keys> {
+  /**
+   * Type-safe event dispatching.
+   * @see {@link EventTarget.dispatchEvent}
+   * @param type Name of the event to dispatch
+   * @param detail A custom object to send with the event
+   * @returns `true` if the event was dispatched successfully, otherwise `false`.
+   */
+  dispatch<T extends keyof NeverNever<EventMap>>(type: T, detail: EventMap[T]): boolean
+  dispatch<T extends keyof PickNevers<EventMap>>(type: T): boolean
+  dispatch<T extends keyof EventMap>(type: T, detail?: EventMap[T]) {
+    const event = new CustomEvent(type as string, { detail, cancelable: true })
+    return super.dispatchEvent(event)
+  }
+
+  override addEventListener<K extends Keys>(
+    type: K,
+    listener: EventListeners<EventMap>[K],
+    options?: boolean | AddEventListenerOptions,
+  ): void {
+    // Assertion: Contravariance on CustomEvent => Event
+    super.addEventListener(type as string, listener as EventListener, options)
+  }
+
+  override removeEventListener<K extends Keys>(
+    type: K,
+    listener: EventListeners<EventMap>[K],
+    options?: boolean | EventListenerOptions,
+  ): void {
+    // Assertion: Contravariance on CustomEvent => Event
+    super.removeEventListener(type as string, listener as EventListener, options)
+  }
+
+  /** @deprecated Use {@link dispatch}. */
+  override dispatchEvent(event: never): boolean {
+    return super.dispatchEvent(event)
+  }
+}
diff --git a/src/lib/litegraph/src/infrastructure/InvalidLinkError.ts b/src/lib/litegraph/src/infrastructure/InvalidLinkError.ts
new file mode 100644
index 0000000000..d5ffa0f857
--- /dev/null
+++ b/src/lib/litegraph/src/infrastructure/InvalidLinkError.ts
@@ -0,0 +1,6 @@
+export class InvalidLinkError extends Error {
+  constructor(message: string = "Attempted to access a link that was invalid.", cause?: Error) {
+    super(message, { cause })
+    this.name = "InvalidLinkError"
+  }
+}
diff --git a/src/lib/litegraph/src/infrastructure/LGraphCanvasEventMap.ts b/src/lib/litegraph/src/infrastructure/LGraphCanvasEventMap.ts
new file mode 100644
index 0000000000..2b3c0183e4
--- /dev/null
+++ b/src/lib/litegraph/src/infrastructure/LGraphCanvasEventMap.ts
@@ -0,0 +1,38 @@
+import type { ConnectingLink } from '../interfaces'
+import type { LGraph } from '../LGraph'
+import type { LGraphGroup } from '../LGraphGroup'
+import type { LGraphNode } from '../LGraphNode'
+import type { Subgraph } from '../subgraph/Subgraph'
+import type { CanvasPointerEvent } from '../types/events'
+
+export interface LGraphCanvasEventMap {
+  /** The active graph has changed. */
+  "litegraph:set-graph": {
+    /** The new active graph. */
+    newGraph: LGraph | Subgraph
+    /** The old active graph, or `null` if there was no active graph. */
+    oldGraph: LGraph | Subgraph | null | undefined
+  }
+
+  "litegraph:canvas":
+    | { subType: "before-change" | "after-change" }
+    | {
+      subType: "empty-release"
+      originalEvent?: CanvasPointerEvent
+      linkReleaseContext?: { links: ConnectingLink[] }
+    }
+    | {
+      subType: "group-double-click"
+      originalEvent?: CanvasPointerEvent
+      group: LGraphGroup
+    }
+    | {
+      subType: "empty-double-click"
+      originalEvent?: CanvasPointerEvent
+    }
+    | {
+      subType: "node-double-click"
+      originalEvent?: CanvasPointerEvent
+      node: LGraphNode
+    }
+}
diff --git a/src/lib/litegraph/src/infrastructure/LGraphEventMap.ts b/src/lib/litegraph/src/infrastructure/LGraphEventMap.ts
new file mode 100644
index 0000000000..75906cfd98
--- /dev/null
+++ b/src/lib/litegraph/src/infrastructure/LGraphEventMap.ts
@@ -0,0 +1,47 @@
+import type { ReadOnlyRect } from '../interfaces'
+import type { LGraph } from '../LGraph'
+import type { LLink, ResolvedConnection } from '../LLink'
+import type { Subgraph } from '../subgraph/Subgraph'
+import type { ExportedSubgraph, ISerialisedGraph, SerialisableGraph } from '../types/serialisation'
+
+export interface LGraphEventMap {
+  "configuring": {
+    /** The data that was used to configure the graph. */
+    data: ISerialisedGraph | SerialisableGraph
+    /** If `true`, the graph will be cleared prior to adding the configuration. */
+    clearGraph: boolean
+  }
+  "configured": never
+
+  "subgraph-created": {
+    /** The subgraph that was created. */
+    subgraph: Subgraph
+    /** The raw data that was used to create the subgraph. */
+    data: ExportedSubgraph
+  }
+
+  /** Dispatched when a group of items are converted to a subgraph. */
+  "convert-to-subgraph": {
+    /** The type of subgraph to create. */
+    subgraph: Subgraph
+    /** The boundary around every item that was moved into the subgraph. */
+    bounds: ReadOnlyRect
+    /** The raw data that was used to create the subgraph. */
+    exportedSubgraph: ExportedSubgraph
+    /** The links that were used to create the subgraph. */
+    boundaryLinks: LLink[]
+    /** Links that go from outside the subgraph in, via an input on the subgraph node. */
+    resolvedInputLinks: ResolvedConnection[]
+    /** Links that go from inside the subgraph out, via an output on the subgraph node. */
+    resolvedOutputLinks: ResolvedConnection[]
+    /** The floating links that were used to create the subgraph. */
+    boundaryFloatingLinks: LLink[]
+    /** The internal links that were used to create the subgraph. */
+    internalLinks: LLink[]
+  }
+
+  "open-subgraph": {
+    subgraph: Subgraph
+    closingGraph: LGraph | Subgraph
+  }
+}
diff --git a/src/lib/litegraph/src/infrastructure/LinkConnectorEventMap.ts b/src/lib/litegraph/src/infrastructure/LinkConnectorEventMap.ts
new file mode 100644
index 0000000000..6c806593eb
--- /dev/null
+++ b/src/lib/litegraph/src/infrastructure/LinkConnectorEventMap.ts
@@ -0,0 +1,53 @@
+import type { FloatingRenderLink } from '../canvas/FloatingRenderLink'
+import type { MovingInputLink } from '../canvas/MovingInputLink'
+import type { MovingOutputLink } from '../canvas/MovingOutputLink'
+import type { RenderLink } from '../canvas/RenderLink'
+import type { ToInputRenderLink } from '../canvas/ToInputRenderLink'
+import type { LGraphNode } from '../LGraphNode'
+import type { LLink } from '../LLink'
+import type { Reroute } from '../Reroute'
+import type { SubgraphInputNode } from '../subgraph/SubgraphInputNode'
+import type { SubgraphOutputNode } from '../subgraph/SubgraphOutputNode'
+import type { CanvasPointerEvent } from '../types/events'
+import type { IWidget } from '../types/widgets'
+
+export interface LinkConnectorEventMap {
+  "reset": boolean
+
+  "before-drop-links": {
+    renderLinks: RenderLink[]
+    event: CanvasPointerEvent
+  }
+  "after-drop-links": {
+    renderLinks: RenderLink[]
+    event: CanvasPointerEvent
+  }
+
+  "before-move-input": MovingInputLink | FloatingRenderLink
+  "before-move-output": MovingOutputLink | FloatingRenderLink
+
+  "input-moved": MovingInputLink | FloatingRenderLink
+  "output-moved": MovingOutputLink | FloatingRenderLink
+
+  "link-created": LLink | null | undefined
+
+  "dropped-on-reroute": {
+    reroute: Reroute
+    event: CanvasPointerEvent
+  }
+  "dropped-on-node": {
+    node: LGraphNode
+    event: CanvasPointerEvent
+  }
+  "dropped-on-io-node": {
+    node: SubgraphInputNode | SubgraphOutputNode
+    event: CanvasPointerEvent
+  }
+  "dropped-on-canvas": CanvasPointerEvent
+
+  "dropped-on-widget": {
+    link: ToInputRenderLink
+    node: LGraphNode
+    widget: IWidget
+  }
+}
diff --git a/src/lib/litegraph/src/infrastructure/NullGraphError.ts b/src/lib/litegraph/src/infrastructure/NullGraphError.ts
new file mode 100644
index 0000000000..a83984ef31
--- /dev/null
+++ b/src/lib/litegraph/src/infrastructure/NullGraphError.ts
@@ -0,0 +1,6 @@
+export class NullGraphError extends Error {
+  constructor(message: string = "Attempted to access LGraph reference that was null or undefined.", cause?: Error) {
+    super(message, { cause })
+    this.name = "NullGraphError"
+  }
+}
diff --git a/src/lib/litegraph/src/infrastructure/Rectangle.ts b/src/lib/litegraph/src/infrastructure/Rectangle.ts
new file mode 100644
index 0000000000..1181ae44be
--- /dev/null
+++ b/src/lib/litegraph/src/infrastructure/Rectangle.ts
@@ -0,0 +1,424 @@
+import type { CompassCorners, Point, ReadOnlyPoint, ReadOnlyRect, ReadOnlySize, ReadOnlyTypedArray, Size } from '../interfaces'
+
+import { isInRectangle } from '../measure'
+
+/**
+ * A rectangle, represented as a float64 array of 4 numbers: [x, y, width, height].
+ *
+ * This class is a subclass of Float64Array, and so has all the methods of that class.  Notably,
+ * {@link Rectangle.from} can be used to convert a {@link ReadOnlyRect}. Typing of this however,
+ * is broken due to the base TS lib returning Float64Array rather than `this`.
+ *
+ * Sub-array properties ({@link Float64Array.subarray}):
+ * - {@link pos}: The position of the top-left corner of the rectangle.
+ * - {@link size}: The size of the rectangle.
+ */
+export class Rectangle extends Float64Array {
+  #pos: Point | undefined
+  #size: Size | undefined
+
+  constructor(x: number = 0, y: number = 0, width: number = 0, height: number = 0) {
+    super(4)
+
+    this[0] = x
+    this[1] = y
+    this[2] = width
+    this[3] = height
+  }
+
+  static override from([x, y, width, height]: ReadOnlyRect): Rectangle {
+    return new Rectangle(x, y, width, height)
+  }
+
+  /**
+   * Creates a new rectangle positioned at the given centre, with the given width/height.
+   * @param centre The centre of the rectangle, as an `[x, y]` point
+   * @param width The width of the rectangle
+   * @param height The height of the rectangle.  Default: {@link width}
+   * @returns A new rectangle whose centre is at {@link x}
+   */
+  static fromCentre([x, y]: ReadOnlyPoint, width: number, height = width): Rectangle {
+    const left = x - width * 0.5
+    const top = y - height * 0.5
+    return new Rectangle(left, top, width, height)
+  }
+
+  static ensureRect(rect: ReadOnlyRect): Rectangle {
+    return rect instanceof Rectangle
+      ? rect
+      : new Rectangle(rect[0], rect[1], rect[2], rect[3])
+  }
+
+  override subarray(begin: number = 0, end?: number): Float64Array {
+    const byteOffset = begin << 3
+    const length = end === undefined ? end : end - begin
+    return new Float64Array(this.buffer, byteOffset, length)
+  }
+
+  /**
+   * A reference to the position of the top-left corner of this rectangle.
+   *
+   * Updating the values of the returned object will update this rectangle.
+   */
+  get pos(): Point {
+    this.#pos ??= this.subarray(0, 2) as unknown as Point
+    return this.#pos
+  }
+
+  set pos(value: ReadOnlyPoint) {
+    this[0] = value[0]
+    this[1] = value[1]
+  }
+
+  /**
+   * A reference to the size of this rectangle.
+   *
+   * Updating the values of the returned object will update this rectangle.
+   */
+  get size(): Size {
+    this.#size ??= this.subarray(2, 4) as unknown as Size
+    return this.#size
+  }
+
+  set size(value: ReadOnlySize) {
+    this[2] = value[0]
+    this[3] = value[1]
+  }
+
+  // #region Property accessors
+  /** The x co-ordinate of the top-left corner of this rectangle. */
+  get x() {
+    return this[0]
+  }
+
+  set x(value: number) {
+    this[0] = value
+  }
+
+  /** The y co-ordinate of the top-left corner of this rectangle. */
+  get y() {
+    return this[1]
+  }
+
+  set y(value: number) {
+    this[1] = value
+  }
+
+  /** The width of this rectangle. */
+  get width() {
+    return this[2]
+  }
+
+  set width(value: number) {
+    this[2] = value
+  }
+
+  /** The height of this rectangle. */
+  get height() {
+    return this[3]
+  }
+
+  set height(value: number) {
+    this[3] = value
+  }
+
+  /** The x co-ordinate of the left edge of this rectangle. */
+  get left() {
+    return this[0]
+  }
+
+  set left(value: number) {
+    this[0] = value
+  }
+
+  /** The y co-ordinate of the top edge of this rectangle. */
+  get top() {
+    return this[1]
+  }
+
+  set top(value: number) {
+    this[1] = value
+  }
+
+  /** The x co-ordinate of the right edge of this rectangle. */
+  get right() {
+    return this[0] + this[2]
+  }
+
+  set right(value: number) {
+    this[0] = value - this[2]
+  }
+
+  /** The y co-ordinate of the bottom edge of this rectangle. */
+  get bottom() {
+    return this[1] + this[3]
+  }
+
+  set bottom(value: number) {
+    this[1] = value - this[3]
+  }
+
+  /** The x co-ordinate of the centre of this rectangle. */
+  get centreX() {
+    return this[0] + (this[2] * 0.5)
+  }
+
+  /** The y co-ordinate of the centre of this rectangle. */
+  get centreY() {
+    return this[1] + (this[3] * 0.5)
+  }
+  // #endregion Property accessors
+
+  /**
+   * Updates the rectangle to the values of {@link rect}.
+   * @param rect The rectangle to update to.
+   */
+  updateTo(rect: ReadOnlyRect) {
+    this[0] = rect[0]
+    this[1] = rect[1]
+    this[2] = rect[2]
+    this[3] = rect[3]
+  }
+
+  /**
+   * Checks if the point [{@link x}, {@link y}] is inside this rectangle.
+   * @param x The x-coordinate to check
+   * @param y The y-coordinate to check
+   * @returns `true` if the point is inside this rectangle, otherwise `false`.
+   */
+  containsXy(x: number, y: number): boolean {
+    const [left, top, width, height] = this
+    return x >= left &&
+      x < left + width &&
+      y >= top &&
+      y < top + height
+  }
+
+  /**
+   * Checks if {@link point} is inside this rectangle.
+   * @param point The point to check
+   * @returns `true` if {@link point} is inside this rectangle, otherwise `false`.
+   */
+  containsPoint([x, y]: ReadOnlyPoint): boolean {
+    const [left, top, width, height] = this
+    return x >= left &&
+      x < left + width &&
+      y >= top &&
+      y < top + height
+  }
+
+  /**
+   * Checks if {@link other} is a smaller rectangle inside this rectangle.
+   * One **must** be larger than the other; identical rectangles are not considered to contain each other.
+   * @param other The rectangle to check
+   * @returns `true` if {@link other} is inside this rectangle, otherwise `false`.
+   */
+  containsRect(other: ReadOnlyRect): boolean {
+    const { right, bottom } = this
+    const otherRight = other[0] + other[2]
+    const otherBottom = other[1] + other[3]
+
+    const identical = this.x === other[0] &&
+      this.y === other[1] &&
+      right === otherRight &&
+      bottom === otherBottom
+
+    return !identical &&
+      this.x <= other[0] &&
+      this.y <= other[1] &&
+      right >= otherRight &&
+      bottom >= otherBottom
+  }
+
+  /**
+   * Checks if {@link rect} overlaps with this rectangle.
+   * @param rect The rectangle to check
+   * @returns `true` if {@link rect} overlaps with this rectangle, otherwise `false`.
+   */
+  overlaps(rect: ReadOnlyRect): boolean {
+    return this.x < rect[0] + rect[2] &&
+      this.y < rect[1] + rect[3] &&
+      this.x + this.width > rect[0] &&
+      this.y + this.height > rect[1]
+  }
+
+  /**
+   * Finds the corner (if any) of this rectangle that contains the point [{@link x}, {@link y}].
+   * @param x The x-coordinate to check
+   * @param y The y-coordinate to check
+   * @param cornerSize Each corner is treated as an inset square with this width and height.
+   * @returns The compass direction of the corner that contains the point, or `undefined` if the point is not in any corner.
+   */
+  findContainingCorner(x: number, y: number, cornerSize: number): CompassCorners | undefined {
+    if (this.isInTopLeftCorner(x, y, cornerSize)) return "NW"
+    if (this.isInTopRightCorner(x, y, cornerSize)) return "NE"
+    if (this.isInBottomLeftCorner(x, y, cornerSize)) return "SW"
+    if (this.isInBottomRightCorner(x, y, cornerSize)) return "SE"
+  }
+
+  /** @returns `true` if the point [{@link x}, {@link y}] is in the top-left corner of this rectangle, otherwise `false`. */
+  isInTopLeftCorner(x: number, y: number, cornerSize: number): boolean {
+    return isInRectangle(x, y, this.x, this.y, cornerSize, cornerSize)
+  }
+
+  /** @returns `true` if the point [{@link x}, {@link y}] is in the top-right corner of this rectangle, otherwise `false`. */
+  isInTopRightCorner(x: number, y: number, cornerSize: number): boolean {
+    return isInRectangle(x, y, this.right - cornerSize, this.y, cornerSize, cornerSize)
+  }
+
+  /** @returns `true` if the point [{@link x}, {@link y}] is in the bottom-left corner of this rectangle, otherwise `false`. */
+  isInBottomLeftCorner(x: number, y: number, cornerSize: number): boolean {
+    return isInRectangle(x, y, this.x, this.bottom - cornerSize, cornerSize, cornerSize)
+  }
+
+  /** @returns `true` if the point [{@link x}, {@link y}] is in the bottom-right corner of this rectangle, otherwise `false`. */
+  isInBottomRightCorner(x: number, y: number, cornerSize: number): boolean {
+    return isInRectangle(x, y, this.right - cornerSize, this.bottom - cornerSize, cornerSize, cornerSize)
+  }
+
+  /** @returns `true` if the point [{@link x}, {@link y}] is in the top edge of this rectangle, otherwise `false`. */
+  isInTopEdge(x: number, y: number, edgeSize: number): boolean {
+    return isInRectangle(x, y, this.x, this.y, this.width, edgeSize)
+  }
+
+  /** @returns `true` if the point [{@link x}, {@link y}] is in the bottom edge of this rectangle, otherwise `false`. */
+  isInBottomEdge(x: number, y: number, edgeSize: number): boolean {
+    return isInRectangle(x, y, this.x, this.bottom - edgeSize, this.width, edgeSize)
+  }
+
+  /** @returns `true` if the point [{@link x}, {@link y}] is in the left edge of this rectangle, otherwise `false`. */
+  isInLeftEdge(x: number, y: number, edgeSize: number): boolean {
+    return isInRectangle(x, y, this.x, this.y, edgeSize, this.height)
+  }
+
+  /** @returns `true` if the point [{@link x}, {@link y}] is in the right edge of this rectangle, otherwise `false`. */
+  isInRightEdge(x: number, y: number, edgeSize: number): boolean {
+    return isInRectangle(x, y, this.right - edgeSize, this.y, edgeSize, this.height)
+  }
+
+  /** @returns The centre point of this rectangle, as a new {@link Point}. */
+  getCentre(): Point {
+    return [this.centreX, this.centreY]
+  }
+
+  /** @returns The area of this rectangle. */
+  getArea(): number {
+    return this.width * this.height
+  }
+
+  /** @returns The perimeter of this rectangle. */
+  getPerimeter(): number {
+    return 2 * (this.width + this.height)
+  }
+
+  /** @returns The top-left corner of this rectangle, as a new {@link Point}. */
+  getTopLeft(): Point {
+    return [this[0], this[1]]
+  }
+
+  /** @returns The bottom-right corner of this rectangle, as a new {@link Point}. */
+  getBottomRight(): Point {
+    return [this.right, this.bottom]
+  }
+
+  /** @returns The width and height of this rectangle, as a new {@link Size}. */
+  getSize(): Size {
+    return [this[2], this[3]]
+  }
+
+  /** @returns The offset from the top-left of this rectangle to the point [{@link x}, {@link y}], as a new {@link Point}. */
+  getOffsetTo([x, y]: ReadOnlyPoint): Point {
+    return [x - this[0], y - this[1]]
+  }
+
+  /** @returns The offset from the point [{@link x}, {@link y}] to the top-left of this rectangle, as a new {@link Point}. */
+  getOffsetFrom([x, y]: ReadOnlyPoint): Point {
+    return [this[0] - x, this[1] - y]
+  }
+
+  /** Resizes the rectangle without moving it, setting its top-left corner to [{@link x}, {@link y}]. */
+  resizeTopLeft(x1: number, y1: number) {
+    this[2] += this[0] - x1
+    this[3] += this[1] - y1
+
+    this[0] = x1
+    this[1] = y1
+  }
+
+  /** Resizes the rectangle without moving it, setting its bottom-left corner to [{@link x}, {@link y}]. */
+  resizeBottomLeft(x1: number, y2: number) {
+    this[2] += this[0] - x1
+    this[3] = y2 - this[1]
+
+    this[0] = x1
+  }
+
+  /** Resizes the rectangle without moving it, setting its top-right corner to [{@link x}, {@link y}]. */
+  resizeTopRight(x2: number, y1: number) {
+    this[2] = x2 - this[0]
+    this[3] += this[1] - y1
+
+    this[1] = y1
+  }
+
+  /** Resizes the rectangle without moving it, setting its bottom-right corner to [{@link x}, {@link y}]. */
+  resizeBottomRight(x2: number, y2: number) {
+    this[2] = x2 - this[0]
+    this[3] = y2 - this[1]
+  }
+
+  /** Sets the width without moving the right edge (changes position) */
+  setWidthRightAnchored(width: number) {
+    const currentWidth = this[2]
+    this[2] = width
+    this[0] += currentWidth - width
+  }
+
+  /** Sets the height without moving the bottom edge (changes position) */
+  setHeightBottomAnchored(height: number) {
+    const currentHeight = this[3]
+    this[3] = height
+    this[1] += currentHeight - height
+  }
+
+  clone(): Rectangle {
+    return new Rectangle(this[0], this[1], this[2], this[3])
+  }
+
+  /** Alias of {@link export}. */
+  toArray() { return this.export() }
+
+  /** @returns A new, untyped array (serializable) containing the values of this rectangle. */
+  export(): [number, number, number, number] {
+    return [this[0], this[1], this[2], this[3]]
+  }
+
+  /**
+   * Draws a debug outline of this rectangle.
+   * @internal Convenience debug/development interface; not for production use.
+   */
+  _drawDebug(ctx: CanvasRenderingContext2D, colour = "red") {
+    const { strokeStyle, lineWidth } = ctx
+    try {
+      ctx.strokeStyle = colour
+      ctx.lineWidth = 0.5
+      ctx.beginPath()
+      ctx.strokeRect(this[0], this[1], this[2], this[3])
+    } finally {
+      ctx.strokeStyle = strokeStyle
+      ctx.lineWidth = lineWidth
+    }
+  }
+}
+
+export type ReadOnlyRectangle = Omit<
+  ReadOnlyTypedArray<Rectangle>,
+  | "setHeightBottomAnchored"
+  | "setWidthRightAnchored"
+  | "resizeTopLeft"
+  | "resizeBottomLeft"
+  | "resizeTopRight"
+  | "resizeBottomRight"
+  | "resizeBottomRight"
+  | "updateTo"
+>
diff --git a/src/lib/litegraph/src/infrastructure/RecursionError.ts b/src/lib/litegraph/src/infrastructure/RecursionError.ts
new file mode 100644
index 0000000000..bba29e9c8d
--- /dev/null
+++ b/src/lib/litegraph/src/infrastructure/RecursionError.ts
@@ -0,0 +1,9 @@
+/**
+ * Error thrown when infinite recursion is detected.
+ */
+export class RecursionError extends Error {
+  constructor(subject: string) {
+    super(subject)
+    this.name = "RecursionError"
+  }
+}
diff --git a/src/lib/litegraph/src/infrastructure/SlotIndexError.ts b/src/lib/litegraph/src/infrastructure/SlotIndexError.ts
new file mode 100644
index 0000000000..4ab963679f
--- /dev/null
+++ b/src/lib/litegraph/src/infrastructure/SlotIndexError.ts
@@ -0,0 +1,6 @@
+export class SlotIndexError extends Error {
+  constructor(message: string = "Attempted to access a slot that was out of bounds.", cause?: Error) {
+    super(message, { cause })
+    this.name = "SlotIndexError"
+  }
+}
diff --git a/src/lib/litegraph/src/infrastructure/SubgraphEventMap.ts b/src/lib/litegraph/src/infrastructure/SubgraphEventMap.ts
new file mode 100644
index 0000000000..c5b34261a5
--- /dev/null
+++ b/src/lib/litegraph/src/infrastructure/SubgraphEventMap.ts
@@ -0,0 +1,43 @@
+import type { LGraphEventMap } from "./LGraphEventMap"
+import type { SubgraphInput } from '../subgraph/SubgraphInput'
+import type { SubgraphOutput } from '../subgraph/SubgraphOutput'
+
+export interface SubgraphEventMap extends LGraphEventMap {
+  "adding-input": {
+    name: string
+    type: string
+  }
+  "adding-output": {
+    name: string
+    type: string
+  }
+
+  "input-added": {
+    input: SubgraphInput
+  }
+  "output-added": {
+    output: SubgraphOutput
+  }
+
+  "removing-input": {
+    input: SubgraphInput
+    index: number
+  }
+  "removing-output": {
+    output: SubgraphOutput
+    index: number
+  }
+
+  "renaming-input": {
+    input: SubgraphInput
+    index: number
+    oldName: string
+    newName: string
+  }
+  "renaming-output": {
+    output: SubgraphOutput
+    index: number
+    oldName: string
+    newName: string
+  }
+}
diff --git a/src/lib/litegraph/src/interfaces.ts b/src/lib/litegraph/src/interfaces.ts
new file mode 100644
index 0000000000..4126500574
--- /dev/null
+++ b/src/lib/litegraph/src/interfaces.ts
@@ -0,0 +1,476 @@
+import type { ContextMenu } from "./ContextMenu"
+import type { LGraphNode, NodeId } from "./LGraphNode"
+import type { LinkId, LLink } from "./LLink"
+import type { Reroute, RerouteId } from "./Reroute"
+import type { SubgraphInput } from "./subgraph/SubgraphInput"
+import type { SubgraphInputNode } from "./subgraph/SubgraphInputNode"
+import type { SubgraphOutputNode } from "./subgraph/SubgraphOutputNode"
+import type { LinkDirection, RenderShape } from "./types/globalEnums"
+import type { Rectangle } from './infrastructure/Rectangle'
+import type { CanvasPointerEvent } from './types/events'
+
+export type Dictionary<T> = { [key: string]: T }
+
+/** Allows all properties to be null.  The same as `Partial<T>`, but adds null instead of undefined. */
+export type NullableProperties<T> = {
+  [P in keyof T]: T[P] | null
+}
+
+/**
+ * If {@link T} is `null` or `undefined`, evaluates to {@link Result}. Otherwise, evaluates to {@link T}.
+ * Useful for functions that return e.g. `undefined` when a param is nullish.
+ */
+export type WhenNullish<T, Result> = T & {} | (T extends null ? Result : T extends undefined ? Result : T & {})
+
+/** A type with each of the {@link Properties} made optional. */
+export type OptionalProps<T, Properties extends keyof T> = Omit<T, Properties> & { [K in Properties]?: T[K] }
+
+/** A type with each of the {@link Properties} marked as required. */
+export type RequiredProps<T, Properties extends keyof T> = Omit<T, Properties> & { [K in Properties]-?: T[K] }
+
+/** Bitwise AND intersection of two types; returns a new, non-union type that includes only properties that exist on both types. */
+export type SharedIntersection<T1, T2> = {
+  [P in keyof T1 as P extends keyof T2 ? P : never]: T1[P]
+} & {
+  [P in keyof T2 as P extends keyof T1 ? P : never]: T2[P]
+}
+
+export type CanvasColour = string | CanvasGradient | CanvasPattern
+
+/**
+ * Any object that has a {@link boundingRect}.
+ */
+export interface HasBoundingRect {
+  /**
+   * A rectangle that represents the outer edges of the item.
+   *
+   * Used for various calculations, such as overlap, selective rendering, and click checks.
+   * For most items, this is cached position & size as `x, y, width, height`.
+   * Some items (such as nodes and slots) may extend above and/or to the left of their {@link pos}.
+   * @readonly
+   * @see {@link move}
+   */
+  readonly boundingRect: ReadOnlyRect
+}
+
+/** An object containing a set of child objects */
+export interface Parent<TChild> {
+  /** All objects owned by the parent object. */
+  readonly children?: ReadonlySet<TChild>
+}
+
+/**
+ * An object that can be positioned, selected, and moved.
+ *
+ * May contain other {@link Positionable} objects.
+ */
+export interface Positionable extends Parent<Positionable>, HasBoundingRect {
+  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.
+   * @default 0,0
+   */
+  readonly pos: Point
+  /** true if this object is part of the selection, otherwise false. */
+  selected?: boolean
+
+  /** See {@link IPinnable.pinned} */
+  readonly pinned?: boolean
+
+  /**
+   * When explicitly set to `false`, no options to delete this item will be provided.
+   * @default undefined (true)
+   */
+  readonly removable?: boolean
+
+  /**
+   * Adds a delta to the current position.
+   * @param deltaX X value to add to current position
+   * @param deltaY Y value to add to current position
+   * @param skipChildren If true, any child objects like group contents will not be moved
+   */
+  move(deltaX: number, deltaY: number, skipChildren?: boolean): void
+
+  /**
+   * Snaps this item to a grid.
+   *
+   * Position values are rounded to the nearest multiple of {@link snapTo}.
+   * @param snapTo The size of the grid to align to
+   * @returns `true` if it moved, or `false` if the snap was rejected (e.g. `pinned`)
+   */
+  snapToGrid(snapTo: number): boolean
+
+  /** Called whenever the item is selected */
+  onSelected?(): void
+  /** Called whenever the item is deselected */
+  onDeselected?(): void
+}
+
+/**
+ * A color option to customize the color of {@link LGraphNode} or {@link LGraphGroup}.
+ * @see {@link LGraphCanvas.node_colors}
+ */
+export interface ColorOption {
+  color: string
+  bgcolor: string
+  groupcolor: string
+}
+
+/**
+ * An object that can be colored with a {@link ColorOption}.
+ */
+export interface IColorable {
+  setColorOption(colorOption: ColorOption | null): void
+  getColorOption(): ColorOption | null
+}
+
+/**
+ * An object that can be pinned.
+ *
+ * Prevents the object being accidentally moved or resized by mouse interaction.
+ */
+export interface IPinnable {
+  readonly pinned: boolean
+  pin(value?: boolean): void
+  unpin(): void
+}
+
+export interface ReadonlyLinkNetwork {
+  readonly links: ReadonlyMap<LinkId, LLink>
+  readonly reroutes: ReadonlyMap<RerouteId, Reroute>
+  readonly floatingLinks: ReadonlyMap<LinkId, LLink>
+  getNodeById(id: NodeId | null | undefined): LGraphNode | null
+  getLink(id: null | undefined): undefined
+  getLink(id: LinkId | null | undefined): LLink | undefined
+  getReroute(parentId: null | undefined): undefined
+  getReroute(parentId: RerouteId | null | undefined): Reroute | undefined
+
+  readonly inputNode?: SubgraphInputNode
+  readonly outputNode?: SubgraphOutputNode
+}
+
+/**
+ * Contains a list of links, reroutes, and nodes.
+ */
+export interface LinkNetwork extends ReadonlyLinkNetwork {
+  readonly links: Map<LinkId, LLink>
+  readonly reroutes: Map<RerouteId, Reroute>
+  addFloatingLink(link: LLink): LLink
+  removeReroute(id: number): unknown
+  removeFloatingLink(link: LLink): void
+}
+
+/**
+ * Locates graph items.
+ */
+export interface ItemLocator {
+  getNodeOnPos(x: number, y: number, nodeList?: LGraphNode[]): LGraphNode | null
+  getRerouteOnPos(x: number, y: number): Reroute | undefined
+  getIoNodeOnPos?(x: number, y: number): SubgraphInputNode | SubgraphOutputNode | undefined
+}
+
+/** Contains a cached 2D canvas path and a centre point, with an optional forward angle. */
+export interface LinkSegment {
+  /** Link / reroute ID */
+  readonly id: LinkId | RerouteId
+  /** The {@link id} of the reroute that this segment starts from (output side), otherwise `undefined`.  */
+  readonly parentId?: RerouteId
+
+  /** The last canvas 2D path that was used to render this segment */
+  path?: Path2D
+  /** Centre point of the {@link path}.  Calculated during render only - can be inaccurate */
+  readonly _pos: Float32Array
+  /**
+   * Y-forward along the {@link path} from its centre point, in radians.
+   * `undefined` if using circles for link centres.
+   * Calculated during render only - can be inaccurate.
+   */
+  _centreAngle?: number
+
+  /** Whether the link is currently being moved. @internal */
+  _dragging?: boolean
+
+  /** Output node ID */
+  readonly origin_id: NodeId | undefined
+  /** Output slot index */
+  readonly origin_slot: number | undefined
+}
+
+export interface IInputOrOutput {
+  // If an input, this will be defined
+  input?: INodeInputSlot | null
+  // If an output, this will be defined
+  output?: INodeOutputSlot | null
+}
+
+export interface IFoundSlot extends IInputOrOutput {
+  // Slot index
+  slot: number
+  // Centre point of the rendered slot connection
+  link_pos: Point
+}
+
+/** A point represented as `[x, y]` co-ordinates */
+export type Point = [x: number, y: number] | Float32Array | Float64Array
+
+/** A size represented as `[width, height]` */
+export type Size = [width: number, height: number] | Float32Array | Float64Array
+
+/** A very firm array */
+type ArRect = [x: number, y: number, width: number, height: number]
+
+/** A rectangle starting at top-left coordinates `[x, y, width, height]` */
+export type Rect = ArRect | Float32Array | Float64Array
+
+/** A point represented as `[x, y]` co-ordinates that will not be modified */
+export type ReadOnlyPoint =
+  | readonly [x: number, y: number]
+  | ReadOnlyTypedArray<Float32Array>
+  | ReadOnlyTypedArray<Float64Array>
+
+/** A size represented as `[width, height]` that will not be modified */
+export type ReadOnlySize =
+  | readonly [width: number, height: number]
+  | ReadOnlyTypedArray<Float32Array>
+  | ReadOnlyTypedArray<Float64Array>
+
+/** A rectangle starting at top-left coordinates `[x, y, width, height]` that will not be modified */
+export type ReadOnlyRect =
+  | readonly [x: number, y: number, width: number, height: number]
+  | ReadOnlyTypedArray<Float32Array>
+  | ReadOnlyTypedArray<Float64Array>
+
+type TypedArrays =
+  | Int8Array
+  | Uint8Array
+  | Uint8ClampedArray
+  | Int16Array
+  | Uint16Array
+  | Int32Array
+  | Uint32Array
+  | Float32Array
+  | Float64Array
+
+type TypedBigIntArrays = BigInt64Array | BigUint64Array
+export type ReadOnlyTypedArray<T extends TypedArrays | TypedBigIntArrays> =
+  Omit<Readonly<T>, "fill" | "copyWithin" | "reverse" | "set" | "sort" | "subarray">
+
+/** Union of property names that are of type Match */
+export type KeysOfType<T, Match> = Exclude<{ [P in keyof T]: T[P] extends Match ? P : never }[keyof T], undefined>
+
+/** A new type that contains only the properties of T that are of type Match */
+export type PickByType<T, Match> = { [P in keyof T]: Extract<T[P], Match> }
+
+/** The names of all (optional) methods and functions in T */
+export type MethodNames<T> = KeysOfType<T, ((...args: any) => any) | undefined>
+
+export interface IBoundaryNodes {
+  top: LGraphNode
+  right: LGraphNode
+  bottom: LGraphNode
+  left: LGraphNode
+}
+
+export type Direction = "top" | "bottom" | "left" | "right"
+
+/** Resize handle positions (compass points) */
+export type CompassCorners = "NE" | "SE" | "SW" | "NW"
+
+/**
+ * A string that represents a specific data / slot type, e.g. `STRING`.
+ *
+ * Can be comma-delimited to specify multiple allowed types, e.g. `STRING,INT`.
+ */
+export type ISlotType = number | string
+
+export interface INodeSlot extends HasBoundingRect {
+  /**
+   * The name of the slot in English.
+   * Will be included in the serialized data.
+   */
+  name: string
+  /**
+   * The localized name of the slot to display in the UI.
+   * Takes higher priority than {@link name} if set.
+   * Will be included in the serialized data.
+   */
+  localized_name?: string
+  /**
+   * The name of the slot to display in the UI, modified by the user.
+   * Takes higher priority than {@link display_name} if set.
+   * Will be included in the serialized data.
+   */
+  label?: string
+
+  type: ISlotType
+  dir?: LinkDirection
+  removable?: boolean
+  shape?: RenderShape
+  color_off?: CanvasColour
+  color_on?: CanvasColour
+  locked?: boolean
+  nameLocked?: boolean
+  pos?: Point
+  /** @remarks Automatically calculated; not included in serialisation. */
+  boundingRect: Rect
+  /**
+   * A list of floating link IDs that are connected to this slot.
+   * This is calculated at runtime; it is **not** serialized.
+   */
+  _floatingLinks?: Set<LLink>
+  /**
+   * Whether the slot has errors. It is **not** serialized.
+   */
+  hasErrors?: boolean
+}
+
+export interface INodeFlags {
+  skip_repeated_outputs?: boolean
+  allow_interaction?: boolean
+  pinned?: boolean
+  collapsed?: boolean
+  /** Configuration setting for {@link LGraphNode.connectInputToOutput} */
+  keepAllLinksOnBypass?: boolean
+}
+
+/**
+ * A widget that is linked to a slot.
+ *
+ * This is set by the ComfyUI_frontend logic. See
+ * https://github.com/Comfy-Org/ComfyUI_frontend/blob/b80e0e1a3c74040f328c4e344326c969c97f67e0/src/extensions/core/widgetInputs.ts#L659
+ */
+export interface IWidgetLocator {
+  name: string
+  [key: string | symbol]: unknown
+}
+
+export interface INodeInputSlot extends INodeSlot {
+  link: LinkId | null
+  widget?: IWidgetLocator
+}
+
+export interface IWidgetInputSlot extends INodeInputSlot {
+  widget: IWidgetLocator
+}
+
+export interface INodeOutputSlot extends INodeSlot {
+  links: LinkId[] | null
+  _data?: unknown
+  slot_index?: number
+}
+
+/** Links */
+export interface ConnectingLink extends IInputOrOutput {
+  node: LGraphNode
+  slot: number
+  pos: Point
+  direction?: LinkDirection
+  afterRerouteId?: RerouteId
+  /** The first reroute on a chain */
+  firstRerouteId?: RerouteId
+  /** The link being moved, or `undefined` if creating a new link. */
+  link?: LLink
+}
+
+interface IContextMenuBase {
+  title?: string
+  className?: string
+}
+
+/** ContextMenu */
+export interface IContextMenuOptions<TValue = unknown, TExtra = unknown> extends IContextMenuBase {
+  ignore_item_callbacks?: boolean
+  parentMenu?: ContextMenu<TValue>
+  event?: MouseEvent
+  extra?: TExtra
+  /** @deprecated Context menu scrolling is now controlled by the browser */
+  scroll_speed?: number
+  left?: number
+  top?: number
+  /** @deprecated Context menus no longer scale using transform */
+  scale?: number
+  node?: LGraphNode
+  autoopen?: boolean
+  callback?(
+    value?: string | IContextMenuValue<TValue>,
+    options?: unknown,
+    event?: MouseEvent,
+    previous_menu?: ContextMenu<TValue>,
+    extra?: unknown,
+  ): void | boolean
+}
+
+export interface IContextMenuValue<TValue = unknown, TExtra = unknown, TCallbackValue = unknown> extends IContextMenuBase {
+  value?: TValue
+  content: string | undefined
+  has_submenu?: boolean
+  disabled?: boolean
+  submenu?: IContextMenuSubmenu<TValue>
+  property?: string
+  type?: string
+  slot?: IFoundSlot
+  callback?(
+    this: ContextMenuDivElement<TValue>,
+    value?: TCallbackValue,
+    options?: unknown,
+    event?: MouseEvent,
+    previous_menu?: ContextMenu<TValue>,
+    extra?: TExtra,
+  ): void | boolean
+}
+
+export interface IContextMenuSubmenu<TValue = unknown> extends IContextMenuOptions<TValue> {
+  options: ConstructorParameters<typeof ContextMenu<TValue>>[0]
+}
+
+export interface ContextMenuDivElement<TValue = unknown> extends HTMLDivElement {
+  value?: string | IContextMenuValue<TValue>
+  onclick_callback?: never
+}
+
+export type INodeSlotContextItem = [string, ISlotType, Partial<INodeInputSlot & INodeOutputSlot>]
+
+export interface DefaultConnectionColors {
+  getConnectedColor(type: ISlotType): CanvasColour
+  getDisconnectedColor(type: ISlotType): CanvasColour
+}
+
+export interface ISubgraphInput extends INodeInputSlot {
+  _subgraphSlot: SubgraphInput
+}
+
+/**
+ * Shorthand for {@link Parameters} of optional callbacks.
+ * @example
+ * ```ts
+ * const { onClick } = CustomClass.prototype
+ * CustomClass.prototype.onClick = function (...args: CallbackParams<typeof onClick>) {
+ *   const r = onClick?.apply(this, args)
+ *   // ...
+ *   return r
+ * }
+ * ```
+ */
+export type CallbackParams<T extends ((...args: any) => any) | undefined> =
+  Parameters<Exclude<T, undefined>>
+
+/**
+ * Shorthand for {@link ReturnType} of optional callbacks.
+ * @see {@link CallbackParams}
+ */
+export type CallbackReturn<T extends ((...args: any) => any) | undefined> = ReturnType<Exclude<T, undefined>>
+
+/**
+ * An object that can be hovered over.
+ */
+export interface Hoverable extends HasBoundingRect {
+  readonly boundingRect: Rectangle
+  isPointerOver: boolean
+
+  containsPoint(point: Point): boolean
+
+  onPointerMove(e: CanvasPointerEvent): void
+  onPointerEnter?(e?: CanvasPointerEvent): void
+  onPointerLeave?(e?: CanvasPointerEvent): void
+}
diff --git a/src/lib/litegraph/src/litegraph.ts b/src/lib/litegraph/src/litegraph.ts
new file mode 100644
index 0000000000..45c1ae000a
--- /dev/null
+++ b/src/lib/litegraph/src/litegraph.ts
@@ -0,0 +1,174 @@
+import type { ContextMenu } from "./ContextMenu"
+import type { ConnectingLink, Point } from "./interfaces"
+import type {
+  IContextMenuOptions,
+  INodeSlot,
+  Size,
+} from "./interfaces"
+import type { LGraphNode } from "./LGraphNode"
+import type { CanvasEventDetail } from "./types/events"
+import type { RenderShape, TitleMode } from "./types/globalEnums"
+
+// Must remain above LiteGraphGlobal (circular dependency due to abstract factory behaviour in `configure`)
+export { Subgraph, type GraphOrSubgraph } from "./subgraph/Subgraph"
+
+import { LiteGraphGlobal } from "./LiteGraphGlobal"
+import { loadPolyfills } from "./polyfills"
+
+export const LiteGraph = new LiteGraphGlobal()
+
+// Load legacy polyfills
+loadPolyfills()
+
+// Backwards compat
+
+// Type definitions for litegraph.js 0.7.0
+// Project: litegraph.js
+// Definitions by: NateScarlet <https://github.com/NateScarlet>
+/** @deprecated Use {@link Point} instead. */
+export type Vector2 = Point
+/** @deprecated Use {@link Rect} instead. */
+export type Vector4 = [number, number, number, number]
+
+export interface IContextMenuItem {
+  content: string
+  callback?: ContextMenuEventListener
+  /** Used as innerHTML for extra child element */
+  title?: string
+  disabled?: boolean
+  has_submenu?: boolean
+  submenu?: {
+    options: IContextMenuItem[]
+  } & IContextMenuOptions
+  className?: string
+}
+
+export type ContextMenuEventListener = (
+  value: IContextMenuItem,
+  options: IContextMenuOptions,
+  event: MouseEvent,
+  parentMenu: ContextMenu<unknown> | undefined,
+  node: LGraphNode,
+) => boolean | void
+
+export interface LinkReleaseContext {
+  node_to?: LGraphNode
+  node_from?: LGraphNode
+  slot_from: INodeSlot
+  type_filter_in?: string
+  type_filter_out?: string
+}
+
+export interface LinkReleaseContextExtended {
+  links: ConnectingLink[]
+}
+
+export interface LiteGraphCanvasEvent extends CustomEvent<CanvasEventDetail> {}
+
+export interface LGraphNodeConstructor<T extends LGraphNode = LGraphNode> {
+  new (title: string, type?: string): T
+
+  title: string
+  type: string
+  size?: Size
+  min_height?: number
+  slot_start_y?: number
+  widgets_info?: any
+  collapsable?: boolean
+  color?: string
+  bgcolor?: string
+  shape?: RenderShape
+  title_mode?: TitleMode
+  title_color?: string
+  title_text_color?: string
+  keepAllLinksOnBypass: boolean
+  resizeHandleSize?: number
+  resizeEdgeSize?: number
+}
+
+// End backwards compat
+
+export { InputIndicators } from "./canvas/InputIndicators"
+export { LinkConnector } from "./canvas/LinkConnector"
+export { isOverNodeInput, isOverNodeOutput } from "./canvas/measureSlots"
+export { CanvasPointer } from "./CanvasPointer"
+export * as Constants from "./constants"
+export { ContextMenu } from "./ContextMenu"
+export { CurveEditor } from "./CurveEditor"
+export { DragAndScale } from "./DragAndScale"
+export { LabelPosition, SlotDirection, SlotShape, SlotType } from "./draw"
+export { strokeShape } from "./draw"
+export { Rectangle } from "./infrastructure/Rectangle"
+export type {
+  CanvasColour,
+  ColorOption,
+  ConnectingLink,
+  Direction,
+  IBoundaryNodes,
+  IColorable,
+  IContextMenuOptions,
+  IContextMenuValue,
+  IFoundSlot,
+  IInputOrOutput,
+  INodeFlags,
+  INodeInputSlot,
+  INodeOutputSlot,
+  INodeSlot,
+  ISlotType,
+  KeysOfType,
+  LinkNetwork,
+  LinkSegment,
+  MethodNames,
+  PickByType,
+  Point,
+  Positionable,
+  ReadonlyLinkNetwork,
+  ReadOnlyPoint,
+  ReadOnlyRect,
+  Rect,
+  Size,
+} from "./interfaces"
+export { LGraph } from "./LGraph"
+export { BadgePosition, LGraphBadge, type LGraphBadgeOptions } from "./LGraphBadge"
+export { LGraphCanvas, type LGraphCanvasState } from "./LGraphCanvas"
+export { LGraphGroup } from "./LGraphGroup"
+export { LGraphNode, type NodeId, type NodeProperty } from "./LGraphNode"
+export { COMFY_VUE_NODE_DIMENSIONS, type ComponentHeightKey } from "./LiteGraphGlobal"
+export { LGraphNodeProperties } from "./LGraphNodeProperties"
+export { type LinkId, LLink, type SerialisedLLinkArray } from "./LLink"
+export { clamp, createBounds } from "./measure"
+export { Reroute, type RerouteId } from "./Reroute"
+export { type ExecutableLGraphNode, ExecutableNodeDTO } from "./subgraph/ExecutableNodeDTO"
+export { SubgraphNode } from "./subgraph/SubgraphNode"
+export type { CanvasPointerEvent } from "./types/events"
+export {
+  CanvasItem,
+  EaseFunction,
+  LGraphEventMode,
+  LinkMarkerShape,
+  RenderShape,
+  TitleMode,
+} from "./types/globalEnums"
+export type {
+  ExportedSubgraph,
+  ExportedSubgraphInstance,
+  ExportedSubgraphIONode,
+  ISerialisedGraph,
+  SerialisableGraph,
+  SerialisableLLink,
+  SubgraphIO,
+} from "./types/serialisation"
+export type { IWidget } from "./types/widgets"
+export { isColorable } from "./utils/type"
+export { createUuidv4 } from "./utils/uuid"
+export { BaseSteppedWidget } from "./widgets/BaseSteppedWidget"
+export { BaseWidget } from "./widgets/BaseWidget"
+export { BooleanWidget } from "./widgets/BooleanWidget"
+export { ButtonWidget } from "./widgets/ButtonWidget"
+export { ComboWidget } from "./widgets/ComboWidget"
+export { KnobWidget } from "./widgets/KnobWidget"
+export { LegacyWidget } from "./widgets/LegacyWidget"
+export { NumberWidget } from "./widgets/NumberWidget"
+export { SliderWidget } from "./widgets/SliderWidget"
+export { TextWidget } from "./widgets/TextWidget"
+export { isComboWidget } from "./widgets/widgetMap"
diff --git a/src/lib/litegraph/src/measure.ts b/src/lib/litegraph/src/measure.ts
new file mode 100644
index 0000000000..4c2417d3fc
--- /dev/null
+++ b/src/lib/litegraph/src/measure.ts
@@ -0,0 +1,460 @@
+import type {
+  HasBoundingRect,
+  Point,
+  ReadOnlyPoint,
+  ReadOnlyRect,
+  Rect,
+} from "./interfaces"
+
+import { Alignment, hasFlag, LinkDirection } from "./types/globalEnums"
+
+/**
+ * Calculates the distance between two points (2D vector)
+ * @param a Point a as `x, y`
+ * @param b Point b as `x, y`
+ * @returns Distance between point {@link a} & {@link b}
+ */
+export function distance(a: ReadOnlyPoint, b: ReadOnlyPoint): number {
+  return Math.sqrt(
+    (b[0] - a[0]) * (b[0] - a[0]) + (b[1] - a[1]) * (b[1] - a[1]),
+  )
+}
+
+/**
+ * Calculates the distance2 (squared) between two points (2D vector).
+ * Much faster when only comparing distances (closest/furthest point).
+ * @param x1 Origin point X
+ * @param y1 Origin point Y
+ * @param x2 Destination point X
+ * @param y2 Destination point Y
+ * @returns Distance2 (squared) between point [{@link x1}, {@link y1}] & [{@link x2}, {@link y2}]
+ */
+export function dist2(x1: number, y1: number, x2: number, y2: number): number {
+  return ((x2 - x1) * (x2 - x1)) + ((y2 - y1) * (y2 - y1))
+}
+
+/**
+ * Determines whether a point is inside a rectangle.
+ *
+ * Otherwise identical to {@link isInsideRectangle}, it also returns `true` if `x` equals `left` or `y` equals `top`.
+ * @param x Point x
+ * @param y Point y
+ * @param left Rect x
+ * @param top Rect y
+ * @param width Rect width
+ * @param height Rect height
+ * @returns `true` if the point is inside the rect, otherwise `false`
+ */
+export function isInRectangle(
+  x: number,
+  y: number,
+  left: number,
+  top: number,
+  width: number,
+  height: number,
+): boolean {
+  return x >= left &&
+    x < left + width &&
+    y >= top &&
+    y < top + height
+}
+
+/**
+ * Determines whether a {@link Point} is inside a {@link Rect}.
+ * @param point The point to check, as `x, y`
+ * @param rect The rectangle, as `x, y, width, height`
+ * @returns `true` if the point is inside the rect, otherwise `false`
+ */
+export function isPointInRect(point: ReadOnlyPoint, rect: ReadOnlyRect): boolean {
+  return point[0] >= rect[0] &&
+    point[0] < rect[0] + rect[2] &&
+    point[1] >= rect[1] &&
+    point[1] < rect[1] + rect[3]
+}
+
+/**
+ * Determines whether the point represented by {@link x}, {@link y} is inside a {@link Rect}.
+ * @param x X co-ordinate of the point to check
+ * @param y Y co-ordinate of the point to check
+ * @param rect The rectangle, as `x, y, width, height`
+ * @returns `true` if the point is inside the rect, otherwise `false`
+ */
+export function isInRect(x: number, y: number, rect: ReadOnlyRect): boolean {
+  return x >= rect[0] &&
+    x < rect[0] + rect[2] &&
+    y >= rect[1] &&
+    y < rect[1] + rect[3]
+}
+
+/**
+ * Determines whether a point (`x, y`) is inside a rectangle.
+ *
+ * This is the original litegraph implementation.  It returns `false` if `x` is equal to `left`, or `y` is equal to `top`.
+ * @deprecated
+ * Use {@link isInRectangle} to match inclusive of top left.
+ * This function returns a false negative when an integer point (e.g. pixel) is on the leftmost or uppermost edge of a rectangle.
+ * @param x Point x
+ * @param y Point y
+ * @param left Rect x
+ * @param top Rect y
+ * @param width Rect width
+ * @param height Rect height
+ * @returns `true` if the point is inside the rect, otherwise `false`
+ */
+export function isInsideRectangle(
+  x: number,
+  y: number,
+  left: number,
+  top: number,
+  width: number,
+  height: number,
+): boolean {
+  return left < x &&
+    left + width > x &&
+    top < y &&
+    top + height > y
+}
+
+/**
+ * Determines if two rectangles have any overlap
+ * @param a Rectangle A as `x, y, width, height`
+ * @param b Rectangle B as `x, y, width, height`
+ * @returns `true` if rectangles overlap, otherwise `false`
+ */
+export function overlapBounding(a: ReadOnlyRect, b: ReadOnlyRect): boolean {
+  const aRight = a[0] + a[2]
+  const aBottom = a[1] + a[3]
+  const bRight = b[0] + b[2]
+  const bBottom = b[1] + b[3]
+
+  return a[0] > bRight ||
+    a[1] > bBottom ||
+    aRight < b[0] ||
+    aBottom < b[1]
+    ? false
+    : true
+}
+
+/**
+ * Returns the centre of a rectangle.
+ * @param rect The rectangle, as `x, y, width, height`
+ * @returns The centre of the rectangle, as `x, y`
+ */
+export function getCentre(rect: ReadOnlyRect): Point {
+  return [
+    rect[0] + (rect[2] * 0.5),
+    rect[1] + (rect[3] * 0.5),
+  ]
+}
+
+/**
+ * Determines if rectangle {@link a} contains the centre point of rectangle {@link b}.
+ * @param a Container rectangle A as `x, y, width, height`
+ * @param b Sub-rectangle B as `x, y, width, height`
+ * @returns `true` if {@link a} contains most of {@link b}, otherwise `false`
+ */
+export function containsCentre(a: ReadOnlyRect, b: ReadOnlyRect): boolean {
+  const centreX = b[0] + (b[2] * 0.5)
+  const centreY = b[1] + (b[3] * 0.5)
+  return isInRect(centreX, centreY, a)
+}
+
+/**
+ * Determines if rectangle {@link a} wholly contains rectangle {@link b}.
+ * @param a Container rectangle A as `x, y, width, height`
+ * @param b Sub-rectangle B as `x, y, width, height`
+ * @returns `true` if {@link a} wholly contains {@link b}, otherwise `false`
+ */
+export function containsRect(a: ReadOnlyRect, b: ReadOnlyRect): boolean {
+  const aRight = a[0] + a[2]
+  const aBottom = a[1] + a[3]
+  const bRight = b[0] + b[2]
+  const bBottom = b[1] + b[3]
+
+  const identical = a[0] === b[0] &&
+    a[1] === b[1] &&
+    aRight === bRight &&
+    aBottom === bBottom
+
+  return !identical &&
+    a[0] <= b[0] &&
+    a[1] <= b[1] &&
+    aRight >= bRight &&
+    aBottom >= bBottom
+}
+
+/**
+ * Adds an offset in the specified direction to {@link out}
+ * @param amount Amount of offset to add
+ * @param direction Direction to add the offset to
+ * @param out The {@link Point} to add the offset to
+ */
+export function addDirectionalOffset(
+  amount: number,
+  direction: LinkDirection,
+  out: Point,
+): void {
+  switch (direction) {
+  case LinkDirection.LEFT:
+    out[0] -= amount
+    return
+  case LinkDirection.RIGHT:
+    out[0] += amount
+    return
+  case LinkDirection.UP:
+    out[1] -= amount
+    return
+  case LinkDirection.DOWN:
+    out[1] += amount
+    return
+    // LinkDirection.CENTER: Nothing to do.
+  }
+}
+
+/**
+ * Rotates an offset in 90° increments.
+ *
+ * Swaps/flips axis values of a 2D vector offset - effectively rotating
+ * {@link offset} by 90°
+ * @param offset The zero-based offset to rotate
+ * @param from Direction to rotate from
+ * @param to Direction to rotate to
+ */
+export function rotateLink(
+  offset: Point,
+  from: LinkDirection,
+  to: LinkDirection,
+): void {
+  let x: number
+  let y: number
+
+  // Normalise to left
+  switch (from) {
+  case to:
+  case LinkDirection.CENTER:
+  case LinkDirection.NONE:
+  default:
+    // Nothing to do
+    return
+
+  case LinkDirection.LEFT:
+    x = offset[0]
+    y = offset[1]
+    break
+  case LinkDirection.RIGHT:
+    x = -offset[0]
+    y = -offset[1]
+    break
+  case LinkDirection.UP:
+    x = -offset[1]
+    y = offset[0]
+    break
+  case LinkDirection.DOWN:
+    x = offset[1]
+    y = -offset[0]
+    break
+  }
+
+  // Apply new direction
+  switch (to) {
+  case LinkDirection.CENTER:
+  case LinkDirection.NONE:
+    // Nothing to do
+    return
+
+  case LinkDirection.LEFT:
+    offset[0] = x
+    offset[1] = y
+    break
+  case LinkDirection.RIGHT:
+    offset[0] = -x
+    offset[1] = -y
+    break
+  case LinkDirection.UP:
+    offset[0] = y
+    offset[1] = -x
+    break
+  case LinkDirection.DOWN:
+    offset[0] = -y
+    offset[1] = x
+    break
+  }
+}
+
+/**
+ * Check if a point is to to the left or right of a line.
+ * Project a line from lineStart -> lineEnd.  Determine if point is to the left
+ * or right of that projection.
+ * {@link https://www.geeksforgeeks.org/orientation-3-ordered-points/}
+ * @param lineStart The start point of the line
+ * @param lineEnd The end point of the line
+ * @param x X co-ordinate of the point to check
+ * @param y Y co-ordinate of the point to check
+ * @returns 0 if all three points are in a straight line, a negative value if
+ * point is to the left of the projected line, or positive if the point is to
+ * the right
+ */
+export function getOrientation(
+  lineStart: ReadOnlyPoint,
+  lineEnd: ReadOnlyPoint,
+  x: number,
+  y: number,
+): number {
+  return ((lineEnd[1] - lineStart[1]) * (x - lineEnd[0])) -
+    ((lineEnd[0] - lineStart[0]) * (y - lineEnd[1]))
+}
+
+/**
+ * @param out The array to store the point in
+ * @param a Start point
+ * @param b End point
+ * @param controlA Start curve control point
+ * @param controlB End curve control point
+ * @param t Time: factor of distance to travel along the curve (e.g 0.25 is 25% along the curve)
+ */
+export function findPointOnCurve(
+  out: Point,
+  a: ReadOnlyPoint,
+  b: ReadOnlyPoint,
+  controlA: ReadOnlyPoint,
+  controlB: ReadOnlyPoint,
+  t: number = 0.5,
+): void {
+  const iT = 1 - t
+
+  const c1 = iT * iT * iT
+  const c2 = 3 * (iT * iT) * t
+  const c3 = 3 * iT * (t * t)
+  const c4 = t * t * t
+
+  out[0] = (c1 * a[0]) + (c2 * controlA[0]) + (c3 * controlB[0]) + (c4 * b[0])
+  out[1] = (c1 * a[1]) + (c2 * controlA[1]) + (c3 * controlB[1]) + (c4 * b[1])
+}
+
+export function createBounds(
+  objects: Iterable<HasBoundingRect>,
+  padding: number = 10,
+): ReadOnlyRect | null {
+  const bounds = new Float32Array([Infinity, Infinity, -Infinity, -Infinity])
+
+  for (const obj of objects) {
+    const rect = obj.boundingRect
+    bounds[0] = Math.min(bounds[0], rect[0])
+    bounds[1] = Math.min(bounds[1], rect[1])
+    bounds[2] = Math.max(bounds[2], rect[0] + rect[2])
+    bounds[3] = Math.max(bounds[3], rect[1] + rect[3])
+  }
+  if (!bounds.every(x => isFinite(x))) return null
+
+  return [
+    bounds[0] - padding,
+    bounds[1] - padding,
+    bounds[2] - bounds[0] + (2 * padding),
+    bounds[3] - bounds[1] + (2 * padding),
+  ]
+}
+
+/**
+ * Snaps the provided {@link Point} or {@link Rect} ({@link pos}) to a grid of size {@link snapTo}.
+ * @param pos The point that will be snapped
+ * @param snapTo The value to round up/down by (multiples thereof)
+ * @returns `true` if snapTo is truthy, otherwise `false`
+ * @remarks `NaN` propagates through this function and does not affect return value.
+ */
+export function snapPoint(pos: Point | Rect, snapTo: number): boolean {
+  if (!snapTo) return false
+
+  pos[0] = snapTo * Math.round(pos[0] / snapTo)
+  pos[1] = snapTo * Math.round(pos[1] / snapTo)
+  return true
+}
+
+/**
+ * Aligns a {@link Rect} relative to the edges or centre of a {@link container} rectangle.
+ *
+ * With no {@link inset}, the element will be placed on the interior of the {@link container},
+ * with their edges lined up on the {@link anchors}.  A positive {@link inset} moves the element towards the centre,
+ * negative will push it outside the {@link container}.
+ * @param rect The bounding rect of the element to align.
+ * If using the element's pos/size backing store, this function will move the element.
+ * @param anchors The direction(s) to anchor the element to
+ * @param container The rectangle inside which to align the element
+ * @param inset Relative offset from each {@link anchors} edge, with positive always leading to the centre, as an `[x, y]` point
+ * @returns The original {@link rect}, modified in place.
+ */
+export function alignToContainer(
+  rect: Rect,
+  anchors: Alignment,
+  [containerX, containerY, containerWidth, containerHeight]: ReadOnlyRect,
+  [insetX, insetY]: ReadOnlyPoint = [0, 0],
+): Rect {
+  if (hasFlag(anchors, Alignment.Left)) {
+    // Left
+    rect[0] = containerX + insetX
+  } else if (hasFlag(anchors, Alignment.Right)) {
+    // Right
+    rect[0] = containerX + containerWidth - insetX - rect[2]
+  } else if (hasFlag(anchors, Alignment.Centre)) {
+    // Horizontal centre
+    rect[0] = containerX + (containerWidth * 0.5) - (rect[2] * 0.5)
+  }
+
+  if (hasFlag(anchors, Alignment.Top)) {
+    // Top
+    rect[1] = containerY + insetY
+  } else if (hasFlag(anchors, Alignment.Bottom)) {
+    // Bottom
+    rect[1] = containerY + containerHeight - insetY - rect[3]
+  } else if (hasFlag(anchors, Alignment.Middle)) {
+    // Vertical middle
+    rect[1] = containerY + (containerHeight * 0.5) - (rect[3] * 0.5)
+  }
+  return rect
+}
+
+/**
+ * Aligns a {@link Rect} relative to the edges of {@link other}.
+ *
+ * With no {@link outset}, the element will be placed on the exterior of the {@link other},
+ * with their edges lined up on the {@link anchors}.  A positive {@link outset} moves the element away from the {@link other},
+ * negative will push it inside the {@link other}.
+ * @param rect The bounding rect of the element to align.
+ * If using the element's pos/size backing store, this function will move the element.
+ * @param anchors The direction(s) to anchor the element to
+ * @param other The rectangle to align {@link rect} to
+ * @param outset Relative offset from each {@link anchors} edge, with positive always moving away from the centre of the {@link other}, as an `[x, y]` point
+ * @returns The original {@link rect}, modified in place.
+ */
+export function alignOutsideContainer(
+  rect: Rect,
+  anchors: Alignment,
+  [otherX, otherY, otherWidth, otherHeight]: ReadOnlyRect,
+  [outsetX, outsetY]: ReadOnlyPoint = [0, 0],
+): Rect {
+  if (hasFlag(anchors, Alignment.Left)) {
+    // Left
+    rect[0] = otherX - outsetX - rect[2]
+  } else if (hasFlag(anchors, Alignment.Right)) {
+    // Right
+    rect[0] = otherX + otherWidth + outsetX
+  } else if (hasFlag(anchors, Alignment.Centre)) {
+    // Horizontal centre
+    rect[0] = otherX + (otherWidth * 0.5) - (rect[2] * 0.5)
+  }
+
+  if (hasFlag(anchors, Alignment.Top)) {
+    // Top
+    rect[1] = otherY - outsetY - rect[3]
+  } else if (hasFlag(anchors, Alignment.Bottom)) {
+    // Bottom
+    rect[1] = otherY + otherHeight + outsetY
+  } else if (hasFlag(anchors, Alignment.Middle)) {
+    // Vertical middle
+    rect[1] = otherY + (otherHeight * 0.5) - (rect[3] * 0.5)
+  }
+  return rect
+}
+
+export function clamp(value: number, min: number, max: number): number {
+  return value < min ? min : (value > max ? max : value)
+}
diff --git a/src/lib/litegraph/src/node/NodeInputSlot.ts b/src/lib/litegraph/src/node/NodeInputSlot.ts
new file mode 100644
index 0000000000..f23696009d
--- /dev/null
+++ b/src/lib/litegraph/src/node/NodeInputSlot.ts
@@ -0,0 +1,45 @@
+import type { INodeInputSlot, INodeOutputSlot, OptionalProps, ReadOnlyPoint } from '../interfaces'
+import type { LGraphNode } from '../LGraphNode'
+import type { LinkId } from '../LLink'
+
+import { LabelPosition } from '../draw'
+import { LiteGraph } from '../litegraph'
+import { type IDrawOptions, NodeSlot } from './NodeSlot'
+
+export class NodeInputSlot extends NodeSlot implements INodeInputSlot {
+  link: LinkId | null
+
+  get isWidgetInputSlot(): boolean {
+    return !!this.widget
+  }
+
+  get collapsedPos(): ReadOnlyPoint {
+    return [0, LiteGraph.NODE_TITLE_HEIGHT * -0.5]
+  }
+
+  constructor(slot: OptionalProps<INodeInputSlot, "boundingRect">, node: LGraphNode) {
+    super(slot, node)
+    this.link = slot.link
+  }
+
+  override get isConnected(): boolean {
+    return this.link != null
+  }
+
+  override isValidTarget(fromSlot: INodeInputSlot | INodeOutputSlot): boolean {
+    return "links" in fromSlot && LiteGraph.isValidConnection(this.type, fromSlot.type)
+  }
+
+  override draw(ctx: CanvasRenderingContext2D, options: Omit<IDrawOptions, "doStroke" | "labelPosition">) {
+    const { textAlign } = ctx
+    ctx.textAlign = "left"
+
+    super.draw(ctx, {
+      ...options,
+      labelPosition: LabelPosition.Right,
+      doStroke: false,
+    })
+
+    ctx.textAlign = textAlign
+  }
+}
diff --git a/src/lib/litegraph/src/node/NodeOutputSlot.ts b/src/lib/litegraph/src/node/NodeOutputSlot.ts
new file mode 100644
index 0000000000..180e65f488
--- /dev/null
+++ b/src/lib/litegraph/src/node/NodeOutputSlot.ts
@@ -0,0 +1,57 @@
+import type { INodeInputSlot, INodeOutputSlot, OptionalProps, ReadOnlyPoint } from '../interfaces'
+import type { LGraphNode } from '../LGraphNode'
+import type { LinkId } from '../LLink'
+
+import { LabelPosition } from '../draw'
+import { LiteGraph } from '../litegraph'
+import { type IDrawOptions, NodeSlot } from './NodeSlot'
+
+export class NodeOutputSlot extends NodeSlot implements INodeOutputSlot {
+  #node: LGraphNode
+
+  links: LinkId[] | null
+  _data?: unknown
+  slot_index?: number
+
+  get isWidgetInputSlot(): false {
+    return false
+  }
+
+  get collapsedPos(): ReadOnlyPoint {
+    return [
+      this.#node._collapsed_width ?? LiteGraph.NODE_COLLAPSED_WIDTH,
+      LiteGraph.NODE_TITLE_HEIGHT * -0.5,
+    ]
+  }
+
+  constructor(slot: OptionalProps<INodeOutputSlot, "boundingRect">, node: LGraphNode) {
+    super(slot, node)
+    this.links = slot.links
+    this._data = slot._data
+    this.slot_index = slot.slot_index
+    this.#node = node
+  }
+
+  override isValidTarget(fromSlot: INodeInputSlot | INodeOutputSlot): boolean {
+    return "link" in fromSlot && LiteGraph.isValidConnection(this.type, fromSlot.type)
+  }
+
+  override get isConnected(): boolean {
+    return this.links != null && this.links.length > 0
+  }
+
+  override draw(ctx: CanvasRenderingContext2D, options: Omit<IDrawOptions, "doStroke" | "labelPosition">) {
+    const { textAlign, strokeStyle } = ctx
+    ctx.textAlign = "right"
+    ctx.strokeStyle = "black"
+
+    super.draw(ctx, {
+      ...options,
+      labelPosition: LabelPosition.Left,
+      doStroke: true,
+    })
+
+    ctx.textAlign = textAlign
+    ctx.strokeStyle = strokeStyle
+  }
+}
diff --git a/src/lib/litegraph/src/node/NodeSlot.ts b/src/lib/litegraph/src/node/NodeSlot.ts
new file mode 100644
index 0000000000..2d6f6f681c
--- /dev/null
+++ b/src/lib/litegraph/src/node/NodeSlot.ts
@@ -0,0 +1,224 @@
+import type { CanvasColour, DefaultConnectionColors, INodeInputSlot, INodeOutputSlot, INodeSlot, OptionalProps, Point, ReadOnlyPoint } from '../interfaces'
+import type { LGraphNode } from '../LGraphNode'
+
+import { LabelPosition, SlotShape, SlotType } from '../draw'
+import { LiteGraph, Rectangle } from '../litegraph'
+import { getCentre } from '../measure'
+import { LinkDirection, RenderShape } from '../types/globalEnums'
+
+import { NodeInputSlot } from "./NodeInputSlot"
+import { SlotBase } from "./SlotBase"
+
+export interface IDrawOptions {
+  colorContext: DefaultConnectionColors
+  labelPosition?: LabelPosition
+  lowQuality?: boolean
+  doStroke?: boolean
+  highlight?: boolean
+}
+
+/** Shared base class for {@link LGraphNode} input and output slots. */
+export abstract class NodeSlot extends SlotBase implements INodeSlot {
+  pos?: Point
+
+  /** The offset from the parent node to the centre point of this slot. */
+  get #centreOffset(): ReadOnlyPoint {
+    const nodePos = this.node.pos
+    const { boundingRect } = this
+
+    // Use height; widget input slots may be thinner.
+    const diameter = boundingRect[3]
+
+    return getCentre([
+      boundingRect[0] - nodePos[0],
+      boundingRect[1] - nodePos[1],
+      diameter,
+      diameter,
+    ])
+  }
+
+  /** The center point of this slot when the node is collapsed. */
+  abstract get collapsedPos(): ReadOnlyPoint
+
+  #node: LGraphNode
+  get node(): LGraphNode {
+    return this.#node
+  }
+
+  get highlightColor(): CanvasColour {
+    return LiteGraph.NODE_TEXT_HIGHLIGHT_COLOR ?? LiteGraph.NODE_SELECTED_TITLE_COLOR ?? LiteGraph.NODE_TEXT_COLOR
+  }
+
+  abstract get isWidgetInputSlot(): boolean
+
+  constructor(slot: OptionalProps<INodeSlot, "boundingRect">, node: LGraphNode) {
+    const { boundingRect, name, type, ...rest } = slot
+    const rectangle = boundingRect ? Rectangle.ensureRect(boundingRect) : new Rectangle()
+
+    super(name, type, rectangle)
+
+    Object.assign(this, rest)
+    this.#node = node
+  }
+
+  /**
+   * Whether this slot is a valid target for a dragging link.
+   * @param fromSlot The slot that the link is being connected from.
+   */
+  abstract isValidTarget(fromSlot: INodeInputSlot | INodeOutputSlot): boolean
+
+  /**
+   * The label to display in the UI.
+   */
+  get renderingLabel(): string {
+    return this.label || this.localized_name || this.name || ""
+  }
+
+  draw(
+    ctx: CanvasRenderingContext2D,
+    {
+      colorContext,
+      labelPosition = LabelPosition.Right,
+      lowQuality = false,
+      highlight = false,
+      doStroke = false,
+    }: IDrawOptions,
+  ) {
+    // Save the current fillStyle and strokeStyle
+    const originalFillStyle = ctx.fillStyle
+    const originalStrokeStyle = ctx.strokeStyle
+    const originalLineWidth = ctx.lineWidth
+
+    const labelColor = highlight
+      ? this.highlightColor
+      : LiteGraph.NODE_TEXT_COLOR
+
+    const pos = this.#centreOffset
+    const slot_type = this.type
+    const slot_shape = (
+      slot_type === SlotType.Array ? SlotShape.Grid : this.shape
+    ) as SlotShape
+
+    ctx.beginPath()
+    let doFill = true
+
+    ctx.fillStyle = this.renderingColor(colorContext)
+    ctx.lineWidth = 1
+    if (slot_type === SlotType.Event || slot_shape === SlotShape.Box) {
+      ctx.rect(pos[0] - 6 + 0.5, pos[1] - 5 + 0.5, 14, 10)
+    } else if (slot_shape === SlotShape.Arrow) {
+      ctx.moveTo(pos[0] + 8, pos[1] + 0.5)
+      ctx.lineTo(pos[0] - 4, pos[1] + 6 + 0.5)
+      ctx.lineTo(pos[0] - 4, pos[1] - 6 + 0.5)
+      ctx.closePath()
+    } else if (slot_shape === SlotShape.Grid) {
+      const gridSize = 3
+      const cellSize = 2
+      const spacing = 3
+
+      for (let x = 0; x < gridSize; x++) {
+        for (let y = 0; y < gridSize; y++) {
+          ctx.rect(
+            pos[0] - 4 + x * spacing,
+            pos[1] - 4 + y * spacing,
+            cellSize,
+            cellSize,
+          )
+        }
+      }
+      doStroke = false
+    } else {
+      // Default rendering for circle, hollow circle.
+      if (lowQuality) {
+        ctx.rect(pos[0] - 4, pos[1] - 4, 8, 8)
+      } else {
+        let radius: number
+        if (slot_shape === SlotShape.HollowCircle) {
+          doFill = false
+          doStroke = true
+          ctx.lineWidth = 3
+          ctx.strokeStyle = ctx.fillStyle
+          radius = highlight ? 4 : 3
+        } else {
+          // Normal circle
+          radius = highlight ? 5 : 4
+        }
+        ctx.arc(pos[0], pos[1], radius, 0, Math.PI * 2)
+      }
+    }
+
+    if (doFill) ctx.fill()
+    if (!lowQuality && doStroke) ctx.stroke()
+
+    // render slot label
+    const hideLabel = lowQuality || this.isWidgetInputSlot
+    if (!hideLabel) {
+      const text = this.renderingLabel
+      if (text) {
+        // TODO: Finish impl.  Highlight text on mouseover unless we're connecting links.
+        ctx.fillStyle = labelColor
+
+        if (labelPosition === LabelPosition.Right) {
+          if (this.dir == LinkDirection.UP) {
+            ctx.fillText(text, pos[0], pos[1] - 10)
+          } else {
+            ctx.fillText(text, pos[0] + 10, pos[1] + 5)
+          }
+        } else {
+          if (this.dir == LinkDirection.DOWN) {
+            ctx.fillText(text, pos[0], pos[1] - 8)
+          } else {
+            ctx.fillText(text, pos[0] - 10, pos[1] + 5)
+          }
+        }
+      }
+    }
+
+    // Draw a red circle if the slot has errors.
+    if (this.hasErrors) {
+      ctx.lineWidth = 2
+      ctx.strokeStyle = "red"
+      ctx.beginPath()
+      ctx.arc(pos[0], pos[1], 12, 0, Math.PI * 2)
+      ctx.stroke()
+    }
+
+    // Restore the original fillStyle and strokeStyle
+    ctx.fillStyle = originalFillStyle
+    ctx.strokeStyle = originalStrokeStyle
+    ctx.lineWidth = originalLineWidth
+  }
+
+  drawCollapsed(ctx: CanvasRenderingContext2D) {
+    const [x, y] = this.collapsedPos
+
+    // Save original styles
+    const { fillStyle } = ctx
+
+    ctx.fillStyle = "#686"
+    ctx.beginPath()
+
+    if (this.type === SlotType.Event || this.shape === RenderShape.BOX) {
+      ctx.rect(x - 7 + 0.5, y - 4, 14, 8)
+    } else if (this.shape === RenderShape.ARROW) {
+      // Adjust arrow direction based on whether this is an input or output slot
+      const isInput = this instanceof NodeInputSlot
+      if (isInput) {
+        ctx.moveTo(x + 8, y)
+        ctx.lineTo(x - 4, y - 4)
+        ctx.lineTo(x - 4, y + 4)
+      } else {
+        ctx.moveTo(x + 6, y)
+        ctx.lineTo(x - 6, y - 4)
+        ctx.lineTo(x - 6, y + 4)
+      }
+      ctx.closePath()
+    } else {
+      ctx.arc(x, y, 4, 0, Math.PI * 2)
+    }
+    ctx.fill()
+
+    // Restore original styles
+    ctx.fillStyle = fillStyle
+  }
+}
diff --git a/src/lib/litegraph/src/node/SlotBase.ts b/src/lib/litegraph/src/node/SlotBase.ts
new file mode 100644
index 0000000000..4fb7385c74
--- /dev/null
+++ b/src/lib/litegraph/src/node/SlotBase.ts
@@ -0,0 +1,43 @@
+import type { CanvasColour, DefaultConnectionColors, INodeSlot, ISlotType, IWidgetLocator, Point } from '../interfaces'
+import type { LLink } from '../LLink'
+import type { RenderShape } from '../types/globalEnums'
+import type { LinkDirection } from '../types/globalEnums'
+
+import { Rectangle } from '../infrastructure/Rectangle'
+
+/** Base class for all input & output slots. */
+
+export abstract class SlotBase implements INodeSlot {
+  name: string
+  localized_name?: string
+  label?: string
+  type: ISlotType
+  dir?: LinkDirection
+  removable?: boolean
+  shape?: RenderShape
+  color_off?: CanvasColour
+  color_on?: CanvasColour
+  locked?: boolean
+  nameLocked?: boolean
+  widget?: IWidgetLocator
+  _floatingLinks?: Set<LLink>
+  hasErrors?: boolean
+
+  /** The centre point of the slot. */
+  abstract pos?: Point
+  readonly boundingRect: Rectangle
+
+  constructor(name: string, type: ISlotType, boundingRect?: Rectangle) {
+    this.name = name
+    this.type = type
+    this.boundingRect = boundingRect ?? new Rectangle()
+  }
+
+  abstract get isConnected(): boolean
+
+  renderingColor(colorContext: DefaultConnectionColors): CanvasColour {
+    return this.isConnected
+      ? this.color_on || colorContext.getConnectedColor(this.type)
+      : this.color_off || colorContext.getDisconnectedColor(this.type)
+  }
+}
diff --git a/src/lib/litegraph/src/node/slotUtils.ts b/src/lib/litegraph/src/node/slotUtils.ts
new file mode 100644
index 0000000000..9442f821ff
--- /dev/null
+++ b/src/lib/litegraph/src/node/slotUtils.ts
@@ -0,0 +1,56 @@
+import type { IWidgetInputSlot, SharedIntersection } from '../interfaces'
+import type { INodeInputSlot, INodeOutputSlot, INodeSlot, IWidget } from '../litegraph'
+import type { ISerialisableNodeInput, ISerialisableNodeOutput } from '../types/serialisation'
+
+type CommonIoSlotProps = SharedIntersection<ISerialisableNodeInput, ISerialisableNodeOutput>
+
+export function shallowCloneCommonProps(slot: CommonIoSlotProps): CommonIoSlotProps {
+  const { color_off, color_on, dir, label, localized_name, locked, name, nameLocked, removable, shape, type } = slot
+  return { color_off, color_on, dir, label, localized_name, locked, name, nameLocked, removable, shape, type }
+}
+
+export function inputAsSerialisable(slot: INodeInputSlot): ISerialisableNodeInput {
+  const { link } = slot
+  const widgetOrPos = slot.widget
+    ? { widget: { name: slot.widget.name } }
+    : { pos: slot.pos }
+
+  return {
+    ...shallowCloneCommonProps(slot),
+    ...widgetOrPos,
+    link,
+  }
+}
+
+export function outputAsSerialisable(slot: INodeOutputSlot & { widget?: IWidget }): ISerialisableNodeOutput {
+  const { pos, slot_index, links, widget } = slot
+  // Output widgets do not exist in Litegraph; this is a temporary downstream workaround.
+  const outputWidget = widget
+    ? { widget: { name: widget.name } }
+    : null
+
+  return {
+    ...shallowCloneCommonProps(slot),
+    ...outputWidget,
+    pos,
+    slot_index,
+    links,
+  }
+}
+
+export function isINodeInputSlot(slot: INodeSlot): slot is INodeInputSlot {
+  return "link" in slot
+}
+
+export function isINodeOutputSlot(slot: INodeSlot): slot is INodeOutputSlot {
+  return "links" in slot
+}
+
+/**
+ * Type guard: Whether this input slot is attached to a widget.
+ * @param slot The slot to check.
+ */
+
+export function isWidgetInputSlot(slot: INodeInputSlot): slot is IWidgetInputSlot {
+  return !!slot.widget
+}
diff --git a/src/lib/litegraph/src/polyfills.ts b/src/lib/litegraph/src/polyfills.ts
new file mode 100644
index 0000000000..73a1c67106
--- /dev/null
+++ b/src/lib/litegraph/src/polyfills.ts
@@ -0,0 +1,92 @@
+// @ts-expect-error Polyfill
+Symbol.dispose ??= Symbol("Symbol.dispose")
+// @ts-expect-error Polyfill
+Symbol.asyncDispose ??= Symbol("Symbol.asyncDispose")
+
+// API *************************************************
+// like rect but rounded corners
+export function loadPolyfills() {
+  if (
+    typeof window != "undefined" &&
+    window.CanvasRenderingContext2D &&
+    !window.CanvasRenderingContext2D.prototype.roundRect
+  ) {
+    // @ts-expect-error Slightly broken polyfill - radius_low not impl. anywhere
+    window.CanvasRenderingContext2D.prototype.roundRect = function (
+      x: number,
+      y: number,
+      w: number,
+      h: number,
+      radius: number | number[],
+      radius_low: number | number[],
+    ) {
+      let top_left_radius = 0
+      let top_right_radius = 0
+      let bottom_left_radius = 0
+      let bottom_right_radius = 0
+
+      if (radius === 0) {
+        this.rect(x, y, w, h)
+        return
+      }
+
+      if (radius_low === undefined) radius_low = radius
+
+      // make it compatible with official one
+      if (Array.isArray(radius)) {
+        if (radius.length == 1) {
+          top_left_radius = top_right_radius = bottom_left_radius = bottom_right_radius = radius[0]
+        } else if (radius.length == 2) {
+          top_left_radius = bottom_right_radius = radius[0]
+          top_right_radius = bottom_left_radius = radius[1]
+        } else if (radius.length == 4) {
+          top_left_radius = radius[0]
+          top_right_radius = radius[1]
+          bottom_left_radius = radius[2]
+          bottom_right_radius = radius[3]
+        } else {
+          return
+        }
+      } else {
+        // old using numbers
+        top_left_radius = radius || 0
+        top_right_radius = radius || 0
+
+        const low = !Array.isArray(radius_low) && radius_low ? radius_low : 0
+        bottom_left_radius = low
+        bottom_right_radius = low
+      }
+
+      // top right
+      this.moveTo(x + top_left_radius, y)
+      this.lineTo(x + w - top_right_radius, y)
+      this.quadraticCurveTo(x + w, y, x + w, y + top_right_radius)
+
+      // bottom right
+      this.lineTo(x + w, y + h - bottom_right_radius)
+      this.quadraticCurveTo(
+        x + w,
+        y + h,
+        x + w - bottom_right_radius,
+        y + h,
+      )
+
+      // bottom left
+      this.lineTo(x + bottom_right_radius, y + h)
+      this.quadraticCurveTo(x, y + h, x, y + h - bottom_left_radius)
+
+      // top left
+      this.lineTo(x, y + bottom_left_radius)
+      this.quadraticCurveTo(x, y, x + top_left_radius, y)
+    }
+  }
+
+  if (typeof window != "undefined" && !window["requestAnimationFrame"]) {
+    window.requestAnimationFrame =
+      // @ts-expect-error Legacy code
+      window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||
+      function (callback) {
+        window.setTimeout(callback, 1000 / 60)
+      }
+  }
+}
diff --git a/src/lib/litegraph/src/strings.ts b/src/lib/litegraph/src/strings.ts
new file mode 100644
index 0000000000..e5481e604a
--- /dev/null
+++ b/src/lib/litegraph/src/strings.ts
@@ -0,0 +1,39 @@
+import type { ISlotType } from "./litegraph"
+
+/**
+ * Uses the standard String() function to coerce to string, unless the value is null or undefined - then null.
+ * @param value The value to convert
+ * @returns String(value) or null
+ */
+export function stringOrNull(value: unknown): string | null {
+  return value == null ? null : String(value)
+}
+
+/**
+ * Uses the standard String() function to coerce to string, unless the value is null or undefined - then an empty string
+ * @param value The value to convert
+ * @returns String(value) or ""
+ */
+export function stringOrEmpty(value: unknown): string {
+  return value == null ? "" : String(value)
+}
+
+export function parseSlotTypes(type: ISlotType): string[] {
+  return type == "" || type == "0" ? ["*"] : String(type).toLowerCase().split(",")
+}
+
+/**
+ * Creates a unique name by appending an underscore and a number to the end of the name
+ * if it already exists.
+ * @param name The name to make unique
+ * @param existingNames The names that already exist. Default: an empty array
+ * @returns The name, or a unique name if it already exists.
+ */
+export function nextUniqueName(name: string, existingNames: string[] = []): string {
+  let i = 1
+  const baseName = name
+  while (existingNames.includes(name)) {
+    name = `${baseName}_${i++}`
+  }
+  return name
+}
diff --git a/src/lib/litegraph/src/subgraph/EmptySubgraphInput.ts b/src/lib/litegraph/src/subgraph/EmptySubgraphInput.ts
new file mode 100644
index 0000000000..b3b79305a4
--- /dev/null
+++ b/src/lib/litegraph/src/subgraph/EmptySubgraphInput.ts
@@ -0,0 +1,39 @@
+import type { SubgraphInputNode } from "./SubgraphInputNode"
+import type { INodeInputSlot, Point } from '../interfaces'
+import type { LGraphNode } from '../LGraphNode'
+import type { RerouteId } from '../Reroute'
+
+import { LLink } from '../LLink'
+import { nextUniqueName } from '../strings'
+import { zeroUuid } from '../utils/uuid'
+
+import { SubgraphInput } from "./SubgraphInput"
+
+/**
+ * A virtual slot that simply creates a new input slot when connected to.
+ */
+export class EmptySubgraphInput extends SubgraphInput {
+  declare parent: SubgraphInputNode
+
+  constructor(parent: SubgraphInputNode) {
+    super({
+      id: zeroUuid,
+      name: "",
+      type: "",
+    }, parent)
+  }
+
+  override connect(slot: INodeInputSlot, node: LGraphNode, afterRerouteId?: RerouteId): LLink | undefined {
+    const { subgraph } = this.parent
+    const existingNames = subgraph.inputs.map(x => x.name)
+
+    const name = nextUniqueName(slot.name, existingNames)
+    const input = subgraph.addInput(name, String(slot.type))
+    return input.connect(slot, node, afterRerouteId)
+  }
+
+  override get labelPos(): Point {
+    const [x, y, , height] = this.boundingRect
+    return [x, y + height * 0.5]
+  }
+}
diff --git a/src/lib/litegraph/src/subgraph/EmptySubgraphOutput.ts b/src/lib/litegraph/src/subgraph/EmptySubgraphOutput.ts
new file mode 100644
index 0000000000..ab19a688f6
--- /dev/null
+++ b/src/lib/litegraph/src/subgraph/EmptySubgraphOutput.ts
@@ -0,0 +1,39 @@
+import type { SubgraphOutputNode } from "./SubgraphOutputNode"
+import type { INodeOutputSlot, Point } from '../interfaces'
+import type { LGraphNode } from '../LGraphNode'
+import type { RerouteId } from '../Reroute'
+
+import { LLink } from '../LLink'
+import { nextUniqueName } from '../strings'
+import { zeroUuid } from '../utils/uuid'
+
+import { SubgraphOutput } from "./SubgraphOutput"
+
+/**
+ * A virtual slot that simply creates a new output slot when connected to.
+ */
+export class EmptySubgraphOutput extends SubgraphOutput {
+  declare parent: SubgraphOutputNode
+
+  constructor(parent: SubgraphOutputNode) {
+    super({
+      id: zeroUuid,
+      name: "",
+      type: "",
+    }, parent)
+  }
+
+  override connect(slot: INodeOutputSlot, node: LGraphNode, afterRerouteId?: RerouteId): LLink | undefined {
+    const { subgraph } = this.parent
+    const existingNames = subgraph.outputs.map(x => x.name)
+
+    const name = nextUniqueName(slot.name, existingNames)
+    const output = subgraph.addOutput(name, String(slot.type))
+    return output.connect(slot, node, afterRerouteId)
+  }
+
+  override get labelPos(): Point {
+    const [x, y, , height] = this.boundingRect
+    return [x, y + height * 0.5]
+  }
+}
diff --git a/src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts b/src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts
new file mode 100644
index 0000000000..d9aac066d9
--- /dev/null
+++ b/src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts
@@ -0,0 +1,232 @@
+import type { SubgraphNode } from "./SubgraphNode"
+import type { CallbackParams, CallbackReturn, ISlotType } from '../interfaces'
+import type { LGraph } from '../LGraph'
+import type { LGraphNode, NodeId } from '../LGraphNode'
+
+import { InvalidLinkError } from '../infrastructure/InvalidLinkError'
+import { NullGraphError } from '../infrastructure/NullGraphError'
+import { RecursionError } from '../infrastructure/RecursionError'
+import { SlotIndexError } from '../infrastructure/SlotIndexError'
+import { LGraphEventMode } from '../litegraph'
+
+import { Subgraph } from "./Subgraph"
+
+/**
+ * Interface describing the data transfer objects used when compiling a graph for execution.
+ */
+export type ExecutableLGraphNode = Omit<ExecutableNodeDTO, "graph" | "node" | "subgraphNodePath" | "subgraphNode">
+
+type NodeAndInput = {
+  node: ExecutableLGraphNode
+  origin_id: NodeId
+  origin_slot: number
+}
+
+/**
+ * Concrete implementation of {@link ExecutableLGraphNode}.
+ * @remarks This is the class that is used to create the data transfer objects for executable nodes.
+ */
+export class ExecutableNodeDTO implements ExecutableLGraphNode {
+  applyToGraph?(...args: CallbackParams<typeof this.node.applyToGraph>): CallbackReturn<typeof this.node.applyToGraph>
+
+  /** The graph that this node is a part of. */
+  readonly graph: LGraph | Subgraph
+
+  inputs: { linkId: number | null, name: string, type: ISlotType }[]
+
+  /** Backing field for {@link id}. */
+  #id: NodeId
+
+  /**
+   * The path to the acutal node through subgraph instances, represented as a list of all subgraph node IDs (instances),
+   * followed by the actual original node ID within the subgraph. Each segment is separated by `:`.
+   *
+   * e.g. `1:2:3`:
+   * - `1` is the node ID of the first subgraph node in the parent workflow
+   * - `2` is the node ID of the second subgraph node in the first subgraph
+   * - `3` is the node ID of the actual node in the subgraph definition
+   */
+  get id() {
+    return this.#id
+  }
+
+  get type() {
+    return this.node.type
+  }
+
+  get title() {
+    return this.node.title
+  }
+
+  get mode() {
+    return this.node.mode
+  }
+
+  get comfyClass() {
+    return this.node.comfyClass
+  }
+
+  get isVirtualNode() {
+    return this.node.isVirtualNode
+  }
+
+  get widgets() {
+    return this.node.widgets
+  }
+
+  constructor(
+    /** The actual node that this DTO wraps. */
+    readonly node: LGraphNode | SubgraphNode,
+    /** A list of subgraph instance node IDs from the root graph to the containing instance. @see {@link id} */
+    readonly subgraphNodePath: readonly NodeId[],
+    /** The actual subgraph instance that contains this node, otherise undefined. */
+    readonly subgraphNode?: SubgraphNode,
+  ) {
+    if (!node.graph) throw new NullGraphError()
+
+    // Set the internal ID of the DTO
+    this.#id = [...this.subgraphNodePath, this.node.id].join(":")
+    this.graph = node.graph
+    this.inputs = this.node.inputs.map(x => ({
+      linkId: x.link,
+      name: x.name,
+      type: x.type,
+    }))
+
+    // Only create a wrapper if the node has an applyToGraph method
+    if (this.node.applyToGraph) {
+      this.applyToGraph = (...args) => this.node.applyToGraph?.(...args)
+    }
+  }
+
+  /** Returns either the DTO itself, or the DTOs of the inner nodes of the subgraph. */
+  getInnerNodes(): ExecutableLGraphNode[] {
+    return this.subgraphNode ? this.subgraphNode.getInnerNodes() : [this]
+  }
+
+  /**
+   * Resolves the executable node & link IDs for a given input slot.
+   * @param slot The slot index of the input.
+   * @param visited Leave empty unless overriding this method.
+   * A set of unique IDs, used to guard against infinite recursion.
+   * If overriding, ensure that the set is passed on all recursive calls.
+   * @returns The node and the origin ID / slot index of the output.
+   */
+  resolveInput(slot: number, visited = new Set<string>()): NodeAndInput | undefined {
+    const uniqueId = `${this.subgraphNode?.subgraph.id}:${this.node.id}[I]${slot}`
+    if (visited.has(uniqueId)) throw new RecursionError(`While resolving subgraph input [${uniqueId}]`)
+    visited.add(uniqueId)
+
+    const input = this.inputs.at(slot)
+    if (!input) throw new SlotIndexError(`No input found for flattened id [${this.id}] slot [${slot}]`)
+
+    // Nothing connected
+    if (input.linkId == null) return
+
+    const link = this.graph.getLink(input.linkId)
+    if (!link) throw new InvalidLinkError(`No link found in parent graph for id [${this.id}] slot [${slot}] ${input.name}`)
+
+    const { subgraphNode } = this
+
+    // Link goes up and out of this subgraph
+    if (subgraphNode && link.originIsIoNode) {
+      const subgraphNodeInput = subgraphNode.inputs.at(link.origin_slot)
+      if (!subgraphNodeInput) throw new SlotIndexError(`No input found for slot [${link.origin_slot}] ${input.name}`)
+
+      // Nothing connected
+      const linkId = subgraphNodeInput.link
+      if (linkId == null) return
+
+      const outerLink = subgraphNode.graph.getLink(linkId)
+      if (!outerLink) throw new InvalidLinkError(`No outer link found for slot [${link.origin_slot}] ${input.name}`)
+
+      // Translate subgraph node IDs to instances (not worth optimising yet)
+      const subgraphNodes = this.graph.rootGraph.resolveSubgraphIdPath(this.subgraphNodePath)
+
+      const subgraphNodeDto = new ExecutableNodeDTO(subgraphNode, this.subgraphNodePath.slice(0, -1), subgraphNodes.at(-2))
+      return subgraphNodeDto.resolveInput(outerLink.target_slot, visited)
+    }
+
+    // Not part of a subgraph; use the original link
+    const outputNode = this.graph.getNodeById(link.origin_id)
+    if (!outputNode) throw new InvalidLinkError(`No input node found for id [${this.id}] slot [${slot}] ${input.name}`)
+
+    const outputNodeDto = new ExecutableNodeDTO(outputNode, this.subgraphNodePath, subgraphNode)
+
+    return outputNodeDto.resolveOutput(link.origin_slot, input.type, visited)
+  }
+
+  /**
+   * Determines whether this output is a valid endpoint for a link (non-virtual, non-bypass).
+   * @param slot The slot index of the output.
+   * @param type The type of the input
+   * @param visited A set of unique IDs to guard against infinite recursion. See {@link resolveInput}.
+   * @returns The node and the origin ID / slot index of the output.
+   */
+  resolveOutput(slot: number, type: ISlotType, visited: Set<string>): NodeAndInput | undefined {
+    const uniqueId = `${this.subgraphNode?.subgraph.id}:${this.node.id}[O]${slot}`
+    if (visited.has(uniqueId)) throw new RecursionError(`While resolving subgraph output [${uniqueId}]`)
+    visited.add(uniqueId)
+
+    // Upstreamed: Bypass nodes are bypassed using the first input with matching type
+    if (this.mode === LGraphEventMode.BYPASS) {
+      const { inputs } = this
+
+      // Bypass nodes by finding first input with matching type
+      const parentInputIndexes = Object.keys(inputs).map(Number)
+      // Prioritise exact slot index
+      const indexes = [slot, ...parentInputIndexes]
+      const matchingIndex = indexes.find(i => inputs[i]?.type === type)
+
+      // No input types match
+      if (matchingIndex === undefined) {
+        console.debug(`[ExecutableNodeDTO.resolveOutput] No input types match type [${type}] for id [${this.id}] slot [${slot}]`, this)
+        return
+      }
+
+      return this.resolveInput(matchingIndex, visited)
+    }
+
+    const { node } = this
+    if (node.isSubgraphNode()) return this.#resolveSubgraphOutput(slot, type, visited)
+
+    // Upstreamed: Other virtual nodes are bypassed using the same input/output index (slots must match)
+    if (node.isVirtualNode) {
+      if (this.inputs.at(slot)) return this.resolveInput(slot, visited)
+
+      // Virtual nodes without a matching input should be discarded.
+      return
+    }
+
+    return {
+      node: this,
+      origin_id: this.id,
+      origin_slot: slot,
+    }
+  }
+
+  /**
+   * Resolves the link inside a subgraph node, from the subgraph IO node to the node inside the subgraph.
+   * @param slot The slot index of the output on the subgraph node.
+   * @param visited A set of unique IDs to guard against infinite recursion. See {@link resolveInput}.
+   * @returns A DTO for the node, and the origin ID / slot index of the output.
+   */
+  #resolveSubgraphOutput(slot: number, type: ISlotType, visited: Set<string>): NodeAndInput | undefined {
+    const { node } = this
+    const output = node.outputs.at(slot)
+
+    if (!output) throw new SlotIndexError(`No output found for flattened id [${this.id}] slot [${slot}]`)
+    if (!node.isSubgraphNode()) throw new TypeError(`Node is not a subgraph node: ${node.id}`)
+
+    // Link inside the subgraph
+    const innerResolved = node.resolveSubgraphOutputLink(slot)
+    if (!innerResolved) return
+
+    const innerNode = innerResolved.outputNode
+    if (!innerNode) throw new Error(`No output node found for id [${this.id}] slot [${slot}] ${output.name}`)
+
+    // Recurse into the subgraph
+    const innerNodeDto = new ExecutableNodeDTO(innerNode, [...this.subgraphNodePath, node.id], node)
+    return innerNodeDto.resolveOutput(innerResolved.link.origin_slot, type, visited)
+  }
+}
diff --git a/src/lib/litegraph/src/subgraph/Subgraph.ts b/src/lib/litegraph/src/subgraph/Subgraph.ts
new file mode 100644
index 0000000000..91c0bd4e47
--- /dev/null
+++ b/src/lib/litegraph/src/subgraph/Subgraph.ts
@@ -0,0 +1,235 @@
+import type { SubgraphEventMap } from '../infrastructure/SubgraphEventMap'
+import type { DefaultConnectionColors } from '../interfaces'
+import type { LGraphCanvas } from '../LGraphCanvas'
+import type { ExportedSubgraph, ExposedWidget, ISerialisedGraph, Serialisable, SerialisableGraph } from '../types/serialisation'
+
+import { CustomEventTarget } from '../infrastructure/CustomEventTarget'
+import { type BaseLGraph, LGraph } from '../LGraph'
+import { createUuidv4 } from '../litegraph'
+
+import { SubgraphInput } from "./SubgraphInput"
+import { SubgraphInputNode } from "./SubgraphInputNode"
+import { SubgraphOutput } from "./SubgraphOutput"
+import { SubgraphOutputNode } from "./SubgraphOutputNode"
+
+/** Internal; simplifies type definitions. */
+export type GraphOrSubgraph = LGraph | Subgraph
+
+/** A subgraph definition. */
+export class Subgraph extends LGraph implements BaseLGraph, Serialisable<ExportedSubgraph> {
+  declare readonly events: CustomEventTarget<SubgraphEventMap>
+
+  /** Limits the number of levels / depth that subgraphs may be nested.  Prevents uncontrolled programmatic nesting. */
+  static MAX_NESTED_SUBGRAPHS = 1000
+
+  /** The display name of the subgraph. */
+  name: string = "Unnamed Subgraph"
+
+  readonly inputNode = new SubgraphInputNode(this)
+  readonly outputNode = new SubgraphOutputNode(this)
+
+  /** Ordered list of inputs to the subgraph itself. Similar to a reroute, with the input side in the graph, and the output side in the subgraph. */
+  readonly inputs: SubgraphInput[] = []
+  /** Ordered list of outputs from the subgraph itself. Similar to a reroute, with the input side in the subgraph, and the output side in the graph. */
+  readonly outputs: SubgraphOutput[] = []
+  /** A list of node widgets displayed in the parent graph, on the subgraph object. */
+  readonly widgets: ExposedWidget[] = []
+
+  #rootGraph: LGraph
+  override get rootGraph(): LGraph {
+    return this.#rootGraph
+  }
+
+  constructor(
+    rootGraph: LGraph,
+    data: ExportedSubgraph,
+  ) {
+    if (!rootGraph) throw new Error("Root graph is required")
+
+    super()
+
+    this.#rootGraph = rootGraph
+
+    const cloned = structuredClone(data)
+    this._configureBase(cloned)
+    this.#configureSubgraph(cloned)
+  }
+
+  getIoNodeOnPos(x: number, y: number): SubgraphInputNode | SubgraphOutputNode | undefined {
+    const { inputNode, outputNode } = this
+    if (inputNode.containsPoint([x, y])) return inputNode
+    if (outputNode.containsPoint([x, y])) return outputNode
+  }
+
+  #configureSubgraph(data: ISerialisedGraph & ExportedSubgraph | SerialisableGraph & ExportedSubgraph): void {
+    const { name, inputs, outputs, widgets } = data
+
+    this.name = name
+    if (inputs) {
+      this.inputs.length = 0
+      for (const input of inputs) {
+        this.inputs.push(new SubgraphInput(input, this.inputNode))
+      }
+    }
+
+    if (outputs) {
+      this.outputs.length = 0
+      for (const output of outputs) {
+        this.outputs.push(new SubgraphOutput(output, this.outputNode))
+      }
+    }
+
+    if (widgets) {
+      this.widgets.length = 0
+      for (const widget of widgets) {
+        this.widgets.push(widget)
+      }
+    }
+
+    this.inputNode.configure(data.inputNode)
+    this.outputNode.configure(data.outputNode)
+  }
+
+  override configure(data: ISerialisedGraph & ExportedSubgraph | SerialisableGraph & ExportedSubgraph, keep_old?: boolean): boolean | undefined {
+    const r = super.configure(data, keep_old)
+
+    this.#configureSubgraph(data)
+    return r
+  }
+
+  override attachCanvas(canvas: LGraphCanvas): void {
+    super.attachCanvas(canvas)
+    canvas.subgraph = this
+  }
+
+  addInput(name: string, type: string): SubgraphInput {
+    this.events.dispatch("adding-input", { name, type })
+
+    const input = new SubgraphInput({
+      id: createUuidv4(),
+      name,
+      type,
+    }, this.inputNode)
+
+    this.inputs.push(input)
+    this.events.dispatch("input-added", { input })
+
+    return input
+  }
+
+  addOutput(name: string, type: string): SubgraphOutput {
+    this.events.dispatch("adding-output", { name, type })
+
+    const output = new SubgraphOutput({
+      id: createUuidv4(),
+      name,
+      type,
+    }, this.outputNode)
+
+    this.outputs.push(output)
+    this.events.dispatch("output-added", { output })
+
+    return output
+  }
+
+  /**
+   * Renames an input slot in the subgraph.
+   * @param input The input slot to rename.
+   * @param name The new name for the input slot.
+   */
+  renameInput(input: SubgraphInput, name: string): void {
+    const index = this.inputs.indexOf(input)
+    if (index === -1) throw new Error("Input not found")
+
+    const oldName = input.displayName
+    this.events.dispatch("renaming-input", { input, index, oldName, newName: name })
+
+    input.label = name
+  }
+
+  /**
+   * Renames an output slot in the subgraph.
+   * @param output The output slot to rename.
+   * @param name The new name for the output slot.
+   */
+  renameOutput(output: SubgraphOutput, name: string): void {
+    const index = this.outputs.indexOf(output)
+    if (index === -1) throw new Error("Output not found")
+
+    const oldName = output.displayName
+    this.events.dispatch("renaming-output", { output, index, oldName, newName: name })
+
+    output.label = name
+  }
+
+  /**
+   * Removes an input slot from the subgraph.
+   * @param input The input slot to remove.
+   */
+  removeInput(input: SubgraphInput): void {
+    input.disconnect()
+
+    const index = this.inputs.indexOf(input)
+    if (index === -1) throw new Error("Input not found")
+
+    const mayContinue = this.events.dispatch("removing-input", { input, index })
+    if (!mayContinue) return
+
+    this.inputs.splice(index, 1)
+
+    const { length } = this.inputs
+    for (let i = index; i < length; i++) {
+      this.inputs[i].decrementSlots("inputs")
+    }
+  }
+
+  /**
+   * Removes an output slot from the subgraph.
+   * @param output The output slot to remove.
+   */
+  removeOutput(output: SubgraphOutput): void {
+    output.disconnect()
+
+    const index = this.outputs.indexOf(output)
+    if (index === -1) throw new Error("Output not found")
+
+    const mayContinue = this.events.dispatch("removing-output", { output, index })
+    if (!mayContinue) return
+
+    this.outputs.splice(index, 1)
+
+    const { length } = this.outputs
+    for (let i = index; i < length; i++) {
+      this.outputs[i].decrementSlots("outputs")
+    }
+  }
+
+  draw(ctx: CanvasRenderingContext2D, colorContext: DefaultConnectionColors): void {
+    this.inputNode.draw(ctx, colorContext)
+    this.outputNode.draw(ctx, colorContext)
+  }
+
+  clone(): Subgraph {
+    return new Subgraph(this.rootGraph, this.asSerialisable())
+  }
+
+  override asSerialisable(): ExportedSubgraph & Required<Pick<SerialisableGraph, "nodes" | "groups" | "extra">> {
+    return {
+      id: this.id,
+      version: LGraph.serialisedSchemaVersion,
+      state: this.state,
+      revision: this.revision,
+      config: this.config,
+      name: this.name,
+      inputNode: this.inputNode.asSerialisable(),
+      outputNode: this.outputNode.asSerialisable(),
+      inputs: this.inputs.map(x => x.asSerialisable()),
+      outputs: this.outputs.map(x => x.asSerialisable()),
+      widgets: [...this.widgets],
+      nodes: this.nodes.map(node => node.serialize()),
+      groups: this.groups.map(group => group.serialize()),
+      links: [...this.links.values()].map(x => x.asSerialisable()),
+      extra: this.extra,
+    }
+  }
+}
diff --git a/src/lib/litegraph/src/subgraph/SubgraphIONodeBase.ts b/src/lib/litegraph/src/subgraph/SubgraphIONodeBase.ts
new file mode 100644
index 0000000000..fd844bff5a
--- /dev/null
+++ b/src/lib/litegraph/src/subgraph/SubgraphIONodeBase.ts
@@ -0,0 +1,285 @@
+import type { EmptySubgraphInput } from "./EmptySubgraphInput"
+import type { EmptySubgraphOutput } from "./EmptySubgraphOutput"
+import type { Subgraph } from "./Subgraph"
+import type { SubgraphInput } from "./SubgraphInput"
+import type { SubgraphOutput } from "./SubgraphOutput"
+import type { LinkConnector } from '../canvas/LinkConnector'
+import type { DefaultConnectionColors, Hoverable, Point, Positionable } from '../interfaces'
+import type { NodeId } from '../LGraphNode'
+import type { ExportedSubgraphIONode, Serialisable } from '../types/serialisation'
+
+import { Rectangle } from '../infrastructure/Rectangle'
+import { type CanvasColour, type CanvasPointer, type CanvasPointerEvent, type IContextMenuValue, LiteGraph } from '../litegraph'
+import { snapPoint } from '../measure'
+import { CanvasItem } from '../types/globalEnums'
+
+export abstract class SubgraphIONodeBase<TSlot extends SubgraphInput | SubgraphOutput> implements Positionable, Hoverable, Serialisable<ExportedSubgraphIONode> {
+  static margin = 10
+  static minWidth = 100
+  static roundedRadius = 10
+
+  readonly #boundingRect: Rectangle = new Rectangle()
+
+  abstract readonly id: NodeId
+
+  get boundingRect(): Rectangle {
+    return this.#boundingRect
+  }
+
+  selected: boolean = false
+  pinned: boolean = false
+  readonly removable = false
+
+  isPointerOver: boolean = false
+
+  abstract readonly emptySlot: EmptySubgraphInput | EmptySubgraphOutput
+
+  get pos() {
+    return this.boundingRect.pos
+  }
+
+  set pos(value) {
+    this.boundingRect.pos = value
+  }
+
+  get size() {
+    return this.boundingRect.size
+  }
+
+  set size(value) {
+    this.boundingRect.size = value
+  }
+
+  protected get sideLineWidth(): number {
+    return this.isPointerOver ? 2.5 : 2
+  }
+
+  protected get sideStrokeStyle(): CanvasColour {
+    return this.isPointerOver ? "white" : "#efefef"
+  }
+
+  abstract readonly slots: TSlot[]
+  abstract get allSlots(): TSlot[]
+
+  constructor(
+    /** The subgraph that this node belongs to. */
+    readonly subgraph: Subgraph,
+  ) {}
+
+  move(deltaX: number, deltaY: number): void {
+    this.pos[0] += deltaX
+    this.pos[1] += deltaY
+  }
+
+  /** @inheritdoc */
+  snapToGrid(snapTo: number): boolean {
+    return this.pinned ? false : snapPoint(this.pos, snapTo)
+  }
+
+  abstract onPointerDown(e: CanvasPointerEvent, pointer: CanvasPointer, linkConnector: LinkConnector): void
+
+  // #region Hoverable
+
+  containsPoint(point: Point): boolean {
+    return this.boundingRect.containsPoint(point)
+  }
+
+  abstract get slotAnchorX(): number
+
+  onPointerMove(e: CanvasPointerEvent): CanvasItem {
+    const containsPoint = this.boundingRect.containsXy(e.canvasX, e.canvasY)
+    let underPointer = containsPoint ? CanvasItem.SubgraphIoNode : CanvasItem.Nothing
+
+    if (containsPoint) {
+      if (!this.isPointerOver) this.onPointerEnter()
+
+      for (const slot of this.allSlots) {
+        slot.onPointerMove(e)
+        if (slot.isPointerOver) underPointer |= CanvasItem.SubgraphIoSlot
+      }
+    } else if (this.isPointerOver) {
+      this.onPointerLeave()
+    }
+    return underPointer
+  }
+
+  onPointerEnter() {
+    this.isPointerOver = true
+  }
+
+  onPointerLeave() {
+    this.isPointerOver = false
+
+    for (const slot of this.slots) {
+      slot.isPointerOver = false
+    }
+  }
+
+  // #endregion Hoverable
+
+  /**
+   * Renames an IO slot in the subgraph.
+   * @param slot The slot to rename.
+   * @param name The new name for the slot.
+   */
+  abstract renameSlot(slot: TSlot, name: string): void
+
+  /**
+   * Removes an IO slot from the subgraph.
+   * @param slot The slot to remove.
+   */
+  abstract removeSlot(slot: TSlot): void
+
+  /**
+   * Gets the slot at a given position in canvas space.
+   * @param x The x coordinate of the position.
+   * @param y The y coordinate of the position.
+   * @returns The slot at the given position, otherwise `undefined`.
+   */
+  getSlotInPosition(x: number, y: number): TSlot | undefined {
+    for (const slot of this.allSlots) {
+      if (slot.boundingRect.containsXy(x, y)) {
+        return slot
+      }
+    }
+  }
+
+  /**
+   * Shows the context menu for an IO slot.
+   * @param slot The slot to show the context menu for.
+   * @param event The event that triggered the context menu.
+   */
+  protected showSlotContextMenu(slot: TSlot, event: CanvasPointerEvent): void {
+    const options: IContextMenuValue[] = this.#getSlotMenuOptions(slot)
+    if (!(options.length > 0)) return
+
+    new LiteGraph.ContextMenu(
+      options,
+      {
+        event: event as any,
+        title: slot.name || "Subgraph Output",
+        callback: (item: IContextMenuValue) => {
+          this.#onSlotMenuAction(item, slot, event)
+        },
+      },
+    )
+  }
+
+  /**
+   * Gets the context menu options for an IO slot.
+   * @param slot The slot to get the context menu options for.
+   * @returns The context menu options.
+   */
+  #getSlotMenuOptions(slot: TSlot): IContextMenuValue[] {
+    const options: IContextMenuValue[] = []
+
+    // Disconnect option if slot has connections
+    if (slot !== this.emptySlot && slot.linkIds.length > 0) {
+      options.push({ content: "Disconnect Links", value: "disconnect" })
+    }
+
+    // Remove / rename slot option (except for the empty slot)
+    if (slot !== this.emptySlot) {
+      options.push(
+        { content: "Remove Slot", value: "remove" },
+        { content: "Rename Slot", value: "rename" },
+      )
+    }
+
+    return options
+  }
+
+  /**
+   * Handles the action for an IO slot context menu.
+   * @param selectedItem The item that was selected from the context menu.
+   * @param slot The slot
+   * @param event The event that triggered the context menu.
+   */
+  #onSlotMenuAction(selectedItem: IContextMenuValue, slot: TSlot, event: CanvasPointerEvent): void {
+    switch (selectedItem.value) {
+    // Disconnect all links from this output
+    case "disconnect":
+      slot.disconnect()
+      break
+
+    // Remove the slot
+    case "remove":
+      if (slot !== this.emptySlot) {
+        this.removeSlot(slot)
+      }
+      break
+
+    // Rename the slot
+    case "rename":
+      if (slot !== this.emptySlot) {
+        this.subgraph.canvasAction(c => c.prompt(
+          "Slot name",
+          slot.name,
+          (newName: string) => {
+            if (newName) this.renameSlot(slot, newName)
+          },
+          event,
+        ))
+      }
+      break
+    }
+
+    this.subgraph.setDirtyCanvas(true)
+  }
+
+  /** Arrange the slots in this node. */
+  arrange(): void {
+    const { minWidth, roundedRadius } = SubgraphIONodeBase
+    const [, y] = this.boundingRect
+    const x = this.slotAnchorX
+    const { size } = this
+
+    let maxWidth = minWidth
+    let currentY = y + roundedRadius
+
+    for (const slot of this.allSlots) {
+      const [slotWidth, slotHeight] = slot.measure()
+      slot.arrange([x, currentY, slotWidth, slotHeight])
+
+      currentY += slotHeight
+      if (slotWidth > maxWidth) maxWidth = slotWidth
+    }
+
+    size[0] = maxWidth + 2 * roundedRadius
+    size[1] = currentY - y + roundedRadius
+  }
+
+  draw(ctx: CanvasRenderingContext2D, colorContext: DefaultConnectionColors): void {
+    const { lineWidth, strokeStyle, fillStyle, font, textBaseline } = ctx
+    this.drawProtected(ctx, colorContext)
+    Object.assign(ctx, { lineWidth, strokeStyle, fillStyle, font, textBaseline })
+  }
+
+  /** @internal Leaves {@link ctx} dirty. */
+  protected abstract drawProtected(ctx: CanvasRenderingContext2D, colorContext: DefaultConnectionColors): void
+
+  /** @internal Leaves {@link ctx} dirty. */
+  protected drawSlots(ctx: CanvasRenderingContext2D, colorContext: DefaultConnectionColors): void {
+    ctx.fillStyle = "#AAA"
+    ctx.font = "12px Arial"
+    ctx.textBaseline = "middle"
+
+    for (const slot of this.allSlots) {
+      slot.draw({ ctx, colorContext })
+      slot.drawLabel(ctx)
+    }
+  }
+
+  configure(data: ExportedSubgraphIONode): void {
+    this.#boundingRect.set(data.bounding)
+    this.pinned = data.pinned ?? false
+  }
+
+  asSerialisable(): ExportedSubgraphIONode {
+    return {
+      id: this.id,
+      bounding: this.boundingRect.export(),
+      pinned: this.pinned ? true : undefined,
+    }
+  }
+}
diff --git a/src/lib/litegraph/src/subgraph/SubgraphInput.ts b/src/lib/litegraph/src/subgraph/SubgraphInput.ts
new file mode 100644
index 0000000000..772be94013
--- /dev/null
+++ b/src/lib/litegraph/src/subgraph/SubgraphInput.ts
@@ -0,0 +1,120 @@
+import type { SubgraphInputNode } from "./SubgraphInputNode"
+import type { INodeInputSlot, Point, ReadOnlyRect } from '../interfaces'
+import type { LGraphNode } from '../LGraphNode'
+import type { RerouteId } from '../Reroute'
+
+import { LLink } from '../LLink'
+import { NodeSlotType } from '../types/globalEnums'
+
+import { SubgraphSlot } from "./SubgraphSlotBase"
+
+/**
+ * An input "slot" from a parent graph into a subgraph.
+ *
+ * IMPORTANT: A subgraph "input" is both an input AND an output.  It creates an extra link connection point between
+ * a parent graph and a subgraph, so is conceptually similar to a reroute.
+ *
+ * This can be a little confusing, but is easier to visualise when imagining editing a subgraph.
+ * You have "Subgraph Inputs", because they are coming into the subgraph, which then connect to "node inputs".
+ *
+ * Functionally, however, when editing a subgraph, that "subgraph input" is the "origin" or "output side" of a link.
+ */
+export class SubgraphInput extends SubgraphSlot {
+  declare parent: SubgraphInputNode
+
+  override connect(slot: INodeInputSlot, node: LGraphNode, afterRerouteId?: RerouteId): LLink | undefined {
+    const { subgraph } = this.parent
+
+    // Allow nodes to block connection
+    const inputIndex = node.inputs.indexOf(slot)
+    if (node.onConnectInput?.(inputIndex, this.type, this, this.parent, -1) === false) return
+
+    // if (slot instanceof SubgraphOutput) {
+    //   // Subgraph IO nodes have no special handling at present.
+    //   return new LLink(
+    //     ++subgraph.state.lastLinkId,
+    //     this.type,
+    //     this.parent.id,
+    //     this.parent.slots.indexOf(this),
+    //     node.id,
+    //     inputIndex,
+    //     afterRerouteId,
+    //   )
+    // }
+
+    // Disconnect target input, if it is already connected.
+    if (slot.link != null) {
+      subgraph.beforeChange()
+      const link = subgraph.getLink(slot.link)
+      this.parent._disconnectNodeInput(node, slot, link)
+    }
+
+    const link = new LLink(
+      ++subgraph.state.lastLinkId,
+      slot.type,
+      this.parent.id,
+      this.parent.slots.indexOf(this),
+      node.id,
+      inputIndex,
+      afterRerouteId,
+    )
+
+    // Add to graph links list
+    subgraph._links.set(link.id, link)
+
+    // Set link ID in each slot
+    this.linkIds.push(link.id)
+    slot.link = link.id
+
+    // Reroutes
+    const reroutes = LLink.getReroutes(subgraph, link)
+    for (const reroute of reroutes) {
+      reroute.linkIds.add(link.id)
+      if (reroute.floating) delete reroute.floating
+      reroute._dragging = undefined
+    }
+
+    // If this is the terminus of a floating link, remove it
+    const lastReroute = reroutes.at(-1)
+    if (lastReroute) {
+      for (const linkId of lastReroute.floatingLinkIds) {
+        const link = subgraph.floatingLinks.get(linkId)
+        if (link?.parentId === lastReroute.id) {
+          subgraph.removeFloatingLink(link)
+        }
+      }
+    }
+    subgraph._version++
+
+    node.onConnectionsChange?.(
+      NodeSlotType.INPUT,
+      inputIndex,
+      true,
+      link,
+      slot,
+    )
+
+    subgraph.afterChange()
+
+    return link
+  }
+
+  get labelPos(): Point {
+    const [x, y, , height] = this.boundingRect
+    return [x, y + height * 0.5]
+  }
+
+  /** For inputs, x is the right edge of the input node. */
+  override arrange(rect: ReadOnlyRect): void {
+    const [right, top, width, height] = rect
+    const { boundingRect: b, pos } = this
+
+    b[0] = right - width
+    b[1] = top
+    b[2] = width
+    b[3] = height
+
+    pos[0] = right - height * 0.5
+    pos[1] = top + height * 0.5
+  }
+}
diff --git a/src/lib/litegraph/src/subgraph/SubgraphInputNode.ts b/src/lib/litegraph/src/subgraph/SubgraphInputNode.ts
new file mode 100644
index 0000000000..ad79602dc0
--- /dev/null
+++ b/src/lib/litegraph/src/subgraph/SubgraphInputNode.ts
@@ -0,0 +1,187 @@
+import type { SubgraphInput } from "./SubgraphInput"
+import type { LinkConnector } from '../canvas/LinkConnector'
+import type { CanvasPointer } from '../CanvasPointer'
+import type { DefaultConnectionColors, INodeInputSlot, ISlotType, Positionable } from '../interfaces'
+import type { LGraphNode, NodeId } from '../LGraphNode'
+import type { RerouteId } from '../Reroute'
+import type { CanvasPointerEvent } from '../types/events'
+import type { NodeLike } from '../types/NodeLike'
+
+import { SUBGRAPH_INPUT_ID } from '../constants'
+import { Rectangle } from '../infrastructure/Rectangle'
+import { LLink } from '../LLink'
+import { NodeSlotType } from '../types/globalEnums'
+import { findFreeSlotOfType } from '../utils/collections'
+
+import { EmptySubgraphInput } from "./EmptySubgraphInput"
+import { SubgraphIONodeBase } from "./SubgraphIONodeBase"
+
+export class SubgraphInputNode extends SubgraphIONodeBase<SubgraphInput> implements Positionable {
+  readonly id: NodeId = SUBGRAPH_INPUT_ID
+
+  readonly emptySlot: EmptySubgraphInput = new EmptySubgraphInput(this)
+
+  get slots() {
+    return this.subgraph.inputs
+  }
+
+  override get allSlots(): SubgraphInput[] {
+    return [...this.slots, this.emptySlot]
+  }
+
+  get slotAnchorX() {
+    const [x, , width] = this.boundingRect
+    return x + width - SubgraphIONodeBase.roundedRadius
+  }
+
+  override onPointerDown(e: CanvasPointerEvent, pointer: CanvasPointer, linkConnector: LinkConnector): void {
+    // Left-click handling for dragging connections
+    if (e.button === 0) {
+      for (const slot of this.allSlots) {
+        const slotBounds = Rectangle.fromCentre(slot.pos, slot.boundingRect.height)
+
+        if (slotBounds.containsXy(e.canvasX, e.canvasY)) {
+          pointer.onDragStart = () => {
+            linkConnector.dragNewFromSubgraphInput(this.subgraph, this, slot)
+          }
+          pointer.onDragEnd = (eUp) => {
+            linkConnector.dropLinks(this.subgraph, eUp)
+          }
+          pointer.finally = () => {
+            linkConnector.reset(true)
+          }
+        }
+      }
+    // Check for right-click
+    } else if (e.button === 2) {
+      const slot = this.getSlotInPosition(e.canvasX, e.canvasY)
+      if (slot) this.showSlotContextMenu(slot, e)
+    }
+  }
+
+  /** @inheritdoc */
+  override renameSlot(slot: SubgraphInput, name: string): void {
+    this.subgraph.renameInput(slot, name)
+  }
+
+  /** @inheritdoc */
+  override removeSlot(slot: SubgraphInput): void {
+    this.subgraph.removeInput(slot)
+  }
+
+  canConnectTo(inputNode: NodeLike, input: INodeInputSlot, fromSlot: SubgraphInput): boolean {
+    return inputNode.canConnectTo(this, input, fromSlot)
+  }
+
+  connectSlots(fromSlot: SubgraphInput, inputNode: LGraphNode, input: INodeInputSlot, afterRerouteId: RerouteId | undefined): LLink {
+    const { subgraph } = this
+
+    const outputIndex = this.slots.indexOf(fromSlot)
+    const inputIndex = inputNode.inputs.indexOf(input)
+
+    if (outputIndex === -1 || inputIndex === -1) throw new Error("Invalid slot indices.")
+
+    return new LLink(
+      ++subgraph.state.lastLinkId,
+      input.type || fromSlot.type,
+      this.id,
+      outputIndex,
+      inputNode.id,
+      inputIndex,
+      afterRerouteId,
+    )
+  }
+
+  // #region Legacy LGraphNode compatibility
+
+  connectByType(
+    slot: number,
+    target_node: LGraphNode,
+    target_slotType: ISlotType,
+    optsIn?: { afterRerouteId?: RerouteId },
+  ): LLink | undefined {
+    const inputSlot = target_node.findInputByType(target_slotType)
+    if (!inputSlot) return
+
+    return this.slots[slot].connect(inputSlot.slot, target_node, optsIn?.afterRerouteId)
+  }
+
+  findOutputSlot(name: string): SubgraphInput | undefined {
+    return this.slots.find(output => output.name === name)
+  }
+
+  findOutputByType(type: ISlotType): SubgraphInput | undefined {
+    return findFreeSlotOfType(this.slots, type, slot => slot.linkIds.length > 0)?.slot
+  }
+
+  // #endregion Legacy LGraphNode compatibility
+
+  _disconnectNodeInput(node: LGraphNode, input: INodeInputSlot, link: LLink | undefined): void {
+    const { subgraph } = this
+
+    // Break floating links
+    if (input._floatingLinks?.size) {
+      for (const link of input._floatingLinks) {
+        subgraph.removeFloatingLink(link)
+      }
+    }
+
+    input.link = null
+    subgraph.setDirtyCanvas(false, true)
+
+    if (!link) return
+
+    const subgraphInputIndex = link.origin_slot
+    link.disconnect(subgraph, "output")
+    subgraph._version++
+
+    const subgraphInput = this.slots.at(subgraphInputIndex)
+    if (!subgraphInput) {
+      console.debug("disconnectNodeInput: subgraphInput not found", this, subgraphInputIndex)
+      return
+    }
+
+    // search in the inputs list for this link
+    const index = subgraphInput.linkIds.indexOf(link.id)
+    if (index !== -1) {
+      subgraphInput.linkIds.splice(index, 1)
+    } else {
+      console.debug("disconnectNodeInput: link ID not found in subgraphInput linkIds", link.id)
+    }
+
+    node.onConnectionsChange?.(
+      NodeSlotType.OUTPUT,
+      index,
+      false,
+      link,
+      subgraphInput,
+    )
+  }
+
+  override drawProtected(ctx: CanvasRenderingContext2D, colorContext: DefaultConnectionColors): void {
+    const { roundedRadius } = SubgraphIONodeBase
+    const transform = ctx.getTransform()
+
+    const [x, y, width, height] = this.boundingRect
+    ctx.translate(x, y)
+
+    // Draw top rounded part
+    ctx.strokeStyle = this.sideStrokeStyle
+    ctx.lineWidth = this.sideLineWidth
+    ctx.beginPath()
+    ctx.arc(width - roundedRadius, roundedRadius, roundedRadius, Math.PI * 1.5, 0)
+
+    // Straight line to bottom
+    ctx.moveTo(width, roundedRadius)
+    ctx.lineTo(width, height - roundedRadius)
+
+    // Bottom rounded part
+    ctx.arc(width - roundedRadius, height - roundedRadius, roundedRadius, 0, Math.PI * 0.5)
+    ctx.stroke()
+
+    // Restore context
+    ctx.setTransform(transform)
+
+    this.drawSlots(ctx, colorContext)
+  }
+}
diff --git a/src/lib/litegraph/src/subgraph/SubgraphNode.ts b/src/lib/litegraph/src/subgraph/SubgraphNode.ts
new file mode 100644
index 0000000000..8cfde88790
--- /dev/null
+++ b/src/lib/litegraph/src/subgraph/SubgraphNode.ts
@@ -0,0 +1,182 @@
+import type { ISubgraphInput } from '../interfaces'
+import type { BaseLGraph, LGraph } from '../LGraph'
+import type { INodeInputSlot, ISlotType, NodeId } from '../litegraph'
+import type { GraphOrSubgraph, Subgraph } from './Subgraph'
+import type { ExportedSubgraphInstance } from '../types/serialisation'
+import type { UUID } from '../utils/uuid'
+
+import { RecursionError } from '../infrastructure/RecursionError'
+import { LGraphNode } from '../LGraphNode'
+import { LLink, type ResolvedConnection } from '../LLink'
+import { NodeInputSlot } from '../node/NodeInputSlot'
+import { NodeOutputSlot } from '../node/NodeOutputSlot'
+
+import { type ExecutableLGraphNode, ExecutableNodeDTO } from "./ExecutableNodeDTO"
+
+/**
+ * An instance of a {@link Subgraph}, displayed as a node on the containing (parent) graph.
+ */
+export class SubgraphNode extends LGraphNode implements BaseLGraph {
+  override readonly type: UUID
+  override readonly isVirtualNode = true as const
+
+  get rootGraph(): LGraph {
+    return this.graph.rootGraph
+  }
+
+  override get displayType(): string {
+    return "Subgraph node"
+  }
+
+  override isSubgraphNode(): this is SubgraphNode {
+    return true
+  }
+
+  constructor(
+    /** The (sub)graph that contains this subgraph instance. */
+    override readonly graph: GraphOrSubgraph,
+    /** The definition of this subgraph; how its nodes are configured, etc. */
+    readonly subgraph: Subgraph,
+    instanceData: ExportedSubgraphInstance,
+  ) {
+    super(subgraph.name, subgraph.id)
+
+    // Update this node when the subgraph input / output slots are changed
+    const subgraphEvents = this.subgraph.events
+    subgraphEvents.addEventListener("input-added", (e) => {
+      const { name, type } = e.detail.input
+      this.addInput(name, type)
+    })
+    subgraphEvents.addEventListener("removing-input", (e) => {
+      this.removeInput(e.detail.index)
+    })
+
+    subgraphEvents.addEventListener("output-added", (e) => {
+      const { name, type } = e.detail.output
+      this.addOutput(name, type)
+    })
+    subgraphEvents.addEventListener("removing-output", (e) => {
+      this.removeOutput(e.detail.index)
+    })
+
+    subgraphEvents.addEventListener("renaming-input", (e) => {
+      const { index, newName } = e.detail
+      const input = this.inputs.at(index)
+      if (!input) throw new Error("Subgraph input not found")
+
+      input.label = newName
+    })
+
+    subgraphEvents.addEventListener("renaming-output", (e) => {
+      const { index, newName } = e.detail
+      const output = this.outputs.at(index)
+      if (!output) throw new Error("Subgraph output not found")
+
+      output.label = newName
+    })
+
+    this.type = subgraph.id
+    this.configure(instanceData)
+  }
+
+  override configure(info: ExportedSubgraphInstance): void {
+    this.inputs.length = 0
+    this.inputs.push(
+      ...this.subgraph.inputNode.slots.map(
+        slot => new NodeInputSlot({ name: slot.name, localized_name: slot.localized_name, label: slot.label, type: slot.type, link: null }, this),
+      ),
+    )
+
+    this.outputs.length = 0
+    this.outputs.push(
+      ...this.subgraph.outputNode.slots.map(
+        slot => new NodeOutputSlot({ name: slot.name, localized_name: slot.localized_name, label: slot.label, type: slot.type, links: null }, this),
+      ),
+    )
+
+    super.configure(info)
+  }
+
+  /**
+   * Ensures the subgraph slot is in the params before adding the input as normal.
+   * @param name The name of the input slot.
+   * @param type The type of the input slot.
+   * @param inputProperties Properties that are directly assigned to the created input. Default: a new, empty object.
+   * @returns The new input slot.
+   * @remarks Assertion is required to instantiate empty generic POJO.
+   */
+  override addInput<TInput extends Partial<ISubgraphInput>>(name: string, type: ISlotType, inputProperties: TInput = {} as TInput): INodeInputSlot & TInput {
+    // Bypasses type narrowing on this.inputs
+    return super.addInput(name, type, inputProperties)
+  }
+
+  override getInputLink(slot: number): LLink | null {
+    // Output side: the link from inside the subgraph
+    const innerLink = this.subgraph.outputNode.slots[slot].getLinks().at(0)
+    if (!innerLink) {
+      console.warn(`SubgraphNode.getInputLink: no inner link found for slot ${slot}`)
+      return null
+    }
+
+    const newLink = LLink.create(innerLink)
+    newLink.origin_id = `${this.id}:${innerLink.origin_id}`
+    newLink.origin_slot = innerLink.origin_slot
+
+    return newLink
+  }
+
+  /**
+   * Finds the internal links connected to the given input slot inside the subgraph, and resolves the nodes / slots.
+   * @param slot The slot index
+   * @returns The resolved connections, or undefined if no input node is found.
+   * @remarks This is used to resolve the input links when dragging a link from a subgraph input slot.
+   */
+  resolveSubgraphInputLinks(slot: number): ResolvedConnection[] {
+    const inputSlot = this.subgraph.inputNode.slots[slot]
+    const innerLinks = inputSlot.getLinks()
+    if (innerLinks.length === 0) {
+      console.debug(`[SubgraphNode.resolveSubgraphInputLinks] No inner links found for input slot [${slot}] ${inputSlot.name}`, this)
+      return []
+    }
+    return innerLinks.map(link => link.resolve(this.subgraph))
+  }
+
+  /**
+   * Finds the internal link connected to the given output slot inside the subgraph, and resolves the nodes / slots.
+   * @param slot The slot index
+   * @returns The output node if found, otherwise undefined.
+   */
+  resolveSubgraphOutputLink(slot: number): ResolvedConnection | undefined {
+    const outputSlot = this.subgraph.outputNode.slots[slot]
+    const innerLink = outputSlot.getLinks().at(0)
+    if (innerLink) return innerLink.resolve(this.subgraph)
+
+    console.debug(`[SubgraphNode.resolveSubgraphOutputLink] No inner link found for output slot [${slot}] ${outputSlot.name}`, this)
+  }
+
+  /** @internal Used to flatten the subgraph before execution. Recursive; call with no args. */
+  getInnerNodes(
+    /** The list of nodes to add to. */
+    nodes: ExecutableLGraphNode[] = [],
+    /** The set of visited nodes. */
+    visited = new WeakSet<SubgraphNode>(),
+    /** The path of subgraph node IDs. */
+    subgraphNodePath: readonly NodeId[] = [],
+  ): ExecutableLGraphNode[] {
+    if (visited.has(this)) throw new RecursionError("while flattening subgraph")
+    visited.add(this)
+
+    const subgraphInstanceIdPath = [...subgraphNodePath, this.id]
+
+    for (const node of this.subgraph.nodes) {
+      if ("getInnerNodes" in node) {
+        node.getInnerNodes(nodes, visited, subgraphInstanceIdPath)
+      } else {
+        // Create minimal DTOs rather than cloning the node
+        const aVeryRealNode = new ExecutableNodeDTO(node, subgraphInstanceIdPath, this)
+        nodes.push(aVeryRealNode)
+      }
+    }
+    return nodes
+  }
+}
diff --git a/src/lib/litegraph/src/subgraph/SubgraphOutput.ts b/src/lib/litegraph/src/subgraph/SubgraphOutput.ts
new file mode 100644
index 0000000000..4a7c2bae86
--- /dev/null
+++ b/src/lib/litegraph/src/subgraph/SubgraphOutput.ts
@@ -0,0 +1,114 @@
+import type { SubgraphOutputNode } from "./SubgraphOutputNode"
+import type { INodeOutputSlot, Point, ReadOnlyRect } from '../interfaces'
+import type { LGraphNode } from '../LGraphNode'
+import type { RerouteId } from '../Reroute'
+
+import { LLink } from '../LLink'
+import { NodeSlotType } from '../types/globalEnums'
+import { removeFromArray } from '../utils/collections'
+
+import { SubgraphSlot } from "./SubgraphSlotBase"
+
+/**
+ * An output "slot" from a subgraph to a parent graph.
+ *
+ * IMPORTANT: A subgraph "output" is both an output AND an input.  It creates an extra link connection point between
+ * a parent graph and a subgraph, so is conceptually similar to a reroute.
+ *
+ * This can be a little confusing, but is easier to visualise when imagining editing a subgraph.
+ * You have "Subgraph Outputs", because they go from inside the subgraph and out, but links to them come from "node outputs".
+ *
+ * Functionally, however, when editing a subgraph, that "subgraph output" is the "target" or "input side" of a link.
+ */
+export class SubgraphOutput extends SubgraphSlot {
+  declare parent: SubgraphOutputNode
+
+  override connect(slot: INodeOutputSlot, node: LGraphNode, afterRerouteId?: RerouteId): LLink | undefined {
+    const { subgraph } = this.parent
+
+    // Allow nodes to block connection
+    const outputIndex = node.outputs.indexOf(slot)
+    if (outputIndex === -1) throw new Error("Slot is not an output of the given node")
+
+    if (node.onConnectOutput?.(outputIndex, this.type, this, this.parent, -1) === false) return
+
+    // Link should not be present, but just in case, disconnect it
+    const existingLink = this.getLinks().at(0)
+    if (existingLink != null) {
+      subgraph.beforeChange()
+
+      existingLink.disconnect(subgraph, "input")
+      const resolved = existingLink.resolve(subgraph)
+      const links = resolved.output?.links
+      if (links) removeFromArray(links, existingLink.id)
+    }
+
+    const link = new LLink(
+      ++subgraph.state.lastLinkId,
+      slot.type,
+      node.id,
+      outputIndex,
+      this.parent.id,
+      this.parent.slots.indexOf(this),
+      afterRerouteId,
+    )
+
+    // Add to graph links list
+    subgraph._links.set(link.id, link)
+
+    // Set link ID in each slot
+    this.linkIds[0] = link.id
+    slot.links ??= []
+    slot.links.push(link.id)
+
+    // Reroutes
+    const reroutes = LLink.getReroutes(subgraph, link)
+    for (const reroute of reroutes) {
+      reroute.linkIds.add(link.id)
+      if (reroute.floating) delete reroute.floating
+      reroute._dragging = undefined
+    }
+
+    // If this is the terminus of a floating link, remove it
+    const lastReroute = reroutes.at(-1)
+    if (lastReroute) {
+      for (const linkId of lastReroute.floatingLinkIds) {
+        const link = subgraph.floatingLinks.get(linkId)
+        if (link?.parentId === lastReroute.id) {
+          subgraph.removeFloatingLink(link)
+        }
+      }
+    }
+    subgraph._version++
+
+    node.onConnectionsChange?.(
+      NodeSlotType.OUTPUT,
+      outputIndex,
+      true,
+      link,
+      slot,
+    )
+
+    subgraph.afterChange()
+
+    return link
+  }
+
+  get labelPos(): Point {
+    const [x, y, , height] = this.boundingRect
+    return [x + height, y + height * 0.5]
+  }
+
+  override arrange(rect: ReadOnlyRect): void {
+    const [left, top, width, height] = rect
+    const { boundingRect: b, pos } = this
+
+    b[0] = left
+    b[1] = top
+    b[2] = width
+    b[3] = height
+
+    pos[0] = left + height * 0.5
+    pos[1] = top + height * 0.5
+  }
+}
diff --git a/src/lib/litegraph/src/subgraph/SubgraphOutputNode.ts b/src/lib/litegraph/src/subgraph/SubgraphOutputNode.ts
new file mode 100644
index 0000000000..9367112038
--- /dev/null
+++ b/src/lib/litegraph/src/subgraph/SubgraphOutputNode.ts
@@ -0,0 +1,119 @@
+import type { SubgraphOutput } from "./SubgraphOutput"
+import type { LinkConnector } from '../canvas/LinkConnector'
+import type { CanvasPointer } from '../CanvasPointer'
+import type { DefaultConnectionColors, ISlotType, Positionable } from '../interfaces'
+import type { INodeOutputSlot } from '../interfaces'
+import type { LGraphNode, NodeId } from '../LGraphNode'
+import type { LLink } from '../LLink'
+import type { RerouteId } from '../Reroute'
+import type { CanvasPointerEvent } from '../types/events'
+import type { NodeLike } from '../types/NodeLike'
+import type { SubgraphIO } from '../types/serialisation'
+
+import { SUBGRAPH_OUTPUT_ID } from '../constants'
+import { Rectangle } from '../infrastructure/Rectangle'
+import { findFreeSlotOfType } from '../utils/collections'
+
+import { EmptySubgraphOutput } from "./EmptySubgraphOutput"
+import { SubgraphIONodeBase } from "./SubgraphIONodeBase"
+
+export class SubgraphOutputNode extends SubgraphIONodeBase<SubgraphOutput> implements Positionable {
+  readonly id: NodeId = SUBGRAPH_OUTPUT_ID
+
+  readonly emptySlot: EmptySubgraphOutput = new EmptySubgraphOutput(this)
+
+  get slots() {
+    return this.subgraph.outputs
+  }
+
+  override get allSlots(): SubgraphOutput[] {
+    return [...this.slots, this.emptySlot]
+  }
+
+  get slotAnchorX() {
+    const [x] = this.boundingRect
+    return x + SubgraphIONodeBase.roundedRadius
+  }
+
+  override onPointerDown(e: CanvasPointerEvent, pointer: CanvasPointer, linkConnector: LinkConnector): void {
+    // Left-click handling for dragging connections
+    if (e.button === 0) {
+      for (const slot of this.allSlots) {
+        const slotBounds = Rectangle.fromCentre(slot.pos, slot.boundingRect.height)
+
+        if (slotBounds.containsXy(e.canvasX, e.canvasY)) {
+          pointer.onDragStart = () => {
+            linkConnector.dragNewFromSubgraphOutput(this.subgraph, this, slot)
+          }
+          pointer.onDragEnd = (eUp) => {
+            linkConnector.dropLinks(this.subgraph, eUp)
+          }
+          pointer.finally = () => {
+            linkConnector.reset(true)
+          }
+        }
+      }
+    // Check for right-click
+    } else if (e.button === 2) {
+      const slot = this.getSlotInPosition(e.canvasX, e.canvasY)
+      if (slot) this.showSlotContextMenu(slot, e)
+    }
+  }
+
+  /** @inheritdoc */
+  override renameSlot(slot: SubgraphOutput, name: string): void {
+    this.subgraph.renameOutput(slot, name)
+  }
+
+  /** @inheritdoc */
+  override removeSlot(slot: SubgraphOutput): void {
+    this.subgraph.removeOutput(slot)
+  }
+
+  canConnectTo(outputNode: NodeLike, fromSlot: SubgraphOutput, output: INodeOutputSlot | SubgraphIO): boolean {
+    return outputNode.canConnectTo(this, fromSlot, output)
+  }
+
+  connectByTypeOutput(
+    slot: number,
+    target_node: LGraphNode,
+    target_slotType: ISlotType,
+    optsIn?: { afterRerouteId?: RerouteId },
+  ): LLink | undefined {
+    const outputSlot = target_node.findOutputByType(target_slotType)
+    if (!outputSlot) return
+
+    return this.slots[slot].connect(outputSlot.slot, target_node, optsIn?.afterRerouteId)
+  }
+
+  findInputByType(type: ISlotType): SubgraphOutput | undefined {
+    return findFreeSlotOfType(this.slots, type, slot => slot.linkIds.length > 0)?.slot
+  }
+
+  override drawProtected(ctx: CanvasRenderingContext2D, colorContext: DefaultConnectionColors): void {
+    const { roundedRadius } = SubgraphIONodeBase
+    const transform = ctx.getTransform()
+
+    const [x, y, , height] = this.boundingRect
+    ctx.translate(x, y)
+
+    // Draw bottom rounded part
+    ctx.strokeStyle = this.sideStrokeStyle
+    ctx.lineWidth = this.sideLineWidth
+    ctx.beginPath()
+    ctx.arc(roundedRadius, roundedRadius, roundedRadius, Math.PI, Math.PI * 1.5)
+
+    // Straight line to bottom
+    ctx.moveTo(0, roundedRadius)
+    ctx.lineTo(0, height - roundedRadius)
+
+    // Bottom rounded part
+    ctx.arc(roundedRadius, height - roundedRadius, roundedRadius, Math.PI, Math.PI * 0.5, true)
+    ctx.stroke()
+
+    // Restore context
+    ctx.setTransform(transform)
+
+    this.drawSlots(ctx, colorContext)
+  }
+}
diff --git a/src/lib/litegraph/src/subgraph/SubgraphSlotBase.ts b/src/lib/litegraph/src/subgraph/SubgraphSlotBase.ts
new file mode 100644
index 0000000000..c6391ccafb
--- /dev/null
+++ b/src/lib/litegraph/src/subgraph/SubgraphSlotBase.ts
@@ -0,0 +1,181 @@
+import type { SubgraphInputNode } from "./SubgraphInputNode"
+import type { SubgraphOutputNode } from "./SubgraphOutputNode"
+import type { DefaultConnectionColors, Hoverable, INodeInputSlot, INodeOutputSlot, Point, ReadOnlyRect, ReadOnlySize } from '../interfaces'
+import type { LGraphNode } from '../LGraphNode'
+import type { LinkId, LLink } from '../LLink'
+import type { RerouteId } from '../Reroute'
+import type { CanvasPointerEvent } from '../types/events'
+import type { Serialisable, SubgraphIO } from '../types/serialisation'
+
+import { SlotShape } from '../draw'
+import { ConstrainedSize } from '../infrastructure/ConstrainedSize'
+import { Rectangle } from '../infrastructure/Rectangle'
+import { LGraphCanvas } from '../LGraphCanvas'
+import { LiteGraph } from '../litegraph'
+import { SlotBase } from '../node/SlotBase'
+import { createUuidv4, type UUID } from '../utils/uuid'
+
+export interface SubgraphSlotDrawOptions {
+  ctx: CanvasRenderingContext2D
+  colorContext: DefaultConnectionColors
+  lowQuality?: boolean
+}
+
+/** Shared base class for the slots used on Subgraph . */
+export abstract class SubgraphSlot extends SlotBase implements SubgraphIO, Hoverable, Serialisable<SubgraphIO> {
+  static get defaultHeight() {
+    return LiteGraph.NODE_SLOT_HEIGHT
+  }
+
+  readonly #pos: Point = new Float32Array(2)
+
+  readonly measurement: ConstrainedSize = new ConstrainedSize(SubgraphSlot.defaultHeight, SubgraphSlot.defaultHeight)
+
+  readonly id: UUID
+  readonly parent: SubgraphInputNode | SubgraphOutputNode
+  override type: string
+
+  readonly linkIds: LinkId[] = []
+
+  override readonly boundingRect: Rectangle = new Rectangle(0, 0, 0, SubgraphSlot.defaultHeight)
+
+  override get pos() {
+    return this.#pos
+  }
+
+  override set pos(value) {
+    if (!value || value.length < 2) return
+
+    this.#pos[0] = value[0]
+    this.#pos[1] = value[1]
+  }
+
+  /** Whether this slot is connected to another slot. */
+  override get isConnected() {
+    return this.linkIds.length > 0
+  }
+
+  /** The display name of this slot. */
+  get displayName() {
+    return this.label ?? this.localized_name ?? this.name
+  }
+
+  abstract get labelPos(): Point
+
+  constructor(slot: SubgraphIO, parent: SubgraphInputNode | SubgraphOutputNode) {
+    super(slot.name, slot.type)
+
+    Object.assign(this, slot)
+    this.id = slot.id ?? createUuidv4()
+    this.type = slot.type
+    this.parent = parent
+  }
+
+  isPointerOver: boolean = false
+
+  containsPoint(point: Point): boolean {
+    return this.boundingRect.containsPoint(point)
+  }
+
+  onPointerMove(e: CanvasPointerEvent): void {
+    this.isPointerOver = this.boundingRect.containsXy(e.canvasX, e.canvasY)
+  }
+
+  getLinks(): LLink[] {
+    const links: LLink[] = []
+    const { subgraph } = this.parent
+
+    for (const id of this.linkIds) {
+      const link = subgraph.getLink(id)
+      if (link) links.push(link)
+    }
+    return links
+  }
+
+  decrementSlots(inputsOrOutputs: "inputs" | "outputs"): void {
+    const { links } = this.parent.subgraph
+    const linkProperty = inputsOrOutputs === "inputs" ? "origin_slot" : "target_slot"
+
+    for (const linkId of this.linkIds) {
+      const link = links.get(linkId)
+      if (link) link[linkProperty]--
+      else console.warn("decrementSlots: link ID not found", linkId)
+    }
+  }
+
+  measure(): ReadOnlySize {
+    const width = LGraphCanvas._measureText?.(this.displayName) ?? 0
+
+    const { defaultHeight } = SubgraphSlot
+    this.measurement.setValues(width + defaultHeight, defaultHeight)
+    return this.measurement.toSize()
+  }
+
+  abstract arrange(rect: ReadOnlyRect): void
+
+  abstract connect(
+    slot: INodeInputSlot | INodeOutputSlot,
+    node: LGraphNode,
+    afterRerouteId?: RerouteId,
+  ): LLink | undefined
+
+  /**
+   * Disconnects all links connected to this slot.
+   */
+  disconnect(): void {
+    const { subgraph } = this.parent
+
+    for (const linkId of this.linkIds) {
+      subgraph.removeLink(linkId)
+    }
+
+    this.linkIds.length = 0
+  }
+
+  /** @remarks Leaves the context dirty. */
+  drawLabel(ctx: CanvasRenderingContext2D): void {
+    if (!this.displayName) return
+
+    const [x, y] = this.labelPos
+    ctx.fillStyle = this.isPointerOver ? "white" : "#AAA"
+
+    ctx.fillText(this.displayName, x, y)
+  }
+
+  /** @remarks Leaves the context dirty. */
+  draw({ ctx, colorContext, lowQuality }: SubgraphSlotDrawOptions): void {
+    // Assertion: SlotShape is a subset of RenderShape
+    const shape = this.shape as unknown as SlotShape
+    const { isPointerOver, pos: [x, y] } = this
+
+    ctx.beginPath()
+
+    // Default rendering for circle, hollow circle.
+    const color = this.renderingColor(colorContext)
+    if (lowQuality) {
+      ctx.fillStyle = color
+
+      ctx.rect(x - 4, y - 4, 8, 8)
+      ctx.fill()
+    } else if (shape === SlotShape.HollowCircle) {
+      ctx.lineWidth = 3
+      ctx.strokeStyle = color
+
+      const radius = isPointerOver ? 4 : 3
+      ctx.arc(x, y, radius, 0, Math.PI * 2)
+      ctx.stroke()
+    } else {
+      // Normal circle
+      ctx.fillStyle = color
+
+      const radius = isPointerOver ? 5 : 4
+      ctx.arc(x, y, radius, 0, Math.PI * 2)
+      ctx.fill()
+    }
+  }
+
+  asSerialisable(): SubgraphIO {
+    const { id, name, type, linkIds, localized_name, label, dir, shape, color_off, color_on, pos } = this
+    return { id, name, type, linkIds, localized_name, label, dir, shape, color_off, color_on, pos }
+  }
+}
diff --git a/src/lib/litegraph/src/subgraph/subgraphUtils.ts b/src/lib/litegraph/src/subgraph/subgraphUtils.ts
new file mode 100644
index 0000000000..c048d6fc02
--- /dev/null
+++ b/src/lib/litegraph/src/subgraph/subgraphUtils.ts
@@ -0,0 +1,338 @@
+import type { INodeOutputSlot, Positionable } from '../interfaces'
+import type { LGraph } from '../LGraph'
+import type { ISerialisedNode, SerialisableLLink, SubgraphIO } from '../types/serialisation'
+
+import { SUBGRAPH_INPUT_ID, SUBGRAPH_OUTPUT_ID } from '../constants'
+import { LGraphGroup } from '../LGraphGroup'
+import { LGraphNode } from '../LGraphNode'
+import { createUuidv4, LiteGraph } from '../litegraph'
+import { LLink, type ResolvedConnection } from '../LLink'
+import { Reroute } from '../Reroute'
+import { nextUniqueName } from '../strings'
+
+import { SubgraphInputNode } from "./SubgraphInputNode"
+import { SubgraphOutputNode } from "./SubgraphOutputNode"
+
+export interface FilteredItems {
+  nodes: Set<LGraphNode>
+  reroutes: Set<Reroute>
+  groups: Set<LGraphGroup>
+  subgraphInputNodes: Set<SubgraphInputNode>
+  subgraphOutputNodes: Set<SubgraphOutputNode>
+  unknown: Set<Positionable>
+}
+
+export function splitPositionables(items: Iterable<Positionable>): FilteredItems {
+  const nodes = new Set<LGraphNode>()
+  const reroutes = new Set<Reroute>()
+  const groups = new Set<LGraphGroup>()
+  const subgraphInputNodes = new Set<SubgraphInputNode>()
+  const subgraphOutputNodes = new Set<SubgraphOutputNode>()
+
+  const unknown = new Set<Positionable>()
+
+  for (const item of items) {
+    switch (true) {
+    case item instanceof LGraphNode:
+      nodes.add(item)
+      break
+    case item instanceof LGraphGroup:
+      groups.add(item)
+      break
+    case item instanceof Reroute:
+      reroutes.add(item)
+      break
+    case item instanceof SubgraphInputNode:
+      subgraphInputNodes.add(item)
+      break
+    case item instanceof SubgraphOutputNode:
+      subgraphOutputNodes.add(item)
+      break
+    default:
+      unknown.add(item)
+      break
+    }
+  }
+
+  return {
+    nodes,
+    reroutes,
+    groups,
+    subgraphInputNodes,
+    subgraphOutputNodes,
+    unknown,
+  }
+}
+
+interface BoundaryLinks {
+  boundaryLinks: LLink[]
+  boundaryFloatingLinks: LLink[]
+  internalLinks: LLink[]
+  boundaryInputLinks: LLink[]
+  boundaryOutputLinks: LLink[]
+}
+
+export function getBoundaryLinks(graph: LGraph, items: Set<Positionable>): BoundaryLinks {
+  const internalLinks: LLink[] = []
+  const boundaryLinks: LLink[] = []
+  const boundaryInputLinks: LLink[] = []
+  const boundaryOutputLinks: LLink[] = []
+  const boundaryFloatingLinks: LLink[] = []
+  const visited = new WeakSet<Positionable>()
+
+  for (const item of items) {
+    if (visited.has(item)) continue
+    visited.add(item)
+
+    // Nodes
+    if (item instanceof LGraphNode) {
+      const node = item
+
+      // Inputs
+      if (node.inputs) {
+        for (const input of node.inputs) {
+          addFloatingLinks(input._floatingLinks)
+
+          if (input.link == null) continue
+
+          const resolved = LLink.resolve(input.link, graph)
+          if (!resolved) {
+            console.debug(`Failed to resolve link ID [${input.link}]`)
+            continue
+          }
+
+          // Output end of this link is outside the items set
+          const { link, outputNode } = resolved
+          if (outputNode) {
+            if (!items.has(outputNode)) {
+              boundaryInputLinks.push(link)
+            } else {
+              internalLinks.push(link)
+            }
+          } else if (link.origin_id === SUBGRAPH_INPUT_ID) {
+            // Subgraph input node - always boundary
+            boundaryInputLinks.push(link)
+          }
+        }
+      }
+
+      // Outputs
+      if (node.outputs) {
+        for (const output of node.outputs) {
+          addFloatingLinks(output._floatingLinks)
+
+          if (!output.links) continue
+
+          const many = LLink.resolveMany(output.links, graph)
+          for (const { link, inputNode } of many) {
+            if (
+              // Subgraph output node
+              link.target_id === SUBGRAPH_OUTPUT_ID ||
+              // Input end of this link is outside the items set
+              (inputNode && !items.has(inputNode))
+            ) {
+              boundaryOutputLinks.push(link)
+            }
+            // Internal links are discovered on input side.
+          }
+        }
+      }
+    } else if (item instanceof Reroute) {
+      // Reroutes
+      const reroute = item
+
+      // TODO: This reroute should be on one side of the boundary.  We should mark the reroute that is on each side of the boundary.
+      // TODO: This could occur any number of times on a link; each time should be marked as a separate boundary.
+      // TODO: e.g. A link with 3 reroutes, the first and last reroute are in `items`, but the middle reroute is not. This will be two "in" and two "out" boundaries.
+      const results = LLink.resolveMany(reroute.linkIds, graph)
+      for (const { link } of results) {
+        const reroutes = LLink.getReroutes(graph, link)
+        const reroutesOutside = reroutes.filter(reroute => !items.has(reroute))
+
+        // for (const reroute of reroutes) {
+        //   // TODO: Do the checks here.
+        // }
+
+        const { inputNode, outputNode } = link.resolve(graph)
+
+        if (
+          reroutesOutside.length ||
+          (inputNode && !items.has(inputNode)) ||
+          (outputNode && !items.has(outputNode))
+        ) {
+          boundaryLinks.push(link)
+        }
+      }
+    }
+  }
+
+  return { boundaryLinks, boundaryFloatingLinks, internalLinks, boundaryInputLinks, boundaryOutputLinks }
+
+  /**
+   * Adds any floating links that cross the boundary.
+   * @param floatingLinks The floating links to check
+   */
+  function addFloatingLinks(floatingLinks: Set<LLink> | undefined): void {
+    if (!floatingLinks) return
+
+    for (const link of floatingLinks) {
+      const crossesBoundary = LLink
+        .getReroutes(graph, link)
+        .some(reroute => !items.has(reroute))
+
+      if (crossesBoundary) boundaryFloatingLinks.push(link)
+    }
+  }
+}
+
+export function multiClone(nodes: Iterable<LGraphNode>): ISerialisedNode[] {
+  const clonedNodes: ISerialisedNode[] = []
+
+  // Selectively clone - keep IDs & links
+  for (const node of nodes) {
+    const newNode = LiteGraph.createNode(node.type)
+    if (!newNode) {
+      console.warn("Failed to create node", node.type)
+      continue
+    }
+
+    // Must be cloned; litegraph "serialize" is mostly shallow clone
+    const data = LiteGraph.cloneObject(node.serialize())
+    newNode.configure(data)
+
+    clonedNodes.push(newNode.serialize())
+  }
+
+  return clonedNodes
+}
+
+/**
+ * Groups resolved connections by output object. If the output is nullish, the connection will be in its own group.
+ * @param resolvedConnections The resolved connections to group
+ * @returns A map of grouped connections.
+ */
+export function groupResolvedByOutput(
+  resolvedConnections: ResolvedConnection[],
+): Map<SubgraphIO | INodeOutputSlot | object, ResolvedConnection[]> {
+  const groupedByOutput: ReturnType<typeof groupResolvedByOutput> = new Map()
+
+  for (const resolved of resolvedConnections) {
+    // Force no group (unique object) if output is undefined; corruption or an error has occurred
+    const groupBy = resolved.subgraphInput ?? resolved.output ?? {}
+    const group = groupedByOutput.get(groupBy)
+    if (group) {
+      group.push(resolved)
+    } else {
+      groupedByOutput.set(groupBy, [resolved])
+    }
+  }
+
+  return groupedByOutput
+}
+
+export function mapSubgraphInputsAndLinks(resolvedInputLinks: ResolvedConnection[], links: SerialisableLLink[]): SubgraphIO[] {
+  // Group matching links
+  const groupedByOutput = groupResolvedByOutput(resolvedInputLinks)
+
+  // Create one input for each output (outside subgraph)
+  const inputs: SubgraphIO[] = []
+
+  for (const [, connections] of groupedByOutput) {
+    const inputLinks: SerialisableLLink[] = []
+
+    // Create serialised links for all links (will be recreated in subgraph)
+    for (const resolved of connections) {
+      const { link, input } = resolved
+      if (!input) continue
+
+      const linkData = link.asSerialisable()
+      linkData.origin_id = SUBGRAPH_INPUT_ID
+      linkData.origin_slot = inputs.length
+      links.push(linkData)
+      inputLinks.push(linkData)
+    }
+
+    // Use first input link
+    const { input } = connections[0]
+    if (!input) continue
+
+    // Subgraph input slot
+    const { color_off, color_on, dir, hasErrors, label, localized_name, name, shape, type } = input
+    const uniqueName = nextUniqueName(name, inputs.map(input => input.name))
+    const uniqueLocalizedName = localized_name ? nextUniqueName(localized_name, inputs.map(input => input.localized_name ?? "")) : undefined
+
+    const inputData: SubgraphIO = {
+      id: createUuidv4(),
+      type: String(type),
+      linkIds: inputLinks.map(link => link.id),
+      name: uniqueName,
+      color_off,
+      color_on,
+      dir,
+      label,
+      localized_name: uniqueLocalizedName,
+      hasErrors,
+      shape,
+    }
+
+    inputs.push(inputData)
+  }
+
+  return inputs
+}
+
+/**
+ * Clones the output slots, and updates existing links, when converting items to a subgraph.
+ * @param resolvedOutputLinks The resolved output links.
+ * @param links The links to add to the subgraph.
+ * @returns The subgraph output slots.
+ */
+export function mapSubgraphOutputsAndLinks(resolvedOutputLinks: ResolvedConnection[], links: SerialisableLLink[]): SubgraphIO[] {
+  // Group matching links
+  const groupedByOutput = groupResolvedByOutput(resolvedOutputLinks)
+
+  const outputs: SubgraphIO[] = []
+
+  for (const [, connections] of groupedByOutput) {
+    const outputLinks: SerialisableLLink[] = []
+
+    // Create serialised links for all links (will be recreated in subgraph)
+    for (const resolved of connections) {
+      const { link, output } = resolved
+      if (!output) continue
+
+      // Link
+      const linkData = link.asSerialisable()
+      linkData.target_id = SUBGRAPH_OUTPUT_ID
+      linkData.target_slot = outputs.length
+      links.push(linkData)
+      outputLinks.push(linkData)
+    }
+
+    // Use first output link
+    const { output } = connections[0]
+    if (!output) continue
+
+    // Subgraph output slot
+    const { color_off, color_on, dir, hasErrors, label, localized_name, name, shape, type } = output
+    const uniqueName = nextUniqueName(name, outputs.map(output => output.name))
+    const uniqueLocalizedName = localized_name ? nextUniqueName(localized_name, outputs.map(output => output.localized_name ?? "")) : undefined
+
+    const outputData = {
+      id: createUuidv4(),
+      type: String(type),
+      linkIds: outputLinks.map(link => link.id),
+      name: uniqueName,
+      color_off,
+      color_on,
+      dir,
+      label,
+      localized_name: uniqueLocalizedName,
+      hasErrors,
+      shape,
+    } satisfies SubgraphIO
+
+    outputs.push(structuredClone(outputData))
+  }
+  return outputs
+}
diff --git a/src/lib/litegraph/src/types/NodeLike.ts b/src/lib/litegraph/src/types/NodeLike.ts
new file mode 100644
index 0000000000..9a2a405baf
--- /dev/null
+++ b/src/lib/litegraph/src/types/NodeLike.ts
@@ -0,0 +1,13 @@
+import type { INodeInputSlot, INodeOutputSlot } from '../interfaces'
+import type { NodeId } from '../LGraphNode'
+import type { SubgraphIO } from './serialisation'
+
+export interface NodeLike {
+  id: NodeId
+
+  canConnectTo(
+    node: NodeLike,
+    toSlot: INodeInputSlot | SubgraphIO,
+    fromSlot: INodeOutputSlot | SubgraphIO,
+  ): boolean
+}
diff --git a/src/lib/litegraph/src/types/disposable.d.ts b/src/lib/litegraph/src/types/disposable.d.ts
new file mode 100644
index 0000000000..99debdbf87
--- /dev/null
+++ b/src/lib/litegraph/src/types/disposable.d.ts
@@ -0,0 +1,23 @@
+/**
+ * Polyfill for disposable type; symbol already registered in modern browsers.
+ */
+
+interface SymbolConstructor {
+  /**
+   * A method that is used to release resources held by an object. Called by the semantics of the `using` statement.
+   */
+  readonly dispose: unique symbol
+
+  /**
+   * A method that is used to asynchronously release resources held by an object. Called by the semantics of the `await using` statement.
+   */
+  readonly asyncDispose: unique symbol
+}
+
+interface Disposable {
+  [Symbol.dispose](): void
+}
+
+interface AsyncDisposable {
+  [Symbol.asyncDispose](): PromiseLike<void>
+}
diff --git a/src/lib/litegraph/src/types/events.ts b/src/lib/litegraph/src/types/events.ts
new file mode 100644
index 0000000000..64cf9eb209
--- /dev/null
+++ b/src/lib/litegraph/src/types/events.ts
@@ -0,0 +1,89 @@
+/**
+ * Event interfaces for event extension
+ */
+
+import type { LGraphGroup } from "../LGraphGroup"
+import type { LGraphNode } from "../LGraphNode"
+import type { LinkReleaseContextExtended } from "../litegraph"
+
+/** For Canvas*Event - adds graph space co-ordinates (property names are shipped) */
+export interface ICanvasPosition {
+  /** X co-ordinate of the event, in graph space (NOT canvas space) */
+  canvasX: number
+  /** Y co-ordinate of the event, in graph space (NOT canvas space) */
+  canvasY: number
+}
+
+/** For Canvas*Event */
+export interface IDeltaPosition {
+  deltaX: number
+  deltaY: number
+}
+
+/**
+ * Workaround for Firefox returning 0 on offsetX/Y props
+ * See https://github.com/Comfy-Org/litegraph.js/issues/403 for details
+ */
+export interface IOffsetWorkaround {
+  /** See {@link MouseEvent.offsetX}.  This workaround is required (2024-12-31) to support Firefox, which always returns 0 */
+  safeOffsetX: number
+  /** See {@link MouseEvent.offsetY}.  This workaround is required (2024-12-31) to support Firefox, which always returns 0 */
+  safeOffsetY: number
+}
+
+/** All properties added when converting a pointer event to a CanvasPointerEvent (via {@link LGraphCanvas.adjustMouseEvent}). */
+export type CanvasPointerExtensions = ICanvasPosition & IDeltaPosition & IOffsetWorkaround
+
+interface LegacyMouseEvent {
+  /** @deprecated Part of DragAndScale mouse API - incomplete / not maintained */
+  dragging?: boolean
+  click_time?: number
+}
+
+/** PointerEvent with canvasX/Y and deltaX/Y properties */
+export interface CanvasPointerEvent extends PointerEvent, CanvasMouseEvent {}
+
+/** MouseEvent with canvasX/Y and deltaX/Y properties */
+export interface CanvasMouseEvent extends
+  MouseEvent,
+  Readonly<CanvasPointerExtensions>,
+  LegacyMouseEvent {}
+
+/** DragEvent with canvasX/Y and deltaX/Y properties */
+export interface CanvasDragEvent extends
+  DragEvent,
+  CanvasPointerExtensions {}
+
+export type CanvasEventDetail =
+  | GenericEventDetail
+  | GroupDoubleClickEventDetail
+  | NodeDoubleClickEventDetail
+  | EmptyDoubleClickEventDetail
+  | EmptyReleaseEventDetail
+
+export interface GenericEventDetail {
+  subType: "before-change" | "after-change"
+}
+
+export interface OriginalEvent {
+  originalEvent: CanvasPointerEvent
+}
+
+export interface EmptyReleaseEventDetail extends OriginalEvent {
+  subType: "empty-release"
+  linkReleaseContext: LinkReleaseContextExtended
+}
+
+export interface EmptyDoubleClickEventDetail extends OriginalEvent {
+  subType: "empty-double-click"
+}
+
+export interface GroupDoubleClickEventDetail extends OriginalEvent {
+  subType: "group-double-click"
+  group: LGraphGroup
+}
+
+export interface NodeDoubleClickEventDetail extends OriginalEvent {
+  subType: "node-double-click"
+  node: LGraphNode
+}
diff --git a/src/lib/litegraph/src/types/globalEnums.ts b/src/lib/litegraph/src/types/globalEnums.ts
new file mode 100644
index 0000000000..7beb43b936
--- /dev/null
+++ b/src/lib/litegraph/src/types/globalEnums.ts
@@ -0,0 +1,142 @@
+/** Node slot type - input or output */
+export enum NodeSlotType {
+  INPUT = 1,
+  OUTPUT = 2,
+}
+
+/** Shape that an object will render as - used by nodes and slots */
+export enum RenderShape {
+  /** Rectangle with square corners */
+  BOX = 1,
+  /** Rounded rectangle */
+  ROUND = 2,
+  /** Circle is circle */
+  CIRCLE = 3,
+  /** Two rounded corners: top left & bottom right */
+  CARD = 4,
+  /** Slot shape: Arrow */
+  ARROW = 5,
+  /** Slot shape: Grid */
+  GRID = 6,
+  /** Slot shape: Hollow circle  */
+  HollowCircle = 7,
+}
+
+/** Bit flags used to indicate what the pointer is currently hovering over. */
+export enum CanvasItem {
+  /** No items / none */
+  Nothing = 0,
+  /** At least one node */
+  Node = 1,
+  /** At least one group */
+  Group = 1 << 1,
+  /** A reroute (not its path) */
+  Reroute = 1 << 2,
+  /** The path of a link */
+  Link = 1 << 3,
+  /** A reroute slot */
+  RerouteSlot = 1 << 5,
+  /** A subgraph input or output node */
+  SubgraphIoNode = 1 << 6,
+  /** A subgraph input or output slot */
+  SubgraphIoSlot = 1 << 7,
+}
+
+/** The direction that a link point will flow towards - e.g. horizontal outputs are right by default */
+export enum LinkDirection {
+  NONE = 0,
+  UP = 1,
+  DOWN = 2,
+  LEFT = 3,
+  RIGHT = 4,
+  CENTER = 5,
+}
+
+/** The path calculation that links follow */
+export enum LinkRenderType {
+  HIDDEN_LINK = -1,
+  /** Juts out from the input & output a little @see LinkDirection, then a straight line between them */
+  STRAIGHT_LINK = 0,
+  /** 90° angles, clean and box-like */
+  LINEAR_LINK = 1,
+  /** Smooth curved links - default */
+  SPLINE_LINK = 2,
+}
+
+/** The marker in the middle of a link */
+export enum LinkMarkerShape {
+  /** Do not display markers */
+  None = 0,
+  /** Circles (default) */
+  Circle = 1,
+  /** Directional arrows */
+  Arrow = 2,
+}
+
+export enum TitleMode {
+  NORMAL_TITLE = 0,
+  NO_TITLE = 1,
+  TRANSPARENT_TITLE = 2,
+  AUTOHIDE_TITLE = 3,
+}
+
+export enum LGraphEventMode {
+  ALWAYS = 0,
+  ON_EVENT = 1,
+  NEVER = 2,
+  ON_TRIGGER = 3,
+  BYPASS = 4,
+}
+
+export enum EaseFunction {
+  LINEAR = "linear",
+  EASE_IN_QUAD = "easeInQuad",
+  EASE_OUT_QUAD = "easeOutQuad",
+  EASE_IN_OUT_QUAD = "easeInOutQuad",
+}
+
+/** Bit flags used to indicate what the pointer is currently hovering over. */
+export enum Alignment {
+  /** No items / none */
+  None = 0,
+  /** Top */
+  Top = 1,
+  /** Bottom */
+  Bottom = 1 << 1,
+  /** Vertical middle */
+  Middle = 1 << 2,
+  /** Left */
+  Left = 1 << 3,
+  /** Right */
+  Right = 1 << 4,
+  /** Horizontal centre */
+  Centre = 1 << 5,
+  /** Top left */
+  TopLeft = Top | Left,
+  /** Top side, horizontally centred */
+  TopCentre = Top | Centre,
+  /** Top right */
+  TopRight = Top | Right,
+  /** Left side, vertically centred */
+  MidLeft = Left | Middle,
+  /** Middle centre */
+  MidCentre = Middle | Centre,
+  /** Right side, vertically centred */
+  MidRight = Right | Middle,
+  /** Bottom left */
+  BottomLeft = Bottom | Left,
+  /** Bottom side, horizontally centred */
+  BottomCentre = Bottom | Centre,
+  /** Bottom right */
+  BottomRight = Bottom | Right,
+}
+
+/**
+ * Checks if the bitwise {@link flag} is set in the {@link flagSet}.
+ * @param flagSet The unknown set of flags - will be checked for the presence of {@link flag}
+ * @param flag The flag to check for
+ * @returns `true` if the flag is set, `false` otherwise.
+ */
+export function hasFlag(flagSet: number, flag: number): boolean {
+  return (flagSet & flag) === flag
+}
diff --git a/src/lib/litegraph/src/types/serialisation.ts b/src/lib/litegraph/src/types/serialisation.ts
new file mode 100644
index 0000000000..ab23e987e6
--- /dev/null
+++ b/src/lib/litegraph/src/types/serialisation.ts
@@ -0,0 +1,220 @@
+import type {
+  Dictionary,
+  INodeFlags,
+  INodeInputSlot,
+  INodeOutputSlot,
+  INodeSlot,
+  ISlotType,
+  Point,
+  Size,
+} from "../interfaces"
+import type { LGraphConfig, LGraphExtra, LGraphState } from "../LGraph"
+import type { IGraphGroupFlags } from "../LGraphGroup"
+import type { NodeId, NodeProperty } from "../LGraphNode"
+import type { LiteGraph } from "../litegraph"
+import type { LinkId, SerialisedLLinkArray } from "../LLink"
+import type { FloatingRerouteSlot, RerouteId } from "../Reroute"
+import type { TWidgetValue } from "../types/widgets"
+import type { RenderShape } from "./globalEnums"
+import type { UUID } from '../utils/uuid'
+
+/**
+ * An object that implements custom pre-serialization logic via {@link Serialisable.asSerialisable}.
+ */
+export interface Serialisable<SerialisableObject> {
+  /**
+   * Prepares this object for serialization.
+   * Creates a partial shallow copy of itself, with only the properties that should be serialised.
+   * @returns An object that can immediately be serialized to JSON.
+   */
+  asSerialisable(): SerialisableObject
+}
+
+export interface BaseExportedGraph {
+  /** Unique graph ID.  Automatically generated if not provided. */
+  id: UUID
+  /** The revision number of this graph. Not automatically incremented; intended for use by a downstream save function. */
+  revision: number
+  config?: LGraphConfig
+  /** Details of the appearance and location of subgraphs shown in this graph. Similar to */
+  subgraphs?: ExportedSubgraphInstance[]
+  /** Definitions of re-usable objects that are referenced elsewhere in this exported graph. */
+  definitions?: {
+    /** The base definition of subgraphs used in this workflow. That is, what you see when you open / edit a subgraph. */
+    subgraphs?: ExportedSubgraph[]
+  }
+}
+
+export interface SerialisableGraph extends BaseExportedGraph {
+  /** Schema version.  @remarks Version bump should add to const union, which is used to narrow type during deserialise. */
+  version: 0 | 1
+  state: LGraphState
+  groups?: ISerialisedGroup[]
+  nodes?: ISerialisedNode[]
+  links?: SerialisableLLink[]
+  floatingLinks?: SerialisableLLink[]
+  reroutes?: SerialisableReroute[]
+  extra?: LGraphExtra
+}
+
+export type ISerialisableNodeInput = Omit<INodeInputSlot, "boundingRect" | "widget"> & {
+  widget?: { name: string }
+}
+export type ISerialisableNodeOutput = Omit<INodeOutputSlot, "boundingRect" | "_data"> & {
+  widget?: { name: string }
+}
+
+/** Serialised LGraphNode */
+export interface ISerialisedNode {
+  title?: string
+  id: NodeId
+  type: string
+  pos: Point
+  size: Size
+  flags: INodeFlags
+  order: number
+  mode: number
+  outputs?: ISerialisableNodeOutput[]
+  inputs?: ISerialisableNodeInput[]
+  properties?: Dictionary<NodeProperty | undefined>
+  shape?: RenderShape
+  boxcolor?: string
+  color?: string
+  bgcolor?: string
+  showAdvanced?: boolean
+  /**
+   * Note: Some custom nodes overrides the `widgets_values` property to an
+   * object that has `length` property and index access. It is not safe to call
+   * any array methods on it.
+   * See example in https://github.com/Kosinkadink/ComfyUI-VideoHelperSuite/blob/8629188458dc6cb832f871ece3bd273507e8a766/web/js/VHS.core.js#L59-L84
+   */
+  widgets_values?: TWidgetValue[]
+}
+
+/** Properties of nodes that are used by subgraph instances. */
+type NodeSubgraphSharedProps = Omit<ISerialisedNode, "properties" | "showAdvanced">
+
+/** A single instance of a subgraph; where it is used on a graph, any customisation to shape / colour etc. */
+export interface ExportedSubgraphInstance extends NodeSubgraphSharedProps {
+  /**
+   * The ID of the actual subgraph definition.
+   * @see {@link ExportedSubgraph.subgraphs}
+   */
+  type: UUID
+}
+
+/**
+ * Original implementation from static litegraph.d.ts
+ * Maintained for backwards compat
+ */
+export interface ISerialisedGraph extends BaseExportedGraph {
+  last_node_id: NodeId
+  last_link_id: number
+  nodes: ISerialisedNode[]
+  links: SerialisedLLinkArray[]
+  floatingLinks?: SerialisableLLink[]
+  groups: ISerialisedGroup[]
+  version: typeof LiteGraph.VERSION
+  extra?: LGraphExtra
+}
+
+/**
+ * Defines a subgraph and its contents.
+ * Can be referenced multiple times in a schema.
+ */
+export interface ExportedSubgraph extends SerialisableGraph {
+  /** The display name of the subgraph. */
+  name: string
+  inputNode: ExportedSubgraphIONode
+  outputNode: ExportedSubgraphIONode
+  /** Ordered list of inputs to the subgraph itself. Similar to a reroute, with the input side in the graph, and the output side in the subgraph. */
+  inputs?: SubgraphIO[]
+  /** Ordered list of outputs from the subgraph itself. Similar to a reroute, with the input side in the subgraph, and the output side in the graph. */
+  outputs?: SubgraphIO[]
+  /** A list of node widgets displayed in the parent graph, on the subgraph object. */
+  widgets?: ExposedWidget[]
+}
+
+/** Properties shared by subgraph and node I/O slots. */
+type SubgraphIOShared = Omit<INodeSlot, "boundingRect" | "nameLocked" | "locked" | "removable" | "_floatingLinks">
+
+/** Subgraph I/O slots */
+export interface SubgraphIO extends SubgraphIOShared {
+  /** Slot ID (internal; never changes once instantiated). */
+  id: UUID
+  /** The data type this slot uses. Unlike nodes, this does not support legacy numeric types. */
+  type: string
+  /** Links connected to this slot, or `undefined` if not connected. An ouptut slot should only ever have one link. */
+  linkIds?: LinkId[]
+}
+
+/** A reference to a node widget shown in the parent graph */
+export interface ExposedWidget {
+  /** The ID of the node (inside the subgraph) that the widget belongs to. */
+  id: NodeId
+  /** The name of the widget to show in the parent graph. */
+  name: string
+}
+
+/** Serialised LGraphGroup */
+export interface ISerialisedGroup {
+  id: number
+  title: string
+  bounding: number[]
+  color?: string
+  font_size?: number
+  flags?: IGraphGroupFlags
+}
+
+export type TClipboardLink = [
+  targetRelativeIndex: number,
+  originSlot: number,
+  nodeRelativeIndex: number,
+  targetSlot: number,
+  targetNodeId: NodeId,
+]
+
+/** Items copied from the canvas */
+export interface ClipboardItems {
+  nodes?: ISerialisedNode[]
+  groups?: ISerialisedGroup[]
+  reroutes?: SerialisableReroute[]
+  links?: SerialisableLLink[]
+}
+
+/** @deprecated */
+export interface IClipboardContents {
+  nodes?: ISerialisedNode[]
+  links?: TClipboardLink[]
+}
+
+export interface SerialisableReroute {
+  id: RerouteId
+  parentId?: RerouteId
+  pos: Point
+  linkIds: LinkId[]
+  floating?: FloatingRerouteSlot
+}
+
+export interface SerialisableLLink {
+  /** Link ID */
+  id: LinkId
+  /** Output node ID */
+  origin_id: NodeId
+  /** Output slot index */
+  origin_slot: number
+  /** Input node ID */
+  target_id: NodeId
+  /** Input slot index */
+  target_slot: number
+  /** Data type of the link */
+  type: ISlotType
+  /** ID of the last reroute (from input to output) that this link passes through, otherwise `undefined` */
+  parentId?: RerouteId
+}
+
+export interface ExportedSubgraphIONode {
+  id: NodeId
+  bounding: [number, number, number, number]
+  pinned?: boolean
+}
diff --git a/src/lib/litegraph/src/types/utility.ts b/src/lib/litegraph/src/types/utility.ts
new file mode 100644
index 0000000000..6aaad44155
--- /dev/null
+++ b/src/lib/litegraph/src/types/utility.ts
@@ -0,0 +1,13 @@
+/**
+ * General-purpose, TypeScript utility types.
+ */
+
+/** {@link Pick} only properties that evaluate to `never`. */
+export type PickNevers<T> = {
+  [K in keyof T as T[K] extends never ? K : never]: T[K]
+}
+
+/** {@link Omit} all properties that evaluate to `never`. */
+export type NeverNever<T> = {
+  [K in keyof T as T[K] extends never ? never : K]: T[K]
+}
diff --git a/src/lib/litegraph/src/types/widgets.ts b/src/lib/litegraph/src/types/widgets.ts
new file mode 100644
index 0000000000..347e66aad9
--- /dev/null
+++ b/src/lib/litegraph/src/types/widgets.ts
@@ -0,0 +1,354 @@
+import type { CanvasColour, Point, RequiredProps, Size } from "../interfaces"
+import type { CanvasPointer, LGraphCanvas, LGraphNode } from "../litegraph"
+import type { CanvasMouseEvent, CanvasPointerEvent } from "./events"
+
+export interface IWidgetOptions<TValues = unknown[]> {
+  on?: string
+  off?: string
+  max?: number
+  min?: number
+  slider_color?: CanvasColour
+  marker_color?: CanvasColour
+  precision?: number
+  read_only?: boolean
+  /**
+   * @deprecated Use {@link IWidgetOptions.step2} instead.
+   * The legacy step is scaled up by 10x in the legacy frontend logic.
+   */
+  step?: number
+  /** The step value for numeric widgets. */
+  step2?: number
+
+  y?: number
+  multiline?: boolean
+  // TODO: Confirm this
+  property?: string
+  /** If `true`, an input socket will not be created for this widget. */
+  socketless?: boolean
+
+  values?: TValues
+  callback?: IWidget["callback"]
+}
+
+export interface IWidgetSliderOptions extends IWidgetOptions<number[]> {
+  min: number
+  max: number
+  step2: number
+  slider_color?: CanvasColour
+  marker_color?: CanvasColour
+}
+
+export interface IWidgetKnobOptions extends IWidgetOptions<number[]> {
+  min: number
+  max: number
+  step2: number
+  slider_color?: CanvasColour // TODO: Replace with knob color
+  marker_color?: CanvasColour
+  gradient_stops?: string
+}
+
+/**
+ * A widget for a node.
+ * All types are based on IBaseWidget - additions can be made there or directly on individual types.
+ *
+ * Implemented as a discriminative union of widget types, so this type itself cannot be extended.
+ * Recommend declaration merging any properties that use IWidget (e.g. {@link LGraphNode.widgets}) with a new type alias.
+ * @see ICustomWidget
+ */
+export type IWidget =
+  | IBooleanWidget
+  | INumericWidget
+  | IStringWidget
+  | IComboWidget
+  | IStringComboWidget
+  | ICustomWidget
+  | ISliderWidget
+  | IButtonWidget
+  | IKnobWidget
+  | IFileUploadWidget
+  | IColorWidget
+  | IMarkdownWidget
+  | IImageWidget
+  | ITreeSelectWidget
+  | IMultiSelectWidget
+  | IChartWidget
+  | IGalleriaWidget
+  | IImageCompareWidget
+  | ISelectButtonWidget
+  | ITextareaWidget
+
+export interface IBooleanWidget extends IBaseWidget<boolean, "toggle"> {
+  type: "toggle"
+  value: boolean
+}
+
+/** Any widget that uses a numeric backing */
+export interface INumericWidget extends IBaseWidget<number, "number"> {
+  type: "number"
+  value: number
+}
+
+export interface ISliderWidget extends IBaseWidget<number, "slider", IWidgetSliderOptions> {
+  type: "slider"
+  value: number
+  marker?: number
+}
+
+export interface IKnobWidget extends IBaseWidget<number, "knob", IWidgetKnobOptions> {
+  type: "knob"
+  value: number
+  options: IWidgetKnobOptions
+}
+
+/** Avoids the type issues with the legacy IComboWidget type */
+export interface IStringComboWidget extends IBaseWidget<string, "combo", RequiredProps<IWidgetOptions<string[]>, "values">> {
+  type: "combo"
+  value: string
+}
+
+type ComboWidgetValues = string[] | Record<string, string> | ((widget?: IComboWidget, node?: LGraphNode) => string[])
+
+/** A combo-box widget (dropdown, select, etc) */
+export interface IComboWidget extends IBaseWidget<
+  string | number,
+  "combo",
+  RequiredProps<IWidgetOptions<ComboWidgetValues>, "values">
+> {
+  type: "combo"
+  value: string | number
+}
+
+/** A widget with a string value */
+export interface IStringWidget extends IBaseWidget<string, "string" | "text", IWidgetOptions<string[]>> {
+  type: "string" | "text"
+  value: string
+}
+
+export interface IButtonWidget extends IBaseWidget<string | undefined, "button"> {
+  type: "button"
+  value: string | undefined
+  clicked: boolean
+}
+
+/** A custom widget - accepts any value and has no built-in special handling */
+export interface ICustomWidget extends IBaseWidget<string | object, "custom"> {
+  type: "custom"
+  value: string | object
+}
+
+/** File upload widget for selecting and uploading files */
+export interface IFileUploadWidget extends IBaseWidget<string, "fileupload"> {
+  type: "fileupload"
+  value: string
+  label?: string
+}
+
+/** Color picker widget for selecting colors */
+export interface IColorWidget extends IBaseWidget<string, "color"> {
+  type: "color"
+  value: string
+}
+
+/** Markdown widget for displaying formatted text */
+export interface IMarkdownWidget extends IBaseWidget<string, "markdown"> {
+  type: "markdown"
+  value: string
+}
+
+/** Image display widget */
+export interface IImageWidget extends IBaseWidget<string, "image"> {
+  type: "image"
+  value: string
+}
+
+/** Tree select widget for hierarchical selection */
+export interface ITreeSelectWidget extends IBaseWidget<string | string[], "treeselect"> {
+  type: "treeselect"
+  value: string | string[]
+}
+
+/** Multi-select widget for selecting multiple options */
+export interface IMultiSelectWidget extends IBaseWidget<string[], "multiselect"> {
+  type: "multiselect"
+  value: string[]
+}
+
+/** Chart widget for displaying data visualizations */
+export interface IChartWidget extends IBaseWidget<object, "chart"> {
+  type: "chart"
+  value: object
+}
+
+/** Gallery widget for displaying multiple images */
+export interface IGalleriaWidget extends IBaseWidget<string[], "galleria"> {
+  type: "galleria"
+  value: string[]
+}
+
+/** Image comparison widget for comparing two images side by side */
+export interface IImageCompareWidget extends IBaseWidget<string[], "imagecompare"> {
+  type: "imagecompare"
+  value: string[]
+}
+
+/** Select button widget for selecting from a group of buttons */
+export interface ISelectButtonWidget extends IBaseWidget<string, "selectbutton", RequiredProps<IWidgetOptions<string[]>, "values">> {
+  type: "selectbutton"
+  value: string
+}
+
+/** Textarea widget for multi-line text input */
+export interface ITextareaWidget extends IBaseWidget<string, "textarea"> {
+  type: "textarea"
+  value: string
+}
+
+/**
+ * Valid widget types.  TS cannot provide easily extensible type safety for this at present.
+ * Override linkedWidgets[]
+ * Values not in this list will not result in litegraph errors, however they will be treated the same as "custom".
+ */
+export type TWidgetType = IWidget["type"]
+export type TWidgetValue = IWidget["value"]
+
+/**
+ * The base type for all widgets.  Should not be implemented directly.
+ * @template TValue The type of value this widget holds.
+ * @template TType A string designating the type of widget, e.g. "toggle" or "string".
+ * @template TOptions The options for this widget.
+ * @see IWidget
+ */
+export interface IBaseWidget<
+  TValue = boolean | number | string | object | undefined,
+  TType extends string = string,
+  TOptions extends IWidgetOptions<unknown> = IWidgetOptions<unknown>,
+> {
+  linkedWidgets?: IBaseWidget[]
+
+  name: string
+  options: TOptions
+
+  label?: string
+  /** Widget type (see {@link TWidgetType}) */
+  type: TType
+  value?: TValue
+
+  /**
+   * Whether the widget value should be serialized on node serialization.
+   * @default true
+   */
+  serialize?: boolean
+
+  /**
+   * The computed height of the widget. Used by customized node resize logic.
+   * See scripts/domWidget.ts for more details.
+   * @readonly [Computed] This property is computed by the node.
+   */
+  computedHeight?: number
+
+  /**
+   * The starting y position of the widget after layout.
+   * @readonly [Computed] This property is computed by the node.
+   */
+  y: number
+
+  /**
+   * The y position of the widget after drawing (rendering).
+   * @readonly [Computed] This property is computed by the node.
+   * @deprecated There is no longer dynamic y adjustment on rendering anymore.
+   * Use {@link IBaseWidget.y} instead.
+   */
+  last_y?: number
+
+  width?: number
+  /**
+   * Whether the widget is disabled. Disabled widgets are rendered at half opacity.
+   * See also {@link IBaseWidget.computedDisabled}.
+   */
+  disabled?: boolean
+
+  /**
+   * The disabled state used for rendering based on various conditions including
+   * {@link IBaseWidget.disabled}.
+   * @readonly [Computed] This property is computed by the node.
+   */
+  computedDisabled?: boolean
+
+  hidden?: boolean
+  advanced?: boolean
+
+  tooltip?: string
+
+  // TODO: Confirm this format
+  callback?(
+    value: any,
+    canvas?: LGraphCanvas,
+    node?: LGraphNode,
+    pos?: Point,
+    e?: CanvasMouseEvent,
+  ): void
+
+  /**
+   * Simple callback for pointer events, allowing custom widgets to events relevant to them.
+   * @param event The pointer event that triggered this callback
+   * @param pointerOffset Offset of the pointer relative to {@link node.pos}
+   * @param node The node this widget belongs to
+   * @todo Expose CanvasPointer API to custom widgets
+   */
+  mouse?(event: CanvasPointerEvent, pointerOffset: Point, node: LGraphNode): boolean
+  /**
+   * Draw the widget.
+   * @param ctx The canvas context to draw on.
+   * @param node The node this widget belongs to.
+   * @param widget_width The width of the widget.
+   * @param y The y position of the widget.
+   * @param H The height of the widget.
+   * @param lowQuality Whether to draw the widget in low quality.
+   */
+  draw?(
+    ctx: CanvasRenderingContext2D,
+    node: LGraphNode,
+    widget_width: number,
+    y: number,
+    H: number,
+    lowQuality?: boolean,
+  ): void
+
+  /**
+   * Compute the size of the widget. Overrides {@link IBaseWidget.computeSize}.
+   * @param width The width of the widget.
+   * @deprecated Use {@link IBaseWidget.computeLayoutSize} instead.
+   * @returns The size of the widget.
+   */
+  computeSize?(width?: number): Size
+
+  /**
+   * Compute the layout size of the widget.
+   * @param node The node this widget belongs to.
+   * @returns The layout size of the widget.
+   */
+  computeLayoutSize?(
+    this: IBaseWidget,
+    node: LGraphNode
+  ): {
+    minHeight: number
+    maxHeight?: number
+    minWidth: number
+    maxWidth?: number
+  }
+
+  /**
+   * Callback for pointerdown events, allowing custom widgets to register callbacks to occur
+   * for all {@link CanvasPointer} events.
+   *
+   * This callback is operated early in the pointerdown logic; actions that prevent it from firing are:
+   * - `Ctrl + Drag` Multi-select
+   * - `Alt + Click/Drag` Clone node
+   * @param pointer The CanvasPointer handling this event
+   * @param node The node this widget belongs to
+   * @param canvas The LGraphCanvas where this event originated
+   * @returns Returning `true` from this callback forces Litegraph to ignore the event and
+   * not process it any further.
+   */
+  onPointerDown?(pointer: CanvasPointer, node: LGraphNode, canvas: LGraphCanvas): boolean
+}
diff --git a/src/lib/litegraph/src/utils/arrange.ts b/src/lib/litegraph/src/utils/arrange.ts
new file mode 100644
index 0000000000..847461cd8d
--- /dev/null
+++ b/src/lib/litegraph/src/utils/arrange.ts
@@ -0,0 +1,105 @@
+import type { Direction, IBoundaryNodes } from "../interfaces"
+import type { LGraphNode } from "../LGraphNode"
+
+/**
+ * Finds the nodes that are farthest in all four directions, representing the boundary of the nodes.
+ * @param nodes The nodes to check the edges of
+ * @returns An object listing the furthest node (edge) in all four directions.
+ * `null` if no nodes were supplied or the first node was falsy.
+ */
+export function getBoundaryNodes(nodes: LGraphNode[]): IBoundaryNodes | null {
+  const valid = nodes?.find(x => x)
+  if (!valid) return null
+
+  let top = valid
+  let right = valid
+  let bottom = valid
+  let left = valid
+
+  for (const node of nodes) {
+    if (!node) continue
+    const [x, y] = node.pos
+    const [width, height] = node.size
+
+    if (y < top.pos[1]) top = node
+    if (x + width > right.pos[0] + right.size[0]) right = node
+    if (y + height > bottom.pos[1] + bottom.size[1]) bottom = node
+    if (x < left.pos[0]) left = node
+  }
+
+  return {
+    top,
+    right,
+    bottom,
+    left,
+  }
+}
+
+/**
+ * Distributes nodes evenly along a horizontal or vertical plane.
+ * @param nodes The nodes to distribute
+ * @param horizontal If true, distributes along the horizontal plane.  Otherwise, the vertical plane.
+ */
+export function distributeNodes(nodes: LGraphNode[], horizontal?: boolean): void {
+  const nodeCount = nodes?.length
+  if (!(nodeCount > 1)) return
+
+  const index = horizontal ? 0 : 1
+
+  let total = 0
+  let highest = -Infinity
+
+  for (const node of nodes) {
+    total += node.size[index]
+
+    const high = node.pos[index] + node.size[index]
+    if (high > highest) highest = high
+  }
+  const sorted = [...nodes].sort((a, b) => a.pos[index] - b.pos[index])
+  const lowest = sorted[0].pos[index]
+
+  const gap = (highest - lowest - total) / (nodeCount - 1)
+  let startAt = lowest
+  for (let i = 0; i < nodeCount; i++) {
+    const node = sorted[i]
+    node.pos[index] = startAt + gap * i
+    startAt += node.size[index]
+  }
+}
+
+/**
+ * Aligns all nodes along the edge of a node.
+ * @param nodes The nodes to align
+ * @param direction The edge to align nodes on
+ * @param align_to The node to align all other nodes to.  If undefined, the farthest node will be used.
+ */
+export function alignNodes(
+  nodes: LGraphNode[],
+  direction: Direction,
+  align_to?: LGraphNode,
+): void {
+  if (!nodes) return
+
+  const boundary = align_to === undefined
+    ? getBoundaryNodes(nodes)
+    : { top: align_to, right: align_to, bottom: align_to, left: align_to }
+
+  if (boundary === null) return
+
+  for (const node of nodes) {
+    switch (direction) {
+    case "right":
+      node.pos[0] = boundary.right.pos[0] + boundary.right.size[0] - node.size[0]
+      break
+    case "left":
+      node.pos[0] = boundary.left.pos[0]
+      break
+    case "top":
+      node.pos[1] = boundary.top.pos[1]
+      break
+    case "bottom":
+      node.pos[1] = boundary.bottom.pos[1] + boundary.bottom.size[1] - node.size[1]
+      break
+    }
+  }
+}
diff --git a/src/lib/litegraph/src/utils/collections.ts b/src/lib/litegraph/src/utils/collections.ts
new file mode 100644
index 0000000000..02514afc33
--- /dev/null
+++ b/src/lib/litegraph/src/utils/collections.ts
@@ -0,0 +1,110 @@
+import type { ConnectingLink, ISlotType, Positionable } from "../interfaces"
+import type { LinkId } from '../LLink'
+
+import { LGraphNode } from '../LGraphNode'
+import { parseSlotTypes } from '../strings'
+
+/**
+ * Creates a flat set of all positionable items by recursively iterating through all child items.
+ *
+ * Does not include or recurse into pinned items.
+ * @param items The original set of items to iterate through
+ * @returns All unpinned items in the original set, and recursively, their children
+ */
+export function getAllNestedItems(items: ReadonlySet<Positionable>): Set<Positionable> {
+  const allItems = new Set<Positionable>()
+  if (items) {
+    for (const item of items) addRecursively(item, allItems)
+  }
+  return allItems
+
+  function addRecursively(item: Positionable, flatSet: Set<Positionable>): void {
+    if (flatSet.has(item) || item.pinned) return
+    flatSet.add(item)
+    if (item.children) {
+      for (const child of item.children) addRecursively(child, flatSet)
+    }
+  }
+}
+
+/**
+ * Iterates through a collection of {@link Positionable} items, returning the first {@link LGraphNode}.
+ * @param items The items to search through
+ * @returns The first node found in {@link items}, otherwise `undefined`
+ */
+export function findFirstNode(items: Iterable<Positionable>): LGraphNode | undefined {
+  for (const item of items) {
+    if (item instanceof LGraphNode) return item
+  }
+}
+
+/** @returns `true` if the provided link ID is currently being dragged. */
+export function isDraggingLink(linkId: LinkId, connectingLinks: ConnectingLink[] | null | undefined): ConnectingLink | undefined {
+  if (connectingLinks == null) return
+
+  for (const connectingLink of connectingLinks) {
+    if (connectingLink.link == null) continue
+    if (linkId === connectingLink.link.id) return connectingLink
+  }
+}
+
+type FreeSlotResult<T extends { type: ISlotType }> = { index: number, slot: T } | undefined
+
+/**
+ * Finds the first free in/out slot with any of the comma-delimited types in {@link type}.
+ *
+ * If no slots are free, falls back in order to:
+ * - The first free wildcard slot
+ * - The first occupied slot
+ * - The first occupied wildcard slot
+ * @param slots The iterable of node slots slots to search through
+ * @param type The {@link ISlotType type} of slot to find
+ * @param hasNoLinks A predicate that returns `true` if the slot is free.
+ * @returns The index and slot if found, otherwise `undefined`.
+ */
+export function findFreeSlotOfType<T extends { type: ISlotType }>(
+  slots: T[],
+  type: ISlotType,
+  hasNoLinks: (slot: T) => boolean,
+) {
+  if (!slots?.length) return
+
+  let occupiedSlot: FreeSlotResult<T>
+  let wildSlot: FreeSlotResult<T>
+  let occupiedWildSlot: FreeSlotResult<T>
+
+  const validTypes = parseSlotTypes(type)
+
+  for (const [index, slot] of slots.entries()) {
+    const slotTypes = parseSlotTypes(slot.type)
+
+    for (const validType of validTypes) {
+      for (const slotType of slotTypes) {
+        if (slotType === validType) {
+          if (hasNoLinks(slot)) {
+            // Exact match - short circuit
+            return { index, slot }
+          }
+          // In case we can't find a free slot.
+          occupiedSlot ??= { index, slot }
+        } else if (!wildSlot && (validType === "*" || slotType === "*")) {
+          // Save the first free wildcard slot as a fallback
+          if (hasNoLinks(slot)) {
+            wildSlot = { index, slot }
+          } else {
+            occupiedWildSlot ??= { index, slot }
+          }
+        }
+      }
+    }
+  }
+  return wildSlot ?? occupiedSlot ?? occupiedWildSlot
+}
+
+export function removeFromArray<T>(array: T[], value: T): boolean {
+  const index = array.indexOf(value)
+  const found = index !== -1
+
+  if (found) array.splice(index, 1)
+  return found
+}
diff --git a/src/lib/litegraph/src/utils/feedback.ts b/src/lib/litegraph/src/utils/feedback.ts
new file mode 100644
index 0000000000..3a882bb0f6
--- /dev/null
+++ b/src/lib/litegraph/src/utils/feedback.ts
@@ -0,0 +1,27 @@
+import { LiteGraph } from '../litegraph'
+
+/** Guard against unbound allocation. */
+const UNIQUE_MESSAGE_LIMIT = 10_000
+const sentWarnings: Set<string> = new Set()
+
+/**
+ * Warns that a deprecated function has been used via the public
+ * {@link onDeprecationWarning} / {@link onEveryDeprecationWarning} callback arrays.
+ * @param message Plain-language detail about what has been deprecated. This **should not** include unique data; use {@link source}.
+ * @param source A reference object to include alongside the message, e.g. `this`.
+ */
+export function warnDeprecated(message: string, source?: object): void {
+  if (!LiteGraph.alwaysRepeatWarnings) {
+    // Do not repeat
+    if (sentWarnings.has(message)) return
+
+    // Hard limit of unique messages per session
+    if (sentWarnings.size > UNIQUE_MESSAGE_LIMIT) return
+
+    sentWarnings.add(message)
+  }
+
+  for (const callback of LiteGraph.onDeprecationWarning) {
+    callback(message, source)
+  }
+}
diff --git a/src/lib/litegraph/src/utils/object.ts b/src/lib/litegraph/src/utils/object.ts
new file mode 100644
index 0000000000..9e95fd422b
--- /dev/null
+++ b/src/lib/litegraph/src/utils/object.ts
@@ -0,0 +1,5 @@
+export function omitBy<T extends object>(obj: T, predicate: (value: any) => boolean): Partial<T> {
+  return Object.fromEntries(
+    Object.entries(obj).filter(([_key, value]) => !predicate(value)),
+  ) as Partial<T>
+}
diff --git a/src/lib/litegraph/src/utils/spaceDistribution.ts b/src/lib/litegraph/src/utils/spaceDistribution.ts
new file mode 100644
index 0000000000..b307331908
--- /dev/null
+++ b/src/lib/litegraph/src/utils/spaceDistribution.ts
@@ -0,0 +1,77 @@
+export interface SpaceRequest {
+  minSize: number
+  maxSize?: number
+}
+
+/**
+ * Distributes available space among items with min/max size constraints
+ * @param totalSpace Total space available to distribute
+ * @param requests Array of space requests with size constraints
+ * @returns Array of space allocations
+ */
+export function distributeSpace(
+  totalSpace: number,
+  requests: SpaceRequest[],
+): number[] {
+  // Handle edge cases
+  if (requests.length === 0) return []
+
+  // Calculate total minimum space needed
+  const totalMinSize = requests.reduce((sum, req) => sum + req.minSize, 0)
+
+  // If we can't meet minimum requirements, return the minimum sizes
+  if (totalSpace < totalMinSize) {
+    return requests.map(req => req.minSize)
+  }
+
+  // Initialize allocations with minimum sizes
+  let allocations = requests.map(req => ({
+    computedSize: req.minSize,
+    maxSize: req.maxSize ?? Infinity,
+    remaining: (req.maxSize ?? Infinity) - req.minSize,
+  }))
+
+  // Calculate remaining space to distribute
+  let remainingSpace = totalSpace - totalMinSize
+
+  // Distribute remaining space iteratively
+  while (
+    remainingSpace > 0 &&
+    allocations.some(alloc => alloc.remaining > 0)
+  ) {
+    // Count items that can still grow
+    const growableItems = allocations.filter(
+      alloc => alloc.remaining > 0,
+    ).length
+
+    if (growableItems === 0) break
+
+    // Calculate fair share per item
+    const sharePerItem = remainingSpace / growableItems
+
+    // Track how much space was actually used in this iteration
+    let spaceUsedThisRound = 0
+
+    // Distribute space
+    allocations = allocations.map((alloc) => {
+      if (alloc.remaining <= 0) return alloc
+
+      const growth = Math.min(sharePerItem, alloc.remaining)
+      spaceUsedThisRound += growth
+
+      return {
+        ...alloc,
+        computedSize: alloc.computedSize + growth,
+        remaining: alloc.remaining - growth,
+      }
+    })
+
+    remainingSpace -= spaceUsedThisRound
+
+    // Break if we couldn't distribute any more space
+    if (spaceUsedThisRound === 0) break
+  }
+
+  // Return only the computed sizes
+  return allocations.map(({ computedSize }) => computedSize)
+}
diff --git a/src/lib/litegraph/src/utils/type.ts b/src/lib/litegraph/src/utils/type.ts
new file mode 100644
index 0000000000..6fda8cc1f6
--- /dev/null
+++ b/src/lib/litegraph/src/utils/type.ts
@@ -0,0 +1,23 @@
+import type { IColorable } from '../interfaces'
+
+/**
+ * Converts a plain object to a class instance if it is not already an instance of the class.
+ *
+ * Requires specific constructor signature; first parameter must be the object to convert.
+ * @param cls The class to convert to
+ * @param args The object to convert, followed by any other constructor arguments
+ * @returns The class instance
+ */
+export function toClass<P, C extends P, Args extends unknown[]>(
+  cls: new (instance: P, ...args: Args) => C,
+  ...args: [P, ...Args]
+): C {
+  return args[0] instanceof cls ? args[0] : new cls(...args)
+}
+
+/**
+ * Checks if an object is an instance of {@link IColorable}.
+ */
+export function isColorable(obj: unknown): obj is IColorable {
+  return typeof obj === "object" && obj !== null && "setColorOption" in obj && "getColorOption" in obj
+}
diff --git a/src/lib/litegraph/src/utils/uuid.ts b/src/lib/litegraph/src/utils/uuid.ts
new file mode 100644
index 0000000000..a9ee701097
--- /dev/null
+++ b/src/lib/litegraph/src/utils/uuid.ts
@@ -0,0 +1,29 @@
+// Using a template string for this is resulting in complex type workarounds. No current benefit beyond dev reading.
+export type UUID = string
+
+/** Special-case zero-UUID, consisting entirely of zeros. Used as a default value. */
+export const zeroUuid = "00000000-0000-0000-0000-000000000000"
+
+/** Pre-allocated storage for uuid random values. */
+const randomStorage = new Uint32Array(31)
+
+/**
+ * Creates a UUIDv4 string.
+ * @returns A new UUIDv4 string
+ * @remarks
+ * Original implementation from https://gist.github.com/jed/982883?permalink_comment_id=852670#gistcomment-852670
+ *
+ * Prefers the {@link crypto.randomUUID} method if available, falling back to
+ * {@link crypto.getRandomValues}, then finally the legacy {@link Math.random} method.
+ */
+export function createUuidv4(): UUID {
+  if (typeof crypto?.randomUUID === "function") return crypto.randomUUID()
+  if (typeof crypto?.getRandomValues === "function") {
+    const random = crypto.getRandomValues(randomStorage)
+    let i = 0
+    return "10000000-1000-4000-8000-100000000000".replaceAll(/[018]/g, a =>
+      (Number(a) ^ ((random[i++] * 3.725_290_298_461_914e-9) >> (Number(a) * 0.25))).toString(16))
+  }
+  return "10000000-1000-4000-8000-100000000000".replaceAll(/[018]/g, a =>
+    (Number(a) ^ ((Math.random() * 16) >> (Number(a) * 0.25))).toString(16))
+}
diff --git a/src/lib/litegraph/src/utils/widget.ts b/src/lib/litegraph/src/utils/widget.ts
new file mode 100644
index 0000000000..f12d34e186
--- /dev/null
+++ b/src/lib/litegraph/src/utils/widget.ts
@@ -0,0 +1,10 @@
+import type { IWidgetOptions } from '../types/widgets'
+
+/**
+ * The step value for numeric widgets.
+ * Use {@link IWidgetOptions.step2} if available, otherwise fallback to
+ * {@link IWidgetOptions.step} which is scaled up by 10x in the legacy frontend logic.
+ */
+export function getWidgetStep(options: IWidgetOptions<unknown>): number {
+  return options.step2 || ((options.step || 10) * 0.1)
+}
diff --git a/src/lib/litegraph/src/widgets/BaseSteppedWidget.ts b/src/lib/litegraph/src/widgets/BaseSteppedWidget.ts
new file mode 100644
index 0000000000..116c73d02a
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/BaseSteppedWidget.ts
@@ -0,0 +1,72 @@
+import type { IBaseWidget } from '../types/widgets'
+
+import { BaseWidget, type DrawWidgetOptions, type WidgetEventOptions } from "./BaseWidget"
+
+/**
+ * Base class for widgets that have increment and decrement buttons.
+ */
+export abstract class BaseSteppedWidget<TWidget extends IBaseWidget = IBaseWidget> extends BaseWidget<TWidget> {
+  /**
+   * Whether the widget can increment its value
+   * @returns `true` if the widget can increment its value, otherwise `false`
+   */
+  abstract canIncrement(): boolean
+  /**
+   * Whether the widget can decrement its value
+   * @returns `true` if the widget can decrement its value, otherwise `false`
+   */
+  abstract canDecrement(): boolean
+  /**
+   * Increment the value of the widget
+   * @param options The options for the widget event
+   */
+  abstract incrementValue(options: WidgetEventOptions): void
+  /**
+   * Decrement the value of the widget
+   * @param options The options for the widget event
+   */
+  abstract decrementValue(options: WidgetEventOptions): void
+
+  /**
+   * Draw the arrow buttons for the widget
+   * @param ctx The canvas rendering context
+   * @param width The width of the widget
+   */
+  drawArrowButtons(ctx: CanvasRenderingContext2D, width: number) {
+    const { height, text_color, disabledTextColor, y } = this
+    const { arrowMargin, arrowWidth, margin } = BaseWidget
+    const arrowTipX = margin + arrowMargin
+    const arrowInnerX = arrowTipX + arrowWidth
+
+    // Draw left arrow
+    ctx.fillStyle = this.canDecrement() ? text_color : disabledTextColor
+    ctx.beginPath()
+    ctx.moveTo(arrowInnerX, y + 5)
+    ctx.lineTo(arrowTipX, y + height * 0.5)
+    ctx.lineTo(arrowInnerX, y + height - 5)
+    ctx.fill()
+
+    // Draw right arrow
+    ctx.fillStyle = this.canIncrement() ? text_color : disabledTextColor
+    ctx.beginPath()
+    ctx.moveTo(width - arrowInnerX, y + 5)
+    ctx.lineTo(width - arrowTipX, y + height * 0.5)
+    ctx.lineTo(width - arrowInnerX, y + height - 5)
+    ctx.fill()
+  }
+
+  override drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions) {
+    // Store original context attributes
+    const { fillStyle, strokeStyle, textAlign } = ctx
+
+    this.drawWidgetShape(ctx, options)
+    if (options.showText) {
+      if (!this.computedDisabled) this.drawArrowButtons(ctx, options.width)
+
+      this.drawTruncatingText({ ctx, width: options.width })
+    }
+
+    // Restore original context attributes
+    Object.assign(ctx, { textAlign, strokeStyle, fillStyle })
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/BaseWidget.ts b/src/lib/litegraph/src/widgets/BaseWidget.ts
new file mode 100644
index 0000000000..b1b5e0b995
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/BaseWidget.ts
@@ -0,0 +1,284 @@
+import type { Point } from '../interfaces'
+import type { CanvasPointer, LGraphCanvas, LGraphNode, Size } from '../litegraph'
+import type { CanvasMouseEvent, CanvasPointerEvent } from '../types/events'
+import type { IBaseWidget } from '../types/widgets'
+
+import { drawTextInArea } from '../draw'
+import { Rectangle } from '../infrastructure/Rectangle'
+import { LiteGraph } from '../litegraph'
+
+export interface DrawWidgetOptions {
+  /** The width of the node where this widget will be displayed. */
+  width: number
+  /** Synonym for "low quality". */
+  showText?: boolean
+}
+
+export interface DrawTruncatingTextOptions extends DrawWidgetOptions {
+  /** The canvas context to draw the text on. */
+  ctx: CanvasRenderingContext2D
+  /** The amount of padding to add to the left of the text. */
+  leftPadding?: number
+  /** The amount of padding to add to the right of the text. */
+  rightPadding?: number
+}
+
+export interface WidgetEventOptions {
+  e: CanvasMouseEvent
+  node: LGraphNode
+  canvas: LGraphCanvas
+}
+
+export abstract class BaseWidget<TWidget extends IBaseWidget = IBaseWidget> implements IBaseWidget {
+  /** From node edge to widget edge */
+  static margin = 15
+  /** From widget edge to tip of arrow button */
+  static arrowMargin = 6
+  /** Arrow button width */
+  static arrowWidth = 10
+  /** Absolute minimum display width of widget values */
+  static minValueWidth = 42
+  /** Minimum gap between label and value */
+  static labelValueGap = 5
+
+  declare computedHeight?: number
+  declare serialize?: boolean
+  computeLayoutSize?(node: LGraphNode): {
+    minHeight: number
+    maxHeight?: number
+    minWidth: number
+    maxWidth?: number
+  }
+
+  #node: LGraphNode
+  /** The node that this widget belongs to. */
+  get node() {
+    return this.#node
+  }
+
+  linkedWidgets?: IBaseWidget[]
+  name: string
+  options: TWidget["options"]
+  label?: string
+  type: TWidget["type"]
+  y: number = 0
+  last_y?: number
+  width?: number
+  disabled?: boolean
+  computedDisabled?: boolean
+  hidden?: boolean
+  advanced?: boolean
+  tooltip?: string
+  element?: HTMLElement
+  callback?(
+    value: any,
+    canvas?: LGraphCanvas,
+    node?: LGraphNode,
+    pos?: Point,
+    e?: CanvasMouseEvent,
+  ): void
+  mouse?(event: CanvasPointerEvent, pointerOffset: Point, node: LGraphNode): boolean
+  computeSize?(width?: number): Size
+  onPointerDown?(pointer: CanvasPointer, node: LGraphNode, canvas: LGraphCanvas): boolean
+
+  #value?: TWidget["value"]
+  get value(): TWidget["value"] {
+    return this.#value
+  }
+
+  set value(value: TWidget["value"]) {
+    this.#value = value
+  }
+
+  constructor(widget: TWidget & { node: LGraphNode })
+  constructor(widget: TWidget, node: LGraphNode)
+  constructor(widget: TWidget & { node: LGraphNode }, node?: LGraphNode) {
+    // Private fields
+    this.#node = node ?? widget.node
+
+    // The set and get functions for DOM widget values are hacked on to the options object;
+    // attempting to set value before options will throw.
+    // https://github.com/Comfy-Org/ComfyUI_frontend/blob/df86da3d672628a452baed3df3347a52c0c8d378/src/scripts/domWidget.ts#L125
+    this.name = widget.name
+    this.options = widget.options
+    this.type = widget.type
+
+    // `node` has no setter - Object.assign will throw.
+    // TODO: Resolve this workaround. Ref: https://github.com/Comfy-Org/litegraph.js/issues/1022
+    // @ts-expect-error Prevent naming conflicts with custom nodes.
+    const { node: _, outline_color, background_color, height, text_color, secondary_text_color, disabledTextColor, displayName, displayValue, labelBaseline, ...safeValues } = widget
+
+    Object.assign(this, safeValues)
+  }
+
+  get outline_color() {
+    return this.advanced ? LiteGraph.WIDGET_ADVANCED_OUTLINE_COLOR : LiteGraph.WIDGET_OUTLINE_COLOR
+  }
+
+  get background_color() {
+    return LiteGraph.WIDGET_BGCOLOR
+  }
+
+  get height() {
+    return LiteGraph.NODE_WIDGET_HEIGHT
+  }
+
+  get text_color() {
+    return LiteGraph.WIDGET_TEXT_COLOR
+  }
+
+  get secondary_text_color() {
+    return LiteGraph.WIDGET_SECONDARY_TEXT_COLOR
+  }
+
+  get disabledTextColor() {
+    return LiteGraph.WIDGET_DISABLED_TEXT_COLOR
+  }
+
+  get displayName() {
+    return this.label || this.name
+  }
+
+  // TODO: Resolve this workaround. Ref: https://github.com/Comfy-Org/litegraph.js/issues/1022
+  get _displayValue(): string {
+    return String(this.value)
+  }
+
+  get labelBaseline() {
+    return this.y + this.height * 0.7
+  }
+
+  /**
+   * Draws the widget
+   * @param ctx The canvas context
+   * @param options The options for drawing the widget
+   * @remarks Not naming this `draw` as `draw` conflicts with the `draw` method in
+   * custom widgets.
+   */
+  abstract drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void
+
+  /**
+   * Draws the standard widget shape - elongated capsule. The path of the widget shape is not
+   * cleared, and may be used for further drawing.
+   * @param ctx The canvas context
+   * @param options The options for drawing the widget
+   * @remarks Leaves {@link ctx} dirty.
+   */
+  protected drawWidgetShape(ctx: CanvasRenderingContext2D, { width, showText }: DrawWidgetOptions): void {
+    const { height, y } = this
+    const { margin } = BaseWidget
+
+    ctx.textAlign = "left"
+    ctx.strokeStyle = this.outline_color
+    ctx.fillStyle = this.background_color
+    ctx.beginPath()
+
+    if (showText) {
+      ctx.roundRect(margin, y, width - margin * 2, height, [height * 0.5])
+    } else {
+      ctx.rect(margin, y, width - margin * 2, height)
+    }
+    ctx.fill()
+    if (showText && !this.computedDisabled) ctx.stroke()
+  }
+
+  /**
+   * A shared routine for drawing a label and value as text, truncated
+   * if they exceed the available width.
+   */
+  protected drawTruncatingText({
+    ctx,
+    width,
+    leftPadding = 5,
+    rightPadding = 20,
+  }: DrawTruncatingTextOptions): void {
+    const { height, y } = this
+    const { margin } = BaseWidget
+
+    // Measure label and value
+    const { displayName, _displayValue } = this
+    const labelWidth = ctx.measureText(displayName).width
+    const valueWidth = ctx.measureText(_displayValue).width
+
+    const gap = BaseWidget.labelValueGap
+    const x = margin * 2 + leftPadding
+
+    const totalWidth = width - x - 2 * margin - rightPadding
+    const requiredWidth = labelWidth + gap + valueWidth
+
+    const area = new Rectangle(x, y, totalWidth, height * 0.7)
+
+    ctx.fillStyle = this.secondary_text_color
+
+    if (requiredWidth <= totalWidth) {
+      // Draw label & value normally
+      drawTextInArea({ ctx, text: displayName, area, align: "left" })
+    } else if (LiteGraph.truncateWidgetTextEvenly) {
+      // Label + value will not fit - scale evenly to fit
+      const scale = (totalWidth - gap) / (requiredWidth - gap)
+      area.width = labelWidth * scale
+
+      drawTextInArea({ ctx, text: displayName, area, align: "left" })
+
+      // Move the area to the right to render the value
+      area.right = x + totalWidth
+      area.setWidthRightAnchored(valueWidth * scale)
+    } else if (LiteGraph.truncateWidgetValuesFirst) {
+      // Label + value will not fit - use legacy scaling of value first
+      const cappedLabelWidth = Math.min(labelWidth, totalWidth)
+
+      area.width = cappedLabelWidth
+      drawTextInArea({ ctx, text: displayName, area, align: "left" })
+
+      area.right = x + totalWidth
+      area.setWidthRightAnchored(Math.max(totalWidth - gap - cappedLabelWidth, 0))
+    } else {
+      // Label + value will not fit - scale label first
+      const cappedValueWidth = Math.min(valueWidth, totalWidth)
+
+      area.width = Math.max(totalWidth - gap - cappedValueWidth, 0)
+      drawTextInArea({ ctx, text: displayName, area, align: "left" })
+
+      area.right = x + totalWidth
+      area.setWidthRightAnchored(cappedValueWidth)
+    }
+    ctx.fillStyle = this.text_color
+    drawTextInArea({ ctx, text: _displayValue, area, align: "right" })
+  }
+
+  /**
+   * Handles the click event for the widget
+   * @param options The options for handling the click event
+   */
+  abstract onClick(options: WidgetEventOptions): void
+
+  /**
+   * Handles the drag event for the widget
+   * @param options The options for handling the drag event
+   */
+  onDrag?(options: WidgetEventOptions): void
+
+  /**
+   * Sets the value of the widget
+   * @param value The value to set
+   * @param options The options for setting the value
+   */
+  setValue(value: TWidget["value"], { e, node, canvas }: WidgetEventOptions): void {
+    const oldValue = this.value
+    if (value === this.value) return
+
+    const v = this.type === "number" ? Number(value) : value
+    this.value = v
+    if (
+      this.options?.property &&
+      node.properties[this.options.property] !== undefined
+    ) {
+      node.setProperty(this.options.property, v)
+    }
+    const pos = canvas.graph_mouse
+    this.callback?.(this.value, canvas, node, pos, e)
+
+    node.onWidgetChanged?.(this.name ?? "", v, oldValue, this)
+    if (node.graph) node.graph._version++
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/BooleanWidget.ts b/src/lib/litegraph/src/widgets/BooleanWidget.ts
new file mode 100644
index 0000000000..9a0f0481d6
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/BooleanWidget.ts
@@ -0,0 +1,52 @@
+import type { IBooleanWidget } from '../types/widgets'
+
+import { BaseWidget, type DrawWidgetOptions, type WidgetEventOptions } from "./BaseWidget"
+
+export class BooleanWidget extends BaseWidget<IBooleanWidget> implements IBooleanWidget {
+  override type = "toggle" as const
+
+  override drawWidget(ctx: CanvasRenderingContext2D, {
+    width,
+    showText = true,
+  }: DrawWidgetOptions) {
+    const { height, y } = this
+    const { margin } = BaseWidget
+
+    this.drawWidgetShape(ctx, { width, showText })
+
+    ctx.fillStyle = this.value ? "#89A" : "#333"
+    ctx.beginPath()
+    ctx.arc(
+      width - margin * 2,
+      y + height * 0.5,
+      height * 0.36,
+      0,
+      Math.PI * 2,
+    )
+    ctx.fill()
+
+    if (showText) {
+      this.drawLabel(ctx, margin * 2)
+      this.drawValue(ctx, width - 40)
+    }
+  }
+
+  drawLabel(ctx: CanvasRenderingContext2D, x: number): void {
+    // Draw label
+    ctx.fillStyle = this.secondary_text_color
+    const { displayName } = this
+    if (displayName) ctx.fillText(displayName, x, this.labelBaseline)
+  }
+
+  drawValue(ctx: CanvasRenderingContext2D, x: number): void {
+    // Draw value
+    ctx.fillStyle = this.value ? this.text_color : this.secondary_text_color
+    ctx.textAlign = "right"
+    const value = this.value ? this.options.on || "true" : this.options.off || "false"
+    ctx.fillText(value, x, this.labelBaseline)
+  }
+
+  override onClick(options: WidgetEventOptions) {
+    this.setValue(!this.value, options)
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/ButtonWidget.ts b/src/lib/litegraph/src/widgets/ButtonWidget.ts
new file mode 100644
index 0000000000..cdbe0e4457
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/ButtonWidget.ts
@@ -0,0 +1,67 @@
+import type { LGraphNode } from '../LGraphNode'
+import type { IButtonWidget } from '../types/widgets'
+
+import { BaseWidget, type DrawWidgetOptions, type WidgetEventOptions } from "./BaseWidget"
+
+export class ButtonWidget extends BaseWidget<IButtonWidget> implements IButtonWidget {
+  override type = "button" as const
+  clicked: boolean
+
+  constructor(widget: IButtonWidget, node: LGraphNode) {
+    super(widget, node)
+    this.clicked ??= false
+  }
+
+  /**
+   * Draws the widget
+   * @param ctx The canvas context
+   * @param options The options for drawing the widget
+   */
+  override drawWidget(ctx: CanvasRenderingContext2D, {
+    width,
+    showText = true,
+  }: DrawWidgetOptions) {
+    // Store original context attributes
+    const { fillStyle, strokeStyle, textAlign } = ctx
+
+    const { height, y } = this
+    const { margin } = BaseWidget
+
+    // Draw button background
+    ctx.fillStyle = this.background_color
+    if (this.clicked) {
+      ctx.fillStyle = "#AAA"
+      this.clicked = false
+    }
+    ctx.fillRect(margin, y, width - margin * 2, height)
+
+    // Draw button outline if not disabled
+    if (showText && !this.computedDisabled) {
+      ctx.strokeStyle = this.outline_color
+      ctx.strokeRect(margin, y, width - margin * 2, height)
+    }
+
+    // Draw button text
+    if (showText) this.drawLabel(ctx, width * 0.5)
+
+    // Restore original context attributes
+    Object.assign(ctx, { textAlign, strokeStyle, fillStyle })
+  }
+
+  drawLabel(ctx: CanvasRenderingContext2D, x: number): void {
+    ctx.textAlign = "center"
+    ctx.fillStyle = this.text_color
+    ctx.fillText(this.displayName, x, this.y + this.height * 0.7)
+  }
+
+  override onClick({ e, node, canvas }: WidgetEventOptions) {
+    const pos = canvas.graph_mouse
+
+    // Set clicked state and mark canvas as dirty
+    this.clicked = true
+    canvas.setDirty(true)
+
+    // Call the callback with widget instance and other context
+    this.callback?.(this, canvas, node, pos, e)
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/ChartWidget.ts b/src/lib/litegraph/src/widgets/ChartWidget.ts
new file mode 100644
index 0000000000..be20cbbb08
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/ChartWidget.ts
@@ -0,0 +1,38 @@
+import type { IChartWidget } from '../types/widgets'
+
+import { BaseWidget, type DrawWidgetOptions, type WidgetEventOptions } from "./BaseWidget"
+
+/**
+ * Widget for displaying charts and data visualizations
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class ChartWidget extends BaseWidget<IChartWidget> implements IChartWidget {
+  override type = "chart" as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = "11px monospace"
+    ctx.textAlign = "center"
+    ctx.textBaseline = "middle"
+
+    const text = "Chart: Vue-only"
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, { fillStyle, strokeStyle, textAlign, textBaseline, font })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/ColorWidget.ts b/src/lib/litegraph/src/widgets/ColorWidget.ts
new file mode 100644
index 0000000000..b7b12e348d
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/ColorWidget.ts
@@ -0,0 +1,38 @@
+import type { IColorWidget } from '../types/widgets'
+
+import { BaseWidget, type DrawWidgetOptions, type WidgetEventOptions } from "./BaseWidget"
+
+/**
+ * Widget for displaying a color picker
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class ColorWidget extends BaseWidget<IColorWidget> implements IColorWidget {
+  override type = "color" as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = "11px monospace"
+    ctx.textAlign = "center"
+    ctx.textBaseline = "middle"
+
+    const text = "Color: Vue-only"
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, { fillStyle, strokeStyle, textAlign, textBaseline, font })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/ComboWidget.ts b/src/lib/litegraph/src/widgets/ComboWidget.ts
new file mode 100644
index 0000000000..b99f215c20
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/ComboWidget.ts
@@ -0,0 +1,140 @@
+import type { WidgetEventOptions } from "./BaseWidget"
+import type { LGraphNode } from '../LGraphNode'
+import type { IComboWidget, IStringComboWidget } from '../types/widgets'
+
+import { clamp, LiteGraph } from '../litegraph'
+import { warnDeprecated } from '../utils/feedback'
+
+import { BaseSteppedWidget } from "./BaseSteppedWidget"
+
+/**
+ * This is used as an (invalid) assertion to resolve issues with legacy duck-typed values.
+ *
+ * Function style in use by:
+ * https://github.com/kijai/ComfyUI-KJNodes/blob/c3dc82108a2a86c17094107ead61d63f8c76200e/web/js/setgetnodes.js#L401-L404
+ */
+type Values = string[] | Record<string, string> | ((widget?: ComboWidget, node?: LGraphNode) => string[])
+
+function toArray(values: Values): string[] {
+  return Array.isArray(values) ? values : Object.keys(values)
+}
+
+export class ComboWidget extends BaseSteppedWidget<IStringComboWidget | IComboWidget> implements IComboWidget {
+  override type = "combo" as const
+
+  override get _displayValue() {
+    const { values: rawValues } = this.options
+    if (rawValues) {
+      const values = typeof rawValues === "function" ? rawValues() : rawValues
+
+      if (values && !Array.isArray(values)) {
+        return values[this.value]
+      }
+    }
+    return typeof this.value === "number" ? String(this.value) : this.value
+  }
+
+  #getValues(node: LGraphNode): Values {
+    const { values } = this.options
+    if (values == null) throw new Error("[ComboWidget]: values is required")
+
+    return typeof values === "function"
+      ? values(this, node)
+      : values
+  }
+
+  /**
+   * Checks if the value is {@link Array.at at} the given index in the combo list.
+   * @param increment `true` if checking the use of the increment button, `false` for decrement
+   * @returns `true` if the value is at the given index, otherwise `false`.
+   */
+  #canUseButton(increment: boolean): boolean {
+    const { values } = this.options
+    // If using legacy duck-typed method, false is the most permissive return value
+    if (typeof values === "function") return false
+
+    const valuesArray = toArray(values)
+    if (!(valuesArray.length > 1)) return false
+
+    // Edge case where the value is both the first and last item in the list
+    const firstValue = valuesArray.at(0)
+    const lastValue = valuesArray.at(-1)
+    if (firstValue === lastValue) return true
+
+    return this.value !== (increment ? lastValue : firstValue)
+  }
+
+  /**
+   * Returns `true` if the current value is not the last value in the list.
+   * Handles edge case where the value is both the first and last item in the list.
+   */
+  override canIncrement(): boolean {
+    return this.#canUseButton(true)
+  }
+
+  override canDecrement(): boolean {
+    return this.#canUseButton(false)
+  }
+
+  override incrementValue(options: WidgetEventOptions): void {
+    this.#tryChangeValue(1, options)
+  }
+
+  override decrementValue(options: WidgetEventOptions): void {
+    this.#tryChangeValue(-1, options)
+  }
+
+  #tryChangeValue(delta: number, options: WidgetEventOptions): void {
+    const values = this.#getValues(options.node)
+    const indexedValues = toArray(values)
+
+    // avoids double click event
+    options.canvas.last_mouseclick = 0
+
+    const foundIndex = typeof values === "object"
+      ? indexedValues.indexOf(String(this.value)) + delta
+      // @ts-expect-error handle non-string values
+      : indexedValues.indexOf(this.value) + delta
+
+    const index = clamp(foundIndex, 0, indexedValues.length - 1)
+
+    const value = Array.isArray(values)
+      ? values[index]
+      : index
+    this.setValue(value, options)
+  }
+
+  override onClick({ e, node, canvas }: WidgetEventOptions) {
+    const x = e.canvasX - node.pos[0]
+    const width = this.width || node.size[0]
+
+    // Deprecated functionality (warning as of v0.14.5)
+    if (typeof this.options.values === "function") {
+      warnDeprecated("Using a function for values is deprecated. Use an array of unique values instead.")
+    }
+
+    // Determine if clicked on left/right arrows
+    if (x < 40) return this.decrementValue({ e, node, canvas })
+    if (x > width - 40) return this.incrementValue({ e, node, canvas })
+
+    // Otherwise, show dropdown menu
+    const values = this.#getValues(node)
+    const values_list = toArray(values)
+
+    // Handle center click - show dropdown menu
+    const text_values = values != values_list ? Object.values(values) : values
+    new LiteGraph.ContextMenu(text_values, {
+      scale: Math.max(1, canvas.ds.scale),
+      event: e,
+      className: "dark",
+      callback: (value: string) => {
+        this.setValue(
+          values != values_list
+            ? text_values.indexOf(value)
+            : value,
+          { e, node, canvas },
+        )
+      },
+    })
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/FileUploadWidget.ts b/src/lib/litegraph/src/widgets/FileUploadWidget.ts
new file mode 100644
index 0000000000..0a97d2baa1
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/FileUploadWidget.ts
@@ -0,0 +1,38 @@
+import type { IFileUploadWidget } from '../types/widgets'
+
+import { BaseWidget, type DrawWidgetOptions, type WidgetEventOptions } from "./BaseWidget"
+
+/**
+ * Widget for handling file uploads
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class FileUploadWidget extends BaseWidget<IFileUploadWidget> implements IFileUploadWidget {
+  override type = "fileupload" as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = "11px monospace"
+    ctx.textAlign = "center"
+    ctx.textBaseline = "middle"
+
+    const text = "Fileupload: Vue-only"
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, { fillStyle, strokeStyle, textAlign, textBaseline, font })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/GalleriaWidget.ts b/src/lib/litegraph/src/widgets/GalleriaWidget.ts
new file mode 100644
index 0000000000..fbcd510e86
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/GalleriaWidget.ts
@@ -0,0 +1,38 @@
+import type { IGalleriaWidget } from '../types/widgets'
+
+import { BaseWidget, type DrawWidgetOptions, type WidgetEventOptions } from "./BaseWidget"
+
+/**
+ * Widget for displaying image galleries
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class GalleriaWidget extends BaseWidget<IGalleriaWidget> implements IGalleriaWidget {
+  override type = "galleria" as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = "11px monospace"
+    ctx.textAlign = "center"
+    ctx.textBaseline = "middle"
+
+    const text = "Galleria: Vue-only"
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, { fillStyle, strokeStyle, textAlign, textBaseline, font })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/ImageCompareWidget.ts b/src/lib/litegraph/src/widgets/ImageCompareWidget.ts
new file mode 100644
index 0000000000..e3b2298d04
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/ImageCompareWidget.ts
@@ -0,0 +1,38 @@
+import type { IImageCompareWidget } from '../types/widgets'
+
+import { BaseWidget, type DrawWidgetOptions, type WidgetEventOptions } from "./BaseWidget"
+
+/**
+ * Widget for comparing two images side by side
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class ImageCompareWidget extends BaseWidget<IImageCompareWidget> implements IImageCompareWidget {
+  override type = "imagecompare" as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = "11px monospace"
+    ctx.textAlign = "center"
+    ctx.textBaseline = "middle"
+
+    const text = "ImageCompare: Vue-only"
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, { fillStyle, strokeStyle, textAlign, textBaseline, font })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/ImageWidget.ts b/src/lib/litegraph/src/widgets/ImageWidget.ts
new file mode 100644
index 0000000000..6015fd4011
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/ImageWidget.ts
@@ -0,0 +1,38 @@
+import type { IImageWidget } from '../types/widgets'
+
+import { BaseWidget, type DrawWidgetOptions, type WidgetEventOptions } from "./BaseWidget"
+
+/**
+ * Widget for displaying images
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class ImageWidget extends BaseWidget<IImageWidget> implements IImageWidget {
+  override type = "image" as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = "11px monospace"
+    ctx.textAlign = "center"
+    ctx.textBaseline = "middle"
+
+    const text = "Image: Vue-only"
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, { fillStyle, strokeStyle, textAlign, textBaseline, font })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/KnobWidget.ts b/src/lib/litegraph/src/widgets/KnobWidget.ts
new file mode 100644
index 0000000000..94738dca4d
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/KnobWidget.ts
@@ -0,0 +1,233 @@
+import type { IKnobWidget } from '../types/widgets'
+
+import { clamp } from '../litegraph'
+import { getWidgetStep } from '../utils/widget'
+
+import { BaseWidget, type DrawWidgetOptions, type WidgetEventOptions } from "./BaseWidget"
+
+export class KnobWidget extends BaseWidget<IKnobWidget> implements IKnobWidget {
+  override type = "knob" as const
+
+  /**
+   * Compute the layout size of the widget.
+   * @returns The layout size of the widget.
+   */
+  override computeLayoutSize(): {
+    minHeight: number
+    maxHeight?: number
+    minWidth: number
+    maxWidth?: number
+  } {
+    return {
+      minHeight: 60,
+      minWidth: 20,
+      maxHeight: 1_000_000,
+      maxWidth: 1_000_000,
+    }
+  }
+
+  override get height(): number {
+    return this.computedHeight || super.height
+  }
+
+  drawWidget(
+    ctx: CanvasRenderingContext2D,
+    {
+      width,
+      showText = true,
+    }: DrawWidgetOptions,
+  ): void {
+    // Store original context attributes
+    const { fillStyle, strokeStyle, textAlign } = ctx
+
+    const { y } = this
+    const { margin } = BaseWidget
+
+    const { gradient_stops = "rgb(14, 182, 201); rgb(0, 216, 72)" } = this.options
+    const effective_height = this.computedHeight || this.height
+    // Draw background
+    const size_modifier =
+      Math.min(this.computedHeight || this.height, this.width || 20) / 20 // TODO: replace magic numbers
+    const arc_center = { x: width / 2, y: effective_height / 2 + y }
+    ctx.lineWidth =
+      (Math.min(width, effective_height) - margin * size_modifier) / 6
+    const arc_size =
+      (Math.min(width, effective_height) -
+        margin * size_modifier -
+        ctx.lineWidth) / 2
+    {
+      const gradient = ctx.createRadialGradient(
+        arc_center.x,
+        arc_center.y,
+        arc_size + ctx.lineWidth,
+        0,
+        0,
+        arc_size + ctx.lineWidth,
+      )
+      gradient.addColorStop(0, "rgb(29, 29, 29)")
+      gradient.addColorStop(1, "rgb(116, 116, 116)")
+      ctx.fillStyle = gradient
+    }
+    ctx.beginPath()
+
+    {
+      ctx.arc(
+        arc_center.x,
+        arc_center.y,
+        arc_size + ctx.lineWidth / 2,
+        0,
+        Math.PI * 2,
+        false,
+      )
+      ctx.fill()
+      ctx.closePath()
+    }
+
+    // Draw knob's background
+    const arc = {
+      start_angle: Math.PI * 0.6,
+      end_angle: Math.PI * 2.4,
+    }
+    ctx.beginPath()
+    {
+      const gradient = ctx.createRadialGradient(
+        arc_center.x,
+        arc_center.y,
+        arc_size + ctx.lineWidth,
+        0,
+        0,
+        arc_size + ctx.lineWidth,
+      )
+      gradient.addColorStop(0, "rgb(99, 99, 99)")
+      gradient.addColorStop(1, "rgb(36, 36, 36)")
+      ctx.strokeStyle = gradient
+    }
+    ctx.arc(
+      arc_center.x,
+      arc_center.y,
+      arc_size,
+      arc.start_angle,
+      arc.end_angle,
+      false,
+    )
+    ctx.stroke()
+    ctx.closePath()
+
+    const range = this.options.max - this.options.min
+    let nvalue = (this.value - this.options.min) / range
+    nvalue = clamp(nvalue, 0, 1)
+
+    // Draw value
+    ctx.beginPath()
+    const gradient = ctx.createConicGradient(
+      arc.start_angle,
+      arc_center.x,
+      arc_center.y,
+    )
+    const gs = gradient_stops.split(";")
+    for (const [index, stop] of gs.entries()) {
+      gradient.addColorStop(index, stop.trim())
+    }
+
+    ctx.strokeStyle = gradient
+    const value_end_angle =
+      (arc.end_angle - arc.start_angle) * nvalue + arc.start_angle
+    ctx.arc(
+      arc_center.x,
+      arc_center.y,
+      arc_size,
+      arc.start_angle,
+      value_end_angle,
+      false,
+    )
+    ctx.stroke()
+    ctx.closePath()
+
+    // Draw outline if not disabled
+    if (showText && !this.computedDisabled) {
+      ctx.strokeStyle = this.outline_color
+      // Draw value
+      ctx.beginPath()
+      ctx.strokeStyle = this.outline_color
+      ctx.arc(
+        arc_center.x,
+        arc_center.y,
+        arc_size + ctx.lineWidth / 2,
+        0,
+        Math.PI * 2,
+        false,
+      )
+      ctx.lineWidth = 1
+      ctx.stroke()
+      ctx.closePath()
+    }
+
+    // Draw marker if present
+    // TODO: TBD later when options work
+
+    // Draw text
+    if (showText) {
+      ctx.textAlign = "center"
+      ctx.fillStyle = this.text_color
+      const fixedValue = Number(this.value).toFixed(this.options.precision ?? 3)
+      ctx.fillText(
+        `${this.label || this.name}\n${fixedValue}`,
+        width * 0.5,
+        y + effective_height * 0.5,
+      )
+    }
+
+    // Restore original context attributes
+    Object.assign(ctx, { textAlign, strokeStyle, fillStyle })
+  }
+
+  onClick(): void {
+    this.current_drag_offset = 0
+  }
+
+  current_drag_offset = 0
+  override onDrag(options: WidgetEventOptions): void {
+    if (this.options.read_only) return
+    const { e } = options
+    const step = getWidgetStep(this.options)
+    // Shift to move by 10% increments
+    const range = (this.options.max - this.options.min)
+    const range_10_percent = range / 10
+    const range_1_percent = range / 100
+    const step_for = {
+      delta_x: step,
+      shift: range_10_percent > step ? range_10_percent - (range_10_percent % step) : step,
+      delta_y: range_1_percent > step ? range_1_percent - (range_1_percent % step) : step, // 1% increments
+    }
+
+    const use_y = Math.abs(e.movementY) > Math.abs(e.movementX)
+    const delta = use_y ? -e.movementY : e.movementX // Y is inverted so that UP increases the value
+    const drag_threshold = 15
+    // Calculate new value based on drag movement
+    this.current_drag_offset += delta
+    let adjustment = 0
+    if (this.current_drag_offset > drag_threshold) {
+      adjustment += 1
+      this.current_drag_offset -= drag_threshold
+    } else if (this.current_drag_offset < -drag_threshold) {
+      adjustment -= 1
+      this.current_drag_offset += drag_threshold
+    }
+
+    const step_with_shift_modifier = e.shiftKey
+      ? step_for.shift
+      : (use_y
+        ? step_for.delta_y
+        : step)
+
+    const deltaValue = adjustment * step_with_shift_modifier
+    const newValue = clamp(
+      this.value + deltaValue,
+      this.options.min,
+      this.options.max,
+    )
+    if (newValue !== this.value) {
+      this.setValue(newValue, options)
+    }
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/LegacyWidget.ts b/src/lib/litegraph/src/widgets/LegacyWidget.ts
new file mode 100644
index 0000000000..69a8e620e3
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/LegacyWidget.ts
@@ -0,0 +1,32 @@
+import type { LGraphNode } from '../LGraphNode'
+import type { IBaseWidget } from '../types/widgets'
+
+import { LiteGraph } from '../litegraph'
+
+import { BaseWidget, type DrawWidgetOptions } from "./BaseWidget"
+
+/**
+ * Wraps a legacy POJO custom widget, so that all widgets may be called via the same internal interface.
+ *
+ * Support will eventually be removed.
+ * @remarks Expect this class to undergo breaking changes without warning.
+ */
+export class LegacyWidget<TWidget extends IBaseWidget = IBaseWidget> extends BaseWidget<TWidget> implements IBaseWidget {
+  draw?(
+    ctx: CanvasRenderingContext2D,
+    node: LGraphNode,
+    widget_width: number,
+    y: number,
+    H: number,
+    lowQuality?: boolean,
+  ): void
+
+  override drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions) {
+    const H = LiteGraph.NODE_WIDGET_HEIGHT
+    this.draw?.(ctx, this.node, options.width, this.y, H, !!options.showText)
+  }
+
+  override onClick() {
+    console.warn("Custom widget wrapper onClick was just called. Handling for third party widgets is done via LGraphCanvas - the mouse callback.")
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/MarkdownWidget.ts b/src/lib/litegraph/src/widgets/MarkdownWidget.ts
new file mode 100644
index 0000000000..fb634e4976
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/MarkdownWidget.ts
@@ -0,0 +1,38 @@
+import type { IMarkdownWidget } from '../types/widgets'
+
+import { BaseWidget, type DrawWidgetOptions, type WidgetEventOptions } from "./BaseWidget"
+
+/**
+ * Widget for displaying markdown formatted text
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class MarkdownWidget extends BaseWidget<IMarkdownWidget> implements IMarkdownWidget {
+  override type = "markdown" as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = "11px monospace"
+    ctx.textAlign = "center"
+    ctx.textBaseline = "middle"
+
+    const text = "Markdown: Vue-only"
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, { fillStyle, strokeStyle, textAlign, textBaseline, font })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/MultiSelectWidget.ts b/src/lib/litegraph/src/widgets/MultiSelectWidget.ts
new file mode 100644
index 0000000000..4a56572193
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/MultiSelectWidget.ts
@@ -0,0 +1,38 @@
+import type { IMultiSelectWidget } from '../types/widgets'
+
+import { BaseWidget, type DrawWidgetOptions, type WidgetEventOptions } from "./BaseWidget"
+
+/**
+ * Widget for selecting multiple options
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class MultiSelectWidget extends BaseWidget<IMultiSelectWidget> implements IMultiSelectWidget {
+  override type = "multiselect" as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = "11px monospace"
+    ctx.textAlign = "center"
+    ctx.textBaseline = "middle"
+
+    const text = "MultiSelect: Vue-only"
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, { fillStyle, strokeStyle, textAlign, textBaseline, font })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/NumberWidget.ts b/src/lib/litegraph/src/widgets/NumberWidget.ts
new file mode 100644
index 0000000000..c1f3cdbc63
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/NumberWidget.ts
@@ -0,0 +1,97 @@
+import type { WidgetEventOptions } from "./BaseWidget"
+import type { INumericWidget } from '../types/widgets'
+
+import { getWidgetStep } from '../utils/widget'
+
+import { BaseSteppedWidget } from "./BaseSteppedWidget"
+
+export class NumberWidget extends BaseSteppedWidget<INumericWidget> implements INumericWidget {
+  override type = "number" as const
+
+  override get _displayValue() {
+    return Number(this.value).toFixed(
+      this.options.precision !== undefined
+        ? this.options.precision
+        : 3,
+    )
+  }
+
+  override canIncrement(): boolean {
+    const { max } = this.options
+    return max == null || this.value < max
+  }
+
+  override canDecrement(): boolean {
+    const { min } = this.options
+    return min == null || this.value > min
+  }
+
+  override incrementValue(options: WidgetEventOptions): void {
+    this.setValue(this.value + getWidgetStep(this.options), options)
+  }
+
+  override decrementValue(options: WidgetEventOptions): void {
+    this.setValue(this.value - getWidgetStep(this.options), options)
+  }
+
+  override setValue(value: number, options: WidgetEventOptions) {
+    let newValue = value
+    if (this.options.min != null && newValue < this.options.min) {
+      newValue = this.options.min
+    }
+    if (this.options.max != null && newValue > this.options.max) {
+      newValue = this.options.max
+    }
+    super.setValue(newValue, options)
+  }
+
+  override onClick({ e, node, canvas }: WidgetEventOptions) {
+    const x = e.canvasX - node.pos[0]
+    const width = this.width || node.size[0]
+
+    // Determine if clicked on left/right arrows
+    const delta = x < 40
+      ? -1
+      : (x > width - 40
+        ? 1
+        : 0)
+
+    if (delta) {
+      // Handle left/right arrow clicks
+      this.setValue(this.value + delta * getWidgetStep(this.options), { e, node, canvas })
+      return
+    }
+
+    // Handle center click - show prompt
+    canvas.prompt("Value", this.value, (v: string) => {
+      // Check if v is a valid equation or a number
+      if (/^[\d\s()*+/-]+|\d+\.\d+$/.test(v)) {
+        // Solve the equation if possible
+        try {
+          v = eval(v)
+        } catch {}
+      }
+      const newValue = Number(v)
+      if (!isNaN(newValue)) {
+        this.setValue(newValue, { e, node, canvas })
+      }
+    }, e)
+  }
+
+  /**
+   * Handles drag events for the number widget
+   * @param options The options for handling the drag event
+   */
+  override onDrag({ e, node, canvas }: WidgetEventOptions) {
+    const width = this.width || node.width
+    const x = e.canvasX - node.pos[0]
+    const delta = x < 40
+      ? -1
+      : (x > width - 40
+        ? 1
+        : 0)
+
+    if (delta && (x > -3 && x < width + 3)) return
+    this.setValue(this.value + (e.deltaX ?? 0) * getWidgetStep(this.options), { e, node, canvas })
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/SelectButtonWidget.ts b/src/lib/litegraph/src/widgets/SelectButtonWidget.ts
new file mode 100644
index 0000000000..1960d41a06
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/SelectButtonWidget.ts
@@ -0,0 +1,38 @@
+import type { ISelectButtonWidget } from '../types/widgets'
+
+import { BaseWidget, type DrawWidgetOptions, type WidgetEventOptions } from "./BaseWidget"
+
+/**
+ * Widget for selecting from a group of buttons
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class SelectButtonWidget extends BaseWidget<ISelectButtonWidget> implements ISelectButtonWidget {
+  override type = "selectbutton" as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = "11px monospace"
+    ctx.textAlign = "center"
+    ctx.textBaseline = "middle"
+
+    const text = "SelectButton: Vue-only"
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, { fillStyle, strokeStyle, textAlign, textBaseline, font })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/SliderWidget.ts b/src/lib/litegraph/src/widgets/SliderWidget.ts
new file mode 100644
index 0000000000..d8a8e6e65a
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/SliderWidget.ts
@@ -0,0 +1,112 @@
+import type { ISliderWidget } from '../types/widgets'
+
+import { clamp } from '../litegraph'
+
+import { BaseWidget, type DrawWidgetOptions, type WidgetEventOptions } from "./BaseWidget"
+
+export class SliderWidget extends BaseWidget<ISliderWidget> implements ISliderWidget {
+  override type = "slider" as const
+
+  marker?: number
+
+  /**
+   * Draws the widget
+   * @param ctx The canvas context
+   * @param options The options for drawing the widget
+   */
+  override drawWidget(ctx: CanvasRenderingContext2D, {
+    width,
+    showText = true,
+  }: DrawWidgetOptions) {
+    // Store original context attributes
+    const { fillStyle, strokeStyle, textAlign } = ctx
+
+    const { height, y } = this
+    const { margin } = BaseWidget
+
+    // Draw background
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(margin, y, width - margin * 2, height)
+
+    // Calculate normalized value
+    const range = this.options.max - this.options.min
+    let nvalue = (this.value - this.options.min) / range
+    nvalue = clamp(nvalue, 0, 1)
+
+    // Draw slider bar
+    ctx.fillStyle = this.options.slider_color ?? "#678"
+    ctx.fillRect(margin, y, nvalue * (width - margin * 2), height)
+
+    // Draw outline if not disabled
+    if (showText && !this.computedDisabled) {
+      ctx.strokeStyle = this.outline_color
+      ctx.strokeRect(margin, y, width - margin * 2, height)
+    }
+
+    // Draw marker if present
+    if (this.marker != null) {
+      let marker_nvalue = (this.marker - this.options.min) / range
+      marker_nvalue = clamp(marker_nvalue, 0, 1)
+      ctx.fillStyle = this.options.marker_color ?? "#AA9"
+      ctx.fillRect(
+        margin + marker_nvalue * (width - margin * 2),
+        y,
+        2,
+        height,
+      )
+    }
+
+    // Draw text
+    if (showText) {
+      ctx.textAlign = "center"
+      ctx.fillStyle = this.text_color
+      const fixedValue = Number(this.value).toFixed(this.options.precision ?? 3)
+      ctx.fillText(
+        `${this.label || this.name}  ${fixedValue}`,
+        width * 0.5,
+        y + height * 0.7,
+      )
+    }
+
+    // Restore original context attributes
+    Object.assign(ctx, { textAlign, strokeStyle, fillStyle })
+  }
+
+  /**
+   * Handles click events for the slider widget
+   */
+  override onClick(options: WidgetEventOptions) {
+    if (this.options.read_only) return
+
+    const { e, node } = options
+    const width = this.width || node.size[0]
+    const x = e.canvasX - node.pos[0]
+
+    // Calculate new value based on click position
+    const slideFactor = clamp((x - 15) / (width - 30), 0, 1)
+    const newValue = this.options.min + (this.options.max - this.options.min) * slideFactor
+
+    if (newValue !== this.value) {
+      this.setValue(newValue, options)
+    }
+  }
+
+  /**
+   * Handles drag events for the slider widget
+   */
+  override onDrag(options: WidgetEventOptions) {
+    if (this.options.read_only) return false
+
+    const { e, node } = options
+    const width = this.width || node.size[0]
+    const x = e.canvasX - node.pos[0]
+
+    // Calculate new value based on drag position
+    const slideFactor = clamp((x - 15) / (width - 30), 0, 1)
+    const newValue = this.options.min + (this.options.max - this.options.min) * slideFactor
+
+    if (newValue !== this.value) {
+      this.setValue(newValue, options)
+    }
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/TextWidget.ts b/src/lib/litegraph/src/widgets/TextWidget.ts
new file mode 100644
index 0000000000..8b2b13d575
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/TextWidget.ts
@@ -0,0 +1,49 @@
+import type { LGraphNode } from '../LGraphNode'
+import type { IStringWidget } from '../types/widgets'
+
+import { BaseWidget, type DrawWidgetOptions, type WidgetEventOptions } from "./BaseWidget"
+
+export class TextWidget extends BaseWidget<IStringWidget> implements IStringWidget {
+  constructor(widget: IStringWidget, node: LGraphNode) {
+    super(widget, node)
+    this.type ??= "string"
+    this.value = widget.value?.toString() ?? ""
+  }
+
+  /**
+   * Draws the widget
+   * @param ctx The canvas context
+   * @param options The options for drawing the widget
+   */
+  override drawWidget(ctx: CanvasRenderingContext2D, {
+    width,
+    showText = true,
+  }: DrawWidgetOptions) {
+    // Store original context attributes
+    const { fillStyle, strokeStyle, textAlign } = ctx
+
+    this.drawWidgetShape(ctx, { width, showText })
+
+    if (showText) {
+      this.drawTruncatingText({ ctx, width, leftPadding: 0, rightPadding: 0 })
+    }
+
+    // Restore original context attributes
+    Object.assign(ctx, { textAlign, strokeStyle, fillStyle })
+  }
+
+  override onClick({ e, node, canvas }: WidgetEventOptions) {
+    // Show prompt dialog for text input
+    canvas.prompt(
+      "Value",
+      this.value,
+      (v: string) => {
+        if (v !== null) {
+          this.setValue(v, { e, node, canvas })
+        }
+      },
+      e,
+      this.options?.multiline ?? false,
+    )
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/TextareaWidget.ts b/src/lib/litegraph/src/widgets/TextareaWidget.ts
new file mode 100644
index 0000000000..359c928d40
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/TextareaWidget.ts
@@ -0,0 +1,38 @@
+import type { ITextareaWidget } from '../types/widgets'
+
+import { BaseWidget, type DrawWidgetOptions, type WidgetEventOptions } from "./BaseWidget"
+
+/**
+ * Widget for multi-line text input
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class TextareaWidget extends BaseWidget<ITextareaWidget> implements ITextareaWidget {
+  override type = "textarea" as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = "11px monospace"
+    ctx.textAlign = "center"
+    ctx.textBaseline = "middle"
+
+    const text = "Textarea: Vue-only"
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, { fillStyle, strokeStyle, textAlign, textBaseline, font })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/TreeSelectWidget.ts b/src/lib/litegraph/src/widgets/TreeSelectWidget.ts
new file mode 100644
index 0000000000..260a8a4756
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/TreeSelectWidget.ts
@@ -0,0 +1,38 @@
+import type { ITreeSelectWidget } from '../types/widgets'
+
+import { BaseWidget, type DrawWidgetOptions, type WidgetEventOptions } from "./BaseWidget"
+
+/**
+ * Widget for hierarchical tree selection
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class TreeSelectWidget extends BaseWidget<ITreeSelectWidget> implements ITreeSelectWidget {
+  override type = "treeselect" as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = "11px monospace"
+    ctx.textAlign = "center"
+    ctx.textBaseline = "middle"
+
+    const text = "TreeSelect: Vue-only"
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, { fillStyle, strokeStyle, textAlign, textBaseline, font })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/widgetMap.ts b/src/lib/litegraph/src/widgets/widgetMap.ts
new file mode 100644
index 0000000000..e0349005b7
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/widgetMap.ts
@@ -0,0 +1,229 @@
+import type { LGraphNode } from '../LGraphNode'
+import type {
+  IBaseWidget,
+  IBooleanWidget,
+  IButtonWidget,
+  IChartWidget,
+  IColorWidget,
+  IComboWidget,
+  ICustomWidget,
+  IFileUploadWidget,
+  IGalleriaWidget,
+  IImageCompareWidget,
+  IImageWidget,
+  IKnobWidget,
+  IMarkdownWidget,
+  IMultiSelectWidget,
+  INumericWidget,
+  ISelectButtonWidget,
+  ISliderWidget,
+  IStringWidget,
+  ITextareaWidget,
+  ITreeSelectWidget,
+  IWidget,
+  TWidgetType,
+} from '../types/widgets'
+
+import { toClass } from '../utils/type'
+
+import { BaseWidget } from "./BaseWidget"
+import { BooleanWidget } from "./BooleanWidget"
+import { ButtonWidget } from "./ButtonWidget"
+import { ChartWidget } from "./ChartWidget"
+import { ColorWidget } from "./ColorWidget"
+import { ComboWidget } from "./ComboWidget"
+import { FileUploadWidget } from "./FileUploadWidget"
+import { GalleriaWidget } from "./GalleriaWidget"
+import { ImageCompareWidget } from "./ImageCompareWidget"
+import { ImageWidget } from "./ImageWidget"
+import { KnobWidget } from "./KnobWidget"
+import { LegacyWidget } from "./LegacyWidget"
+import { MarkdownWidget } from "./MarkdownWidget"
+import { MultiSelectWidget } from "./MultiSelectWidget"
+import { NumberWidget } from "./NumberWidget"
+import { SelectButtonWidget } from "./SelectButtonWidget"
+import { SliderWidget } from "./SliderWidget"
+import { TextareaWidget } from "./TextareaWidget"
+import { TextWidget } from "./TextWidget"
+import { TreeSelectWidget } from "./TreeSelectWidget"
+
+export type WidgetTypeMap = {
+  button: ButtonWidget
+  toggle: BooleanWidget
+  slider: SliderWidget
+  knob: KnobWidget
+  combo: ComboWidget
+  number: NumberWidget
+  string: TextWidget
+  text: TextWidget
+  custom: LegacyWidget
+  fileupload: FileUploadWidget
+  color: ColorWidget
+  markdown: MarkdownWidget
+  image: ImageWidget
+  treeselect: TreeSelectWidget
+  multiselect: MultiSelectWidget
+  chart: ChartWidget
+  galleria: GalleriaWidget
+  imagecompare: ImageCompareWidget
+  selectbutton: SelectButtonWidget
+  textarea: TextareaWidget
+  [key: string]: BaseWidget
+}
+
+/**
+ * Convert a widget POJO to a proper widget instance.
+ * @param widget The POJO to convert.
+ * @param node The node the widget belongs to.
+ * @param wrapLegacyWidgets Whether to wrap legacy widgets in a `LegacyWidget` instance.
+ * @returns A concrete widget instance.
+ */
+export function toConcreteWidget<TWidget extends IWidget | IBaseWidget>(
+  widget: TWidget,
+  node: LGraphNode,
+  wrapLegacyWidgets?: true,
+): WidgetTypeMap[TWidget["type"]]
+export function toConcreteWidget<TWidget extends IWidget | IBaseWidget>(
+  widget: TWidget,
+  node: LGraphNode,
+  wrapLegacyWidgets: false): WidgetTypeMap[TWidget["type"]] | undefined
+export function toConcreteWidget<TWidget extends IWidget | IBaseWidget>(
+  widget: TWidget,
+  node: LGraphNode,
+  wrapLegacyWidgets = true,
+): WidgetTypeMap[TWidget["type"]] | undefined {
+  if (widget instanceof BaseWidget) return widget
+
+  // Assertion: TypeScript has no concept of "all strings except X"
+  type RemoveBaseWidgetType<T> = T extends { type: TWidgetType } ? T : never
+  const narrowedWidget = widget as RemoveBaseWidgetType<TWidget>
+
+  switch (narrowedWidget.type) {
+  case "button": return toClass(ButtonWidget, narrowedWidget, node)
+  case "toggle": return toClass(BooleanWidget, narrowedWidget, node)
+  case "slider": return toClass(SliderWidget, narrowedWidget, node)
+  case "knob": return toClass(KnobWidget, narrowedWidget, node)
+  case "combo": return toClass(ComboWidget, narrowedWidget, node)
+  case "number": return toClass(NumberWidget, narrowedWidget, node)
+  case "string": return toClass(TextWidget, narrowedWidget, node)
+  case "text": return toClass(TextWidget, narrowedWidget, node)
+  case "fileupload": return toClass(FileUploadWidget, narrowedWidget, node)
+  case "color": return toClass(ColorWidget, narrowedWidget, node)
+  case "markdown": return toClass(MarkdownWidget, narrowedWidget, node)
+  case "image": return toClass(ImageWidget, narrowedWidget, node)
+  case "treeselect": return toClass(TreeSelectWidget, narrowedWidget, node)
+  case "multiselect": return toClass(MultiSelectWidget, narrowedWidget, node)
+  case "chart": return toClass(ChartWidget, narrowedWidget, node)
+  case "galleria": return toClass(GalleriaWidget, narrowedWidget, node)
+  case "imagecompare": return toClass(ImageCompareWidget, narrowedWidget, node)
+  case "selectbutton": return toClass(SelectButtonWidget, narrowedWidget, node)
+  case "textarea": return toClass(TextareaWidget, narrowedWidget, node)
+  default: {
+    if (wrapLegacyWidgets) return toClass(LegacyWidget, widget, node)
+  }
+  }
+}
+
+// #region Type Guards
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IButtonWidget}. */
+export function isButtonWidget(widget: IBaseWidget): widget is IButtonWidget {
+  return widget.type === "button"
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IBooleanWidget}. */
+export function isBooleanWidget(widget: IBaseWidget): widget is IBooleanWidget {
+  return widget.type === "toggle"
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link ISliderWidget}. */
+export function isSliderWidget(widget: IBaseWidget): widget is ISliderWidget {
+  return widget.type === "slider"
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IKnobWidget}. */
+export function isKnobWidget(widget: IBaseWidget): widget is IKnobWidget {
+  return widget.type === "knob"
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IComboWidget}. */
+export function isComboWidget(widget: IBaseWidget): widget is IComboWidget {
+  return widget.type === "combo"
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link INumericWidget}. */
+export function isNumberWidget(widget: IBaseWidget): widget is INumericWidget {
+  return widget.type === "number"
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IStringWidget}. */
+export function isStringWidget(widget: IBaseWidget): widget is IStringWidget {
+  return widget.type === "string"
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link ITextWidget}. */
+export function isTextWidget(widget: IBaseWidget): widget is IStringWidget {
+  return widget.type === "text"
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link ICustomWidget}. */
+export function isCustomWidget(widget: IBaseWidget): widget is ICustomWidget {
+  return widget.type === "custom"
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IFileUploadWidget}. */
+export function isFileUploadWidget(widget: IBaseWidget): widget is IFileUploadWidget {
+  return widget.type === "fileupload"
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IColorWidget}. */
+export function isColorWidget(widget: IBaseWidget): widget is IColorWidget {
+  return widget.type === "color"
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IMarkdownWidget}. */
+export function isMarkdownWidget(widget: IBaseWidget): widget is IMarkdownWidget {
+  return widget.type === "markdown"
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IImageWidget}. */
+export function isImageWidget(widget: IBaseWidget): widget is IImageWidget {
+  return widget.type === "image"
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link ITreeSelectWidget}. */
+export function isTreeSelectWidget(widget: IBaseWidget): widget is ITreeSelectWidget {
+  return widget.type === "treeselect"
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IMultiSelectWidget}. */
+export function isMultiSelectWidget(widget: IBaseWidget): widget is IMultiSelectWidget {
+  return widget.type === "multiselect"
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IChartWidget}. */
+export function isChartWidget(widget: IBaseWidget): widget is IChartWidget {
+  return widget.type === "chart"
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IGalleriaWidget}. */
+export function isGalleriaWidget(widget: IBaseWidget): widget is IGalleriaWidget {
+  return widget.type === "galleria"
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IImageCompareWidget}. */
+export function isImageCompareWidget(widget: IBaseWidget): widget is IImageCompareWidget {
+  return widget.type === "imagecompare"
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link ISelectButtonWidget}. */
+export function isSelectButtonWidget(widget: IBaseWidget): widget is ISelectButtonWidget {
+  return widget.type === "selectbutton"
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link ITextareaWidget}. */
+export function isTextareaWidget(widget: IBaseWidget): widget is ITextareaWidget {
+  return widget.type === "textarea"
+}
+
+// #endregion Type Guards
diff --git a/src/lib/litegraph/test/ConfigureGraph.test.ts b/src/lib/litegraph/test/ConfigureGraph.test.ts
new file mode 100644
index 0000000000..6755a9f378
--- /dev/null
+++ b/src/lib/litegraph/test/ConfigureGraph.test.ts
@@ -0,0 +1,17 @@
+import { describe } from "vitest"
+
+import { LGraph } from '../src/litegraph'
+
+import { dirtyTest } from "./testExtensions"
+
+describe("LGraph configure()", () => {
+  dirtyTest("LGraph matches previous snapshot (normal configure() usage)", ({ expect, minimalSerialisableGraph, basicSerialisableGraph }) => {
+    const configuredMinGraph = new LGraph()
+    configuredMinGraph.configure(minimalSerialisableGraph)
+    expect(configuredMinGraph).toMatchSnapshot("configuredMinGraph")
+
+    const configuredBasicGraph = new LGraph()
+    configuredBasicGraph.configure(basicSerialisableGraph)
+    expect(configuredBasicGraph).toMatchSnapshot("configuredBasicGraph")
+  })
+})
diff --git a/src/lib/litegraph/test/LGraph.test.ts b/src/lib/litegraph/test/LGraph.test.ts
new file mode 100644
index 0000000000..ee4498955f
--- /dev/null
+++ b/src/lib/litegraph/test/LGraph.test.ts
@@ -0,0 +1,129 @@
+import { describe } from "vitest"
+
+import { LGraph, LiteGraph } from '../src/litegraph'
+
+import { test } from "./testExtensions"
+
+describe("LGraph", () => {
+  test("can be instantiated", ({ expect }) => {
+    // @ts-expect-error Intentional - extra holds any / all consumer data that should be serialised
+    const graph = new LGraph({ extra: "TestGraph" })
+    expect(graph).toBeInstanceOf(LGraph)
+    expect(graph.extra).toBe("TestGraph")
+    expect(graph.extra).toBe("TestGraph")
+  })
+
+  test("is exactly the same type", async ({ expect }) => {
+    const directImport = await import("@/LGraph")
+    const entryPointImport = await import("@/litegraph")
+
+    expect(LiteGraph.LGraph).toBe(directImport.LGraph)
+    expect(LiteGraph.LGraph).toBe(entryPointImport.LGraph)
+  })
+
+  test("populates optional values", ({ expect, minimalSerialisableGraph }) => {
+    const dGraph = new LGraph(minimalSerialisableGraph)
+    expect(dGraph.links).toBeInstanceOf(Map)
+    expect(dGraph.nodes).toBeInstanceOf(Array)
+    expect(dGraph.groups).toBeInstanceOf(Array)
+  })
+
+  test("supports schema v0.4 graphs", ({ expect, oldSchemaGraph }) => {
+    const fromOldSchema = new LGraph(oldSchemaGraph)
+    expect(fromOldSchema).toMatchSnapshot("oldSchemaGraph")
+  })
+})
+
+describe("Floating Links / Reroutes", () => {
+  test("Floating reroute should be removed when node and link are removed", ({ expect, floatingLinkGraph }) => {
+    const graph = new LGraph(floatingLinkGraph)
+    expect(graph.nodes.length).toBe(1)
+    graph.remove(graph.nodes[0])
+    expect(graph.nodes.length).toBe(0)
+    expect(graph.links.size).toBe(0)
+    expect(graph.floatingLinks.size).toBe(0)
+    expect(graph.reroutes.size).toBe(0)
+  })
+
+  test("Can add reroute to existing link", ({ expect, linkedNodesGraph }) => {
+    const graph = new LGraph(linkedNodesGraph)
+    expect(graph.nodes.length).toBe(2)
+    expect(graph.links.size).toBe(1)
+    expect(graph.reroutes.size).toBe(0)
+
+    graph.createReroute([0, 0], graph.links.values().next().value!)
+    expect(graph.links.size).toBe(1)
+    expect(graph.reroutes.size).toBe(1)
+  })
+
+  test("Create floating reroute when one side of node is removed", ({ expect, linkedNodesGraph }) => {
+    const graph = new LGraph(linkedNodesGraph)
+    graph.createReroute([0, 0], graph.links.values().next().value!)
+    graph.remove(graph.nodes[0])
+
+    expect(graph.links.size).toBe(0)
+    expect(graph.floatingLinks.size).toBe(1)
+    expect(graph.reroutes.size).toBe(1)
+    expect(graph.reroutes.values().next().value!.floating).not.toBeUndefined()
+  })
+
+  test("Create floating reroute when one side of link is removed", ({ expect, linkedNodesGraph }) => {
+    const graph = new LGraph(linkedNodesGraph)
+    graph.createReroute([0, 0], graph.links.values().next().value!)
+    graph.nodes[0].disconnectOutput(0)
+
+    expect(graph.links.size).toBe(0)
+    expect(graph.floatingLinks.size).toBe(1)
+    expect(graph.reroutes.size).toBe(1)
+    expect(graph.reroutes.values().next().value!.floating).not.toBeUndefined()
+  })
+
+  test("Reroutes and branches should be retained when the input node is removed", ({ expect, floatingBranchGraph: graph }) => {
+    expect(graph.nodes.length).toBe(3)
+    graph.remove(graph.nodes[2])
+    expect(graph.nodes.length).toBe(2)
+    expect(graph.links.size).toBe(1)
+    expect(graph.floatingLinks.size).toBe(1)
+    expect(graph.reroutes.size).toBe(4)
+    graph.remove(graph.nodes[1])
+    expect(graph.nodes.length).toBe(1)
+    expect(graph.links.size).toBe(0)
+    expect(graph.floatingLinks.size).toBe(2)
+    expect(graph.reroutes.size).toBe(4)
+  })
+
+  test("Floating reroutes should be removed when neither input nor output is connected", ({ expect, floatingBranchGraph: graph }) => {
+    // Remove output node
+    graph.remove(graph.nodes[0])
+    expect(graph.nodes.length).toBe(2)
+    expect(graph.links.size).toBe(0)
+    expect(graph.floatingLinks.size).toBe(2)
+    // The original floating reroute should be removed
+    expect(graph.reroutes.size).toBe(3)
+    graph.remove(graph.nodes[0])
+    expect(graph.nodes.length).toBe(1)
+    expect(graph.links.size).toBe(0)
+    expect(graph.floatingLinks.size).toBe(1)
+    expect(graph.reroutes.size).toBe(3)
+    graph.remove(graph.nodes[0])
+    expect(graph.nodes.length).toBe(0)
+    expect(graph.links.size).toBe(0)
+    expect(graph.floatingLinks.size).toBe(0)
+    expect(graph.reroutes.size).toBe(0)
+  })
+})
+
+describe("Legacy LGraph Compatibility Layer", () => {
+  test("can be extended via prototype", ({ expect, minimalGraph }) => {
+    // @ts-expect-error Should always be an error.
+    LGraph.prototype.newMethod = function () {
+      return "New method added via prototype"
+    }
+    // @ts-expect-error Should always be an error.
+    expect(minimalGraph.newMethod()).toBe("New method added via prototype")
+  })
+
+  test("is correctly assigned to LiteGraph", ({ expect }) => {
+    expect(LiteGraph.LGraph).toBe(LGraph)
+  })
+})
diff --git a/src/lib/litegraph/test/LGraphGroup.test.ts b/src/lib/litegraph/test/LGraphGroup.test.ts
new file mode 100644
index 0000000000..f16c79a592
--- /dev/null
+++ b/src/lib/litegraph/test/LGraphGroup.test.ts
@@ -0,0 +1,12 @@
+import { describe, expect } from "vitest"
+
+import { LGraphGroup } from '../src/litegraph'
+
+import { test } from "./testExtensions"
+
+describe("LGraphGroup", () => {
+  test("serializes to the existing format", () => {
+    const link = new LGraphGroup("title", 929)
+    expect(link.serialize()).toMatchSnapshot("Basic")
+  })
+})
diff --git a/src/lib/litegraph/test/LGraphNode.resize.test.ts b/src/lib/litegraph/test/LGraphNode.resize.test.ts
new file mode 100644
index 0000000000..18b9d448e7
--- /dev/null
+++ b/src/lib/litegraph/test/LGraphNode.resize.test.ts
@@ -0,0 +1,131 @@
+import { beforeEach, describe, expect } from "vitest"
+
+import { LGraphNode, LiteGraph } from '../src/litegraph'
+
+import { test } from "./testExtensions"
+
+describe("LGraphNode resize functionality", () => {
+  let node: LGraphNode
+
+  beforeEach(() => {
+    // Set up LiteGraph constants needed for measure
+    LiteGraph.NODE_TITLE_HEIGHT = 20
+
+    node = new LGraphNode("Test Node")
+    node.pos = [100, 100]
+    node.size = [200, 150]
+
+    // Create a mock canvas context for updateArea
+    const mockCtx = {} as CanvasRenderingContext2D
+
+    // Call updateArea to populate boundingRect
+    node.updateArea(mockCtx)
+  })
+
+  describe("findResizeDirection", () => {
+    describe("corners", () => {
+      test("should detect NW (top-left) corner", () => {
+        // With title bar, top is at y=80 (100 - 20)
+        // Corner is from (100, 80) to (100 + 15, 80 + 15)
+        expect(node.findResizeDirection(100, 80)).toBe("NW")
+        expect(node.findResizeDirection(110, 90)).toBe("NW")
+        expect(node.findResizeDirection(114, 94)).toBe("NW")
+      })
+
+      test("should detect NE (top-right) corner", () => {
+        // Corner is from (300 - 15, 80) to (300, 80 + 15)
+        expect(node.findResizeDirection(285, 80)).toBe("NE")
+        expect(node.findResizeDirection(290, 90)).toBe("NE")
+        expect(node.findResizeDirection(299, 94)).toBe("NE")
+      })
+
+      test("should detect SW (bottom-left) corner", () => {
+        // Bottom is at y=250 (100 + 150)
+        // Corner is from (100, 250 - 15) to (100 + 15, 250)
+        expect(node.findResizeDirection(100, 235)).toBe("SW")
+        expect(node.findResizeDirection(110, 240)).toBe("SW")
+        expect(node.findResizeDirection(114, 249)).toBe("SW")
+      })
+
+      test("should detect SE (bottom-right) corner", () => {
+        // Corner is from (300 - 15, 250 - 15) to (300, 250)
+        expect(node.findResizeDirection(285, 235)).toBe("SE")
+        expect(node.findResizeDirection(290, 240)).toBe("SE")
+        expect(node.findResizeDirection(299, 249)).toBe("SE")
+      })
+    })
+
+    describe("priority", () => {
+      test("corners should have priority over edges", () => {
+        // These points are technically on both corner and edge
+        // Corner should win
+        expect(node.findResizeDirection(100, 84)).toBe("NW") // Not "W"
+        expect(node.findResizeDirection(104, 80)).toBe("NW") // Not "N"
+      })
+    })
+
+    describe("negative cases", () => {
+      test("should return undefined when outside node bounds", () => {
+        expect(node.findResizeDirection(50, 50)).toBeUndefined()
+        expect(node.findResizeDirection(350, 300)).toBeUndefined()
+        expect(node.findResizeDirection(99, 150)).toBeUndefined()
+        expect(node.findResizeDirection(301, 150)).toBeUndefined()
+      })
+
+      test("should return undefined when inside node but not on resize areas", () => {
+        // Center of node (accounting for title bar offset)
+        expect(node.findResizeDirection(200, 165)).toBeUndefined()
+        // Just inside the edge threshold
+        expect(node.findResizeDirection(106, 150)).toBeUndefined()
+        expect(node.findResizeDirection(294, 150)).toBeUndefined()
+        expect(node.findResizeDirection(150, 86)).toBeUndefined() // 80 + 6
+        expect(node.findResizeDirection(150, 244)).toBeUndefined()
+      })
+
+      test("should return undefined when node is not resizable", () => {
+        node.resizable = false
+        expect(node.findResizeDirection(100, 100)).toBeUndefined()
+        expect(node.findResizeDirection(300, 250)).toBeUndefined()
+        expect(node.findResizeDirection(150, 100)).toBeUndefined()
+      })
+    })
+
+    describe("edge cases", () => {
+      test("should handle nodes at origin", () => {
+        node.pos = [0, 0]
+        node.size = [100, 100]
+
+        // Update boundingRect with new position/size
+        const mockCtx = {} as CanvasRenderingContext2D
+        node.updateArea(mockCtx)
+
+        expect(node.findResizeDirection(0, -20)).toBe("NW") // Account for title bar
+        expect(node.findResizeDirection(99, 99)).toBe("SE") // Bottom-right corner (100-1, 100-1)
+      })
+
+      test("should handle very small nodes", () => {
+        node.size = [20, 20] // Smaller than corner size
+
+        // Update boundingRect with new size
+        const mockCtx = {} as CanvasRenderingContext2D
+        node.updateArea(mockCtx)
+
+        // Corners still work (accounting for title bar offset)
+        expect(node.findResizeDirection(100, 80)).toBe("NW")
+        expect(node.findResizeDirection(119, 119)).toBe("SE")
+      })
+    })
+  })
+
+  describe("resizeEdgeSize static property", () => {
+    test("should have default value of 5", () => {
+      expect(LGraphNode.resizeEdgeSize).toBe(5)
+    })
+  })
+
+  describe("resizeHandleSize static property", () => {
+    test("should have default value of 15", () => {
+      expect(LGraphNode.resizeHandleSize).toBe(15)
+    })
+  })
+})
diff --git a/src/lib/litegraph/test/LGraphNode.test.ts b/src/lib/litegraph/test/LGraphNode.test.ts
new file mode 100644
index 0000000000..577bb47401
--- /dev/null
+++ b/src/lib/litegraph/test/LGraphNode.test.ts
@@ -0,0 +1,578 @@
+import type { INodeInputSlot, Point } from '../src/interfaces'
+import type { ISerialisedNode } from '../src/types/serialisation'
+
+import { afterEach, beforeEach, describe, expect, vi } from "vitest"
+
+import { LGraphNode, LiteGraph } from '../src/litegraph'
+import { LGraph } from '../src/litegraph'
+import { NodeInputSlot } from '../src/node/NodeInputSlot'
+import { NodeOutputSlot } from '../src/node/NodeOutputSlot'
+
+import { test } from "./testExtensions"
+
+function getMockISerialisedNode(data: Partial<ISerialisedNode>): ISerialisedNode {
+  return Object.assign({
+    id: 0,
+    flags: {},
+    type: "TestNode",
+    pos: [100, 100],
+    size: [100, 100],
+    order: 0,
+    mode: 0,
+  }, data)
+}
+
+describe("LGraphNode", () => {
+  let node: LGraphNode
+  let origLiteGraph: typeof LiteGraph
+
+  beforeEach(() => {
+    origLiteGraph = Object.assign({}, LiteGraph)
+    // @ts-expect-error
+    delete origLiteGraph.Classes
+
+    Object.assign(LiteGraph, {
+      NODE_TITLE_HEIGHT: 20,
+      NODE_SLOT_HEIGHT: 15,
+      NODE_TEXT_SIZE: 14,
+      DEFAULT_SHADOW_COLOR: "rgba(0,0,0,0.5)",
+      DEFAULT_GROUP_FONT_SIZE: 24,
+      isValidConnection: vi.fn().mockReturnValue(true),
+    })
+    node = new LGraphNode("Test Node")
+    node.pos = [100, 200]
+    node.size = [150, 100] // Example size
+
+    // Reset mocks if needed
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    Object.assign(LiteGraph, origLiteGraph)
+  })
+
+  test("should serialize position/size correctly", () => {
+    const node = new LGraphNode("TestNode")
+    node.pos = [10, 20]
+    node.size = [30, 40]
+    const json = node.serialize()
+    expect(json.pos).toEqual([10, 20])
+    expect(json.size).toEqual([30, 40])
+
+    const configureData: ISerialisedNode = {
+      id: node.id,
+      type: node.type,
+      pos: [50, 60],
+      size: [70, 80],
+      flags: {},
+      order: node.order,
+      mode: node.mode,
+      inputs: node.inputs?.map(i => ({ name: i.name, type: i.type, link: i.link })),
+      outputs: node.outputs?.map(o => ({ name: o.name, type: o.type, links: o.links, slot_index: o.slot_index })),
+    }
+    node.configure(configureData)
+    expect(node.pos).toEqual(new Float32Array([50, 60]))
+    expect(node.size).toEqual(new Float32Array([70, 80]))
+  })
+
+  test("should configure inputs correctly", () => {
+    const node = new LGraphNode("TestNode")
+    node.configure(getMockISerialisedNode({
+      id: 0,
+      inputs: [{ name: "TestInput", type: "number", link: null }],
+    }))
+    expect(node.inputs.length).toEqual(1)
+    expect(node.inputs[0].name).toEqual("TestInput")
+    expect(node.inputs[0].link).toEqual(null)
+    expect(node.inputs[0]).instanceOf(NodeInputSlot)
+
+    // Should not override existing inputs
+    node.configure(getMockISerialisedNode({ id: 1 }))
+    expect(node.id).toEqual(1)
+    expect(node.inputs.length).toEqual(1)
+  })
+
+  test("should configure outputs correctly", () => {
+    const node = new LGraphNode("TestNode")
+    node.configure(getMockISerialisedNode({
+      id: 0,
+      outputs: [{ name: "TestOutput", type: "number", links: [] }],
+    }))
+    expect(node.outputs.length).toEqual(1)
+    expect(node.outputs[0].name).toEqual("TestOutput")
+    expect(node.outputs[0].type).toEqual("number")
+    expect(node.outputs[0].links).toEqual([])
+    expect(node.outputs[0]).instanceOf(NodeOutputSlot)
+
+    // Should not override existing outputs
+    node.configure(getMockISerialisedNode({ id: 1 }))
+    expect(node.id).toEqual(1)
+    expect(node.outputs.length).toEqual(1)
+  })
+
+  describe("Disconnect I/O Slots", () => {
+    test("should disconnect input correctly", () => {
+      const node1 = new LGraphNode("SourceNode")
+      const node2 = new LGraphNode("TargetNode")
+
+      // Configure nodes with input/output slots
+      node1.configure(getMockISerialisedNode({
+        id: 1,
+        outputs: [{ name: "Output1", type: "number", links: [] }],
+      }))
+      node2.configure(getMockISerialisedNode({
+        id: 2,
+        inputs: [{ name: "Input1", type: "number", link: null }],
+      }))
+
+      // Create a graph and add nodes to it
+      const graph = new LGraph()
+      graph.add(node1)
+      graph.add(node2)
+
+      // Connect the nodes
+      const link = node1.connect(0, node2, 0)
+      expect(link).not.toBeNull()
+      expect(node2.inputs[0].link).toBe(link?.id)
+      expect(node1.outputs[0].links).toContain(link?.id)
+
+      // Test disconnecting by slot number
+      const disconnected = node2.disconnectInput(0)
+      expect(disconnected).toBe(true)
+      expect(node2.inputs[0].link).toBeNull()
+      expect(node1.outputs[0].links?.length).toBe(0)
+      expect(graph._links.has(link?.id ?? -1)).toBe(false)
+
+      // Test disconnecting by slot name
+      node1.connect(0, node2, 0)
+      const disconnectedByName = node2.disconnectInput("Input1")
+      expect(disconnectedByName).toBe(true)
+      expect(node2.inputs[0].link).toBeNull()
+
+      // Test disconnecting non-existent slot
+      const invalidDisconnect = node2.disconnectInput(999)
+      expect(invalidDisconnect).toBe(false)
+
+      // Test disconnecting already disconnected input
+      const alreadyDisconnected = node2.disconnectInput(0)
+      expect(alreadyDisconnected).toBe(true)
+    })
+
+    test("should disconnect output correctly", () => {
+      const sourceNode = new LGraphNode("SourceNode")
+      const targetNode1 = new LGraphNode("TargetNode1")
+      const targetNode2 = new LGraphNode("TargetNode2")
+
+      // Configure nodes with input/output slots
+      sourceNode.configure(getMockISerialisedNode({
+        id: 1,
+        outputs: [
+          { name: "Output1", type: "number", links: [] },
+          { name: "Output2", type: "number", links: [] },
+        ],
+      }))
+      targetNode1.configure(getMockISerialisedNode({
+        id: 2,
+        inputs: [{ name: "Input1", type: "number", link: null }],
+      }))
+      targetNode2.configure(getMockISerialisedNode({
+        id: 3,
+        inputs: [{ name: "Input1", type: "number", link: null }],
+      }))
+
+      // Create a graph and add nodes to it
+      const graph = new LGraph()
+      graph.add(sourceNode)
+      graph.add(targetNode1)
+      graph.add(targetNode2)
+
+      // Connect multiple nodes to the same output
+      const link1 = sourceNode.connect(0, targetNode1, 0)
+      const link2 = sourceNode.connect(0, targetNode2, 0)
+      expect(link1).not.toBeNull()
+      expect(link2).not.toBeNull()
+      expect(sourceNode.outputs[0].links?.length).toBe(2)
+
+      // Test disconnecting specific target node
+      const disconnectedSpecific = sourceNode.disconnectOutput(0, targetNode1)
+      expect(disconnectedSpecific).toBe(true)
+      expect(targetNode1.inputs[0].link).toBeNull()
+      expect(sourceNode.outputs[0].links?.length).toBe(1)
+      expect(graph._links.has(link1?.id ?? -1)).toBe(false)
+      expect(graph._links.has(link2?.id ?? -1)).toBe(true)
+
+      // Test disconnecting by slot name
+      const link3 = sourceNode.connect(1, targetNode1, 0)
+      expect(link3).not.toBeNull()
+      const disconnectedByName = sourceNode.disconnectOutput("Output2", targetNode1)
+      expect(disconnectedByName).toBe(true)
+      expect(targetNode1.inputs[0].link).toBeNull()
+      expect(sourceNode.outputs[1].links?.length).toBe(0)
+
+      // Test disconnecting all connections from an output
+      const link4 = sourceNode.connect(0, targetNode1, 0)
+      expect(link4).not.toBeNull()
+      expect(sourceNode.outputs[0].links?.length).toBe(2)
+      const disconnectedAll = sourceNode.disconnectOutput(0)
+      expect(disconnectedAll).toBe(true)
+      expect(sourceNode.outputs[0].links).toBeNull()
+      expect(targetNode1.inputs[0].link).toBeNull()
+      expect(targetNode2.inputs[0].link).toBeNull()
+      expect(graph._links.has(link2?.id ?? -1)).toBe(false)
+      expect(graph._links.has(link4?.id ?? -1)).toBe(false)
+
+      // Test disconnecting non-existent slot
+      const invalidDisconnect = sourceNode.disconnectOutput(999)
+      expect(invalidDisconnect).toBe(false)
+
+      // Test disconnecting already disconnected output
+      const alreadyDisconnected = sourceNode.disconnectOutput(0)
+      expect(alreadyDisconnected).toBe(false)
+    })
+  })
+
+  describe("getInputPos and getOutputPos", () => {
+    test("should handle collapsed nodes correctly", () => {
+      const node = new LGraphNode("TestNode") as unknown as Omit<LGraphNode, "boundingRect"> & { boundingRect: Float32Array }
+      node.pos = [100, 100]
+      node.size = [100, 100]
+      node.boundingRect[0] = 100
+      node.boundingRect[1] = 100
+      node.boundingRect[2] = 100
+      node.boundingRect[3] = 100
+      node.configure(getMockISerialisedNode({
+        id: 1,
+        inputs: [{ name: "Input1", type: "number", link: null }],
+        outputs: [{ name: "Output1", type: "number", links: [] }],
+      }))
+
+      // Collapse the node
+      node.flags.collapsed = true
+
+      // Get positions in collapsed state
+      const inputPos = node.getInputPos(0)
+      const outputPos = node.getOutputPos(0)
+
+      expect(inputPos).toEqual([100, 90])
+      expect(outputPos).toEqual([180, 90])
+    })
+
+    test("should return correct positions for input and output slots", () => {
+      const node = new LGraphNode("TestNode")
+      node.pos = [100, 100]
+      node.size = [100, 100]
+      node.configure(getMockISerialisedNode({
+        id: 1,
+        inputs: [{ name: "Input1", type: "number", link: null }],
+        outputs: [{ name: "Output1", type: "number", links: [] }],
+      }))
+
+      const inputPos = node.getInputPos(0)
+      const outputPos = node.getOutputPos(0)
+
+      expect(inputPos).toEqual([107.5, 110.5])
+      expect(outputPos).toEqual([193.5, 110.5])
+    })
+  })
+
+  describe("getSlotOnPos", () => {
+    test("should return undefined when point is outside node bounds", () => {
+      const node = new LGraphNode("TestNode")
+      node.pos = [100, 100]
+      node.size = [100, 100]
+      node.configure(getMockISerialisedNode({
+        id: 1,
+        inputs: [{ name: "Input1", type: "number", link: null }],
+        outputs: [{ name: "Output1", type: "number", links: [] }],
+      }))
+
+      // Test point far outside node bounds
+      expect(node.getSlotOnPos([0, 0])).toBeUndefined()
+      // Test point just outside node bounds
+      expect(node.getSlotOnPos([99, 99])).toBeUndefined()
+    })
+
+    test("should detect input slots correctly", () => {
+      const node = new LGraphNode("TestNode") as unknown as Omit<LGraphNode, "boundingRect"> & { boundingRect: Float32Array }
+      node.pos = [100, 100]
+      node.size = [100, 100]
+      node.boundingRect[0] = 100
+      node.boundingRect[1] = 100
+      node.boundingRect[2] = 200
+      node.boundingRect[3] = 200
+      node.configure(getMockISerialisedNode({
+        id: 1,
+        inputs: [
+          { name: "Input1", type: "number", link: null },
+          { name: "Input2", type: "string", link: null },
+        ],
+      }))
+
+      // Get position of first input slot
+      const inputPos = node.getInputPos(0)
+      // Test point directly on input slot
+      const slot = node.getSlotOnPos(inputPos)
+      expect(slot).toBeDefined()
+      expect(slot?.name).toBe("Input1")
+
+      // Test point near but not on input slot
+      expect(node.getSlotOnPos([inputPos[0] - 15, inputPos[1]])).toBeUndefined()
+    })
+
+    test("should detect output slots correctly", () => {
+      const node = new LGraphNode("TestNode") as unknown as Omit<LGraphNode, "boundingRect"> & { boundingRect: Float32Array }
+      node.pos = [100, 100]
+      node.size = [100, 100]
+      node.boundingRect[0] = 100
+      node.boundingRect[1] = 100
+      node.boundingRect[2] = 200
+      node.boundingRect[3] = 200
+      node.configure(getMockISerialisedNode({
+        id: 1,
+        outputs: [
+          { name: "Output1", type: "number", links: [] },
+          { name: "Output2", type: "string", links: [] },
+        ],
+      }))
+
+      // Get position of first output slot
+      const outputPos = node.getOutputPos(0)
+      // Test point directly on output slot
+      const slot = node.getSlotOnPos(outputPos)
+      expect(slot).toBeDefined()
+      expect(slot?.name).toBe("Output1")
+
+      // Test point near but not on output slot
+      const gotslot = node.getSlotOnPos([outputPos[0] + 30, outputPos[1]])
+      expect(gotslot).toBeUndefined()
+    })
+
+    test("should prioritize input slots over output slots", () => {
+      const node = new LGraphNode("TestNode") as unknown as Omit<LGraphNode, "boundingRect"> & { boundingRect: Float32Array }
+      node.pos = [100, 100]
+      node.size = [100, 100]
+      node.boundingRect[0] = 100
+      node.boundingRect[1] = 100
+      node.boundingRect[2] = 200
+      node.boundingRect[3] = 200
+      node.configure(getMockISerialisedNode({
+        id: 1,
+        inputs: [{ name: "Input1", type: "number", link: null }],
+        outputs: [{ name: "Output1", type: "number", links: [] }],
+      }))
+
+      // Get positions of first input and output slots
+      const inputPos = node.getInputPos(0)
+
+      // Test point that could theoretically hit both slots
+      // Should return the input slot due to priority
+      const slot = node.getSlotOnPos(inputPos)
+      expect(slot).toBeDefined()
+      expect(slot?.name).toBe("Input1")
+    })
+  })
+
+  describe("LGraphNode slot positioning", () => {
+    test("should correctly position slots with absolute coordinates", () => {
+      // Setup
+      const node = new LGraphNode("test")
+      node.pos = [100, 100]
+
+      // Add input/output with absolute positions
+      node.addInput("abs-input", "number")
+      node.inputs[0].pos = [10, 20]
+
+      node.addOutput("abs-output", "number")
+      node.outputs[0].pos = [50, 30]
+
+      // Test
+      const inputPos = node.getInputPos(0)
+      const outputPos = node.getOutputPos(0)
+
+      // Absolute positions should be relative to node position
+      expect(inputPos).toEqual([110, 120]) // node.pos + slot.pos
+      expect(outputPos).toEqual([150, 130]) // node.pos + slot.pos
+    })
+
+    test("should correctly position default vertical slots", () => {
+      // Setup
+      const node = new LGraphNode("test")
+      node.pos = [100, 100]
+
+      // Add multiple inputs/outputs without absolute positions
+      node.addInput("input1", "number")
+      node.addInput("input2", "number")
+      node.addOutput("output1", "number")
+      node.addOutput("output2", "number")
+
+      // Calculate expected positions
+      const slotOffset = LiteGraph.NODE_SLOT_HEIGHT * 0.5
+      const slotSpacing = LiteGraph.NODE_SLOT_HEIGHT
+      const nodeWidth = node.size[0]
+
+      // Test input positions
+      expect(node.getInputPos(0)).toEqual([
+        100 + slotOffset,
+        100 + (0 + 0.7) * slotSpacing,
+      ])
+      expect(node.getInputPos(1)).toEqual([
+        100 + slotOffset,
+        100 + (1 + 0.7) * slotSpacing,
+      ])
+
+      // Test output positions
+      expect(node.getOutputPos(0)).toEqual([
+        100 + nodeWidth + 1 - slotOffset,
+        100 + (0 + 0.7) * slotSpacing,
+      ])
+      expect(node.getOutputPos(1)).toEqual([
+        100 + nodeWidth + 1 - slotOffset,
+        100 + (1 + 0.7) * slotSpacing,
+      ])
+    })
+
+    test("should skip absolute positioned slots when calculating vertical positions", () => {
+      // Setup
+      const node = new LGraphNode("test")
+      node.pos = [100, 100]
+
+      // Add mix of absolute and default positioned slots
+      node.addInput("abs-input", "number")
+      node.inputs[0].pos = [10, 20]
+      node.addInput("default-input1", "number")
+      node.addInput("default-input2", "number")
+
+      const slotOffset = LiteGraph.NODE_SLOT_HEIGHT * 0.5
+      const slotSpacing = LiteGraph.NODE_SLOT_HEIGHT
+
+      // Test: default positioned slots should be consecutive, ignoring absolute positioned ones
+      expect(node.getInputPos(1)).toEqual([
+        100 + slotOffset,
+        100 + (0 + 0.7) * slotSpacing, // First default slot starts at index 0
+      ])
+      expect(node.getInputPos(2)).toEqual([
+        100 + slotOffset,
+        100 + (1 + 0.7) * slotSpacing, // Second default slot at index 1
+      ])
+    })
+  })
+
+  describe("widget serialization", () => {
+    test("should only serialize widgets with serialize flag not set to false", () => {
+      const node = new LGraphNode("TestNode")
+      node.serialize_widgets = true
+
+      // Add widgets with different serialization settings
+      node.addWidget("number", "serializable1", 1, null)
+      node.addWidget("number", "serializable2", 2, null)
+      node.addWidget("number", "non-serializable", 3, null)
+      expect(node.widgets?.length).toBe(3)
+
+      // Set serialize flag to false for the last widget
+      node.widgets![2].serialize = false
+
+      // Set some widget values
+      node.widgets![0].value = 10
+      node.widgets![1].value = 20
+      node.widgets![2].value = 30
+
+      // Serialize the node
+      const serialized = node.serialize()
+
+      // Check that only serializable widgets' values are included
+      expect(serialized.widgets_values).toEqual([10, 20])
+      expect(serialized.widgets_values).toHaveLength(2)
+    })
+
+    test("should only configure widgets with serialize flag not set to false", () => {
+      const node = new LGraphNode("TestNode")
+      node.serialize_widgets = true
+
+      node.addWidget("number", "non-serializable", 1, null)
+      node.addWidget("number", "serializable1", 2, null)
+      expect(node.widgets?.length).toBe(2)
+
+      node.widgets![0].serialize = false
+      node.configure(getMockISerialisedNode({
+        id: 1,
+        type: "TestNode",
+        pos: [100, 100],
+        size: [100, 100],
+        properties: {},
+        widgets_values: [100],
+      }))
+
+      expect(node.widgets![0].value).toBe(1)
+      expect(node.widgets![1].value).toBe(100)
+    })
+  })
+
+  describe("getInputSlotPos", () => {
+    let inputSlot: INodeInputSlot
+
+    beforeEach(() => {
+      inputSlot = { name: "test_in", type: "string", link: null, boundingRect: new Float32Array([0, 0, 0, 0]) }
+    })
+    test("should return position based on title height when collapsed", () => {
+      node.flags.collapsed = true
+      const expectedPos: Point = [100, 200 - LiteGraph.NODE_TITLE_HEIGHT * 0.5]
+      expect(node.getInputSlotPos(inputSlot)).toEqual(expectedPos)
+    })
+
+    test("should return position based on input.pos when defined and not collapsed", () => {
+      node.flags.collapsed = false
+      inputSlot.pos = [10, 50]
+      node.inputs = [inputSlot]
+      const expectedPos: Point = [100 + 10, 200 + 50]
+      expect(node.getInputSlotPos(inputSlot)).toEqual(expectedPos)
+    })
+
+    test("should return default vertical position when input.pos is undefined and not collapsed", () => {
+      node.flags.collapsed = false
+      const inputSlot2 = { name: "test_in_2", type: "number", link: null, boundingRect: new Float32Array([0, 0, 0, 0]) }
+      node.inputs = [inputSlot, inputSlot2]
+      const slotIndex = 0
+      const nodeOffsetY = (node.constructor as any).slot_start_y || 0
+      const expectedY = 200 + (slotIndex + 0.7) * LiteGraph.NODE_SLOT_HEIGHT + nodeOffsetY
+      const expectedX = 100 + LiteGraph.NODE_SLOT_HEIGHT * 0.5
+      expect(node.getInputSlotPos(inputSlot)).toEqual([expectedX, expectedY])
+      const slotIndex2 = 1
+      const expectedY2 = 200 + (slotIndex2 + 0.7) * LiteGraph.NODE_SLOT_HEIGHT + nodeOffsetY
+      expect(node.getInputSlotPos(inputSlot2)).toEqual([expectedX, expectedY2])
+    })
+
+    test("should return default vertical position including slot_start_y when defined", () => {
+      (node.constructor as any).slot_start_y = 25
+      node.flags.collapsed = false
+      node.inputs = [inputSlot]
+      const slotIndex = 0
+      const nodeOffsetY = 25
+      const expectedY = 200 + (slotIndex + 0.7) * LiteGraph.NODE_SLOT_HEIGHT + nodeOffsetY
+      const expectedX = 100 + LiteGraph.NODE_SLOT_HEIGHT * 0.5
+      expect(node.getInputSlotPos(inputSlot)).toEqual([expectedX, expectedY])
+      delete (node.constructor as any).slot_start_y
+    })
+  })
+
+  describe("getInputPos", () => {
+    test("should call getInputSlotPos with the correct input slot from inputs array", () => {
+      const input0: INodeInputSlot = { name: "in0", type: "string", link: null, boundingRect: new Float32Array([0, 0, 0, 0]) }
+      const input1: INodeInputSlot = { name: "in1", type: "number", link: null, boundingRect: new Float32Array([0, 0, 0, 0]), pos: [5, 45] }
+      node.inputs = [input0, input1]
+      const spy = vi.spyOn(node, "getInputSlotPos")
+      node.getInputPos(1)
+      expect(spy).toHaveBeenCalledWith(input1)
+      const expectedPos: Point = [100 + 5, 200 + 45]
+      expect(node.getInputPos(1)).toEqual(expectedPos)
+      spy.mockClear()
+      node.getInputPos(0)
+      expect(spy).toHaveBeenCalledWith(input0)
+      const slotIndex = 0
+      const nodeOffsetY = (node.constructor as any).slot_start_y || 0
+      const expectedDefaultY = 200 + (slotIndex + 0.7) * LiteGraph.NODE_SLOT_HEIGHT + nodeOffsetY
+      const expectedDefaultX = 100 + LiteGraph.NODE_SLOT_HEIGHT * 0.5
+      expect(node.getInputPos(0)).toEqual([expectedDefaultX, expectedDefaultY])
+      spy.mockRestore()
+    })
+  })
+})
diff --git a/src/lib/litegraph/test/LGraphNodeProperties.test.ts b/src/lib/litegraph/test/LGraphNodeProperties.test.ts
new file mode 100644
index 0000000000..b20bc49216
--- /dev/null
+++ b/src/lib/litegraph/test/LGraphNodeProperties.test.ts
@@ -0,0 +1,151 @@
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+import { LGraphNodeProperties } from '../src/LGraphNodeProperties'
+
+describe("LGraphNodeProperties", () => {
+  let mockNode: any
+  let mockGraph: any
+
+  beforeEach(() => {
+    mockGraph = {
+      trigger: vi.fn(),
+    }
+
+    mockNode = {
+      id: 123,
+      title: "Test Node",
+      flags: {},
+      graph: mockGraph,
+    }
+  })
+
+  describe("constructor", () => {
+    it("should initialize with default tracked properties", () => {
+      const propManager = new LGraphNodeProperties(mockNode)
+      const tracked = propManager.getTrackedProperties()
+
+      expect(tracked).toHaveLength(2)
+      expect(tracked).toContain("title")
+      expect(tracked).toContain("flags.collapsed")
+    })
+  })
+
+  describe("property tracking", () => {
+    it("should track changes to existing properties", () => {
+      new LGraphNodeProperties(mockNode)
+
+      mockNode.title = "New Title"
+
+      expect(mockGraph.trigger).toHaveBeenCalledWith("node:property:changed", {
+        nodeId: mockNode.id,
+        property: "title",
+        oldValue: "Test Node",
+        newValue: "New Title",
+      })
+    })
+
+    it("should track changes to nested properties", () => {
+      new LGraphNodeProperties(mockNode)
+
+      mockNode.flags.collapsed = true
+
+      expect(mockGraph.trigger).toHaveBeenCalledWith("node:property:changed", {
+        nodeId: mockNode.id,
+        property: "flags.collapsed",
+        oldValue: undefined,
+        newValue: true,
+      })
+    })
+
+    it("should not emit events when value doesn't change", () => {
+      new LGraphNodeProperties(mockNode)
+
+      mockNode.title = "Test Node" // Same value as original
+
+      expect(mockGraph.trigger).toHaveBeenCalledTimes(0)
+    })
+
+    it("should not emit events when node has no graph", () => {
+      mockNode.graph = null
+      new LGraphNodeProperties(mockNode)
+
+      // Should not throw
+      expect(() => {
+        mockNode.title = "New Title"
+      }).not.toThrow()
+    })
+  })
+
+  describe("isTracked", () => {
+    it("should correctly identify tracked properties", () => {
+      const propManager = new LGraphNodeProperties(mockNode)
+
+      expect(propManager.isTracked("title")).toBe(true)
+      expect(propManager.isTracked("flags.collapsed")).toBe(true)
+      expect(propManager.isTracked("untracked")).toBe(false)
+    })
+  })
+
+  describe("serialization behavior", () => {
+    it("should not make non-existent properties enumerable", () => {
+      new LGraphNodeProperties(mockNode)
+
+      // flags.collapsed doesn't exist initially
+      const descriptor = Object.getOwnPropertyDescriptor(mockNode.flags, "collapsed")
+      expect(descriptor?.enumerable).toBe(false)
+    })
+
+    it("should make properties enumerable when set to non-default values", () => {
+      new LGraphNodeProperties(mockNode)
+
+      mockNode.flags.collapsed = true
+
+      const descriptor = Object.getOwnPropertyDescriptor(mockNode.flags, "collapsed")
+      expect(descriptor?.enumerable).toBe(true)
+    })
+
+    it("should make properties non-enumerable when set back to undefined", () => {
+      new LGraphNodeProperties(mockNode)
+
+      mockNode.flags.collapsed = true
+      mockNode.flags.collapsed = undefined
+
+      const descriptor = Object.getOwnPropertyDescriptor(mockNode.flags, "collapsed")
+      expect(descriptor?.enumerable).toBe(false)
+    })
+
+    it("should keep existing properties enumerable", () => {
+      // title exists initially
+      const initialDescriptor = Object.getOwnPropertyDescriptor(mockNode, "title")
+      expect(initialDescriptor?.enumerable).toBe(true)
+
+      new LGraphNodeProperties(mockNode)
+
+      const afterDescriptor = Object.getOwnPropertyDescriptor(mockNode, "title")
+      expect(afterDescriptor?.enumerable).toBe(true)
+    })
+
+    it("should only include non-undefined values in JSON.stringify", () => {
+      new LGraphNodeProperties(mockNode)
+
+      // Initially, flags.collapsed shouldn't appear
+      let json = JSON.parse(JSON.stringify(mockNode))
+      expect(json.flags.collapsed).toBeUndefined()
+
+      // After setting to true, it should appear
+      mockNode.flags.collapsed = true
+      json = JSON.parse(JSON.stringify(mockNode))
+      expect(json.flags.collapsed).toBe(true)
+
+      // After setting to false, it should still appear (false is not undefined)
+      mockNode.flags.collapsed = false
+      json = JSON.parse(JSON.stringify(mockNode))
+      expect(json.flags.collapsed).toBe(false)
+
+      // After setting back to undefined, it should disappear
+      mockNode.flags.collapsed = undefined
+      json = JSON.parse(JSON.stringify(mockNode))
+      expect(json.flags.collapsed).toBeUndefined()
+    })
+  })
+})
diff --git a/src/lib/litegraph/test/LGraph_constructor.test.ts b/src/lib/litegraph/test/LGraph_constructor.test.ts
new file mode 100644
index 0000000000..aa8b91c9ad
--- /dev/null
+++ b/src/lib/litegraph/test/LGraph_constructor.test.ts
@@ -0,0 +1,15 @@
+import { describe } from "vitest"
+
+import { LGraph } from '../src/litegraph'
+
+import { dirtyTest } from "./testExtensions"
+
+describe("LGraph (constructor only)", () => {
+  dirtyTest("Matches previous snapshot", ({ expect, minimalSerialisableGraph, basicSerialisableGraph }) => {
+    const minLGraph = new LGraph(minimalSerialisableGraph)
+    expect(minLGraph).toMatchSnapshot("minLGraph")
+
+    const basicLGraph = new LGraph(basicSerialisableGraph)
+    expect(basicLGraph).toMatchSnapshot("basicLGraph")
+  })
+})
diff --git a/src/lib/litegraph/test/LLink.test.ts b/src/lib/litegraph/test/LLink.test.ts
new file mode 100644
index 0000000000..ae36d68f19
--- /dev/null
+++ b/src/lib/litegraph/test/LLink.test.ts
@@ -0,0 +1,17 @@
+import { describe, expect } from "vitest"
+
+import { LLink } from '../src/litegraph'
+
+import { test } from "./testExtensions"
+
+describe("LLink", () => {
+  test("matches previous snapshot", () => {
+    const link = new LLink(1, "float", 4, 2, 5, 3)
+    expect(link.serialize()).toMatchSnapshot("Basic")
+  })
+
+  test("serializes to the previous snapshot", () => {
+    const link = new LLink(1, "float", 4, 2, 5, 3)
+    expect(link.serialize()).toMatchSnapshot("Basic")
+  })
+})
diff --git a/src/lib/litegraph/test/LinkConnector.integration.test.ts b/src/lib/litegraph/test/LinkConnector.integration.test.ts
new file mode 100644
index 0000000000..39a9427221
--- /dev/null
+++ b/src/lib/litegraph/test/LinkConnector.integration.test.ts
@@ -0,0 +1,1067 @@
+import type { CanvasPointerEvent } from '../src/types/events'
+
+import { afterEach, describe, expect, vi } from "vitest"
+
+import { LGraph, LGraphNode, LLink, Reroute, type RerouteId } from '../src/litegraph'
+import { LinkConnector } from '../src/litegraph'
+
+import { test as baseTest } from "./testExtensions"
+
+interface TestContext {
+  graph: LGraph
+  connector: LinkConnector
+  setConnectingLinks: ReturnType<typeof vi.fn>
+  createTestNode: (id: number) => LGraphNode
+  reroutesBeforeTest: [rerouteId: RerouteId, reroute: Reroute][]
+  validateIntegrityNoChanges: () => void
+  validateIntegrityFloatingRemoved: () => void
+  validateLinkIntegrity: () => void
+  getNextLinkIds: (linkIds: Set<number>, expectedExtraLinks?: number) => number[]
+  readonly floatingReroute: Reroute
+}
+
+const test = baseTest.extend<TestContext>({
+  reroutesBeforeTest: async ({ reroutesComplexGraph }, use) => {
+    await use([...reroutesComplexGraph.reroutes])
+  },
+
+  graph: async ({ reroutesComplexGraph }, use) => {
+    const ctx = vi.fn(() => ({ measureText: vi.fn(() => ({ width: 10 })) }))
+    for (const node of reroutesComplexGraph.nodes) {
+      node.updateArea(ctx() as unknown as CanvasRenderingContext2D)
+    }
+    await use(reroutesComplexGraph)
+  },
+  setConnectingLinks: async ({}, use: (mock: ReturnType<typeof vi.fn>) => Promise<void>) => {
+    const mock = vi.fn()
+    await use(mock)
+  },
+  connector: async ({ setConnectingLinks }, use) => {
+    const connector = new LinkConnector(setConnectingLinks)
+    await use(connector)
+  },
+  createTestNode: async ({ graph }, use) => {
+    await use((id): LGraphNode => {
+      const node = new LGraphNode("test")
+      node.id = id
+      graph.add(node)
+      return node
+    })
+  },
+
+  validateIntegrityNoChanges: async ({ graph, reroutesBeforeTest, expect }, use) => {
+    await use(() => {
+      expect(graph.floatingLinks.size).toBe(1)
+      expect([...graph.reroutes]).toEqual(reroutesBeforeTest)
+
+      // Only the original reroute should be floating
+      const reroutesExceptOne = [...graph.reroutes.values()].filter(reroute => reroute.id !== 1)
+      for (const reroute of reroutesExceptOne) {
+        expect(reroute.floating).toBeUndefined()
+      }
+    })
+  },
+
+  validateIntegrityFloatingRemoved: async ({ graph, reroutesBeforeTest, expect }, use) => {
+    await use(() => {
+      expect(graph.floatingLinks.size).toBe(0)
+      expect([...graph.reroutes]).toEqual(reroutesBeforeTest)
+
+      for (const reroute of graph.reroutes.values()) {
+        expect(reroute.floating).toBeUndefined()
+      }
+    })
+  },
+
+  validateLinkIntegrity: async ({ graph, expect }, use) => {
+    await use(() => {
+      for (const reroute of graph.reroutes.values()) {
+        if (reroute.origin_id === undefined) {
+          expect(reroute.linkIds.size).toBe(0)
+          expect(reroute.floatingLinkIds.size).toBeGreaterThan(0)
+        }
+
+        for (const linkId of reroute.linkIds) {
+          const link = graph.links.get(linkId)
+          expect(link).toBeDefined()
+          expect(link!.origin_id).toEqual(reroute.origin_id)
+          expect(link!.origin_slot).toEqual(reroute.origin_slot)
+        }
+        for (const linkId of reroute.floatingLinkIds) {
+          const link = graph.floatingLinks.get(linkId)
+          expect(link).toBeDefined()
+
+          if (link!.target_id === -1) {
+            expect(link!.origin_id).not.toBe(-1)
+            expect(link!.origin_slot).not.toBe(-1)
+            expect(link!.target_slot).toBe(-1)
+          } else {
+            expect(link!.origin_id).toBe(-1)
+            expect(link!.origin_slot).toBe(-1)
+            expect(link!.target_slot).not.toBe(-1)
+          }
+        }
+      }
+
+      // Check that all link references are valid (Can be found in the graph)
+      for (const node of graph.nodes.values()) {
+        for (const input of node.inputs) {
+          if (input.link) {
+            expect(graph.links.keys()).toContain(input.link)
+            expect(graph.links.get(input.link)?.target_id).toBe(node.id)
+          }
+        }
+        for (const output of node.outputs) {
+          for (const linkId of output.links ?? []) {
+            expect(graph.links.keys()).toContain(linkId)
+            expect(graph.links.get(linkId)?.origin_id).toBe(node.id)
+          }
+        }
+      }
+
+      for (const link of graph._links.values()) {
+        expect(graph.getNodeById(link!.origin_id)?.outputs[link!.origin_slot].links).toContain(link.id)
+        expect(graph.getNodeById(link!.target_id)?.inputs[link!.target_slot].link).toBe(link.id)
+      }
+
+      for (const link of graph.floatingLinks.values()) {
+        if (link.target_id === -1) {
+          expect(link.origin_id).not.toBe(-1)
+          expect(link.origin_slot).not.toBe(-1)
+          expect(link.target_slot).toBe(-1)
+          const outputFloatingLinks = graph.getNodeById(link.origin_id)?.outputs[link.origin_slot]._floatingLinks
+          expect(outputFloatingLinks).toBeDefined()
+          expect(outputFloatingLinks).toContain(link)
+        } else {
+          expect(link.origin_id).toBe(-1)
+          expect(link.origin_slot).toBe(-1)
+          expect(link.target_slot).not.toBe(-1)
+          const inputFloatingLinks = graph.getNodeById(link.target_id)?.inputs[link.target_slot]._floatingLinks
+          expect(inputFloatingLinks).toBeDefined()
+          expect(inputFloatingLinks).toContain(link)
+        }
+      }
+    })
+  },
+
+  getNextLinkIds: async ({ graph }, use) => {
+    await use((linkIds, expectedExtraLinks = 0) => {
+      const indexes = [...new Array(linkIds.size + expectedExtraLinks).keys()]
+      return indexes.map(index => graph.last_link_id + index + 1)
+    })
+  },
+
+  floatingReroute: async ({ graph, expect }, use) => {
+    const floatingReroute = graph.reroutes.get(1)!
+    expect(floatingReroute.floating).toEqual({ slotType: "output" })
+    await use(floatingReroute)
+  },
+})
+
+function mockedNodeTitleDropEvent(node: LGraphNode): CanvasPointerEvent {
+  return {
+    canvasX: node.pos[0] + node.size[0] / 2,
+    canvasY: node.pos[1] + 16,
+  } as any
+}
+
+function mockedInputDropEvent(node: LGraphNode, slot: number): CanvasPointerEvent {
+  const pos = node.getInputPos(slot)
+  return {
+    canvasX: pos[0],
+    canvasY: pos[1],
+  } as any
+}
+
+function mockedOutputDropEvent(node: LGraphNode, slot: number): CanvasPointerEvent {
+  const pos = node.getOutputPos(slot)
+  return {
+    canvasX: pos[0],
+    canvasY: pos[1],
+  } as any
+}
+
+describe("LinkConnector Integration", () => {
+  afterEach<TestContext>(({ validateLinkIntegrity }) => {
+    validateLinkIntegrity()
+  })
+
+  describe("Moving input links", () => {
+    test("Should move input links", ({ graph, connector }) => {
+      const nextLinkId = graph.last_link_id + 1
+
+      const hasInputNode = graph.getNodeById(2)!
+      const disconnectedNode = graph.getNodeById(9)!
+
+      const reroutesBefore = LLink.getReroutes(graph, graph.links.get(hasInputNode.inputs[0].link!)!)
+
+      connector.moveInputLink(graph, hasInputNode.inputs[0])
+      expect(connector.state.connectingTo).toBe("input")
+      expect(connector.state.draggingExistingLinks).toBe(true)
+      expect(connector.renderLinks.length).toBe(1)
+      expect(connector.inputLinks.length).toBe(1)
+
+      const canvasX = disconnectedNode.pos[0] + disconnectedNode.size[0] / 2
+      const canvasY = disconnectedNode.pos[1] + 16
+      const dropEvent = { canvasX, canvasY } as any
+
+      // Drop links, ensure reset has not been run
+      connector.dropLinks(graph, dropEvent)
+      expect(connector.renderLinks.length).toBe(1)
+
+      // Test reset
+      connector.reset()
+      expect(connector.renderLinks.length).toBe(0)
+      expect(connector.inputLinks.length).toBe(0)
+
+      expect(disconnectedNode.inputs[0].link).toBe(nextLinkId)
+      expect(hasInputNode.inputs[0].link).toBeNull()
+
+      const reroutesAfter = LLink.getReroutes(graph, graph.links.get(disconnectedNode.inputs[0].link!)!)
+      expect(reroutesAfter).toEqual(reroutesBefore)
+    })
+
+    test("Should connect from floating reroutes", ({ graph, connector, reroutesBeforeTest }) => {
+      const nextLinkId = graph.last_link_id + 1
+
+      const floatingLink = graph.floatingLinks.values().next().value!
+      expect(floatingLink).toBeInstanceOf(LLink)
+      const floatingReroute = graph.reroutes.get(floatingLink.parentId!)!
+
+      const disconnectedNode = graph.getNodeById(9)!
+      connector.dragFromReroute(graph, floatingReroute)
+
+      expect(connector.state.connectingTo).toBe("input")
+      expect(connector.state.draggingExistingLinks).toBe(false)
+      expect(connector.renderLinks.length).toBe(1)
+      expect(connector.inputLinks.length).toBe(0)
+
+      const canvasX = disconnectedNode.pos[0] + disconnectedNode.size[0] / 2
+      const canvasY = disconnectedNode.pos[1] + 16
+      const dropEvent = { canvasX, canvasY } as any
+
+      connector.dropLinks(graph, dropEvent)
+      connector.reset()
+      expect(connector.renderLinks.length).toBe(0)
+      expect(connector.inputLinks.length).toBe(0)
+
+      // New link should have been created
+      expect(disconnectedNode.inputs[0].link).toBe(nextLinkId)
+
+      // Check graph integrity
+      expect(graph.floatingLinks.size).toBe(0)
+      expect([...graph.reroutes]).toEqual(reroutesBeforeTest)
+
+      // All reroute floating property should be cleared
+      for (const reroute of graph.reroutes.values()) {
+        expect(reroute.floating).toBeUndefined()
+      }
+    })
+
+    test("Should drop floating links when both sides are disconnected", ({ graph, reroutesBeforeTest }) => {
+      expect(graph.floatingLinks.size).toBe(1)
+
+      const floatingOutNode = graph.getNodeById(1)!
+      floatingOutNode.disconnectOutput(0)
+
+      // Should have lost one reroute
+      expect(graph.reroutes.size).toBe(reroutesBeforeTest.length - 1)
+      expect(graph.reroutes.get(1)).toBeUndefined()
+
+      // The two normal links should now be floating
+      expect(graph.floatingLinks.size).toBe(2)
+
+      graph.getNodeById(2)!.disconnectInput(0, true)
+      expect(graph.floatingLinks.size).toBe(1)
+
+      graph.getNodeById(3)!.disconnectInput(0, false)
+      expect(graph.floatingLinks.size).toBe(0)
+
+      // Removed 4 reroutes
+      expect(graph.reroutes.size).toBe(9)
+
+      // All four nodes should have no links
+      for (const nodeId of [1, 2, 3, 9]) {
+        const { inputs: [input], outputs: [output] } = graph.getNodeById(nodeId)!
+
+        expect(input.link).toBeNull()
+        expect(output.links?.length).toBeOneOf([0, undefined])
+
+        expect(input._floatingLinks?.size).toBeOneOf([0, undefined])
+        expect(output._floatingLinks?.size).toBeOneOf([0, undefined])
+      }
+    })
+
+    test("Should prevent node loopback when dropping on node", ({ graph, connector }) => {
+      const hasOutputNode = graph.getNodeById(1)!
+      const hasInputNode = graph.getNodeById(2)!
+      const hasInputNode2 = graph.getNodeById(3)!
+
+      const reroutesBefore = LLink.getReroutes(graph, graph.links.get(hasInputNode.inputs[0].link!)!)
+
+      const atOutputNodeEvent = mockedNodeTitleDropEvent(hasOutputNode)
+
+      connector.moveInputLink(graph, hasInputNode.inputs[0])
+      connector.dropLinks(graph, atOutputNodeEvent)
+      connector.reset()
+
+      const outputNodes = hasOutputNode.getOutputNodes(0)
+      expect(outputNodes).toEqual([hasInputNode, hasInputNode2])
+
+      const reroutesAfter = LLink.getReroutes(graph, graph.links.get(hasInputNode.inputs[0].link!)!)
+      expect(reroutesAfter).toEqual(reroutesBefore)
+    })
+
+    test("Should prevent node loopback when dropping on input", ({ graph, connector }) => {
+      const hasOutputNode = graph.getNodeById(1)!
+      const hasInputNode = graph.getNodeById(2)!
+
+      const originalOutputNodes = hasOutputNode.getOutputNodes(0)
+      const reroutesBefore = LLink.getReroutes(graph, graph.links.get(hasInputNode.inputs[0].link!)!)
+
+      const atHasOutputNode = mockedInputDropEvent(hasOutputNode, 0)
+
+      connector.moveInputLink(graph, hasInputNode.inputs[0])
+      connector.dropLinks(graph, atHasOutputNode)
+      connector.reset()
+
+      const outputNodes = hasOutputNode.getOutputNodes(0)
+      expect(outputNodes).toEqual(originalOutputNodes)
+
+      const reroutesAfter = LLink.getReroutes(graph, graph.links.get(hasInputNode.inputs[0].link!)!)
+      expect(reroutesAfter).toEqual(reroutesBefore)
+    })
+  })
+
+  describe("Moving output links", () => {
+    test("Should move output links", ({ graph, connector }) => {
+      const nextLinkIds = [graph.last_link_id + 1, graph.last_link_id + 2]
+
+      const hasOutputNode = graph.getNodeById(1)!
+      const disconnectedNode = graph.getNodeById(9)!
+
+      const reroutesBefore = hasOutputNode.outputs[0].links
+        ?.map(linkId => graph.links.get(linkId)!)
+        .map(link => LLink.getReroutes(graph, link))
+
+      connector.moveOutputLink(graph, hasOutputNode.outputs[0])
+      expect(connector.state.connectingTo).toBe("output")
+      expect(connector.state.draggingExistingLinks).toBe(true)
+      expect(connector.renderLinks.length).toBe(3)
+      expect(connector.outputLinks.length).toBe(2)
+      expect(connector.floatingLinks.length).toBe(1)
+
+      const canvasX = disconnectedNode.pos[0] + disconnectedNode.size[0] / 2
+      const canvasY = disconnectedNode.pos[1] + 16
+      const dropEvent = { canvasX, canvasY } as any
+
+      connector.dropLinks(graph, dropEvent)
+      connector.reset()
+      expect(connector.renderLinks.length).toBe(0)
+      expect(connector.outputLinks.length).toBe(0)
+
+      expect(disconnectedNode.outputs[0].links).toEqual(nextLinkIds)
+      expect(hasOutputNode.outputs[0].links).toEqual([])
+
+      const reroutesAfter = disconnectedNode.outputs[0].links
+        ?.map(linkId => graph.links.get(linkId)!)
+        .map(link => LLink.getReroutes(graph, link))
+
+      expect(reroutesAfter).toEqual(reroutesBefore)
+    })
+
+    test("Should connect to floating reroutes from outputs", ({ graph, connector, reroutesBeforeTest }) => {
+      const nextLinkIds = [graph.last_link_id + 1, graph.last_link_id + 2]
+
+      const floatingOutNode = graph.getNodeById(1)!
+      floatingOutNode.disconnectOutput(0)
+
+      // Should have lost one reroute
+      expect(graph.reroutes.size).toBe(reroutesBeforeTest.length - 1)
+      expect(graph.reroutes.get(1)).toBeUndefined()
+
+      // The two normal links should now be floating
+      expect(graph.floatingLinks.size).toBe(2)
+
+      const disconnectedNode = graph.getNodeById(9)!
+      connector.dragNewFromOutput(graph, disconnectedNode, disconnectedNode.outputs[0])
+
+      expect(connector.state.connectingTo).toBe("input")
+      expect(connector.state.draggingExistingLinks).toBe(false)
+      expect(connector.renderLinks.length).toBe(1)
+      expect(connector.outputLinks.length).toBe(0)
+      expect(connector.floatingLinks.length).toBe(0)
+
+      const floatingLink = graph.floatingLinks.values().next().value!
+      expect(floatingLink).toBeInstanceOf(LLink)
+      const floatingReroute = LLink.getReroutes(graph, floatingLink)[0]
+
+      const canvasX = floatingReroute.pos[0]
+      const canvasY = floatingReroute.pos[1]
+      const dropEvent = { canvasX, canvasY } as any
+
+      connector.dropLinks(graph, dropEvent)
+      connector.reset()
+      expect(connector.renderLinks.length).toBe(0)
+      expect(connector.outputLinks.length).toBe(0)
+
+      // New link should have been created
+      expect(disconnectedNode.outputs[0].links).toEqual(nextLinkIds)
+
+      // Check graph integrity
+      expect(graph.floatingLinks.size).toBe(0)
+      expect([...graph.reroutes]).toEqual(reroutesBeforeTest.slice(1))
+
+      for (const reroute of graph.reroutes.values()) {
+        expect(reroute.floating).toBeUndefined()
+      }
+    })
+
+    test("Should drop floating links when both sides are disconnected", ({ graph, reroutesBeforeTest }) => {
+      expect(graph.floatingLinks.size).toBe(1)
+
+      graph.getNodeById(2)!.disconnectInput(0, true)
+      expect(graph.floatingLinks.size).toBe(1)
+
+      // Only the original reroute should be floating
+      const reroutesExceptOne = [...graph.reroutes.values()].filter(reroute => reroute.id !== 1)
+      for (const reroute of reroutesExceptOne) {
+        expect(reroute.floating).toBeUndefined()
+      }
+
+      graph.getNodeById(3)!.disconnectInput(0, true)
+      expect([...graph.reroutes]).toEqual(reroutesBeforeTest)
+
+      // The normal link should now be floating
+      expect(graph.floatingLinks.size).toBe(2)
+      expect(graph.reroutes.get(3)!.floating).toEqual({ slotType: "output" })
+
+      const floatingOutNode = graph.getNodeById(1)!
+      floatingOutNode.disconnectOutput(0)
+
+      // Should have lost one reroute
+      expect(graph.reroutes.size).toBe(9)
+      expect(graph.reroutes.get(1)).toBeUndefined()
+
+      // Removed 4 reroutes
+      expect(graph.reroutes.size).toBe(9)
+
+      // All four nodes should have no links
+      for (const nodeId of [1, 2, 3, 9]) {
+        const { inputs: [input], outputs: [output] } = graph.getNodeById(nodeId)!
+
+        expect(input.link).toBeNull()
+        expect(output.links?.length).toBeOneOf([0, undefined])
+
+        expect(input._floatingLinks?.size).toBeOneOf([0, undefined])
+        expect(output._floatingLinks?.size).toBeOneOf([0, undefined])
+      }
+    })
+
+    test("Should support moving multiple output links to a floating reroute", ({ graph, connector, floatingReroute, validateIntegrityFloatingRemoved }) => {
+      const manyOutputsNode = graph.getNodeById(4)!
+      const canvasX = floatingReroute.pos[0]
+      const canvasY = floatingReroute.pos[1]
+      const floatingRerouteEvent = { canvasX, canvasY } as any
+
+      connector.moveOutputLink(graph, manyOutputsNode.outputs[0])
+      connector.dropLinks(graph, floatingRerouteEvent)
+      connector.reset()
+
+      expect(manyOutputsNode.outputs[0].links).toEqual([])
+      expect(floatingReroute.linkIds.size).toBe(4)
+
+      validateIntegrityFloatingRemoved()
+    })
+
+    test("Should prevent dragging from an output to a child reroute", ({ graph, connector, floatingReroute }) => {
+      const manyOutputsNode = graph.getNodeById(4)!
+
+      const reroute7 = graph.reroutes.get(7)!
+      const reroute10 = graph.reroutes.get(10)!
+      const reroute13 = graph.reroutes.get(13)!
+
+      const canvasX = reroute7.pos[0]
+      const canvasY = reroute7.pos[1]
+      const reroute7Event = { canvasX, canvasY } as any
+
+      const toSortedRerouteChain = (linkIds: number[]) => linkIds
+        .map(x => graph.links.get(x)!)
+        .map(x => LLink.getReroutes(graph, x))
+        .sort((a, b) => a.at(-1)!.id - b.at(-1)!.id)
+
+      const reroutesBefore = toSortedRerouteChain(manyOutputsNode.outputs[0].links!)
+
+      connector.moveOutputLink(graph, manyOutputsNode.outputs[0])
+      expect(connector.isRerouteValidDrop(reroute7)).toBe(false)
+      expect(connector.isRerouteValidDrop(reroute10)).toBe(false)
+      expect(connector.isRerouteValidDrop(reroute13)).toBe(false)
+
+      // Prevent link disconnect when dropped on canvas (just for this test)
+      connector.events.addEventListener("dropped-on-canvas", e => e.preventDefault(), { once: true })
+      connector.dropLinks(graph, reroute7Event)
+      connector.reset()
+
+      const reroutesAfter = toSortedRerouteChain(manyOutputsNode.outputs[0].links!)
+      expect(reroutesAfter).toEqual(reroutesBefore)
+
+      expect(graph.floatingLinks.size).toBe(1)
+      expect(floatingReroute.linkIds.size).toBe(0)
+    })
+
+    test("Should prevent node loopback when dropping on node", ({ graph, connector }) => {
+      const hasOutputNode = graph.getNodeById(1)!
+      const hasInputNode = graph.getNodeById(2)!
+
+      const reroutesBefore = LLink.getReroutes(graph, graph.links.get(hasOutputNode.outputs[0].links![0])!)
+
+      const atInputNodeEvent = mockedNodeTitleDropEvent(hasInputNode)
+
+      connector.moveOutputLink(graph, hasOutputNode.outputs[0])
+      connector.dropLinks(graph, atInputNodeEvent)
+      connector.reset()
+
+      expect(hasOutputNode.getOutputNodes(0)).toEqual([hasInputNode])
+      expect(hasInputNode.getOutputNodes(0)).toEqual([graph.getNodeById(3)])
+
+      // Moved link should have the same reroutes
+      const reroutesAfter = LLink.getReroutes(graph, graph.links.get(hasInputNode.outputs[0].links![0])!)
+      expect(reroutesAfter).toEqual(reroutesBefore)
+
+      // Link recreated to avoid loopback should have no reroutes
+      const reroutesAfter2 = LLink.getReroutes(graph, graph.links.get(hasOutputNode.outputs[0].links![0])!)
+      expect(reroutesAfter2).toEqual([])
+    })
+
+    test("Should prevent node loopback when dropping on output", ({ graph, connector }) => {
+      const hasOutputNode = graph.getNodeById(1)!
+      const hasInputNode = graph.getNodeById(2)!
+
+      const reroutesBefore = LLink.getReroutes(graph, graph.links.get(hasOutputNode.outputs[0].links![0])!)
+
+      const atInputNodeOutSlot = mockedOutputDropEvent(hasInputNode, 0)
+
+      connector.moveOutputLink(graph, hasOutputNode.outputs[0])
+      connector.dropLinks(graph, atInputNodeOutSlot)
+      connector.reset()
+
+      expect(hasOutputNode.getOutputNodes(0)).toEqual([hasInputNode])
+      expect(hasInputNode.getOutputNodes(0)).toEqual([graph.getNodeById(3)])
+
+      // Moved link should have the same reroutes
+      const reroutesAfter = LLink.getReroutes(graph, graph.links.get(hasInputNode.outputs[0].links![0])!)
+      expect(reroutesAfter).toEqual(reroutesBefore)
+
+      // Link recreated to avoid loopback should have no reroutes
+      const reroutesAfter2 = LLink.getReroutes(graph, graph.links.get(hasOutputNode.outputs[0].links![0])!)
+      expect(reroutesAfter2).toEqual([])
+    })
+  })
+
+  describe("Floating links", () => {
+    test("Removed when connecting from reroute to input", ({ graph, connector, floatingReroute }) => {
+      const disconnectedNode = graph.getNodeById(9)!
+      const canvasX = disconnectedNode.pos[0]
+      const canvasY = disconnectedNode.pos[1]
+
+      connector.dragFromReroute(graph, floatingReroute)
+      connector.dropLinks(graph, { canvasX, canvasY } as any)
+      connector.reset()
+
+      expect(graph.floatingLinks.size).toBe(0)
+      expect(floatingReroute.floating).toBeUndefined()
+    })
+
+    test("Removed when connecting from reroute to another reroute", ({ graph, connector, floatingReroute, validateIntegrityFloatingRemoved }) => {
+      const reroute8 = graph.reroutes.get(8)!
+      const canvasX = reroute8.pos[0]
+      const canvasY = reroute8.pos[1]
+
+      connector.dragFromReroute(graph, floatingReroute)
+      connector.dropLinks(graph, { canvasX, canvasY } as any)
+      connector.reset()
+
+      expect(graph.floatingLinks.size).toBe(0)
+      expect(floatingReroute.floating).toBeUndefined()
+      expect(reroute8.floating).toBeUndefined()
+
+      validateIntegrityFloatingRemoved()
+    })
+
+    test("Dropping a floating input link onto input slot disconnects the existing link", ({ graph, connector }) => {
+      const manyOutputsNode = graph.getNodeById(4)!
+      manyOutputsNode.disconnectOutput(0)
+
+      const floatingInputNode = graph.getNodeById(6)!
+      const fromFloatingInput = floatingInputNode.inputs[0]
+
+      const hasInputNode = graph.getNodeById(2)!
+      const toInput = hasInputNode.inputs[0]
+
+      connector.moveInputLink(graph, fromFloatingInput)
+      const dropEvent = mockedInputDropEvent(hasInputNode, 0)
+      connector.dropLinks(graph, dropEvent)
+      connector.reset()
+
+      expect(fromFloatingInput.link).toBeNull()
+      expect(fromFloatingInput._floatingLinks?.size).toBe(0)
+
+      expect(toInput.link).toBeNull()
+      expect(toInput._floatingLinks?.size).toBe(1)
+    })
+
+    test("Allow reroutes to be used as manual switches", ({ graph, connector, floatingReroute, validateIntegrityNoChanges }) => {
+      const rerouteWithTwoLinks = graph.reroutes.get(3)!
+      const targetNode = graph.getNodeById(2)!
+
+      const targetDropEvent = mockedInputDropEvent(targetNode, 0)
+
+      connector.dragFromReroute(graph, floatingReroute)
+      connector.dropLinks(graph, targetDropEvent)
+      connector.reset()
+
+      // Link should have been moved to the floating reroute, and no floating links should remain
+      expect(rerouteWithTwoLinks.floating).toBeUndefined()
+      expect(floatingReroute.floating).toBeUndefined()
+      expect(rerouteWithTwoLinks.floatingLinkIds.size).toBe(0)
+      expect(floatingReroute.floatingLinkIds.size).toBe(0)
+      expect(rerouteWithTwoLinks.linkIds.size).toBe(1)
+      expect(floatingReroute.linkIds.size).toBe(1)
+
+      // Move the link again
+      connector.dragFromReroute(graph, rerouteWithTwoLinks)
+      connector.dropLinks(graph, targetDropEvent)
+      connector.reset()
+
+      // Everything should be back the way it was when we started
+      expect(rerouteWithTwoLinks.floating).toBeUndefined()
+      expect(floatingReroute.floating).toEqual({ slotType: "output" })
+      expect(rerouteWithTwoLinks.floatingLinkIds.size).toBe(0)
+      expect(floatingReroute.floatingLinkIds.size).toBe(1)
+      expect(rerouteWithTwoLinks.linkIds.size).toBe(2)
+      expect(floatingReroute.linkIds.size).toBe(0)
+
+      validateIntegrityNoChanges()
+    })
+  })
+
+  test("Should drop floating links when both sides are disconnected", ({ graph, connector, reroutesBeforeTest, validateIntegrityNoChanges }) => {
+    const floatingOutNode = graph.getNodeById(1)!
+    connector.moveOutputLink(graph, floatingOutNode.outputs[0])
+
+    const manyOutputsNode = graph.getNodeById(4)!
+    const dropEvent = { canvasX: manyOutputsNode.pos[0], canvasY: manyOutputsNode.pos[1] } as any
+    connector.dropLinks(graph, dropEvent)
+    connector.reset()
+
+    const output = manyOutputsNode.outputs[0]
+    expect(output.links!.length).toBe(6)
+    expect(output._floatingLinks!.size).toBe(1)
+
+    validateIntegrityNoChanges()
+
+    // Move again
+    connector.moveOutputLink(graph, manyOutputsNode.outputs[0])
+
+    const disconnectedNode = graph.getNodeById(9)!
+    dropEvent.canvasX = disconnectedNode.pos[0]
+    dropEvent.canvasY = disconnectedNode.pos[1]
+    connector.dropLinks(graph, dropEvent)
+    connector.reset()
+
+    const newOutput = disconnectedNode.outputs[0]
+    expect(newOutput.links!.length).toBe(6)
+    expect(newOutput._floatingLinks!.size).toBe(1)
+
+    validateIntegrityNoChanges()
+
+    disconnectedNode.disconnectOutput(0)
+
+    expect(newOutput._floatingLinks!.size).toBe(0)
+    expect(graph.floatingLinks.size).toBe(6)
+
+    // The final reroutes should all be floating
+    for (const reroute of graph.reroutes.values()) {
+      if ([3, 7, 15, 12].includes(reroute.id)) {
+        expect(reroute.floating).toEqual({ slotType: "input" })
+      } else {
+        expect(reroute.floating).toBeUndefined()
+      }
+    }
+
+    // Removed one reroute
+    expect(graph.reroutes.size).toBe(reroutesBeforeTest.length - 1)
+
+    // Original nodes should have no links
+    for (const nodeId of [1, 4]) {
+      const { inputs: [input], outputs: [output] } = graph.getNodeById(nodeId)!
+
+      expect(input.link).toBeNull()
+      expect(output.links?.length).toBeOneOf([0, undefined])
+
+      expect(input._floatingLinks?.size).toBeOneOf([0, undefined])
+      expect(output._floatingLinks?.size).toBeOneOf([0, undefined])
+    }
+  })
+
+  type TestData = {
+    /** Drop link on this reroute */
+    targetRerouteId: number
+    /** Parent reroutes of the target reroute */
+    parentIds: number[]
+    /** Number of links before the drop */
+    linksBefore: number[]
+    /** Number of links after the drop */
+    linksAfter: (number | undefined)[]
+    /** Whether to run the integrity check */
+    runIntegrityCheck: boolean
+  }
+
+  test.for<TestData>([
+    {
+      targetRerouteId: 8,
+      parentIds: [13, 10],
+      linksBefore: [3, 4],
+      linksAfter: [1, 2],
+      runIntegrityCheck: true,
+    },
+    {
+      targetRerouteId: 7,
+      parentIds: [6, 8, 13, 10],
+      linksBefore: [2, 2, 3, 4],
+      linksAfter: [undefined, undefined, 1, 2],
+      runIntegrityCheck: false,
+    },
+    {
+      targetRerouteId: 6,
+      parentIds: [8, 13, 10],
+      linksBefore: [2, 3, 4],
+      linksAfter: [undefined, 1, 2],
+      runIntegrityCheck: false,
+    },
+    {
+      targetRerouteId: 13,
+      parentIds: [10],
+      linksBefore: [4],
+      linksAfter: [1],
+      runIntegrityCheck: true,
+    },
+    {
+      targetRerouteId: 4,
+      parentIds: [],
+      linksBefore: [],
+      linksAfter: [],
+      runIntegrityCheck: true,
+    },
+    {
+      targetRerouteId: 2,
+      parentIds: [4],
+      linksBefore: [2],
+      linksAfter: [undefined],
+      runIntegrityCheck: false,
+    },
+    {
+      targetRerouteId: 3,
+      parentIds: [2, 4],
+      linksBefore: [2, 2],
+      linksAfter: [0, 0],
+      runIntegrityCheck: true,
+    },
+  ])("Should allow reconnect from output to any reroute", (
+    { targetRerouteId, parentIds, linksBefore, linksAfter, runIntegrityCheck },
+    { graph, connector, validateIntegrityNoChanges, getNextLinkIds },
+  ) => {
+    const linkCreatedCallback = vi.fn()
+    connector.listenUntilReset("link-created", linkCreatedCallback)
+
+    const disconnectedNode = graph.getNodeById(9)!
+
+    // Parent reroutes of the target reroute
+    for (const [index, parentId] of parentIds.entries()) {
+      const reroute = graph.reroutes.get(parentId)!
+      expect(reroute.linkIds.size).toBe(linksBefore[index])
+    }
+
+    const targetReroute = graph.reroutes.get(targetRerouteId)!
+    const nextLinkIds = getNextLinkIds(targetReroute.linkIds)
+    const dropEvent = { canvasX: targetReroute.pos[0], canvasY: targetReroute.pos[1] } as any
+
+    connector.dragNewFromOutput(graph, disconnectedNode, disconnectedNode.outputs[0])
+    connector.dropLinks(graph, dropEvent)
+    connector.reset()
+
+    expect(disconnectedNode.outputs[0].links).toEqual(nextLinkIds)
+    expect([...targetReroute.linkIds.values()]).toEqual(nextLinkIds)
+
+    // Parent reroutes should have lost the links or been removed
+    for (const [index, parentId] of parentIds.entries()) {
+      const reroute = graph.reroutes.get(parentId)!
+      if (linksAfter[index] === undefined) {
+        expect(reroute).not.toBeUndefined()
+      } else {
+        expect(reroute.linkIds.size).toBe(linksAfter[index])
+      }
+    }
+
+    expect(linkCreatedCallback).toHaveBeenCalledTimes(nextLinkIds.length)
+
+    if (runIntegrityCheck) {
+      validateIntegrityNoChanges()
+    }
+  })
+
+  type ReconnectTestData = {
+    /** Drag link from this reroute */
+    fromRerouteId: number
+    /** Drop link on this reroute */
+    toRerouteId: number
+    /** Reroute IDs that should be removed from the resultant reroute chain */
+    shouldBeRemoved: number[]
+    /** Reroutes that should have NONE of the link IDs that toReroute has */
+    shouldHaveLinkIdsRemoved: number[]
+    /** Whether to test floating inputs */
+    testFloatingInputs?: true
+    /** Number of expected extra links to be created */
+    expectedExtraLinks?: number
+  }
+
+  test.for<ReconnectTestData>([
+    {
+      fromRerouteId: 10,
+      toRerouteId: 15,
+      shouldBeRemoved: [14],
+      shouldHaveLinkIdsRemoved: [13, 8, 6, 7],
+    },
+    {
+      fromRerouteId: 8,
+      toRerouteId: 2,
+      shouldBeRemoved: [4],
+      shouldHaveLinkIdsRemoved: [],
+    },
+    {
+      fromRerouteId: 3,
+      toRerouteId: 12,
+      shouldBeRemoved: [11],
+      shouldHaveLinkIdsRemoved: [10, 13, 14, 15, 8, 6, 7],
+    },
+    {
+      fromRerouteId: 15,
+      toRerouteId: 7,
+      shouldBeRemoved: [8, 6],
+      shouldHaveLinkIdsRemoved: [],
+    },
+    {
+      fromRerouteId: 1,
+      toRerouteId: 7,
+      shouldBeRemoved: [8, 6],
+      shouldHaveLinkIdsRemoved: [],
+    },
+    {
+      fromRerouteId: 1,
+      toRerouteId: 10,
+      shouldBeRemoved: [],
+      shouldHaveLinkIdsRemoved: [],
+    },
+    {
+      fromRerouteId: 4,
+      toRerouteId: 8,
+      shouldBeRemoved: [],
+      shouldHaveLinkIdsRemoved: [],
+      testFloatingInputs: true,
+      expectedExtraLinks: 2,
+    },
+    {
+      fromRerouteId: 2,
+      toRerouteId: 12,
+      shouldBeRemoved: [11],
+      shouldHaveLinkIdsRemoved: [],
+      testFloatingInputs: true,
+      expectedExtraLinks: 1,
+    },
+  ])("Should allow connecting from reroutes to another reroute", (
+    { fromRerouteId, toRerouteId, shouldBeRemoved, shouldHaveLinkIdsRemoved, testFloatingInputs, expectedExtraLinks },
+    { graph, connector, getNextLinkIds },
+  ) => {
+    if (testFloatingInputs) {
+      // Start by disconnecting the output of the 3x3 array of reroutes
+      graph.getNodeById(4)!.disconnectOutput(0)
+    }
+
+    const fromReroute = graph.reroutes.get(fromRerouteId)!
+    const toReroute = graph.reroutes.get(toRerouteId)!
+    const nextLinkIds = getNextLinkIds(toReroute.linkIds, expectedExtraLinks)
+
+    const originalParentChain = LLink.getReroutes(graph, toReroute)
+
+    const sortAndJoin = (numbers: Iterable<number>) => [...numbers].sort().join(",")
+    const hasIdenticalLinks = (a: Reroute, b: Reroute) =>
+      sortAndJoin(a.linkIds) === sortAndJoin(b.linkIds) &&
+      sortAndJoin(a.floatingLinkIds) === sortAndJoin(b.floatingLinkIds)
+
+    // Sanity check shouldBeRemoved
+    const reroutesWithIdenticalLinkIds = originalParentChain.filter(parent => hasIdenticalLinks(parent, toReroute))
+    expect(reroutesWithIdenticalLinkIds.map(reroute => reroute.id)).toEqual(shouldBeRemoved)
+
+    connector.dragFromReroute(graph, fromReroute)
+
+    const dropEvent = { canvasX: toReroute.pos[0], canvasY: toReroute.pos[1] } as any
+    connector.dropLinks(graph, dropEvent)
+    connector.reset()
+
+    const newParentChain = LLink.getReroutes(graph, toReroute)
+    for (const rerouteId of shouldBeRemoved) {
+      expect(originalParentChain.map(reroute => reroute.id)).toContain(rerouteId)
+      expect(newParentChain.map(reroute => reroute.id)).not.toContain(rerouteId)
+    }
+
+    expect([...toReroute.linkIds.values()]).toEqual(nextLinkIds)
+
+    for (const rerouteId of shouldBeRemoved) {
+      const reroute = graph.reroutes.get(rerouteId)!
+      if (testFloatingInputs) {
+        // Already-floating reroutes should be removed
+        expect(reroute).toBeUndefined()
+      } else {
+        // Non-floating reroutes should still exist
+        expect(reroute).not.toBeUndefined()
+      }
+    }
+
+    for (const rerouteId of shouldHaveLinkIdsRemoved) {
+      const reroute = graph.reroutes.get(rerouteId)!
+      for (const linkId of toReroute.linkIds) {
+        expect(reroute.linkIds).not.toContain(linkId)
+      }
+    }
+
+    // Validate all links in a reroute share the same origin
+    for (const reroute of graph.reroutes.values()) {
+      for (const linkId of reroute.linkIds) {
+        const link = graph.links.get(linkId)
+        expect(link?.origin_id).toEqual(reroute.origin_id)
+        expect(link?.origin_slot).toEqual(reroute.origin_slot)
+      }
+      for (const linkId of reroute.floatingLinkIds) {
+        if (reroute.origin_id === undefined) continue
+
+        const link = graph.floatingLinks.get(linkId)
+        expect(link?.origin_id).toEqual(reroute.origin_id)
+        expect(link?.origin_slot).toEqual(reroute.origin_slot)
+      }
+    }
+  })
+
+  test.for([
+    { from: 8, to: 13 },
+    { from: 7, to: 13 },
+    { from: 6, to: 13 },
+    { from: 13, to: 10 },
+    { from: 14, to: 10 },
+    { from: 15, to: 10 },
+    { from: 14, to: 13 },
+    { from: 10, to: 10 },
+  ])("Connecting reroutes to invalid targets should do nothing", (
+    { from, to },
+    { graph, connector, validateIntegrityNoChanges },
+  ) => {
+    const listener = vi.fn()
+    connector.listenUntilReset("link-created", listener)
+
+    const fromReroute = graph.reroutes.get(from)!
+    const toReroute = graph.reroutes.get(to)!
+
+    const dropEvent = { canvasX: toReroute.pos[0], canvasY: toReroute.pos[1] } as any
+
+    connector.dragFromReroute(graph, fromReroute)
+    connector.dropLinks(graph, dropEvent)
+    connector.reset()
+
+    expect(listener).not.toHaveBeenCalled()
+    validateIntegrityNoChanges()
+  })
+
+  const nodeReroutePairs = [
+    { nodeId: 1, rerouteId: 1 },
+    { nodeId: 1, rerouteId: 3 },
+    { nodeId: 1, rerouteId: 4 },
+    { nodeId: 1, rerouteId: 2 },
+    { nodeId: 4, rerouteId: 7 },
+    { nodeId: 4, rerouteId: 6 },
+    { nodeId: 4, rerouteId: 8 },
+    { nodeId: 4, rerouteId: 10 },
+    { nodeId: 4, rerouteId: 12 },
+  ]
+  test.for(nodeReroutePairs)("Should ignore connections from input to same node via reroutes", (
+    { nodeId, rerouteId },
+    { graph, connector, validateIntegrityNoChanges },
+  ) => {
+    const listener = vi.fn()
+    connector.listenUntilReset("link-created", listener)
+
+    const node = graph.getNodeById(nodeId)!
+    const input = node.inputs[0]
+    const reroute = graph.getReroute(rerouteId)!
+    const dropEvent = { canvasX: reroute.pos[0], canvasY: reroute.pos[1] } as any
+
+    connector.dragNewFromInput(graph, node, input)
+    connector.dropLinks(graph, dropEvent)
+    connector.reset()
+
+    expect(listener).not.toHaveBeenCalled()
+    validateIntegrityNoChanges()
+
+    // No links should have the same origin_id and target_id
+    for (const link of graph.links.values()) {
+      expect(link.origin_id).not.toEqual(link.target_id)
+    }
+  })
+
+  test.for(nodeReroutePairs)("Should ignore connections looping back to the origin node from a reroute", (
+    { nodeId, rerouteId },
+    { graph, connector, validateIntegrityNoChanges },
+  ) => {
+    const listener = vi.fn()
+    connector.listenUntilReset("link-created", listener)
+
+    const node = graph.getNodeById(nodeId)!
+    const reroute = graph.getReroute(rerouteId)!
+    const dropEvent = { canvasX: node.pos[0], canvasY: node.pos[1] } as any
+
+    connector.dragFromReroute(graph, reroute)
+    connector.dropLinks(graph, dropEvent)
+    connector.reset()
+
+    expect(listener).not.toHaveBeenCalled()
+    validateIntegrityNoChanges()
+
+    // No links should have the same origin_id and target_id
+    for (const link of graph.links.values()) {
+      expect(link.origin_id).not.toEqual(link.target_id)
+    }
+  })
+
+  test.for(nodeReroutePairs)("Should ignore connections looping back to the origin node input from a reroute", (
+    { nodeId, rerouteId },
+    { graph, connector, validateIntegrityNoChanges },
+  ) => {
+    const listener = vi.fn()
+    connector.listenUntilReset("link-created", listener)
+
+    const node = graph.getNodeById(nodeId)!
+    const reroute = graph.getReroute(rerouteId)!
+    const inputPos = node.getInputPos(0)
+    const dropOnInputEvent = { canvasX: inputPos[0], canvasY: inputPos[1] } as any
+
+    connector.dragFromReroute(graph, reroute)
+    connector.dropLinks(graph, dropOnInputEvent)
+    connector.reset()
+
+    expect(listener).not.toHaveBeenCalled()
+    validateIntegrityNoChanges()
+
+    // No links should have the same origin_id and target_id
+    for (const link of graph.links.values()) {
+      expect(link.origin_id).not.toEqual(link.target_id)
+    }
+  })
+})
diff --git a/src/lib/litegraph/test/LinkConnector.test.ts b/src/lib/litegraph/test/LinkConnector.test.ts
new file mode 100644
index 0000000000..d546ea0ad0
--- /dev/null
+++ b/src/lib/litegraph/test/LinkConnector.test.ts
@@ -0,0 +1,277 @@
+import type { MovingInputLink } from '../src/canvas/MovingInputLink'
+import type { LinkNetwork } from '../src/interfaces'
+import type { ISlotType } from '../src/interfaces'
+
+import { describe, expect, test as baseTest, vi } from "vitest"
+
+import { LinkConnector } from '../src/canvas/LinkConnector'
+import { ToInputRenderLink } from '../src/canvas/ToInputRenderLink'
+import { LGraph, LGraphNode, LLink, Reroute, type RerouteId } from '../src/litegraph'
+import { LinkDirection } from '../src/types/globalEnums'
+
+interface TestContext {
+  network: LinkNetwork & { add(node: LGraphNode): void }
+  connector: LinkConnector
+  setConnectingLinks: ReturnType<typeof vi.fn>
+  createTestNode: (id: number, slotType?: ISlotType) => LGraphNode
+  createTestLink: (id: number, sourceId: number, targetId: number, slotType?: ISlotType) => LLink
+}
+
+const test = baseTest.extend<TestContext>({
+  network: async ({}, use) => {
+    const graph = new LGraph()
+    const floatingLinks = new Map<number, LLink>()
+    const reroutes = new Map<number, Reroute>()
+
+    await use({
+      links: new Map<number, LLink>(),
+      reroutes,
+      floatingLinks,
+      getLink: graph.getLink.bind(graph),
+      getNodeById: (id: number) => graph.getNodeById(id),
+      addFloatingLink: (link: LLink) => {
+        floatingLinks.set(link.id, link)
+        return link
+      },
+      removeFloatingLink: (link: LLink) => floatingLinks.delete(link.id),
+      getReroute: ((id: RerouteId | null | undefined) => id == null ? undefined : reroutes.get(id)) as LinkNetwork["getReroute"],
+      removeReroute: (id: number) => reroutes.delete(id),
+      add: (node: LGraphNode) => graph.add(node),
+    })
+  },
+
+  setConnectingLinks: async ({}, use: (mock: ReturnType<typeof vi.fn>) => Promise<void>) => {
+    const mock = vi.fn()
+    await use(mock)
+  },
+  connector: async ({ setConnectingLinks }, use) => {
+    const connector = new LinkConnector(setConnectingLinks)
+    await use(connector)
+  },
+
+  createTestNode: async ({ network }, use) => {
+    await use((id: number): LGraphNode => {
+      const node = new LGraphNode("test")
+      node.id = id
+      network.add(node)
+      return node
+    })
+  },
+  createTestLink: async ({ network }, use) => {
+    await use((
+      id: number,
+      sourceId: number,
+      targetId: number,
+      slotType: ISlotType = "number",
+    ): LLink => {
+      const link = new LLink(id, slotType, sourceId, 0, targetId, 0)
+      network.links.set(link.id, link)
+      return link
+    })
+  },
+})
+
+describe("LinkConnector", () => {
+  test("should initialize with default state", ({ connector }) => {
+    expect(connector.state).toEqual({
+      connectingTo: undefined,
+      multi: false,
+      draggingExistingLinks: false,
+    })
+    expect(connector.renderLinks).toEqual([])
+    expect(connector.inputLinks).toEqual([])
+    expect(connector.outputLinks).toEqual([])
+    expect(connector.hiddenReroutes.size).toBe(0)
+  })
+
+  describe("Moving Input Links", () => {
+    test("should handle moving input links", ({ network, connector, createTestNode }) => {
+      const sourceNode = createTestNode(1)
+      const targetNode = createTestNode(2)
+
+      const slotType: ISlotType = "number"
+      sourceNode.addOutput("out", slotType)
+      targetNode.addInput("in", slotType)
+
+      const link = new LLink(1, slotType, 1, 0, 2, 0)
+      network.links.set(link.id, link)
+      targetNode.inputs[0].link = link.id
+
+      connector.moveInputLink(network, targetNode.inputs[0])
+
+      expect(connector.state.connectingTo).toBe("input")
+      expect(connector.state.draggingExistingLinks).toBe(true)
+      expect(connector.inputLinks).toContain(link)
+      expect(link._dragging).toBe(true)
+    })
+
+    test("should not move input link if already connecting", ({ connector, network }) => {
+      connector.state.connectingTo = "input"
+
+      expect(() => {
+        connector.moveInputLink(network, { link: 1 } as any)
+      }).toThrow("Already dragging links.")
+    })
+  })
+
+  describe("Moving Output Links", () => {
+    test("should handle moving output links", ({ network, connector, createTestNode }) => {
+      const sourceNode = createTestNode(1)
+      const targetNode = createTestNode(2)
+
+      const slotType: ISlotType = "number"
+      sourceNode.addOutput("out", slotType)
+      targetNode.addInput("in", slotType)
+
+      const link = new LLink(1, slotType, 1, 0, 2, 0)
+      network.links.set(link.id, link)
+      sourceNode.outputs[0].links = [link.id]
+
+      connector.moveOutputLink(network, sourceNode.outputs[0])
+
+      expect(connector.state.connectingTo).toBe("output")
+      expect(connector.state.draggingExistingLinks).toBe(true)
+      expect(connector.state.multi).toBe(true)
+      expect(connector.outputLinks).toContain(link)
+      expect(link._dragging).toBe(true)
+    })
+
+    test("should not move output link if already connecting", ({ connector, network }) => {
+      connector.state.connectingTo = "output"
+
+      expect(() => {
+        connector.moveOutputLink(network, { links: [1] } as any)
+      }).toThrow("Already dragging links.")
+    })
+  })
+
+  describe("Dragging New Links", () => {
+    test("should handle dragging new link from output", ({ network, connector, createTestNode }) => {
+      const sourceNode = createTestNode(1)
+      const slotType: ISlotType = "number"
+      sourceNode.addOutput("out", slotType)
+
+      connector.dragNewFromOutput(network, sourceNode, sourceNode.outputs[0])
+
+      expect(connector.state.connectingTo).toBe("input")
+      expect(connector.renderLinks.length).toBe(1)
+      expect(connector.state.draggingExistingLinks).toBe(false)
+    })
+
+    test("should handle dragging new link from input", ({ network, connector, createTestNode }) => {
+      const targetNode = createTestNode(1)
+      const slotType: ISlotType = "number"
+      targetNode.addInput("in", slotType)
+
+      connector.dragNewFromInput(network, targetNode, targetNode.inputs[0])
+
+      expect(connector.state.connectingTo).toBe("output")
+      expect(connector.renderLinks.length).toBe(1)
+      expect(connector.state.draggingExistingLinks).toBe(false)
+    })
+  })
+
+  describe("Dragging from reroutes", () => {
+    test("should handle dragging from reroutes", ({ network, connector, createTestNode, createTestLink }) => {
+      const originNode = createTestNode(1)
+      const targetNode = createTestNode(2)
+
+      const output = originNode.addOutput("out", "number")
+      targetNode.addInput("in", "number")
+
+      const link = createTestLink(1, 1, 2)
+      const reroute = new Reroute(1, network, [0, 0], undefined, [link.id])
+      network.reroutes.set(reroute.id, reroute)
+      link.parentId = reroute.id
+
+      connector.dragFromReroute(network, reroute)
+
+      expect(connector.state.connectingTo).toBe("input")
+      expect(connector.state.draggingExistingLinks).toBe(false)
+      expect(connector.renderLinks.length).toBe(1)
+
+      const renderLink = connector.renderLinks[0]
+      expect(renderLink instanceof ToInputRenderLink).toBe(true)
+      expect(renderLink.toType).toEqual("input")
+      expect(renderLink.node).toEqual(originNode)
+      expect(renderLink.fromSlot).toEqual(output)
+      expect(renderLink.fromReroute).toEqual(reroute)
+      expect(renderLink.fromDirection).toEqual(LinkDirection.NONE)
+      expect(renderLink.network).toEqual(network)
+    })
+  })
+
+  describe("Reset", () => {
+    test("should reset state and clear links", ({ network, connector }) => {
+      connector.state.connectingTo = "input"
+      connector.state.multi = true
+      connector.state.draggingExistingLinks = true
+
+      const link = new LLink(1, "number", 1, 0, 2, 0)
+      link._dragging = true
+      connector.inputLinks.push(link)
+
+      const reroute = new Reroute(1, network)
+      reroute.pos = [0, 0]
+      reroute._dragging = true
+      connector.hiddenReroutes.add(reroute)
+
+      connector.reset()
+
+      expect(connector.state).toEqual({
+        connectingTo: undefined,
+        multi: false,
+        draggingExistingLinks: false,
+      })
+      expect(connector.renderLinks).toEqual([])
+      expect(connector.inputLinks).toEqual([])
+      expect(connector.outputLinks).toEqual([])
+      expect(connector.hiddenReroutes.size).toBe(0)
+      expect(link._dragging).toBeUndefined()
+      expect(reroute._dragging).toBeUndefined()
+    })
+  })
+
+  describe("Event Handling", () => {
+    test("should handle event listeners until reset", ({ connector, createTestNode }) => {
+      const listener = vi.fn()
+      connector.listenUntilReset("input-moved", listener)
+
+      const sourceNode = createTestNode(1)
+
+      const mockRenderLink = {
+        node: sourceNode,
+        fromSlot: { name: "out", type: "number" },
+        fromPos: [0, 0],
+        fromDirection: LinkDirection.RIGHT,
+        toType: "input",
+        link: new LLink(1, "number", 1, 0, 2, 0),
+      } as MovingInputLink
+
+      connector.events.dispatch("input-moved", mockRenderLink)
+      expect(listener).toHaveBeenCalled()
+
+      connector.reset()
+      connector.events.dispatch("input-moved", mockRenderLink)
+      expect(listener).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe("Export", () => {
+    test("should export current state", ({ network, connector }) => {
+      connector.state.connectingTo = "input"
+      connector.state.multi = true
+
+      const link = new LLink(1, "number", 1, 0, 2, 0)
+      connector.inputLinks.push(link)
+
+      const exported = connector.export(network)
+
+      expect(exported.state).toEqual(connector.state)
+      expect(exported.inputLinks).toEqual(connector.inputLinks)
+      expect(exported.outputLinks).toEqual(connector.outputLinks)
+      expect(exported.renderLinks).toEqual(connector.renderLinks)
+      expect(exported.network).toBe(network)
+    })
+  })
+})
diff --git a/src/lib/litegraph/test/NodeSlot.test.ts b/src/lib/litegraph/test/NodeSlot.test.ts
new file mode 100644
index 0000000000..ff08453bfb
--- /dev/null
+++ b/src/lib/litegraph/test/NodeSlot.test.ts
@@ -0,0 +1,72 @@
+import { describe, expect, it } from "vitest"
+
+import { INodeInputSlot, INodeOutputSlot } from '../src/interfaces'
+import { inputAsSerialisable, outputAsSerialisable } from '../src/node/slotUtils'
+
+describe("NodeSlot", () => {
+  describe("inputAsSerialisable", () => {
+    it("removes _data from serialized slot", () => {
+      const slot: INodeOutputSlot = {
+        _data: "test data",
+        name: "test-id",
+        type: "STRING",
+        links: [],
+      }
+      const serialized = outputAsSerialisable(slot)
+      expect(serialized).not.toHaveProperty("_data")
+    })
+
+    it("removes pos from widget input slots", () => {
+      const widgetInputSlot: INodeInputSlot = {
+        name: "test-id",
+        pos: [10, 20],
+        type: "STRING",
+        link: null,
+        widget: {
+          name: "test-widget",
+          type: "combo",
+          value: "test-value-1",
+          options: {
+            values: ["test-value-1", "test-value-2"],
+          },
+        },
+      }
+
+      const serialized = inputAsSerialisable(widgetInputSlot)
+      expect(serialized).not.toHaveProperty("pos")
+    })
+
+    it("preserves pos for non-widget input slots", () => {
+      const normalSlot: INodeInputSlot = {
+        name: "test-id",
+        type: "STRING",
+        pos: [10, 20],
+        link: null,
+      }
+      const serialized = inputAsSerialisable(normalSlot)
+      expect(serialized).toHaveProperty("pos")
+    })
+
+    it("preserves only widget name during serialization", () => {
+      const widgetInputSlot: INodeInputSlot = {
+        name: "test-id",
+        type: "STRING",
+        link: null,
+        widget: {
+          name: "test-widget",
+          type: "combo",
+          value: "test-value-1",
+          options: {
+            values: ["test-value-1", "test-value-2"],
+          },
+        },
+      }
+
+      const serialized = inputAsSerialisable(widgetInputSlot)
+      expect(serialized.widget).toEqual({ name: "test-widget" })
+      expect(serialized.widget).not.toHaveProperty("type")
+      expect(serialized.widget).not.toHaveProperty("value")
+      expect(serialized.widget).not.toHaveProperty("options")
+    })
+  })
+})
diff --git a/src/lib/litegraph/test/ToOutputRenderLink.test.ts b/src/lib/litegraph/test/ToOutputRenderLink.test.ts
new file mode 100644
index 0000000000..d1d5bd32ee
--- /dev/null
+++ b/src/lib/litegraph/test/ToOutputRenderLink.test.ts
@@ -0,0 +1,92 @@
+import { describe, expect, it, vi } from "vitest"
+
+import { ToOutputRenderLink } from '../src/canvas/ToOutputRenderLink'
+import { LinkDirection } from '../src/types/globalEnums'
+
+describe("ToOutputRenderLink", () => {
+  describe("connectToOutput", () => {
+    it("should return early if inputNode is null", () => {
+      // Setup
+      const mockNetwork = {}
+      const mockFromSlot = {}
+      const mockNode = { id: "test-id", inputs: [mockFromSlot], getInputPos: vi.fn().mockReturnValue([0, 0]) }
+
+      const renderLink = new ToOutputRenderLink(
+        mockNetwork as any,
+        mockNode as any,
+        mockFromSlot as any,
+        undefined,
+        LinkDirection.CENTER,
+      )
+
+      // Override the node property to simulate null case
+      Object.defineProperty(renderLink, "node", {
+        value: null,
+      })
+
+      const mockTargetNode = {
+        connectSlots: vi.fn(),
+      }
+      const mockEvents = {
+        dispatch: vi.fn(),
+      }
+
+      // Act
+      renderLink.connectToOutput(
+        mockTargetNode as any,
+        {} as any,
+        mockEvents as any,
+      )
+
+      // Assert
+      expect(mockTargetNode.connectSlots).not.toHaveBeenCalled()
+      expect(mockEvents.dispatch).not.toHaveBeenCalled()
+    })
+
+    it("should create connection and dispatch event when inputNode exists", () => {
+      // Setup
+      const mockNetwork = {}
+      const mockFromSlot = {}
+      const mockNode = {
+        id: "test-id",
+        inputs: [mockFromSlot],
+        getInputPos: vi.fn().mockReturnValue([0, 0]),
+      }
+
+      const renderLink = new ToOutputRenderLink(
+        mockNetwork as any,
+        mockNode as any,
+        mockFromSlot as any,
+        undefined,
+        LinkDirection.CENTER,
+      )
+
+      const mockNewLink = { id: "new-link" }
+      const mockTargetNode = {
+        connectSlots: vi.fn().mockReturnValue(mockNewLink),
+      }
+      const mockEvents = {
+        dispatch: vi.fn(),
+      }
+
+      // Act
+      renderLink.connectToOutput(
+        mockTargetNode as any,
+        {} as any,
+        mockEvents as any,
+      )
+
+      // Assert
+      expect(mockTargetNode.connectSlots).toHaveBeenCalledWith(
+        expect.anything(),
+        mockNode,
+        mockFromSlot,
+        undefined,
+      )
+      expect(mockEvents.dispatch).toHaveBeenCalledWith(
+        "link-created",
+        mockNewLink,
+      )
+    })
+  })
+})
diff --git a/src/lib/litegraph/test/__snapshots__/ConfigureGraph.test.ts.snap b/src/lib/litegraph/test/__snapshots__/ConfigureGraph.test.ts.snap
new file mode 100644
index 0000000000..a90c8d3de7
--- /dev/null
+++ b/src/lib/litegraph/test/__snapshots__/ConfigureGraph.test.ts.snap
@@ -0,0 +1,328 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`LGraph configure() > LGraph matches previous snapshot (normal configure() usage) > configuredBasicGraph 1`] = `
+LGraph {
+  "_groups": [
+    LGraphGroup {
+      "_bounding": Float32Array [
+        20,
+        20,
+        1,
+        3,
+      ],
+      "_children": Set {},
+      "_nodes": [],
+      "_pos": Float32Array [
+        20,
+        20,
+      ],
+      "_size": Float32Array [
+        1,
+        3,
+      ],
+      "color": "#6029aa",
+      "flags": {},
+      "font": undefined,
+      "font_size": 14,
+      "graph": [Circular],
+      "id": 123,
+      "isPointInside": [Function],
+      "selected": undefined,
+      "setDirtyCanvas": [Function],
+      "title": "A group to test with",
+    },
+  ],
+  "_input_nodes": undefined,
+  "_last_trigger_time": undefined,
+  "_links": Map {},
+  "_nodes": [
+    LGraphNode {
+      "_collapsed_width": undefined,
+      "_level": undefined,
+      "_pos": Float32Array [
+        10,
+        10,
+      ],
+      "_posSize": Float32Array [
+        10,
+        10,
+        140,
+        60,
+      ],
+      "_relative_id": undefined,
+      "_shape": undefined,
+      "_size": Float32Array [
+        140,
+        60,
+      ],
+      "action_call": undefined,
+      "action_triggered": undefined,
+      "badgePosition": "top-left",
+      "badges": [],
+      "bgcolor": undefined,
+      "block_delete": undefined,
+      "boxcolor": undefined,
+      "changeTracker": undefined,
+      "clip_area": undefined,
+      "clonable": undefined,
+      "color": undefined,
+      "console": undefined,
+      "exec_version": undefined,
+      "execute_triggered": undefined,
+      "flags": {},
+      "freeWidgetSpace": undefined,
+      "gotFocusAt": undefined,
+      "graph": [Circular],
+      "has_errors": undefined,
+      "id": 1,
+      "ignore_remove": undefined,
+      "inputs": [],
+      "last_serialization": undefined,
+      "locked": undefined,
+      "lostFocusAt": undefined,
+      "mode": 0,
+      "mouseOver": undefined,
+      "order": 0,
+      "outputs": [],
+      "progress": undefined,
+      "properties": {},
+      "properties_info": [],
+      "redraw_on_mouse": undefined,
+      "removable": undefined,
+      "resizable": undefined,
+      "selected": undefined,
+      "serialize_widgets": undefined,
+      "showAdvanced": undefined,
+      "strokeStyles": {
+        "error": [Function],
+        "selected": [Function],
+      },
+      "title": "LGraphNode",
+      "type": "mustBeSet",
+      "widgets": undefined,
+      "widgets_start_y": undefined,
+      "widgets_up": undefined,
+    },
+  ],
+  "_nodes_by_id": {
+    "1": LGraphNode {
+      "_collapsed_width": undefined,
+      "_level": undefined,
+      "_pos": Float32Array [
+        10,
+        10,
+      ],
+      "_posSize": Float32Array [
+        10,
+        10,
+        140,
+        60,
+      ],
+      "_relative_id": undefined,
+      "_shape": undefined,
+      "_size": Float32Array [
+        140,
+        60,
+      ],
+      "action_call": undefined,
+      "action_triggered": undefined,
+      "badgePosition": "top-left",
+      "badges": [],
+      "bgcolor": undefined,
+      "block_delete": undefined,
+      "boxcolor": undefined,
+      "changeTracker": undefined,
+      "clip_area": undefined,
+      "clonable": undefined,
+      "color": undefined,
+      "console": undefined,
+      "exec_version": undefined,
+      "execute_triggered": undefined,
+      "flags": {},
+      "freeWidgetSpace": undefined,
+      "gotFocusAt": undefined,
+      "graph": [Circular],
+      "has_errors": undefined,
+      "id": 1,
+      "ignore_remove": undefined,
+      "inputs": [],
+      "last_serialization": undefined,
+      "locked": undefined,
+      "lostFocusAt": undefined,
+      "mode": 0,
+      "mouseOver": undefined,
+      "order": 0,
+      "outputs": [],
+      "progress": undefined,
+      "properties": {},
+      "properties_info": [],
+      "redraw_on_mouse": undefined,
+      "removable": undefined,
+      "resizable": undefined,
+      "selected": undefined,
+      "serialize_widgets": undefined,
+      "showAdvanced": undefined,
+      "strokeStyles": {
+        "error": [Function],
+        "selected": [Function],
+      },
+      "title": "LGraphNode",
+      "type": "mustBeSet",
+      "widgets": undefined,
+      "widgets_start_y": undefined,
+      "widgets_up": undefined,
+    },
+  },
+  "_nodes_executable": [],
+  "_nodes_in_order": [
+    LGraphNode {
+      "_collapsed_width": undefined,
+      "_level": undefined,
+      "_pos": Float32Array [
+        10,
+        10,
+      ],
+      "_posSize": Float32Array [
+        10,
+        10,
+        140,
+        60,
+      ],
+      "_relative_id": undefined,
+      "_shape": undefined,
+      "_size": Float32Array [
+        140,
+        60,
+      ],
+      "action_call": undefined,
+      "action_triggered": undefined,
+      "badgePosition": "top-left",
+      "badges": [],
+      "bgcolor": undefined,
+      "block_delete": undefined,
+      "boxcolor": undefined,
+      "changeTracker": undefined,
+      "clip_area": undefined,
+      "clonable": undefined,
+      "color": undefined,
+      "console": undefined,
+      "exec_version": undefined,
+      "execute_triggered": undefined,
+      "flags": {},
+      "freeWidgetSpace": undefined,
+      "gotFocusAt": undefined,
+      "graph": [Circular],
+      "has_errors": undefined,
+      "id": 1,
+      "ignore_remove": undefined,
+      "inputs": [],
+      "last_serialization": undefined,
+      "locked": undefined,
+      "lostFocusAt": undefined,
+      "mode": 0,
+      "mouseOver": undefined,
+      "order": 0,
+      "outputs": [],
+      "progress": undefined,
+      "properties": {},
+      "properties_info": [],
+      "redraw_on_mouse": undefined,
+      "removable": undefined,
+      "resizable": undefined,
+      "selected": undefined,
+      "serialize_widgets": undefined,
+      "showAdvanced": undefined,
+      "strokeStyles": {
+        "error": [Function],
+        "selected": [Function],
+      },
+      "title": "LGraphNode",
+      "type": "mustBeSet",
+      "widgets": undefined,
+      "widgets_start_y": undefined,
+      "widgets_up": undefined,
+    },
+  ],
+  "_subgraphs": Map {},
+  "_version": 3,
+  "catch_errors": true,
+  "config": {},
+  "elapsed_time": 0.01,
+  "errors_in_execution": undefined,
+  "events": CustomEventTarget {},
+  "execution_time": undefined,
+  "execution_timer_id": undefined,
+  "extra": {},
+  "filter": undefined,
+  "fixedtime": 0,
+  "fixedtime_lapse": 0.01,
+  "globaltime": 0,
+  "id": "ca9da7d8-fddd-4707-ad32-67be9be13140",
+  "iteration": 0,
+  "last_update_time": 0,
+  "links": Map {},
+  "list_of_graphcanvas": null,
+  "nodes_actioning": [],
+  "nodes_executedAction": [],
+  "nodes_executing": [],
+  "revision": 0,
+  "runningtime": 0,
+  "starttime": 0,
+  "state": {
+    "lastGroupId": 123,
+    "lastLinkId": 0,
+    "lastNodeId": 1,
+    "lastRerouteId": 0,
+  },
+  "status": 1,
+  "vars": {},
+  "version": 1,
+}
+`;
+
+exports[`LGraph configure() > LGraph matches previous snapshot (normal configure() usage) > configuredMinGraph 1`] = `
+LGraph {
+  "_groups": [],
+  "_input_nodes": undefined,
+  "_last_trigger_time": undefined,
+  "_links": Map {},
+  "_nodes": [],
+  "_nodes_by_id": {},
+  "_nodes_executable": [],
+  "_nodes_in_order": [],
+  "_subgraphs": Map {},
+  "_version": 0,
+  "catch_errors": true,
+  "config": {},
+  "elapsed_time": 0.01,
+  "errors_in_execution": undefined,
+  "events": CustomEventTarget {},
+  "execution_time": undefined,
+  "execution_timer_id": undefined,
+  "extra": {},
+  "filter": undefined,
+  "fixedtime": 0,
+  "fixedtime_lapse": 0.01,
+  "globaltime": 0,
+  "id": "d175890f-716a-4ece-ba33-1d17a513b7be",
+  "iteration": 0,
+  "last_update_time": 0,
+  "links": Map {},
+  "list_of_graphcanvas": null,
+  "nodes_actioning": [],
+  "nodes_executedAction": [],
+  "nodes_executing": [],
+  "revision": 0,
+  "runningtime": 0,
+  "starttime": 0,
+  "state": {
+    "lastGroupId": 0,
+    "lastLinkId": 0,
+    "lastNodeId": 0,
+    "lastRerouteId": 0,
+  },
+  "status": 1,
+  "vars": {},
+  "version": 1,
+}
+`;
diff --git a/src/lib/litegraph/test/__snapshots__/LGraph.test.ts.snap b/src/lib/litegraph/test/__snapshots__/LGraph.test.ts.snap
new file mode 100644
index 0000000000..acf54ccee8
--- /dev/null
+++ b/src/lib/litegraph/test/__snapshots__/LGraph.test.ts.snap
@@ -0,0 +1,287 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`LGraph > supports schema v0.4 graphs > oldSchemaGraph 1`] = `
+LGraph {
+  "_groups": [
+    LGraphGroup {
+      "_bounding": Float32Array [
+        20,
+        20,
+        1,
+        3,
+      ],
+      "_children": Set {},
+      "_nodes": [],
+      "_pos": Float32Array [
+        20,
+        20,
+      ],
+      "_size": Float32Array [
+        1,
+        3,
+      ],
+      "color": "#6029aa",
+      "flags": {},
+      "font": undefined,
+      "font_size": 14,
+      "graph": [Circular],
+      "id": 123,
+      "isPointInside": [Function],
+      "selected": undefined,
+      "setDirtyCanvas": [Function],
+      "title": "A group to test with",
+    },
+  ],
+  "_input_nodes": undefined,
+  "_last_trigger_time": undefined,
+  "_links": Map {},
+  "_nodes": [
+    LGraphNode {
+      "_collapsed_width": undefined,
+      "_level": undefined,
+      "_pos": Float32Array [
+        10,
+        10,
+      ],
+      "_posSize": Float32Array [
+        10,
+        10,
+        140,
+        60,
+      ],
+      "_relative_id": undefined,
+      "_shape": undefined,
+      "_size": Float32Array [
+        140,
+        60,
+      ],
+      "action_call": undefined,
+      "action_triggered": undefined,
+      "badgePosition": "top-left",
+      "badges": [],
+      "bgcolor": undefined,
+      "block_delete": undefined,
+      "boxcolor": undefined,
+      "changeTracker": undefined,
+      "clip_area": undefined,
+      "clonable": undefined,
+      "color": undefined,
+      "console": undefined,
+      "exec_version": undefined,
+      "execute_triggered": undefined,
+      "flags": {},
+      "freeWidgetSpace": undefined,
+      "gotFocusAt": undefined,
+      "graph": [Circular],
+      "has_errors": true,
+      "id": 1,
+      "ignore_remove": undefined,
+      "inputs": [],
+      "last_serialization": {
+        "id": 1,
+      },
+      "locked": undefined,
+      "lostFocusAt": undefined,
+      "mode": 0,
+      "mouseOver": undefined,
+      "order": 0,
+      "outputs": [],
+      "progress": undefined,
+      "properties": {},
+      "properties_info": [],
+      "redraw_on_mouse": undefined,
+      "removable": undefined,
+      "resizable": undefined,
+      "selected": undefined,
+      "serialize_widgets": undefined,
+      "showAdvanced": undefined,
+      "strokeStyles": {
+        "error": [Function],
+        "selected": [Function],
+      },
+      "title": undefined,
+      "type": "",
+      "widgets": undefined,
+      "widgets_start_y": undefined,
+      "widgets_up": undefined,
+    },
+  ],
+  "_nodes_by_id": {
+    "1": LGraphNode {
+      "_collapsed_width": undefined,
+      "_level": undefined,
+      "_pos": Float32Array [
+        10,
+        10,
+      ],
+      "_posSize": Float32Array [
+        10,
+        10,
+        140,
+        60,
+      ],
+      "_relative_id": undefined,
+      "_shape": undefined,
+      "_size": Float32Array [
+        140,
+        60,
+      ],
+      "action_call": undefined,
+      "action_triggered": undefined,
+      "badgePosition": "top-left",
+      "badges": [],
+      "bgcolor": undefined,
+      "block_delete": undefined,
+      "boxcolor": undefined,
+      "changeTracker": undefined,
+      "clip_area": undefined,
+      "clonable": undefined,
+      "color": undefined,
+      "console": undefined,
+      "exec_version": undefined,
+      "execute_triggered": undefined,
+      "flags": {},
+      "freeWidgetSpace": undefined,
+      "gotFocusAt": undefined,
+      "graph": [Circular],
+      "has_errors": true,
+      "id": 1,
+      "ignore_remove": undefined,
+      "inputs": [],
+      "last_serialization": {
+        "id": 1,
+      },
+      "locked": undefined,
+      "lostFocusAt": undefined,
+      "mode": 0,
+      "mouseOver": undefined,
+      "order": 0,
+      "outputs": [],
+      "progress": undefined,
+      "properties": {},
+      "properties_info": [],
+      "redraw_on_mouse": undefined,
+      "removable": undefined,
+      "resizable": undefined,
+      "selected": undefined,
+      "serialize_widgets": undefined,
+      "showAdvanced": undefined,
+      "strokeStyles": {
+        "error": [Function],
+        "selected": [Function],
+      },
+      "title": undefined,
+      "type": "",
+      "widgets": undefined,
+      "widgets_start_y": undefined,
+      "widgets_up": undefined,
+    },
+  },
+  "_nodes_executable": [],
+  "_nodes_in_order": [
+    LGraphNode {
+      "_collapsed_width": undefined,
+      "_level": undefined,
+      "_pos": Float32Array [
+        10,
+        10,
+      ],
+      "_posSize": Float32Array [
+        10,
+        10,
+        140,
+        60,
+      ],
+      "_relative_id": undefined,
+      "_shape": undefined,
+      "_size": Float32Array [
+        140,
+        60,
+      ],
+      "action_call": undefined,
+      "action_triggered": undefined,
+      "badgePosition": "top-left",
+      "badges": [],
+      "bgcolor": undefined,
+      "block_delete": undefined,
+      "boxcolor": undefined,
+      "changeTracker": undefined,
+      "clip_area": undefined,
+      "clonable": undefined,
+      "color": undefined,
+      "console": undefined,
+      "exec_version": undefined,
+      "execute_triggered": undefined,
+      "flags": {},
+      "freeWidgetSpace": undefined,
+      "gotFocusAt": undefined,
+      "graph": [Circular],
+      "has_errors": true,
+      "id": 1,
+      "ignore_remove": undefined,
+      "inputs": [],
+      "last_serialization": {
+        "id": 1,
+      },
+      "locked": undefined,
+      "lostFocusAt": undefined,
+      "mode": 0,
+      "mouseOver": undefined,
+      "order": 0,
+      "outputs": [],
+      "progress": undefined,
+      "properties": {},
+      "properties_info": [],
+      "redraw_on_mouse": undefined,
+      "removable": undefined,
+      "resizable": undefined,
+      "selected": undefined,
+      "serialize_widgets": undefined,
+      "showAdvanced": undefined,
+      "strokeStyles": {
+        "error": [Function],
+        "selected": [Function],
+      },
+      "title": undefined,
+      "type": "",
+      "widgets": undefined,
+      "widgets_start_y": undefined,
+      "widgets_up": undefined,
+    },
+  ],
+  "_subgraphs": Map {},
+  "_version": 3,
+  "catch_errors": true,
+  "config": {},
+  "elapsed_time": 0.01,
+  "errors_in_execution": undefined,
+  "events": CustomEventTarget {},
+  "execution_time": undefined,
+  "execution_timer_id": undefined,
+  "extra": {},
+  "filter": undefined,
+  "fixedtime": 0,
+  "fixedtime_lapse": 0.01,
+  "globaltime": 0,
+  "id": "b4e984f1-b421-4d24-b8b4-ff895793af13",
+  "iteration": 0,
+  "last_update_time": 0,
+  "links": Map {},
+  "list_of_graphcanvas": null,
+  "nodes_actioning": [],
+  "nodes_executedAction": [],
+  "nodes_executing": [],
+  "revision": 0,
+  "runningtime": 0,
+  "starttime": 0,
+  "state": {
+    "lastGroupId": 123,
+    "lastLinkId": 0,
+    "lastNodeId": 1,
+    "lastRerouteId": 0,
+  },
+  "status": 1,
+  "vars": {},
+  "version": 0.4,
+}
+`;
diff --git a/src/lib/litegraph/test/__snapshots__/LGraphGroup.test.ts.snap b/src/lib/litegraph/test/__snapshots__/LGraphGroup.test.ts.snap
new file mode 100644
index 0000000000..fc086fe26f
--- /dev/null
+++ b/src/lib/litegraph/test/__snapshots__/LGraphGroup.test.ts.snap
@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`LGraphGroup > serializes to the existing format > Basic 1`] = `
+{
+  "bounding": [
+    10,
+    10,
+    140,
+    80,
+  ],
+  "color": "#3f789e",
+  "flags": {},
+  "font_size": 24,
+  "id": 929,
+  "title": "title",
+}
+`;
diff --git a/src/lib/litegraph/test/__snapshots__/LGraph_constructor.test.ts.snap b/src/lib/litegraph/test/__snapshots__/LGraph_constructor.test.ts.snap
new file mode 100644
index 0000000000..abbe6bdfd2
--- /dev/null
+++ b/src/lib/litegraph/test/__snapshots__/LGraph_constructor.test.ts.snap
@@ -0,0 +1,328 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`LGraph (constructor only) > Matches previous snapshot > basicLGraph 1`] = `
+LGraph {
+  "_groups": [
+    LGraphGroup {
+      "_bounding": Float32Array [
+        20,
+        20,
+        1,
+        3,
+      ],
+      "_children": Set {},
+      "_nodes": [],
+      "_pos": Float32Array [
+        20,
+        20,
+      ],
+      "_size": Float32Array [
+        1,
+        3,
+      ],
+      "color": "#6029aa",
+      "flags": {},
+      "font": undefined,
+      "font_size": 14,
+      "graph": [Circular],
+      "id": 123,
+      "isPointInside": [Function],
+      "selected": undefined,
+      "setDirtyCanvas": [Function],
+      "title": "A group to test with",
+    },
+  ],
+  "_input_nodes": undefined,
+  "_last_trigger_time": undefined,
+  "_links": Map {},
+  "_nodes": [
+    LGraphNode {
+      "_collapsed_width": undefined,
+      "_level": undefined,
+      "_pos": Float32Array [
+        10,
+        10,
+      ],
+      "_posSize": Float32Array [
+        10,
+        10,
+        140,
+        60,
+      ],
+      "_relative_id": undefined,
+      "_shape": undefined,
+      "_size": Float32Array [
+        140,
+        60,
+      ],
+      "action_call": undefined,
+      "action_triggered": undefined,
+      "badgePosition": "top-left",
+      "badges": [],
+      "bgcolor": undefined,
+      "block_delete": undefined,
+      "boxcolor": undefined,
+      "changeTracker": undefined,
+      "clip_area": undefined,
+      "clonable": undefined,
+      "color": undefined,
+      "console": undefined,
+      "exec_version": undefined,
+      "execute_triggered": undefined,
+      "flags": {},
+      "freeWidgetSpace": undefined,
+      "gotFocusAt": undefined,
+      "graph": [Circular],
+      "has_errors": undefined,
+      "id": 1,
+      "ignore_remove": undefined,
+      "inputs": [],
+      "last_serialization": undefined,
+      "locked": undefined,
+      "lostFocusAt": undefined,
+      "mode": 0,
+      "mouseOver": undefined,
+      "order": 0,
+      "outputs": [],
+      "progress": undefined,
+      "properties": {},
+      "properties_info": [],
+      "redraw_on_mouse": undefined,
+      "removable": undefined,
+      "resizable": undefined,
+      "selected": undefined,
+      "serialize_widgets": undefined,
+      "showAdvanced": undefined,
+      "strokeStyles": {
+        "error": [Function],
+        "selected": [Function],
+      },
+      "title": "LGraphNode",
+      "type": "mustBeSet",
+      "widgets": undefined,
+      "widgets_start_y": undefined,
+      "widgets_up": undefined,
+    },
+  ],
+  "_nodes_by_id": {
+    "1": LGraphNode {
+      "_collapsed_width": undefined,
+      "_level": undefined,
+      "_pos": Float32Array [
+        10,
+        10,
+      ],
+      "_posSize": Float32Array [
+        10,
+        10,
+        140,
+        60,
+      ],
+      "_relative_id": undefined,
+      "_shape": undefined,
+      "_size": Float32Array [
+        140,
+        60,
+      ],
+      "action_call": undefined,
+      "action_triggered": undefined,
+      "badgePosition": "top-left",
+      "badges": [],
+      "bgcolor": undefined,
+      "block_delete": undefined,
+      "boxcolor": undefined,
+      "changeTracker": undefined,
+      "clip_area": undefined,
+      "clonable": undefined,
+      "color": undefined,
+      "console": undefined,
+      "exec_version": undefined,
+      "execute_triggered": undefined,
+      "flags": {},
+      "freeWidgetSpace": undefined,
+      "gotFocusAt": undefined,
+      "graph": [Circular],
+      "has_errors": undefined,
+      "id": 1,
+      "ignore_remove": undefined,
+      "inputs": [],
+      "last_serialization": undefined,
+      "locked": undefined,
+      "lostFocusAt": undefined,
+      "mode": 0,
+      "mouseOver": undefined,
+      "order": 0,
+      "outputs": [],
+      "progress": undefined,
+      "properties": {},
+      "properties_info": [],
+      "redraw_on_mouse": undefined,
+      "removable": undefined,
+      "resizable": undefined,
+      "selected": undefined,
+      "serialize_widgets": undefined,
+      "showAdvanced": undefined,
+      "strokeStyles": {
+        "error": [Function],
+        "selected": [Function],
+      },
+      "title": "LGraphNode",
+      "type": "mustBeSet",
+      "widgets": undefined,
+      "widgets_start_y": undefined,
+      "widgets_up": undefined,
+    },
+  },
+  "_nodes_executable": [],
+  "_nodes_in_order": [
+    LGraphNode {
+      "_collapsed_width": undefined,
+      "_level": undefined,
+      "_pos": Float32Array [
+        10,
+        10,
+      ],
+      "_posSize": Float32Array [
+        10,
+        10,
+        140,
+        60,
+      ],
+      "_relative_id": undefined,
+      "_shape": undefined,
+      "_size": Float32Array [
+        140,
+        60,
+      ],
+      "action_call": undefined,
+      "action_triggered": undefined,
+      "badgePosition": "top-left",
+      "badges": [],
+      "bgcolor": undefined,
+      "block_delete": undefined,
+      "boxcolor": undefined,
+      "changeTracker": undefined,
+      "clip_area": undefined,
+      "clonable": undefined,
+      "color": undefined,
+      "console": undefined,
+      "exec_version": undefined,
+      "execute_triggered": undefined,
+      "flags": {},
+      "freeWidgetSpace": undefined,
+      "gotFocusAt": undefined,
+      "graph": [Circular],
+      "has_errors": undefined,
+      "id": 1,
+      "ignore_remove": undefined,
+      "inputs": [],
+      "last_serialization": undefined,
+      "locked": undefined,
+      "lostFocusAt": undefined,
+      "mode": 0,
+      "mouseOver": undefined,
+      "order": 0,
+      "outputs": [],
+      "progress": undefined,
+      "properties": {},
+      "properties_info": [],
+      "redraw_on_mouse": undefined,
+      "removable": undefined,
+      "resizable": undefined,
+      "selected": undefined,
+      "serialize_widgets": undefined,
+      "showAdvanced": undefined,
+      "strokeStyles": {
+        "error": [Function],
+        "selected": [Function],
+      },
+      "title": "LGraphNode",
+      "type": "mustBeSet",
+      "widgets": undefined,
+      "widgets_start_y": undefined,
+      "widgets_up": undefined,
+    },
+  ],
+  "_subgraphs": Map {},
+  "_version": 3,
+  "catch_errors": true,
+  "config": {},
+  "elapsed_time": 0.01,
+  "errors_in_execution": undefined,
+  "events": CustomEventTarget {},
+  "execution_time": undefined,
+  "execution_timer_id": undefined,
+  "extra": {},
+  "filter": undefined,
+  "fixedtime": 0,
+  "fixedtime_lapse": 0.01,
+  "globaltime": 0,
+  "id": "ca9da7d8-fddd-4707-ad32-67be9be13140",
+  "iteration": 0,
+  "last_update_time": 0,
+  "links": Map {},
+  "list_of_graphcanvas": null,
+  "nodes_actioning": [],
+  "nodes_executedAction": [],
+  "nodes_executing": [],
+  "revision": 0,
+  "runningtime": 0,
+  "starttime": 0,
+  "state": {
+    "lastGroupId": 123,
+    "lastLinkId": 0,
+    "lastNodeId": 1,
+    "lastRerouteId": 0,
+  },
+  "status": 1,
+  "vars": {},
+  "version": 1,
+}
+`;
+
+exports[`LGraph (constructor only) > Matches previous snapshot > minLGraph 1`] = `
+LGraph {
+  "_groups": [],
+  "_input_nodes": undefined,
+  "_last_trigger_time": undefined,
+  "_links": Map {},
+  "_nodes": [],
+  "_nodes_by_id": {},
+  "_nodes_executable": [],
+  "_nodes_in_order": [],
+  "_subgraphs": Map {},
+  "_version": 0,
+  "catch_errors": true,
+  "config": {},
+  "elapsed_time": 0.01,
+  "errors_in_execution": undefined,
+  "events": CustomEventTarget {},
+  "execution_time": undefined,
+  "execution_timer_id": undefined,
+  "extra": {},
+  "filter": undefined,
+  "fixedtime": 0,
+  "fixedtime_lapse": 0.01,
+  "globaltime": 0,
+  "id": "d175890f-716a-4ece-ba33-1d17a513b7be",
+  "iteration": 0,
+  "last_update_time": 0,
+  "links": Map {},
+  "list_of_graphcanvas": null,
+  "nodes_actioning": [],
+  "nodes_executedAction": [],
+  "nodes_executing": [],
+  "revision": 0,
+  "runningtime": 0,
+  "starttime": 0,
+  "state": {
+    "lastGroupId": 0,
+    "lastLinkId": 0,
+    "lastNodeId": 0,
+    "lastRerouteId": 0,
+  },
+  "status": 1,
+  "vars": {},
+  "version": 1,
+}
+`;
diff --git a/src/lib/litegraph/test/__snapshots__/LLink.test.ts.snap b/src/lib/litegraph/test/__snapshots__/LLink.test.ts.snap
new file mode 100644
index 0000000000..a112c516ee
--- /dev/null
+++ b/src/lib/litegraph/test/__snapshots__/LLink.test.ts.snap
@@ -0,0 +1,23 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`LLink > matches previous snapshot > Basic 1`] = `
+[
+  1,
+  4,
+  2,
+  5,
+  3,
+  "float",
+]
+`;
+
+exports[`LLink > serializes to the previous snapshot > Basic 1`] = `
+[
+  1,
+  4,
+  2,
+  5,
+  3,
+  "float",
+]
+`;
diff --git a/src/lib/litegraph/test/__snapshots__/litegraph.test.ts.snap b/src/lib/litegraph/test/__snapshots__/litegraph.test.ts.snap
new file mode 100644
index 0000000000..dbbfa556aa
--- /dev/null
+++ b/src/lib/litegraph/test/__snapshots__/litegraph.test.ts.snap
@@ -0,0 +1,202 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Litegraph module > has the same structure > minLGraph 1`] = `
+LiteGraphGlobal {
+  "ACTION": -1,
+  "ALWAYS": 0,
+  "ARROW_SHAPE": 5,
+  "AUTOHIDE_TITLE": 3,
+  "BOX_SHAPE": 1,
+  "CANVAS_GRID_SIZE": 10,
+  "CARD_SHAPE": 4,
+  "CENTER": 5,
+  "CIRCLE_SHAPE": 3,
+  "CONNECTING_LINK_COLOR": "#AFA",
+  "Classes": {
+    "InputIndicators": [Function],
+    "Rectangle": [Function],
+    "SubgraphIONodeBase": [Function],
+    "SubgraphSlot": [Function],
+  },
+  "ContextMenu": [Function],
+  "CurveEditor": [Function],
+  "DEFAULT_FONT": "Arial",
+  "DEFAULT_GROUP_FONT": 24,
+  "DEFAULT_GROUP_FONT_SIZE": undefined,
+  "DEFAULT_POSITION": [
+    100,
+    100,
+  ],
+  "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
+  "DOWN": 2,
+  "DragAndScale": [Function],
+  "EVENT": -1,
+  "EVENT_LINK_COLOR": "#A86",
+  "GRID_SHAPE": 6,
+  "GROUP_FONT": "Arial",
+  "Globals": {},
+  "HIDDEN_LINK": -1,
+  "INPUT": 1,
+  "LEFT": 3,
+  "LGraph": [Function],
+  "LGraphCanvas": [Function],
+  "LGraphGroup": [Function],
+  "LGraphNode": [Function],
+  "LINEAR_LINK": 1,
+  "LINK_COLOR": "#9A9",
+  "LINK_RENDER_MODES": [
+    "Straight",
+    "Linear",
+    "Spline",
+  ],
+  "LLink": [Function],
+  "LabelPosition": {
+    "Left": "left",
+    "Right": "right",
+  },
+  "MAX_NUMBER_OF_NODES": 10000,
+  "NEVER": 2,
+  "NODE_BOX_OUTLINE_COLOR": "#FFF",
+  "NODE_COLLAPSED_RADIUS": 10,
+  "NODE_COLLAPSED_WIDTH": 80,
+  "NODE_DEFAULT_BGCOLOR": "#353535",
+  "NODE_DEFAULT_BOXCOLOR": "#666",
+  "NODE_DEFAULT_COLOR": "#333",
+  "NODE_DEFAULT_SHAPE": 2,
+  "NODE_ERROR_COLOUR": "#E00",
+  "NODE_FONT": "Arial",
+  "NODE_MIN_WIDTH": 50,
+  "NODE_MODES": [
+    "Always",
+    "On Event",
+    "Never",
+    "On Trigger",
+  ],
+  "NODE_MODES_COLORS": [
+    "#666",
+    "#422",
+    "#333",
+    "#224",
+    "#626",
+  ],
+  "NODE_SELECTED_TITLE_COLOR": "#FFF",
+  "NODE_SLOT_HEIGHT": 20,
+  "NODE_SUBTEXT_SIZE": 12,
+  "NODE_TEXT_COLOR": "#AAA",
+  "NODE_TEXT_HIGHLIGHT_COLOR": "#EEE",
+  "NODE_TEXT_SIZE": 14,
+  "NODE_TITLE_COLOR": "#999",
+  "NODE_TITLE_HEIGHT": 30,
+  "NODE_TITLE_TEXT_Y": 20,
+  "NODE_WIDGET_HEIGHT": 20,
+  "NODE_WIDTH": 140,
+  "NORMAL_TITLE": 0,
+  "NO_TITLE": 1,
+  "Nodes": {},
+  "ON_EVENT": 1,
+  "ON_TRIGGER": 3,
+  "OUTPUT": 2,
+  "RIGHT": 4,
+  "ROUND_RADIUS": 8,
+  "ROUND_SHAPE": 2,
+  "Reroute": [Function],
+  "SPLINE_LINK": 2,
+  "STRAIGHT_LINK": 0,
+  "SlotDirection": {
+    "1": "Up",
+    "2": "Down",
+    "3": "Left",
+    "4": "Right",
+    "Down": 2,
+    "Left": 3,
+    "Right": 4,
+    "Up": 1,
+  },
+  "SlotShape": {
+    "1": "Box",
+    "3": "Circle",
+    "5": "Arrow",
+    "6": "Grid",
+    "7": "HollowCircle",
+    "Arrow": 5,
+    "Box": 1,
+    "Circle": 3,
+    "Grid": 6,
+    "HollowCircle": 7,
+  },
+  "SlotType": {
+    "-1": "Event",
+    "Array": "array",
+    "Event": -1,
+  },
+  "TRANSPARENT_TITLE": 2,
+  "UP": 1,
+  "VALID_SHAPES": [
+    "default",
+    "box",
+    "round",
+    "card",
+  ],
+  "VERSION": 0.4,
+  "VERTICAL_LAYOUT": "vertical",
+  "WIDGET_ADVANCED_OUTLINE_COLOR": "rgba(56, 139, 253, 0.8)",
+  "WIDGET_BGCOLOR": "#222",
+  "WIDGET_DISABLED_TEXT_COLOR": "#666",
+  "WIDGET_OUTLINE_COLOR": "#666",
+  "WIDGET_SECONDARY_TEXT_COLOR": "#999",
+  "WIDGET_TEXT_COLOR": "#DDD",
+  "allow_multi_output_for_events": true,
+  "allow_scripts": false,
+  "alt_drag_do_clone_nodes": false,
+  "alwaysRepeatWarnings": false,
+  "alwaysSnapToGrid": undefined,
+  "auto_load_slot_types": false,
+  "catch_exceptions": true,
+  "click_do_break_link_to": false,
+  "context_menu_scaling": false,
+  "ctrl_alt_click_do_break_link": true,
+  "ctrl_shift_v_paste_connect_unselected_outputs": true,
+  "debug": false,
+  "dialog_close_on_mouse_leave": false,
+  "dialog_close_on_mouse_leave_delay": 500,
+  "distance": [Function],
+  "do_add_triggers_slots": false,
+  "highlight_selected_group": true,
+  "isInsideRectangle": [Function],
+  "macGesturesRequireMac": true,
+  "macTrackpadGestures": false,
+  "middle_click_slot_add_default_node": false,
+  "node_box_coloured_by_mode": false,
+  "node_box_coloured_when_on": false,
+  "node_images_path": "",
+  "node_types_by_file_extension": {},
+  "onDeprecationWarning": [
+    [Function],
+  ],
+  "overlapBounding": [Function],
+  "pointerevents_method": "pointer",
+  "proxy": null,
+  "registered_node_types": {},
+  "registered_slot_in_types": {},
+  "registered_slot_out_types": {},
+  "release_link_on_empty_shows_menu": false,
+  "saveViewportWithGraph": true,
+  "search_filter_enabled": false,
+  "search_hide_on_mouse_leave": true,
+  "search_show_all_on_open": true,
+  "searchbox_extras": {},
+  "shift_click_do_break_link_from": false,
+  "slot_types_default_in": {},
+  "slot_types_default_out": {},
+  "slot_types_in": [],
+  "slot_types_out": [],
+  "snapToGrid": undefined,
+  "snap_highlights_node": true,
+  "snaps_for_comfy": true,
+  "throw_errors": true,
+  "truncateWidgetTextEvenly": false,
+  "truncateWidgetValuesFirst": false,
+  "use_uuids": false,
+  "uuidv4": [Function],
+}
+`;
diff --git a/src/lib/litegraph/test/assets/floatingBranch.json b/src/lib/litegraph/test/assets/floatingBranch.json
new file mode 100644
index 0000000000..0764d73bf7
--- /dev/null
+++ b/src/lib/litegraph/test/assets/floatingBranch.json
@@ -0,0 +1,123 @@
+{
+  "id": "e5ffd5e1-1c01-45ac-90dd-b7d83a206b0f",
+  "revision": 0,
+  "last_node_id": 3,
+  "last_link_id": 3,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "InvertMask",
+      "pos": [100, 130],
+      "size": [140, 26],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "localized_name": "mask",
+          "name": "mask",
+          "type": "MASK",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "localized_name": "MASK",
+          "name": "MASK",
+          "type": "MASK",
+          "links": [2, 3]
+        }
+      ],
+      "properties": { "Node name for S&R": "InvertMask" },
+      "widgets_values": []
+    },
+    {
+      "id": 3,
+      "type": "InvertMask",
+      "pos": [400, 220],
+      "size": [140, 26],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        { "localized_name": "mask", "name": "mask", "type": "MASK", "link": 3 }
+      ],
+      "outputs": [
+        {
+          "localized_name": "MASK",
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": { "Node name for S&R": "InvertMask" },
+      "widgets_values": []
+    },
+    {
+      "id": 2,
+      "type": "InvertMask",
+      "pos": [400, 130],
+      "size": [140, 26],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        { "localized_name": "mask", "name": "mask", "type": "MASK", "link": 2 }
+      ],
+      "outputs": [
+        {
+          "localized_name": "MASK",
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": { "Node name for S&R": "InvertMask" },
+      "widgets_values": []
+    }
+  ],
+  "links": [
+    [2, 1, 0, 2, 0, "MASK"],
+    [3, 1, 0, 3, 0, "MASK"]
+  ],
+  "floatingLinks": [
+    {
+      "id": 6,
+      "origin_id": 1,
+      "origin_slot": 0,
+      "target_id": -1,
+      "target_slot": -1,
+      "type": "MASK",
+      "parentId": 1
+    }
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1.2100000000000002,
+      "offset": [319.8264462809916, 109.2148760330578]
+    },
+    "linkExtensions": [
+      { "id": 2, "parentId": 3 },
+      { "id": 3, "parentId": 3 }
+    ],
+    "reroutes": [
+      {
+        "id": 1,
+        "parentId": 2,
+        "pos": [350, 110],
+        "linkIds": [],
+        "floating": { "slotType": "output" }
+      },
+      { "id": 2, "parentId": 4, "pos": [310, 150], "linkIds": [2, 3] },
+      { "id": 3, "parentId": 2, "pos": [360, 170], "linkIds": [2, 3] },
+      {
+        "id": 4,
+        "pos": [271.9090881347656, 146.9834747314453],
+        "linkIds": [2, 3]
+      }
+    ]
+  },
+  "version": 0.4
+}
diff --git a/src/lib/litegraph/test/assets/floatingLink.json b/src/lib/litegraph/test/assets/floatingLink.json
new file mode 100644
index 0000000000..b10ee8b426
--- /dev/null
+++ b/src/lib/litegraph/test/assets/floatingLink.json
@@ -0,0 +1,68 @@
+{
+  "id": "d175890f-716a-4ece-ba33-1d17a513b7be",
+  "revision": 0,
+  "last_node_id": 2,
+  "last_link_id": 1,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "VAEDecode",
+      "pos": [63.44815444946289, 178.71633911132812],
+      "size": [210, 46],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "samples",
+          "type": "LATENT",
+          "link": null
+        },
+        {
+          "name": "vae",
+          "type": "VAE",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": []
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "VAEDecode"
+      },
+      "widgets_values": []
+    }
+  ],
+  "links": [],
+  "floatingLinks": [
+    {
+      "id": 4,
+      "origin_id": 2,
+      "origin_slot": 0,
+      "target_id": -1,
+      "target_slot": -1,
+      "type": "IMAGE",
+      "parentId": 1
+    }
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "linkExtensions": [],
+    "reroutes": [
+      {
+        "id": 1,
+        "pos": [393.2383117675781, 194.61941528320312],
+        "linkIds": [],
+        "floating": {
+          "slotType": "output"
+        }
+      }
+    ]
+  },
+  "version": 0.4
+}
diff --git a/src/lib/litegraph/test/assets/linkedNodes.json b/src/lib/litegraph/test/assets/linkedNodes.json
new file mode 100644
index 0000000000..5eed02368b
--- /dev/null
+++ b/src/lib/litegraph/test/assets/linkedNodes.json
@@ -0,0 +1,96 @@
+{
+  "id": "26a34f13-1767-4847-b25f-a21dedf6840d",
+  "revision": 0,
+  "last_node_id": 3,
+  "last_link_id": 2,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "VAEDecode",
+      "pos": [
+        63.44815444946289,
+        178.71633911132812
+      ],
+      "size": [
+        210,
+        46
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "samples",
+          "type": "LATENT",
+          "link": null
+        },
+        {
+          "name": "vae",
+          "type": "VAE",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [
+            2
+          ]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "VAEDecode"
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 3,
+      "type": "SaveImage",
+      "pos": [
+        419.36920166015625,
+        179.71388244628906
+      ],
+      "size": [
+        226.3714141845703,
+        58
+      ],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 2
+        }
+      ],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": [
+        "ComfyUI"
+      ]
+    }
+  ],
+  "links": [
+    [
+      2,
+      2,
+      0,
+      3,
+      0,
+      "IMAGE"
+    ]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "linkExtensions": [
+      {
+        "id": 2,
+        "parentId": 1
+      }
+    ]
+  },
+  "version": 0.4
+}
\ No newline at end of file
diff --git a/src/lib/litegraph/test/assets/reroutesComplex.json b/src/lib/litegraph/test/assets/reroutesComplex.json
new file mode 100644
index 0000000000..941228baf0
--- /dev/null
+++ b/src/lib/litegraph/test/assets/reroutesComplex.json
@@ -0,0 +1 @@
+{"id":"e5ffd5e1-1c01-45ac-90dd-b7d83a206b0f","revision":0,"last_node_id":9,"last_link_id":12,"nodes":[{"id":3,"type":"InvertMask","pos":[390,270],"size":[140,26],"flags":{},"order":8,"mode":0,"inputs":[{"localized_name":"mask","name":"mask","type":"MASK","link":3}],"outputs":[{"localized_name":"MASK","name":"MASK","type":"MASK","links":null}],"properties":{"Node name for S&R":"InvertMask"},"widgets_values":[]},{"id":7,"type":"InvertMask","pos":[390,560],"size":[140,26],"flags":{},"order":4,"mode":0,"inputs":[{"localized_name":"mask","name":"mask","type":"MASK","link":10}],"outputs":[{"localized_name":"MASK","name":"MASK","type":"MASK","links":null}],"properties":{"Node name for S&R":"InvertMask"},"widgets_values":[]},{"id":8,"type":"InvertMask","pos":[390,640],"size":[140,26],"flags":{},"order":3,"mode":0,"inputs":[{"localized_name":"mask","name":"mask","type":"MASK","link":9}],"outputs":[{"localized_name":"MASK","name":"MASK","type":"MASK","links":null}],"properties":{"Node name for S&R":"InvertMask"},"widgets_values":[]},{"id":5,"type":"InvertMask","pos":[390,480],"size":[140,26],"flags":{"collapsed":false},"order":5,"mode":0,"inputs":[{"localized_name":"mask","name":"mask","type":"MASK","link":11}],"outputs":[{"localized_name":"MASK","name":"MASK","type":"MASK","links":null}],"properties":{"Node name for S&R":"InvertMask"},"widgets_values":[]},{"id":6,"type":"InvertMask","pos":[390,400],"size":[140,26],"flags":{},"order":6,"mode":0,"inputs":[{"localized_name":"mask","name":"mask","type":"MASK","link":12}],"outputs":[{"localized_name":"MASK","name":"MASK","type":"MASK","links":null}],"properties":{"Node name for S&R":"InvertMask"},"widgets_values":[]},{"id":4,"type":"InvertMask","pos":[50,640],"size":[140,26],"flags":{},"order":0,"mode":0,"inputs":[{"localized_name":"mask","name":"mask","type":"MASK","link":null}],"outputs":[{"localized_name":"MASK","name":"MASK","type":"MASK","links":[9,10,11,12]}],"properties":{"Node name for S&R":"InvertMask"},"widgets_values":[]},{"id":2,"type":"InvertMask","pos":[390,180],"size":[140,26],"flags":{},"order":7,"mode":0,"inputs":[{"localized_name":"mask","name":"mask","type":"MASK","link":2}],"outputs":[{"localized_name":"MASK","name":"MASK","type":"MASK","links":null}],"properties":{"Node name for S&R":"InvertMask"},"widgets_values":[]},{"id":1,"type":"InvertMask","pos":[50,170],"size":[140,26],"flags":{},"order":2,"mode":0,"inputs":[{"localized_name":"mask","name":"mask","type":"MASK","link":null}],"outputs":[{"localized_name":"MASK","name":"MASK","type":"MASK","links":[2,3]}],"properties":{"Node name for S&R":"InvertMask"},"widgets_values":[]},{"id":9,"type":"InvertMask","pos":[50,410],"size":[140,26],"flags":{},"order":1,"mode":0,"inputs":[{"localized_name":"mask","name":"mask","type":"MASK","link":null}],"outputs":[{"localized_name":"MASK","name":"MASK","type":"MASK","links":[]}],"properties":{"Node name for S&R":"InvertMask"},"widgets_values":[]}],"links":[[2,1,0,2,0,"MASK"],[3,1,0,3,0,"MASK"],[9,4,0,8,0,"MASK"],[10,4,0,7,0,"MASK"],[11,4,0,5,0,"MASK"],[12,4,0,6,0,"MASK"]],"floatingLinks":[{"id":6,"origin_id":1,"origin_slot":0,"target_id":-1,"target_slot":-1,"type":"MASK","parentId":1}],"groups":[],"config":{},"extra":{"ds":{"scale":1,"offset":[0,0]},"linkExtensions":[{"id":2,"parentId":3},{"id":3,"parentId":3},{"id":9,"parentId":12},{"id":10,"parentId":15},{"id":11,"parentId":7},{"id":12,"parentId":7}],"reroutes":[{"id":1,"parentId":2,"pos":[340,160],"linkIds":[],"floating":{"slotType":"output"}},{"id":2,"parentId":4,"pos":[290,190],"linkIds":[2,3]},{"id":3,"parentId":2,"pos":[350,220],"linkIds":[2,3]},{"id":4,"pos":[250,190],"linkIds":[2,3]},{"id":6,"parentId":8,"pos":[300,450],"linkIds":[11,12]},{"id":7,"parentId":6,"pos":[350,450],"linkIds":[11,12]},{"id":8,"parentId":13,"pos":[250,450],"linkIds":[11,12]},{"id":10,"pos":[250,650],"linkIds":[9,10,11,12]},{"id":11,"parentId":10,"pos":[300,650],"linkIds":[9]},{"id":12,"parentId":11,"pos":[350,650],"linkIds":[9]},{"id":13,"parentId":10,"pos":[250,570],"linkIds":[10,11,12]},{"id":14,"parentId":13,"pos":[300,570],"linkIds":[10]},{"id":15,"parentId":14,"pos":[350,570],"linkIds":[10]}]},"version":0.4}
\ No newline at end of file
diff --git a/src/lib/litegraph/test/assets/testGraphs.ts b/src/lib/litegraph/test/assets/testGraphs.ts
new file mode 100644
index 0000000000..454b16c122
--- /dev/null
+++ b/src/lib/litegraph/test/assets/testGraphs.ts
@@ -0,0 +1,70 @@
+import type { ISerialisedGraph, SerialisableGraph } from '../../src/litegraph'
+
+export const oldSchemaGraph: ISerialisedGraph = {
+  id: "b4e984f1-b421-4d24-b8b4-ff895793af13",
+  revision: 0,
+  version: 0.4,
+  config: {},
+  last_node_id: 0,
+  last_link_id: 0,
+  groups: [
+    {
+      id: 123,
+      bounding: [20, 20, 1, 3],
+      color: "#6029aa",
+      font_size: 14,
+      title: "A group to test with",
+    },
+  ],
+  nodes: [
+    {
+      id: 1,
+    },
+  ],
+  links: [],
+}
+
+export const minimalSerialisableGraph: SerialisableGraph = {
+  id: "d175890f-716a-4ece-ba33-1d17a513b7be",
+  revision: 0,
+  version: 1,
+  config: {},
+  state: {
+    lastNodeId: 0,
+    lastLinkId: 0,
+    lastGroupId: 0,
+    lastRerouteId: 0,
+  },
+  nodes: [],
+  links: [],
+  groups: [],
+}
+
+export const basicSerialisableGraph: SerialisableGraph = {
+  id: "ca9da7d8-fddd-4707-ad32-67be9be13140",
+  revision: 0,
+  version: 1,
+  config: {},
+  state: {
+    lastNodeId: 0,
+    lastLinkId: 0,
+    lastGroupId: 0,
+    lastRerouteId: 0,
+  },
+  groups: [
+    {
+      id: 123,
+      bounding: [20, 20, 1, 3],
+      color: "#6029aa",
+      font_size: 14,
+      title: "A group to test with",
+    },
+  ],
+  nodes: [
+    {
+      id: 1,
+      type: "mustBeSet",
+    },
+  ],
+  links: [],
+}
diff --git a/src/lib/litegraph/test/canvas/LinkConnector.test.ts b/src/lib/litegraph/test/canvas/LinkConnector.test.ts
new file mode 100644
index 0000000000..6051cde2d8
--- /dev/null
+++ b/src/lib/litegraph/test/canvas/LinkConnector.test.ts
@@ -0,0 +1,131 @@
+import type { INodeInputSlot, LGraphNode } from '../../src/litegraph'
+
+import { beforeEach, describe, expect, test, vi } from "vitest"
+
+// We don't strictly need RenderLink interface import for the mock
+import { LinkConnector } from '../../src/litegraph'
+
+// Mocks
+const mockSetConnectingLinks = vi.fn()
+
+// Mock a structure that has the needed method
+function mockRenderLinkImpl(canConnect: boolean) {
+  return {
+    canConnectToInput: vi.fn().mockReturnValue(canConnect),
+  // Add other properties if they become necessary for tests
+  }
+}
+
+const mockNode = {} as LGraphNode
+const mockInput = {} as INodeInputSlot
+
+describe("LinkConnector", () => {
+  let connector: LinkConnector
+
+  beforeEach(() => {
+    connector = new LinkConnector(mockSetConnectingLinks)
+    // Clear the array directly before each test
+    connector.renderLinks.length = 0
+    vi.clearAllMocks()
+  })
+
+  describe("isInputValidDrop", () => {
+    test("should return false if there are no render links", () => {
+      expect(connector.isInputValidDrop(mockNode, mockInput)).toBe(false)
+    })
+
+    test("should return true if at least one render link can connect", () => {
+      const link1 = mockRenderLinkImpl(false)
+      const link2 = mockRenderLinkImpl(true)
+      // Cast to any to satisfy the push requirement, as we only need the canConnectToInput method
+      connector.renderLinks.push(link1 as any, link2 as any)
+      expect(connector.isInputValidDrop(mockNode, mockInput)).toBe(true)
+      expect(link1.canConnectToInput).toHaveBeenCalledWith(mockNode, mockInput)
+      expect(link2.canConnectToInput).toHaveBeenCalledWith(mockNode, mockInput)
+    })
+
+    test("should return false if no render links can connect", () => {
+      const link1 = mockRenderLinkImpl(false)
+      const link2 = mockRenderLinkImpl(false)
+      connector.renderLinks.push(link1 as any, link2 as any)
+      expect(connector.isInputValidDrop(mockNode, mockInput)).toBe(false)
+      expect(link1.canConnectToInput).toHaveBeenCalledWith(mockNode, mockInput)
+      expect(link2.canConnectToInput).toHaveBeenCalledWith(mockNode, mockInput)
+    })
+
+    test("should call canConnectToInput on each render link until one returns true", () => {
+      const link1 = mockRenderLinkImpl(false)
+      const link2 = mockRenderLinkImpl(true) // This one can connect
+      const link3 = mockRenderLinkImpl(false)
+      connector.renderLinks.push(link1 as any, link2 as any, link3 as any)
+
+      expect(connector.isInputValidDrop(mockNode, mockInput)).toBe(true)
+
+      expect(link1.canConnectToInput).toHaveBeenCalledTimes(1)
+      expect(link2.canConnectToInput).toHaveBeenCalledTimes(1) // Stops here
+      expect(link3.canConnectToInput).not.toHaveBeenCalled() // Should not be called
+    })
+  })
+
+  describe("listenUntilReset", () => {
+    test("should add listener for the specified event and for reset", () => {
+      const listener = vi.fn()
+      const addEventListenerSpy = vi.spyOn(connector.events, "addEventListener")
+
+      connector.listenUntilReset("before-drop-links", listener)
+
+      expect(addEventListenerSpy).toHaveBeenCalledWith("before-drop-links", listener, undefined)
+      expect(addEventListenerSpy).toHaveBeenCalledWith("reset", expect.any(Function), { once: true })
+    })
+
+    test("should call the listener when the event is dispatched before reset", () => {
+      const listener = vi.fn()
+      const eventData = { renderLinks: [], event: {} as any } // Mock event data
+      connector.listenUntilReset("before-drop-links", listener)
+
+      connector.events.dispatch("before-drop-links", eventData)
+
+      expect(listener).toHaveBeenCalledTimes(1)
+      expect(listener).toHaveBeenCalledWith(new CustomEvent("before-drop-links"))
+    })
+
+    test("should remove the listener when reset is dispatched", () => {
+      const listener = vi.fn()
+      const removeEventListenerSpy = vi.spyOn(connector.events, "removeEventListener")
+
+      connector.listenUntilReset("before-drop-links", listener)
+
+      // Simulate the reset event being dispatched
+      connector.events.dispatch("reset", false)
+
+      // Check if removeEventListener was called correctly for the original listener
+      expect(removeEventListenerSpy).toHaveBeenCalledWith("before-drop-links", listener)
+    })
+
+    test("should not call the listener after reset is dispatched", () => {
+      const listener = vi.fn()
+      const eventData = { renderLinks: [], event: {} as any }
+      connector.listenUntilReset("before-drop-links", listener)
+
+      // Dispatch reset first
+      connector.events.dispatch("reset", false)
+
+      // Then dispatch the original event
+      connector.events.dispatch("before-drop-links", eventData)
+
+      expect(listener).not.toHaveBeenCalled()
+    })
+
+    test("should pass options to addEventListener", () => {
+      const listener = vi.fn()
+      const options = { once: true }
+      const addEventListenerSpy = vi.spyOn(connector.events, "addEventListener")
+
+      connector.listenUntilReset("after-drop-links", listener, options)
+
+      expect(addEventListenerSpy).toHaveBeenCalledWith("after-drop-links", listener, options)
+      // Still adds the reset listener
+      expect(addEventListenerSpy).toHaveBeenCalledWith("reset", expect.any(Function), { once: true })
+    })
+  })
+})
diff --git a/src/lib/litegraph/test/infrastructure/Rectangle.resize.test.ts b/src/lib/litegraph/test/infrastructure/Rectangle.resize.test.ts
new file mode 100644
index 0000000000..e783d02342
--- /dev/null
+++ b/src/lib/litegraph/test/infrastructure/Rectangle.resize.test.ts
@@ -0,0 +1,144 @@
+import { beforeEach, describe, expect, test } from "vitest"
+
+import { Rectangle } from '../../src/infrastructure/Rectangle'
+
+describe("Rectangle resize functionality", () => {
+  let rect: Rectangle
+
+  beforeEach(() => {
+    rect = new Rectangle(100, 200, 300, 400) // x, y, width, height
+    // So: left=100, top=200, right=400, bottom=600
+  })
+
+  describe("findContainingCorner", () => {
+    const cornerSize = 15
+
+    test("should detect NW (top-left) corner", () => {
+      expect(rect.findContainingCorner(100, 200, cornerSize)).toBe("NW")
+      expect(rect.findContainingCorner(110, 210, cornerSize)).toBe("NW")
+      expect(rect.findContainingCorner(114, 214, cornerSize)).toBe("NW")
+    })
+
+    test("should detect NE (top-right) corner", () => {
+      // Top-right corner starts at (right - cornerSize, top) = (385, 200)
+      expect(rect.findContainingCorner(385, 200, cornerSize)).toBe("NE")
+      expect(rect.findContainingCorner(390, 210, cornerSize)).toBe("NE")
+      expect(rect.findContainingCorner(399, 214, cornerSize)).toBe("NE")
+    })
+
+    test("should detect SW (bottom-left) corner", () => {
+      // Bottom-left corner starts at (left, bottom - cornerSize) = (100, 585)
+      expect(rect.findContainingCorner(100, 585, cornerSize)).toBe("SW")
+      expect(rect.findContainingCorner(110, 590, cornerSize)).toBe("SW")
+      expect(rect.findContainingCorner(114, 599, cornerSize)).toBe("SW")
+    })
+
+    test("should detect SE (bottom-right) corner", () => {
+      // Bottom-right corner starts at (right - cornerSize, bottom - cornerSize) = (385, 585)
+      expect(rect.findContainingCorner(385, 585, cornerSize)).toBe("SE")
+      expect(rect.findContainingCorner(390, 590, cornerSize)).toBe("SE")
+      expect(rect.findContainingCorner(399, 599, cornerSize)).toBe("SE")
+    })
+
+    test("should return undefined when not in any corner", () => {
+      // Middle of rectangle
+      expect(rect.findContainingCorner(250, 400, cornerSize)).toBeUndefined()
+      // On edge but not in corner
+      expect(rect.findContainingCorner(200, 200, cornerSize)).toBeUndefined()
+      expect(rect.findContainingCorner(100, 400, cornerSize)).toBeUndefined()
+      // Outside rectangle
+      expect(rect.findContainingCorner(50, 150, cornerSize)).toBeUndefined()
+    })
+  })
+
+  describe("corner detection methods", () => {
+    const cornerSize = 20
+
+    describe("isInTopLeftCorner", () => {
+      test("should return true when point is in top-left corner", () => {
+        expect(rect.isInTopLeftCorner(100, 200, cornerSize)).toBe(true)
+        expect(rect.isInTopLeftCorner(110, 210, cornerSize)).toBe(true)
+        expect(rect.isInTopLeftCorner(119, 219, cornerSize)).toBe(true)
+      })
+
+      test("should return false when point is outside top-left corner", () => {
+        expect(rect.isInTopLeftCorner(120, 200, cornerSize)).toBe(false)
+        expect(rect.isInTopLeftCorner(100, 220, cornerSize)).toBe(false)
+        expect(rect.isInTopLeftCorner(99, 200, cornerSize)).toBe(false)
+        expect(rect.isInTopLeftCorner(100, 199, cornerSize)).toBe(false)
+      })
+    })
+
+    describe("isInTopRightCorner", () => {
+      test("should return true when point is in top-right corner", () => {
+        // Top-right corner area is from (right - cornerSize, top) to (right, top + cornerSize)
+        // That's (380, 200) to (400, 220)
+        expect(rect.isInTopRightCorner(380, 200, cornerSize)).toBe(true)
+        expect(rect.isInTopRightCorner(390, 210, cornerSize)).toBe(true)
+        expect(rect.isInTopRightCorner(399, 219, cornerSize)).toBe(true)
+      })
+
+      test("should return false when point is outside top-right corner", () => {
+        expect(rect.isInTopRightCorner(379, 200, cornerSize)).toBe(false)
+        expect(rect.isInTopRightCorner(400, 220, cornerSize)).toBe(false)
+        expect(rect.isInTopRightCorner(401, 200, cornerSize)).toBe(false)
+        expect(rect.isInTopRightCorner(400, 199, cornerSize)).toBe(false)
+      })
+    })
+
+    describe("isInBottomLeftCorner", () => {
+      test("should return true when point is in bottom-left corner", () => {
+        // Bottom-left corner area is from (left, bottom - cornerSize) to (left + cornerSize, bottom)
+        // That's (100, 580) to (120, 600)
+        expect(rect.isInBottomLeftCorner(100, 580, cornerSize)).toBe(true)
+        expect(rect.isInBottomLeftCorner(110, 590, cornerSize)).toBe(true)
+        expect(rect.isInBottomLeftCorner(119, 599, cornerSize)).toBe(true)
+      })
+
+      test("should return false when point is outside bottom-left corner", () => {
+        expect(rect.isInBottomLeftCorner(120, 600, cornerSize)).toBe(false)
+        expect(rect.isInBottomLeftCorner(100, 579, cornerSize)).toBe(false)
+        expect(rect.isInBottomLeftCorner(99, 600, cornerSize)).toBe(false)
+        expect(rect.isInBottomLeftCorner(100, 601, cornerSize)).toBe(false)
+      })
+    })
+
+    describe("isInBottomRightCorner", () => {
+      test("should return true when point is in bottom-right corner", () => {
+        // Bottom-right corner area is from (right - cornerSize, bottom - cornerSize) to (right, bottom)
+        // That's (380, 580) to (400, 600)
+        expect(rect.isInBottomRightCorner(380, 580, cornerSize)).toBe(true)
+        expect(rect.isInBottomRightCorner(390, 590, cornerSize)).toBe(true)
+        expect(rect.isInBottomRightCorner(399, 599, cornerSize)).toBe(true)
+      })
+
+      test("should return false when point is outside bottom-right corner", () => {
+        expect(rect.isInBottomRightCorner(379, 600, cornerSize)).toBe(false)
+        expect(rect.isInBottomRightCorner(400, 579, cornerSize)).toBe(false)
+        expect(rect.isInBottomRightCorner(401, 600, cornerSize)).toBe(false)
+        expect(rect.isInBottomRightCorner(400, 601, cornerSize)).toBe(false)
+      })
+    })
+  })
+
+  describe("edge cases", () => {
+    test("should handle zero-sized corner areas", () => {
+      expect(rect.findContainingCorner(100, 200, 0)).toBeUndefined()
+      expect(rect.isInTopLeftCorner(100, 200, 0)).toBe(false)
+    })
+
+    test("should handle rectangles at origin", () => {
+      const originRect = new Rectangle(0, 0, 100, 100)
+      expect(originRect.findContainingCorner(0, 0, 10)).toBe("NW")
+      // Bottom-right corner is at (90, 90) to (100, 100)
+      expect(originRect.findContainingCorner(90, 90, 10)).toBe("SE")
+    })
+
+    test("should handle negative coordinates", () => {
+      const negRect = new Rectangle(-50, -50, 100, 100)
+      expect(negRect.findContainingCorner(-50, -50, 10)).toBe("NW")
+      // Bottom-right corner is at (40, 40) to (50, 50)
+      expect(negRect.findContainingCorner(40, 40, 10)).toBe("SE")
+    })
+  })
+})
diff --git a/src/lib/litegraph/test/infrastructure/Rectangle.test.ts b/src/lib/litegraph/test/infrastructure/Rectangle.test.ts
new file mode 100644
index 0000000000..1bfbc571ef
--- /dev/null
+++ b/src/lib/litegraph/test/infrastructure/Rectangle.test.ts
@@ -0,0 +1,515 @@
+import type { Point, Size } from '../../src/interfaces'
+
+import { describe, expect, test as baseTest, vi } from "vitest"
+
+import { Rectangle } from '../../src/infrastructure/Rectangle'
+
+// TODO: If there's a common test context, use it here
+// For now, we'll define a simple context for Rectangle tests
+const test = baseTest.extend<{ rect: Rectangle }>({
+  rect: async ({}, use) => {
+    await use(new Rectangle())
+  },
+})
+
+describe("Rectangle", () => {
+  describe("constructor and basic properties", () => {
+    test("should create a default rectangle", ({ rect }) => {
+      expect(rect.x).toBe(0)
+      expect(rect.y).toBe(0)
+      expect(rect.width).toBe(0)
+      expect(rect.height).toBe(0)
+      expect(rect.length).toBe(4)
+    })
+
+    test("should create a rectangle with specified values", () => {
+      const rect = new Rectangle(1, 2, 3, 4)
+      expect(rect.x).toBe(1)
+      expect(rect.y).toBe(2)
+      expect(rect.width).toBe(3)
+      expect(rect.height).toBe(4)
+    })
+
+    test("should update the rectangle values", ({ rect }) => {
+      const newValues: [number, number, number, number] = [1, 2, 3, 4]
+      rect.updateTo(newValues)
+      expect(rect.x).toBe(1)
+      expect(rect.y).toBe(2)
+      expect(rect.width).toBe(3)
+      expect(rect.height).toBe(4)
+    })
+  })
+
+  describe("array operations", () => {
+    test("should return a Float64Array representing the subarray", () => {
+      const rect = new Rectangle(10, 20, 30, 40)
+      const sub = rect.subarray(1, 3)
+      expect(sub).toBeInstanceOf(Float64Array)
+      expect(sub.length).toBe(2)
+      expect(sub[0]).toBe(20) // y
+      expect(sub[1]).toBe(30) // width
+    })
+
+    test("should return a Float64Array for the entire array if no args", () => {
+      const rect = new Rectangle(10, 20, 30, 40)
+      const sub = rect.subarray()
+      expect(sub).toBeInstanceOf(Float64Array)
+      expect(sub.length).toBe(4)
+      expect(sub[0]).toBe(10)
+      expect(sub[1]).toBe(20)
+      expect(sub[2]).toBe(30)
+      expect(sub[3]).toBe(40)
+    })
+
+    test("should return an array with [x, y, width, height]", () => {
+      const rect = new Rectangle(1, 2, 3, 4)
+      const arr = rect.toArray()
+      expect(arr).toEqual([1, 2, 3, 4])
+      expect(Array.isArray(arr)).toBe(true)
+      expect(arr).not.toBeInstanceOf(Float64Array)
+
+      const exported = rect.export()
+      expect(exported).toEqual([1, 2, 3, 4])
+      expect(Array.isArray(exported)).toBe(true)
+      expect(exported).not.toBeInstanceOf(Float64Array)
+    })
+  })
+
+  describe("position and size properties", () => {
+    test("should get the position", ({ rect }) => {
+      rect.x = 10
+      rect.y = 20
+      const pos = rect.pos
+      expect(pos[0]).toBe(10)
+      expect(pos[1]).toBe(20)
+      expect(pos.length).toBe(2)
+    })
+
+    test("should set the position", ({ rect }) => {
+      const newPos: Point = [5, 15]
+      rect.pos = newPos
+      expect(rect.x).toBe(5)
+      expect(rect.y).toBe(15)
+    })
+
+    test("should update the rectangle when the returned pos object is modified", ({ rect }) => {
+      rect.x = 1
+      rect.y = 2
+      const pos = rect.pos
+      pos[0] = 100
+      pos[1] = 200
+      expect(rect.x).toBe(100)
+      expect(rect.y).toBe(200)
+    })
+
+    test("should get the size", ({ rect }) => {
+      rect.width = 30
+      rect.height = 40
+      const size = rect.size
+      expect(size[0]).toBe(30)
+      expect(size[1]).toBe(40)
+      expect(size.length).toBe(2)
+    })
+
+    test("should set the size", ({ rect }) => {
+      const newSize: Size = [35, 45]
+      rect.size = newSize
+      expect(rect.width).toBe(35)
+      expect(rect.height).toBe(45)
+    })
+
+    test("should update the rectangle when the returned size object is modified", ({ rect }) => {
+      rect.width = 3
+      rect.height = 4
+      const size = rect.size
+      size[0] = 300
+      size[1] = 400
+      expect(rect.width).toBe(300)
+      expect(rect.height).toBe(400)
+    })
+  })
+
+  describe("edge properties", () => {
+    test("should get x", ({ rect }) => {
+      rect[0] = 5
+      expect(rect.x).toBe(5)
+    })
+
+    test("should set x", ({ rect }) => {
+      rect.x = 10
+      expect(rect[0]).toBe(10)
+    })
+
+    test("should get y", ({ rect }) => {
+      rect[1] = 6
+      expect(rect.y).toBe(6)
+    })
+
+    test("should set y", ({ rect }) => {
+      rect.y = 11
+      expect(rect[1]).toBe(11)
+    })
+
+    test("should get width", ({ rect }) => {
+      rect[2] = 7
+      expect(rect.width).toBe(7)
+    })
+
+    test("should set width", ({ rect }) => {
+      rect.width = 12
+      expect(rect[2]).toBe(12)
+    })
+
+    test("should get height", ({ rect }) => {
+      rect[3] = 8
+      expect(rect.height).toBe(8)
+    })
+
+    test("should set height", ({ rect }) => {
+      rect.height = 13
+      expect(rect[3]).toBe(13)
+    })
+
+    test("should get left", ({ rect }) => {
+      rect[0] = 1
+      expect(rect.left).toBe(1)
+    })
+
+    test("should set left", ({ rect }) => {
+      rect.left = 2
+      expect(rect[0]).toBe(2)
+    })
+
+    test("should get top", ({ rect }) => {
+      rect[1] = 3
+      expect(rect.top).toBe(3)
+    })
+
+    test("should set top", ({ rect }) => {
+      rect.top = 4
+      expect(rect[1]).toBe(4)
+    })
+
+    test("should get right", ({ rect }) => {
+      rect[0] = 1
+      rect[2] = 10
+      expect(rect.right).toBe(11)
+    })
+
+    test("should set right", ({ rect }) => {
+      rect.x = 1
+      rect.width = 10 // right is 11
+      rect.right = 20 // new right
+      expect(rect.x).toBe(10) // x = right - width = 20 - 10
+      expect(rect.width).toBe(10)
+    })
+
+    test("should get bottom", ({ rect }) => {
+      rect[1] = 2
+      rect[3] = 20
+      expect(rect.bottom).toBe(22)
+    })
+
+    test("should set bottom", ({ rect }) => {
+      rect.y = 2
+      rect.height = 20 // bottom is 22
+      rect.bottom = 30 // new bottom
+      expect(rect.y).toBe(10) // y = bottom - height = 30 - 20
+      expect(rect.height).toBe(20)
+    })
+
+    test("should get centreX", () => {
+      const rect = new Rectangle(0, 0, 10, 0)
+      expect(rect.centreX).toBe(5)
+      rect.x = 5
+      expect(rect.centreX).toBe(10)
+      rect.width = 20
+      expect(rect.centreX).toBe(15) // 5 + (20 * 0.5)
+    })
+
+    test("should get centreY", () => {
+      const rect = new Rectangle(0, 0, 0, 10)
+      expect(rect.centreY).toBe(5)
+      rect.y = 5
+      expect(rect.centreY).toBe(10)
+      rect.height = 20
+      expect(rect.centreY).toBe(15) // 5 + (20 * 0.5)
+    })
+  })
+
+  describe("geometric operations", () => {
+    test("should return the centre point", () => {
+      const rect = new Rectangle(10, 20, 30, 40) // centreX = 10 + 15 = 25, centreY = 20 + 20 = 40
+      const centre = rect.getCentre()
+      expect(centre[0]).toBe(25)
+      expect(centre[1]).toBe(40)
+      expect(centre).not.toBe(rect.pos) // Should be a new Point
+    })
+
+    test("should return the area", () => {
+      expect(new Rectangle(0, 0, 5, 10).getArea()).toBe(50)
+      expect(new Rectangle(1, 1, 0, 10).getArea()).toBe(0)
+    })
+
+    test("should return the perimeter", () => {
+      expect(new Rectangle(0, 0, 5, 10).getPerimeter()).toBe(30) // 2 * (5+10)
+      expect(new Rectangle(0, 0, 0, 0).getPerimeter()).toBe(0)
+    })
+
+    test("should return the top-left point", () => {
+      const rect = new Rectangle(1, 2, 3, 4)
+      const tl = rect.getTopLeft()
+      expect(tl[0]).toBe(1)
+      expect(tl[1]).toBe(2)
+      expect(tl).not.toBe(rect.pos)
+    })
+
+    test("should return the bottom-right point", () => {
+      const rect = new Rectangle(1, 2, 10, 20) // right=11, bottom=22
+      const br = rect.getBottomRight()
+      expect(br[0]).toBe(11)
+      expect(br[1]).toBe(22)
+    })
+
+    test("should return the size", () => {
+      const rect = new Rectangle(1, 2, 30, 40)
+      const s = rect.getSize()
+      expect(s[0]).toBe(30)
+      expect(s[1]).toBe(40)
+      expect(s).not.toBe(rect.size)
+    })
+
+    test("should return the offset from top-left to the point", () => {
+      const rect = new Rectangle(10, 20, 5, 5)
+      const offset = rect.getOffsetTo([12, 23])
+      expect(offset[0]).toBe(2) // 12 - 10
+      expect(offset[1]).toBe(3) // 23 - 20
+    })
+
+    test("should return the offset from the point to the top-left", () => {
+      const rect = new Rectangle(10, 20, 5, 5)
+      const offset = rect.getOffsetFrom([12, 23])
+      expect(offset[0]).toBe(-2) // 10 - 12
+      expect(offset[1]).toBe(-3) // 20 - 23
+    })
+  })
+
+  describe("containment and overlap", () => {
+    const rect = new Rectangle(10, 10, 20, 20) // x: 10, y: 10, right: 30, bottom: 30
+
+    test.each([
+      [10, 10, true], // top-left corner
+      [29, 29, true], // bottom-right corner
+      [15, 15, true], // inside
+      [5, 15, false], // outside left
+      [30, 15, false], // outside right
+      [15, 5, false], // outside top
+      [15, 30, false], // outside bottom
+      [10, 29, true], // on bottom edge
+      [29, 10, true], // on right edge
+    ])("when checking if (%s, %s) is inside, should return %s", (x, y, expected) => {
+      expect(rect.containsXy(x, y)).toBe(expected)
+    })
+
+    test.each([
+      [[0, 0] as Point, true],
+      [[9, 9] as Point, true],
+      [[5, 5] as Point, true],
+      [[-1, 5] as Point, false],
+      [[11, 5] as Point, false],
+      [[5, -1] as Point, false],
+      [[5, 11] as Point, false],
+    ])("should return %s for point %j", (point: Point, expected: boolean) => {
+      rect.updateTo([0, 0, 10, 10])
+      expect(rect.containsPoint(point)).toBe(expected)
+    })
+
+    test.each([
+      // Completely inside
+      [new Rectangle(10, 10, 10, 10), true],
+      // Touching edges
+      [new Rectangle(0, 0, 10, 10), true],
+      [new Rectangle(90, 90, 10, 10), true],
+      // Partially outside
+      [new Rectangle(-10, 10, 20, 20), false],
+      [new Rectangle(10, -10, 20, 20), false],
+      [new Rectangle(90, 10, 20, 20), false],
+      [new Rectangle(10, 90, 20, 20), false],
+      // Completely outside
+      [new Rectangle(200, 200, 10, 10), false],
+      // Outer rectangle is smaller
+      [new Rectangle(0, 0, 5, 5), new Rectangle(0, 0, 10, 10), true],
+      // Same size
+      [new Rectangle(0, 0, 99, 99), true],
+    ])("should return %s when checking if %s is inside outer rect", (inner: Rectangle, expectedOrOuter: boolean | Rectangle, expectedIfThreeArgs?: boolean) => {
+      let testOuter = rect
+      rect.updateTo([0, 0, 100, 100])
+
+      let testExpected = expectedOrOuter as boolean
+      if (typeof expectedOrOuter !== "boolean") {
+        testOuter = expectedOrOuter as Rectangle
+        testExpected = expectedIfThreeArgs as boolean
+      }
+      expect(testOuter.containsRect(inner)).toBe(testExpected)
+    })
+
+    test.each([
+      // Completely overlapping
+      [new Rectangle(15, 15, 10, 10), true], // r2 inside r1
+      // Partially overlapping
+      [new Rectangle(0, 0, 15, 15), true], // r2 top-left of r1
+      [new Rectangle(20, 0, 15, 15), true], // r2 top-right of r1
+      [new Rectangle(0, 20, 15, 15), true], // r2 bottom-left of r1
+      [new Rectangle(20, 20, 15, 15), true], // r2 bottom-right of r1
+      [new Rectangle(15, 5, 10, 30), true], // r2 overlaps vertically
+      [new Rectangle(5, 15, 30, 10), true], // r2 overlaps horizontally
+      // Touching (not overlapping by definition used)
+      [new Rectangle(30, 10, 10, 10), false], // r2 to the right, touching
+      [new Rectangle(0, 10, 10, 10), false], // r2 to the left, touching
+      [new Rectangle(10, 30, 10, 10), false], // r2 below, touching
+      [new Rectangle(10, 0, 10, 10), false], // r2 above, touching
+      // Not overlapping
+      [new Rectangle(100, 100, 5, 5), false], // r2 far away
+      [new Rectangle(0, 0, 5, 5), false], // r2 outside top-left
+      // rect1 inside rect2
+      [new Rectangle(0, 0, 100, 100), true],
+    ])("should return %s for overlap with %s", (rect2, expected) => {
+      const rect = new Rectangle(10, 10, 20, 20) // 10,10 to 30,30
+
+      expect(rect.overlaps(rect2)).toBe(expected)
+      // Overlap should be commutative
+      expect(rect2.overlaps(rect)).toBe(expected)
+    })
+  })
+
+  describe("resize operations", () => {
+    test("should resize from top-left corner while maintaining bottom-right", ({ rect }) => {
+      rect.updateTo([10, 10, 20, 20]) // x: 10, y: 10, width: 20, height: 20
+      rect.resizeTopLeft(5, 5)
+      expect(rect.x).toBe(5)
+      expect(rect.y).toBe(5)
+      expect(rect.width).toBe(25) // 20 + (10 - 5)
+      expect(rect.height).toBe(25) // 20 + (10 - 5)
+    })
+
+    test("should handle negative coordinates for top-left resize", ({ rect }) => {
+      rect.updateTo([10, 10, 20, 20])
+      rect.resizeTopLeft(-5, -5)
+      expect(rect.x).toBe(-5)
+      expect(rect.y).toBe(-5)
+      expect(rect.width).toBe(35) // 20 + (10 - (-5))
+      expect(rect.height).toBe(35) // 20 + (10 - (-5))
+    })
+
+    test("should resize from bottom-left corner while maintaining top-right", ({ rect }) => {
+      rect.updateTo([10, 10, 20, 20])
+      rect.resizeBottomLeft(5, 35)
+      expect(rect.x).toBe(5)
+      expect(rect.y).toBe(10)
+      expect(rect.width).toBe(25) // 20 + (10 - 5)
+      expect(rect.height).toBe(25) // 35 - 10
+    })
+
+    test("should handle negative coordinates for bottom-left resize", ({ rect }) => {
+      rect.updateTo([10, 10, 20, 20])
+      rect.resizeBottomLeft(-5, 35)
+      expect(rect.x).toBe(-5)
+      expect(rect.y).toBe(10)
+      expect(rect.width).toBe(35) // 20 + (10 - (-5))
+      expect(rect.height).toBe(25) // 35 - 10
+    })
+
+    test("should resize from top-right corner while maintaining bottom-left", ({ rect }) => {
+      rect.updateTo([10, 10, 20, 20])
+      rect.resizeTopRight(35, 5)
+      expect(rect.x).toBe(10)
+      expect(rect.y).toBe(5)
+      expect(rect.width).toBe(25) // 35 - 10
+      expect(rect.height).toBe(25) // 20 + (10 - 5)
+    })
+
+    test("should handle negative coordinates for top-right resize", ({ rect }) => {
+      rect.updateTo([10, 10, 20, 20])
+      rect.resizeTopRight(35, -5)
+      expect(rect.x).toBe(10)
+      expect(rect.y).toBe(-5)
+      expect(rect.width).toBe(25) // 35 - 10
+      expect(rect.height).toBe(35) // 20 + (10 - (-5))
+    })
+
+    test("should resize from bottom-right corner while maintaining top-left", ({ rect }) => {
+      rect.updateTo([10, 10, 20, 20])
+      rect.resizeBottomRight(35, 35)
+      expect(rect.x).toBe(10)
+      expect(rect.y).toBe(10)
+      expect(rect.width).toBe(25) // 35 - 10
+      expect(rect.height).toBe(25) // 35 - 10
+    })
+
+    test("should handle negative coordinates for bottom-right resize", ({ rect }) => {
+      rect.updateTo([10, 10, 20, 20])
+      rect.resizeBottomRight(35, -5)
+      expect(rect.x).toBe(10)
+      expect(rect.y).toBe(10)
+      expect(rect.width).toBe(25) // 35 - 10
+      expect(rect.height).toBe(-15) // -5 - 10
+    })
+
+    test("should set width, anchoring the right edge", () => {
+      const rect = new Rectangle(10, 0, 20, 0) // x:10, width:20 -> right:30
+      rect.setWidthRightAnchored(15) // new width 15
+      expect(rect.width).toBe(15)
+      expect(rect.x).toBe(15) // x = oldX + (oldWidth - newWidth) = 10 + (20 - 15) = 15
+      expect(rect.right).toBe(30) // right should remain 30 (15+15)
+    })
+
+    test("should set height, anchoring the bottom edge", () => {
+      const rect = new Rectangle(0, 10, 0, 20) // y:10, height:20 -> bottom:30
+      rect.setHeightBottomAnchored(15) // new height 15
+      expect(rect.height).toBe(15)
+      expect(rect.y).toBe(15) // y = oldY + (oldHeight - newHeight) = 10 + (20-15) = 15
+      expect(rect.bottom).toBe(30) // bottom should remain 30 (15+15)
+    })
+  })
+
+  describe("debug drawing", () => {
+    test("should call canvas context methods", () => {
+      const rect = new Rectangle(10, 20, 30, 40)
+      const mockCtx = {
+        strokeStyle: "black",
+        lineWidth: 1,
+        beginPath: vi.fn(),
+        strokeRect: vi.fn(),
+      } as unknown as CanvasRenderingContext2D
+
+      rect._drawDebug(mockCtx, "blue")
+
+      expect(mockCtx.beginPath).toHaveBeenCalledOnce()
+      expect(mockCtx.strokeRect).toHaveBeenCalledWith(10, 20, 30, 40)
+      expect(mockCtx.strokeStyle).toBe("black") // Restored
+      expect(mockCtx.lineWidth).toBe(1) // Restored
+
+      // Check if it was set during the call
+      // This is a bit tricky as it's restored in finally.
+      // We'd need to spy on the setter or check the calls in order.
+      // For simplicity, we're assuming the implementation is correct if strokeRect was called with correct params.
+      // A more robust test could involve spying on property assignments if vitest supports it easily.
+    })
+
+    test("should use default color if not provided", () => {
+      const rect = new Rectangle(1, 2, 3, 4)
+      const mockCtx = {
+        strokeStyle: "black",
+        lineWidth: 1,
+        beginPath: vi.fn(),
+        strokeRect: vi.fn(),
+      } as unknown as CanvasRenderingContext2D
+      rect._drawDebug(mockCtx)
+      // Check if strokeStyle was "red" at the time of strokeRect
+      // This requires a more complex mock or observing calls.
+      // A simple check is that it ran without error and values were restored.
+      expect(mockCtx.strokeRect).toHaveBeenCalledWith(1, 2, 3, 4)
+      expect(mockCtx.strokeStyle).toBe("black")
+    })
+  })
+})
diff --git a/src/lib/litegraph/test/litegraph.test.ts b/src/lib/litegraph/test/litegraph.test.ts
new file mode 100644
index 0000000000..6faf45542c
--- /dev/null
+++ b/src/lib/litegraph/test/litegraph.test.ts
@@ -0,0 +1,42 @@
+import { beforeEach, describe, expect, vi } from "vitest"
+
+import { clamp, LGraphCanvas, LiteGraph } from '../src/litegraph'
+import { LiteGraphGlobal } from '../src/LiteGraphGlobal'
+
+import { test } from "./testExtensions"
+
+describe("Litegraph module", () => {
+  test("contains a global export", ({ expect }) => {
+    expect(LiteGraph).toBeInstanceOf(LiteGraphGlobal)
+    expect(LiteGraph.LGraphCanvas).toBe(LGraphCanvas)
+  })
+
+  test("has the same structure", ({ expect }) => {
+    const lgGlobal = new LiteGraphGlobal()
+    expect(lgGlobal).toMatchSnapshot("minLGraph")
+  })
+
+  test("clamps values", () => {
+    expect(clamp(-1.124, 13, 24)).toStrictEqual(13)
+    expect(clamp(Infinity, 18, 29)).toStrictEqual(29)
+  })
+})
+
+describe("Import order dependency", () => {
+  beforeEach(() => {
+    vi.resetModules()
+  })
+
+  test("Imports without error when entry point is imported first", async ({ expect }) => {
+    async function importNormally() {
+      const entryPointImport = await import("@/litegraph")
+      const directImport = await import("@/LGraph")
+
+      // Sanity check that imports were cleared.
+      expect(Object.is(LiteGraph, entryPointImport.LiteGraph)).toBe(false)
+      expect(Object.is(LiteGraph.LGraph, directImport.LGraph)).toBe(false)
+    }
+
+    await expect(importNormally()).resolves.toBeUndefined()
+  })
+})
diff --git a/src/lib/litegraph/test/measure.test.ts b/src/lib/litegraph/test/measure.test.ts
new file mode 100644
index 0000000000..57967d07bc
--- /dev/null
+++ b/src/lib/litegraph/test/measure.test.ts
@@ -0,0 +1,282 @@
+import type { Point, Rect } from "../src/interfaces"
+
+import { test as baseTest } from "vitest"
+
+import {
+  addDirectionalOffset,
+  containsCentre,
+  containsRect,
+  createBounds,
+  dist2,
+  distance,
+  findPointOnCurve,
+  getOrientation,
+  isInRect,
+  isInRectangle,
+  isInsideRectangle,
+  isPointInRect,
+  overlapBounding,
+  rotateLink,
+  snapPoint,
+} from "../src/measure"
+import { LinkDirection } from "../src/types/globalEnums"
+
+const test = baseTest.extend({})
+
+test("distance calculates correct distance between two points", ({ expect }) => {
+  expect(distance([0, 0], [3, 4])).toBe(5) // 3-4-5 triangle
+  expect(distance([1, 1], [4, 5])).toBe(5) // Same triangle, shifted
+  expect(distance([0, 0], [0, 0])).toBe(0) // Same point
+})
+
+test("dist2 calculates squared distance between points", ({ expect }) => {
+  expect(dist2(0, 0, 3, 4)).toBe(25) // 3-4-5 triangle squared
+  expect(dist2(1, 1, 4, 5)).toBe(25) // Same triangle, shifted
+  expect(dist2(0, 0, 0, 0)).toBe(0) // Same point
+})
+
+test("isInRectangle correctly identifies points inside rectangle", ({ expect }) => {
+  // Test points inside
+  expect(isInRectangle(5, 5, 0, 0, 10, 10)).toBe(true)
+  // Test points on edges (should be true)
+  expect(isInRectangle(0, 5, 0, 0, 10, 10)).toBe(true)
+  expect(isInRectangle(5, 0, 0, 0, 10, 10)).toBe(true)
+  // Test points outside
+  expect(isInRectangle(-1, 5, 0, 0, 10, 10)).toBe(false)
+  expect(isInRectangle(11, 5, 0, 0, 10, 10)).toBe(false)
+})
+
+test("isPointInRect correctly identifies points inside rectangle", ({ expect }) => {
+  const rect: Rect = [0, 0, 10, 10]
+  expect(isPointInRect([5, 5], rect)).toBe(true)
+  expect(isPointInRect([-1, 5], rect)).toBe(false)
+})
+
+test("overlapBounding correctly identifies overlapping rectangles", ({ expect }) => {
+  const rect1: Rect = [0, 0, 10, 10]
+  const rect2: Rect = [5, 5, 10, 10]
+  const rect3: Rect = [20, 20, 10, 10]
+
+  expect(overlapBounding(rect1, rect2)).toBe(true)
+  expect(overlapBounding(rect1, rect3)).toBe(false)
+})
+
+test("containsCentre correctly identifies if rectangle contains center of another", ({ expect }) => {
+  const container: Rect = [0, 0, 20, 20]
+  const inside: Rect = [5, 5, 10, 10] // Center at 10,10
+  const outside: Rect = [15, 15, 10, 10] // Center at 20,20
+
+  expect(containsCentre(container, inside)).toBe(true)
+  expect(containsCentre(container, outside)).toBe(false)
+})
+
+test("addDirectionalOffset correctly adds offsets", ({ expect }) => {
+  const point: Point = [10, 10]
+
+  // Test each direction
+  addDirectionalOffset(5, LinkDirection.RIGHT, point)
+  expect(point).toEqual([15, 10])
+
+  point[0] = 10 // Reset X
+  addDirectionalOffset(5, LinkDirection.LEFT, point)
+  expect(point).toEqual([5, 10])
+
+  point[0] = 10 // Reset X
+  addDirectionalOffset(5, LinkDirection.DOWN, point)
+  expect(point).toEqual([10, 15])
+
+  point[1] = 10 // Reset Y
+  addDirectionalOffset(5, LinkDirection.UP, point)
+  expect(point).toEqual([10, 5])
+})
+
+test("findPointOnCurve correctly interpolates curve points", ({ expect }) => {
+  const out: Point = [0, 0]
+  const start: Point = [0, 0]
+  const end: Point = [10, 10]
+  const controlA: Point = [0, 10]
+  const controlB: Point = [10, 0]
+
+  // Test midpoint
+  findPointOnCurve(out, start, end, controlA, controlB, 0.5)
+  expect(out[0]).toBeCloseTo(5)
+  expect(out[1]).toBeCloseTo(5)
+})
+
+test("snapPoint correctly snaps points to grid", ({ expect }) => {
+  const point: Point = [12.3, 18.7]
+
+  // Snap to 5
+  snapPoint(point, 5)
+  expect(point).toEqual([10, 20])
+
+  // Test with no snap
+  const point2: Point = [12.3, 18.7]
+  expect(snapPoint(point2, 0)).toBe(false)
+  expect(point2).toEqual([12.3, 18.7])
+
+  const point3: Point = [15, 24.499]
+  expect(snapPoint(point3, 10)).toBe(true)
+  expect(point3).toEqual([20, 20])
+})
+
+test("createBounds correctly creates bounding box", ({ expect }) => {
+  const objects = [
+    { boundingRect: [0, 0, 10, 10] as Rect },
+    { boundingRect: [5, 5, 10, 10] as Rect },
+  ]
+
+  const defaultBounds = createBounds(objects)
+  expect(defaultBounds).toEqual([-10, -10, 35, 35])
+
+  const bounds = createBounds(objects, 5)
+  expect(bounds).toEqual([-5, -5, 25, 25])
+
+  // Test empty set
+  expect(createBounds([])).toBe(null)
+})
+
+test("isInsideRectangle handles edge cases differently from isInRectangle", ({ expect }) => {
+  // isInsideRectangle returns false when point is exactly on left or top edge
+  expect(isInsideRectangle(0, 5, 0, 0, 10, 10)).toBe(false)
+  expect(isInsideRectangle(5, 0, 0, 0, 10, 10)).toBe(false)
+
+  // Points just inside
+  expect(isInsideRectangle(0.1, 5, 0, 0, 10, 10)).toBe(true)
+  expect(isInsideRectangle(5, 0.1, 0, 0, 10, 10)).toBe(true)
+
+  // Points clearly inside
+  expect(isInsideRectangle(5, 5, 0, 0, 10, 10)).toBe(true)
+
+  // Points outside
+  expect(isInsideRectangle(-1, 5, 0, 0, 10, 10)).toBe(false)
+  expect(isInsideRectangle(11, 5, 0, 0, 10, 10)).toBe(false)
+})
+
+test("containsRect correctly identifies nested rectangles", ({ expect }) => {
+  const container: Rect = [0, 0, 20, 20]
+
+  // Fully contained rectangle
+  const inside: Rect = [5, 5, 10, 10]
+  expect(containsRect(container, inside)).toBe(true)
+
+  // Partially overlapping rectangle
+  const partial: Rect = [15, 15, 10, 10]
+  expect(containsRect(container, partial)).toBe(false)
+
+  // Completely outside rectangle
+  const outside: Rect = [30, 30, 10, 10]
+  expect(containsRect(container, outside)).toBe(false)
+
+  // Same size rectangle at same position (should return false)
+  const identical: Rect = [0, 0, 20, 20]
+  expect(containsRect(container, identical)).toBe(false)
+
+  // Larger rectangle (should return false)
+  const larger: Rect = [-5, -5, 30, 30]
+  expect(containsRect(container, larger)).toBe(false)
+})
+
+test("rotateLink correctly rotates offsets between directions", ({ expect }) => {
+  const testCases = [
+    {
+      offset: [10, 5] as Point,
+      from: LinkDirection.LEFT,
+      to: LinkDirection.RIGHT,
+      expected: [-10, -5],
+    },
+    {
+      offset: [10, 5] as Point,
+      from: LinkDirection.LEFT,
+      to: LinkDirection.UP,
+      expected: [5, -10],
+    },
+    {
+      offset: [10, 5] as Point,
+      from: LinkDirection.LEFT,
+      to: LinkDirection.DOWN,
+      expected: [-5, 10],
+    },
+    {
+      offset: [10, 5] as Point,
+      from: LinkDirection.RIGHT,
+      to: LinkDirection.LEFT,
+      expected: [-10, -5],
+    },
+    {
+      offset: [10, 5] as Point,
+      from: LinkDirection.UP,
+      to: LinkDirection.DOWN,
+      expected: [-10, -5],
+    },
+  ]
+
+  for (const { offset, from, to, expected } of testCases) {
+    const testOffset = [...offset] as Point
+    rotateLink(testOffset, from, to)
+    expect(testOffset).toEqual(expected)
+  }
+
+  // Test no rotation when directions are the same
+  const sameDir = [10, 5] as Point
+  rotateLink(sameDir, LinkDirection.LEFT, LinkDirection.LEFT)
+  expect(sameDir).toEqual([10, 5])
+
+  // Test center/none cases
+  const centerCase = [10, 5] as Point
+  rotateLink(centerCase, LinkDirection.LEFT, LinkDirection.CENTER)
+  expect(centerCase).toEqual([10, 5])
+
+  const noneCase = [10, 5] as Point
+  rotateLink(noneCase, LinkDirection.LEFT, LinkDirection.NONE)
+  expect(noneCase).toEqual([10, 5])
+})
+
+test("getOrientation correctly determines point position relative to line", ({ expect }) => {
+  const lineStart: Point = [0, 0]
+  const lineEnd: Point = [10, 10]
+
+  // Point to the left of the line
+  expect(getOrientation(lineStart, lineEnd, 0, 10)).toBeLessThan(0)
+
+  // Point to the right of the line
+  expect(getOrientation(lineStart, lineEnd, 10, 0)).toBeGreaterThan(0)
+
+  // Point on the line
+  expect(getOrientation(lineStart, lineEnd, 5, 5)).toBe(0)
+
+  // Test with horizontal line
+  const hLineEnd: Point = [10, 0]
+  expect(getOrientation(lineStart, hLineEnd, 5, 5)).toBeLessThan(0) // Above line
+  expect(getOrientation(lineStart, hLineEnd, 5, -5)).toBeGreaterThan(0) // Below line
+
+  // Test with vertical line
+  const vLineEnd: Point = [0, 10]
+  expect(getOrientation(lineStart, vLineEnd, 5, 5)).toBeGreaterThan(0) // Right of line
+  expect(getOrientation(lineStart, vLineEnd, -5, 5)).toBeLessThan(0) // Left of line
+})
+
+test("isInRect correctly identifies if point coordinates are inside rectangle", ({ expect }) => {
+  const rect: Rect = [0, 0, 10, 10]
+
+  // Points inside
+  expect(isInRect(5, 5, rect)).toBe(true)
+
+  // Points on edges (should be true for left/top, false for right/bottom)
+  expect(isInRect(0, 5, rect)).toBe(true) // Left edge
+  expect(isInRect(5, 0, rect)).toBe(true) // Top edge
+  expect(isInRect(10, 5, rect)).toBe(false) // Right edge
+  expect(isInRect(5, 10, rect)).toBe(false) // Bottom edge
+
+  // Points at corners
+  expect(isInRect(0, 0, rect)).toBe(true) // Top-left
+  expect(isInRect(10, 0, rect)).toBe(false) // Top-right
+  expect(isInRect(0, 10, rect)).toBe(false) // Bottom-left
+  expect(isInRect(10, 10, rect)).toBe(false) // Bottom-right
+
+  // Points outside
+  expect(isInRect(-1, 5, rect)).toBe(false)
+  expect(isInRect(11, 5, rect)).toBe(false)
+  expect(isInRect(5, -1, rect)).toBe(false)
+  expect(isInRect(5, 11, rect)).toBe(false)
+})
diff --git a/src/lib/litegraph/test/serialise.test.ts b/src/lib/litegraph/test/serialise.test.ts
new file mode 100644
index 0000000000..d51c951de3
--- /dev/null
+++ b/src/lib/litegraph/test/serialise.test.ts
@@ -0,0 +1,30 @@
+import type { ISerialisedGraph } from '../src/types/serialisation'
+
+import { describe } from "vitest"
+
+import { LGraph, LGraphGroup, LGraphNode } from '../src/litegraph'
+
+import { test } from "./testExtensions"
+
+describe("LGraph Serialisation", () => {
+  test("can (de)serialise node / group titles", ({ expect, minimalGraph }) => {
+    const nodeTitle = "Test Node"
+    const groupTitle = "Test Group"
+
+    minimalGraph.add(new LGraphNode(nodeTitle))
+    minimalGraph.add(new LGraphGroup(groupTitle))
+
+    expect(minimalGraph.nodes.length).toBe(1)
+    expect(minimalGraph.nodes[0].title).toEqual(nodeTitle)
+
+    expect(minimalGraph.groups.length).toBe(1)
+    expect(minimalGraph.groups[0].title).toEqual(groupTitle)
+
+    const serialised = JSON.stringify(minimalGraph.serialize())
+    const deserialised = JSON.parse(serialised) as ISerialisedGraph
+
+    const copied = new LGraph(deserialised)
+    expect(copied.nodes.length).toBe(1)
+    expect(copied.groups.length).toBe(1)
+  })
+})
diff --git a/src/lib/litegraph/test/testExtensions.ts b/src/lib/litegraph/test/testExtensions.ts
new file mode 100644
index 0000000000..93a89a811b
--- /dev/null
+++ b/src/lib/litegraph/test/testExtensions.ts
@@ -0,0 +1,66 @@
+import type { ISerialisedGraph, SerialisableGraph } from "../src/types/serialisation"
+
+import { test as baseTest } from "vitest"
+
+import { LGraph } from '../src/LGraph'
+import { LiteGraph } from '../src/litegraph'
+
+import floatingBranch from "./assets/floatingBranch.json"
+import floatingLink from "./assets/floatingLink.json"
+import linkedNodes from "./assets/linkedNodes.json"
+import reroutesComplex from "./assets/reroutesComplex.json"
+import { basicSerialisableGraph, minimalSerialisableGraph, oldSchemaGraph } from "./assets/testGraphs"
+
+interface LitegraphFixtures {
+  minimalGraph: LGraph
+  minimalSerialisableGraph: SerialisableGraph
+  oldSchemaGraph: ISerialisedGraph
+  floatingLinkGraph: ISerialisedGraph
+  linkedNodesGraph: ISerialisedGraph
+  floatingBranchGraph: LGraph
+  reroutesComplexGraph: LGraph
+}
+
+/** These fixtures alter global state, and are difficult to reset. Relies on a single test per-file to reset state. */
+interface DirtyFixtures {
+  basicSerialisableGraph: SerialisableGraph
+}
+
+export const test = baseTest.extend<LitegraphFixtures>({
+  minimalGraph: async ({ }, use) => {
+    // Before each test function
+    const serialisable = structuredClone(minimalSerialisableGraph)
+    const lGraph = new LGraph(serialisable)
+
+    // use the fixture value
+    await use(lGraph)
+  },
+  minimalSerialisableGraph: structuredClone(minimalSerialisableGraph),
+  oldSchemaGraph: structuredClone(oldSchemaGraph),
+  floatingLinkGraph: structuredClone(floatingLink as unknown as ISerialisedGraph),
+  linkedNodesGraph: structuredClone(linkedNodes as unknown as ISerialisedGraph),
+  floatingBranchGraph: async ({}, use) => {
+    const cloned = structuredClone(floatingBranch as unknown as ISerialisedGraph)
+    const graph = new LGraph(cloned)
+    await use(graph)
+  },
+  reroutesComplexGraph: async ({}, use) => {
+    const cloned = structuredClone(reroutesComplex as unknown as ISerialisedGraph)
+    const graph = new LGraph(cloned)
+    await use(graph)
+  },
+})
+
+/** Test that use {@link DirtyFixtures}. One test per file. */
+export const dirtyTest = test.extend<DirtyFixtures>({
+  basicSerialisableGraph: async ({}, use) => {
+    if (!basicSerialisableGraph.nodes) throw new Error("Invalid test object")
+
+    // Register node types
+    for (const node of basicSerialisableGraph.nodes) {
+      LiteGraph.registerNodeType(node.type!, LiteGraph.LGraphNode)
+    }
+
+    await use(structuredClone(basicSerialisableGraph))
+  },
+})
diff --git a/src/lib/litegraph/test/tsconfig.json b/src/lib/litegraph/test/tsconfig.json
new file mode 100644
index 0000000000..4c8bef17ad
--- /dev/null
+++ b/src/lib/litegraph/test/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    /* Test files should not be compiled */
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true
+  },
+  "include": ["**/*"]
+}
diff --git a/src/lib/litegraph/test/utils/spaceDistribution.test.ts b/src/lib/litegraph/test/utils/spaceDistribution.test.ts
new file mode 100644
index 0000000000..8d876f285c
--- /dev/null
+++ b/src/lib/litegraph/test/utils/spaceDistribution.test.ts
@@ -0,0 +1,41 @@
+import { describe, expect, it } from "vitest"
+
+import { distributeSpace, type SpaceRequest } from '../../src/utils/spaceDistribution'
+
+describe("distributeSpace", () => {
+  it("should distribute space according to minimum sizes when space is limited", () => {
+    const requests: SpaceRequest[] = [
+      { minSize: 100 },
+      { minSize: 100 },
+      { minSize: 100 },
+    ]
+    expect(distributeSpace(300, requests)).toEqual([100, 100, 100])
+  })
+
+  it("should distribute extra space equally when no maxSize", () => {
+    const requests: SpaceRequest[] = [{ minSize: 100 }, { minSize: 100 }]
+    expect(distributeSpace(400, requests)).toEqual([200, 200])
+  })
+
+  it("should respect maximum sizes", () => {
+    const requests: SpaceRequest[] = [
+      { minSize: 100, maxSize: 150 },
+      { minSize: 100 },
+    ]
+    expect(distributeSpace(400, requests)).toEqual([150, 250])
+  })
+
+  it("should handle empty requests array", () => {
+    expect(distributeSpace(1000, [])).toEqual([])
+  })
+
+  it("should handle negative total space", () => {
+    const requests: SpaceRequest[] = [{ minSize: 100 }, { minSize: 100 }]
+    expect(distributeSpace(-100, requests)).toEqual([100, 100])
+  })
+
+  it("should handle total space smaller than minimum sizes", () => {
+    const requests: SpaceRequest[] = [{ minSize: 100 }, { minSize: 100 }]
+    expect(distributeSpace(100, requests)).toEqual([100, 100])
+  })
+})
diff --git a/src/lib/litegraph/test/utils/widget.test.ts b/src/lib/litegraph/test/utils/widget.test.ts
new file mode 100644
index 0000000000..06592cda21
--- /dev/null
+++ b/src/lib/litegraph/test/utils/widget.test.ts
@@ -0,0 +1,45 @@
+import type { IWidgetOptions } from '../../src/types/widgets'
+
+import { describe, expect, test } from "vitest"
+
+import { getWidgetStep } from '../../src/utils/widget'
+
+describe("getWidgetStep", () => {
+  test("should return step2 when available", () => {
+    const options: IWidgetOptions<unknown> = {
+      step2: 0.5,
+      step: 20,
+    }
+
+    expect(getWidgetStep(options)).toBe(0.5)
+  })
+
+  test("should calculate from step when step2 is not available", () => {
+    const options: IWidgetOptions<unknown> = {
+      step: 20,
+    }
+
+    expect(getWidgetStep(options)).toBe(2) // 20 * 0.1 = 2
+  })
+
+  test("should use default step value of 10 when neither step2 nor step is provided", () => {
+    const options: IWidgetOptions<unknown> = {}
+
+    expect(getWidgetStep(options)).toBe(1) // 10 * 0.1 = 1
+  })
+  // Zero value is not allowed for step, fallback to 1.
+  test("should handle zero values correctly", () => {
+    const optionsWithZeroStep2: IWidgetOptions<unknown> = {
+      step2: 0,
+      step: 20,
+    }
+
+    expect(getWidgetStep(optionsWithZeroStep2)).toBe(2)
+
+    const optionsWithZeroStep: IWidgetOptions<unknown> = {
+      step: 0,
+    }
+
+    expect(getWidgetStep(optionsWithZeroStep)).toBe(1)
+  })
+})
diff --git a/src/lib/litegraph/tsconfig.json b/src/lib/litegraph/tsconfig.json
new file mode 100644
index 0000000000..fb74c2fb1e
--- /dev/null
+++ b/src/lib/litegraph/tsconfig.json
@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "moduleResolution": "Node",
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "downlevelIteration": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "verbatimModuleSyntax": true,
+
+    /* AllowJs during migration phase */
+    "allowJs": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "typeRoots": [],
+    "outDir": "./dist",
+    "rootDir": "./"
+  },
+  "include": ["src/**/*"]
+}
diff --git a/src/lib/litegraph/vite.config.mts b/src/lib/litegraph/vite.config.mts
new file mode 100644
index 0000000000..00236f0768
--- /dev/null
+++ b/src/lib/litegraph/vite.config.mts
@@ -0,0 +1,40 @@
+/// <reference types='vitest' />
+import path from "node:path"
+
+import { defineConfig } from "vite"
+import dts from "vite-plugin-dts"
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: path.resolve(import.meta.dirname, "src/litegraph"),
+      name: "litegraph.js",
+      fileName: format => `litegraph.${format}.js`,
+      formats: ["es", "umd"],
+    },
+    sourcemap: true,
+    target: ["es2022"],
+  },
+  esbuild: {
+    minifyIdentifiers: false,
+    minifySyntax: false,
+  },
+  plugins: [
+    dts({
+      entryRoot: "src",
+      insertTypesEntry: true,
+      include: ["src/**/*.ts"],
+      outDir: "dist",
+      aliasesExclude: ["@"],
+    }),
+  ],
+  resolve: {
+    alias: { "@": "/src" },
+  },
+  test: {
+    alias: { "@/": path.resolve(import.meta.dirname, "./src/") },
+    environment: "jsdom",
+    restoreMocks: true,
+    unstubGlobals: true,
+  },
+})
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 8f81754fe7..7c7f4c330f 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -49,6 +49,7 @@
     "no": "No",
     "cancel": "Cancel",
     "close": "Close",
+    "dropYourFileOr": "Drop your file or",
     "back": "Back",
     "next": "Next",
     "install": "Install",
diff --git a/src/main.ts b/src/main.ts
index ddace3ee1a..8e65bbe923 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,3 @@
-import '@comfyorg/litegraph/style.css'
 import { definePreset } from '@primevue/themes'
 import Aura from '@primevue/themes/aura'
 import * as Sentry from '@sentry/vue'
@@ -14,6 +13,7 @@ import { VueFire, VueFireAuth } from 'vuefire'
 
 import '@/assets/css/style.css'
 import { FIREBASE_CONFIG } from '@/config/firebase'
+import '@/lib/litegraph/public/css/litegraph.css'
 import router from '@/router'
 
 import App from './App.vue'
diff --git a/src/schemas/apiSchema.ts b/src/schemas/apiSchema.ts
index da637612ee..ea5bc44c7f 100644
--- a/src/schemas/apiSchema.ts
+++ b/src/schemas/apiSchema.ts
@@ -1,4 +1,3 @@
-import { LinkMarkerShape } from '@comfyorg/litegraph'
 import { z } from 'zod'
 import { fromZodError } from 'zod-validation-error'
 
@@ -8,6 +7,8 @@ import { zKeybinding } from '@/schemas/keyBindingSchema'
 import { NodeBadgeMode } from '@/types/nodeSource'
 import { LinkReleaseTriggerAction } from '@/types/searchBoxTypes'
 
+import { LinkMarkerShape } from '../lib/litegraph/src/litegraph'
+
 const zNodeType = z.string()
 const zQueueIndex = z.number()
 const zPromptId = z.string()
diff --git a/src/schemas/colorPaletteSchema.ts b/src/schemas/colorPaletteSchema.ts
index 9001eff2a6..18e338e7e0 100644
--- a/src/schemas/colorPaletteSchema.ts
+++ b/src/schemas/colorPaletteSchema.ts
@@ -1,6 +1,7 @@
-import { LiteGraph } from '@comfyorg/litegraph'
 import { z } from 'zod'
 
+import { LiteGraph } from '../lib/litegraph/src/litegraph'
+
 const nodeSlotSchema = z.object({
   CLIP: z.string(),
   CLIP_VISION: z.string(),
diff --git a/src/schemas/nodeDef/nodeDefSchemaV2.ts b/src/schemas/nodeDef/nodeDefSchemaV2.ts
index a5594953dc..12d01b302c 100644
--- a/src/schemas/nodeDef/nodeDefSchemaV2.ts
+++ b/src/schemas/nodeDef/nodeDefSchemaV2.ts
@@ -39,6 +39,119 @@ const zComboInputSpec = zComboInputOptions.extend({
   isOptional: z.boolean().optional()
 })
 
+const zColorInputSpec = zBaseInputOptions.extend({
+  type: z.literal('COLOR'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z
+    .object({
+      default: z.string().optional()
+    })
+    .optional()
+})
+
+const zFileUploadInputSpec = zBaseInputOptions.extend({
+  type: z.literal('FILEUPLOAD'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z.record(z.unknown()).optional()
+})
+
+const zImageInputSpec = zBaseInputOptions.extend({
+  type: z.literal('IMAGE'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z.record(z.unknown()).optional()
+})
+
+const zImageCompareInputSpec = zBaseInputOptions.extend({
+  type: z.literal('IMAGECOMPARE'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z.record(z.unknown()).optional()
+})
+
+const zMarkdownInputSpec = zBaseInputOptions.extend({
+  type: z.literal('MARKDOWN'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z
+    .object({
+      content: z.string().optional()
+    })
+    .optional()
+})
+
+const zTreeSelectInputSpec = zBaseInputOptions.extend({
+  type: z.literal('TREESELECT'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z
+    .object({
+      multiple: z.boolean().optional(),
+      values: z.array(z.unknown()).optional()
+    })
+    .optional()
+})
+
+const zMultiSelectInputSpec = zBaseInputOptions.extend({
+  type: z.literal('MULTISELECT'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z
+    .object({
+      values: z.array(z.string()).optional()
+    })
+    .optional()
+})
+
+const zChartInputSpec = zBaseInputOptions.extend({
+  type: z.literal('CHART'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z
+    .object({
+      type: z.enum(['bar', 'line']).optional(),
+      data: z.object({}).optional()
+    })
+    .optional()
+})
+
+const zGalleriaInputSpec = zBaseInputOptions.extend({
+  type: z.literal('GALLERIA'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z
+    .object({
+      images: z.array(z.string()).optional()
+    })
+    .optional()
+})
+
+const zSelectButtonInputSpec = zBaseInputOptions.extend({
+  type: z.literal('SELECTBUTTON'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z
+    .object({
+      values: z.array(z.string()).optional()
+    })
+    .optional()
+})
+
+const zTextareaInputSpec = zBaseInputOptions.extend({
+  type: z.literal('TEXTAREA'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z
+    .object({
+      rows: z.number().optional(),
+      cols: z.number().optional(),
+      default: z.string().optional()
+    })
+    .optional()
+})
+
 const zCustomInputSpec = zBaseInputOptions.extend({
   type: z.string(),
   name: z.string(),
@@ -51,6 +164,17 @@ const zInputSpec = z.union([
   zBooleanInputSpec,
   zStringInputSpec,
   zComboInputSpec,
+  zColorInputSpec,
+  zFileUploadInputSpec,
+  zImageInputSpec,
+  zImageCompareInputSpec,
+  zMarkdownInputSpec,
+  zTreeSelectInputSpec,
+  zMultiSelectInputSpec,
+  zChartInputSpec,
+  zGalleriaInputSpec,
+  zSelectButtonInputSpec,
+  zTextareaInputSpec,
   zCustomInputSpec
 ])
 
@@ -88,6 +212,17 @@ export type FloatInputSpec = z.infer<typeof zFloatInputSpec>
 export type BooleanInputSpec = z.infer<typeof zBooleanInputSpec>
 export type StringInputSpec = z.infer<typeof zStringInputSpec>
 export type ComboInputSpec = z.infer<typeof zComboInputSpec>
+export type ColorInputSpec = z.infer<typeof zColorInputSpec>
+export type FileUploadInputSpec = z.infer<typeof zFileUploadInputSpec>
+export type ImageInputSpec = z.infer<typeof zImageInputSpec>
+export type ImageCompareInputSpec = z.infer<typeof zImageCompareInputSpec>
+export type MarkdownInputSpec = z.infer<typeof zMarkdownInputSpec>
+export type TreeSelectInputSpec = z.infer<typeof zTreeSelectInputSpec>
+export type MultiSelectInputSpec = z.infer<typeof zMultiSelectInputSpec>
+export type ChartInputSpec = z.infer<typeof zChartInputSpec>
+export type GalleriaInputSpec = z.infer<typeof zGalleriaInputSpec>
+export type SelectButtonInputSpec = z.infer<typeof zSelectButtonInputSpec>
+export type TextareaInputSpec = z.infer<typeof zTextareaInputSpec>
 export type CustomInputSpec = z.infer<typeof zCustomInputSpec>
 
 export type InputSpec = z.infer<typeof zInputSpec>
@@ -124,6 +259,72 @@ export const isComboInputSpec = (
   return inputSpec.type === 'COMBO'
 }
 
+export const isColorInputSpec = (
+  inputSpec: InputSpec
+): inputSpec is ColorInputSpec => {
+  return inputSpec.type === 'COLOR'
+}
+
+export const isFileUploadInputSpec = (
+  inputSpec: InputSpec
+): inputSpec is FileUploadInputSpec => {
+  return inputSpec.type === 'FILEUPLOAD'
+}
+
+export const isImageInputSpec = (
+  inputSpec: InputSpec
+): inputSpec is ImageInputSpec => {
+  return inputSpec.type === 'IMAGE'
+}
+
+export const isImageCompareInputSpec = (
+  inputSpec: InputSpec
+): inputSpec is ImageCompareInputSpec => {
+  return inputSpec.type === 'IMAGECOMPARE'
+}
+
+export const isMarkdownInputSpec = (
+  inputSpec: InputSpec
+): inputSpec is MarkdownInputSpec => {
+  return inputSpec.type === 'MARKDOWN'
+}
+
+export const isTreeSelectInputSpec = (
+  inputSpec: InputSpec
+): inputSpec is TreeSelectInputSpec => {
+  return inputSpec.type === 'TREESELECT'
+}
+
+export const isMultiSelectInputSpec = (
+  inputSpec: InputSpec
+): inputSpec is MultiSelectInputSpec => {
+  return inputSpec.type === 'MULTISELECT'
+}
+
+export const isChartInputSpec = (
+  inputSpec: InputSpec
+): inputSpec is ChartInputSpec => {
+  return inputSpec.type === 'CHART'
+}
+
+export const isGalleriaInputSpec = (
+  inputSpec: InputSpec
+): inputSpec is GalleriaInputSpec => {
+  return inputSpec.type === 'GALLERIA'
+}
+
+export const isSelectButtonInputSpec = (
+  inputSpec: InputSpec
+): inputSpec is SelectButtonInputSpec => {
+  return inputSpec.type === 'SELECTBUTTON'
+}
+
+export const isTextareaInputSpec = (
+  inputSpec: InputSpec
+): inputSpec is TextareaInputSpec => {
+  return inputSpec.type === 'TEXTAREA'
+}
+
 /**
  * Check if a node definition is a valid ComfyUI node definition.
  *
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index 7744ae757d..d91d4b34e2 100644
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -1,12 +1,3 @@
-import {
-  LGraph,
-  LGraphCanvas,
-  LGraphEventMode,
-  LGraphNode,
-  LiteGraph
-} from '@comfyorg/litegraph'
-import type { Vector2 } from '@comfyorg/litegraph'
-import type { IBaseWidget } from '@comfyorg/litegraph/dist/types/widgets'
 import _ from 'lodash'
 import type { ToastMessageOptions } from 'primevue/toast'
 import { reactive } from 'vue'
@@ -72,6 +63,15 @@ import {
 import { getSelectedModelsMetadata } from '@/utils/modelMetadataUtil'
 import { deserialiseAndCreate } from '@/utils/vintageClipboard'
 
+import {
+  LGraph,
+  LGraphCanvas,
+  LGraphEventMode,
+  LGraphNode,
+  LiteGraph
+} from '../lib/litegraph/src/litegraph'
+import type { Vector2 } from '../lib/litegraph/src/litegraph'
+import type { IBaseWidget } from '../lib/litegraph/src/types/widgets'
 import { type ComfyApi, PromptExecutionError, api } from './api'
 import { defaultGraph } from './defaultGraph'
 import {
diff --git a/src/scripts/changeTracker.ts b/src/scripts/changeTracker.ts
index f6a03afd5b..7a6810cb91 100644
--- a/src/scripts/changeTracker.ts
+++ b/src/scripts/changeTracker.ts
@@ -1,4 +1,3 @@
-import { LGraphCanvas, LiteGraph } from '@comfyorg/litegraph'
 import * as jsondiffpatch from 'jsondiffpatch'
 import _ from 'lodash'
 import log from 'loglevel'
@@ -9,6 +8,7 @@ import { useExecutionStore } from '@/stores/executionStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { ComfyWorkflow, useWorkflowStore } from '@/stores/workflowStore'
 
+import { LGraphCanvas, LiteGraph } from '../lib/litegraph/src/litegraph'
 import { api } from './api'
 import type { ComfyApp } from './app'
 import { app } from './app'
diff --git a/src/scripts/domWidget.ts b/src/scripts/domWidget.ts
index 9846234fc0..64a699cab6 100644
--- a/src/scripts/domWidget.ts
+++ b/src/scripts/domWidget.ts
@@ -1,8 +1,3 @@
-import { LGraphNode, LegacyWidget, LiteGraph } from '@comfyorg/litegraph'
-import type {
-  IBaseWidget,
-  IWidgetOptions
-} from '@comfyorg/litegraph/dist/types/widgets'
 import _ from 'lodash'
 import { type Component, toRaw } from 'vue'
 
@@ -11,6 +6,16 @@ import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { generateUUID } from '@/utils/formatUtil'
 
+import {
+  LGraphNode,
+  LegacyWidget,
+  LiteGraph
+} from '../lib/litegraph/src/litegraph'
+import type {
+  IBaseWidget,
+  IWidgetOptions
+} from '../lib/litegraph/src/types/widgets'
+
 export interface BaseDOMWidget<V extends object | string = object | string>
   extends IBaseWidget<V, string, DOMWidgetOptions<V>> {
   // ICustomWidget properties
diff --git a/src/scripts/errorNodeWidgets.ts b/src/scripts/errorNodeWidgets.ts
index 48a195b285..9376ca2631 100644
--- a/src/scripts/errorNodeWidgets.ts
+++ b/src/scripts/errorNodeWidgets.ts
@@ -1,11 +1,11 @@
-import { LGraphNode } from '@comfyorg/litegraph'
-import type { IBaseWidget } from '@comfyorg/litegraph/dist/types/widgets'
-
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import { useBooleanWidget } from '@/composables/widgets/useBooleanWidget'
 import { useFloatWidget } from '@/composables/widgets/useFloatWidget'
 import { useStringWidget } from '@/composables/widgets/useStringWidget'
 
+import { LGraphNode } from '../lib/litegraph/src/litegraph'
+import type { IBaseWidget } from '../lib/litegraph/src/types/widgets'
+
 const StringWidget = useStringWidget()
 const FloatWidget = useFloatWidget()
 const BooleanWidget = useBooleanWidget()
diff --git a/src/scripts/fluxKontextEditNode.ts b/src/scripts/fluxKontextEditNode.ts
index e684e6d6f1..2ac2a3cab8 100644
--- a/src/scripts/fluxKontextEditNode.ts
+++ b/src/scripts/fluxKontextEditNode.ts
@@ -1,3 +1,7 @@
+import _ from 'lodash'
+
+import { parseFilePath } from '@/utils/formatUtil'
+
 import {
   type INodeOutputSlot,
   type LGraph,
@@ -5,12 +9,8 @@ import {
   LLink,
   LiteGraph,
   type Point
-} from '@comfyorg/litegraph'
-import type { IBaseWidget } from '@comfyorg/litegraph/dist/types/widgets'
-import _ from 'lodash'
-
-import { parseFilePath } from '@/utils/formatUtil'
-
+} from '../lib/litegraph/src/litegraph'
+import type { IBaseWidget } from '../lib/litegraph/src/types/widgets'
 import { app } from './app'
 
 const fluxKontextGroupNode = {
diff --git a/src/scripts/pnginfo.ts b/src/scripts/pnginfo.ts
index 7c7f6f5978..6f644d521f 100644
--- a/src/scripts/pnginfo.ts
+++ b/src/scripts/pnginfo.ts
@@ -1,5 +1,4 @@
-import { LiteGraph } from '@comfyorg/litegraph'
-
+import { LiteGraph } from '../lib/litegraph/src/litegraph'
 import { api } from './api'
 import { getFromFlacFile } from './metadata/flac'
 import { getFromPngFile } from './metadata/png'
diff --git a/src/scripts/widgets.ts b/src/scripts/widgets.ts
index 90f5e54f7d..3cb3956fc7 100644
--- a/src/scripts/widgets.ts
+++ b/src/scripts/widgets.ts
@@ -1,23 +1,32 @@
-import { type LGraphNode, isComboWidget } from '@comfyorg/litegraph'
-import type {
-  IBaseWidget,
-  IComboWidget,
-  IStringWidget
-} from '@comfyorg/litegraph/dist/types/widgets'
-
 import { useBooleanWidget } from '@/composables/widgets/useBooleanWidget'
+import { useChartWidget } from '@/composables/widgets/useChartWidget'
+import { useColorWidget } from '@/composables/widgets/useColorWidget'
 import { useComboWidget } from '@/composables/widgets/useComboWidget'
+import { useFileUploadWidget } from '@/composables/widgets/useFileUploadWidget'
 import { useFloatWidget } from '@/composables/widgets/useFloatWidget'
+import { useGalleriaWidget } from '@/composables/widgets/useGalleriaWidget'
+import { useImageCompareWidget } from '@/composables/widgets/useImageCompareWidget'
 import { useImageUploadWidget } from '@/composables/widgets/useImageUploadWidget'
+import { useImageWidget } from '@/composables/widgets/useImageWidget'
 import { useIntWidget } from '@/composables/widgets/useIntWidget'
 import { useMarkdownWidget } from '@/composables/widgets/useMarkdownWidget'
+import { useMultiSelectWidget } from '@/composables/widgets/useMultiSelectWidget'
+import { useSelectButtonWidget } from '@/composables/widgets/useSelectButtonWidget'
 import { useStringWidget } from '@/composables/widgets/useStringWidget'
+import { useTextareaWidget } from '@/composables/widgets/useTextareaWidget'
+import { useTreeSelectWidget } from '@/composables/widgets/useTreeSelectWidget'
 import { t } from '@/i18n'
 import { transformInputSpecV1ToV2 } from '@/schemas/nodeDef/migration'
 import type { InputSpec as InputSpecV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { InputSpec } from '@/schemas/nodeDefSchema'
 import { useSettingStore } from '@/stores/settingStore'
 
+import { type LGraphNode, isComboWidget } from '../lib/litegraph/src/litegraph'
+import type {
+  IBaseWidget,
+  IComboWidget,
+  IStringWidget
+} from '../lib/litegraph/src/types/widgets'
 import type { ComfyApp } from './app'
 import './domWidget'
 import './errorNodeWidgets'
@@ -289,5 +298,15 @@ export const ComfyWidgets: Record<string, ComfyWidgetConstructor> = {
   STRING: transformWidgetConstructorV2ToV1(useStringWidget()),
   MARKDOWN: transformWidgetConstructorV2ToV1(useMarkdownWidget()),
   COMBO: transformWidgetConstructorV2ToV1(useComboWidget()),
-  IMAGEUPLOAD: useImageUploadWidget()
+  IMAGEUPLOAD: useImageUploadWidget(),
+  FILEUPLOAD: transformWidgetConstructorV2ToV1(useFileUploadWidget()),
+  COLOR: transformWidgetConstructorV2ToV1(useColorWidget()),
+  IMAGE: transformWidgetConstructorV2ToV1(useImageWidget()),
+  IMAGECOMPARE: transformWidgetConstructorV2ToV1(useImageCompareWidget()),
+  TREESELECT: transformWidgetConstructorV2ToV1(useTreeSelectWidget()),
+  MULTISELECT: transformWidgetConstructorV2ToV1(useMultiSelectWidget()),
+  CHART: transformWidgetConstructorV2ToV1(useChartWidget()),
+  GALLERIA: transformWidgetConstructorV2ToV1(useGalleriaWidget()),
+  SELECTBUTTON: transformWidgetConstructorV2ToV1(useSelectButtonWidget()),
+  TEXTAREA: transformWidgetConstructorV2ToV1(useTextareaWidget())
 }
diff --git a/src/services/colorPaletteService.ts b/src/services/colorPaletteService.ts
index 75249082f4..2f5ce5d6bd 100644
--- a/src/services/colorPaletteService.ts
+++ b/src/services/colorPaletteService.ts
@@ -1,5 +1,3 @@
-import { LGraphCanvas } from '@comfyorg/litegraph'
-import { LiteGraph } from '@comfyorg/litegraph'
 import { toRaw } from 'vue'
 import { fromZodError } from 'zod-validation-error'
 
@@ -15,6 +13,9 @@ import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 
+import { LGraphCanvas } from '../lib/litegraph/src/litegraph'
+import { LiteGraph } from '../lib/litegraph/src/litegraph'
+
 export const useColorPaletteService = () => {
   const colorPaletteStore = useColorPaletteStore()
   const settingStore = useSettingStore()
diff --git a/src/services/litegraphService.ts b/src/services/litegraphService.ts
index afd31d83b1..58d976dbb1 100644
--- a/src/services/litegraphService.ts
+++ b/src/services/litegraphService.ts
@@ -1,22 +1,3 @@
-import {
-  type IContextMenuValue,
-  LGraphBadge,
-  LGraphCanvas,
-  LGraphEventMode,
-  LGraphNode,
-  LiteGraph,
-  RenderShape,
-  type Subgraph,
-  SubgraphNode,
-  type Vector2,
-  createBounds
-} from '@comfyorg/litegraph'
-import type {
-  ExportedSubgraphInstance,
-  ISerialisableNodeInput,
-  ISerialisableNodeOutput,
-  ISerialisedNode
-} from '@comfyorg/litegraph/dist/types/serialisation'
 import _ from 'lodash'
 
 import { useNodeAnimatedImage } from '@/composables/node/useNodeAnimatedImage'
@@ -47,6 +28,25 @@ import {
   migrateWidgetsValues
 } from '@/utils/litegraphUtil'
 
+import {
+  type IContextMenuValue,
+  LGraphBadge,
+  LGraphCanvas,
+  LGraphEventMode,
+  LGraphNode,
+  LiteGraph,
+  RenderShape,
+  type Subgraph,
+  SubgraphNode,
+  type Vector2,
+  createBounds
+} from '../lib/litegraph/src/litegraph'
+import type {
+  ExportedSubgraphInstance,
+  ISerialisableNodeInput,
+  ISerialisableNodeOutput,
+  ISerialisedNode
+} from '../lib/litegraph/src/types/serialisation'
 import { useExtensionService } from './extensionService'
 
 export const CONFIG = Symbol()
diff --git a/src/services/load3dService.ts b/src/services/load3dService.ts
index 515579ef90..61556688f2 100644
--- a/src/services/load3dService.ts
+++ b/src/services/load3dService.ts
@@ -1,10 +1,11 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
 import { toRaw } from 'vue'
 
 import Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
 import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 
+import type { LGraphNode } from '../lib/litegraph/src/litegraph'
+
 type Load3dReadyCallback = (load3d: Load3d | Load3dAnimation) => void
 
 export class Load3dService {
diff --git a/src/services/subgraphService.ts b/src/services/subgraphService.ts
index ac1cb3d0aa..8292f7442e 100644
--- a/src/services/subgraphService.ts
+++ b/src/services/subgraphService.ts
@@ -1,14 +1,13 @@
-import {
-  type ExportedSubgraph,
-  type ExportedSubgraphInstance,
-  type Subgraph
-} from '@comfyorg/litegraph'
-
 import type { ComfyWorkflowJSON } from '@/schemas/comfyWorkflowSchema'
 import type { ComfyNodeDef as ComfyNodeDefV1 } from '@/schemas/nodeDefSchema'
 import { app as comfyApp } from '@/scripts/app'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 
+import {
+  type ExportedSubgraph,
+  type ExportedSubgraphInstance,
+  type Subgraph
+} from '../lib/litegraph/src/litegraph'
 import { useLitegraphService } from './litegraphService'
 
 export const useSubgraphService = () => {
diff --git a/src/services/workflowService.ts b/src/services/workflowService.ts
index 4fcbd44b5c..83f15d6842 100644
--- a/src/services/workflowService.ts
+++ b/src/services/workflowService.ts
@@ -1,5 +1,3 @@
-import { LGraph, LGraphCanvas } from '@comfyorg/litegraph'
-import type { SerialisableGraph, Vector2 } from '@comfyorg/litegraph'
 import { toRaw } from 'vue'
 
 import { t } from '@/i18n'
@@ -14,6 +12,8 @@ import { ComfyWorkflow, useWorkflowStore } from '@/stores/workflowStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { appendJsonExt, generateUUID } from '@/utils/formatUtil'
 
+import { LGraph, LGraphCanvas } from '../lib/litegraph/src/litegraph'
+import type { SerialisableGraph, Vector2 } from '../lib/litegraph/src/litegraph'
 import { useDialogService } from './dialogService'
 
 export const useWorkflowService = () => {
diff --git a/src/stores/executionStore.ts b/src/stores/executionStore.ts
index a8667da0d1..47738b79be 100644
--- a/src/stores/executionStore.ts
+++ b/src/stores/executionStore.ts
@@ -1,4 +1,3 @@
-import type { LGraph, Subgraph } from '@comfyorg/litegraph'
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 
@@ -22,6 +21,7 @@ import type {
 } from '@/schemas/comfyWorkflowSchema'
 import { api } from '@/scripts/api'
 
+import type { LGraph, Subgraph } from '../lib/litegraph/src/litegraph'
 import { useCanvasStore } from './graphStore'
 import { ComfyWorkflow, useWorkflowStore } from './workflowStore'
 
diff --git a/src/stores/graphStore.ts b/src/stores/graphStore.ts
index a1e0d00436..9620c739c9 100644
--- a/src/stores/graphStore.ts
+++ b/src/stores/graphStore.ts
@@ -1,10 +1,15 @@
-import type { LGraphCanvas, LGraphGroup, LGraphNode } from '@comfyorg/litegraph'
-import type { Positionable } from '@comfyorg/litegraph/dist/interfaces'
 import { defineStore } from 'pinia'
 import { type Raw, computed, markRaw, ref, shallowRef } from 'vue'
 
 import { isLGraphGroup, isLGraphNode, isReroute } from '@/utils/litegraphUtil'
 
+import type { Positionable } from '../lib/litegraph/src/interfaces'
+import type {
+  LGraphCanvas,
+  LGraphGroup,
+  LGraphNode
+} from '../lib/litegraph/src/litegraph'
+
 export const useTitleEditorStore = defineStore('titleEditor', () => {
   const titleEditorTarget = shallowRef<LGraphNode | LGraphGroup | null>(null)
 
diff --git a/src/stores/imagePreviewStore.ts b/src/stores/imagePreviewStore.ts
index b6d88c9bbd..268b306bb4 100644
--- a/src/stores/imagePreviewStore.ts
+++ b/src/stores/imagePreviewStore.ts
@@ -1,4 +1,3 @@
-import { LGraphNode } from '@comfyorg/litegraph'
 import { defineStore } from 'pinia'
 
 import {
@@ -11,6 +10,8 @@ import { app } from '@/scripts/app'
 import { parseFilePath } from '@/utils/formatUtil'
 import { isVideoNode } from '@/utils/litegraphUtil'
 
+import { LGraphNode } from '../lib/litegraph/src/litegraph'
+
 const createOutputs = (
   filenames: string[],
   type: ResultItemType,
diff --git a/src/stores/nodeDefStore.ts b/src/stores/nodeDefStore.ts
index aaa6d000b5..683579ddd4 100644
--- a/src/stores/nodeDefStore.ts
+++ b/src/stores/nodeDefStore.ts
@@ -1,4 +1,3 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
 import axios from 'axios'
 import _ from 'lodash'
 import { defineStore } from 'pinia'
@@ -25,6 +24,8 @@ import type { TreeNode } from '@/types/treeExplorerTypes'
 import type { FuseSearchable, SearchAuxScore } from '@/utils/fuseUtil'
 import { buildTree } from '@/utils/treeUtil'
 
+import type { LGraphNode } from '../lib/litegraph/src/litegraph'
+
 export class ComfyNodeDefImpl
   implements ComfyNodeDefV1, ComfyNodeDefV2, FuseSearchable
 {
diff --git a/src/stores/subgraphNavigationStore.ts b/src/stores/subgraphNavigationStore.ts
index f3e86e2ff0..dbc8100798 100644
--- a/src/stores/subgraphNavigationStore.ts
+++ b/src/stores/subgraphNavigationStore.ts
@@ -1,10 +1,10 @@
-import type { Subgraph } from '@comfyorg/litegraph'
 import { defineStore } from 'pinia'
 import { computed, shallowReactive, shallowRef, watch } from 'vue'
 
 import { app } from '@/scripts/app'
 import { isNonNullish } from '@/utils/typeGuardUtil'
 
+import type { Subgraph } from '../lib/litegraph/src/litegraph'
 import { useWorkflowStore } from './workflowStore'
 
 /**
diff --git a/src/stores/workflowStore.ts b/src/stores/workflowStore.ts
index 6b0044e9a2..e44dbd07cc 100644
--- a/src/stores/workflowStore.ts
+++ b/src/stores/workflowStore.ts
@@ -1,4 +1,3 @@
-import type { LGraph, Subgraph } from '@comfyorg/litegraph'
 import _ from 'lodash'
 import { defineStore } from 'pinia'
 import { type Raw, computed, markRaw, ref, shallowRef, watch } from 'vue'
@@ -12,6 +11,7 @@ import { getPathDetails } from '@/utils/formatUtil'
 import { syncEntities } from '@/utils/syncUtil'
 import { isSubgraph } from '@/utils/typeGuardUtil'
 
+import type { LGraph, Subgraph } from '../lib/litegraph/src/litegraph'
 import { UserFile } from './userFileStore'
 
 export class ComfyWorkflow extends UserFile {
diff --git a/src/types/comfy.ts b/src/types/comfy.ts
index f78fccaebd..02b5772a79 100644
--- a/src/types/comfy.ts
+++ b/src/types/comfy.ts
@@ -1,6 +1,3 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
-import { Positionable } from '@comfyorg/litegraph/dist/interfaces'
-
 import type { ComfyWorkflowJSON } from '@/schemas/comfyWorkflowSchema'
 import type { Keybinding } from '@/schemas/keyBindingSchema'
 import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
@@ -10,6 +7,9 @@ import type { ComfyCommand } from '@/stores/commandStore'
 import type { BottomPanelExtension } from '@/types/extensionTypes'
 import type { SettingParams } from '@/types/settingTypes'
 
+import { Positionable } from '../lib/litegraph/src/interfaces'
+import type { LGraphNode } from '../lib/litegraph/src/litegraph'
+
 export type Widgets = Record<string, ComfyWidgetConstructor>
 
 export interface AboutPageBadge {
diff --git a/src/types/index.ts b/src/types/index.ts
index 20d38a3451..189a48b956 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,5 +1,3 @@
-import type { LGraph } from '@comfyorg/litegraph'
-
 import type {
   DeviceStats,
   EmbeddingsResponse,
@@ -17,6 +15,7 @@ import type {
 } from '@/schemas/apiSchema'
 import { ComfyApp } from '@/scripts/app'
 
+import type { LGraph } from '../lib/litegraph/src/litegraph'
 import type {
   BottomPanelExtension,
   CommandManager,
diff --git a/src/types/litegraph-augmentation.d.ts b/src/types/litegraph-augmentation.d.ts
index 624e4ae088..ee1ae8a986 100644
--- a/src/types/litegraph-augmentation.d.ts
+++ b/src/types/litegraph-augmentation.d.ts
@@ -1,14 +1,13 @@
-import '@comfyorg/litegraph'
-import type { LLink, Size } from '@comfyorg/litegraph'
-
 import type { ComfyNodeDef as ComfyNodeDefV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { ComfyNodeDef as ComfyNodeDefV1 } from '@/schemas/nodeDefSchema'
 import type { DOMWidget, DOMWidgetOptions } from '@/scripts/domWidget'
 
+import '../lib/litegraph/src/litegraph'
+import type { LLink, Size } from '../lib/litegraph/src/litegraph'
 import type { NodeId } from '../schemas/comfyWorkflowSchema'
 
 /** ComfyUI extensions of litegraph */
-declare module '@comfyorg/litegraph/dist/types/widgets' {
+declare module '../lib/litegraph/src/types/widgets' {
   interface IWidgetOptions {
     /** Currently used by DOM widgets only.  Declaring here reduces complexity. */
     onHide?: (widget: DOMWidget) => void
@@ -59,9 +58,9 @@ declare module '@comfyorg/litegraph/dist/types/widgets' {
 /**
  *  ComfyUI extensions of litegraph
  */
-declare module '@comfyorg/litegraph' {
-  import type { ExecutableLGraphNode } from '@comfyorg/litegraph'
-  import type { IBaseWidget } from '@comfyorg/litegraph/dist/types/widgets'
+declare module '../lib/litegraph/src/litegraph' {
+  import type { ExecutableLGraphNode } from '../lib/litegraph/src/litegraph'
+  import type { IBaseWidget } from '../lib/litegraph/src/types/widgets'
 
   interface LGraphNodeConstructor<T extends LGraphNode = LGraphNode> {
     type?: string
@@ -186,7 +185,7 @@ declare module '@comfyorg/litegraph' {
 /**
  * Extended types for litegraph, to be merged upstream once it has stabilized.
  */
-declare module '@comfyorg/litegraph' {
+declare module '../lib/litegraph/src/litegraph' {
   /**
    * widgets_values is set to LGraphNode by `LGraphNode.configure`, but it is not
    * used by litegraph internally. We should remove the dependency on it later.
diff --git a/src/utils/errorReportUtil.ts b/src/utils/errorReportUtil.ts
index 643ec6d0fb..1e4da31016 100644
--- a/src/utils/errorReportUtil.ts
+++ b/src/utils/errorReportUtil.ts
@@ -1,8 +1,8 @@
-import type { ISerialisedGraph } from '@comfyorg/litegraph'
-
 import type { SystemStats } from '@/schemas/apiSchema'
 import type { NodeId } from '@/schemas/comfyWorkflowSchema'
 
+import type { ISerialisedGraph } from '../lib/litegraph/src/litegraph'
+
 export interface ErrorReportData {
   exceptionType: string
   exceptionMessage: string
diff --git a/src/utils/executionUtil.ts b/src/utils/executionUtil.ts
index 3b061aa466..75701ab69e 100644
--- a/src/utils/executionUtil.ts
+++ b/src/utils/executionUtil.ts
@@ -1,15 +1,14 @@
-import type { LGraph, NodeId } from '@comfyorg/litegraph'
-import {
-  ExecutableNodeDTO,
-  LGraphEventMode,
-  SubgraphNode
-} from '@comfyorg/litegraph'
-
 import type {
   ComfyApiWorkflow,
   ComfyWorkflowJSON
 } from '@/schemas/comfyWorkflowSchema'
 
+import type { LGraph, NodeId } from '../lib/litegraph/src/litegraph'
+import {
+  ExecutableNodeDTO,
+  LGraphEventMode,
+  SubgraphNode
+} from '../lib/litegraph/src/litegraph'
 import { compressWidgetInputSlots } from './litegraphUtil'
 
 /**
diff --git a/src/utils/linkFixer.ts b/src/utils/linkFixer.ts
index 218b1c9622..50148e0f73 100644
--- a/src/utils/linkFixer.ts
+++ b/src/utils/linkFixer.ts
@@ -24,13 +24,13 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import type { LGraph, LGraphNode, LLink } from '@comfyorg/litegraph'
-import type { NodeId } from '@comfyorg/litegraph/dist/LGraphNode'
-import type { SerialisedLLinkArray } from '@comfyorg/litegraph/dist/LLink'
+import type { LGraph, LGraphNode, LLink } from '../lib/litegraph/src/litegraph'
+import type { NodeId } from '../lib/litegraph/src/litegraph'
+import type { SerialisedLLinkArray } from '../lib/litegraph/src/litegraph'
 import type {
   ISerialisedGraph,
   ISerialisedNode
-} from '@comfyorg/litegraph/dist/types/serialisation'
+} from '../lib/litegraph/src/types/serialisation'
 
 export interface BadLinksData<T = ISerialisedGraph | LGraph> {
   hasBadLinks: boolean
diff --git a/src/utils/litegraphUtil.ts b/src/utils/litegraphUtil.ts
index 738fbd7ca9..7828547323 100644
--- a/src/utils/litegraphUtil.ts
+++ b/src/utils/litegraphUtil.ts
@@ -1,17 +1,22 @@
-import { ColorOption, LGraph, Reroute } from '@comfyorg/litegraph'
-import { LGraphGroup, LGraphNode, isColorable } from '@comfyorg/litegraph'
+import _ from 'lodash'
+
+import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+
+import { ColorOption, LGraph, Reroute } from '../lib/litegraph/src/litegraph'
+import {
+  LGraphGroup,
+  LGraphNode,
+  isColorable
+} from '../lib/litegraph/src/litegraph'
 import type {
   ExportedSubgraph,
   ISerialisableNodeInput,
   ISerialisedGraph
-} from '@comfyorg/litegraph/dist/types/serialisation'
+} from '../lib/litegraph/src/types/serialisation'
 import type {
   IBaseWidget,
   IComboWidget
-} from '@comfyorg/litegraph/dist/types/widgets'
-import _ from 'lodash'
-
-import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+} from '../lib/litegraph/src/types/widgets'
 
 type ImageNode = LGraphNode & { imgs: HTMLImageElement[] | undefined }
 type VideoNode = LGraphNode & {
diff --git a/src/utils/searchAndReplace.ts b/src/utils/searchAndReplace.ts
index 8023b4882a..3f30ed4c46 100644
--- a/src/utils/searchAndReplace.ts
+++ b/src/utils/searchAndReplace.ts
@@ -1,7 +1,7 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
-
 import { formatDate } from '@/utils/formatUtil'
 
+import type { LGraphNode } from '../lib/litegraph/src/litegraph'
+
 export function applyTextReplacements(
   allNodes: LGraphNode[],
   value: string
diff --git a/src/utils/typeGuardUtil.ts b/src/utils/typeGuardUtil.ts
index 4206b5a1fd..efd8738a88 100644
--- a/src/utils/typeGuardUtil.ts
+++ b/src/utils/typeGuardUtil.ts
@@ -1,8 +1,12 @@
-import { LGraph, LGraphNode } from '@comfyorg/litegraph'
-import { Subgraph } from '@comfyorg/litegraph'
-
 import type { PrimitiveNode } from '@/extensions/core/widgetInputs'
 
+import {
+  type INodeSlot,
+  LGraph,
+  LGraphNode
+} from '../lib/litegraph/src/litegraph'
+import { Subgraph } from '../lib/litegraph/src/litegraph'
+
 export function isPrimitiveNode(
   node: LGraphNode
 ): node is PrimitiveNode & LGraphNode {
@@ -31,10 +35,14 @@ export const isNonNullish = <T>(item: T | undefined | null): item is T =>
 /**
  * Type guard for slot objects (inputs/outputs)
  */
-export const isSlotObject = (
-  obj: unknown
-): obj is { name?: string; type?: string } => {
-  return obj !== null && typeof obj === 'object'
+export const isSlotObject = (obj: unknown): obj is INodeSlot => {
+  return (
+    obj !== null &&
+    typeof obj === 'object' &&
+    'name' in obj &&
+    'type' in obj &&
+    'boundingRect' in obj
+  )
 }
 
 /**
diff --git a/src/utils/vintageClipboard.ts b/src/utils/vintageClipboard.ts
index b2d13e2ad7..aaefce1d5c 100644
--- a/src/utils/vintageClipboard.ts
+++ b/src/utils/vintageClipboard.ts
@@ -1,5 +1,9 @@
-import type { LGraph, LGraphCanvas, LGraphNode } from '@comfyorg/litegraph'
-import { LiteGraph } from '@comfyorg/litegraph'
+import type {
+  LGraph,
+  LGraphCanvas,
+  LGraphNode
+} from '../lib/litegraph/src/litegraph'
+import { LiteGraph } from '../lib/litegraph/src/litegraph'
 
 /**
  * Serialises an array of nodes using a modified version of the old Litegraph copy (& paste) function
diff --git a/tests-ui/tests/components/dialog/content/MissingCoreNodesMessage.spec.ts b/tests-ui/tests/components/dialog/content/MissingCoreNodesMessage.spec.ts
index 5e9fdec3f4..f4518d037b 100644
--- a/tests-ui/tests/components/dialog/content/MissingCoreNodesMessage.spec.ts
+++ b/tests-ui/tests/components/dialog/content/MissingCoreNodesMessage.spec.ts
@@ -1,4 +1,3 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
 import { mount } from '@vue/test-utils'
 import PrimeVue from 'primevue/config'
 import Message from 'primevue/message'
@@ -8,6 +7,8 @@ import { nextTick } from 'vue'
 import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
 
+import type { LGraphNode } from '../../../../../src/lib/litegraph/src/litegraph'
+
 // Mock the stores
 vi.mock('@/stores/systemStatsStore', () => ({
   useSystemStatsStore: vi.fn()
diff --git a/tests-ui/tests/composables/graph/useCanvasTransformSync.test.ts b/tests-ui/tests/composables/graph/useCanvasTransformSync.test.ts
index 4d40ff9690..79503bb5f2 100644
--- a/tests-ui/tests/composables/graph/useCanvasTransformSync.test.ts
+++ b/tests-ui/tests/composables/graph/useCanvasTransformSync.test.ts
@@ -1,10 +1,11 @@
-import type { LGraphCanvas } from '@comfyorg/litegraph'
 import { mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 
 import { useCanvasTransformSync } from '@/composables/graph/useCanvasTransformSync'
 
+import type { LGraphCanvas } from '../../../../src/lib/litegraph/src/litegraph'
+
 // Mock LiteGraph canvas
 const createMockCanvas = (): Partial<LGraphCanvas> => ({
   canvas: document.createElement('canvas'),
diff --git a/tests-ui/tests/composables/graph/useWidgetRenderer.test.ts b/tests-ui/tests/composables/graph/useWidgetRenderer.test.ts
index 92b6526591..78074ebeba 100644
--- a/tests-ui/tests/composables/graph/useWidgetRenderer.test.ts
+++ b/tests-ui/tests/composables/graph/useWidgetRenderer.test.ts
@@ -37,7 +37,7 @@ describe('useWidgetRenderer', () => {
       it('should map multiline text types to TEXTAREA widget', () => {
         expect(getWidgetComponent('multiline')).toBe(WidgetType.TEXTAREA)
         expect(getWidgetComponent('textarea')).toBe(WidgetType.TEXTAREA)
-        expect(getWidgetComponent('MARKDOWN')).toBe(WidgetType.TEXTAREA)
+        expect(getWidgetComponent('MARKDOWN')).toBe(WidgetType.MARKDOWN)
         expect(getWidgetComponent('customtext')).toBe(WidgetType.TEXTAREA)
       })
     })
diff --git a/tests-ui/tests/composables/graph/useWidgetValue.test.ts b/tests-ui/tests/composables/graph/useWidgetValue.test.ts
index a125ff53dd..1557230740 100644
--- a/tests-ui/tests/composables/graph/useWidgetValue.test.ts
+++ b/tests-ui/tests/composables/graph/useWidgetValue.test.ts
@@ -97,17 +97,18 @@ describe('useWidgetValue', () => {
       expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 'new value')
     })
 
-    it('should call widget callback if it exists', () => {
-      const { onChange } = useWidgetValue({
-        widget: mockWidget,
-        modelValue: 'initial',
-        defaultValue: '',
-        emit: mockEmit
-      })
-
-      onChange('new value')
-      expect(mockWidget.callback).toHaveBeenCalledWith('new value')
-    })
+    // useGraphNodeMaanger's createWrappedWidgetCallback makes the callback right now instead of useWidgetValue
+    // it('should call widget callback if it exists', () => {
+    //   const { onChange } = useWidgetValue({
+    //     widget: mockWidget,
+    //     modelValue: 'initial',
+    //     defaultValue: '',
+    //     emit: mockEmit
+    //   })
+
+    //   onChange('new value')
+    //   expect(mockWidget.callback).toHaveBeenCalledWith('new value')
+    // })
 
     it('should not error if widget callback is undefined', () => {
       const widgetWithoutCallback = { ...mockWidget, callback: undefined }
diff --git a/tests-ui/tests/composables/node/useNodePricing.test.ts b/tests-ui/tests/composables/node/useNodePricing.test.ts
index 70ae5c6215..7613aa2219 100644
--- a/tests-ui/tests/composables/node/useNodePricing.test.ts
+++ b/tests-ui/tests/composables/node/useNodePricing.test.ts
@@ -1,9 +1,10 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
-import type { IComboWidget } from '@comfyorg/litegraph/dist/types/widgets'
 import { describe, expect, it } from 'vitest'
 
 import { useNodePricing } from '@/composables/node/useNodePricing'
 
+import type { LGraphNode } from '../../../../src/lib/litegraph/src/litegraph'
+import type { IComboWidget } from '../../../../src/lib/litegraph/src/types/widgets'
+
 // Helper function to create a mock node
 function createMockNode(
   nodeTypeName: string,
diff --git a/tests-ui/tests/composables/useMissingNodes.test.ts b/tests-ui/tests/composables/useMissingNodes.test.ts
index ec60626ab6..ee5a14cb76 100644
--- a/tests-ui/tests/composables/useMissingNodes.test.ts
+++ b/tests-ui/tests/composables/useMissingNodes.test.ts
@@ -1,4 +1,3 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick, ref } from 'vue'
 
@@ -8,6 +7,8 @@ import { app } from '@/scripts/app'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 
+import type { LGraphNode } from '../../../src/lib/litegraph/src/litegraph'
+
 // Mock Vue's onMounted to execute immediately for testing
 vi.mock('vue', async () => {
   const actual = await vi.importActual<typeof import('vue')>('vue')
diff --git a/tests-ui/tests/composables/useNodeChatHistory.test.ts b/tests-ui/tests/composables/useNodeChatHistory.test.ts
index f1f66f1b5d..11b0dfe526 100644
--- a/tests-ui/tests/composables/useNodeChatHistory.test.ts
+++ b/tests-ui/tests/composables/useNodeChatHistory.test.ts
@@ -1,8 +1,9 @@
-import { LGraphNode } from '@comfyorg/litegraph'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useNodeChatHistory } from '@/composables/node/useNodeChatHistory'
 
+import { LGraphNode } from '../../../src/lib/litegraph/src/litegraph'
+
 vi.mock('@/composables/widgets/useChatHistoryWidget', () => ({
   useChatHistoryWidget: () => {
     return (node: any, inputSpec: any) => {
diff --git a/tests-ui/tests/composables/useWatchWidget.test.ts b/tests-ui/tests/composables/useWatchWidget.test.ts
index b31aaf6256..41f204b9a5 100644
--- a/tests-ui/tests/composables/useWatchWidget.test.ts
+++ b/tests-ui/tests/composables/useWatchWidget.test.ts
@@ -1,9 +1,10 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
 import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 
 import { useComputedWithWidgetWatch } from '@/composables/node/useWatchWidget'
 
+import type { LGraphNode } from '../../../src/lib/litegraph/src/litegraph'
+
 // Mock useChainCallback
 vi.mock('@/composables/functional/useChainCallback', () => ({
   useChainCallback: vi.fn((original, newCallback) => {
diff --git a/tests-ui/tests/litegraph.test.ts b/tests-ui/tests/litegraph.test.ts
index 88531e4a11..e15e9b3ef9 100644
--- a/tests-ui/tests/litegraph.test.ts
+++ b/tests-ui/tests/litegraph.test.ts
@@ -1,6 +1,11 @@
-import { LGraph, LGraphNode, LiteGraph } from '@comfyorg/litegraph'
 import { describe, expect, it } from 'vitest'
 
+import {
+  LGraph,
+  LGraphNode,
+  LiteGraph
+} from '../../src/lib/litegraph/src/litegraph'
+
 function swapNodes(nodes: LGraphNode[]) {
   const firstNode = nodes[0]
   const lastNode = nodes[nodes.length - 1]
diff --git a/tests-ui/tests/store/imagePreviewStore.test.ts b/tests-ui/tests/store/imagePreviewStore.test.ts
index 0a464ba815..42aab3173f 100644
--- a/tests-ui/tests/store/imagePreviewStore.test.ts
+++ b/tests-ui/tests/store/imagePreviewStore.test.ts
@@ -1,4 +1,3 @@
-import { LGraphNode } from '@comfyorg/litegraph'
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -7,6 +6,8 @@ import { app } from '@/scripts/app'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 import * as litegraphUtil from '@/utils/litegraphUtil'
 
+import { LGraphNode } from '../../../src/lib/litegraph/src/litegraph'
+
 vi.mock('@/utils/litegraphUtil', () => ({
   isVideoNode: vi.fn()
 }))
diff --git a/tests-ui/tests/utils/litegraphUtil.test.ts b/tests-ui/tests/utils/litegraphUtil.test.ts
index cc482588b6..da2593c029 100644
--- a/tests-ui/tests/utils/litegraphUtil.test.ts
+++ b/tests-ui/tests/utils/litegraphUtil.test.ts
@@ -1,5 +1,3 @@
-import { ISerialisedGraph } from '@comfyorg/litegraph/dist/types/serialisation'
-import type { IWidget } from '@comfyorg/litegraph/dist/types/widgets'
 import { describe, expect, it } from 'vitest'
 
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
@@ -8,6 +6,9 @@ import {
   migrateWidgetsValues
 } from '@/utils/litegraphUtil'
 
+import { ISerialisedGraph } from '../../../src/lib/litegraph/src/types/serialisation'
+import type { IWidget } from '../../../src/lib/litegraph/src/types/widgets'
+
 describe('migrateWidgetsValues', () => {
   it('should remove widget values for forceInput inputs', () => {
     const inputDefs: Record<string, InputSpec> = {
diff --git a/tests-ui/tests/utils/serachAndReplace.test.ts b/tests-ui/tests/utils/serachAndReplace.test.ts
index 2c61df1c72..d0954b7cbb 100644
--- a/tests-ui/tests/utils/serachAndReplace.test.ts
+++ b/tests-ui/tests/utils/serachAndReplace.test.ts
@@ -1,8 +1,9 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
 import { describe, expect, it } from 'vitest'
 
 import { applyTextReplacements } from '@/utils/searchAndReplace'
 
+import type { LGraphNode } from '../../../src/lib/litegraph/src/litegraph'
+
 describe('applyTextReplacements', () => {
   // Test specifically the filename sanitization part
   describe('filename sanitization', () => {
diff --git a/tsconfig.json b/tsconfig.json
index a44da08914..9fe8b5a4e1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,6 +12,7 @@
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "resolveJsonModule": true,
+    "noEmit": true,
 
     /* Linting */
     "strict": true,
@@ -38,5 +39,11 @@
     "tests-ui/**/*",
     "global.d.ts",
     "vite.config.mts"
+  ],
+  "exclude": [
+    "src/lib/litegraph/**/*"
+  ],
+  "references": [
+    { "path": "./src/lib/litegraph" }
   ]
 }