From b4a6b8b5ff11b29ed6799874d86d41860847ddfd Mon Sep 17 00:00:00 2001
From: Johnpaul <polymenjohn1@gmail.com>
Date: Wed, 24 Dec 2025 02:15:29 +0100
Subject: [PATCH] feat: support custom display hints for Vue widget lookup

---
 .../extensions/vueNodes/components/NodeWidgets.vue         | 2 +-
 .../vueNodes/widgets/composables/useFloatWidget.ts         | 3 ++-
 .../vueNodes/widgets/composables/useIntWidget.ts           | 3 ++-
 src/schemas/nodeDefSchema.ts                               | 7 ++++++-
 src/types/litegraph-augmentation.d.ts                      | 6 ++++++
 5 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
index 102f679453..6c7b465982 100644
--- a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
@@ -152,7 +152,7 @@ const processedWidgets = computed((): ProcessedWidget[] => {
     if (!shouldRenderAsVue(widget)) continue
 
     const vueComponent =
-      getComponent(widget.type, widget.name) ||
+      getComponent(widget.type, widget.name, widget.options?.display) ||
       (widget.isDOMWidget ? WidgetDOM : WidgetLegacy)
 
     const { slotMetadata, options } = widget
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.ts
index 6595f3015e..d3ca7f44a6 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.ts
@@ -72,7 +72,8 @@ export const useFloatWidget = () => {
         /** @deprecated Use step2 instead. The 10x value is a legacy implementation. */
         step: step * 10.0,
         step2: step,
-        precision
+        precision,
+        display: inputSpec.display
       }
     )
 
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useIntWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useIntWidget.ts
index 0c257c15b1..a7a5a15913 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useIntWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useIntWidget.ts
@@ -63,7 +63,8 @@ export const useIntWidget = () => {
         /** @deprecated Use step2 instead. The 10x value is a legacy implementation. */
         step: step * 10,
         step2: step,
-        precision: 0
+        precision: 0,
+        display: inputSpec.display
       }
     )
 
diff --git a/src/schemas/nodeDefSchema.ts b/src/schemas/nodeDefSchema.ts
index bb36da2284..2fe8fc4346 100644
--- a/src/schemas/nodeDefSchema.ts
+++ b/src/schemas/nodeDefSchema.ts
@@ -42,7 +42,12 @@ const zNumericInputOptions = zBaseInputOptions.extend({
   step: z.number().optional(),
   /** Note: Many node authors are using INT/FLOAT to pass list of INT/FLOAT. */
   default: z.union([z.number(), z.array(z.number())]).optional(),
-  display: z.enum(['slider', 'number', 'knob']).optional()
+  /**
+   * Display hint for widget rendering.
+   * Built-in values: 'slider', 'number', 'knob'
+   * Extensions can register custom values via getCustomVueWidgets hook.
+   */
+  display: z.string().optional()
 })
 
 export const zIntInputOptions = zNumericInputOptions.extend({
diff --git a/src/types/litegraph-augmentation.d.ts b/src/types/litegraph-augmentation.d.ts
index 0b283b1586..04a6c3c3e8 100644
--- a/src/types/litegraph-augmentation.d.ts
+++ b/src/types/litegraph-augmentation.d.ts
@@ -40,6 +40,12 @@ declare module '@/lib/litegraph/src/types/widgets' {
 
     /** If the widget is hidden, this will be set to true. */
     hidden?: boolean
+
+    /**
+     * Display hint from Python node definition for custom widget rendering.
+     * Extensions can use this to render widgets with custom Vue components.
+     */
+    display?: string
   }
 
   interface IBaseWidget {