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/renderer/extensions/vueNodes/components/NodeWidgets.vue

@@ -161,7 +161,8 @@ const processedWidgets = computed((): ProcessedWidget[] => {
       label: widget.label,
       options: widgetOptions,
       callback: widget.callback,
-      spec: widget.spec
+      spec: widget.spec,
+      borderStyle: widget.borderStyle
     }
 
     function updateHandler(value: WidgetValue) {

src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue

@@ -1,7 +1,12 @@
 <template>
   <FloatLabel
     variant="in"
-    class="rounded-lg space-y-1 focus-within:ring ring-component-node-widget-background-highlighted transition-all"
+    :class="
+      cn(
+        'rounded-lg space-y-1 focus-within:ring focus-within:ring-component-node-widget-background-highlighted transition-all',
+        widget.borderStyle
+      )
+    "
   >
     <Textarea
       v-bind="filteredProps"

src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue

@@ -3,9 +3,13 @@ import { noop } from 'es-toolkit'
 import { inject } from 'vue'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { cn } from '@/utils/tailwindUtil'
 
 defineProps<{
-  widget: Pick<SimplifiedWidget<string | number | undefined>, 'name' | 'label'>
+  widget: Pick<
+    SimplifiedWidget<string | number | undefined>,
+    'name' | 'label' | 'borderStyle'
+  >
 }>()
 
 const hideLayoutField = inject<boolean>('hideLayoutField', false)
@@ -13,7 +17,7 @@ const hideLayoutField = inject<boolean>('hideLayoutField', false)
 
 <template>
   <div
-    class="grid grid-cols-subgrid h-7.5 min-w-0 items-center justify-between gap-1"
+    class="grid grid-cols-subgrid min-w-0 items-center justify-between gap-1"
   >
     <div
       v-if="!hideLayoutField"
@@ -21,7 +25,7 @@ const hideLayoutField = inject<boolean>('hideLayoutField', false)
     >
       <p
         v-if="widget.name"
-        class="flex-1 truncate text-xs font-normal text-node-component-slot-text"
+        class="flex-1 truncate text-xs font-normal text-node-component-slot-text my-0"
       >
         {{ widget.label || widget.name }}
       </p>
@@ -29,7 +33,12 @@ const hideLayoutField = inject<boolean>('hideLayoutField', false)
     <!-- basis-full grow -->
     <div class="relative min-w-0 flex-1">
       <div
-        class="cursor-default min-w-0 rounded-lg space-y-1 focus-within:ring ring-component-node-widget-background-highlighted transition-all"
+        :class="
+          cn(
+            'cursor-default min-w-0 rounded-lg space-y-1 focus-within:ring focus-within:ring-component-node-widget-background-highlighted transition-all',
+            widget.borderStyle
+          )
+        "
         @pointerdown.stop="noop"
         @pointermove.stop="noop"
         @pointerup.stop="noop"