From ef4723b572367dffe3c1c43317252c173555283f Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 6 May 2023 11:04:06 -0500
Subject: [PATCH 01/19] Better bottom bar

---
 src/lib/components/BlockContainer.svelte      |   8 +-
 src/lib/components/ComfyApp.svelte            | 124 +++++----
 src/lib/components/ComfyProperties.svelte     | 250 ++++++++++--------
 src/lib/components/ComfyUIPane.svelte         |   2 +-
 src/lib/components/ComfyUnlockUIButton.svelte |  42 +++
 src/lib/components/WidgetContainer.svelte     |   7 +-
 src/lib/stores/layoutState.ts                 |  37 ++-
 src/lib/stores/uiState.ts                     |   6 +-
 8 files changed, 298 insertions(+), 178 deletions(-)
 create mode 100644 src/lib/components/ComfyUnlockUIButton.svelte

diff --git a/src/lib/components/BlockContainer.svelte b/src/lib/components/BlockContainer.svelte
index 0f910d2..19aafdf 100644
--- a/src/lib/components/BlockContainer.svelte
+++ b/src/lib/components/BlockContainer.svelte
@@ -41,17 +41,17 @@
 </script>
 
 {#if container && children}
-    {@const edit = $uiState.uiEditMode === "widgets" && zIndex > 1}
+    {@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets" && zIndex > 1}
     {#key $attrsChanged}
         <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:selected={$uiState.uiUnlocked && $layoutState.currentSelection.includes(container.id)}
              class:root-container={zIndex === 0}
              class:is-executing={container.isNodeExecuting}
              class:edit={edit}>
             <Block>
                 {#if container.attrs.title !== ""}
-                    <label for={String(container.id)} class={$uiState.uiEditMode === "widgets" ? "edit-title-label" : ""}>
+                    <label for={String(container.id)} class={($uiState.uiUnlocked && $uiState.uiEditMode === "widgets") ? "edit-title-label" : ""}>
                         <BlockTitle>{container.attrs.title}</BlockTitle>
                     </label>
                 {/if}
@@ -64,7 +64,7 @@
                                  centreDraggedOnCursor: true,
                                  morphDisabled: true,
                                  dropFromOthersDisabled: zIndex === 0,
-                                 dragDisabled: zIndex === 0 || $layoutState.currentSelection.length > 2 || $uiState.uiEditMode === "disabled"
+                                 dragDisabled: zIndex === 0 || $layoutState.currentSelection.length > 2 || !$uiState.uiUnlocked
                                  }}"
                     on:consider="{handleConsider}"
                     on:finalize="{handleFinalize}"
diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte
index 8dfaf5a..ac2f83c 100644
--- a/src/lib/components/ComfyApp.svelte
+++ b/src/lib/components/ComfyApp.svelte
@@ -19,6 +19,7 @@
  import ComfyQueue from "./ComfyQueue.svelte";
  import ComfyProperties from "./ComfyProperties.svelte";
  import queueState from "$lib/stores/queueState";
+ import ComfyUnlockUIButton from "./ComfyUnlockUIButton.svelte";
 
  export let app: ComfyApp = undefined;
  let imageViewer: ImageViewer;
@@ -29,7 +30,7 @@
  let containerElem: HTMLDivElement;
  let resizeTimeout: NodeJS.Timeout | null;
  let hasShownUIHelpToast: boolean = false;
- let uiTheme: string = "anapnoe";
+ let uiTheme: string = "";
 
  let debugLayout: boolean = false;
 
@@ -69,7 +70,7 @@
      }
  }
 
- let propsSidebarSize = 0; //15;
+ let propsSidebarSize = 15; //15;
 
  function toggleProps() {
      if (propsSidebarSize == 0) {
@@ -124,7 +125,7 @@
      app.lCanvas.recenter();
  }
 
- $: if ($uiState.uiEditMode !== "disabled" && !hasShownUIHelpToast) {
+ $: if ($uiState.uiUnlocked && !hasShownUIHelpToast) {
      hasShownUIHelpToast = true;
      toast.push("Right-click to open context menu.")
  }
@@ -158,7 +159,7 @@
      (window as any).app = app;
      (window as any).appPane = uiPane;
 
-     await import('../../scss/ux.scss');
+     // await import('../../scss/ux.scss');
 
      refreshView();
  })
@@ -203,50 +204,56 @@
         </Splitpanes>
     </div>
     <div id="bottombar">
-        <Button variant="primary" on:click={queuePrompt}>
-            Queue Prompt
-        </Button>
-        <Button variant="secondary" on:click={toggleGraph}>
-            Toggle Graph
-        </Button>
-        <Button variant="secondary" on:click={toggleProps}>
-            Toggle Props
-        </Button>
-        <Button variant="secondary" on:click={toggleQueue}>
-            Toggle Queue
-        </Button>
-        <Button variant="secondary" on:click={doSave}>
-            Save
-        </Button>
-        <Button variant="secondary" on:click={doReset}>
-            Reset
-        </Button>
-        <Button variant="secondary" on:click={doLoadDefault}>
-            Load Default
-        </Button>
-        <Button variant="secondary" on:click={doRecenter}>
-            Recenter
-        </Button>
-        <Button variant="secondary" on:click={doRefreshCombos}>
-            🔄
-        </Button>
-        <!-- <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 class="label" for="enable-ui-editing">
-            <BlockTitle>Enable UI Editing</BlockTitle>
-            <select id="enable-ui-editing" name="enable-ui-editing" bind:value={$uiState.uiEditMode}>
-                <option value="disabled">Disabled</option>
-                <option value="widgets">Widgets</option>
-            </select>
-        </label>
-        <label class="label" for="ui-theme">
-            <BlockTitle>Theme</BlockTitle>
-            <select id="ui-theme" name="ui-theme" bind:value={uiTheme}>
-                <option value="">None</option>
-                <option value="anapnoe">Anapnoe</option>
-            </select>
-        </label>
+        <div class="left">
+            <Button variant="primary" on:click={queuePrompt}>
+                Queue Prompt
+            </Button>
+            <Button variant="secondary" on:click={toggleGraph}>
+                Toggle Graph
+            </Button>
+            <Button variant="secondary" on:click={toggleProps}>
+                Toggle Props
+            </Button>
+            <Button variant="secondary" on:click={toggleQueue}>
+                Toggle Queue
+            </Button>
+            <Button variant="secondary" on:click={doSave}>
+                Save
+            </Button>
+            <Button variant="secondary" on:click={doReset}>
+                Reset
+            </Button>
+            <Button variant="secondary" on:click={doLoadDefault}>
+                Load Default
+            </Button>
+            <Button variant="secondary" on:click={doRecenter}>
+                Recenter
+            </Button>
+            <Button variant="secondary" on:click={doRefreshCombos}>
+                🔄
+            </Button>
+            <!-- <Checkbox label="Lock Nodes" bind:value={$uiState.nodesLocked}/>
+                 <Checkbox label="Disable Interaction" bind:value={$uiState.graphLocked}/> -->
+            <span style="display: inline-flex !important">
+                <Checkbox label="Auto-Add UI" bind:value={$uiState.autoAddUI}/>
+            </span>
+            <span class="label" for="ui-edit-mode">
+                <BlockTitle>UI Edit mode</BlockTitle>
+                <select id="ui-edit-mode" name="ui-edit-mode" bind:value={$uiState.uiEditMode}>
+                    <option value="widgets">Widgets</option>
+                </select>
+            </span>
+            <span class="label" for="ui-theme">
+                <BlockTitle>Theme</BlockTitle>
+                <select id="ui-theme" name="ui-theme" bind:value={uiTheme}>
+                    <option value="">None</option>
+                    <option value="anapnoe">Anapnoe</option>
+                </select>
+            </span>
+        </div>
+        <div class="right">
+            <ComfyUnlockUIButton bind:toggled={$uiState.uiUnlocked} />
+        </div>
     </div>
     <LightboxModal />
 </div>
@@ -276,10 +283,23 @@
  }
 
  #bottombar {
+     padding-top: 0.5em;
      display: flex;
-     flex-wrap: wrap;
+     align-items: center;
+     width: 100%;
      gap: var(--layout-gap);
-     margin: 10px;
+     padding-left: 1em;
+     padding-right: 1em;
+     margin-top: auto;
+     overflow-x: auto;
+
+     > .left {
+         flex-shrink: 0;
+     }
+
+     > .right {
+         margin-left: auto
+     }
  }
 
  .canvas-wrapper {
@@ -350,4 +370,8 @@
  label.label > :global(span) {
      top: 20%;
  }
+
+ span.left {
+     right: 0px;
+ }
 </style>
diff --git a/src/lib/components/ComfyProperties.svelte b/src/lib/components/ComfyProperties.svelte
index 2d9c617..251f624 100644
--- a/src/lib/components/ComfyProperties.svelte
+++ b/src/lib/components/ComfyProperties.svelte
@@ -3,6 +3,7 @@
  import { TextBox, Checkbox } from "@gradio/form";
  import { LGraphNode } from "@litegraph-ts/core"
  import layoutState, { type IDragItem, type WidgetLayout, ALL_ATTRIBUTES, type AttributesSpec } from "$lib/stores/layoutState"
+ import uiState from "$lib/stores/uiState"
  import { get } from "svelte/store"
  import type { ComfyWidgetNode } from "$lib/nodes";
  import ComfyNumberProperty from "./ComfyNumberProperty.svelte";
@@ -41,74 +42,92 @@
          targetType = ""
  }
 
- function validNodeProperty(spec: AttributesSpec, node: LGraphNode): boolean {
+ function validNodeProperty(spec: AttributesSpec, node: LGraphNode | null): boolean {
+     if (node == null)
+         return false;
+
+     if (spec.canShow && !spec.canShow(node))
+         return false;
+
      if (spec.validNodeTypes) {
          return spec.validNodeTypes.indexOf(node.type) !== -1;
      }
      return spec.name in node.properties
  }
 
- function updateAttribute(entry: AttributesSpec, target: IDragItem, value: any) {
-     if (target) {
-         const name = entry.name
-         console.warn("updateAttribute", name, value)
+ function validWidgetAttribute(spec: AttributesSpec, widget: IDragItem | null): boolean {
+     if (widget == null)
+         return false;
+     if (spec.canShow)
+         return spec.canShow(widget);
 
-         target.attrs[name] = value
-         target.attrsChanged.set(!get(target.attrsChanged))
+     return spec.name in widget.attrs
+ }
 
-         if (node && "propsChanged" in node) {
-             const comfyNode = node as ComfyWidgetNode
-             comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1)
-         }
+ function updateAttribute(entry: AttributesSpec, target: IDragItem | null, value: any) {
+     if (target == null)
+         return;
+
+     const name = entry.name
+     console.warn("updateAttribute", name, value)
+
+     target.attrs[name] = value
+     target.attrsChanged.set(!get(target.attrsChanged))
+
+     if (node && "propsChanged" in node) {
+         const comfyNode = node as ComfyWidgetNode
+         comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1)
      }
  }
 
  function updateProperty(entry: AttributesSpec, value: any) {
-     if (node) {
-         const name = entry.name
-         console.warn("updateProperty", name, value)
+     if (node == null)
+         return
 
-         node.properties[name] = value;
+     const name = entry.name
+     console.warn("updateProperty", name, value)
 
-         if ("propsChanged" in node) {
-             const comfyNode = node as ComfyWidgetNode
-             comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1)
-         }
+     node.properties[name] = value;
+
+     if ("propsChanged" in node) {
+         const comfyNode = node as ComfyWidgetNode
+         comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1)
      }
  }
 
- function getVar(node: LGraphNode, entry: AttributesSpec) {
-     let value = node[entry.name]
-     if (entry.serialize)
-         value = entry.serialize(value)
-     console.debug("[ComfyProperties] getVar", entry, value, node)
+ function getVar(node: LGraphNode, spec: AttributesSpec) {
+     let value = node[spec.name] || spec.defaultValue
+     if (spec.serialize)
+         value = spec.serialize(value)
+     console.debug("[ComfyProperties] getVar", spec, value, node)
      return value
  }
 
  function updateVar(entry: any, value: any) {
-     if (node) {
-         const name = entry.name
-         console.warn("updateProperty", name, value)
+     if (node == null)
+         return;
 
-         if (entry.deserialize)
-             value = entry.deserialize(value)
+     const name = entry.name
+     console.warn("updateVar", name, value)
 
-         console.debug("[ComfyProperties] updateVar", entry, value, name, node)
-         node[name] = value;
+     if (entry.deserialize)
+         value = entry.deserialize(value)
 
-         if ("propsChanged" in node) {
-             const comfyNode = node as ComfyWidgetNode
-             comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1)
-         }
+     console.debug("[ComfyProperties] updateVar", entry, value, name, node)
+     node[name] = value;
+
+     if ("propsChanged" in node) {
+         const comfyNode = node as ComfyWidgetNode
+         comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1)
      }
  }
 
  function updateWorkflowAttribute(entry: AttributesSpec, value: any) {
-    const name = entry.name
-    console.warn("updateWorkflowAttribute", name, value)
+     const name = entry.name
+     console.warn("updateWorkflowAttribute", name, value)
 
-    $layoutState.attrs[name] = value
-    $layoutState = $layoutState
+     $layoutState.attrs[name] = value
+     $layoutState = $layoutState
  }
 </script>
 
@@ -117,9 +136,10 @@
         <div class="target-name">
             <span>
                 <span class="title">{target?.attrs?.title || node?.title || "Workflow"}<span>
-                {#if targetType !== ""}
-                    <span class="type">({targetType})</span>
-                {/if}
+                    {#if targetType !== ""}
+                        <span class="type">({targetType})</span>
+                    {/if}
+                </span>
             </span>
         </div>
     </div>
@@ -130,37 +150,37 @@
                     <span class="title">{category.categoryName}</span>
                 </span>
             </div>
-            {#each category.specs as spec(spec.name)}
-                {#if spec.location === "widget" && target && spec.name in target.attrs}
+            {#each category.specs as spec(spec.id)}
+                {#if spec.location === "widget" && validWidgetAttribute(spec, target)}
                     <div class="props-entry">
                         {#if spec.type === "string"}
                             <TextBox
-                                value={target.attrs[spec.name]}
+                                value={target.attrs[spec.name] || spec.defaultValue}
                                 on:change={(e) => updateAttribute(spec, target, e.detail)}
                                 on:input={(e) => updateAttribute(spec, target, e.detail)}
                                 label={spec.name}
                                 max_lines={1}
                                 />
                         {:else if spec.type === "boolean"}
-                            <Checkbox
-                                value={target.attrs[spec.name]}
-                                on:change={(e) => updateAttribute(spec, target, e.detail)}
-                                label={spec.name}
-                                />
+                                <Checkbox
+                                    value={target.attrs[spec.name] || spec.defaultValue}
+                                    on:change={(e) => updateAttribute(spec, target, e.detail)}
+                                    label={spec.name}
+                                    />
                         {:else if spec.type === "number"}
-                            <ComfyNumberProperty
-                                name={spec.name}
-                                value={target.attrs[spec.name]}
-                                step={1}
-                                on:change={(e) => updateAttribute(spec, target, e.detail)}
-                            />
+                                    <ComfyNumberProperty
+                                        name={spec.name}
+                                        value={target.attrs[spec.name] || spec.defaultValue}
+                                        step={1}
+                                        on:change={(e) => updateAttribute(spec, target, e.detail)}
+                                        />
                         {:else if spec.type === "enum"}
-                            <ComfyComboProperty
-                                name={spec.name}
-                                value={target.attrs[spec.name]}
-                                values={spec.values}
-                                on:change={(e) => updateAttribute(spec, target, e.detail)}
-                            />
+                                        <ComfyComboProperty
+                                            name={spec.name}
+                                            value={target.attrs[spec.name] || spec.defaultValue}
+                                            values={spec.values}
+                                            on:change={(e) => updateAttribute(spec, target, e.detail)}
+                                            />
                         {/if}
                     </div>
                 {:else if node}
@@ -168,32 +188,32 @@
                         <div class="props-entry">
                             {#if spec.type === "string"}
                                 <TextBox
-                                    value={node.properties[spec.name]}
+                                    value={node.properties[spec.name] || spec.defaultValue}
                                     on:change={(e) => updateProperty(spec, e.detail)}
                                     on:input={(e) => updateProperty(spec, e.detail)}
                                     label={spec.name}
                                     max_lines={1}
                                     />
                             {:else if spec.type === "boolean"}
-                                <Checkbox
-                                    value={node.properties[spec.name]}
-                                    label={spec.name}
-                                    on:change={(e) => updateProperty(spec, e.detail)}
-                                    />
+                                    <Checkbox
+                                        value={node.properties[spec.name] || spec.defaultValue}
+                                        label={spec.name}
+                                        on:change={(e) => updateProperty(spec, e.detail)}
+                                        />
                             {:else if spec.type === "number"}
-                                <ComfyNumberProperty
-                                    name={spec.name}
-                                    value={node.properties[spec.name]}
-                                    step={1}
-                                    on:change={(e) => updateProperty(spec, e.detail)}
-                                />
+                                        <ComfyNumberProperty
+                                            name={spec.name}
+                                            value={node.properties[spec.name] || spec.defaultValue}
+                                            step={1}
+                                            on:change={(e) => updateProperty(spec, e.detail)}
+                                            />
                             {:else if spec.type === "enum"}
-                                <ComfyComboProperty
-                                    name={spec.name}
-                                    value={node.properties[spec.name]}
-                                    values={spec.values}
-                                    on:change={(e) => updateProperty(spec, e.detail)}
-                                />
+                                            <ComfyComboProperty
+                                                name={spec.name}
+                                                value={node.properties[spec.name] || spec.defaultValue}
+                                                values={spec.values}
+                                                on:change={(e) => updateProperty(spec, e.detail)}
+                                                />
                             {/if}
                         </div>
                     {:else if spec.location === "nodeVars" && spec.name in node}
@@ -207,25 +227,25 @@
                                     max_lines={1}
                                     />
                             {:else if spec.type === "boolean"}
-                                <Checkbox
-                                    value={getVar(node, spec)}
-                                    on:change={(e) => updateVar(spec, e.detail)}
-                                    label={spec.name}
-                                    />
+                                    <Checkbox
+                                        value={getVar(node, spec)}
+                                        on:change={(e) => updateVar(spec, e.detail)}
+                                        label={spec.name}
+                                        />
                             {:else if spec.type === "number"}
-                                <ComfyNumberProperty
-                                    name={spec.name}
-                                    value={getVar(node, spec)}
-                                    step={1}
-                                    on:change={(e) => updateVar(spec, e.detail)}
-                                />
+                                        <ComfyNumberProperty
+                                            name={spec.name}
+                                            value={getVar(node, spec)}
+                                            step={1}
+                                            on:change={(e) => updateVar(spec, e.detail)}
+                                            />
                             {:else if spec.type === "enum"}
-                                <ComfyComboProperty
-                                    name={spec.name}
-                                    value={getVar(node, spec)}
-                                    values={spec.values}
-                                    on:change={(e) => updateVar(spec, e.detail)}
-                                />
+                                            <ComfyComboProperty
+                                                name={spec.name}
+                                                value={getVar(node, spec)}
+                                                values={spec.values}
+                                                on:change={(e) => updateVar(spec, e.detail)}
+                                                />
                             {/if}
                         </div>
                     {/if}
@@ -233,32 +253,32 @@
                     <div class="props-entry">
                         {#if spec.type === "string"}
                             <TextBox
-                                value={$layoutState.attrs[spec.name]}
+                                value={$layoutState.attrs[spec.name] || spec.defaultValue}
                                 on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
                                 on:input={(e) => updateWorkflowAttribute(spec, e.detail)}
                                 label={spec.name}
                                 max_lines={1}
                                 />
                         {:else if spec.type === "boolean"}
-                            <Checkbox
-                                value={$layoutState.attrs[spec.name]}
-                                on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
-                                label={spec.name}
-                                />
+                                <Checkbox
+                                    value={$layoutState.attrs[spec.name] || spec.defaultValue}
+                                    on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
+                                    label={spec.name}
+                                    />
                         {:else if spec.type === "number"}
-                            <ComfyNumberProperty
-                                name={spec.name}
-                                value={$layoutState.attrs[spec.name]}
-                                step={1}
-                                on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
-                            />
+                                    <ComfyNumberProperty
+                                        name={spec.name}
+                                        value={$layoutState.attrs[spec.name] || spec.defaultValue}
+                                        step={1}
+                                        on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
+                                        />
                         {:else if spec.type === "enum"}
-                            <ComfyComboProperty
-                                name={spec.name}
-                                value={$layoutState.attrs[spec.name]}
-                                values={spec.values}
-                                on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
-                            />
+                                        <ComfyComboProperty
+                                            name={spec.name}
+                                            value={$layoutState.attrs[spec.name] || spec.defaultValue}
+                                            values={spec.values}
+                                            on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
+                                            />
                         {/if}
                     </div>
                 {/if}
diff --git a/src/lib/components/ComfyUIPane.svelte b/src/lib/components/ComfyUIPane.svelte
index b9a95b1..a6b7415 100644
--- a/src/lib/components/ComfyUIPane.svelte
+++ b/src/lib/components/ComfyUIPane.svelte
@@ -69,7 +69,7 @@
  }
 
  async function onRightClick(e) {
-     if ($uiState.uiEditMode === "disabled")
+     if (!$uiState.uiUnlocked)
          return;
 
      e.preventDefault();
diff --git a/src/lib/components/ComfyUnlockUIButton.svelte b/src/lib/components/ComfyUnlockUIButton.svelte
new file mode 100644
index 0000000..b1a1f83
--- /dev/null
+++ b/src/lib/components/ComfyUnlockUIButton.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+ import { Button } from "@gradio/button"
+ import { LockOpen2, LockClosed } from "radix-icons-svelte"
+
+ export let toggled: boolean = false;
+
+ function toggle() {
+     toggled = !toggled;
+ }
+</script>
+
+<div class="wrapper button lg" class:toggled>
+    <Button on:click={toggle} variant={toggled ? "primary" : "secondary"}>
+        {#if toggled}
+            <LockOpen2 />
+        {:else}
+            <LockClosed />
+        {/if}
+    </Button>
+</div>
+
+<style lang="scss">
+ .wrapper {
+     display: inline-flex;
+     width: var(--size-12);
+     height: var(--size-12);
+
+     > :global(.lg) {
+         border: var(--button-border-width) solid var(--neutral-400);
+     }
+
+     &.toggled {
+         :global(svg) {
+             color: var(--button-primary-text-color);
+         }
+     }
+
+     :global(svg) {
+         color: var(--button-secondary-text-color);
+     }
+ }
+</style>
diff --git a/src/lib/components/WidgetContainer.svelte b/src/lib/components/WidgetContainer.svelte
index 261e414..8b3478e 100644
--- a/src/lib/components/WidgetContainer.svelte
+++ b/src/lib/components/WidgetContainer.svelte
@@ -40,7 +40,8 @@
          propsChanged = null;
  }
 
- $: showHandles = $uiState.uiEditMode === "widgets" // TODO
+ $: showHandles = $uiState.uiUnlocked
+               && $uiState.uiEditMode === "widgets" // TODO
                && zIndex > 1
                && !$layoutState.isMenuOpen
 
@@ -61,12 +62,12 @@
         <BlockContainer {container} {classes} {zIndex} {showHandles} />
     {/key}
 {:else if widget && widget.node}
-    {@const edit = $uiState.uiEditMode === "widgets" && zIndex > 1}
+    {@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets" && zIndex > 1}
     {#key $attrsChanged}
         {#key $propsChanged}
             <div class="widget {widget.attrs.classes} {getWidgetClass()}"
                  class:edit={edit}
-                class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(widget.id)}
+                class:selected={$uiState.uiUnlocked && $layoutState.currentSelection.includes(widget.id)}
                 class:is-executing={$queueState.runningNodeId && $queueState.runningNodeId == widget.node.id}
                 class:hidden={widget.attrs.hidden}
                 >
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
index b6a9433..58660f1 100644
--- a/src/lib/stores/layoutState.ts
+++ b/src/lib/stores/layoutState.ts
@@ -39,15 +39,18 @@ export type Attributes = {
 }
 
 export type AttributesSpec = {
+    id?: number, // for svelte keyed each
     name: string,
     type: string,
     location: "widget" | "nodeProps" | "nodeVars" | "workflow"
     editable: boolean,
 
+    defaultValue?: any,
     values?: string[],
     hidden?: boolean,
     validNodeTypes?: string[],
 
+    canShow?: (arg: IDragItem | LGraphNode) => boolean,
     serialize?: (arg: any) => string,
     deserialize?: (arg: string) => any,
 }
@@ -86,18 +89,22 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 type: "enum",
                 location: "widget",
                 editable: true,
-                values: ["horizontal", "vertical"]
+                values: ["horizontal", "vertical"],
+                defaultValue: "vertical",
+                canShow: (di: IDragItem) => di.type === "container"
             },
             {
                 name: "flexGrow",
                 type: "number",
                 location: "widget",
+                defaultValue: 100,
                 editable: true
             },
             {
                 name: "classes",
                 type: "string",
                 location: "widget",
+                defaultValue: "",
                 editable: true,
             },
             {
@@ -105,7 +112,20 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 type: "enum",
                 location: "widget",
                 editable: true,
-                values: ["block", "hidden"]
+                values: ["block", "hidden"],
+                defaultValue: "block",
+                canShow: (di: IDragItem) => di.type === "container"
+            },
+
+            // Container variants
+            {
+                name: "variant",
+                type: "enum",
+                location: "widget",
+                editable: true,
+                values: ["block", "accordion", "tabs"],
+                defaultValue: "block",
+                canShow: (di: IDragItem) => di.type === "container"
             },
         ]
     },
@@ -156,6 +176,7 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 location: "nodeProps",
                 editable: true,
                 validNodeTypes: ["ui/button"],
+                defaultValue: "bang"
             },
 
             // Workflow
@@ -163,11 +184,21 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 name: "defaultSubgraph",
                 type: "string",
                 location: "workflow",
-                editable: true
+                editable: true,
+                defaultValue: ""
             }
         ]
     }
 ];
+
+let i = 0;
+for (const cat of Object.values(ALL_ATTRIBUTES)) {
+    for (const val of Object.values(cat.specs)) {
+        val.id = i;
+        i += 1;
+    }
+}
+
 export { ALL_ATTRIBUTES };
 
 export interface IDragItem {
diff --git a/src/lib/stores/uiState.ts b/src/lib/stores/uiState.ts
index ba9396c..a7c3cc6 100644
--- a/src/lib/stores/uiState.ts
+++ b/src/lib/stores/uiState.ts
@@ -2,13 +2,14 @@ import { writable } from 'svelte/store';
 import type { Readable, Writable } from 'svelte/store';
 import type ComfyApp from "$lib/components/ComfyApp"
 
-export type UIEditMode = "disabled" | "widgets" | "containers" | "layout";
+export type UIEditMode = "widgets" | "containers" | "layout";
 
 export type UIState = {
     app: ComfyApp,
     nodesLocked: boolean,
     graphLocked: boolean,
     autoAddUI: boolean,
+    uiUnlocked: boolean,
     uiEditMode: UIEditMode,
 }
 
@@ -19,7 +20,8 @@ const store: WritableUIStateStore = writable(
         graphLocked: false,
         nodesLocked: false,
         autoAddUI: true,
-        uiEditMode: "disabled",
+        uiUnlocked: false,
+        uiEditMode: "widgets"
     })
 
 const uiStateStore: WritableUIStateStore =

From 27a6f9e2abeeb864f35d1df2ea157fe4b508f950 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 6 May 2023 11:24:19 -0500
Subject: [PATCH 02/19] Fix properties

---
 src/lib/components/ComfyComboProperty.svelte  |  7 ++++++-
 src/lib/components/ComfyNumberProperty.svelte |  6 +++++-
 src/lib/components/ComfyProperties.svelte     | 16 ++++++++++++++++
 src/lib/components/ComfyUIPane.svelte         |  2 +-
 4 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/ComfyComboProperty.svelte b/src/lib/components/ComfyComboProperty.svelte
index 11b746e..5b9b671 100644
--- a/src/lib/components/ComfyComboProperty.svelte
+++ b/src/lib/components/ComfyComboProperty.svelte
@@ -5,6 +5,7 @@
  export let value: string = "";
  export let values: string[] = [""];
  export let name: string = "";
+ export let disabled: boolean = false;
  let value_: string = ""
 
  $: value;
@@ -27,7 +28,7 @@
 <label class="select-wrapper">
     <BlockTitle>{name}</BlockTitle>
     <div class="select">
-        <select on:blur bind:value>
+        <select on:blur bind:value {disabled}>
             {#each values as value}
                 <option {value}>
                     {value}
@@ -53,4 +54,8 @@
  .select-title {
      padding: 0.2rem;
  }
+
+ input:disabled {
+     cursor: not-allowed;
+ }
 </style>
diff --git a/src/lib/components/ComfyNumberProperty.svelte b/src/lib/components/ComfyNumberProperty.svelte
index 5e96516..d4451b5 100644
--- a/src/lib/components/ComfyNumberProperty.svelte
+++ b/src/lib/components/ComfyNumberProperty.svelte
@@ -5,6 +5,7 @@
  export let value: number = 0;
  export let step: number = 1;
  export let name: string = "";
+ export let disabled: boolean = false;
  let value_: number = 0;
 
  $: value;
@@ -26,7 +27,7 @@
 <label class="number-wrapper">
     <BlockTitle>{name}</BlockTitle>
     <div class="number">
-        <input type="number" bind:value {step}>
+        <input type="number" bind:value {step} {disabled}>
     </div>
 </label>
 
@@ -42,4 +43,7 @@
          }
      }
  }
+ input[disabled] {
+     cursor: not-allowed;
+ }
 </style>
diff --git a/src/lib/components/ComfyProperties.svelte b/src/lib/components/ComfyProperties.svelte
index 251f624..055f352 100644
--- a/src/lib/components/ComfyProperties.svelte
+++ b/src/lib/components/ComfyProperties.svelte
@@ -158,6 +158,7 @@
                                 value={target.attrs[spec.name] || spec.defaultValue}
                                 on:change={(e) => updateAttribute(spec, target, e.detail)}
                                 on:input={(e) => updateAttribute(spec, target, e.detail)}
+                                disabled={!$uiState.uiUnlocked || !spec.editable}
                                 label={spec.name}
                                 max_lines={1}
                                 />
@@ -165,6 +166,7 @@
                                 <Checkbox
                                     value={target.attrs[spec.name] || spec.defaultValue}
                                     on:change={(e) => updateAttribute(spec, target, e.detail)}
+                                    disabled={!$uiState.uiUnlocked || !spec.editable}
                                     label={spec.name}
                                     />
                         {:else if spec.type === "number"}
@@ -172,6 +174,7 @@
                                         name={spec.name}
                                         value={target.attrs[spec.name] || spec.defaultValue}
                                         step={1}
+                                        disabled={!$uiState.uiUnlocked || !spec.editable}
                                         on:change={(e) => updateAttribute(spec, target, e.detail)}
                                         />
                         {:else if spec.type === "enum"}
@@ -179,6 +182,7 @@
                                             name={spec.name}
                                             value={target.attrs[spec.name] || spec.defaultValue}
                                             values={spec.values}
+                                            disabled={!$uiState.uiUnlocked || !spec.editable}
                                             on:change={(e) => updateAttribute(spec, target, e.detail)}
                                             />
                         {/if}
@@ -192,12 +196,14 @@
                                     on:change={(e) => updateProperty(spec, e.detail)}
                                     on:input={(e) => updateProperty(spec, e.detail)}
                                     label={spec.name}
+                                    disabled={!$uiState.uiUnlocked || !spec.editable}
                                     max_lines={1}
                                     />
                             {:else if spec.type === "boolean"}
                                     <Checkbox
                                         value={node.properties[spec.name] || spec.defaultValue}
                                         label={spec.name}
+                                        disabled={!$uiState.uiUnlocked || !spec.editable}
                                         on:change={(e) => updateProperty(spec, e.detail)}
                                         />
                             {:else if spec.type === "number"}
@@ -205,6 +211,7 @@
                                             name={spec.name}
                                             value={node.properties[spec.name] || spec.defaultValue}
                                             step={1}
+                                            disabled={!$uiState.uiUnlocked || !spec.editable}
                                             on:change={(e) => updateProperty(spec, e.detail)}
                                             />
                             {:else if spec.type === "enum"}
@@ -212,6 +219,7 @@
                                                 name={spec.name}
                                                 value={node.properties[spec.name] || spec.defaultValue}
                                                 values={spec.values}
+                                                disabled={!$uiState.uiUnlocked || !spec.editable}
                                                 on:change={(e) => updateProperty(spec, e.detail)}
                                                 />
                             {/if}
@@ -224,12 +232,14 @@
                                     on:change={(e) => updateVar(spec, e.detail)}
                                     on:input={(e) => updateVar(spec, e.detail)}
                                     label={spec.name}
+                                    disabled={!$uiState.uiUnlocked || !spec.editable}
                                     max_lines={1}
                                     />
                             {:else if spec.type === "boolean"}
                                     <Checkbox
                                         value={getVar(node, spec)}
                                         on:change={(e) => updateVar(spec, e.detail)}
+                                        disabled={!$uiState.uiUnlocked || !spec.editable}
                                         label={spec.name}
                                         />
                             {:else if spec.type === "number"}
@@ -237,6 +247,7 @@
                                             name={spec.name}
                                             value={getVar(node, spec)}
                                             step={1}
+                                            disabled={!$uiState.uiUnlocked || !spec.editable}
                                             on:change={(e) => updateVar(spec, e.detail)}
                                             />
                             {:else if spec.type === "enum"}
@@ -244,6 +255,7 @@
                                                 name={spec.name}
                                                 value={getVar(node, spec)}
                                                 values={spec.values}
+                                                disabled={!$uiState.uiUnlocked || !spec.editable}
                                                 on:change={(e) => updateVar(spec, e.detail)}
                                                 />
                             {/if}
@@ -257,12 +269,14 @@
                                 on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
                                 on:input={(e) => updateWorkflowAttribute(spec, e.detail)}
                                 label={spec.name}
+                                disabled={!$uiState.uiUnlocked || !spec.editable}
                                 max_lines={1}
                                 />
                         {:else if spec.type === "boolean"}
                                 <Checkbox
                                     value={$layoutState.attrs[spec.name] || spec.defaultValue}
                                     on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
+                                    disabled={!$uiState.uiUnlocked || !spec.editable}
                                     label={spec.name}
                                     />
                         {:else if spec.type === "number"}
@@ -270,6 +284,7 @@
                                         name={spec.name}
                                         value={$layoutState.attrs[spec.name] || spec.defaultValue}
                                         step={1}
+                                        disabled={!$uiState.uiUnlocked || !spec.editable}
                                         on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
                                         />
                         {:else if spec.type === "enum"}
@@ -277,6 +292,7 @@
                                             name={spec.name}
                                             value={$layoutState.attrs[spec.name] || spec.defaultValue}
                                             values={spec.values}
+                                            disabled={!$uiState.uiUnlocked || !spec.editable}
                                             on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
                                             />
                         {/if}
diff --git a/src/lib/components/ComfyUIPane.svelte b/src/lib/components/ComfyUIPane.svelte
index a6b7415..e430f98 100644
--- a/src/lib/components/ComfyUIPane.svelte
+++ b/src/lib/components/ComfyUIPane.svelte
@@ -50,7 +50,7 @@
 
  function ungroup() {
      const item = layoutState.getCurrentSelection()[0]
-     if (item.type !== "container")
+     if (!item || item.type !== "container")
          return;
 
      $layoutState.currentSelection = []

From b295218afe31a4581d8953e9bd8bf88df82fc418 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 6 May 2023 12:56:54 -0500
Subject: [PATCH 03/19] Tabs container

---
 package.json                              |   1 +
 pnpm-lock.yaml                            |   3 +
 src/lib/components/BlockContainer.svelte  | 111 ++--
 src/lib/components/ComfyProperties.svelte | 742 ++++++++++++----------
 src/lib/components/Container.svelte       |  41 ++
 src/lib/components/TabsContainer.svelte   | 213 +++++++
 src/lib/components/WidgetContainer.svelte |   4 +-
 src/lib/stores/layoutState.ts             |  85 ++-
 src/lib/stores/uiState.ts                 |   2 +-
 vite.config.ts                            |   6 +-
 10 files changed, 772 insertions(+), 436 deletions(-)
 create mode 100644 src/lib/components/Container.svelte
 create mode 100644 src/lib/components/TabsContainer.svelte

diff --git a/package.json b/package.json
index 21713bd..a6e5b0d 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "@gradio/form": "workspace:*",
     "@gradio/gallery": "workspace:*",
     "@gradio/icons": "workspace:*",
+    "@gradio/tabs": "workspace:*",
     "@gradio/theme": "workspace:*",
     "@gradio/upload": "workspace:*",
     "@gradio/utils": "workspace:*",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9cdbb2a..2edccfd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -22,6 +22,9 @@ importers:
       '@gradio/icons':
         specifier: workspace:*
         version: link:gradio/js/icons
+      '@gradio/tabs':
+        specifier: workspace:*
+        version: link:gradio/js/tabs
       '@gradio/theme':
         specifier: workspace:*
         version: link:gradio/js/theme
diff --git a/src/lib/components/BlockContainer.svelte b/src/lib/components/BlockContainer.svelte
index 19aafdf..f3c0a6d 100644
--- a/src/lib/components/BlockContainer.svelte
+++ b/src/lib/components/BlockContainer.svelte
@@ -11,11 +11,15 @@
  import { flip } from 'svelte/animate';
  import layoutState, { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutState";
  import { startDrag, stopDrag } from "$lib/utils"
+ import type { Writable } from "svelte/store";
 
  export let container: ContainerLayout | null = null;
  export let zIndex: number = 0;
  export let classes: string[] = [];
  export let showHandles: boolean = false;
+ export let edit: boolean = false;
+ export let dragDisabled: boolean = false;
+
  let attrsChanged: Writable<boolean> | null = null;
  let children: IDragItem[] | null = null;
  const flipDurationMs = 100;
@@ -41,57 +45,54 @@
 </script>
 
 {#if container && children}
-    {@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets" && zIndex > 1}
-    {#key $attrsChanged}
-        <div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')} z-index{zIndex}"
-             class:hide-block={container.attrs.blockVariant === "hidden"}
-             class:selected={$uiState.uiUnlocked && $layoutState.currentSelection.includes(container.id)}
-             class:root-container={zIndex === 0}
-             class:is-executing={container.isNodeExecuting}
-             class:edit={edit}>
-            <Block>
-                {#if container.attrs.title !== ""}
-                    <label for={String(container.id)} class={($uiState.uiUnlocked && $uiState.uiEditMode === "widgets") ? "edit-title-label" : ""}>
-                        <BlockTitle>{container.attrs.title}</BlockTitle>
-                    </label>
-                {/if}
-                <div class="v-pane"
-                     class:empty={children.length === 0}
-                     class:edit={edit}
-                    use:dndzone="{{
-                                 items: children,
-                                 flipDurationMs,
-                                 centreDraggedOnCursor: true,
-                                 morphDisabled: true,
-                                 dropFromOthersDisabled: zIndex === 0,
-                                 dragDisabled: zIndex === 0 || $layoutState.currentSelection.length > 2 || !$uiState.uiUnlocked
-                                 }}"
-                    on:consider="{handleConsider}"
-                    on:finalize="{handleFinalize}"
+    <div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')} z-index{zIndex}"
+         class:hide-block={container.attrs.blockVariant === "hidden"}
+         class:selected={$uiState.uiUnlocked && $layoutState.currentSelection.includes(container.id)}
+         class:root-container={zIndex === 0}
+         class:is-executing={container.isNodeExecuting}
+         class:edit={edit}>
+        <Block>
+            {#if container.attrs.title && container.attrs.title !== ""}
+                <label for={String(container.id)} class={($uiState.uiUnlocked && $uiState.uiEditMode === "widgets") ? "edit-title-label" : ""}>
+                    <BlockTitle>{container.attrs.title}</BlockTitle>
+                </label>
+            {/if}
+            <div class="v-pane"
+                 class:empty={children.length === 0}
+                 class:edit={edit}
+                 use:dndzone="{{
+                     items: children,
+                     flipDurationMs,
+                     centreDraggedOnCursor: true,
+                     morphDisabled: true,
+                     dropFromOthersDisabled: zIndex === 0,
+                     dragDisabled
+                              }}"
+                 on:consider="{handleConsider}"
+                 on:finalize="{handleFinalize}"
+            >
+                {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
+                    {@const hidden = item?.attrs?.hidden}
+                    <div class="animation-wrapper"
+                         class:hidden={hidden}
+                         animate:flip={{duration:flipDurationMs}}
+                         style={item?.attrs?.flexGrow ? `flex-grow: ${item.attrs.flexGrow}` : ""}
                     >
-                    {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
-                        {@const hidden = item?.attrs?.hidden}
-                        <div class="animation-wrapper"
-                             class:hidden={hidden}
-                             animate:flip={{duration:flipDurationMs}}
-                             style={item?.attrs?.flexGrow ? `flex-grow: ${item.attrs.flexGrow}` : ""}
-                        >
-                            <WidgetContainer dragItem={item} zIndex={zIndex+1} />
-                            {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                                <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
-                            {/if}
-                        </div>
-                    {/each}
-                </div>
-                {#if container.attrs.hidden && edit}
-                    <div class="handle handle-hidden" class:hidden={!edit} style="z-index: {zIndex+100}"/>
-                {/if}
-                {#if showHandles}
-                    <div class="handle handle-container" style="z-index: {zIndex+100}" data-drag-item-id={container.id} on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
-                {/if}
-            </Block>
-        </div>
-    {/key}
+                        <WidgetContainer dragItem={item} zIndex={zIndex+1} />
+                        {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
+                            <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                        {/if}
+                    </div>
+                {/each}
+            </div>
+            {#if container.attrs.hidden && edit}
+                <div class="handle handle-hidden" class:hidden={!edit} style="z-index: {zIndex+100}"/>
+            {/if}
+            {#if showHandles}
+                <div class="handle handle-container" style="z-index: {zIndex+100}" data-drag-item-id={container.id} on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
+            {/if}
+        </Block>
+    </div>
 {/if}
 
 <style lang="scss">
@@ -158,7 +159,7 @@
          }
      }
 
-     :global(.block) {
+     > :global(.block) {
          height: fit-content;
      }
 
@@ -170,7 +171,7 @@
          padding: 1.4em;
      }
 
-     :global(.hide-block > .block) {
+     > :global(.hide-block > .block) {
          padding: 0.5em 0.25em;
          box-shadow: unset;
          border-width: 0;
@@ -289,12 +290,6 @@
      color: var(--input-placeholder-color);
  }
 
- .widget-edit-outline {
-     border: 2px dashed var(--color-blue-400);
-     margin: 0.2em;
-     padding: 0.2em;
- }
-
  .root-container > :global(.block) {
      padding: 0px;
  }
diff --git a/src/lib/components/ComfyProperties.svelte b/src/lib/components/ComfyProperties.svelte
index 055f352..5e9e871 100644
--- a/src/lib/components/ComfyProperties.svelte
+++ b/src/lib/components/ComfyProperties.svelte
@@ -1,346 +1,396 @@
-<script lang="ts">
- import { Block, BlockTitle } from "@gradio/atoms";
- import { TextBox, Checkbox } from "@gradio/form";
- import { LGraphNode } from "@litegraph-ts/core"
- import layoutState, { type IDragItem, type WidgetLayout, ALL_ATTRIBUTES, type AttributesSpec } from "$lib/stores/layoutState"
- import uiState from "$lib/stores/uiState"
- import { get } from "svelte/store"
- import type { ComfyWidgetNode } from "$lib/nodes";
- import ComfyNumberProperty from "./ComfyNumberProperty.svelte";
- import ComfyComboProperty from "./ComfyComboProperty.svelte";
-
- let target: IDragItem | null = null;
- let node: LGraphNode | null = null;
-
- $: if ($layoutState.currentSelection.length > 0) {
-     const targetId = $layoutState.currentSelection.slice(-1)[0]
-     target = $layoutState.allItems[targetId].dragItem
-     if (target.type === "widget") {
-         node = (target as WidgetLayout).node
-     }
-     else {
-         node = null;
-     }
- }
- else if ($layoutState.currentSelectionNodes.length > 0) {
-     target = null;
-     node = $layoutState.currentSelectionNodes[0]
- }
- else {
-     target = null
-     node = null;
- }
-
- let targetType: string = "???"
-
- $: {
-     if (node != null)
-         targetType = node.type || "Node"
-     else if (target)
-         targetType = "Group"
-     else
-         targetType = ""
- }
-
- function validNodeProperty(spec: AttributesSpec, node: LGraphNode | null): boolean {
-     if (node == null)
-         return false;
-
-     if (spec.canShow && !spec.canShow(node))
-         return false;
-
-     if (spec.validNodeTypes) {
-         return spec.validNodeTypes.indexOf(node.type) !== -1;
-     }
-     return spec.name in node.properties
- }
-
- function validWidgetAttribute(spec: AttributesSpec, widget: IDragItem | null): boolean {
-     if (widget == null)
-         return false;
-     if (spec.canShow)
-         return spec.canShow(widget);
-
-     return spec.name in widget.attrs
- }
-
- function updateAttribute(entry: AttributesSpec, target: IDragItem | null, value: any) {
-     if (target == null)
-         return;
-
-     const name = entry.name
-     console.warn("updateAttribute", name, value)
-
-     target.attrs[name] = value
-     target.attrsChanged.set(!get(target.attrsChanged))
-
-     if (node && "propsChanged" in node) {
-         const comfyNode = node as ComfyWidgetNode
-         comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1)
-     }
- }
-
- function updateProperty(entry: AttributesSpec, value: any) {
-     if (node == null)
-         return
-
-     const name = entry.name
-     console.warn("updateProperty", name, value)
-
-     node.properties[name] = value;
-
-     if ("propsChanged" in node) {
-         const comfyNode = node as ComfyWidgetNode
-         comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1)
-     }
- }
-
- function getVar(node: LGraphNode, spec: AttributesSpec) {
-     let value = node[spec.name] || spec.defaultValue
-     if (spec.serialize)
-         value = spec.serialize(value)
-     console.debug("[ComfyProperties] getVar", spec, value, node)
-     return value
- }
-
- function updateVar(entry: any, value: any) {
-     if (node == null)
-         return;
-
-     const name = entry.name
-     console.warn("updateVar", name, value)
-
-     if (entry.deserialize)
-         value = entry.deserialize(value)
-
-     console.debug("[ComfyProperties] updateVar", entry, value, name, node)
-     node[name] = value;
-
-     if ("propsChanged" in node) {
-         const comfyNode = node as ComfyWidgetNode
-         comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1)
-     }
- }
-
- function updateWorkflowAttribute(entry: AttributesSpec, value: any) {
-     const name = entry.name
-     console.warn("updateWorkflowAttribute", name, value)
-
-     $layoutState.attrs[name] = value
-     $layoutState = $layoutState
- }
-</script>
-
-<div class="props">
-    <div class="top">
-        <div class="target-name">
-            <span>
-                <span class="title">{target?.attrs?.title || node?.title || "Workflow"}<span>
-                    {#if targetType !== ""}
-                        <span class="type">({targetType})</span>
-                    {/if}
-                </span>
-            </span>
-        </div>
-    </div>
-    <div class="props-entries">
-        {#each ALL_ATTRIBUTES as category(category.categoryName)}
-            <div class="category-name">
-                <span>
-                    <span class="title">{category.categoryName}</span>
-                </span>
-            </div>
-            {#each category.specs as spec(spec.id)}
-                {#if spec.location === "widget" && validWidgetAttribute(spec, target)}
-                    <div class="props-entry">
-                        {#if spec.type === "string"}
-                            <TextBox
-                                value={target.attrs[spec.name] || spec.defaultValue}
-                                on:change={(e) => updateAttribute(spec, target, e.detail)}
-                                on:input={(e) => updateAttribute(spec, target, e.detail)}
-                                disabled={!$uiState.uiUnlocked || !spec.editable}
-                                label={spec.name}
-                                max_lines={1}
-                                />
-                        {:else if spec.type === "boolean"}
-                                <Checkbox
-                                    value={target.attrs[spec.name] || spec.defaultValue}
-                                    on:change={(e) => updateAttribute(spec, target, e.detail)}
-                                    disabled={!$uiState.uiUnlocked || !spec.editable}
-                                    label={spec.name}
-                                    />
-                        {:else if spec.type === "number"}
-                                    <ComfyNumberProperty
-                                        name={spec.name}
-                                        value={target.attrs[spec.name] || spec.defaultValue}
-                                        step={1}
-                                        disabled={!$uiState.uiUnlocked || !spec.editable}
-                                        on:change={(e) => updateAttribute(spec, target, e.detail)}
-                                        />
-                        {:else if spec.type === "enum"}
-                                        <ComfyComboProperty
-                                            name={spec.name}
-                                            value={target.attrs[spec.name] || spec.defaultValue}
-                                            values={spec.values}
-                                            disabled={!$uiState.uiUnlocked || !spec.editable}
-                                            on:change={(e) => updateAttribute(spec, target, e.detail)}
-                                            />
-                        {/if}
-                    </div>
-                {:else if node}
-                    {#if spec.location === "nodeProps" && validNodeProperty(spec, node)}
-                        <div class="props-entry">
-                            {#if spec.type === "string"}
-                                <TextBox
-                                    value={node.properties[spec.name] || spec.defaultValue}
-                                    on:change={(e) => updateProperty(spec, e.detail)}
-                                    on:input={(e) => updateProperty(spec, e.detail)}
-                                    label={spec.name}
-                                    disabled={!$uiState.uiUnlocked || !spec.editable}
-                                    max_lines={1}
-                                    />
-                            {:else if spec.type === "boolean"}
-                                    <Checkbox
-                                        value={node.properties[spec.name] || spec.defaultValue}
-                                        label={spec.name}
-                                        disabled={!$uiState.uiUnlocked || !spec.editable}
-                                        on:change={(e) => updateProperty(spec, e.detail)}
-                                        />
-                            {:else if spec.type === "number"}
-                                        <ComfyNumberProperty
-                                            name={spec.name}
-                                            value={node.properties[spec.name] || spec.defaultValue}
-                                            step={1}
-                                            disabled={!$uiState.uiUnlocked || !spec.editable}
-                                            on:change={(e) => updateProperty(spec, e.detail)}
-                                            />
-                            {:else if spec.type === "enum"}
-                                            <ComfyComboProperty
-                                                name={spec.name}
-                                                value={node.properties[spec.name] || spec.defaultValue}
-                                                values={spec.values}
-                                                disabled={!$uiState.uiUnlocked || !spec.editable}
-                                                on:change={(e) => updateProperty(spec, e.detail)}
-                                                />
-                            {/if}
-                        </div>
-                    {:else if spec.location === "nodeVars" && spec.name in node}
-                        <div class="props-entry">
-                            {#if spec.type === "string"}
-                                <TextBox
-                                    value={getVar(node, spec)}
-                                    on:change={(e) => updateVar(spec, e.detail)}
-                                    on:input={(e) => updateVar(spec, e.detail)}
-                                    label={spec.name}
-                                    disabled={!$uiState.uiUnlocked || !spec.editable}
-                                    max_lines={1}
-                                    />
-                            {:else if spec.type === "boolean"}
-                                    <Checkbox
-                                        value={getVar(node, spec)}
-                                        on:change={(e) => updateVar(spec, e.detail)}
-                                        disabled={!$uiState.uiUnlocked || !spec.editable}
-                                        label={spec.name}
-                                        />
-                            {:else if spec.type === "number"}
-                                        <ComfyNumberProperty
-                                            name={spec.name}
-                                            value={getVar(node, spec)}
-                                            step={1}
-                                            disabled={!$uiState.uiUnlocked || !spec.editable}
-                                            on:change={(e) => updateVar(spec, e.detail)}
-                                            />
-                            {:else if spec.type === "enum"}
-                                            <ComfyComboProperty
-                                                name={spec.name}
-                                                value={getVar(node, spec)}
-                                                values={spec.values}
-                                                disabled={!$uiState.uiUnlocked || !spec.editable}
-                                                on:change={(e) => updateVar(spec, e.detail)}
-                                                />
-                            {/if}
-                        </div>
-                    {/if}
-                {:else if spec.location === "workflow" && spec.name in $layoutState.attrs}
-                    <div class="props-entry">
-                        {#if spec.type === "string"}
-                            <TextBox
-                                value={$layoutState.attrs[spec.name] || spec.defaultValue}
-                                on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
-                                on:input={(e) => updateWorkflowAttribute(spec, e.detail)}
-                                label={spec.name}
-                                disabled={!$uiState.uiUnlocked || !spec.editable}
-                                max_lines={1}
-                                />
-                        {:else if spec.type === "boolean"}
-                                <Checkbox
-                                    value={$layoutState.attrs[spec.name] || spec.defaultValue}
-                                    on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
-                                    disabled={!$uiState.uiUnlocked || !spec.editable}
-                                    label={spec.name}
-                                    />
-                        {:else if spec.type === "number"}
-                                    <ComfyNumberProperty
-                                        name={spec.name}
-                                        value={$layoutState.attrs[spec.name] || spec.defaultValue}
-                                        step={1}
-                                        disabled={!$uiState.uiUnlocked || !spec.editable}
-                                        on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
-                                        />
-                        {:else if spec.type === "enum"}
-                                        <ComfyComboProperty
-                                            name={spec.name}
-                                            value={$layoutState.attrs[spec.name] || spec.defaultValue}
-                                            values={spec.values}
-                                            disabled={!$uiState.uiUnlocked || !spec.editable}
-                                            on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
-                                            />
-                        {/if}
-                    </div>
-                {/if}
-            {/each}
-        {/each}
-    </div>
-</div>
-
-<style lang="scss">
- .props-entry {
-     padding-bottom: 0.5rem;
-     padding-left: 0.5rem;
-     padding-right: 0.5rem;
-     display: flex;
-     flex-direction: row;
- }
-
- .target-name {
-     border-color: var(--neutral-400);
-     background: var(--neutral-300);
-     padding: 0.8rem 1.0rem;
-
-     .title {
-         font-weight: bold;
-     }
- }
-
- .category-name {
-     padding: 0.4rem 1.0rem;
-     border-color: var(--neutral-300);
-     background: var(--neutral-200);
- }
-
- .target-name, .category-name {
-     border-width: var(--block-border-width);
-
-     .type {
-         color: var(--neutral-500);
-     }
- }
-
- .bottom {
-     /* width: 100%;
-        height: auto;
-        position: absolute;
-        bottom: 0;
-        padding: 0.5em; */
- }
-</style>
+<script lang="ts">
+ import { Block, BlockTitle } from "@gradio/atoms";
+ import { TextBox, Checkbox } from "@gradio/form";
+ import { LGraphNode } from "@litegraph-ts/core"
+ import layoutState, { type IDragItem, type WidgetLayout, ALL_ATTRIBUTES, type AttributesSpec } from "$lib/stores/layoutState"
+ import uiState from "$lib/stores/uiState"
+ import { get, type Writable, writable } from "svelte/store"
+ import type { ComfyWidgetNode } from "$lib/nodes";
+ import ComfyNumberProperty from "./ComfyNumberProperty.svelte";
+ import ComfyComboProperty from "./ComfyComboProperty.svelte";
+
+ let target: IDragItem | null = null;
+ let node: LGraphNode | null = null;
+ let attrsChanged: Writable<boolean> | null = null;
+ let refreshPanel: Writable<number> = writable(0);
+
+ $: if ($layoutState.currentSelection.length > 0) {
+     const targetId = $layoutState.currentSelection.slice(-1)[0]
+     target = $layoutState.allItems[targetId].dragItem
+     attrsChanged = target.attrsChanged;
+     if (target.type === "widget") {
+         node = (target as WidgetLayout).node
+     }
+     else {
+         node = null;
+     }
+ }
+ else if ($layoutState.currentSelectionNodes.length > 0) {
+     target = null;
+     node = $layoutState.currentSelectionNodes[0]
+     attrsChanged = null;
+ }
+ else {
+     target = null
+     node = null;
+     attrsChanged = null;
+ }
+
+ $: if (target) {
+     for (const cat of Object.values(ALL_ATTRIBUTES)) {
+         for (const spec of Object.values(cat.specs)) {
+             if (spec.location === "widget" && target.attrs[spec.name] == null) {
+                 if (spec.canShow && !spec.canShow(target))
+                     continue;
+
+                 console.warn("Set default widget attr", spec.name, spec.defaultValue, target)
+                 let value = spec.defaultValue;
+                 target.attrs[spec.name] = value;
+                 if (spec.refreshPanelOnChange)
+                     $refreshPanel += 1;
+             }
+         }
+     }
+ }
+
+ let targetType: string = "???"
+
+ $: {
+     if (node != null)
+         targetType = node.type || "Node"
+     else if (target)
+         targetType = "Group"
+     else
+         targetType = ""
+ }
+
+ function validNodeProperty(spec: AttributesSpec, node: LGraphNode | null): boolean {
+     if (node == null)
+         return false;
+
+     if (spec.canShow && !spec.canShow(node))
+         return false;
+
+     if (spec.validNodeTypes) {
+         return spec.validNodeTypes.indexOf(node.type) !== -1;
+     }
+     return spec.name in node.properties
+ }
+
+ function validWidgetAttribute(spec: AttributesSpec, widget: IDragItem | null): boolean {
+     if (widget == null)
+         return false;
+     if (spec.canShow)
+         return spec.canShow(widget);
+
+     return spec.name in widget.attrs
+ }
+
+ function getAttribute(target: IDragItem, spec: AttributesSpec): any {
+     let value = target.attrs[spec.name]
+     if (value == null)
+         value = spec.defaultValue
+     else if (spec.serialize)
+         value = spec.serialize(value)
+     console.debug("[ComfyProperties] getAttribute", spec.name, value, target, spec)
+     return value
+ }
+
+ function updateAttribute(spec: AttributesSpec, target: IDragItem | null, value: any) {
+     if (target == null)
+         return;
+
+     const name = spec.name
+
+     console.debug("[ComfyProperties] updateAttribute", spec, value, name, node)
+     if (spec.deserialize)
+         value = spec.deserialize(value)
+
+     target.attrs[name] = value
+     target.attrsChanged.set(!get(target.attrsChanged))
+
+     if (node && "propsChanged" in node) {
+         const comfyNode = node as ComfyWidgetNode
+         comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1)
+     }
+
+     console.warn(spec)
+     if (spec.refreshPanelOnChange) {
+         console.error("A! refresh")
+         $refreshPanel += 1;
+     }
+ }
+
+ function updateProperty(spec: AttributesSpec, value: any) {
+     if (node == null)
+         return
+
+     const name = spec.name
+     console.warn("updateProperty", name, value)
+
+     node.properties[name] = value;
+
+     if ("propsChanged" in node) {
+         const comfyNode = node as ComfyWidgetNode
+         comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1)
+     }
+
+     if (spec.refreshPanelOnChange)
+         $refreshPanel += 1;
+ }
+
+ function getVar(node: LGraphNode, spec: AttributesSpec) {
+     let value = node[spec.name]
+     if (value == null)
+         value = spec.defaultValue
+     else if (spec.serialize)
+         value = spec.serialize(value)
+     console.debug("[ComfyProperties] getVar", spec, value, node)
+     return value
+ }
+
+ function updateVar(spec: AttributesSpec, value: any) {
+     if (node == null)
+         return;
+
+     const name = spec.name
+
+     console.debug("[ComfyProperties] updateVar", spec, value, name, node)
+     if (spec.deserialize)
+         value = spec.deserialize(value)
+
+     node[name] = value;
+
+     if ("propsChanged" in node) {
+         const comfyNode = node as ComfyWidgetNode
+         comfyNode.propsChanged.set(get(comfyNode.propsChanged) + 1)
+     }
+
+     if (spec.refreshPanelOnChange)
+         $refreshPanel += 1;
+ }
+
+ function updateWorkflowAttribute(entry: AttributesSpec, value: any) {
+     const name = entry.name
+     console.warn("updateWorkflowAttribute", name, value)
+
+     $layoutState.attrs[name] = value
+     $layoutState = $layoutState
+ }
+</script>
+
+<div class="props">
+    <div class="top">
+        <div class="target-name">
+            <span>
+                <span class="title">{target?.attrs?.title || node?.title || "Workflow"}<span>
+                    {#if targetType !== ""}
+                        <span class="type">({targetType})</span>
+                    {/if}
+                </span>
+            </span>
+        </div>
+    </div>
+    <div class="props-entries">
+        {#key $refreshPanel}
+            {#each ALL_ATTRIBUTES as category(category.categoryName)}
+                <div class="category-name">
+                    <span>
+                        <span class="title">{category.categoryName}</span>
+                    </span>
+                </div>
+                {#each category.specs as spec(spec.id)}
+                    {#if spec.location === "widget" && validWidgetAttribute(spec, target)}
+                        <div class="props-entry">
+                            {#if spec.type === "string"}
+                                <TextBox
+                                    value={getAttribute(target, spec)}
+                                    on:change={(e) => updateAttribute(spec, target, e.detail)}
+                                    on:input={(e) => updateAttribute(spec, target, e.detail)}
+                                    disabled={!$uiState.uiUnlocked || !spec.editable}
+                                    label={spec.name}
+                                    max_lines={1}
+                                    />
+                            {:else if spec.type === "boolean"}
+                                    <Checkbox
+                                        value={getAttribute(target, spec)}
+                                        on:change={(e) => updateAttribute(spec, target, e.detail)}
+                                        disabled={!$uiState.uiUnlocked || !spec.editable}
+                                        label={spec.name}
+                                        />
+                            {:else if spec.type === "number"}
+                                        <ComfyNumberProperty
+                                            name={spec.name}
+                                            value={getAttribute(target, spec)}
+                                            step={1}
+                                            disabled={!$uiState.uiUnlocked || !spec.editable}
+                                            on:change={(e) => updateAttribute(spec, target, e.detail)}
+                                            />
+                            {:else if spec.type === "enum"}
+                                            <ComfyComboProperty
+                                                name={spec.name}
+                                                value={getAttribute(target, spec)}
+                                                values={spec.values}
+                                                disabled={!$uiState.uiUnlocked || !spec.editable}
+                                                on:change={(e) => updateAttribute(spec, target, e.detail)}
+                                                />
+                            {/if}
+                        </div>
+                    {:else if node}
+                        {#if spec.location === "nodeProps" && validNodeProperty(spec, node)}
+                            <div class="props-entry">
+                                {#if spec.type === "string"}
+                                    <TextBox
+                                        value={node.properties[spec.name] || spec.defaultValue}
+                                        on:change={(e) => updateProperty(spec, e.detail)}
+                                        on:input={(e) => updateProperty(spec, e.detail)}
+                                        label={spec.name}
+                                        disabled={!$uiState.uiUnlocked || !spec.editable}
+                                        max_lines={1}
+                                        />
+                                {:else if spec.type === "boolean"}
+                                        <Checkbox
+                                            value={node.properties[spec.name] || spec.defaultValue}
+                                            label={spec.name}
+                                            disabled={!$uiState.uiUnlocked || !spec.editable}
+                                            on:change={(e) => updateProperty(spec, e.detail)}
+                                            />
+                                {:else if spec.type === "number"}
+                                            <ComfyNumberProperty
+                                                name={spec.name}
+                                                value={node.properties[spec.name] || spec.defaultValue}
+                                                step={1}
+                                                disabled={!$uiState.uiUnlocked || !spec.editable}
+                                                on:change={(e) => updateProperty(spec, e.detail)}
+                                                />
+                                {:else if spec.type === "enum"}
+                                                <ComfyComboProperty
+                                                    name={spec.name}
+                                                    value={node.properties[spec.name] || spec.defaultValue}
+                                                    values={spec.values}
+                                                    disabled={!$uiState.uiUnlocked || !spec.editable}
+                                                    on:change={(e) => updateProperty(spec, e.detail)}
+                                                    />
+                                {/if}
+                            </div>
+                        {:else if spec.location === "nodeVars" && spec.name in node}
+                            <div class="props-entry">
+                                {#if spec.type === "string"}
+                                    <TextBox
+                                        value={getVar(node, spec)}
+                                        on:change={(e) => updateVar(spec, e.detail)}
+                                        on:input={(e) => updateVar(spec, e.detail)}
+                                        label={spec.name}
+                                        disabled={!$uiState.uiUnlocked || !spec.editable}
+                                        max_lines={1}
+                                        />
+                                {:else if spec.type === "boolean"}
+                                        <Checkbox
+                                            value={getVar(node, spec)}
+                                            on:change={(e) => updateVar(spec, e.detail)}
+                                            disabled={!$uiState.uiUnlocked || !spec.editable}
+                                            label={spec.name}
+                                            />
+                                {:else if spec.type === "number"}
+                                            <ComfyNumberProperty
+                                                name={spec.name}
+                                                value={getVar(node, spec)}
+                                                step={1}
+                                                disabled={!$uiState.uiUnlocked || !spec.editable}
+                                                on:change={(e) => updateVar(spec, e.detail)}
+                                                />
+                                {:else if spec.type === "enum"}
+                                                <ComfyComboProperty
+                                                    name={spec.name}
+                                                    value={getVar(node, spec)}
+                                                    values={spec.values}
+                                                    disabled={!$uiState.uiUnlocked || !spec.editable}
+                                                    on:change={(e) => updateVar(spec, e.detail)}
+                                                    />
+                                {/if}
+                            </div>
+                        {/if}
+                    {:else if spec.location === "workflow" && spec.name in $layoutState.attrs}
+                        <div class="props-entry">
+                            {#if spec.type === "string"}
+                                <TextBox
+                                    value={$layoutState.attrs[spec.name] || spec.defaultValue}
+                                    on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
+                                    on:input={(e) => updateWorkflowAttribute(spec, e.detail)}
+                                    label={spec.name}
+                                    disabled={!$uiState.uiUnlocked || !spec.editable}
+                                    max_lines={1}
+                                    />
+                            {:else if spec.type === "boolean"}
+                                    <Checkbox
+                                        value={$layoutState.attrs[spec.name] || spec.defaultValue}
+                                        on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
+                                        disabled={!$uiState.uiUnlocked || !spec.editable}
+                                        label={spec.name}
+                                        />
+                            {:else if spec.type === "number"}
+                                        <ComfyNumberProperty
+                                            name={spec.name}
+                                            value={$layoutState.attrs[spec.name] || spec.defaultValue}
+                                            step={1}
+                                            disabled={!$uiState.uiUnlocked || !spec.editable}
+                                            on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
+                                            />
+                            {:else if spec.type === "enum"}
+                                            <ComfyComboProperty
+                                                name={spec.name}
+                                                value={$layoutState.attrs[spec.name] || spec.defaultValue}
+                                                values={spec.values}
+                                                disabled={!$uiState.uiUnlocked || !spec.editable}
+                                                on:change={(e) => updateWorkflowAttribute(spec, e.detail)}

+                                                />
+                            {/if}
+                        </div>
+                    {/if}
+                {/each}
+            {/each}
+        {/key}
+    </div>
+</div>
+
+<style lang="scss">
+ .props-entry {
+     padding-bottom: 0.5rem;
+     padding-left: 0.5rem;
+     padding-right: 0.5rem;
+     display: flex;
+     flex-direction: row;
+ }
+
+ .target-name {
+     border-color: var(--neutral-400);
+     background: var(--neutral-300);
+     padding: 0.8rem 1.0rem;
+
+     .title {
+         font-weight: bold;
+     }
+ }
+
+ .category-name {
+     padding: 0.4rem 1.0rem;
+     border-color: var(--neutral-300);
+     background: var(--neutral-200);
+ }
+
+ .target-name, .category-name {
+     border-width: var(--block-border-width);
+
+     .type {
+         color: var(--neutral-500);
+     }
+ }
+
+ .bottom {
+     /* width: 100%;
+        height: auto;
+        position: absolute;
+        bottom: 0;
+        padding: 0.5em; */
+ }
+</style>
diff --git a/src/lib/components/Container.svelte b/src/lib/components/Container.svelte
new file mode 100644
index 0000000..bb756af
--- /dev/null
+++ b/src/lib/components/Container.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+ import { Block, BlockTitle } from "@gradio/atoms";
+ import uiState from "$lib/stores/uiState";
+ import WidgetContainer from "./WidgetContainer.svelte"
+ import BlockContainer from "./BlockContainer.svelte"
+ import TabsContainer from "./TabsContainer.svelte"
+
+ import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME, SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';
+
+ import {fade} from 'svelte/transition';
+ // notice - fade in works fine but don't add svelte's fade-out (known issue)
+ import {cubicIn} from 'svelte/easing';
+ import { flip } from 'svelte/animate';
+ import layoutState, { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutState";
+ import { startDrag, stopDrag } from "$lib/utils"
+
+ export let container: ContainerLayout | null = null;
+ export let zIndex: number = 0;
+ export let classes: string[] = [];
+ export let showHandles: boolean = false;
+ let attrsChanged: Writable<boolean> | null = null;
+
+ $: if (container) {
+     attrsChanged = container.attrsChanged
+ }
+ else {
+     attrsChanged = null
+ }
+</script>
+
+{#if container}
+    {@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets" && zIndex > 1}
+    {@const dragDisabled = zIndex === 0 || $layoutState.currentSelection.length > 2 || !$uiState.uiUnlocked}
+    {#key $attrsChanged}
+        {#if container.attrs.variant === "tabs"}
+            <TabsContainer {container} {zIndex} {classes} {showHandles} {edit} {dragDisabled} />
+        {:else}
+            <BlockContainer {container} {zIndex} {classes} {showHandles} {edit} {dragDisabled} />
+        {/if}
+    {/key}
+{/if}
diff --git a/src/lib/components/TabsContainer.svelte b/src/lib/components/TabsContainer.svelte
new file mode 100644
index 0000000..b8344c5
--- /dev/null
+++ b/src/lib/components/TabsContainer.svelte
@@ -0,0 +1,213 @@
+<script lang="ts">
+ import { Block, BlockTitle } from "@gradio/atoms";
+ import { Tabs, TabItem } from "@gradio/tabs";
+ import uiState from "$lib/stores/uiState";
+ import WidgetContainer from "./WidgetContainer.svelte"
+
+ import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME, SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';
+
+ import {fade} from 'svelte/transition';
+ // notice - fade in works fine but don't add svelte's fade-out (known issue)
+ import {cubicIn} from 'svelte/easing';
+ import { flip } from 'svelte/animate';
+ import layoutState, { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutState";
+ import { startDrag, stopDrag } from "$lib/utils"
+ import type { Writable } from "svelte/store";
+
+ export let container: ContainerLayout | null = null;
+ export let zIndex: number = 0;
+ export let classes: string[] = [];
+ export let showHandles: boolean = false;
+ export let edit: boolean = false;
+ export let dragDisabled: boolean = false;
+
+ let attrsChanged: Writable<boolean> | null = null;
+ let children: IDragItem[] | null = null;
+ const flipDurationMs = 100;
+
+ let selectedIndex: number = 0;
+
+ $: if (container) {
+     children = $layoutState.allItems[container.id].children;
+     attrsChanged = container.attrsChanged
+ }
+ else {
+     children = null;
+     attrsChanged = null
+ }
+
+ function handleConsider(evt: any) {
+     children = layoutState.updateChildren(container, evt.detail.items)
+     // console.log(dragItems);
+ };
+
+ function handleFinalize(evt: any) {
+     children = layoutState.updateChildren(container, evt.detail.items)
+     // Ensure dragging is stopped on drag finish
+ };
+
+ function getTabName(container: ContainerLayout, i: number): string {
+     const tabNames = container.attrs.tabNames
+     if (!tabNames)
+         return `Tab ${i}`
+
+     const tabName = tabNames[i]
+     if (tabName == null || tabName === "")
+         return `Tab ${i}`
+
+     return tabName
+ }
+</script>
+
+{#if container && children}
+    <div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')} z-index{zIndex}"
+         class:hide-block={container.attrs.blockVariant === "hidden"}
+         class:selected={$uiState.uiUnlocked && $layoutState.currentSelection.includes(container.id)}
+         class:root-container={zIndex === 0}
+         class:is-executing={container.isNodeExecuting}
+         class:edit={edit}>
+        {#if edit}
+            <Block>
+                {#if container.attrs.title && container.attrs.title !== ""}
+                    <BlockTitle show_label={true}>{container.attrs.title}</BlockTitle>
+                {/if}
+                <div class="v-pane"
+                     class:empty={children.length === 0}
+                     class:edit={edit}
+                     use:dndzone="{{
+                          items: children,
+                          flipDurationMs,
+                          centreDraggedOnCursor: true,
+                          morphDisabled: true,
+                          dropFromOthersDisabled: zIndex === 0,
+                          dragDisabled
+                                  }}"
+                     on:consider="{handleConsider}"
+                     on:finalize="{handleFinalize}"
+                >
+                    {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item, i(item.id)}
+                        {@const hidden = item?.attrs?.hidden}
+                        {@const tabName = getTabName(container, i)}
+                        <div class="animation-wrapper"
+                             class:hidden={hidden}
+                             animate:flip={{duration:flipDurationMs}}
+                             style={item?.attrs?.flexGrow ? `flex-grow: ${item.attrs.flexGrow}` : ""}>
+                            <Block>
+                                <label for={String(item.id)}>
+                                    <BlockTitle><strong>Tab {i+1}:</strong> {tabName}</BlockTitle>
+                                </label>
+                                <WidgetContainer dragItem={item} zIndex={zIndex+1} />
+                                {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
+                                    <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                                {/if}
+                            </Block>
+                        </div>
+                    {/each}
+                </div>
+                {#if container.attrs.hidden && edit}
+                    <div class="handle handle-hidden" class:hidden={!edit} style="z-index: {zIndex+100}"/>
+                {/if}
+                {#if showHandles}
+                    <div class="handle handle-container" style="z-index: {zIndex+100}" data-drag-item-id={container.id} on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
+                {/if}
+            </Block>
+        {:else}
+            <Tabs>
+                {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item, i(item.id)}
+                    {@const tabName = getTabName(container, i)}
+                    <TabItem name={tabName} on:select={() => console.log("tab " + i)}>
+                        <WidgetContainer dragItem={item} zIndex={zIndex+1} />
+                    </TabItem>
+                {/each}
+            </Tabs>
+        {/if}
+    </div>
+{/if}
+
+<style lang="scss">
+ .container {
+     display: flex;
+
+     > :global(*) {
+         border-radius: 0;
+     }
+
+     :global(.v-pane > .block) {
+         height: fit-content;
+     }
+
+     .edit > :global(.v-pane > .block) {
+         border-color: var(--color-pink-500);
+         border-width: 2px;
+         border-style: dashed !important;
+         margin: 0.2em;
+         padding: 1.4em;
+     }
+
+     /* :global(.hide-block > .v-pane > .block) {
+        padding: 0.5em 0.25em;
+        box-shadow: unset;
+        border-width: 0;
+        border-color: unset;
+        border-radius: unset;
+        background: var(--block-background-fill);
+        width: 100%;
+        line-height: var(--line-sm);
+        } */
+
+     &.horizontal {
+         flex-wrap: wrap;
+         gap: var(--layout-gap);
+         width: var(--size-full);
+
+         > :global(.block > .v-pane) {
+             flex-direction: row;
+         }
+
+         > :global(*), > :global(.form > *) {
+             flex: 1 1 0%;
+             flex-wrap: wrap;
+             min-width: min(160px, 100%);
+         }
+     }
+
+     &.vertical {
+         position: relative;
+
+         > :global(.block > .v-pane) {
+             flex-direction: column;
+         }
+
+         > :global(*), > :global(.form > *), .v-pane {
+             width: var(--size-full);
+         }
+     }
+ }
+
+ .handle {
+     cursor: grab;
+     z-index: 99999;
+     position: absolute;
+     right: 0;
+     top: 0;
+     width: 100%;
+     height: 100%;
+ }
+
+ .animation-wrapper {
+     position: relative;
+     flex-grow: 100;
+ }
+
+ .handle-widget:hover {
+     background-color: #add8e680;
+ }
+
+ .handle-container:hover {
+     background-color: #d8ade680;
+ }
+
+ .container.selected > :global(.block) {
+     background: var(--color-yellow-300);
+ }
+</style>
diff --git a/src/lib/components/WidgetContainer.svelte b/src/lib/components/WidgetContainer.svelte
index 8b3478e..f0e2e34 100644
--- a/src/lib/components/WidgetContainer.svelte
+++ b/src/lib/components/WidgetContainer.svelte
@@ -4,7 +4,7 @@
 
  import layoutState, { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutState";
  import { startDrag, stopDrag } from "$lib/utils"
- import BlockContainer from "./BlockContainer.svelte"
+ import Container from "./Container.svelte"
  import { type Writable } from "svelte/store"
  import type { ComfyWidgetNode } from "$lib/nodes";
 
@@ -59,7 +59,7 @@
 
 {#if container}
     {#key $attrsChanged}
-        <BlockContainer {container} {classes} {zIndex} {showHandles} />
+        <Container {container} {classes} {zIndex} {showHandles} />
     {/key}
 {:else if widget && widget.node}
     {@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets" && zIndex > 1}
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
index 58660f1..d987715 100644
--- a/src/lib/stores/layoutState.ts
+++ b/src/lib/stores/layoutState.ts
@@ -35,7 +35,12 @@ export type Attributes = {
     blockVariant?: "block" | "hidden",
     hidden?: boolean,
     disabled?: boolean,
-    flexGrow?: number
+    flexGrow?: number,
+
+    /** Display variant for widgets/containers (e.g. number widget can act as slider/knob/dial) */
+    variant?: string,
+
+    tabNames?: string[]
 }
 
 export type AttributesSpec = {
@@ -44,8 +49,8 @@ export type AttributesSpec = {
     type: string,
     location: "widget" | "nodeProps" | "nodeVars" | "workflow"
     editable: boolean,
+    defaultValue: any,
 
-    defaultValue?: any,
     values?: string[],
     hidden?: boolean,
     validNodeTypes?: string[],
@@ -53,6 +58,7 @@ export type AttributesSpec = {
     canShow?: (arg: IDragItem | LGraphNode) => boolean,
     serialize?: (arg: any) => string,
     deserialize?: (arg: string) => any,
+    refreshPanelOnChange?: boolean
 }
 
 export type AttributesCategorySpec = {
@@ -62,6 +68,13 @@ export type AttributesCategorySpec = {
 
 export type AttributesSpecList = AttributesCategorySpec[]
 
+const serializeStringArray = (arg: string[]) => arg.join(",")
+const deserializeStringArray = (arg: string) => {
+    if (arg === "")
+        return []
+    return arg.split(",").map(s => s.trim())
+}
+
 const ALL_ATTRIBUTES: AttributesSpecList = [
     {
         categoryName: "appearance",
@@ -70,18 +83,21 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 name: "title",
                 type: "string",
                 location: "widget",
+                defaultValue: "",
                 editable: true,
             },
             {
                 name: "hidden",
                 type: "boolean",
                 location: "widget",
+                defaultValue: false,
                 editable: true
             },
             {
                 name: "disabled",
                 type: "boolean",
                 location: "widget",
+                defaultValue: false,
                 editable: true
             },
             {
@@ -107,15 +123,6 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 defaultValue: "",
                 editable: true,
             },
-            {
-                name: "blockVariant",
-                type: "enum",
-                location: "widget",
-                editable: true,
-                values: ["block", "hidden"],
-                defaultValue: "block",
-                canShow: (di: IDragItem) => di.type === "container"
-            },
 
             // Container variants
             {
@@ -125,6 +132,28 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 editable: true,
                 values: ["block", "accordion", "tabs"],
                 defaultValue: "block",
+                canShow: (di: IDragItem) => di.type === "container",
+                refreshPanelOnChange: true
+            },
+
+            {
+                name: "tabNames",
+                type: "string",
+                location: "widget",
+                editable: true,
+                defaultValue: ["Tab 1", "Tab 2", "Tab 3"],
+                canShow: (di: IDragItem) => di.type === "container" && di.attrs.variant === "tabs",
+                serialize: serializeStringArray,
+                deserialize: deserializeStringArray
+            },
+
+            {
+                name: "blockVariant",
+                type: "enum",
+                location: "widget",
+                editable: true,
+                values: ["block", "hidden"],
+                defaultValue: "block",
                 canShow: (di: IDragItem) => di.type === "container"
             },
         ]
@@ -138,12 +167,9 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 type: "string",
                 location: "nodeVars",
                 editable: true,
-                serialize: (arg: string[]) => arg.join(","),
-                deserialize: (arg: string) => {
-                    if (arg === "")
-                        return []
-                    return arg.split(",").map(s => s.trim())
-                }
+                defaultValue: [],
+                serialize: serializeStringArray,
+                deserialize: deserializeStringArray
             },
 
             // Range
@@ -152,6 +178,7 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 type: "number",
                 location: "nodeProps",
                 editable: true,
+                defaultValue: 0,
                 validNodeTypes: ["ui/slider"],
             },
             {
@@ -159,6 +186,7 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 type: "number",
                 location: "nodeProps",
                 editable: true,
+                defaultValue: 10,
                 validNodeTypes: ["ui/slider"],
             },
             {
@@ -166,6 +194,7 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 type: "number",
                 location: "nodeProps",
                 editable: true,
+                defaultValue: 1,
                 validNodeTypes: ["ui/slider"],
             },
 
@@ -221,8 +250,8 @@ export interface WidgetLayout extends IDragItem {
 type DragItemID = string;
 
 type LayoutStateOps = {
-    addContainer: (parent: ContainerLayout | null, attrs: Partial<Attributes>, index: number) => ContainerLayout,
-    addWidget: (parent: ContainerLayout, node: ComfyWidgetNode, attrs: Partial<Attributes>, index: number) => WidgetLayout,
+    addContainer: (parent: ContainerLayout | null, attrs: Partial<Attributes>, index?: number) => ContainerLayout,
+    addWidget: (parent: ContainerLayout, node: ComfyWidgetNode, attrs: Partial<Attributes>, index?: number) => WidgetLayout,
     findDefaultContainerForInsertion: () => ContainerLayout | null,
     updateChildren: (parent: IDragItem, children: IDragItem[]) => IDragItem[],
     nodeAdded: (node: LGraphNode) => void,
@@ -272,7 +301,7 @@ function findDefaultContainerForInsertion(): ContainerLayout | null {
     return null
 }
 
-function addContainer(parent: ContainerLayout | null, attrs: Partial<Attributes> = {}, index: number = -1): ContainerLayout {
+function addContainer(parent: ContainerLayout | null, attrs: Partial<Attributes> = {}, index?: number): ContainerLayout {
     const state = get(store);
     const dragItem: ContainerLayout = {
         type: "container",
@@ -291,14 +320,14 @@ function addContainer(parent: ContainerLayout | null, attrs: Partial<Attributes>
     const entry: DragItemEntry = { dragItem, children: [], parent: null };
     state.allItems[dragItem.id] = entry;
     if (parent) {
-        moveItem(dragItem, parent)
+        moveItem(dragItem, parent, index)
     }
     console.debug("[layoutState] addContainer", state)
     store.set(state)
     return dragItem;
 }
 
-function addWidget(parent: ContainerLayout, node: ComfyWidgetNode, attrs: Partial<Attributes> = {}, index: number = -1): WidgetLayout {
+function addWidget(parent: ContainerLayout, node: ComfyWidgetNode, attrs: Partial<Attributes> = {}, index?: number): WidgetLayout {
     const state = get(store);
     const widgetName = "Widget"
     const dragItem: WidgetLayout = {
@@ -320,7 +349,7 @@ function addWidget(parent: ContainerLayout, node: ComfyWidgetNode, attrs: Partia
     state.allItems[dragItem.id] = entry;
     state.allItemsByNode[node.id] = entry;
     console.debug("[layoutState] addWidget", state)
-    moveItem(dragItem, parent)
+    moveItem(dragItem, parent, index)
     return dragItem;
 }
 
@@ -398,7 +427,7 @@ function nodeRemoved(node: LGraphNode) {
     store.set(state)
 }
 
-function moveItem(target: IDragItem, to: ContainerLayout, index: number = -1) {
+function moveItem(target: IDragItem, to: ContainerLayout, index?: number) {
     const state = get(store)
     const entry = state.allItems[target.id]
     if (entry.parent && entry.parent.id === to.id)
@@ -406,9 +435,9 @@ function moveItem(target: IDragItem, to: ContainerLayout, index: number = -1) {
 
     if (entry.parent) {
         const parentEntry = state.allItems[entry.parent.id];
-        const index = parentEntry.children.findIndex(c => c.id === target.id)
-        if (index !== -1) {
-            parentEntry.children.splice(index, 1)
+        const parentIndex = parentEntry.children.findIndex(c => c.id === target.id)
+        if (parentIndex !== -1) {
+            parentEntry.children.splice(parentIndex, 1)
         }
         else {
             console.error(parentEntry)
@@ -418,7 +447,7 @@ function moveItem(target: IDragItem, to: ContainerLayout, index: number = -1) {
     }
 
     const toEntry = state.allItems[to.id];
-    if (index !== -1)
+    if (index != null && index >= 0)
         toEntry.children.splice(index, 0, target)
     else
         toEntry.children.push(target)
diff --git a/src/lib/stores/uiState.ts b/src/lib/stores/uiState.ts
index a7c3cc6..76b15fa 100644
--- a/src/lib/stores/uiState.ts
+++ b/src/lib/stores/uiState.ts
@@ -20,7 +20,7 @@ const store: WritableUIStateStore = writable(
         graphLocked: false,
         nodesLocked: false,
         autoAddUI: true,
-        uiUnlocked: false,
+        uiUnlocked: true,
         uiEditMode: "widgets"
     })
 
diff --git a/vite.config.ts b/vite.config.ts
index c640040..4ed4baf 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,7 +8,11 @@ import { viteStaticCopy } from 'vite-plugin-static-copy'
 export default defineConfig({
     clearScreen: false,
     plugins: [
-        FullReload(["src/**/*.{js,ts,scss,svelte}"]),
+        FullReload([
+            // "src/**/*.{js,ts,scss,svelte}"
+            "src/**/*.{scss}",
+            "src/**/ComfyApp.{ts,svelte}"
+        ]),
         svelte(), ,
         viteStaticCopy({
             targets: [

From 9e35b32e992345925c01cdac662fe742a9d4933b Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 6 May 2023 13:17:08 -0500
Subject: [PATCH 04/19] Accordion container

---
 package.json                                 |   1 +
 pnpm-lock.yaml                               |   3 +
 src/lib/components/AccordionContainer.svelte | 192 +++++++++++++++++++
 src/lib/components/Container.svelte          |   3 +
 src/lib/components/TabsContainer.svelte      |  13 +-
 src/lib/stores/layoutState.ts                |  24 ++-
 vite.config.ts                               |   3 +-
 7 files changed, 218 insertions(+), 21 deletions(-)
 create mode 100644 src/lib/components/AccordionContainer.svelte

diff --git a/package.json b/package.json
index a6e5b0d..f17a7d0 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
   },
   "type": "module",
   "dependencies": {
+    "@gradio/accordion": "workspace:*",
     "@gradio/atoms": "workspace:*",
     "@gradio/button": "workspace:*",
     "@gradio/client": "workspace:*",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2edccfd..294447b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,6 +4,9 @@ importers:
 
   .:
     dependencies:
+      '@gradio/accordion':
+        specifier: workspace:*
+        version: link:gradio/js/accordion
       '@gradio/atoms':
         specifier: workspace:*
         version: link:gradio/js/atoms
diff --git a/src/lib/components/AccordionContainer.svelte b/src/lib/components/AccordionContainer.svelte
new file mode 100644
index 0000000..62b9926
--- /dev/null
+++ b/src/lib/components/AccordionContainer.svelte
@@ -0,0 +1,192 @@
+<script lang="ts">
+ import { Block, BlockTitle } from "@gradio/atoms";
+ import { Accordion } from "@gradio/accordion";
+ import uiState from "$lib/stores/uiState";
+ import WidgetContainer from "./WidgetContainer.svelte"
+
+ import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME, SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';
+
+ import {fade} from 'svelte/transition';
+ // notice - fade in works fine but don't add svelte's fade-out (known issue)
+ import {cubicIn} from 'svelte/easing';
+ import { flip } from 'svelte/animate';
+ import layoutState, { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutState";
+ import { startDrag, stopDrag } from "$lib/utils"
+ import type { Writable } from "svelte/store";
+
+ export let container: ContainerLayout | null = null;
+ export let zIndex: number = 0;
+ export let classes: string[] = [];
+ export let showHandles: boolean = false;
+ export let edit: boolean = false;
+ export let dragDisabled: boolean = false;
+
+ let attrsChanged: Writable<boolean> | null = null;
+ let children: IDragItem[] | null = null;
+ const flipDurationMs = 100;
+
+ let selectedIndex: number = 0;
+
+ $: if (container) {
+     children = $layoutState.allItems[container.id].children;
+     attrsChanged = container.attrsChanged
+ }
+ else {
+     children = null;
+     attrsChanged = null
+ }
+
+ function handleConsider(evt: any) {
+     children = layoutState.updateChildren(container, evt.detail.items)
+     // console.log(dragItems);
+ };
+
+ function handleFinalize(evt: any) {
+     children = layoutState.updateChildren(container, evt.detail.items)
+     // Ensure dragging is stopped on drag finish
+ };
+</script>
+
+{#if container && children}
+    <div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')} z-index{zIndex}"
+         class:hide-block={container.attrs.blockVariant === "hidden"}
+         class:selected={$uiState.uiUnlocked && $layoutState.currentSelection.includes(container.id)}
+         class:root-container={zIndex === 0}
+         class:is-executing={container.isNodeExecuting}
+         class:edit={edit}>
+        {#if edit}
+            <Block>
+                <Accordion label={container.attrs.title} open={true}>
+                    <div class="v-pane"
+                         class:empty={children.length === 0}
+                         class:edit={edit}
+                         use:dndzone="{{
+                             items: children,
+                             flipDurationMs,
+                             centreDraggedOnCursor: true,
+                             morphDisabled: true,
+                             dropFromOthersDisabled: zIndex === 0,
+                             dragDisabled
+                                      }}"
+                         on:consider="{handleConsider}"
+                         on:finalize="{handleFinalize}"
+                    >
+                        {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
+                            {@const hidden = item?.attrs?.hidden}
+                            <div class="animation-wrapper"
+                                 class:hidden={hidden}
+                                 animate:flip={{duration:flipDurationMs}}
+                                 style={item?.attrs?.flexGrow ? `flex-grow: ${item.attrs.flexGrow}` : ""}
+                            >
+                                <WidgetContainer dragItem={item} zIndex={zIndex+1} />
+                                {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
+                                    <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                                {/if}
+                            </div>
+                        {/each}
+                    </div>
+                    {#if container.attrs.hidden && edit}
+                        <div class="handle handle-hidden" class:hidden={!edit} style="z-index: {zIndex+100}"/>
+                    {/if}
+                    {#if showHandles}
+                        <div class="handle handle-container" style="z-index: {zIndex+100}" data-drag-item-id={container.id} on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
+                    {/if}
+                </Accordion>
+            </Block>
+        {:else}
+            <Block>
+                <Accordion label={container.attrs.title} open={container.attrs.openOnStartup}>
+                    {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
+                        <WidgetContainer dragItem={item} zIndex={zIndex+1} />
+                    {/each}
+                </Accordion>
+            </Block>
+        {/if}
+    </div>
+{/if}
+
+<style lang="scss">
+ .container {
+     > :global(*) {
+         border-radius: 0;
+     }
+
+     :global(.v-pane > .block) {
+         height: fit-content;
+     }
+
+     .edit > :global(.v-pane > .block) {
+         border-color: var(--color-pink-500);
+         border-width: 2px;
+         border-style: dashed !important;
+         margin: 0.2em;
+         padding: 1.4em;
+     }
+
+     /* :global(.hide-block > .v-pane > .block) {
+        padding: 0.5em 0.25em;
+        box-shadow: unset;
+        border-width: 0;
+        border-color: unset;
+        border-radius: unset;
+        background: var(--block-background-fill);
+        width: 100%;
+        line-height: var(--line-sm);
+        } */
+
+     &.horizontal {
+         flex-wrap: wrap;
+         gap: var(--layout-gap);
+         width: var(--size-full);
+
+         > :global(.block > .v-pane) {
+             flex-direction: row;
+         }
+
+         > :global(*), > :global(.form > *) {
+             flex: 1 1 0%;
+             flex-wrap: wrap;
+             min-width: min(160px, 100%);
+         }
+     }
+
+     &.vertical {
+         position: relative;
+
+         > :global(.block > .v-pane) {
+             flex-direction: column;
+         }
+
+         > :global(*), > :global(.form > *), .v-pane {
+             width: var(--size-full);
+         }
+     }
+ }
+
+ .handle {
+     cursor: grab;
+     z-index: 99999;
+     position: absolute;
+     right: 0;
+     top: 0;
+     width: 100%;
+     height: 100%;
+ }
+
+ .animation-wrapper {
+     position: relative;
+     flex-grow: 100;
+ }
+
+ .handle-widget:hover {
+     background-color: #add8e680;
+ }
+
+ .handle-container:hover {
+     background-color: #d8ade680;
+ }
+
+ .container.selected > :global(.block) {
+     background: var(--color-yellow-300);
+ }
+</style>
diff --git a/src/lib/components/Container.svelte b/src/lib/components/Container.svelte
index bb756af..22d82d2 100644
--- a/src/lib/components/Container.svelte
+++ b/src/lib/components/Container.svelte
@@ -3,6 +3,7 @@
  import uiState from "$lib/stores/uiState";
  import WidgetContainer from "./WidgetContainer.svelte"
  import BlockContainer from "./BlockContainer.svelte"
+ import AccordionContainer from "./AccordionContainer.svelte"
  import TabsContainer from "./TabsContainer.svelte"
 
  import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME, SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';
@@ -34,6 +35,8 @@
     {#key $attrsChanged}
         {#if container.attrs.variant === "tabs"}
             <TabsContainer {container} {zIndex} {classes} {showHandles} {edit} {dragDisabled} />
+        {:else if container.attrs.variant === "accordion"}
+            <AccordionContainer {container} {zIndex} {classes} {showHandles} {edit} {dragDisabled} />
         {:else}
             <BlockContainer {container} {zIndex} {classes} {showHandles} {edit} {dragDisabled} />
         {/if}
diff --git a/src/lib/components/TabsContainer.svelte b/src/lib/components/TabsContainer.svelte
index b8344c5..108bb35 100644
--- a/src/lib/components/TabsContainer.svelte
+++ b/src/lib/components/TabsContainer.svelte
@@ -47,13 +47,15 @@
  };
 
  function getTabName(container: ContainerLayout, i: number): string {
-     const tabNames = container.attrs.tabNames
-     if (!tabNames)
-         return `Tab ${i}`
+     const title = container.attrs.title
+     if (!title)
+         return `Tab ${i+1}`
+
+     const tabNames = title.split(",").map(s => s.trim());
 
      const tabName = tabNames[i]
      if (tabName == null || tabName === "")
-         return `Tab ${i}`
+         return `Tab ${i+1}`
 
      return tabName
  }
@@ -68,9 +70,6 @@
          class:edit={edit}>
         {#if edit}
             <Block>
-                {#if container.attrs.title && container.attrs.title !== ""}
-                    <BlockTitle show_label={true}>{container.attrs.title}</BlockTitle>
-                {/if}
                 <div class="v-pane"
                      class:empty={children.length === 0}
                      class:edit={edit}
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
index d987715..723c419 100644
--- a/src/lib/stores/layoutState.ts
+++ b/src/lib/stores/layoutState.ts
@@ -40,7 +40,7 @@ export type Attributes = {
     /** Display variant for widgets/containers (e.g. number widget can act as slider/knob/dial) */
     variant?: string,
 
-    tabNames?: string[]
+    openOnStartup?: boolean
 }
 
 export type AttributesSpec = {
@@ -135,18 +135,6 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 canShow: (di: IDragItem) => di.type === "container",
                 refreshPanelOnChange: true
             },
-
-            {
-                name: "tabNames",
-                type: "string",
-                location: "widget",
-                editable: true,
-                defaultValue: ["Tab 1", "Tab 2", "Tab 3"],
-                canShow: (di: IDragItem) => di.type === "container" && di.attrs.variant === "tabs",
-                serialize: serializeStringArray,
-                deserialize: deserializeStringArray
-            },
-
             {
                 name: "blockVariant",
                 type: "enum",
@@ -156,6 +144,16 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 defaultValue: "block",
                 canShow: (di: IDragItem) => di.type === "container"
             },
+
+            // Accordion
+            {
+                name: "openOnStartup",
+                type: "boolean",
+                location: "widget",
+                editable: true,
+                defaultValue: false,
+                canShow: (di: IDragItem) => di.type === "container" && di.attrs.variant === "accordion"
+            },
         ]
     },
     {
diff --git a/vite.config.ts b/vite.config.ts
index 4ed4baf..ac36164 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -11,9 +11,10 @@ export default defineConfig({
         FullReload([
             // "src/**/*.{js,ts,scss,svelte}"
             "src/**/*.{scss}",
+            "src/lib/stores/*.*",
             "src/**/ComfyApp.{ts,svelte}"
         ]),
-        svelte(), ,
+        svelte(),
         viteStaticCopy({
             targets: [
                 {

From fd0dde1b0861d5fa403a90697999693be10eb445 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 6 May 2023 13:28:06 -0500
Subject: [PATCH 05/19] Accordion styles

---
 src/lib/components/AccordionContainer.svelte | 10 ++-
 src/scss/ux.scss                             | 64 +++++++++++++-------
 2 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/src/lib/components/AccordionContainer.svelte b/src/lib/components/AccordionContainer.svelte
index 62b9926..8a0027c 100644
--- a/src/lib/components/AccordionContainer.svelte
+++ b/src/lib/components/AccordionContainer.svelte
@@ -55,7 +55,7 @@
          class:is-executing={container.isNodeExecuting}
          class:edit={edit}>
         {#if edit}
-            <Block>
+            <Block elem_classes={["gradio-accordion"]}>
                 <Accordion label={container.attrs.title} open={true}>
                     <div class="v-pane"
                          class:empty={children.length === 0}
@@ -94,7 +94,7 @@
                 </Accordion>
             </Block>
         {:else}
-            <Block>
+            <Block elem_classes={["gradio-accordion"]}>
                 <Accordion label={container.attrs.title} open={container.attrs.openOnStartup}>
                     {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
                         <WidgetContainer dragItem={item} zIndex={zIndex+1} />
@@ -189,4 +189,10 @@
  .container.selected > :global(.block) {
      background: var(--color-yellow-300);
  }
+
+ .gradio-accordion {
+     .widget, .container {
+         padding: 5px;
+     }
+ }
 </style>
diff --git a/src/scss/ux.scss b/src/scss/ux.scss
index 2d3afc3..b5943b4 100644
--- a/src/scss/ux.scss
+++ b/src/scss/ux.scss
@@ -265,36 +265,58 @@ div.float {
     }
 }
 
- .category-name {
+.category-name {
     background: var(--ae-panel-bg-color) !important;
     border-color: var(--ae-panel-border-color) !important;
 
     .title, .type {
         color: var(--ae-label-color)
     }
- }
+}
 
- .props-entry {
-     border-width: 1px;
-     border-left: 1px var(--ae-panel-border-color) !important;
-     border-right: 1px var(--ae-panel-border-color) !important;
- }
+.props-entry {
+    border-width: 1px;
+    border-left: 1px var(--ae-panel-border-color) !important;
+    border-right: 1px var(--ae-panel-border-color) !important;
+}
 
-// .container > .block {
-//     box-shadow: none !important;
-//     border-color: var(--ae-panel-border-color) !important;
-//     border-radius: 0 !important;
-//     background: var(--ae-input-bg-color) !important;
+/**************/
+/* Accordions */
+/**************/
 
-//     > .v-pane {
-//         box-shadow: none !important;
-//         border-color: var(--ae-panel-border-color) !important;
-//         border-radius: 0 !important;
-//         background: var(--ae-input-bg-color) !important;
-//     }
-// }
+.block.gradio-accordion {
+	background-color: var(--ae-main-bg-color) !important;
+	/*padding-bottom: 0 !important;*/
+}
 
-.block.gradio-accordion:hover .label-wrap {
+.block.gradio-accordion:has(.label-wrap:hover) {
+	border-color: var(--ae-primary-color) !important;
+}
+
+.block.gradio-accordion .label-wrap {
+	margin: calc(-1px + var(--ae-inside-padding-size) * -1);
+    width: auto;
+	padding: var(--ae-accordion-vertical-padding) var(--ae-accordion-horizontal-padding);
+	border-radius: var(--ae-panel-border-radius);
+	line-height: var(--ae-accordion-line-height);
+	color: var(--ae-label-color);
+	/*pointer-events: none !important;*/
+}
+.block.gradio-accordion .hide + .open.label-wrap {
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+}
+.block.gradio-accordion .label-wrap.open {
+	margin-bottom: calc(var(--ae-inside-padding-size) / 2);
+}
+.edit > .block.gradio-accordion .label-wrap.open {
+	margin-bottom: var(--ae-inside-padding-size);
+}
+.block.gradio-accordion > .gap.svelte-vt1mxs > div:first-child {
+	margin-top: calc(var(--ae-inside-padding-size) * 2) !important;
+}
+
+.block.gradio-accordion .label-wrap:hover {
 	color: var(--ae-main-bg-color) !important;
 	background-color: var(--ae-primary-color) !important;
 }
@@ -308,9 +330,9 @@ div.float {
 	left: 0 !important;
     top: 0 !important;
     opacity: 0 !important;
-
 }
 
+
 .form>.gradio-row>.form{
 	border:0 !important;
 }

From daff339035653a67aa7de67f63fd4059c8d7445e Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 6 May 2023 14:15:46 -0500
Subject: [PATCH 06/19] Refactoring drag items

---
 src/lib/components/AccordionContainer.svelte |   2 +-
 src/lib/components/BlockContainer.svelte     |   2 +-
 src/lib/components/TabsContainer.svelte      |   2 +-
 src/lib/components/WidgetContainer.svelte    |   8 +-
 src/lib/defaultGraph.ts                      |  36 +--
 src/lib/nodes/ComfyWidgetNodes.ts            |   3 +-
 src/lib/stores/layoutState.ts                | 242 +++++++++++++++++--
 src/lib/widgets/ButtonWidget.svelte          |   5 +
 src/lib/widgets/TextWidget.svelte            |   6 +-
 vite.config.ts                               |  12 +-
 10 files changed, 265 insertions(+), 53 deletions(-)

diff --git a/src/lib/components/AccordionContainer.svelte b/src/lib/components/AccordionContainer.svelte
index 8a0027c..e57dd08 100644
--- a/src/lib/components/AccordionContainer.svelte
+++ b/src/lib/components/AccordionContainer.svelte
@@ -49,7 +49,7 @@
 
 {#if container && children}
     <div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')} z-index{zIndex}"
-         class:hide-block={container.attrs.blockVariant === "hidden"}
+         class:hide-block={container.attrs.containerVariant === "hidden"}
          class:selected={$uiState.uiUnlocked && $layoutState.currentSelection.includes(container.id)}
          class:root-container={zIndex === 0}
          class:is-executing={container.isNodeExecuting}
diff --git a/src/lib/components/BlockContainer.svelte b/src/lib/components/BlockContainer.svelte
index f3c0a6d..a593c94 100644
--- a/src/lib/components/BlockContainer.svelte
+++ b/src/lib/components/BlockContainer.svelte
@@ -46,7 +46,7 @@
 
 {#if container && children}
     <div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')} z-index{zIndex}"
-         class:hide-block={container.attrs.blockVariant === "hidden"}
+         class:hide-block={container.attrs.containerVariant === "hidden"}
          class:selected={$uiState.uiUnlocked && $layoutState.currentSelection.includes(container.id)}
          class:root-container={zIndex === 0}
          class:is-executing={container.isNodeExecuting}
diff --git a/src/lib/components/TabsContainer.svelte b/src/lib/components/TabsContainer.svelte
index 108bb35..067fa7b 100644
--- a/src/lib/components/TabsContainer.svelte
+++ b/src/lib/components/TabsContainer.svelte
@@ -63,7 +63,7 @@
 
 {#if container && children}
     <div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')} z-index{zIndex}"
-         class:hide-block={container.attrs.blockVariant === "hidden"}
+         class:hide-block={container.attrs.containerVariant === "hidden"}
          class:selected={$uiState.uiUnlocked && $layoutState.currentSelection.includes(container.id)}
          class:root-container={zIndex === 0}
          class:is-executing={container.isNodeExecuting}
diff --git a/src/lib/components/WidgetContainer.svelte b/src/lib/components/WidgetContainer.svelte
index f0e2e34..d358f8d 100644
--- a/src/lib/components/WidgetContainer.svelte
+++ b/src/lib/components/WidgetContainer.svelte
@@ -84,8 +84,12 @@
 {/if}
 
 <style lang="scss">
- .widget.selected {
-     background: var(--color-yellow-200);
+ .widget {
+     height: 100%;
+
+     &.selected {
+         background: var(--color-yellow-200);
+     }
  }
  .container.selected {
      background: var(--color-yellow-400);
diff --git a/src/lib/defaultGraph.ts b/src/lib/defaultGraph.ts
index 50aa856..c17c3f6 100644
--- a/src/lib/defaultGraph.ts
+++ b/src/lib/defaultGraph.ts
@@ -4560,7 +4560,7 @@ const defaultGraph: SerializedAppState = {
             showTitle: false,
             direction: "horizontal",
             classes: "",
-            blockVariant: "block",
+            containerVariant: "block",
             hidden: false,
             flexGrow: 100,
             disabled: false
@@ -4580,7 +4580,7 @@ const defaultGraph: SerializedAppState = {
             showTitle: false,
             direction: "vertical",
             classes: "",
-            blockVariant: "block",
+            containerVariant: "block",
             hidden: false,
             flexGrow: 100,
             disabled: false
@@ -4605,7 +4605,7 @@ const defaultGraph: SerializedAppState = {
             showTitle: false,
             direction: "vertical",
             classes: "",
-            blockVariant: "block",
+            containerVariant: "block",
             hidden: false,
             flexGrow: 100,
             disabled: false
@@ -4736,7 +4736,7 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "vertical",
             classes: "",
-            blockVariant: "block",
+            containerVariant: "block",
             hidden: false,
             flexGrow: 100,
             disabled: false
@@ -4776,7 +4776,7 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "horizontal",
             classes: "",
-            blockVariant: "hidden",
+            containerVariant: "hidden",
             hidden: false,
             flexGrow: 100,
             disabled: false
@@ -4869,7 +4869,7 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "vertical",
             classes: "",
-            blockVariant: "block",
+            containerVariant: "block",
             hidden: false,
             flexGrow: 100,
             disabled: false
@@ -4908,7 +4908,7 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "horizontal",
             classes: "",
-            blockVariant: "block",
+            containerVariant: "block",
             hidden: true,
             flexGrow: 100,
             disabled: false
@@ -4962,7 +4962,7 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "horizontal",
             classes: "",
-            blockVariant: "hidden",
+            containerVariant: "hidden",
             hidden: false,
             flexGrow: 100,
             disabled: false
@@ -4984,7 +4984,7 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "horizontal",
             classes: "",
-            blockVariant: "hidden",
+            containerVariant: "hidden",
             hidden: false,
             flexGrow: 100,
             disabled: false
@@ -5023,7 +5023,7 @@ const defaultGraph: SerializedAppState = {
             showTitle: false,
             direction: "horizontal",
             classes: "",
-            blockVariant: "hidden",
+            containerVariant: "hidden",
             hidden: false,
             flexGrow: 100,
             disabled: false
@@ -5044,7 +5044,7 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "horizontal",
             classes: "",
-            blockVariant: "hidden",
+            containerVariant: "hidden",
             hidden: false,
             flexGrow: 100,
             disabled: false
@@ -5116,7 +5116,7 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "vertical",
             classes: "",
-            blockVariant: "block",
+            containerVariant: "block",
             flexGrow: 100,
             disabled: false
           }
@@ -5136,7 +5136,7 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "horizontal",
             classes: "",
-            blockVariant: "block",
+            containerVariant: "block",
             flexGrow: 100,
             disabled: false
           }
@@ -5241,7 +5241,7 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "horizontal",
             classes: "",
-            blockVariant: "hidden",
+            containerVariant: "hidden",
             flexGrow: 100,
             disabled: false
           }
@@ -5261,7 +5261,7 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "horizontal",
             classes: "",
-            blockVariant: "hidden",
+            containerVariant: "hidden",
             flexGrow: 100,
             disabled: false
           }
@@ -5331,7 +5331,7 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "vertical",
             classes: "",
-            blockVariant: "block",
+            containerVariant: "block",
             flexGrow: 100
           }
         },
@@ -5353,7 +5353,7 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "horizontal",
             classes: "",
-            blockVariant: "hidden",
+            containerVariant: "hidden",
             flexGrow: 100
           }
         },
@@ -5372,7 +5372,7 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "horizontal",
             classes: "",
-            blockVariant: "hidden",
+            containerVariant: "hidden",
             flexGrow: 100
           }
         },
diff --git a/src/lib/nodes/ComfyWidgetNodes.ts b/src/lib/nodes/ComfyWidgetNodes.ts
index eee5593..782efd7 100644
--- a/src/lib/nodes/ComfyWidgetNodes.ts
+++ b/src/lib/nodes/ComfyWidgetNodes.ts
@@ -489,7 +489,8 @@ LiteGraph.registerNodeType({
 })
 
 export interface ComfyButtonProperties extends ComfyWidgetProperties {
-    message: string
+    message: string,
+    variant: string
 }
 
 export class ComfyButtonNode extends ComfyWidgetNode<boolean> {
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
index 723c419..c0f09b8 100644
--- a/src/lib/stores/layoutState.ts
+++ b/src/lib/stores/layoutState.ts
@@ -6,61 +6,233 @@ import { dndzone, SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';
 import type { ComfyWidgetNode } from '$lib/nodes';
 
 type DragItemEntry = {
+    /*
+     * Drag item.
+     */
     dragItem: IDragItem,
+
+    /*
+     * Children of this drag item.
+     * Only applies if the drag item's type is "container"
+     */
     children: IDragItem[] | null,
+
+    /*
+     * Parent of this drag item.
+     */
     parent: IDragItem | null
 }
 
+/*
+ * Global workflow attributes
+ */
 export type LayoutAttributes = {
+    /*
+     * Default subgraph to run when the "Queue Prompt" button in the bottom bar
+     * is pressed.
+     *
+     * If it's an empty string, all backend nodes will be included in the prompt
+     * instead.
+     */
     defaultSubgraph: string
 }
 
+/*
+ * Keeps track of the tree of UI components - widgets and the containers that
+ * group them together.
+ */
 export type LayoutState = {
+    /*
+     * Root of the UI tree
+     */
     root: IDragItem | null,
+
+    /*
+     * All items indexed by their own ID
+     */
     allItems: Record<DragItemID, DragItemEntry>,
+
+    /*
+     * Items indexed by the litegraph node they're bound to
+     * Only contains drag items of type "widget"
+     */
     allItemsByNode: Record<number, DragItemEntry>,
+
+    /*
+     * Next ID to use for instantiating a new drag item
+     */
     currentId: number,
+
+    /*
+     * Selected drag items.
+     */
     currentSelection: DragItemID[],
+
+    /*
+     * Selected LGraphNodes inside the litegraph canvas.
+     */
     currentSelectionNodes: LGraphNode[],
+
+    /*
+     * If true, a saved workflow is being deserialized, so ignore any
+     * nodeAdded/nodeRemoved events.
+     *
+     * TODO: instead use LGraphAddNodeOptions.addedByDeserialize
+     */
     isConfiguring: boolean,
+
+    /*
+     * If true, the right-click context menu is open
+     */
     isMenuOpen: boolean,
+
+    /*
+     * Global workflow attributes
+     */
     attrs: LayoutAttributes
 }
 
+/**
+ * Attributes for both containers and nodes, or containers only.
+ * If the attribute can be applicable to both, then it should go here.
+ * If it only applies to a container it should go here too.
+ * If it only applies to a node it should be placed in its LGraphNode.properties (nodeProps) instead.
+ **/
 export type Attributes = {
+    /*
+     * Flex direction for containers.
+     */
     direction: "horizontal" | "vertical",
+
+    /*
+     * Display name of this item.
+     */
     title: string,
+
+    /*
+     * If false, hide the title.
+     */
     showTitle: boolean,
+
+    /*
+     * List of classes to apply to the component.
+     */
     classes: string,
-    blockVariant?: "block" | "hidden",
+
+    /*
+     * Variant for containers. "hidden" hides margin/borders.
+     */
+    containerVariant?: "block" | "hidden",
+
+    /*
+     * If true, don't show this component in the UI
+     */
     hidden?: boolean,
+
+    /*
+     * If true, grey out this component in the UI
+     */
     disabled?: boolean,
+
+    /*
+     * CSS Flex grow
+     */
     flexGrow?: number,
 
-    /** Display variant for widgets/containers (e.g. number widget can act as slider/knob/dial) */
+    /**
+     * Display variant for widgets/containers (e.g. number widget can act as slider/knob/dial)
+     * Valid values depend on the widget in question.
+     */
     variant?: string,
 
+    /*************************************/
+    /* Special attributes for containers */
+    /*************************************/
+
+    // Accordion
     openOnStartup?: boolean
 }
 
 export type AttributesSpec = {
-    id?: number, // for svelte keyed each
+    /*
+     * ID necessary for svelte's keyed each, autoset at the top level in this source file.
+     */
+    id?: number,
+
+    /*
+     * Attribute name. Corresponds to the name of the instance variable in the
+     * hashmap/class instance, which depends on `location`.
+     */
     name: string,
-    type: string,
+
+    /*
+     * Type of this attribute.
+     * If you want to support a custom type, use "string" combined with
+     * `serialize` and `deserialize`.
+     */
+    type: "string" | "enum" | "number" | "boolean",
+
+    /*
+     * Location of this attribute.
+     * - "widget":    inside IDragNode.attrs
+     * - "nodeProps": inside LGraphNode.properties
+     * - "nodeVars":  an instance variable directly on an LGraphNode
+     * - "workflow":  inside $layoutState.attrs
+     */
     location: "widget" | "nodeProps" | "nodeVars" | "workflow"
+
+    /*
+     * Can this attribute be edited in the properties pane.
+     */
     editable: boolean,
+
+    /*
+     * Default value to supply to this attribute if it is null when the properties pane is opened.
+     * NOTE: This means that any attribute can't have a default null value!
+     */
     defaultValue: any,
 
+    /*
+     * If `type` is "enum", the valid values for the combo widget.
+     */
     values?: string[],
-    hidden?: boolean,
+
+    /*
+     * Valid `LGraphNode.type`s this property applies to if it's located in a node.
+     * These are like "ui/button", "ui/slider".
+     */
     validNodeTypes?: string[],
 
+    /*
+     * Callback: if false, don't show the property in the pane.
+     * Useful if you need to show the property based on another property.
+     * Example: If the IDragItem is a container (not a widget), show its flex `direction`.
+     */
     canShow?: (arg: IDragItem | LGraphNode) => boolean,
+
+    /*
+     * If the type of this spec is "string", but the underlying type is something else,
+     * convert the value to a string here so it can be edited in the textbox.
+     */
     serialize?: (arg: any) => string,
+
+    /*
+     * If the type of this spec is "string", but the underlying type is something else,
+     * convert the textbox value into the underlying value.
+     */
     deserialize?: (arg: string) => any,
+
+    /*
+     * If true, when this property is changed the properties pane will be rebuilt.
+     * This should be used if there's a canShow dependent on this property so
+     * the pane can be updated with the new list of valid properties.
+     */
     refreshPanelOnChange?: boolean
 }
 
+/*
+ * A list of `AttributesSpec`s grouped under a category.
+ */
 export type AttributesCategorySpec = {
     categoryName: string,
     specs: AttributesSpec[]
@@ -75,6 +247,10 @@ const deserializeStringArray = (arg: string) => {
     return arg.split(",").map(s => s.trim())
 }
 
+/*
+ * Attributes that will show up in the properties panel.
+ * Their order in the list is the order they'll appear in the panel.
+ */
 const ALL_ATTRIBUTES: AttributesSpecList = [
     {
         categoryName: "appearance",
@@ -136,7 +312,7 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 refreshPanelOnChange: true
             },
             {
-                name: "blockVariant",
+                name: "containerVariant",
                 type: "enum",
                 location: "widget",
                 editable: true,
@@ -218,6 +394,7 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
     }
 ];
 
+// This is needed so the specs can be iterated with svelte's keyed #each.
 let i = 0;
 for (const cat of Object.values(ALL_ATTRIBUTES)) {
     for (const val of Object.values(cat.specs)) {
@@ -228,20 +405,54 @@ for (const cat of Object.values(ALL_ATTRIBUTES)) {
 
 export { ALL_ATTRIBUTES };
 
+/*
+ * Something that can be dragged around in the frontend - a widget or a container.
+ */
 export interface IDragItem {
-    type: string,
+    /*
+     * Type of the item.
+     */
+    type: "container" | "widget",
+
+    /*
+     * Unique ID of the item.
+     */
     id: DragItemID,
+
+    /*
+     * If true, the node associated with this drag item is executing.
+     * Used to show an indicator on the widget/container.
+     */
     isNodeExecuting?: boolean,
+
+    /*
+     * Attributes for this drag item.
+     */
     attrs: Attributes,
+
+    /*
+     * Hackish thing to indicate to Svelte that an attribute changed.
+     * TODO Use Writeable<Attributes> instead!
+     */
     attrsChanged: Writable<boolean>
 }
 
+/*
+ * A container (block, accordion, tabs). Has child drag items.
+ */
 export interface ContainerLayout extends IDragItem {
     type: "container",
 }
 
+/*
+ * A widget (slider, dropdown, textbox...)
+ */
 export interface WidgetLayout extends IDragItem {
     type: "widget",
+
+    /*
+     * litegraph node this widget is bound to.
+     */
     node: ComfyWidgetNode
 }
 
@@ -310,7 +521,7 @@ function addContainer(parent: ContainerLayout | null, attrs: Partial<Attributes>
             showTitle: true,
             direction: "vertical",
             classes: "",
-            blockVariant: "block",
+            containerVariant: "block",
             flexGrow: 100,
             ...attrs
         }
@@ -371,23 +582,10 @@ function nodeAdded(node: LGraphNode) {
 
     const parent = findDefaultContainerForInsertion();
 
-    // Two cases where we want to add nodes:
-    // 1. User adds a new UI node, so we should instantiate its widget in the frontend.
-    // 2. User adds a node with inputs that can be filled by frontend widgets.
-    // Depending on config, this means we should instantiate default UI nodes connected to those inputs.
-
-    console.debug(node)
+    console.debug("[layoutState] nodeAdded", node)
     if ("svelteComponentType" in node) {
         addWidget(parent, node as ComfyWidgetNode);
     }
-
-    // Add default node panel with all widgets autoinstantiated
-    // if (node.widgets && node.widgets.length > 0) {
-    //     const container = addContainer(parent.id, { title: node.title, direction: "vertical", associatedNode: node.id });
-    //     for (const widget of node.widgets) {
-    //         addWidget(container.id, node, widget, { associatedNode: node.id });
-    //     }
-    // }
 }
 
 function removeEntry(state: LayoutState, id: DragItemID) {
diff --git a/src/lib/widgets/ButtonWidget.svelte b/src/lib/widgets/ButtonWidget.svelte
index a0c72ed..d1c6c6d 100644
--- a/src/lib/widgets/ButtonWidget.svelte
+++ b/src/lib/widgets/ButtonWidget.svelte
@@ -44,5 +44,10 @@
  .wrapper {
      padding: 2px;
      width: 100%;
+     height: 100%;
+
+     :global(> button) {
+         height: 100%;
+     }
  }
 </style>
diff --git a/src/lib/widgets/TextWidget.svelte b/src/lib/widgets/TextWidget.svelte
index 61704a4..67d8565 100644
--- a/src/lib/widgets/TextWidget.svelte
+++ b/src/lib/widgets/TextWidget.svelte
@@ -35,7 +35,7 @@
             disabled={widget.attrs.disabled}
             lines={node.properties.multiline ? 5 : 1}
             max_lines={node.properties.multiline ? 5 : 1}
-            show_label={true}
+            show_label={widget.attrs.title !== ""}
             on:change
             on:submit
             on:blur
@@ -49,4 +49,8 @@
      padding: 2px;
      width: 100%;
  }
+
+ :global(span.hide) {
+     display: none;
+ }
 </style>
diff --git a/vite.config.ts b/vite.config.ts
index ac36164..5288058 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,12 +8,12 @@ import { viteStaticCopy } from 'vite-plugin-static-copy'
 export default defineConfig({
     clearScreen: false,
     plugins: [
-        FullReload([
-            // "src/**/*.{js,ts,scss,svelte}"
-            "src/**/*.{scss}",
-            "src/lib/stores/*.*",
-            "src/**/ComfyApp.{ts,svelte}"
-        ]),
+        // FullReload([
+        //     // "src/**/*.{js,ts,scss,svelte}"
+        //     "src/**/*.{scss}",
+        //     "src/lib/stores/*.*",
+        //     "src/**/ComfyApp.{ts,svelte}"
+        // ]),
         svelte(),
         viteStaticCopy({
             targets: [

From e76204936ba7abacfe986c7214f15c9ddc5e80e6 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 6 May 2023 14:15:57 -0500
Subject: [PATCH 07/19] Tab styles

---
 src/lib/components/TabsContainer.svelte |  2 +-
 src/scss/ux.scss                        | 21 +++++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/TabsContainer.svelte b/src/lib/components/TabsContainer.svelte
index 067fa7b..8a17bcd 100644
--- a/src/lib/components/TabsContainer.svelte
+++ b/src/lib/components/TabsContainer.svelte
@@ -111,7 +111,7 @@
                 {/if}
             </Block>
         {:else}
-            <Tabs>
+            <Tabs elem_classes={["gradio-tabs"]}>
                 {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item, i(item.id)}
                     {@const tabName = getTabName(container, i)}
                     <TabItem name={tabName} on:select={() => console.log("tab " + i)}>
diff --git a/src/scss/ux.scss b/src/scss/ux.scss
index b5943b4..d460f50 100644
--- a/src/scss/ux.scss
+++ b/src/scss/ux.scss
@@ -332,6 +332,27 @@ div.float {
     opacity: 0 !important;
 }
 
+.gradio-tabs.tabs {
+    > .tab-nav {
+        border-bottom: 1px solid var(--ae-subpanel-border-color);
+        > button {
+            border-radius: 0;
+            border-width: var(--ae-border-width);
+            color: var(--ae-text-color);
+
+            &.selected {
+                border-color: var(--ae-subpanel-border-color);
+                background: var(--ae-subpanel-bg-color);
+                color: var(--ae-primary-color);
+            }
+        }
+    }
+    > .tabitem {
+        border: 1px solid var(--ae-subpanel-border-color);
+        border-top: none;
+        border-radius: 0px !important;
+    }
+}
 
 .form>.gradio-row>.form{
 	border:0 !important;

From 81618da30340fe416a4161178fdbc3a9b3cc0f7f Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 6 May 2023 15:10:37 -0500
Subject: [PATCH 08/19] Graph component

---
 src/lib/components/ComfyApp.svelte            | 45 ++++-------
 src/lib/components/ComfyApp.ts                |  2 +
 src/lib/components/ComfyGraphView.svelte      | 76 +++++++++++++++++++
 src/lib/components/ComfyProperties.svelte     | 32 ++++++--
 src/lib/components/ComfyUnlockUIButton.svelte |  4 +-
 src/scss/ux.scss                              | 20 +++++
 6 files changed, 141 insertions(+), 38 deletions(-)
 create mode 100644 src/lib/components/ComfyGraphView.svelte

diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte
index ac2f83c..e9b3c88 100644
--- a/src/lib/components/ComfyApp.svelte
+++ b/src/lib/components/ComfyApp.svelte
@@ -20,6 +20,7 @@
  import ComfyProperties from "./ComfyProperties.svelte";
  import queueState from "$lib/stores/queueState";
  import ComfyUnlockUIButton from "./ComfyUnlockUIButton.svelte";
+	import ComfyGraphView from "./ComfyGraphView.svelte";
 
  export let app: ComfyApp = undefined;
  let imageViewer: ImageViewer;
@@ -59,6 +60,7 @@
      $layoutState.currentSelection = []
 
  let graphSize = 0;
+ let graphTransitioning = false;
 
  function toggleGraph() {
      if (graphSize == 0) {
@@ -121,10 +123,6 @@
      }
  }
 
- function doRecenter(): void {
-     app.lCanvas.recenter();
- }
-
  $: if ($uiState.uiUnlocked && !hasShownUIHelpToast) {
      hasShownUIHelpToast = true;
      toast.push("Right-click to open context menu.")
@@ -145,11 +143,18 @@
  }
 
  $: if (containerElem) {
-     let wrappers = containerElem.querySelectorAll<HTMLDivElement>(".pane-wrapper")
-     for (const wrapper of wrappers) {
-         const paneNode = wrapper.parentNode as HTMLElement; // get the node inside the <Pane/>
-         paneNode.ontransitionend = () => {
-             app.resizeCanvas()
+     const canvas = containerElem.querySelector<HTMLDivElement>("#graph-canvas")
+     if (canvas) {
+         console.warn("reg!");
+         const paneNode = canvas.closest(".splitpanes__pane")
+         if (paneNode) {
+             (paneNode as HTMLElement).ontransitionstart = () => {
+                 graphTransitioning = true
+             }
+             (paneNode as HTMLElement).ontransitionend = () => {
+                 graphTransitioning = false
+                 app.resizeCanvas()
+             }
          }
      }
  }
@@ -190,9 +195,7 @@
                         <ComfyUIPane bind:this={uiPane} {app} />
                     </Pane>
                     <Pane bind:size={graphSize}>
-                        <div class="canvas-wrapper pane-wrapper">
-                            <canvas id="graph-canvas" />
-                        </div>
+                        <ComfyGraphView {app} transitioning={graphTransitioning} />
                     </Pane>
                 </Splitpanes>
             </Pane>
@@ -226,9 +229,6 @@
             <Button variant="secondary" on:click={doLoadDefault}>
                 Load Default
             </Button>
-            <Button variant="secondary" on:click={doRecenter}>
-                Recenter
-            </Button>
             <Button variant="secondary" on:click={doRefreshCombos}>
                 🔄
             </Button>
@@ -273,15 +273,6 @@
      height: 100vh;
  }
 
- #comfy-ui {
- }
-
- #comfy-graph {
- }
-
- #graph-canvas {
- }
-
  #bottombar {
      padding-top: 0.5em;
      display: flex;
@@ -302,12 +293,6 @@
      }
  }
 
- .canvas-wrapper {
-     width: 100%;
-     height: 100%;
-     background-color: #333;
- }
-
  .sidebar-wrapper {
      width: 100%;
      height: 100%;
diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts
index 794064f..2070e00 100644
--- a/src/lib/components/ComfyApp.ts
+++ b/src/lib/components/ComfyApp.ts
@@ -106,6 +106,8 @@ export default class ComfyApp {
         LiteGraph.release_link_on_empty_shows_menu = true;
         LiteGraph.alt_drag_do_clone_nodes = true;
 
+        (window as any).LiteGraph = LiteGraph;
+
         // await this.#invokeExtensionsAsync("init");
         await this.registerNodes();
 
diff --git a/src/lib/components/ComfyGraphView.svelte b/src/lib/components/ComfyGraphView.svelte
new file mode 100644
index 0000000..f272fcc
--- /dev/null
+++ b/src/lib/components/ComfyGraphView.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+ import { Button } from "@gradio/button";
+ import type ComfyApp from "./ComfyApp";
+
+ export let app: ComfyApp;
+ export let transitioning: boolean = false;
+
+ function doRecenter(): void {
+     app?.lCanvas?.recenter();
+ }
+</script>
+
+<div class="wrapper">
+    <div class="canvas-wrapper pane-wrapper">
+        <canvas id="graph-canvas" />
+    </div>
+    <div class="bar">
+        {#if !transitioning}
+            <span class="left">
+                <button on:click={doRecenter}>Recenter</button>
+            </span>
+        {/if}
+    </div>
+</div>
+
+<style lang="scss">
+ $bar-height: 3em;
+
+ .wrapper {
+     width: 100%;
+     height: 100%;
+ }
+
+ .canvas-wrapper {
+     width: 100%;
+     height: calc(100% - $bar-height);
+     background-color: #333;
+ }
+
+ .bar {
+     padding: 0.2em 0.5em;
+     display: flex;
+     align-items: center;
+     width: 100%;
+     height: $bar-height;
+     background-color: #3A3A3A;
+     border: 2px solid #2A2A2A;
+     gap: var(--layout-gap);
+     margin-top: auto;
+     overflow-x: auto;
+
+     > .left {
+         flex-shrink: 0;
+     }
+
+     > .right {
+         margin-left: auto
+     }
+
+     button {
+         color: #EEE;
+         border: 1px solid #888;
+         padding: 2px 5px;
+         background-color: #666;
+
+         &:hover {
+             background-color: #999;
+             border-color: #AAA;
+         }
+         &:active {
+             background-color: #555;
+             border-color: #777;
+         }
+     }
+ }
+</style>
diff --git a/src/lib/components/ComfyProperties.svelte b/src/lib/components/ComfyProperties.svelte
index 5e9e871..b4fe006 100644
--- a/src/lib/components/ComfyProperties.svelte
+++ b/src/lib/components/ComfyProperties.svelte
@@ -65,7 +65,7 @@
  }
 
  function validNodeProperty(spec: AttributesSpec, node: LGraphNode | null): boolean {
-     if (node == null)
+     if (node == null || spec.location !== "nodeProps")
          return false;
 
      if (spec.canShow && !spec.canShow(node))
@@ -77,8 +77,21 @@
      return spec.name in node.properties
  }
 
+ function validNodeVar(spec: AttributesSpec, node: LGraphNode | null): boolean {
+     if (node == null || spec.location !== "nodeVars")
+         return false;
+
+     if (spec.canShow && !spec.canShow(node))
+         return false;
+
+     if (spec.validNodeTypes) {
+         return spec.validNodeTypes.indexOf(node.type) !== -1;
+     }
+     return spec.name in node
+ }
+
  function validWidgetAttribute(spec: AttributesSpec, widget: IDragItem | null): boolean {
-     if (widget == null)
+     if (widget == null || spec.location !== "widget")
          return false;
      if (spec.canShow)
          return spec.canShow(widget);
@@ -86,6 +99,13 @@
      return spec.name in widget.attrs
  }
 
+ function validWorkflowAttribute(spec: AttributesSpec): boolean {
+     if (spec.location !== "workflow")
+         return false;
+
+     return spec.name in $layoutState.attrs
+ }
+
  function getAttribute(target: IDragItem, spec: AttributesSpec): any {
      let value = target.attrs[spec.name]
      if (value == null)
@@ -200,7 +220,7 @@
                     </span>
                 </div>
                 {#each category.specs as spec(spec.id)}
-                    {#if spec.location === "widget" && validWidgetAttribute(spec, target)}
+                    {#if validWidgetAttribute(spec, target)}
                         <div class="props-entry">
                             {#if spec.type === "string"}
                                 <TextBox
@@ -237,7 +257,7 @@
                             {/if}
                         </div>
                     {:else if node}
-                        {#if spec.location === "nodeProps" && validNodeProperty(spec, node)}
+                        {#if validNodeProperty(spec, node)}
                             <div class="props-entry">
                                 {#if spec.type === "string"}
                                     <TextBox
@@ -273,7 +293,7 @@
                                                     />
                                 {/if}
                             </div>
-                        {:else if spec.location === "nodeVars" && spec.name in node}
+                        {:else if validNodeVar(spec, node)}
                             <div class="props-entry">
                                 {#if spec.type === "string"}
                                     <TextBox
@@ -310,7 +330,7 @@
                                 {/if}
                             </div>
                         {/if}
-                    {:else if spec.location === "workflow" && spec.name in $layoutState.attrs}
+                    {:else if !node && !target && validWorkflowAttribute(spec)}
                         <div class="props-entry">
                             {#if spec.type === "string"}
                                 <TextBox
diff --git a/src/lib/components/ComfyUnlockUIButton.svelte b/src/lib/components/ComfyUnlockUIButton.svelte
index b1a1f83..1358d7c 100644
--- a/src/lib/components/ComfyUnlockUIButton.svelte
+++ b/src/lib/components/ComfyUnlockUIButton.svelte
@@ -9,7 +9,7 @@
  }
 </script>
 
-<div class="wrapper button lg" class:toggled>
+<div class="unlock-button" class:toggled>
     <Button on:click={toggle} variant={toggled ? "primary" : "secondary"}>
         {#if toggled}
             <LockOpen2 />
@@ -20,7 +20,7 @@
 </div>
 
 <style lang="scss">
- .wrapper {
+ .unlock-button {
      display: inline-flex;
      width: var(--size-12);
      height: var(--size-12);
diff --git a/src/scss/ux.scss b/src/scss/ux.scss
index d460f50..443ac6a 100644
--- a/src/scss/ux.scss
+++ b/src/scss/ux.scss
@@ -856,3 +856,23 @@ input[type=range]::-ms-fill-upper {
         color: var(--ae-input-color) !important;
     }
 }
+
+.unlock-button {
+    > .lg {
+        border-color: var(--ae-subpanel-border-color) !important;
+    }
+    &:hover svg {
+        color: var(--ae-main-bg-color) !important;
+    }
+    svg {
+        color: var(--ae-input-color) !important;
+    }
+    &.toggled {
+        svg {
+            color: var(--ae-icon-color) !important;
+        }
+        &:hover svg {
+            color: var(--ae-main-bg-color) !important;
+        }
+    }
+}

From faf22fccf479c899e62cb01a5445b8a0cb3fa0e1 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 6 May 2023 15:25:57 -0500
Subject: [PATCH 09/19] Fix

---
 src/lib/components/ComfyApp.ts                | 20 +++++++++---------
 src/lib/components/ComfyProperties.svelte     | 21 ++++++++++++++-----
 src/lib/components/ComfyUnlockUIButton.svelte |  6 +++++-
 src/lib/stores/uiState.ts                     |  2 +-
 4 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts
index 2070e00..080ec96 100644
--- a/src/lib/components/ComfyApp.ts
+++ b/src/lib/components/ComfyApp.ts
@@ -232,17 +232,17 @@ export default class ComfyApp {
     }
 
     private addDropHandler() {
-        this.dropZone = document.getElementById("dropzone");
+        // this.dropZone = document.getElementById("dropzone");
 
-        if (this.dropZone) {
-            window.addEventListener('dragenter', this.allowDrag.bind(this));
-            this.dropZone.addEventListener('dragover', this.allowDrag.bind(this));
-            this.dropZone.addEventListener('dragleave', this.hideDropZone.bind(this));
-            this.dropZone.addEventListener('drop', this.handleDrop.bind(this));
-        }
-        else {
-            console.warn("No dropzone detected (probably on mobile).")
-        }
+        // if (this.dropZone) {
+        //     window.addEventListener('dragenter', this.allowDrag.bind(this));
+        //     this.dropZone.addEventListener('dragover', this.allowDrag.bind(this));
+        //     this.dropZone.addEventListener('dragleave', this.hideDropZone.bind(this));
+        //     this.dropZone.addEventListener('drop', this.handleDrop.bind(this));
+        // }
+        // else {
+        //     console.warn("No dropzone detected (probably on mobile).")
+        // }
     }
 
     /**
diff --git a/src/lib/components/ComfyProperties.svelte b/src/lib/components/ComfyProperties.svelte
index b4fe006..9956714 100644
--- a/src/lib/components/ComfyProperties.svelte
+++ b/src/lib/components/ComfyProperties.svelte
@@ -40,6 +40,9 @@
      for (const cat of Object.values(ALL_ATTRIBUTES)) {
          for (const spec of Object.values(cat.specs)) {
              if (spec.location === "widget" && target.attrs[spec.name] == null) {
+                 if (!spec.editable)
+                     continue;
+
                  if (spec.canShow && !spec.canShow(target))
                      continue;
 
@@ -117,7 +120,7 @@
  }
 
  function updateAttribute(spec: AttributesSpec, target: IDragItem | null, value: any) {
-     if (target == null)
+     if (target == null || !spec.editable)
          return;
 
      const name = spec.name
@@ -142,7 +145,7 @@
  }
 
  function updateProperty(spec: AttributesSpec, value: any) {
-     if (node == null)
+     if (node == null || !spec.editable)
          return
 
      const name = spec.name
@@ -170,7 +173,7 @@
  }
 
  function updateVar(spec: AttributesSpec, value: any) {
-     if (node == null)
+     if (node == null || !spec.editable)
          return;
 
      const name = spec.name
@@ -190,8 +193,11 @@
          $refreshPanel += 1;
  }
 
- function updateWorkflowAttribute(entry: AttributesSpec, value: any) {
-     const name = entry.name
+ function updateWorkflowAttribute(spec: AttributesSpec, value: any) {
+     if (!spec.editable)
+         return;
+
+     const name = spec.name
      console.warn("updateWorkflowAttribute", name, value)
 
      $layoutState.attrs[name] = value
@@ -389,6 +395,11 @@
 
      .title {
          font-weight: bold;
+
+         .type {
+             padding-left: 0.25rem;
+             font-weight: normal;
+         }
      }
  }
 
diff --git a/src/lib/components/ComfyUnlockUIButton.svelte b/src/lib/components/ComfyUnlockUIButton.svelte
index 1358d7c..5b952c1 100644
--- a/src/lib/components/ComfyUnlockUIButton.svelte
+++ b/src/lib/components/ComfyUnlockUIButton.svelte
@@ -25,10 +25,14 @@
      width: var(--size-12);
      height: var(--size-12);
 
-     > :global(.lg) {
+     > :global(.secondary.lg) {
          border: var(--button-border-width) solid var(--neutral-400);
      }
 
+     > :global(.primary.lg) {
+         border: var(--button-border-width) solid var(--primary-400);
+     }
+
      &.toggled {
          :global(svg) {
              color: var(--button-primary-text-color);
diff --git a/src/lib/stores/uiState.ts b/src/lib/stores/uiState.ts
index 76b15fa..a7c3cc6 100644
--- a/src/lib/stores/uiState.ts
+++ b/src/lib/stores/uiState.ts
@@ -20,7 +20,7 @@ const store: WritableUIStateStore = writable(
         graphLocked: false,
         nodesLocked: false,
         autoAddUI: true,
-        uiUnlocked: true,
+        uiUnlocked: false,
         uiEditMode: "widgets"
     })
 

From 3b170ec19ed8d3bb9eb69676c3f3d135258d8dfe Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 6 May 2023 15:57:35 -0500
Subject: [PATCH 10/19] Button options

---
 src/lib/components/BlockContainer.svelte |  2 ++
 src/lib/stores/layoutState.ts            | 40 +++++++++++++++++++-----
 src/lib/widgets/ButtonWidget.svelte      | 29 +++++++++--------
 3 files changed, 51 insertions(+), 20 deletions(-)

diff --git a/src/lib/components/BlockContainer.svelte b/src/lib/components/BlockContainer.svelte
index a593c94..bdfd08f 100644
--- a/src/lib/components/BlockContainer.svelte
+++ b/src/lib/components/BlockContainer.svelte
@@ -42,6 +42,8 @@
      children = layoutState.updateChildren(container, evt.detail.items)
      // Ensure dragging is stopped on drag finish
  };
+
+ const tt = "asd\nasdlkj"
 </script>
 
 {#if container && children}
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
index c0f09b8..4e6a204 100644
--- a/src/lib/stores/layoutState.ts
+++ b/src/lib/stores/layoutState.ts
@@ -93,10 +93,7 @@ export type LayoutState = {
 }
 
 /**
- * Attributes for both containers and nodes, or containers only.
- * If the attribute can be applicable to both, then it should go here.
- * If it only applies to a container it should go here too.
- * If it only applies to a node it should be placed in its LGraphNode.properties (nodeProps) instead.
+ * Attributes for both containers and nodes.
  **/
 export type Attributes = {
     /*
@@ -134,6 +131,11 @@ export type Attributes = {
      */
     disabled?: boolean,
 
+    /*
+     * CSS height
+     */
+    height?: string,
+
     /*
      * CSS Flex grow
      */
@@ -145,12 +147,16 @@ export type Attributes = {
      */
     variant?: string,
 
-    /*************************************/
-    /* Special attributes for containers */
-    /*************************************/
+    /*********************************************/
+    /* Special attributes for widgets/containers */
+    /*********************************************/
 
     // Accordion
     openOnStartup?: boolean
+
+    // Button
+    buttonVariant?: "primary" | "secondary",
+    buttonSize?: "large" | "small"
 }
 
 export type AttributesSpec = {
@@ -330,6 +336,26 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 defaultValue: false,
                 canShow: (di: IDragItem) => di.type === "container" && di.attrs.variant === "accordion"
             },
+
+            // Button
+            {
+                name: "buttonVariant",
+                type: "enum",
+                location: "widget",
+                editable: true,
+                validNodeTypes: ["ui/button"],
+                values: ["primary", "secondary"],
+                defaultValue: "primary"
+            },
+            {
+                name: "buttonSize",
+                type: "enum",
+                location: "widget",
+                editable: true,
+                validNodeTypes: ["ui/button"],
+                values: ["large", "small"],
+                defaultValue: "large"
+            },
         ]
     },
     {
diff --git a/src/lib/widgets/ButtonWidget.svelte b/src/lib/widgets/ButtonWidget.svelte
index d1c6c6d..d912e8d 100644
--- a/src/lib/widgets/ButtonWidget.svelte
+++ b/src/lib/widgets/ButtonWidget.svelte
@@ -3,11 +3,11 @@
  import type { ComfySliderNode } from "$lib/nodes/index";
  import { type WidgetLayout } from "$lib/stores/layoutState";
  import { Button } from "@gradio/button";
- import { get, type Writable } from "svelte/store";
+ import { get, type Writable, writable } from "svelte/store";
  export let widget: WidgetLayout | null = null;
  let node: ComfyButtonNode | null = null;
  let nodeValue: Writable<boolean> | null = null;
- let propsChanged: Writable<number> | null = null;
+ let attrsChanged: Writable<boolean> | null = null;
 
  $: widget && setNodeValue(widget);
 
@@ -15,7 +15,7 @@
      if (widget) {
          node = widget.node as ComfyButtonNode
          nodeValue = node.value;
-         propsChanged = node.propsChanged;
+         attrsChanged = widget.attrsChanged;
      }
  };
 
@@ -24,20 +24,23 @@
  }
 
  const style = {
-     full_width: "100%"
+     full_width: "100%",
  }
 </script>
 
 <div class="wrapper gradio-button">
-    {#if node !== null}
-        <Button
-            disabled={widget.attrs.disabled}
-            on:click={onClick}
-            variant="primary"
-            {style}>
-            {widget.attrs.title}
-        </Button>
-    {/if}
+    {#key $attrsChanged}
+        {#if node !== null}
+            <Button
+                disabled={widget.attrs.disabled}
+                on:click={onClick}
+                variant={widget.attrs.buttonVariant || "primary"}
+                size={widget.attrs.buttonSize === "small" ? "sm" : "lg"}
+                {style}>
+                {widget.attrs.title}
+            </Button>
+        {/if}
+    {/key}
 </div>
 
 <style lang="scss">

From 1053318fe95d34414fa8d047808d87ed974b5f3f Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 6 May 2023 17:42:12 -0500
Subject: [PATCH 11/19] Update mode for gallery, ranges for properties

---
 litegraph                                     |  2 +-
 src/lib/ImageViewer.ts                        |  1 +
 src/lib/components/AccordionContainer.svelte  |  4 ++
 src/lib/components/ComfyApp.ts                |  4 +-
 src/lib/components/ComfyNumberProperty.svelte |  4 +-
 src/lib/components/ComfyProperties.svelte     | 28 ++++++++-----
 src/lib/nodes/ComfyActionNodes.ts             | 25 +++++++++---
 src/lib/nodes/ComfyGraphNode.ts               |  4 +-
 src/lib/nodes/ComfyWidgetNodes.ts             | 22 ++++++++---
 src/lib/stores/layoutState.ts                 | 39 +++++++++++++++----
 src/scss/ux.scss                              | 19 ++++++---
 11 files changed, 112 insertions(+), 40 deletions(-)

diff --git a/litegraph b/litegraph
index 6cbae97..cd24bc7 160000
--- a/litegraph
+++ b/litegraph
@@ -1 +1 @@
-Subproject commit 6cbae97b3c385dba16b9100352428af4d6219dae
+Subproject commit cd24bc7356572250a5b3ec2320da1b8a73ddf2cc
diff --git a/src/lib/ImageViewer.ts b/src/lib/ImageViewer.ts
index 0965f7e..66a7467 100644
--- a/src/lib/ImageViewer.ts
+++ b/src/lib/ImageViewer.ts
@@ -50,6 +50,7 @@ export class ImageViewer {
     showModal(event: Event) {
         const source = (event.target || event.srcElement) as HTMLImageElement;
         const galleryElem = source.closest<HTMLDivElement>("div.block")
+        console.debug("[ImageViewer] showModal", event, source, galleryElem);
         if (!galleryElem || ImageViewer.all_gallery_buttons(galleryElem).length === 0) {
             console.error("No buttons found on gallery element!", galleryElem)
             return;
diff --git a/src/lib/components/AccordionContainer.svelte b/src/lib/components/AccordionContainer.svelte
index e57dd08..60f1c9b 100644
--- a/src/lib/components/AccordionContainer.svelte
+++ b/src/lib/components/AccordionContainer.svelte
@@ -163,6 +163,10 @@
      }
  }
 
+ :global(.label-wrap > span:not(.icon)) {
+     color: var(--block-title-text-color);
+ }
+
  .handle {
      cursor: grab;
      z-index: 99999;
diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts
index 080ec96..1808b6f 100644
--- a/src/lib/components/ComfyApp.ts
+++ b/src/lib/components/ComfyApp.ts
@@ -590,7 +590,7 @@ export default class ComfyApp {
                 for (let i = 0; i < batchCount; i++) {
                     for (const node of this.lGraph._nodes_in_order) {
                         if ("beforeQueued" in node) {
-                            (node as ComfyGraphNode).beforeQueued();
+                            (node as ComfyGraphNode).beforeQueued(tag);
                         }
                     }
 
@@ -613,7 +613,7 @@ export default class ComfyApp {
                     for (const n of p.workflow.nodes) {
                         const node = this.lGraph.getNodeById(n.id);
                         if ("afterQueued" in node) {
-                            (node as ComfyGraphNode).afterQueued(p);
+                            (node as ComfyGraphNode).afterQueued(p, tag);
                         }
                     }
 
diff --git a/src/lib/components/ComfyNumberProperty.svelte b/src/lib/components/ComfyNumberProperty.svelte
index d4451b5..08be69b 100644
--- a/src/lib/components/ComfyNumberProperty.svelte
+++ b/src/lib/components/ComfyNumberProperty.svelte
@@ -3,6 +3,8 @@
 	import { createEventDispatcher } from "svelte";
 
  export let value: number = 0;
+ export let min: number = -1024
+ export let max: number = 1024
  export let step: number = 1;
  export let name: string = "";
  export let disabled: boolean = false;
@@ -27,7 +29,7 @@
 <label class="number-wrapper">
     <BlockTitle>{name}</BlockTitle>
     <div class="number">
-        <input type="number" bind:value {step} {disabled}>
+        <input type="number" bind:value {min} {max} {step} {disabled}>
     </div>
 </label>
 
diff --git a/src/lib/components/ComfyProperties.svelte b/src/lib/components/ComfyProperties.svelte
index 9956714..ce208ff 100644
--- a/src/lib/components/ComfyProperties.svelte
+++ b/src/lib/components/ComfyProperties.svelte
@@ -245,13 +245,15 @@
                                         label={spec.name}
                                         />
                             {:else if spec.type === "number"}
-                                        <ComfyNumberProperty
-                                            name={spec.name}
-                                            value={getAttribute(target, spec)}
-                                            step={1}
-                                            disabled={!$uiState.uiUnlocked || !spec.editable}
-                                            on:change={(e) => updateAttribute(spec, target, e.detail)}
-                                            />
+                                    <ComfyNumberProperty
+                                        name={spec.name}
+                                        value={getAttribute(target, spec)}
+                                        step={spec.step || 1}
+                                        min={spec.min || -1024}
+                                        max={spec.max || 1024}
+                                        disabled={!$uiState.uiUnlocked || !spec.editable}
+                                        on:change={(e) => updateAttribute(spec, target, e.detail)}
+                                        />
                             {:else if spec.type === "enum"}
                                             <ComfyComboProperty
                                                 name={spec.name}
@@ -285,7 +287,9 @@
                                             <ComfyNumberProperty
                                                 name={spec.name}
                                                 value={node.properties[spec.name] || spec.defaultValue}
-                                                step={1}
+                                                step={spec.step || 1}
+                                                min={spec.min || -1024}
+                                                max={spec.max || 1024}
                                                 disabled={!$uiState.uiUnlocked || !spec.editable}
                                                 on:change={(e) => updateProperty(spec, e.detail)}
                                                 />
@@ -321,7 +325,9 @@
                                             <ComfyNumberProperty
                                                 name={spec.name}
                                                 value={getVar(node, spec)}
-                                                step={1}
+                                                step={spec.step || 1}
+                                                min={spec.min || -1024}
+                                                max={spec.max || 1024}
                                                 disabled={!$uiState.uiUnlocked || !spec.editable}
                                                 on:change={(e) => updateVar(spec, e.detail)}
                                                 />
@@ -358,7 +364,9 @@
                                         <ComfyNumberProperty
                                             name={spec.name}
                                             value={$layoutState.attrs[spec.name] || spec.defaultValue}
-                                            step={1}
+                                            step={spec.step || 1}
+                                            min={spec.min || -1024}
+                                            max={spec.max || 1024}
                                             disabled={!$uiState.uiUnlocked || !spec.editable}
                                             on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
                                             />
diff --git a/src/lib/nodes/ComfyActionNodes.ts b/src/lib/nodes/ComfyActionNodes.ts
index 9ea6770..ad66194 100644
--- a/src/lib/nodes/ComfyActionNodes.ts
+++ b/src/lib/nodes/ComfyActionNodes.ts
@@ -4,6 +4,8 @@ import { Watch } from "@litegraph-ts/nodes-basic";
 import type { SerializedPrompt } from "$lib/components/ComfyApp";
 import { toast } from '@zerodevx/svelte-toast'
 import type { GalleryOutput } from "./ComfyWidgetNodes";
+import { get } from "svelte/store";
+import queueState from "$lib/stores/queueState";
 
 export interface ComfyQueueEventsProperties extends Record<any, any> {
     prompt: SerializedPrompt | null
@@ -32,14 +34,27 @@ export class ComfyQueueEvents extends ComfyGraphNode {
         this.setOutputData(2, this.properties.prompt)
     }
 
-    override beforeQueued() {
-        this.setProperty("value", null)
-        this.triggerSlot(0, "bang")
+    private getActionParams(subgraph: string | null): any {
+        let queue = get(queueState)
+        let remaining = 0;
+
+        if (typeof queue.queueRemaining === "number")
+            remaining = queue.queueRemaining
+
+        return {
+            queueRemaining: remaining,
+            subgraph
+        }
     }
 
-    override afterQueued(p: SerializedPrompt) {
+    override beforeQueued(subgraph: string | null) {
+        this.setProperty("value", null)
+        this.triggerSlot(0, this.getActionParams(subgraph))
+    }
+
+    override afterQueued(p: SerializedPrompt, subgraph: string | null) {
         this.setProperty("value", p)
-        this.triggerSlot(1, "bang")
+        this.triggerSlot(1, this.getActionParams(subgraph))
     }
 
     override onSerialize(o: SerializedLGraphNode) {
diff --git a/src/lib/nodes/ComfyGraphNode.ts b/src/lib/nodes/ComfyGraphNode.ts
index b722013..ba2b3c6 100644
--- a/src/lib/nodes/ComfyGraphNode.ts
+++ b/src/lib/nodes/ComfyGraphNode.ts
@@ -20,8 +20,8 @@ export type DefaultWidgetLayout = {
 export default class ComfyGraphNode extends LGraphNode {
     isBackendNode?: boolean;
 
-    beforeQueued?(): void;
-    afterQueued?(prompt: SerializedPrompt): void;
+    beforeQueued?(subgraph: string | null): void;
+    afterQueued?(prompt: SerializedPrompt, subgraph: string | null): void;
     onExecuted?(output: any): void;
 
     defaultWidgets?: DefaultWidgetLayout
diff --git a/src/lib/nodes/ComfyWidgetNodes.ts b/src/lib/nodes/ComfyWidgetNodes.ts
index 782efd7..518ed99 100644
--- a/src/lib/nodes/ComfyWidgetNodes.ts
+++ b/src/lib/nodes/ComfyWidgetNodes.ts
@@ -1,4 +1,4 @@
-import { LiteGraph, type ContextMenuItem, type LGraphNode, type Vector2, LConnectionKind, LLink, LGraphCanvas, type SlotType, TitleMode, type SlotLayout, LGraph, type INodeInputSlot, type ITextWidget, type INodeOutputSlot, type SerializedLGraphNode, BuiltInSlotType } from "@litegraph-ts/core";
+import { LiteGraph, type ContextMenuItem, type LGraphNode, type Vector2, LConnectionKind, LLink, LGraphCanvas, type SlotType, TitleMode, type SlotLayout, LGraph, type INodeInputSlot, type ITextWidget, type INodeOutputSlot, type SerializedLGraphNode, BuiltInSlotType, type PropertyLayout } from "@litegraph-ts/core";
 import ComfyGraphNode from "./ComfyGraphNode";
 import ComboWidget from "$lib/widgets/ComboWidget.svelte";
 import RangeWidget from "$lib/widgets/RangeWidget.svelte";
@@ -397,13 +397,15 @@ export type GalleryOutputEntry = {
 }
 
 export interface ComfyGalleryProperties extends ComfyWidgetProperties {
-    index: number
+    index: number,
+    updateMode: "replace" | "append"
 }
 
 export class ComfyGalleryNode extends ComfyWidgetNode<GradioFileData[]> {
     override properties: ComfyGalleryProperties = {
         defaultValue: [],
-        index: 0
+        index: 0,
+        updateMode: "replace"
     }
 
     static slotLayout: SlotLayout = {
@@ -417,6 +419,10 @@ export class ComfyGalleryNode extends ComfyWidgetNode<GradioFileData[]> {
         ]
     }
 
+    static propertyLayout: PropertyLayout = [
+        { name: "updateMode", defaultValue: "replace", type: "enum", options: { values: ["replace", "append"] } }
+    ]
+
     override svelteComponentType = GalleryWidget
     override copyFromInputLink = false;
     override outputIndex = null;
@@ -442,9 +448,13 @@ export class ComfyGalleryNode extends ComfyWidgetNode<GradioFileData[]> {
 
                 const galleryItems: GradioFileData[] = this.convertItems(link.data)
 
-                // const currentValue = get(this.value)
-                // this.setValue(currentValue.concat(galleryItems))
-                this.setValue(galleryItems)
+                if (this.properties.updateMode === "append") {
+                    const currentValue = get(this.value)
+                    this.setValue(currentValue.concat(galleryItems))
+                }
+                else {
+                    this.setValue(galleryItems)
+                }
             }
             this.setProperty("index", 0)
         }
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
index 4e6a204..3f059fe 100644
--- a/src/lib/stores/layoutState.ts
+++ b/src/lib/stores/layoutState.ts
@@ -106,11 +106,6 @@ export type Attributes = {
      */
     title: string,
 
-    /*
-     * If false, hide the title.
-     */
-    showTitle: boolean,
-
     /*
      * List of classes to apply to the component.
      */
@@ -203,6 +198,21 @@ export type AttributesSpec = {
      */
     values?: string[],
 
+    /*
+     * If `type` is "number", step for the slider
+     */
+    step?: number,
+
+    /*
+     * If `type` is "number", min for the slider
+     */
+    min?: number,
+
+    /*
+     * If `type` is "number", max for the slider
+     */
+    max?: number,
+
     /*
      * Valid `LGraphNode.type`s this property applies to if it's located in a node.
      * These are like "ui/button", "ui/slider".
@@ -379,6 +389,8 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 location: "nodeProps",
                 editable: true,
                 defaultValue: 0,
+                min: -2 ^ 16,
+                max: 2 ^ 16,
                 validNodeTypes: ["ui/slider"],
             },
             {
@@ -387,6 +399,8 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 location: "nodeProps",
                 editable: true,
                 defaultValue: 10,
+                min: -2 ^ 16,
+                max: 2 ^ 16,
                 validNodeTypes: ["ui/slider"],
             },
             {
@@ -395,6 +409,8 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 location: "nodeProps",
                 editable: true,
                 defaultValue: 1,
+                min: -2 ^ 16,
+                max: 2 ^ 16,
                 validNodeTypes: ["ui/slider"],
             },
 
@@ -408,6 +424,17 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 defaultValue: "bang"
             },
 
+            // gallery
+            {
+                name: "updateMode",
+                type: "enum",
+                location: "nodeProps",
+                editable: true,
+                validNodeTypes: ["ui/gallery"],
+                values: ["replace", "append"],
+                defaultValue: "replace"
+            },
+
             // Workflow
             {
                 name: "defaultSubgraph",
@@ -544,7 +571,6 @@ function addContainer(parent: ContainerLayout | null, attrs: Partial<Attributes>
         attrsChanged: writable(false),
         attrs: {
             title: "Container",
-            showTitle: true,
             direction: "vertical",
             classes: "",
             containerVariant: "block",
@@ -572,7 +598,6 @@ function addWidget(parent: ContainerLayout, node: ComfyWidgetNode, attrs: Partia
         attrsChanged: writable(false),
         attrs: {
             title: widgetName,
-            showTitle: true,
             direction: "horizontal",
             classes: "",
             flexGrow: 100,
diff --git a/src/scss/ux.scss b/src/scss/ux.scss
index 443ac6a..ac94828 100644
--- a/src/scss/ux.scss
+++ b/src/scss/ux.scss
@@ -299,7 +299,10 @@ div.float {
 	padding: var(--ae-accordion-vertical-padding) var(--ae-accordion-horizontal-padding);
 	border-radius: var(--ae-panel-border-radius);
 	line-height: var(--ae-accordion-line-height);
-	color: var(--ae-label-color);
+
+    > span {
+        color: var(--ae-label-color) !important;
+    }
 	/*pointer-events: none !important;*/
 }
 .block.gradio-accordion .hide + .open.label-wrap {
@@ -588,12 +591,16 @@ button.primary {
 	border-radius: var(--ae-panel-border-radius) !important;
     background: var(--ae-input-bg-color) !important;
     color: var(--ae-input-color) !important;
-}
 
-button.secondary:hover,
-button.primary:hover {
-    background: var(--ae-primary-color) !important;
-    color: var(--ae-input-bg-color) !important;
+    &:hover {
+        background: var(--ae-primary-color) !important;
+        color: var(--ae-input-bg-color) !important;
+    }
+
+    &:active {
+        background: var(--ae-input-bg-color) !important;
+        color: var(--ae-input-color) !important;
+    }
 }
 
 /**********************/

From 5de32fa39e4cf9997211b284f5222365bbd249e7 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 6 May 2023 17:45:40 -0500
Subject: [PATCH 12/19] Update defaultGraph

---
 src/lib/defaultGraph.ts | 2805 ++++++++++++++++++++++++++-------------
 1 file changed, 1900 insertions(+), 905 deletions(-)

diff --git a/src/lib/defaultGraph.ts b/src/lib/defaultGraph.ts
index c17c3f6..ae54866 100644
--- a/src/lib/defaultGraph.ts
+++ b/src/lib/defaultGraph.ts
@@ -4,8 +4,8 @@ const defaultGraph: SerializedAppState = {
   createdBy: "ComfyBox",
   version: 1,
   workflow: {
-    last_node_id: 123,
-    last_link_id: 186,
+    last_node_id: 149,
+    last_link_id: 221,
     nodes: [
       {
         id: 33,
@@ -51,9 +51,7 @@ const defaultGraph: SerializedAppState = {
           multiline: true,
           hidden: false
         },
-        widgets_values: [
-          "a fluffy corgi wearing sunglasses"
-        ],
+        widgets_values: [""],
         color: "#223",
         bgColor: "#335",
         comfyValue: "a fluffy corgi wearing sunglasses",
@@ -104,7 +102,7 @@ const defaultGraph: SerializedAppState = {
           hidden: false
         },
         widgets_values: [
-          "worst quality"
+          ""
         ],
         color: "#223",
         bgColor: "#335",
@@ -180,199 +178,11 @@ const defaultGraph: SerializedAppState = {
           hidden: false
         },
         widgets_values: [
-          "4.000"
+          "1.000"
         ],
         color: "#223",
         bgColor: "#335",
-        comfyValue: 4,
-        shownOutputProperties: {
-          min: {
-            type: "number",
-            index: 2
-          },
-          max: {
-            type: "number",
-            index: 3
-          },
-          step: {
-            type: "number",
-            index: 4
-          },
-          precision: {
-            type: "number",
-            index: 5
-          }
-        }
-      },
-      {
-        id: 38,
-        type: "ui/slider",
-        pos: [
-          -347.11307539843733,
-          501.36673939843797
-        ],
-        size: [
-          210,
-          158
-        ],
-        flags: {
-          collapsed: true
-        },
-        order: 51,
-        mode: 0,
-        inputs: [
-          {
-            name: "value",
-            type: "number",
-            link: 91
-          }
-        ],
-        outputs: [
-          {
-            name: "value",
-            type: "number",
-            links: [
-              90,
-              94
-            ],
-            slot_index: 0
-          },
-          {
-            name: "changed",
-            type: -2,
-            links: null,
-            shape: 1
-          },
-          {
-            name: "min",
-            type: "number",
-            links: null
-          },
-          {
-            name: "max",
-            type: "number",
-            links: null
-          },
-          {
-            name: "step",
-            type: "number",
-            links: null
-          },
-          {
-            name: "precision",
-            type: "number",
-            links: null
-          }
-        ],
-        title: "UI.Slider",
-        properties: {
-          defaultValue: 512,
-          min: 64,
-          max: 2048,
-          step: 64,
-          precision: 0,
-          hidden: false
-        },
-        widgets_values: [
-          "768.000"
-        ],
-        color: "#223",
-        bgColor: "#335",
-        comfyValue: 768,
-        shownOutputProperties: {
-          min: {
-            type: "number",
-            index: 2
-          },
-          max: {
-            type: "number",
-            index: 3
-          },
-          step: {
-            type: "number",
-            index: 4
-          },
-          precision: {
-            type: "number",
-            index: 5
-          }
-        }
-      },
-      {
-        id: 37,
-        type: "ui/slider",
-        pos: [
-          -348.11307539843733,
-          478.36673939843814
-        ],
-        size: [
-          210,
-          158
-        ],
-        flags: {
-          collapsed: true
-        },
-        order: 50,
-        mode: 0,
-        inputs: [
-          {
-            name: "value",
-            type: "number",
-            link: 92
-          }
-        ],
-        outputs: [
-          {
-            name: "value",
-            type: "number",
-            links: [
-              89,
-              93
-            ],
-            slot_index: 0
-          },
-          {
-            name: "changed",
-            type: -2,
-            links: null,
-            shape: 1
-          },
-          {
-            name: "min",
-            type: "number",
-            links: null
-          },
-          {
-            name: "max",
-            type: "number",
-            links: null
-          },
-          {
-            name: "step",
-            type: "number",
-            links: null
-          },
-          {
-            name: "precision",
-            type: "number",
-            links: null
-          }
-        ],
-        title: "UI.Slider",
-        properties: {
-          defaultValue: 512,
-          min: 64,
-          max: 2048,
-          step: 64,
-          precision: 0,
-          hidden: false
-        },
-        widgets_values: [
-          "512.000"
-        ],
-        color: "#223",
-        bgColor: "#335",
-        comfyValue: 512,
+        comfyValue: 1,
         shownOutputProperties: {
           min: {
             type: "number",
@@ -432,75 +242,18 @@ const defaultGraph: SerializedAppState = {
         ],
         title: "UI.Combo",
         properties: {
-          defaultValue: "refslaveV2_v2.safetensors",
+          defaultValue: "",
           values: [
-            "refslaveV2_v2.safetensors"
           ],
           hidden: false
         },
         widgets_values: [
-          "refslaveV2_v2.safetensors"
         ],
         color: "#223",
         bgColor: "#335",
-        comfyValue: "refslaveV2_v2.safetensors",
+        comfyValue: "",
         shownOutputProperties: {}
       },
-      {
-        id: 71,
-        type: "actions/swap",
-        pos: [
-          -533.2321880937501,
-          464.976233050781
-        ],
-        size: [
-          140,
-          66
-        ],
-        flags: {
-          collapsed: false
-        },
-        order: 56,
-        mode: 0,
-        inputs: [
-          {
-            name: "A",
-            type: "*",
-            link: 89
-          },
-          {
-            name: "B",
-            type: "*",
-            link: 90
-          },
-          {
-            name: "swap",
-            type: -1,
-            link: 95,
-            shape: 1
-          }
-        ],
-        outputs: [
-          {
-            name: "B",
-            type: "*",
-            links: [
-              91
-            ],
-            slot_index: 0
-          },
-          {
-            name: "A",
-            type: "*",
-            links: [
-              92
-            ],
-            slot_index: 1
-          }
-        ],
-        title: "Comfy.SwapAction",
-        properties: {}
-      },
       {
         id: 80,
         type: "ui/combo",
@@ -542,7 +295,8 @@ const defaultGraph: SerializedAppState = {
         title: "UI.Combo",
         properties: {
           defaultValue: "",
-          values: []
+          values: [
+          ]
         },
         widgets_values: [
           ""
@@ -789,188 +543,6 @@ const defaultGraph: SerializedAppState = {
         comfyValue: "nearest-exact",
         shownOutputProperties: {}
       },
-      {
-        id: 92,
-        type: "ui/slider",
-        pos: [
-          1170.2263769190229,
-          237.64168662061957
-        ],
-        size: [
-          210,
-          158
-        ],
-        flags: {
-          collapsed: true
-        },
-        order: 8,
-        mode: 0,
-        inputs: [
-          {
-            name: "value",
-            type: "number",
-            link: null
-          }
-        ],
-        outputs: [
-          {
-            name: "value",
-            type: "number",
-            links: [
-              127
-            ]
-          },
-          {
-            name: "changed",
-            type: -2,
-            links: null,
-            shape: 1
-          },
-          {
-            name: "min",
-            type: "number",
-            links: null
-          },
-          {
-            name: "max",
-            type: "number",
-            links: null
-          },
-          {
-            name: "step",
-            type: "number",
-            links: null
-          },
-          {
-            name: "precision",
-            type: "number",
-            links: null
-          }
-        ],
-        title: "UI.Slider",
-        properties: {
-          defaultValue: 512,
-          min: 64,
-          max: 8192,
-          step: 8,
-          precision: 0
-        },
-        widgets_values: [
-          "1152.000"
-        ],
-        color: "#223",
-        bgColor: "#335",
-        comfyValue: 1152,
-        shownOutputProperties: {
-          min: {
-            type: "number",
-            index: 2
-          },
-          max: {
-            type: "number",
-            index: 3
-          },
-          step: {
-            type: "number",
-            index: 4
-          },
-          precision: {
-            type: "number",
-            index: 5
-          }
-        }
-      },
-      {
-        id: 93,
-        type: "ui/slider",
-        pos: [
-          1170.2263769190229,
-          257.6416866206199
-        ],
-        size: [
-          210,
-          158
-        ],
-        flags: {
-          collapsed: true
-        },
-        order: 9,
-        mode: 0,
-        inputs: [
-          {
-            name: "value",
-            type: "number",
-            link: null
-          }
-        ],
-        outputs: [
-          {
-            name: "value",
-            type: "number",
-            links: [
-              128
-            ]
-          },
-          {
-            name: "changed",
-            type: -2,
-            links: null,
-            shape: 1
-          },
-          {
-            name: "min",
-            type: "number",
-            links: null
-          },
-          {
-            name: "max",
-            type: "number",
-            links: null
-          },
-          {
-            name: "step",
-            type: "number",
-            links: null
-          },
-          {
-            name: "precision",
-            type: "number",
-            links: null
-          }
-        ],
-        title: "UI.Slider",
-        properties: {
-          defaultValue: 512,
-          min: 64,
-          max: 8192,
-          step: 8,
-          precision: 0
-        },
-        widgets_values: [
-          "1664.000"
-        ],
-        color: "#223",
-        bgColor: "#335",
-        comfyValue: 1664,
-        shownOutputProperties: {
-          min: {
-            type: "number",
-            index: 2
-          },
-          max: {
-            type: "number",
-            index: 3
-          },
-          step: {
-            type: "number",
-            index: 4
-          },
-          precision: {
-            type: "number",
-            index: 5
-          }
-        }
-      },
       {
         id: 94,
         type: "ui/combo",
@@ -985,7 +557,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 10,
+        order: 8,
         mode: 0,
         inputs: [
           {
@@ -1037,7 +609,7 @@ const defaultGraph: SerializedAppState = {
           66
         ],
         flags: {},
-        order: 49,
+        order: 65,
         mode: 0,
         inputs: [
           {
@@ -1112,7 +684,7 @@ const defaultGraph: SerializedAppState = {
           46
         ],
         flags: {},
-        order: 52,
+        order: 68,
         mode: 0,
         inputs: [
           {
@@ -1164,7 +736,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 11,
+        order: 9,
         mode: 0,
         inputs: [],
         outputs: [
@@ -1208,7 +780,7 @@ const defaultGraph: SerializedAppState = {
           206
         ],
         flags: {},
-        order: 47,
+        order: 63,
         mode: 0,
         inputs: [
           {
@@ -1366,7 +938,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 12,
+        order: 10,
         mode: 0,
         inputs: [
           {
@@ -1404,11 +976,11 @@ const defaultGraph: SerializedAppState = {
           hidden: false
         },
         widgets_values: [
-          "simple"
+          "karras"
         ],
         color: "#223",
         bgColor: "#335",
-        comfyValue: "simple",
+        comfyValue: "karras",
         shownOutputProperties: {}
       },
       {
@@ -1425,7 +997,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 13,
+        order: 11,
         mode: 0,
         inputs: [
           {
@@ -1519,7 +1091,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 14,
+        order: 12,
         mode: 0,
         inputs: [
           {
@@ -1567,11 +1139,11 @@ const defaultGraph: SerializedAppState = {
           hidden: false
         },
         widgets_values: [
-          "dpmpp_2m"
+          "euler"
         ],
         color: "#223",
         bgColor: "#335",
-        comfyValue: "dpmpp_2m",
+        comfyValue: "euler",
         shownOutputProperties: {}
       },
       {
@@ -1588,7 +1160,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 15,
+        order: 13,
         mode: 0,
         inputs: [],
         outputs: [
@@ -1621,7 +1193,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 16,
+        order: 14,
         mode: 0,
         inputs: [
           {
@@ -1676,11 +1248,11 @@ const defaultGraph: SerializedAppState = {
           hidden: true
         },
         widgets_values: [
-          "0.590"
+          "0.790"
         ],
         color: "#223",
         bgColor: "#335",
-        comfyValue: 0.59,
+        comfyValue: 0.79,
         shownOutputProperties: {
           min: {
             type: "number",
@@ -1714,7 +1286,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 17,
+        order: 15,
         mode: 0,
         inputs: [
           {
@@ -1768,11 +1340,11 @@ const defaultGraph: SerializedAppState = {
           precision: 0
         },
         widgets_values: [
-          "34.000"
+          "22.000"
         ],
         color: "#223",
         bgColor: "#335",
-        comfyValue: 34,
+        comfyValue: 22,
         shownOutputProperties: {
           min: {
             type: "number",
@@ -1804,7 +1376,7 @@ const defaultGraph: SerializedAppState = {
           46
         ],
         flags: {},
-        order: 33,
+        order: 41,
         mode: 0,
         inputs: [
           {
@@ -1859,7 +1431,7 @@ const defaultGraph: SerializedAppState = {
           46
         ],
         flags: {},
-        order: 34,
+        order: 42,
         mode: 0,
         inputs: [
           {
@@ -1902,89 +1474,6 @@ const defaultGraph: SerializedAppState = {
           "hr"
         ]
       },
-      {
-        id: 100,
-        type: "VAEDecode",
-        pos: [
-          1616.5478569656225,
-          -69.71082847978477
-        ],
-        size: [
-          210,
-          46
-        ],
-        flags: {},
-        order: 35,
-        mode: 0,
-        inputs: [
-          {
-            name: "samples",
-            type: "LATENT",
-            link: 179
-          },
-          {
-            name: "vae",
-            type: "VAE",
-            link: 136
-          }
-        ],
-        outputs: [
-          {
-            name: "IMAGE",
-            type: "IMAGE",
-            links: [
-              156
-            ],
-            slot_index: 0
-          }
-        ],
-        title: "VAEDecode",
-        properties: {},
-        color: "#432",
-        bgColor: "#653",
-        tags: [
-          "hr"
-        ]
-      },
-      {
-        id: 101,
-        type: "PreviewImage",
-        pos: [
-          1631.5478569656225,
-          21.28917152021509
-        ],
-        size: [
-          140,
-          26
-        ],
-        flags: {},
-        order: 36,
-        mode: 0,
-        inputs: [
-          {
-            name: "images",
-            type: "IMAGE",
-            link: 156
-          }
-        ],
-        outputs: [
-          {
-            name: "output",
-            type: "IMAGE",
-            links: [
-              138
-            ],
-            slot_index: 0
-          }
-        ],
-        title: "PreviewImage",
-        properties: {},
-        color: "#432",
-        bgColor: "#653",
-        tags: [
-          "hr"
-        ]
-      },
       {
         id: 103,
         type: "ui/gallery",
@@ -1997,7 +1486,7 @@ const defaultGraph: SerializedAppState = {
           98
         ],
         flags: {},
-        order: 38,
+        order: 45,
         mode: 0,
         inputs: [
           {
@@ -2014,7 +1503,7 @@ const defaultGraph: SerializedAppState = {
           {
             name: "clear",
             type: -1,
-            link: null,
+            link: 218,
             shape: 1
           }
         ],
@@ -2028,10 +1517,11 @@ const defaultGraph: SerializedAppState = {
         title: "UI.Gallery",
         properties: {
           defaultValue: [],
-          index: 0
+          index: 0,
+          updateMode: "append"
         },
         widgets_values: [
-          "Images: 1"
+          "Images: 0"
         ],
         color: "#223",
         bgColor: "#335",
@@ -2050,7 +1540,7 @@ const defaultGraph: SerializedAppState = {
           46
         ],
         flags: {},
-        order: 60,
+        order: 76,
         mode: 0,
         inputs: [
           {
@@ -2094,7 +1584,7 @@ const defaultGraph: SerializedAppState = {
           46
         ],
         flags: {},
-        order: 29,
+        order: 32,
         mode: 0,
         inputs: [
           {
@@ -2127,7 +1617,7 @@ const defaultGraph: SerializedAppState = {
           98
         ],
         flags: {},
-        order: 39,
+        order: 46,
         mode: 0,
         inputs: [
           {
@@ -2144,7 +1634,7 @@ const defaultGraph: SerializedAppState = {
           {
             name: "clear",
             type: -1,
-            link: null,
+            link: 221,
             shape: 1
           }
         ],
@@ -2162,10 +1652,11 @@ const defaultGraph: SerializedAppState = {
         title: "UI.Gallery",
         properties: {
           defaultValue: [],
-          index: 2
+          index: 0,
+          updateMode: "append"
         },
         widgets_values: [
-          "Images: 4"
+          "Images: 5"
         ],
         color: "#223",
         bgColor: "#335",
@@ -2184,13 +1675,13 @@ const defaultGraph: SerializedAppState = {
           46
         ],
         flags: {},
-        order: 37,
+        order: 44,
         mode: 0,
         inputs: [
           {
             name: "images",
             type: "IMAGE",
-            link: 138
+            link: 190
           }
         ],
         outputs: [
@@ -2215,7 +1706,15 @@ const defaultGraph: SerializedAppState = {
         ],
         title: "Comfy.OnExecutedEvent",
         properties: {
-          images: null,
+          images: {
+            images: [
+              {
+                filename: "ComfyUI_01019_.png",
+                subfolder: "",
+                type: "output"
+              }
+            ]
+          },
           filename: null
         }
       },
@@ -2233,7 +1732,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 46,
+        order: 53,
         mode: 0,
         inputs: [
           {
@@ -2269,7 +1768,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 57,
+        order: 73,
         mode: 0,
         inputs: [
           {
@@ -2305,7 +1804,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: false
         },
-        order: 40,
+        order: 47,
         mode: 0,
         inputs: [
           {
@@ -2340,7 +1839,13 @@ const defaultGraph: SerializedAppState = {
         title: "Comfy.OnExecutedEvent",
         properties: {
           images: {
-            images: []
+            images: [
+              {
+                filename: "ComfyUI_01014_.png",
+                subfolder: "",
+                type: "output"
+              }
+            ]
           },
           filename: null
         }
@@ -2359,14 +1864,14 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 44,
+        order: 51,
         mode: 0,
         inputs: [
           {
             name: "value",
             type: 0,
             link: 184,
-            label: "2.000"
+            label: "3.000"
           }
         ],
         outputs: [],
@@ -2387,7 +1892,7 @@ const defaultGraph: SerializedAppState = {
           106
         ],
         flags: {},
-        order: 32,
+        order: 38,
         mode: 0,
         inputs: [
           {
@@ -2484,7 +1989,7 @@ const defaultGraph: SerializedAppState = {
           66
         ],
         flags: {},
-        order: 28,
+        order: 31,
         mode: 0,
         inputs: [
           {
@@ -2493,9 +1998,8 @@ const defaultGraph: SerializedAppState = {
             link: 97,
             config: {
               values: [
-                "refslaveV2_v2.safetensors"
               ],
-              defaultValue: "refslaveV2_v2.safetensors"
+              defaultValue: ""
             },
             widgetNodeType: "ui/combo",
             serialize: true,
@@ -2553,7 +2057,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 55,
+        order: 71,
         mode: 0,
         inputs: [
           {
@@ -2583,7 +2087,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 18,
+        order: 16,
         mode: 0,
         inputs: [
           {
@@ -2642,7 +2146,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 19,
+        order: 17,
         mode: 0,
         inputs: [],
         outputs: [
@@ -2674,7 +2178,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 20,
+        order: 18,
         mode: 0,
         inputs: [],
         outputs: [
@@ -2706,7 +2210,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 21,
+        order: 19,
         mode: 0,
         inputs: [],
         outputs: [
@@ -2724,58 +2228,6 @@ const defaultGraph: SerializedAppState = {
           value: "hr"
         }
       },
-      {
-        id: 45,
-        type: "ui/text",
-        pos: [
-          394.7273286953123,
-          330.62239634765615
-        ],
-        size: [
-          210,
-          78
-        ],
-        flags: {
-          collapsed: true
-        },
-        order: 22,
-        mode: 0,
-        inputs: [
-          {
-            name: "value",
-            type: "string",
-            link: null
-          }
-        ],
-        outputs: [
-          {
-            name: "value",
-            type: "string",
-            links: [
-              113
-            ]
-          },
-          {
-            name: "changed",
-            type: -2,
-            links: null,
-            shape: 1
-          }
-        ],
-        title: "UI.Text",
-        properties: {
-          defaultValue: "ComfyUI",
-          multiline: false,
-          hidden: false
-        },
-        widgets_values: [
-          "ComfyUI"
-        ],
-        color: "#223",
-        bgColor: "#335",
-        comfyValue: "ComfyUI",
-        shownOutputProperties: {}
-      },
       {
         id: 83,
         type: "SaveImage",
@@ -2788,7 +2240,7 @@ const defaultGraph: SerializedAppState = {
           46
         ],
         flags: {},
-        order: 58,
+        order: 74,
         mode: 0,
         inputs: [
           {
@@ -2828,106 +2280,6 @@ const defaultGraph: SerializedAppState = {
           "default"
         ]
       },
-      {
-        id: 90,
-        type: "LatentUpscale",
-        pos: [
-          1300.128032965624,
-          173.51348852021468
-        ],
-        size: [
-          267,
-          106
-        ],
-        flags: {},
-        order: 59,
-        mode: 0,
-        inputs: [
-          {
-            name: "samples",
-            type: "LATENT",
-            link: 134
-          },
-          {
-            name: "upscale_method",
-            type: "string",
-            link: 126,
-            config: {
-              values: [
-                "nearest-exact",
-                "bilinear",
-                "area"
-              ],
-              defaultValue: "nearest-exact"
-            },
-            defaultWidgetNode: null,
-            widgetNodeType: "ui/combo",
-            serialize: true
-          },
-          {
-            name: "width",
-            type: "number",
-            link: 127,
-            config: {
-              min: 64,
-              max: 8192,
-              step: 8,
-              precision: 0,
-              defaultValue: 512
-            },
-            defaultWidgetNode: null,
-            widgetNodeType: "ui/slider",
-            serialize: true
-          },
-          {
-            name: "height",
-            type: "number",
-            link: 128,
-            config: {
-              min: 64,
-              max: 8192,
-              step: 8,
-              precision: 0,
-              defaultValue: 512
-            },
-            defaultWidgetNode: null,
-            widgetNodeType: "ui/slider",
-            serialize: true
-          },
-          {
-            name: "crop",
-            type: "string",
-            link: 129,
-            config: {
-              values: [
-                "disabled",
-                "center"
-              ],
-              defaultValue: "disabled"
-            },
-            defaultWidgetNode: null,
-            widgetNodeType: "ui/combo",
-            serialize: true
-          }
-        ],
-        outputs: [
-          {
-            name: "LATENT",
-            type: "LATENT",
-            links: [
-              170
-            ],
-            slot_index: 0
-          }
-        ],
-        title: "LatentUpscale",
-        properties: {},
-        color: "#432",
-        bgColor: "#653",
-        tags: [
-          "hr"
-        ]
-      },
       {
         id: 119,
         type: "KSampler",
@@ -2940,7 +2292,7 @@ const defaultGraph: SerializedAppState = {
           206
         ],
         flags: {},
-        order: 45,
+        order: 52,
         mode: 0,
         inputs: [
           {
@@ -3100,7 +2452,7 @@ const defaultGraph: SerializedAppState = {
           142
         ],
         flags: {},
-        order: 43,
+        order: 50,
         mode: 0,
         inputs: [
           {
@@ -3149,11 +2501,22 @@ const defaultGraph: SerializedAppState = {
         title: "Comfy.ImageCache",
         properties: {
           images: {
-            images: []
+            images: [
+              {
+                filename: "ComfyUI_01014_.png",
+                subfolder: "",
+                type: "output"
+              }
+            ]
           },
-          index: 2,
-          filenames: {},
-          genNumber: 15
+          index: 0,
+          filenames: {
+            0: {
+              filename: "ComfyUI_01014_.png",
+              status: "cached"
+            }
+          },
+          genNumber: 43
         }
       },
       {
@@ -3170,7 +2533,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 41,
+        order: 48,
         mode: 0,
         inputs: [
           {
@@ -3219,7 +2582,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 23,
+        order: 20,
         mode: 0,
         inputs: [],
         outputs: [
@@ -3252,7 +2615,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 24,
+        order: 21,
         mode: 0,
         inputs: [
           {
@@ -3307,11 +2670,11 @@ const defaultGraph: SerializedAppState = {
           hidden: false
         },
         widgets_values: [
-          "20.000"
+          "27.000"
         ],
         color: "#223",
         bgColor: "#335",
-        comfyValue: 20,
+        comfyValue: 27,
         shownOutputProperties: {
           min: {
             type: "number",
@@ -3343,7 +2706,7 @@ const defaultGraph: SerializedAppState = {
           66
         ],
         flags: {},
-        order: 54,
+        order: 70,
         mode: 0,
         inputs: [
           {
@@ -3379,53 +2742,6 @@ const defaultGraph: SerializedAppState = {
           value: null
         }
       },
-      {
-        id: 62,
-        type: "ui/button",
-        pos: [
-          -643,
-          528
-        ],
-        size: [
-          210,
-          78
-        ],
-        flags: {
-          collapsed: true
-        },
-        order: 25,
-        mode: 0,
-        inputs: [],
-        outputs: [
-          {
-            name: "clicked",
-            type: -2,
-            links: [
-              95
-            ],
-            shape: 1,
-            slot_index: 0
-          },
-          {
-            name: "isClicked",
-            type: "boolean",
-            links: null
-          }
-        ],
-        title: "UI.Button",
-        properties: {
-          defaultValue: false,
-          message: "bang",
-          hidden: false
-        },
-        widgets_values: [
-          "false"
-        ],
-        color: "#223",
-        bgColor: "#335",
-        comfyValue: false,
-        shownOutputProperties: {}
-      },
       {
         id: 107,
         type: "actions/queue_events",
@@ -3440,7 +2756,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 26,
+        order: 22,
         mode: 0,
         inputs: [],
         outputs: [
@@ -3482,7 +2798,7 @@ const defaultGraph: SerializedAppState = {
           126
         ],
         flags: {},
-        order: 53,
+        order: 69,
         mode: 0,
         inputs: [
           {
@@ -3538,7 +2854,7 @@ const defaultGraph: SerializedAppState = {
         ],
         title: "Comfy.ValueControl",
         properties: {
-          value: 133306333103352,
+          value: 768031073308178,
           action: "randomize",
           min: 0,
           max: 18446744073709552000,
@@ -3559,7 +2875,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 48,
+        order: 64,
         mode: 0,
         inputs: [
           {
@@ -3626,11 +2942,11 @@ const defaultGraph: SerializedAppState = {
           hidden: false
         },
         widgets_values: [
-          "133306333103352.000"
+          "768031073308178.000"
         ],
         color: "#223",
         bgColor: "#335",
-        comfyValue: 133306333103352,
+        comfyValue: 768031073308178,
         shownOutputProperties: {
           min: {
             type: "number",
@@ -3664,7 +2980,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 30,
+        order: 33,
         mode: 0,
         inputs: [
           {
@@ -3691,7 +3007,7 @@ const defaultGraph: SerializedAppState = {
         title: "Operation",
         properties: {
           A: 1,
-          B: 4,
+          B: 1,
           OP: "+"
         }
       },
@@ -3709,7 +3025,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 31,
+        order: 34,
         mode: 0,
         inputs: [
           {
@@ -3760,7 +3076,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 27,
+        order: 23,
         mode: 0,
         inputs: [],
         outputs: [
@@ -3790,7 +3106,7 @@ const defaultGraph: SerializedAppState = {
           46
         ],
         flags: {},
-        order: 42,
+        order: 49,
         mode: 0,
         inputs: [
           {
@@ -3799,7 +3115,7 @@ const defaultGraph: SerializedAppState = {
             link: 164,
             config: {
               values: [],
-              defaultValue: ""
+              defaultValue: "ComfyUI_00527_.png"
             },
             defaultWidgetNode: null,
             widgetNodeType: "ui/combo",
@@ -3828,6 +3144,1389 @@ const defaultGraph: SerializedAppState = {
         tags: [
           "hr"
         ]
+      },
+      {
+        id: 45,
+        type: "ui/text",
+        pos: [
+          395,
+          331
+        ],
+        size: [
+          210,
+          78
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 24,
+        mode: 0,
+        inputs: [
+          {
+            name: "value",
+            type: "string",
+            link: null
+          }
+        ],
+        outputs: [
+          {
+            name: "value",
+            type: "string",
+            links: [
+              113,
+              188
+            ],
+            slot_index: 0
+          },
+          {
+            name: "changed",
+            type: -2,
+            links: null,
+            shape: 1
+          }
+        ],
+        title: "UI.Text",
+        properties: {
+          defaultValue: "ComfyUI",
+          multiline: false,
+          hidden: false
+        },
+        widgets_values: [
+          "ComfyUI"
+        ],
+        color: "#223",
+        bgColor: "#335",
+        comfyValue: "ComfyUI",
+        shownOutputProperties: {}
+      },
+      {
+        id: 100,
+        type: "VAEDecode",
+        pos: [
+          1616.5478569656225,
+          -69.71082847978477
+        ],
+        size: [
+          210,
+          46
+        ],
+        flags: {},
+        order: 43,
+        mode: 0,
+        inputs: [
+          {
+            name: "samples",
+            type: "LATENT",
+            link: 179
+          },
+          {
+            name: "vae",
+            type: "VAE",
+            link: 136
+          }
+        ],
+        outputs: [
+          {
+            name: "IMAGE",
+            type: "IMAGE",
+            links: [
+              189
+            ],
+            slot_index: 0
+          }
+        ],
+        title: "VAEDecode",
+        properties: {},
+        color: "#432",
+        bgColor: "#653",
+        tags: [
+          "hr"
+        ]
+      },
+      {
+        id: 124,
+        type: "SaveImage",
+        pos: [
+          1620,
+          12
+        ],
+        size: [
+          186.4,
+          46
+        ],
+        flags: {},
+        order: 54,
+        mode: 0,
+        inputs: [
+          {
+            name: "images",
+            type: "IMAGE",
+            link: 189
+          },
+          {
+            name: "filename_prefix",
+            type: "string",
+            link: 188,
+            config: {
+              defaultValue: "ComfyUI",
+              multiline: false
+            },
+            defaultWidgetNode: null,
+            widgetNodeType: "ui/text",
+            serialize: true
+          }
+        ],
+        outputs: [
+          {
+            name: "output",
+            type: "IMAGE",
+            links: [
+              190
+            ],
+            slot_index: 0
+          }
+        ],
+        title: "SaveImage",
+        properties: {},
+        color: "#432",
+        bgColor: "#653",
+        tags: [
+          "hr"
+        ]
+      },
+      {
+        id: 71,
+        type: "actions/swap",
+        pos: [
+          -531,
+          461
+        ],
+        size: [
+          140,
+          66
+        ],
+        flags: {
+          collapsed: false
+        },
+        order: 72,
+        mode: 0,
+        inputs: [
+          {
+            name: "A",
+            type: "*",
+            link: 89
+          },
+          {
+            name: "B",
+            type: "*",
+            link: 90
+          },
+          {
+            name: "swap",
+            type: -1,
+            link: 95,
+            shape: 1
+          }
+        ],
+        outputs: [
+          {
+            name: "B",
+            type: "*",
+            links: [
+              91
+            ],
+            slot_index: 0
+          },
+          {
+            name: "A",
+            type: "*",
+            links: [
+              92
+            ],
+            slot_index: 1
+          }
+        ],
+        title: "Comfy.SwapAction",
+        properties: {}
+      },
+      {
+        id: 62,
+        type: "ui/button",
+        pos: [
+          -648,
+          524
+        ],
+        size: [
+          210,
+          78
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 25,
+        mode: 0,
+        inputs: [],
+        outputs: [
+          {
+            name: "clicked",
+            type: -2,
+            links: [
+              95
+            ],
+            shape: 1,
+            slot_index: 0
+          },
+          {
+            name: "isClicked",
+            type: "boolean",
+            links: null
+          }
+        ],
+        title: "UI.Button",
+        properties: {
+          defaultValue: false,
+          message: "bang",
+          hidden: false
+        },
+        widgets_values: [
+          "false"
+        ],
+        color: "#223",
+        bgColor: "#335",
+        comfyValue: false,
+        shownOutputProperties: {}
+      },
+      {
+        id: 127,
+        type: "actions/execute_subgraph",
+        pos: [
+          297,
+          -73
+        ],
+        size: [
+          226.79999999999998,
+          46
+        ],
+        flags: {},
+        order: 35,
+        mode: 0,
+        inputs: [
+          {
+            name: "execute",
+            type: -1,
+            link: 191,
+            shape: 1
+          },
+          {
+            name: "tag",
+            type: "string",
+            link: 192
+          }
+        ],
+        outputs: [],
+        title: "Comfy.ExecuteSubgraphAction",
+        properties: {
+          tag: "default"
+        }
+      },
+      {
+        id: 128,
+        type: "basic/string",
+        pos: [
+          198,
+          -26
+        ],
+        size: [
+          210,
+          38
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 26,
+        mode: 0,
+        inputs: [],
+        outputs: [
+          {
+            name: "string",
+            type: "string",
+            links: [
+              192
+            ],
+            slot_index: 0
+          }
+        ],
+        title: "Const String",
+        properties: {
+          value: "default"
+        }
+      },
+      {
+        id: 126,
+        type: "ui/button",
+        pos: [
+          178,
+          -57
+        ],
+        size: [
+          210,
+          78
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 27,
+        mode: 0,
+        inputs: [],
+        outputs: [
+          {
+            name: "clicked",
+            type: -2,
+            links: [
+              191
+            ],
+            shape: 1,
+            slot_index: 0
+          },
+          {
+            name: "isClicked",
+            type: "boolean",
+            links: null
+          }
+        ],
+        title: "UI.Button",
+        properties: {
+          defaultValue: false,
+          message: "bang"
+        },
+        widgets_values: [
+          "false"
+        ],
+        color: "#223",
+        bgColor: "#335",
+        comfyValue: false,
+        shownOutputProperties: {}
+      },
+      {
+        id: 37,
+        type: "ui/slider",
+        pos: [
+          -348,
+          478
+        ],
+        size: [
+          210,
+          158
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 66,
+        mode: 0,
+        inputs: [
+          {
+            name: "value",
+            type: "number",
+            link: 92
+          }
+        ],
+        outputs: [
+          {
+            name: "value",
+            type: "number",
+            links: [
+              89,
+              93,
+              200
+            ],
+            slot_index: 0
+          },
+          {
+            name: "changed",
+            type: -2,
+            links: null,
+            shape: 1
+          },
+          {
+            name: "min",
+            type: "number",
+            links: null
+          },
+          {
+            name: "max",
+            type: "number",
+            links: null
+          },
+          {
+            name: "step",
+            type: "number",
+            links: null
+          },
+          {
+            name: "precision",
+            type: "number",
+            links: null
+          }
+        ],
+        title: "UI.Slider",
+        properties: {
+          defaultValue: 512,
+          min: 64,
+          max: 2048,
+          step: 64,
+          precision: 0,
+          hidden: false
+        },
+        widgets_values: [
+          "512.000"
+        ],
+        color: "#223",
+        bgColor: "#335",
+        comfyValue: 512,
+        shownOutputProperties: {
+          min: {
+            type: "number",
+            index: 2
+          },
+          max: {
+            type: "number",
+            index: 3
+          },
+          step: {
+            type: "number",
+            index: 4
+          },
+          precision: {
+            type: "number",
+            index: 5
+          }
+        }
+      },
+      {
+        id: 38,
+        type: "ui/slider",
+        pos: [
+          -346,
+          502
+        ],
+        size: [
+          210,
+          158
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 67,
+        mode: 0,
+        inputs: [
+          {
+            name: "value",
+            type: "number",
+            link: 91
+          }
+        ],
+        outputs: [
+          {
+            name: "value",
+            type: "number",
+            links: [
+              90,
+              94,
+              201
+            ],
+            slot_index: 0
+          },
+          {
+            name: "changed",
+            type: -2,
+            links: null,
+            shape: 1
+          },
+          {
+            name: "min",
+            type: "number",
+            links: null
+          },
+          {
+            name: "max",
+            type: "number",
+            links: null
+          },
+          {
+            name: "step",
+            type: "number",
+            links: null
+          },
+          {
+            name: "precision",
+            type: "number",
+            links: null
+          }
+        ],
+        title: "UI.Slider",
+        properties: {
+          defaultValue: 512,
+          min: 64,
+          max: 2048,
+          step: 64,
+          precision: 0,
+          hidden: false
+        },
+        widgets_values: [
+          "512.000"
+        ],
+        color: "#223",
+        bgColor: "#335",
+        comfyValue: 512,
+        shownOutputProperties: {
+          min: {
+            type: "number",
+            index: 2
+          },
+          max: {
+            type: "number",
+            index: 3
+          },
+          step: {
+            type: "number",
+            index: 4
+          },
+          precision: {
+            type: "number",
+            index: 5
+          }
+        }
+      },
+      {
+        id: 136,
+        type: "string/toString",
+        pos: [
+          988.3900000000015,
+          322.6400000000001
+        ],
+        size: [
+          140,
+          26
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 59,
+        mode: 0,
+        inputs: [
+          {
+            name: "in",
+            type: "",
+            link: 210
+          }
+        ],
+        outputs: [
+          {
+            name: "out",
+            type: "string",
+            links: [
+              203
+            ],
+            slot_index: 0
+          }
+        ],
+        title: "ToString",
+        properties: {}
+      },
+      {
+        id: 134,
+        type: "ui/text",
+        pos: [
+          1097.4999999999982,
+          186.6000000000001
+        ],
+        size: [
+          210,
+          78
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 57,
+        mode: 0,
+        inputs: [
+          {
+            name: "value",
+            type: "string",
+            link: 205
+          }
+        ],
+        outputs: [
+          {
+            name: "value",
+            type: "string",
+            links: null
+          },
+          {
+            name: "changed",
+            type: -2,
+            links: null,
+            shape: 1
+          }
+        ],
+        title: "UI.Text",
+        properties: {
+          defaultValue: "",
+          multiline: false
+        },
+        widgets_values: [
+          "1024"
+        ],
+        color: "#223",
+        bgColor: "#335",
+        comfyValue: "1024",
+        shownOutputProperties: {}
+      },
+      {
+        id: 137,
+        type: "string/toString",
+        pos: [
+          997.5000000000001,
+          188.10000000000002
+        ],
+        size: [
+          140,
+          26
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 60,
+        mode: 0,
+        inputs: [
+          {
+            name: "in",
+            type: "",
+            link: 208
+          }
+        ],
+        outputs: [
+          {
+            name: "out",
+            type: "string",
+            links: [
+              205
+            ],
+            slot_index: 0
+          }
+        ],
+        title: "ToString",
+        properties: {}
+      },
+      {
+        id: 135,
+        type: "ui/text",
+        pos: [
+          1092,
+          324
+        ],
+        size: [
+          210,
+          78
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 58,
+        mode: 0,
+        inputs: [
+          {
+            name: "value",
+            type: "string",
+            link: 203
+          }
+        ],
+        outputs: [
+          {
+            name: "value",
+            type: "string",
+            links: null
+          },
+          {
+            name: "changed",
+            type: -2,
+            links: null,
+            shape: 1
+          }
+        ],
+        title: "UI.Text",
+        properties: {
+          defaultValue: "",
+          multiline: false
+        },
+        widgets_values: [
+          "1024"
+        ],
+        color: "#223",
+        bgColor: "#335",
+        comfyValue: "1024",
+        shownOutputProperties: {}
+      },
+      {
+        id: 138,
+        type: "math/floor",
+        pos: [
+          1096.8999999999996,
+          236.29999999999998
+        ],
+        size: [
+          140,
+          26
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 61,
+        mode: 0,
+        inputs: [
+          {
+            name: "in",
+            type: "number",
+            link: 206
+          }
+        ],
+        outputs: [
+          {
+            name: "out",
+            type: "number",
+            links: [
+              207,
+              208
+            ],
+            slot_index: 0
+          }
+        ],
+        title: "Floor",
+        properties: {}
+      },
+      {
+        id: 90,
+        type: "LatentUpscale",
+        pos: [
+          1300.128032965624,
+          173.51348852021468
+        ],
+        size: [
+          267,
+          106
+        ],
+        flags: {},
+        order: 75,
+        mode: 0,
+        inputs: [
+          {
+            name: "samples",
+            type: "LATENT",
+            link: 134
+          },
+          {
+            name: "upscale_method",
+            type: "string",
+            link: 126,
+            config: {
+              values: [
+                "nearest-exact",
+                "bilinear",
+                "area"
+              ],
+              defaultValue: "nearest-exact"
+            },
+            defaultWidgetNode: null,
+            widgetNodeType: "ui/combo",
+            serialize: true
+          },
+          {
+            name: "width",
+            type: "number",
+            link: 207,
+            config: {
+              min: 64,
+              max: 8192,
+              step: 8,
+              precision: 0,
+              defaultValue: 512
+            },
+            defaultWidgetNode: null,
+            widgetNodeType: "ui/slider",
+            serialize: true
+          },
+          {
+            name: "height",
+            type: "number",
+            link: 211,
+            config: {
+              min: 64,
+              max: 8192,
+              step: 8,
+              precision: 0,
+              defaultValue: 512
+            },
+            defaultWidgetNode: null,
+            widgetNodeType: "ui/slider",
+            serialize: true
+          },
+          {
+            name: "crop",
+            type: "string",
+            link: 129,
+            config: {
+              values: [
+                "disabled",
+                "center"
+              ],
+              defaultValue: "disabled"
+            },
+            defaultWidgetNode: null,
+            widgetNodeType: "ui/combo",
+            serialize: true
+          }
+        ],
+        outputs: [
+          {
+            name: "LATENT",
+            type: "LATENT",
+            links: [
+              170
+            ],
+            slot_index: 0
+          }
+        ],
+        title: "LatentUpscale",
+        properties: {},
+        color: "#432",
+        bgColor: "#653",
+        tags: [
+          "hr"
+        ]
+      },
+      {
+        id: 133,
+        type: "math/operation",
+        pos: [
+          1007,
+          220.9
+        ],
+        size: [
+          140,
+          46
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 56,
+        mode: 0,
+        inputs: [
+          {
+            name: "A",
+            type: "number,array,object",
+            link: 199
+          },
+          {
+            name: "B",
+            type: "number",
+            link: 200
+          }
+        ],
+        outputs: [
+          {
+            name: "=",
+            type: "number",
+            links: [
+              206
+            ],
+            slot_index: 0
+          }
+        ],
+        title: "Operation",
+        properties: {
+          A: 2,
+          B: 512,
+          OP: "*"
+        }
+      },
+      {
+        id: 129,
+        type: "math/operation",
+        pos: [
+          1021,
+          291
+        ],
+        size: [
+          140,
+          46
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 55,
+        mode: 0,
+        inputs: [
+          {
+            name: "A",
+            type: "number,array,object",
+            link: 198
+          },
+          {
+            name: "B",
+            type: "number",
+            link: 201
+          }
+        ],
+        outputs: [
+          {
+            name: "=",
+            type: "number",
+            links: [
+              209
+            ],
+            slot_index: 0
+          }
+        ],
+        title: "Operation",
+        properties: {
+          A: 2,
+          B: 512,
+          OP: "*"
+        }
+      },
+      {
+        id: 139,
+        type: "math/floor",
+        pos: [
+          1097,
+          260
+        ],
+        size: [
+          140,
+          26
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 62,
+        mode: 0,
+        inputs: [
+          {
+            name: "in",
+            type: "number",
+            link: 209
+          }
+        ],
+        outputs: [
+          {
+            name: "out",
+            type: "number",
+            links: [
+              210,
+              211
+            ],
+            slot_index: 0
+          }
+        ],
+        title: "Floor",
+        properties: {}
+      },
+      {
+        id: 93,
+        type: "ui/slider",
+        pos: [
+          976,
+          255
+        ],
+        size: [
+          210,
+          158
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 28,
+        mode: 0,
+        inputs: [
+          {
+            name: "value",
+            type: "number",
+            link: null
+          }
+        ],
+        outputs: [
+          {
+            name: "value",
+            type: "number",
+            links: [
+              198,
+              199
+            ],
+            slot_index: 0
+          },
+          {
+            name: "changed",
+            type: -2,
+            links: null,
+            shape: 1
+          },
+          {
+            name: "min",
+            type: "number",
+            links: null
+          },
+          {
+            name: "max",
+            type: "number",
+            links: null
+          },
+          {
+            name: "step",
+            type: "number",
+            links: null
+          },
+          {
+            name: "precision",
+            type: "number",
+            links: null
+          }
+        ],
+        title: "UI.Slider",
+        properties: {
+          defaultValue: 512,
+          min: 1,
+          max: 4,
+          step: 0.1,
+          precision: 0
+        },
+        widgets_values: [
+          "2.000"
+        ],
+        color: "#223",
+        bgColor: "#335",
+        comfyValue: 2,
+        shownOutputProperties: {
+          min: {
+            type: "number",
+            index: 2
+          },
+          max: {
+            type: "number",
+            index: 3
+          },
+          step: {
+            type: "number",
+            index: 4
+          },
+          precision: {
+            type: "number",
+            index: 5
+          }
+        }
+      },
+      {
+        id: 140,
+        type: "actions/queue_events",
+        pos: [
+          1593,
+          244
+        ],
+        size: [
+          142.79999999999998,
+          66
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 29,
+        mode: 0,
+        inputs: [],
+        outputs: [
+          {
+            name: "beforeQueued",
+            type: -2,
+            links: [
+              212
+            ],
+            shape: 1
+          },
+          {
+            name: "afterQueued",
+            type: -2,
+            links: null,
+            shape: 1
+          },
+          {
+            name: "prompt",
+            type: "*",
+            links: null
+          }
+        ],
+        title: "Comfy.QueueEvents",
+        properties: {
+          prompt: null
+        }
+      },
+      {
+        id: 141,
+        type: "events/filter",
+        pos: [
+          1604,
+          284
+        ],
+        size: [
+          210,
+          150
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 36,
+        mode: 0,
+        inputs: [
+          {
+            name: "event",
+            type: -1,
+            link: 212,
+            shape: 1,
+            slot_index: 0
+          },
+          {
+            name: "compare_value",
+            type: "*",
+            link: null
+          }
+        ],
+        outputs: [
+          {
+            name: "accept",
+            type: -2,
+            links: [
+              216
+            ],
+            shape: 1
+          },
+          {
+            name: "reject",
+            type: -2,
+            links: [],
+            shape: 1
+          }
+        ],
+        title: "Filter Event",
+        properties: {
+          compareValue: 0,
+          propertyName: "queueRemaining",
+          mode: "property",
+          operation: "=="
+        }
+      },
+      {
+        id: 145,
+        type: "events/filter",
+        pos: [
+          1598,
+          320
+        ],
+        size: [
+          210,
+          150
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 39,
+        mode: 0,
+        inputs: [
+          {
+            name: "event",
+            type: -1,
+            link: 216,
+            shape: 1,
+            slot_index: 0
+          },
+          {
+            name: "compare_value",
+            type: "*",
+            link: null
+          }
+        ],
+        outputs: [
+          {
+            name: "accept",
+            type: -2,
+            links: [
+              218
+            ],
+            shape: 1,
+            slot_index: 0
+          },
+          {
+            name: "reject",
+            type: -2,
+            links: null,
+            shape: 1
+          }
+        ],
+        title: "Filter Event",
+        properties: {
+          compareValue: "hr",
+          propertyName: "subgraph",
+          mode: "property",
+          operation: "=="
+        }
+      },
+      {
+        id: 147,
+        type: "actions/queue_events",
+        pos: [
+          661,
+          728
+        ],
+        size: [
+          142.79999999999998,
+          66
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 30,
+        mode: 0,
+        inputs: [],
+        outputs: [
+          {
+            name: "beforeQueued",
+            type: -2,
+            links: [
+              219
+            ],
+            shape: 1
+          },
+          {
+            name: "afterQueued",
+            type: -2,
+            links: null,
+            shape: 1
+          },
+          {
+            name: "prompt",
+            type: "*",
+            links: null
+          }
+        ],
+        title: "Comfy.QueueEvents",
+        properties: {
+          prompt: null
+        }
+      },
+      {
+        id: 148,
+        type: "events/filter",
+        pos: [
+          676,
+          761
+        ],
+        size: [
+          210,
+          150
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 37,
+        mode: 0,
+        inputs: [
+          {
+            name: "event",
+            type: -1,
+            link: 219,
+            shape: 1,
+            slot_index: 0
+          },
+          {
+            name: "compare_value",
+            type: "*",
+            link: null
+          }
+        ],
+        outputs: [
+          {
+            name: "accept",
+            type: -2,
+            links: [
+              220
+            ],
+            shape: 1
+          },
+          {
+            name: "reject",
+            type: -2,
+            links: [],
+            shape: 1
+          }
+        ],
+        title: "Filter Event",
+        properties: {
+          compareValue: 0,
+          propertyName: "queueRemaining",
+          mode: "property",
+          operation: "=="
+        }
+      },
+      {
+        id: 149,
+        type: "events/filter",
+        pos: [
+          673,
+          794
+        ],
+        size: [
+          210,
+          150
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 40,
+        mode: 0,
+        inputs: [
+          {
+            name: "event",
+            type: -1,
+            link: 220,
+            shape: 1,
+            slot_index: 0
+          },
+          {
+            name: "compare_value",
+            type: "*",
+            link: null
+          }
+        ],
+        outputs: [
+          {
+            name: "accept",
+            type: -2,
+            links: [
+              221
+            ],
+            shape: 1,
+            slot_index: 0
+          },
+          {
+            name: "reject",
+            type: -2,
+            links: null,
+            shape: 1
+          }
+        ],
+        title: "Filter Event",
+        properties: {
+          compareValue: "default",
+          propertyName: "subgraph",
+          mode: "property",
+          operation: "=="
+        }
       }
     ],
     links: [
@@ -4207,22 +4906,6 @@ const defaultGraph: SerializedAppState = {
         1,
         "string"
       ],
-      [
-        127,
-        92,
-        0,
-        90,
-        2,
-        "number"
-      ],
-      [
-        128,
-        93,
-        0,
-        90,
-        3,
-        "number"
-      ],
       [
         129,
         94,
@@ -4255,14 +4938,6 @@ const defaultGraph: SerializedAppState = {
         1,
         "VAE"
       ],
-      [
-        138,
-        101,
-        0,
-        102,
-        0,
-        "IMAGE"
-      ],
       [
         141,
         102,
@@ -4343,14 +5018,6 @@ const defaultGraph: SerializedAppState = {
         0,
         "IMAGE"
       ],
-      [
-        156,
-        100,
-        0,
-        101,
-        0,
-        "IMAGE"
-      ],
       [
         162,
         105,
@@ -4510,6 +5177,190 @@ const defaultGraph: SerializedAppState = {
         122,
         1,
         -1
+      ],
+      [
+        188,
+        45,
+        0,
+        124,
+        1,
+        "string"
+      ],
+      [
+        189,
+        100,
+        0,
+        124,
+        0,
+        "IMAGE"
+      ],
+      [
+        190,
+        124,
+        0,
+        102,
+        0,
+        "IMAGE"
+      ],
+      [
+        191,
+        126,
+        0,
+        127,
+        0,
+        -1
+      ],
+      [
+        192,
+        128,
+        0,
+        127,
+        1,
+        "string"
+      ],
+      [
+        198,
+        93,
+        0,
+        129,
+        0,
+        "number,array,object"
+      ],
+      [
+        199,
+        93,
+        0,
+        133,
+        0,
+        "number,array,object"
+      ],
+      [
+        200,
+        37,
+        0,
+        133,
+        1,
+        "number"
+      ],
+      [
+        201,
+        38,
+        0,
+        129,
+        1,
+        "number"
+      ],
+      [
+        203,
+        136,
+        0,
+        135,
+        0,
+        "string"
+      ],
+      [
+        205,
+        137,
+        0,
+        134,
+        0,
+        "string"
+      ],
+      [
+        206,
+        133,
+        0,
+        138,
+        0,
+        "number"
+      ],
+      [
+        207,
+        138,
+        0,
+        90,
+        2,
+        "number"
+      ],
+      [
+        208,
+        138,
+        0,
+        137,
+        0,
+        "number"
+      ],
+      [
+        209,
+        129,
+        0,
+        139,
+        0,
+        "number"
+      ],
+      [
+        210,
+        139,
+        0,
+        136,
+        0,
+        "number"
+      ],
+      [
+        211,
+        139,
+        0,
+        90,
+        3,
+        "number"
+      ],
+      [
+        212,
+        140,
+        0,
+        141,
+        0,
+        -1
+      ],
+      [
+        216,
+        141,
+        0,
+        145,
+        0,
+        -1
+      ],
+      [
+        218,
+        145,
+        0,
+        103,
+        2,
+        -1
+      ],
+      [
+        219,
+        147,
+        0,
+        148,
+        0,
+        -1
+      ],
+      [
+        220,
+        148,
+        0,
+        149,
+        0,
+        -1
+      ],
+      [
+        221,
+        149,
+        0,
+        104,
+        2,
+        -1
       ]
     ],
     groups: [
@@ -4560,10 +5411,11 @@ const defaultGraph: SerializedAppState = {
             showTitle: false,
             direction: "horizontal",
             classes: "",
-            containerVariant: "block",
+            blockVariant: "block",
             hidden: false,
             flexGrow: 100,
-            disabled: false
+            disabled: false,
+            containerVariant: "block"
           }
         },
         children: [
@@ -4580,10 +5432,11 @@ const defaultGraph: SerializedAppState = {
             showTitle: false,
             direction: "vertical",
             classes: "",
-            containerVariant: "block",
+            blockVariant: "block",
             hidden: false,
             flexGrow: 100,
-            disabled: false
+            disabled: false,
+            containerVariant: "block"
           }
         },
         children: [
@@ -4591,8 +5444,8 @@ const defaultGraph: SerializedAppState = {
           "27",
           "33",
           "16",
-          "41",
-          "58"
+          "79",
+          "41"
         ],
         parent: "0"
       },
@@ -4605,16 +5458,18 @@ const defaultGraph: SerializedAppState = {
             showTitle: false,
             direction: "vertical",
             classes: "",
-            containerVariant: "block",
+            blockVariant: "block",
             hidden: false,
             flexGrow: 100,
-            disabled: false
+            disabled: false,
+            containerVariant: "block"
           }
         },
         children: [
           "76",
+          "73",
           "34",
-          "79"
+          "58"
         ],
         parent: "0"
       },
@@ -4736,16 +5591,18 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "vertical",
             classes: "",
-            containerVariant: "block",
+            blockVariant: "block",
             hidden: false,
             flexGrow: 100,
-            disabled: false
+            disabled: false,
+            containerVariant: "block"
           }
         },
         children: [
           "53",
           "54",
-          "48"
+          "48",
+          "88"
         ],
         parent: "1"
       },
@@ -4761,7 +5618,9 @@ const defaultGraph: SerializedAppState = {
             classes: "",
             hidden: false,
             flexGrow: 100,
-            disabled: false
+            disabled: false,
+            buttonVariant: "primary",
+            buttonSize: "large"
           }
         },
         children: [],
@@ -4772,14 +5631,23 @@ const defaultGraph: SerializedAppState = {
           type: "container",
           id: "27",
           attrs: {
-            title: "",
+            title: "Prompt",
             showTitle: true,
             direction: "horizontal",
             classes: "",
-            containerVariant: "hidden",
+            blockVariant: "hidden",
             hidden: false,
             flexGrow: 100,
-            disabled: false
+            disabled: false,
+            variant: "accordion",
+            tabNames: [
+              "Positive",
+              "Negative"
+            ],
+            openOnStartup: true,
+            containerVariant: "hidden",
+            buttonVariant: "primary",
+            buttonSize: "large"
           }
         },
         children: [
@@ -4800,7 +5668,9 @@ const defaultGraph: SerializedAppState = {
             classes: "",
             hidden: false,
             flexGrow: 100,
-            disabled: false
+            disabled: false,
+            buttonVariant: "primary",
+            buttonSize: "large"
           }
         },
         children: [],
@@ -4869,10 +5739,12 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "vertical",
             classes: "",
-            containerVariant: "block",
+            blockVariant: "block",
             hidden: false,
             flexGrow: 100,
-            disabled: false
+            disabled: false,
+            containerVariant: "block",
+            variant: "block"
           }
         },
         children: [
@@ -4908,10 +5780,11 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "horizontal",
             classes: "",
-            containerVariant: "block",
+            blockVariant: "block",
             hidden: true,
             flexGrow: 100,
-            disabled: false
+            disabled: false,
+            containerVariant: "block"
           }
         },
         children: [],
@@ -4941,13 +5814,15 @@ const defaultGraph: SerializedAppState = {
           id: "46",
           nodeId: 62,
           attrs: {
-            title: "↔",
+            title: "⮀",
             showTitle: true,
             direction: "horizontal",
             classes: "",
             hidden: false,
             flexGrow: 1,
-            disabled: false
+            disabled: false,
+            buttonVariant: "secondary",
+            buttonSize: "large"
           }
         },
         children: [],
@@ -4962,10 +5837,11 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "horizontal",
             classes: "",
-            containerVariant: "hidden",
+            blockVariant: "hidden",
             hidden: false,
             flexGrow: 100,
-            disabled: false
+            disabled: false,
+            containerVariant: "hidden"
           }
         },
         children: [
@@ -4984,10 +5860,11 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "horizontal",
             classes: "",
-            containerVariant: "hidden",
+            blockVariant: "hidden",
             hidden: false,
             flexGrow: 100,
-            disabled: false
+            disabled: false,
+            containerVariant: "hidden"
           }
         },
         children: [
@@ -5023,10 +5900,11 @@ const defaultGraph: SerializedAppState = {
             showTitle: false,
             direction: "horizontal",
             classes: "",
-            containerVariant: "hidden",
+            blockVariant: "hidden",
             hidden: false,
             flexGrow: 100,
-            disabled: false
+            disabled: false,
+            containerVariant: "hidden"
           }
         },
         children: [
@@ -5044,10 +5922,11 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "horizontal",
             classes: "",
-            containerVariant: "hidden",
+            blockVariant: "hidden",
             hidden: false,
             flexGrow: 100,
-            disabled: false
+            disabled: false,
+            containerVariant: "hidden"
           }
         },
         children: [
@@ -5067,7 +5946,8 @@ const defaultGraph: SerializedAppState = {
             direction: "horizontal",
             classes: "",
             flexGrow: 100,
-            disabled: false
+            disabled: false,
+            hidden: false
           }
         },
         children: [],
@@ -5084,7 +5964,8 @@ const defaultGraph: SerializedAppState = {
             direction: "horizontal",
             classes: "",
             flexGrow: 100,
-            disabled: false
+            disabled: false,
+            hidden: false
           }
         },
         children: [],
@@ -5101,7 +5982,8 @@ const defaultGraph: SerializedAppState = {
             direction: "horizontal",
             classes: "",
             flexGrow: 100,
-            disabled: false
+            disabled: false,
+            hidden: false
           }
         },
         children: [],
@@ -5116,16 +5998,19 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "vertical",
             classes: "",
-            containerVariant: "block",
+            blockVariant: "block",
             flexGrow: 100,
-            disabled: false
+            disabled: false,
+            containerVariant: "block",
+            hidden: false,
+            variant: "block"
           }
         },
         children: [
           "55",
           "59"
         ],
-        parent: "1"
+        parent: "2"
       },
       59: {
         dragItem: {
@@ -5136,9 +6021,12 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "horizontal",
             classes: "",
-            containerVariant: "block",
+            blockVariant: "block",
             flexGrow: 100,
-            disabled: false
+            disabled: false,
+            containerVariant: "block",
+            hidden: false,
+            variant: "block"
           }
         },
         children: [
@@ -5164,35 +6052,21 @@ const defaultGraph: SerializedAppState = {
         children: [],
         parent: "75"
       },
-      65: {
-        dragItem: {
-          type: "widget",
-          id: "65",
-          nodeId: 92,
-          attrs: {
-            title: "width",
-            showTitle: true,
-            direction: "horizontal",
-            classes: "",
-            flexGrow: 100,
-            disabled: false
-          }
-        },
-        children: [],
-        parent: "74"
-      },
       66: {
         dragItem: {
           type: "widget",
           id: "66",
           nodeId: 93,
           attrs: {
-            title: "height",
+            title: "scale",
             showTitle: true,
             direction: "horizontal",
             classes: "",
             flexGrow: 100,
-            disabled: false
+            disabled: false,
+            hidden: false,
+            buttonVariant: "primary",
+            buttonSize: "large"
           }
         },
         children: [],
@@ -5226,11 +6100,14 @@ const defaultGraph: SerializedAppState = {
             direction: "horizontal",
             classes: "",
             flexGrow: 100,
-            disabled: false
+            disabled: false,
+            hidden: false,
+            buttonVariant: "primary",
+            buttonSize: "large"
           }
         },
         children: [],
-        parent: "79"
+        parent: "2"
       },
       74: {
         dragItem: {
@@ -5241,13 +6118,13 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "horizontal",
             classes: "",
-            containerVariant: "hidden",
+            blockVariant: "hidden",
             flexGrow: 100,
-            disabled: false
+            disabled: false,
+            containerVariant: "hidden"
           }
         },
         children: [
-          "65",
           "66"
         ],
         parent: "79"
@@ -5261,9 +6138,10 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "horizontal",
             classes: "",
-            containerVariant: "hidden",
+            blockVariant: "hidden",
             flexGrow: 100,
-            disabled: false
+            disabled: false,
+            containerVariant: "hidden"
           }
         },
         children: [
@@ -5283,7 +6161,10 @@ const defaultGraph: SerializedAppState = {
             direction: "horizontal",
             classes: "",
             flexGrow: 100,
-            disabled: false
+            disabled: false,
+            hidden: false,
+            buttonVariant: "primary",
+            buttonSize: "large"
           }
         },
         children: [],
@@ -5316,7 +6197,11 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "horizontal",
             classes: "",
-            flexGrow: 100
+            flexGrow: 100,
+            hidden: false,
+            disabled: false,
+            buttonVariant: "primary",
+            buttonSize: "large"
           }
         },
         children: [],
@@ -5331,18 +6216,19 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "vertical",
             classes: "",
-            containerVariant: "block",
-            flexGrow: 100
+            blockVariant: "block",
+            flexGrow: 100,
+            containerVariant: "block"
           }
         },
         children: [
-          "82",
           "74",
+          "91",
           "83",
           "75",
-          "73"
+          "82"
         ],
-        parent: "2"
+        parent: "1"
       },
       82: {
         dragItem: {
@@ -5353,8 +6239,14 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "horizontal",
             classes: "",
+            blockVariant: "hidden",
+            flexGrow: 100,
             containerVariant: "hidden",
-            flexGrow: 100
+            hidden: false,
+            disabled: false,
+            variant: "block",
+            buttonVariant: "primary",
+            buttonSize: "large"
           }
         },
         children: [
@@ -5372,8 +6264,9 @@ const defaultGraph: SerializedAppState = {
             showTitle: true,
             direction: "horizontal",
             classes: "",
-            containerVariant: "hidden",
-            flexGrow: 100
+            blockVariant: "hidden",
+            flexGrow: 100,
+            containerVariant: "hidden"
           }
         },
         children: [
@@ -5397,19 +6290,121 @@ const defaultGraph: SerializedAppState = {
         },
         children: [],
         parent: "83"
+      },
+      87: {
+        dragItem: {
+          type: "widget",
+          id: "87",
+          nodeId: 126,
+          attrs: {
+            title: "Generate",
+            showTitle: true,
+            direction: "horizontal",
+            classes: "",
+            flexGrow: 100,
+            hidden: false,
+            disabled: false,
+            buttonVariant: "primary",
+            buttonSize: "large"
+          }
+        },
+        children: [],
+        parent: "88"
+      },
+      88: {
+        dragItem: {
+          type: "container",
+          id: "88",
+          attrs: {
+            title: "",
+            showTitle: true,
+            direction: "vertical",
+            classes: "",
+            containerVariant: "block",
+            flexGrow: 100
+          }
+        },
+        children: [
+          "87"
+        ],
+        parent: "16"
+      },
+      89: {
+        dragItem: {
+          type: "widget",
+          id: "89",
+          nodeId: 134,
+          attrs: {
+            title: "Width",
+            showTitle: true,
+            direction: "horizontal",
+            classes: "",
+            flexGrow: 100,
+            hidden: false,
+            disabled: true,
+            buttonVariant: "primary",
+            buttonSize: "large"
+          }
+        },
+        children: [],
+        parent: "91"
+      },
+      90: {
+        dragItem: {
+          type: "widget",
+          id: "90",
+          nodeId: 135,
+          attrs: {
+            title: "Height",
+            showTitle: true,
+            direction: "horizontal",
+            classes: "",
+            flexGrow: 100,
+            hidden: false,
+            disabled: true,
+            buttonVariant: "primary",
+            buttonSize: "large"
+          }
+        },
+        children: [],
+        parent: "91"
+      },
+      91: {
+        dragItem: {
+          type: "container",
+          id: "91",
+          attrs: {
+            title: "",
+            showTitle: true,
+            direction: "horizontal",
+            classes: "",
+            containerVariant: "block",
+            flexGrow: 100,
+            hidden: false,
+            disabled: false,
+            variant: "block",
+            buttonVariant: "primary",
+            buttonSize: "large"
+          }
+        },
+        children: [
+          "89",
+          "90"
+        ],
+        parent: "79"
       }
     },
-    currentId: 85,
+    currentId: 92,
     attrs: {
       defaultSubgraph: "default"
     }
   },
   canvas: {
     offset: [
-      -123.23101613364986,
-      242.30476878539957
+      0,
+      0
     ],
-    scale: 0.7513148009015788
+    scale: 1
   }
 }
 

From 3c04103a5bc34a5b8ef87331bc0141f99347de3c Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 6 May 2023 18:00:46 -0500
Subject: [PATCH 13/19] Fix anapnoe accordion

---
 src/scss/ux.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/scss/ux.scss b/src/scss/ux.scss
index ac94828..02b136e 100644
--- a/src/scss/ux.scss
+++ b/src/scss/ux.scss
@@ -302,6 +302,11 @@ div.float {
 
     > span {
         color: var(--ae-label-color) !important;
+    }
+    &:hover {
+        > span {
+            color: var(--ae-main-bg-color) !important;
+        }
     }
 	/*pointer-events: none !important;*/
 }

From 936c9769a3a8ef2cc2db9c3f46502d27c0760af4 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 6 May 2023 18:01:02 -0500
Subject: [PATCH 14/19] Rename button parameter

---
 src/lib/components/ComfyApp.svelte        | 1 -
 src/lib/components/ComfyProperties.svelte | 7 +++++++
 src/lib/nodes/ComfyWidgetNodes.ts         | 9 ++++-----
 src/lib/stores/layoutState.ts             | 2 +-
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte
index e9b3c88..26f0973 100644
--- a/src/lib/components/ComfyApp.svelte
+++ b/src/lib/components/ComfyApp.svelte
@@ -145,7 +145,6 @@
  $: if (containerElem) {
      const canvas = containerElem.querySelector<HTMLDivElement>("#graph-canvas")
      if (canvas) {
-         console.warn("reg!");
          const paneNode = canvas.closest(".splitpanes__pane")
          if (paneNode) {
              (paneNode as HTMLElement).ontransitionstart = () => {
diff --git a/src/lib/components/ComfyProperties.svelte b/src/lib/components/ComfyProperties.svelte
index ce208ff..3017b08 100644
--- a/src/lib/components/ComfyProperties.svelte
+++ b/src/lib/components/ComfyProperties.svelte
@@ -99,6 +99,13 @@
      if (spec.canShow)
          return spec.canShow(widget);
 
+     if (widget.type === "widget" && spec.validNodeTypes) {
+         const node = (widget as WidgetLayout).node
+         if (!node)
+             return false;
+         return spec.validNodeTypes.indexOf(node.type) !== -1;
+     }
+
      return spec.name in widget.attrs
  }
 
diff --git a/src/lib/nodes/ComfyWidgetNodes.ts b/src/lib/nodes/ComfyWidgetNodes.ts
index 518ed99..a1aa2dc 100644
--- a/src/lib/nodes/ComfyWidgetNodes.ts
+++ b/src/lib/nodes/ComfyWidgetNodes.ts
@@ -499,14 +499,13 @@ LiteGraph.registerNodeType({
 })
 
 export interface ComfyButtonProperties extends ComfyWidgetProperties {
-    message: string,
-    variant: string
+    param: string
 }
 
 export class ComfyButtonNode extends ComfyWidgetNode<boolean> {
     override properties: ComfyButtonProperties = {
         defaultValue: false,
-        message: "bang"
+        param: "bang"
     }
 
     static slotLayout: SlotLayout = {
@@ -525,8 +524,8 @@ export class ComfyButtonNode extends ComfyWidgetNode<boolean> {
 
     onClick() {
         this.setValue(true)
-        this.triggerSlot(0, this.properties.message);
-        this.setValue(false)
+        this.triggerSlot(0, this.properties.param);
+        this.setValue(false) // TODO onRelease
     }
 
     constructor(name?: string) {
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
index 3f059fe..e6e5ec5 100644
--- a/src/lib/stores/layoutState.ts
+++ b/src/lib/stores/layoutState.ts
@@ -416,7 +416,7 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
 
             // Button
             {
-                name: "message",
+                name: "param",
                 type: "string",
                 location: "nodeProps",
                 editable: true,

From 2ddf4b1889a23cd01e75cc333bd8af7d7d9a58db Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 6 May 2023 18:02:04 -0500
Subject: [PATCH 15/19] Fix unlock button color

---
 src/scss/ux.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/scss/ux.scss b/src/scss/ux.scss
index 02b136e..097d9a8 100644
--- a/src/scss/ux.scss
+++ b/src/scss/ux.scss
@@ -876,6 +876,9 @@ input[type=range]::-ms-fill-upper {
     &:hover svg {
         color: var(--ae-main-bg-color) !important;
     }
+    &:active svg {
+        color: var(--ae-placeholder-color) !important;
+    }
     svg {
         color: var(--ae-input-color) !important;
     }
@@ -886,5 +889,8 @@ input[type=range]::-ms-fill-upper {
         &:hover svg {
             color: var(--ae-main-bg-color) !important;
         }
+        &:active svg {
+            color: var(--ae-placeholder-color) !important;
+        }
     }
 }

From 69905b5d19ad45b60ba423587b6e80df198745de Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 6 May 2023 18:02:36 -0500
Subject: [PATCH 16/19] Rename

---
 src/lib/components/ComfyUnlockUIButton.svelte | 4 ++--
 src/lib/nodes/ComfyActionNodes.ts             | 8 ++++----
 src/scss/ux.scss                              | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/ComfyUnlockUIButton.svelte b/src/lib/components/ComfyUnlockUIButton.svelte
index 5b952c1..fbf215b 100644
--- a/src/lib/components/ComfyUnlockUIButton.svelte
+++ b/src/lib/components/ComfyUnlockUIButton.svelte
@@ -9,7 +9,7 @@
  }
 </script>
 
-<div class="unlock-button" class:toggled>
+<div class="comfy-toggle-button" class:toggled>
     <Button on:click={toggle} variant={toggled ? "primary" : "secondary"}>
         {#if toggled}
             <LockOpen2 />
@@ -20,7 +20,7 @@
 </div>
 
 <style lang="scss">
- .unlock-button {
+ .comfy-toggle-button {
      display: inline-flex;
      width: var(--size-12);
      height: var(--size-12);
diff --git a/src/lib/nodes/ComfyActionNodes.ts b/src/lib/nodes/ComfyActionNodes.ts
index ad66194..6e59729 100644
--- a/src/lib/nodes/ComfyActionNodes.ts
+++ b/src/lib/nodes/ComfyActionNodes.ts
@@ -25,8 +25,8 @@ export class ComfyQueueEvents extends ComfyGraphNode {
     }
 
     override onPropertyChanged(property: string, value: any, prevValue?: any) {
-        if (property === "value") {
-            this.setOutputData(2, this.properties.prompt)
+        if (property === "prompt") {
+            this.setOutputData(2, value)
         }
     }
 
@@ -48,12 +48,12 @@ export class ComfyQueueEvents extends ComfyGraphNode {
     }
 
     override beforeQueued(subgraph: string | null) {
-        this.setProperty("value", null)
+        this.setProperty("prompt", null)
         this.triggerSlot(0, this.getActionParams(subgraph))
     }
 
     override afterQueued(p: SerializedPrompt, subgraph: string | null) {
-        this.setProperty("value", p)
+        this.setProperty("prompt", p)
         this.triggerSlot(1, this.getActionParams(subgraph))
     }
 
diff --git a/src/scss/ux.scss b/src/scss/ux.scss
index 097d9a8..472e0da 100644
--- a/src/scss/ux.scss
+++ b/src/scss/ux.scss
@@ -869,7 +869,7 @@ input[type=range]::-ms-fill-upper {
     }
 }
 
-.unlock-button {
+.comfy-toggle-button {
     > .lg {
         border-color: var(--ae-subpanel-border-color) !important;
     }

From 0cf675f847f49d01e27064d294aacad44fdd24d0 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 6 May 2023 18:15:41 -0500
Subject: [PATCH 17/19] Don't save prompt to action node

Doesn't serialize due to cyclic structure
---
 src/lib/nodes/ComfyActionNodes.ts | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/src/lib/nodes/ComfyActionNodes.ts b/src/lib/nodes/ComfyActionNodes.ts
index 6e59729..beeda87 100644
--- a/src/lib/nodes/ComfyActionNodes.ts
+++ b/src/lib/nodes/ComfyActionNodes.ts
@@ -8,12 +8,10 @@ import { get } from "svelte/store";
 import queueState from "$lib/stores/queueState";
 
 export interface ComfyQueueEventsProperties extends Record<any, any> {
-    prompt: SerializedPrompt | null
 }
 
 export class ComfyQueueEvents extends ComfyGraphNode {
     override properties: ComfyQueueEventsProperties = {
-        prompt: null
     }
 
     static slotLayout: SlotLayout = {
@@ -24,16 +22,6 @@ export class ComfyQueueEvents extends ComfyGraphNode {
         ],
     }
 
-    override onPropertyChanged(property: string, value: any, prevValue?: any) {
-        if (property === "prompt") {
-            this.setOutputData(2, value)
-        }
-    }
-
-    override onExecute() {
-        this.setOutputData(2, this.properties.prompt)
-    }
-
     private getActionParams(subgraph: string | null): any {
         let queue = get(queueState)
         let remaining = 0;
@@ -48,18 +36,15 @@ export class ComfyQueueEvents extends ComfyGraphNode {
     }
 
     override beforeQueued(subgraph: string | null) {
-        this.setProperty("prompt", null)
         this.triggerSlot(0, this.getActionParams(subgraph))
     }
 
     override afterQueued(p: SerializedPrompt, subgraph: string | null) {
-        this.setProperty("prompt", p)
         this.triggerSlot(1, this.getActionParams(subgraph))
     }
 
     override onSerialize(o: SerializedLGraphNode) {
         super.onSerialize(o)
-        o.properties = { prompt: null }
     }
 }
 

From 707d6174dde1a01a4296e224999c15eed0bb3379 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 6 May 2023 19:53:33 -0500
Subject: [PATCH 18/19] Checkbox widget

---
 litegraph                                 |  2 +-
 src/lib/components/ComfyApp.ts            |  6 +-
 src/lib/components/ComfyProperties.svelte | 13 ++--
 src/lib/nodes/ComfyActionNodes.ts         | 12 ++--
 src/lib/nodes/ComfyImageCacheNode.ts      | 52 ++++++++++++--
 src/lib/nodes/ComfyWidgetNodes.ts         | 86 ++++++++++++++++++++---
 src/lib/widgets/CheckboxWidget.svelte     | 55 +++++++++++++++
 src/lib/widgets/ComboWidget.svelte        |  5 ++
 src/lib/widgets/GalleryWidget.svelte      |  7 +-
 src/scss/ux.scss                          |  4 ++
 10 files changed, 210 insertions(+), 32 deletions(-)
 create mode 100644 src/lib/widgets/CheckboxWidget.svelte

diff --git a/litegraph b/litegraph
index cd24bc7..39b040a 160000
--- a/litegraph
+++ b/litegraph
@@ -1 +1 @@
-Subproject commit cd24bc7356572250a5b3ec2320da1b8a73ddf2cc
+Subproject commit 39b040a0b148ef0aa248562720d904150ad61859
diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts
index 1808b6f..1979524 100644
--- a/src/lib/components/ComfyApp.ts
+++ b/src/lib/components/ComfyApp.ts
@@ -439,7 +439,7 @@ export default class ComfyApp {
             const n = workflow.nodes.find((n) => n.id === node_.id);
 
             if (!node_.isBackendNode) {
-                console.debug("Not serializing node: ", node_.type)
+                // console.debug("Not serializing node: ", node_.type)
                 continue;
             }
 
@@ -564,8 +564,8 @@ export default class ComfyApp {
             }
         }
 
-        console.warn({ workflow, output })
-        console.warn(promptToGraphVis({ workflow, output }))
+        // console.debug({ workflow, output })
+        // console.debug(promptToGraphVis({ workflow, output }))
 
         return { workflow, output };
     }
diff --git a/src/lib/components/ComfyProperties.svelte b/src/lib/components/ComfyProperties.svelte
index 3017b08..8ddb036 100644
--- a/src/lib/components/ComfyProperties.svelte
+++ b/src/lib/components/ComfyProperties.svelte
@@ -99,11 +99,16 @@
      if (spec.canShow)
          return spec.canShow(widget);
 
-     if (widget.type === "widget" && spec.validNodeTypes) {
-         const node = (widget as WidgetLayout).node
-         if (!node)
+     if (spec.validNodeTypes) {
+         if (widget.type === "widget") {
+             const node = (widget as WidgetLayout).node
+             if (!node)
+                 return false;
+             return spec.validNodeTypes.indexOf(node.type) !== -1;
+         }
+         else if (widget.type === "container") {
              return false;
-         return spec.validNodeTypes.indexOf(node.type) !== -1;
+         }
      }
 
      return spec.name in widget.attrs
diff --git a/src/lib/nodes/ComfyActionNodes.ts b/src/lib/nodes/ComfyActionNodes.ts
index beeda87..39a66b4 100644
--- a/src/lib/nodes/ComfyActionNodes.ts
+++ b/src/lib/nodes/ComfyActionNodes.ts
@@ -112,7 +112,7 @@ export class ComfyCopyAction extends ComfyGraphNode {
             { name: "copy", type: BuiltInSlotType.ACTION }
         ],
         outputs: [
-            { name: "out", type: "*" }
+            { name: "out", type: BuiltInSlotType.EVENT }
         ],
     }
 
@@ -130,13 +130,15 @@ export class ComfyCopyAction extends ComfyGraphNode {
     }
 
     override onExecute() {
-        this.setProperty("value", this.getInputData(0))
+        if (this.getInputLink(0))
+            this.setProperty("value", this.getInputData(0))
     }
 
     override onAction(action: any, param: any) {
-        this.setProperty("value", this.getInputData(0))
-        this.setOutputData(0, this.properties.value)
-        console.log("setData", this.properties.value)
+        if (action === "copy") {
+            this.setProperty("value", this.getInputData(0))
+            this.triggerSlot(0, this.properties.value)
+        }
     };
 }
 
diff --git a/src/lib/nodes/ComfyImageCacheNode.ts b/src/lib/nodes/ComfyImageCacheNode.ts
index 728557b..51fee60 100644
--- a/src/lib/nodes/ComfyImageCacheNode.ts
+++ b/src/lib/nodes/ComfyImageCacheNode.ts
@@ -1,4 +1,4 @@
-import { BuiltInSlotType, LiteGraph, type ITextWidget, type SlotLayout, clamp } from "@litegraph-ts/core";
+import { BuiltInSlotType, LiteGraph, type ITextWidget, type SlotLayout, clamp, type PropertyLayout, type IComboWidget } from "@litegraph-ts/core";
 import ComfyGraphNode from "./ComfyGraphNode";
 import type { GalleryOutput } from "./ComfyWidgetNodes";
 
@@ -6,7 +6,8 @@ export interface ComfyImageCacheNodeProperties extends Record<any, any> {
     images: GalleryOutput | null,
     index: number,
     filenames: Record<number, { filename: string | null, status: ImageCacheState }>,
-    genNumber: number
+    genNumber: number,
+    updateMode: "replace" | "append"
 }
 
 type ImageCacheState = "none" | "uploading" | "failed" | "cached"
@@ -20,7 +21,8 @@ export default class ComfyImageCacheNode extends ComfyGraphNode {
         images: null,
         index: 0,
         filenames: {},
-        genNumber: 0
+        genNumber: 0,
+        updateMode: "replace"
     }
 
     static slotLayout: SlotLayout = {
@@ -36,11 +38,15 @@ export default class ComfyImageCacheNode extends ComfyGraphNode {
         ]
     }
 
+    static propertyLayout: PropertyLayout = [
+        { name: "updateMode", defaultValue: "replace", type: "enum", options: { values: ["replace", "append"] } }
+    ]
+
     private _uploadPromise: Promise<void> | null = null;
-    private _state: ImageCacheState = "none"
 
     stateWidget: ITextWidget;
     filenameWidget: ITextWidget;
+    modeWidget: IComboWidget;
 
     constructor(name?: string) {
         super(name)
@@ -57,6 +63,14 @@ export default class ComfyImageCacheNode extends ComfyGraphNode {
             ""
         );
         this.filenameWidget.disabled = true;
+
+        this.modeWidget = this.addWidget<IComboWidget>(
+            "combo",
+            "Mode",
+            this.properties.updateMode,
+            null,
+            { property: "updateMode", values: ["replace", "append"] }
+        );
     }
 
     override onPropertyChanged(property: string, value: any, prevValue?: any) {
@@ -66,13 +80,23 @@ export default class ComfyImageCacheNode extends ComfyGraphNode {
             else
                 this.properties.index = 0
         }
+        else if (property === "updateMode") {
+            this.modeWidget.value = value;
+        }
 
+        this.updateWidgets()
+    }
+
+    private updateWidgets() {
         if (this.properties.filenames && this.properties.images) {
             const fileCount = this.properties.images.images.length;
             const cachedCount = Object.keys(this.properties.filenames).length
             console.warn(cachedCount, this.properties.filenames)
             this.filenameWidget.value = `${fileCount} files, ${cachedCount} cached`
         }
+        else {
+            this.filenameWidget.value = `No files cached`
+        }
     }
 
     override onExecute() {
@@ -185,6 +209,7 @@ export default class ComfyImageCacheNode extends ComfyGraphNode {
             this.setProperty("images", null)
             this.setProperty("filenames", {})
             this.setProperty("index", 0)
+            this.updateWidgets();
             return
         }
 
@@ -192,11 +217,24 @@ export default class ComfyImageCacheNode extends ComfyGraphNode {
 
         if (link.data && "images" in link.data) {
             this.setProperty("genNumber", this.properties.genNumber + 1)
-            this.setProperty("images", link.data as GalleryOutput)
-            this.setProperty("filenames", {})
-            console.debug("[ComfyImageCacheNode] Received output!", link.data)
+
+            const output = link.data as GalleryOutput;
+
+            if (this.properties.updateMode === "append" && this.properties.images != null) {
+                const newImages = this.properties.images.images.concat(output.images)
+                this.properties.images.images = newImages
+                this.setProperty("images", this.properties.images)
+            }
+            else {
+                this.setProperty("images", link.data as GalleryOutput)
+                this.setProperty("filenames", {})
+            }
+
+            console.debug("[ComfyImageCacheNode] Received output!", output, this.properties.updateMode, this.properties.images)
             this.setIndex(0, true)
         }
+
+        this.updateWidgets();
     }
 }
 
diff --git a/src/lib/nodes/ComfyWidgetNodes.ts b/src/lib/nodes/ComfyWidgetNodes.ts
index a1aa2dc..095cce6 100644
--- a/src/lib/nodes/ComfyWidgetNodes.ts
+++ b/src/lib/nodes/ComfyWidgetNodes.ts
@@ -1,10 +1,11 @@
-import { LiteGraph, type ContextMenuItem, type LGraphNode, type Vector2, LConnectionKind, LLink, LGraphCanvas, type SlotType, TitleMode, type SlotLayout, LGraph, type INodeInputSlot, type ITextWidget, type INodeOutputSlot, type SerializedLGraphNode, BuiltInSlotType, type PropertyLayout } from "@litegraph-ts/core";
+import { LiteGraph, type ContextMenuItem, type LGraphNode, type Vector2, LConnectionKind, LLink, LGraphCanvas, type SlotType, TitleMode, type SlotLayout, LGraph, type INodeInputSlot, type ITextWidget, type INodeOutputSlot, type SerializedLGraphNode, BuiltInSlotType, type PropertyLayout, type IComboWidget } from "@litegraph-ts/core";
 import ComfyGraphNode from "./ComfyGraphNode";
 import ComboWidget from "$lib/widgets/ComboWidget.svelte";
 import RangeWidget from "$lib/widgets/RangeWidget.svelte";
 import TextWidget from "$lib/widgets/TextWidget.svelte";
 import GalleryWidget from "$lib/widgets/GalleryWidget.svelte";
 import ButtonWidget from "$lib/widgets/ButtonWidget.svelte";
+import CheckboxWidget from "$lib/widgets/CheckboxWidget.svelte";
 import type { SvelteComponentDev } from "svelte/internal";
 import { Watch } from "@litegraph-ts/nodes-basic";
 import type IComfyInputSlot from "$lib/IComfyInputSlot";
@@ -48,8 +49,11 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
     override isBackendNode = false;
     override serialize_widgets = true;
 
-    outputIndex: number | null = 0;
+    // input slots
     inputIndex: number = 0;
+
+    // output slots
+    outputIndex: number | null = 0;
     changedIndex: number | null = 1;
 
     displayWidget: ITextWidget;
@@ -94,7 +98,7 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
         if (this.outputIndex !== null && this.outputs.length >= this.outputIndex) {
             this.setOutputData(this.outputIndex, get(this.value))
         }
-        if (this.changedIndex !== null & this.outputs.length >= this.changedIndex) {
+        if (this.changedIndex !== null && this.outputs.length >= this.changedIndex) {
             const changedOutput = this.outputs[this.changedIndex]
             if (changedOutput.type === BuiltInSlotType.EVENT)
                 this.triggerSlot(this.changedIndex, "changed")
@@ -118,10 +122,8 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
         if (this.copyFromInputLink) {
             if (this.inputs.length >= this.inputIndex) {
                 const data = this.getInputData(this.inputIndex)
-                if (data) { // TODO can "null" be a legitimate value here?
+                if (data != null) { // TODO can "null" be a legitimate value here?
                     this.setValue(data)
-                    const input = this.getInputLink(this.inputIndex)
-                    input.data = null;
                 }
             }
         }
@@ -231,7 +233,8 @@ export class ComfySliderNode extends ComfyWidgetNode<number> {
 
     static slotLayout: SlotLayout = {
         inputs: [
-            { name: "value", type: "number" }
+            { name: "value", type: "number" },
+            { name: "store", type: BuiltInSlotType.ACTION }
         ],
         outputs: [
             { name: "value", type: "number" },
@@ -250,6 +253,11 @@ export class ComfySliderNode extends ComfyWidgetNode<number> {
         super(name, 0)
     }
 
+    override onAction(action: any, param: any) {
+        if (action === "store" && typeof param === "number")
+            this.setValue(param)
+    }
+
     override setValue(value: any) {
         if (typeof value !== "number")
             return;
@@ -283,7 +291,8 @@ export class ComfyComboNode extends ComfyWidgetNode<string> {
 
     static slotLayout: SlotLayout = {
         inputs: [
-            { name: "value", type: "string" }
+            { name: "value", type: "string" },
+            { name: "store", type: BuiltInSlotType.ACTION }
         ],
         outputs: [
             { name: "value", type: "string" },
@@ -323,6 +332,11 @@ export class ComfyComboNode extends ComfyWidgetNode<string> {
         return true;
     }
 
+    override onAction(action: any, param: any) {
+        if (action === "store" && typeof param === "string")
+            this.setValue(param)
+    }
+
     override setValue(value: any) {
         if (typeof value !== "string" || this.properties.values.indexOf(value) === -1)
             return;
@@ -358,7 +372,8 @@ export class ComfyTextNode extends ComfyWidgetNode<string> {
 
     static slotLayout: SlotLayout = {
         inputs: [
-            { name: "value", type: "string" }
+            { name: "value", type: "string" },
+            { name: "store", type: BuiltInSlotType.ACTION }
         ],
         outputs: [
             { name: "value", type: "string" },
@@ -372,6 +387,11 @@ export class ComfyTextNode extends ComfyWidgetNode<string> {
         super(name, "")
     }
 
+    override onAction(action: any, param: any) {
+        if (action === "store")
+            this.setValue(param)
+    }
+
     override setValue(value: any) {
         super.setValue(`${value}`)
     }
@@ -428,15 +448,24 @@ export class ComfyGalleryNode extends ComfyWidgetNode<GradioFileData[]> {
     override outputIndex = null;
     override changedIndex = null;
 
+    modeWidget: IComboWidget;
+
     constructor(name?: string) {
         super(name, [])
+        this.modeWidget = this.addWidget("combo", "Mode", this.properties.updateMode, null, { property: "updateMode", values: ["replace", "append"] })
+    }
+
+    override onPropertyChanged(property: any, value: any) {
+        if (property === "updateMode") {
+            this.modeWidget.value = value;
+        }
     }
 
     override onExecute() {
         this.setOutputData(0, this.properties.index)
     }
 
-    override onAction(action: any) {
+    override onAction(action: any, param: any, options: { action_call?: string }) {
         if (action === "clear") {
             this.setValue([])
         }
@@ -539,3 +568,40 @@ LiteGraph.registerNodeType({
     desc: "Button that triggers an event when clicked",
     type: "ui/button"
 })
+
+export interface ComfyCheckboxProperties extends ComfyWidgetProperties {
+}
+
+export class ComfyCheckboxNode extends ComfyWidgetNode<boolean> {
+    override properties: ComfyCheckboxProperties = {
+        defaultValue: false,
+    }
+
+    static slotLayout: SlotLayout = {
+        outputs: [
+            { name: "value", type: "boolean" },
+            { name: "changed", type: BuiltInSlotType.EVENT },
+        ]
+    }
+
+    override svelteComponentType = CheckboxWidget;
+
+    override setValue(value: any) {
+        value = Boolean(value)
+        const changed = value != get(this.value);
+        super.setValue(Boolean(value))
+        if (changed)
+            this.triggerSlot(1)
+    }
+
+    constructor(name?: string) {
+        super(name, false)
+    }
+}
+
+LiteGraph.registerNodeType({
+    class: ComfyCheckboxNode,
+    title: "UI.Checkbox",
+    desc: "Checkbox that stores a boolean value",
+    type: "ui/checkbox"
+})
diff --git a/src/lib/widgets/CheckboxWidget.svelte b/src/lib/widgets/CheckboxWidget.svelte
new file mode 100644
index 0000000..7acb016
--- /dev/null
+++ b/src/lib/widgets/CheckboxWidget.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+ import type { ComfyCheckboxNode } from "$lib/nodes/ComfyWidgetNodes";
+ import { type WidgetLayout } from "$lib/stores/layoutState";
+	import { Block } from "@gradio/atoms";
+ import { Checkbox } from "@gradio/form";
+ import { get, type Writable, writable } from "svelte/store";
+
+ export let widget: WidgetLayout | null = null;
+ let node: ComfyCheckboxNode | null = null;
+ let nodeValue: Writable<boolean> | null = null;
+ let attrsChanged: Writable<boolean> | null = null;
+
+ $: widget && setNodeValue(widget);
+
+ function setNodeValue(widget: WidgetLayout) {
+     if (widget) {
+         node = widget.node as ComfyCheckboxNode
+         nodeValue = node.value;
+         attrsChanged = widget.attrsChanged;
+     }
+ };
+</script>
+
+<div class="wrapper gradio-checkbox">
+    <div class="inner">
+        {#key $attrsChanged}
+            {#if node !== null}
+                <Block>
+                    <Checkbox disabled={widget.attrs.disabled} label={widget.attrs.title} bind:value={$nodeValue} />
+                </Block>
+            {/if}
+        {/key}
+    </div>
+</div>
+
+<style lang="scss">
+ .wrapper {
+     display: flex;
+     flex-direction: row;
+     align-items: flex-end;
+     height: 100%;
+
+     > .inner {
+         padding: 2px;
+         width: 100%;
+         display: flex;
+         flex-direction: row;
+         height: min-content;
+
+         :global(> label) {
+             height: 100%;
+         }
+     }
+ }
+</style>
diff --git a/src/lib/widgets/ComboWidget.svelte b/src/lib/widgets/ComboWidget.svelte
index 3efb7c4..68cb6c4 100644
--- a/src/lib/widgets/ComboWidget.svelte
+++ b/src/lib/widgets/ComboWidget.svelte
@@ -114,6 +114,11 @@
      }
  }
 
+ :global(.svelte-select) {
+     width: auto;
+     max-width: 30rem;
+ }
+
  :global(.svelte-select-list) {
      z-index: var(--layer-top) !important;
  }
diff --git a/src/lib/widgets/GalleryWidget.svelte b/src/lib/widgets/GalleryWidget.svelte
index e5b2c2c..5c06043 100644
--- a/src/lib/widgets/GalleryWidget.svelte
+++ b/src/lib/widgets/GalleryWidget.svelte
@@ -73,10 +73,13 @@
     {/if}
 </div>
 
-<style>
+<style lang="scss">
  .wrapper {
-     padding: 2px;
      width: 100%;
+
+     :global(> .block) {
+         border-radius: 0px !important;
+     }
  }
 
  .padding {
diff --git a/src/scss/ux.scss b/src/scss/ux.scss
index 472e0da..d15bb9a 100644
--- a/src/scss/ux.scss
+++ b/src/scss/ux.scss
@@ -419,6 +419,10 @@ div.gradio-row>.form{
     box-shadow: none !important;
 }
 
+.gradio-checkbox > .inner > .block {
+    background-color: var(--ae-input-bg-color) !important;
+}
+
 .wrapper.gradio-textbox textarea {
     overflow-y: scroll;
     box-sizing: border-box;

From a0bbdfe7c4a1bdda86c5f5c01f4b760df63d1ec4 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 6 May 2023 19:53:44 -0500
Subject: [PATCH 19/19] Update defaultGraph

---
 src/lib/defaultGraph.ts | 2375 ++++++++++++++++++++++++++++-----------
 1 file changed, 1721 insertions(+), 654 deletions(-)

diff --git a/src/lib/defaultGraph.ts b/src/lib/defaultGraph.ts
index ae54866..aeb17e0 100644
--- a/src/lib/defaultGraph.ts
+++ b/src/lib/defaultGraph.ts
@@ -4,8 +4,8 @@ const defaultGraph: SerializedAppState = {
   createdBy: "ComfyBox",
   version: 1,
   workflow: {
-    last_node_id: 149,
-    last_link_id: 221,
+    last_node_id: 156,
+    last_link_id: 234,
     nodes: [
       {
         id: 33,
@@ -28,6 +28,12 @@ const defaultGraph: SerializedAppState = {
             name: "value",
             type: "string",
             link: null
+          },
+          {
+            name: "store",
+            type: -1,
+            link: null,
+            shape: 1
           }
         ],
         outputs: [
@@ -51,7 +57,9 @@ const defaultGraph: SerializedAppState = {
           multiline: true,
           hidden: false
         },
-        widgets_values: [""],
+        widgets_values: [
+          "a fluffy corgi wearing sunglasses"
+        ],
         color: "#223",
         bgColor: "#335",
         comfyValue: "a fluffy corgi wearing sunglasses",
@@ -78,6 +86,12 @@ const defaultGraph: SerializedAppState = {
             name: "value",
             type: "string",
             link: null
+          },
+          {
+            name: "store",
+            type: -1,
+            link: null,
+            shape: 1
           }
         ],
         outputs: [
@@ -102,7 +116,7 @@ const defaultGraph: SerializedAppState = {
           hidden: false
         },
         widgets_values: [
-          ""
+          "worst quality"
         ],
         color: "#223",
         bgColor: "#335",
@@ -130,6 +144,12 @@ const defaultGraph: SerializedAppState = {
             name: "value",
             type: "number",
             link: null
+          },
+          {
+            name: "store",
+            type: -1,
+            link: null,
+            shape: 1
           }
         ],
         outputs: [
@@ -178,11 +198,11 @@ const defaultGraph: SerializedAppState = {
           hidden: false
         },
         widgets_values: [
-          "1.000"
+          "4.000"
         ],
         color: "#223",
         bgColor: "#335",
-        comfyValue: 1,
+        comfyValue: 4,
         shownOutputProperties: {
           min: {
             type: "number",
@@ -223,6 +243,12 @@ const defaultGraph: SerializedAppState = {
             name: "value",
             type: "string",
             link: null
+          },
+          {
+            name: "store",
+            type: -1,
+            link: null,
+            shape: 1
           }
         ],
         outputs: [
@@ -243,11 +269,11 @@ const defaultGraph: SerializedAppState = {
         title: "UI.Combo",
         properties: {
           defaultValue: "",
-          values: [
-          ],
+          values: [],
           hidden: false
         },
         widgets_values: [
+          ""
         ],
         color: "#223",
         bgColor: "#335",
@@ -275,6 +301,12 @@ const defaultGraph: SerializedAppState = {
             name: "value",
             type: "string",
             link: null
+          },
+          {
+            name: "store",
+            type: -1,
+            link: null,
+            shape: 1
           }
         ],
         outputs: [
@@ -295,8 +327,7 @@ const defaultGraph: SerializedAppState = {
         title: "UI.Combo",
         properties: {
           defaultValue: "",
-          values: [
-          ]
+          values: []
         },
         widgets_values: [
           ""
@@ -307,208 +338,32 @@ const defaultGraph: SerializedAppState = {
         shownOutputProperties: {}
       },
       {
-        id: 81,
-        type: "ui/slider",
+        id: 91,
+        type: "ui/combo",
         pos: [
-          -378.1190268824409,
-          177.68165265758233
+          1388.6643069580841,
+          200.96841416456488
         ],
         size: [
           210,
-          158
+          78
         ],
         flags: {
           collapsed: true
         },
         order: 5,
         mode: 0,
-        inputs: [
-          {
-            name: "value",
-            type: "number",
-            link: null
-          }
-        ],
-        outputs: [
-          {
-            name: "value",
-            type: "number",
-            links: [
-              106
-            ]
-          },
-          {
-            name: "changed",
-            type: -2,
-            links: null,
-            shape: 1
-          },
-          {
-            name: "min",
-            type: "number",
-            links: null
-          },
-          {
-            name: "max",
-            type: "number",
-            links: null
-          },
-          {
-            name: "step",
-            type: "number",
-            links: null
-          },
-          {
-            name: "precision",
-            type: "number",
-            links: null
-          }
-        ],
-        title: "UI.Slider",
-        properties: {
-          defaultValue: 1,
-          min: -10,
-          max: 10,
-          step: 0.01,
-          precision: 0
-        },
-        widgets_values: [
-          "1.000"
-        ],
-        color: "#223",
-        bgColor: "#335",
-        comfyValue: 1,
-        shownOutputProperties: {
-          min: {
-            type: "number",
-            index: 2
-          },
-          max: {
-            type: "number",
-            index: 3
-          },
-          step: {
-            type: "number",
-            index: 4
-          },
-          precision: {
-            type: "number",
-            index: 5
-          }
-        }
-      },
-      {
-        id: 82,
-        type: "ui/slider",
-        pos: [
-          -378.11902688244066,
-          209.66065265758203
-        ],
-        size: [
-          210,
-          158
-        ],
-        flags: {
-          collapsed: true
-        },
-        order: 6,
-        mode: 0,
-        inputs: [
-          {
-            name: "value",
-            type: "number",
-            link: null
-          }
-        ],
-        outputs: [
-          {
-            name: "value",
-            type: "number",
-            links: [
-              107
-            ]
-          },
-          {
-            name: "changed",
-            type: -2,
-            links: null,
-            shape: 1
-          },
-          {
-            name: "min",
-            type: "number",
-            links: null
-          },
-          {
-            name: "max",
-            type: "number",
-            links: null
-          },
-          {
-            name: "step",
-            type: "number",
-            links: null
-          },
-          {
-            name: "precision",
-            type: "number",
-            links: null
-          }
-        ],
-        title: "UI.Slider",
-        properties: {
-          defaultValue: 1,
-          min: -10,
-          max: 10,
-          step: 0.01,
-          precision: 0
-        },
-        widgets_values: [
-          "1.000"
-        ],
-        color: "#223",
-        bgColor: "#335",
-        comfyValue: 1,
-        shownOutputProperties: {
-          min: {
-            type: "number",
-            index: 2
-          },
-          max: {
-            type: "number",
-            index: 3
-          },
-          step: {
-            type: "number",
-            index: 4
-          },
-          precision: {
-            type: "number",
-            index: 5
-          }
-        }
-      },
-      {
-        id: 91,
-        type: "ui/combo",
-        pos: [
-          1170.2263769190229,
-          217.6416866206195
-        ],
-        size: [
-          210,
-          78
-        ],
-        flags: {
-          collapsed: true
-        },
-        order: 7,
-        mode: 0,
         inputs: [
           {
             name: "value",
             type: "string",
             link: null
+          },
+          {
+            name: "store",
+            type: -1,
+            link: null,
+            shape: 1
           }
         ],
         outputs: [
@@ -547,8 +402,8 @@ const defaultGraph: SerializedAppState = {
         id: 94,
         type: "ui/combo",
         pos: [
-          1170.2263769190229,
-          277.64168662061996
+          1388.6643069580841,
+          260.96841416456544
         ],
         size: [
           210,
@@ -557,13 +412,19 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 8,
+        order: 6,
         mode: 0,
         inputs: [
           {
             name: "value",
             type: "string",
             link: null
+          },
+          {
+            name: "store",
+            type: -1,
+            link: null,
+            shape: 1
           }
         ],
         outputs: [
@@ -609,7 +470,7 @@ const defaultGraph: SerializedAppState = {
           66
         ],
         flags: {},
-        order: 65,
+        order: 71,
         mode: 0,
         inputs: [
           {
@@ -684,7 +545,7 @@ const defaultGraph: SerializedAppState = {
           46
         ],
         flags: {},
-        order: 68,
+        order: 74,
         mode: 0,
         inputs: [
           {
@@ -726,8 +587,8 @@ const defaultGraph: SerializedAppState = {
         id: 109,
         type: "ui/button",
         pos: [
-          1205.8968569656208,
-          358.13717152021474
+          1424.334787004682,
+          341.46389906416016
         ],
         size: [
           210,
@@ -736,7 +597,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 9,
+        order: 7,
         mode: 0,
         inputs: [],
         outputs: [
@@ -758,6 +619,7 @@ const defaultGraph: SerializedAppState = {
         title: "UI.Button",
         properties: {
           defaultValue: false,
+          param: "bang",
           message: "bang"
         },
         widgets_values: [
@@ -780,7 +642,7 @@ const defaultGraph: SerializedAppState = {
           206
         ],
         flags: {},
-        order: 63,
+        order: 69,
         mode: 0,
         inputs: [
           {
@@ -938,13 +800,19 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 10,
+        order: 8,
         mode: 0,
         inputs: [
           {
             name: "value",
             type: "string",
             link: null
+          },
+          {
+            name: "store",
+            type: -1,
+            link: null,
+            shape: 1
           }
         ],
         outputs: [
@@ -976,11 +844,11 @@ const defaultGraph: SerializedAppState = {
           hidden: false
         },
         widgets_values: [
-          "karras"
+          "normal"
         ],
         color: "#223",
         bgColor: "#335",
-        comfyValue: "karras",
+        comfyValue: "normal",
         shownOutputProperties: {}
       },
       {
@@ -997,13 +865,19 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 11,
+        order: 9,
         mode: 0,
         inputs: [
           {
             name: "value",
             type: "number",
             link: null
+          },
+          {
+            name: "store",
+            type: -1,
+            link: null,
+            shape: 1
           }
         ],
         outputs: [
@@ -1091,13 +965,19 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 12,
+        order: 10,
         mode: 0,
         inputs: [
           {
             name: "value",
             type: "string",
             link: null
+          },
+          {
+            name: "store",
+            type: -1,
+            link: null,
+            shape: 1
           }
         ],
         outputs: [
@@ -1160,7 +1040,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 13,
+        order: 11,
         mode: 0,
         inputs: [],
         outputs: [
@@ -1183,8 +1063,8 @@ const defaultGraph: SerializedAppState = {
         id: 22,
         type: "ui/slider",
         pos: [
-          1248.547856965623,
-          130.28917152021444
+          1466.9857870046842,
+          113.61589906415983
         ],
         size: [
           210,
@@ -1193,13 +1073,19 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 14,
+        order: 12,
         mode: 0,
         inputs: [
           {
             name: "value",
             type: "number",
             link: null
+          },
+          {
+            name: "store",
+            type: -1,
+            link: null,
+            shape: 1
           }
         ],
         outputs: [
@@ -1248,11 +1134,11 @@ const defaultGraph: SerializedAppState = {
           hidden: true
         },
         widgets_values: [
-          "0.790"
+          "0.500"
         ],
         color: "#223",
         bgColor: "#335",
-        comfyValue: 0.79,
+        comfyValue: 0.5,
         shownOutputProperties: {
           min: {
             type: "number",
@@ -1276,8 +1162,8 @@ const defaultGraph: SerializedAppState = {
         id: 121,
         type: "ui/slider",
         pos: [
-          1240.5478569656227,
-          -11.710828479784823
+          1458.985787004684,
+          -28.384100935839506
         ],
         size: [
           210,
@@ -1286,13 +1172,19 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 15,
+        order: 13,
         mode: 0,
         inputs: [
           {
             name: "value",
             type: "number",
             link: null
+          },
+          {
+            name: "store",
+            type: -1,
+            link: null,
+            shape: 1
           }
         ],
         outputs: [
@@ -1340,11 +1232,11 @@ const defaultGraph: SerializedAppState = {
           precision: 0
         },
         widgets_values: [
-          "22.000"
+          "20.000"
         ],
         color: "#223",
         bgColor: "#335",
-        comfyValue: 22,
+        comfyValue: 20,
         shownOutputProperties: {
           min: {
             type: "number",
@@ -1376,7 +1268,7 @@ const defaultGraph: SerializedAppState = {
           46
         ],
         flags: {},
-        order: 41,
+        order: 47,
         mode: 0,
         inputs: [
           {
@@ -1431,7 +1323,7 @@ const defaultGraph: SerializedAppState = {
           46
         ],
         flags: {},
-        order: 42,
+        order: 48,
         mode: 0,
         inputs: [
           {
@@ -1474,73 +1366,19 @@ const defaultGraph: SerializedAppState = {
           "hr"
         ]
       },
-      {
-        id: 103,
-        type: "ui/gallery",
-        pos: [
-          1833.5478569656261,
-          93.28917152021494
-        ],
-        size: [
-          210,
-          98
-        ],
-        flags: {},
-        order: 45,
-        mode: 0,
-        inputs: [
-          {
-            name: "images",
-            type: "IMAGE",
-            link: 142
-          },
-          {
-            name: "store",
-            type: -1,
-            link: 141,
-            shape: 1
-          },
-          {
-            name: "clear",
-            type: -1,
-            link: 218,
-            shape: 1
-          }
-        ],
-        outputs: [
-          {
-            name: "selected_index",
-            type: "number",
-            links: null
-          }
-        ],
-        title: "UI.Gallery",
-        properties: {
-          defaultValue: [],
-          index: 0,
-          updateMode: "append"
-        },
-        widgets_values: [
-          "Images: 0"
-        ],
-        color: "#223",
-        bgColor: "#335",
-        comfyValue: [],
-        shownOutputProperties: {}
-      },
       {
         id: 99,
         type: "VAEEncode",
         pos: [
-          991.863156965622,
-          88.52017152021514
+          1210.3010870046833,
+          71.84689906416044
         ],
         size: [
           210,
           46
         ],
         flags: {},
-        order: 76,
+        order: 82,
         mode: 0,
         inputs: [
           {
@@ -1576,15 +1414,15 @@ const defaultGraph: SerializedAppState = {
         id: 110,
         type: "actions/execute_subgraph",
         pos: [
-          1339.5478569656225,
-          329.2891715202148
+          1557.9857870046837,
+          312.6158990641602
         ],
         size: [
           226.79999999999998,
           46
         ],
         flags: {},
-        order: 32,
+        order: 33,
         mode: 0,
         inputs: [
           {
@@ -1605,77 +1443,19 @@ const defaultGraph: SerializedAppState = {
           tag: "hr"
         }
       },
-      {
-        id: 104,
-        type: "ui/gallery",
-        pos: [
-          862.248693361997,
-          640.4778575549986
-        ],
-        size: [
-          210,
-          98
-        ],
-        flags: {},
-        order: 46,
-        mode: 0,
-        inputs: [
-          {
-            name: "images",
-            type: "OUTPUT",
-            link: 144
-          },
-          {
-            name: "store",
-            type: -1,
-            link: 145,
-            shape: 1
-          },
-          {
-            name: "clear",
-            type: -1,
-            link: 221,
-            shape: 1
-          }
-        ],
-        outputs: [
-          {
-            name: "selected_index",
-            type: "number",
-            links: [
-              168,
-              184
-            ],
-            slot_index: 0
-          }
-        ],
-        title: "UI.Gallery",
-        properties: {
-          defaultValue: [],
-          index: 0,
-          updateMode: "append"
-        },
-        widgets_values: [
-          "Images: 5"
-        ],
-        color: "#223",
-        bgColor: "#335",
-        comfyValue: [],
-        shownOutputProperties: {}
-      },
       {
         id: 102,
         type: "actions/on_executed",
         pos: [
-          1624.5478569656225,
-          92.28917152021496
+          1842.9857870046837,
+          75.61589906416026
         ],
         size: [
           176.4,
           46
         ],
         flags: {},
-        order: 44,
+        order: 50,
         mode: 0,
         inputs: [
           {
@@ -1709,7 +1489,7 @@ const defaultGraph: SerializedAppState = {
           images: {
             images: [
               {
-                filename: "ComfyUI_01019_.png",
+                filename: "ComfyUI_01228_.png",
                 subfolder: "",
                 type: "output"
               }
@@ -1722,8 +1502,8 @@ const defaultGraph: SerializedAppState = {
         id: 122,
         type: "actions/notify",
         pos: [
-          1827.5478569656257,
-          267.28917152021523
+          2045.9857870046853,
+          250.61589906416074
         ],
         size: [
           151.2,
@@ -1732,7 +1512,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 53,
+        order: 59,
         mode: 0,
         inputs: [
           {
@@ -1768,7 +1548,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 73,
+        order: 79,
         mode: 0,
         inputs: [
           {
@@ -1804,7 +1584,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: false
         },
-        order: 47,
+        order: 53,
         mode: 0,
         inputs: [
           {
@@ -1841,7 +1621,22 @@ const defaultGraph: SerializedAppState = {
           images: {
             images: [
               {
-                filename: "ComfyUI_01014_.png",
+                filename: "ComfyUI_01224_.png",
+                subfolder: "",
+                type: "output"
+              },
+              {
+                filename: "ComfyUI_01225_.png",
+                subfolder: "",
+                type: "output"
+              },
+              {
+                filename: "ComfyUI_01226_.png",
+                subfolder: "",
+                type: "output"
+              },
+              {
+                filename: "ComfyUI_01227_.png",
                 subfolder: "",
                 type: "output"
               }
@@ -1864,14 +1659,14 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 51,
+        order: 57,
         mode: 0,
         inputs: [
           {
             name: "value",
             type: 0,
             link: 184,
-            label: "3.000"
+            label: "0.000"
           }
         ],
         outputs: [],
@@ -1892,7 +1687,7 @@ const defaultGraph: SerializedAppState = {
           106
         ],
         flags: {},
-        order: 38,
+        order: 46,
         mode: 0,
         inputs: [
           {
@@ -1989,7 +1784,7 @@ const defaultGraph: SerializedAppState = {
           66
         ],
         flags: {},
-        order: 31,
+        order: 32,
         mode: 0,
         inputs: [
           {
@@ -1997,8 +1792,7 @@ const defaultGraph: SerializedAppState = {
             type: "string",
             link: 97,
             config: {
-              values: [
-              ],
+              values: [],
               defaultValue: ""
             },
             widgetNodeType: "ui/combo",
@@ -2029,7 +1823,7 @@ const defaultGraph: SerializedAppState = {
             links: [
               101,
               133,
-              136
+              234
             ],
             slot_index: 2
           }
@@ -2057,7 +1851,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 71,
+        order: 77,
         mode: 0,
         inputs: [
           {
@@ -2087,13 +1881,19 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 16,
+        order: 14,
         mode: 0,
         inputs: [
           {
             name: "value",
             type: "string",
             link: null
+          },
+          {
+            name: "store",
+            type: -1,
+            link: null,
+            shape: 1
           }
         ],
         outputs: [
@@ -2146,7 +1946,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 17,
+        order: 15,
         mode: 0,
         inputs: [],
         outputs: [
@@ -2168,8 +1968,8 @@ const defaultGraph: SerializedAppState = {
         id: 123,
         type: "basic/string",
         pos: [
-          1827.5478569656257,
-          238.289171520215
+          2045.9857870046853,
+          221.61589906416032
         ],
         size: [
           210,
@@ -2178,7 +1978,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 18,
+        order: 16,
         mode: 0,
         inputs: [],
         outputs: [
@@ -2200,8 +2000,8 @@ const defaultGraph: SerializedAppState = {
         id: 111,
         type: "basic/string",
         pos: [
-          1242.5478569656227,
-          380.289171520215
+          1460.985787004684,
+          363.61589906416043
         ],
         size: [
           210,
@@ -2210,7 +2010,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 19,
+        order: 17,
         mode: 0,
         inputs: [],
         outputs: [
@@ -2240,7 +2040,7 @@ const defaultGraph: SerializedAppState = {
           46
         ],
         flags: {},
-        order: 74,
+        order: 80,
         mode: 0,
         inputs: [
           {
@@ -2284,15 +2084,15 @@ const defaultGraph: SerializedAppState = {
         id: 119,
         type: "KSampler",
         pos: [
-          1350.9812029656248,
-          -73.2546714797851
+          1569.419133004686,
+          -89.92794393583983
         ],
         size: [
           241.79999999999998,
           206
         ],
         flags: {},
-        order: 52,
+        order: 58,
         mode: 0,
         inputs: [
           {
@@ -2440,85 +2240,6 @@ const defaultGraph: SerializedAppState = {
           "hr"
         ]
       },
-      {
-        id: 116,
-        type: "image/cache",
-        pos: [
-          869,
-          459
-        ],
-        size: [
-          210,
-          142
-        ],
-        flags: {},
-        order: 50,
-        mode: 0,
-        inputs: [
-          {
-            name: "images",
-            type: "OUTPUT",
-            link: 162,
-            slot_index: 0
-          },
-          {
-            name: "index",
-            type: "number",
-            link: 168
-          },
-          {
-            name: "store",
-            type: -1,
-            link: 163,
-            shape: 1,
-            slot_index: 2
-          },
-          {
-            name: "clear",
-            type: -1,
-            link: null,
-            shape: 1
-          }
-        ],
-        outputs: [
-          {
-            name: "filename",
-            type: "string",
-            links: [
-              164
-            ],
-            slot_index: 0
-          },
-          {
-            name: "state",
-            type: "string",
-            links: [
-              165
-            ],
-            slot_index: 1
-          }
-        ],
-        title: "Comfy.ImageCache",
-        properties: {
-          images: {
-            images: [
-              {
-                filename: "ComfyUI_01014_.png",
-                subfolder: "",
-                type: "output"
-              }
-            ]
-          },
-          index: 0,
-          filenames: {
-            0: {
-              filename: "ComfyUI_01014_.png",
-              status: "cached"
-            }
-          },
-          genNumber: 43
-        }
-      },
       {
         id: 108,
         type: "ui/text",
@@ -2533,13 +2254,19 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 48,
+        order: 54,
         mode: 0,
         inputs: [
           {
             name: "value",
             type: "string",
             link: 165
+          },
+          {
+            name: "store",
+            type: -1,
+            link: null,
+            shape: 1
           }
         ],
         outputs: [
@@ -2582,7 +2309,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 20,
+        order: 18,
         mode: 0,
         inputs: [],
         outputs: [
@@ -2615,13 +2342,19 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 21,
+        order: 19,
         mode: 0,
         inputs: [
           {
             name: "value",
             type: "number",
             link: null
+          },
+          {
+            name: "store",
+            type: -1,
+            link: null,
+            shape: 1
           }
         ],
         outputs: [
@@ -2670,11 +2403,11 @@ const defaultGraph: SerializedAppState = {
           hidden: false
         },
         widgets_values: [
-          "27.000"
+          "20.000"
         ],
         color: "#223",
         bgColor: "#335",
-        comfyValue: 27,
+        comfyValue: 20,
         shownOutputProperties: {
           min: {
             type: "number",
@@ -2706,7 +2439,7 @@ const defaultGraph: SerializedAppState = {
           66
         ],
         flags: {},
-        order: 70,
+        order: 76,
         mode: 0,
         inputs: [
           {
@@ -2756,7 +2489,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 22,
+        order: 20,
         mode: 0,
         inputs: [],
         outputs: [
@@ -2798,7 +2531,7 @@ const defaultGraph: SerializedAppState = {
           126
         ],
         flags: {},
-        order: 69,
+        order: 75,
         mode: 0,
         inputs: [
           {
@@ -2854,7 +2587,7 @@ const defaultGraph: SerializedAppState = {
         ],
         title: "Comfy.ValueControl",
         properties: {
-          value: 768031073308178,
+          value: 736802441844388,
           action: "randomize",
           min: 0,
           max: 18446744073709552000,
@@ -2875,7 +2608,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 64,
+        order: 70,
         mode: 0,
         inputs: [
           {
@@ -2883,6 +2616,12 @@ const defaultGraph: SerializedAppState = {
             type: "number",
             link: 67,
             slot_index: 0
+          },
+          {
+            name: "store",
+            type: -1,
+            link: null,
+            shape: 1
           }
         ],
         outputs: [
@@ -2942,11 +2681,11 @@ const defaultGraph: SerializedAppState = {
           hidden: false
         },
         widgets_values: [
-          "768031073308178.000"
+          "736802441844388.000"
         ],
         color: "#223",
         bgColor: "#335",
-        comfyValue: 768031073308178,
+        comfyValue: 736802441844388,
         shownOutputProperties: {
           min: {
             type: "number",
@@ -2980,7 +2719,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 33,
+        order: 34,
         mode: 0,
         inputs: [
           {
@@ -3007,7 +2746,7 @@ const defaultGraph: SerializedAppState = {
         title: "Operation",
         properties: {
           A: 1,
-          B: 1,
+          B: 4,
           OP: "+"
         }
       },
@@ -3025,7 +2764,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 34,
+        order: 35,
         mode: 0,
         inputs: [
           {
@@ -3076,7 +2815,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 23,
+        order: 21,
         mode: 0,
         inputs: [],
         outputs: [
@@ -3098,15 +2837,15 @@ const defaultGraph: SerializedAppState = {
         id: 112,
         type: "LoadImage",
         pos: [
-          990,
-          -26
+          1208.4379300390613,
+          -42.6732724560547
         ],
         size: [
           210,
           46
         ],
         flags: {},
-        order: 49,
+        order: 55,
         mode: 0,
         inputs: [
           {
@@ -3114,7 +2853,434 @@ const defaultGraph: SerializedAppState = {
             type: "string",
             link: 164,
             config: {
-              values: [],
+              values: [
+                "ComfyUI_00527_.png",
+                "ComfyUI_00535_.png",
+                "ComfyUI_00536_.png",
+                "ComfyUI_00537_.png",
+                "ComfyUI_00538_.png",
+                "ComfyUI_00539_.png",
+                "ComfyUI_00540_.png",
+                "ComfyUI_00541_.png",
+                "ComfyUI_00542_.png",
+                "ComfyUI_00543_.png",
+                "ComfyUI_00545_.png",
+                "ComfyUI_00546_.png",
+                "ComfyUI_00547_.png",
+                "ComfyUI_00548_.png",
+                "ComfyUI_00549_.png",
+                "ComfyUI_00550_.png",
+                "ComfyUI_00551_.png",
+                "ComfyUI_00552_.png",
+                "ComfyUI_00553_.png",
+                "ComfyUI_00554_.png",
+                "ComfyUI_00555_.png",
+                "ComfyUI_00556_.png",
+                "ComfyUI_00557_.png",
+                "ComfyUI_00561_.png",
+                "ComfyUI_00577_.png",
+                "ComfyUI_00581_.png",
+                "ComfyUI_00585_.png",
+                "ComfyUI_00586_.png",
+                "ComfyUI_00587_.png",
+                "ComfyUI_00588_.png",
+                "ComfyUI_00589_.png",
+                "ComfyUI_00590_.png",
+                "ComfyUI_00591_.png",
+                "ComfyUI_00592_.png",
+                "ComfyUI_00593_.png",
+                "ComfyUI_00595_.png",
+                "ComfyUI_00596_.png",
+                "ComfyUI_00597_.png",
+                "ComfyUI_00600_.png",
+                "ComfyUI_00605_.png",
+                "ComfyUI_00607_.png",
+                "ComfyUI_00609_.png",
+                "ComfyUI_00613_.png",
+                "ComfyUI_00617_.png",
+                "ComfyUI_00618_.png",
+                "ComfyUI_00619_.png",
+                "ComfyUI_00620_.png",
+                "ComfyUI_00621_.png",
+                "ComfyUI_00622_.png",
+                "ComfyUI_00623_.png",
+                "ComfyUI_00624_.png",
+                "ComfyUI_00625_.png",
+                "ComfyUI_00626_.png",
+                "ComfyUI_00628_.png",
+                "ComfyUI_00629_.png",
+                "ComfyUI_00633_.png",
+                "ComfyUI_00636_.png",
+                "ComfyUI_00637_.png",
+                "ComfyUI_00641_.png",
+                "ComfyUI_00645_.png",
+                "ComfyUI_00649_.png",
+                "ComfyUI_00653_.png",
+                "ComfyUI_00654_.png",
+                "ComfyUI_00655_.png",
+                "ComfyUI_00656_.png",
+                "ComfyUI_00657_.png",
+                "ComfyUI_00658_.png",
+                "ComfyUI_00659_.png",
+                "ComfyUI_00660_.png",
+                "ComfyUI_00661_.png",
+                "ComfyUI_00662_.png",
+                "ComfyUI_00663_.png",
+                "ComfyUI_00664_.png",
+                "ComfyUI_00665_.png",
+                "ComfyUI_00669_.png",
+                "ComfyUI_00670_.png",
+                "ComfyUI_00671_.png",
+                "ComfyUI_00672_.png",
+                "ComfyUI_00673_.png",
+                "ComfyUI_00677_.png",
+                "ComfyUI_00678_.png",
+                "ComfyUI_00679_.png",
+                "ComfyUI_00680_.png",
+                "ComfyUI_00681_.png",
+                "ComfyUI_00682_ (1).png",
+                "ComfyUI_00682_.png",
+                "ComfyUI_00683_ (1).png",
+                "ComfyUI_00683_.png",
+                "ComfyUI_00684_.png",
+                "ComfyUI_00685_.png",
+                "ComfyUI_00686_.png",
+                "ComfyUI_00687_.png",
+                "ComfyUI_00688_.png",
+                "ComfyUI_00689_.png",
+                "ComfyUI_00690_.png",
+                "ComfyUI_00691_.png",
+                "ComfyUI_00692_.png",
+                "ComfyUI_00693_.png",
+                "ComfyUI_00697_.png",
+                "ComfyUI_00698_.png",
+                "ComfyUI_00699_.png",
+                "ComfyUI_00700_.png",
+                "ComfyUI_00701_.png",
+                "ComfyUI_00703_.png",
+                "ComfyUI_00704_.png",
+                "ComfyUI_00705_.png",
+                "ComfyUI_00706_.png",
+                "ComfyUI_00707_.png",
+                "ComfyUI_00708_.png",
+                "ComfyUI_00709_.png",
+                "ComfyUI_00710_.png",
+                "ComfyUI_00711_.png",
+                "ComfyUI_00713_.png",
+                "ComfyUI_00714_.png",
+                "ComfyUI_00715_.png",
+                "ComfyUI_00716_.png",
+                "ComfyUI_00717_.png",
+                "ComfyUI_00718_.png",
+                "ComfyUI_00719_.png",
+                "ComfyUI_00720_.png",
+                "ComfyUI_00721_.png",
+                "ComfyUI_00722_.png",
+                "ComfyUI_00723_.png",
+                "ComfyUI_00724_.png",
+                "ComfyUI_00725_.png",
+                "ComfyUI_00729_.png",
+                "ComfyUI_00730_.png",
+                "ComfyUI_00731_.png",
+                "ComfyUI_00732_.png",
+                "ComfyUI_00733_.png",
+                "ComfyUI_00737_.png",
+                "ComfyUI_00745_.png",
+                "ComfyUI_00749_.png",
+                "ComfyUI_00753_.png",
+                "ComfyUI_00757_.png",
+                "ComfyUI_00761_.png",
+                "ComfyUI_00765_.png",
+                "ComfyUI_00769_.png",
+                "ComfyUI_00777_.png",
+                "ComfyUI_00781_.png",
+                "ComfyUI_00783_.png",
+                "ComfyUI_00784_.png",
+                "ComfyUI_00785_.png",
+                "ComfyUI_00786_.png",
+                "ComfyUI_00787_.png",
+                "ComfyUI_00788_.png",
+                "ComfyUI_00789_.png",
+                "ComfyUI_00792_.png",
+                "ComfyUI_00793_.png",
+                "ComfyUI_00794_.png",
+                "ComfyUI_00795_.png",
+                "ComfyUI_00796_.png",
+                "ComfyUI_00797_.png",
+                "ComfyUI_00798_.png",
+                "ComfyUI_00799_.png",
+                "ComfyUI_00800_.png",
+                "ComfyUI_00801_.png",
+                "ComfyUI_00802_.png",
+                "ComfyUI_00803_.png",
+                "ComfyUI_00804_.png",
+                "ComfyUI_00805_.png",
+                "ComfyUI_00806_.png",
+                "ComfyUI_00807_.png",
+                "ComfyUI_00808_.png",
+                "ComfyUI_00809_.png",
+                "ComfyUI_00810_.png",
+                "ComfyUI_00811_.png",
+                "ComfyUI_00812_.png",
+                "ComfyUI_00813_.png",
+                "ComfyUI_00814_.png",
+                "ComfyUI_00815_.png",
+                "ComfyUI_00816_.png",
+                "ComfyUI_00817_.png",
+                "ComfyUI_00818_.png",
+                "ComfyUI_00819_.png",
+                "ComfyUI_00820_.png",
+                "ComfyUI_00821_.png",
+                "ComfyUI_00822_.png",
+                "ComfyUI_00823_.png",
+                "ComfyUI_00824_.png",
+                "ComfyUI_00825_.png",
+                "ComfyUI_00829_.png",
+                "ComfyUI_00830_.png",
+                "ComfyUI_00831_.png",
+                "ComfyUI_00832_.png",
+                "ComfyUI_00839_.png",
+                "ComfyUI_00842_.png",
+                "ComfyUI_00843_.png",
+                "ComfyUI_00844_.png",
+                "ComfyUI_00846_.png",
+                "ComfyUI_00848_ (1).png",
+                "ComfyUI_00848_.png",
+                "ComfyUI_00849_.png",
+                "ComfyUI_00850_.png",
+                "ComfyUI_00851_.png",
+                "ComfyUI_00854_ (1).png",
+                "ComfyUI_00854_.png",
+                "ComfyUI_00855_.png",
+                "ComfyUI_00856_.png",
+                "ComfyUI_00857_.png",
+                "ComfyUI_00859_ (1).png",
+                "ComfyUI_00859_.png",
+                "ComfyUI_00860_.png",
+                "ComfyUI_00861_.png",
+                "ComfyUI_00862_.png",
+                "ComfyUI_00864_ (1).png",
+                "ComfyUI_00864_.png",
+                "ComfyUI_00865_.png",
+                "ComfyUI_00866_.png",
+                "ComfyUI_00867_.png",
+                "ComfyUI_00869_.png",
+                "ComfyUI_00870_.png",
+                "ComfyUI_00871_.png",
+                "ComfyUI_00872_.png",
+                "ComfyUI_00874_.png",
+                "ComfyUI_00875_.png",
+                "ComfyUI_00876_.png",
+                "ComfyUI_00877_.png",
+                "ComfyUI_00878_.png",
+                "ComfyUI_00879_.png",
+                "ComfyUI_00880_.png",
+                "ComfyUI_00881_.png",
+                "ComfyUI_00883_.png",
+                "ComfyUI_00884_.png",
+                "ComfyUI_00885_.png",
+                "ComfyUI_00889_.png",
+                "ComfyUI_00890_.png",
+                "ComfyUI_00891_.png",
+                "ComfyUI_00892_.png",
+                "ComfyUI_00894_.png",
+                "ComfyUI_00895_.png",
+                "ComfyUI_00896_.png",
+                "ComfyUI_00897_.png",
+                "ComfyUI_00898_.png",
+                "ComfyUI_00899_.png",
+                "ComfyUI_00900_.png",
+                "ComfyUI_00901_.png",
+                "ComfyUI_00904_.png",
+                "ComfyUI_00905_.png",
+                "ComfyUI_00914_.png",
+                "ComfyUI_00915_.png",
+                "ComfyUI_00916_.png",
+                "ComfyUI_00917_.png",
+                "ComfyUI_00920_.png",
+                "ComfyUI_00922_.png",
+                "ComfyUI_00923_.png",
+                "ComfyUI_00926_ (1).png",
+                "ComfyUI_00926_.png",
+                "ComfyUI_00927_.png",
+                "ComfyUI_00928_.png",
+                "ComfyUI_00929_.png",
+                "ComfyUI_00933_.png",
+                "ComfyUI_00934_.png",
+                "ComfyUI_00935_.png",
+                "ComfyUI_00936_.png",
+                "ComfyUI_00943_.png",
+                "ComfyUI_00944_.png",
+                "ComfyUI_00945_.png",
+                "ComfyUI_00946_.png",
+                "ComfyUI_00947_.png",
+                "ComfyUI_00951_.png",
+                "ComfyUI_00955_.png",
+                "ComfyUI_00959_.png",
+                "ComfyUI_00963_.png",
+                "ComfyUI_00967_.png",
+                "ComfyUI_00971_.png",
+                "ComfyUI_00975_.png",
+                "ComfyUI_00976_.png",
+                "ComfyUI_00977_.png",
+                "ComfyUI_00978_ (1).png",
+                "ComfyUI_00978_.png",
+                "ComfyUI_00982_ (1).png",
+                "ComfyUI_00982_.png",
+                "ComfyUI_00986_ (1).png",
+                "ComfyUI_00986_.png",
+                "ComfyUI_00990_ (1).png",
+                "ComfyUI_00990_.png",
+                "ComfyUI_00991_ (1).png",
+                "ComfyUI_00991_.png",
+                "ComfyUI_00995_ (1).png",
+                "ComfyUI_00995_.png",
+                "ComfyUI_00996_.png",
+                "ComfyUI_00997_.png",
+                "ComfyUI_01001_.png",
+                "ComfyUI_01002_.png",
+                "ComfyUI_01003_.png",
+                "ComfyUI_01004_.png",
+                "ComfyUI_01005_.png",
+                "ComfyUI_01006_.png",
+                "ComfyUI_01007_.png",
+                "ComfyUI_01008_.png",
+                "ComfyUI_01009_.png",
+                "ComfyUI_01010_.png",
+                "ComfyUI_01011_.png",
+                "ComfyUI_01012_.png",
+                "ComfyUI_01013_.png",
+                "ComfyUI_01014_.png",
+                "ComfyUI_01028_.png",
+                "ComfyUI_01031_ (1).png",
+                "ComfyUI_01031_.png",
+                "ComfyUI_01032_ (1).png",
+                "ComfyUI_01032_.png",
+                "ComfyUI_01036_.png",
+                "ComfyUI_01037_.png",
+                "ComfyUI_01041_.png",
+                "ComfyUI_01042_.png",
+                "ComfyUI_01043_.png",
+                "ComfyUI_01044_.png",
+                "ComfyUI_01049_.png",
+                "ComfyUI_01050_.png",
+                "ComfyUI_01051_.png",
+                "ComfyUI_01052_.png",
+                "ComfyUI_01053_.png",
+                "ComfyUI_01057_.png",
+                "ComfyUI_01058_.png",
+                "ComfyUI_01059_.png",
+                "ComfyUI_01063_ (1).png",
+                "ComfyUI_01063_.png",
+                "ComfyUI_01064_.png",
+                "ComfyUI_01065_ (1).png",
+                "ComfyUI_01065_.png",
+                "ComfyUI_01069_ (1).png",
+                "ComfyUI_01069_.png",
+                "ComfyUI_01073_.png",
+                "ComfyUI_01074_.png",
+                "ComfyUI_01075_.png",
+                "ComfyUI_01076_.png",
+                "ComfyUI_01077_ (1).png",
+                "ComfyUI_01077_.png",
+                "ComfyUI_01078_.png",
+                "ComfyUI_01079_.png",
+                "ComfyUI_01080_.png",
+                "ComfyUI_01081_.png",
+                "ComfyUI_01085_.png",
+                "ComfyUI_01088_.png",
+                "ComfyUI_01089_.png",
+                "ComfyUI_01091_.png",
+                "ComfyUI_01093_.png",
+                "ComfyUI_01095_.png",
+                "ComfyUI_01096_.png",
+                "ComfyUI_01097_.png",
+                "ComfyUI_01098_.png",
+                "ComfyUI_01099_.png",
+                "ComfyUI_01100_.png",
+                "ComfyUI_01102_.png",
+                "ComfyUI_01103_.png",
+                "ComfyUI_01104_.png",
+                "ComfyUI_01105_.png",
+                "ComfyUI_01107_.png",
+                "ComfyUI_01108_.png",
+                "ComfyUI_01109_.png",
+                "ComfyUI_01110_.png",
+                "ComfyUI_01111_.png",
+                "ComfyUI_01112_.png",
+                "ComfyUI_01113_.png",
+                "ComfyUI_01114_.png",
+                "ComfyUI_01118_.png",
+                "ComfyUI_01122_.png",
+                "ComfyUI_01123_.png",
+                "ComfyUI_01124_.png",
+                "ComfyUI_01125_.png",
+                "ComfyUI_01126_.png",
+                "ComfyUI_01127_.png",
+                "ComfyUI_01128_.png",
+                "ComfyUI_01129_.png",
+                "ComfyUI_01130_.png",
+                "ComfyUI_01131_.png",
+                "ComfyUI_01132_.png",
+                "ComfyUI_01133_.png",
+                "ComfyUI_01134_.png",
+                "ComfyUI_01135_.png",
+                "ComfyUI_01136_.png",
+                "ComfyUI_01137_.png",
+                "ComfyUI_01141_ (1).png",
+                "ComfyUI_01141_.png",
+                "ComfyUI_01145_.png",
+                "ComfyUI_01146_.png",
+                "ComfyUI_01147_.png",
+                "ComfyUI_01148_.png",
+                "ComfyUI_01149_.png",
+                "ComfyUI_01150_.png",
+                "ComfyUI_01151_.png",
+                "ComfyUI_01152_.png",
+                "ComfyUI_01153_.png",
+                "ComfyUI_01157_.png",
+                "ComfyUI_01158_.png",
+                "ComfyUI_01159_.png",
+                "ComfyUI_01160_.png",
+                "ComfyUI_01162_.png",
+                "ComfyUI_01166_.png",
+                "ComfyUI_01168_.png",
+                "ComfyUI_01169_.png",
+                "ComfyUI_01178_.png",
+                "ComfyUI_01179_.png",
+                "ComfyUI_01180_.png",
+                "ComfyUI_01181_ (1).png",
+                "ComfyUI_01181_.png",
+                "ComfyUI_01182_.png",
+                "ComfyUI_01183_ (1).png",
+                "ComfyUI_01183_.png",
+                "ComfyUI_01190_.png",
+                "ComfyUI_01191_.png",
+                "ComfyUI_01196_.png",
+                "ComfyUI_01198_.png",
+                "ComfyUI_01199_.png",
+                "ComfyUI_01203_.png",
+                "ComfyUI_01204_.png",
+                "ComfyUI_01205_.png",
+                "ComfyUI_01206_.png",
+                "ComfyUI_01207_.png",
+                "ComfyUI_01211_.png",
+                "ComfyUI_01212_.png",
+                "ComfyUI_01213_.png",
+                "ComfyUI_01214_.png",
+                "ComfyUI_01215_.png",
+                "ComfyUI_01216_.png",
+                "ComfyUI_01217_.png",
+                "ComfyUI_01218_.png",
+                "__etna_and_flonne_disgaea_and_1_more__4fa15fd4c0d2233cc02b79bf903897ec.jpg",
+                "__fujiwara_no_mokou_and_houraisan_kaguya_touhou_drawn_by_tsuno_no_hito__3dd87f83b2e0bfb976fd2689598f0fb4.png",
+                "__marona_phantom_brave_drawn_by_yilx__496dbc0b6cc95cf8a00427b2db29ed21.jpg",
+                "blob",
+                "blob (1)",
+                "blob (2)",
+                "blob (3)",
+                "example.png"
+              ],
               defaultValue: "ComfyUI_00527_.png"
             },
             defaultWidgetNode: null,
@@ -3159,13 +3325,19 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 24,
+        order: 22,
         mode: 0,
         inputs: [
           {
             name: "value",
             type: "string",
             link: null
+          },
+          {
+            name: "store",
+            type: -1,
+            link: null,
+            shape: 1
           }
         ],
         outputs: [
@@ -3199,63 +3371,19 @@ const defaultGraph: SerializedAppState = {
         comfyValue: "ComfyUI",
         shownOutputProperties: {}
       },
-      {
-        id: 100,
-        type: "VAEDecode",
-        pos: [
-          1616.5478569656225,
-          -69.71082847978477
-        ],
-        size: [
-          210,
-          46
-        ],
-        flags: {},
-        order: 43,
-        mode: 0,
-        inputs: [
-          {
-            name: "samples",
-            type: "LATENT",
-            link: 179
-          },
-          {
-            name: "vae",
-            type: "VAE",
-            link: 136
-          }
-        ],
-        outputs: [
-          {
-            name: "IMAGE",
-            type: "IMAGE",
-            links: [
-              189
-            ],
-            slot_index: 0
-          }
-        ],
-        title: "VAEDecode",
-        properties: {},
-        color: "#432",
-        bgColor: "#653",
-        tags: [
-          "hr"
-        ]
-      },
       {
         id: 124,
         type: "SaveImage",
         pos: [
-          1620,
-          12
+          1838.4379300390613,
+          -4.673272456054686
         ],
         size: [
           186.4,
           46
         ],
         flags: {},
-        order: 54,
+        order: 60,
         mode: 0,
         inputs: [
           {
@@ -3308,7 +3436,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: false
         },
-        order: 72,
+        order: 78,
         mode: 0,
         inputs: [
           {
@@ -3363,7 +3491,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 25,
+        order: 23,
         mode: 0,
         inputs: [],
         outputs: [
@@ -3385,6 +3513,7 @@ const defaultGraph: SerializedAppState = {
         title: "UI.Button",
         properties: {
           defaultValue: false,
+          param: "bang",
           message: "bang",
           hidden: false
         },
@@ -3408,7 +3537,7 @@ const defaultGraph: SerializedAppState = {
           46
         ],
         flags: {},
-        order: 35,
+        order: 36,
         mode: 0,
         inputs: [
           {
@@ -3443,7 +3572,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 26,
+        order: 24,
         mode: 0,
         inputs: [],
         outputs: [
@@ -3475,7 +3604,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 27,
+        order: 25,
         mode: 0,
         inputs: [],
         outputs: [
@@ -3497,6 +3626,7 @@ const defaultGraph: SerializedAppState = {
         title: "UI.Button",
         properties: {
           defaultValue: false,
+          param: "bang",
           message: "bang"
         },
         widgets_values: [
@@ -3521,13 +3651,19 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 66,
+        order: 72,
         mode: 0,
         inputs: [
           {
             name: "value",
             type: "number",
             link: 92
+          },
+          {
+            name: "store",
+            type: -1,
+            link: null,
+            shape: 1
           }
         ],
         outputs: [
@@ -3616,13 +3752,19 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 67,
+        order: 73,
         mode: 0,
         inputs: [
           {
             name: "value",
             type: "number",
             link: 91
+          },
+          {
+            name: "store",
+            type: -1,
+            link: null,
+            shape: 1
           }
         ],
         outputs: [
@@ -3701,8 +3843,8 @@ const defaultGraph: SerializedAppState = {
         id: 136,
         type: "string/toString",
         pos: [
-          988.3900000000015,
-          322.6400000000001
+          1206.8279300390627,
+          305.9667275439455
         ],
         size: [
           140,
@@ -3711,7 +3853,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 59,
+        order: 65,
         mode: 0,
         inputs: [
           {
@@ -3737,8 +3879,8 @@ const defaultGraph: SerializedAppState = {
         id: 134,
         type: "ui/text",
         pos: [
-          1097.4999999999982,
-          186.6000000000001
+          1315.9379300390594,
+          169.92672754394547
         ],
         size: [
           210,
@@ -3747,13 +3889,19 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 57,
+        order: 63,
         mode: 0,
         inputs: [
           {
             name: "value",
             type: "string",
             link: 205
+          },
+          {
+            name: "store",
+            type: -1,
+            link: null,
+            shape: 1
           }
         ],
         outputs: [
@@ -3786,8 +3934,8 @@ const defaultGraph: SerializedAppState = {
         id: 137,
         type: "string/toString",
         pos: [
-          997.5000000000001,
-          188.10000000000002
+          1215.9379300390615,
+          171.4267275439454
         ],
         size: [
           140,
@@ -3796,7 +3944,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 60,
+        order: 66,
         mode: 0,
         inputs: [
           {
@@ -3822,8 +3970,8 @@ const defaultGraph: SerializedAppState = {
         id: 135,
         type: "ui/text",
         pos: [
-          1092,
-          324
+          1310.4379300390613,
+          307.3267275439454
         ],
         size: [
           210,
@@ -3832,13 +3980,19 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 58,
+        order: 64,
         mode: 0,
         inputs: [
           {
             name: "value",
             type: "string",
             link: 203
+          },
+          {
+            name: "store",
+            type: -1,
+            link: null,
+            shape: 1
           }
         ],
         outputs: [
@@ -3871,8 +4025,8 @@ const defaultGraph: SerializedAppState = {
         id: 138,
         type: "math/floor",
         pos: [
-          1096.8999999999996,
-          236.29999999999998
+          1315.337930039061,
+          219.6267275439453
         ],
         size: [
           140,
@@ -3881,7 +4035,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 61,
+        order: 67,
         mode: 0,
         inputs: [
           {
@@ -3908,15 +4062,15 @@ const defaultGraph: SerializedAppState = {
         id: 90,
         type: "LatentUpscale",
         pos: [
-          1300.128032965624,
-          173.51348852021468
+          1518.5659630046853,
+          156.84021606416005
         ],
         size: [
           267,
           106
         ],
         flags: {},
-        order: 75,
+        order: 81,
         mode: 0,
         inputs: [
           {
@@ -4008,8 +4162,8 @@ const defaultGraph: SerializedAppState = {
         id: 133,
         type: "math/operation",
         pos: [
-          1007,
-          220.9
+          1225.4379300390613,
+          204.22672754394537
         ],
         size: [
           140,
@@ -4018,7 +4172,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 56,
+        order: 62,
         mode: 0,
         inputs: [
           {
@@ -4053,8 +4207,8 @@ const defaultGraph: SerializedAppState = {
         id: 129,
         type: "math/operation",
         pos: [
-          1021,
-          291
+          1239.4379300390613,
+          274.3267275439454
         ],
         size: [
           140,
@@ -4063,7 +4217,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 55,
+        order: 61,
         mode: 0,
         inputs: [
           {
@@ -4098,8 +4252,8 @@ const defaultGraph: SerializedAppState = {
         id: 139,
         type: "math/floor",
         pos: [
-          1097,
-          260
+          1315.4379300390613,
+          243.3267275439455
         ],
         size: [
           140,
@@ -4108,7 +4262,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 62,
+        order: 68,
         mode: 0,
         inputs: [
           {
@@ -4135,8 +4289,8 @@ const defaultGraph: SerializedAppState = {
         id: 93,
         type: "ui/slider",
         pos: [
-          976,
-          255
+          1194.4379300390613,
+          238.32672754394542
         ],
         size: [
           210,
@@ -4145,13 +4299,19 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 28,
+        order: 26,
         mode: 0,
         inputs: [
           {
             name: "value",
             type: "number",
             link: null
+          },
+          {
+            name: "store",
+            type: -1,
+            link: null,
+            shape: 1
           }
         ],
         outputs: [
@@ -4228,8 +4388,8 @@ const defaultGraph: SerializedAppState = {
         id: 140,
         type: "actions/queue_events",
         pos: [
-          1593,
-          244
+          1811.4379300390613,
+          227.32672754394528
         ],
         size: [
           142.79999999999998,
@@ -4238,7 +4398,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 29,
+        order: 27,
         mode: 0,
         inputs: [],
         outputs: [
@@ -4271,8 +4431,8 @@ const defaultGraph: SerializedAppState = {
         id: 141,
         type: "events/filter",
         pos: [
-          1604,
-          284
+          1822.4379300390613,
+          267.3267275439454
         ],
         size: [
           210,
@@ -4281,7 +4441,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 36,
+        order: 37,
         mode: 0,
         inputs: [
           {
@@ -4325,8 +4485,8 @@ const defaultGraph: SerializedAppState = {
         id: 145,
         type: "events/filter",
         pos: [
-          1598,
-          320
+          1816.4379300390613,
+          303.3267275439454
         ],
         size: [
           210,
@@ -4335,7 +4495,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 39,
+        order: 40,
         mode: 0,
         inputs: [
           {
@@ -4356,7 +4516,7 @@ const defaultGraph: SerializedAppState = {
             name: "accept",
             type: -2,
             links: [
-              218
+              230
             ],
             shape: 1,
             slot_index: 0
@@ -4376,55 +4536,12 @@ const defaultGraph: SerializedAppState = {
           operation: "=="
         }
       },
-      {
-        id: 147,
-        type: "actions/queue_events",
-        pos: [
-          661,
-          728
-        ],
-        size: [
-          142.79999999999998,
-          66
-        ],
-        flags: {
-          collapsed: true
-        },
-        order: 30,
-        mode: 0,
-        inputs: [],
-        outputs: [
-          {
-            name: "beforeQueued",
-            type: -2,
-            links: [
-              219
-            ],
-            shape: 1
-          },
-          {
-            name: "afterQueued",
-            type: -2,
-            links: null,
-            shape: 1
-          },
-          {
-            name: "prompt",
-            type: "*",
-            links: null
-          }
-        ],
-        title: "Comfy.QueueEvents",
-        properties: {
-          prompt: null
-        }
-      },
       {
         id: 148,
         type: "events/filter",
         pos: [
-          676,
-          761
+          607.799999999999,
+          765.4000000000001
         ],
         size: [
           210,
@@ -4433,7 +4550,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 37,
+        order: 38,
         mode: 0,
         inputs: [
           {
@@ -4477,8 +4594,8 @@ const defaultGraph: SerializedAppState = {
         id: 149,
         type: "events/filter",
         pos: [
-          673,
-          794
+          604.799999999999,
+          798.4000000000001
         ],
         size: [
           210,
@@ -4487,7 +4604,7 @@ const defaultGraph: SerializedAppState = {
         flags: {
           collapsed: true
         },
-        order: 40,
+        order: 41,
         mode: 0,
         inputs: [
           {
@@ -4508,7 +4625,7 @@ const defaultGraph: SerializedAppState = {
             name: "accept",
             type: -2,
             links: [
-              221
+              227
             ],
             shape: 1,
             slot_index: 0
@@ -4527,6 +4644,780 @@ const defaultGraph: SerializedAppState = {
           mode: "property",
           operation: "=="
         }
+      },
+      {
+        id: 152,
+        type: "basic/integer",
+        pos: [
+          -508.8369999999996,
+          49.28399999999989
+        ],
+        size: [
+          210,
+          38
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 28,
+        mode: 0,
+        inputs: [],
+        outputs: [
+          {
+            name: "value",
+            type: "number",
+            links: [
+              223
+            ],
+            label: "0",
+            slot_index: 0
+          }
+        ],
+        title: "Const Integer",
+        properties: {
+          value: 0
+        }
+      },
+      {
+        id: 81,
+        type: "ui/slider",
+        pos: [
+          -378,
+          178
+        ],
+        size: [
+          210,
+          158
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 42,
+        mode: 0,
+        inputs: [
+          {
+            name: "value",
+            type: "number",
+            link: null
+          },
+          {
+            name: "store",
+            type: -1,
+            link: 224,
+            shape: 1
+          }
+        ],
+        outputs: [
+          {
+            name: "value",
+            type: "number",
+            links: [
+              106
+            ]
+          },
+          {
+            name: "changed",
+            type: -2,
+            links: null,
+            shape: 1
+          },
+          {
+            name: "min",
+            type: "number",
+            links: null
+          },
+          {
+            name: "max",
+            type: "number",
+            links: null
+          },
+          {
+            name: "step",
+            type: "number",
+            links: null
+          },
+          {
+            name: "precision",
+            type: "number",
+            links: null
+          }
+        ],
+        title: "UI.Slider",
+        properties: {
+          defaultValue: 1,
+          min: -10,
+          max: 10,
+          step: 0.01,
+          precision: 0
+        },
+        widgets_values: [
+          "0.000"
+        ],
+        color: "#223",
+        bgColor: "#335",
+        comfyValue: 0,
+        shownOutputProperties: {
+          min: {
+            type: "number",
+            index: 2
+          },
+          max: {
+            type: "number",
+            index: 3
+          },
+          step: {
+            type: "number",
+            index: 4
+          },
+          precision: {
+            type: "number",
+            index: 5
+          }
+        }
+      },
+      {
+        id: 82,
+        type: "ui/slider",
+        pos: [
+          -378,
+          210
+        ],
+        size: [
+          210,
+          158
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 43,
+        mode: 0,
+        inputs: [
+          {
+            name: "value",
+            type: "number",
+            link: null
+          },
+          {
+            name: "store",
+            type: -1,
+            link: 225,
+            shape: 1
+          }
+        ],
+        outputs: [
+          {
+            name: "value",
+            type: "number",
+            links: [
+              107
+            ]
+          },
+          {
+            name: "changed",
+            type: -2,
+            links: null,
+            shape: 1
+          },
+          {
+            name: "min",
+            type: "number",
+            links: null
+          },
+          {
+            name: "max",
+            type: "number",
+            links: null
+          },
+          {
+            name: "step",
+            type: "number",
+            links: null
+          },
+          {
+            name: "precision",
+            type: "number",
+            links: null
+          }
+        ],
+        title: "UI.Slider",
+        properties: {
+          defaultValue: 1,
+          min: -10,
+          max: 10,
+          step: 0.01,
+          precision: 0
+        },
+        widgets_values: [
+          "0.000"
+        ],
+        color: "#223",
+        bgColor: "#335",
+        comfyValue: 0,
+        shownOutputProperties: {
+          min: {
+            type: "number",
+            index: 2
+          },
+          max: {
+            type: "number",
+            index: 3
+          },
+          step: {
+            type: "number",
+            index: 4
+          },
+          precision: {
+            type: "number",
+            index: 5
+          }
+        }
+      },
+      {
+        id: 147,
+        type: "actions/queue_events",
+        pos: [
+          593,
+          732
+        ],
+        size: [
+          142.79999999999998,
+          66
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 29,
+        mode: 0,
+        inputs: [],
+        outputs: [
+          {
+            name: "beforeQueued",
+            type: -2,
+            links: [
+              219
+            ],
+            shape: 1
+          },
+          {
+            name: "afterQueued",
+            type: -2,
+            links: null,
+            shape: 1
+          },
+          {
+            name: "prompt",
+            type: "*",
+            links: null
+          }
+        ],
+        title: "Comfy.QueueEvents",
+        properties: {
+          prompt: null
+        }
+      },
+      {
+        id: 104,
+        type: "ui/gallery",
+        pos: [
+          862.248693361997,
+          640.4778575549986
+        ],
+        size: [
+          210,
+          122
+        ],
+        flags: {},
+        order: 52,
+        mode: 0,
+        inputs: [
+          {
+            name: "images",
+            type: "OUTPUT",
+            link: 144
+          },
+          {
+            name: "store",
+            type: -1,
+            link: 145,
+            shape: 1
+          },
+          {
+            name: "clear",
+            type: -1,
+            link: 229,
+            shape: 1
+          }
+        ],
+        outputs: [
+          {
+            name: "selected_index",
+            type: "number",
+            links: [
+              168,
+              184
+            ],
+            slot_index: 0
+          }
+        ],
+        title: "UI.Gallery",
+        properties: {
+          defaultValue: [],
+          index: 3,
+          updateMode: "append"
+        },
+        widgets_values: [
+          "Images: 4",
+          "append"
+        ],
+        color: "#223",
+        bgColor: "#335",
+        comfyValue: [],
+        shownOutputProperties: {}
+      },
+      {
+        id: 103,
+        type: "ui/gallery",
+        pos: [
+          2051.985787004686,
+          76.61589906416023
+        ],
+        size: [
+          210,
+          122
+        ],
+        flags: {},
+        order: 51,
+        mode: 0,
+        inputs: [
+          {
+            name: "images",
+            type: "IMAGE",
+            link: 142
+          },
+          {
+            name: "store",
+            type: -1,
+            link: 141,
+            shape: 1
+          },
+          {
+            name: "clear",
+            type: -1,
+            link: 232,
+            shape: 1
+          }
+        ],
+        outputs: [
+          {
+            name: "selected_index",
+            type: "number",
+            links: null
+          }
+        ],
+        title: "UI.Gallery",
+        properties: {
+          defaultValue: [],
+          index: 0,
+          updateMode: "append"
+        },
+        widgets_values: [
+          "Images: 1",
+          "append"
+        ],
+        color: "#223",
+        bgColor: "#335",
+        comfyValue: [],
+        shownOutputProperties: {}
+      },
+      {
+        id: 153,
+        type: "ui/checkbox",
+        pos: [
+          1457,
+          641
+        ],
+        size: [
+          210,
+          78
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 30,
+        mode: 0,
+        inputs: [],
+        outputs: [
+          {
+            name: "value",
+            type: "boolean",
+            links: [
+              228,
+              231
+            ],
+            slot_index: 0
+          },
+          {
+            name: "changed",
+            type: -2,
+            links: [],
+            shape: 1,
+            slot_index: 1
+          }
+        ],
+        title: "UI.Checkbox",
+        properties: {
+          defaultValue: false
+        },
+        widgets_values: [
+          "false"
+        ],
+        color: "#223",
+        bgColor: "#335",
+        comfyValue: false,
+        shownOutputProperties: {}
+      },
+      {
+        id: 155,
+        type: "events/branch",
+        pos: [
+          735,
+          798
+        ],
+        size: [
+          140,
+          46
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 45,
+        mode: 0,
+        inputs: [
+          {
+            name: "in",
+            type: -1,
+            link: 227,
+            shape: 1
+          },
+          {
+            name: "cond",
+            type: "boolean",
+            link: 228
+          }
+        ],
+        outputs: [
+          {
+            name: "true",
+            type: -2,
+            links: null,
+            shape: 1,
+            slot_index: 0
+          },
+          {
+            name: "false",
+            type: -2,
+            links: [
+              229,
+              233
+            ],
+            shape: 1,
+            slot_index: 1
+          }
+        ],
+        title: "Branch",
+        properties: {}
+      },
+      {
+        id: 116,
+        type: "image/cache",
+        pos: [
+          869,
+          459
+        ],
+        size: [
+          210,
+          166
+        ],
+        flags: {},
+        order: 56,
+        mode: 0,
+        inputs: [
+          {
+            name: "images",
+            type: "OUTPUT",
+            link: 162,
+            slot_index: 0
+          },
+          {
+            name: "index",
+            type: "number",
+            link: 168
+          },
+          {
+            name: "store",
+            type: -1,
+            link: 163,
+            shape: 1,
+            slot_index: 2
+          },
+          {
+            name: "clear",
+            type: -1,
+            link: 233,
+            shape: 1
+          }
+        ],
+        outputs: [
+          {
+            name: "filename",
+            type: "string",
+            links: [
+              164
+            ],
+            slot_index: 0
+          },
+          {
+            name: "state",
+            type: "string",
+            links: [
+              165
+            ],
+            slot_index: 1
+          }
+        ],
+        title: "Comfy.ImageCache",
+        properties: {
+          images: {
+            images: [
+              {
+                filename: "ComfyUI_01224_.png",
+                subfolder: "",
+                type: "output"
+              },
+              {
+                filename: "ComfyUI_01225_.png",
+                subfolder: "",
+                type: "output"
+              },
+              {
+                filename: "ComfyUI_01226_.png",
+                subfolder: "",
+                type: "output"
+              },
+              {
+                filename: "ComfyUI_01227_.png",
+                subfolder: "",
+                type: "output"
+              }
+            ]
+          },
+          index: 3,
+          filenames: {
+            0: {
+              filename: "ComfyUI_01224_.png",
+              status: "cached"
+            },
+            1: {
+              filename: "ComfyUI_01225_.png",
+              status: "cached"
+            },
+            2: {
+              filename: "ComfyUI_01226_.png",
+              status: "cached"
+            },
+            3: {
+              filename: "ComfyUI_01227_.png",
+              status: "cached"
+            }
+          },
+          genNumber: 66,
+          updateMode: "append"
+        }
+      },
+      {
+        id: 100,
+        type: "VAEDecode",
+        pos: [
+          1834.9857870046837,
+          -86.3841009358395
+        ],
+        size: [
+          210,
+          46
+        ],
+        flags: {},
+        order: 49,
+        mode: 0,
+        inputs: [
+          {
+            name: "samples",
+            type: "LATENT",
+            link: 179
+          },
+          {
+            name: "vae",
+            type: "VAE",
+            link: 234
+          }
+        ],
+        outputs: [
+          {
+            name: "IMAGE",
+            type: "IMAGE",
+            links: [
+              189
+            ],
+            slot_index: 0
+          }
+        ],
+        title: "VAEDecode",
+        properties: {},
+        color: "#432",
+        bgColor: "#653",
+        tags: [
+          "hr"
+        ]
+      },
+      {
+        id: 156,
+        type: "events/branch",
+        pos: [
+          1955.1662000000001,
+          360.7267458544923
+        ],
+        size: [
+          140,
+          46
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 44,
+        mode: 0,
+        inputs: [
+          {
+            name: "in",
+            type: -1,
+            link: 230,
+            shape: 1
+          },
+          {
+            name: "cond",
+            type: "boolean",
+            link: 231
+          }
+        ],
+        outputs: [
+          {
+            name: "true",
+            type: -2,
+            links: null,
+            shape: 1
+          },
+          {
+            name: "false",
+            type: -2,
+            links: [
+              232
+            ],
+            shape: 1,
+            slot_index: 1
+          }
+        ],
+        title: "Branch",
+        properties: {}
+      },
+      {
+        id: 150,
+        type: "ui/button",
+        pos: [
+          -551.8369999999995,
+          88.28399999999995
+        ],
+        size: [
+          210,
+          78
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 31,
+        mode: 0,
+        inputs: [],
+        outputs: [
+          {
+            name: "clicked",
+            type: -2,
+            links: [
+              222
+            ],
+            shape: 1,
+            slot_index: 0
+          },
+          {
+            name: "isClicked",
+            type: "boolean",
+            links: null
+          }
+        ],
+        title: "UI.Button",
+        properties: {
+          defaultValue: false,
+          param: "bang"
+        },
+        widgets_values: [
+          "false"
+        ],
+        color: "#223",
+        bgColor: "#335",
+        comfyValue: false,
+        shownOutputProperties: {}
+      },
+      {
+        id: 151,
+        type: "actions/copy",
+        pos: [
+          -442,
+          59
+        ],
+        size: [
+          210,
+          78
+        ],
+        flags: {
+          collapsed: true
+        },
+        order: 39,
+        mode: 0,
+        inputs: [
+          {
+            name: "in",
+            type: "*",
+            link: 223
+          },
+          {
+            name: "copy",
+            type: -1,
+            link: 222,
+            shape: 1
+          }
+        ],
+        outputs: [
+          {
+            name: "out",
+            type: -2,
+            links: [
+              224,
+              225
+            ],
+            shape: 1,
+            slot_index: 0
+          }
+        ],
+        title: "Comfy.CopyAction",
+        properties: {
+          value: 0
+        }
       }
     ],
     links: [
@@ -4930,14 +5821,6 @@ const defaultGraph: SerializedAppState = {
         0,
         "LATENT"
       ],
-      [
-        136,
-        74,
-        2,
-        100,
-        1,
-        "VAE"
-      ],
       [
         141,
         102,
@@ -5330,14 +6213,6 @@ const defaultGraph: SerializedAppState = {
         0,
         -1
       ],
-      [
-        218,
-        145,
-        0,
-        103,
-        2,
-        -1
-      ],
       [
         219,
         147,
@@ -5355,12 +6230,100 @@ const defaultGraph: SerializedAppState = {
         -1
       ],
       [
-        221,
+        222,
+        150,
+        0,
+        151,
+        1,
+        -1
+      ],
+      [
+        223,
+        152,
+        0,
+        151,
+        0,
+        "*"
+      ],
+      [
+        224,
+        151,
+        0,
+        81,
+        1,
+        -1
+      ],
+      [
+        225,
+        151,
+        0,
+        82,
+        1,
+        -1
+      ],
+      [
+        227,
         149,
         0,
+        155,
+        0,
+        -1
+      ],
+      [
+        228,
+        153,
+        0,
+        155,
+        1,
+        "boolean"
+      ],
+      [
+        229,
+        155,
+        1,
         104,
         2,
         -1
+      ],
+      [
+        230,
+        145,
+        0,
+        156,
+        0,
+        -1
+      ],
+      [
+        231,
+        153,
+        0,
+        156,
+        1,
+        "boolean"
+      ],
+      [
+        232,
+        156,
+        1,
+        103,
+        2,
+        -1
+      ],
+      [
+        233,
+        155,
+        1,
+        116,
+        3,
+        -1
+      ],
+      [
+        234,
+        74,
+        2,
+        100,
+        1,
+        "VAE"
       ]
     ],
     groups: [
@@ -5377,8 +6340,8 @@ const defaultGraph: SerializedAppState = {
       {
         title: "HR Fix",
         bounding: [
-          967,
-          -159,
+          1185,
+          -176,
           1128,
           569
         ],
@@ -5466,9 +6429,7 @@ const defaultGraph: SerializedAppState = {
           }
         },
         children: [
-          "76",
-          "73",
-          "34",
+          "95",
           "58"
         ],
         parent: "0"
@@ -5595,7 +6556,11 @@ const defaultGraph: SerializedAppState = {
             hidden: false,
             flexGrow: 100,
             disabled: false,
-            containerVariant: "block"
+            containerVariant: "block",
+            variant: "accordion",
+            buttonVariant: "primary",
+            buttonSize: "large",
+            openOnStartup: true
           }
         },
         children: [
@@ -5744,7 +6709,10 @@ const defaultGraph: SerializedAppState = {
             flexGrow: 100,
             disabled: false,
             containerVariant: "block",
-            variant: "block"
+            variant: "accordion",
+            buttonVariant: "primary",
+            buttonSize: "large",
+            openOnStartup: true
           }
         },
         children: [
@@ -5765,11 +6733,13 @@ const defaultGraph: SerializedAppState = {
             classes: "",
             hidden: false,
             flexGrow: 100,
-            disabled: false
+            disabled: false,
+            buttonVariant: "primary",
+            buttonSize: "large"
           }
         },
         children: [],
-        parent: "2"
+        parent: "94"
       },
       41: {
         dragItem: {
@@ -5885,7 +6855,9 @@ const defaultGraph: SerializedAppState = {
             classes: "",
             hidden: false,
             flexGrow: 100,
-            disabled: false
+            disabled: false,
+            buttonVariant: "primary",
+            buttonSize: "large"
           }
         },
         children: [],
@@ -6003,7 +6975,10 @@ const defaultGraph: SerializedAppState = {
             disabled: false,
             containerVariant: "block",
             hidden: false,
-            variant: "block"
+            variant: "accordion",
+            buttonVariant: "primary",
+            buttonSize: "large",
+            openOnStartup: true
           }
         },
         children: [
@@ -6026,12 +7001,15 @@ const defaultGraph: SerializedAppState = {
             disabled: false,
             containerVariant: "block",
             hidden: false,
-            variant: "block"
+            variant: "block",
+            buttonVariant: "primary",
+            buttonSize: "large"
           }
         },
         children: [
           "56",
-          "57"
+          "57",
+          "92"
         ],
         parent: "58"
       },
@@ -6107,7 +7085,7 @@ const defaultGraph: SerializedAppState = {
           }
         },
         children: [],
-        parent: "2"
+        parent: "95"
       },
       74: {
         dragItem: {
@@ -6168,7 +7146,7 @@ const defaultGraph: SerializedAppState = {
           }
         },
         children: [],
-        parent: "2"
+        parent: "95"
       },
       77: {
         dragItem: {
@@ -6218,7 +7196,13 @@ const defaultGraph: SerializedAppState = {
             classes: "",
             blockVariant: "block",
             flexGrow: 100,
-            containerVariant: "block"
+            containerVariant: "block",
+            hidden: false,
+            disabled: false,
+            variant: "accordion",
+            buttonVariant: "primary",
+            buttonSize: "large",
+            openOnStartup: true
           }
         },
         children: [
@@ -6392,18 +7376,101 @@ const defaultGraph: SerializedAppState = {
           "90"
         ],
         parent: "79"
+      },
+      92: {
+        dragItem: {
+          type: "widget",
+          id: "92",
+          nodeId: 150,
+          attrs: {
+            title: "🗙",
+            direction: "horizontal",
+            classes: "",
+            flexGrow: 1,
+            hidden: false,
+            disabled: false,
+            buttonVariant: "secondary",
+            buttonSize: "small"
+          }
+        },
+        children: [],
+        parent: "59"
+      },
+      93: {
+        dragItem: {
+          type: "widget",
+          id: "93",
+          nodeId: 153,
+          attrs: {
+            title: "Preserve Outputs",
+            direction: "horizontal",
+            classes: "",
+            flexGrow: 100,
+            hidden: false,
+            disabled: false,
+            buttonVariant: "primary",
+            buttonSize: "large"
+          }
+        },
+        children: [],
+        parent: "94"
+      },
+      94: {
+        dragItem: {
+          type: "container",
+          id: "94",
+          attrs: {
+            title: "",
+            direction: "horizontal",
+            classes: "",
+            containerVariant: "hidden",
+            flexGrow: 100,
+            hidden: false,
+            disabled: false,
+            variant: "block",
+            buttonVariant: "primary",
+            buttonSize: "large"
+          }
+        },
+        children: [
+          "34",
+          "93"
+        ],
+        parent: "95"
+      },
+      95: {
+        dragItem: {
+          type: "container",
+          id: "95",
+          attrs: {
+            title: "Result",
+            direction: "vertical",
+            classes: "",
+            containerVariant: "hidden",
+            flexGrow: 100,
+            hidden: false,
+            disabled: false,
+            variant: "accordion",
+            buttonVariant: "primary",
+            buttonSize: "large",
+            openOnStartup: true
+          }
+        },
+        children: [
+          "76",
+          "73",
+          "94"
+        ],
+        parent: "2"
       }
     },
-    currentId: 92,
+    currentId: 96,
     attrs: {
       defaultSubgraph: "default"
     }
   },
   canvas: {
-    offset: [
-      0,
-      0
-    ],
+    offset: [0, 0],
     scale: 1
   }
 }