Add UI code for configuring subgraphNode widgets (#5826)

The third PR for managing display of widgets on subgraph nodes. This is
the one that actually makes the functionality usable and user visible.

Adds
- A right-side modal for configuring which widgets are promoted,
accessed by right click or selection toolbar
- This menu allows for re-arranging widget order by dragging and
dropping.
- Indicators inside the subgraph for which widgets have been promoted.
- Context menu options for promoting or demoting widget inside of a
subgraph.
<img width="767" height="694" alt="image"
src="https://github.com/user-attachments/assets/4f78645d-7b26-48ba-8c49-78f4807e89e8"
/>
<img width="784" height="435" alt="image"
src="https://github.com/user-attachments/assets/7005c730-a732-481e-befb-57019a8a31a7"
/>


Known issues
- Some preview widgets are not added to a node until a draw operation
occurs. The code does not yet have a way of determining which nodes
should have draw operations forced to facilitate initial widget
creation.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5826-Add-UI-code-for-configuring-subgraphNode-widgets-27c6d73d36508146accbf395e5bcd36a)
by [Unito](https://www.unito.io)

src/core/graph/subgraph/SubgraphNodeWidget.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+
+import { cn } from '@/utils/tailwindUtil'
+
+const props = defineProps<{
+  nodeTitle: string
+  widgetName: string
+  isShown?: boolean
+  isDraggable?: boolean
+}>()
+defineEmits<{
+  (e: 'toggleVisibility'): void
+}>()
+
+function classes() {
+  return cn(
+    'flex py-1 pr-4 pl-0 break-all rounded items-center gap-1',
+    'bg-pure-white dark-theme:bg-charcoal-800',
+    props.isDraggable
+      ? 'drag-handle cursor-grab [.is-draggable]:cursor-grabbing'
+      : ''
+  )
+}
+</script>
+<template>
+  <div :class="classes()">
+    <div
+      :class="
+        cn(
+          'size-4 pointer-events-none',
+          isDraggable ? 'icon-[lucide--grip-vertical]' : ''
+        )
+      "
+    />
+    <div class="flex-1 pointer-events-none">
+      <div class="text-slate-100 text-[10px]">{{ nodeTitle }}</div>
+      <div class="text-xs">{{ widgetName }}</div>
+    </div>
+    <Button
+      size="small"
+      text
+      :icon="isDraggable ? 'icon-[lucide--eye]' : 'icon-[lucide--eye-off]'"
+      severity="secondary"
+      @click.stop="$emit('toggleVisibility')"
+    />
+  </div>
+</template>