Fix

Option to control how notifications are shown

package.json

@@ -14,7 +14,7 @@
     "lint": "prettier --plugin-search-dir . --check . && eslint .",
     "format": "prettier --plugin-search-dir . --write .",
     "svelte-check": "svelte-check",
-    "prebuild": "pnpm run build:css && pnpm --filter=klecks lang:build",
+    "prebuild": "pnpm run build:css",
     "build:css": "pollen -c gradio/js/theme/src/pollen.config.cjs && mv src/pollen.css node_modules/@gradio/theme/src"
   },
   "devDependencies": {
@@ -50,6 +50,7 @@
     "@codemirror/search": "^6.2.2",
     "@codemirror/state": "^6.1.2",
     "@codemirror/view": "^6.4.1",
+    "@dogagenc/svelte-markdown": "^0.2.4",
     "@gradio/accordion": "workspace:*",
     "@gradio/atoms": "workspace:*",
     "@gradio/button": "workspace:*",
@@ -85,7 +86,7 @@
     "framework7": "^8.0.3",
     "framework7-svelte": "^8.0.3",
     "img-comparison-slider": "^8.0.0",
-    "klecks": "workspace:*",
+    "marked": "^5.0.3",
     "pollen-css": "^4.6.2",
     "radix-icons-svelte": "^1.2.1",
     "style-mod": "^4.0.3",

pnpm-workspace.yaml

@@ -2,4 +2,3 @@ packages:
   - 'gradio/js/*'
   - 'gradio/client/js'
   - 'litegraph/packages/*'
-  - 'klecks'

public/config.json

@@ -1,9 +0,0 @@
-{
-	"comfyUIHostname": "localhost",
-	"comfyUIPort": 8188,
-	"alwaysStripUserState": false,
-	"promptForWorkflowName": false,
-	"confirmWhenUnloadingUnsavedChanges": false,
-	"builtInTemplates": ["ControlNet", "LoRA x5", "Model Loader", "Positive_Negative", "Seed Randomizer"],
-	"cacheBuiltInResources": true
-}

src/lib/ComfyGraphCanvas.ts

@@ -11,6 +11,7 @@ import queueState from "./stores/queueState";
 import selectionState from "./stores/selectionState";
 import templateState from "./stores/templateState";
 import { calcNodesBoundingBox } from "./utils";
+import interfaceState from "./stores/interfaceState";
 
 export type SerializedGraphCanvasState = {
     offset: Vector2,
@@ -118,13 +119,7 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
         //     color = "yellow";
         //     thickness = 5;
         // }
-        if (ss.currentHoveredNodes.has(node.id)) {
-            color = "lightblue";
-        }
-        else if (isRunningNode) {
-            color = "#0f0";
-        }
-        else if (nodeErrors) {
+        if (nodeErrors) {
             const hasExecutionError = nodeErrors.find(e => e.errorType === "execution");
             if (hasExecutionError) {
                 blink = true;
@@ -139,6 +134,12 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
             color = "cyan";
             thickness = 2
         }
+        else if (ss.currentHoveredNodes.has(node.id)) {
+            color = "lightblue";
+        }
+        else if (isRunningNode) {
+            color = "#0f0";
+        }
 
         if (blink) {
             if (nodeErrors && nodeErrors.includes(this.blinkError) && this.blinkErrorTime > 0) {
@@ -193,6 +194,8 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
         }
     }
 
+    private static CONNECTION_POS: Vector2 = [0, 0];
+
     private highlightNodeInput(node: LGraphNode, inputSlot: SlotNameOrIndex, ctx: CanvasRenderingContext2D) {
         let inputIndex: number;
         if (typeof inputSlot === "number")
@@ -200,7 +203,7 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
         else
             inputIndex = node.findInputSlotIndexByName(inputSlot)
         if (inputIndex !== -1) {
-            let pos = node.getConnectionPos(true, inputIndex);
+            let pos = node.getConnectionPos(true, inputIndex, ComfyGraphCanvas.CONNECTION_POS);
             ctx.beginPath();
             ctx.arc(pos[0] - node.pos[0], pos[1] - node.pos[1], 12, 0, 2 * Math.PI, false)
             ctx.stroke();
@@ -700,6 +703,8 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
     }
 
     jumpToNode(node: LGraphNode) {
+        interfaceState.update(s => { s.isJumpingToNode = true; return s; })
+
         this.closeAllSubgraphs();
 
         const subgraphs = Array.from(node.iterateParentSubgraphNodes()).reverse();
@@ -709,6 +714,7 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
         }
 
         this.centerOnNode(node);
+        this.selectNode(node);
     }
 
     jumpToNodeAndInput(node: LGraphNode, slotIndex: number) {

src/lib/components/ComfyApp.svelte

@@ -12,6 +12,7 @@
  import notify from "$lib/notify";
  import ComfyBoxWorkflowsView from "./ComfyBoxWorkflowsView.svelte";
  import GlobalModal from "./GlobalModal.svelte";
+	import ComfySettingsView from "./ComfySettingsView.svelte";
 
  export let app: ComfyApp = undefined;
  let hasShownUIHelpToast: boolean = false;
@@ -63,6 +64,7 @@
                 <ComfyBoxWorkflowsView {app} {uiTheme} />
             </SidebarItem>
             <SidebarItem id="settings" name="Settings" icon={Gear}>
+                <ComfySettingsView {app} />
             </SidebarItem>
         </Sidebar>
     </div>

src/lib/components/ComfyApp.ts

@@ -261,18 +261,29 @@ export default class ComfyApp {
         return Promise.resolve();
     }
 
-    /*
-     * TODO
-     */
     async loadConfig() {
         try {
-            const config = await fetch(`/config.json`, { cache: "no-store" });
-            const newConfig = await config.json() as ConfigState;
-            configState.set({ ...get(configState), ...newConfig });
+            console.log("Loading config.json...")
+            const config = localStorage.getItem("config")
+            if (config == null)
+                configState.loadDefault();
+            else
+                configState.load(JSON.parse(config));
         }
         catch (error) {
-            console.error(`Failed to load config`, error)
+            console.error(`Failed to load config, falling back to defaults`, error)
+            configState.loadDefault();
         }
+
+        // configState.onChange("linkDisplayType", (newValue) => {
+        //     if (!this.lCanvas)
+        //         return;
+
+        //     this.lCanvas.links_render_mode = newValue;
+        //     this.lCanvas.setDirty(true, true);
+        // })
+
+        configState.runOnChangedEvents();
     }
 
     async loadBuiltInTemplates(): Promise<SerializedComfyBoxTemplate[]> {
@@ -979,7 +990,7 @@ export default class ComfyApp {
             tag = null;
 
         if (targetWorkflow.attrs.showDefaultNotifications) {
-            notify("Prompt queued.", { type: "info" });
+            notify("Prompt queued.", { type: "info", showOn: "web" });
         }
 
         this.processingQueue = true;

src/lib/components/ComfyBoxWorkflowsView.svelte

@@ -220,6 +220,26 @@
      }
  }
 
+ async function openGraph(cb: () => void) {
+     const newGraphSize = Math.max(50, graphSize);
+     const willOpenPane = newGraphSize != graphSize
+     graphSize = newGraphSize
+
+     if (willOpenPane) {
+         const graphPane = getGraphPane();
+         if (graphPane) {
+             graphPane.addEventListener("transitionend", cb, { once: true })
+             await tick()
+         }
+         else {
+             cb()
+         }
+     }
+     else {
+         cb()
+     }
+ }
+
  async function showError(promptIDWithError: PromptID) {
      hideError();
 
@@ -247,23 +267,7 @@
          app.lCanvas.jumpToFirstError();
      }
 
-     const newGraphSize = Math.max(50, graphSize);
-     const willOpenPane = newGraphSize != graphSize
-     graphSize = newGraphSize
-
-     if (willOpenPane) {
-         const graphPane = getGraphPane();
-         if (graphPane) {
-             graphPane.addEventListener("transitionend", jumpToError, { once: true })
-             await tick()
-         }
-         else {
-             jumpToError()
-         }
-     }
-     else {
-         jumpToError()
-     }
+     await openGraph(jumpToError)
  }
 
  function hideError() {
@@ -273,7 +277,8 @@
  }
 
  setContext(WORKFLOWS_VIEW, {
-     showError
+     showError,
+     openGraph
  });
 </script>
 

src/lib/components/ComfyGraphErrorList.svelte

@@ -68,9 +68,11 @@
     <div class="error-list-header">
         <button class="error-list-close" on:click={closeList}>✕</button>
     </div>
-    {#each Object.entries(errors.errorsByID) as [nodeID, nodeErrors]}
+    <div class="error-list-scroll-container">
+        {#each Object.entries(errors.errorsByID) as [nodeID, nodeErrors], i}
             {@const first = nodeErrors[0]}
             {@const parent = getParentNode(first)}
+            {@const last = i === Object.keys(errors.errorsByID).length - 1}
             <div class="error-group">
                 <div class="error-node-details">
                     <span class="error-node-type">{first.comfyNodeType}</span>
@@ -78,7 +80,7 @@
                         <span class="error-node-parent">({parent.title})</span>
                     {/if}
                 </div>
-            <div class="error-entries">
+                <div class="error-entries" class:last>
                     {#each nodeErrors as error}
                         {@const isExecutionError = error.errorType === "execution"}
                         <div class="error-entry">
@@ -151,6 +153,7 @@
             </div>
         {/each}
     </div>
+</div>
 
 <style lang="scss">
 
@@ -158,7 +161,6 @@
      width: 30%;
      height: 70%;
      margin: 1.0rem;
-     overflow-y: auto;
      position: absolute;
      right: 0;
      bottom: 0;
@@ -186,6 +188,11 @@
      }
  }
 
+ .error-list-scroll-container {
+     height: calc(100% - 24px);
+     overflow-y: auto;
+ }
+
  .error-node-details {
      font-size: 14pt;
      color: #ddd;
@@ -200,7 +207,7 @@
      font-weight: initial;
  }
 
- .error-entries:last-child {
+ .error-entries:not(.last):last-child {
      border-bottom: 1px solid #ccc;
  }
 

src/lib/components/ComfyPaneView.svelte

@@ -16,6 +16,7 @@
  import ComfyQueue from "./ComfyQueue.svelte";
  import ComfyTemplates from "./ComfyTemplates.svelte";
  import { SvelteComponent } from "svelte";
+	import { capitalize } from "$lib/utils";
 
  export let app: ComfyApp
  export let mode: ComfyPaneMode = "none";
@@ -40,7 +41,7 @@
         {:else if mode === "graph"}
             <ComfyGraphView {app} />
         {:else if mode === "properties"}
-            <ComfyProperties workflow={$workflowState.activeWorkflow} />
+            <ComfyProperties {app} workflow={$workflowState.activeWorkflow} />
         {:else if mode === "templates"}
             <ComfyTemplates {app} />
         {:else if mode === "queue"}
@@ -55,6 +56,7 @@
                 <!-- svelte-ignore a11y-click-events-have-key-events -->
                 <button class="mode-button ternary"
                         disabled={mode === theMode}
+                        title={capitalize(theMode)}
                         class:selected={mode === theMode}
                         on:click={() => switchMode(theMode)}>
                     <svelte:component this={icon} width="100%" height="100%" />
@@ -99,7 +101,6 @@
                  color: var(--body-text-color);
              }
              &.selected {
-                 color: var(--body-text-color);
                  background-color: var(--panel-background-fill);
              }
          }

src/lib/components/ComfyProperties.svelte

@@ -4,6 +4,7 @@
  import { LGraphNode } from "@litegraph-ts/core"
  import { type IDragItem, type WidgetLayout, ALL_ATTRIBUTES, type AttributesSpec, type WritableLayoutStateStore } from "$lib/stores/layoutStates"
  import uiState from "$lib/stores/uiState"
+ import interfaceState from "$lib/stores/interfaceState"
  import workflowState from "$lib/stores/workflowState"
  import layoutStates from "$lib/stores/layoutStates"
  import selectionState from "$lib/stores/selectionState"
@@ -12,7 +13,11 @@
  import ComfyComboProperty from "./ComfyComboProperty.svelte";
  import type { ComfyWidgetNode } from "$lib/nodes/widgets";
  import type { ComfyBoxWorkflow } from "$lib/stores/workflowState";
+ import { Diagram3 } from "svelte-bootstrap-icons";
+	import { getContext } from "svelte";
+	import { WORKFLOWS_VIEW } from "./ComfyBoxWorkflowsView.svelte";
 
+ export let app: ComfyApp
  export let workflow: ComfyBoxWorkflow | null;
 
  let layoutState: WritableLayoutStateStore | null = null
@@ -22,7 +27,12 @@
  let target: IDragItem | null = null;
  let node: LGraphNode | null = null;
 
- $: if (layoutState) {
+ $: {
+     if ($interfaceState.isJumpingToNode) {
+         $interfaceState.isJumpingToNode = false;
+     }
+     {
+         if (layoutState) {
              if ($selectionState.currentSelection.length > 0) {
                  node = null;
                  const targetId = $selectionState.currentSelection.slice(-1)[0]
@@ -37,6 +47,13 @@
              else if ($selectionState.currentSelectionNodes.length > 0) {
                  target = null;
                  node = $selectionState.currentSelectionNodes[0]
+
+                 if (node != null && layoutState != null) {
+                     const dragItem = layoutState.findLayoutForNode(node.id);
+                     if (dragItem != null) {
+                         target = dragItem;
+                     }
+                 }
              }
              else {
                  target = null
@@ -47,6 +64,8 @@
              target = null;
              node = null;
          }
+     }
+ }
 
  $: if (target) {
      for (const cat of Object.values(ALL_ATTRIBUTES)) {
@@ -291,18 +310,52 @@
      console.warn("[ComfyProperties] doRefreshPanel")
      $layoutStates.refreshPropsPanel += 1;
  }
+
+ const workflowsViewContext = getContext(WORKFLOWS_VIEW) as any;
+
+ async function jumpToNode() {
+     if (!workflowsViewContext) {
+         // strange svelte bug caused by HMR
+         // https://github.com/sveltejs/svelte/issues/8655
+         console.error("[ComfyProperties] No workflows view context!")
+         return;
+     }
+
+     if (app?.lCanvas == null || workflow == null || node == null)
+         return;
+
+     const activeWorkflow = workflowState.setActiveWorkflow(app.lCanvas, workflow.id);
+
+     if (activeWorkflow == null || !activeWorkflow.graph.getNodeByIdRecursive(node.id))
+         return;
+
+     await workflowsViewContext.openGraph(() => {
+         app.lCanvas.jumpToNode(node);
+     })
+ }
 </script>
 
 <div class="props">
+    <div class="props-scroller">
         <div class="top">
             <div class="target-name">
-            <span>
-                <span class="title">{target?.attrs?.title || node?.title || "Workflow"}<span>
+                <div class="target-title-wrapper">
+                    <span class="title">{target?.attrs?.title || node?.title || "Workflow"}</span>
                     {#if targetType !== ""}
                         <span class="type">({targetType})</span>
                     {/if}
-                </span>
-                </span>
+                </div>
+                {#if node != null}
+                    <div class="target-name-button">
+                        <button class="mode-button ternary"
+                                disabled={node == null}
+                                title="View in Graph"
+                                on:click={jumpToNode}
+                        >
+                            <Diagram3 width="100%" height="100%" />
+                        </button>
+                    </div>
+                {/if}
             </div>
         </div>
         <div class="props-entries">
@@ -478,8 +531,23 @@
                 {/key}
             {/if}
         </div>
+    </div>
 </div>
 
+<style lang="scss">
+ $bottom-bar-height: 2.5rem;
+
+ .props {
+     width: 100%;
+     height: 100%;
+ }
+
+ .props-scroller {
+     width: 100%;
+     height: calc(100% - $bottom-bar-height);
+     overflow-x: hidden;
+     overflow-y: auto;
+ }
 
  .props-entry {
      padding-bottom: 0.5rem;
@@ -491,7 +559,7 @@
 
  .target-name {
      background: var(--input-background-fill);
-     border-color: var(--input-border-color);
+     border-color: var(--input-border-color);
      white-space: nowrap;
 
      .title {
@@ -501,6 +569,48 @@
              padding-left: 0.25rem;
              font-weight: normal;
          }
+     }
+
+     width: 100%;
+     display: flex;
+     flex-direction: row;
+
+     > .target-title-wrapper {
+         padding: 0.8rem 0 0.8rem 1.0rem;
+         display: flex;
+         flex-direction: row;
+         width: 100%;
+         text-align: center;
+
+         > span {
+             display: flex;
+             flex-direction: column;
+             justify-content: center;
+         }
+     }
+
+     > .target-name-button {
+         padding: 0.5rem;
+         .mode-button {
+             color: var(--comfy-accent-soft);
+             height: $bottom-bar-height;
+             width: 2.5rem;
+             height: 2.5rem;
+             margin: 1.0rem;
+             padding: 0.5rem;
+             margin-left: auto;
+
+             @include square-button;
+
+             color: var(--neutral-300);
+
+             &:hover:not(:disabled) {
+                 filter: brightness(120%) !important;
+             }
+             &:active:not(:disabled) {
+                 filter: brightness(50%) !important;
+             }
+         }
      }
  }
 
@@ -518,13 +628,5 @@
          color: var(--neutral-500);
      }
  }
-
- .bottom {
-     /* width: 100%;
-        height: auto;
-        position: absolute;
-        bottom: 0;
-        padding: 0.5em; */
- }
 
  @include disable-inputs;

src/lib/components/ComfySettingsView.svelte

@@ -0,0 +1,260 @@
+<script lang="ts">
+ import { CONFIG_CATEGORIES, CONFIG_DEFS_BY_CATEGORY, CONFIG_DEFS_BY_NAME, type ConfigDefAny, type ConfigDefEnum, type ConfigState } from "$lib/stores/configDefs";
+ import { capitalize } from "$lib/utils";
+ import { Checkbox } from "@gradio/form";
+ import configState from "$lib/stores/configState";
+ import type ComfyApp from "./ComfyApp";
+ import NumberInput from "./NumberInput.svelte";
+ import Textbox from "@gradio/form/src/Textbox.svelte";
+ import { Button } from "@gradio/button";
+	import { SvelteToast } from "@zerodevx/svelte-toast";
+	import notify from "$lib/notify";
+
+ export let app: ComfyApp
+
+ let selectedCategory = CONFIG_CATEGORIES[0];
+ let changes: Partial<Record<keyof ConfigState, any>> = {}
+
+ const toastOptions = {
+     intro: { duration: 200 },
+     theme: {
+         '--toastBarHeight': 0
+     }
+ }
+
+ function selectCategory(category: string) {
+     selectedCategory = category;
+ }
+
+ function setOption(def: ConfigDefAny, value: any) {
+     if (!configState.validateConfigOption(def, value)) {
+         console.warn(`[configState] Invalid value for option ${def.name} (${value}), setting to default (${def.defaultValue})`);
+         value = def.defaultValue
+     }
+     changes[def.name] = value;
+ }
+
+ function setEnumOption(def: ConfigDefEnum<any, any>, e: Event): void {
+     const select = e.target as HTMLSelectElement;
+     const index = select.selectedIndex
+     setOption(def, def.options.values[index].value)
+ }
+
+ function doSave() {
+     for (const [k, v] of Object.entries(changes)) {
+         const def = CONFIG_DEFS_BY_NAME[k]
+         configState.setConfigOption(def, v, true);
+     }
+     changes = {};
+     const json = JSON.stringify($configState);
+     localStorage.setItem("config", json);
+     notify("Config applied!", { type: "success" })
+ }
+
+ function doReset() {
+     if (!confirm("Are you sure you want to reset the config to the defaults?"))
+         return;
+
+     configState.loadDefault(true);
+     notify("Config reset!")
+ }
+</script>
+
+<div class="comfy-settings">
+    <div class="comfy-settings-categories">
+        {#each CONFIG_CATEGORIES as category}
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <div class="comfy-settings-category" class:selected={selectedCategory === category} on:click={() => selectCategory(category)}>
+                {capitalize(category)}
+            </div>
+        {/each}
+    </div>
+    <div class="comfy-settings-main">
+        {#if selectedCategory}
+            {@const categoryDefs = CONFIG_DEFS_BY_CATEGORY[selectedCategory]}
+            {#key $configState}
+                <div class="comfy-settings-entries">
+                    {#each categoryDefs as def}
+                        {@const value = $configState[def.name]}
+                        <div class="comfy-settings-entry">
+                            <div class="name">{def.name}</div>
+                            {#if def.type === "boolean"}
+                                <span class="ctrl checkbox">
+                                    <Checkbox label={def.description} {value} on:change={(e) => setOption(def, e.detail)} />
+                                </span>
+                            {:else if def.type === "number"}
+                                <div class="description">{def.description}</div>
+                                <span class="ctrl number">
+                                    <NumberInput label="" min={def.options.min} max={def.options.max} step={def.options.step} {value} on:release={(e) => setOption(def, e.detail)} />
+                                </span>
+                            {:else if def.type === "string"}
+                                <div class="description">{def.description}</div>
+                                <span class="ctrl textbox">
+                                    <Textbox label="" lines={1} max_lines={1} {value} on:change={(e) => setOption(def, e.detail)} />
+                                </span>
+                            {:else if def.type === "string[]"}
+                                <div class="description">{def.description}</div>
+                                <span class="ctrl string-array">
+                                    {value.join(",")}
+                                </span>
+                            {:else if def.type === "enum"}
+                                <div class="description">{def.description}</div>
+                                <span class="ctrl enum">
+                                    <select id="ui-theme" name="ui-theme" on:change={(e) => setEnumOption(def, e)}>
+                                        {#each def.options.values as option, i}
+                                            {@const selected = def.options.values[i].value === value}
+                                            <option value={option.value} {selected}>{option.label}</option>
+                                        {/each}
+                                    </select>
+                                </span>
+                            {:else}
+                                (Unknown config type {def.type})
+                            {/if}
+                        </div>
+                    {/each}
+                </div>
+            {/key}
+        {:else}
+            Please select a category.
+        {/if}
+        <div class="comfy-settings-bottom-bar">
+            <div>
+                <div class="left">
+                    <Button variant="secondary" on:click={doReset}>
+                        Reset
+                    </Button>
+                </div>
+                <div class="right">
+                    <Button variant="primary" on:click={doSave}>
+                        Save
+                    </Button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <SvelteToast options={toastOptions} />
+</div>
+
+<style lang="scss">
+ $bottom-bar-height: 5rem;
+
+ .comfy-settings {
+     color: var(--body-text-color);
+     display: flex;
+     flex-direction: row;
+     width: 100%;
+     height: 100%;
+ }
+
+ .comfy-settings-categories {
+     width: 20rem;
+     height: 100%;
+     color: var(--neutral-500);
+     background: var(--neutral-800);
+     border-left: 2px solid var(--comfy-splitpanes-background-fill);
+ }
+
+ .comfy-settings-category {
+     padding: 2rem 3rem;
+     font-size: 14pt;
+
+     border-bottom: 1px solid grey;
+     cursor: pointer;
+
+     &.selected {
+         color: var(--body-text-color);
+         background: var(--neutral-700);
+     }
+ }
+
+ .comfy-settings-main {
+     width: 100%;
+     height: calc(100% - $bottom-bar-height);
+ }
+
+ .comfy-settings-entries {
+     padding: 3rem 3rem;
+     height: 100%;
+ }
+
+ .comfy-settings-entry {
+     padding: 1rem 3rem;
+
+     .name {
+         font-weight: bold;
+         font-size: 13pt;
+     }
+
+     .description {
+         font-size: 11pt;
+         color: var(--neutral-400);
+     }
+
+     .ctrl {
+         margin-top: 0.5rem;
+         min-width: 5rem;
+         display: block;
+
+         &:not(.checkbox) {
+             width: 20rem;
+         }
+
+         &.textbox {
+             :global(span) {
+                 display: block !important;
+             }
+         }
+
+         &.checkbox {
+             display: inline-flex !important;
+             padding: 0 0.75rem;
+
+             :global(label) {
+                 color: var(--neutral-400);
+                 font-size: 11pt;
+             }
+         }
+
+         &.enum {
+             select {
+                 -webkit-appearance: none;
+                 -moz-appearance: none;
+                 background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
+                 background-repeat: no-repeat;
+                 background-position-x: 100%;
+                 background-position-y: 8px;
+             }
+         }
+     }
+ }
+
+ .comfy-settings-bottom-bar {
+     background: var(--neutral-900);
+     width: 100%;
+     border-top: 2px solid var(--neutral-800);
+     gap: var(--layout-gap);
+     overflow-x: hidden;
+     height: $bottom-bar-height;
+     justify-content: center;
+     padding: 0 2rem;
+     margin: auto;
+     position: relative;
+     flex-direction: column;
+     display: flex;
+
+     > div {
+         width: 100%;
+         display: flex;
+         gap: var(--layout-gap);
+         margin: auto;
+         flex-wrap: nowrap;
+     }
+
+     .left {
+         left: 0;
+     }
+     .right {
+         margin-left: auto;
+     }
+ }
+</style>

src/lib/components/ImageUpload.svelte

@@ -18,6 +18,7 @@
  export let elem_classes: string[] = []
  export let style: string = ""
  export let label: string = ""
+ export let mask: ComfyImageLocation | null;
  // let propsChanged: Writable<number> | null = null;
  let dragging = false;
  let pending_upload = false;
@@ -172,6 +173,15 @@
                      bind:naturalWidth={imgWidth}
                      bind:naturalHeight={imgHeight}
                 />
+                {#key mask}
+                    {#if mask}
+                        <!-- svelte-ignore a11y-click-events-have-key-events -->
+                        <img src={convertComfyOutputToComfyURL(mask)}
+                            alt={firstImage.filename}
+                            on:click={onImgClicked}
+                        />
+                    {/if}
+                {/key}
             {:else}
                 <Upload
                     file_count={fileCount}
@@ -201,6 +211,9 @@
      }
 
      img {
+         position: absolute;
+         top: 0;
+         left: 0;
          width: 100%;
          height: 100%;
          max-width: 100%;

src/lib/components/LightboxModal.svelte

@@ -41,7 +41,7 @@
  #lightboxModal{
      display: none;
      position: fixed;
-     z-index: 1001;
+     z-index: var(--layer-top);
      left: 0;
      top: 0;
      width: 100%;

src/lib/components/NumberInput.svelte

@@ -4,8 +4,8 @@
 	import { createEventDispatcher } from "svelte";
 
  export let value: number = 0;
- export let min: number = -1024
- export let max: number = 1024
+ export let min: number | null = null
+ export let max: number | null = null
  export let step: number = 1;
  export let label: string = "";
  export let disabled: boolean = false;
@@ -41,9 +41,11 @@
 
 <div class="wrap">
     <div class="head">
+        {#if label}
             <label>
                 <BlockTitle>{label}</BlockTitle>
             </label>
+        {/if}
         <input
             data-testid="number-input"
             type="number"
@@ -83,11 +85,11 @@
      border: var(--input-border-width) solid var(--input-border-color);
      border-radius: var(--input-radius);
      background: var(--input-background-fill);
-     padding: var(--size-2) var(--size-2);
+     padding: var(--input-padding);
      color: var(--body-text-color);
      font-size: var(--input-text-size);
      line-height: var(--line-sm);
-     text-align: center;
+     // text-align: center;
  }
  input:disabled {
      -webkit-text-fill-color: var(--body-text-color);
@@ -95,11 +97,18 @@
      opacity: 1;
  }
 
- input[type="number"]:focus {
+ input[type="number"] {
+     &:focus {
          box-shadow: var(--input-shadow-focus);
          border-color: var(--input-border-color-focus);
      }
 
+     &::-webkit-inner-spin-button,
+     &::-webkit-outer-spin-button {
+         opacity: 100%;
+     }
+ }
+
  input::placeholder {
      color: var(--input-placeholder-color);
  }
@@ -107,4 +116,5 @@
  input[disabled] {
      cursor: not-allowed;
  }
+
 </style>

src/lib/components/OnClickToastItem.svelte

@@ -16,3 +16,9 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div on:click={onClick}>{message}</div>
+
+<style lang="scss">
+ div {
+     cursor: pointer;
+ }
+</style>

src/lib/convertVanillaWorkflow.ts

@@ -68,7 +68,7 @@ function getConnectionPos(node: SerializedLGraphNode, is_input: boolean, slotNum
     return out;
 }
 
-function createSerializedWidgetNode(vanillaWorkflow: ComfyVanillaWorkflow, node: SerializedLGraphNode, slotIndex: number, isInput: boolean, widgetNodeType: string, value: any): [ComfyWidgetNode, SerializedComfyWidgetNode] {
+function createSerializedWidgetNode(vanillaWorkflow: ComfyVanillaWorkflow, widgetNodeType: string, value: any, node?: SerializedLGraphNode, slotIndex?: number, isInput?: boolean): [ComfyWidgetNode, SerializedComfyWidgetNode] {
     const comfyWidgetNode = LiteGraph.createNode<ComfyWidgetNode>(widgetNodeType);
     comfyWidgetNode.flags.collapsed = true;
     const size: Vector2 = [0, 0];
@@ -85,12 +85,15 @@ function createSerializedWidgetNode(vanillaWorkflow: ComfyVanillaWorkflow, node:
     const serWidgetNode = comfyWidgetNode.serialize() as SerializedComfyWidgetNode;
     serWidgetNode.comfyValue = value;
     serWidgetNode.shownOutputProperties = {};
+
+    if (node != null) {
         getConnectionPos(node, isInput, slotIndex, serWidgetNode.pos);
         if (isInput)
             serWidgetNode.pos[0] -= size[0] - 20;
         else
             serWidgetNode.pos[0] += 20;
         serWidgetNode.pos[1] += LiteGraph.NODE_TITLE_HEIGHT / 2;
+    }
 
     if (widgetNodeType === "ui/text" && typeof value === "string" && value.indexOf("\n") != -1) {
         const lineCount = countNewLines(value);
@@ -260,11 +263,12 @@ function convertPrimitiveNode(vanillaWorkflow: ComfyVanillaWorkflow, node: Seria
 
     const [comfyWidgetNode, serWidgetNode] = createSerializedWidgetNode(
         vanillaWorkflow,
+        widgetNodeType,
+        value,
         node,
         0, // first output on the PrimitiveNode
-        false, // this is an output slot index
-        widgetNodeType,
-        value);
+        false // this is an output slot index
+    );
 
     // Set the UI node's min/max/step from the node def
     configureWidgetNodeProperties(serWidgetNode, widgetOpts)
@@ -381,6 +385,20 @@ export default function convertVanillaWorkflow(vanillaWorkflow: ComfyVanillaWork
             removeSerializedNode(vanillaWorkflow, node);
             continue
         }
+        else if (node.type === "Note") {
+            const [comfyWidgetNode, serWidgetNode] = createSerializedWidgetNode(
+                vanillaWorkflow,
+                "ui/markdown",
+                node.widgets_values[0]
+            );
+            serWidgetNode.pos = [node.pos[0], node.pos[1]]
+
+            const group = layoutState.addContainer(left, { title: "" })
+            layoutState.addWidget(group, comfyWidgetNode)
+
+            removeSerializedNode(vanillaWorkflow, node);
+            continue
+        }
 
         const def = ComfyApp.knownBackendNodes[node.type];
         if (def == null) {
@@ -449,11 +467,12 @@ export default function convertVanillaWorkflow(vanillaWorkflow: ComfyVanillaWork
 
                 const [comfyWidgetNode, serWidgetNode] = createSerializedWidgetNode(
                     vanillaWorkflow,
+                    widgetNodeType,
+                    value,
                     node,
                     connInputIndex,
-                    true,
-                    widgetNodeType,
-                    value);
+                    true
+                );
 
                 configureWidgetNodeProperties(serWidgetNode, inputOpts)
 
@@ -492,11 +511,12 @@ export default function convertVanillaWorkflow(vanillaWorkflow: ComfyVanillaWork
             // Let's create a gallery for this output node and hook it up
             const [comfyGalleryNode, serGalleryNode] = createSerializedWidgetNode(
                 vanillaWorkflow,
+                "ui/gallery",
+                [],
                 node,
                 connOutputIndex,
                 false,
-                "ui/gallery",
-                []);
+            );
 
             if (group == null)
                 group = layoutState.addContainer(isOutputNode ? right : left, { title: node.title || node.type })

src/lib/nodes/ComfyBackendNode.ts

@@ -1,5 +1,5 @@
 import LGraphCanvas from "@litegraph-ts/core/src/LGraphCanvas";
-import ComfyGraphNode from "./ComfyGraphNode";
+import ComfyGraphNode, { type ComfyGraphNodeProperties } from "./ComfyGraphNode";
 import ComfyWidgets from "$lib/widgets"
 import type { ComfyWidgetNode } from "$lib/nodes/widgets";
 import { BuiltInSlotShape, BuiltInSlotType, LiteGraph, type SerializedLGraphNode } from "@litegraph-ts/core";
@@ -8,10 +8,19 @@ import type { ComfyInputConfig } from "$lib/IComfyInputSlot";
 import { iterateNodeDefOutputs, type ComfyNodeDef, iterateNodeDefInputs } from "$lib/ComfyNodeDef";
 import type { SerializedPromptOutput } from "$lib/utils";
 
+export interface ComfyBackendNodeProperties extends ComfyGraphNodeProperties {
+    noOutputDisplay: boolean
+}
+
 /*
  * Base class for any node with configuration sent by the backend.
  */
 export class ComfyBackendNode extends ComfyGraphNode {
+    override properties: ComfyBackendNodeProperties = {
+        tags: [],
+        noOutputDisplay: false
+    }
+
     comfyClass: string;
     comfyNodeDef: ComfyNodeDef;
     displayName: string | null;
@@ -37,6 +46,10 @@ export class ComfyBackendNode extends ComfyGraphNode {
         }
     }
 
+    get isOutputNode(): boolean {
+        return this.comfyNodeDef.output_node;
+    }
+
     // comfy class -> input name -> input config
     private static defaultInputConfigs: Record<string, Record<string, ComfyInputConfig>> = {}
 

src/lib/nodes/actions/ComfyNotifyAction.ts

@@ -3,17 +3,20 @@ import notify from "$lib/notify";
 import { convertComfyOutputToGradio, type SerializedPromptOutput } from "$lib/utils";
 import { BuiltInSlotType, LiteGraph, type SlotLayout } from "@litegraph-ts/core";
 import ComfyGraphNode, { type ComfyGraphNodeProperties } from "../ComfyGraphNode";
+import configState from "$lib/stores/configState";
 
 export interface ComfyNotifyActionProperties extends ComfyGraphNodeProperties {
     message: string,
-    type: string
+    type: string,
+    alwaysShow: boolean
 }
 
 export default class ComfyNotifyAction extends ComfyGraphNode {
     override properties: ComfyNotifyActionProperties = {
         tags: [],
         message: "Nya.",
-        type: "info"
+        type: "info",
+        alwaysShow: false
     }
 
     static slotLayout: SlotLayout = {
@@ -24,6 +27,9 @@ export default class ComfyNotifyAction extends ComfyGraphNode {
     }
 
     override onAction(action: any, param: any) {
+        if (!configState.canShowNotificationText() && !this.properties.alwaysShow)
+            return;
+
         const message = this.getInputData(0) || this.properties.message;
         if (!message)
             return;

src/lib/nodes/actions/ComfyPlaySoundAction.ts

@@ -1,6 +1,7 @@
 import { BuiltInSlotType, LiteGraph, type SlotLayout } from "@litegraph-ts/core";
 import ComfyGraphNode, { type ComfyGraphNodeProperties } from "../ComfyGraphNode";
 import { playSound } from "$lib/utils";
+import configState from "$lib/stores/configState";
 
 export interface ComfyPlaySoundActionProperties extends ComfyGraphNodeProperties {
     sound: string,
@@ -20,6 +21,9 @@ export default class ComfyPlaySoundAction extends ComfyGraphNode {
     }
 
     override onAction(action: any, param: any) {
+        if (!configState.canPlayNotificationSound())
+            return;
+
         const sound = this.getInputData(0) || this.properties.sound;
         if (sound) {
             playSound(sound)

src/lib/nodes/widgets/ComfyMarkdownNode.ts

@@ -0,0 +1,57 @@
+import { BuiltInSlotType, LiteGraph, type ITextWidget, type SlotLayout } from "@litegraph-ts/core";
+
+import MarkdownWidget from "$lib/widgets/MarkdownWidget.svelte";
+import ComfyWidgetNode, { type ComfyWidgetProperties } from "./ComfyWidgetNode";
+
+export interface ComfyMarkdownProperties extends ComfyWidgetProperties {
+}
+
+export default class ComfyMarkdownNode extends ComfyWidgetNode<string> {
+    override properties: ComfyMarkdownProperties = {
+        tags: [],
+        defaultValue: false,
+    }
+
+    static slotLayout: SlotLayout = {
+        inputs: [
+            { name: "store", type: BuiltInSlotType.ACTION }
+        ],
+        outputs: [
+            { name: "value", type: "string" },
+            { name: "changed", type: BuiltInSlotType.EVENT },
+        ]
+    }
+
+    override svelteComponentType = MarkdownWidget;
+    override defaultValue = "";
+
+    constructor(name?: string) {
+        super(name, "")
+    }
+
+    override createDisplayWidget(): ITextWidget {
+        const widget = this.addWidget<ITextWidget>(
+            "text",
+            "Value",
+            "",
+            (v: string) => {
+                if (v == null || v === this.getValue()) {
+                    return;
+                }
+                this.setValue(v);
+            },
+            {
+                multiline: true,
+                inputStyle: { fontFamily: "monospace" }
+            }
+        )
+        return widget;
+    }
+}
+
+LiteGraph.registerNodeType({
+    class: ComfyMarkdownNode,
+    title: "UI.Markdown",
+    desc: "Displays Markdown in the UI",
+    type: "ui/markdown"
+})

src/lib/nodes/widgets/ComfyWidgetNode.ts

@@ -106,13 +106,18 @@ export default abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
         this.value = writable(value)
         this.color ||= color.color
         this.bgColor ||= color.bgColor
-        this.displayWidget = this.addWidget<ITextWidget>(
+        this.displayWidget = this.createDisplayWidget();
+        this.unsubscribe = this.value.subscribe(this.onValueUpdated.bind(this))
+    }
+
+    protected createDisplayWidget(): ITextWidget {
+        const widget = this.addWidget<ITextWidget>(
             "text",
             "Value",
             ""
-        );
-        this.displayWidget.disabled = true; // prevent editing
-        this.unsubscribe = this.value.subscribe(this.onValueUpdated.bind(this))
+        )
+        widget.disabled = true; // prevent editing
+        return widget;
     }
 
     addPropertyAsOutput(propertyName: string, type: string) {

src/lib/nodes/widgets/index.ts

@@ -9,3 +9,4 @@ export { default as ComfyRadioNode } from "./ComfyRadioNode"
 export { default as ComfyNumberNode } from "./ComfyNumberNode"
 export { default as ComfyTextNode } from "./ComfyTextNode"
 export { default as ComfyMultiRegionNode } from "./ComfyMultiRegionNode"
+export { default as ComfyMarkdownNode } from "./ComfyMarkdownNode"

src/lib/stores/configDefs.ts

@@ -0,0 +1,236 @@
+import { LinkRenderMode } from "@litegraph-ts/core";
+
+/*
+ * Supported config option types.
+ */
+type ConfigDefType = "boolean" | "number" | "string" | "string[]" | "enum";
+
+// A simple parameter description interface
+export interface ConfigDef<IdType extends string, TypeType extends ConfigDefType, ValueType, OptionsType = any> {
+    // This generic `IdType` is what makes the "array of keys and values to new
+    // interface definition" thing work
+    name: IdType;
+
+    type: TypeType,
+
+    description?: string,
+
+    category: string,
+
+    defaultValue: ValueType,
+
+    options: OptionsType,
+}
+
+export type ConfigDefAny = ConfigDef<string, any, any>
+export type ConfigDefBoolean<IdType extends string> = ConfigDef<IdType, "boolean", boolean>;
+
+export type NumberOptions = {
+    min?: number,
+    max?: number,
+    step: number
+}
+export type ConfigDefNumber<IdType extends string> = ConfigDef<IdType, "number", number, NumberOptions>;
+
+export type ConfigDefString<IdType extends string> = ConfigDef<IdType, "string", string>;
+export type ConfigDefStringArray<IdType extends string> = ConfigDef<IdType, "string[]", string[]>;
+
+export interface EnumValue<T> {
+    label: string,
+    value: T
+}
+export interface EnumOptions<T> {
+    values: EnumValue<T>[]
+}
+export type ConfigDefEnum<IdType extends string, T> = ConfigDef<IdType, "enum", T, EnumOptions<T>>;
+
+export function validateConfigOption(def: ConfigDefAny, v: any): boolean {
+    switch (def.type) {
+        case "boolean":
+            return typeof v === "boolean";
+        case "number":
+            return typeof v === "number";
+        case "string":
+            return typeof v === "string";
+        case "string[]":
+            return Array.isArray(v) && v.every(vs => typeof vs === "string");
+        case "enum":
+            return Boolean(def.options.values.find((o: EnumValue<any>) => o.value === v));
+    }
+    return false;
+}
+
+// Configuration parameters ------------------------------------
+
+const defComfyUIHostname: ConfigDefString<"comfyUIHostname"> = {
+    name: "comfyUIHostname",
+    type: "string",
+    defaultValue: "localhost",
+    category: "backend",
+    description: "Backend domain for ComfyUI",
+    options: {}
+};
+
+const defComfyUIPort: ConfigDefNumber<"comfyUIPort"> = {
+    name: "comfyUIPort",
+    type: "number",
+    defaultValue: 8188,
+    category: "backend",
+    description: "Backend port for ComfyUI",
+    options: {
+        min: 1,
+        max: 65535,
+        step: 1
+    }
+};
+
+export enum NotificationState {
+    MessageAndSound,
+    MessageOnly,
+    SoundOnly,
+    None
+}
+
+const defNotifications: ConfigDefEnum<"notifications", NotificationState> = {
+    name: "notifications",
+    type: "enum",
+    defaultValue: NotificationState.MessageAndSound,
+    category: "ui",
+    description: "Controls how notifications are shown",
+    options: {
+        values: [
+            {
+                value: NotificationState.MessageAndSound,
+                label: "Message & sound"
+            },
+            {
+                value: NotificationState.MessageOnly,
+                label: "Message only"
+            },
+            {
+                value: NotificationState.SoundOnly,
+                label: "Sound only"
+            },
+            {
+                value: NotificationState.None,
+                label: "None"
+            },
+        ]
+    }
+};
+
+const defAlwaysStripUserState: ConfigDefBoolean<"alwaysStripUserState"> = {
+    name: "alwaysStripUserState",
+    type: "boolean",
+    defaultValue: false,
+    category: "behavior",
+    description: "Strip user state even if saving to local storage",
+    options: {}
+};
+
+const defPromptForWorkflowName: ConfigDefBoolean<"promptForWorkflowName"> = {
+    name: "promptForWorkflowName",
+    type: "boolean",
+    defaultValue: false,
+    category: "behavior",
+    description: "When saving, always prompt for a name to save the workflow as",
+    options: {}
+};
+
+const defConfirmWhenUnloadingUnsavedChanges: ConfigDefBoolean<"confirmWhenUnloadingUnsavedChanges"> = {
+    name: "confirmWhenUnloadingUnsavedChanges",
+    type: "boolean",
+    defaultValue: true,
+    category: "behavior",
+    description: "When closing the tab, open the confirmation window if there's unsaved changes",
+    options: {}
+};
+
+const defCacheBuiltInResources: ConfigDefBoolean<"cacheBuiltInResources"> = {
+    name: "cacheBuiltInResources",
+    type: "boolean",
+    defaultValue: true,
+    category: "behavior",
+    description: "Cache loading of built-in resources to save network use",
+    options: {}
+};
+
+const defBuiltInTemplates: ConfigDefStringArray<"builtInTemplates"> = {
+    name: "builtInTemplates",
+    type: "string[]",
+    defaultValue: ["ControlNet", "LoRA x5", "Model Loader", "Positive_Negative", "Seed Randomizer"],
+    category: "templates",
+    description: "Basenames of templates that can be loaded from public/templates. Saves LocalStorage space.",
+    options: {}
+};
+
+// const defLinkDisplayType: ConfigDefEnum<"linkDisplayType", LinkRenderMode> = {
+//     name: "linkDisplayType",
+//     type: "enum",
+//     defaultValue: LinkRenderMode.SPLINE_LINK,
+//     category: "graph",
+//     description: "How to display links in the graph",
+//     options: {
+//         values: [
+//             {
+//                 value: LinkRenderMode.STRAIGHT_LINK,
+//                 label: "Straight"
+//             },
+//             {
+//                 value: LinkRenderMode.LINEAR_LINK,
+//                 label: "Linear"
+//             },
+//             {
+//                 value: LinkRenderMode.SPLINE_LINK,
+//                 label: "Spline"
+//             }
+//         ]
+//     },
+// };
+
+// Configuration exports ------------------------------------
+
+export const CONFIG_DEFS = [
+    defComfyUIHostname,
+    defComfyUIPort,
+    defNotifications,
+    defAlwaysStripUserState,
+    defPromptForWorkflowName,
+    defConfirmWhenUnloadingUnsavedChanges,
+    defCacheBuiltInResources,
+    defBuiltInTemplates,
+    // defLinkDisplayType
+] as const;
+
+export const CONFIG_DEFS_BY_NAME: Record<string, ConfigDefAny>
+    = CONFIG_DEFS.reduce((dict, def) => {
+        if (def.name in dict)
+            throw new Error(`Duplicate named config definition: ${def.name}`)
+        dict[def.name] = def;
+        return dict
+    }, {})
+
+export const CONFIG_DEFS_BY_CATEGORY: Record<string, ConfigDefAny[]>
+    = CONFIG_DEFS.reduce((dict, def) => {
+        dict[def.category] ||= []
+        dict[def.category].push(def)
+        return dict
+    }, {})
+
+export const CONFIG_CATEGORIES: string[]
+    = CONFIG_DEFS.reduce((arr, def) => {
+        if (!arr.includes(def.category))
+            arr.push(def.category)
+        return arr
+    }, [])
+
+type Config<T extends ReadonlyArray<Readonly<ConfigDef<string, ConfigDefType, any>>>> = {
+    [K in T[number]["name"]]: Extract<T[number], { name: K }>["defaultValue"]
+} extends infer O
+    ? { [P in keyof O]: O[P] }
+    : never;
+
+export type ConfigState = Config<typeof CONFIG_DEFS>
+
+const pairs: [string, any][] = CONFIG_DEFS.map(item => { return [item.name, structuredClone(item.defaultValue)] })
+export const defaultConfig: ConfigState = pairs.reduce((dict, v) => { dict[v[0]] = v[1]; return dict; }, {}) as any;

src/lib/stores/configState.ts

@@ -1,54 +1,138 @@
 import { debounce } from '$lib/utils';
+import { toHashMap } from '@litegraph-ts/core';
 import { get, writable } from 'svelte/store';
 import type { Writable } from 'svelte/store';
-
-export type ConfigState = {
-    /** Backend domain for ComfyUI */
-    comfyUIHostname: string,
-
-    /** Backend port for ComfyUI */
-    comfyUIPort: number,
-
-    /** Strip user state even if saving to local storage */
-    alwaysStripUserState: boolean,
-
-    /** When saving, always prompt for a name to save the workflow as */
-    promptForWorkflowName: boolean,
-
-    /** When closing the tab, open the confirmation window if there's unsaved changes */
-    confirmWhenUnloadingUnsavedChanges: boolean,
-
-    /** Basenames of templates that can be loaded from public/templates. Saves LocalStorage space. */
-    builtInTemplates: string[],
-
-    /** Cache loading of built-in resources to save network use */
-    cacheBuiltInResources: boolean
-}
+import { defaultConfig, type ConfigState, type ConfigDefAny, CONFIG_DEFS_BY_NAME, validateConfigOption, NotificationState } from './configDefs';
 
 type ConfigStateOps = {
-    getBackendURL: () => string
+    getBackendURL: () => string,
+    canShowNotificationText: () => boolean,
+    canPlayNotificationSound: () => boolean,
+
+    load: (data: any, runOnChanged?: boolean) => ConfigState
+    loadDefault: (runOnChanged?: boolean) => ConfigState
+    setConfigOption: (def: ConfigDefAny, v: any, runOnChanged: boolean) => boolean
+    validateConfigOption: (def: ConfigDefAny, v: any) => boolean
+    onChange: <K extends keyof ConfigState>(optionName: K, callback: ConfigOnChangeCallback<ConfigState[K]>) => void
+    runOnChangedEvents: () => void,
 }
 
 export type WritableConfigStateStore = Writable<ConfigState> & ConfigStateOps;
-const store: Writable<ConfigState> = writable(
-    {
-        comfyUIHostname: "localhost",
-        comfyUIPort: 8188,
-        alwaysStripUserState: false,
-        promptForWorkflowName: false,
-        confirmWhenUnloadingUnsavedChanges: true,
-        builtInTemplates: [],
-        cacheBuiltInResources: true,
-    })
+const store: Writable<ConfigState> = writable({ ...defaultConfig })
+const callbacks: Record<string, ConfigOnChangeCallback<any>[]> = {}
+let changedOptions: Partial<Record<keyof ConfigState, [any, any]>> = {}
 
 function getBackendURL(): string {
     const state = get(store);
     return `${window.location.protocol}//${state.comfyUIHostname}:${state.comfyUIPort}`
 }
 
+function canShowNotificationText(): boolean {
+    const state = get(store).notifications;
+    return state === NotificationState.MessageAndSound || state === NotificationState.MessageOnly;
+}
+
+function canPlayNotificationSound(): boolean {
+    const state = get(store).notifications;
+    return state === NotificationState.MessageAndSound || state === NotificationState.SoundOnly;
+}
+
+
+function setConfigOption(def: ConfigDefAny, v: any, runOnChanged: boolean): boolean {
+    let valid = false;
+    store.update(state => {
+        const oldValue = state[def.name]
+
+        valid = validateConfigOption(def, v);
+
+        if (!valid) {
+            console.warn(`[configState] Invalid value for option ${def.name} (${v}), setting to default (${def.defaultValue})`);
+            state[def.name] = structuredClone(def.defaultValue);
+        }
+        else {
+            state[def.name] = v
+        }
+
+        const changed = oldValue != state[def.name];
+        if (changed) {
+            if (runOnChanged) {
+                if (callbacks[def.name]) {
+                    for (const callback of callbacks[def.name]) {
+                        callback(state[def.name], oldValue)
+                    }
+                }
+            }
+            else {
+                if (changedOptions[def.name] == null) {
+                    changedOptions[def.name] = [oldValue, state[def.name]];
+                }
+                else {
+                    changedOptions[def.name][1] = state[def.name]
+                }
+            }
+        }
+
+        return state;
+    })
+    return valid;
+}
+
+function load(data: any, runOnChanged: boolean = false): ConfigState {
+    changedOptions = {}
+
+    store.set({ ...defaultConfig })
+    if (data != null && typeof data === "object") {
+        for (const [k, v] of Object.entries(data)) {
+            const def = CONFIG_DEFS_BY_NAME[k]
+            if (def == null) {
+                delete data[k]
+                continue;
+            }
+
+            setConfigOption(def, v, runOnChanged);
+        }
+    }
+
+    return get(store);
+}
+
+function loadDefault(runOnChanged: boolean = false) {
+    return load(null, runOnChanged);
+}
+
+export type ConfigOnChangeCallback<V> = (value: V, oldValue?: V) => void;
+
+function onChange<K extends keyof ConfigState>(optionName: K, callback: ConfigOnChangeCallback<ConfigState[K]>) {
+    callbacks[optionName] ||= []
+    callbacks[optionName].push(callback)
+}
+
+function runOnChangedEvents() {
+    console.debug("Running changed events for config...")
+    for (const [optionName, [oldValue, newValue]] of Object.entries(changedOptions)) {
+        const def = CONFIG_DEFS_BY_NAME[optionName]
+        if (callbacks[optionName]) {
+            console.debug("Running callback!", optionName, oldValue, newValue)
+            for (const callback of callbacks[def.name]) {
+                callback(newValue, oldValue)
+            }
+        }
+    }
+    changedOptions = {}
+}
+
 const configStateStore: WritableConfigStateStore =
 {
     ...store,
-    getBackendURL
+    getBackendURL,
+    canShowNotificationText,
+    canPlayNotificationSound,
+
+    validateConfigOption,
+    setConfigOption,
+    load,
+    loadDefault,
+    onChange,
+    runOnChangedEvents
 }
 export default configStateStore;

src/lib/stores/interfaceState.ts

@@ -11,6 +11,7 @@ export type InterfaceState = {
     indicatorValue: any,
 
     graphTransitioning: boolean
+    isJumpingToNode: boolean
 }
 
 type InterfaceStateOps = {
@@ -25,7 +26,8 @@ const store: Writable<InterfaceState> = writable(
         showIndicator: false,
         indicatorValue: null,
 
-        graphTransitioning: false
+        graphTransitioning: false,
+        isJumpingToNode: false,
     })
 
 const debounceDrag = debounce(() => { store.update(s => { s.showIndicator = false; return s }) }, 1000)

src/lib/stores/layoutStates.ts

@@ -690,7 +690,7 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
             }
         ]
     }
-];
+] as const;
 
 // This is needed so the specs can be iterated with svelte's keyed #each.
 let i = 0;
@@ -812,8 +812,8 @@ type LayoutStateOps = {
     moveItem: (target: IDragItem, to: ContainerLayout, index?: number) => void,
     groupItems: (dragItemIDs: DragItemID[], attrs?: Partial<Attributes>) => ContainerLayout,
     ungroup: (container: ContainerLayout) => void,
-    findLayoutEntryForNode: (nodeId: ComfyNodeID) => DragItemEntry | null,
-    findLayoutForNode: (nodeId: ComfyNodeID) => IDragItem | null,
+    findLayoutEntryForNode: (nodeId: NodeID) => DragItemEntry | null,
+    findLayoutForNode: (nodeId: NodeID) => IDragItem | null,
     iterateBreadthFirst: (id?: DragItemID | null) => Iterable<DragItemEntry>,
     serialize: () => SerializedLayoutState,
     serializeAtRoot: (rootID: DragItemID) => SerializedLayoutState,
@@ -1216,7 +1216,7 @@ function createRaw(workflow: ComfyBoxWorkflow | null = null): WritableLayoutStat
         store.set(state)
     }
 
-    function findLayoutEntryForNode(nodeId: ComfyNodeID): DragItemEntry | null {
+    function findLayoutEntryForNode(nodeId: NodeID): DragItemEntry | null {
         const state = get(store)
         const found = Object.entries(state.allItems).find(pair =>
             pair[1].dragItem.type === "widget"
@@ -1226,7 +1226,7 @@ function createRaw(workflow: ComfyBoxWorkflow | null = null): WritableLayoutStat
         return null;
     }
 
-    function findLayoutForNode(nodeId: ComfyNodeID): WidgetLayout | null {
+    function findLayoutForNode(nodeId: NodeID): WidgetLayout | null {
         const found = findLayoutEntryForNode(nodeId);
         if (!found)
             return null;
@@ -1511,16 +1511,12 @@ function getLayoutByDragItemID(dragItemID: DragItemID): WritableLayoutStateStore
     return Object.values(get(layoutStates).all).find(l => get(l).allItems[dragItemID] != null)
 }
 
-function getDragItemByNode(node: LGraphNode): WidgetLayout | null {
+function getDragItemByNode(node: LGraphNode): IDragItem | null {
     const layout = getLayoutByNode(node);
     if (layout == null)
         return null;
 
-    const entry = get(layout).allItemsByNode[node.id]
-    if (entry && entry.dragItem.type === "widget")
-        return entry.dragItem as WidgetLayout;
-
-    return null;
+    return layout.findLayoutForNode(node.id);
 }
 
 export type LayoutStateStores = {
@@ -1543,7 +1539,7 @@ export type LayoutStateStoresOps = {
     getLayoutByGraph: (graph: LGraph) => WritableLayoutStateStore | null,
     getLayoutByNode: (node: LGraphNode) => WritableLayoutStateStore | null,
     getLayoutByDragItemID: (dragItemID: DragItemID) => WritableLayoutStateStore | null,
-    getDragItemByNode: (node: LGraphNode) => WidgetLayout | null,
+    getDragItemByNode: (node: LGraphNode) => IDragItem | null,
 }
 
 export type WritableLayoutStateStores = Writable<LayoutStateStores> & LayoutStateStoresOps;

src/lib/stores/queueState.ts

@@ -7,6 +7,7 @@ import { playSound } from "$lib/utils";
 import { get, writable, type Writable } from "svelte/store";
 import { v4 as uuidv4 } from "uuid";
 import workflowState, { type WorkflowError, type WorkflowExecutionError, type WorkflowInstID, type WorkflowValidationError } from "./workflowState";
+import configState from "./configState";
 
 export type QueueEntryStatus = "success" | "validation_failed" | "error" | "interrupted" | "all_cached" | "unknown";
 
@@ -283,15 +284,19 @@ function executingUpdated(promptID: PromptID, runningNodeID: ComfyNodeID | null)
             if (entry != null) {
                 const totalNodesInPrompt = Object.keys(entry.prompt).length
                 if (entry.cachedNodes.size >= Object.keys(entry.prompt).length) {
-                    notify("Prompt was cached, nothing to run.", { type: "warning" })
+                    notify("Prompt was cached, nothing to run.", { type: "warning", showOn: "web" })
                     moveToCompleted(index, queue, "all_cached", "(Execution was cached)");
                 }
                 else if (entry.nodesRan.size >= totalNodesInPrompt) {
                     const workflow = workflowState.getWorkflow(entry.extraData.workflowID);
                     if (workflow?.attrs.showDefaultNotifications) {
+                        if (configState.canShowNotificationText()) {
                             notify("Prompt finished!", { type: "success" });
+                        }
+                        if (configState.canPlayNotificationSound()) {
                             playSound("notification.mp3")
                         }
+                    }
                     moveToCompleted(index, queue, "success")
                 }
                 else {

src/lib/stores/workflowState.ts

@@ -404,7 +404,7 @@ function setActiveWorkflow(canvas: ComfyGraphCanvas, index: number | WorkflowIns
 
     const workflow = state.openedWorkflows[index]
     if (workflow.id === state.activeWorkflowID)
-        return;
+        return state.activeWorkflow;
 
     if (state.activeWorkflow != null)
         state.activeWorkflow.stop("app")

src/lib/utils.ts

@@ -635,6 +635,9 @@ export function nextLetter(s: string): string {
 }
 
 export function playSound(sound: string) {
+    if (!configState.canPlayNotificationSound())
+        return;
+
     const url = `${location.origin}/sound/${sound}`;
     const audio = new Audio(url);
     audio.play();

src/lib/widgets/ImageUploadWidget.svelte

@@ -52,12 +52,19 @@
  };
 
  let hasImage = false;
-
  $: hasImage = $nodeValue && $nodeValue.length > 0;
  $: if (!hasImage) {
      editMask = false;
  }
 
+ let mask: ComfyImageLocation | null;
+ $: if (hasImage && canMask) {
+     mask = $nodeValue[0].children?.find(i => i.tags.includes("mask"))?.comfyUIFile;
+ }
+ else {
+     mask = null;
+ }
+
  const MASK_FILENAME: string = "ComfyBoxMask.png"
 
  async function onMaskReleased(e: CustomEvent<MaskCanvasData>) {
@@ -122,6 +129,7 @@
          // TODO other child image types preserved here?
          image.children = [];
      }
+     mask = null;
      if (maskCanvasComp) {
          maskCanvasComp.clearStrokes();
      }
@@ -232,6 +240,7 @@
                 <ImageUpload value={_value}
                              bind:imgWidth={$imgWidth}
                              bind:imgHeight={$imgHeight}
+                             {mask}
                              fileCount={"single"}
                              elem_classes={[]}
                              style={""}

src/lib/widgets/MarkdownWidget.svelte

@@ -0,0 +1,233 @@
+<script lang="ts">
+ import { type WidgetLayout } from "$lib/stores/layoutStates";
+ import { get, type Writable, writable } from "svelte/store";
+ import { Block } from "@gradio/atoms";
+ import type { ComfyMarkdownNode } from "$lib/nodes/widgets";
+ import SvelteMarkdown from "@dogagenc/svelte-markdown"
+ import NullMarkdownRenderer from "./markdown/NullMarkdownRenderer.svelte"
+	import { SvelteComponentDev } from "svelte/internal";
+
+ export let widget: WidgetLayout | null = null;
+ export let isMobile: boolean = false;
+
+ let node: ComfyMarkdownNode | null = null;
+ let nodeValue: Writable<string> = writable("");
+ let attrsChanged: Writable<number> = writable(0);
+
+ let renderers: Record<string, typeof SvelteComponentDev> = {
+     "html": NullMarkdownRenderer
+ }
+
+ $: widget && setNodeValue(widget);
+
+ function setNodeValue(widget: WidgetLayout) {
+     if (widget) {
+         node = widget.node as ComfyMarkdownNode
+         nodeValue = node.value;
+         attrsChanged = widget.attrsChanged;
+     }
+ };
+</script>
+
+<div class="wrapper prose">
+    {#key $attrsChanged}
+        {#if widget !== null && node !== null}
+            <Block>
+                <SvelteMarkdown source={$nodeValue} {renderers} />
+            </Block>
+        {/if}
+    {/key}
+</div>
+
+<style lang="scss">
+ .wrapper {
+     padding: 2px;
+     width: 100%;
+     height: 100%;
+
+     :global(> button) {
+         height: 100%;
+     }
+
+     :global(> .block) {
+         border-radius: 0 !important;
+     }
+ }
+
+ .prose {
+     font-weight: var(--prose-text-weight);
+     font-size: var(--text-md);
+ }
+
+ .prose * {
+     color: var(--body-text-color);
+ }
+
+ .prose p {
+     margin-bottom: var(--spacing-sm);
+     line-height: var(--line-lg);
+ }
+
+ /* headings
+ –––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+ .prose h1,
+ .prose h2,
+ .prose h3,
+ .prose h4,
+ .prose h5 {
+     margin: var(--spacing-xxl) 0 var(--spacing-lg);
+     font-weight: var(--prose-header-text-weight);
+     line-height: 1.3;
+ }
+
+ .prose > *:first-child {
+     margin-top: 0;
+ }
+
+ .prose h1 {
+     margin-top: 0;
+     font-size: var(--text-xxl);
+ }
+
+ .prose h2 {
+     font-size: var(--text-xl);
+ }
+
+ .prose h3 {
+     font-size: var(--text-lg);
+ }
+
+ .prose h4 {
+     font-size: 1.1em;
+ }
+
+ .prose h5 {
+     font-size: 1.05em;
+ }
+
+ /* lists
+ –––––––––––––––––––––––––––––––––––––––––––––––––– */
+ .prose ul {
+     list-style: circle inside;
+ }
+ .prose ol {
+     list-style: decimal inside;
+ }
+
+ .prose ul > p,
+ .prose li > p {
+     display: inline-block;
+ }
+ .prose ol,
+ .prose ul {
+     margin-top: 0;
+     padding-left: 0;
+ }
+ .prose ul ul,
+ .prose ul ol,
+ .prose ol ol,
+ .prose ol ul {
+     margin: 0.5em 0 0.5em 3em;
+     font-size: 90%;
+ }
+ .prose li {
+     margin-bottom: 0.5em;
+ }
+
+ /* code
+ –––––––––––––––––––––––––––––––––––––––––––––––––– */
+ .prose code {
+     border: 1px solid var(--border-color-primary);
+     border-radius: var(--radius-sm);
+     background: var(--background-fill-secondary);
+     padding: 1px 3px;
+     font-size: 85%;
+     white-space: nowrap;
+ }
+ .prose pre > code {
+     display: block;
+     padding: 0.5em 0.7em;
+     /* font-size: 100%; */
+     white-space: pre;
+ }
+
+ /* tables
+ –––––––––––––––––––––––––––––––––––––––––––––––––– */
+ .prose th,
+ .prose td {
+     border-bottom: 1px solid #e1e1e1;
+     padding: 12px 15px;
+     text-align: left;
+ }
+ .prose th:first-child,
+ .prose td:first-child {
+     padding-left: 0;
+ }
+ .prose th:last-child,
+ .prose td:last-child {
+     padding-right: 0;
+ }
+
+ /* spacing
+ –––––––––––––––––––––––––––––––––––––––––––––––––– */
+ .prose button,
+ .prose .button {
+     margin-bottom: var(--spacing-sm);
+ }
+ .prose input,
+ .prose textarea,
+ .prose select,
+ .prose fieldset {
+     margin-bottom: var(--spacing-sm);
+ }
+ .prose pre,
+ .prose blockquote,
+ .prose dl,
+ .prose figure,
+ .prose table,
+ .prose p,
+ .prose ul,
+ .prose ol,
+ .prose form {
+     margin-bottom: var(--spacing-md);
+ }
+
+ /* links
+ –––––––––––––––––––––––––––––––––––––––––––––––––– */
+ .prose a {
+     color: var(--link-text-color);
+     text-decoration: underline;
+ }
+
+ .prose a:visited {
+     color: var(--link-text-color-visited);
+ }
+
+ .prose a:hover {
+     color: var(--link-text-color-hover);
+ }
+ .prose a:active {
+     color: var(--link-text-color-active);
+ }
+
+ /* misc
+ –––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+ .prose hr {
+     margin-top: 3em;
+     margin-bottom: 3.5em;
+     border-width: 0;
+     border-top: 1px solid #e1e1e1;
+ }
+
+ .prose blockquote {
+     margin: var(--size-6) 0 !important;
+     border-left: 5px solid var(--border-color-primary);
+     padding-left: var(--size-2);
+ }
+
+ .prose :last-child {
+     margin-bottom: 0 !important;
+ }
+</style>

src/lib/widgets/markdown/NullMarkdownRenderer.svelte

@@ -0,0 +1,7 @@
+<script>
+  export let href = "";
+  export let title = undefined;
+  export let text = "";
+</script>
+
+<div/>

src/scss/global.scss

@@ -92,33 +92,43 @@ body {
 
      &.primary {
          background: var(--button-primary-background-fill);
-         &:hover {
+         &:hover:not(:disabled) {
              background: var(--button-primary-background-fill-hover);
          }
      }
 
      &.secondary {
          background: var(--button-secondary-background-fill);
-         &:hover {
+         &:hover:not(:disabled) {
              background: var(--button-secondary-background-fill-hover);
          }
      }
 
      &.ternary {
          background: var(--panel-background-fill);
-         &:hover {
+         &:hover:not(:disabled) {
              background: var(--block-background-fill);
          }
+         &.selected {
+             background: var(--panel-background-fill);
+         }
      }
 
-     &:hover {
+     &:hover:not(:disabled) {
          filter: brightness(85%);
      }
-     &:active {
+     &:active:not(:disabled) {
          filter: brightness(50%)
      }
      &.selected {
-         filter: brightness(80%)
+         color: var(--body-text-color);
+         filter: none;
+     }
+
+     &:disabled:not(.selected) {
+         background: var(--neutral-700);
+         color: var(--neutral-400);
+         opacity: 50%;
      }
 }
 

src/tests/stores/configStateTests.ts

@@ -0,0 +1,33 @@
+import { get } from "svelte/store";
+import configState, { type ConfigState } from "$lib/stores/configState"
+import { expect } from 'vitest';
+import UnitTest from "../UnitTest";
+import { Watch } from "@litegraph-ts/nodes-basic";
+
+export default class configStateTests extends UnitTest {
+    test__loadsDefaultsFromInvalid() {
+        const saved = "foo"
+
+        const config = configState.load(saved)
+        expect(config).toBeInstanceOf(Object)
+        expect(config.comfyUIHostname).toEqual("localhost")
+    }
+
+    test__loadsDefaultsFromBlank() {
+        const saved = {}
+
+        const config = configState.load(saved)
+        expect(config).toBeInstanceOf(Object)
+        expect(config.comfyUIHostname).toEqual("localhost")
+    }
+
+    test__loadsDefaultsFromInvalidValues() {
+        const saved = {
+            comfyUIHostname: 1234 as any
+        }
+
+        const config = configState.load(saved)
+        expect(config).toBeInstanceOf(Object)
+        expect(config.comfyUIHostname).toEqual("localhost")
+    }
+}

src/tests/testSuite.ts

@@ -3,3 +3,4 @@ export { default as ComfyGraphTests } from "./ComfyGraphTests"
 export { default as parseA1111Tests } from "./parseA1111Tests"
 export { default as convertA1111ToStdPromptTests } from "./convertA1111ToStdPromptTests"
 export { default as convertVanillaWorkflowTest } from "./convertVanillaWorkflowTests"
+export { default as configStateTests } from "./stores/configStateTests"