Adapted theme from stable-diffusion-webui-ux

src/lib/components/BlockContainer.svelte

@@ -42,7 +42,7 @@
 
 {#if container && children}
     {#key $attrsChanged}
-        <div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')}"
+        <div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')} z-index{zIndex}"
              class:hide-block={container.attrs.blockVariant === "hidden"}
              class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(container.id)}
              class:root-container={zIndex === 0}
@@ -69,7 +69,7 @@
                     on:finalize="{handleFinalize}"
                     >
                     {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
-                        {@const hidden = item?.node?.properties?.hidden}
+                        {@const hidden = item?.attrs?.hidden}
                         <div class="animation-wrapper"
                              class:hidden={hidden}
                              animate:flip={{duration:flipDurationMs}}>
@@ -140,6 +140,18 @@
  .container {
      display: flex;
 
+     > :global(*) {
+         border-radius: 0;
+     }
+
+     > :global(.padded) {
+         padding: 10px 12px 0px 10px;
+
+         &:last-child {
+             padding-bottom: 12px;
+         }
+     }
+
      :global(.block) {
          height: fit-content;
      }
@@ -214,7 +226,7 @@
 
  .animation-wrapper {
      position: relative;
-     flex-grow: 1;
+     flex-grow: 100;
  }
 
  .handle-widget:hover {

src/lib/components/ComfyApp.svelte

@@ -3,6 +3,7 @@
  import { get } from "svelte/store";
  import { Pane, Splitpanes } from 'svelte-splitpanes';
  import { Button } from "@gradio/button";
+ import { BlockTitle } from "@gradio/atoms";
  import ComfyUIPane from "./ComfyUIPane.svelte";
  import ComfyApp, { type SerializedAppState } from "./ComfyApp";
  import { Checkbox } from "@gradio/form"
@@ -222,7 +223,9 @@
         <Checkbox label="Lock Nodes" bind:value={$uiState.nodesLocked}/>
         <Checkbox label="Disable Interaction" bind:value={$uiState.graphLocked}/>
         <Checkbox label="Auto-Add UI" bind:value={$uiState.autoAddUI}/>
-        <label for="enable-ui-editing">Enable UI Editing</label>
+        <label class="label" for="enable-ui-editing">
+            <BlockTitle>Enable UI Editing</BlockTitle>
+        </label>
         <select id="enable-ui-editing" name="enable-ui-editing" bind:value={$uiState.uiEditMode}>
             <option value="disabled">Disabled</option>
             <option value="widgets">Widgets</option>
@@ -326,4 +329,8 @@
      display: flex;
      position: relative;
  }
+
+ label.label > :global(span) {
+     top: 20%;
+ }
 </style>

src/lib/components/ComfyProperties.svelte

@@ -90,6 +90,7 @@
                                 <TextBox
                                     value={target.attrs[spec.name]}
                                     on:change={(e) => updateAttribute(spec, e.detail)}
+                                    on:input={(e) => updateAttribute(spec, e.detail)}
                                     label={spec.name}
                                     max_lines={1}
                                     />
@@ -107,6 +108,7 @@
                                         value={target.attrs[spec.name]}
                                         step={1}
                                         on:change={(e) => updateAttribute(spec, e.currentTarget.valueAsNumber)}
+                                        on:input={(e) => updateAttribute(spec, e.currentTarget.valueAsNumber)}
                                     />
                                 </label>
                             {:else if spec.type === "enum"}
@@ -133,6 +135,7 @@
                                     <TextBox
                                         value={node.properties[spec.name]}
                                         on:change={(e) => updateProperty(spec, e.detail)}
+                                        on:input={(e) => updateAttribute(spec, e.detail)}
                                         label={spec.name}
                                         max_lines={1}
                                         />
@@ -151,6 +154,7 @@
                                                 value={node.properties[spec.name]}
                                                 step={1}
                                                 on:change={(e) => updateProperty(spec, e.currentTarget.valueAsNumber)}
+                                                on:input={(e) => updateProperty(spec, e.currentTarget.valueAsNumber)}
                                             />
                                         </div>
                                     </label>

src/lib/components/WidgetContainer.svelte

@@ -68,11 +68,11 @@
                  class:edit={edit}
                 class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(widget.id)}
                 class:is-executing={$queueState.runningNodeId && $queueState.runningNodeId == widget.node.id}
-                class:hidden={widget.node.properties.hidden}
+                class:hidden={widget.attrs.hidden}
                 >
                 <svelte:component this={widget.node.svelteComponentType} {widget} />
             </div>
-            {#if widget.node.properties.hidden && edit}
+            {#if widget.attrs.hidden && edit}
                 <div class="handle handle-hidden" class:hidden={!edit} style="z-index: {zIndex+100}"/>
             {/if}
             {#if showHandles}