diff --git a/CLAUDE.md b/CLAUDE.md
index 5e9b6174c1..e69de29bb2 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,58 +0,0 @@
-- use `npm run` to see what commands are available
-- For component communication, prefer Vue's event-based pattern (emit/@event-name) for state changes and notifications; use defineExpose with refs only for imperative operations that need direct control (like form.validate(), modal.open(), or editor.focus()); events promote loose coupling and are better for reusable components, while exposed methods are acceptable for tightly-coupled component pairs or when wrapping third-party libraries that require imperative APIs
-- After making code changes, follow this general process: (1) Create unit tests, component tests, browser tests (if appropriate for each), (2) run unit tests, component tests, and browser tests until passing, (3) run typecheck, lint, format (with prettier) -- you can use `npm run` command to see the scripts available, (4) check if any READMEs (including nested) or documentation needs to be updated, (5) Decide whether the changes are worth adding new content to the external documentation for (or would requires changes to the external documentation) at https://docs.comfy.org, then present your suggestion
-- When referencing PrimeVue, you can get all the docs here: https://primevue.org. Do this instead of making up or inferring names of Components
-- When trying to set tailwind classes for dark theme, use "dark-theme:" prefix rather than "dark:"
-- Never add lines to PR descriptions or commit messages that say "Generated with Claude Code"
-- When making PR names and commit messages, if you are going to add a prefix like "docs:", "feat:", "bugfix:", use square brackets around the prefix term and do not use a colon (e.g., should be "[docs]" rather than "docs:").
-- When I reference GitHub Repos related to Comfy-Org, you should proactively fetch or read the associated information in the repo. To do so, you should exhaust all options: (1) Check if we have a local copy of the repo, (2) Use the GitHub API to fetch the information; you may want to do this IN ADDITION to the other options, especially for reading specific branches/PRs/comments/reviews/metadata, and (3) curl the GitHub website and parse the html or json responses
-- For information about ComfyUI, ComfyUI_frontend, or ComfyUI-Manager, you can web search or download these wikis: https://deepwiki.com/Comfy-Org/ComfyUI-Manager, https://deepwiki.com/Comfy-Org/ComfyUI_frontend/1-overview, https://deepwiki.com/comfyanonymous/ComfyUI/2-core-architecture
-- If a question/project is related to Comfy-Org, Comfy, or ComfyUI ecosystem, you should proactively use the Comfy docs to answer the question. The docs may be referenced with URLs like https://docs.comfy.org
-- When operating inside a repo, check for README files at key locations in the repo detailing info about the contents of that folder. E.g., top-level key folders like tests-ui, browser_tests, composables, extensions/core, stores, services often have their own README.md files. When writing code, make sure to frequently reference these README files to understand the overall architecture and design of the project. Pay close attention to the snippets to learn particular patterns that seem to be there for a reason, as you should emulate those.
-- Prefer running single tests, and not the whole test suite, for performance
-- If using a lesser known or complex CLI tool, run the --help to see the documentation before deciding what to run, even if just for double-checking or verifying things.
-- IMPORTANT: the most important goal when writing code is to create clean, best-practices, sustainable, and scalable public APIs and interfaces. Our app is used by thousands of users and we have thousands of mods/extensions that are constantly changing and updating; and we are also always updating. That's why it is IMPORTANT that we design systems and write code that follows practices of domain-driven design, object-oriented design, and design patterns (such that you can assure stability while allowing for all components around you to change and evolve). We ABSOLUTELY prioritize clean APIs and public interfaces that clearly define and restrict how/what the mods/extensions can access.
-- If any of these technologies are referenced, you can proactively read their docs at these locations: https://primevue.org/theming, https://primevue.org/forms/, https://www.electronjs.org/docs/latest/api/browser-window, https://vitest.dev/guide/browser/, https://atlassian.design/components/pragmatic-drag-and-drop/core-package/drop-targets/, https://playwright.dev/docs/api/class-test, https://playwright.dev/docs/api/class-electron, https://www.algolia.com/doc/api-reference/rest-api/, https://pyav.org/docs/develop/cookbook/basics.html
-- IMPORTANT: Never add Co-Authored by Claude or any reference to Claude or Claude Code in commit messages, PR descriptions, titles, or any documentation whatsoever
-- The npm script to type check is called "typecheck" NOT "type check"
-- Use the Vue 3 Composition API instead of the Options API when writing Vue components. An exception is when overriding or extending a PrimeVue component for compatibility, you may use the Options API.
-- when we are solving an issue we know the link/number for, we should add "Fixes #n" (where n is the issue number) to the PR description.
-- Never write css if you can accomplish the same thing with tailwind utility classes
-- Utilize ref and reactive for reactive state
-- Implement computed properties with computed()
-- Use watch and watchEffect for side effects
-- Implement lifecycle hooks with onMounted, onUpdated, etc.
-- Utilize provide/inject for dependency injection
-- Use vue 3.5 style of default prop declaration. Do not define a `props` variable; instead, destructure props. Since vue 3.5, destructuring props does not strip them of reactivity.
-- Use Tailwind CSS for styling
-- Leverage VueUse functions for performance-enhancing styles
-- Use lodash for utility functions
-- Implement proper props and emits definitions
-- Utilize Vue 3's Teleport component when needed
-- Use Suspense for async components
-- Implement proper error handling
-- Follow Vue 3 style guide and naming conventions
-- IMPORTANT: Use vue-i18n for ALL user-facing strings - no hard-coded text in services/utilities. Place new translation entries in src/locales/en/main.json
-- Avoid using `@ts-expect-error` to work around type issues. We needed to employ it to migrate to TypeScript, but it should not be viewed as an accepted practice or standard.
-- DO NOT use deprecated PrimeVue components. Use these replacements instead:
-  * `Dropdown` → Use `Select` (import from 'primevue/select')
-  * `OverlayPanel` → Use `Popover` (import from 'primevue/popover') 
-  * `Calendar` → Use `DatePicker` (import from 'primevue/datepicker')
-  * `InputSwitch` → Use `ToggleSwitch` (import from 'primevue/toggleswitch')
-  * `Sidebar` → Use `Drawer` (import from 'primevue/drawer')
-  * `Chips` → Use `AutoComplete` with multiple enabled and typeahead disabled
-  * `TabMenu` → Use `Tabs` without panels
-  * `Steps` → Use `Stepper` without panels
-  * `InlineMessage` → Use `Message` component
-* Use `api.apiURL()` for all backend API calls and routes
-  - Actual API endpoints like /prompt, /queue, /view, etc.
-  - Image previews: `api.apiURL('/view?...')`
-  - Any backend-generated content or dynamic routes
-* Use `api.fileURL()` for static files served from the public folder:
-  - Templates: `api.fileURL('/templates/default.json')`
-  - Extensions: `api.fileURL(extensionPath)` for loading JS modules
-  - Any static assets that exist in the public directory
-- When implementing code that outputs raw HTML (e.g., using v-html directive), always ensure dynamic content has been properly sanitized with DOMPurify or validated through trusted sources. Prefer Vue templates over v-html when possible.
-- For any async operations (API calls, timers, etc), implement cleanup/cancellation in component unmount to prevent memory leaks
-- Extract complex template conditionals into separate components or computed properties
-- Error messages should be actionable and user-friendly (e.g., "Failed to load data. Please refresh the page." instead of "Unknown error")
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 289392447f..9fe38ec955 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -5,6 +5,7 @@
   @tailwind utilities;
 }
 
+
 :root {
   --fg-color: #000;
   --bg-color: #fff;
@@ -134,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 */
@@ -637,3 +820,92 @@ audio.comfy-audio.empty-audio-widget {
   width: calc(100vw - env(titlebar-area-width, 100vw));
 }
 /* End of [Desktop] Electron window specific styles */
+
+/* Vue Node LOD (Level of Detail) System */
+/* These classes control rendering detail based on zoom level */
+
+/* Minimal LOD (zoom <= 0.4) - Title only for performance */
+.lg-node--lod-minimal {
+  min-height: 32px;
+  transition: min-height 0.2s ease;
+  /* Performance optimizations */
+  text-shadow: none;
+  backdrop-filter: none;
+}
+
+.lg-node--lod-minimal .lg-node-body {
+  display: none !important;
+}
+
+/* Reduced LOD (0.4 < zoom <= 0.8) - Essential widgets, simplified styling */
+.lg-node--lod-reduced {
+  transition: opacity 0.1s ease;
+  /* Performance optimizations */
+  text-shadow: none;
+}
+
+.lg-node--lod-reduced .lg-widget-label,
+.lg-node--lod-reduced .lg-slot-label {
+  display: none;
+}
+
+.lg-node--lod-reduced .lg-slot {
+  opacity: 0.6;
+  font-size: 0.75rem;
+}
+
+.lg-node--lod-reduced .lg-widget {
+  margin: 2px 0;
+  font-size: 0.875rem;
+}
+
+/* Full LOD (zoom > 0.8) - Complete detail rendering */
+.lg-node--lod-full {
+  /* Uses default styling - no overrides needed */
+}
+
+/* Smooth transitions between LOD levels */
+.lg-node {
+  transition: min-height 0.2s ease;
+  /* Disable text selection on all nodes */
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+.lg-node .lg-slot,
+.lg-node .lg-widget {
+  transition: opacity 0.1s ease, font-size 0.1s ease;
+}
+
+/* Performance optimization during canvas interaction */
+.transform-pane--interacting .lg-node * {
+  transition: none !important;
+}
+
+.transform-pane--interacting .lg-node {
+  will-change: transform;
+}
+
+/* Global performance optimizations for LOD */
+.lg-node--lod-minimal,
+.lg-node--lod-reduced {
+  /* Remove ALL expensive paint effects */
+  box-shadow: none !important;
+  filter: none !important;
+  backdrop-filter: none !important;
+  text-shadow: none !important;
+  -webkit-mask-image: none !important;
+  mask-image: none !important;
+  clip-path: none !important;
+}
+
+/* Reduce paint complexity for minimal LOD */
+.lg-node--lod-minimal {
+  /* Skip complex borders */
+  border-radius: 0 !important;
+  /* Use solid colors only */
+  background-image: none !important;
+}
+
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 8ef41fb34b..e2a3392845 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -29,6 +29,54 @@
     class="w-full h-full touch-none"
   />
 
+  <!-- TransformPane for Vue node rendering (development) -->
+  <TransformPane
+    v-if="transformPaneEnabled && canvasStore.canvas && comfyAppReady"
+    :canvas="canvasStore.canvas as LGraphCanvas"
+    :viewport="canvasViewport"
+    :show-debug-overlay="showPerformanceOverlay"
+    @raf-status-change="rafActive = $event"
+    @transform-update="handleTransformUpdate"
+  >
+    <!-- Vue nodes rendered based on graph nodes -->
+    <VueGraphNode
+      v-for="nodeData in nodesToRender"
+      :key="nodeData.id"
+      :node-data="nodeData"
+      :position="nodePositions.get(nodeData.id)"
+      :size="nodeSizes.get(nodeData.id)"
+      :selected="nodeData.selected"
+      :readonly="false"
+      :executing="executionStore.executingNodeId === nodeData.id"
+      :error="
+        executionStore.lastExecutionError?.node_id === nodeData.id
+          ? 'Execution error'
+          : null
+      "
+      :zoom-level="canvasStore.canvas?.ds?.scale || 1"
+      :data-node-id="nodeData.id"
+      @node-click="handleNodeSelect"
+      @update:collapsed="handleNodeCollapse"
+      @update:title="handleNodeTitleUpdate"
+    />
+  </TransformPane>
+
+  <!-- Debug Panel (Development Only) -->
+  <VueNodeDebugPanel
+    v-model:debug-override-vue-nodes="debugOverrideVueNodes"
+    v-model:show-performance-overlay="showPerformanceOverlay"
+    :canvas-viewport="canvasViewport"
+    :vue-nodes-count="vueNodesCount"
+    :nodes-in-viewport="nodesInViewport"
+    :performance-metrics="performanceMetrics"
+    :current-f-p-s="currentFPS"
+    :last-transform-time="lastTransformTime"
+    :raf-active="rafActive"
+    :is-dev-mode-enabled="isDevModeEnabled"
+    :should-render-vue-nodes="shouldRenderVueNodes"
+    :transform-pane-enabled="transformPaneEnabled"
+  />
+
   <NodeTooltip v-if="tooltipEnabled" />
   <NodeSearchboxPopover />
 
@@ -44,9 +92,17 @@
 </template>
 
 <script setup lang="ts">
-import type { LGraphNode } from '@comfyorg/litegraph'
 import { useEventListener, whenever } from '@vueuse/core'
-import { computed, onMounted, ref, watch, watchEffect } from 'vue'
+import {
+  computed,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  shallowRef,
+  watch,
+  watchEffect
+} from 'vue'
 
 import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
 import BottomPanel from '@/components/bottomPanel/BottomPanel.vue'
@@ -57,14 +113,24 @@ import NodeTooltip from '@/components/graph/NodeTooltip.vue'
 import SelectionOverlay from '@/components/graph/SelectionOverlay.vue'
 import SelectionToolbox from '@/components/graph/SelectionToolbox.vue'
 import TitleEditor from '@/components/graph/TitleEditor.vue'
+import TransformPane from '@/components/graph/TransformPane.vue'
+import VueNodeDebugPanel from '@/components/graph/debug/VueNodeDebugPanel.vue'
+import VueGraphNode from '@/components/graph/vueNodes/LGraphNode.vue'
 import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import SecondRowWorkflowTabs from '@/components/topbar/SecondRowWorkflowTabs.vue'
+import { useTransformState } from '@/composables/element/useTransformState'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
+import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
+import type {
+  NodeState,
+  VueNodeData
+} from '@/composables/graph/useGraphNodeManager'
 import { useNodeBadge } from '@/composables/node/useNodeBadge'
 import { useCanvasDrop } from '@/composables/useCanvasDrop'
 import { useContextMenuTranslation } from '@/composables/useContextMenuTranslation'
 import { useCopy } from '@/composables/useCopy'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph'
 import { useLitegraphSettings } from '@/composables/useLitegraphSettings'
 import { usePaste } from '@/composables/usePaste'
@@ -89,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: []
 }>()
@@ -113,6 +184,311 @@ const selectionToolboxEnabled = computed(() =>
   settingStore.get('Comfy.Canvas.SelectionToolbox')
 )
 
+// Feature flags
+const { shouldRenderVueNodes, isDevModeEnabled } = useFeatureFlags()
+
+// TransformPane enabled when Vue nodes are enabled OR debug override
+const debugOverrideVueNodes = ref(true) // Default to true for development
+const transformPaneEnabled = computed(
+  () => shouldRenderVueNodes.value || debugOverrideVueNodes.value
+)
+// Account for browser zoom/DPI scaling
+const getActualViewport = () => {
+  // Get the actual canvas element dimensions which account for zoom
+  const canvas = canvasRef.value
+  if (canvas) {
+    return {
+      width: canvas.clientWidth,
+      height: canvas.clientHeight
+    }
+  }
+  // Fallback to window dimensions
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight
+  }
+}
+
+const canvasViewport = ref(getActualViewport())
+
+// Debug metrics - use shallowRef for frequently updating values
+const vueNodesCount = shallowRef(0)
+const nodesInViewport = shallowRef(0)
+const currentFPS = shallowRef(0)
+const lastTransformTime = shallowRef(0)
+const rafActive = shallowRef(false)
+
+// Rendering options
+const showPerformanceOverlay = ref(false)
+
+// FPS tracking
+let lastTime = performance.now()
+let frameCount = 0
+let fpsRafId: number | null = null
+
+const updateFPS = () => {
+  frameCount++
+  const currentTime = performance.now()
+  if (currentTime >= lastTime + 1000) {
+    currentFPS.value = Math.round(
+      (frameCount * 1000) / (currentTime - lastTime)
+    )
+    frameCount = 0
+    lastTime = currentTime
+  }
+  if (transformPaneEnabled.value) {
+    fpsRafId = requestAnimationFrame(updateFPS)
+  }
+}
+
+// Start FPS tracking when TransformPane is enabled
+watch(transformPaneEnabled, (enabled) => {
+  if (enabled) {
+    fpsRafId = requestAnimationFrame(updateFPS)
+  } else {
+    // Stop FPS tracking
+    if (fpsRafId !== null) {
+      cancelAnimationFrame(fpsRafId)
+      fpsRafId = null
+    }
+  }
+})
+
+// Update viewport on resize
+useEventListener(window, 'resize', () => {
+  canvasViewport.value = getActualViewport()
+})
+
+// Also update when canvas is ready
+watch(canvasRef, () => {
+  if (canvasRef.value) {
+    canvasViewport.value = getActualViewport()
+  }
+})
+
+// Vue node lifecycle management - initialize after graph is ready
+let nodeManager: ReturnType<typeof useGraphNodeManager> | null = null
+const vueNodeData = ref<ReadonlyMap<string, VueNodeData>>(new Map())
+const nodeState = ref<ReadonlyMap<string, NodeState>>(new Map())
+const nodePositions = ref<ReadonlyMap<string, { x: number; y: number }>>(
+  new Map()
+)
+const nodeSizes = ref<ReadonlyMap<string, { width: number; height: number }>>(
+  new Map()
+)
+let detectChangesInRAF = () => {}
+const performanceMetrics = reactive({
+  frameTime: 0,
+  updateTime: 0,
+  nodeCount: 0,
+  culledCount: 0,
+  adaptiveQuality: false
+})
+
+// Initialize node manager when graph becomes available
+// Add a reactivity trigger to force computed re-evaluation
+const nodeDataTrigger = ref(0)
+
+const initializeNodeManager = () => {
+  if (!comfyApp.graph || nodeManager) {
+    return
+  }
+
+  nodeManager = useGraphNodeManager(comfyApp.graph)
+
+  // Use the manager's reactive maps directly
+  vueNodeData.value = nodeManager.vueNodeData
+  nodeState.value = nodeManager.nodeState
+  nodePositions.value = nodeManager.nodePositions
+  nodeSizes.value = nodeManager.nodeSizes
+
+  detectChangesInRAF = nodeManager.detectChangesInRAF
+  Object.assign(performanceMetrics, nodeManager.performanceMetrics)
+
+  // Force computed properties to re-evaluate
+  nodeDataTrigger.value++
+}
+
+// Watch for graph availability
+watch(
+  () => comfyApp.graph,
+  (graph) => {
+    if (graph) {
+      initializeNodeManager()
+    }
+  },
+  { immediate: true }
+)
+
+// Transform state for viewport culling
+const { syncWithCanvas } = useTransformState()
+
+// Replace problematic computed property with proper reactive system
+const nodesToRender = computed(() => {
+  // Access performanceMetrics to trigger on RAF updates
+  void performanceMetrics.updateTime
+  // Access trigger to force re-evaluation after nodeManager initialization
+  void nodeDataTrigger.value
+
+  if (!comfyApp.graph || !transformPaneEnabled.value) {
+    return []
+  }
+
+  const allNodes = Array.from(vueNodeData.value.values())
+
+  // Apply viewport culling - check if node bounds intersect with viewport
+  if (nodeManager && canvasStore.canvas && comfyApp.canvas) {
+    const canvas = canvasStore.canvas
+    const manager = nodeManager
+
+    // Ensure transform is synced before checking visibility
+    syncWithCanvas(comfyApp.canvas)
+
+    const ds = canvas.ds
+
+    // Access transform time to make this reactive to transform changes
+    void lastTransformTime.value
+
+    // Work in screen space - viewport is simply the canvas element size
+    const viewport_width = canvas.canvas.width
+    const viewport_height = canvas.canvas.height
+
+    // Add margin that represents a constant distance in canvas space
+    // Convert canvas units to screen pixels by multiplying by scale
+    const canvasMarginDistance = 200 // Fixed margin in canvas units
+    const margin_x = canvasMarginDistance * ds.scale
+    const margin_y = canvasMarginDistance * ds.scale
+
+    const filtered = allNodes.filter((nodeData) => {
+      const node = manager.getNode(nodeData.id)
+      if (!node) return false
+
+      // Transform node position to screen space (same as DOM widgets)
+      const screen_x = (node.pos[0] + ds.offset[0]) * ds.scale
+      const screen_y = (node.pos[1] + ds.offset[1]) * ds.scale
+      const screen_width = node.size[0] * ds.scale
+      const screen_height = node.size[1] * ds.scale
+
+      // Check if node bounds intersect with expanded viewport (in screen space)
+      const isVisible = !(
+        screen_x + screen_width < -margin_x ||
+        screen_x > viewport_width + margin_x ||
+        screen_y + screen_height < -margin_y ||
+        screen_y > viewport_height + margin_y
+      )
+
+      return isVisible
+    })
+
+    return filtered
+  }
+
+  return allNodes
+})
+
+// Remove side effects from computed - use watchers instead
+watch(
+  () => vueNodeData.value.size,
+  (count) => {
+    vueNodesCount.value = count
+  },
+  { immediate: true }
+)
+
+watch(
+  () => nodesToRender.value.length,
+  (count) => {
+    nodesInViewport.value = count
+  }
+)
+
+// Update performance metrics when node counts change
+watch(
+  () => [vueNodeData.value.size, nodesToRender.value.length],
+  ([totalNodes, visibleNodes]) => {
+    performanceMetrics.nodeCount = totalNodes
+    performanceMetrics.culledCount = totalNodes - visibleNodes
+  }
+)
+
+// Integrate change detection with TransformPane RAF
+// Track previous transform to detect changes
+let lastScale = 1
+let lastOffsetX = 0
+let lastOffsetY = 0
+
+const handleTransformUpdate = (time: number) => {
+  lastTransformTime.value = time
+
+  // Sync transform state only when it changes (avoids reflows)
+  if (comfyApp.canvas?.ds) {
+    const currentScale = comfyApp.canvas.ds.scale
+    const currentOffsetX = comfyApp.canvas.ds.offset[0]
+    const currentOffsetY = comfyApp.canvas.ds.offset[1]
+
+    if (
+      currentScale !== lastScale ||
+      currentOffsetX !== lastOffsetX ||
+      currentOffsetY !== lastOffsetY
+    ) {
+      syncWithCanvas(comfyApp.canvas)
+      lastScale = currentScale
+      lastOffsetX = currentOffsetX
+      lastOffsetY = currentOffsetY
+    }
+  }
+
+  // Detect node changes during transform updates
+  detectChangesInRAF()
+
+  // Update performance metrics
+  performanceMetrics.frameTime = time
+
+  void nodesToRender.value.length
+}
+
+// Node event handlers
+const handleNodeSelect = (event: PointerEvent, nodeData: VueNodeData) => {
+  if (!canvasStore.canvas || !nodeManager) return
+
+  const node = nodeManager.getNode(nodeData.id)
+  if (!node) return
+
+  if (!event.ctrlKey && !event.metaKey) {
+    canvasStore.canvas.deselectAllNodes()
+  }
+
+  canvasStore.canvas.selectNode(node)
+  node.selected = true
+
+  canvasStore.updateSelectedItems()
+}
+
+// Handle node collapse state changes
+const handleNodeCollapse = (nodeId: string, collapsed: boolean) => {
+  if (!nodeManager) return
+
+  const node = nodeManager.getNode(nodeId)
+  if (!node) return
+
+  // Use LiteGraph's collapse method if the state needs to change
+  const currentCollapsed = node.flags?.collapsed ?? false
+  if (currentCollapsed !== collapsed) {
+    node.collapse()
+  }
+}
+
+// Handle node title updates
+const handleNodeTitleUpdate = (nodeId: string, newTitle: string) => {
+  if (!nodeManager) return
+
+  const node = nodeManager.getNode(nodeId)
+  if (!node) return
+
+  // Update the node title in LiteGraph for persistence
+  node.title = newTitle
+}
+
 watchEffect(() => {
   nodeDefStore.showDeprecated = settingStore.get('Comfy.Node.ShowDeprecated')
 })
@@ -260,7 +636,7 @@ const loadCustomNodesI18n = async () => {
       i18n.global.mergeLocaleMessage(locale, message)
     })
   } catch (error) {
-    console.error('Failed to load custom nodes i18n', error)
+    // Ignore i18n loading errors - not critical
   }
 }
 
