Align implementation with hover focus ring, nits

packages/design-system/src/css/style.css

@@ -261,6 +261,8 @@
   --component-node-widget-background-selected: var(--secondary-background-selected);
   --component-node-widget-background-disabled: var(--color-alpha-ash-500-20);
   --component-node-widget-background-highlighted: var(--color-ash-500);
+  --component-node-widget-promoted: var(--color-purple-700);
+  --component-node-widget-advanced: var(--color-azure-400);
 
   /* Default UI element color palette variables */
    --palette-contrast-mix-color: #fff;
@@ -384,6 +386,8 @@
   --component-node-widget-background-selected: var(--color-charcoal-100);
   --component-node-widget-background-disabled: var(--color-alpha-charcoal-600-30);
   --component-node-widget-background-highlighted: var(--color-graphite-400);
+  --component-node-widget-promoted: var(--color-purple-700);
+  --component-node-widget-advanced: var(--color-azure-600);
 
   --modal-card-background: var(--secondary-background);
   --modal-card-background-hovered: var(--secondary-background-hover);
@@ -490,6 +494,8 @@
   --color-component-node-widget-background-selected: var(--component-node-widget-background-selected);
   --color-component-node-widget-background-disabled: var(--component-node-widget-background-disabled);
   --color-component-node-widget-background-highlighted: var(--component-node-widget-background-highlighted);
+  --color-component-node-widget-promoted: var(--component-node-widget-promoted);
+  --color-component-node-widget-advanced: var(--component-node-widget-advanced);
 
   /* Semantic tokens */
   --color-base-foreground: var(--base-foreground);

src/composables/graph/useGraphNodeManager.ts

@@ -20,7 +20,7 @@ import type { NodeId } from '@/renderer/core/layout/types'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { isDOMWidget } from '@/scripts/domWidget'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
-import type { BorderColor, WidgetValue } from '@/types/simplifiedWidget'
+import type { WidgetValue } from '@/types/simplifiedWidget'
 
 import type {
   LGraph,
@@ -47,7 +47,7 @@ export interface SafeWidgetData {
   spec?: InputSpec
   slotMetadata?: WidgetSlotMetadata
   isDOMWidget?: boolean
-  borderColor?: BorderColor
+  borderStyle?: string
 }
 
 export interface VueNodeData {
@@ -105,16 +105,17 @@ export function safeWidgetMapper(
       }
       const spec = nodeDefStore.getInputSpecForWidget(node, widget.name)
       const slotInfo = slotMetadata.get(widget.name)
-      const borderColor =
-        (widget.promoted && 'promoted') ||
-        (widget.advanced && 'advanced') ||
-        undefined
+      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,
-        borderColor,
+        borderStyle,
         callback: widget.callback,
         isDOMWidget: isDOMWidget(widget),
         label: widget.label,

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

@@ -57,14 +57,7 @@
           :model-value="widget.value"
           :node-id="nodeData?.id != null ? String(nodeData.id) : ''"
           :node-type="nodeType"
-          :class="
-            cn(
-              'flex-1 col-span-2',
-              widget.borderColor && 'border rounded-lg',
-              widget.borderColor === 'promoted' && 'border-fuchsia-600/80',
-              widget.borderColor === 'advanced' && 'border-azure-400/80'
-            )
-          "
+          class="flex-1 col-span-2"
           @update:model-value="widget.updateHandler"
         />
       </div>
@@ -93,11 +86,7 @@ import {
   shouldExpand,
   shouldRenderAsVue
 } from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
-import type {
-  BorderColor,
-  SimplifiedWidget,
-  WidgetValue
-} from '@/types/simplifiedWidget'
+import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
 import { cn } from '@/utils/tailwindUtil'
 
 import InputSlot from './InputSlot.vue'
@@ -136,7 +125,6 @@ interface ProcessedWidget {
   name: string
   type: string
   vueComponent: Component
-  borderColor?: BorderColor
   simplified: SimplifiedWidget
   value: WidgetValue
   updateHandler: (value: WidgetValue) => void
@@ -173,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) {
@@ -196,7 +185,6 @@ const processedWidgets = computed((): ProcessedWidget[] => {
       vueComponent,
       simplified,
       value: widget.value,
-      borderColor: widget.borderColor,
       updateHandler,
       tooltipConfig,
       slotMetadata

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,33 +3,42 @@ 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)
 </script>
 
 <template>
   <div
-    class="grid grid-cols-subgrid grid-rows-[30px] min-w-0 items-center justify-between gap-1 -ml-1 pl-1"
+    class="grid grid-cols-subgrid min-w-0 items-center justify-between gap-1"
   >
     <div
       v-if="!hideLayoutField"
       class="relative flex h-full min-w-0 items-center"
     >
       <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>
     </div>
     <!-- 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"

src/types/simplifiedWidget.ts

@@ -15,8 +15,6 @@ export type WidgetValue =
   | void
   | File[]
 
-export type BorderColor = 'advanced' | 'promoted'
-
 export interface SimplifiedWidget<
   T extends WidgetValue = WidgetValue,
   O = Record<string, any>
@@ -30,21 +28,23 @@ export interface SimplifiedWidget<
   /** Current value of the widget */
   value: T
 
+  borderStyle?: string
+
+  /** Callback fired when value changes */
+  callback?: (value: T) => void
+
+  /** Optional method to compute widget size requirements */
+  computeSize?: () => { minHeight: number; maxHeight?: number }
+
   /** Localized display label (falls back to name if not provided) */
   label?: string
 
   /** Widget options including filtered PrimeVue props */
   options?: O
 
-  /** Callback fired when value changes */
-  callback?: (value: T) => void
-
-  /** Optional input specification backing this widget */
-  spec?: InputSpecV2
-
   /** Optional serialization method for custom value handling */
   serializeValue?: () => any
 
-  /** Optional method to compute widget size requirements */
-  computeSize?: () => { minHeight: number; maxHeight?: number }
+  /** Optional input specification backing this widget */
+  spec?: InputSpecV2
 }