temp

src/lib/widgets/ComboWidget.svelte

@@ -2,32 +2,39 @@
  import type { WidgetDrawState, WidgetUIState, WidgetUIStateStore } from "$lib/stores/nodeState";
  import { BlockTitle } from "@gradio/atoms";
  import { Dropdown } from "@gradio/form";
- import { get } from "svelte/store";
  import Select from 'svelte-select';
- export let item: WidgetUIState | null = null;
+ import type { ComfyComboNode } from "$lib/nodes/index";
+ import { type WidgetLayout } from "$lib/stores/layoutState";
+ import { get, type Writable } from "svelte/store";
+ export let widget: WidgetLayout | null = null;
+ let node: ComfyComboNode | null = null;
+ let nodeValue: Writable<string> | null = null;
  let itemValue: WidgetUIStateStore | null = null;
  let option: any;
 
- $: if(item) {
-     if (!itemValue)
-         itemValue = item.value;
-     if (!option)
-         option = get(item.value);
+ $: if(widget) {
+     node = widget.node as ComfyComboNode
+     nodeValue = node.value;
+     updateOption(); // don't react on option
  };
 
+ function updateOption() {
+     option = get(nodeValue);
+ }
+
  $: if (option && itemValue) {
      $itemValue = option.value
  }
 </script>
 
 <div class="wrapper gr-combo">
-    {#if item !== null && option !== undefined}
+    {#if node !== null && option !== undefined}
         <label>
-            <BlockTitle show_label={true}>{item.widget.name}</BlockTitle>
+            <BlockTitle show_label={true}>{widget.attrs.title}</BlockTitle>
             <Select
                 bind:value={option}
-                bind:items={item.widget.options.values}
-                disabled={item.widget.options.values.length === 0}
+                bind:items={node.properties.values}
+                disabled={node.properties.values.length === 0}
                 clearable={false}
                 on:change
                 on:select

src/lib/widgets/RangeWidget.svelte

@@ -1,35 +1,38 @@
 <script lang="ts">
- import type { WidgetUIState, WidgetUIStateStore } from "$lib/stores/nodeState";
+ import type { ComfySliderNode } from "$lib/nodes/index";
+ import { type WidgetLayout } from "$lib/stores/layoutState";
  import { Range } from "@gradio/form";
- import { get } from "svelte/store";
- export let item: WidgetUIState | null = null;
- let itemValue: WidgetUIStateStore | null = null;
+ import { get, type Writable } from "svelte/store";
+ export let widget: WidgetLayout | null = null;
+ let node: ComfySliderNode | null = null;
+ let nodeValue: Writable<number> | null = null;
  let option: number | null = null;
 
- $: if (item) {
-     itemValue = item.value;
+ $: if(widget) {
+     node = widget.node
+     nodeValue = node.value;
      updateOption(); // don't react on option
- }
+ };
 
  function updateOption() {
-     option = get(itemValue);
+     option = get(nodeValue);
  }
 
  function onRelease(e: Event) {
-     if (itemValue && option) {
-         $itemValue = option
+     if (nodeValue && option) {
+         $nodeValue = option
      }
  }
 </script>
 
 <div class="wrapper gr-range">
-    {#if item !== null && option !== null}
+    {#if node !== null && option !== null}
         <Range
             bind:value={option}
-            minimum={item.widget.options.min}
-            maximum={item.widget.options.max}
-            step={item.widget.options.step}
-            label={item.widget.name}
+            minimum={node.properties.min}
+            maximum={node.properties.max}
+            step={node.properties.step}
+            label={widget.attrs.title}
             show_label={true}
             on:release={onRelease}
             on:change

src/lib/widgets/TextWidget.svelte

@@ -1,18 +1,27 @@
 <script lang="ts">
- import type { WidgetUIState, WidgetUIStateStore } from "$lib/stores/nodeState";
+ import type { WidgetUIStateStore } from "$lib/stores/nodeState";
  import { TextBox } from "@gradio/form";
- export let item: WidgetUIState | null = null;
+ import type { ComfyComboNode } from "$lib/nodes/index";
+ import { type WidgetLayout } from "$lib/stores/layoutState";
+ import { get, type Writable } from "svelte/store";
+ export let widget: WidgetLayout | null = null;
+ let node: ComfyComboNode | null = null;
+ let nodeValue: Writable<string> | null = null;
  let itemValue: WidgetUIStateStore | null = null;
- $: if (item) { itemValue = item.value; }
+
+ $: if(widget) {
+     node = widget.node as ComfyComboNode
+     nodeValue = node.value;
+ };
 </script>
 
 <div class="wrapper gr-textbox">
-    {#if item !== null && itemValue !== null}
+    {#if node !== null && nodeValue !== null}
         <TextBox
             bind:value={$itemValue}
-            label={item.widget.name}
-            lines={item.widget.options.multiline ? 5 : 1}
-            max_lines={item.widget.options.multiline ? 5 : 1}
+            label={widget.attrs.title}
+            lines={node.properties.multiline ? 5 : 1}
+            max_lines={node.properties.multiline ? 5 : 1}
             show_label={true}
             on:change
             on:submit