@@ -277,6 +653,7 @@ onMounted(async () => {
   useCopy()
   usePaste()
   useWorkflowAutoSave()
+  useFeatureFlags() // This will automatically sync Vue nodes flag with LiteGraph
 
   comfyApp.vueAppReady = true
 
@@ -289,9 +666,6 @@ onMounted(async () => {
     await settingStore.loadSettingValues()
   } catch (error) {
     if (error instanceof UnauthorizedError) {
-      console.log(
-        'Failed loading user settings, user unauthorized, cleaning local Comfy.userId'
-      )
       localStorage.removeItem('Comfy.userId')
       localStorage.removeItem('Comfy.userName')
       window.location.reload()
@@ -313,6 +687,11 @@ onMounted(async () => {
 
   comfyAppReady.value = true
 
+  // Initialize node manager after setup is complete
+  if (comfyApp.graph) {
+    initializeNodeManager()
+  }
+
   comfyApp.canvas.onSelectionChange = useChainCallback(
     comfyApp.canvas.onSelectionChange,
     () => canvasStore.updateSelectedItems()
@@ -353,4 +732,18 @@ onMounted(async () => {
 
   emit('ready')
 })
+
+onUnmounted(() => {
+  // Clean up FPS tracking
+  if (fpsRafId !== null) {
+    cancelAnimationFrame(fpsRafId)
+    fpsRafId = null
+  }
+
+  // Clean up node manager
+  if (nodeManager) {
+    nodeManager.cleanup()
+    nodeManager = null
+  }
+})
 </script>
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.spec.ts b/src/components/graph/TransformPane.spec.ts
new file mode 100644
index 0000000000..ca4aab9dbb
--- /dev/null
+++ b/src/components/graph/TransformPane.spec.ts
@@ -0,0 +1,438 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, ref } from 'vue'
+
+import TransformPane from './TransformPane.vue'
+
+// Mock the transform state composable
+const mockTransformState = {
+  camera: ref({ x: 0, y: 0, z: 1 }),
+  transformStyle: ref({
+    transform: 'scale(1) translate(0px, 0px)',
+    transformOrigin: '0 0'
+  }),
+  syncWithCanvas: vi.fn(),
+  canvasToScreen: vi.fn(),
+  screenToCanvas: vi.fn(),
+  isNodeInViewport: vi.fn()
+}
+
+vi.mock('@/composables/element/useTransformState', () => ({
+  useTransformState: () => mockTransformState
+}))
+
+// Mock requestAnimationFrame/cancelAnimationFrame
+global.requestAnimationFrame = vi.fn((cb) => {
+  setTimeout(cb, 16)
+  return 1
+})
+global.cancelAnimationFrame = vi.fn()
+
+describe('TransformPane', () => {
+  let wrapper: ReturnType<typeof mount>
+  let mockCanvas: any
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    // Create mock canvas with LiteGraph interface
+    mockCanvas = {
+      canvas: {
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn()
+      },
+      ds: {
+        offset: [0, 0],
+        scale: 1
+      }
+    }
+
+    // Reset mock transform state
+    mockTransformState.camera.value = { x: 0, y: 0, z: 1 }
+    mockTransformState.transformStyle.value = {
+      transform: 'scale(1) translate(0px, 0px)',
+      transformOrigin: '0 0'
+    }
+  })
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount()
+    }
+  })
+
+  describe('component mounting', () => {
+    it('should mount successfully with minimal props', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      expect(wrapper.exists()).toBe(true)
+      expect(wrapper.find('.transform-pane').exists()).toBe(true)
+    })
+
+    it('should apply transform style from composable', () => {
+      mockTransformState.transformStyle.value = {
+        transform: 'scale(2) translate(100px, 50px)',
+        transformOrigin: '0 0'
+      }
+
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      const transformPane = wrapper.find('.transform-pane')
+      const style = transformPane.attributes('style')
+      expect(style).toContain('transform: scale(2) translate(100px, 50px)')
+    })
+
+    it('should render slot content', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        },
+        slots: {
+          default: '<div class="test-content">Test Node</div>'
+        }
+      })
+
+      expect(wrapper.find('.test-content').exists()).toBe(true)
+      expect(wrapper.find('.test-content').text()).toBe('Test Node')
+    })
+  })
+
+  describe('debug overlay', () => {
+    it('should not show debug overlay by default', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      expect(wrapper.find('.viewport-debug-overlay').exists()).toBe(false)
+    })
+
+    it('should show debug overlay when enabled', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas,
+          viewport: { width: 1920, height: 1080 },
+          showDebugOverlay: true
+        }
+      })
+
+      expect(wrapper.find('.viewport-debug-overlay').exists()).toBe(true)
+    })
+
+    it('should display viewport dimensions in debug overlay', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas,
+          viewport: { width: 1280, height: 720 },
+          showDebugOverlay: true
+        }
+      })
+
+      const debugOverlay = wrapper.find('.viewport-debug-overlay')
+      expect(debugOverlay.text()).toContain('Viewport: 1280x720')
+    })
+
+    it('should include device pixel ratio in debug overlay', () => {
+      // Mock device pixel ratio
+      Object.defineProperty(window, 'devicePixelRatio', {
+        writable: true,
+        value: 2
+      })
+
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas,
+          viewport: { width: 1920, height: 1080 },
+          showDebugOverlay: true
+        }
+      })
+
+      const debugOverlay = wrapper.find('.viewport-debug-overlay')
+      expect(debugOverlay.text()).toContain('DPR: 2')
+    })
+  })
+
+  describe('RAF synchronization', () => {
+    it('should start RAF sync on mount', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+
+      // Should emit RAF status change to true
+      expect(wrapper.emitted('rafStatusChange')).toBeTruthy()
+      expect(wrapper.emitted('rafStatusChange')?.[0]).toEqual([true])
+    })
+
+    it('should call syncWithCanvas during RAF updates', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+
+      // Allow RAF to execute
+      await new Promise((resolve) => setTimeout(resolve, 20))
+
+      expect(mockTransformState.syncWithCanvas).toHaveBeenCalledWith(mockCanvas)
+    })
+
+    it('should emit transform update timing', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+
+      // Allow RAF to execute
+      await new Promise((resolve) => setTimeout(resolve, 20))
+
+      expect(wrapper.emitted('transformUpdate')).toBeTruthy()
+      const updateEvent = wrapper.emitted('transformUpdate')?.[0]
+      expect(typeof updateEvent?.[0]).toBe('number')
+      expect(updateEvent?.[0]).toBeGreaterThanOrEqual(0)
+    })
+
+    it('should stop RAF sync on unmount', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+      wrapper.unmount()
+
+      expect(wrapper.emitted('rafStatusChange')).toBeTruthy()
+      const events = wrapper.emitted('rafStatusChange') as any[]
+      expect(events[events.length - 1]).toEqual([false])
+      expect(global.cancelAnimationFrame).toHaveBeenCalled()
+    })
+  })
+
+  describe('canvas event listeners', () => {
+    it('should add event listeners to canvas on mount', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+
+      expect(mockCanvas.canvas.addEventListener).toHaveBeenCalledWith(
+        'wheel',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.addEventListener).toHaveBeenCalledWith(
+        'pointerdown',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.addEventListener).toHaveBeenCalledWith(
+        'pointerup',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.addEventListener).toHaveBeenCalledWith(
+        'pointercancel',
+        expect.any(Function),
+        expect.any(Object)
+      )
+    })
+
+    it('should remove event listeners on unmount', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+      wrapper.unmount()
+
+      expect(mockCanvas.canvas.removeEventListener).toHaveBeenCalledWith(
+        'wheel',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.removeEventListener).toHaveBeenCalledWith(
+        'pointerdown',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.removeEventListener).toHaveBeenCalledWith(
+        'pointerup',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.removeEventListener).toHaveBeenCalledWith(
+        'pointercancel',
+        expect.any(Function),
+        expect.any(Object)
+      )
+    })
+  })
+
+  describe('interaction state management', () => {
+    it('should apply interacting class during interactions', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      // Simulate interaction start by checking internal state
+      // Note: This tests the CSS class application logic
+      const transformPane = wrapper.find('.transform-pane')
+
+      // Initially should not have interacting class
+      expect(transformPane.classes()).not.toContain(
+        'transform-pane--interacting'
+      )
+    })
+
+    it('should handle pointer events for node delegation', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      const transformPane = wrapper.find('.transform-pane')
+
+      // Simulate pointer down - we can't test the exact delegation logic
+      // in unit tests due to vue-test-utils limitations, but we can verify
+      // the event handler is set up correctly
+      await transformPane.trigger('pointerdown')
+
+      // The test passes if no errors are thrown during event handling
+      expect(transformPane.exists()).toBe(true)
+    })
+  })
+
+  describe('transform state integration', () => {
+    it('should provide transform utilities to child components', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      // The component should provide transform state via Vue's provide/inject
+      // This is tested indirectly through the composable integration
+      expect(mockTransformState.syncWithCanvas).toBeDefined()
+      expect(mockTransformState.canvasToScreen).toBeDefined()
+      expect(mockTransformState.screenToCanvas).toBeDefined()
+    })
+  })
+
+  describe('error handling', () => {
+    it('should handle null canvas gracefully', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: undefined
+        }
+      })
+
+      expect(wrapper.exists()).toBe(true)
+      expect(wrapper.find('.transform-pane').exists()).toBe(true)
+    })
+
+    it('should handle missing canvas properties', () => {
+      const incompleteCanvas = {} as any
+
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: incompleteCanvas
+        }
+      })
+
+      expect(wrapper.exists()).toBe(true)
+      // Should not throw errors during mount
+    })
+  })
+
+  describe('performance optimizations', () => {
+    it('should use contain CSS property for layout optimization', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      const transformPane = wrapper.find('.transform-pane')
+
+      // This test verifies the CSS contains the performance optimization
+      // Note: In JSDOM, computed styles might not reflect all CSS properties
+      expect(transformPane.element.className).toContain('transform-pane')
+    })
+
+    it('should disable pointer events on container but allow on children', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        },
+        slots: {
+          default: '<div data-node-id="test">Test Node</div>'
+        }
+      })
+
+      const transformPane = wrapper.find('.transform-pane')
+
+      // The CSS should handle pointer events optimization
+      // This is primarily a CSS concern, but we verify the structure
+      expect(transformPane.exists()).toBe(true)
+      expect(wrapper.find('[data-node-id="test"]').exists()).toBe(true)
+    })
+  })
+
+  describe('viewport prop handling', () => {
+    it('should handle missing viewport prop', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas,
+          showDebugOverlay: true
+        }
+      })
+
+      // Should not crash when viewport is undefined
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should update debug overlay when viewport changes', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas,
+          viewport: { width: 800, height: 600 },
+          showDebugOverlay: true
+        }
+      })
+
+      expect(wrapper.text()).toContain('800x600')
+
+      await wrapper.setProps({
+        viewport: { width: 1920, height: 1080 }
+      })
+
+      expect(wrapper.text()).toContain('1920x1080')
+    })
+  })
+})
diff --git a/src/components/graph/TransformPane.vue b/src/components/graph/TransformPane.vue
new file mode 100644
index 0000000000..25305065e6
--- /dev/null
+++ b/src/components/graph/TransformPane.vue
@@ -0,0 +1,133 @@
+<template>
+  <div
+    class="transform-pane"
+    :class="{ 'transform-pane--interacting': isInteracting }"
+    :style="transformStyle"
+    @pointerdown="handlePointerDown"
+  >
+    <!-- Vue nodes will be rendered here -->
+    <slot />
+
+    <!-- DEV ONLY: Viewport bounds visualization -->
+    <div
+      v-if="props.showDebugOverlay"
+      class="viewport-debug-overlay"
+      :style="{
+        position: 'absolute',
+        left: '10px',
+        top: '10px',
+        border: '2px solid red',
+        width: (props.viewport?.width || 0) - 20 + 'px',
+        height: (props.viewport?.height || 0) - 20 + 'px',
+        pointerEvents: 'none',
+        opacity: 0.5
+      }"
+    >
+      <div
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          background: red;
+          color: white;
+          padding: 2px 5px;
+          font-size: 10px;
+        "
+      >
+        Viewport: {{ props.viewport?.width }}x{{ props.viewport?.height }} DPR:
+        {{ devicePixelRatio }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+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 }
+  showDebugOverlay?: boolean
+}
+
+const props = defineProps<TransformPaneProps>()
+
+// Get device pixel ratio for display
+const devicePixelRatio = window.devicePixelRatio || 1
+
+// Transform state management
+const {
+  camera,
+  transformStyle,
+  syncWithCanvas,
+  canvasToScreen,
+  screenToCanvas,
+  isNodeInViewport
+} = useTransformState()
+
+// Transform settling detection for re-rasterization optimization
+const canvasElement = computed(() => props.canvas?.canvas)
+const { isTransforming } = useTransformSettling(canvasElement, {
+  settleDelay: 200,
+  trackPan: true
+})
+
+// Use isTransforming for the CSS class (aliased for clarity)
+const isInteracting = isTransforming
+
+// Provide transform utilities to child components
+provide('transformState', {
+  camera,
+  canvasToScreen,
+  screenToCanvas,
+  isNodeInViewport
+})
+
+// Event delegation for node interactions
+const handlePointerDown = (event: PointerEvent) => {
+  const target = event.target as HTMLElement
+  const nodeElement = target.closest('[data-node-id]')
+
+  if (nodeElement) {
+    // TODO: Emit event for node interaction
+    // Node interaction with nodeId will be handled in future implementation
+  }
+}
+
+// Canvas transform synchronization
+const emit = defineEmits<{
+  rafStatusChange: [active: boolean]
+  transformUpdate: [time: number]
+}>()
+
+useCanvasTransformSync(props.canvas, syncWithCanvas, {
+  onStart: () => emit('rafStatusChange', true),
+  onUpdate: (duration) => emit('transformUpdate', duration),
+  onStop: () => emit('rafStatusChange', false)
+})
+</script>
+
+<style scoped>
+.transform-pane {
+  position: absolute;
+  inset: 0;
+  contain: layout style paint;
+  transform-origin: 0 0;
+  pointer-events: none;
+}
+
+.transform-pane--interacting {
+  will-change: transform;
+}
+
+/* Allow pointer events on nodes */
+.transform-pane :deep([data-node-id]) {
+  pointer-events: auto;
+}
+</style>
diff --git a/src/components/graph/debug/QuadTreeDebugSection.vue b/src/components/graph/debug/QuadTreeDebugSection.vue
new file mode 100644
index 0000000000..872a5fcaac
--- /dev/null
+++ b/src/components/graph/debug/QuadTreeDebugSection.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="pt-2 border-t border-surface-200 dark-theme:border-surface-700">
+    <h4 class="font-semibold mb-1">QuadTree Spatial Index</h4>
+
+    <!-- Enable/Disable Toggle -->
+    <div class="mb-2">
+      <label class="flex items-center gap-2">
+        <input
+          :checked="enabled"
+          type="checkbox"
+          @change="$emit('toggle', ($event.target as HTMLInputElement).checked)"
+        />
+        <span>Enable Spatial Indexing</span>
+      </label>
+    </div>
+
+    <!-- Status Message -->
+    <p v-if="!enabled" class="text-muted text-xs italic">
+      {{ statusMessage }}
+    </p>
+
+    <!-- Metrics when enabled -->
+    <template v-if="enabled && metrics">
+      <p class="text-muted">Strategy: {{ strategy }}</p>
+      <p class="text-muted">Total Nodes: {{ metrics.totalNodes }}</p>
+      <p class="text-muted">Visible Nodes: {{ metrics.visibleNodes }}</p>
+      <p class="text-muted">Query Time: {{ metrics.queryTime.toFixed(2) }}ms</p>
+      <p class="text-muted">Tree Depth: {{ metrics.treeDepth }}</p>
+      <p class="text-muted">Culling Efficiency: {{ cullingEfficiency }}</p>
+      <p class="text-muted">Rebuilds: {{ metrics.rebuildCount }}</p>
+
+      <!-- Show debug visualization toggle -->
+      <div class="mt-2">
+        <label class="flex items-center gap-2">
+          <input
+            :checked="showVisualization"
+            type="checkbox"
+            @change="
+              $emit(
+                'toggle-visualization',
+                ($event.target as HTMLInputElement).checked
+              )
+            "
+          />
+          <span>Show QuadTree Boundaries</span>
+        </label>
+      </div>
+    </template>
+
+    <!-- Performance Comparison -->
+    <template v-if="enabled && performanceComparison">
+      <div class="mt-2 text-xs">
+        <p class="text-muted font-semibold">Performance vs Linear:</p>
+        <p class="text-muted">Speedup: {{ performanceComparison.speedup }}x</p>
+        <p class="text-muted">
+          Break-even: ~{{ performanceComparison.breakEvenNodeCount }} nodes
+        </p>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  enabled: boolean
+  metrics?: {
+    totalNodes: number
+    visibleNodes: number
+    queryTime: number
+    treeDepth: number
+    rebuildCount: number
+  }
+  strategy?: string
+  threshold?: number
+  showVisualization?: boolean
+  performanceComparison?: {
+    speedup: number
+    breakEvenNodeCount: number
+  }
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  metrics: undefined,
+  strategy: 'quadtree',
+  threshold: 100,
+  showVisualization: false,
+  performanceComparison: undefined
+})
+
+defineEmits<{
+  toggle: [enabled: boolean]
+  'toggle-visualization': [show: boolean]
+}>()
+
+const statusMessage = computed(() => {
+  if (!props.enabled && props.metrics) {
+    return `Disabled (threshold: ${props.threshold} nodes, current: ${props.metrics.totalNodes})`
+  }
+  return `Spatial indexing will enable at ${props.threshold}+ nodes`
+})
+
+const cullingEfficiency = computed(() => {
+  if (!props.metrics || props.metrics.totalNodes === 0) return 'N/A'
+
+  const culled = props.metrics.totalNodes - props.metrics.visibleNodes
+  const percentage = ((culled / props.metrics.totalNodes) * 100).toFixed(1)
+  return `${culled} nodes (${percentage}%)`
+})
+</script>
diff --git a/src/components/graph/debug/QuadTreeVisualization.vue b/src/components/graph/debug/QuadTreeVisualization.vue
new file mode 100644
index 0000000000..28ade900d2
--- /dev/null
+++ b/src/components/graph/debug/QuadTreeVisualization.vue
@@ -0,0 +1,112 @@
+<template>
+  <svg
+    v-if="visible && debugInfo"
+    :width="svgSize.width"
+    :height="svgSize.height"
+    :style="svgStyle"
+    class="quadtree-visualization"
+  >
+    <!-- QuadTree boundaries -->
+    <g v-for="(node, index) in flattenedNodes" :key="`quad-${index}`">
+      <rect
+        :x="node.bounds.x"
+        :y="node.bounds.y"
+        :width="node.bounds.width"
+        :height="node.bounds.height"
+        :stroke="getDepthColor(node.depth)"
+        :stroke-width="getStrokeWidth(node.depth)"
+        fill="none"
+        :opacity="0.3 + node.depth * 0.05"
+      />
+    </g>
+
+    <!-- Viewport bounds (optional) -->
+    <rect
+      v-if="viewportBounds"
+      :x="viewportBounds.x"
+      :y="viewportBounds.y"
+      :width="viewportBounds.width"
+      :height="viewportBounds.height"
+      stroke="#00ff00"
+      stroke-width="3"
+      fill="none"
+      stroke-dasharray="10,5"
+      opacity="0.8"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import type { Bounds } from '@/utils/spatial/QuadTree'
+
+interface Props {
+  visible: boolean
+  debugInfo: any | null
+  transformStyle: any
+  viewportBounds?: Bounds
+}
+
+const props = defineProps<Props>()
+
+// Flatten the tree structure for rendering
+const flattenedNodes = computed(() => {
+  if (!props.debugInfo?.tree) return []
+
+  const nodes: any[] = []
+  const traverse = (node: any, depth = 0) => {
+    nodes.push({
+      bounds: node.bounds,
+      depth,
+      itemCount: node.itemCount,
+      divided: node.divided
+    })
+
+    if (node.children) {
+      node.children.forEach((child: any) => traverse(child, depth + 1))
+    }
+  }
+
+  traverse(props.debugInfo.tree)
+  return nodes
+})
+
+// SVG size (matches the transform pane size)
+const svgSize = ref({ width: 20000, height: 20000 })
+
+// Apply the same transform as the TransformPane
+const svgStyle = computed(() => ({
+  ...props.transformStyle,
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  pointerEvents: 'none'
+}))
+
+// Color based on depth
+const getDepthColor = (depth: number): string => {
+  const colors = [
+    '#ff6b6b', // Red
+    '#ffa500', // Orange
+    '#ffd93d', // Yellow
+    '#6bcf7f', // Green
+    '#4da6ff', // Blue
+    '#a78bfa' // Purple
+  ]
+  return colors[depth % colors.length]
+}
+
+// Stroke width based on depth
+const getStrokeWidth = (depth: number): number => {
+  return Math.max(0.5, 2 - depth * 0.3)
+}
+</script>
+
+<style scoped>
+.quadtree-visualization {
+  position: absolute;
+  overflow: visible;
+  z-index: 10; /* Above nodes but below UI */
+}
+</style>
diff --git a/src/components/graph/debug/VueNodeDebugPanel.vue b/src/components/graph/debug/VueNodeDebugPanel.vue
new file mode 100644
index 0000000000..903071dba7
--- /dev/null
+++ b/src/components/graph/debug/VueNodeDebugPanel.vue
@@ -0,0 +1,164 @@
+<template>
+  <!-- TransformPane Debug Controls -->
+  <div
+    class="fixed top-20 right-4 bg-surface-0 dark-theme:bg-surface-800 p-4 rounded-lg shadow-lg border border-surface-300 dark-theme:border-surface-600 z-50 pointer-events-auto w-80"
+    style="contain: layout style"
+  >
+    <h3 class="font-bold mb-2 text-sm">TransformPane Debug</h3>
+    <div class="space-y-2 text-xs">
+      <div>
+        <label class="flex items-center gap-2">
+          <input v-model="debugOverrideVueNodes" type="checkbox" />
+          <span>Enable TransformPane</span>
+        </label>
+      </div>
+
+      <!-- Canvas Metrics -->
+      <div
+        class="pt-2 border-t border-surface-200 dark-theme:border-surface-700"
+      >
+        <h4 class="font-semibold mb-1">Canvas State</h4>
+        <p class="text-muted">
+          Status: {{ canvasStore.canvas ? 'Ready' : 'Not Ready' }}
+        </p>
+        <p class="text-muted">
+          Viewport: {{ Math.round(canvasViewport.width) }}x{{
+            Math.round(canvasViewport.height)
+          }}
+        </p>
+        <template v-if="canvasStore.canvas?.ds">
+          <p class="text-muted">
+            Offset: ({{ Math.round(canvasStore.canvas.ds.offset[0]) }},
+            {{ Math.round(canvasStore.canvas.ds.offset[1]) }})
+          </p>
+          <p class="text-muted">
+            Scale: {{ canvasStore.canvas.ds.scale?.toFixed(3) || 1 }}
+          </p>
+        </template>
+      </div>
+
+      <!-- Node Metrics -->
+      <div
+        class="pt-2 border-t border-surface-200 dark-theme:border-surface-700"
+      >
+        <h4 class="font-semibold mb-1">Graph Metrics</h4>
+        <p class="text-muted">
+          Total Nodes: {{ comfyApp.graph?.nodes?.length || 0 }}
+        </p>
+        <p class="text-muted">
+          Selected Nodes: {{ canvasStore.canvas?.selectedItems?.size || 0 }}
+        </p>
+        <p class="text-muted">Vue Nodes Rendered: {{ vueNodesCount }}</p>
+        <p class="text-muted">Nodes in Viewport: {{ nodesInViewport }}</p>
+        <p class="text-muted">
+          Culled Nodes: {{ performanceMetrics.culledCount }}
+        </p>
+        <p class="text-muted">
+          Cull Percentage:
+          {{
+            Math.round(
+              ((vueNodesCount - nodesInViewport) / Math.max(vueNodesCount, 1)) *
+                100
+            )
+          }}%
+        </p>
+      </div>
+
+      <!-- Performance Metrics -->
+      <div
+        class="pt-2 border-t border-surface-200 dark-theme:border-surface-700"
+      >
+        <h4 class="font-semibold mb-1">Performance</h4>
+        <p v-memo="[currentFPS]" class="text-muted">FPS: {{ currentFPS }}</p>
+        <p v-memo="[Math.round(lastTransformTime)]" class="text-muted">
+          Transform Update: {{ Math.round(lastTransformTime) }}ms
+        </p>
+        <p
+          v-memo="[Math.round(performanceMetrics.updateTime)]"
+          class="text-muted"
+        >
+          Lifecycle Update: {{ Math.round(performanceMetrics.updateTime) }}ms
+        </p>
+        <p v-memo="[rafActive]" class="text-muted">
+          RAF Active: {{ rafActive ? 'Yes' : 'No' }}
+        </p>
+        <p v-memo="[performanceMetrics.adaptiveQuality]" class="text-muted">
+          Adaptive Quality:
+          {{ performanceMetrics.adaptiveQuality ? 'On' : 'Off' }}
+        </p>
+      </div>
+
+      <!-- Feature Flags Status -->
+      <div
+        v-if="isDevModeEnabled"
+        class="pt-2 border-t border-surface-200 dark-theme:border-surface-700"
+      >
+        <h4 class="font-semibold mb-1">Feature Flags</h4>
+        <p class="text-muted text-xs">
+          Vue Nodes: {{ shouldRenderVueNodes ? 'Enabled' : 'Disabled' }}
+        </p>
+        <p class="text-muted text-xs">
+          Dev Mode: {{ isDevModeEnabled ? 'Enabled' : 'Disabled' }}
+        </p>
+      </div>
+
+      <!-- Performance Options -->
+      <div
+        v-if="transformPaneEnabled"
+        class="pt-2 border-t border-surface-200 dark-theme:border-surface-700"
+      >
+        <h4 class="font-semibold mb-1">Debug Options</h4>
+        <label class="flex items-center gap-2">
+          <input v-model="showPerformanceOverlay" type="checkbox" />
+          <span>Show Performance Overlay</span>
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { app as comfyApp } from '@/scripts/app'
+import { useCanvasStore } from '@/stores/graphStore'
+
+interface Props {
+  debugOverrideVueNodes: boolean
+  canvasViewport: { width: number; height: number }
+  vueNodesCount: number
+  nodesInViewport: number
+  performanceMetrics: {
+    culledCount: number
+    updateTime: number
+    adaptiveQuality: boolean
+  }
+  currentFPS: number
+  lastTransformTime: number
+  rafActive: boolean
+  isDevModeEnabled: boolean
+  shouldRenderVueNodes: boolean
+  transformPaneEnabled: boolean
+  showPerformanceOverlay: boolean
+}
+
+interface Emits {
+  (e: 'update:debugOverrideVueNodes', value: boolean): void
+  (e: 'update:showPerformanceOverlay', value: boolean): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const canvasStore = useCanvasStore()
+
+const debugOverrideVueNodes = computed({
+  get: () => props.debugOverrideVueNodes,
+  set: (value: boolean) => emit('update:debugOverrideVueNodes', value)
+})
+
+const showPerformanceOverlay = computed({
+  get: () => props.showPerformanceOverlay,
+  set: (value: boolean) => emit('update:showPerformanceOverlay', value)
+})
+</script>
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
new file mode 100644
index 0000000000..0de2e83b2a
--- /dev/null
+++ b/src/components/graph/vueNodes/InputSlot.vue
@@ -0,0 +1,85 @@
+<template>
+  <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 cursor-crosshair group"
+    :class="{
+      'opacity-70': readonly,
+      'lg-slot--connected': connected,
+      '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="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 v-if="!dotOnly" class="text-xs text-surface-700 whitespace-nowrap">
+      {{ slotData.name || `Input ${index}` }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+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
+  slotData: INodeSlot
+  index: number
+  connected?: boolean
+  compatible?: boolean
+  readonly?: boolean
+  dotOnly?: boolean
+}
+
+const props = defineProps<InputSlotProps>()
+
+const emit = defineEmits<{
+  'slot-click': [event: PointerEvent]
+}>()
+
+// Error boundary implementation
+const renderError = ref<string | null>(null)
+const { toastErrorHandler } = useErrorHandling()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false
+})
+
+// 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) {
+    emit('slot-click', event)
+  }
+}
+</script>
diff --git a/src/components/graph/vueNodes/LGraphNode.vue b/src/components/graph/vueNodes/LGraphNode.vue
new file mode 100644
index 0000000000..a3b36b2c8d
--- /dev/null
+++ b/src/components/graph/vueNodes/LGraphNode.vue
@@ -0,0 +1,203 @@
+<template>
+  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
+    ⚠️ Node Render Error
+  </div>
+  <div
+    v-else
+    :class="[
+      'lg-node absolute border-2 rounded-lg',
+      'contain-layout contain-style contain-paint',
+      selected ? 'border-blue-500 ring-2 ring-blue-300' : 'border-gray-600',
+      executing ? 'animate-pulse' : '',
+      nodeData.mode === 4 ? 'opacity-50' : '', // bypassed
+      error ? 'border-red-500 bg-red-50' : '',
+      isDragging ? 'will-change-transform' : '',
+      lodCssClass
+    ]"
+    :style="{
+      transform: `translate(${position?.x ?? 0}px, ${(position?.y ?? 0) - LiteGraph.NODE_TITLE_HEIGHT}px)`,
+      width: size ? `${size.width}px` : '200px',
+      height: size ? `${size.height}px` : 'auto',
+      backgroundColor: '#353535'
+    }"
+    @pointerdown="handlePointerDown"
+  >
+    <!-- Header only updates on title/color changes -->
+    <NodeHeader
+      v-memo="[nodeData.title, lodLevel, isCollapsed]"
+      :node-data="nodeData"
+      :readonly="readonly"
+      :lod-level="lodLevel"
+      :collapsed="isCollapsed"
+      @collapse="handleCollapse"
+      @update:title="handleTitleUpdate"
+    />
+
+    <!-- Node Body - rendered based on LOD level and collapsed state -->
+    <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"
+        v-memo="[nodeData.inputs?.length, nodeData.outputs?.length, lodLevel]"
+        :node-data="nodeData"
+        :readonly="readonly"
+        :lod-level="lodLevel"
+        @slot-click="handleSlotClick"
+      />
+
+      <!-- Widgets rendered at reduced+ detail -->
+      <NodeWidgets
+        v-if="shouldRenderWidgets && nodeData.widgets?.length"
+        v-memo="[nodeData.widgets?.length, lodLevel]"
+        :node-data="nodeData"
+        :readonly="readonly"
+        :lod-level="lodLevel"
+      />
+
+      <!-- Custom content at reduced+ detail -->
+      <NodeContent
+        v-if="shouldRenderContent && hasCustomContent"
+        :node-data="nodeData"
+        :readonly="readonly"
+        :lod-level="lodLevel"
+      />
+    </div>
+
+    <!-- Progress bar for executing state -->
+    <div
+      v-if="executing && progress !== undefined"
+      class="absolute bottom-0 left-0 h-1 bg-primary-500 transition-all duration-300"
+      :style="{ width: `${progress * 100}%` }"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onErrorCaptured, ref, toRef, watch } from 'vue'
+
+// Import the VueNodeData type
+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'
+import NodeWidgets from './NodeWidgets.vue'
+
+// Extended props for main node component
+interface LGraphNodeProps {
+  nodeData: VueNodeData
+  position?: { x: number; y: number }
+  size?: { width: number; height: number }
+  readonly?: boolean
+  selected?: boolean
+  executing?: boolean
+  progress?: number
+  error?: string | null
+  zoomLevel?: number
+}
+
+const props = defineProps<LGraphNodeProps>()
+
+const emit = defineEmits<{
+  'node-click': [event: PointerEvent, nodeData: VueNodeData]
+  'slot-click': [
+    event: PointerEvent,
+    nodeData: VueNodeData,
+    slotIndex: number,
+    isInput: boolean
+  ]
+  'update:collapsed': [nodeId: string, collapsed: boolean]
+  'update:title': [nodeId: string, newTitle: string]
+}>()
+
+// LOD (Level of Detail) system based on zoom level
+const zoomRef = toRef(() => props.zoomLevel ?? 1)
+const {
+  lodLevel,
+  shouldRenderWidgets,
+  shouldRenderSlots,
+  shouldRenderContent,
+  lodCssClass
+} = useLOD(zoomRef)
+
+// Computed properties for template usage
+const isMinimalLOD = computed(() => lodLevel.value === LODLevel.MINIMAL)
+
+// Error boundary implementation
+const renderError = ref<string | null>(null)
+const { toastErrorHandler } = useErrorHandling()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false // Prevent error propagation
+})
+
+// Track dragging state for will-change optimization
+const isDragging = ref(false)
+
+// Track collapsed state
+const isCollapsed = ref(props.nodeData.flags?.collapsed ?? false)
+
+// Watch for external changes to the collapsed state
+watch(
+  () => props.nodeData.flags?.collapsed,
+  (newCollapsed) => {
+    if (newCollapsed !== undefined && newCollapsed !== isCollapsed.value) {
+      isCollapsed.value = newCollapsed
+    }
+  }
+)
+
+// Check if node has custom content
+const hasCustomContent = computed(() => {
+  // Currently all content is handled through widgets
+  // This remains false but provides extensibility point
+  return false
+})
+
+// Event handlers
+const handlePointerDown = (event: PointerEvent) => {
+  if (!props.nodeData) {
+    console.warn('LGraphNode: nodeData is null/undefined in handlePointerDown')
+    return
+  }
+  emit('node-click', event, props.nodeData)
+}
+
+const handleCollapse = () => {
+  isCollapsed.value = !isCollapsed.value
+  // Emit event so parent can sync with LiteGraph if needed
+  emit('update:collapsed', props.nodeData.id, isCollapsed.value)
+}
+
+const handleSlotClick = (
+  event: PointerEvent,
+  slotIndex: number,
+  isInput: boolean
+) => {
+  if (!props.nodeData) {
+    console.warn('LGraphNode: nodeData is null/undefined in handleSlotClick')
+    return
+  }
+  emit('slot-click', event, props.nodeData, slotIndex, isInput)
+}
+
+const handleTitleUpdate = (newTitle: string) => {
+  emit('update:title', props.nodeData.id, newTitle)
+}
+
+// Expose methods for parent to control dragging state
+defineExpose({
+  setDragging(dragging: boolean) {
+    isDragging.value = dragging
+  }
+})
+</script>
diff --git a/src/components/graph/vueNodes/NodeContent.vue b/src/components/graph/vueNodes/NodeContent.vue
new file mode 100644
index 0000000000..d51a48e35a
--- /dev/null
+++ b/src/components/graph/vueNodes/NodeContent.vue
@@ -0,0 +1,41 @@
+<template>
+  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
+    ⚠️ Node Content Error
+  </div>
+  <div v-else class="lg-node-content">
+    <!-- Default slot for custom content -->
+    <slot>
+      <!-- This component serves as a placeholder for future extensibility -->
+      <!-- Currently all node content is rendered through the widget system -->
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+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
+  readonly?: boolean
+  lodLevel?: LODLevel
+}
+
+defineProps<NodeContentProps>()
+
+// Error boundary implementation
+const renderError = ref<string | null>(null)
+const { toastErrorHandler } = useErrorHandling()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false
+})
+</script>
diff --git a/src/components/graph/vueNodes/NodeHeader.vue b/src/components/graph/vueNodes/NodeHeader.vue
new file mode 100644
index 0000000000..5abf19b3aa
--- /dev/null
+++ b/src/components/graph/vueNodes/NodeHeader.vue
@@ -0,0 +1,148 @@
+<template>
+  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
+    ⚠️ Node Header Error
+  </div>
+  <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
+    }"
+    @dblclick="handleDoubleClick"
+  >
+    <!-- Collapse/Expand Button -->
+    <button
+      v-show="!readonly"
+      class="bg-transparent border-transparent flex items-center"
+      data-testid="node-collapse-button"
+      @click.stop="handleCollapse"
+      @dblclick.stop
+    >
+      <i
+        :class="collapsed ? 'pi pi-chevron-right' : 'pi pi-chevron-down'"
+        class="text-xs leading-none relative top-[1px]"
+      ></i>
+    </button>
+
+    <!-- Node Title -->
+    <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 { computed, onErrorCaptured, ref, watch } from 'vue'
+
+import EditableText from '@/components/common/EditableText.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 NodeHeaderProps {
+  node?: LGraphNode // For backwards compatibility
+  nodeData?: VueNodeData // New clean data structure
+  readonly?: boolean
+  lodLevel?: LODLevel
+  collapsed?: boolean
+}
+
+const props = defineProps<NodeHeaderProps>()
+
+const emit = defineEmits<{
+  collapse: []
+  'update:title': [newTitle: string]
+}>()
+
+// Error boundary implementation
+const renderError = ref<string | null>(null)
+const { toastErrorHandler } = useErrorHandling()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false
+})
+
+// Editing state
+const isEditing = ref(false)
+
+const nodeInfo = computed(() => props.nodeData || props.node)
+
+// Local state for title to provide immediate feedback
+const displayTitle = ref(nodeInfo.value?.title || 'Untitled')
+
+// Watch for external changes to the node title
+watch(
+  () => nodeInfo.value?.title,
+  (newTitle) => {
+    if (newTitle && newTitle !== displayTitle.value) {
+      displayTitle.value = newTitle
+    }
+  }
+)
+
+// Compute header color based on node color property or type
+const headerColor = computed(() => {
+  const info = nodeInfo.value
+  if (!info) return '#353535'
+
+  if (info.mode === 4) return '#666' // Bypassed
+  if (info.mode === 2) return '#444' // Muted
+  return '#353535' // Default
+})
+
+// Compute text color for contrast
+const textColor = computed(() => {
+  const color = headerColor.value
+  if (!color || color === '#353535' || color === '#444' || color === '#666') {
+    return '#fff'
+  }
+  const colorStr = String(color)
+  const rgb = parseInt(
+    colorStr.startsWith('#') ? colorStr.slice(1) : colorStr,
+    16
+  )
+  const r = (rgb >> 16) & 255
+  const g = (rgb >> 8) & 255
+  const b = rgb & 255
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000
+  return brightness > 128 ? '#000' : '#fff'
+})
+
+// Event handlers
+const handleCollapse = () => {
+  emit('collapse')
+}
+
+const handleDoubleClick = () => {
+  if (!props.readonly) {
+    isEditing.value = true
+  }
+}
+
+const handleTitleEdit = (newTitle: string) => {
+  isEditing.value = false
+  const trimmedTitle = newTitle.trim()
+  if (trimmedTitle && trimmedTitle !== displayTitle.value) {
+    // Emit for litegraph sync
+    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
new file mode 100644
index 0000000000..6d1d6ec885
--- /dev/null
+++ b/src/components/graph/vueNodes/NodeSlots.vue
@@ -0,0 +1,139 @@
+<template>
+  <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 flex justify-between">
+    <div v-if="filteredInputs.length" class="flex flex-col">
+      <InputSlot
+        v-for="(input, index) in filteredInputs"
+        :key="`input-${index}`"
+        :slot-data="input"
+        :index="getActualInputIndex(input, index)"
+        :readonly="readonly"
+        @slot-click="
+          handleInputSlotClick(getActualInputIndex(input, index), $event)
+        "
+      />
+    </div>
+
+    <div v-if="filteredOutputs.length" class="flex flex-col ml-auto">
+      <OutputSlot
+        v-for="(output, index) in filteredOutputs"
+        :key="`output-${index}`"
+        :slot-data="output"
+        :index="index"
+        :readonly="readonly"
+        @slot-click="handleOutputSlotClick(index, $event)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+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
+  readonly?: boolean
+  lodLevel?: LODLevel
+}
+
+const props = defineProps<NodeSlotsProps>()
+
+const nodeInfo = computed(() => props.nodeData || props.node)
+
+// Filter out input slots that have corresponding widgets
+const filteredInputs = computed(() => {
+  if (!nodeInfo.value?.inputs) return []
+
+  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
+}
+
+// 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)
+}
+
+// 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()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false
+})
+</script>
diff --git a/src/components/graph/vueNodes/NodeWidgets.vue b/src/components/graph/vueNodes/NodeWidgets.vue
new file mode 100644
index 0000000000..487c1dc7a0
--- /dev/null
+++ b/src/components/graph/vueNodes/NodeWidgets.vue
@@ -0,0 +1,166 @@
+<template>
+  <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 pr-4">
+    <div
+      v-for="(widget, index) in processedWidgets"
+      :key="`widget-${index}-${widget.name}`"
+      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 { 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
+} from '@/composables/graph/useGraphNodeManager'
+import { LODLevel } from '@/composables/graph/useLOD'
+import {
+  ESSENTIAL_WIDGET_TYPES,
+  useWidgetRenderer
+} from '@/composables/graph/useWidgetRenderer'
+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
+  readonly?: boolean
+  lodLevel?: LODLevel
+}
+
+const props = defineProps<NodeWidgetsProps>()
+
+// Set up event forwarding for slot interactions
+const { handleSlotPointerDown, cleanup } = useEventForwarding()
+
+// Use widget renderer composable
+const { getWidgetComponent, shouldRenderAsVue } = useWidgetRenderer()
+
+// Error boundary implementation
+const renderError = ref<string | null>(null)
+
+const { toastErrorHandler } = useErrorHandling()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false
+})
+
+const nodeInfo = computed(() => props.nodeData || props.node)
+
+interface ProcessedWidget {
+  name: string
+  type: string
+  vueComponent: any
+  simplified: SimplifiedWidget
+  value: WidgetValue
+  updateHandler: (value: unknown) => void
+}
+
+const processedWidgets = computed((): ProcessedWidget[] => {
+  const info = nodeInfo.value
+  if (!info?.widgets) return []
+
+  const widgets = info.widgets as SafeWidgetData[]
+  const lodLevel = props.lodLevel
+  const result: ProcessedWidget[] = []
+
+  if (lodLevel === LODLevel.MINIMAL) {
+    return []
+  }
+
+  for (const widget of widgets) {
+    if (widget.options?.hidden) continue
+    if (widget.options?.canvasOnly) continue
+    if (!widget.type) continue
+    if (!shouldRenderAsVue(widget)) continue
+
+    if (
+      lodLevel === LODLevel.REDUCED &&
+      !ESSENTIAL_WIDGET_TYPES.has(widget.type)
+    )
+      continue
+
+    const componentName = getWidgetComponent(widget.type)
+    const vueComponent = widgetTypeToComponent[componentName] || WidgetInputText
+
+    const simplified: SimplifiedWidget = {
+      name: widget.name,
+      type: widget.type,
+      value: widget.value,
+      options: widget.options,
+      callback: widget.callback
+    }
+
+    const updateHandler = (value: unknown) => {
+      if (widget.callback) {
+        widget.callback(value)
+      }
+    }
+
+    result.push({
+      name: widget.name,
+      type: widget.type,
+      vueComponent,
+      simplified,
+      value: widget.value,
+      updateHandler
+    })
+  }
+
+  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
new file mode 100644
index 0000000000..2edd3f096f
--- /dev/null
+++ b/src/components/graph/vueNodes/OutputSlot.vue
@@ -0,0 +1,87 @@
+<template>
+  <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 cursor-crosshair justify-end group"
+    :class="{
+      'opacity-70': readonly,
+      'lg-slot--connected': connected,
+      '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 v-if="!dotOnly" class="text-xs text-surface-700 whitespace-nowrap">
+      {{ slotData.name || `Output ${index}` }}
+    </span>
+
+    <!-- Connection Dot -->
+    <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 { 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
+  slotData: INodeSlot
+  index: number
+  connected?: boolean
+  compatible?: boolean
+  readonly?: boolean
+  dotOnly?: boolean
+}
+
+const props = defineProps<OutputSlotProps>()
+
+const emit = defineEmits<{
+  'slot-click': [event: PointerEvent]
+}>()
+
+// Error boundary implementation
+const renderError = ref<string | null>(null)
+
+const { toastErrorHandler } = useErrorHandling()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false
+})
+
+// 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) {
+    emit('slot-click', event)
+  }
+}
+</script>
diff --git a/src/components/graph/vueNodes/widgets/LOD_IMPLEMENTATION_GUIDE.md b/src/components/graph/vueNodes/widgets/LOD_IMPLEMENTATION_GUIDE.md
new file mode 100644
index 0000000000..95c8b40a37
--- /dev/null
+++ b/src/components/graph/vueNodes/widgets/LOD_IMPLEMENTATION_GUIDE.md
@@ -0,0 +1,295 @@
+# Level of Detail (LOD) Implementation Guide for Widgets
+
+## What is Level of Detail (LOD)?
+
+Level of Detail is a technique used to optimize performance by showing different amounts of detail based on how zoomed in the user is. Think of it like Google Maps - when you're zoomed out looking at the whole country, you only see major cities and highways. When you zoom in close, you see street names, building details, and restaurants.
+
+For ComfyUI nodes, this means:
+- **Zoomed out** (viewing many nodes): Show only essential controls, hide labels and descriptions
+- **Zoomed in** (focusing on specific nodes): Show all details, labels, help text, and visual polish
+
+## Why LOD Matters
+
+Without LOD optimization:
+- 1000+ nodes with full detail = browser lag and poor performance
+- Text that's too small to read still gets rendered (wasted work)
+- Visual effects that are invisible at distance still consume GPU
+
+With LOD optimization:
+- Smooth performance even with large node graphs
+- Battery life improvement on laptops
+- Better user experience across different zoom levels
+
+## How to Implement LOD in Your Widget
+
+### Step 1: Get the LOD Context
+
+Every widget component gets a `zoomLevel` prop. Use this to determine how much detail to show:
+
+```vue
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { useLOD } from '@/composables/graph/useLOD'
+
+const props = defineProps<{
+  widget: any
+  zoomLevel: number
+  // ... other props
+}>()
+
+// Get LOD information
+const { lodScore, lodLevel } = useLOD(toRef(() => props.zoomLevel))
+</script>
+```
+
+**Primary API:** Use `lodScore` (0-1) for granular control and smooth transitions  
+**Convenience API:** Use `lodLevel` ('minimal'|'reduced'|'full') for simple on/off decisions
+
+### Step 2: Choose What to Show at Different Zoom Levels
+
+#### Understanding the LOD Score
+- `lodScore` is a number from 0 to 1
+- 0 = completely zoomed out (show minimal detail)
+- 1 = fully zoomed in (show everything)
+- 0.5 = medium zoom (show some details)
+
+#### Understanding LOD Levels
+- `'minimal'` = zoom level 0.4 or below (very zoomed out)
+- `'reduced'` = zoom level 0.4 to 0.8 (medium zoom)
+- `'full'` = zoom level 0.8 or above (zoomed in close)
+
+### Step 3: Implement Your Widget's LOD Strategy
+
+Here's a complete example of a slider widget with LOD:
+
+```vue
+<template>
+  <div class="number-widget">
+    <!-- The main control always shows -->
+    <input 
+      v-model="value"
+      type="range"
+      :min="widget.min"
+      :max="widget.max"
+      class="widget-slider"
+    />
+    
+    <!-- Show label only when zoomed in enough to read it -->
+    <label 
+      v-if="showLabel"
+      class="widget-label"
+    >
+      {{ widget.name }}
+    </label>
+    
+    <!-- Show precise value only when fully zoomed in -->
+    <span 
+      v-if="showValue"
+      class="widget-value"
+    >
+      {{ formattedValue }}
+    </span>
+    
+    <!-- Show description only at full detail -->
+    <div 
+      v-if="showDescription && widget.description"
+      class="widget-description"
+    >
+      {{ widget.description }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { useLOD } from '@/composables/graph/useLOD'
+
+const props = defineProps<{
+  widget: any
+  zoomLevel: number
+}>()
+
+const { lodScore, lodLevel } = useLOD(toRef(() => props.zoomLevel))
+
+// Define when to show each element
+const showLabel = computed(() => {
+  // Show label when user can actually read it
+  return lodScore.value > 0.4  // Roughly 12px+ text size
+})
+
+const showValue = computed(() => {
+  // Show precise value only when zoomed in close
+  return lodScore.value > 0.7  // User is focused on this specific widget
+})
+
+const showDescription = computed(() => {
+  // Description only at full detail
+  return lodLevel.value === 'full'  // Maximum zoom level
+})
+
+// You can also use LOD for styling
+const widgetClasses = computed(() => {
+  const classes = ['number-widget']
+  
+  if (lodLevel.value === 'minimal') {
+    classes.push('widget--minimal')
+  }
+  
+  return classes
+})
+</script>
+
+<style scoped>
+/* Apply different styles based on LOD */
+.widget--minimal {
+  /* Simplified appearance when zoomed out */
+  .widget-slider {
+    height: 4px;  /* Thinner slider */
+    opacity: 0.9;
+  }
+}
+
+/* Normal styling */
+.widget-slider {
+  height: 8px;
+  transition: height 0.2s ease;
+}
+
+.widget-label {
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+}
+
+.widget-value {
+  font-family: monospace;
+  font-size: 0.7rem;
+  color: var(--text-accent);
+}
+
+.widget-description {
+  font-size: 0.6rem;
+  color: var(--text-muted);
+  margin-top: 4px;
+}
+</style>
+```
+
+## Common LOD Patterns
+
+### Pattern 1: Essential vs. Nice-to-Have
+```typescript
+// Always show the main functionality
+const showMainControl = computed(() => true)
+
+// Granular control with lodScore
+const showLabels = computed(() => lodScore.value > 0.4)
+const labelOpacity = computed(() => Math.max(0.3, lodScore.value))
+
+// Simple control with lodLevel  
+const showExtras = computed(() => lodLevel.value === 'full')
+```
+
+### Pattern 2: Smooth Opacity Transitions
+```typescript
+// Gradually fade elements based on zoom
+const labelOpacity = computed(() => {
+  // Fade in from zoom 0.3 to 0.6
+  return Math.max(0, Math.min(1, (lodScore.value - 0.3) / 0.3))
+})
+```
+
+### Pattern 3: Progressive Detail
+```typescript
+const detailLevel = computed(() => {
+  if (lodScore.value < 0.3) return 'none'
+  if (lodScore.value < 0.6) return 'basic'
+  if (lodScore.value < 0.8) return 'standard'
+  return 'full'
+})
+```
+
+## LOD Guidelines by Widget Type
+
+### Text Input Widgets
+- **Always show**: The input field itself
+- **Medium zoom**: Show label
+- **High zoom**: Show placeholder text, validation messages
+- **Full zoom**: Show character count, format hints
+
+### Button Widgets  
+- **Always show**: The button
+- **Medium zoom**: Show button text
+- **High zoom**: Show button description
+- **Full zoom**: Show keyboard shortcuts, tooltips
+
+### Selection Widgets (Dropdown, Radio)
+- **Always show**: The current selection
+- **Medium zoom**: Show option labels
+- **High zoom**: Show all options when expanded
+- **Full zoom**: Show option descriptions, icons
+
+### Complex Widgets (Color Picker, File Browser)
+- **Always show**: Simplified representation (color swatch, filename)
+- **Medium zoom**: Show basic controls
+- **High zoom**: Show full interface
+- **Full zoom**: Show advanced options, previews
+
+## Design Collaboration Guidelines
+
+### For Designers
+When designing widgets, consider creating variants for different zoom levels:
+
+1. **Minimal Design** (far away view)
+   - Essential elements only
+   - Higher contrast for visibility
+   - Simplified shapes and fewer details
+
+2. **Standard Design** (normal view)
+   - Balanced detail and simplicity
+   - Clear labels and readable text
+   - Good for most use cases
+
+3. **Full Detail Design** (close-up view)
+   - All labels, descriptions, and help text
+   - Rich visual effects and polish
+   - Maximum information density
+
+### Design Handoff Checklist
+- [ ] Specify which elements are essential vs. nice-to-have
+- [ ] Define minimum readable sizes for text elements
+- [ ] Provide simplified versions for distant viewing
+- [ ] Consider color contrast at different opacity levels
+- [ ] Test designs at multiple zoom levels
+
+## Testing Your LOD Implementation
+
+### Manual Testing
+1. Create a workflow with your widget
+2. Zoom out until nodes are very small
+3. Verify essential functionality still works
+4. Zoom in gradually and check that details appear smoothly
+5. Test performance with 50+ nodes containing your widget
+
+### Performance Considerations
+- Avoid complex calculations in LOD computed properties
+- Use `v-if` instead of `v-show` for elements that won't render
+- Consider using `v-memo` for expensive widget content
+- Test on lower-end devices
+
+### Common Mistakes
+❌ **Don't**: Hide the main widget functionality at any zoom level
+❌ **Don't**: Use complex animations that trigger at every zoom change  
+❌ **Don't**: Make LOD thresholds too sensitive (causes flickering)
+❌ **Don't**: Forget to test with real content and edge cases
+
+✅ **Do**: Keep essential functionality always visible
+✅ **Do**: Use smooth transitions between LOD levels
+✅ **Do**: Test with varying content lengths and types
+✅ **Do**: Consider accessibility at all zoom levels
+
+## Getting Help
+
+- Check existing widgets in `src/components/graph/vueNodes/widgets/` for examples
+- Ask in the ComfyUI frontend Discord for LOD implementation questions
+- Test your changes with the LOD debug panel (top-right in GraphCanvas)
+- Profile performance impact using browser dev tools
\ No newline at end of file
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 462957335d..8cb41dfa9b 100644
--- a/src/components/graph/vueWidgets/WidgetInputText.vue
+++ b/src/components/graph/vueWidgets/WidgetInputText.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>
-    <InputText v-model="value" v-bind="filteredProps" :disabled="readonly" />
+    <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>
 </template>
 
