Minimal widget promotion

src/components/builder/AppBuilder.vue

@@ -274,7 +274,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
     </DraggableList>
   </PropertiesAccordionItem>
 
-  <Teleport to="body">
+  <Teleport v-if="!settingStore.get('Comfy.VueNodes.Enabled')" to="body">
     <div
       :class="
         cn(

src/renderer/extensions/linearMode/AppInput.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { remove } from 'es-toolkit'
+import { computed } from 'vue'
+import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
+
+import { useAppModeStore } from '@/stores/appModeStore'
+import { cn } from '@/utils/tailwindUtil'
+
+const appModeStore = useAppModeStore()
+
+const { id, name } = defineProps<{ id: string; name: string }>()
+
+const isPromoted = computed(() => appModeStore.selectedInputs.some(matchesThis))
+
+function matchesThis([nodeId, widgetName]: [NodeId, string]) {
+  return id == nodeId && name === widgetName
+}
+function togglePromotion() {
+  if (isPromoted.value) remove(appModeStore.selectedInputs, matchesThis)
+  else appModeStore.selectedInputs.push([id, name])
+}
+</script>
+<template>
+  <div
+    v-if="true"
+    :class="
+      cn(
+        'col-span-2 grid grid-cols-subgrid items-stretch ring-primary-background rounded-lg pointer-events-auto **:cursor-pointer',
+        isPromoted && 'ring-2'
+      )
+    "
+    @pointerdown.capture.stop.prevent="togglePromotion"
+    @click.capture.stop.prevent
+    @pointerup.capture.stop.prevent
+    @pointermove.capture.stop.prevent
+  >
+    <slot />
+  </div>
+  <slot v-else />
+</template>

src/renderer/extensions/vueNodes/components/NodeWidgets.vue

@@ -53,22 +53,24 @@
           />
         </div>
         <!-- Widget Component -->
-        <component
-          :is="widget.vueComponent"
-          v-model="widget.value"
-          v-tooltip.left="widget.tooltipConfig"
-          :widget="widget.simplified"
-          :node-id="nodeData?.id != null ? String(nodeData.id) : ''"
-          :node-type="nodeType"
-          :class="
-            cn(
-              'col-span-2',
-              widget.hasError && 'text-node-stroke-error font-bold'
-            )
-          "
-          @update:model-value="widget.updateHandler"
-          @contextmenu="widget.handleContextMenu"
-        />
+        <AppInput :id="nodeData?.id ?? ''" :name="widget.name">
+          <component
+            :is="widget.vueComponent"
+            v-model="widget.value"
+            v-tooltip.left="widget.tooltipConfig"
+            :widget="widget.simplified"
+            :node-id="nodeData?.id != null ? String(nodeData.id) : ''"
+            :node-type="nodeType"
+            :class="
+              cn(
+                'col-span-2',
+                widget.hasError && 'text-node-stroke-error font-bold'
+              )
+            "
+            @update:model-value="widget.updateHandler"
+            @contextmenu="widget.handleContextMenu"
+          />
+        </AppInput>
       </div>
     </template>
   </div>
@@ -89,6 +91,7 @@ import { useErrorHandling } from '@/composables/useErrorHandling'
 import { st } from '@/i18n'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import AppInput from '@/renderer/extensions/linearMode/AppInput.vue'
 import { useNodeTooltips } from '@/renderer/extensions/vueNodes/composables/useNodeTooltips'
 import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
 import { useNodeZIndex } from '@/renderer/extensions/vueNodes/composables/useNodeZIndex'