[refactor] Extract keybinding functionality into @comfyorg/keybinding package

Create framework-agnostic keybinding package following domain-driven design patterns.
Move pure business logic to package while keeping Vue integration in workbench layer.

Changes:
- Add @comfyorg/keybinding package with KeyComboImpl and KeybindingImpl classes
- Move core keybindings and reserved key constants to package
- Update workbench layer to import from package with backward compatibility
- Update all imports across codebase to use package exports
- Maintain existing API surface for consumers

browser_tests/fixtures/ComfyPage.ts

@@ -1,3 +1,4 @@
+import type { KeyCombo } from '@comfyorg/keybinding'
 import type { APIRequestContext, Locator, Page } from '@playwright/test'
 import { expect } from '@playwright/test'
 import { test as base } from '@playwright/test'
@@ -6,7 +7,6 @@ import * as fs from 'fs'
 
 import type { LGraphNode } from '../../src/lib/litegraph/src/litegraph'
 import type { NodeId } from '../../src/platform/workflow/validation/schemas/workflowSchema'
-import type { KeyCombo } from '../../src/schemas/keyBindingSchema'
 import type { useWorkspaceStore } from '../../src/stores/workspaceStore'
 import { NodeBadgeMode } from '../../src/types/nodeSource'
 import { ComfyActionbar } from '../helpers/actionbar'

browser_tests/tests/dialog.spec.ts

@@ -1,7 +1,7 @@
+import type { Keybinding } from '@comfyorg/keybinding'
 import type { Locator } from '@playwright/test'
 import { expect } from '@playwright/test'
 
-import type { Keybinding } from '../../src/schemas/keyBindingSchema'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {

package.json

@@ -107,6 +107,7 @@
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "0.4.73-0",
     "@comfyorg/design-system": "workspace:*",
+    "@comfyorg/keybinding": "workspace:*",
     "@comfyorg/registry-types": "workspace:*",
     "@comfyorg/tailwind-utils": "workspace:*",
     "@iconify/json": "^2.2.380",

packages/keybinding/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@comfyorg/keybinding",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Framework-agnostic keybinding system for ComfyUI",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "nx": {
+    "tags": [
+      "scope:shared",
+      "type:lib"
+    ]
+  },
+  "dependencies": {
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.5"
+  }
+}

packages/keybinding/src/constants/coreKeybindings.ts