@@ -11,19 +18,30 @@
 import InputText from 'primevue/inputtext'
 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/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 94286b1536..710fa8a719 100644
--- a/src/components/graph/vueWidgets/WidgetSelect.vue
+++ b/src/components/graph/vueWidgets/WidgetSelect.vue
@@ -1,9 +1,23 @@
 <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 v-model="value" v-bind="filteredProps" :disabled="readonly" />
+    <Select
+      v-model="localValue"
+      :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>
 </template>
 
@@ -11,20 +25,48 @@
 import Select from 'primevue/select'
 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 })
+import { COMFY_VUE_NODE_DIMENSIONS } from '../../../lib/litegraph/src/litegraph'
 
 const props = defineProps<{
-  widget: SimplifiedWidget<any>
+  widget: SimplifiedWidget<string | number | undefined>
+  modelValue: string | number | undefined
   readonly?: boolean
 }>()
 
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number | undefined]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: props.widget.options?.values?.[0] || '',
+  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)
 )
+
+// Extract select options from widget options
+const selectOptions = computed(() => {
+  const options = props.widget.options
+
+  if (options?.values && Array.isArray(options.values)) {
+    return options.values
+  }
+
+  return []
+})
 </script>
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 e7f2ece3ef..612a023133 100644
--- a/src/components/graph/vueWidgets/WidgetSlider.vue
+++ b/src/components/graph/vueWidgets/WidgetSlider.vue
@@ -1,30 +1,170 @@
 <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="value" v-bind="filteredProps" :disabled="readonly" />
