Implement widget borders in vue (#7322)

Adds support for displaying the "promoted" and "advanced" border
indicators when in vue mode.

Requires some (hopefully minor and generally beneficial) styling changes
to make sure that the widgets are contained within their border.

Note that the 'advanced' functionality sees minimal use and is likely to
be revamped in the future.

<img width="372" height="417" alt="image"
src="https://github.com/user-attachments/assets/8ea1e66b-2a4e-4a16-996f-289a26e39708"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7322-Implement-widget-borders-in-vue-2c56d73d36508187b881f97e373d433b)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

src/composables/graph/useGraphNodeManager.ts

@@ -47,6 +47,7 @@ export interface SafeWidgetData {
   spec?: InputSpec
   slotMetadata?: WidgetSlotMetadata
   isDOMWidget?: boolean
+  borderStyle?: string
 }
 
 export interface VueNodeData {
@@ -105,17 +106,23 @@ export function safeWidgetMapper(
       }
       const spec = nodeDefStore.getInputSpecForWidget(node, widget.name)
       const slotInfo = slotMetadata.get(widget.name)
+      const borderStyle = widget.promoted
+        ? 'ring ring-component-node-widget-promoted'
+        : widget.advanced
+          ? 'ring ring-component-node-widget-advanced'
+          : undefined
 
       return {
         name: widget.name,
         type: widget.type,
         value: value,
+        borderStyle,
+        callback: widget.callback,
+        isDOMWidget: isDOMWidget(widget),
         label: widget.label,
         options: widget.options,
-        callback: widget.callback,
         spec,
-        slotMetadata: slotInfo,
-        isDOMWidget: isDOMWidget(widget)
+        slotMetadata: slotInfo
       }
     } catch (error) {
       return {