@@ -1,4 +1,4 @@
-import type { Keybinding } from '@/platform/keybinding/types/keybinding'
+import type { Keybinding } from '../types/keybinding'
 
 export const CORE_KEYBINDINGS: Keybinding[] = [
   {

packages/keybinding/src/index.ts

@@ -0,0 +1,11 @@
+// Types
+export type * from './types/keybinding'
+export { zKeybinding } from './types/keybinding'
+
+// Models (Implementation classes)
+export { KeyComboImpl } from './models/KeyCombo'
+export { KeybindingImpl } from './models/Keybinding'
+
+// Constants
+export { CORE_KEYBINDINGS } from './constants/coreKeybindings'
+export { RESERVED_BY_TEXT_INPUT } from './constants/reservedKeyCombos'

packages/keybinding/src/models/KeyCombo.ts

@@ -0,0 +1,83 @@
+import { RESERVED_BY_TEXT_INPUT } from '../constants/reservedKeyCombos'
+import type { KeyCombo } from '../types/keybinding'
+
+export class KeyComboImpl implements KeyCombo {
+  key: string
+  // ctrl or meta(cmd on mac)
+  ctrl: boolean
+  alt: boolean
+  shift: boolean
+
+  constructor(obj: KeyCombo) {
+    this.key = obj.key
+    this.ctrl = obj.ctrl ?? false
+    this.alt = obj.alt ?? false
+    this.shift = obj.shift ?? false
+  }
+
+  static fromEvent(event: KeyboardEvent) {
+    return new KeyComboImpl({
+      key: event.key,
+      ctrl: event.ctrlKey || event.metaKey,
+      alt: event.altKey,
+      shift: event.shiftKey
+    })
+  }
+
+  equals(other: unknown): boolean {
+    return other instanceof KeyComboImpl
+      ? this.key.toUpperCase() === other.key.toUpperCase() &&
+          this.ctrl === other.ctrl &&
+          this.alt === other.alt &&
+          this.shift === other.shift
+      : false
+  }
+
+  serialize(): string {
+    return `${this.key.toUpperCase()}:${this.ctrl}:${this.alt}:${this.shift}`
+  }
+
+  toString(): string {
+    return this.getKeySequences().join(' + ')
+  }
+
+  get hasModifier(): boolean {
+    return this.ctrl || this.alt || this.shift
+  }
+
+  get isModifier(): boolean {
+    return ['Control', 'Meta', 'Alt', 'Shift'].includes(this.key)
+  }
+
+  get modifierCount(): number {
+    const modifiers = [this.ctrl, this.alt, this.shift]
+    return modifiers.reduce((acc, cur) => acc + Number(cur), 0)
+  }
+
+  get isShiftOnly(): boolean {
+    return this.shift && this.modifierCount === 1
+  }
+
+  get isReservedByTextInput(): boolean {
+    return (
+      !this.hasModifier ||
+      this.isShiftOnly ||
+      RESERVED_BY_TEXT_INPUT.has(this.toString())
+    )
+  }
+
+  getKeySequences(): string[] {
+    const sequences: string[] = []
+    if (this.ctrl) {
+      sequences.push('Ctrl')
+    }
+    if (this.alt) {
+      sequences.push('Alt')
+    }
+    if (this.shift) {
+      sequences.push('Shift')
+    }
+    sequences.push(this.key)
+    return sequences
+  }
+}

packages/keybinding/src/models/Keybinding.ts

@@ -0,0 +1,22 @@
+import type { Keybinding } from '../types/keybinding'
+import { KeyComboImpl } from './KeyCombo'
+
+export class KeybindingImpl implements Keybinding {
+  commandId: string
+  combo: KeyComboImpl
+  targetElementId?: string
+
+  constructor(obj: Keybinding) {
+    this.commandId = obj.commandId
+    this.combo = new KeyComboImpl(obj.combo)
+    this.targetElementId = obj.targetElementId
+  }
+
+  equals(other: unknown): boolean {
+    return other instanceof KeybindingImpl
+      ? this.commandId === other.commandId &&
+          this.combo.equals(other.combo) &&
+          this.targetElementId === other.targetElementId
+      : false
+  }
+}

packages/keybinding/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

pnpm-lock.yaml

@@ -20,6 +20,9 @@ importers:
       '@comfyorg/design-system':
         specifier: workspace:*
         version: link:packages/design-system
+      '@comfyorg/keybinding':
+        specifier: workspace:*
+        version: link:packages/keybinding
       '@comfyorg/registry-types':
         specifier: workspace:*
         version: link:packages/registry-types
@@ -371,6 +374,16 @@ importers:
         specifier: ^5.4.5
         version: 5.9.2
 
+  packages/keybinding:
+    dependencies:
+      zod:
+        specifier: ^3.22.4
+        version: 3.24.1
+    devDependencies:
+      typescript:
+        specifier: ^5.4.5
+        version: 5.9.2
+
   packages/registry-types: {}
 
   packages/shared-frontend-utils:

src/platform/settings/constants/coreSettings.ts

@@ -1,5 +1,6 @@
+import type { Keybinding } from '@comfyorg/keybinding'
+
 import { LinkMarkerShape, LiteGraph } from '@/lib/litegraph/src/litegraph'
-import type { Keybinding } from '@/platform/keybinding/types/keybinding'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import type { SettingParams } from '@/platform/settings/types'
 import type { ColorPalettes } from '@/schemas/colorPaletteSchema'

src/schemas/apiSchema.ts

@@ -1,7 +1,7 @@
+import { zKeybinding } from '@comfyorg/keybinding'
 import { z } from 'zod'
 
 import { LinkMarkerShape } from '@/lib/litegraph/src/litegraph'
-import { zKeybinding } from '@/platform/keybinding/types/keybinding'
 import {
   zComfyWorkflow,
   zNodeId

src/scripts/app.ts

@@ -1,3 +1,4 @@
+import { KeyComboImpl } from '@comfyorg/keybinding'
 import _ from 'es-toolkit/compat'
 import type { ToastMessageOptions } from 'primevue/toast'
 import { reactive } from 'vue'
@@ -80,10 +81,7 @@ import {
 } from '@/utils/migration/migrateReroute'
 import { getSelectedModelsMetadata } from '@/utils/modelMetadataUtil'
 import { deserialiseAndCreate } from '@/utils/vintageClipboard'
-import {
+import { useKeybindingStore } from '@/workbench/keybindings/stores/keybindingStore'
-  KeyComboImpl,
-  useKeybindingStore
-} from '@/workbench/keybindings/stores/keybindingStore'
 
 import { type ComfyApi, PromptExecutionError, api } from './api'
 import { defaultGraph } from './defaultGraph'

src/types/comfy.ts

@@ -1,6 +1,7 @@
+import type { Keybinding } from '@comfyorg/keybinding'
+
 import type { Positionable } from '@/lib/litegraph/src/interfaces'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { Keybinding } from '@/platform/keybinding/types/keybinding'
 import type { SettingParams } from '@/platform/settings/types'
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'

src/workbench/keybindings/services/keybindingService.ts

@@ -1,13 +1,14 @@
-import { CORE_KEYBINDINGS } from '@/platform/keybinding/constants/coreKeybindings'
+import {
+  CORE_KEYBINDINGS,
+  KeyComboImpl,
+  KeybindingImpl
+} from '@comfyorg/keybinding'
+
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
-import {
+import { useKeybindingStore } from '@/workbench/keybindings/stores/keybindingStore'
-  KeyComboImpl,
-  KeybindingImpl,
-  useKeybindingStore
-} from '@/workbench/keybindings/stores/keybindingStore'
 
 export const useKeybindingService = () => {
   const keybindingStore = useKeybindingStore()

src/workbench/keybindings/stores/keybindingStore.ts

@@ -1,118 +1,11 @@
+import { KeyComboImpl, KeybindingImpl } from '@comfyorg/keybinding'
 import _ from 'es-toolkit/compat'
 import { defineStore } from 'pinia'
 import type { Ref } from 'vue'
-import { computed, ref, toRaw } from 'vue'
+import { computed, ref } from 'vue'
 
-import { RESERVED_BY_TEXT_INPUT } from '@/base/keybinding/reservedKeyCombos'
+// Re-export classes from package for backward compatibility
-import type {
+export { KeybindingImpl, KeyComboImpl }
-  KeyCombo,
-  Keybinding
-} from '@/platform/keybinding/types/keybinding'
-
-export class KeybindingImpl implements Keybinding {
-  commandId: string
-  combo: KeyComboImpl
-  targetElementId?: string
-
-  constructor(obj: Keybinding) {
-    this.commandId = obj.commandId
-    this.combo = new KeyComboImpl(obj.combo)
-    this.targetElementId = obj.targetElementId
-  }
-
-  equals(other: unknown): boolean {
-    const raw = toRaw(other)
-
-    return raw instanceof KeybindingImpl
-      ? this.commandId === raw.commandId &&
-          this.combo.equals(raw.combo) &&
-          this.targetElementId === raw.targetElementId
-      : false
-  }
-}
-
-export class KeyComboImpl implements KeyCombo {
-  key: string
-  // ctrl or meta(cmd on mac)
-  ctrl: boolean
-  alt: boolean
-  shift: boolean
-
-  constructor(obj: KeyCombo) {
-    this.key = obj.key
-    this.ctrl = obj.ctrl ?? false
-    this.alt = obj.alt ?? false
-    this.shift = obj.shift ?? false
-  }
-
-  static fromEvent(event: KeyboardEvent) {
-    return new KeyComboImpl({
-      key: event.key,
-      ctrl: event.ctrlKey || event.metaKey,
-      alt: event.altKey,
-      shift: event.shiftKey
-    })
-  }
-
-  equals(other: unknown): boolean {
-    const raw = toRaw(other)
-
-    return raw instanceof KeyComboImpl
-      ? this.key.toUpperCase() === raw.key.toUpperCase() &&
-          this.ctrl === raw.ctrl &&
-          this.alt === raw.alt &&
-          this.shift === raw.shift
-      : false
-  }
-
-  serialize(): string {
-    return `${this.key.toUpperCase()}:${this.ctrl}:${this.alt}:${this.shift}`
-  }
-
-  toString(): string {
-    return this.getKeySequences().join(' + ')
-  }
-
-  get hasModifier(): boolean {
-    return this.ctrl || this.alt || this.shift
-  }
-
-  get isModifier(): boolean {
-    return ['Control', 'Meta', 'Alt', 'Shift'].includes(this.key)
-  }
-
-  get modifierCount(): number {
-    const modifiers = [this.ctrl, this.alt, this.shift]
-    return modifiers.reduce((acc, cur) => acc + Number(cur), 0)
-  }
-
-  get isShiftOnly(): boolean {
-    return this.shift && this.modifierCount === 1
-  }
-
-  get isReservedByTextInput(): boolean {
-    return (
-      !this.hasModifier ||
-      this.isShiftOnly ||
-      RESERVED_BY_TEXT_INPUT.has(this.toString())
-    )
-  }
-
-  getKeySequences(): string[] {
-    const sequences: string[] = []
-    if (this.ctrl) {
-      sequences.push('Ctrl')
-    }
-    if (this.alt) {
-      sequences.push('Alt')
-    }
-    if (this.shift) {
-      sequences.push('Shift')
-    }
-    sequences.push(this.key)
-    return sequences
-  }
-}
 
 export const useKeybindingStore = defineStore('keybinding', () => {
   /**

tests-ui/tests/services/keybindingService.escape.test.ts

@@ -1,15 +1,15 @@
+import {
+  CORE_KEYBINDINGS,
+  KeyComboImpl,
+  KeybindingImpl
+} from '@comfyorg/keybinding'
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { CORE_KEYBINDINGS } from '@/platform/keybinding/constants/coreKeybindings'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
 import { useKeybindingService } from '@/workbench/keybindings/services/keybindingService'
-import {
+import { useKeybindingStore } from '@/workbench/keybindings/stores/keybindingStore'
-  KeyComboImpl,
-  KeybindingImpl,
-  useKeybindingStore
-} from '@/workbench/keybindings/stores/keybindingStore'
 
 // Mock stores
 vi.mock('@/platform/settings/settingStore', () => ({

tests-ui/tests/store/keybindingStore.test.ts

@@ -1,10 +1,8 @@
+import { KeybindingImpl } from '@comfyorg/keybinding'
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it } from 'vitest'
 
-import {
+import { useKeybindingStore } from '@/workbench/keybindings/stores/keybindingStore'
-  KeybindingImpl,
-  useKeybindingStore
-} from '@/workbench/keybindings/stores/keybindingStore'
 
 describe('useKeybindingStore', () => {
   beforeEach(() => {