Update web content to release v1.3.11 (#5189)

* Update web content to release v1.3.11

* nit

web/assets/GraphView-7s8GuCc1.css

@@ -1,158 +0,0 @@
-
-.group-title-editor.node-title-editor[data-v-fc3f26e3] {
-  z-index: 9999;
-  padding: 0.25rem;
-}
-[data-v-fc3f26e3] .editable-text {
-  width: 100%;
-  height: 100%;
-}
-[data-v-fc3f26e3] .editable-text input {
-  width: 100%;
-  height: 100%;
-  /* Override the default font size */
-  font-size: inherit;
-}
-
-.side-bar-button-icon {
-  font-size: var(--sidebar-icon-size) !important;
-}
-.side-bar-button-selected .side-bar-button-icon {
-  font-size: var(--sidebar-icon-size) !important;
-  font-weight: bold;
-}
-
-.side-bar-button[data-v-caa3ee9c] {
-  width: var(--sidebar-width);
-  height: var(--sidebar-width);
-  border-radius: 0;
-}
-.comfyui-body-left .side-bar-button.side-bar-button-selected[data-v-caa3ee9c],
-.comfyui-body-left .side-bar-button.side-bar-button-selected[data-v-caa3ee9c]:hover {
-  border-left: 4px solid var(--p-button-text-primary-color);
-}
-.comfyui-body-right .side-bar-button.side-bar-button-selected[data-v-caa3ee9c],
-.comfyui-body-right .side-bar-button.side-bar-button-selected[data-v-caa3ee9c]:hover {
-  border-right: 4px solid var(--p-button-text-primary-color);
-}
-
-:root {
-  --sidebar-width: 64px;
-  --sidebar-icon-size: 1.5rem;
-}
-:root .small-sidebar {
-  --sidebar-width: 40px;
-  --sidebar-icon-size: 1rem;
-}
-
-.side-tool-bar-container[data-v-ed7a1148] {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  pointer-events: auto;
-
-  width: var(--sidebar-width);
-  height: 100%;
-
-  background-color: var(--comfy-menu-bg);
-  color: var(--fg-color);
-}
-.side-tool-bar-end[data-v-ed7a1148] {
-  align-self: flex-end;
-  margin-top: auto;
-}
-.sidebar-content-container[data-v-ed7a1148] {
-  height: 100%;
-  overflow-y: auto;
-}
-
-.p-splitter-gutter {
-  pointer-events: auto;
-}
-.gutter-hidden {
-  display: none !important;
-}
-
-.side-bar-panel[data-v-edca8328] {
-  background-color: var(--bg-color);
-  pointer-events: auto;
-}
-.splitter-overlay[data-v-edca8328] {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  background-color: transparent;
-  pointer-events: none;
-  /* Set it the same as the ComfyUI menu */
-  /* Note: Lite-graph DOM widgets have the same z-index as the node id, so
-  999 should be sufficient to make sure splitter overlays on node's DOM
-  widgets */
-  z-index: 999;
-  border: none;
-}
-
-[data-v-37f672ab] .highlight {
-  background-color: var(--p-primary-color);
-  color: var(--p-primary-contrast-color);
-  font-weight: bold;
-  border-radius: 0.25rem;
-  padding: 0rem 0.125rem;
-  margin: -0.125rem 0.125rem;
-}
-
-.comfy-vue-node-search-container[data-v-2d409367] {
-  display: flex;
-  width: 100%;
-  min-width: 26rem;
-  align-items: center;
-  justify-content: center;
-}
-.comfy-vue-node-search-container[data-v-2d409367] * {
-  pointer-events: auto;
-}
-.comfy-vue-node-preview-container[data-v-2d409367] {
-  position: absolute;
-  left: -350px;
-  top: 50px;
-}
-.comfy-vue-node-search-box[data-v-2d409367] {
-  z-index: 10;
-  flex-grow: 1;
-}
-._filter-button[data-v-2d409367] {
-  z-index: 10;
-}
-._dialog[data-v-2d409367] {
-  min-width: 26rem;
-}
-
-.invisible-dialog-root {
-  width: 30%;
-  min-width: 24rem;
-  max-width: 48rem;
-  border: 0 !important;
-  background-color: transparent !important;
-  margin-top: 25vh;
-}
-.node-search-box-dialog-mask {
-  align-items: flex-start !important;
-}
-
-.node-tooltip[data-v-0a4402f9] {
-  background: var(--comfy-input-bg);
-  border-radius: 5px;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
-  color: var(--input-text);
-  font-family: sans-serif;
-  left: 0;
-  max-width: 30vw;
-  padding: 4px 8px;
-  position: absolute;
-  top: 0;
-  transform: translate(5px, calc(-100% - 5px));
-  white-space: pre-wrap;
-  z-index: 99999;
-}

web/assets/GraphView-BGt8GmeB.css

@@ -0,0 +1,792 @@
+
+.editable-text[data-v-54da6fc9] {
+  display: inline;
+}
+.editable-text input[data-v-54da6fc9] {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.group-title-editor.node-title-editor[data-v-fc3f26e3] {
+  z-index: 9999;
+  padding: 0.25rem;
+}
+[data-v-fc3f26e3] .editable-text {
+  width: 100%;
+  height: 100%;
+}
+[data-v-fc3f26e3] .editable-text input {
+  width: 100%;
+  height: 100%;
+  /* Override the default font size */
+  font-size: inherit;
+}
+
+.side-bar-button-icon {
+  font-size: var(--sidebar-icon-size) !important;
+}
+.side-bar-button-selected .side-bar-button-icon {
+  font-size: var(--sidebar-icon-size) !important;
+  font-weight: bold;
+}
+
+.side-bar-button[data-v-caa3ee9c] {
+  width: var(--sidebar-width);
+  height: var(--sidebar-width);
+  border-radius: 0;
+}
+.comfyui-body-left .side-bar-button.side-bar-button-selected[data-v-caa3ee9c],
+.comfyui-body-left .side-bar-button.side-bar-button-selected[data-v-caa3ee9c]:hover {
+  border-left: 4px solid var(--p-button-text-primary-color);
+}
+.comfyui-body-right .side-bar-button.side-bar-button-selected[data-v-caa3ee9c],
+.comfyui-body-right .side-bar-button.side-bar-button-selected[data-v-caa3ee9c]:hover {
+  border-right: 4px solid var(--p-button-text-primary-color);
+}
+
+:root {
+  --sidebar-width: 64px;
+  --sidebar-icon-size: 1.5rem;
+}
+:root .small-sidebar {
+  --sidebar-width: 40px;
+  --sidebar-icon-size: 1rem;
+}
+
+.side-tool-bar-container[data-v-4da64512] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  pointer-events: auto;
+
+  width: var(--sidebar-width);
+  height: 100%;
+
+  background-color: var(--comfy-menu-bg);
+  color: var(--fg-color);
+}
+.side-tool-bar-end[data-v-4da64512] {
+  align-self: flex-end;
+  margin-top: auto;
+}
+.sidebar-content-container[data-v-4da64512] {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.p-splitter-gutter {
+  pointer-events: auto;
+}
+.gutter-hidden {
+  display: none !important;
+}
+
+.side-bar-panel[data-v-b9df3042] {
+  background-color: var(--bg-color);
+  pointer-events: auto;
+}
+.splitter-overlay[data-v-b9df3042] {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: transparent;
+  pointer-events: none;
+  /* Set it the same as the ComfyUI menu */
+  /* Note: Lite-graph DOM widgets have the same z-index as the node id, so
+  999 should be sufficient to make sure splitter overlays on node's DOM
+  widgets */
+  z-index: 999;
+  border: none;
+}
+
+._content[data-v-e7b35fd9] {
+
+    display: flex;
+
+    flex-direction: column
+}
+._content[data-v-e7b35fd9] > :not([hidden]) ~ :not([hidden]) {
+
+    --tw-space-y-reverse: 0;
+
+    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+
+    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
+}
+._footer[data-v-e7b35fd9] {
+
+    display: flex;
+
+    flex-direction: column;
+
+    align-items: flex-end;
+
+    padding-top: 1rem
+}
+
+[data-v-37f672ab] .highlight {
+  background-color: var(--p-primary-color);
+  color: var(--p-primary-contrast-color);
+  font-weight: bold;
+  border-radius: 0.25rem;
+  padding: 0rem 0.125rem;
+  margin: -0.125rem 0.125rem;
+}
+
+.slot_row[data-v-ff07c900] {
+  padding: 2px;
+}
+
+/* Original N-Sidebar styles */
+._sb_dot[data-v-ff07c900] {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: grey;
+}
+.node_header[data-v-ff07c900] {
+  line-height: 1;
+  padding: 8px 13px 7px;
+  margin-bottom: 5px;
+  font-size: 15px;
+  text-wrap: nowrap;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+.headdot[data-v-ff07c900] {
+  width: 10px;
+  height: 10px;
+  float: inline-start;
+  margin-right: 8px;
+}
+.IMAGE[data-v-ff07c900] {
+  background-color: #64b5f6;
+}
+.VAE[data-v-ff07c900] {
+  background-color: #ff6e6e;
+}
+.LATENT[data-v-ff07c900] {
+  background-color: #ff9cf9;
+}
+.MASK[data-v-ff07c900] {
+  background-color: #81c784;
+}
+.CONDITIONING[data-v-ff07c900] {
+  background-color: #ffa931;
+}
+.CLIP[data-v-ff07c900] {
+  background-color: #ffd500;
+}
+.MODEL[data-v-ff07c900] {
+  background-color: #b39ddb;
+}
+.CONTROL_NET[data-v-ff07c900] {
+  background-color: #a5d6a7;
+}
+._sb_node_preview[data-v-ff07c900] {
+  background-color: var(--comfy-menu-bg);
+  font-family: 'Open Sans', sans-serif;
+  font-size: small;
+  color: var(--descrip-text);
+  border: 1px solid var(--descrip-text);
+  min-width: 300px;
+  width: -moz-min-content;
+  width: min-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  z-index: 9999;
+  border-radius: 12px;
+  overflow: hidden;
+  font-size: 12px;
+  padding-bottom: 10px;
+}
+._sb_node_preview ._sb_description[data-v-ff07c900] {
+  margin: 10px;
+  padding: 6px;
+  background: var(--border-color);
+  border-radius: 5px;
+  font-style: italic;
+  font-weight: 500;
+  font-size: 0.9rem;
+  word-break: break-word;
+}
+._sb_table[data-v-ff07c900] {
+  display: grid;
+
+  grid-column-gap: 10px;
+  /* Spazio tra le colonne */
+  width: 100%;
+  /* Imposta la larghezza della tabella al 100% del contenitore */
+}
+._sb_row[data-v-ff07c900] {
+  display: grid;
+  grid-template-columns: 10px 1fr 1fr 1fr 10px;
+  grid-column-gap: 10px;
+  align-items: center;
+  padding-left: 9px;
+  padding-right: 9px;
+}
+._sb_row_string[data-v-ff07c900] {
+  grid-template-columns: 10px 1fr 1fr 10fr 1fr;
+}
+._sb_col[data-v-ff07c900] {
+  border: 0px solid #000;
+  display: flex;
+  align-items: flex-end;
+  flex-direction: row-reverse;
+  flex-wrap: nowrap;
+  align-content: flex-start;
+  justify-content: flex-end;
+}
+._sb_inherit[data-v-ff07c900] {
+  display: inherit;
+}
+._long_field[data-v-ff07c900] {
+  background: var(--bg-color);
+  border: 2px solid var(--border-color);
+  margin: 5px 5px 0 5px;
+  border-radius: 10px;
+  line-height: 1.7;
+  text-wrap: nowrap;
+}
+._sb_arrow[data-v-ff07c900] {
+  color: var(--fg-color);
+}
+._sb_preview_badge[data-v-ff07c900] {
+  text-align: center;
+  background: var(--comfy-input-bg);
+  font-weight: bold;
+  color: var(--error-text);
+}
+
+.comfy-vue-node-search-container[data-v-2d409367] {
+  display: flex;
+  width: 100%;
+  min-width: 26rem;
+  align-items: center;
+  justify-content: center;
+}
+.comfy-vue-node-search-container[data-v-2d409367] * {
+  pointer-events: auto;
+}
+.comfy-vue-node-preview-container[data-v-2d409367] {
+  position: absolute;
+  left: -350px;
+  top: 50px;
+}
+.comfy-vue-node-search-box[data-v-2d409367] {
+  z-index: 10;
+  flex-grow: 1;
+}
+._filter-button[data-v-2d409367] {
+  z-index: 10;
+}
+._dialog[data-v-2d409367] {
+  min-width: 26rem;
+}
+
+.invisible-dialog-root {
+  width: 60%;
+  min-width: 24rem;
+  max-width: 48rem;
+  border: 0 !important;
+  background-color: transparent !important;
+  margin-top: 25vh;
+  margin-left: 400px;
+}
+@media all and (max-width: 768px) {
+.invisible-dialog-root {
+    margin-left: 0px;
+}
+}
+.node-search-box-dialog-mask {
+  align-items: flex-start !important;
+}
+
+.node-tooltip[data-v-0a4402f9] {
+  background: var(--comfy-input-bg);
+  border-radius: 5px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
+  color: var(--input-text);
+  font-family: sans-serif;
+  left: 0;
+  max-width: 30vw;
+  padding: 4px 8px;
+  position: absolute;
+  top: 0;
+  transform: translate(5px, calc(-100% - 5px));
+  white-space: pre-wrap;
+  z-index: 99999;
+}
+
+.p-buttongroup-vertical[data-v-ce8bd6ac] {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--p-button-border-radius);
+  overflow: hidden;
+  border: 1px solid var(--p-panel-border-color);
+}
+.p-buttongroup-vertical .p-button[data-v-ce8bd6ac] {
+  margin: 0;
+  border-radius: 0;
+}
+
+.comfy-image-wrap[data-v-9bc23daf] {
+  display: contents;
+}
+.comfy-image-blur[data-v-9bc23daf] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.comfy-image-main[data-v-9bc23daf] {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: center;
+     object-position: center;
+  z-index: 1;
+}
+.contain .comfy-image-wrap[data-v-9bc23daf] {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.contain .comfy-image-main[data-v-9bc23daf] {
+  -o-object-fit: contain;
+     object-fit: contain;
+  -webkit-backdrop-filter: blur(10px);
+          backdrop-filter: blur(10px);
+  position: absolute;
+}
+.broken-image-placeholder[data-v-9bc23daf] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  margin: 2rem;
+}
+.broken-image-placeholder i[data-v-9bc23daf] {
+  font-size: 3rem;
+  margin-bottom: 0.5rem;
+}
+
+.result-container[data-v-d9c060ae] {
+  width: 100%;
+  height: 100%;
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.image-preview-mask[data-v-d9c060ae] {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  z-index: 1;
+}
+.result-container:hover .image-preview-mask[data-v-d9c060ae] {
+  opacity: 1;
+}
+
+.task-result-preview[data-v-d4c8a1fe] {
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.task-result-preview i[data-v-d4c8a1fe],
+.task-result-preview span[data-v-d4c8a1fe] {
+  font-size: 2rem;
+}
+.task-item[data-v-d4c8a1fe] {
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+}
+.task-item-details[data-v-d4c8a1fe] {
+  position: absolute;
+  bottom: 0;
+  padding: 0.6rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  z-index: 1;
+}
+.task-node-link[data-v-d4c8a1fe] {
+  padding: 2px;
+}
+
+/* In dark mode, transparent background color for tags is not ideal for tags that
+are floating on top of images. */
+.tag-wrapper[data-v-d4c8a1fe] {
+  background-color: var(--p-primary-contrast-color);
+  border-radius: 6px;
+  display: inline-flex;
+}
+.node-name-tag[data-v-d4c8a1fe] {
+  word-break: break-all;
+}
+.status-tag-group[data-v-d4c8a1fe] {
+  display: flex;
+  flex-direction: column;
+}
+.progress-preview-img[data-v-d4c8a1fe] {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: center;
+     object-position: center;
+}
+
+/* PrimeVue's galleria teleports the fullscreen gallery out of subtree so we
+cannot use scoped style here. */
+img.galleria-image {
+  max-width: 100vw;
+  max-height: 100vh;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.p-galleria-close-button {
+  /* Set z-index so the close button doesn't get hidden behind the image when image is large */
+  z-index: 1;
+}
+
+.comfy-vue-side-bar-container[data-v-1b0a8fe3] {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+.comfy-vue-side-bar-header[data-v-1b0a8fe3] {
+  flex-shrink: 0;
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  border-radius: 0;
+  padding: 0.25rem 1rem;
+  min-height: 2.5rem;
+}
+.comfy-vue-side-bar-header-span[data-v-1b0a8fe3] {
+  font-size: small;
+}
+.comfy-vue-side-bar-body[data-v-1b0a8fe3] {
+  flex-grow: 1;
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+.comfy-vue-side-bar-body[data-v-1b0a8fe3]::-webkit-scrollbar {
+  width: 1px;
+}
+.comfy-vue-side-bar-body[data-v-1b0a8fe3]::-webkit-scrollbar-thumb {
+  background-color: transparent;
+}
+
+.scroll-container[data-v-08fa89b1] {
+  height: 100%;
+  overflow-y: auto;
+}
+.queue-grid[data-v-08fa89b1] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  padding: 0.5rem;
+  gap: 0.5rem;
+}
+
+.tree-node[data-v-633e27ab] {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.leaf-count-badge[data-v-633e27ab] {
+  margin-left: 0.5rem;
+}
+.node-content[data-v-633e27ab] {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+}
+.leaf-label[data-v-633e27ab] {
+  margin-left: 0.5rem;
+}
+[data-v-633e27ab] .editable-text span {
+  word-break: break-all;
+}
+
+[data-v-bd7bae90] .tree-explorer-node-label {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-left: var(--p-tree-node-gap);
+  flex-grow: 1;
+}
+
+/*
+ * The following styles are necessary to avoid layout shift when dragging nodes over folders.
+ * By setting the position to relative on the parent and using an absolutely positioned pseudo-element,
+ * we can create a visual indicator for the drop target without affecting the layout of other elements.
+ */
+[data-v-bd7bae90] .p-tree-node-content:has(.tree-folder) {
+  position: relative;
+}
+[data-v-bd7bae90] .p-tree-node-content:has(.tree-folder.can-drop)::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 1px solid var(--p-content-color);
+  pointer-events: none;
+}
+
+.node-lib-node-container[data-v-90dfee08] {
+    height: 100%;
+    width: 100%
+}
+
+.p-selectbutton .p-button[data-v-91077f2a] {
+  padding: 0.5rem;
+}
+.p-selectbutton .p-button .pi[data-v-91077f2a] {
+  font-size: 1.5rem;
+}
+.field[data-v-91077f2a] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.color-picker-container[data-v-91077f2a] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.node-lib-filter-popup {
+  margin-left: -13px;
+}
+
+[data-v-f6a7371a] .comfy-vue-side-bar-body {
+  background: var(--p-tree-background);
+}
+[data-v-f6a7371a] .node-lib-bookmark-tree-explorer {
+  padding-bottom: 2px;
+}
+[data-v-f6a7371a] .p-divider {
+  margin: var(--comfy-tree-explorer-item-padding) 0px;
+}
+
+.model_preview[data-v-32e6c4d9] {
+  background-color: var(--comfy-menu-bg);
+  font-family: 'Open Sans', sans-serif;
+  color: var(--descrip-text);
+  border: 1px solid var(--descrip-text);
+  min-width: 300px;
+  max-width: 500px;
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  z-index: 9999;
+  border-radius: 12px;
+  overflow: hidden;
+  font-size: 12px;
+  padding: 10px;
+}
+.model_preview_image[data-v-32e6c4d9] {
+  margin: auto;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.model_preview_image img[data-v-32e6c4d9] {
+  max-width: 100%;
+  max-height: 150px;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.model_preview_title[data-v-32e6c4d9] {
+  font-weight: bold;
+  text-align: center;
+  font-size: 14px;
+}
+.model_preview_top_container[data-v-32e6c4d9] {
+  text-align: center;
+  line-height: 0.5;
+}
+.model_preview_filename[data-v-32e6c4d9],
+.model_preview_author[data-v-32e6c4d9],
+.model_preview_architecture[data-v-32e6c4d9] {
+  display: inline-block;
+  text-align: center;
+  margin: 5px;
+  font-size: 10px;
+}
+.model_preview_prefix[data-v-32e6c4d9] {
+  font-weight: bold;
+}
+
+.model-lib-model-icon-container[data-v-70b69131] {
+  display: inline-block;
+  position: relative;
+  left: 0;
+  height: 1.5rem;
+  vertical-align: top;
+  width: 0px;
+}
+.model-lib-model-icon[data-v-70b69131] {
+  background-size: cover;
+  background-position: center;
+  display: inline-block;
+  position: relative;
+  left: -2.5rem;
+  height: 2rem;
+  width: 2rem;
+  vertical-align: top;
+}
+
+.pi-fake-spacer {
+  height: 1px;
+  width: 16px;
+}
+
+[data-v-74b01bce] .comfy-vue-side-bar-body {
+  background: var(--p-tree-background);
+}
+
+[data-v-d2d58252] .comfy-vue-side-bar-body {
+  background: var(--p-tree-background);
+}
+
+[data-v-84e785b8] .p-togglebutton::before {
+  display: none
+}
+[data-v-84e785b8] .p-togglebutton {
+  position: relative;
+  flex-shrink: 0;
+  border-radius: 0px;
+  background-color: transparent;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem
+}
+[data-v-84e785b8] .p-togglebutton.p-togglebutton-checked {
+  border-bottom-width: 2px;
+  border-bottom-color: var(--p-button-text-primary-color)
+}
+[data-v-84e785b8] .p-togglebutton-checked .close-button,[data-v-84e785b8] .p-togglebutton:hover .close-button {
+  visibility: visible
+}
+.status-indicator[data-v-84e785b8] {
+  position: absolute;
+  font-weight: 700;
+  font-size: 1.5rem;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%)
+}
+[data-v-84e785b8] .p-togglebutton:hover .status-indicator {
+  display: none
+}
+[data-v-84e785b8] .p-togglebutton .close-button {
+  visibility: hidden
+}
+
+.top-menubar[data-v-2ec1b620] .p-menubar-item-link svg {
+  display: none;
+}
+[data-v-2ec1b620] .p-menubar-submenu.dropdown-direction-up {
+  top: auto;
+  bottom: 100%;
+  flex-direction: column-reverse;
+}
+.keybinding-tag[data-v-2ec1b620] {
+  background: var(--p-content-hover-background);
+  border-color: var(--p-content-border-color);
+  border-style: solid;
+}
+
+[data-v-713442be] .p-inputtext {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.comfyui-queue-button[data-v-fcd3efcd] .p-splitbutton-dropdown {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.actionbar[data-v-bc6c78dd] {
+  pointer-events: all;
+  position: fixed;
+  z-index: 1000;
+}
+.actionbar.is-docked[data-v-bc6c78dd] {
+  position: static;
+  border-style: none;
+  background-color: transparent;
+  padding: 0px;
+}
+.actionbar.is-dragging[data-v-bc6c78dd] {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+[data-v-bc6c78dd] .p-panel-content {
+  padding: 0.25rem;
+}
+[data-v-bc6c78dd] .p-panel-header {
+  display: none;
+}
+
+.comfyui-menu[data-v-b13fdc92] {
+  width: 100vw;
+  background: var(--comfy-menu-bg);
+  color: var(--fg-color);
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 0.8em;
+  box-sizing: border-box;
+  z-index: 1000;
+  order: 0;
+  grid-column: 1/-1;
+  max-height: 90vh;
+}
+.comfyui-menu.dropzone[data-v-b13fdc92] {
+  background: var(--p-highlight-background);
+}
+.comfyui-menu.dropzone-active[data-v-b13fdc92] {
+  background: var(--p-highlight-background-focus);
+}
+.comfyui-logo[data-v-b13fdc92] {
+  font-size: 1.2em;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  cursor: default;
+}

web/assets/colorPalette-D5oi2-2V.js

@@ -0,0 +1,865 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { k as app, aP as LGraphCanvas, bO as useToastStore, ca as $el, z as LiteGraph } from "./index-DGAbdBYF.js";
+const colorPalettes = {
+  dark: {
+    id: "dark",
+    name: "Dark (Default)",
+    colors: {
+      node_slot: {
+        CLIP: "#FFD500",
+        // bright yellow
+        CLIP_VISION: "#A8DADC",
+        // light blue-gray
+        CLIP_VISION_OUTPUT: "#ad7452",
+        // rusty brown-orange
+        CONDITIONING: "#FFA931",
+        // vibrant orange-yellow
+        CONTROL_NET: "#6EE7B7",
+        // soft mint green
+        IMAGE: "#64B5F6",
+        // bright sky blue
+        LATENT: "#FF9CF9",
+        // light pink-purple
+        MASK: "#81C784",
+        // muted green
+        MODEL: "#B39DDB",
+        // light lavender-purple
+        STYLE_MODEL: "#C2FFAE",
+        // light green-yellow
+        VAE: "#FF6E6E",
+        // bright red
+        NOISE: "#B0B0B0",
+        // gray
+        GUIDER: "#66FFFF",
+        // cyan
+        SAMPLER: "#ECB4B4",
+        // very soft red
+        SIGMAS: "#CDFFCD",
+        // soft lime green
+        TAESD: "#DCC274"
+        // cheesecake
+      },
+      litegraph_base: {
+        BACKGROUND_IMAGE: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQBJREFUeNrs1rEKwjAUhlETUkj3vP9rdmr1Ysammk2w5wdxuLgcMHyptfawuZX4pJSWZTnfnu/lnIe/jNNxHHGNn//HNbbv+4dr6V+11uF527arU7+u63qfa/bnmh8sWLBgwYJlqRf8MEptXPBXJXa37BSl3ixYsGDBMliwFLyCV/DeLIMFCxYsWLBMwSt4Be/NggXLYMGCBUvBK3iNruC9WbBgwYJlsGApeAWv4L1ZBgsWLFiwYJmCV/AK3psFC5bBggULloJX8BpdwXuzYMGCBctgwVLwCl7Be7MMFixYsGDBsu8FH1FaSmExVfAxBa/gvVmwYMGCZbBg/W4vAQYA5tRF9QYlv/QAAAAASUVORK5CYII=",
+        CLEAR_BACKGROUND_COLOR: "#222",
+        NODE_TITLE_COLOR: "#999",
+        NODE_SELECTED_TITLE_COLOR: "#FFF",
+        NODE_TEXT_SIZE: 14,
+        NODE_TEXT_COLOR: "#AAA",
+        NODE_SUBTEXT_SIZE: 12,
+        NODE_DEFAULT_COLOR: "#333",
+        NODE_DEFAULT_BGCOLOR: "#353535",
+        NODE_DEFAULT_BOXCOLOR: "#666",
+        NODE_DEFAULT_SHAPE: "box",
+        NODE_BOX_OUTLINE_COLOR: "#FFF",
+        NODE_BYPASS_BGCOLOR: "#FF00FF",
+        DEFAULT_SHADOW_COLOR: "rgba(0,0,0,0.5)",
+        DEFAULT_GROUP_FONT: 24,
+        WIDGET_BGCOLOR: "#222",
+        WIDGET_OUTLINE_COLOR: "#666",
+        WIDGET_TEXT_COLOR: "#DDD",
+        WIDGET_SECONDARY_TEXT_COLOR: "#999",
+        LINK_COLOR: "#9A9",
+        EVENT_LINK_COLOR: "#A86",
+        CONNECTING_LINK_COLOR: "#AFA",
+        BADGE_FG_COLOR: "#FFF",
+        BADGE_BG_COLOR: "#0F1F0F"
+      },
+      comfy_base: {
+        "fg-color": "#fff",
+        "bg-color": "#202020",
+        "comfy-menu-bg": "#353535",
+        "comfy-input-bg": "#222",
+        "input-text": "#ddd",
+        "descrip-text": "#999",
+        "drag-text": "#ccc",
+        "error-text": "#ff4444",
+        "border-color": "#4e4e4e",
+        "tr-even-bg-color": "#222",
+        "tr-odd-bg-color": "#353535",
+        "content-bg": "#4e4e4e",
+        "content-fg": "#fff",
+        "content-hover-bg": "#222",
+        "content-hover-fg": "#fff"
+      }
+    }
+  },
+  light: {
+    id: "light",
+    name: "Light",
+    colors: {
+      node_slot: {
+        CLIP: "#FFA726",
+        // orange
+        CLIP_VISION: "#5C6BC0",
+        // indigo
+        CLIP_VISION_OUTPUT: "#8D6E63",
+        // brown
+        CONDITIONING: "#EF5350",
+        // red
+        CONTROL_NET: "#66BB6A",
+        // green
+        IMAGE: "#42A5F5",
+        // blue
+        LATENT: "#AB47BC",
+        // purple
+        MASK: "#9CCC65",
+        // light green
+        MODEL: "#7E57C2",
+        // deep purple
+        STYLE_MODEL: "#D4E157",
+        // lime
+        VAE: "#FF7043"
+        // deep orange
+      },
+      litegraph_base: {
+        BACKGROUND_IMAGE: "data:image/gif;base64,R0lGODlhZABkALMAAAAAAP///+vr6+rq6ujo6Ofn5+bm5uXl5d3d3f///wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAAkALAAAAABkAGQAAAT/UMhJq7046827HkcoHkYxjgZhnGG6si5LqnIM0/fL4qwwIMAg0CAsEovBIxKhRDaNy2GUOX0KfVFrssrNdpdaqTeKBX+dZ+jYvEaTf+y4W66mC8PUdrE879f9d2mBeoNLfH+IhYBbhIx2jkiHiomQlGKPl4uZe3CaeZifnnijgkESBqipqqusra6vsLGys62SlZO4t7qbuby7CLa+wqGWxL3Gv3jByMOkjc2lw8vOoNSi0czAncXW3Njdx9Pf48/Z4Kbbx+fQ5evZ4u3k1fKR6cn03vHlp7T9/v8A/8Gbp4+gwXoFryXMB2qgwoMMHyKEqA5fxX322FG8tzBcRnMW/zlulPbRncmQGidKjMjyYsOSKEF2FBlJQMCbOHP6c9iSZs+UnGYCdbnSo1CZI5F64kn0p1KnTH02nSoV3dGTV7FFHVqVq1dtWcMmVQZTbNGu72zqXMuW7danVL+6e4t1bEy6MeueBYLXrNO5Ze36jQtWsOG97wIj1vt3St/DjTEORss4nNq2mDP3e7w4r1bFkSET5hy6s2TRlD2/mSxXtSHQhCunXo26NevCpmvD/UU6tuullzULH76q92zdZG/Ltv1a+W+osI/nRmyc+fRi1Xdbh+68+0vv10dH3+77KD/i6IdnX669/frn5Zsjh4/2PXju8+8bzc9/6fj27LFnX11/+IUnXWl7BJfegm79FyB9JOl3oHgSklefgxAC+FmFGpqHIYcCfkhgfCohSKKJVo044YUMttggiBkmp6KFXw1oII24oYhjiDByaKOOHcp3Y5BD/njikSkO+eBREQAAOw==",
+        CLEAR_BACKGROUND_COLOR: "lightgray",
+        NODE_TITLE_COLOR: "#222",
+        NODE_SELECTED_TITLE_COLOR: "#000",
+        NODE_TEXT_SIZE: 14,
+        NODE_TEXT_COLOR: "#444",
+        NODE_SUBTEXT_SIZE: 12,
+        NODE_DEFAULT_COLOR: "#F7F7F7",
+        NODE_DEFAULT_BGCOLOR: "#F5F5F5",
+        NODE_DEFAULT_BOXCOLOR: "#CCC",
+        NODE_DEFAULT_SHAPE: "box",
+        NODE_BOX_OUTLINE_COLOR: "#000",
+        NODE_BYPASS_BGCOLOR: "#FF00FF",
+        DEFAULT_SHADOW_COLOR: "rgba(0,0,0,0.1)",
+        DEFAULT_GROUP_FONT: 24,
+        WIDGET_BGCOLOR: "#D4D4D4",
+        WIDGET_OUTLINE_COLOR: "#999",
+        WIDGET_TEXT_COLOR: "#222",
+        WIDGET_SECONDARY_TEXT_COLOR: "#555",
+        LINK_COLOR: "#4CAF50",
+        EVENT_LINK_COLOR: "#FF9800",
+        CONNECTING_LINK_COLOR: "#2196F3",
+        BADGE_FG_COLOR: "#000",
+        BADGE_BG_COLOR: "#FFF"
+      },
+      comfy_base: {
+        "fg-color": "#222",
+        "bg-color": "#DDD",
+        "comfy-menu-bg": "#F5F5F5",
+        "comfy-input-bg": "#C9C9C9",
+        "input-text": "#222",
+        "descrip-text": "#444",
+        "drag-text": "#555",
+        "error-text": "#F44336",
+        "border-color": "#888",
+        "tr-even-bg-color": "#f9f9f9",
+        "tr-odd-bg-color": "#fff",
+        "content-bg": "#e0e0e0",
+        "content-fg": "#222",
+        "content-hover-bg": "#adadad",
+        "content-hover-fg": "#222"
+      }
+    }
+  },
+  solarized: {
+    id: "solarized",
+    name: "Solarized",
+    colors: {
+      node_slot: {
+        CLIP: "#2AB7CA",
+        // light blue
+        CLIP_VISION: "#6c71c4",
+        // blue violet
+        CLIP_VISION_OUTPUT: "#859900",
+        // olive green
+        CONDITIONING: "#d33682",
+        // magenta
+        CONTROL_NET: "#d1ffd7",
+        // light mint green
+        IMAGE: "#5940bb",
+        // deep blue violet
+        LATENT: "#268bd2",
+        // blue
+        MASK: "#CCC9E7",
+        // light purple-gray
+        MODEL: "#dc322f",
+        // red
+        STYLE_MODEL: "#1a998a",
+        // teal
+        UPSCALE_MODEL: "#054A29",
+        // dark green
+        VAE: "#facfad"
+        // light pink-orange
+      },
+      litegraph_base: {
+        NODE_TITLE_COLOR: "#fdf6e3",
+        // Base3
+        NODE_SELECTED_TITLE_COLOR: "#A9D400",
+        NODE_TEXT_SIZE: 14,
+        NODE_TEXT_COLOR: "#657b83",
+        // Base00
+        NODE_SUBTEXT_SIZE: 12,
+        NODE_DEFAULT_COLOR: "#094656",
+        NODE_DEFAULT_BGCOLOR: "#073642",
+        // Base02
+        NODE_DEFAULT_BOXCOLOR: "#839496",
+        // Base0
+        NODE_DEFAULT_SHAPE: "box",
+        NODE_BOX_OUTLINE_COLOR: "#fdf6e3",
+        // Base3
+        NODE_BYPASS_BGCOLOR: "#FF00FF",
+        DEFAULT_SHADOW_COLOR: "rgba(0,0,0,0.5)",
+        DEFAULT_GROUP_FONT: 24,
+        WIDGET_BGCOLOR: "#002b36",
+        // Base03
+        WIDGET_OUTLINE_COLOR: "#839496",
+        // Base0
+        WIDGET_TEXT_COLOR: "#fdf6e3",
+        // Base3
+        WIDGET_SECONDARY_TEXT_COLOR: "#93a1a1",
+        // Base1
+        LINK_COLOR: "#2aa198",
+        // Solarized Cyan
+        EVENT_LINK_COLOR: "#268bd2",
+        // Solarized Blue
+        CONNECTING_LINK_COLOR: "#859900"
+        // Solarized Green
+      },
+      comfy_base: {
+        "fg-color": "#fdf6e3",
+        // Base3
+        "bg-color": "#002b36",
+        // Base03
+        "comfy-menu-bg": "#073642",
+        // Base02
+        "comfy-input-bg": "#002b36",
+        // Base03
+        "input-text": "#93a1a1",
+        // Base1
+        "descrip-text": "#586e75",
+        // Base01
+        "drag-text": "#839496",
+        // Base0
+        "error-text": "#dc322f",
+        // Solarized Red
+        "border-color": "#657b83",
+        // Base00
+        "tr-even-bg-color": "#002b36",
+        "tr-odd-bg-color": "#073642",
+        "content-bg": "#657b83",
+        "content-fg": "#fdf6e3",
+        "content-hover-bg": "#002b36",
+        "content-hover-fg": "#fdf6e3"
+      }
+    }
+  },
+  arc: {
+    id: "arc",
+    name: "Arc",
+    colors: {
+      node_slot: {
+        BOOLEAN: "",
+        CLIP: "#eacb8b",
+        CLIP_VISION: "#A8DADC",
+        CLIP_VISION_OUTPUT: "#ad7452",
+        CONDITIONING: "#cf876f",
+        CONTROL_NET: "#00d78d",
+        CONTROL_NET_WEIGHTS: "",
+        FLOAT: "",
+        GLIGEN: "",
+        IMAGE: "#80a1c0",
+        IMAGEUPLOAD: "",
+        INT: "",
+        LATENT: "#b38ead",
+        LATENT_KEYFRAME: "",
+        MASK: "#a3bd8d",
+        MODEL: "#8978a7",
+        SAMPLER: "",
+        SIGMAS: "",
+        STRING: "",
+        STYLE_MODEL: "#C2FFAE",
+        T2I_ADAPTER_WEIGHTS: "",
+        TAESD: "#DCC274",
+        TIMESTEP_KEYFRAME: "",
+        UPSCALE_MODEL: "",
+        VAE: "#be616b"
+      },
+      litegraph_base: {
+        BACKGROUND_IMAGE: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABcklEQVR4nO3YMUoDARgF4RfxBqZI6/0vZqFn0MYtrLIQMFN8U6V4LAtD+Jm9XG/v30OGl2e/AP7yevz4+vx45nvgF/+QGITEICQGITEIiUFIjNNC3q43u3/YnRJyPOzeQ+0e220nhRzReC8e7R7bbdvl+Jal1Bs46jEIiUFIDEJiEBKDkBhKPbZT6qHdptRTu02p53DUYxASg5AYhMQgJAYhMZR6bKfUQ7tNqad2m1LP4ajHICQGITEIiUFIDEJiKPXYTqmHdptST+02pZ7DUY9BSAxCYhASg5AYhMRQ6rGdUg/tNqWe2m1KPYejHoOQGITEICQGITEIiaHUYzulHtptSj2125R6Dkc9BiExCIlBSAxCYhASQ6nHdko9tNuUemq3KfUcjnoMQmIQEoOQGITEICSGUo/tlHpotyn11G5T6jkc9RiExCAkBiExCIlBSAylHtsp9dBuU+qp3abUczjqMQiJQUgMQmIQEoOQGITE+AHFISNQrFTGuwAAAABJRU5ErkJggg==",
+        CLEAR_BACKGROUND_COLOR: "#2b2f38",
+        NODE_TITLE_COLOR: "#b2b7bd",
+        NODE_SELECTED_TITLE_COLOR: "#FFF",
+        NODE_TEXT_SIZE: 14,
+        NODE_TEXT_COLOR: "#AAA",
+        NODE_SUBTEXT_SIZE: 12,
+        NODE_DEFAULT_COLOR: "#2b2f38",
+        NODE_DEFAULT_BGCOLOR: "#242730",
+        NODE_DEFAULT_BOXCOLOR: "#6e7581",
+        NODE_DEFAULT_SHAPE: "box",
+        NODE_BOX_OUTLINE_COLOR: "#FFF",
+        NODE_BYPASS_BGCOLOR: "#FF00FF",
+        DEFAULT_SHADOW_COLOR: "rgba(0,0,0,0.5)",
+        DEFAULT_GROUP_FONT: 22,
+        WIDGET_BGCOLOR: "#2b2f38",
+        WIDGET_OUTLINE_COLOR: "#6e7581",
+        WIDGET_TEXT_COLOR: "#DDD",
+        WIDGET_SECONDARY_TEXT_COLOR: "#b2b7bd",
+        LINK_COLOR: "#9A9",
+        EVENT_LINK_COLOR: "#A86",
+        CONNECTING_LINK_COLOR: "#AFA"
+      },
+      comfy_base: {
+        "fg-color": "#fff",
+        "bg-color": "#2b2f38",
+        "comfy-menu-bg": "#242730",
+        "comfy-input-bg": "#2b2f38",
+        "input-text": "#ddd",
+        "descrip-text": "#b2b7bd",
+        "drag-text": "#ccc",
+        "error-text": "#ff4444",
+        "border-color": "#6e7581",
+        "tr-even-bg-color": "#2b2f38",
+        "tr-odd-bg-color": "#242730",
+        "content-bg": "#6e7581",
+        "content-fg": "#fff",
+        "content-hover-bg": "#2b2f38",
+        "content-hover-fg": "#fff"
+      }
+    }
+  },
+  nord: {
+    id: "nord",
+    name: "Nord",
+    colors: {
+      node_slot: {
+        BOOLEAN: "",
+        CLIP: "#eacb8b",
+        CLIP_VISION: "#A8DADC",
+        CLIP_VISION_OUTPUT: "#ad7452",
+        CONDITIONING: "#cf876f",
+        CONTROL_NET: "#00d78d",
+        CONTROL_NET_WEIGHTS: "",
+        FLOAT: "",
+        GLIGEN: "",
+        IMAGE: "#80a1c0",
+        IMAGEUPLOAD: "",
+        INT: "",
+        LATENT: "#b38ead",
+        LATENT_KEYFRAME: "",
+        MASK: "#a3bd8d",
+        MODEL: "#8978a7",
+        SAMPLER: "",
+        SIGMAS: "",
+        STRING: "",
+        STYLE_MODEL: "#C2FFAE",
+        T2I_ADAPTER_WEIGHTS: "",
+        TAESD: "#DCC274",
+        TIMESTEP_KEYFRAME: "",
+        UPSCALE_MODEL: "",
+        VAE: "#be616b"
+      },
+      litegraph_base: {
+        BACKGROUND_IMAGE: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFu2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDEgNzkuMTQ2Mjg5OSwgMjAyMy8wNi8yNS0yMDowMTo1NSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI1LjEgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMy0xMS0xM1QwMDoxODowMiswMTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjMtMTEtMTVUMDE6MjA6NDUrMDE6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjMtMTEtMTVUMDE6MjA6NDUrMDE6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwNDFhMmZjLTEzNzQtMTk0ZC1hZWY4LTYxMzM1MTVmNjUwMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyMzFiMTBiMC1iNGZiLTAyNGUtYjEyZS0zMDUzMDNjZDA3YzgiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyMzFiMTBiMC1iNGZiLTAyNGUtYjEyZS0zMDUzMDNjZDA3YzgiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjIzMWIxMGIwLWI0ZmItMDI0ZS1iMTJlLTMwNTMwM2NkMDdjOCIgc3RFdnQ6d2hlbj0iMjAyMy0xMS0xM1QwMDoxODowMiswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDI1LjEgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo1MDQxYTJmYy0xMzc0LTE5NGQtYWVmOC02MTMzNTE1ZjY1MDAiIHN0RXZ0OndoZW49IjIwMjMtMTEtMTVUMDE6MjA6NDUrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNS4xIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz73jWg/AAAAyUlEQVR42u3WKwoAIBRFQRdiMb1idv9Lsxn9gEFw4Dbb8JCTojbbXEJwjJVL2HKwYMGCBQuWLbDmjr+9zrBGjHl1WVcvy2DBggULFizTWQpewSt4HzwsgwULFiwFr7MUvMtS8D54WLBgGSxYCl7BK3iXZbBgwYIFC5bpLAWv4BW8Dx6WwYIFC5aC11kK3mUpeB88LFiwDBYsBa/gFbzLMliwYMGCBct0loJX8AreBw/LYMGCBUvB6ywF77IUvA8eFixYBgsWrNfWAZPltufdad+1AAAAAElFTkSuQmCC",
+        CLEAR_BACKGROUND_COLOR: "#212732",
+        NODE_TITLE_COLOR: "#999",
+        NODE_SELECTED_TITLE_COLOR: "#e5eaf0",
+        NODE_TEXT_SIZE: 14,
+        NODE_TEXT_COLOR: "#bcc2c8",
+        NODE_SUBTEXT_SIZE: 12,
+        NODE_DEFAULT_COLOR: "#2e3440",
+        NODE_DEFAULT_BGCOLOR: "#161b22",
+        NODE_DEFAULT_BOXCOLOR: "#545d70",
+        NODE_DEFAULT_SHAPE: "box",
+        NODE_BOX_OUTLINE_COLOR: "#e5eaf0",
+        NODE_BYPASS_BGCOLOR: "#FF00FF",
+        DEFAULT_SHADOW_COLOR: "rgba(0,0,0,0.5)",
+        DEFAULT_GROUP_FONT: 24,
+        WIDGET_BGCOLOR: "#2e3440",
+        WIDGET_OUTLINE_COLOR: "#545d70",
+        WIDGET_TEXT_COLOR: "#bcc2c8",
+        WIDGET_SECONDARY_TEXT_COLOR: "#999",
+        LINK_COLOR: "#9A9",
+        EVENT_LINK_COLOR: "#A86",
+        CONNECTING_LINK_COLOR: "#AFA"
+      },
+      comfy_base: {
+        "fg-color": "#e5eaf0",
+        "bg-color": "#2e3440",
+        "comfy-menu-bg": "#161b22",
+        "comfy-input-bg": "#2e3440",
+        "input-text": "#bcc2c8",
+        "descrip-text": "#999",
+        "drag-text": "#ccc",
+        "error-text": "#ff4444",
+        "border-color": "#545d70",
+        "tr-even-bg-color": "#2e3440",
+        "tr-odd-bg-color": "#161b22",
+        "content-bg": "#545d70",
+        "content-fg": "#e5eaf0",
+        "content-hover-bg": "#2e3440",
+        "content-hover-fg": "#e5eaf0"
+      }
+    }
+  },
+  github: {
+    id: "github",
+    name: "Github",
+    colors: {
+      node_slot: {
+        BOOLEAN: "",
+        CLIP: "#eacb8b",
+        CLIP_VISION: "#A8DADC",
+        CLIP_VISION_OUTPUT: "#ad7452",
+        CONDITIONING: "#cf876f",
+        CONTROL_NET: "#00d78d",
+        CONTROL_NET_WEIGHTS: "",
+        FLOAT: "",
+        GLIGEN: "",
+        IMAGE: "#80a1c0",
+        IMAGEUPLOAD: "",
+        INT: "",
+        LATENT: "#b38ead",
+        LATENT_KEYFRAME: "",
+        MASK: "#a3bd8d",
+        MODEL: "#8978a7",
+        SAMPLER: "",
+        SIGMAS: "",
+        STRING: "",
+        STYLE_MODEL: "#C2FFAE",
+        T2I_ADAPTER_WEIGHTS: "",
+        TAESD: "#DCC274",
+        TIMESTEP_KEYFRAME: "",
+        UPSCALE_MODEL: "",
+        VAE: "#be616b"
+      },
+      litegraph_base: {
+        BACKGROUND_IMAGE: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGlmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDEgNzkuMTQ2Mjg5OSwgMjAyMy8wNi8yNS0yMDowMTo1NSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI1LjEgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMy0xMS0xM1QwMDoxODowMiswMTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjMtMTEtMTVUMDI6MDQ6NTkrMDE6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjMtMTEtMTVUMDI6MDQ6NTkrMDE6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmIyYzRhNjA5LWJmYTctYTg0MC1iOGFlLTk3MzE2ZjM1ZGIyNyIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjk0ZmNlZGU4LTE1MTctZmQ0MC04ZGU3LWYzOTgxM2E3ODk5ZiIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjIzMWIxMGIwLWI0ZmItMDI0ZS1iMTJlLTMwNTMwM2NkMDdjOCI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MjMxYjEwYjAtYjRmYi0wMjRlLWIxMmUtMzA1MzAzY2QwN2M4IiBzdEV2dDp3aGVuPSIyMDIzLTExLTEzVDAwOjE4OjAyKzAxOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjUuMSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ4OWY1NzlmLTJkNjUtZWQ0Zi04OTg0LTA4NGE2MGE1ZTMzNSIgc3RFdnQ6d2hlbj0iMjAyMy0xMS0xNVQwMjowNDo1OSswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDI1LjEgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpiMmM0YTYwOS1iZmE3LWE4NDAtYjhhZS05NzMxNmYzNWRiMjciIHN0RXZ0OndoZW49IjIwMjMtMTEtMTVUMDI6MDQ6NTkrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNS4xIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4OTe6GAAAAx0lEQVR42u3WMQoAIQxFwRzJys77X8vSLiRgITif7bYbgrwYc/mKXyBoY4VVBgsWLFiwYFmOlTv+9jfDOjHmr8u6eVkGCxYsWLBgmc5S8ApewXvgYRksWLBgKXidpeBdloL3wMOCBctgwVLwCl7BuyyDBQsWLFiwTGcpeAWv4D3wsAwWLFiwFLzOUvAuS8F74GHBgmWwYCl4Ba/gXZbBggULFixYprMUvIJX8B54WAYLFixYCl5nKXiXpeA98LBgwTJYsGC9tg1o8f4TTtqzNQAAAABJRU5ErkJggg==",
+        CLEAR_BACKGROUND_COLOR: "#040506",
+        NODE_TITLE_COLOR: "#999",
+        NODE_SELECTED_TITLE_COLOR: "#e5eaf0",
+        NODE_TEXT_SIZE: 14,
+        NODE_TEXT_COLOR: "#bcc2c8",
+        NODE_SUBTEXT_SIZE: 12,
+        NODE_DEFAULT_COLOR: "#161b22",
+        NODE_DEFAULT_BGCOLOR: "#13171d",
+        NODE_DEFAULT_BOXCOLOR: "#30363d",
+        NODE_DEFAULT_SHAPE: "box",
+        NODE_BOX_OUTLINE_COLOR: "#e5eaf0",
+        NODE_BYPASS_BGCOLOR: "#FF00FF",
+        DEFAULT_SHADOW_COLOR: "rgba(0,0,0,0.5)",
+        DEFAULT_GROUP_FONT: 24,
+        WIDGET_BGCOLOR: "#161b22",
+        WIDGET_OUTLINE_COLOR: "#30363d",
+        WIDGET_TEXT_COLOR: "#bcc2c8",
+        WIDGET_SECONDARY_TEXT_COLOR: "#999",
+        LINK_COLOR: "#9A9",
+        EVENT_LINK_COLOR: "#A86",
+        CONNECTING_LINK_COLOR: "#AFA"
+      },
+      comfy_base: {
+        "fg-color": "#e5eaf0",
+        "bg-color": "#161b22",
+        "comfy-menu-bg": "#13171d",
+        "comfy-input-bg": "#161b22",
+        "input-text": "#bcc2c8",
+        "descrip-text": "#999",
+        "drag-text": "#ccc",
+        "error-text": "#ff4444",
+        "border-color": "#30363d",
+        "tr-even-bg-color": "#161b22",
+        "tr-odd-bg-color": "#13171d",
+        "content-bg": "#30363d",
+        "content-fg": "#e5eaf0",
+        "content-hover-bg": "#161b22",
+        "content-hover-fg": "#e5eaf0"
+      }
+    }
+  }
+};
+const id = "Comfy.ColorPalette";
+const idCustomColorPalettes = "Comfy.CustomColorPalettes";
+const defaultColorPaletteId = "dark";
+const els = {
+  select: null
+};
+const getCustomColorPalettes = /* @__PURE__ */ __name(() => {
+  return app.ui.settings.getSettingValue(idCustomColorPalettes, {});
+}, "getCustomColorPalettes");
+const setCustomColorPalettes = /* @__PURE__ */ __name((customColorPalettes) => {
+  return app.ui.settings.setSettingValue(
+    idCustomColorPalettes,
+    customColorPalettes
+  );
+}, "setCustomColorPalettes");
+const defaultColorPalette = colorPalettes[defaultColorPaletteId];
+const getColorPalette = /* @__PURE__ */ __name((colorPaletteId) => {
+  if (!colorPaletteId) {
+    colorPaletteId = app.ui.settings.getSettingValue(id, defaultColorPaletteId);
+  }
+  if (colorPaletteId.startsWith("custom_")) {
+    colorPaletteId = colorPaletteId.substr(7);
+    let customColorPalettes = getCustomColorPalettes();
+    if (customColorPalettes[colorPaletteId]) {
+      return customColorPalettes[colorPaletteId];
+    }
+  }
+  return colorPalettes[colorPaletteId];
+}, "getColorPalette");
+const setColorPalette = /* @__PURE__ */ __name((colorPaletteId) => {
+  app.ui.settings.setSettingValue(id, colorPaletteId);
+}, "setColorPalette");
+app.registerExtension({
+  name: id,
+  init() {
+    LGraphCanvas.prototype.updateBackground = function(image, clearBackgroundColor) {
+      this._bg_img = new Image();
+      this._bg_img.name = image;
+      this._bg_img.src = image;
+      this._bg_img.onload = () => {
+        this.draw(true, true);
+      };
+      this.background_image = image;
+      this.clear_background = true;
+      this.clear_background_color = clearBackgroundColor;
+      this._pattern = null;
+    };
+  },
+  addCustomNodeDefs(node_defs) {
+    const sortObjectKeys = /* @__PURE__ */ __name((unordered) => {
+      return Object.keys(unordered).sort().reduce((obj, key) => {
+        obj[key] = unordered[key];
+        return obj;
+      }, {});
+    }, "sortObjectKeys");
+    function getSlotTypes() {
+      var types = [];
+      const defs = node_defs;
+      for (const nodeId in defs) {
+        const nodeData = defs[nodeId];
+        var inputs = nodeData["input"]["required"];
+        if (nodeData["input"]["optional"] !== void 0) {
+          inputs = Object.assign(
+            {},
+            nodeData["input"]["required"],
+            nodeData["input"]["optional"]
+          );
+        }
+        for (const inputName in inputs) {
+          const inputData = inputs[inputName];
+          const type = inputData[0];
+          if (!Array.isArray(type)) {
+            types.push(type);
+          }
+        }
+        for (const o in nodeData["output"]) {
+          const output = nodeData["output"][o];
+          types.push(output);
+        }
+      }
+      return types;
+    }
+    __name(getSlotTypes, "getSlotTypes");
+    function completeColorPalette(colorPalette) {
+      var types = getSlotTypes();
+      for (const type of types) {
+        if (!colorPalette.colors.node_slot[type]) {
+          colorPalette.colors.node_slot[type] = "";
+        }
+      }
+      colorPalette.colors.node_slot = sortObjectKeys(
+        colorPalette.colors.node_slot
+      );
+      return colorPalette;
+    }
+    __name(completeColorPalette, "completeColorPalette");
+    const getColorPaletteTemplate = /* @__PURE__ */ __name(async () => {
+      let colorPalette = {
+        id: "my_color_palette_unique_id",
+        name: "My Color Palette",
+        colors: {
+          node_slot: {},
+          litegraph_base: {},
+          comfy_base: {}
+        }
+      };
+      const defaultColorPalette2 = colorPalettes[defaultColorPaletteId];
+      for (const key in defaultColorPalette2.colors.litegraph_base) {
+        if (!colorPalette.colors.litegraph_base[key]) {
+          colorPalette.colors.litegraph_base[key] = "";
+        }
+      }
+      for (const key in defaultColorPalette2.colors.comfy_base) {
+        if (!colorPalette.colors.comfy_base[key]) {
+          colorPalette.colors.comfy_base[key] = "";
+        }
+      }
+      return completeColorPalette(colorPalette);
+    }, "getColorPaletteTemplate");
+    const addCustomColorPalette = /* @__PURE__ */ __name(async (colorPalette) => {
+      if (typeof colorPalette !== "object") {
+        useToastStore().addAlert("Invalid color palette.");
+        return;
+      }
+      if (!colorPalette.id) {
+        useToastStore().addAlert("Color palette missing id.");
+        return;
+      }
+      if (!colorPalette.name) {
+        useToastStore().addAlert("Color palette missing name.");
+        return;
+      }
+      if (!colorPalette.colors) {
+        useToastStore().addAlert("Color palette missing colors.");
+        return;
+      }
+      if (colorPalette.colors.node_slot && typeof colorPalette.colors.node_slot !== "object") {
+        useToastStore().addAlert("Invalid color palette colors.node_slot.");
+        return;
+      }
+      const customColorPalettes = getCustomColorPalettes();
+      customColorPalettes[colorPalette.id] = colorPalette;
+      setCustomColorPalettes(customColorPalettes);
+      for (const option of els.select.childNodes) {
+        if (option.value === "custom_" + colorPalette.id) {
+          els.select.removeChild(option);
+        }
+      }
+      els.select.append(
+        $el("option", {
+          textContent: colorPalette.name + " (custom)",
+          value: "custom_" + colorPalette.id,
+          selected: true
+        })
+      );
+      setColorPalette("custom_" + colorPalette.id);
+      await loadColorPalette(colorPalette);
+    }, "addCustomColorPalette");
+    const deleteCustomColorPalette = /* @__PURE__ */ __name(async (colorPaletteId) => {
+      const customColorPalettes = getCustomColorPalettes();
+      delete customColorPalettes[colorPaletteId];
+      setCustomColorPalettes(customColorPalettes);
+      for (const opt of els.select.childNodes) {
+        const option = opt;
+        if (option.value === defaultColorPaletteId) {
+          option.selected = true;
+        }
+        if (option.value === "custom_" + colorPaletteId) {
+          els.select.removeChild(option);
+        }
+      }
+      setColorPalette(defaultColorPaletteId);
+      await loadColorPalette(getColorPalette());
+    }, "deleteCustomColorPalette");
+    const loadColorPalette = /* @__PURE__ */ __name(async (colorPalette) => {
+      colorPalette = await completeColorPalette(colorPalette);
+      if (colorPalette.colors) {
+        if (colorPalette.colors.node_slot) {
+          Object.assign(
+            app.canvas.default_connection_color_byType,
+            colorPalette.colors.node_slot
+          );
+          Object.assign(
+            LGraphCanvas.link_type_colors,
+            colorPalette.colors.node_slot
+          );
+        }
+        if (colorPalette.colors.litegraph_base) {
+          app.canvas.node_title_color = colorPalette.colors.litegraph_base.NODE_TITLE_COLOR;
+          app.canvas.default_link_color = colorPalette.colors.litegraph_base.LINK_COLOR;
+          for (const key in colorPalette.colors.litegraph_base) {
+            if (colorPalette.colors.litegraph_base.hasOwnProperty(key) && LiteGraph.hasOwnProperty(key)) {
+              LiteGraph[key] = colorPalette.colors.litegraph_base[key];
+            }
+          }
+        }
+        if (colorPalette.colors.comfy_base) {
+          const rootStyle = document.documentElement.style;
+          for (const key in colorPalette.colors.comfy_base) {
+            rootStyle.setProperty(
+              "--" + key,
+              colorPalette.colors.comfy_base[key]
+            );
+          }
+        }
+        if (colorPalette.colors.litegraph_base.NODE_BYPASS_BGCOLOR) {
+          app.bypassBgColor = colorPalette.colors.litegraph_base.NODE_BYPASS_BGCOLOR;
+        }
+        app.canvas.draw(true, true);
+      }
+    }, "loadColorPalette");
+    const fileInput = $el("input", {
+      type: "file",
+      accept: ".json",
+      style: { display: "none" },
+      parent: document.body,
+      onchange: /* @__PURE__ */ __name(() => {
+        const file = fileInput.files[0];
+        if (file.type === "application/json" || file.name.endsWith(".json")) {
+          const reader = new FileReader();
+          reader.onload = async () => {
+            await addCustomColorPalette(JSON.parse(reader.result));
+          };
+          reader.readAsText(file);
+        }
+      }, "onchange")
+    });
+    app.ui.settings.addSetting({
+      id,
+      category: ["Comfy", "ColorPalette"],
+      name: "Color Palette",
+      type: /* @__PURE__ */ __name((name, setter, value) => {
+        const options = [
+          ...Object.values(colorPalettes).map(
+            (c) => $el("option", {
+              textContent: c.name,
+              value: c.id,
+              selected: c.id === value
+            })
+          ),
+          ...Object.values(getCustomColorPalettes()).map(
+            (c) => $el("option", {
+              textContent: `${c.name} (custom)`,
+              value: `custom_${c.id}`,
+              selected: `custom_${c.id}` === value
+            })
+          )
+        ];
+        els.select = $el(
+          "select",
+          {
+            style: {
+              marginBottom: "0.15rem",
+              width: "100%"
+            },
+            onchange: /* @__PURE__ */ __name((e) => {
+              setter(e.target.value);
+            }, "onchange")
+          },
+          options
+        );
+        return $el("tr", [
+          $el("td", [
+            els.select,
+            $el(
+              "div",
+              {
+                style: {
+                  display: "grid",
+                  gap: "4px",
+                  gridAutoFlow: "column"
+                }
+              },
+              [
+                $el("input", {
+                  type: "button",
+                  value: "Export",
+                  onclick: /* @__PURE__ */ __name(async () => {
+                    const colorPaletteId = app.ui.settings.getSettingValue(
+                      id,
+                      defaultColorPaletteId
+                    );
+                    const colorPalette = await completeColorPalette(
+                      getColorPalette(colorPaletteId)
+                    );
+                    const json = JSON.stringify(colorPalette, null, 2);
+                    const blob = new Blob([json], { type: "application/json" });
+                    const url = URL.createObjectURL(blob);
+                    const a = $el("a", {
+                      href: url,
+                      download: colorPaletteId + ".json",
+                      style: { display: "none" },
+                      parent: document.body
+                    });
+                    a.click();
+                    setTimeout(function() {
+                      a.remove();
+                      window.URL.revokeObjectURL(url);
+                    }, 0);
+                  }, "onclick")
+                }),
+                $el("input", {
+                  type: "button",
+                  value: "Import",
+                  onclick: /* @__PURE__ */ __name(() => {
+                    fileInput.click();
+                  }, "onclick")
+                }),
+                $el("input", {
+                  type: "button",
+                  value: "Template",
+                  onclick: /* @__PURE__ */ __name(async () => {
+                    const colorPalette = await getColorPaletteTemplate();
+                    const json = JSON.stringify(colorPalette, null, 2);
+                    const blob = new Blob([json], { type: "application/json" });
+                    const url = URL.createObjectURL(blob);
+                    const a = $el("a", {
+                      href: url,
+                      download: "color_palette.json",
+                      style: { display: "none" },
+                      parent: document.body
+                    });
+                    a.click();
+                    setTimeout(function() {
+                      a.remove();
+                      window.URL.revokeObjectURL(url);
+                    }, 0);
+                  }, "onclick")
+                }),
+                $el("input", {
+                  type: "button",
+                  value: "Delete",
+                  onclick: /* @__PURE__ */ __name(async () => {
+                    let colorPaletteId = app.ui.settings.getSettingValue(
+                      id,
+                      defaultColorPaletteId
+                    );
+                    if (colorPalettes[colorPaletteId]) {
+                      useToastStore().addAlert(
+                        "You cannot delete a built-in color palette."
+                      );
+                      return;
+                    }
+                    if (colorPaletteId.startsWith("custom_")) {
+                      colorPaletteId = colorPaletteId.substr(7);
+                    }
+                    await deleteCustomColorPalette(colorPaletteId);
+                  }, "onclick")
+                })
+              ]
+            )
+          ])
+        ]);
+      }, "type"),
+      defaultValue: defaultColorPaletteId,
+      async onChange(value) {
+        if (!value) {
+          return;
+        }
+        let palette = colorPalettes[value];
+        if (palette) {
+          await loadColorPalette(palette);
+        } else if (value.startsWith("custom_")) {
+          value = value.substr(7);
+          let customColorPalettes = getCustomColorPalettes();
+          if (customColorPalettes[value]) {
+            palette = customColorPalettes[value];
+            await loadColorPalette(customColorPalettes[value]);
+          }
+        }
+        let { BACKGROUND_IMAGE, CLEAR_BACKGROUND_COLOR } = palette.colors.litegraph_base;
+        if (BACKGROUND_IMAGE === void 0 || CLEAR_BACKGROUND_COLOR === void 0) {
+          const base = colorPalettes["dark"].colors.litegraph_base;
+          BACKGROUND_IMAGE = base.BACKGROUND_IMAGE;
+          CLEAR_BACKGROUND_COLOR = base.CLEAR_BACKGROUND_COLOR;
+        }
+        app.canvas.updateBackground(BACKGROUND_IMAGE, CLEAR_BACKGROUND_COLOR);
+      }
+    });
+  }
+});
+window.comfyAPI = window.comfyAPI || {};
+window.comfyAPI.colorPalette = window.comfyAPI.colorPalette || {};
+window.comfyAPI.colorPalette.defaultColorPalette = defaultColorPalette;
+window.comfyAPI.colorPalette.getColorPalette = getColorPalette;
+export {
+  defaultColorPalette as d,
+  getColorPalette as g
+};
+//# sourceMappingURL=colorPalette-D5oi2-2V.js.map

web/assets/index-BMC1ey-i.js

@@ -1,6 +1,8 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { aM as ComfyDialog, aN as $el, aO as ComfyApp, c as app, k as LiteGraph, aH as LGraphCanvas, e as LGraphNode, aP as applyTextReplacements, aQ as ComfyWidgets, aR as addValueControlWidgets, aS as DraggableList, av as useNodeDefStore, aT as api, L as LGraphGroup, aU as useToastStore, at as NodeSourceType, aV as NodeBadgeMode, u as useSettingStore, q as computed, aW as getColorPalette, w as watch, aX as BadgePosition, aJ as LGraphBadge$1, aY as _, aZ as defaultColorPalette } from "./index-exUB01hM.js";
+import { c9 as ComfyDialog, ca as $el, cb as ComfyApp, k as app, z as LiteGraph, aP as LGraphCanvas, cc as DraggableList, bO as useToastStore, aq as useNodeDefStore, b4 as api, L as LGraphGroup, cd as KeyComboImpl, aT as useKeybindingStore, aL as useCommandStore, l as LGraphNode, ce as ComfyWidgets, cf as applyTextReplacements, aA as NodeSourceType, cg as NodeBadgeMode, h as useSettingStore, F as computed, w as watch, ch as BadgePosition, aR as LGraphBadge, au as _ } from "./index-DGAbdBYF.js";
+import { g as getColorPalette, d as defaultColorPalette } from "./colorPalette-D5oi2-2V.js";
+import { mergeIfValid, getWidgetConfig, setWidgetConfig } from "./widgetInputs-DdoWwzg5.js";
 class ClipspaceDialog extends ComfyDialog {
   static {
     __name(this, "ClipspaceDialog");
@@ -423,731 +425,6 @@ app.registerExtension({
     window.addEventListener("keydown", editAttention);
   }
 });
-const CONVERTED_TYPE = "converted-widget";
-const VALID_TYPES = ["STRING", "combo", "number", "toggle", "BOOLEAN"];
-const CONFIG = Symbol();
-const GET_CONFIG = Symbol();
-const TARGET = Symbol();
-const replacePropertyName = "Run widget replace on values";
-class PrimitiveNode extends LGraphNode {
-  static {
-    __name(this, "PrimitiveNode");
-  }
-  controlValues;
-  lastType;
-  static category;
-  constructor(title) {
-    super(title);
-    this.addOutput("connect to widget input", "*");
-    this.serialize_widgets = true;
-    this.isVirtualNode = true;
-    if (!this.properties || !(replacePropertyName in this.properties)) {
-      this.addProperty(replacePropertyName, false, "boolean");
-    }
-  }
-  applyToGraph(extraLinks = []) {
-    if (!this.outputs[0].links?.length) return;
-    function get_links(node) {
-      let links2 = [];
-      for (const l of node.outputs[0].links) {
-        const linkInfo = app.graph.links[l];
-        const n = node.graph.getNodeById(linkInfo.target_id);
-        if (n.type == "Reroute") {
-          links2 = links2.concat(get_links(n));
-        } else {
-          links2.push(l);
-        }
-      }
-      return links2;
-    }
-    __name(get_links, "get_links");
-    let links = [
-      ...get_links(this).map((l) => app.graph.links[l]),
-      ...extraLinks
-    ];
-    let v = this.widgets?.[0].value;
-    if (v && this.properties[replacePropertyName]) {
-      v = applyTextReplacements(app, v);
-    }
-    for (const linkInfo of links) {
-      const node = this.graph.getNodeById(linkInfo.target_id);
-      const input = node.inputs[linkInfo.target_slot];
-      let widget;
-      if (input.widget[TARGET]) {
-        widget = input.widget[TARGET];
-      } else {
-        const widgetName = input.widget.name;
-        if (widgetName) {
-          widget = node.widgets.find((w) => w.name === widgetName);
-        }
-      }
-      if (widget) {
-        widget.value = v;
-        if (widget.callback) {
-          widget.callback(
-            widget.value,
-            app.canvas,
-            node,
-            app.canvas.graph_mouse,
-            {}
-          );
-        }
-      }
-    }
-  }
-  refreshComboInNode() {
-    const widget = this.widgets?.[0];
-    if (widget?.type === "combo") {
-      widget.options.values = this.outputs[0].widget[GET_CONFIG]()[0];
-      if (!widget.options.values.includes(widget.value)) {
-        widget.value = widget.options.values[0];
-        widget.callback(widget.value);
-      }
-    }
-  }
-  onAfterGraphConfigured() {
-    if (this.outputs[0].links?.length && !this.widgets?.length) {
-      if (!this.#onFirstConnection()) return;
-      if (this.widgets) {
-        for (let i = 0; i < this.widgets_values.length; i++) {
-          const w = this.widgets[i];
-          if (w) {
-            w.value = this.widgets_values[i];
-          }
-        }
-      }
-      this.#mergeWidgetConfig();
-    }
-  }
-  onConnectionsChange(_2, index, connected) {
-    if (app.configuringGraph) {
-      return;
-    }
-    const links = this.outputs[0].links;
-    if (connected) {
-      if (links?.length && !this.widgets?.length) {
-        this.#onFirstConnection();
-      }
-    } else {
-      this.#mergeWidgetConfig();
-      if (!links?.length) {
-        this.onLastDisconnect();
-      }
-    }
-  }
-  onConnectOutput(slot, type, input, target_node, target_slot) {
-    if (!input.widget) {
-      if (!(input.type in ComfyWidgets)) return false;
-    }
-    if (this.outputs[slot].links?.length) {
-      const valid = this.#isValidConnection(input);
-      if (valid) {
-        this.applyToGraph([{ target_id: target_node.id, target_slot }]);
-      }
-      return valid;
-    }
-  }
-  #onFirstConnection(recreating) {
-    if (!this.outputs[0].links) {
-      this.onLastDisconnect();
-      return;
-    }
-    const linkId = this.outputs[0].links[0];
-    const link = this.graph.links[linkId];
-    if (!link) return;
-    const theirNode = this.graph.getNodeById(link.target_id);
-    if (!theirNode || !theirNode.inputs) return;
-    const input = theirNode.inputs[link.target_slot];
-    if (!input) return;
-    let widget;
-    if (!input.widget) {
-      if (!(input.type in ComfyWidgets)) return;
-      widget = { name: input.name, [GET_CONFIG]: () => [input.type, {}] };
-    } else {
-      widget = input.widget;
-    }
-    const config = widget[GET_CONFIG]?.();
-    if (!config) return;
-    const { type } = getWidgetType(config);
-    this.outputs[0].type = type;
-    this.outputs[0].name = type;
-    this.outputs[0].widget = widget;
-    this.#createWidget(
-      widget[CONFIG] ?? config,
-      theirNode,
-      widget.name,
-      recreating,
-      widget[TARGET]
-    );
-  }
-  #createWidget(inputData, node, widgetName, recreating, targetWidget) {
-    let type = inputData[0];
-    if (type instanceof Array) {
-      type = "COMBO";
-    }
-    const size = this.size;
-    let widget;
-    if (type in ComfyWidgets) {
-      widget = (ComfyWidgets[type](this, "value", inputData, app) || {}).widget;
-    } else {
-      widget = this.addWidget(type, "value", null, () => {
-      }, {});
-    }
-    if (targetWidget) {
-      widget.value = targetWidget.value;
-    } else if (node?.widgets && widget) {
-      const theirWidget = node.widgets.find((w) => w.name === widgetName);
-      if (theirWidget) {
-        widget.value = theirWidget.value;
-      }
-    }
-    if (!inputData?.[1]?.control_after_generate && (widget.type === "number" || widget.type === "combo")) {
-      let control_value = this.widgets_values?.[1];
-      if (!control_value) {
-        control_value = "fixed";
-      }
-      addValueControlWidgets(
-        this,
-        widget,
-        control_value,
-        void 0,
-        inputData
-      );
-      let filter = this.widgets_values?.[2];
-      if (filter && this.widgets.length === 3) {
-        this.widgets[2].value = filter;
-      }
-    }
-    const controlValues = this.controlValues;
-    if (this.lastType === this.widgets[0].type && controlValues?.length === this.widgets.length - 1) {
-      for (let i = 0; i < controlValues.length; i++) {
-        this.widgets[i + 1].value = controlValues[i];
-      }
-    }
-    const callback = widget.callback;
-    const self = this;
-    widget.callback = function() {
-      const r = callback ? callback.apply(this, arguments) : void 0;
-      self.applyToGraph();
-      return r;
-    };
-    this.size = [
-      Math.max(this.size[0], size[0]),
-      Math.max(this.size[1], size[1])
-    ];
-    if (!recreating) {
-      const sz = this.computeSize();
-      if (this.size[0] < sz[0]) {
-        this.size[0] = sz[0];
-      }
-      if (this.size[1] < sz[1]) {
-        this.size[1] = sz[1];
-      }
-      requestAnimationFrame(() => {
-        if (this.onResize) {
-          this.onResize(this.size);
-        }
-      });
-    }
-  }
-  recreateWidget() {
-    const values = this.widgets?.map((w) => w.value);
-    this.#removeWidgets();
-    this.#onFirstConnection(true);
-    if (values?.length) {
-      for (let i = 0; i < this.widgets?.length; i++)
-        this.widgets[i].value = values[i];
-    }
-    return this.widgets?.[0];
-  }
-  #mergeWidgetConfig() {
-    const output = this.outputs[0];
-    const links = output.links;
-    const hasConfig = !!output.widget[CONFIG];
-    if (hasConfig) {
-      delete output.widget[CONFIG];
-    }
-    if (links?.length < 2 && hasConfig) {
-      if (links.length) {
-        this.recreateWidget();
-      }
-      return;
-    }
-    const config1 = output.widget[GET_CONFIG]();
-    const isNumber = config1[0] === "INT" || config1[0] === "FLOAT";
-    if (!isNumber) return;
-    for (const linkId of links) {
-      const link = app.graph.links[linkId];
-      if (!link) continue;
-      const theirNode = app.graph.getNodeById(link.target_id);
-      const theirInput = theirNode.inputs[link.target_slot];
-      this.#isValidConnection(theirInput, hasConfig);
-    }
-  }
-  #isValidConnection(input, forceUpdate) {
-    const output = this.outputs[0];
-    const config2 = input.widget[GET_CONFIG]();
-    return !!mergeIfValid.call(
-      this,
-      output,
-      config2,
-      forceUpdate,
-      this.recreateWidget
-    );
-  }
-  #removeWidgets() {
-    if (this.widgets) {
-      for (const w of this.widgets) {
-        if (w.onRemove) {
-          w.onRemove();
-        }
-      }
-      this.controlValues = [];
-      this.lastType = this.widgets[0]?.type;
-      for (let i = 1; i < this.widgets.length; i++) {
-        this.controlValues.push(this.widgets[i].value);
-      }
-      setTimeout(() => {
-        delete this.lastType;
-        delete this.controlValues;
-      }, 15);
-      this.widgets.length = 0;
-    }
-  }
-  onLastDisconnect() {
-    this.outputs[0].type = "*";
-    this.outputs[0].name = "connect to widget input";
-    delete this.outputs[0].widget;
-    this.#removeWidgets();
-  }
-}
-function getWidgetConfig(slot) {
-  return slot.widget[CONFIG] ?? slot.widget[GET_CONFIG]();
-}
-__name(getWidgetConfig, "getWidgetConfig");
-function getConfig(widgetName) {
-  const { nodeData } = this.constructor;
-  return nodeData?.input?.required?.[widgetName] ?? nodeData?.input?.optional?.[widgetName];
-}
-__name(getConfig, "getConfig");
-function isConvertibleWidget(widget, config) {
-  return (VALID_TYPES.includes(widget.type) || VALID_TYPES.includes(config[0])) && !widget.options?.forceInput;
-}
-__name(isConvertibleWidget, "isConvertibleWidget");
-function hideWidget(node, widget, suffix = "") {
-  if (widget.type?.startsWith(CONVERTED_TYPE)) return;
-  widget.origType = widget.type;
-  widget.origComputeSize = widget.computeSize;
-  widget.origSerializeValue = widget.serializeValue;
-  widget.computeSize = () => [0, -4];
-  widget.type = CONVERTED_TYPE + suffix;
-  widget.serializeValue = () => {
-    if (!node.inputs) {
-      return void 0;
-    }
-    let node_input = node.inputs.find((i) => i.widget?.name === widget.name);
-    if (!node_input || !node_input.link) {
-      return void 0;
-    }
-    return widget.origSerializeValue ? widget.origSerializeValue() : widget.value;
-  };
-  if (widget.linkedWidgets) {
-    for (const w of widget.linkedWidgets) {
-      hideWidget(node, w, ":" + widget.name);
-    }
-  }
-}
-__name(hideWidget, "hideWidget");
-function showWidget(widget) {
-  widget.type = widget.origType;
-  widget.computeSize = widget.origComputeSize;
-  widget.serializeValue = widget.origSerializeValue;
-  delete widget.origType;
-  delete widget.origComputeSize;
-  delete widget.origSerializeValue;
-  if (widget.linkedWidgets) {
-    for (const w of widget.linkedWidgets) {
-      showWidget(w);
-    }
-  }
-}
-__name(showWidget, "showWidget");
-function convertToInput(node, widget, config) {
-  hideWidget(node, widget);
-  const { type } = getWidgetType(config);
-  const sz = node.size;
-  const inputIsOptional = !!widget.options?.inputIsOptional;
-  node.addInput(widget.name, type, {
-    // @ts-expect-error GET_CONFIG is not defined in LiteGraph
-    widget: { name: widget.name, [GET_CONFIG]: () => config },
-    // @ts-expect-error LiteGraph.SlotShape is not typed.
-    ...inputIsOptional ? { shape: LiteGraph.SlotShape.HollowCircle } : {}
-  });
-  for (const widget2 of node.widgets) {
-    widget2.last_y += LiteGraph.NODE_SLOT_HEIGHT;
-  }
-  node.setSize([Math.max(sz[0], node.size[0]), Math.max(sz[1], node.size[1])]);
-}
-__name(convertToInput, "convertToInput");
-function convertToWidget(node, widget) {
-  showWidget(widget);
-  const sz = node.size;
-  node.removeInput(node.inputs.findIndex((i) => i.widget?.name === widget.name));
-  for (const widget2 of node.widgets) {
-    widget2.last_y -= LiteGraph.NODE_SLOT_HEIGHT;
-  }
-  node.setSize([Math.max(sz[0], node.size[0]), Math.max(sz[1], node.size[1])]);
-}
-__name(convertToWidget, "convertToWidget");
-function getWidgetType(config) {
-  let type = config[0];
-  if (type instanceof Array) {
-    type = "COMBO";
-  }
-  return { type };
-}
-__name(getWidgetType, "getWidgetType");
-function isValidCombo(combo, obj) {
-  if (!(obj instanceof Array)) {
-    console.log(`connection rejected: tried to connect combo to ${obj}`);
-    return false;
-  }
-  if (combo.length !== obj.length) {
-    console.log(`connection rejected: combo lists dont match`);
-    return false;
-  }
-  if (combo.find((v, i) => obj[i] !== v)) {
-    console.log(`connection rejected: combo lists dont match`);
-    return false;
-  }
-  return true;
-}
-__name(isValidCombo, "isValidCombo");
-function isPrimitiveNode(node) {
-  return node.type === "PrimitiveNode";
-}
-__name(isPrimitiveNode, "isPrimitiveNode");
-function setWidgetConfig(slot, config, target) {
-  if (!slot.widget) return;
-  if (config) {
-    slot.widget[GET_CONFIG] = () => config;
-    slot.widget[TARGET] = target;
-  } else {
-    delete slot.widget;
-  }
-  if (slot.link) {
-    const link = app.graph.links[slot.link];
-    if (link) {
-      const originNode = app.graph.getNodeById(link.origin_id);
-      if (isPrimitiveNode(originNode)) {
-        if (config) {
-          originNode.recreateWidget();
-        } else if (!app.configuringGraph) {
-          originNode.disconnectOutput(0);
-          originNode.onLastDisconnect();
-        }
-      }
-    }
-  }
-}
-__name(setWidgetConfig, "setWidgetConfig");
-function mergeIfValid(output, config2, forceUpdate, recreateWidget, config1) {
-  if (!config1) {
-    config1 = output.widget[CONFIG] ?? output.widget[GET_CONFIG]();
-  }
-  if (config1[0] instanceof Array) {
-    if (!isValidCombo(config1[0], config2[0])) return;
-  } else if (config1[0] !== config2[0]) {
-    console.log(`connection rejected: types dont match`, config1[0], config2[0]);
-    return;
-  }
-  const keys = /* @__PURE__ */ new Set([
-    ...Object.keys(config1[1] ?? {}),
-    ...Object.keys(config2[1] ?? {})
-  ]);
-  let customConfig;
-  const getCustomConfig = /* @__PURE__ */ __name(() => {
-    if (!customConfig) {
-      if (typeof structuredClone === "undefined") {
-        customConfig = JSON.parse(JSON.stringify(config1[1] ?? {}));
-      } else {
-        customConfig = structuredClone(config1[1] ?? {});
-      }
-    }
-    return customConfig;
-  }, "getCustomConfig");
-  const isNumber = config1[0] === "INT" || config1[0] === "FLOAT";
-  for (const k of keys.values()) {
-    if (k !== "default" && k !== "forceInput" && k !== "defaultInput" && k !== "control_after_generate" && k !== "multiline" && k !== "tooltip") {
-      let v1 = config1[1][k];
-      let v2 = config2[1]?.[k];
-      if (v1 === v2 || !v1 && !v2) continue;
-      if (isNumber) {
-        if (k === "min") {
-          const theirMax = config2[1]?.["max"];
-          if (theirMax != null && v1 > theirMax) {
-            console.log("connection rejected: min > max", v1, theirMax);
-            return;
-          }
-          getCustomConfig()[k] = v1 == null ? v2 : v2 == null ? v1 : Math.max(v1, v2);
-          continue;
-        } else if (k === "max") {
-          const theirMin = config2[1]?.["min"];
-          if (theirMin != null && v1 < theirMin) {
-            console.log("connection rejected: max < min", v1, theirMin);
-            return;
-          }
-          getCustomConfig()[k] = v1 == null ? v2 : v2 == null ? v1 : Math.min(v1, v2);
-          continue;
-        } else if (k === "step") {
-          let step;
-          if (v1 == null) {
-            step = v2;
-          } else if (v2 == null) {
-            step = v1;
-          } else {
-            if (v1 < v2) {
-              const a = v2;
-              v2 = v1;
-              v1 = a;
-            }
-            if (v1 % v2) {
-              console.log(
-                "connection rejected: steps not divisible",
-                "current:",
-                v1,
-                "new:",
-                v2
-              );
-              return;
-            }
-            step = v1;
-          }
-          getCustomConfig()[k] = step;
-          continue;
-        }
-      }
-      console.log(`connection rejected: config ${k} values dont match`, v1, v2);
-      return;
-    }
-  }
-  if (customConfig || forceUpdate) {
-    if (customConfig) {
-      output.widget[CONFIG] = [config1[0], customConfig];
-    }
-    const widget = recreateWidget?.call(this);
-    if (widget) {
-      const min = widget.options.min;
-      const max = widget.options.max;
-      if (min != null && widget.value < min) widget.value = min;
-      if (max != null && widget.value > max) widget.value = max;
-      widget.callback(widget.value);
-    }
-  }
-  return { customConfig };
-}
-__name(mergeIfValid, "mergeIfValid");
-let useConversionSubmenusSetting;
-app.registerExtension({
-  name: "Comfy.WidgetInputs",
-  init() {
-    useConversionSubmenusSetting = app.ui.settings.addSetting({
-      id: "Comfy.NodeInputConversionSubmenus",
-      name: "In the node context menu, place the entries that convert between input/widget in sub-menus.",
-      type: "boolean",
-      defaultValue: true
-    });
-  },
-  async beforeRegisterNodeDef(nodeType, nodeData, app2) {
-    const origGetExtraMenuOptions = nodeType.prototype.getExtraMenuOptions;
-    nodeType.prototype.convertWidgetToInput = function(widget) {
-      const config = getConfig.call(this, widget.name) ?? [
-        widget.type,
-        widget.options || {}
-      ];
-      if (!isConvertibleWidget(widget, config)) return false;
-      convertToInput(this, widget, config);
-      return true;
-    };
-    nodeType.prototype.getExtraMenuOptions = function(_2, options) {
-      const r = origGetExtraMenuOptions ? origGetExtraMenuOptions.apply(this, arguments) : void 0;
-      if (this.widgets) {
-        let toInput = [];
-        let toWidget = [];
-        for (const w of this.widgets) {
-          if (w.options?.forceInput) {
-            continue;
-          }
-          if (w.type === CONVERTED_TYPE) {
-            toWidget.push({
-              content: `Convert ${w.name} to widget`,
-              callback: /* @__PURE__ */ __name(() => convertToWidget(this, w), "callback")
-            });
-          } else {
-            const config = getConfig.call(this, w.name) ?? [
-              w.type,
-              w.options || {}
-            ];
-            if (isConvertibleWidget(w, config)) {
-              toInput.push({
-                content: `Convert ${w.name} to input`,
-                callback: /* @__PURE__ */ __name(() => convertToInput(this, w, config), "callback")
-              });
-            }
-          }
-        }
-        if (toInput.length) {
-          if (useConversionSubmenusSetting.value) {
-            options.push({
-              content: "Convert Widget to Input",
-              submenu: {
-                options: toInput
-              }
-            });
-          } else {
-            options.push(...toInput, null);
-          }
-        }
-        if (toWidget.length) {
-          if (useConversionSubmenusSetting.value) {
-            options.push({
-              content: "Convert Input to Widget",
-              submenu: {
-                options: toWidget
-              }
-            });
-          } else {
-            options.push(...toWidget, null);
-          }
-        }
-      }
-      return r;
-    };
-    nodeType.prototype.onGraphConfigured = function() {
-      if (!this.inputs) return;
-      this.widgets ??= [];
-      for (const input of this.inputs) {
-        if (input.widget) {
-          if (!input.widget[GET_CONFIG]) {
-            input.widget[GET_CONFIG] = () => getConfig.call(this, input.widget.name);
-          }
-          if (input.widget.config) {
-            if (input.widget.config[0] instanceof Array) {
-              input.type = "COMBO";
-              const link = app2.graph.links[input.link];
-              if (link) {
-                link.type = input.type;
-              }
-            }
-            delete input.widget.config;
-          }
-          const w = this.widgets.find((w2) => w2.name === input.widget.name);
-          if (w) {
-            hideWidget(this, w);
-          } else {
-            convertToWidget(this, input);
-          }
-        }
-      }
-    };
-    const origOnNodeCreated = nodeType.prototype.onNodeCreated;
-    nodeType.prototype.onNodeCreated = function() {
-      const r = origOnNodeCreated ? origOnNodeCreated.apply(this) : void 0;
-      if (!app2.configuringGraph && this.widgets) {
-        for (const w of this.widgets) {
-          if (w?.options?.forceInput || w?.options?.defaultInput) {
-            const config = getConfig.call(this, w.name) ?? [
-              w.type,
-              w.options || {}
-            ];
-            convertToInput(this, w, config);
-          }
-        }
-      }
-      return r;
-    };
-    const origOnConfigure = nodeType.prototype.onConfigure;
-    nodeType.prototype.onConfigure = function() {
-      const r = origOnConfigure ? origOnConfigure.apply(this, arguments) : void 0;
-      if (!app2.configuringGraph && this.inputs) {
-        for (const input of this.inputs) {
-          if (input.widget && !input.widget[GET_CONFIG]) {
-            input.widget[GET_CONFIG] = () => getConfig.call(this, input.widget.name);
-            const w = this.widgets.find((w2) => w2.name === input.widget.name);
-            if (w) {
-              hideWidget(this, w);
-            }
-          }
-        }
-      }
-      return r;
-    };
-    function isNodeAtPos(pos) {
-      for (const n of app2.graph.nodes) {
-        if (n.pos[0] === pos[0] && n.pos[1] === pos[1]) {
-          return true;
-        }
-      }
-      return false;
-    }
-    __name(isNodeAtPos, "isNodeAtPos");
-    const origOnInputDblClick = nodeType.prototype.onInputDblClick;
-    const ignoreDblClick = Symbol();
-    nodeType.prototype.onInputDblClick = function(slot) {
-      const r = origOnInputDblClick ? origOnInputDblClick.apply(this, arguments) : void 0;
-      const input = this.inputs[slot];
-      if (!input.widget || !input[ignoreDblClick]) {
-        if (!(input.type in ComfyWidgets) && !(input.widget[GET_CONFIG]?.()?.[0] instanceof Array)) {
-          return r;
-        }
-      }
-      const node = LiteGraph.createNode("PrimitiveNode");
-      app2.graph.add(node);
-      const pos = [
-        this.pos[0] - node.size[0] - 30,
-        this.pos[1]
-      ];
-      while (isNodeAtPos(pos)) {
-        pos[1] += LiteGraph.NODE_TITLE_HEIGHT;
-      }
-      node.pos = pos;
-      node.connect(0, this, slot);
-      node.title = input.name;
-      input[ignoreDblClick] = true;
-      setTimeout(() => {
-        delete input[ignoreDblClick];
-      }, 300);
-      return r;
-    };
-    const onConnectInput = nodeType.prototype.onConnectInput;
-    nodeType.prototype.onConnectInput = function(targetSlot, type, output, originNode, originSlot) {
-      const v = onConnectInput?.(this, arguments);
-      if (type !== "COMBO") return v;
-      if (originNode.outputs[originSlot].widget) return v;
-      const targetCombo = this.inputs[targetSlot].widget?.[GET_CONFIG]?.()?.[0];
-      if (!targetCombo || !(targetCombo instanceof Array)) return v;
-      const originConfig = originNode.constructor?.nodeData?.output?.[originSlot];
-      if (!originConfig || !isValidCombo(targetCombo, originConfig)) {
-        return false;
-      }
-      return v;
-    };
-  },
-  registerCustomNodes() {
-    LiteGraph.registerNodeType(
-      "PrimitiveNode",
-      Object.assign(PrimitiveNode, {
-        title: "Primitive"
-      })
-    );
-    PrimitiveNode.category = "utils";
-  }
-});
-window.comfyAPI = window.comfyAPI || {};
-window.comfyAPI.widgetInputs = window.comfyAPI.widgetInputs || {};
-window.comfyAPI.widgetInputs.getWidgetConfig = getWidgetConfig;
-window.comfyAPI.widgetInputs.setWidgetConfig = setWidgetConfig;
-window.comfyAPI.widgetInputs.mergeIfValid = mergeIfValid;
 const ORDER = Symbol();
 const PREFIX$1 = "workflow";
 const SEPARATOR$1 = ">";
@@ -1478,7 +755,7 @@ class ManageGroupDialog extends ComfyDialog {
                 (n) => n.type === `${PREFIX$1}${SEPARATOR$1}` + this.selectedGroup
               );
               if (node) {
-                alert(
+                useToastStore().addAlert(
                   "This group node is in use in the current workflow, please first remove these."
                 );
                 return;
@@ -1633,7 +910,7 @@ class GroupNodeBuilder {
     const used = Workflow.isInUseGroupNode(name);
     switch (used) {
       case Workflow.InUse.InWorkflow:
-        alert(
+        useToastStore().addAlert(
           "An in use group node with this name already exists embedded in this workflow, please remove any instances or use a new name."
         );
         return;
@@ -2096,16 +1373,6 @@ class GroupNodeConfig {
     }
   }
   static async registerFromWorkflow(groupNodes, missingNodeTypes) {
-    const clean = app.clean;
-    app.clean = function() {
-      for (const g in groupNodes) {
-        try {
-          LiteGraph.unregisterNodeType(`${PREFIX}${SEPARATOR}` + g);
-        } catch (error) {
-        }
-      }
-      app.clean = clean;
-    };
     for (const g in groupNodes) {
       const groupData = groupNodes[g];
       let hasMissing = false;
@@ -2757,6 +2024,9 @@ const ext$1 = {
   nodeCreated(node) {
     if (GroupNodeHandler.isGroupNode(node)) {
       node[GROUP] = new GroupNodeHandler(node);
+      if (node.title && node[GROUP]?.groupData?.nodeData) {
+        Workflow.storeGroupNode(node.title, node[GROUP].groupData.nodeData);
+      }
     }
   },
   async refreshComboInNodes(defs) {
@@ -3030,37 +2300,21 @@ app.registerExtension({
   name: "Comfy.Keybinds",
   init() {
     const keybindListener = /* @__PURE__ */ __name(async function(event) {
-      const modifierPressed = event.ctrlKey || event.metaKey;
-      if (modifierPressed && event.key === "Enter") {
-        if (event.altKey) {
-          await api.interrupt();
-          useToastStore().add({
-            severity: "info",
-            summary: "Interrupted",
-            detail: "Execution has been interrupted",
-            life: 1e3
-          });
-          return;
-        }
-        app.queuePrompt(event.shiftKey ? -1 : 0).then();
+      if (!app.vueAppReady) return;
+      const keyCombo = KeyComboImpl.fromEvent(event);
+      if (keyCombo.isModifier) {
         return;
       }
       const target = event.composedPath()[0];
-      if (target.tagName === "TEXTAREA" || target.tagName === "INPUT" || target.tagName === "SPAN" && target.classList.contains("property_value")) {
+      if (!keyCombo.hasModifier && (target.tagName === "TEXTAREA" || target.tagName === "INPUT" || target.tagName === "SPAN" && target.classList.contains("property_value"))) {
         return;
       }
-      const modifierKeyIdMap = {
-        s: "#comfy-save-button",
-        o: "#comfy-file-input",
-        Backspace: "#comfy-clear-button",
-        d: "#comfy-load-default-button",
-        g: "#comfy-group-selected-nodes-button"
-      };
-      const modifierKeybindId = modifierKeyIdMap[event.key];
-      if (modifierPressed && modifierKeybindId) {
+      const keybindingStore = useKeybindingStore();
+      const commandStore = useCommandStore();
+      const keybinding = keybindingStore.getKeybinding(keyCombo);
+      if (keybinding && keybinding.targetSelector !== "#graph-canvas") {
+        await commandStore.execute(keybinding.commandId);
         event.preventDefault();
-        const elem = document.querySelector(modifierKeybindId);
-        elem.click();
         return;
       }
       if (event.ctrlKey || event.altKey || event.metaKey) {
@@ -3079,18 +2333,8 @@ app.registerExtension({
           d.close();
         });
       }
-      const keyIdMap = {
-        q: ".queue-tab-button.side-bar-button",
-        h: ".queue-tab-button.side-bar-button",
-        r: "#comfy-refresh-button"
-      };
-      const buttonId = keyIdMap[event.key];
-      if (buttonId) {
-        const button = document.querySelector(buttonId);
-        button.click();
-      }
     }, "keybindListener");
-    window.addEventListener("keydown", keybindListener, true);
+    window.addEventListener("keydown", keybindListener);
   }
 });
 const id$1 = "Comfy.LinkRenderMode";
@@ -3103,15 +2347,20 @@ const ext = {
       name: "Link Render Mode",
       defaultValue: 2,
       type: "combo",
-      // @ts-expect-error
-      options: [...LiteGraph.LINK_RENDER_MODES, "Hidden"].map((m, i) => ({
-        value: i,
-        text: m,
-        selected: i == app2.canvas.links_render_mode
-      })),
+      options: [
+        { value: LiteGraph.STRAIGHT_LINK, text: "Straight" },
+        { value: LiteGraph.LINEAR_LINK, text: "Linear" },
+        { value: LiteGraph.SPLINE_LINK, text: "Spline" },
+        { value: LiteGraph.HIDDEN_LINK, text: "Hidden" }
+      ],
       onChange(value) {
         app2.canvas.links_render_mode = +value;
-        app2.graph.setDirtyCanvas(true);
+        app2.canvas.setDirty(
+          /* fg */
+          false,
+          /* bg */
+          true
+        );
       }
     });
   }
@@ -4140,7 +3389,7 @@ class ManageTemplates extends ComfyDialog {
         await api.storeUserData(file, templates, { stringify: false });
       } catch (error) {
         console.error(error);
-        alert(error.message);
+        useToastStore().addAlert(error.message);
       }
     } else {
       localStorage.setItem(id, JSON.stringify(this.templates));
@@ -4169,7 +3418,7 @@ class ManageTemplates extends ComfyDialog {
   }
   exportAll() {
     if (this.templates.length == 0) {
-      alert("No templates to export.");
+      useToastStore().addAlert("No templates to export.");
       return;
     }
     const json = JSON.stringify({ templates: this.templates }, null, 2);
@@ -4483,7 +3732,7 @@ app.registerExtension({
             this.onConnectionsChange(LiteGraph.INPUT, null, true, null);
           });
         };
-        this.onConnectionsChange = function(type, index, connected, link_info) {
+        this.onConnectionsChange = (type, index, connected, link_info) => {
           this.applyOrientation();
           if (connected && type === LiteGraph.OUTPUT) {
             const types = new Set(
@@ -4661,6 +3910,7 @@ app.registerExtension({
             }, "callback")
           }
         );
+        return [];
       }
       applyOrientation() {
         this.horizontal = this.properties.horizontal;
@@ -5112,7 +4362,7 @@ app.registerExtension({
         capture();
       } else if (!node.imgs?.length) {
         const err = `No webcam image captured`;
-        alert(err);
+        useToastStore().addAlert(err);
         throw new Error(err);
       }
       const blob = await new Promise((r) => canvas.toBlob(r));
@@ -5128,7 +4378,7 @@ app.registerExtension({
       });
       if (resp.status !== 200) {
         const err = `Error uploading camera image: ${resp.status} - ${resp.statusText}`;
-        alert(err);
+        useToastStore().addAlert(err);
         throw new Error(err);
       }
       return `webcam/${name} [temp]`;
@@ -5188,10 +4438,10 @@ async function uploadFile(audioWidget, audioUIWidget, file2, updateNode, pasted
         audioWidget.value = path;
       }
     } else {
-      alert(resp.status + " - " + resp.statusText);
+      useToastStore().addAlert(resp.status + " - " + resp.statusText);
     }
   } catch (error) {
-    alert(error);
+    useToastStore().addAlert(error);
   }
 }
 __name(uploadFile, "uploadFile");
@@ -5390,7 +4640,7 @@ class NodeBadgeExtension {
     node.badgePosition = BadgePosition.TopRight;
     node.badge_enabled = true;
     const badge = computed(
-      () => new LGraphBadge$1({
+      () => new LGraphBadge({
         text: _.truncate(
           [
             getNodeIdBadgeText(node, this.nodeIdBadgeMode.value),
@@ -5412,4 +4662,4 @@ class NodeBadgeExtension {
   }
 }
 app.registerExtension(new NodeBadgeExtension());
-//# sourceMappingURL=index-BX11rJu2.js.map
+//# sourceMappingURL=index-BMC1ey-i.js.map

web/assets/userSelection-CmI-fOSC.css

@@ -1,3 +1,37 @@
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 1em;
+  height: 1em;
+}
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: 0.15em solid #fff;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: #fff transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 .comfy-user-selection {
     width: 100vw;
     height: 100vh;

web/assets/userSelection-Duxc-t_S.js

@@ -1,6 +1,15 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { a_ as createSpinner, aT as api, aN as $el } from "./index-exUB01hM.js";
+import { b4 as api, ca as $el } from "./index-DGAbdBYF.js";
+function createSpinner() {
+  const div = document.createElement("div");
+  div.innerHTML = `<div class="lds-ring"><div></div><div></div><div></div><div></div></div>`;
+  return div.firstElementChild;
+}
+__name(createSpinner, "createSpinner");
+window.comfyAPI = window.comfyAPI || {};
+window.comfyAPI.spinner = window.comfyAPI.spinner || {};
+window.comfyAPI.spinner.createSpinner = createSpinner;
 class UserSelectionScreen {
   static {
     __name(this, "UserSelectionScreen");
@@ -117,4 +126,4 @@ window.comfyAPI.userSelection.UserSelectionScreen = UserSelectionScreen;
 export {
   UserSelectionScreen
 };
-//# sourceMappingURL=userSelection-BdHSQXw0.js.map
+//# sourceMappingURL=userSelection-Duxc-t_S.js.map

web/assets/widgetInputs-DdoWwzg5.js

@@ -0,0 +1,756 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { l as LGraphNode, k as app, cf as applyTextReplacements, ce as ComfyWidgets, ci as addValueControlWidgets, z as LiteGraph } from "./index-DGAbdBYF.js";
+const CONVERTED_TYPE = "converted-widget";
+const VALID_TYPES = [
+  "STRING",
+  "combo",
+  "number",
+  "toggle",
+  "BOOLEAN",
+  "text",
+  "string"
+];
+const CONFIG = Symbol();
+const GET_CONFIG = Symbol();
+const TARGET = Symbol();
+const replacePropertyName = "Run widget replace on values";
+class PrimitiveNode extends LGraphNode {
+  static {
+    __name(this, "PrimitiveNode");
+  }
+  controlValues;
+  lastType;
+  static category;
+  constructor(title) {
+    super(title);
+    this.addOutput("connect to widget input", "*");
+    this.serialize_widgets = true;
+    this.isVirtualNode = true;
+    if (!this.properties || !(replacePropertyName in this.properties)) {
+      this.addProperty(replacePropertyName, false, "boolean");
+    }
+  }
+  applyToGraph(extraLinks = []) {
+    if (!this.outputs[0].links?.length) return;
+    function get_links(node) {
+      let links2 = [];
+      for (const l of node.outputs[0].links) {
+        const linkInfo = app.graph.links[l];
+        const n = node.graph.getNodeById(linkInfo.target_id);
+        if (n.type == "Reroute") {
+          links2 = links2.concat(get_links(n));
+        } else {
+          links2.push(l);
+        }
+      }
+      return links2;
+    }
+    __name(get_links, "get_links");
+    let links = [
+      ...get_links(this).map((l) => app.graph.links[l]),
+      ...extraLinks
+    ];
+    let v = this.widgets?.[0].value;
+    if (v && this.properties[replacePropertyName]) {
+      v = applyTextReplacements(app, v);
+    }
+    for (const linkInfo of links) {
+      const node = this.graph.getNodeById(linkInfo.target_id);
+      const input = node.inputs[linkInfo.target_slot];
+      let widget;
+      if (input.widget[TARGET]) {
+        widget = input.widget[TARGET];
+      } else {
+        const widgetName = input.widget.name;
+        if (widgetName) {
+          widget = node.widgets.find((w) => w.name === widgetName);
+        }
+      }
+      if (widget) {
+        widget.value = v;
+        if (widget.callback) {
+          widget.callback(
+            widget.value,
+            app.canvas,
+            node,
+            app.canvas.graph_mouse,
+            {}
+          );
+        }
+      }
+    }
+  }
+  refreshComboInNode() {
+    const widget = this.widgets?.[0];
+    if (widget?.type === "combo") {
+      widget.options.values = this.outputs[0].widget[GET_CONFIG]()[0];
+      if (!widget.options.values.includes(widget.value)) {
+        widget.value = widget.options.values[0];
+        widget.callback(widget.value);
+      }
+    }
+  }
+  onAfterGraphConfigured() {
+    if (this.outputs[0].links?.length && !this.widgets?.length) {
+      if (!this.#onFirstConnection()) return;
+      if (this.widgets) {
+        for (let i = 0; i < this.widgets_values.length; i++) {
+          const w = this.widgets[i];
+          if (w) {
+            w.value = this.widgets_values[i];
+          }
+        }
+      }
+      this.#mergeWidgetConfig();
+    }
+  }
+  onConnectionsChange(_, index, connected) {
+    if (app.configuringGraph) {
+      return;
+    }
+    const links = this.outputs[0].links;
+    if (connected) {
+      if (links?.length && !this.widgets?.length) {
+        this.#onFirstConnection();
+      }
+    } else {
+      this.#mergeWidgetConfig();
+      if (!links?.length) {
+        this.onLastDisconnect();
+      }
+    }
+  }
+  onConnectOutput(slot, type, input, target_node, target_slot) {
+    if (!input.widget) {
+      if (!(input.type in ComfyWidgets)) return false;
+    }
+    if (this.outputs[slot].links?.length) {
+      const valid = this.#isValidConnection(input);
+      if (valid) {
+        this.applyToGraph([{ target_id: target_node.id, target_slot }]);
+      }
+      return valid;
+    }
+  }
+  #onFirstConnection(recreating) {
+    if (!this.outputs[0].links) {
+      this.onLastDisconnect();
+      return;
+    }
+    const linkId = this.outputs[0].links[0];
+    const link = this.graph.links[linkId];
+    if (!link) return;
+    const theirNode = this.graph.getNodeById(link.target_id);
+    if (!theirNode || !theirNode.inputs) return;
+    const input = theirNode.inputs[link.target_slot];
+    if (!input) return;
+    let widget;
+    if (!input.widget) {
+      if (!(input.type in ComfyWidgets)) return;
+      widget = { name: input.name, [GET_CONFIG]: () => [input.type, {}] };
+    } else {
+      widget = input.widget;
+    }
+    const config = widget[GET_CONFIG]?.();
+    if (!config) return;
+    const { type } = getWidgetType(config);
+    this.outputs[0].type = type;
+    this.outputs[0].name = type;
+    this.outputs[0].widget = widget;
+    this.#createWidget(
+      widget[CONFIG] ?? config,
+      theirNode,
+      widget.name,
+      recreating,
+      widget[TARGET]
+    );
+  }
+  #createWidget(inputData, node, widgetName, recreating, targetWidget) {
+    let type = inputData[0];
+    if (type instanceof Array) {
+      type = "COMBO";
+    }
+    const size = this.size;
+    let widget;
+    if (type in ComfyWidgets) {
+      widget = (ComfyWidgets[type](this, "value", inputData, app) || {}).widget;
+    } else {
+      widget = this.addWidget(type, "value", null, () => {
+      }, {});
+    }
+    if (targetWidget) {
+      widget.value = targetWidget.value;
+    } else if (node?.widgets && widget) {
+      const theirWidget = node.widgets.find((w) => w.name === widgetName);
+      if (theirWidget) {
+        widget.value = theirWidget.value;
+      }
+    }
+    if (!inputData?.[1]?.control_after_generate && (widget.type === "number" || widget.type === "combo")) {
+      let control_value = this.widgets_values?.[1];
+      if (!control_value) {
+        control_value = "fixed";
+      }
+      addValueControlWidgets(
+        this,
+        widget,
+        control_value,
+        void 0,
+        inputData
+      );
+      let filter = this.widgets_values?.[2];
+      if (filter && this.widgets.length === 3) {
+        this.widgets[2].value = filter;
+      }
+    }
+    const controlValues = this.controlValues;
+    if (this.lastType === this.widgets[0].type && controlValues?.length === this.widgets.length - 1) {
+      for (let i = 0; i < controlValues.length; i++) {
+        this.widgets[i + 1].value = controlValues[i];
+      }
+    }
+    const callback = widget.callback;
+    const self = this;
+    widget.callback = function() {
+      const r = callback ? callback.apply(this, arguments) : void 0;
+      self.applyToGraph();
+      return r;
+    };
+    this.size = [
+      Math.max(this.size[0], size[0]),
+      Math.max(this.size[1], size[1])
+    ];
+    if (!recreating) {
+      const sz = this.computeSize();
+      if (this.size[0] < sz[0]) {
+        this.size[0] = sz[0];
+      }
+      if (this.size[1] < sz[1]) {
+        this.size[1] = sz[1];
+      }
+      requestAnimationFrame(() => {
+        if (this.onResize) {
+          this.onResize(this.size);
+        }
+      });
+    }
+  }
+  recreateWidget() {
+    const values = this.widgets?.map((w) => w.value);
+    this.#removeWidgets();
+    this.#onFirstConnection(true);
+    if (values?.length) {
+      for (let i = 0; i < this.widgets?.length; i++)
+        this.widgets[i].value = values[i];
+    }
+    return this.widgets?.[0];
+  }
+  #mergeWidgetConfig() {
+    const output = this.outputs[0];
+    const links = output.links;
+    const hasConfig = !!output.widget[CONFIG];
+    if (hasConfig) {
+      delete output.widget[CONFIG];
+    }
+    if (links?.length < 2 && hasConfig) {
+      if (links.length) {
+        this.recreateWidget();
+      }
+      return;
+    }
+    const config1 = output.widget[GET_CONFIG]();
+    const isNumber = config1[0] === "INT" || config1[0] === "FLOAT";
+    if (!isNumber) return;
+    for (const linkId of links) {
+      const link = app.graph.links[linkId];
+      if (!link) continue;
+      const theirNode = app.graph.getNodeById(link.target_id);
+      const theirInput = theirNode.inputs[link.target_slot];
+      this.#isValidConnection(theirInput, hasConfig);
+    }
+  }
+  isValidWidgetLink(originSlot, targetNode, targetWidget) {
+    const config2 = getConfig.call(targetNode, targetWidget.name) ?? [
+      targetWidget.type,
+      targetWidget.options || {}
+    ];
+    if (!isConvertibleWidget(targetWidget, config2)) return false;
+    const output = this.outputs[originSlot];
+    if (!(output.widget?.[CONFIG] ?? output.widget?.[GET_CONFIG]())) {
+      return true;
+    }
+    return !!mergeIfValid.call(this, output, config2);
+  }
+  #isValidConnection(input, forceUpdate) {
+    const output = this.outputs[0];
+    const config2 = input.widget[GET_CONFIG]();
+    return !!mergeIfValid.call(
+      this,
+      output,
+      config2,
+      forceUpdate,
+      this.recreateWidget
+    );
+  }
+  #removeWidgets() {
+    if (this.widgets) {
+      for (const w of this.widgets) {
+        if (w.onRemove) {
+          w.onRemove();
+        }
+      }
+      this.controlValues = [];
+      this.lastType = this.widgets[0]?.type;
+      for (let i = 1; i < this.widgets.length; i++) {
+        this.controlValues.push(this.widgets[i].value);
+      }
+      setTimeout(() => {
+        delete this.lastType;
+        delete this.controlValues;
+      }, 15);
+      this.widgets.length = 0;
+    }
+  }
+  onLastDisconnect() {
+    this.outputs[0].type = "*";
+    this.outputs[0].name = "connect to widget input";
+    delete this.outputs[0].widget;
+    this.#removeWidgets();
+  }
+}
+function getWidgetConfig(slot) {
+  return slot.widget[CONFIG] ?? slot.widget[GET_CONFIG]();
+}
+__name(getWidgetConfig, "getWidgetConfig");
+function getConfig(widgetName) {
+  const { nodeData } = this.constructor;
+  return nodeData?.input?.required?.[widgetName] ?? nodeData?.input?.optional?.[widgetName];
+}
+__name(getConfig, "getConfig");
+function isConvertibleWidget(widget, config) {
+  return (VALID_TYPES.includes(widget.type) || VALID_TYPES.includes(config[0])) && !widget.options?.forceInput;
+}
+__name(isConvertibleWidget, "isConvertibleWidget");
+function hideWidget(node, widget, suffix = "") {
+  if (widget.type?.startsWith(CONVERTED_TYPE)) return;
+  widget.origType = widget.type;
+  widget.origComputeSize = widget.computeSize;
+  widget.origSerializeValue = widget.serializeValue;
+  widget.computeSize = () => [0, -4];
+  widget.type = CONVERTED_TYPE + suffix;
+  widget.serializeValue = () => {
+    if (!node.inputs) {
+      return void 0;
+    }
+    let node_input = node.inputs.find((i) => i.widget?.name === widget.name);
+    if (!node_input || !node_input.link) {
+      return void 0;
+    }
+    return widget.origSerializeValue ? widget.origSerializeValue() : widget.value;
+  };
+  if (widget.linkedWidgets) {
+    for (const w of widget.linkedWidgets) {
+      hideWidget(node, w, ":" + widget.name);
+    }
+  }
+}
+__name(hideWidget, "hideWidget");
+function showWidget(widget) {
+  widget.type = widget.origType;
+  widget.computeSize = widget.origComputeSize;
+  widget.serializeValue = widget.origSerializeValue;
+  delete widget.origType;
+  delete widget.origComputeSize;
+  delete widget.origSerializeValue;
+  if (widget.linkedWidgets) {
+    for (const w of widget.linkedWidgets) {
+      showWidget(w);
+    }
+  }
+}
+__name(showWidget, "showWidget");
+function convertToInput(node, widget, config) {
+  hideWidget(node, widget);
+  const { type } = getWidgetType(config);
+  const sz = node.size;
+  const inputIsOptional = !!widget.options?.inputIsOptional;
+  const input = node.addInput(widget.name, type, {
+    widget: { name: widget.name, [GET_CONFIG]: () => config },
+    ...inputIsOptional ? { shape: LiteGraph.SlotShape.HollowCircle } : {}
+  });
+  for (const widget2 of node.widgets) {
+    widget2.last_y += LiteGraph.NODE_SLOT_HEIGHT;
+  }
+  node.setSize([Math.max(sz[0], node.size[0]), Math.max(sz[1], node.size[1])]);
+  return input;
+}
+__name(convertToInput, "convertToInput");
+function convertToWidget(node, widget) {
+  showWidget(widget);
+  const sz = node.size;
+  node.removeInput(node.inputs.findIndex((i) => i.widget?.name === widget.name));
+  for (const widget2 of node.widgets) {
+    widget2.last_y -= LiteGraph.NODE_SLOT_HEIGHT;
+  }
+  node.setSize([Math.max(sz[0], node.size[0]), Math.max(sz[1], node.size[1])]);
+}
+__name(convertToWidget, "convertToWidget");
+function getWidgetType(config) {
+  let type = config[0];
+  if (type instanceof Array) {
+    type = "COMBO";
+  }
+  return { type };
+}
+__name(getWidgetType, "getWidgetType");
+function isValidCombo(combo, obj) {
+  if (!(obj instanceof Array)) {
+    console.log(`connection rejected: tried to connect combo to ${obj}`);
+    return false;
+  }
+  if (combo.length !== obj.length) {
+    console.log(`connection rejected: combo lists dont match`);
+    return false;
+  }
+  if (combo.find((v, i) => obj[i] !== v)) {
+    console.log(`connection rejected: combo lists dont match`);
+    return false;
+  }
+  return true;
+}
+__name(isValidCombo, "isValidCombo");
+function isPrimitiveNode(node) {
+  return node.type === "PrimitiveNode";
+}
+__name(isPrimitiveNode, "isPrimitiveNode");
+function setWidgetConfig(slot, config, target) {
+  if (!slot.widget) return;
+  if (config) {
+    slot.widget[GET_CONFIG] = () => config;
+    slot.widget[TARGET] = target;
+  } else {
+    delete slot.widget;
+  }
+  if (slot.link) {
+    const link = app.graph.links[slot.link];
+    if (link) {
+      const originNode = app.graph.getNodeById(link.origin_id);
+      if (isPrimitiveNode(originNode)) {
+        if (config) {
+          originNode.recreateWidget();
+        } else if (!app.configuringGraph) {
+          originNode.disconnectOutput(0);
+          originNode.onLastDisconnect();
+        }
+      }
+    }
+  }
+}
+__name(setWidgetConfig, "setWidgetConfig");
+function mergeIfValid(output, config2, forceUpdate, recreateWidget, config1) {
+  if (!config1) {
+    config1 = output.widget[CONFIG] ?? output.widget[GET_CONFIG]();
+  }
+  if (config1[0] instanceof Array) {
+    if (!isValidCombo(config1[0], config2[0])) return;
+  } else if (config1[0] !== config2[0]) {
+    console.log(`connection rejected: types dont match`, config1[0], config2[0]);
+    return;
+  }
+  const keys = /* @__PURE__ */ new Set([
+    ...Object.keys(config1[1] ?? {}),
+    ...Object.keys(config2[1] ?? {})
+  ]);
+  let customConfig;
+  const getCustomConfig = /* @__PURE__ */ __name(() => {
+    if (!customConfig) {
+      if (typeof structuredClone === "undefined") {
+        customConfig = JSON.parse(JSON.stringify(config1[1] ?? {}));
+      } else {
+        customConfig = structuredClone(config1[1] ?? {});
+      }
+    }
+    return customConfig;
+  }, "getCustomConfig");
+  const isNumber = config1[0] === "INT" || config1[0] === "FLOAT";
+  for (const k of keys.values()) {
+    if (k !== "default" && k !== "forceInput" && k !== "defaultInput" && k !== "control_after_generate" && k !== "multiline" && k !== "tooltip") {
+      let v1 = config1[1][k];
+      let v2 = config2[1]?.[k];
+      if (v1 === v2 || !v1 && !v2) continue;
+      if (isNumber) {
+        if (k === "min") {
+          const theirMax = config2[1]?.["max"];
+          if (theirMax != null && v1 > theirMax) {
+            console.log("connection rejected: min > max", v1, theirMax);
+            return;
+          }
+          getCustomConfig()[k] = v1 == null ? v2 : v2 == null ? v1 : Math.max(v1, v2);
+          continue;
+        } else if (k === "max") {
+          const theirMin = config2[1]?.["min"];
+          if (theirMin != null && v1 < theirMin) {
+            console.log("connection rejected: max < min", v1, theirMin);
+            return;
+          }
+          getCustomConfig()[k] = v1 == null ? v2 : v2 == null ? v1 : Math.min(v1, v2);
+          continue;
+        } else if (k === "step") {
+          let step;
+          if (v1 == null) {
+            step = v2;
+          } else if (v2 == null) {
+            step = v1;
+          } else {
+            if (v1 < v2) {
+              const a = v2;
+              v2 = v1;
+              v1 = a;
+            }
+            if (v1 % v2) {
+              console.log(
+                "connection rejected: steps not divisible",
+                "current:",
+                v1,
+                "new:",
+                v2
+              );
+              return;
+            }
+            step = v1;
+          }
+          getCustomConfig()[k] = step;
+          continue;
+        }
+      }
+      console.log(`connection rejected: config ${k} values dont match`, v1, v2);
+      return;
+    }
+  }
+  if (customConfig || forceUpdate) {
+    if (customConfig) {
+      output.widget[CONFIG] = [config1[0], customConfig];
+    }
+    const widget = recreateWidget?.call(this);
+    if (widget) {
+      const min = widget.options.min;
+      const max = widget.options.max;
+      if (min != null && widget.value < min) widget.value = min;
+      if (max != null && widget.value > max) widget.value = max;
+      widget.callback(widget.value);
+    }
+  }
+  return { customConfig };
+}
+__name(mergeIfValid, "mergeIfValid");
+let useConversionSubmenusSetting;
+app.registerExtension({
+  name: "Comfy.WidgetInputs",
+  init() {
+    useConversionSubmenusSetting = app.ui.settings.addSetting({
+      id: "Comfy.NodeInputConversionSubmenus",
+      name: "In the node context menu, place the entries that convert between input/widget in sub-menus.",
+      type: "boolean",
+      defaultValue: true
+    });
+  },
+  async beforeRegisterNodeDef(nodeType, nodeData, app2) {
+    const origGetExtraMenuOptions = nodeType.prototype.getExtraMenuOptions;
+    nodeType.prototype.convertWidgetToInput = function(widget) {
+      const config = getConfig.call(this, widget.name) ?? [
+        widget.type,
+        widget.options || {}
+      ];
+      if (!isConvertibleWidget(widget, config)) return false;
+      if (widget.type?.startsWith(CONVERTED_TYPE)) return false;
+      convertToInput(this, widget, config);
+      return true;
+    };
+    nodeType.prototype.getExtraMenuOptions = function(_, options) {
+      const r = origGetExtraMenuOptions ? origGetExtraMenuOptions.apply(this, arguments) : void 0;
+      if (this.widgets) {
+        let toInput = [];
+        let toWidget = [];
+        for (const w of this.widgets) {
+          if (w.options?.forceInput) {
+            continue;
+          }
+          if (w.type === CONVERTED_TYPE) {
+            toWidget.push({
+              content: `Convert ${w.name} to widget`,
+              callback: /* @__PURE__ */ __name(() => convertToWidget(this, w), "callback")
+            });
+          } else {
+            const config = getConfig.call(this, w.name) ?? [
+              w.type,
+              w.options || {}
+            ];
+            if (isConvertibleWidget(w, config)) {
+              toInput.push({
+                content: `Convert ${w.name} to input`,
+                callback: /* @__PURE__ */ __name(() => convertToInput(this, w, config), "callback")
+              });
+            }
+          }
+        }
+        if (toInput.length) {
+          if (useConversionSubmenusSetting.value) {
+            options.push({
+              content: "Convert Widget to Input",
+              submenu: {
+                options: toInput
+              }
+            });
+          } else {
+            options.push(...toInput, null);
+          }
+        }
+        if (toWidget.length) {
+          if (useConversionSubmenusSetting.value) {
+            options.push({
+              content: "Convert Input to Widget",
+              submenu: {
+                options: toWidget
+              }
+            });
+          } else {
+            options.push(...toWidget, null);
+          }
+        }
+      }
+      return r;
+    };
+    nodeType.prototype.onGraphConfigured = function() {
+      if (!this.inputs) return;
+      this.widgets ??= [];
+      for (const input of this.inputs) {
+        if (input.widget) {
+          if (!input.widget[GET_CONFIG]) {
+            input.widget[GET_CONFIG] = () => getConfig.call(this, input.widget.name);
+          }
+          if (input.widget.config) {
+            if (input.widget.config[0] instanceof Array) {
+              input.type = "COMBO";
+              const link = app2.graph.links[input.link];
+              if (link) {
+                link.type = input.type;
+              }
+            }
+            delete input.widget.config;
+          }
+          const w = this.widgets.find((w2) => w2.name === input.widget.name);
+          if (w) {
+            hideWidget(this, w);
+          } else {
+            convertToWidget(this, input);
+          }
+        }
+      }
+    };
+    const origOnNodeCreated = nodeType.prototype.onNodeCreated;
+    nodeType.prototype.onNodeCreated = function() {
+      const r = origOnNodeCreated ? origOnNodeCreated.apply(this) : void 0;
+      if (!app2.configuringGraph && this.widgets) {
+        for (const w of this.widgets) {
+          if (w?.options?.forceInput || w?.options?.defaultInput) {
+            const config = getConfig.call(this, w.name) ?? [
+              w.type,
+              w.options || {}
+            ];
+            convertToInput(this, w, config);
+          }
+        }
+      }
+      return r;
+    };
+    const origOnConfigure = nodeType.prototype.onConfigure;
+    nodeType.prototype.onConfigure = function() {
+      const r = origOnConfigure ? origOnConfigure.apply(this, arguments) : void 0;
+      if (!app2.configuringGraph && this.inputs) {
+        for (const input of this.inputs) {
+          if (input.widget && !input.widget[GET_CONFIG]) {
+            input.widget[GET_CONFIG] = () => getConfig.call(this, input.widget.name);
+            const w = this.widgets.find((w2) => w2.name === input.widget.name);
+            if (w) {
+              hideWidget(this, w);
+            }
+          }
+        }
+      }
+      return r;
+    };
+    function isNodeAtPos(pos) {
+      for (const n of app2.graph.nodes) {
+        if (n.pos[0] === pos[0] && n.pos[1] === pos[1]) {
+          return true;
+        }
+      }
+      return false;
+    }
+    __name(isNodeAtPos, "isNodeAtPos");
+    const origOnInputDblClick = nodeType.prototype.onInputDblClick;
+    const ignoreDblClick = Symbol();
+    nodeType.prototype.onInputDblClick = function(slot) {
+      const r = origOnInputDblClick ? origOnInputDblClick.apply(this, arguments) : void 0;
+      const input = this.inputs[slot];
+      if (!input.widget || !input[ignoreDblClick]) {
+        if (!(input.type in ComfyWidgets) && !(input.widget[GET_CONFIG]?.()?.[0] instanceof Array)) {
+          return r;
+        }
+      }
+      const node = LiteGraph.createNode("PrimitiveNode");
+      app2.graph.add(node);
+      const pos = [
+        this.pos[0] - node.size[0] - 30,
+        this.pos[1]
+      ];
+      while (isNodeAtPos(pos)) {
+        pos[1] += LiteGraph.NODE_TITLE_HEIGHT;
+      }
+      node.pos = pos;
+      node.connect(0, this, slot);
+      node.title = input.name;
+      input[ignoreDblClick] = true;
+      setTimeout(() => {
+        delete input[ignoreDblClick];
+      }, 300);
+      return r;
+    };
+    const onConnectInput = nodeType.prototype.onConnectInput;
+    nodeType.prototype.onConnectInput = function(targetSlot, type, output, originNode, originSlot) {
+      const v = onConnectInput?.(this, arguments);
+      if (type !== "COMBO") return v;
+      if (originNode.outputs[originSlot].widget) return v;
+      const targetCombo = this.inputs[targetSlot].widget?.[GET_CONFIG]?.()?.[0];
+      if (!targetCombo || !(targetCombo instanceof Array)) return v;
+      const originConfig = originNode.constructor?.nodeData?.output?.[originSlot];
+      if (!originConfig || !isValidCombo(targetCombo, originConfig)) {
+        return false;
+      }
+      return v;
+    };
+  },
+  registerCustomNodes() {
+    LiteGraph.registerNodeType(
+      "PrimitiveNode",
+      Object.assign(PrimitiveNode, {
+        title: "Primitive"
+      })
+    );
+    PrimitiveNode.category = "utils";
+  }
+});
+window.comfyAPI = window.comfyAPI || {};
+window.comfyAPI.widgetInputs = window.comfyAPI.widgetInputs || {};
+window.comfyAPI.widgetInputs.getWidgetConfig = getWidgetConfig;
+window.comfyAPI.widgetInputs.convertToInput = convertToInput;
+window.comfyAPI.widgetInputs.setWidgetConfig = setWidgetConfig;
+window.comfyAPI.widgetInputs.mergeIfValid = mergeIfValid;
+export {
+  convertToInput,
+  getWidgetConfig,
+  mergeIfValid,
+  setWidgetConfig
+};
+//# sourceMappingURL=widgetInputs-DdoWwzg5.js.map