+    <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'
 import {
   STANDARD_EXCLUDED_PROPS,
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
-const value = defineModel<number>({ required: true })
+import { COMFY_VUE_NODE_DIMENSIONS } from '../../../lib/litegraph/src/litegraph'
 
 const props = defineProps<{
   widget: SimplifiedWidget<number>
+  modelValue: number
   readonly?: boolean
 }>()
 
+const emit = defineEmits<{
+  'update:modelValue': [value: number]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useNumberWidgetValue(
+  props.widget,
+  props.modelValue,
+  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 e74203b7c8..7fee347aec 100644
--- a/src/components/graph/vueWidgets/WidgetToggleSwitch.vue
+++ b/src/components/graph/vueWidgets/WidgetToggleSwitch.vue
@@ -1,9 +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>
-    <ToggleSwitch v-model="value" v-bind="filteredProps" :disabled="readonly" />
+    <ToggleSwitch
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      @update:model-value="onChange"
+    />
   </div>
 </template>
 
@@ -11,20 +16,41 @@
 import ToggleSwitch from 'primevue/toggleswitch'
 import { computed } from 'vue'
 
+import { useBooleanWidgetValue } from '@/composables/graph/useWidgetValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import {
   STANDARD_EXCLUDED_PROPS,
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
-const value = defineModel<boolean>({ required: true })
-
 const props = defineProps<{
   widget: SimplifiedWidget<boolean>
+  modelValue: boolean
   readonly?: boolean
 }>()
 
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useBooleanWidgetValue(
+  props.widget,
+  props.modelValue,
+  emit
+)
+
 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
new file mode 100644
index 0000000000..5192bd6df4
--- /dev/null
+++ b/src/composables/element/useTransformState.ts
@@ -0,0 +1,242 @@
+/**
+ * Composable for managing transform state synchronized with LiteGraph canvas
+ *
+ * This composable is a critical part of the hybrid rendering architecture that
+ * allows Vue components to render in perfect alignment with LiteGraph's canvas.
+ *
+ * ## Core Concept
+ *
+ * LiteGraph uses a canvas for rendering connections, grid, and handling interactions.
+ * Vue components need to render nodes on top of this canvas. The challenge is
+ * synchronizing the coordinate systems:
+ *
+ * - LiteGraph: Uses canvas coordinates with its own transform matrix
+ * - Vue/DOM: Uses screen coordinates with CSS transforms
+ *
+ * ## Solution: Transform Container Pattern
+ *
+ * Instead of transforming individual nodes (O(n) complexity), we:
+ * 1. Mirror LiteGraph's transform matrix to a single CSS container
+ * 2. Place all Vue nodes as children with simple absolute positioning
+ * 3. Achieve O(1) transform updates regardless of node count
+ *
+ * ## Coordinate Systems
+ *
+ * - **Canvas coordinates**: LiteGraph's internal coordinate system
+ * - **Screen coordinates**: Browser's viewport coordinate system
+ * - **Transform sync**: camera.x/y/z mirrors canvas.ds.offset/scale
+ *
+ * ## Performance Benefits
+ *
+ * - GPU acceleration via CSS transforms
+ * - No layout thrashing (only transform changes)
+ * - Efficient viewport culling calculations
+ * - Scales to 1000+ nodes while maintaining 60 FPS
+ *
+ * @example
+ * ```typescript
+ * const { camera, transformStyle, canvasToScreen } = useTransformState()
+ *
+ * // In template
+ * <div :style="transformStyle">
+ *   <NodeComponent
+ *     v-for="node in nodes"
+ *     :style="{ left: node.x + 'px', top: node.y + 'px' }"
+ *   />
+ * </div>
+ *
+ * // Convert coordinates
+ * const screenPos = canvasToScreen({ x: nodeX, y: nodeY })
+ * ```
+ */
+import { computed, reactive, readonly } from 'vue'
+
+import type { LGraphCanvas } from '../../lib/litegraph/src/litegraph'
+
+export interface Point {
+  x: number
+  y: number
+}
+
+export interface Camera {
+  x: number
+  y: number
+  z: number // scale/zoom
+}
+
+export const useTransformState = () => {
+  // Reactive state mirroring LiteGraph's canvas transform
+  const camera = reactive<Camera>({
+    x: 0,
+    y: 0,
+    z: 1
+  })
+
+  // Computed transform string for CSS
+  const transformStyle = computed(() => ({
+    transform: `scale(${camera.z}) translate(${camera.x}px, ${camera.y}px)`,
+    transformOrigin: '0 0'
+  }))
+
+  /**
+   * Synchronizes Vue's reactive camera state with LiteGraph's canvas transform
+   *
+   * Called every frame via RAF to ensure Vue components stay aligned with canvas.
+   * This is the heart of the hybrid rendering system - it bridges the gap between
+   * LiteGraph's canvas transforms and Vue's reactive system.
+   *
+   * @param canvas - LiteGraph canvas instance with DragAndScale (ds) transform state
+   */
+  const syncWithCanvas = (canvas: LGraphCanvas) => {
+    if (!canvas || !canvas.ds) return
+
+    // Mirror LiteGraph's transform state to Vue's reactive state
+    // ds.offset = pan offset, ds.scale = zoom level
+    camera.x = canvas.ds.offset[0]
+    camera.y = canvas.ds.offset[1]
+    camera.z = canvas.ds.scale || 1
+  }
+
+  /**
+   * Converts canvas coordinates to screen coordinates
+   *
+   * Applies the same transform that LiteGraph uses for rendering.
+   * Essential for positioning Vue components to align with canvas elements.
+   *
+   * Formula: screen = canvas * scale + offset
+   *
+   * @param point - Point in canvas coordinate system
+   * @returns Point in screen coordinate system
+   */
+  const canvasToScreen = (point: Point): Point => {
+    return {
+      x: point.x * camera.z + camera.x,
+      y: point.y * camera.z + camera.y
+    }
+  }
+
+  /**
+   * Converts screen coordinates to canvas coordinates
+   *
+   * Inverse of canvasToScreen. Useful for hit testing and converting
+   * mouse events back to canvas space.
+   *
+   * Formula: canvas = (screen - offset) / scale
+   *
+   * @param point - Point in screen coordinate system
+   * @returns Point in canvas coordinate system
+   */
+  const screenToCanvas = (point: Point): Point => {
+    return {
+      x: (point.x - camera.x) / camera.z,
+      y: (point.y - camera.y) / camera.z
+    }
+  }
+
+  // Get node's screen bounds for culling
+  const getNodeScreenBounds = (
+    pos: ArrayLike<number>,
+    size: ArrayLike<number>
+  ): DOMRect => {
+    const topLeft = canvasToScreen({ x: pos[0], y: pos[1] })
+    const width = size[0] * camera.z
+    const height = size[1] * camera.z
+
+    return new DOMRect(topLeft.x, topLeft.y, width, height)
+  }
+
+  // Helper: Calculate zoom-adjusted margin for viewport culling
+  const calculateAdjustedMargin = (baseMargin: number): number => {
+    if (camera.z < 0.1) return Math.min(baseMargin * 5, 2.0)
+    if (camera.z > 3.0) return Math.max(baseMargin * 0.5, 0.05)
+    return baseMargin
+  }
+
+  // Helper: Check if node is too small to be visible at current zoom
+  const isNodeTooSmall = (nodeSize: ArrayLike<number>): boolean => {
+    const nodeScreenSize = Math.max(nodeSize[0], nodeSize[1]) * camera.z
+    return nodeScreenSize < 4
+  }
+
+  // Helper: Calculate expanded viewport bounds with margin
+  const getExpandedViewportBounds = (
+    viewport: { width: number; height: number },
+    margin: number
+  ) => {
+    const marginX = viewport.width * margin
+    const marginY = viewport.height * margin
+    return {
+      left: -marginX,
+      right: viewport.width + marginX,
+      top: -marginY,
+      bottom: viewport.height + marginY
+    }
+  }
+
+  // Helper: Test if node intersects with viewport bounds
+  const testViewportIntersection = (
+    screenPos: { x: number; y: number },
+    nodeSize: ArrayLike<number>,
+    bounds: { left: number; right: number; top: number; bottom: number }
+  ): boolean => {
+    const nodeRight = screenPos.x + nodeSize[0] * camera.z
+    const nodeBottom = screenPos.y + nodeSize[1] * camera.z
+
+    return !(
+      nodeRight < bounds.left ||
+      screenPos.x > bounds.right ||
+      nodeBottom < bounds.top ||
+      screenPos.y > bounds.bottom
+    )
+  }
+
+  // Check if node is within viewport with frustum and size-based culling
+  const isNodeInViewport = (
+    nodePos: ArrayLike<number>,
+    nodeSize: ArrayLike<number>,
+    viewport: { width: number; height: number },
+    margin: number = 0.2
+  ): boolean => {
+    // Early exit for tiny nodes
+    if (isNodeTooSmall(nodeSize)) return false
+
+    const screenPos = canvasToScreen({ x: nodePos[0], y: nodePos[1] })
+    const adjustedMargin = calculateAdjustedMargin(margin)
+    const bounds = getExpandedViewportBounds(viewport, adjustedMargin)
+
+    return testViewportIntersection(screenPos, nodeSize, bounds)
+  }
+
+  // Get viewport bounds in canvas coordinates (for spatial index queries)
+  const getViewportBounds = (
+    viewport: { width: number; height: number },
+    margin: number = 0.2
+  ) => {
+    const marginX = viewport.width * margin
+    const marginY = viewport.height * margin
+
+    const topLeft = screenToCanvas({ x: -marginX, y: -marginY })
+    const bottomRight = screenToCanvas({
+      x: viewport.width + marginX,
+      y: viewport.height + marginY
+    })
+
+    return {
+      x: topLeft.x,
+      y: topLeft.y,
+      width: bottomRight.x - topLeft.x,
+      height: bottomRight.y - topLeft.y
+    }
+  }
+
+  return {
+    camera: readonly(camera),
+    transformStyle,
+    syncWithCanvas,
+    canvasToScreen,
+    screenToCanvas,
+    getNodeScreenBounds,
+    isNodeInViewport,
+    getViewportBounds
+  }
+}
diff --git a/src/composables/graph/useCanvasTransformSync.ts b/src/composables/graph/useCanvasTransformSync.ts
new file mode 100644
index 0000000000..3e382492b1
--- /dev/null
+++ b/src/composables/graph/useCanvasTransformSync.ts
@@ -0,0 +1,115 @@
+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
+   * @default true
+   */
+  autoStart?: boolean
+}
+
+export interface CanvasTransformSyncCallbacks {
+  /**
+   * Called when sync starts
+   */
+  onStart?: () => void
+  /**
+   * Called after each sync update with timing information
+   */
+  onUpdate?: (duration: number) => void
+  /**
+   * Called when sync stops
+   */
+  onStop?: () => void
+}
+
+/**
+ * Manages requestAnimationFrame-based synchronization with LiteGraph canvas transforms.
+ *
+ * This composable provides a clean way to sync Vue transform state with LiteGraph canvas
+ * on every frame. It handles RAF lifecycle management, provides performance timing,
+ * and ensures proper cleanup.
+ *
+ * The sync function typically reads canvas.ds (draw state) properties like offset and scale
+ * to keep Vue components aligned with the canvas coordinate system.
+ *
+ * @example
+ * ```ts
+ * const { isActive, startSync, stopSync } = useCanvasTransformSync(
+ *   canvas,
+ *   (canvas) => syncWithCanvas(canvas),
+ *   {
+ *     onStart: () => emit('rafStatusChange', true),
+ *     onUpdate: (time) => emit('transformUpdate', time),
+ *     onStop: () => emit('rafStatusChange', false)
+ *   }
+ * )
+ * ```
+ */
+export function useCanvasTransformSync(
+  canvas: LGraphCanvas | undefined | null,
+  syncFn: (canvas: LGraphCanvas) => void,
+  callbacks: CanvasTransformSyncCallbacks = {},
+  options: CanvasTransformSyncOptions = {}
+) {
+  const { autoStart = true } = options
+  const { onStart, onUpdate, onStop } = callbacks
+
+  const isActive = ref(false)
+  let rafId: number | null = null
+
+  const startSync = () => {
+    if (isActive.value || !canvas) return
+
+    isActive.value = true
+    onStart?.()
+
+    const sync = () => {
+      if (!isActive.value || !canvas) return
+
+      try {
+        const startTime = performance.now()
+        syncFn(canvas)
+        const endTime = performance.now()
+
+        onUpdate?.(endTime - startTime)
+      } catch (error) {
+        console.warn('Canvas transform sync error:', error)
+      }
+
+      rafId = requestAnimationFrame(sync)
+    }
+
+    sync()
+  }
+
+  const stopSync = () => {
+    if (!isActive.value) return
+
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId)
+      rafId = null
+    }
+
+    isActive.value = false
+    onStop?.()
+  }
+
+  // Auto-start if canvas is available and autoStart is enabled
+  if (autoStart && canvas) {
+    startSync()
+  }
+
+  // Clean up on unmount
+  onUnmounted(() => {
+    stopSync()
+  })
+
+  return {
+    isActive,
+    startSync,
+    stopSync
+  }
+}
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
new file mode 100644
index 0000000000..d6304bdcca
--- /dev/null
+++ b/src/composables/graph/useGraphNodeManager.ts
@@ -0,0 +1,779 @@
+/**
+ * Vue node lifecycle management for LiteGraph integration
+ * Provides event-driven reactivity with performance optimizations
+ */
+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 {
+  visible: boolean
+  dirty: boolean
+  lastUpdate: number
+  culled: boolean
+}
+
+export interface NodeMetadata {
+  lastRenderTime: number
+  cachedBounds: DOMRect | null
+  lodLevel: 'high' | 'medium' | 'low'
+  spatialIndex?: QuadTree<string>
+}
+
+export interface PerformanceMetrics {
+  fps: number
+  frameTime: number
+  updateTime: number
+  nodeCount: number
+  culledCount: number
+  callbackUpdateCount: number
+  rafUpdateCount: number
+  adaptiveQuality: boolean
+}
+
+export interface SafeWidgetData {
+  name: string
+  type: string
+  value: WidgetValue
+  options?: Record<string, unknown>
+  callback?: ((value: unknown) => void) | undefined
+}
+
+export interface VueNodeData {
+  id: string
+  title: string
+  type: string
+  mode: number
+  selected: boolean
+  executing: boolean
+  widgets?: SafeWidgetData[]
+  inputs?: unknown[]
+  outputs?: unknown[]
+  flags?: {
+    collapsed?: boolean
+  }
+}
+
+export interface SpatialMetrics {
+  queryTime: number
+  nodesInIndex: number
+}
+
+export interface GraphNodeManager {
+  // Reactive state - safe data extracted from LiteGraph nodes
+  vueNodeData: ReadonlyMap<string, VueNodeData>
+  nodeState: ReadonlyMap<string, NodeState>
+  nodePositions: ReadonlyMap<string, { x: number; y: number }>
+  nodeSizes: ReadonlyMap<string, { width: number; height: number }>
+
+  // Access to original LiteGraph nodes (non-reactive)
+  getNode(id: string): LGraphNode | undefined
+
+  // Lifecycle methods
+  setupEventListeners(): () => void
+  cleanup(): void
+
+  // Update methods
+  scheduleUpdate(
+    nodeId?: string,
+    priority?: 'critical' | 'normal' | 'low'
+  ): void
+  forceSync(): void
+  detectChangesInRAF(): void
+
+  // Spatial queries
+  getVisibleNodeIds(viewportBounds: Bounds): Set<string>
+
+  // Performance
+  performanceMetrics: PerformanceMetrics
+  spatialMetrics: SpatialMetrics
+
+  // Debug
+  getSpatialIndexDebugInfo(): SpatialIndexDebugInfo | null
+}
+
+export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
+  // Safe reactive data extracted from LiteGraph nodes
+  const vueNodeData = reactive(new Map<string, VueNodeData>())
+  const nodeState = reactive(new Map<string, NodeState>())
+  const nodePositions = reactive(new Map<string, { x: number; y: number }>())
+  const nodeSizes = reactive(
+    new Map<string, { width: number; height: number }>()
+  )
+
+  // Non-reactive storage for original LiteGraph nodes
+  const nodeRefs = new Map<string, LGraphNode>()
+
+  // WeakMap for heavy data that auto-GCs when nodes are removed
+  const nodeMetadata = new WeakMap<LGraphNode, NodeMetadata>()
+
+  // Performance tracking
+  const performanceMetrics = reactive<PerformanceMetrics>({
+    fps: 0,
+    frameTime: 0,
+    updateTime: 0,
+    nodeCount: 0,
+    culledCount: 0,
+    callbackUpdateCount: 0,
+    rafUpdateCount: 0,
+    adaptiveQuality: false
+  })
+
+  // Spatial indexing using QuadTree
+  const spatialIndex = new QuadTree<string>(
+    { x: -10000, y: -10000, width: 20000, height: 20000 },
+    { maxDepth: 6, maxItemsPerNode: 4 }
+  )
+  let lastSpatialQueryTime = 0
+
+  // Spatial metrics
+  const spatialMetrics = reactive<SpatialMetrics>({
+    queryTime: 0,
+    nodesInIndex: 0
+  })
+
+  // Update batching
+  const pendingUpdates = new Set<string>()
+  const criticalUpdates = new Set<string>()
+  const lowPriorityUpdates = new Set<string>()
+  let updateScheduled = false
+  let batchTimeoutId: number | null = null
+
+  // Change detection state
+  const lastNodesSnapshot = new Map<
+    string,
+    { pos: [number, number]; size: [number, number] }
+  >()
+
+  const attachMetadata = (node: LGraphNode) => {
+    nodeMetadata.set(node, {
+      lastRenderTime: performance.now(),
+      cachedBounds: null,
+      lodLevel: 'high',
+      spatialIndex: undefined
+    })
+  }
+
+  // Extract safe data from LiteGraph node for Vue consumption
+  const extractVueNodeData = (node: LGraphNode): VueNodeData => {
+    // Extract safe widget data
+    const safeWidgets = node.widgets?.map((widget) => {
+      try {
+        // TODO: Use widget.getReactiveData() once TypeScript types are updated
+        let value = widget.value
+
+        // For combo widgets, if value is undefined, use the first option as default
+        if (
+          value === undefined &&
+          widget.type === 'combo' &&
+          widget.options?.values &&
+          Array.isArray(widget.options.values) &&
+          widget.options.values.length > 0
+        ) {
+          value = widget.options.values[0]
+        }
+
+        return {
+          name: widget.name,
+          type: widget.type,
+          value: value,
+          options: widget.options ? { ...widget.options } : undefined,
+          callback: widget.callback
+        }
+      } catch (error) {
+        return {
+          name: widget.name || 'unknown',
+          type: widget.type || 'text',
+          value: undefined, // Already a valid WidgetValue
+          options: undefined,
+          callback: undefined
+        }
+      }
+    })
+
+    return {
+      id: String(node.id),
+      title: node.title || 'Untitled',
+      type: node.type || 'Unknown',
+      mode: node.mode || 0,
+      selected: node.selected || false,
+      executing: false, // Will be updated separately based on execution state
+      widgets: safeWidgets,
+      inputs: node.inputs ? [...node.inputs] : undefined,
+      outputs: node.outputs ? [...node.outputs] : undefined,
+      flags: node.flags ? { ...node.flags } : undefined
+    }
+  }
+
+  // Get access to original LiteGraph node (non-reactive)
+  const getNode = (id: string): LGraphNode | undefined => {
+    return nodeRefs.get(id)
+  }
+
+  /**
+   * Validates that a value is a valid WidgetValue type
+   */
+  const validateWidgetValue = (value: unknown): WidgetValue => {
+    if (value === null || value === undefined || value === void 0) {
+      return undefined
+    }
+    if (
+      typeof value === 'string' ||
+      typeof value === 'number' ||
+      typeof value === 'boolean'
+    ) {
+      return value
+    }
+    if (typeof value === 'object') {
+      // Check if it's a File array
+      if (Array.isArray(value) && value.every((item) => item instanceof File)) {
+        return value as File[]
+      }
+      // Otherwise it's a generic object
+      return value as object
+    }
+    // If none of the above, return undefined
+    console.warn(`Invalid widget value type: ${typeof value}`, value)
+    return undefined
+  }
+
+  /**
+   * Updates Vue state when widget values change
+   */
+  const updateVueWidgetState = (
+    nodeId: string,
+    widgetName: string,
+    value: unknown
+  ): void => {
+    try {
+      const currentData = vueNodeData.get(nodeId)
+      if (!currentData?.widgets) return
+
+      const updatedWidgets = currentData.widgets.map((w) =>
+        w.name === widgetName ? { ...w, value: validateWidgetValue(value) } : w
+      )
+      vueNodeData.set(nodeId, {
+        ...currentData,
+        widgets: updatedWidgets
+      })
+      performanceMetrics.callbackUpdateCount++
+    } catch (error) {
+      // Ignore widget update errors to prevent cascade failures
+    }
+  }
+
+  /**
+   * Creates a wrapped callback for a widget that maintains LiteGraph/Vue sync
+   */
+  const createWrappedWidgetCallback = (
+    widget: { value?: unknown; name: string }, // LiteGraph widget with minimal typing
+    originalCallback: ((value: unknown) => void) | undefined,
+    nodeId: string
+  ) => {
+    let updateInProgress = false
+
+    return (value: unknown) => {
+      if (updateInProgress) return
+      updateInProgress = true
+
+      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
+
+        // 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
+      }
+    }
+  }
+
+  /**
+   * Sets up widget callbacks for a node - now with reduced nesting
+   */
+  const setupNodeWidgetCallbacks = (node: LGraphNode) => {
+    if (!node.widgets) return
+
+    const nodeId = String(node.id)
+
+    node.widgets.forEach((widget) => {
+      const originalCallback = widget.callback
+      widget.callback = createWrappedWidgetCallback(
+        widget,
+        originalCallback,
+        nodeId
+      )
+    })
+  }
+
+  // Uncomment when needed for future features
+  // const getNodeMetadata = (node: LGraphNode): NodeMetadata => {
+  //   let metadata = nodeMetadata.get(node)
+  //   if (!metadata) {
+  //     attachMetadata(node)
+  //     metadata = nodeMetadata.get(node)!
+  //   }
+  //   return metadata
+  // }
+
+  const scheduleUpdate = (
+    nodeId?: string,
+    priority: 'critical' | 'normal' | 'low' = 'normal'
+  ) => {
+    if (nodeId) {
+      const state = nodeState.get(nodeId)
+      if (state) state.dirty = true
+
+      // Priority queuing
+      if (priority === 'critical') {
+        criticalUpdates.add(nodeId)
+        flush() // Immediate flush for critical updates
+        return
+      } else if (priority === 'low') {
+        lowPriorityUpdates.add(nodeId)
+      } else {
+        pendingUpdates.add(nodeId)
+      }
+    }
+
+    if (!updateScheduled) {
+      updateScheduled = true
+
+      // Adaptive batching strategy
+      if (pendingUpdates.size > 10) {
+        // Many updates - batch in nextTick
+        void nextTick(() => flush())
+      } else {
+        // Few updates - small delay for more batching
+        batchTimeoutId = window.setTimeout(() => flush(), 4)
+      }
+    }
+  }
+
+  const flush = () => {
+    const startTime = performance.now()
+
+    if (batchTimeoutId !== null) {
+      clearTimeout(batchTimeoutId)
+      batchTimeoutId = null
+    }
+
+    // Clear all pending updates
+    criticalUpdates.clear()
+    pendingUpdates.clear()
+    lowPriorityUpdates.clear()
+    updateScheduled = false
+
+    // Sync with graph state
+    syncWithGraph()
+
+    const endTime = performance.now()
+    performanceMetrics.updateTime = endTime - startTime
+  }
+
+  const syncWithGraph = () => {
+    if (!graph?._nodes) return
+
+    const currentNodes = new Set(graph._nodes.map((n) => String(n.id)))
+
+    // Remove deleted nodes
+    for (const id of Array.from(vueNodeData.keys())) {
+      if (!currentNodes.has(id)) {
+        nodeRefs.delete(id)
+        vueNodeData.delete(id)
+        nodeState.delete(id)
+        nodePositions.delete(id)
+        nodeSizes.delete(id)
+        lastNodesSnapshot.delete(id)
+        spatialIndex.remove(id)
+      }
+    }
+
+    // Add/update existing nodes
+    graph._nodes.forEach((node) => {
+      const id = String(node.id)
+
+      // Store non-reactive reference
+      nodeRefs.set(id, node)
+
+      // Set up widget callbacks BEFORE extracting data (critical order)
+      setupNodeWidgetCallbacks(node)
+
+      // Extract and store safe data for Vue
+      vueNodeData.set(id, extractVueNodeData(node))
+
+      if (!nodeState.has(id)) {
+        nodeState.set(id, {
+          visible: true,
+          dirty: false,
+          lastUpdate: performance.now(),
+          culled: false
+        })
+        nodePositions.set(id, { x: node.pos[0], y: node.pos[1] })
+        nodeSizes.set(id, { width: node.size[0], height: node.size[1] })
+        attachMetadata(node)
+
+        // Add to spatial index
+        const bounds: Bounds = {
+          x: node.pos[0],
+          y: node.pos[1],
+          width: node.size[0],
+          height: node.size[1]
+        }
+        spatialIndex.insert(id, bounds, id)
+      }
+    })
+
+    // Update performance metrics
+    performanceMetrics.nodeCount = vueNodeData.size
+    performanceMetrics.culledCount = Array.from(nodeState.values()).filter(
+      (s) => s.culled
+    ).length
+  }
+
+  // Most performant: Direct position sync without re-setting entire node
+  // Query visible nodes using QuadTree spatial index
+  const getVisibleNodeIds = (viewportBounds: Bounds): Set<string> => {
+    const startTime = performance.now()
+
+    // Use QuadTree for fast spatial query
+    const results: string[] = spatialIndex.query(viewportBounds)
+    const visibleIds = new Set(results)
+
+    lastSpatialQueryTime = performance.now() - startTime
+    spatialMetrics.queryTime = lastSpatialQueryTime
+
+    return visibleIds
+  }
+
+  /**
+   * Detects position changes for a single node and updates reactive state
+   */
+  const detectPositionChanges = (node: LGraphNode, id: string): boolean => {
+    const currentPos = nodePositions.get(id)
+
+    if (
+      !currentPos ||
+      currentPos.x !== node.pos[0] ||
+      currentPos.y !== node.pos[1]
+    ) {
+      nodePositions.set(id, { x: node.pos[0], y: node.pos[1] })
+      return true
+    }
+    return false
+  }
+
+  /**
+   * Detects size changes for a single node and updates reactive state
+   */
+  const detectSizeChanges = (node: LGraphNode, id: string): boolean => {
+    const currentSize = nodeSizes.get(id)
+
+    if (
+      !currentSize ||
+      currentSize.width !== node.size[0] ||
+      currentSize.height !== node.size[1]
+    ) {
+      nodeSizes.set(id, { width: node.size[0], height: node.size[1] })
+      return true
+    }
+    return false
+  }
+
+  /**
+   * Updates spatial index for a node if bounds changed
+   */
+  const updateSpatialIndex = (node: LGraphNode, id: string): void => {
+    const bounds: Bounds = {
+      x: node.pos[0],
+      y: node.pos[1],
+      width: node.size[0],
+      height: node.size[1]
+    }
+    spatialIndex.update(id, bounds)
+  }
+
+  /**
+   * Updates performance metrics after change detection
+   */
+  const updatePerformanceMetrics = (
+    startTime: number,
+    positionUpdates: number,
+    sizeUpdates: number
+  ): void => {
+    const endTime = performance.now()
+    performanceMetrics.updateTime = endTime - startTime
+    performanceMetrics.nodeCount = vueNodeData.size
+    performanceMetrics.culledCount = Array.from(nodeState.values()).filter(
+      (state) => state.culled
+    ).length
+    spatialMetrics.nodesInIndex = spatialIndex.size
+
+    if (positionUpdates > 0 || sizeUpdates > 0) {
+      performanceMetrics.rafUpdateCount++
+    }
+  }
+
+  /**
+   * Main RAF change detection function - now simplified with extracted helpers
+   */
+  const detectChangesInRAF = () => {
+    const startTime = performance.now()
+
+    if (!graph?._nodes) return
+
+    let positionUpdates = 0
+    let sizeUpdates = 0
+
+    // Process each node for changes
+    for (const node of graph._nodes) {
+      const id = String(node.id)
+
+      const posChanged = detectPositionChanges(node, id)
+      const sizeChanged = detectSizeChanges(node, id)
+
+      if (posChanged) positionUpdates++
+      if (sizeChanged) sizeUpdates++
+
+      // Update spatial index if geometry changed
+      if (posChanged || sizeChanged) {
+        updateSpatialIndex(node, id)
+      }
+    }
+
+    updatePerformanceMetrics(startTime, positionUpdates, sizeUpdates)
+  }
+
+  /**
+   * Handles node addition to the graph - sets up Vue state and spatial indexing
+   */
+  const handleNodeAdded = (
+    node: LGraphNode,
+    originalCallback?: (node: LGraphNode) => void
+  ) => {
+    const id = String(node.id)
+
+    // Store non-reactive reference to original node
+    nodeRefs.set(id, node)
+
+    // Set up widget callbacks BEFORE extracting data (critical order)
+    setupNodeWidgetCallbacks(node)
+
+    // Extract safe data for Vue (now with proper callbacks)
+    vueNodeData.set(id, extractVueNodeData(node))
+
+    // Set up reactive tracking state
+    nodeState.set(id, {
+      visible: true,
+      dirty: false,
+      lastUpdate: performance.now(),
+      culled: false
+    })
+    nodePositions.set(id, { x: node.pos[0], y: node.pos[1] })
+    nodeSizes.set(id, { width: node.size[0], height: node.size[1] })
+    attachMetadata(node)
+
+    // Add to spatial index for viewport culling
+    const bounds: Bounds = {
+      x: node.pos[0],
+      y: node.pos[1],
+      width: node.size[0],
+      height: node.size[1]
+    }
+    spatialIndex.insert(id, bounds, id)
+
+    // Call original callback if provided
+    if (originalCallback) {
+      void originalCallback(node)
+    }
+  }
+
+  /**
+   * Handles node removal from the graph - cleans up all references
+   */
+  const handleNodeRemoved = (
+    node: LGraphNode,
+    originalCallback?: (node: LGraphNode) => void
+  ) => {
+    const id = String(node.id)
+
+    // Remove from spatial index
+    spatialIndex.remove(id)
+
+    // Clean up all tracking references
+    nodeRefs.delete(id)
+    vueNodeData.delete(id)
+    nodeState.delete(id)
+    nodePositions.delete(id)
+    nodeSizes.delete(id)
+    lastNodesSnapshot.delete(id)
+
+    // Call original callback if provided
+    if (originalCallback) {
+      originalCallback(node)
+    }
+  }
+
+  /**
+   * Creates cleanup function for event listeners and state
+   */
+  const createCleanupFunction = (
+    originalOnNodeAdded: ((node: LGraphNode) => void) | undefined,
+    originalOnNodeRemoved: ((node: LGraphNode) => void) | undefined,
+    originalOnTrigger: ((action: string, param: unknown) => void) | undefined
+  ) => {
+    return () => {
+      // Restore original callbacks
+      graph.onNodeAdded = originalOnNodeAdded || undefined
+      graph.onNodeRemoved = originalOnNodeRemoved || undefined
+      graph.onTrigger = originalOnTrigger || undefined
+
+      // Clear pending updates
+      if (batchTimeoutId !== null) {
+        clearTimeout(batchTimeoutId)
+        batchTimeoutId = null
+      }
+
+      // Clear all state maps
+      nodeRefs.clear()
+      vueNodeData.clear()
+      nodeState.clear()
+      nodePositions.clear()
+      nodeSizes.clear()
+      lastNodesSnapshot.clear()
+      pendingUpdates.clear()
+      criticalUpdates.clear()
+      lowPriorityUpdates.clear()
+      spatialIndex.clear()
+    }
+  }
+
+  /**
+   * Sets up event listeners - now simplified with extracted handlers
+   */
+  const setupEventListeners = (): (() => void) => {
+    // Store original callbacks
+    const originalOnNodeAdded = graph.onNodeAdded
+    const originalOnNodeRemoved = graph.onNodeRemoved
+    const originalOnTrigger = graph.onTrigger
+
+    // Set up graph event handlers
+    graph.onNodeAdded = (node: LGraphNode) => {
+      handleNodeAdded(node, originalOnNodeAdded)
+    }
+
+    graph.onNodeRemoved = (node: LGraphNode) => {
+      handleNodeRemoved(node, originalOnNodeRemoved)
+    }
+
+    // Listen for property change events from instrumented nodes
+    graph.onTrigger = (action: string, param: unknown) => {
+      if (
+        action === 'node:property:changed' &&
+        param &&
+        typeof param === 'object'
+      ) {
+        const event = param as {
+          nodeId: string | number
+          property: string
+          oldValue: unknown
+          newValue: unknown
+        }
+
+        const nodeId = String(event.nodeId)
+        const currentData = vueNodeData.get(nodeId)
+
+        if (currentData) {
+          if (event.property === 'title') {
+            vueNodeData.set(nodeId, {
+              ...currentData,
+              title: String(event.newValue)
+            })
+          } else if (event.property === 'flags.collapsed') {
+            vueNodeData.set(nodeId, {
+              ...currentData,
+              flags: {
+                ...currentData.flags,
+                collapsed: Boolean(event.newValue)
+              }
+            })
+          }
+        }
+      }
+
+      // Call original trigger handler if it exists
+      if (originalOnTrigger) {
+        originalOnTrigger(action, param)
+      }
+    }
+
+    // Initialize state
+    syncWithGraph()
+
+    // Return cleanup function
+    return createCleanupFunction(
+      originalOnNodeAdded || undefined,
+      originalOnNodeRemoved || undefined,
+      originalOnTrigger || undefined
+    )
+  }
+
+  // Set up event listeners immediately
+  const cleanup = setupEventListeners()
+
+  // Process any existing nodes after event listeners are set up
+  if (graph._nodes && graph._nodes.length > 0) {
+    graph._nodes.forEach((node: LGraphNode) => {
+      if (graph.onNodeAdded) {
+        graph.onNodeAdded(node)
+      }
+    })
+  }
+
+  return {
+    vueNodeData: readonly(vueNodeData) as ReadonlyMap<string, VueNodeData>,
+    nodeState: readonly(nodeState) as ReadonlyMap<string, NodeState>,
+    nodePositions: readonly(nodePositions) as ReadonlyMap<
+      string,
+      { x: number; y: number }
+    >,
+    nodeSizes: readonly(nodeSizes) as ReadonlyMap<
+      string,
+      { width: number; height: number }
+    >,
+    getNode,
+    setupEventListeners,
+    cleanup,
+    scheduleUpdate,
+    forceSync: syncWithGraph,
+    detectChangesInRAF,
+    getVisibleNodeIds,
+    performanceMetrics,
+    spatialMetrics: readonly(spatialMetrics),
+    getSpatialIndexDebugInfo: () => spatialIndex.getDebugInfo()
+  }
+}
diff --git a/src/composables/graph/useLOD.ts b/src/composables/graph/useLOD.ts
new file mode 100644
index 0000000000..9d07e37ca3
--- /dev/null
+++ b/src/composables/graph/useLOD.ts
@@ -0,0 +1,186 @@
+/**
+ * Level of Detail (LOD) composable for Vue-based node rendering
+ *
+ * Provides dynamic quality adjustment based on zoom level to maintain
+ * performance with large node graphs. Uses zoom thresholds to determine
+ * how much detail to render for each node component.
+ *
+ * ## LOD Levels
+ *
+ * - **FULL** (zoom > 0.8): Complete rendering with all widgets, slots, and content
+ * - **REDUCED** (0.4 < zoom <= 0.8): Essential widgets only, simplified slots
+ * - **MINIMAL** (zoom <= 0.4): Title only, no widgets or slots
+ *
+ * ## Performance Benefits
+ *
+ * - Reduces DOM element count by up to 80% at low zoom levels
+ * - Minimizes layout calculations and paint operations
+ * - Enables smooth performance with 1000+ nodes
+ * - Maintains visual fidelity when detail is actually visible
+ *
+ * @example
+ * ```typescript
+ * const { lodLevel, shouldRenderWidgets, shouldRenderSlots } = useLOD(zoomRef)
+ *
+ * // In template
+ * <NodeWidgets v-if="shouldRenderWidgets" />
+ * <NodeSlots v-if="shouldRenderSlots" />
+ * ```
+ */
+import { type Ref, computed, readonly } from 'vue'
+
+export enum LODLevel {
+  MINIMAL = 'minimal', // zoom <= 0.4
+  REDUCED = 'reduced', // 0.4 < zoom <= 0.8
+  FULL = 'full' // zoom > 0.8
+}
+
+export interface LODConfig {
+  renderWidgets: boolean
+  renderSlots: boolean
+  renderContent: boolean
+  renderSlotLabels: boolean
+  renderWidgetLabels: boolean
+  cssClass: string
+}
+
+// LOD configuration for each level
+const LOD_CONFIGS: Record<LODLevel, LODConfig> = {
+  [LODLevel.FULL]: {
+    renderWidgets: true,
+    renderSlots: true,
+    renderContent: true,
+    renderSlotLabels: true,
+    renderWidgetLabels: true,
+    cssClass: 'lg-node--lod-full'
+  },
+  [LODLevel.REDUCED]: {
+    renderWidgets: true,
+    renderSlots: true,
+    renderContent: false,
+    renderSlotLabels: false,
+    renderWidgetLabels: false,
+    cssClass: 'lg-node--lod-reduced'
+  },
+  [LODLevel.MINIMAL]: {
+    renderWidgets: false,
+    renderSlots: false,
+    renderContent: false,
+    renderSlotLabels: false,
+    renderWidgetLabels: false,
+    cssClass: 'lg-node--lod-minimal'
+  }
+}
+
+/**
+ * Create LOD (Level of Detail) state based on zoom level
+ *
+ * @param zoomRef - Reactive reference to current zoom level (camera.z)
+ * @returns LOD state and configuration
+ */
+export function useLOD(zoomRef: Ref<number>) {
+  // Continuous LOD score (0-1) for smooth transitions
+  const lodScore = computed(() => {
+    const zoom = zoomRef.value
+    return Math.max(0, Math.min(1, zoom))
+  })
+
+  // Determine current LOD level based on zoom
+  const lodLevel = computed<LODLevel>(() => {
+    const zoom = zoomRef.value
+
+    if (zoom > 0.8) return LODLevel.FULL
+    if (zoom > 0.4) return LODLevel.REDUCED
+    return LODLevel.MINIMAL
+  })
+
+  // Get configuration for current LOD level
+  const lodConfig = computed<LODConfig>(() => LOD_CONFIGS[lodLevel.value])
+
+  // Convenience computed properties for common rendering decisions
+  const shouldRenderWidgets = computed(() => lodConfig.value.renderWidgets)
+  const shouldRenderSlots = computed(() => lodConfig.value.renderSlots)
+  const shouldRenderContent = computed(() => lodConfig.value.renderContent)
+  const shouldRenderSlotLabels = computed(
+    () => lodConfig.value.renderSlotLabels
+  )
+  const shouldRenderWidgetLabels = computed(
+    () => lodConfig.value.renderWidgetLabels
+  )
+
+  // CSS class for styling based on LOD level
+  const lodCssClass = computed(() => lodConfig.value.cssClass)
+
+  // Get essential widgets for reduced LOD (only interactive controls)
+  const getEssentialWidgets = (widgets: unknown[]): unknown[] => {
+    if (lodLevel.value === LODLevel.FULL) return widgets
+    if (lodLevel.value === LODLevel.MINIMAL) return []
+
+    // For reduced LOD, filter to essential widget types only
+    return widgets.filter((widget: any) => {
+      const type = widget?.type?.toLowerCase()
+      return [
+        'combo',
+        'select',
+        'toggle',
+        'boolean',
+        'slider',
+        'number'
+      ].includes(type)
+    })
+  }
+
+  // Performance metrics for debugging
+  const lodMetrics = computed(() => ({
+    level: lodLevel.value,
+    zoom: zoomRef.value,
+    widgetCount: shouldRenderWidgets.value ? 'full' : 'none',
+    slotCount: shouldRenderSlots.value ? 'full' : 'none'
+  }))
+
+  return {
+    // Core LOD state
+    lodLevel: readonly(lodLevel),
+    lodConfig: readonly(lodConfig),
+    lodScore: readonly(lodScore),
+
+    // Rendering decisions
+    shouldRenderWidgets,
+    shouldRenderSlots,
+    shouldRenderContent,
+    shouldRenderSlotLabels,
+    shouldRenderWidgetLabels,
+
+    // Styling
+    lodCssClass,
+
+    // Utilities
+    getEssentialWidgets,
+    lodMetrics
+  }
+}
+
+/**
+ * Get LOD level thresholds for configuration or debugging
+ */
+export const LOD_THRESHOLDS = {
+  FULL_THRESHOLD: 0.8,
+  REDUCED_THRESHOLD: 0.4,
+  MINIMAL_THRESHOLD: 0.0
+} as const
+
+/**
+ * Check if zoom level supports a specific feature
+ */
+export function supportsFeatureAtZoom(
+  zoom: number,
+  feature: keyof LODConfig
+): boolean {
+  const level =
+    zoom > 0.8
+      ? LODLevel.FULL
+      : zoom > 0.4
+        ? LODLevel.REDUCED
+        : LODLevel.MINIMAL
+  return LOD_CONFIGS[level][feature] as boolean
+}
diff --git a/src/composables/graph/useSpatialIndex.ts b/src/composables/graph/useSpatialIndex.ts
new file mode 100644
index 0000000000..95cd309d8a
--- /dev/null
+++ b/src/composables/graph/useSpatialIndex.ts
@@ -0,0 +1,212 @@
+/**
+ * Composable for spatial indexing of nodes using QuadTree
+ * Integrates with useGraphNodeManager for efficient viewport culling
+ */
+import { useDebounceFn } from '@vueuse/core'
+import { computed, reactive, ref } from 'vue'
+
+import { type Bounds, QuadTree } from '@/utils/spatial/QuadTree'
+
+export interface SpatialIndexOptions {
+  worldBounds?: Bounds
+  maxDepth?: number
+  maxItemsPerNode?: number
+  enableDebugVisualization?: boolean
+  updateDebounceMs?: number
+}
+
+interface SpatialMetrics {
+  queryTime: number
+  totalNodes: number
+  visibleNodes: number
+  treeDepth: number
+  rebuildCount: number
+}
+
+export const useSpatialIndex = (options: SpatialIndexOptions = {}) => {
+  // Default world bounds (can be expanded dynamically)
+  const defaultBounds: Bounds = {
+    x: -10000,
+    y: -10000,
+    width: 20000,
+    height: 20000
+  }
+
+  // QuadTree instance
+  const quadTree = ref<QuadTree<string> | null>(null)
+
+  // Performance metrics
+  const metrics = reactive<SpatialMetrics>({
+    queryTime: 0,
+    totalNodes: 0,
+    visibleNodes: 0,
+    treeDepth: 0,
+    rebuildCount: 0
+  })
+
+  // Debug visualization data (unused for now but may be used in future)
+  // const debugBounds = ref<Bounds[]>([])
+
+  // Initialize QuadTree
+  const initialize = (bounds: Bounds = defaultBounds) => {
+    quadTree.value = new QuadTree<string>(bounds, {
+      maxDepth: options.maxDepth ?? 6,
+      maxItemsPerNode: options.maxItemsPerNode ?? 4
+    })
+    metrics.rebuildCount++
+  }
+
+  // Add or update node in spatial index
+  const updateNode = (
+    nodeId: string,
+    position: { x: number; y: number },
+    size: { width: number; height: number }
+  ) => {
+    if (!quadTree.value) {
+      initialize()
+    }
+
+    const bounds: Bounds = {
+      x: position.x,
+      y: position.y,
+      width: size.width,
+      height: size.height
+    }
+
+    // Use insert instead of update - insert handles both new and existing nodes
+    quadTree.value!.insert(nodeId, bounds, nodeId)
+    metrics.totalNodes = quadTree.value!.size
+  }
+
+  // Batch update for multiple nodes
+  const batchUpdate = (
+    updates: Array<{
+      id: string
+      position: { x: number; y: number }
+      size: { width: number; height: number }
+    }>
+  ) => {
+    if (!quadTree.value) {
+      initialize()
+    }
+
+    for (const update of updates) {
+      const bounds: Bounds = {
+        x: update.position.x,
+        y: update.position.y,
+        width: update.size.width,
+        height: update.size.height
+      }
+      // Use insert instead of update - insert handles both new and existing nodes
+      quadTree.value!.insert(update.id, bounds, update.id)
+    }
+
+    metrics.totalNodes = quadTree.value!.size
+  }
+
+  // Remove node from spatial index
+  const removeNode = (nodeId: string) => {
+    if (!quadTree.value) return
+
+    quadTree.value.remove(nodeId)
+    metrics.totalNodes = quadTree.value.size
+  }
+
+  // Query nodes within viewport bounds
+  const queryViewport = (viewportBounds: Bounds): string[] => {
+    if (!quadTree.value) return []
+
+    const startTime = performance.now()
+    const nodeIds = quadTree.value.query(viewportBounds)
+    const queryTime = performance.now() - startTime
+
+    metrics.queryTime = queryTime
+    metrics.visibleNodes = nodeIds.length
+
+    return nodeIds
+  }
+
+  // Get nodes within a radius (for proximity queries)
+  const queryRadius = (
+    center: { x: number; y: number },
+    radius: number
+  ): string[] => {
+    if (!quadTree.value) return []
+
+    const bounds: Bounds = {
+      x: center.x - radius,
+      y: center.y - radius,
+      width: radius * 2,
+      height: radius * 2
+    }
+
+    return quadTree.value.query(bounds)
+  }
+
+  // Clear all nodes
+  const clear = () => {
+    if (!quadTree.value) return
+
+    quadTree.value.clear()
+    metrics.totalNodes = 0
+    metrics.visibleNodes = 0
+  }
+
+  // Rebuild tree (useful after major layout changes)
+  const rebuild = (
+    nodes: Map<
+      string,
+      {
+        position: { x: number; y: number }
+        size: { width: number; height: number }
+      }
+    >
+  ) => {
+    initialize()
+
+    const updates = Array.from(nodes.entries()).map(([id, data]) => ({
+      id,
+      position: data.position,
+      size: data.size
+    }))
+
+    batchUpdate(updates)
+  }
+
+  // Get debug visualization data
+  const getDebugVisualization = () => {
+    if (!quadTree.value || !options.enableDebugVisualization) return null
+
+    return quadTree.value.getDebugInfo()
+  }
+
+  // Debounced update for performance
+  const debouncedUpdateNode = useDebounceFn(
+    updateNode,
+    options.updateDebounceMs ?? 16
+  )
+
+  return {
+    // Core functions
+    initialize,
+    updateNode,
+    batchUpdate,
+    removeNode,
+    queryViewport,
+    queryRadius,
+    clear,
+    rebuild,
+
+    // Debounced version for high-frequency updates
+    debouncedUpdateNode,
+
+    // Metrics
+    metrics: computed(() => metrics),
+
+    // Debug
+    getDebugVisualization,
+
+    // Direct access to QuadTree (for advanced usage)
+    quadTree: computed(() => quadTree.value)
+  }
+}
diff --git a/src/composables/graph/useTransformSettling.ts b/src/composables/graph/useTransformSettling.ts
new file mode 100644
index 0000000000..669cfceaa2
--- /dev/null
+++ b/src/composables/graph/useTransformSettling.ts
@@ -0,0 +1,151 @@
+import { useDebounceFn, useEventListener, useThrottleFn } from '@vueuse/core'
+import { ref } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+
+export interface TransformSettlingOptions {
+  /**
+   * Delay in ms before transform is considered "settled" after last interaction
+   * @default 200
+   */
+  settleDelay?: number
+  /**
+   * Whether to track both zoom (wheel) and pan (pointer drag) interactions
+   * @default false
+   */
+  trackPan?: boolean
+  /**
+   * Throttle delay for high-frequency pointermove events (only used when trackPan is true)
+   * @default 16 (~60fps)
+   */
+  pointerMoveThrottle?: number
+  /**
+   * Whether to use passive event listeners (better performance but can't preventDefault)
+   * @default true
+   */
+  passive?: boolean
+}
+
+/**
+ * Tracks when canvas transforms (zoom/pan) are actively changing vs settled.
+ *
+ * This composable helps optimize rendering quality during transformations.
+ * When the user is actively zooming or panning, we can reduce rendering quality
+ * for better performance. Once the transform "settles" (stops changing), we can
+ * trigger high-quality re-rasterization.
+ *
+ * The settling concept prevents constant quality switching during interactions
+ * by waiting for a period of inactivity before considering the transform complete.
+ *
+ * Uses VueUse's useEventListener for automatic cleanup and useDebounceFn for
+ * efficient settle detection.
+ *
+ * @example
+ * ```ts
+ * const { isTransforming } = useTransformSettling(canvasRef, {
+ *   settleDelay: 200,
+ *   trackPan: true
+ * })
+ *
+ * // Use in CSS classes or rendering logic
+ * const cssClass = computed(() => ({
+ *   'low-quality': isTransforming.value,
+ *   'high-quality': !isTransforming.value
+ * }))
+ * ```
+ */
+export function useTransformSettling(
+  target: MaybeRefOrGetter<HTMLElement | null | undefined>,
+  options: TransformSettlingOptions = {}
+) {
+  const {
+    settleDelay = 200,
+    trackPan = false,
+    pointerMoveThrottle = 16,
+    passive = true
+  } = options
+
+  const isTransforming = ref(false)
+  let isPanning = false
+
+  /**
+   * Mark transform as active
+   */
+  const markTransformActive = () => {
+    isTransforming.value = true
+  }
+
+  /**
+   * Mark transform as settled (debounced)
+   */
+  const markTransformSettled = useDebounceFn(() => {
+    isTransforming.value = false
+  }, settleDelay)
+
+  /**
+   * Handle any transform event - mark active then queue settle
+   */
+  const handleTransformEvent = () => {
+    markTransformActive()
+    void markTransformSettled()
+  }
+
+  // Wheel handler
+  const handleWheel = () => {
+    handleTransformEvent()
+  }
+
+  // Pointer handlers for panning
+  const handlePointerDown = () => {
+    if (trackPan) {
+      isPanning = true
+      handleTransformEvent()
+    }
+  }
+
+  // Throttled pointer move handler for performance
+  const handlePointerMove = trackPan
+    ? useThrottleFn(() => {
+        if (isPanning) {
+          handleTransformEvent()
+        }
+      }, pointerMoveThrottle)
+    : undefined
+
+  const handlePointerEnd = () => {
+    if (trackPan) {
+      isPanning = false
+      // Don't immediately stop - let the debounced settle handle it
+    }
+  }
+
+  // Register event listeners with auto-cleanup
+  useEventListener(target, 'wheel', handleWheel, {
+    capture: true,
+    passive
+  })
+
+  if (trackPan) {
+    useEventListener(target, 'pointerdown', handlePointerDown, {
+      capture: true
+    })
+
+    if (handlePointerMove) {
+      useEventListener(target, 'pointermove', handlePointerMove, {
+        capture: true,
+        passive
+      })
+    }
+
+    useEventListener(target, 'pointerup', handlePointerEnd, {
+      capture: true
+    })
+
+    useEventListener(target, 'pointercancel', handlePointerEnd, {
+      capture: true
+    })
+  }
+
+  return {
+    isTransforming
+  }
+}
diff --git a/src/composables/graph/useWidgetRenderer.ts b/src/composables/graph/useWidgetRenderer.ts
new file mode 100644
index 0000000000..762d9affa3
--- /dev/null
+++ b/src/composables/graph/useWidgetRenderer.ts
@@ -0,0 +1,117 @@
+/**
+ * Widget renderer composable for Vue node system
+ * Maps LiteGraph widget types to Vue components
+ */
+import {
+  WidgetType,
+  widgetTypeToComponent
+} from '@/components/graph/vueWidgets/widgetRegistry'
+
+/**
+ * Static mapping of LiteGraph widget types to Vue widget component names
+ * Moved outside function to prevent recreation on every call
+ */
+const TYPE_TO_ENUM_MAP: Record<string, string> = {
+  // Number inputs
+  number: WidgetType.NUMBER,
+  slider: WidgetType.SLIDER,
+  INT: WidgetType.INT,
+  FLOAT: WidgetType.FLOAT,
+
+  // Text inputs
+  text: WidgetType.STRING,
+  string: WidgetType.STRING,
+  STRING: WidgetType.STRING,
+
+  // Selection
+  combo: WidgetType.COMBO,
+  COMBO: WidgetType.COMBO,
+
+  // Boolean
+  toggle: WidgetType.TOGGLESWITCH,
+  boolean: WidgetType.BOOLEAN,
+  BOOLEAN: WidgetType.BOOLEAN,
+
+  // 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,
+
+  // Chart widget
+  chart: WidgetType.CHART,
+  CHART: WidgetType.CHART
+} as const
+
+/**
+ * Pre-computed widget support map for O(1) lookups
+ * Maps widget type directly to boolean for fast shouldRenderAsVue checks
+ */
+const WIDGET_SUPPORT_MAP = new Map(
+  Object.entries(TYPE_TO_ENUM_MAP).map(([type, enumValue]) => [
+    type,
+    widgetTypeToComponent[enumValue] !== undefined
+  ])
+)
+
+export const ESSENTIAL_WIDGET_TYPES = new Set([
+  'combo',
+  'COMBO',
+  'select',
+  'toggle',
+  'boolean',
+  'BOOLEAN',
+  'slider',
+  'number',
+  'INT',
+  'FLOAT'
+])
+
+export const useWidgetRenderer = () => {
+  const getWidgetComponent = (widgetType: string): string => {
+    const enumKey = TYPE_TO_ENUM_MAP[widgetType]
+
+    if (enumKey && widgetTypeToComponent[enumKey]) {
+      return enumKey
+    }
+
+    return WidgetType.STRING
+  }
+
+  const shouldRenderAsVue = (widget: {
+    type?: string
+    options?: Record<string, unknown>
+  }): boolean => {
+    if (widget.options?.canvasOnly) return false
+    if (!widget.type) return false
+
+    // Check if widget type is explicitly supported
+    const isSupported = WIDGET_SUPPORT_MAP.get(widget.type)
+    if (isSupported !== undefined) return isSupported
+
+    // Fallback: unknown types are rendered as STRING widget
+    return widgetTypeToComponent[WidgetType.STRING] !== undefined
+  }
+
+  return {
+    getWidgetComponent,
+    shouldRenderAsVue
+  }
+}
diff --git a/src/composables/graph/useWidgetValue.ts b/src/composables/graph/useWidgetValue.ts
new file mode 100644
index 0000000000..1cf2fb3530
--- /dev/null
+++ b/src/composables/graph/useWidgetValue.ts
@@ -0,0 +1,155 @@
+/**
+ * Composable for managing widget value synchronization between Vue and LiteGraph
+ * Provides consistent pattern for immediate UI updates and LiteGraph callbacks
+ */
+import { type Ref, ref, watch } from 'vue'
+
+import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
+
+export interface UseWidgetValueOptions<
+  T extends WidgetValue = WidgetValue,
+  U = T
+> {
+  /** The widget configuration from LiteGraph */
+  widget: SimplifiedWidget<T>
+  /** The current value from parent component */
+  modelValue: T
+  /** Default value if modelValue is null/undefined */
+  defaultValue: T
+  /** Emit function from component setup */
+  emit: (event: 'update:modelValue', value: T) => void
+  /** Optional value transformer before sending to LiteGraph */
+  transform?: (value: U) => T
+}
+
+export interface UseWidgetValueReturn<
+  T extends WidgetValue = WidgetValue,
+  U = T
+> {
+  /** Local value for immediate UI updates */
+  localValue: Ref<T>
+  /** Handler for user interactions */
+  onChange: (newValue: U) => void
+}
+
+/**
+ * Manages widget value synchronization with LiteGraph
+ *
+ * @example
+ * ```vue
+ * const { localValue, onChange } = useWidgetValue({
+ *   widget: props.widget,
+ *   modelValue: props.modelValue,
+ *   defaultValue: ''
+ * })
+ * ```
+ */
+export function useWidgetValue<T extends WidgetValue = WidgetValue, U = T>({
+  widget,
+  modelValue,
+  defaultValue,
+  emit,
+  transform
+}: UseWidgetValueOptions<T, U>): UseWidgetValueReturn<T, U> {
+  // Local value for immediate UI updates
+  const localValue = ref<T>(modelValue ?? defaultValue)
+
+  // Handle user changes
+  const onChange = (newValue: U) => {
+    // Handle different PrimeVue component signatures
+    let processedValue: T
+    if (transform) {
+      processedValue = transform(newValue)
+    } else {
+      // Ensure type safety - only cast when types are compatible
+      if (
+        typeof newValue === typeof defaultValue ||
+        newValue === null ||
+        newValue === undefined
+      ) {
+        processedValue = (newValue ?? defaultValue) as T
+      } else {
+        console.warn(
+          `useWidgetValue: Type mismatch for widget ${widget.name}. Expected ${typeof defaultValue}, got ${typeof newValue}`
+        )
+        processedValue = defaultValue
+      }
+    }
+
+    // 1. Update local state for immediate UI feedback
+    localValue.value = processedValue
+
+    // 2. Emit to parent component
+    emit('update:modelValue', processedValue)
+  }
+
+  // Watch for external updates from LiteGraph
+  watch(
+    () => modelValue,
+    (newValue) => {
+      localValue.value = newValue ?? defaultValue
+    }
+  )
+
+  return {
+    localValue: localValue as Ref<T>,
+    onChange
+  }
+}
+
+/**
+ * Type-specific helper for string widgets
+ */
+export function useStringWidgetValue(
+  widget: SimplifiedWidget<string>,
+  modelValue: string,
+  emit: (event: 'update:modelValue', value: string) => void
+) {
+  return useWidgetValue({
+    widget,
+    modelValue,
+    defaultValue: '',
+    emit,
+    transform: (value: string | undefined) => String(value || '') // Handle undefined from PrimeVue
+  })
+}
+
+/**
+ * Type-specific helper for number widgets
+ */
+export function useNumberWidgetValue(
+  widget: SimplifiedWidget<number>,
+  modelValue: number,
+  emit: (event: 'update:modelValue', value: number) => void
+) {
+  return useWidgetValue({
+    widget,
+    modelValue,
+    defaultValue: 0,
+    emit,
+    transform: (value: number | number[]) => {
+      // Handle PrimeVue Slider which can emit number | number[]
+      if (Array.isArray(value)) {
+        return value.length > 0 ? value[0] ?? 0 : 0
+      }
+      return Number(value) || 0
+    }
+  })
+}
+
+/**
+ * Type-specific helper for boolean widgets
+ */
+export function useBooleanWidgetValue(
+  widget: SimplifiedWidget<boolean>,
+  modelValue: boolean,
+  emit: (event: 'update:modelValue', value: boolean) => void
+) {
+  return useWidgetValue({
+    widget,
+    modelValue,
+    defaultValue: false,
+    emit,
+    transform: (value: boolean) => Boolean(value)
+  })
+}
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
new file mode 100644
index 0000000000..e503ac9891
--- /dev/null
+++ b/src/composables/useFeatureFlags.ts
@@ -0,0 +1,82 @@
+/**
+ * Feature flags composable for Vue node system
+ * Provides safe toggles for experimental features
+ */
+import { computed, watch } from 'vue'
+
+import { useSettingStore } from '@/stores/settingStore'
+
+import { LiteGraph } from '../lib/litegraph/src/litegraph'
+
+export const useFeatureFlags = () => {
+  const settingStore = useSettingStore()
+
+  /**
+   * Enable Vue-based node rendering
+   * When disabled, falls back to standard LiteGraph canvas rendering
+   */
+  const isVueNodesEnabled = computed(() => {
+    try {
+      return settingStore.get('Comfy.VueNodes.Enabled' as any) ?? true // Default to true for development
+    } catch {
+      return true // Default to true for development
+    }
+  })
+
+  /**
+   * Enable Vue widget rendering within Vue nodes
+   * When disabled, Vue nodes render without widgets (structure only)
+   */
+  const isVueWidgetsEnabled = computed(() => {
+    try {
+      return settingStore.get('Comfy.VueNodes.Widgets' as any) ?? true
+    } catch {
+      return true
+    }
+  })
+
+  /**
+   * Development mode features (debug panel, etc.)
+   * Automatically enabled in development builds
+   */
+  const isDevModeEnabled = computed(() => {
+    try {
+      return (
+        settingStore.get('Comfy.DevMode' as any) ??
+        process.env.NODE_ENV === 'development'
+      )
+    } catch {
+      return process.env.NODE_ENV === 'development'
+    }
+  })
+
+  /**
+   * Check if Vue nodes should be rendered at all
+   * Combines multiple conditions for safety
+   */
+  const shouldRenderVueNodes = computed(
+    () =>
+      isVueNodesEnabled.value &&
+      // Add any other safety conditions here
+      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,
+    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 295ea01fde..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.
@@ -866,5 +866,26 @@ export const CORE_SETTINGS: SettingParams[] = [
     name: 'Release seen timestamp',
     type: 'hidden',
     defaultValue: 0
+  },
+
+  // Vue Node System Settings
+  {
+    id: 'Comfy.VueNodes.Enabled' as any,
+    category: ['Comfy', 'Vue Nodes'],
+    experimental: true,
+    name: 'Enable Vue node rendering',
+    tooltip:
+      'Render nodes as Vue components instead of canvas elements. Experimental feature.',
+    type: 'boolean',
+    defaultValue: false
+  },
+  {
+    id: 'Comfy.VueNodes.Widgets' as any,
+    category: ['Comfy', 'Vue Nodes', 'Widgets'],
+    experimental: true,
+    name: 'Enable Vue widgets',
+    tooltip: 'Render widgets as Vue components within Vue nodes.',
+    type: 'boolean',
+    defaultValue: true
   }
 ]
diff --git a/src/constants/slotColors.ts b/src/constants/slotColors.ts
new file mode 100644
index 0000000000..797bd94f51
--- /dev/null
+++ b/src/constants/slotColors.ts
@@ -0,0 +1,30 @@
+/**
+ * Default colors for node slot types
+ * Mirrors LiteGraph's slot_default_color_by_type
+ */
+export const SLOT_TYPE_COLORS: Record<string, string> = {
+  number: '#AAD',
+  string: '#DCA',
+  boolean: '#DAA',
+  vec2: '#ADA',
+  vec3: '#ADA',
+  vec4: '#ADA',
+  color: '#DDA',
+  image: '#353',
+  latent: '#858',
+  conditioning: '#FFA',
+  control_net: '#F8F',
+  clip: '#FFD',
+  vae: '#F82',
+  model: '#B98',
+  '*': '#AAA' // Default color
+}
+
+/**
+ * Get the color for a slot type
+ */
+export function getSlotColor(type?: string | number | null): string {
+  if (!type) return SLOT_TYPE_COLORS['*']
+  const typeStr = String(type).toLowerCase()
+  return SLOT_TYPE_COLORS[typeStr] || SLOT_TYPE_COLORS['*']
+}
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/commands.json b/src/locales/en/commands.json
index 780ec71648..70f2dfcca7 100644
--- a/src/locales/en/commands.json
+++ b/src/locales/en/commands.json
@@ -231,19 +231,19 @@
     "label": "Toggle Focus Mode"
   },
   "Workspace_ToggleSidebarTab_model-library": {
-    "label": "Toggle Model Library Sidebar",
-    "tooltip": "Model Library"
+    "label": "sideToolbar.modelLibrary",
+    "tooltip": "sideToolbar.modelLibrary"
   },
   "Workspace_ToggleSidebarTab_node-library": {
-    "label": "Toggle Node Library Sidebar",
-    "tooltip": "Node Library"
+    "label": "sideToolbar.nodeLibrary",
+    "tooltip": "sideToolbar.nodeLibrary"
   },
   "Workspace_ToggleSidebarTab_queue": {
-    "label": "Toggle Queue Sidebar",
-    "tooltip": "Queue"
+    "label": "sideToolbar.queue",
+    "tooltip": "sideToolbar.queue"
   },
   "Workspace_ToggleSidebarTab_workflows": {
-    "label": "Toggle Workflows Sidebar",
-    "tooltip": "Workflows"
+    "label": "sideToolbar.workflows",
+    "tooltip": "sideToolbar.workflows"
   }
 }
\ No newline at end of file
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 29b871efd7..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",
@@ -878,10 +879,10 @@
     "Toggle Terminal Bottom Panel": "Toggle Terminal Bottom Panel",
     "Toggle Logs Bottom Panel": "Toggle Logs Bottom Panel",
     "Toggle Focus Mode": "Toggle Focus Mode",
-    "Toggle Model Library Sidebar": "Toggle Model Library Sidebar",
-    "Toggle Node Library Sidebar": "Toggle Node Library Sidebar",
-    "Toggle Queue Sidebar": "Toggle Queue Sidebar",
-    "Toggle Workflows Sidebar": "Toggle Workflows Sidebar"
+    "sideToolbar_modelLibrary": "sideToolbar.modelLibrary",
+    "sideToolbar_nodeLibrary": "sideToolbar.nodeLibrary",
+    "sideToolbar_queue": "sideToolbar.queue",
+    "sideToolbar_workflows": "sideToolbar.workflows"
   },
   "desktopMenu": {
     "reinstall": "Reinstall",
@@ -939,7 +940,8 @@
     "Light": "Light",
     "User": "User",
     "Credits": "Credits",
-    "API Nodes": "API Nodes"
+    "API Nodes": "API Nodes",
+    "Vue Nodes": "Vue Nodes"
   },
   "serverConfigItems": {
     "listen": {
diff --git a/src/locales/en/settings.json b/src/locales/en/settings.json
index ffe13f2259..bd1a37e672 100644
--- a/src/locales/en/settings.json
+++ b/src/locales/en/settings.json
@@ -331,6 +331,14 @@
   "Comfy_Validation_Workflows": {
     "name": "Validate workflows"
   },
+  "Comfy_VueNodes_Enabled": {
+    "name": "Enable Vue node rendering",
+    "tooltip": "Render nodes as Vue components instead of canvas elements. Experimental feature."
+  },
+  "Comfy_VueNodes_Widgets": {
+    "name": "Enable Vue widgets",
+    "tooltip": "Render widgets as Vue components within Vue nodes."
+  },
   "Comfy_WidgetControlMode": {
     "name": "Widget control mode",
     "tooltip": "Controls when widget values are updated (randomize/increment/decrement), either before the prompt is queued or after.",
diff --git a/src/locales/es/main.json b/src/locales/es/main.json
index f6250ea9ac..fbb50dd9fa 100644
--- a/src/locales/es/main.json
+++ b/src/locales/es/main.json
@@ -775,20 +775,20 @@
     "Toggle Bottom Panel": "Alternar panel inferior",
     "Toggle Focus Mode": "Alternar modo de enfoque",
     "Toggle Logs Bottom Panel": "Alternar panel inferior de registros",
-    "Toggle Model Library Sidebar": "Alternar barra lateral de biblioteca de modelos",
-    "Toggle Node Library Sidebar": "Alternar barra lateral de biblioteca de nodos",
-    "Toggle Queue Sidebar": "Alternar barra lateral de cola",
     "Toggle Search Box": "Alternar caja de búsqueda",
     "Toggle Terminal Bottom Panel": "Alternar panel inferior de terminal",
     "Toggle Theme (Dark/Light)": "Alternar tema (Oscuro/Claro)",
-    "Toggle Workflows Sidebar": "Alternar barra lateral de flujos de trabajo",
     "Toggle the Custom Nodes Manager": "Alternar el Administrador de Nodos Personalizados",
     "Toggle the Custom Nodes Manager Progress Bar": "Alternar la Barra de Progreso del Administrador de Nodos Personalizados",
     "Undo": "Deshacer",
     "Ungroup selected group nodes": "Desagrupar nodos de grupo seleccionados",
     "Workflow": "Flujo de trabajo",
     "Zoom In": "Acercar",
-    "Zoom Out": "Alejar"
+    "Zoom Out": "Alejar",
+    "sideToolbar_modelLibrary": "sideToolbar.bibliotecaDeModelos",
+    "sideToolbar_nodeLibrary": "sideToolbar.bibliotecaDeNodos",
+    "sideToolbar_queue": "sideToolbar.cola",
+    "sideToolbar_workflows": "sideToolbar.flujosDeTrabajo"
   },
   "missingModelsDialog": {
     "doNotAskAgain": "No mostrar esto de nuevo",
@@ -1103,6 +1103,7 @@
     "UV": "UV",
     "User": "Usuario",
     "Validation": "Validación",
+    "Vue Nodes": "Nodos Vue",
     "Window": "Ventana",
     "Workflow": "Flujo de Trabajo"
   },
diff --git a/src/locales/es/settings.json b/src/locales/es/settings.json
index 15dbfd1ac1..91e1655172 100644
--- a/src/locales/es/settings.json
+++ b/src/locales/es/settings.json
@@ -331,6 +331,14 @@
   "Comfy_Validation_Workflows": {
     "name": "Validar flujos de trabajo"
   },
+  "Comfy_VueNodes_Enabled": {
+    "name": "Habilitar renderizado de nodos Vue",
+    "tooltip": "Renderiza los nodos como componentes Vue en lugar de elementos canvas. Función experimental."
+  },
+  "Comfy_VueNodes_Widgets": {
+    "name": "Habilitar widgets de Vue",
+    "tooltip": "Renderiza los widgets como componentes de Vue dentro de los nodos de Vue."
+  },
   "Comfy_WidgetControlMode": {
     "name": "Modo de control del widget",
     "options": {
diff --git a/src/locales/fr/main.json b/src/locales/fr/main.json
index 715a77fdb5..4f98a46518 100644
--- a/src/locales/fr/main.json
+++ b/src/locales/fr/main.json
@@ -775,20 +775,20 @@
     "Toggle Bottom Panel": "Basculer le panneau inférieur",
     "Toggle Focus Mode": "Basculer le mode focus",
     "Toggle Logs Bottom Panel": "Basculer le panneau inférieur des journaux",
-    "Toggle Model Library Sidebar": "Basculer la barre latérale de la bibliothèque de modèles",
-    "Toggle Node Library Sidebar": "Basculer la barre latérale de la bibliothèque de nœuds",
-    "Toggle Queue Sidebar": "Basculer la barre latérale de la file d'attente",
     "Toggle Search Box": "Basculer la boîte de recherche",
     "Toggle Terminal Bottom Panel": "Basculer le panneau inférieur du terminal",
     "Toggle Theme (Dark/Light)": "Basculer le thème (Sombre/Clair)",
-    "Toggle Workflows Sidebar": "Basculer la barre latérale des flux de travail",
     "Toggle the Custom Nodes Manager": "Basculer le gestionnaire de nœuds personnalisés",
     "Toggle the Custom Nodes Manager Progress Bar": "Basculer la barre de progression du gestionnaire de nœuds personnalisés",
     "Undo": "Annuler",
     "Ungroup selected group nodes": "Dégrouper les nœuds de groupe sélectionnés",
     "Workflow": "Flux de travail",
     "Zoom In": "Zoom avant",
-    "Zoom Out": "Zoom arrière"
+    "Zoom Out": "Zoom arrière",
+    "sideToolbar_modelLibrary": "Bibliothèque de modèles",
+    "sideToolbar_nodeLibrary": "Bibliothèque de nœuds",
+    "sideToolbar_queue": "File d'attente",
+    "sideToolbar_workflows": "Flux de travail"
   },
   "missingModelsDialog": {
     "doNotAskAgain": "Ne plus afficher ce message",
@@ -1103,6 +1103,7 @@
     "UV": "UV",
     "User": "Utilisateur",
     "Validation": "Validation",
+    "Vue Nodes": "Nœuds Vue",
     "Window": "Fenêtre",
     "Workflow": "Flux de Travail"
   },
diff --git a/src/locales/fr/settings.json b/src/locales/fr/settings.json
index e80f57a5da..0b2060c702 100644
--- a/src/locales/fr/settings.json
+++ b/src/locales/fr/settings.json
@@ -331,6 +331,14 @@
   "Comfy_Validation_Workflows": {
     "name": "Valider les flux de travail"
   },
+  "Comfy_VueNodes_Enabled": {
+    "name": "Activer le rendu des nœuds Vue",
+    "tooltip": "Rendre les nœuds comme composants Vue au lieu d’éléments canvas. Fonctionnalité expérimentale."
+  },
+  "Comfy_VueNodes_Widgets": {
+    "name": "Activer les widgets Vue",
+    "tooltip": "Rendre les widgets comme composants Vue à l'intérieur des nœuds Vue."
+  },
   "Comfy_WidgetControlMode": {
     "name": "Mode de contrôle du widget",
     "options": {
diff --git a/src/locales/ja/main.json b/src/locales/ja/main.json
index f5f498c427..c04ae33c5c 100644
--- a/src/locales/ja/main.json
+++ b/src/locales/ja/main.json
@@ -775,20 +775,20 @@
     "Toggle Bottom Panel": "下部パネルの切り替え",
     "Toggle Focus Mode": "フォーカスモードの切り替え",
     "Toggle Logs Bottom Panel": "ログパネル下部を切り替え",
-    "Toggle Model Library Sidebar": "モデルライブラリサイドバーを切り替え",
-    "Toggle Node Library Sidebar": "ノードライブラリサイドバーを切り替え",
-    "Toggle Queue Sidebar": "キューサイドバーを切り替え",
     "Toggle Search Box": "検索ボックスの切り替え",
     "Toggle Terminal Bottom Panel": "ターミナルパネル下部を切り替え",
     "Toggle Theme (Dark/Light)": "テーマを切り替え（ダーク/ライト）",
-    "Toggle Workflows Sidebar": "ワークフローサイドバーを切り替え",
     "Toggle the Custom Nodes Manager": "カスタムノードマネージャーを切り替え",
     "Toggle the Custom Nodes Manager Progress Bar": "カスタムノードマネージャーの進行状況バーを切り替え",
     "Undo": "元に戻す",
     "Ungroup selected group nodes": "選択したグループノードのグループ解除",
     "Workflow": "ワークフロー",
     "Zoom In": "ズームイン",
-    "Zoom Out": "ズームアウト"
+    "Zoom Out": "ズームアウト",
+    "sideToolbar_modelLibrary": "モデルライブラリ",
+    "sideToolbar_nodeLibrary": "ノードライブラリ",
+    "sideToolbar_queue": "キュー",
+    "sideToolbar_workflows": "ワークフロー"
   },
   "missingModelsDialog": {
     "doNotAskAgain": "再度表示しない",
@@ -1103,6 +1103,7 @@
     "UV": "UV",
     "User": "ユーザー",
     "Validation": "検証",
+    "Vue Nodes": "Vueノード",
     "Window": "ウィンドウ",
     "Workflow": "ワークフロー"
   },
diff --git a/src/locales/ja/settings.json b/src/locales/ja/settings.json
index 3f4f68ed60..8d4ed12a8b 100644
--- a/src/locales/ja/settings.json
+++ b/src/locales/ja/settings.json
@@ -331,6 +331,14 @@
   "Comfy_Validation_Workflows": {
     "name": "ワークフローを検証"
   },
+  "Comfy_VueNodes_Enabled": {
+    "name": "Vueノードレンダリングを有効化",
+    "tooltip": "ノードをキャンバス要素の代わりにVueコンポーネントとしてレンダリングします。実験的な機能です。"
+  },
+  "Comfy_VueNodes_Widgets": {
+    "name": "Vueウィジェットを有効化",
+    "tooltip": "ウィジェットをVueノード内のVueコンポーネントとしてレンダリングします。"
+  },
   "Comfy_WidgetControlMode": {
     "name": "ウィジェット制御モード",
     "options": {
diff --git a/src/locales/ko/main.json b/src/locales/ko/main.json
index 4bb29b8db6..9f20d173c8 100644
--- a/src/locales/ko/main.json
+++ b/src/locales/ko/main.json
@@ -775,20 +775,20 @@
     "Toggle Bottom Panel": "하단 패널 전환",
     "Toggle Focus Mode": "포커스 모드 전환",
     "Toggle Logs Bottom Panel": "로그 하단 패널 전환",
-    "Toggle Model Library Sidebar": "모델 라이브러리 사이드바 전환",
-    "Toggle Node Library Sidebar": "노드 라이브러리 사이드바 전환",
-    "Toggle Queue Sidebar": "실행 대기열 사이드바 전환",
     "Toggle Search Box": "검색 상자 전환",
     "Toggle Terminal Bottom Panel": "터미널 하단 패널 전환",
     "Toggle Theme (Dark/Light)": "테마 전환 (어두운/밝은)",
-    "Toggle Workflows Sidebar": "워크플로 사이드바 전환",
     "Toggle the Custom Nodes Manager": "커스텀 노드 매니저 전환",
     "Toggle the Custom Nodes Manager Progress Bar": "커스텀 노드 매니저 진행률 표시줄 전환",
     "Undo": "실행 취소",
     "Ungroup selected group nodes": "선택한 그룹 노드 그룹 해제",
     "Workflow": "워크플로",
     "Zoom In": "확대",
-    "Zoom Out": "축소"
+    "Zoom Out": "축소",
+    "sideToolbar_modelLibrary": "sideToolbar.모델 라이브러리",
+    "sideToolbar_nodeLibrary": "sideToolbar.노드 라이브러리",
+    "sideToolbar_queue": "sideToolbar.대기열",
+    "sideToolbar_workflows": "sideToolbar.워크플로우"
   },
   "missingModelsDialog": {
     "doNotAskAgain": "다시 보지 않기",
@@ -1103,6 +1103,7 @@
     "UV": "UV",
     "User": "사용자",
     "Validation": "검증",
+    "Vue Nodes": "Vue 노드",
     "Window": "창",
     "Workflow": "워크플로"
   },
diff --git a/src/locales/ko/settings.json b/src/locales/ko/settings.json
index c3b51c843c..82207ce220 100644
--- a/src/locales/ko/settings.json
+++ b/src/locales/ko/settings.json
@@ -331,6 +331,14 @@
   "Comfy_Validation_Workflows": {
     "name": "워크플로 유효성 검사"
   },
+  "Comfy_VueNodes_Enabled": {
+    "name": "Vue 노드 렌더링 활성화",
+    "tooltip": "노드를 캔버스 요소 대신 Vue 컴포넌트로 렌더링합니다. 실험적인 기능입니다."
+  },
+  "Comfy_VueNodes_Widgets": {
+    "name": "Vue 위젯 활성화",
+    "tooltip": "Vue 노드 내에서 위젯을 Vue 컴포넌트로 렌더링합니다."
+  },
   "Comfy_WidgetControlMode": {
     "name": "위젯 제어 모드",
     "options": {
diff --git a/src/locales/ru/main.json b/src/locales/ru/main.json
index 402942d220..83bf9fb148 100644
--- a/src/locales/ru/main.json
+++ b/src/locales/ru/main.json
@@ -775,20 +775,20 @@
     "Toggle Bottom Panel": "Переключить нижнюю панель",
     "Toggle Focus Mode": "Переключить режим фокуса",
     "Toggle Logs Bottom Panel": "Переключение нижней панели журналов",
-    "Toggle Model Library Sidebar": "Переключение боковой панели библиотеки моделей",
-    "Toggle Node Library Sidebar": "Переключение боковой панели библиотеки нод",
-    "Toggle Queue Sidebar": "Переключение боковой панели очереди",
     "Toggle Search Box": "Переключить поисковую панель",
     "Toggle Terminal Bottom Panel": "Переключение нижней панели терминала",
     "Toggle Theme (Dark/Light)": "Переключение темы (Тёмная/Светлая)",
-    "Toggle Workflows Sidebar": "Переключение боковой панели рабочих процессов",
     "Toggle the Custom Nodes Manager": "Переключить менеджер пользовательских узлов",
     "Toggle the Custom Nodes Manager Progress Bar": "Переключить индикатор выполнения менеджера пользовательских узлов",
     "Undo": "Отменить",
     "Ungroup selected group nodes": "Разгруппировать выбранные групповые ноды",
     "Workflow": "Рабочий процесс",
     "Zoom In": "Увеличить",
-    "Zoom Out": "Уменьшить"
+    "Zoom Out": "Уменьшить",
+    "sideToolbar_modelLibrary": "sideToolbar.каталогМоделей",
+    "sideToolbar_nodeLibrary": "sideToolbar.каталогУзлов",
+    "sideToolbar_queue": "sideToolbar.очередь",
+    "sideToolbar_workflows": "sideToolbar.рабочиеПроцессы"
   },
   "missingModelsDialog": {
     "doNotAskAgain": "Больше не показывать это",
@@ -1103,6 +1103,7 @@
     "UV": "UV",
     "User": "Пользователь",
     "Validation": "Валидация",
+    "Vue Nodes": "Vue Nodes",
     "Window": "Окно",
     "Workflow": "Рабочий процесс"
   },
diff --git a/src/locales/ru/settings.json b/src/locales/ru/settings.json
index 2fe9624981..7909ec2db6 100644
--- a/src/locales/ru/settings.json
+++ b/src/locales/ru/settings.json
@@ -331,6 +331,14 @@
   "Comfy_Validation_Workflows": {
     "name": "Проверка рабочих процессов"
   },
+  "Comfy_VueNodes_Enabled": {
+    "name": "Включить рендеринг узлов через Vue",
+    "tooltip": "Отображать узлы как компоненты Vue вместо элементов canvas. Экспериментальная функция."
+  },
+  "Comfy_VueNodes_Widgets": {
+    "name": "Включить виджеты Vue",
+    "tooltip": "Отображать виджеты как компоненты Vue внутри узлов Vue."
+  },
   "Comfy_WidgetControlMode": {
     "name": "Режим управления виджетом",
     "options": {
diff --git a/src/locales/zh/main.json b/src/locales/zh/main.json
index 05d83c2ce1..399287c917 100644
--- a/src/locales/zh/main.json
+++ b/src/locales/zh/main.json
@@ -775,20 +775,20 @@
     "Toggle Bottom Panel": "切换底部面板",
     "Toggle Focus Mode": "切换专注模式",
     "Toggle Logs Bottom Panel": "切换日志底部面板",
-    "Toggle Model Library Sidebar": "切换模型库侧边栏",
-    "Toggle Node Library Sidebar": "切换节点库侧边栏",
-    "Toggle Queue Sidebar": "切换队列侧边栏",
     "Toggle Search Box": "切换搜索框",
     "Toggle Terminal Bottom Panel": "切换终端底部面板",
     "Toggle Theme (Dark/Light)": "切换主题（暗/亮）",
-    "Toggle Workflows Sidebar": "切换工作流侧边栏",
     "Toggle the Custom Nodes Manager": "切换自定义节点管理器",
     "Toggle the Custom Nodes Manager Progress Bar": "切换自定义节点管理器进度条",
     "Undo": "撤销",
     "Ungroup selected group nodes": "解散选中组节点",
     "Workflow": "工作流",
     "Zoom In": "放大画面",
-    "Zoom Out": "缩小画面"
+    "Zoom Out": "缩小画面",
+    "sideToolbar_modelLibrary": "侧边工具栏.模型库",
+    "sideToolbar_nodeLibrary": "侧边工具栏.节点库",
+    "sideToolbar_queue": "侧边工具栏.队列",
+    "sideToolbar_workflows": "侧边工具栏.工作流"
   },
   "missingModelsDialog": {
     "doNotAskAgain": "不再显示此消息",
@@ -1103,6 +1103,7 @@
     "UV": "UV",
     "User": "用户",
     "Validation": "验证",
+    "Vue Nodes": "Vue 节点",
     "Window": "窗口",
     "Workflow": "工作流"
   },
diff --git a/src/locales/zh/settings.json b/src/locales/zh/settings.json
index abb4627bf7..3e47d5a9a5 100644
--- a/src/locales/zh/settings.json
+++ b/src/locales/zh/settings.json
@@ -331,6 +331,14 @@
   "Comfy_Validation_Workflows": {
     "name": "校验工作流"
   },
+  "Comfy_VueNodes_Enabled": {
+    "name": "启用 Vue 节点渲染",
+    "tooltip": "将节点渲染为 Vue 组件，而不是画布元素。实验性功能。"
+  },
+  "Comfy_VueNodes_Widgets": {
+    "name": "启用Vue小部件",
+    "tooltip": "在Vue节点中将小部件渲染为Vue组件。"
+  },
   "Comfy_WidgetControlMode": {
     "name": "组件控制模式",
     "options": {
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/types/simplifiedWidget.ts b/src/types/simplifiedWidget.ts
index 7c755917d0..27be67f11a 100644
--- a/src/types/simplifiedWidget.ts
+++ b/src/types/simplifiedWidget.ts
@@ -3,7 +3,21 @@
  * Removes all DOM manipulation and positioning concerns
  */
 
-export interface SimplifiedWidget<T = any, O = Record<string, any>> {
+/** Valid types for widget values */
+export type WidgetValue =
+  | string
+  | number
+  | boolean
+  | object
+  | undefined
+  | null
+  | void
+  | File[]
+
+export interface SimplifiedWidget<
+  T extends WidgetValue = WidgetValue,
+  O = Record<string, any>
+> {
   /** Display name of the widget */
   name: string
 
diff --git a/src/types/spatialIndex.ts b/src/types/spatialIndex.ts
new file mode 100644
index 0000000000..fb4250ba13
--- /dev/null
+++ b/src/types/spatialIndex.ts
@@ -0,0 +1,23 @@
+/**
+ * Type definitions for spatial indexing system
+ */
+import type { Bounds } from '@/utils/spatial/QuadTree'
+
+/**
+ * Debug information for a single QuadTree node
+ */
+export interface QuadNodeDebugInfo {
+  bounds: Bounds
+  depth: number
+  itemCount: number
+  divided: boolean
+  children?: QuadNodeDebugInfo[]
+}
+
+/**
+ * Debug information for the entire spatial index
+ */
+export interface SpatialIndexDebugInfo {
+  size: number
+  tree: QuadNodeDebugInfo
+}
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/spatial/QuadTree.ts b/src/utils/spatial/QuadTree.ts
new file mode 100644
index 0000000000..e2c90b32e3
--- /dev/null
+++ b/src/utils/spatial/QuadTree.ts
@@ -0,0 +1,302 @@
+/**
+ * QuadTree implementation for spatial indexing of nodes
+ * Optimized for viewport culling in large node graphs
+ */
+import type {
+  QuadNodeDebugInfo,
+  SpatialIndexDebugInfo
+} from '@/types/spatialIndex'
+
+export interface Bounds {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export interface QuadTreeItem<T> {
+  id: string
+  bounds: Bounds
+  data: T
+}
+
+interface QuadTreeOptions {
+  maxDepth?: number
+  maxItemsPerNode?: number
+  minNodeSize?: number
+}
+
+class QuadNode<T> {
+  private bounds: Bounds
+  private depth: number
+  private maxDepth: number
+  private maxItems: number
+  private items: QuadTreeItem<T>[] = []
+  private children: QuadNode<T>[] | null = null
+  private divided = false
+
+  constructor(
+    bounds: Bounds,
+    depth: number = 0,
+    maxDepth: number = 5,
+    maxItems: number = 4
+  ) {
+    this.bounds = bounds
+    this.depth = depth
+    this.maxDepth = maxDepth
+    this.maxItems = maxItems
+  }
+
+  insert(item: QuadTreeItem<T>): boolean {
+    // Check if item is within bounds
+    if (!this.contains(item.bounds)) {
+      return false
+    }
+
+    // If we have space and haven't divided, add to this node
+    if (this.items.length < this.maxItems && !this.divided) {
+      this.items.push(item)
+      return true
+    }
+
+    // If we haven't reached max depth, subdivide
+    if (!this.divided && this.depth < this.maxDepth) {
+      this.subdivide()
+    }
+
+    // If divided, insert into children
+    if (this.divided && this.children) {
+      for (const child of this.children) {
+        if (child.insert(item)) {
+          return true
+        }
+      }
+    }
+
+    // If we can't subdivide further, add to this node anyway
+    this.items.push(item)
+    return true
+  }
+
+  remove(item: QuadTreeItem<T>): boolean {
+    const index = this.items.findIndex((i) => i.id === item.id)
+    if (index !== -1) {
+      this.items.splice(index, 1)
+      return true
+    }
+
+    if (this.divided && this.children) {
+      for (const child of this.children) {
+        if (child.remove(item)) {
+          return true
+        }
+      }
+    }
+
+    return false
+  }
+
+  query(
+    searchBounds: Bounds,
+    found: QuadTreeItem<T>[] = []
+  ): QuadTreeItem<T>[] {
+    // Check if search area intersects with this node
+    if (!this.intersects(searchBounds)) {
+      return found
+    }
+
+    // Add items in this node that intersect with search bounds
+    for (const item of this.items) {
+      if (this.boundsIntersect(item.bounds, searchBounds)) {
+        found.push(item)
+      }
+    }
+
+    // Recursively search children
+    if (this.divided && this.children) {
+      for (const child of this.children) {
+        child.query(searchBounds, found)
+      }
+    }
+
+    return found
+  }
+
+  private subdivide() {
+    const { x, y, width, height } = this.bounds
+    const halfWidth = width / 2
+    const halfHeight = height / 2
+
+    this.children = [
+      // Top-left
+      new QuadNode<T>(
+        { x, y, width: halfWidth, height: halfHeight },
+        this.depth + 1,
+        this.maxDepth,
+        this.maxItems
+      ),
+      // Top-right
+      new QuadNode<T>(
+        { x: x + halfWidth, y, width: halfWidth, height: halfHeight },
+        this.depth + 1,
+        this.maxDepth,
+        this.maxItems
+      ),
+      // Bottom-left
+      new QuadNode<T>(
+        { x, y: y + halfHeight, width: halfWidth, height: halfHeight },
+        this.depth + 1,
+        this.maxDepth,
+        this.maxItems
+      ),
+      // Bottom-right
+      new QuadNode<T>(
+        {
+          x: x + halfWidth,
+          y: y + halfHeight,
+          width: halfWidth,
+          height: halfHeight
+        },
+        this.depth + 1,
+        this.maxDepth,
+        this.maxItems
+      )
+    ]
+
+    this.divided = true
+
+    // Redistribute existing items to children
+    const itemsToRedistribute = [...this.items]
+    this.items = []
+
+    for (const item of itemsToRedistribute) {
+      let inserted = false
+      for (const child of this.children) {
+        if (child.insert(item)) {
+          inserted = true
+          break
+        }
+      }
+      // Keep in parent if it doesn't fit in any child
+      if (!inserted) {
+        this.items.push(item)
+      }
+    }
+  }
+
+  private contains(itemBounds: Bounds): boolean {
+    return (
+      itemBounds.x >= this.bounds.x &&
+      itemBounds.y >= this.bounds.y &&
+      itemBounds.x + itemBounds.width <= this.bounds.x + this.bounds.width &&
+      itemBounds.y + itemBounds.height <= this.bounds.y + this.bounds.height
+    )
+  }
+
+  private intersects(searchBounds: Bounds): boolean {
+    return this.boundsIntersect(this.bounds, searchBounds)
+  }
+
+  private boundsIntersect(a: Bounds, b: Bounds): boolean {
+    return !(
+      a.x + a.width < b.x ||
+      b.x + b.width < a.x ||
+      a.y + a.height < b.y ||
+      b.y + b.height < a.y
+    )
+  }
+
+  // Debug helper to get tree structure
+  getDebugInfo(): QuadNodeDebugInfo {
+    return {
+      bounds: this.bounds,
+      depth: this.depth,
+      itemCount: this.items.length,
+      divided: this.divided,
+      children: this.children?.map((child) => child.getDebugInfo())
+    }
+  }
+}
+
+export class QuadTree<T> {
+  private root: QuadNode<T>
+  private itemMap: Map<string, QuadTreeItem<T>> = new Map()
+  private options: Required<QuadTreeOptions>
+
+  constructor(bounds: Bounds, options: QuadTreeOptions = {}) {
+    this.options = {
+      maxDepth: options.maxDepth ?? 5,
+      maxItemsPerNode: options.maxItemsPerNode ?? 4,
+      minNodeSize: options.minNodeSize ?? 50
+    }
+
+    this.root = new QuadNode<T>(
+      bounds,
+      0,
+      this.options.maxDepth,
+      this.options.maxItemsPerNode
+    )
+  }
+
+  insert(id: string, bounds: Bounds, data: T): boolean {
+    const item: QuadTreeItem<T> = { id, bounds, data }
+
+    // Remove old item if it exists
+    if (this.itemMap.has(id)) {
+      this.remove(id)
+    }
+
+    const success = this.root.insert(item)
+    if (success) {
+      this.itemMap.set(id, item)
+    }
+    return success
+  }
+
+  remove(id: string): boolean {
+    const item = this.itemMap.get(id)
+    if (!item) return false
+
+    const success = this.root.remove(item)
+    if (success) {
+      this.itemMap.delete(id)
+    }
+    return success
+  }
+
+  update(id: string, newBounds: Bounds): boolean {
+    const item = this.itemMap.get(id)
+    if (!item) return false
+
+    // Remove and re-insert with new bounds
+    const data = item.data
+    this.remove(id)
+    return this.insert(id, newBounds, data)
+  }
+
+  query(searchBounds: Bounds): T[] {
+    const items = this.root.query(searchBounds)
+    return items.map((item) => item.data)
+  }
+
+  clear() {
+    this.root = new QuadNode<T>(
+      this.root['bounds'],
+      0,
+      this.options.maxDepth,
+      this.options.maxItemsPerNode
+    )
+    this.itemMap.clear()
+  }
+
+  get size(): number {
+    return this.itemMap.size
+  }
+
+  getDebugInfo(): SpatialIndexDebugInfo {
+    return {
+      size: this.size,
+      tree: this.root.getDebugInfo()
+    }
+  }
+}
diff --git a/src/utils/typeGuardUtil.ts b/src/utils/typeGuardUtil.ts
index c35a9716bc..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 {
@@ -27,3 +31,37 @@ export const isSubgraph = (
  */
 export const isNonNullish = <T>(item: T | undefined | null): item is T =>
   item != null
+
+/**
+ * Type guard for slot objects (inputs/outputs)
+ */
+export const isSlotObject = (obj: unknown): obj is INodeSlot => {
+  return (
+    obj !== null &&
+    typeof obj === 'object' &&
+    'name' in obj &&
+    'type' in obj &&
+    'boundingRect' in obj
+  )
+}
+
+/**
+ * Type guard for safe number conversion
+ */
+export const isValidNumber = (value: unknown): value is number => {
+  return typeof value === 'number' && !isNaN(value) && isFinite(value)
+}
+
+/**
+ * Type guard for safe string conversion
+ */
+export const isValidString = (value: unknown): value is string => {
+  return typeof value === 'string'
+}
+
+/**
+ * Type guard for arrays with safe bounds checking
+ */
+export const isNonEmptyArray = <T>(value: unknown): value is T[] => {
+  return Array.isArray(value) && value.length > 0
+}
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/element/useTransformState.test.ts b/tests-ui/tests/composables/element/useTransformState.test.ts
new file mode 100644
index 0000000000..acf22483b7
--- /dev/null
+++ b/tests-ui/tests/composables/element/useTransformState.test.ts
@@ -0,0 +1,329 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { useTransformState } from '@/composables/element/useTransformState'
+
+import { createMockCanvasContext } from '../../helpers/nodeTestHelpers'
+
+describe('useTransformState', () => {
+  let transformState: ReturnType<typeof useTransformState>
+
+  beforeEach(() => {
+    transformState = useTransformState()
+  })
+
+  describe('initial state', () => {
+    it('should initialize with default camera values', () => {
+      const { camera } = transformState
+      expect(camera.x).toBe(0)
+      expect(camera.y).toBe(0)
+      expect(camera.z).toBe(1)
+    })
+
+    it('should generate correct initial transform style', () => {
+      const { transformStyle } = transformState
+      expect(transformStyle.value).toEqual({
+        transform: 'scale(1) translate(0px, 0px)',
+        transformOrigin: '0 0'
+      })
+    })
+  })
+
+  describe('syncWithCanvas', () => {
+    it('should sync camera state with canvas transform', () => {
+      const { syncWithCanvas, camera } = transformState
+      const mockCanvas = createMockCanvasContext()
+
+      // Set mock canvas transform
+      mockCanvas.ds.offset = [100, 50]
+      mockCanvas.ds.scale = 2
+
+      syncWithCanvas(mockCanvas as any)
+
+      expect(camera.x).toBe(100)
+      expect(camera.y).toBe(50)
+      expect(camera.z).toBe(2)
+    })
+
+    it('should handle null canvas gracefully', () => {
+      const { syncWithCanvas, camera } = transformState
+
+      syncWithCanvas(null as any)
+
+      // Should remain at initial values
+      expect(camera.x).toBe(0)
+      expect(camera.y).toBe(0)
+      expect(camera.z).toBe(1)
+    })
+
+    it('should handle canvas without ds property', () => {
+      const { syncWithCanvas, camera } = transformState
+      const canvasWithoutDs = { canvas: {} }
+
+      syncWithCanvas(canvasWithoutDs as any)
+
+      // Should remain at initial values
+      expect(camera.x).toBe(0)
+      expect(camera.y).toBe(0)
+      expect(camera.z).toBe(1)
+    })
+
+    it('should update transform style after sync', () => {
+      const { syncWithCanvas, transformStyle } = transformState
+      const mockCanvas = createMockCanvasContext()
+
+      mockCanvas.ds.offset = [150, 75]
+      mockCanvas.ds.scale = 0.5
+
+      syncWithCanvas(mockCanvas as any)
+
+      expect(transformStyle.value).toEqual({
+        transform: 'scale(0.5) translate(150px, 75px)',
+        transformOrigin: '0 0'
+      })
+    })
+  })
+
+  describe('coordinate conversions', () => {
+    beforeEach(() => {
+      // Set up a known transform state
+      const mockCanvas = createMockCanvasContext()
+      mockCanvas.ds.offset = [100, 50]
+      mockCanvas.ds.scale = 2
+      transformState.syncWithCanvas(mockCanvas as any)
+    })
+
+    describe('canvasToScreen', () => {
+      it('should convert canvas coordinates to screen coordinates', () => {
+        const { canvasToScreen } = transformState
+
+        const canvasPoint = { x: 10, y: 20 }
+        const screenPoint = canvasToScreen(canvasPoint)
+
+        // screen = canvas * scale + offset
+        // x: 10 * 2 + 100 = 120
+        // y: 20 * 2 + 50 = 90
+        expect(screenPoint).toEqual({ x: 120, y: 90 })
+      })
+
+      it('should handle zero coordinates', () => {
+        const { canvasToScreen } = transformState
+
+        const screenPoint = canvasToScreen({ x: 0, y: 0 })
+        expect(screenPoint).toEqual({ x: 100, y: 50 })
+      })
+
+      it('should handle negative coordinates', () => {
+        const { canvasToScreen } = transformState
+
+        const screenPoint = canvasToScreen({ x: -10, y: -20 })
+        expect(screenPoint).toEqual({ x: 80, y: 10 })
+      })
+    })
+
+    describe('screenToCanvas', () => {
+      it('should convert screen coordinates to canvas coordinates', () => {
+        const { screenToCanvas } = transformState
+
+        const screenPoint = { x: 120, y: 90 }
+        const canvasPoint = screenToCanvas(screenPoint)
+
+        // canvas = (screen - offset) / scale
+        // x: (120 - 100) / 2 = 10
+        // y: (90 - 50) / 2 = 20
+        expect(canvasPoint).toEqual({ x: 10, y: 20 })
+      })
+
+      it('should be inverse of canvasToScreen', () => {
+        const { canvasToScreen, screenToCanvas } = transformState
+
+        const originalPoint = { x: 25, y: 35 }
+        const screenPoint = canvasToScreen(originalPoint)
+        const backToCanvas = screenToCanvas(screenPoint)
+
+        expect(backToCanvas.x).toBeCloseTo(originalPoint.x)
+        expect(backToCanvas.y).toBeCloseTo(originalPoint.y)
+      })
+    })
+  })
+
+  describe('getNodeScreenBounds', () => {
+    beforeEach(() => {
+      const mockCanvas = createMockCanvasContext()
+      mockCanvas.ds.offset = [100, 50]
+      mockCanvas.ds.scale = 2
+      transformState.syncWithCanvas(mockCanvas as any)
+    })
+
+    it('should calculate correct screen bounds for a node', () => {
+      const { getNodeScreenBounds } = transformState
+
+      const nodePos = [10, 20]
+      const nodeSize = [200, 100]
+      const bounds = getNodeScreenBounds(nodePos, nodeSize)
+
+      // Top-left: canvasToScreen(10, 20) = (120, 90)
+      // Width: 200 * 2 = 400
+      // Height: 100 * 2 = 200
+      expect(bounds.x).toBe(120)
+      expect(bounds.y).toBe(90)
+      expect(bounds.width).toBe(400)
+      expect(bounds.height).toBe(200)
+    })
+  })
+
+  describe('isNodeInViewport', () => {
+    beforeEach(() => {
+      const mockCanvas = createMockCanvasContext()
+      mockCanvas.ds.offset = [0, 0]
+      mockCanvas.ds.scale = 1
+      transformState.syncWithCanvas(mockCanvas as any)
+    })
+
+    const viewport = { width: 1000, height: 600 }
+
+    it('should return true for nodes inside viewport', () => {
+      const { isNodeInViewport } = transformState
+
+      const nodePos = [100, 100]
+      const nodeSize = [200, 100]
+
+      expect(isNodeInViewport(nodePos, nodeSize, viewport)).toBe(true)
+    })
+
+    it('should return false for nodes completely outside viewport', () => {
+      const { isNodeInViewport } = transformState
+
+      // Node far to the right
+      expect(isNodeInViewport([2000, 100], [200, 100], viewport)).toBe(false)
+
+      // Node far to the left
+      expect(isNodeInViewport([-500, 100], [200, 100], viewport)).toBe(false)
+
+      // Node far below
+      expect(isNodeInViewport([100, 1000], [200, 100], viewport)).toBe(false)
+
+      // Node far above
+      expect(isNodeInViewport([100, -500], [200, 100], viewport)).toBe(false)
+    })
+
+    it('should return true for nodes partially in viewport with margin', () => {
+      const { isNodeInViewport } = transformState
+
+      // Node slightly outside but within margin
+      const nodePos = [-50, -50]
+      const nodeSize = [100, 100]
+
+      expect(isNodeInViewport(nodePos, nodeSize, viewport, 0.2)).toBe(true)
+    })
+
+    it('should return false for tiny nodes (size culling)', () => {
+      const { isNodeInViewport } = transformState
+
+      // Node is in viewport but too small
+      const nodePos = [100, 100]
+      const nodeSize = [3, 3] // Less than 4 pixels
+
+      expect(isNodeInViewport(nodePos, nodeSize, viewport)).toBe(false)
+    })
+
+    it('should adjust margin based on zoom level', () => {
+      const { isNodeInViewport, syncWithCanvas } = transformState
+      const mockCanvas = createMockCanvasContext()
+
+      // Test with very low zoom
+      mockCanvas.ds.scale = 0.05
+      syncWithCanvas(mockCanvas as any)
+
+      // Node at edge should still be visible due to increased margin
+      expect(isNodeInViewport([1100, 100], [200, 100], viewport)).toBe(true)
+
+      // Test with high zoom
+      mockCanvas.ds.scale = 4
+      syncWithCanvas(mockCanvas as any)
+
+      // Margin should be tighter
+      expect(isNodeInViewport([1100, 100], [200, 100], viewport)).toBe(false)
+    })
+  })
+
+  describe('getViewportBounds', () => {
+    beforeEach(() => {
+      const mockCanvas = createMockCanvasContext()
+      mockCanvas.ds.offset = [100, 50]
+      mockCanvas.ds.scale = 2
+      transformState.syncWithCanvas(mockCanvas as any)
+    })
+
+    it('should calculate viewport bounds in canvas coordinates', () => {
+      const { getViewportBounds } = transformState
+      const viewport = { width: 1000, height: 600 }
+
+      const bounds = getViewportBounds(viewport, 0.2)
+
+      // With 20% margin:
+      // marginX = 1000 * 0.2 = 200
+      // marginY = 600 * 0.2 = 120
+      // topLeft in screen: (-200, -120)
+      // bottomRight in screen: (1200, 720)
+
+      // Convert to canvas coordinates:
+      // topLeft: ((-200 - 100) / 2, (-120 - 50) / 2) = (-150, -85)
+      // bottomRight: ((1200 - 100) / 2, (720 - 50) / 2) = (550, 335)
+
+      expect(bounds.x).toBe(-150)
+      expect(bounds.y).toBe(-85)
+      expect(bounds.width).toBe(700) // 550 - (-150)
+      expect(bounds.height).toBe(420) // 335 - (-85)
+    })
+
+    it('should handle zero margin', () => {
+      const { getViewportBounds } = transformState
+      const viewport = { width: 1000, height: 600 }
+
+      const bounds = getViewportBounds(viewport, 0)
+
+      // No margin, so viewport bounds are exact
+      expect(bounds.x).toBe(-50) // (0 - 100) / 2
+      expect(bounds.y).toBe(-25) // (0 - 50) / 2
+      expect(bounds.width).toBe(500) // 1000 / 2
+      expect(bounds.height).toBe(300) // 600 / 2
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle extreme zoom levels', () => {
+      const { syncWithCanvas, canvasToScreen } = transformState
+      const mockCanvas = createMockCanvasContext()
+
+      // Very small zoom
+      mockCanvas.ds.scale = 0.001
+      syncWithCanvas(mockCanvas as any)
+
+      const point1 = canvasToScreen({ x: 1000, y: 1000 })
+      expect(point1.x).toBeCloseTo(1)
+      expect(point1.y).toBeCloseTo(1)
+
+      // Very large zoom
+      mockCanvas.ds.scale = 100
+      syncWithCanvas(mockCanvas as any)
+
+      const point2 = canvasToScreen({ x: 1, y: 1 })
+      expect(point2.x).toBe(100)
+      expect(point2.y).toBe(100)
+    })
+
+    it('should handle zero scale in screenToCanvas', () => {
+      const { syncWithCanvas, screenToCanvas } = transformState
+      const mockCanvas = createMockCanvasContext()
+
+      // Scale of 0 gets converted to 1 by || operator
+      mockCanvas.ds.scale = 0
+      syncWithCanvas(mockCanvas as any)
+
+      // Should use scale of 1 due to camera.z || 1 in implementation
+      const result = screenToCanvas({ x: 100, y: 100 })
+      expect(result.x).toBe(100) // (100 - 0) / 1
+      expect(result.y).toBe(100) // (100 - 0) / 1
+    })
+  })
+})
diff --git a/tests-ui/tests/composables/graph/useCanvasTransformSync.test.ts b/tests-ui/tests/composables/graph/useCanvasTransformSync.test.ts
new file mode 100644
index 0000000000..79503bb5f2
--- /dev/null
+++ b/tests-ui/tests/composables/graph/useCanvasTransformSync.test.ts
@@ -0,0 +1,240 @@
+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'),
+  ds: {
+    offset: [0, 0],
+    scale: 1
+  } as any // Mock the DragAndScale type
+})
+
+describe('useCanvasTransformSync', () => {
+  let mockCanvas: LGraphCanvas
+  let syncFn: ReturnType<typeof vi.fn>
+  let callbacks: {
+    onStart: ReturnType<typeof vi.fn>
+    onUpdate: ReturnType<typeof vi.fn>
+    onStop: ReturnType<typeof vi.fn>
+  }
+
+  beforeEach(() => {
+    vi.useFakeTimers()
+    mockCanvas = createMockCanvas() as LGraphCanvas
+    syncFn = vi.fn()
+    callbacks = {
+      onStart: vi.fn(),
+      onUpdate: vi.fn(),
+      onStop: vi.fn()
+    }
+
+    // Mock requestAnimationFrame
+    global.requestAnimationFrame = vi.fn((cb) => {
+      setTimeout(cb, 16) // Simulate 60fps
+      return 1
+    })
+    global.cancelAnimationFrame = vi.fn()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+    vi.restoreAllMocks()
+  })
+
+  it('should auto-start sync when canvas is provided', async () => {
+    const { isActive } = useCanvasTransformSync(mockCanvas, syncFn, callbacks)
+
+    await nextTick()
+
+    expect(isActive.value).toBe(true)
+    expect(callbacks.onStart).toHaveBeenCalledOnce()
+    expect(syncFn).toHaveBeenCalledWith(mockCanvas)
+  })
+
+  it('should not auto-start when autoStart is false', async () => {
+    const { isActive } = useCanvasTransformSync(mockCanvas, syncFn, callbacks, {
+      autoStart: false
+    })
+
+    await nextTick()
+
+    expect(isActive.value).toBe(false)
+    expect(callbacks.onStart).not.toHaveBeenCalled()
+    expect(syncFn).not.toHaveBeenCalled()
+  })
+
+  it('should not start when canvas is null', async () => {
+    const { isActive } = useCanvasTransformSync(null, syncFn, callbacks)
+
+    await nextTick()
+
+    expect(isActive.value).toBe(false)
+    expect(callbacks.onStart).not.toHaveBeenCalled()
+  })
+
+  it('should manually start and stop sync', async () => {
+    const { isActive, startSync, stopSync } = useCanvasTransformSync(
+      mockCanvas,
+      syncFn,
+      callbacks,
+      { autoStart: false }
+    )
+
+    // Start manually
+    startSync()
+    await nextTick()
+
+    expect(isActive.value).toBe(true)
+    expect(callbacks.onStart).toHaveBeenCalledOnce()
+
+    // Stop manually
+    stopSync()
+    await nextTick()
+
+    expect(isActive.value).toBe(false)
+    expect(callbacks.onStop).toHaveBeenCalledOnce()
+  })
+
+  it('should call sync function on each frame', async () => {
+    useCanvasTransformSync(mockCanvas, syncFn, callbacks)
+
+    await nextTick()
+
+    // Advance timers to trigger additional frames (initial call + 3 more = 4 total)
+    vi.advanceTimersByTime(48) // 3 additional frames at 16ms each
+    await nextTick()
+
+    expect(syncFn).toHaveBeenCalledTimes(4) // Initial call + 3 timed calls
+    expect(syncFn).toHaveBeenCalledWith(mockCanvas)
+  })
+
+  it('should provide timing information in onUpdate callback', async () => {
+    // Mock performance.now to return predictable values
+    const mockNow = vi.spyOn(performance, 'now')
+    mockNow.mockReturnValueOnce(0).mockReturnValueOnce(5) // 5ms duration
+
+    useCanvasTransformSync(mockCanvas, syncFn, callbacks)
+
+    await nextTick()
+
+    expect(callbacks.onUpdate).toHaveBeenCalledWith(5)
+  })
+
+  it('should handle sync function that throws errors', async () => {
+    const errorSyncFn = vi.fn().mockImplementation(() => {
+      throw new Error('Sync failed')
+    })
+
+    // Creating the composable should not throw
+    expect(() => {
+      useCanvasTransformSync(mockCanvas, errorSyncFn, callbacks)
+    }).not.toThrow()
+
+    await nextTick()
+
+    // Even though sync function throws, the composable should handle it gracefully
+    expect(errorSyncFn).toHaveBeenCalled()
+    expect(callbacks.onStart).toHaveBeenCalled()
+  })
+
+  it('should not start if already active', async () => {
+    const { startSync } = useCanvasTransformSync(mockCanvas, syncFn, callbacks)
+
+    await nextTick()
+
+    // Try to start again
+    startSync()
+    await nextTick()
+
+    // Should only be called once from auto-start
+    expect(callbacks.onStart).toHaveBeenCalledOnce()
+  })
+
+  it('should not stop if already inactive', async () => {
+    const { stopSync } = useCanvasTransformSync(mockCanvas, syncFn, callbacks, {
+      autoStart: false
+    })
+
+    // Try to stop when not started
+    stopSync()
+    await nextTick()
+
+    expect(callbacks.onStop).not.toHaveBeenCalled()
+  })
+
+  it('should clean up on component unmount', async () => {
+    const TestComponent = {
+      setup() {
+        const { isActive } = useCanvasTransformSync(
+          mockCanvas,
+          syncFn,
+          callbacks
+        )
+        return { isActive }
+      },
+      template: '<div>{{ isActive }}</div>'
+    }
+
+    const wrapper = mount(TestComponent)
+    await nextTick()
+
+    expect(callbacks.onStart).toHaveBeenCalled()
+
+    // Unmount component
+    wrapper.unmount()
+    await nextTick()
+
+    expect(callbacks.onStop).toHaveBeenCalled()
+    expect(global.cancelAnimationFrame).toHaveBeenCalled()
+  })
+
+  it('should work without callbacks', async () => {
+    const { isActive } = useCanvasTransformSync(mockCanvas, syncFn)
+
+    await nextTick()
+
+    expect(isActive.value).toBe(true)
+    expect(syncFn).toHaveBeenCalledWith(mockCanvas)
+  })
+
+  it('should stop sync when canvas becomes null during sync', async () => {
+    let currentCanvas: any = mockCanvas
+    const dynamicSyncFn = vi.fn(() => {
+      // Simulate canvas becoming null during sync
+      currentCanvas = null
+    })
+
+    const { isActive } = useCanvasTransformSync(
+      currentCanvas,
+      dynamicSyncFn,
+      callbacks
+    )
+
+    await nextTick()
+
+    expect(isActive.value).toBe(true)
+
+    // Advance time to trigger sync
+    vi.advanceTimersByTime(16)
+    await nextTick()
+
+    // Should handle null canvas gracefully
+    expect(dynamicSyncFn).toHaveBeenCalled()
+  })
+
+  it('should use cancelAnimationFrame when stopping', async () => {
+    const { stopSync } = useCanvasTransformSync(mockCanvas, syncFn, callbacks)
+
+    await nextTick()
+
+    stopSync()
+
+    expect(global.cancelAnimationFrame).toHaveBeenCalledWith(1)
+  })
+})
diff --git a/tests-ui/tests/composables/graph/useLOD.test.ts b/tests-ui/tests/composables/graph/useLOD.test.ts
new file mode 100644
index 0000000000..0d1301d9b0
--- /dev/null
+++ b/tests-ui/tests/composables/graph/useLOD.test.ts
@@ -0,0 +1,270 @@
+import { describe, expect, it } from 'vitest'
+import { ref } from 'vue'
+
+import {
+  LODLevel,
+  LOD_THRESHOLDS,
+  supportsFeatureAtZoom,
+  useLOD
+} from '@/composables/graph/useLOD'
+
+describe('useLOD', () => {
+  describe('LOD level detection', () => {
+    it('should return MINIMAL for zoom <= 0.4', () => {
+      const zoomRef = ref(0.4)
+      const { lodLevel } = useLOD(zoomRef)
+      expect(lodLevel.value).toBe(LODLevel.MINIMAL)
+
+      zoomRef.value = 0.2
+      expect(lodLevel.value).toBe(LODLevel.MINIMAL)
+
+      zoomRef.value = 0.1
+      expect(lodLevel.value).toBe(LODLevel.MINIMAL)
+    })
+
+    it('should return REDUCED for 0.4 < zoom <= 0.8', () => {
+      const zoomRef = ref(0.5)
+      const { lodLevel } = useLOD(zoomRef)
+      expect(lodLevel.value).toBe(LODLevel.REDUCED)
+
+      zoomRef.value = 0.6
+      expect(lodLevel.value).toBe(LODLevel.REDUCED)
+
+      zoomRef.value = 0.8
+      expect(lodLevel.value).toBe(LODLevel.REDUCED)
+    })
+
+    it('should return FULL for zoom > 0.8', () => {
+      const zoomRef = ref(0.9)
+      const { lodLevel } = useLOD(zoomRef)
+      expect(lodLevel.value).toBe(LODLevel.FULL)
+
+      zoomRef.value = 1.0
+      expect(lodLevel.value).toBe(LODLevel.FULL)
+
+      zoomRef.value = 2.5
+      expect(lodLevel.value).toBe(LODLevel.FULL)
+    })
+
+    it('should be reactive to zoom changes', () => {
+      const zoomRef = ref(0.2)
+      const { lodLevel } = useLOD(zoomRef)
+
+      expect(lodLevel.value).toBe(LODLevel.MINIMAL)
+
+      zoomRef.value = 0.6
+      expect(lodLevel.value).toBe(LODLevel.REDUCED)
+
+      zoomRef.value = 1.0
+      expect(lodLevel.value).toBe(LODLevel.FULL)
+    })
+  })
+
+  describe('rendering decisions', () => {
+    it('should disable all rendering for MINIMAL LOD', () => {
+      const zoomRef = ref(0.2)
+      const {
+        shouldRenderWidgets,
+        shouldRenderSlots,
+        shouldRenderContent,
+        shouldRenderSlotLabels,
+        shouldRenderWidgetLabels
+      } = useLOD(zoomRef)
+
+      expect(shouldRenderWidgets.value).toBe(false)
+      expect(shouldRenderSlots.value).toBe(false)
+      expect(shouldRenderContent.value).toBe(false)
+      expect(shouldRenderSlotLabels.value).toBe(false)
+      expect(shouldRenderWidgetLabels.value).toBe(false)
+    })
+
+    it('should enable widgets/slots but disable labels for REDUCED LOD', () => {
+      const zoomRef = ref(0.6)
+      const {
+        shouldRenderWidgets,
+        shouldRenderSlots,
+        shouldRenderContent,
+        shouldRenderSlotLabels,
+        shouldRenderWidgetLabels
+      } = useLOD(zoomRef)
+
+      expect(shouldRenderWidgets.value).toBe(true)
+      expect(shouldRenderSlots.value).toBe(true)
+      expect(shouldRenderContent.value).toBe(false)
+      expect(shouldRenderSlotLabels.value).toBe(false)
+      expect(shouldRenderWidgetLabels.value).toBe(false)
+    })
+
+    it('should enable all rendering for FULL LOD', () => {
+      const zoomRef = ref(1.0)
+      const {
+        shouldRenderWidgets,
+        shouldRenderSlots,
+        shouldRenderContent,
+        shouldRenderSlotLabels,
+        shouldRenderWidgetLabels
+      } = useLOD(zoomRef)
+
+      expect(shouldRenderWidgets.value).toBe(true)
+      expect(shouldRenderSlots.value).toBe(true)
+      expect(shouldRenderContent.value).toBe(true)
+      expect(shouldRenderSlotLabels.value).toBe(true)
+      expect(shouldRenderWidgetLabels.value).toBe(true)
+    })
+  })
+
+  describe('CSS classes', () => {
+    it('should return correct CSS class for each LOD level', () => {
+      const zoomRef = ref(0.2)
+      const { lodCssClass } = useLOD(zoomRef)
+
+      expect(lodCssClass.value).toBe('lg-node--lod-minimal')
+
+      zoomRef.value = 0.6
+      expect(lodCssClass.value).toBe('lg-node--lod-reduced')
+
+      zoomRef.value = 1.0
+      expect(lodCssClass.value).toBe('lg-node--lod-full')
+    })
+  })
+
+  describe('essential widgets filtering', () => {
+    it('should return all widgets for FULL LOD', () => {
+      const zoomRef = ref(1.0)
+      const { getEssentialWidgets } = useLOD(zoomRef)
+
+      const widgets = [
+        { type: 'combo' },
+        { type: 'text' },
+        { type: 'button' },
+        { type: 'slider' }
+      ]
+
+      expect(getEssentialWidgets(widgets)).toEqual(widgets)
+    })
+
+    it('should return empty array for MINIMAL LOD', () => {
+      const zoomRef = ref(0.2)
+      const { getEssentialWidgets } = useLOD(zoomRef)
+
+      const widgets = [{ type: 'combo' }, { type: 'text' }, { type: 'button' }]
+
+      expect(getEssentialWidgets(widgets)).toEqual([])
+    })
+
+    it('should filter to essential types for REDUCED LOD', () => {
+      const zoomRef = ref(0.6)
+      const { getEssentialWidgets } = useLOD(zoomRef)
+
+      const widgets = [
+        { type: 'combo' },
+        { type: 'text' },
+        { type: 'button' },
+        { type: 'slider' },
+        { type: 'toggle' },
+        { type: 'number' }
+      ]
+
+      const essential = getEssentialWidgets(widgets)
+      expect(essential).toHaveLength(4)
+      expect(essential.map((w: any) => w.type)).toEqual([
+        'combo',
+        'slider',
+        'toggle',
+        'number'
+      ])
+    })
+
+    it('should handle case-insensitive widget types', () => {
+      const zoomRef = ref(0.6)
+      const { getEssentialWidgets } = useLOD(zoomRef)
+
+      const widgets = [
+        { type: 'COMBO' },
+        { type: 'Select' },
+        { type: 'TOGGLE' }
+      ]
+
+      const essential = getEssentialWidgets(widgets)
+      expect(essential).toHaveLength(3)
+    })
+
+    it('should handle widgets with undefined or missing type', () => {
+      const zoomRef = ref(0.6)
+      const { getEssentialWidgets } = useLOD(zoomRef)
+
+      const widgets = [
+        { type: 'combo' },
+        { type: undefined },
+        {},
+        { type: 'slider' }
+      ]
+
+      const essential = getEssentialWidgets(widgets)
+      expect(essential).toHaveLength(2)
+      expect(essential.map((w: any) => w.type)).toEqual(['combo', 'slider'])
+    })
+  })
+
+  describe('performance metrics', () => {
+    it('should provide debug metrics', () => {
+      const zoomRef = ref(0.6)
+      const { lodMetrics } = useLOD(zoomRef)
+
+      expect(lodMetrics.value).toEqual({
+        level: LODLevel.REDUCED,
+        zoom: 0.6,
+        widgetCount: 'full',
+        slotCount: 'full'
+      })
+    })
+
+    it('should update metrics when zoom changes', () => {
+      const zoomRef = ref(0.2)
+      const { lodMetrics } = useLOD(zoomRef)
+
+      expect(lodMetrics.value.level).toBe(LODLevel.MINIMAL)
+      expect(lodMetrics.value.widgetCount).toBe('none')
+      expect(lodMetrics.value.slotCount).toBe('none')
+
+      zoomRef.value = 1.0
+      expect(lodMetrics.value.level).toBe(LODLevel.FULL)
+      expect(lodMetrics.value.widgetCount).toBe('full')
+      expect(lodMetrics.value.slotCount).toBe('full')
+    })
+  })
+})
+
+describe('LOD_THRESHOLDS', () => {
+  it('should export correct threshold values', () => {
+    expect(LOD_THRESHOLDS.FULL_THRESHOLD).toBe(0.8)
+    expect(LOD_THRESHOLDS.REDUCED_THRESHOLD).toBe(0.4)
+    expect(LOD_THRESHOLDS.MINIMAL_THRESHOLD).toBe(0.0)
+  })
+})
+
+describe('supportsFeatureAtZoom', () => {
+  it('should return correct feature support for different zoom levels', () => {
+    expect(supportsFeatureAtZoom(1.0, 'renderWidgets')).toBe(true)
+    expect(supportsFeatureAtZoom(1.0, 'renderSlots')).toBe(true)
+    expect(supportsFeatureAtZoom(1.0, 'renderContent')).toBe(true)
+
+    expect(supportsFeatureAtZoom(0.6, 'renderWidgets')).toBe(true)
+    expect(supportsFeatureAtZoom(0.6, 'renderSlots')).toBe(true)
+    expect(supportsFeatureAtZoom(0.6, 'renderContent')).toBe(false)
+
+    expect(supportsFeatureAtZoom(0.2, 'renderWidgets')).toBe(false)
+    expect(supportsFeatureAtZoom(0.2, 'renderSlots')).toBe(false)
+    expect(supportsFeatureAtZoom(0.2, 'renderContent')).toBe(false)
+  })
+
+  it('should handle threshold boundary values correctly', () => {
+    expect(supportsFeatureAtZoom(0.8, 'renderWidgets')).toBe(true)
+    expect(supportsFeatureAtZoom(0.8, 'renderContent')).toBe(false)
+
+    expect(supportsFeatureAtZoom(0.81, 'renderContent')).toBe(true)
+
+    expect(supportsFeatureAtZoom(0.4, 'renderWidgets')).toBe(false)
+    expect(supportsFeatureAtZoom(0.41, 'renderWidgets')).toBe(true)
+  })
+})
diff --git a/tests-ui/tests/composables/graph/useSpatialIndex.test.ts b/tests-ui/tests/composables/graph/useSpatialIndex.test.ts
new file mode 100644
index 0000000000..3329e762cb
--- /dev/null
+++ b/tests-ui/tests/composables/graph/useSpatialIndex.test.ts
@@ -0,0 +1,483 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useSpatialIndex } from '@/composables/graph/useSpatialIndex'
+
+import { createBounds } from '../../helpers/nodeTestHelpers'
+
+// Mock @vueuse/core
+vi.mock('@vueuse/core', () => ({
+  useDebounceFn: (fn: (...args: any[]) => any) => fn // Return function directly for testing
+}))
+
+describe('useSpatialIndex', () => {
+  let spatialIndex: ReturnType<typeof useSpatialIndex>
+
+  beforeEach(() => {
+    spatialIndex = useSpatialIndex()
+  })
+
+  describe('initialization', () => {
+    it('should start with null quadTree', () => {
+      expect(spatialIndex.quadTree.value).toBeNull()
+    })
+
+    it('should initialize with default bounds when first node is added', () => {
+      const { updateNode, quadTree, metrics } = spatialIndex
+
+      updateNode('node1', { x: 100, y: 100 }, { width: 200, height: 100 })
+
+      expect(quadTree.value).not.toBeNull()
+      expect(metrics.value.totalNodes).toBe(1)
+    })
+
+    it('should initialize with custom bounds', () => {
+      const { initialize, quadTree } = spatialIndex
+      const customBounds = createBounds(0, 0, 5000, 3000)
+
+      initialize(customBounds)
+
+      expect(quadTree.value).not.toBeNull()
+    })
+
+    it('should increment rebuild count on initialization', () => {
+      const { initialize, metrics } = spatialIndex
+
+      expect(metrics.value.rebuildCount).toBe(0)
+      initialize()
+      expect(metrics.value.rebuildCount).toBe(1)
+    })
+
+    it('should accept custom options', () => {
+      const customIndex = useSpatialIndex({
+        maxDepth: 8,
+        maxItemsPerNode: 6,
+        updateDebounceMs: 32
+      })
+
+      customIndex.initialize()
+
+      expect(customIndex.quadTree.value).not.toBeNull()
+    })
+  })
+
+  describe('updateNode', () => {
+    it('should add a new node to the index', () => {
+      const { updateNode, metrics } = spatialIndex
+
+      updateNode('node1', { x: 100, y: 100 }, { width: 200, height: 100 })
+
+      expect(metrics.value.totalNodes).toBe(1)
+    })
+
+    it('should update existing node position', () => {
+      const { updateNode, queryViewport } = spatialIndex
+
+      // Add node
+      updateNode('node1', { x: 100, y: 100 }, { width: 200, height: 100 })
+
+      // Move node
+      updateNode('node1', { x: 500, y: 500 }, { width: 200, height: 100 })
+
+      // Query old position - should not find node
+      const oldResults = queryViewport(createBounds(50, 50, 300, 200))
+      expect(oldResults).not.toContain('node1')
+
+      // Query new position - should find node
+      const newResults = queryViewport(createBounds(450, 450, 300, 200))
+      expect(newResults).toContain('node1')
+    })
+
+    it('should auto-initialize if quadTree is null', () => {
+      const { updateNode, quadTree } = spatialIndex
+
+      expect(quadTree.value).toBeNull()
+      updateNode('node1', { x: 0, y: 0 }, { width: 100, height: 100 })
+      expect(quadTree.value).not.toBeNull()
+    })
+  })
+
+  describe('batchUpdate', () => {
+    it('should update multiple nodes at once', () => {
+      const { batchUpdate, metrics } = spatialIndex
+
+      const updates = [
+        {
+          id: 'node1',
+          position: { x: 100, y: 100 },
+          size: { width: 200, height: 100 }
+        },
+        {
+          id: 'node2',
+          position: { x: 300, y: 300 },
+          size: { width: 150, height: 150 }
+        },
+        {
+          id: 'node3',
+          position: { x: 500, y: 200 },
+          size: { width: 100, height: 200 }
+        }
+      ]
+
+      batchUpdate(updates)
+
+      expect(metrics.value.totalNodes).toBe(3)
+    })
+
+    it('should handle empty batch', () => {
+      const { batchUpdate, metrics } = spatialIndex
+
+      batchUpdate([])
+
+      expect(metrics.value.totalNodes).toBe(0)
+    })
+
+    it('should auto-initialize if needed', () => {
+      const { batchUpdate, quadTree } = spatialIndex
+
+      expect(quadTree.value).toBeNull()
+      batchUpdate([
+        {
+          id: 'node1',
+          position: { x: 0, y: 0 },
+          size: { width: 100, height: 100 }
+        }
+      ])
+      expect(quadTree.value).not.toBeNull()
+    })
+  })
+
+  describe('removeNode', () => {
+    beforeEach(() => {
+      spatialIndex.updateNode(
+        'node1',
+        { x: 100, y: 100 },
+        { width: 200, height: 100 }
+      )
+      spatialIndex.updateNode(
+        'node2',
+        { x: 300, y: 300 },
+        { width: 200, height: 100 }
+      )
+    })
+
+    it('should remove node from index', () => {
+      const { removeNode, metrics } = spatialIndex
+
+      expect(metrics.value.totalNodes).toBe(2)
+      removeNode('node1')
+      expect(metrics.value.totalNodes).toBe(1)
+    })
+
+    it('should handle removing non-existent node', () => {
+      const { removeNode, metrics } = spatialIndex
+
+      expect(metrics.value.totalNodes).toBe(2)
+      removeNode('node999')
+      expect(metrics.value.totalNodes).toBe(2)
+    })
+
+    it('should handle removeNode when quadTree is null', () => {
+      const freshIndex = useSpatialIndex()
+
+      // Should not throw
+      expect(() => freshIndex.removeNode('node1')).not.toThrow()
+    })
+  })
+
+  describe('queryViewport', () => {
+    beforeEach(() => {
+      // Set up a grid of nodes
+      spatialIndex.updateNode(
+        'node1',
+        { x: 0, y: 0 },
+        { width: 100, height: 100 }
+      )
+      spatialIndex.updateNode(
+        'node2',
+        { x: 200, y: 0 },
+        { width: 100, height: 100 }
+      )
+      spatialIndex.updateNode(
+        'node3',
+        { x: 0, y: 200 },
+        { width: 100, height: 100 }
+      )
+      spatialIndex.updateNode(
+        'node4',
+        { x: 200, y: 200 },
+        { width: 100, height: 100 }
+      )
+    })
+
+    it('should find nodes within viewport bounds', () => {
+      const { queryViewport } = spatialIndex
+
+      // Query top-left quadrant
+      const results = queryViewport(createBounds(-50, -50, 200, 200))
+      expect(results).toContain('node1')
+      expect(results).not.toContain('node2')
+      expect(results).not.toContain('node3')
+      expect(results).not.toContain('node4')
+    })
+
+    it('should find multiple nodes in larger viewport', () => {
+      const { queryViewport } = spatialIndex
+
+      // Query entire area
+      const results = queryViewport(createBounds(-50, -50, 400, 400))
+      expect(results).toHaveLength(4)
+      expect(results).toContain('node1')
+      expect(results).toContain('node2')
+      expect(results).toContain('node3')
+      expect(results).toContain('node4')
+    })
+
+    it('should return empty array for empty region', () => {
+      const { queryViewport } = spatialIndex
+
+      const results = queryViewport(createBounds(1000, 1000, 100, 100))
+      expect(results).toEqual([])
+    })
+
+    it('should update metrics after query', () => {
+      const { queryViewport, metrics } = spatialIndex
+
+      queryViewport(createBounds(0, 0, 300, 300))
+
+      expect(metrics.value.queryTime).toBeGreaterThan(0)
+      expect(metrics.value.visibleNodes).toBe(4)
+    })
+
+    it('should handle query when quadTree is null', () => {
+      const freshIndex = useSpatialIndex()
+
+      const results = freshIndex.queryViewport(createBounds(0, 0, 100, 100))
+      expect(results).toEqual([])
+    })
+  })
+
+  describe('queryRadius', () => {
+    beforeEach(() => {
+      // Set up nodes at different distances
+      spatialIndex.updateNode(
+        'center',
+        { x: 475, y: 475 },
+        { width: 50, height: 50 }
+      )
+      spatialIndex.updateNode(
+        'near1',
+        { x: 525, y: 475 },
+        { width: 50, height: 50 }
+      )
+      spatialIndex.updateNode(
+        'near2',
+        { x: 425, y: 475 },
+        { width: 50, height: 50 }
+      )
+      spatialIndex.updateNode(
+        'far',
+        { x: 775, y: 775 },
+        { width: 50, height: 50 }
+      )
+    })
+
+    it('should find nodes within radius', () => {
+      const { queryRadius } = spatialIndex
+
+      const results = queryRadius({ x: 500, y: 500 }, 100)
+
+      expect(results).toContain('center')
+      expect(results).toContain('near1')
+      expect(results).toContain('near2')
+      expect(results).not.toContain('far')
+    })
+
+    it('should handle zero radius', () => {
+      const { queryRadius } = spatialIndex
+
+      const results = queryRadius({ x: 500, y: 500 }, 0)
+
+      // Zero radius creates a point query at (500,500)
+      // The 'center' node spans 475-525 on both axes, so it contains this point
+      expect(results).toContain('center')
+    })
+
+    it('should handle large radius', () => {
+      const { queryRadius } = spatialIndex
+
+      const results = queryRadius({ x: 500, y: 500 }, 1000)
+
+      expect(results).toHaveLength(4) // Should find all nodes
+    })
+  })
+
+  describe('clear', () => {
+    beforeEach(() => {
+      spatialIndex.updateNode(
+        'node1',
+        { x: 100, y: 100 },
+        { width: 200, height: 100 }
+      )
+      spatialIndex.updateNode(
+        'node2',
+        { x: 300, y: 300 },
+        { width: 200, height: 100 }
+      )
+    })
+
+    it('should remove all nodes', () => {
+      const { clear, metrics } = spatialIndex
+
+      expect(metrics.value.totalNodes).toBe(2)
+      clear()
+      expect(metrics.value.totalNodes).toBe(0)
+    })
+
+    it('should reset metrics', () => {
+      const { clear, queryViewport, metrics } = spatialIndex
+
+      // Do a query to set visible nodes
+      queryViewport(createBounds(0, 0, 500, 500))
+      expect(metrics.value.visibleNodes).toBe(2)
+
+      clear()
+      expect(metrics.value.visibleNodes).toBe(0)
+    })
+
+    it('should handle clear when quadTree is null', () => {
+      const freshIndex = useSpatialIndex()
+
+      expect(() => freshIndex.clear()).not.toThrow()
+    })
+  })
+
+  describe('rebuild', () => {
+    it('should rebuild index with new nodes', () => {
+      const { rebuild, metrics, queryViewport } = spatialIndex
+
+      // Add initial nodes
+      spatialIndex.updateNode(
+        'old1',
+        { x: 0, y: 0 },
+        { width: 100, height: 100 }
+      )
+      expect(metrics.value.rebuildCount).toBe(1)
+
+      // Rebuild with new set
+      const newNodes = new Map([
+        [
+          'new1',
+          { position: { x: 100, y: 100 }, size: { width: 50, height: 50 } }
+        ],
+        [
+          'new2',
+          { position: { x: 200, y: 200 }, size: { width: 50, height: 50 } }
+        ]
+      ])
+
+      rebuild(newNodes)
+
+      expect(metrics.value.totalNodes).toBe(2)
+      expect(metrics.value.rebuildCount).toBe(2)
+
+      // Old nodes should be gone
+      const oldResults = queryViewport(createBounds(-50, -50, 100, 100))
+      expect(oldResults).not.toContain('old1')
+
+      // New nodes should be findable
+      const newResults = queryViewport(createBounds(50, 50, 200, 200))
+      expect(newResults).toContain('new1')
+      expect(newResults).toContain('new2')
+    })
+
+    it('should handle empty rebuild', () => {
+      const { rebuild, metrics } = spatialIndex
+
+      rebuild(new Map())
+
+      expect(metrics.value.totalNodes).toBe(0)
+    })
+  })
+
+  describe('getDebugVisualization', () => {
+    it('should return null when debug is disabled', () => {
+      const { getDebugVisualization } = spatialIndex
+
+      expect(getDebugVisualization()).toBeNull()
+    })
+
+    it('should return debug info when enabled', () => {
+      const debugIndex = useSpatialIndex({ enableDebugVisualization: true })
+      debugIndex.initialize()
+
+      const debug = debugIndex.getDebugVisualization()
+      expect(debug).not.toBeNull()
+      expect(debug).toHaveProperty('size')
+      expect(debug).toHaveProperty('tree')
+    })
+  })
+
+  describe('metrics', () => {
+    it('should track performance metrics', () => {
+      const { metrics, updateNode, queryViewport } = spatialIndex
+
+      // Initial state
+      expect(metrics.value).toEqual({
+        queryTime: 0,
+        totalNodes: 0,
+        visibleNodes: 0,
+        treeDepth: 0,
+        rebuildCount: 0
+      })
+
+      // Add nodes
+      updateNode('node1', { x: 0, y: 0 }, { width: 100, height: 100 })
+      expect(metrics.value.totalNodes).toBe(1)
+
+      // Query
+      queryViewport(createBounds(-50, -50, 200, 200))
+      expect(metrics.value.queryTime).toBeGreaterThan(0)
+      expect(metrics.value.visibleNodes).toBe(1)
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle nodes with zero size', () => {
+      const { updateNode, queryViewport } = spatialIndex
+
+      updateNode('point', { x: 100, y: 100 }, { width: 0, height: 0 })
+
+      // Should still be findable
+      const results = queryViewport(createBounds(50, 50, 100, 100))
+      expect(results).toContain('point')
+    })
+
+    it('should handle negative positions', () => {
+      const { updateNode, queryViewport } = spatialIndex
+
+      updateNode('negative', { x: -500, y: -500 }, { width: 100, height: 100 })
+
+      const results = queryViewport(createBounds(-600, -600, 200, 200))
+      expect(results).toContain('negative')
+    })
+
+    it('should handle very large nodes', () => {
+      const { updateNode, queryViewport } = spatialIndex
+
+      updateNode('huge', { x: 0, y: 0 }, { width: 5000, height: 5000 })
+
+      // Should be found even when querying small area within it
+      const results = queryViewport(createBounds(100, 100, 10, 10))
+      expect(results).toContain('huge')
+    })
+  })
+
+  describe('debouncedUpdateNode', () => {
+    it('should be available', () => {
+      const { debouncedUpdateNode } = spatialIndex
+
+      expect(debouncedUpdateNode).toBeDefined()
+      expect(typeof debouncedUpdateNode).toBe('function')
+    })
+  })
+})
diff --git a/tests-ui/tests/composables/graph/useTransformSettling.test.ts b/tests-ui/tests/composables/graph/useTransformSettling.test.ts
new file mode 100644
index 0000000000..2bc6342c84
--- /dev/null
+++ b/tests-ui/tests/composables/graph/useTransformSettling.test.ts
@@ -0,0 +1,277 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, ref } from 'vue'
+
+import { useTransformSettling } from '@/composables/graph/useTransformSettling'
+
+describe('useTransformSettling', () => {
+  let element: HTMLDivElement
+
+  beforeEach(() => {
+    vi.useFakeTimers()
+    element = document.createElement('div')
+    document.body.appendChild(element)
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+    document.body.removeChild(element)
+  })
+
+  it('should track wheel events and settle after delay', async () => {
+    const { isTransforming } = useTransformSettling(element)
+
+    // Initially not transforming
+    expect(isTransforming.value).toBe(false)
+
+    // Dispatch wheel event
+    element.dispatchEvent(new WheelEvent('wheel', { bubbles: true }))
+    await nextTick()
+
+    // Should be transforming
+    expect(isTransforming.value).toBe(true)
+
+    // Advance time but not past settle delay
+    vi.advanceTimersByTime(100)
+    expect(isTransforming.value).toBe(true)
+
+    // Advance past settle delay (default 200ms)
+    vi.advanceTimersByTime(150)
+    expect(isTransforming.value).toBe(false)
+  })
+
+  it('should reset settle timer on subsequent wheel events', async () => {
+    const { isTransforming } = useTransformSettling(element, {
+      settleDelay: 300
+    })
+
+    // First wheel event
+    element.dispatchEvent(new WheelEvent('wheel', { bubbles: true }))
+    await nextTick()
+    expect(isTransforming.value).toBe(true)
+
+    // Advance time partially
+    vi.advanceTimersByTime(200)
+    expect(isTransforming.value).toBe(true)
+
+    // Another wheel event should reset the timer
+    element.dispatchEvent(new WheelEvent('wheel', { bubbles: true }))
+    await nextTick()
+
+    // Advance 200ms more - should still be transforming
+    vi.advanceTimersByTime(200)
+    expect(isTransforming.value).toBe(true)
+
+    // Need another 100ms to settle (300ms total from last event)
+    vi.advanceTimersByTime(100)
+    expect(isTransforming.value).toBe(false)
+  })
+
+  it('should track pan events when trackPan is enabled', async () => {
+    const { isTransforming } = useTransformSettling(element, {
+      trackPan: true,
+      settleDelay: 200
+    })
+
+    // Pointer down should start transform
+    element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+    await nextTick()
+    expect(isTransforming.value).toBe(true)
+
+    // Pointer move should keep it active
+    vi.advanceTimersByTime(100)
+    element.dispatchEvent(new PointerEvent('pointermove', { bubbles: true }))
+    await nextTick()
+
+    // Should still be transforming
+    expect(isTransforming.value).toBe(true)
+
+    // Pointer up
+    element.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }))
+    await nextTick()
+
+    // Should still be transforming until settle delay
+    expect(isTransforming.value).toBe(true)
+
+    // Advance past settle delay
+    vi.advanceTimersByTime(200)
+    expect(isTransforming.value).toBe(false)
+  })
+
+  it('should not track pan events when trackPan is disabled', async () => {
+    const { isTransforming } = useTransformSettling(element, {
+      trackPan: false
+    })
+
+    // Pointer events should not trigger transform
+    element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+    element.dispatchEvent(new PointerEvent('pointermove', { bubbles: true }))
+    await nextTick()
+
+    expect(isTransforming.value).toBe(false)
+  })
+
+  it('should handle pointer cancel events', async () => {
+    const { isTransforming } = useTransformSettling(element, {
+      trackPan: true,
+      settleDelay: 200
+    })
+
+    // Start panning
+    element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+    await nextTick()
+    expect(isTransforming.value).toBe(true)
+
+    // Cancel instead of up
+    element.dispatchEvent(new PointerEvent('pointercancel', { bubbles: true }))
+    await nextTick()
+
+    // Should still settle normally
+    vi.advanceTimersByTime(200)
+    expect(isTransforming.value).toBe(false)
+  })
+
+  it('should work with ref target', async () => {
+    const targetRef = ref<HTMLElement | null>(null)
+    const { isTransforming } = useTransformSettling(targetRef)
+
+    // No target yet
+    expect(isTransforming.value).toBe(false)
+
+    // Set target
+    targetRef.value = element
+    await nextTick()
+
+    // Now events should work
+    element.dispatchEvent(new WheelEvent('wheel', { bubbles: true }))
+    await nextTick()
+    expect(isTransforming.value).toBe(true)
+
+    vi.advanceTimersByTime(200)
+    expect(isTransforming.value).toBe(false)
+  })
+
+  it('should use capture phase for events', async () => {
+    const captureHandler = vi.fn()
+    const bubbleHandler = vi.fn()
+
+    // Add handlers to verify capture phase
+    element.addEventListener('wheel', captureHandler, true)
+    element.addEventListener('wheel', bubbleHandler, false)
+
+    const { isTransforming } = useTransformSettling(element)
+
+    // Create child element
+    const child = document.createElement('div')
+    element.appendChild(child)
+
+    // Dispatch event on child
+    child.dispatchEvent(new WheelEvent('wheel', { bubbles: true }))
+    await nextTick()
+
+    // Capture handler should be called before bubble handler
+    expect(captureHandler).toHaveBeenCalled()
+    expect(isTransforming.value).toBe(true)
+
+    element.removeEventListener('wheel', captureHandler, true)
+    element.removeEventListener('wheel', bubbleHandler, false)
+  })
+
+  it('should throttle pointer move events', async () => {
+    const { isTransforming } = useTransformSettling(element, {
+      trackPan: true,
+      pointerMoveThrottle: 50,
+      settleDelay: 100
+    })
+
+    // Start panning
+    element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+    await nextTick()
+
+    // Fire many pointer move events rapidly
+    for (let i = 0; i < 10; i++) {
+      element.dispatchEvent(new PointerEvent('pointermove', { bubbles: true }))
+      vi.advanceTimersByTime(5) // 5ms between events
+    }
+    await nextTick()
+
+    // Should still be transforming
+    expect(isTransforming.value).toBe(true)
+
+    // End panning
+    element.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }))
+
+    // Advance past settle delay
+    vi.advanceTimersByTime(100)
+    expect(isTransforming.value).toBe(false)
+  })
+
+  it('should clean up event listeners when component unmounts', async () => {
+    const removeEventListenerSpy = vi.spyOn(element, 'removeEventListener')
+
+    // Create a test component
+    const TestComponent = {
+      setup() {
+        const { isTransforming } = useTransformSettling(element, {
+          trackPan: true
+        })
+        return { isTransforming }
+      },
+      template: '<div>{{ isTransforming }}</div>'
+    }
+
+    const wrapper = mount(TestComponent)
+    await nextTick()
+
+    // Unmount component
+    wrapper.unmount()
+
+    // Should have removed all event listeners
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      'wheel',
+      expect.any(Function),
+      expect.objectContaining({ capture: true })
+    )
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      'pointerdown',
+      expect.any(Function),
+      expect.objectContaining({ capture: true })
+    )
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      'pointermove',
+      expect.any(Function),
+      expect.objectContaining({ capture: true })
+    )
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      'pointerup',
+      expect.any(Function),
+      expect.objectContaining({ capture: true })
+    )
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      'pointercancel',
+      expect.any(Function),
+      expect.objectContaining({ capture: true })
+    )
+  })
+
+  it('should use passive listeners when specified', async () => {
+    const addEventListenerSpy = vi.spyOn(element, 'addEventListener')
+
+    useTransformSettling(element, {
+      passive: true,
+      trackPan: true
+    })
+
+    // Check that passive option was used for appropriate events
+    expect(addEventListenerSpy).toHaveBeenCalledWith(
+      'wheel',
+      expect.any(Function),
+      expect.objectContaining({ passive: true, capture: true })
+    )
+    expect(addEventListenerSpy).toHaveBeenCalledWith(
+      'pointermove',
+      expect.any(Function),
+      expect.objectContaining({ passive: true, capture: true })
+    )
+  })
+})
diff --git a/tests-ui/tests/composables/graph/useWidgetRenderer.test.ts b/tests-ui/tests/composables/graph/useWidgetRenderer.test.ts
new file mode 100644
index 0000000000..78074ebeba
--- /dev/null
+++ b/tests-ui/tests/composables/graph/useWidgetRenderer.test.ts
@@ -0,0 +1,141 @@
+import { describe, expect, it } from 'vitest'
+
+import { WidgetType } from '@/components/graph/vueWidgets/widgetRegistry'
+import { useWidgetRenderer } from '@/composables/graph/useWidgetRenderer'
+
+describe('useWidgetRenderer', () => {
+  const { getWidgetComponent, shouldRenderAsVue } = useWidgetRenderer()
+
+  describe('getWidgetComponent', () => {
+    // Test number type mappings
+    describe('number types', () => {
+      it('should map number type to NUMBER widget', () => {
+        expect(getWidgetComponent('number')).toBe(WidgetType.NUMBER)
+      })
+
+      it('should map slider type to SLIDER widget', () => {
+        expect(getWidgetComponent('slider')).toBe(WidgetType.SLIDER)
+      })
+
+      it('should map INT type to INT widget', () => {
+        expect(getWidgetComponent('INT')).toBe(WidgetType.INT)
+      })
+
+      it('should map FLOAT type to FLOAT widget', () => {
+        expect(getWidgetComponent('FLOAT')).toBe(WidgetType.FLOAT)
+      })
+    })
+
+    // Test text type mappings
+    describe('text types', () => {
+      it('should map text variations to STRING widget', () => {
+        expect(getWidgetComponent('text')).toBe(WidgetType.STRING)
+        expect(getWidgetComponent('string')).toBe(WidgetType.STRING)
+        expect(getWidgetComponent('STRING')).toBe(WidgetType.STRING)
+      })
+
+      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.MARKDOWN)
+        expect(getWidgetComponent('customtext')).toBe(WidgetType.TEXTAREA)
+      })
+    })
+
+    // Test selection type mappings
+    describe('selection types', () => {
+      it('should map combo types to COMBO widget', () => {
+        expect(getWidgetComponent('combo')).toBe(WidgetType.COMBO)
+        expect(getWidgetComponent('COMBO')).toBe(WidgetType.COMBO)
+      })
+    })
+
+    // Test boolean type mappings
+    describe('boolean types', () => {
+      it('should map boolean types to appropriate widgets', () => {
+        expect(getWidgetComponent('toggle')).toBe(WidgetType.TOGGLESWITCH)
+        expect(getWidgetComponent('boolean')).toBe(WidgetType.BOOLEAN)
+        expect(getWidgetComponent('BOOLEAN')).toBe(WidgetType.BOOLEAN)
+      })
+    })
+
+    // Test advanced widget mappings
+    describe('advanced widgets', () => {
+      it('should map color types to COLOR widget', () => {
+        expect(getWidgetComponent('color')).toBe(WidgetType.COLOR)
+        expect(getWidgetComponent('COLOR')).toBe(WidgetType.COLOR)
+      })
+
+      it('should map image types to IMAGE widget', () => {
+        expect(getWidgetComponent('image')).toBe(WidgetType.IMAGE)
+        expect(getWidgetComponent('IMAGE')).toBe(WidgetType.IMAGE)
+      })
+
+      it('should map file types to FILEUPLOAD widget', () => {
+        expect(getWidgetComponent('file')).toBe(WidgetType.FILEUPLOAD)
+        expect(getWidgetComponent('FILEUPLOAD')).toBe(WidgetType.FILEUPLOAD)
+      })
+
+      it('should map button types to BUTTON widget', () => {
+        expect(getWidgetComponent('button')).toBe(WidgetType.BUTTON)
+        expect(getWidgetComponent('BUTTON')).toBe(WidgetType.BUTTON)
+      })
+    })
+
+    // Test fallback behavior
+    describe('fallback behavior', () => {
+      it('should return STRING widget for unknown types', () => {
+        expect(getWidgetComponent('unknown')).toBe(WidgetType.STRING)
+        expect(getWidgetComponent('custom_widget')).toBe(WidgetType.STRING)
+        expect(getWidgetComponent('')).toBe(WidgetType.STRING)
+      })
+
+      it('should return STRING widget for unmapped but valid types', () => {
+        expect(getWidgetComponent('datetime')).toBe(WidgetType.STRING)
+        expect(getWidgetComponent('json')).toBe(WidgetType.STRING)
+      })
+    })
+  })
+
+  describe('shouldRenderAsVue', () => {
+    it('should return false for widgets marked as canvas-only', () => {
+      const widget = { type: 'text', options: { canvasOnly: true } }
+      expect(shouldRenderAsVue(widget)).toBe(false)
+    })
+
+    it('should return false for widgets without a type', () => {
+      const widget = { options: {} }
+      expect(shouldRenderAsVue(widget)).toBe(false)
+    })
+
+    it('should return true for widgets with mapped types', () => {
+      expect(shouldRenderAsVue({ type: 'text' })).toBe(true)
+      expect(shouldRenderAsVue({ type: 'number' })).toBe(true)
+      expect(shouldRenderAsVue({ type: 'combo' })).toBe(true)
+    })
+
+    it('should return true even for unknown types (fallback to STRING)', () => {
+      expect(shouldRenderAsVue({ type: 'unknown_type' })).toBe(true)
+    })
+
+    it('should respect options while checking type', () => {
+      const widget = { type: 'text', options: { someOption: 'value' } }
+      expect(shouldRenderAsVue(widget)).toBe(true)
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle widgets with empty options', () => {
+      const widget = { type: 'text', options: {} }
+      expect(shouldRenderAsVue(widget)).toBe(true)
+    })
+
+    it('should handle case sensitivity correctly', () => {
+      // Test that both lowercase and uppercase work
+      expect(getWidgetComponent('string')).toBe(WidgetType.STRING)
+      expect(getWidgetComponent('STRING')).toBe(WidgetType.STRING)
+      expect(getWidgetComponent('combo')).toBe(WidgetType.COMBO)
+      expect(getWidgetComponent('COMBO')).toBe(WidgetType.COMBO)
+    })
+  })
+})
diff --git a/tests-ui/tests/composables/graph/useWidgetValue.test.ts b/tests-ui/tests/composables/graph/useWidgetValue.test.ts
new file mode 100644
index 0000000000..1557230740
--- /dev/null
+++ b/tests-ui/tests/composables/graph/useWidgetValue.test.ts
@@ -0,0 +1,503 @@
+import {
+  type MockedFunction,
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi
+} from 'vitest'
+import { ref } from 'vue'
+
+import {
+  useBooleanWidgetValue,
+  useNumberWidgetValue,
+  useStringWidgetValue,
+  useWidgetValue
+} from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+describe('useWidgetValue', () => {
+  let mockWidget: SimplifiedWidget<string>
+  let mockEmit: MockedFunction<(event: 'update:modelValue', value: any) => void>
+  let consoleWarnSpy: ReturnType<typeof vi.spyOn>
+
+  beforeEach(() => {
+    mockWidget = {
+      name: 'testWidget',
+      type: 'string',
+      value: 'initial',
+      callback: vi.fn()
+    }
+    mockEmit = vi.fn()
+    consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    consoleWarnSpy.mockRestore()
+  })
+
+  describe('basic functionality', () => {
+    it('should initialize with modelValue', () => {
+      const { localValue } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: 'test value',
+        defaultValue: '',
+        emit: mockEmit
+      })
+
+      expect(localValue.value).toBe('test value')
+    })
+
+    it('should use defaultValue when modelValue is null', () => {
+      const { localValue } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: null as any,
+        defaultValue: 'default',
+        emit: mockEmit
+      })
+
+      expect(localValue.value).toBe('default')
+    })
+
+    it('should use defaultValue when modelValue is undefined', () => {
+      const { localValue } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: undefined as any,
+        defaultValue: 'default',
+        emit: mockEmit
+      })
+
+      expect(localValue.value).toBe('default')
+    })
+  })
+
+  describe('onChange handler', () => {
+    it('should update localValue immediately', () => {
+      const { localValue, onChange } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: 'initial',
+        defaultValue: '',
+        emit: mockEmit
+      })
+
+      onChange('new value')
+      expect(localValue.value).toBe('new value')
+    })
+
+    it('should emit update:modelValue event', () => {
+      const { onChange } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: 'initial',
+        defaultValue: '',
+        emit: mockEmit
+      })
+
+      onChange('new value')
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', '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 }
+      const { onChange } = useWidgetValue({
+        widget: widgetWithoutCallback,
+        modelValue: 'initial',
+        defaultValue: '',
+        emit: mockEmit
+      })
+
+      expect(() => onChange('new value')).not.toThrow()
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 'new value')
+    })
+
+    it('should handle null values', () => {
+      const { localValue, onChange } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: 'initial',
+        defaultValue: 'default',
+        emit: mockEmit
+      })
+
+      onChange(null as any)
+      expect(localValue.value).toBe('default')
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 'default')
+    })
+
+    it('should handle undefined values', () => {
+      const { localValue, onChange } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: 'initial',
+        defaultValue: 'default',
+        emit: mockEmit
+      })
+
+      onChange(undefined as any)
+      expect(localValue.value).toBe('default')
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 'default')
+    })
+  })
+
+  describe('type safety', () => {
+    it('should handle type mismatches with warning', () => {
+      const numberWidget: SimplifiedWidget<number> = {
+        name: 'numberWidget',
+        type: 'number',
+        value: 42,
+        callback: vi.fn()
+      }
+
+      const { onChange } = useWidgetValue({
+        widget: numberWidget,
+        modelValue: 10,
+        defaultValue: 0,
+        emit: mockEmit
+      })
+
+      // Pass string to number widget
+      onChange('not a number' as any)
+
+      expect(consoleWarnSpy).toHaveBeenCalledWith(
+        'useWidgetValue: Type mismatch for widget numberWidget. Expected number, got string'
+      )
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 0) // Uses defaultValue
+    })
+
+    it('should accept values of matching type', () => {
+      const numberWidget: SimplifiedWidget<number> = {
+        name: 'numberWidget',
+        type: 'number',
+        value: 42,
+        callback: vi.fn()
+      }
+
+      const { onChange } = useWidgetValue({
+        widget: numberWidget,
+        modelValue: 10,
+        defaultValue: 0,
+        emit: mockEmit
+      })
+
+      onChange(25)
+      expect(consoleWarnSpy).not.toHaveBeenCalled()
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 25)
+    })
+  })
+
+  describe('transform function', () => {
+    it('should apply transform function to new values', () => {
+      const transform = vi.fn((value: string) => value.toUpperCase())
+      const { onChange } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: 'initial',
+        defaultValue: '',
+        emit: mockEmit,
+        transform
+      })
+
+      onChange('hello')
+      expect(transform).toHaveBeenCalledWith('hello')
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 'HELLO')
+    })
+
+    it('should skip type checking when transform is provided', () => {
+      const numberWidget: SimplifiedWidget<number> = {
+        name: 'numberWidget',
+        type: 'number',
+        value: 42,
+        callback: vi.fn()
+      }
+
+      const transform = (value: string) => parseInt(value, 10) || 0
+      const { onChange } = useWidgetValue({
+        widget: numberWidget,
+        modelValue: 10,
+        defaultValue: 0,
+        emit: mockEmit,
+        transform
+      })
+
+      onChange('123')
+      expect(consoleWarnSpy).not.toHaveBeenCalled()
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 123)
+    })
+  })
+
+  describe('external updates', () => {
+    it('should update localValue when modelValue changes', async () => {
+      const modelValue = ref('initial')
+      const { localValue } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: modelValue.value,
+        defaultValue: '',
+        emit: mockEmit
+      })
+
+      expect(localValue.value).toBe('initial')
+
+      // Simulate parent updating modelValue
+      modelValue.value = 'updated externally'
+
+      // Re-create the composable with new value (simulating prop change)
+      const { localValue: newLocalValue } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: modelValue.value,
+        defaultValue: '',
+        emit: mockEmit
+      })
+
+      expect(newLocalValue.value).toBe('updated externally')
+    })
+
+    it('should handle external null values', async () => {
+      const modelValue = ref<string | null>('initial')
+      const { localValue } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: modelValue.value!,
+        defaultValue: 'default',
+        emit: mockEmit
+      })
+
+      expect(localValue.value).toBe('initial')
+
+      // Simulate external update to null
+      modelValue.value = null
+      const { localValue: newLocalValue } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: modelValue.value as any,
+        defaultValue: 'default',
+        emit: mockEmit
+      })
+
+      expect(newLocalValue.value).toBe('default')
+    })
+  })
+
+  describe('useStringWidgetValue helper', () => {
+    it('should handle string values correctly', () => {
+      const stringWidget: SimplifiedWidget<string> = {
+        name: 'textWidget',
+        type: 'string',
+        value: 'hello',
+        callback: vi.fn()
+      }
+
+      const { localValue, onChange } = useStringWidgetValue(
+        stringWidget,
+        'initial',
+        mockEmit
+      )
+
+      expect(localValue.value).toBe('initial')
+
+      onChange('new string')
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 'new string')
+    })
+
+    it('should transform undefined to empty string', () => {
+      const stringWidget: SimplifiedWidget<string> = {
+        name: 'textWidget',
+        type: 'string',
+        value: '',
+        callback: vi.fn()
+      }
+
+      const { onChange } = useStringWidgetValue(stringWidget, '', mockEmit)
+
+      onChange(undefined as any)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', '')
+    })
+
+    it('should convert non-string values to string', () => {
+      const stringWidget: SimplifiedWidget<string> = {
+        name: 'textWidget',
+        type: 'string',
+        value: '',
+        callback: vi.fn()
+      }
+
+      const { onChange } = useStringWidgetValue(stringWidget, '', mockEmit)
+
+      onChange(123 as any)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', '123')
+    })
+  })
+
+  describe('useNumberWidgetValue helper', () => {
+    it('should handle number values correctly', () => {
+      const numberWidget: SimplifiedWidget<number> = {
+        name: 'sliderWidget',
+        type: 'number',
+        value: 50,
+        callback: vi.fn()
+      }
+
+      const { localValue, onChange } = useNumberWidgetValue(
+        numberWidget,
+        25,
+        mockEmit
+      )
+
+      expect(localValue.value).toBe(25)
+
+      onChange(75)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 75)
+    })
+
+    it('should handle array values from PrimeVue Slider', () => {
+      const numberWidget: SimplifiedWidget<number> = {
+        name: 'sliderWidget',
+        type: 'number',
+        value: 50,
+        callback: vi.fn()
+      }
+
+      const { onChange } = useNumberWidgetValue(numberWidget, 25, mockEmit)
+
+      // PrimeVue Slider can emit number[]
+      onChange([42, 100] as any)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 42)
+    })
+
+    it('should handle empty array', () => {
+      const numberWidget: SimplifiedWidget<number> = {
+        name: 'sliderWidget',
+        type: 'number',
+        value: 50,
+        callback: vi.fn()
+      }
+
+      const { onChange } = useNumberWidgetValue(numberWidget, 25, mockEmit)
+
+      onChange([] as any)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 0)
+    })
+
+    it('should convert string numbers', () => {
+      const numberWidget: SimplifiedWidget<number> = {
+        name: 'numberWidget',
+        type: 'number',
+        value: 0,
+        callback: vi.fn()
+      }
+
+      const { onChange } = useNumberWidgetValue(numberWidget, 0, mockEmit)
+
+      onChange('42' as any)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 42)
+    })
+
+    it('should handle invalid number conversions', () => {
+      const numberWidget: SimplifiedWidget<number> = {
+        name: 'numberWidget',
+        type: 'number',
+        value: 0,
+        callback: vi.fn()
+      }
+
+      const { onChange } = useNumberWidgetValue(numberWidget, 0, mockEmit)
+
+      onChange('not-a-number' as any)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 0)
+    })
+  })
+
+  describe('useBooleanWidgetValue helper', () => {
+    it('should handle boolean values correctly', () => {
+      const boolWidget: SimplifiedWidget<boolean> = {
+        name: 'toggleWidget',
+        type: 'boolean',
+        value: false,
+        callback: vi.fn()
+      }
+
+      const { localValue, onChange } = useBooleanWidgetValue(
+        boolWidget,
+        true,
+        mockEmit
+      )
+
+      expect(localValue.value).toBe(true)
+
+      onChange(false)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', false)
+    })
+
+    it('should convert truthy values to true', () => {
+      const boolWidget: SimplifiedWidget<boolean> = {
+        name: 'toggleWidget',
+        type: 'boolean',
+        value: false,
+        callback: vi.fn()
+      }
+
+      const { onChange } = useBooleanWidgetValue(boolWidget, false, mockEmit)
+
+      onChange('truthy' as any)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', true)
+    })
+
+    it('should convert falsy values to false', () => {
+      const boolWidget: SimplifiedWidget<boolean> = {
+        name: 'toggleWidget',
+        type: 'boolean',
+        value: false,
+        callback: vi.fn()
+      }
+
+      const { onChange } = useBooleanWidgetValue(boolWidget, true, mockEmit)
+
+      onChange(0 as any)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', false)
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle rapid onChange calls', () => {
+      const { onChange } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: 'initial',
+        defaultValue: '',
+        emit: mockEmit
+      })
+
+      onChange('value1')
+      onChange('value2')
+      onChange('value3')
+
+      expect(mockEmit).toHaveBeenCalledTimes(3)
+      expect(mockEmit).toHaveBeenNthCalledWith(1, 'update:modelValue', 'value1')
+      expect(mockEmit).toHaveBeenNthCalledWith(2, 'update:modelValue', 'value2')
+      expect(mockEmit).toHaveBeenNthCalledWith(3, 'update:modelValue', 'value3')
+    })
+
+    it('should handle widget with all properties undefined', () => {
+      const minimalWidget = {
+        name: 'minimal',
+        type: 'unknown'
+      } as SimplifiedWidget<any>
+
+      const { localValue, onChange } = useWidgetValue({
+        widget: minimalWidget,
+        modelValue: 'test',
+        defaultValue: 'default',
+        emit: mockEmit
+      })
+
+      expect(localValue.value).toBe('test')
+      expect(() => onChange('new')).not.toThrow()
+    })
+  })
+})
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/helpers/nodeTestHelpers.ts b/tests-ui/tests/helpers/nodeTestHelpers.ts
new file mode 100644
index 0000000000..c8b980399b
--- /dev/null
+++ b/tests-ui/tests/helpers/nodeTestHelpers.ts
@@ -0,0 +1,76 @@
+// Simple mock objects for testing Vue node components
+export function createMockWidget(overrides: any = {}) {
+  return {
+    name: 'test_widget',
+    type: 'number',
+    value: 0,
+    options: {},
+    callback: null,
+    ...overrides
+  }
+}
+
+// Create mock VueNodeData for testing
+export function createMockVueNodeData(overrides: any = {}) {
+  return {
+    id: 'node-1',
+    type: 'TestNode',
+    title: 'Test Node',
+    mode: 0,
+    selected: false,
+    executing: false,
+    widgets: [],
+    inputs: [],
+    outputs: [],
+    ...overrides
+  }
+}
+
+// Create a mock canvas context for transform testing
+export function createMockCanvasContext() {
+  return {
+    canvas: {
+      width: 1280,
+      height: 720,
+      getBoundingClientRect: () => ({
+        left: 0,
+        top: 0,
+        width: 1280,
+        height: 720,
+        right: 1280,
+        bottom: 720,
+        x: 0,
+        y: 0
+      })
+    },
+    ds: {
+      offset: [0, 0],
+      scale: 1
+    }
+  }
+}
+
+// Helper to create bounds for spatial testing
+export function createBounds(
+  x: number,
+  y: number,
+  width: number,
+  height: number
+) {
+  return {
+    x,
+    y,
+    width,
+    height
+  }
+}
+
+// Helper to create a position
+export function createPosition(x: number, y: number) {
+  return { x, y }
+}
+
+// Helper to create a size
+export function createSize(width: number, height: number) {
+  return { width, height }
+}
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/performance/QuadTreeBenchmark.ts b/tests-ui/tests/performance/QuadTreeBenchmark.ts
new file mode 100644
index 0000000000..04e7db9b6c
--- /dev/null
+++ b/tests-ui/tests/performance/QuadTreeBenchmark.ts
@@ -0,0 +1,225 @@
+/**
+ * Performance benchmark for QuadTree vs linear culling
+ * Measures query performance at different node counts and zoom levels
+ */
+import { type Bounds, QuadTree } from '../../../src/utils/spatial/QuadTree'
+
+export interface BenchmarkResult {
+  nodeCount: number
+  queryCount: number
+  linearTime: number
+  quadTreeTime: number
+  speedup: number
+  culledPercentage: number
+}
+
+export interface NodeData {
+  id: string
+  bounds: Bounds
+}
+
+export class QuadTreeBenchmark {
+  private worldBounds: Bounds = {
+    x: -5000,
+    y: -5000,
+    width: 10000,
+    height: 10000
+  }
+
+  // Generate random nodes with realistic clustering
+  generateNodes(count: number): NodeData[] {
+    const nodes: NodeData[] = []
+
+    for (let i = 0; i < count; i++) {
+      // 70% clustered, 30% scattered
+      const isClustered = Math.random() < 0.7
+
+      let x: number, y: number
+
+      if (isClustered) {
+        // Pick a cluster center
+        const clusterX = (Math.random() - 0.5) * 8000
+        const clusterY = (Math.random() - 0.5) * 8000
+
+        // Add node near cluster with gaussian distribution
+        x = clusterX + (Math.random() - 0.5) * 500
+        y = clusterY + (Math.random() - 0.5) * 500
+      } else {
+        // Scattered randomly
+        x = (Math.random() - 0.5) * 9000
+        y = (Math.random() - 0.5) * 9000
+      }
+
+      nodes.push({
+        id: `node_${i}`,
+        bounds: {
+          x,
+          y,
+          width: 200 + Math.random() * 100,
+          height: 100 + Math.random() * 50
+        }
+      })
+    }
+
+    return nodes
+  }
+
+  // Linear viewport culling (baseline)
+  linearCulling(nodes: NodeData[], viewport: Bounds): string[] {
+    const visible: string[] = []
+
+    for (const node of nodes) {
+      if (this.boundsIntersect(node.bounds, viewport)) {
+        visible.push(node.id)
+      }
+    }
+
+    return visible
+  }
+
+  // QuadTree viewport culling
+  quadTreeCulling(quadTree: QuadTree<string>, viewport: Bounds): string[] {
+    return quadTree.query(viewport)
+  }
+
+  // Check if two bounds intersect
+  private boundsIntersect(a: Bounds, b: Bounds): boolean {
+    return !(
+      a.x + a.width < b.x ||
+      b.x + b.width < a.x ||
+      a.y + a.height < b.y ||
+      b.y + b.height < a.y
+    )
+  }
+
+  // Run benchmark for specific configuration
+  runBenchmark(
+    nodeCount: number,
+    viewportSize: { width: number; height: number },
+    queryCount: number = 100
+  ): BenchmarkResult {
+    // Generate nodes
+    const nodes = this.generateNodes(nodeCount)
+
+    // Build QuadTree
+    const quadTree = new QuadTree<string>(this.worldBounds, {
+      maxDepth: Math.ceil(Math.log2(nodeCount / 4)),
+      maxItemsPerNode: 4
+    })
+
+    for (const node of nodes) {
+      quadTree.insert(node.id, node.bounds, node.id)
+    }
+
+    // Generate random viewports for testing
+    const viewports: Bounds[] = []
+    for (let i = 0; i < queryCount; i++) {
+      const x =
+        (Math.random() - 0.5) * (this.worldBounds.width - viewportSize.width)
+      const y =
+        (Math.random() - 0.5) * (this.worldBounds.height - viewportSize.height)
+      viewports.push({
+        x,
+        y,
+        width: viewportSize.width,
+        height: viewportSize.height
+      })
+    }
+
+    // Benchmark linear culling
+    const linearStart = performance.now()
+    let linearVisibleTotal = 0
+    for (const viewport of viewports) {
+      const visible = this.linearCulling(nodes, viewport)
+      linearVisibleTotal += visible.length
+    }
+    const linearTime = performance.now() - linearStart
+
+    // Benchmark QuadTree culling
+    const quadTreeStart = performance.now()
+    let quadTreeVisibleTotal = 0
+    for (const viewport of viewports) {
+      const visible = this.quadTreeCulling(quadTree, viewport)
+      quadTreeVisibleTotal += visible.length
+    }
+    const quadTreeTime = performance.now() - quadTreeStart
+
+    // Calculate metrics
+    const avgVisible = linearVisibleTotal / queryCount
+    const culledPercentage = ((nodeCount - avgVisible) / nodeCount) * 100
+
+    return {
+      nodeCount,
+      queryCount,
+      linearTime,
+      quadTreeTime,
+      speedup: linearTime / quadTreeTime,
+      culledPercentage
+    }
+  }
+
+  // Run comprehensive benchmark suite
+  runBenchmarkSuite(): BenchmarkResult[] {
+    const nodeCounts = [50, 100, 200, 500, 1000, 2000, 5000]
+    const viewportSizes = [
+      { width: 1920, height: 1080 }, // Full HD
+      { width: 800, height: 600 }, // Zoomed in
+      { width: 4000, height: 3000 } // Zoomed out
+    ]
+
+    const results: BenchmarkResult[] = []
+
+    for (const nodeCount of nodeCounts) {
+      for (const viewportSize of viewportSizes) {
+        const result = this.runBenchmark(nodeCount, viewportSize)
+        results.push(result)
+
+        console.log(
+          `Nodes: ${nodeCount}, ` +
+            `Viewport: ${viewportSize.width}x${viewportSize.height}, ` +
+            `Linear: ${result.linearTime.toFixed(2)}ms, ` +
+            `QuadTree: ${result.quadTreeTime.toFixed(2)}ms, ` +
+            `Speedup: ${result.speedup.toFixed(2)}x, ` +
+            `Culled: ${result.culledPercentage.toFixed(1)}%`
+        )
+      }
+    }
+
+    return results
+  }
+
+  // Find optimal maxDepth for given node count
+  findOptimalDepth(nodeCount: number): number {
+    const nodes = this.generateNodes(nodeCount)
+    const viewport = { x: 0, y: 0, width: 1920, height: 1080 }
+
+    let bestDepth = 1
+    let bestTime = Infinity
+
+    for (let depth = 1; depth <= 10; depth++) {
+      const quadTree = new QuadTree<string>(this.worldBounds, {
+        maxDepth: depth,
+        maxItemsPerNode: 4
+      })
+
+      // Build tree
+      for (const node of nodes) {
+        quadTree.insert(node.id, node.bounds, node.id)
+      }
+
+      // Measure query time
+      const start = performance.now()
+      for (let i = 0; i < 100; i++) {
+        quadTree.query(viewport)
+      }
+      const time = performance.now() - start
+
+      if (time < bestTime) {
+        bestTime = time
+        bestDepth = depth
+      }
+    }
+
+    return bestDepth
+  }
+}
diff --git a/tests-ui/tests/performance/spatialIndexPerformance.test.ts b/tests-ui/tests/performance/spatialIndexPerformance.test.ts
new file mode 100644
index 0000000000..9f11ed2bd7
--- /dev/null
+++ b/tests-ui/tests/performance/spatialIndexPerformance.test.ts
@@ -0,0 +1,402 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { useSpatialIndex } from '@/composables/graph/useSpatialIndex'
+import type { Bounds } from '@/utils/spatial/QuadTree'
+
+describe('Spatial Index Performance', () => {
+  let spatialIndex: ReturnType<typeof useSpatialIndex>
+
+  beforeEach(() => {
+    spatialIndex = useSpatialIndex({
+      maxDepth: 6,
+      maxItemsPerNode: 4,
+      updateDebounceMs: 0 // Disable debouncing for tests
+    })
+  })
+
+  describe('large scale operations', () => {
+    it('should handle 1000 node insertions efficiently', () => {
+      const startTime = performance.now()
+
+      // Generate 1000 nodes in a realistic distribution
+      const nodes = Array.from({ length: 1000 }, (_, i) => ({
+        id: `node${i}`,
+        position: {
+          x: (Math.random() - 0.5) * 10000,
+          y: (Math.random() - 0.5) * 10000
+        },
+        size: {
+          width: 150 + Math.random() * 100,
+          height: 100 + Math.random() * 50
+        }
+      }))
+
+      spatialIndex.batchUpdate(nodes)
+
+      const insertTime = performance.now() - startTime
+
+      // Should insert 1000 nodes in under 100ms
+      expect(insertTime).toBeLessThan(100)
+      expect(spatialIndex.metrics.value.totalNodes).toBe(1000)
+    })
+
+    it('should maintain fast viewport queries under load', () => {
+      // First populate with many nodes
+      const nodes = Array.from({ length: 1000 }, (_, i) => ({
+        id: `node${i}`,
+        position: {
+          x: (Math.random() - 0.5) * 10000,
+          y: (Math.random() - 0.5) * 10000
+        },
+        size: { width: 200, height: 100 }
+      }))
+      spatialIndex.batchUpdate(nodes)
+
+      // Now benchmark viewport queries
+      const queryCount = 100
+      const viewportBounds: Bounds = {
+        x: -960,
+        y: -540,
+        width: 1920,
+        height: 1080
+      }
+
+      const startTime = performance.now()
+
+      for (let i = 0; i < queryCount; i++) {
+        // Vary viewport position to test different tree regions
+        const offsetX = (i % 10) * 500
+        const offsetY = Math.floor(i / 10) * 300
+        spatialIndex.queryViewport({
+          x: viewportBounds.x + offsetX,
+          y: viewportBounds.y + offsetY,
+          width: viewportBounds.width,
+          height: viewportBounds.height
+        })
+      }
+
+      const totalQueryTime = performance.now() - startTime
+      const avgQueryTime = totalQueryTime / queryCount
+
+      // Each query should take less than 2ms on average
+      expect(avgQueryTime).toBeLessThan(2)
+      expect(totalQueryTime).toBeLessThan(100) // 100 queries in under 100ms
+    })
+
+    it('should demonstrate performance advantage over linear search', () => {
+      // Create test data
+      const nodeCount = 500
+      const nodes = Array.from({ length: nodeCount }, (_, i) => ({
+        id: `node${i}`,
+        position: {
+          x: (Math.random() - 0.5) * 8000,
+          y: (Math.random() - 0.5) * 8000
+        },
+        size: { width: 200, height: 100 }
+      }))
+
+      // Populate spatial index
+      spatialIndex.batchUpdate(nodes)
+
+      const viewport: Bounds = { x: -500, y: -300, width: 1000, height: 600 }
+      const queryCount = 50
+
+      // Benchmark spatial index queries
+      const spatialStartTime = performance.now()
+      for (let i = 0; i < queryCount; i++) {
+        spatialIndex.queryViewport(viewport)
+      }
+      const spatialTime = performance.now() - spatialStartTime
+
+      // Benchmark linear search equivalent
+      const linearStartTime = performance.now()
+      for (let i = 0; i < queryCount; i++) {
+        nodes.filter((node) => {
+          const nodeRight = node.position.x + node.size.width
+          const nodeBottom = node.position.y + node.size.height
+          const viewportRight = viewport.x + viewport.width
+          const viewportBottom = viewport.y + viewport.height
+
+          return !(
+            nodeRight < viewport.x ||
+            node.position.x > viewportRight ||
+            nodeBottom < viewport.y ||
+            node.position.y > viewportBottom
+          )
+        })
+      }
+      const linearTime = performance.now() - linearStartTime
+
+      // Spatial index should be faster than linear search
+      const speedup = linearTime / spatialTime
+      // In some environments, speedup may be less due to small dataset
+      // Just ensure spatial is not significantly slower (at least 10% of linear speed)
+      expect(speedup).toBeGreaterThan(0.1)
+
+      // Both should find roughly the same number of nodes
+      const spatialResults = spatialIndex.queryViewport(viewport)
+      const linearResults = nodes.filter((node) => {
+        const nodeRight = node.position.x + node.size.width
+        const nodeBottom = node.position.y + node.size.height
+        const viewportRight = viewport.x + viewport.width
+        const viewportBottom = viewport.y + viewport.height
+
+        return !(
+          nodeRight < viewport.x ||
+          node.position.x > viewportRight ||
+          nodeBottom < viewport.y ||
+          node.position.y > viewportBottom
+        )
+      })
+
+      // Results should be similar (within 10% due to QuadTree boundary effects)
+      const resultsDiff = Math.abs(spatialResults.length - linearResults.length)
+      const maxDiff =
+        Math.max(spatialResults.length, linearResults.length) * 0.1
+      expect(resultsDiff).toBeLessThan(maxDiff)
+    })
+  })
+
+  describe('update performance', () => {
+    it('should handle frequent position updates efficiently', () => {
+      // Add initial nodes
+      const nodeCount = 200
+      const initialNodes = Array.from({ length: nodeCount }, (_, i) => ({
+        id: `node${i}`,
+        position: { x: i * 100, y: i * 50 },
+        size: { width: 200, height: 100 }
+      }))
+      spatialIndex.batchUpdate(initialNodes)
+
+      // Benchmark frequent updates (simulating animation/dragging)
+      const updateCount = 100
+      const startTime = performance.now()
+
+      for (let frame = 0; frame < updateCount; frame++) {
+        // Update a subset of nodes each frame
+        for (let i = 0; i < 20; i++) {
+          const nodeId = `node${i}`
+          spatialIndex.updateNode(
+            nodeId,
+            {
+              x: i * 100 + Math.sin(frame * 0.1) * 50,
+              y: i * 50 + Math.cos(frame * 0.1) * 30
+            },
+            { width: 200, height: 100 }
+          )
+        }
+      }
+
+      const updateTime = performance.now() - startTime
+      const avgFrameTime = updateTime / updateCount
+
+      // Should maintain 60fps (16.67ms per frame) with 20 node updates per frame
+      expect(avgFrameTime).toBeLessThan(8) // Conservative target: 8ms per frame
+    })
+
+    it('should handle node additions and removals efficiently', () => {
+      const startTime = performance.now()
+
+      // Add nodes
+      for (let i = 0; i < 100; i++) {
+        spatialIndex.updateNode(
+          `node${i}`,
+          { x: Math.random() * 1000, y: Math.random() * 1000 },
+          { width: 200, height: 100 }
+        )
+      }
+
+      // Remove half of them
+      for (let i = 0; i < 50; i++) {
+        spatialIndex.removeNode(`node${i}`)
+      }
+
+      // Add new ones
+      for (let i = 100; i < 150; i++) {
+        spatialIndex.updateNode(
+          `node${i}`,
+          { x: Math.random() * 1000, y: Math.random() * 1000 },
+          { width: 200, height: 100 }
+        )
+      }
+
+      const totalTime = performance.now() - startTime
+
+      // All operations should complete quickly
+      expect(totalTime).toBeLessThan(50)
+      expect(spatialIndex.metrics.value.totalNodes).toBe(100) // 50 remaining + 50 new
+    })
+  })
+
+  describe('memory and scaling', () => {
+    it('should scale efficiently with increasing node counts', () => {
+      const nodeCounts = [100, 200, 500, 1000]
+      const queryTimes: number[] = []
+
+      for (const nodeCount of nodeCounts) {
+        // Create fresh spatial index for each test
+        const testIndex = useSpatialIndex({ updateDebounceMs: 0 })
+
+        // Populate with nodes
+        const nodes = Array.from({ length: nodeCount }, (_, i) => ({
+          id: `node${i}`,
+          position: {
+            x: (Math.random() - 0.5) * 10000,
+            y: (Math.random() - 0.5) * 10000
+          },
+          size: { width: 200, height: 100 }
+        }))
+        testIndex.batchUpdate(nodes)
+
+        // Benchmark query time
+        const viewport: Bounds = { x: -500, y: -300, width: 1000, height: 600 }
+        const startTime = performance.now()
+
+        for (let i = 0; i < 10; i++) {
+          testIndex.queryViewport(viewport)
+        }
+
+        const avgTime = (performance.now() - startTime) / 10
+        queryTimes.push(avgTime)
+      }
+
+      // Query time should scale logarithmically, not linearly
+      // The ratio between 1000 nodes and 100 nodes should be less than 5x
+      const ratio100to1000 = queryTimes[3] / queryTimes[0]
+      expect(ratio100to1000).toBeLessThan(5)
+
+      // All query times should be reasonable
+      queryTimes.forEach((time) => {
+        expect(time).toBeLessThan(5) // Each query under 5ms
+      })
+    })
+
+    it('should handle edge cases without performance degradation', () => {
+      // Test with very large nodes
+      spatialIndex.updateNode(
+        'huge-node',
+        { x: -1000, y: -1000 },
+        { width: 5000, height: 3000 }
+      )
+
+      // Test with many tiny nodes
+      for (let i = 0; i < 100; i++) {
+        spatialIndex.updateNode(
+          `tiny-${i}`,
+          { x: Math.random() * 100, y: Math.random() * 100 },
+          { width: 1, height: 1 }
+        )
+      }
+
+      // Test with nodes at extreme coordinates
+      spatialIndex.updateNode(
+        'extreme-pos',
+        { x: 50000, y: -50000 },
+        { width: 200, height: 100 }
+      )
+
+      spatialIndex.updateNode(
+        'extreme-neg',
+        { x: -50000, y: 50000 },
+        { width: 200, height: 100 }
+      )
+
+      // Queries should still be fast
+      const startTime = performance.now()
+      for (let i = 0; i < 20; i++) {
+        spatialIndex.queryViewport({
+          x: Math.random() * 1000 - 500,
+          y: Math.random() * 1000 - 500,
+          width: 1000,
+          height: 600
+        })
+      }
+      const queryTime = performance.now() - startTime
+
+      expect(queryTime).toBeLessThan(20) // 20 queries in under 20ms
+    })
+  })
+
+  describe('realistic workflow scenarios', () => {
+    it('should handle typical ComfyUI workflow performance', () => {
+      // Simulate a large ComfyUI workflow with clustered nodes
+      const clusters = [
+        { center: { x: 0, y: 0 }, nodeCount: 50 },
+        { center: { x: 2000, y: 0 }, nodeCount: 30 },
+        { center: { x: 4000, y: 1000 }, nodeCount: 40 },
+        { center: { x: 0, y: 2000 }, nodeCount: 35 }
+      ]
+
+      let nodeId = 0
+      const allNodes: Array<{
+        id: string
+        position: { x: number; y: number }
+        size: { width: number; height: number }
+      }> = []
+
+      // Create clustered nodes (realistic for ComfyUI workflows)
+      clusters.forEach((cluster) => {
+        for (let i = 0; i < cluster.nodeCount; i++) {
+          allNodes.push({
+            id: `node${nodeId++}`,
+            position: {
+              x: cluster.center.x + (Math.random() - 0.5) * 800,
+              y: cluster.center.y + (Math.random() - 0.5) * 600
+            },
+            size: {
+              width: 150 + Math.random() * 100,
+              height: 100 + Math.random() * 50
+            }
+          })
+        }
+      })
+
+      // Add the nodes
+      const setupTime = performance.now()
+      spatialIndex.batchUpdate(allNodes)
+      const setupDuration = performance.now() - setupTime
+
+      // Simulate user panning around the workflow
+      const viewportSize = { width: 1920, height: 1080 }
+      const panPositions = [
+        { x: -960, y: -540 }, // Center on first cluster
+        { x: 1040, y: -540 }, // Pan to second cluster
+        { x: 3040, y: 460 }, // Pan to third cluster
+        { x: -960, y: 1460 }, // Pan to fourth cluster
+        { x: 1000, y: 500 } // Overview position
+      ]
+
+      const panStartTime = performance.now()
+      const queryResults: number[] = []
+
+      panPositions.forEach((pos) => {
+        // Simulate multiple viewport queries during smooth panning
+        for (let step = 0; step < 10; step++) {
+          const results = spatialIndex.queryViewport({
+            x: pos.x + step * 20,
+            y: pos.y + step * 10,
+            width: viewportSize.width,
+            height: viewportSize.height
+          })
+          queryResults.push(results.length)
+        }
+      })
+
+      const panDuration = performance.now() - panStartTime
+      const avgQueryTime = panDuration / (panPositions.length * 10)
+
+      // Performance expectations for realistic workflows
+      expect(setupDuration).toBeLessThan(30) // Setup 155 nodes in under 30ms
+      expect(avgQueryTime).toBeLessThan(1.5) // Average query under 1.5ms
+      expect(panDuration).toBeLessThan(50) // All panning queries under 50ms
+
+      // Should have reasonable culling efficiency
+      const totalNodes = allNodes.length
+      const avgVisibleNodes =
+        queryResults.reduce((a, b) => a + b, 0) / queryResults.length
+      const cullRatio = (totalNodes - avgVisibleNodes) / totalNodes
+
+      expect(cullRatio).toBeGreaterThan(0.3) // At least 30% culling efficiency
+    })
+  })
+})
diff --git a/tests-ui/tests/performance/transformPerformance.test.ts b/tests-ui/tests/performance/transformPerformance.test.ts
new file mode 100644
index 0000000000..66b3e636a6
--- /dev/null
+++ b/tests-ui/tests/performance/transformPerformance.test.ts
@@ -0,0 +1,479 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { useTransformState } from '@/composables/element/useTransformState'
+
+// Mock canvas context for testing
+const createMockCanvasContext = () => ({
+  ds: {
+    offset: [0, 0] as [number, number],
+    scale: 1
+  }
+})
+
+describe('Transform Performance', () => {
+  let transformState: ReturnType<typeof useTransformState>
+  let mockCanvas: any
+
+  beforeEach(() => {
+    transformState = useTransformState()
+    mockCanvas = createMockCanvasContext()
+  })
+
+  describe('coordinate conversion performance', () => {
+    it('should handle large batches of coordinate conversions efficiently', () => {
+      // Set up a realistic transform state
+      mockCanvas.ds.offset = [500, 300]
+      mockCanvas.ds.scale = 1.5
+      transformState.syncWithCanvas(mockCanvas)
+
+      const conversionCount = 10000
+      const points = Array.from({ length: conversionCount }, () => ({
+        x: Math.random() * 5000,
+        y: Math.random() * 3000
+      }))
+
+      // Benchmark canvas to screen conversions
+      const canvasToScreenStart = performance.now()
+      const screenPoints = points.map((point) =>
+        transformState.canvasToScreen(point)
+      )
+      const canvasToScreenTime = performance.now() - canvasToScreenStart
+
+      // Benchmark screen to canvas conversions
+      const screenToCanvasStart = performance.now()
+      const backToCanvas = screenPoints.map((point) =>
+        transformState.screenToCanvas(point)
+      )
+      const screenToCanvasTime = performance.now() - screenToCanvasStart
+
+      // Performance expectations
+      expect(canvasToScreenTime).toBeLessThan(20) // 10k conversions in under 20ms
+      expect(screenToCanvasTime).toBeLessThan(20) // 10k conversions in under 20ms
+
+      // Verify accuracy of round-trip conversion
+      const maxError = points.reduce((max, original, i) => {
+        const converted = backToCanvas[i]
+        const errorX = Math.abs(original.x - converted.x)
+        const errorY = Math.abs(original.y - converted.y)
+        return Math.max(max, errorX, errorY)
+      }, 0)
+
+      expect(maxError).toBeLessThan(0.001) // Sub-pixel accuracy
+    })
+
+    it('should maintain performance across different zoom levels', () => {
+      const zoomLevels = [0.1, 0.5, 1.0, 2.0, 5.0, 10.0]
+      const conversionCount = 1000
+      const testPoints = Array.from({ length: conversionCount }, () => ({
+        x: Math.random() * 2000,
+        y: Math.random() * 1500
+      }))
+
+      const performanceResults: number[] = []
+
+      zoomLevels.forEach((scale) => {
+        mockCanvas.ds.scale = scale
+        transformState.syncWithCanvas(mockCanvas)
+
+        const startTime = performance.now()
+        testPoints.forEach((point) => {
+          const screen = transformState.canvasToScreen(point)
+          transformState.screenToCanvas(screen)
+        })
+        const duration = performance.now() - startTime
+
+        performanceResults.push(duration)
+      })
+
+      // Performance should be consistent across zoom levels
+      const maxTime = Math.max(...performanceResults)
+      const minTime = Math.min(...performanceResults)
+      const variance = (maxTime - minTime) / minTime
+
+      expect(maxTime).toBeLessThan(20) // All zoom levels under 20ms
+      expect(variance).toBeLessThan(3.0) // Less than 300% variance between zoom levels
+    })
+
+    it('should handle extreme coordinate values efficiently', () => {
+      // Test with very large coordinate values
+      const extremePoints = [
+        { x: -100000, y: -100000 },
+        { x: 100000, y: 100000 },
+        { x: 0, y: 0 },
+        { x: -50000, y: 50000 },
+        { x: 1e6, y: -1e6 }
+      ]
+
+      // Test at extreme zoom levels
+      const extremeScales = [0.001, 1000]
+
+      extremeScales.forEach((scale) => {
+        mockCanvas.ds.scale = scale
+        mockCanvas.ds.offset = [1000, 500]
+        transformState.syncWithCanvas(mockCanvas)
+
+        const startTime = performance.now()
+
+        // Convert each point 100 times
+        extremePoints.forEach((point) => {
+          for (let i = 0; i < 100; i++) {
+            const screen = transformState.canvasToScreen(point)
+            transformState.screenToCanvas(screen)
+          }
+        })
+
+        const duration = performance.now() - startTime
+
+        expect(duration).toBeLessThan(5) // Should handle extremes efficiently
+        expect(
+          Number.isFinite(transformState.canvasToScreen(extremePoints[0]).x)
+        ).toBe(true)
+        expect(
+          Number.isFinite(transformState.canvasToScreen(extremePoints[0]).y)
+        ).toBe(true)
+      })
+    })
+  })
+
+  describe('viewport culling performance', () => {
+    it('should efficiently determine node visibility for large numbers of nodes', () => {
+      // Set up realistic viewport
+      const viewport = { width: 1920, height: 1080 }
+
+      // Generate many node positions
+      const nodeCount = 1000
+      const nodes = Array.from({ length: nodeCount }, () => ({
+        pos: [Math.random() * 10000, Math.random() * 6000] as ArrayLike<number>,
+        size: [
+          150 + Math.random() * 100,
+          100 + Math.random() * 50
+        ] as ArrayLike<number>
+      }))
+
+      // Test at different zoom levels and positions
+      const testConfigs = [
+        { scale: 0.5, offset: [0, 0] },
+        { scale: 1.0, offset: [2000, 1000] },
+        { scale: 2.0, offset: [-1000, -500] }
+      ]
+
+      testConfigs.forEach((config) => {
+        mockCanvas.ds.scale = config.scale
+        mockCanvas.ds.offset = config.offset
+        transformState.syncWithCanvas(mockCanvas)
+
+        const startTime = performance.now()
+
+        // Test viewport culling for all nodes
+        const visibleNodes = nodes.filter((node) =>
+          transformState.isNodeInViewport(node.pos, node.size, viewport)
+        )
+
+        const cullTime = performance.now() - startTime
+
+        expect(cullTime).toBeLessThan(10) // 1000 nodes culled in under 10ms
+        expect(visibleNodes.length).toBeLessThan(nodeCount) // Some culling should occur
+        expect(visibleNodes.length).toBeGreaterThanOrEqual(0) // Sanity check
+      })
+    })
+
+    it('should optimize culling with adaptive margins', () => {
+      const viewport = { width: 1280, height: 720 }
+      const testNode = {
+        pos: [1300, 100] as ArrayLike<number>, // Just outside viewport
+        size: [200, 100] as ArrayLike<number>
+      }
+
+      // Test margin adaptation at different zoom levels
+      const zoomTests = [
+        { scale: 0.05, expectedVisible: true }, // Low zoom, larger margin
+        { scale: 1.0, expectedVisible: true }, // Normal zoom, standard margin
+        { scale: 4.0, expectedVisible: false } // High zoom, tighter margin
+      ]
+
+      const marginTests: boolean[] = []
+      const timings: number[] = []
+
+      zoomTests.forEach((test) => {
+        mockCanvas.ds.scale = test.scale
+        mockCanvas.ds.offset = [0, 0]
+        transformState.syncWithCanvas(mockCanvas)
+
+        const startTime = performance.now()
+        const isVisible = transformState.isNodeInViewport(
+          testNode.pos,
+          testNode.size,
+          viewport,
+          0.2 // 20% margin
+        )
+        const duration = performance.now() - startTime
+
+        marginTests.push(isVisible)
+        timings.push(duration)
+      })
+
+      // All culling operations should be very fast
+      timings.forEach((time) => {
+        expect(time).toBeLessThan(0.1) // Individual culling under 0.1ms
+      })
+
+      // Verify adaptive behavior (margins should work as expected)
+      expect(marginTests[0]).toBe(zoomTests[0].expectedVisible)
+      expect(marginTests[2]).toBe(zoomTests[2].expectedVisible)
+    })
+
+    it('should handle size-based culling efficiently', () => {
+      // Test nodes of various sizes
+      const nodeSizes = [
+        [1, 1], // Tiny node
+        [5, 5], // Small node
+        [50, 50], // Medium node
+        [200, 100], // Large node
+        [500, 300] // Very large node
+      ]
+
+      const viewport = { width: 1920, height: 1080 }
+
+      // Position all nodes in viewport center
+      const centerPos = [960, 540] as ArrayLike<number>
+
+      nodeSizes.forEach((size) => {
+        // Test at very low zoom where size culling should activate
+        mockCanvas.ds.scale = 0.01 // Very low zoom
+        transformState.syncWithCanvas(mockCanvas)
+
+        const startTime = performance.now()
+        const isVisible = transformState.isNodeInViewport(
+          centerPos,
+          size as ArrayLike<number>,
+          viewport
+        )
+        const cullTime = performance.now() - startTime
+
+        expect(cullTime).toBeLessThan(0.1) // Size culling under 0.1ms
+
+        // At 0.01 zoom, nodes need to be 400+ pixels to show as 4+ screen pixels
+        const screenSize = Math.max(size[0], size[1]) * 0.01
+        if (screenSize < 4) {
+          expect(isVisible).toBe(false)
+        } else {
+          expect(isVisible).toBe(true)
+        }
+      })
+    })
+  })
+
+  describe('transform state synchronization', () => {
+    it('should efficiently sync with canvas state changes', () => {
+      const syncCount = 1000
+      const transformUpdates = Array.from({ length: syncCount }, (_, i) => ({
+        offset: [Math.sin(i * 0.1) * 1000, Math.cos(i * 0.1) * 500],
+        scale: 0.5 + Math.sin(i * 0.05) * 0.4 // Scale between 0.1 and 0.9
+      }))
+
+      const startTime = performance.now()
+
+      transformUpdates.forEach((update) => {
+        mockCanvas.ds.offset = update.offset
+        mockCanvas.ds.scale = update.scale
+        transformState.syncWithCanvas(mockCanvas)
+      })
+
+      const syncTime = performance.now() - startTime
+
+      expect(syncTime).toBeLessThan(15) // 1000 syncs in under 15ms
+
+      // Verify final state is correct
+      const lastUpdate = transformUpdates[transformUpdates.length - 1]
+      expect(transformState.camera.x).toBe(lastUpdate.offset[0])
+      expect(transformState.camera.y).toBe(lastUpdate.offset[1])
+      expect(transformState.camera.z).toBe(lastUpdate.scale)
+    })
+
+    it('should generate CSS transform strings efficiently', () => {
+      const transformCount = 10000
+
+      // Set up varying transform states
+      const transforms = Array.from({ length: transformCount }, (_, i) => {
+        mockCanvas.ds.offset = [i * 10, i * 5]
+        mockCanvas.ds.scale = 0.5 + (i % 100) / 100
+        transformState.syncWithCanvas(mockCanvas)
+        return transformState.transformStyle.value
+      })
+
+      const startTime = performance.now()
+
+      // Access transform styles (triggers computed property)
+      transforms.forEach((style) => {
+        expect(style.transform).toContain('scale(')
+        expect(style.transform).toContain('translate(')
+        expect(style.transformOrigin).toBe('0 0')
+      })
+
+      const accessTime = performance.now() - startTime
+
+      expect(accessTime).toBeLessThan(200) // 10k style accesses in under 200ms
+    })
+  })
+
+  describe('bounds calculation performance', () => {
+    it('should calculate node screen bounds efficiently', () => {
+      // Set up realistic transform
+      mockCanvas.ds.offset = [200, 100]
+      mockCanvas.ds.scale = 1.5
+      transformState.syncWithCanvas(mockCanvas)
+
+      const nodeCount = 1000
+      const nodes = Array.from({ length: nodeCount }, () => ({
+        pos: [Math.random() * 5000, Math.random() * 3000] as ArrayLike<number>,
+        size: [
+          100 + Math.random() * 200,
+          80 + Math.random() * 120
+        ] as ArrayLike<number>
+      }))
+
+      const startTime = performance.now()
+
+      const bounds = nodes.map((node) =>
+        transformState.getNodeScreenBounds(node.pos, node.size)
+      )
+
+      const calcTime = performance.now() - startTime
+
+      expect(calcTime).toBeLessThan(15) // 1000 bounds calculations in under 15ms
+      expect(bounds).toHaveLength(nodeCount)
+
+      // Verify bounds are reasonable
+      bounds.forEach((bound) => {
+        expect(bound.width).toBeGreaterThan(0)
+        expect(bound.height).toBeGreaterThan(0)
+        expect(Number.isFinite(bound.x)).toBe(true)
+        expect(Number.isFinite(bound.y)).toBe(true)
+      })
+    })
+
+    it('should calculate viewport bounds efficiently', () => {
+      const viewportSizes = [
+        { width: 800, height: 600 },
+        { width: 1920, height: 1080 },
+        { width: 3840, height: 2160 },
+        { width: 1280, height: 720 }
+      ]
+
+      const margins = [0, 0.1, 0.2, 0.5]
+
+      const combinations = viewportSizes.flatMap((viewport) =>
+        margins.map((margin) => ({ viewport, margin }))
+      )
+
+      const startTime = performance.now()
+
+      const allBounds = combinations.map(({ viewport, margin }) => {
+        mockCanvas.ds.offset = [Math.random() * 1000, Math.random() * 500]
+        mockCanvas.ds.scale = 0.5 + Math.random() * 2
+        transformState.syncWithCanvas(mockCanvas)
+
+        return transformState.getViewportBounds(viewport, margin)
+      })
+
+      const calcTime = performance.now() - startTime
+
+      expect(calcTime).toBeLessThan(5) // All viewport calculations in under 5ms
+      expect(allBounds).toHaveLength(combinations.length)
+
+      // Verify bounds are reasonable
+      allBounds.forEach((bounds) => {
+        expect(bounds.width).toBeGreaterThan(0)
+        expect(bounds.height).toBeGreaterThan(0)
+        expect(Number.isFinite(bounds.x)).toBe(true)
+        expect(Number.isFinite(bounds.y)).toBe(true)
+      })
+    })
+  })
+
+  describe('real-world performance scenarios', () => {
+    it('should handle smooth panning performance', () => {
+      // Simulate smooth 60fps panning for 2 seconds
+      const frameCount = 120 // 2 seconds at 60fps
+      const panDistance = 2000 // Pan 2000 pixels
+
+      const frames: number[] = []
+
+      for (let frame = 0; frame < frameCount; frame++) {
+        const progress = frame / (frameCount - 1)
+        const x = progress * panDistance
+        const y = Math.sin(progress * Math.PI * 2) * 200 // Slight vertical wave
+
+        mockCanvas.ds.offset = [x, y]
+
+        const frameStart = performance.now()
+
+        // Typical operations during panning
+        transformState.syncWithCanvas(mockCanvas)
+        const style = transformState.transformStyle.value // Access transform style
+        expect(style.transform).toContain('translate') // Verify style is valid
+
+        // Simulate some coordinate conversions (mouse tracking, etc.)
+        for (let i = 0; i < 5; i++) {
+          const screen = transformState.canvasToScreen({
+            x: x + i * 100,
+            y: y + i * 50
+          })
+          transformState.screenToCanvas(screen)
+        }
+
+        const frameTime = performance.now() - frameStart
+        frames.push(frameTime)
+
+        // Each frame should be well under 16.67ms for 60fps
+        expect(frameTime).toBeLessThan(1) // Conservative: under 1ms per frame
+      }
+
+      const totalTime = frames.reduce((sum, time) => sum + time, 0)
+      const avgFrameTime = totalTime / frameCount
+
+      expect(avgFrameTime).toBeLessThan(0.5) // Average frame time under 0.5ms
+      expect(totalTime).toBeLessThan(60) // Total panning overhead under 60ms
+    })
+
+    it('should handle zoom performance with viewport updates', () => {
+      // Simulate smooth zoom from 0.1x to 10x
+      const zoomSteps = 100
+      const viewport = { width: 1920, height: 1080 }
+
+      const zoomTimes: number[] = []
+
+      for (let step = 0; step < zoomSteps; step++) {
+        const zoomLevel = Math.pow(10, (step / (zoomSteps - 1)) * 2 - 1) // 0.1 to 10
+        mockCanvas.ds.scale = zoomLevel
+
+        const stepStart = performance.now()
+
+        // Operations during zoom
+        transformState.syncWithCanvas(mockCanvas)
+
+        // Viewport bounds calculation (for culling)
+        transformState.getViewportBounds(viewport, 0.2)
+
+        // Test a few nodes for visibility
+        for (let i = 0; i < 10; i++) {
+          transformState.isNodeInViewport(
+            [i * 200, i * 150],
+            [200, 100],
+            viewport
+          )
+        }
+
+        const stepTime = performance.now() - stepStart
+        zoomTimes.push(stepTime)
+      }
+
+      const maxZoomTime = Math.max(...zoomTimes)
+      const avgZoomTime =
+        zoomTimes.reduce((sum, time) => sum + time, 0) / zoomSteps
+
+      expect(maxZoomTime).toBeLessThan(2) // No zoom step over 2ms
+      expect(avgZoomTime).toBeLessThan(1) // Average zoom step under 1ms
+    })
+  })
+})
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/tests-ui/tests/utils/spatial/QuadTree.test.ts b/tests-ui/tests/utils/spatial/QuadTree.test.ts
new file mode 100644
index 0000000000..ea31e5682d
--- /dev/null
+++ b/tests-ui/tests/utils/spatial/QuadTree.test.ts
@@ -0,0 +1,269 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { type Bounds, QuadTree } from '@/utils/spatial/QuadTree'
+
+describe('QuadTree', () => {
+  let quadTree: QuadTree<string>
+  const worldBounds: Bounds = { x: 0, y: 0, width: 1000, height: 1000 }
+
+  beforeEach(() => {
+    quadTree = new QuadTree<string>(worldBounds, {
+      maxDepth: 4,
+      maxItemsPerNode: 4
+    })
+  })
+
+  describe('insertion', () => {
+    it('should insert items within bounds', () => {
+      const success = quadTree.insert(
+        'node1',
+        { x: 100, y: 100, width: 50, height: 50 },
+        'node1'
+      )
+      expect(success).toBe(true)
+      expect(quadTree.size).toBe(1)
+    })
+
+    it('should reject items outside bounds', () => {
+      const success = quadTree.insert(
+        'node1',
+        { x: -100, y: -100, width: 50, height: 50 },
+        'node1'
+      )
+      expect(success).toBe(false)
+      expect(quadTree.size).toBe(0)
+    })
+
+    it('should handle duplicate IDs by replacing', () => {
+      quadTree.insert(
+        'node1',
+        { x: 100, y: 100, width: 50, height: 50 },
+        'data1'
+      )
+      quadTree.insert(
+        'node1',
+        { x: 200, y: 200, width: 50, height: 50 },
+        'data2'
+      )
+
+      expect(quadTree.size).toBe(1)
+      const results = quadTree.query({
+        x: 150,
+        y: 150,
+        width: 100,
+        height: 100
+      })
+      expect(results).toContain('data2')
+      expect(results).not.toContain('data1')
+    })
+  })
+
+  describe('querying', () => {
+    beforeEach(() => {
+      // Insert test nodes in a grid pattern
+      for (let x = 0; x < 10; x++) {
+        for (let y = 0; y < 10; y++) {
+          const id = `node_${x}_${y}`
+          quadTree.insert(
+            id,
+            {
+              x: x * 100,
+              y: y * 100,
+              width: 50,
+              height: 50
+            },
+            id
+          )
+        }
+      }
+    })
+
+    it('should find nodes within query bounds', () => {
+      const results = quadTree.query({ x: 0, y: 0, width: 250, height: 250 })
+      expect(results.length).toBe(9) // 3x3 grid
+    })
+
+    it('should return empty array for out-of-bounds query', () => {
+      const results = quadTree.query({
+        x: 2000,
+        y: 2000,
+        width: 100,
+        height: 100
+      })
+      expect(results.length).toBe(0)
+    })
+
+    it('should handle partial overlaps', () => {
+      const results = quadTree.query({ x: 25, y: 25, width: 100, height: 100 })
+      expect(results.length).toBe(4) // 2x2 grid due to overlap
+    })
+
+    it('should handle large query areas efficiently', () => {
+      const startTime = performance.now()
+      const results = quadTree.query({ x: 0, y: 0, width: 1000, height: 1000 })
+      const queryTime = performance.now() - startTime
+
+      expect(results.length).toBe(100) // All nodes
+      expect(queryTime).toBeLessThan(5) // Should be fast
+    })
+  })
+
+  describe('removal', () => {
+    it('should remove existing items', () => {
+      quadTree.insert(
+        'node1',
+        { x: 100, y: 100, width: 50, height: 50 },
+        'node1'
+      )
+      expect(quadTree.size).toBe(1)
+
+      const success = quadTree.remove('node1')
+      expect(success).toBe(true)
+      expect(quadTree.size).toBe(0)
+    })
+
+    it('should handle removal of non-existent items', () => {
+      const success = quadTree.remove('nonexistent')
+      expect(success).toBe(false)
+    })
+  })
+
+  describe('updating', () => {
+    it('should update item position', () => {
+      quadTree.insert(
+        'node1',
+        { x: 100, y: 100, width: 50, height: 50 },
+        'node1'
+      )
+
+      const success = quadTree.update('node1', {
+        x: 200,
+        y: 200,
+        width: 50,
+        height: 50
+      })
+      expect(success).toBe(true)
+
+      // Should not find at old position
+      const oldResults = quadTree.query({
+        x: 75,
+        y: 75,
+        width: 100,
+        height: 100
+      })
+      expect(oldResults).not.toContain('node1')
+
+      // Should find at new position
+      const newResults = quadTree.query({
+        x: 175,
+        y: 175,
+        width: 100,
+        height: 100
+      })
+      expect(newResults).toContain('node1')
+    })
+  })
+
+  describe('subdivision', () => {
+    it('should subdivide when exceeding max items', () => {
+      // Insert 5 items (max is 4) to trigger subdivision
+      for (let i = 0; i < 5; i++) {
+        quadTree.insert(
+          `node${i}`,
+          {
+            x: i * 10,
+            y: i * 10,
+            width: 5,
+            height: 5
+          },
+          `node${i}`
+        )
+      }
+
+      expect(quadTree.size).toBe(5)
+
+      // Verify all items can still be found
+      const allResults = quadTree.query(worldBounds)
+      expect(allResults.length).toBe(5)
+    })
+  })
+
+  describe('performance', () => {
+    it('should handle 1000 nodes efficiently', () => {
+      const insertStart = performance.now()
+
+      // Insert 1000 nodes
+      for (let i = 0; i < 1000; i++) {
+        const x = Math.random() * 900
+        const y = Math.random() * 900
+        quadTree.insert(
+          `node${i}`,
+          {
+            x,
+            y,
+            width: 50,
+            height: 50
+          },
+          `node${i}`
+        )
+      }
+
+      const insertTime = performance.now() - insertStart
+      expect(insertTime).toBeLessThan(50) // Should be fast
+
+      // Query performance
+      const queryStart = performance.now()
+      const results = quadTree.query({
+        x: 400,
+        y: 400,
+        width: 200,
+        height: 200
+      })
+      const queryTime = performance.now() - queryStart
+
+      expect(queryTime).toBeLessThan(2) // Queries should be very fast
+      expect(results.length).toBeGreaterThan(0)
+      expect(results.length).toBeLessThan(1000) // Should cull most nodes
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle zero-sized bounds', () => {
+      const success = quadTree.insert(
+        'point',
+        { x: 100, y: 100, width: 0, height: 0 },
+        'point'
+      )
+      expect(success).toBe(true)
+
+      const results = quadTree.query({ x: 99, y: 99, width: 2, height: 2 })
+      expect(results).toContain('point')
+    })
+
+    it('should handle items spanning multiple quadrants', () => {
+      const success = quadTree.insert(
+        'large',
+        {
+          x: 400,
+          y: 400,
+          width: 200,
+          height: 200
+        },
+        'large'
+      )
+      expect(success).toBe(true)
+
+      // Should be found when querying any overlapping quadrant
+      const topLeft = quadTree.query({ x: 0, y: 0, width: 500, height: 500 })
+      const bottomRight = quadTree.query({
+        x: 500,
+        y: 500,
+        width: 500,
+        height: 500
+      })
+
+      expect(topLeft).toContain('large')
+      expect(bottomRight).toContain('large')
+    })
+  })
+})
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" }
   ]
 }