Update web content to release v1.3.21 (#5351)

* Update web content to release v1.3.21 * nit
2024-10-28 14:29:38 -04:00 · 2024-10-28 14:29:38 -04:00 · c0b0cfaeec
parent 669d9e4c67
commit c0b0cfaeec
31 changed files with 68250 additions and 71048 deletions
--- a/web/assets/ExtensionPanel-DZLYjWBj.js
+++ b/web/assets/ExtensionPanel-DZLYjWBj.js
@ -0,0 +1,103 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { d as defineComponent, bK as useExtensionStore, u as useSettingStore, r as ref, o as onMounted, q as computed, g as openBlock, h as createElementBlock, i as createVNode, y as withCtx, z as unref, bL as script$1, A as createBaseVNode, x as createBlock, M as Fragment, N as renderList, am as toDisplayString, ap as createTextVNode, j as createCommentVNode, D as script$4 } from "./index-CgU1oKZt.js";
+import { s as script, a as script$2, b as script$3 } from "./index-DBWDcZsl.js";
+import "./index-DYEEBf64.js";
+const _hoisted_1 = { class: "extension-panel" };
+const _hoisted_2 = { class: "mt-4" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ExtensionPanel",
+  setup(__props) {
+    const extensionStore = useExtensionStore();
+    const settingStore = useSettingStore();
+    const editingEnabledExtensions = ref({});
+    onMounted(() => {
+      extensionStore.extensions.forEach((ext) => {
+        editingEnabledExtensions.value[ext.name] = extensionStore.isExtensionEnabled(ext.name);
+      });
+    });
+    const changedExtensions = computed(() => {
+      return extensionStore.extensions.filter(
+        (ext) => editingEnabledExtensions.value[ext.name] !== extensionStore.isExtensionEnabled(ext.name)
+      );
+    });
+    const hasChanges = computed(() => {
+      return changedExtensions.value.length > 0;
+    });
+    const updateExtensionStatus = /* @__PURE__ */ __name(() => {
+      const editingDisabledExtensionNames = Object.entries(
+        editingEnabledExtensions.value
+      ).filter(([_, enabled]) => !enabled).map(([name]) => name);
+      settingStore.set("Comfy.Extension.Disabled", [
+        ...extensionStore.inactiveDisabledExtensionNames,
+        ...editingDisabledExtensionNames
+      ]);
+    }, "updateExtensionStatus");
+    const applyChanges = /* @__PURE__ */ __name(() => {
+      window.location.reload();
+    }, "applyChanges");
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(unref(script$2), {
+          value: unref(extensionStore).extensions,
+          stripedRows: "",
+          size: "small"
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(script), {
+              field: "name",
+              header: _ctx.$t("extensionName"),
+              sortable: ""
+            }, null, 8, ["header"]),
+            createVNode(unref(script), { pt: {
+              bodyCell: "flex items-center justify-end"
+            } }, {
+              body: withCtx((slotProps) => [
+                createVNode(unref(script$1), {
+                  modelValue: editingEnabledExtensions.value[slotProps.data.name],
+                  "onUpdate:modelValue": /* @__PURE__ */ __name(($event) => editingEnabledExtensions.value[slotProps.data.name] = $event, "onUpdate:modelValue"),
+                  onChange: updateExtensionStatus
+                }, null, 8, ["modelValue", "onUpdate:modelValue"])
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["value"]),
+        createBaseVNode("div", _hoisted_2, [
+          hasChanges.value ? (openBlock(), createBlock(unref(script$3), {
+            key: 0,
+            severity: "info"
+          }, {
+            default: withCtx(() => [
+              createBaseVNode("ul", null, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(changedExtensions.value, (ext) => {
+                  return openBlock(), createElementBlock("li", {
+                    key: ext.name
+                  }, [
+                    createBaseVNode("span", null, toDisplayString(unref(extensionStore).isExtensionEnabled(ext.name) ? "[-]" : "[+]"), 1),
+                    createTextVNode(" " + toDisplayString(ext.name), 1)
+                  ]);
+                }), 128))
+              ])
+            ]),
+            _: 1
+          })) : createCommentVNode("", true),
+          createVNode(unref(script$4), {
+            label: _ctx.$t("reloadToApplyChanges"),
+            icon: "pi pi-refresh",
+            onClick: applyChanges,
+            disabled: !hasChanges.value,
+            text: "",
+            fluid: "",
+            severity: "danger"
+          }, null, 8, ["label", "disabled"])
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=ExtensionPanel-DZLYjWBj.js.map
--- a/web/assets/ExtensionPanel-DZLYjWBj.js.map
+++ b/web/assets/ExtensionPanel-DZLYjWBj.js.map
@ -0,0 +1 @@
+{"version":3,"file":"ExtensionPanel-DZLYjWBj.js","sources":["../../src/components/dialog/content/setting/ExtensionPanel.vue"],"sourcesContent":["<template>\n  <div class=\"extension-panel\">\n    <DataTable :value=\"extensionStore.extensions\" stripedRows size=\"small\">\n      <Column field=\"name\" :header=\"$t('extensionName')\" sortable></Column>\n      <Column\n        :pt=\"{\n          bodyCell: 'flex items-center justify-end'\n        }\"\n      >\n        <template #body=\"slotProps\">\n          <ToggleSwitch\n            v-model=\"editingEnabledExtensions[slotProps.data.name]\"\n            @change=\"updateExtensionStatus\"\n          />\n        </template>\n      </Column>\n    </DataTable>\n    <div class=\"mt-4\">\n      <Message v-if=\"hasChanges\" severity=\"info\">\n        <ul>\n          <li v-for=\"ext in changedExtensions\" :key=\"ext.name\">\n            <span>\n              {{ extensionStore.isExtensionEnabled(ext.name) ? '[-]' : '[+]' }}\n            </span>\n            {{ ext.name }}\n          </li>\n        </ul>\n      </Message>\n      <Button\n        :label=\"$t('reloadToApplyChanges')\"\n        icon=\"pi pi-refresh\"\n        @click=\"applyChanges\"\n        :disabled=\"!hasChanges\"\n        text\n        fluid\n        severity=\"danger\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted } from 'vue'\nimport { useExtensionStore } from '@/stores/extensionStore'\nimport { useSettingStore } from '@/stores/settingStore'\nimport DataTable from 'primevue/datatable'\nimport Column from 'primevue/column'\nimport ToggleSwitch from 'primevue/toggleswitch'\nimport Button from 'primevue/button'\nimport Message from 'primevue/message'\n\nconst extensionStore = useExtensionStore()\nconst settingStore = useSettingStore()\n\nconst editingEnabledExtensions = ref<Record<string, boolean>>({})\n\nonMounted(() => {\n  extensionStore.extensions.forEach((ext) => {\n    editingEnabledExtensions.value[ext.name] =\n      extensionStore.isExtensionEnabled(ext.name)\n  })\n})\n\nconst changedExtensions = computed(() => {\n  return extensionStore.extensions.filter(\n    (ext) =>\n      editingEnabledExtensions.value[ext.name] !==\n      extensionStore.isExtensionEnabled(ext.name)\n  )\n})\n\nconst hasChanges = computed(() => {\n  return changedExtensions.value.length > 0\n})\n\nconst updateExtensionStatus = () => {\n  const editingDisabledExtensionNames = Object.entries(\n    editingEnabledExtensions.value\n  )\n    .filter(([_, enabled]) => !enabled)\n    .map(([name]) => name)\n\n  settingStore.set('Comfy.Extension.Disabled', [\n    ...extensionStore.inactiveDisabledExtensionNames,\n    ...editingDisabledExtensionNames\n  ])\n}\n\nconst applyChanges = () => {\n  // Refresh the page to apply changes\n  window.location.reload()\n}\n</script>\n"],"names":[],"mappings":";;;;;;;;;;AAmDA,UAAM,iBAAiB;AACvB,UAAM,eAAe;AAEf,UAAA,2BAA2B,IAA6B,CAAA,CAAE;AAEhE,cAAU,MAAM;AACC,qBAAA,WAAW,QAAQ,CAAC,QAAQ;AACzC,iCAAyB,MAAM,IAAI,IAAI,IACrC,eAAe,mBAAmB,IAAI,IAAI;AAAA,MAAA,CAC7C;AAAA,IAAA,CACF;AAEK,UAAA,oBAAoB,SAAS,MAAM;AACvC,aAAO,eAAe,WAAW;AAAA,QAC/B,CAAC,QACC,yBAAyB,MAAM,IAAI,IAAI,MACvC,eAAe,mBAAmB,IAAI,IAAI;AAAA,MAAA;AAAA,IAC9C,CACD;AAEK,UAAA,aAAa,SAAS,MAAM;AACzB,aAAA,kBAAkB,MAAM,SAAS;AAAA,IAAA,CACzC;AAED,UAAM,wBAAwB,6BAAM;AAClC,YAAM,gCAAgC,OAAO;AAAA,QAC3C,yBAAyB;AAAA,MAExB,EAAA,OAAO,CAAC,CAAC,GAAG,OAAO,MAAM,CAAC,OAAO,EACjC,IAAI,CAAC,CAAC,IAAI,MAAM,IAAI;AAEvB,mBAAa,IAAI,4BAA4B;AAAA,QAC3C,GAAG,eAAe;AAAA,QAClB,GAAG;AAAA,MAAA,CACJ;AAAA,IAAA,GAV2B;AAa9B,UAAM,eAAe,6BAAM;AAEzB,aAAO,SAAS;IAAO,GAFJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
--- a/web/assets/GraphView-BGt8GmeB.css
+++ b/web/assets/GraphView-BGt8GmeB.css
@ -1,792 +0,0 @@
-
-.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;
-}
--- a/web/assets/GraphView-Bx1-rDWO.css
+++ b/web/assets/GraphView-Bx1-rDWO.css
@ -0,0 +1,278 @@
+
+.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-b6bfc188] {
+  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-b6bfc188] {
+  align-self: flex-end;
+  margin-top: 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;
+}
+
+[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: 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-79ec8c53] {
+  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-444d3768] {
+  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-444d3768] {
+  margin: 0;
+  border-radius: 0;
+}
+
+[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-9646ca0a] .p-menubar-item-link svg {
+  display: none;
+}
+[data-v-9646ca0a] .p-menubar-submenu.dropdown-direction-up {
+  top: auto;
+  bottom: 100%;
+  flex-direction: column-reverse;
+}
+.keybinding-tag[data-v-9646ca0a] {
+  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-2b80bf74] .p-splitbutton-dropdown {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.actionbar[data-v-2e54db00] {
+  pointer-events: all;
+  position: fixed;
+  z-index: 1000;
+}
+.actionbar.is-docked[data-v-2e54db00] {
+  position: static;
+  border-style: none;
+  background-color: transparent;
+  padding: 0px;
+}
+.actionbar.is-dragging[data-v-2e54db00] {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+[data-v-2e54db00] .p-panel-content {
+  padding: 0.25rem;
+}
+[data-v-2e54db00] .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;
+}
--- a/web/assets/GraphView-CVV2XJjS.js
+++ b/web/assets/GraphView-CVV2XJjS.js
--- a/web/assets/GraphView-CVV2XJjS.js.map
+++ b/web/assets/GraphView-CVV2XJjS.js.map
--- a/web/assets/GraphView-DmeOoKWv.js
+++ b/web/assets/GraphView-DmeOoKWv.js
--- a/web/assets/GraphView-DmeOoKWv.js.map
+++ b/web/assets/GraphView-DmeOoKWv.js.map
--- a/web/assets/KeybindingPanel-BNYKhW1k.css
+++ b/web/assets/KeybindingPanel-BNYKhW1k.css
@ -0,0 +1,8 @@
+
+[data-v-e5724e4d] .p-datatable-tbody > tr > td {
+  padding: 1px;
+  min-height: 2rem;
+}
+[data-v-e5724e4d] .p-datatable-row-selected .actions,[data-v-e5724e4d] .p-datatable-selectable-row:hover .actions {
+  visibility: visible;
+}
--- a/web/assets/KeybindingPanel-YkUFoiMw.js
+++ b/web/assets/KeybindingPanel-YkUFoiMw.js
@ -0,0 +1,264 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { d as defineComponent, q as computed, g as openBlock, h as createElementBlock, M as Fragment, N as renderList, i as createVNode, y as withCtx, ap as createTextVNode, am as toDisplayString, z as unref, at as script, j as createCommentVNode, r as ref, bH as FilterMatchMode, K as useKeybindingStore, F as useCommandStore, aC as watchEffect, aZ as useToast, t as resolveDirective, bI as SearchBox, A as createBaseVNode, D as script$2, x as createBlock, af as script$4, b2 as withModifiers, aA as script$6, v as withDirectives, P as pushScopeId, Q as popScopeId, by as KeyComboImpl, bJ as KeybindingImpl, _ as _export_sfc } from "./index-CgU1oKZt.js";
+import { s as script$1, a as script$3, b as script$5 } from "./index-DBWDcZsl.js";
+import "./index-DYEEBf64.js";
+const _hoisted_1$1 = {
+  key: 0,
+  class: "px-2"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "KeyComboDisplay",
+  props: {
+    keyCombo: {},
+    isModified: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const keySequences = computed(() => props.keyCombo.getKeySequences());
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", null, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(keySequences.value, (sequence, index) => {
+          return openBlock(), createElementBlock(Fragment, { key: index }, [
+            createVNode(unref(script), {
+              severity: _ctx.isModified ? "info" : "secondary"
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(sequence), 1)
+              ]),
+              _: 2
+            }, 1032, ["severity"]),
+            index < keySequences.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_1$1, "+")) : createCommentVNode("", true)
+          ], 64);
+        }), 128))
+      ]);
+    };
+  }
+});
+const _withScopeId = /* @__PURE__ */ __name((n) => (pushScopeId("data-v-e5724e4d"), n = n(), popScopeId(), n), "_withScopeId");
+const _hoisted_1 = { class: "keybinding-panel" };
+const _hoisted_2 = { class: "actions invisible" };
+const _hoisted_3 = { key: 1 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "KeybindingPanel",
+  setup(__props) {
+    const filters = ref({
+      global: { value: "", matchMode: FilterMatchMode.CONTAINS }
+    });
+    const keybindingStore = useKeybindingStore();
+    const commandStore = useCommandStore();
+    const commandsData = computed(() => {
+      return Object.values(commandStore.commands).map((command) => ({
+        id: command.id,
+        keybinding: keybindingStore.getKeybindingByCommandId(command.id)
+      }));
+    });
+    const selectedCommandData = ref(null);
+    const editDialogVisible = ref(false);
+    const newBindingKeyCombo = ref(null);
+    const currentEditingCommand = ref(null);
+    const keybindingInput = ref(null);
+    const existingKeybindingOnCombo = computed(() => {
+      if (!currentEditingCommand.value) {
+        return null;
+      }
+      if (currentEditingCommand.value.keybinding?.combo?.equals(
+        newBindingKeyCombo.value
+      )) {
+        return null;
+      }
+      if (!newBindingKeyCombo.value) {
+        return null;
+      }
+      return keybindingStore.getKeybinding(newBindingKeyCombo.value);
+    });
+    function editKeybinding(commandData) {
+      currentEditingCommand.value = commandData;
+      newBindingKeyCombo.value = commandData.keybinding ? commandData.keybinding.combo : null;
+      editDialogVisible.value = true;
+    }
+    __name(editKeybinding, "editKeybinding");
+    watchEffect(() => {
+      if (editDialogVisible.value) {
+        setTimeout(() => {
+          keybindingInput.value?.$el?.focus();
+        }, 300);
+      }
+    });
+    function removeKeybinding(commandData) {
+      if (commandData.keybinding) {
+        keybindingStore.unsetKeybinding(commandData.keybinding);
+        keybindingStore.persistUserKeybindings();
+      }
+    }
+    __name(removeKeybinding, "removeKeybinding");
+    function captureKeybinding(event) {
+      const keyCombo = KeyComboImpl.fromEvent(event);
+      newBindingKeyCombo.value = keyCombo;
+    }
+    __name(captureKeybinding, "captureKeybinding");
+    function cancelEdit() {
+      editDialogVisible.value = false;
+      currentEditingCommand.value = null;
+      newBindingKeyCombo.value = null;
+    }
+    __name(cancelEdit, "cancelEdit");
+    function saveKeybinding() {
+      if (currentEditingCommand.value && newBindingKeyCombo.value) {
+        const updated = keybindingStore.updateKeybindingOnCommand(
+          new KeybindingImpl({
+            commandId: currentEditingCommand.value.id,
+            combo: newBindingKeyCombo.value
+          })
+        );
+        if (updated) {
+          keybindingStore.persistUserKeybindings();
+        }
+      }
+      cancelEdit();
+    }
+    __name(saveKeybinding, "saveKeybinding");
+    const toast = useToast();
+    async function resetKeybindings() {
+      keybindingStore.resetKeybindings();
+      await keybindingStore.persistUserKeybindings();
+      toast.add({
+        severity: "info",
+        summary: "Info",
+        detail: "Keybindings reset",
+        life: 3e3
+      });
+    }
+    __name(resetKeybindings, "resetKeybindings");
+    return (_ctx, _cache) => {
+      const _directive_tooltip = resolveDirective("tooltip");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(unref(script$3), {
+          value: commandsData.value,
+          selection: selectedCommandData.value,
+          "onUpdate:selection": _cache[1] || (_cache[1] = ($event) => selectedCommandData.value = $event),
+          "global-filter-fields": ["id"],
+          filters: filters.value,
+          selectionMode: "single",
+          stripedRows: "",
+          pt: {
+            header: "px-0"
+          }
+        }, {
+          header: withCtx(() => [
+            createVNode(SearchBox, {
+              modelValue: filters.value["global"].value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => filters.value["global"].value = $event),
+              placeholder: _ctx.$t("searchKeybindings") + "..."
+            }, null, 8, ["modelValue", "placeholder"])
+          ]),
+          default: withCtx(() => [
+            createVNode(unref(script$1), {
+              field: "actions",
+              header: ""
+            }, {
+              body: withCtx((slotProps) => [
+                createBaseVNode("div", _hoisted_2, [
+                  createVNode(unref(script$2), {
+                    icon: "pi pi-pencil",
+                    class: "p-button-text",
+                    onClick: /* @__PURE__ */ __name(($event) => editKeybinding(slotProps.data), "onClick")
+                  }, null, 8, ["onClick"]),
+                  createVNode(unref(script$2), {
+                    icon: "pi pi-trash",
+                    class: "p-button-text p-button-danger",
+                    onClick: /* @__PURE__ */ __name(($event) => removeKeybinding(slotProps.data), "onClick"),
+                    disabled: !slotProps.data.keybinding
+                  }, null, 8, ["onClick", "disabled"])
+                ])
+              ]),
+              _: 1
+            }),
+            createVNode(unref(script$1), {
+              field: "id",
+              header: "Command ID",
+              sortable: ""
+            }),
+            createVNode(unref(script$1), {
+              field: "keybinding",
+              header: "Keybinding"
+            }, {
+              body: withCtx((slotProps) => [
+                slotProps.data.keybinding ? (openBlock(), createBlock(_sfc_main$1, {
+                  key: 0,
+                  keyCombo: slotProps.data.keybinding.combo,
+                  isModified: unref(keybindingStore).isCommandKeybindingModified(slotProps.data.id)
+                }, null, 8, ["keyCombo", "isModified"])) : (openBlock(), createElementBlock("span", _hoisted_3, "-"))
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["value", "selection", "filters"]),
+        createVNode(unref(script$6), {
+          class: "min-w-96",
+          visible: editDialogVisible.value,
+          "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => editDialogVisible.value = $event),
+          modal: "",
+          header: currentEditingCommand.value?.id,
+          onHide: cancelEdit
+        }, {
+          footer: withCtx(() => [
+            createVNode(unref(script$2), {
+              label: "Save",
+              icon: "pi pi-check",
+              onClick: saveKeybinding,
+              disabled: !!existingKeybindingOnCombo.value,
+              autofocus: ""
+            }, null, 8, ["disabled"])
+          ]),
+          default: withCtx(() => [
+            createBaseVNode("div", null, [
+              createVNode(unref(script$4), {
+                class: "mb-2 text-center",
+                ref_key: "keybindingInput",
+                ref: keybindingInput,
+                modelValue: newBindingKeyCombo.value?.toString() ?? "",
+                placeholder: "Press keys for new binding",
+                onKeydown: withModifiers(captureKeybinding, ["stop", "prevent"]),
+                autocomplete: "off",
+                fluid: "",
+                invalid: !!existingKeybindingOnCombo.value
+              }, null, 8, ["modelValue", "invalid"]),
+              existingKeybindingOnCombo.value ? (openBlock(), createBlock(unref(script$5), {
+                key: 0,
+                severity: "error"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(" Keybinding already exists on "),
+                  createVNode(unref(script), {
+                    severity: "secondary",
+                    value: existingKeybindingOnCombo.value.commandId
+                  }, null, 8, ["value"])
+                ]),
+                _: 1
+              })) : createCommentVNode("", true)
+            ])
+          ]),
+          _: 1
+        }, 8, ["visible", "header"]),
+        withDirectives(createVNode(unref(script$2), {
+          class: "mt-4",
+          label: _ctx.$t("reset"),
+          icon: "pi pi-trash",
+          severity: "danger",
+          fluid: "",
+          text: "",
+          onClick: resetKeybindings
+        }, null, 8, ["label"]), [
+          [_directive_tooltip, _ctx.$t("resetKeybindingsTooltip")]
+        ])
+      ]);
+    };
+  }
+});
+const KeybindingPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e5724e4d"]]);
+export {
+  KeybindingPanel as default
+};
+//# sourceMappingURL=KeybindingPanel-YkUFoiMw.js.map
--- a/web/assets/KeybindingPanel-YkUFoiMw.js.map
+++ b/web/assets/KeybindingPanel-YkUFoiMw.js.map
--- a/web/assets/colorPalette-D5oi2-2V.js
+++ b/web/assets/colorPalette-D5oi2-2V.js
@ -1,865 +0,0 @@
-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
--- a/web/assets/colorPalette-D5oi2-2V.js.map
+++ b/web/assets/colorPalette-D5oi2-2V.js.map
--- a/web/assets/index-BDQCPKeJ.css
+++ b/web/assets/index-BDQCPKeJ.css
@ -235,73 +235,33 @@
  margin-bottom: 1rem;
 }

-[data-v-e5724e4d] .p-datatable-tbody > tr > td {
-  padding: 1px;
-  min-height: 2rem;
-}
-[data-v-e5724e4d] .p-datatable-row-selected .actions,[data-v-e5724e4d] .p-datatable-selectable-row:hover .actions {
-  visibility: visible;
-}
-
 .settings-tab-panels {
  padding-top: 0px !important;
 }

-.settings-container[data-v-fc1edb48] {
+.settings-container[data-v-63951e2f] {
  display: flex;
  height: 70vh;
  width: 60vw;
-  max-width: 1000px;
+  max-width: 1024px;
  overflow: hidden;
-  /* Prevents container from scrolling */
-}
-.settings-sidebar[data-v-fc1edb48] {
-  width: 250px;
-  flex-shrink: 0;
-  /* Prevents sidebar from shrinking */
-  overflow-y: auto;
-  padding: 10px;
-}
-.settings-search-box[data-v-fc1edb48] {
-  width: 100%;
-  margin-bottom: 10px;
-}
-.settings-content[data-v-fc1edb48] {
-  flex-grow: 1;
-  overflow-y: auto;
-  /* Allows vertical scrolling */
-}
-
-/* Ensure the Listbox takes full width of the sidebar */
-.settings-sidebar[data-v-fc1edb48] .p-listbox {
-  width: 100%;
-}
-
-/* Optional: Style scrollbars for webkit browsers */
-.settings-sidebar[data-v-fc1edb48]::-webkit-scrollbar,
-.settings-content[data-v-fc1edb48]::-webkit-scrollbar {
-  width: 1px;
-}
-.settings-sidebar[data-v-fc1edb48]::-webkit-scrollbar-thumb,
-.settings-content[data-v-fc1edb48]::-webkit-scrollbar-thumb {
-  background-color: transparent;
 }
@media (max-width: 768px) {
-.settings-container[data-v-fc1edb48] {
+.settings-container[data-v-63951e2f] {
    flex-direction: column;
    height: auto;
 }
-.settings-sidebar[data-v-fc1edb48] {
+.settings-sidebar[data-v-63951e2f] {
    width: 100%;
 }
 }

 /* Show a separator line above the Keybinding tab */
 /* This indicates the start of custom setting panels */
-.settings-sidebar[data-v-fc1edb48] .p-listbox-option[aria-label='Keybinding'] {
+.settings-sidebar[data-v-63951e2f] .p-listbox-option[aria-label='Keybinding'] {
  position: relative;
 }
-.settings-sidebar[data-v-fc1edb48] .p-listbox-option[aria-label='Keybinding']::before {
+.settings-sidebar[data-v-63951e2f] .p-listbox-option[aria-label='Keybinding']::before {
  position: absolute;
  top: 0px;
  left: 0px;
@ -640,6 +600,469 @@
  bottom: 41px;
 }

+
+.editable-text[data-v-54da6fc9] {
+  display: inline;
+}
+.editable-text input[data-v-54da6fc9] {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.tree-node[data-v-fb2b90cf] {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.leaf-count-badge[data-v-fb2b90cf] {
+  margin-left: 0.5rem;
+}
+.node-content[data-v-fb2b90cf] {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+}
+.leaf-label[data-v-fb2b90cf] {
+  margin-left: 0.5rem;
+}
+[data-v-fb2b90cf] .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;
+}
+
+.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;
+}
+
+[data-v-32285943] .pi-fake-spacer {
+  height: 1px;
+  width: 16px;
+}
+
+.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);
+}
+
+.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;
+}
+
+._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
+}
+
+.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-62b7731e] {
+  width: 100%;
+  height: 100%;
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.preview-mask[data-v-62b7731e] {
+  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 .preview-mask[data-v-62b7731e] {
+  opacity: 1;
+}
+
+.task-result-preview[data-v-28bce53e] {
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.task-result-preview i[data-v-28bce53e],
+.task-result-preview span[data-v-28bce53e] {
+  font-size: 2rem;
+}
+.task-item[data-v-28bce53e] {
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+}
+.task-item-details[data-v-28bce53e] {
+  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-28bce53e] {
+  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-28bce53e] {
+  background-color: var(--p-primary-contrast-color);
+  border-radius: 6px;
+  display: inline-flex;
+}
+.node-name-tag[data-v-28bce53e] {
+  word-break: break-all;
+}
+.status-tag-group[data-v-28bce53e] {
+  display: flex;
+  flex-direction: column;
+}
+.progress-preview-img[data-v-28bce53e] {
+  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;
+}
+
+.scroll-container[data-v-0bfbd127] {
+  height: 100%;
+  overflow-y: auto;
+}
+.scroll-container[data-v-0bfbd127]::-webkit-scrollbar {
+  width: 1px;
+}
+.scroll-container[data-v-0bfbd127]::-webkit-scrollbar-thumb {
+  background-color: transparent;
+}
+.queue-grid[data-v-0bfbd127] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  padding: 0.5rem;
+  gap: 0.5rem;
+}
 /* this CSS contains only the basic CSS needed to run the app and use it */

 .lgraphcanvas {
@ -1439,6 +1862,9 @@ cursor: pointer;
  .z-\[1000\]{
    z-index: 1000;
  }
+  .m-2{
+    margin: 0.5rem;
+  }
  .mx-1{
    margin-left: 0.25rem;
    margin-right: 0.25rem;
@ -1447,14 +1873,6 @@ cursor: pointer;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
-  .mx-4{
-    margin-left: 1rem;
-    margin-right: 1rem;
-  }
-  .my-4{
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-  }
  .mb-2{
    margin-bottom: 0.5rem;
  }
@ -1467,6 +1885,9 @@ cursor: pointer;
  .ml-2{
    margin-left: 0.5rem;
  }
+  .ml-\[-13px\]{
+    margin-left: -13px;
+  }
  .ml-auto{
    margin-left: auto;
  }
@ -1476,9 +1897,6 @@ cursor: pointer;
  .mr-2{
    margin-right: 0.5rem;
  }
-  .mt-1{
-    margin-top: 0.25rem;
-  }
  .mt-4{
    margin-top: 1rem;
  }
@ -1509,6 +1927,9 @@ cursor: pointer;
  .hidden{
    display: none;
  }
+  .h-0{
+    height: 0px;
+  }
  .h-64{
    height: 16rem;
  }
@ -1518,6 +1939,9 @@ cursor: pointer;
  .h-screen{
    height: 100vh;
  }
+  .min-h-10{
+    min-height: 2.5rem;
+  }
  .min-h-screen{
    min-height: 100vh;
  }
@ -1549,9 +1973,6 @@ cursor: pointer;
  .max-w-\[150px\]{
    max-width: 150px;
  }
-  .flex-shrink{
-    flex-shrink: 1;
-  }
  .flex-shrink-0{
    flex-shrink: 0;
  }
@ -1634,6 +2055,9 @@ cursor: pointer;
  .overflow-y-auto{
    overflow-y: auto;
  }
+  .overflow-x-hidden{
+    overflow-x: hidden;
+  }
  .truncate{
    overflow: hidden;
    text-overflow: ellipsis;
@ -1663,9 +2087,19 @@ cursor: pointer;
  .border{
    border-width: 1px;
  }
+  .border-x-0{
+    border-left-width: 0px;
+    border-right-width: 0px;
+  }
+  .border-t-0{
+    border-top-width: 0px;
+  }
  .border-none{
    border-style: none;
  }
+  .bg-\[var\(--p-tree-background\)\]{
+    background-color: var(--p-tree-background);
+  }
  .bg-black{
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@ -1698,6 +2132,12 @@ cursor: pointer;
  .p-1{
    padding: 0.25rem;
  }
+  .p-2{
+    padding: 0.5rem;
+  }
+  .p-4{
+    padding: 1rem;
+  }
  .px-0{
    padding-left: 0px;
    padding-right: 0px;
@ -1710,6 +2150,10 @@ cursor: pointer;
    padding-top: 0px;
    padding-bottom: 0px;
  }
+  .py-1{
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
  .pb-0{
    padding-bottom: 0px;
  }
--- a/web/assets/index-BMC1ey-i.js.map
+++ b/web/assets/index-BMC1ey-i.js.map
--- a/web/assets/index-CgU1oKZt.js
+++ b/web/assets/index-CgU1oKZt.js
--- a/web/assets/index-CgU1oKZt.js.map
+++ b/web/assets/index-CgU1oKZt.js.map
--- a/web/assets/index-D36_Nnai.js
+++ b/web/assets/index-D36_Nnai.js
@ -1,8 +1,7 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-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";
+import { bu as ComfyDialog, bv as $el, bw as ComfyApp, c as app, k as LiteGraph, aP as LGraphCanvas, bx as DraggableList, a_ as useToastStore, ax as useNodeDefStore, bq as api, L as LGraphGroup, by as KeyComboImpl, K as useKeybindingStore, F as useCommandStore, e as LGraphNode, bz as ComfyWidgets, bA as applyTextReplacements, av as NodeSourceType, bB as NodeBadgeMode, u as useSettingStore, q as computed, bC as getColorPalette, w as watch, bD as BadgePosition, aR as LGraphBadge, bE as _, bF as defaultColorPalette } from "./index-CgU1oKZt.js";
+import { mergeIfValid, getWidgetConfig, setWidgetConfig } from "./widgetInputs-DNVvusS1.js";
 class ClipspaceDialog extends ComfyDialog {
  static {
    __name(this, "ClipspaceDialog");
@ -339,7 +338,7 @@ app.registerExtension({
        if (text[start] === "(") openCount++;
        if (text[start] === ")") closeCount++;
      }
-      if (start < 0) return false;
+      if (start < 0) return null;
      openCount = 0;
      closeCount = 0;
      while (end < text.length) {
@ -348,7 +347,7 @@ app.registerExtension({
        if (text[end] === ")") closeCount++;
        end++;
      }
-      if (end === text.length) return false;
+      if (end === text.length) return null;
      return { start: start + 1, end };
    }
    __name(findNearestEnclosure, "findNearestEnclosure");
@ -1637,9 +1636,7 @@ class GroupNodeHandler {
        },
        {
          content: "Manage Group Node",
-          callback: /* @__PURE__ */ __name(() => {
-            new ManageGroupDialog(app).show(this.type);
-          }, "callback")
+          callback: manageGroupNodes
        }
      );
    };
@ -1960,9 +1957,7 @@ function addConvertToGroupOptions() {
    options.splice(index + 1, null, {
      content: `Convert to Group Node`,
      disabled,
-      callback: /* @__PURE__ */ __name(async () => {
-        return await GroupNodeHandler.fromNodes(selected);
-      }, "callback")
+      callback: convertSelectedNodesToGroupNode
    });
  }
  __name(addConvertOption, "addConvertOption");
@ -1972,9 +1967,7 @@ function addConvertToGroupOptions() {
    options.splice(index + 1, null, {
      content: `Manage Group Nodes`,
      disabled,
-      callback: /* @__PURE__ */ __name(() => {
-        new ManageGroupDialog(app).show();
-      }, "callback")
+      callback: manageGroupNodes
    });
  }
  __name(addManageOption, "addManageOption");
@ -2004,10 +1997,77 @@ const replaceLegacySeparators = /* @__PURE__ */ __name((nodes) => {
    }
  }
 }, "replaceLegacySeparators");
+async function convertSelectedNodesToGroupNode() {
+  const nodes = Object.values(app.canvas.selected_nodes ?? {});
+  if (nodes.length === 0) {
+    throw new Error("No nodes selected");
+  }
+  if (nodes.length === 1) {
+    throw new Error("Please select multiple nodes to convert to group node");
+  }
+  if (nodes.some((n) => GroupNodeHandler.isGroupNode(n))) {
+    throw new Error("Selected nodes contain a group node");
+  }
+  return await GroupNodeHandler.fromNodes(nodes);
+}
+__name(convertSelectedNodesToGroupNode, "convertSelectedNodesToGroupNode");
+function ungroupSelectedGroupNodes() {
+  const nodes = Object.values(app.canvas.selected_nodes ?? {});
+  for (const node of nodes) {
+    if (GroupNodeHandler.isGroupNode(node)) {
+      node["convertToNodes"]?.();
+    }
+  }
+}
+__name(ungroupSelectedGroupNodes, "ungroupSelectedGroupNodes");
+function manageGroupNodes() {
+  new ManageGroupDialog(app).show();
+}
+__name(manageGroupNodes, "manageGroupNodes");
 const id$3 = "Comfy.GroupNode";
 let globalDefs;
 const ext$1 = {
  name: id$3,
+  commands: [
+    {
+      id: "Comfy.GroupNode.ConvertSelectedNodesToGroupNode",
+      label: "Convert selected nodes to group node",
+      icon: "pi pi-sitemap",
+      versionAdded: "1.3.17",
+      function: convertSelectedNodesToGroupNode
+    },
+    {
+      id: "Comfy.GroupNode.UngroupSelectedGroupNodes",
+      label: "Ungroup selected group nodes",
+      icon: "pi pi-sitemap",
+      versionAdded: "1.3.17",
+      function: ungroupSelectedGroupNodes
+    },
+    {
+      id: "Comfy.GroupNode.ManageGroupNodes",
+      label: "Manage group nodes",
+      icon: "pi pi-cog",
+      versionAdded: "1.3.17",
+      function: manageGroupNodes
+    }
+  ],
+  keybindings: [
+    {
+      commandId: "Comfy.GroupNode.ConvertSelectedNodesToGroupNode",
+      combo: {
+        alt: true,
+        key: "g"
+      }
+    },
+    {
+      commandId: "Comfy.GroupNode.UngroupSelectedGroupNodes",
+      combo: {
+        alt: true,
+        shift: true,
+        key: "G"
+      }
+    }
+  ],
  setup() {
    addConvertToGroupOptions();
  },
@ -4172,10 +4232,19 @@ app.registerExtension({
        LiteGraph.CANVAS_GRID_SIZE = +value || 10;
      }
    });
+    const alwaysSnapToGrid = app.ui.settings.addSetting({
+      id: "pysssss.SnapToGrid",
+      category: ["Comfy", "Graph", "AlwaysSnapToGrid"],
+      name: "Always snap to grid",
+      type: "boolean",
+      defaultValue: false,
+      versionAdded: "1.3.13"
+    });
+    const shouldSnapToGrid = /* @__PURE__ */ __name(() => app.shiftDown || alwaysSnapToGrid.value, "shouldSnapToGrid");
    const onNodeMoved = app.canvas.onNodeMoved;
    app.canvas.onNodeMoved = function(node) {
      const r = onNodeMoved?.apply(this, arguments);
-      if (app.shiftDown) {
+      if (shouldSnapToGrid()) {
        for (const id2 in this.selected_nodes) {
          this.selected_nodes[id2].alignToGrid();
        }
@ -4186,7 +4255,7 @@ app.registerExtension({
    app.graph.onNodeAdded = function(node) {
      const onResize = node.onResize;
      node.onResize = function() {
-        if (app.shiftDown) {
+        if (shouldSnapToGrid()) {
          roundVectorToGrid(node.size);
        }
        return onResize?.apply(this, arguments);
@ -4195,7 +4264,7 @@ app.registerExtension({
    };
    const origDrawNode = LGraphCanvas.prototype.drawNode;
    LGraphCanvas.prototype.drawNode = function(node, ctx) {
-      if (app.shiftDown && this.node_dragged && node.id in this.selected_nodes) {
+      if (shouldSnapToGrid() && this.node_dragged && node.id in this.selected_nodes) {
        const [x, y] = roundVectorToGrid([...node.pos]);
        const shiftX = x - node.pos[0];
        let shiftY = y - node.pos[1];
@ -4227,7 +4296,7 @@ app.registerExtension({
      if (!selectedAndMovingGroup && app.canvas.selected_group === this && (deltax || deltay)) {
        selectedAndMovingGroup = this;
      }
-      if (app.canvas.last_mouse_dragging === false && app.shiftDown) {
+      if (app.canvas.last_mouse_dragging === false && shouldSnapToGrid()) {
        this.recomputeInsideNodes();
        for (const node of this.nodes) {
          node.alignToGrid();
@ -4238,7 +4307,7 @@ app.registerExtension({
    };
    const drawGroups = LGraphCanvas.prototype.drawGroups;
    LGraphCanvas.prototype.drawGroups = function(canvas, ctx) {
-      if (this.selected_group && app.shiftDown) {
+      if (this.selected_group && shouldSnapToGrid()) {
        if (this.selected_group_resizing) {
          roundVectorToGrid(this.selected_group.size);
        } else if (selectedAndMovingGroup) {
@ -4261,7 +4330,7 @@ app.registerExtension({
    const onGroupAdd = LGraphCanvas.onGroupAdd;
    LGraphCanvas.onGroupAdd = function() {
      const v = onGroupAdd.apply(app.canvas, arguments);
-      if (app.shiftDown) {
+      if (shouldSnapToGrid()) {
        const lastGroup = app.graph.groups[app.graph.groups.length - 1];
        if (lastGroup) {
          roundVectorToGrid(lastGroup.pos);
@ -4274,7 +4343,7 @@ app.registerExtension({
 });
 app.registerExtension({
  name: "Comfy.UploadImage",
-  async beforeRegisterNodeDef(nodeType, nodeData, app2) {
+  beforeRegisterNodeDef(nodeType, nodeData) {
    if (nodeData?.input?.required?.image?.[1]?.image_upload === true) {
      nodeData.input.required.upload = ["IMAGEUPLOAD"];
    }
@ -4662,4 +4731,4 @@ class NodeBadgeExtension {
  }
 }
 app.registerExtension(new NodeBadgeExtension());
-//# sourceMappingURL=index-BMC1ey-i.js.map
+//# sourceMappingURL=index-D36_Nnai.js.map
--- a/web/assets/index-D36_Nnai.js.map
+++ b/web/assets/index-D36_Nnai.js.map
--- a/web/assets/index-DBWDcZsl.js
+++ b/web/assets/index-DBWDcZsl.js
--- a/web/assets/index-DBWDcZsl.js.map
+++ b/web/assets/index-DBWDcZsl.js.map
--- a/web/assets/index-DGAbdBYF.js.map
+++ b/web/assets/index-DGAbdBYF.js.map
--- a/web/assets/index-DYEEBf64.js
+++ b/web/assets/index-DYEEBf64.js
@ -0,0 +1,102 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { bM as script$4, A as createBaseVNode, g as openBlock, h as createElementBlock, m as mergeProps } from "./index-CgU1oKZt.js";
+var script$3 = {
+  name: "BarsIcon",
+  "extends": script$4
+};
+var _hoisted_1$3 = /* @__PURE__ */ createBaseVNode("path", {
+  "fill-rule": "evenodd",
+  "clip-rule": "evenodd",
+  d: "M13.3226 3.6129H0.677419C0.497757 3.6129 0.325452 3.54152 0.198411 3.41448C0.0713707 3.28744 0 3.11514 0 2.93548C0 2.75581 0.0713707 2.58351 0.198411 2.45647C0.325452 2.32943 0.497757 2.25806 0.677419 2.25806H13.3226C13.5022 2.25806 13.6745 2.32943 13.8016 2.45647C13.9286 2.58351 14 2.75581 14 2.93548C14 3.11514 13.9286 3.28744 13.8016 3.41448C13.6745 3.54152 13.5022 3.6129 13.3226 3.6129ZM13.3226 7.67741H0.677419C0.497757 7.67741 0.325452 7.60604 0.198411 7.479C0.0713707 7.35196 0 7.17965 0 6.99999C0 6.82033 0.0713707 6.64802 0.198411 6.52098C0.325452 6.39394 0.497757 6.32257 0.677419 6.32257H13.3226C13.5022 6.32257 13.6745 6.39394 13.8016 6.52098C13.9286 6.64802 14 6.82033 14 6.99999C14 7.17965 13.9286 7.35196 13.8016 7.479C13.6745 7.60604 13.5022 7.67741 13.3226 7.67741ZM0.677419 11.7419H13.3226C13.5022 11.7419 13.6745 11.6706 13.8016 11.5435C13.9286 11.4165 14 11.2442 14 11.0645C14 10.8848 13.9286 10.7125 13.8016 10.5855C13.6745 10.4585 13.5022 10.3871 13.3226 10.3871H0.677419C0.497757 10.3871 0.325452 10.4585 0.198411 10.5855C0.0713707 10.7125 0 10.8848 0 11.0645C0 11.2442 0.0713707 11.4165 0.198411 11.5435C0.325452 11.6706 0.497757 11.7419 0.677419 11.7419Z",
+  fill: "currentColor"
+}, null, -1);
+var _hoisted_2$3 = [_hoisted_1$3];
+function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", mergeProps({
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, _ctx.pti()), _hoisted_2$3, 16);
+}
+__name(render$3, "render$3");
+script$3.render = render$3;
+var script$2 = {
+  name: "PlusIcon",
+  "extends": script$4
+};
+var _hoisted_1$2 = /* @__PURE__ */ createBaseVNode("path", {
+  d: "M7.67742 6.32258V0.677419C7.67742 0.497757 7.60605 0.325452 7.47901 0.198411C7.35197 0.0713707 7.17966 0 7 0C6.82034 0 6.64803 0.0713707 6.52099 0.198411C6.39395 0.325452 6.32258 0.497757 6.32258 0.677419V6.32258H0.677419C0.497757 6.32258 0.325452 6.39395 0.198411 6.52099C0.0713707 6.64803 0 6.82034 0 7C0 7.17966 0.0713707 7.35197 0.198411 7.47901C0.325452 7.60605 0.497757 7.67742 0.677419 7.67742H6.32258V13.3226C6.32492 13.5015 6.39704 13.6725 6.52358 13.799C6.65012 13.9255 6.82106 13.9977 7 14C7.17966 14 7.35197 13.9286 7.47901 13.8016C7.60605 13.6745 7.67742 13.5022 7.67742 13.3226V7.67742H13.3226C13.5022 7.67742 13.6745 7.60605 13.8016 7.47901C13.9286 7.35197 14 7.17966 14 7C13.9977 6.82106 13.9255 6.65012 13.799 6.52358C13.6725 6.39704 13.5015 6.32492 13.3226 6.32258H7.67742Z",
+  fill: "currentColor"
+}, null, -1);
+var _hoisted_2$2 = [_hoisted_1$2];
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", mergeProps({
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, _ctx.pti()), _hoisted_2$2, 16);
+}
+__name(render$2, "render$2");
+script$2.render = render$2;
+var script$1 = {
+  name: "ExclamationTriangleIcon",
+  "extends": script$4
+};
+var _hoisted_1$1 = /* @__PURE__ */ createBaseVNode("path", {
+  d: "M13.4018 13.1893H0.598161C0.49329 13.189 0.390283 13.1615 0.299143 13.1097C0.208003 13.0578 0.131826 12.9832 0.0780112 12.8932C0.0268539 12.8015 0 12.6982 0 12.5931C0 12.4881 0.0268539 12.3848 0.0780112 12.293L6.47985 1.08982C6.53679 1.00399 6.61408 0.933574 6.70484 0.884867C6.7956 0.836159 6.897 0.810669 7 0.810669C7.103 0.810669 7.2044 0.836159 7.29516 0.884867C7.38592 0.933574 7.46321 1.00399 7.52015 1.08982L13.922 12.293C13.9731 12.3848 14 12.4881 14 12.5931C14 12.6982 13.9731 12.8015 13.922 12.8932C13.8682 12.9832 13.792 13.0578 13.7009 13.1097C13.6097 13.1615 13.5067 13.189 13.4018 13.1893ZM1.63046 11.989H12.3695L7 2.59425L1.63046 11.989Z",
+  fill: "currentColor"
+}, null, -1);
+var _hoisted_2$1 = /* @__PURE__ */ createBaseVNode("path", {
+  d: "M6.99996 8.78801C6.84143 8.78594 6.68997 8.72204 6.57787 8.60993C6.46576 8.49782 6.40186 8.34637 6.39979 8.18784V5.38703C6.39979 5.22786 6.46302 5.0752 6.57557 4.96265C6.68813 4.85009 6.84078 4.78686 6.99996 4.78686C7.15914 4.78686 7.31179 4.85009 7.42435 4.96265C7.5369 5.0752 7.60013 5.22786 7.60013 5.38703V8.18784C7.59806 8.34637 7.53416 8.49782 7.42205 8.60993C7.30995 8.72204 7.15849 8.78594 6.99996 8.78801Z",
+  fill: "currentColor"
+}, null, -1);
+var _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  d: "M6.99996 11.1887C6.84143 11.1866 6.68997 11.1227 6.57787 11.0106C6.46576 10.8985 6.40186 10.7471 6.39979 10.5885V10.1884C6.39979 10.0292 6.46302 9.87658 6.57557 9.76403C6.68813 9.65147 6.84078 9.58824 6.99996 9.58824C7.15914 9.58824 7.31179 9.65147 7.42435 9.76403C7.5369 9.87658 7.60013 10.0292 7.60013 10.1884V10.5885C7.59806 10.7471 7.53416 10.8985 7.42205 11.0106C7.30995 11.1227 7.15849 11.1866 6.99996 11.1887Z",
+  fill: "currentColor"
+}, null, -1);
+var _hoisted_4 = [_hoisted_1$1, _hoisted_2$1, _hoisted_3];
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", mergeProps({
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, _ctx.pti()), _hoisted_4, 16);
+}
+__name(render$1, "render$1");
+script$1.render = render$1;
+var script = {
+  name: "InfoCircleIcon",
+  "extends": script$4
+};
+var _hoisted_1 = /* @__PURE__ */ createBaseVNode("path", {
+  "fill-rule": "evenodd",
+  "clip-rule": "evenodd",
+  d: "M3.11101 12.8203C4.26215 13.5895 5.61553 14 7 14C8.85652 14 10.637 13.2625 11.9497 11.9497C13.2625 10.637 14 8.85652 14 7C14 5.61553 13.5895 4.26215 12.8203 3.11101C12.0511 1.95987 10.9579 1.06266 9.67879 0.532846C8.3997 0.00303296 6.99224 -0.13559 5.63437 0.134506C4.2765 0.404603 3.02922 1.07129 2.05026 2.05026C1.07129 3.02922 0.404603 4.2765 0.134506 5.63437C-0.13559 6.99224 0.00303296 8.3997 0.532846 9.67879C1.06266 10.9579 1.95987 12.0511 3.11101 12.8203ZM3.75918 2.14976C4.71846 1.50879 5.84628 1.16667 7 1.16667C8.5471 1.16667 10.0308 1.78125 11.1248 2.87521C12.2188 3.96918 12.8333 5.45291 12.8333 7C12.8333 8.15373 12.4912 9.28154 11.8502 10.2408C11.2093 11.2001 10.2982 11.9478 9.23232 12.3893C8.16642 12.8308 6.99353 12.9463 5.86198 12.7212C4.73042 12.4962 3.69102 11.9406 2.87521 11.1248C2.05941 10.309 1.50384 9.26958 1.27876 8.13803C1.05367 7.00647 1.16919 5.83358 1.61071 4.76768C2.05222 3.70178 2.79989 2.79074 3.75918 2.14976ZM7.00002 4.8611C6.84594 4.85908 6.69873 4.79698 6.58977 4.68801C6.48081 4.57905 6.4187 4.43185 6.41669 4.27776V3.88888C6.41669 3.73417 6.47815 3.58579 6.58754 3.4764C6.69694 3.367 6.84531 3.30554 7.00002 3.30554C7.15473 3.30554 7.3031 3.367 7.4125 3.4764C7.52189 3.58579 7.58335 3.73417 7.58335 3.88888V4.27776C7.58134 4.43185 7.51923 4.57905 7.41027 4.68801C7.30131 4.79698 7.1541 4.85908 7.00002 4.8611ZM7.00002 10.6945C6.84594 10.6925 6.69873 10.6304 6.58977 10.5214C6.48081 10.4124 6.4187 10.2652 6.41669 10.1111V6.22225C6.41669 6.06754 6.47815 5.91917 6.58754 5.80977C6.69694 5.70037 6.84531 5.63892 7.00002 5.63892C7.15473 5.63892 7.3031 5.70037 7.4125 5.80977C7.52189 5.91917 7.58335 6.06754 7.58335 6.22225V10.1111C7.58134 10.2652 7.51923 10.4124 7.41027 10.5214C7.30131 10.6304 7.1541 10.6925 7.00002 10.6945Z",
+  fill: "currentColor"
+}, null, -1);
+var _hoisted_2 = [_hoisted_1];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", mergeProps({
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, _ctx.pti()), _hoisted_2, 16);
+}
+__name(render, "render");
+script.render = render;
+export {
+  script$1 as a,
+  script$3 as b,
+  script$2 as c,
+  script as s
+};
+//# sourceMappingURL=index-DYEEBf64.js.map
--- a/web/assets/index-DYEEBf64.js.map
+++ b/web/assets/index-DYEEBf64.js.map
--- a/web/assets/userSelection-DVDwxLD5.js
+++ b/web/assets/userSelection-DVDwxLD5.js
@ -1,6 +1,6 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { b4 as api, ca as $el } from "./index-DGAbdBYF.js";
+import { bq as api, bv as $el } from "./index-CgU1oKZt.js";
 function createSpinner() {
  const div = document.createElement("div");
  div.innerHTML = `<div class="lds-ring"><div></div><div></div><div></div><div></div></div>`;
@ -126,4 +126,4 @@ window.comfyAPI.userSelection.UserSelectionScreen = UserSelectionScreen;
 export {
  UserSelectionScreen
 };
-//# sourceMappingURL=userSelection-Duxc-t_S.js.map
+//# sourceMappingURL=userSelection-DVDwxLD5.js.map
--- a/web/assets/userSelection-DVDwxLD5.js.map
+++ b/web/assets/userSelection-DVDwxLD5.js.map
--- a/web/assets/userSelection-Duxc-t_S.js.map
+++ b/web/assets/userSelection-Duxc-t_S.js.map
--- a/web/assets/widgetInputs-DNVvusS1.js
+++ b/web/assets/widgetInputs-DNVvusS1.js
@ -1,6 +1,6 @@
 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";
+import { e as LGraphNode, c as app, bA as applyTextReplacements, bz as ComfyWidgets, bG as addValueControlWidgets, k as LiteGraph } from "./index-CgU1oKZt.js";
 const CONVERTED_TYPE = "converted-widget";
 const VALID_TYPES = [
  "STRING",
@ -753,4 +753,4 @@ export {
  mergeIfValid,
  setWidgetConfig
 };
-//# sourceMappingURL=widgetInputs-DdoWwzg5.js.map
+//# sourceMappingURL=widgetInputs-DNVvusS1.js.map
--- a/web/assets/widgetInputs-DNVvusS1.js.map
+++ b/web/assets/widgetInputs-DNVvusS1.js.map
--- a/web/assets/widgetInputs-DdoWwzg5.js.map
+++ b/web/assets/widgetInputs-DdoWwzg5.js.map
--- a/web/index.html
+++ b/web/index.html
@ -6,8 +6,8 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="user.css" />
    <link rel="stylesheet" type="text/css" href="materialdesignicons.min.css" />
-    <script type="module" crossorigin src="./assets/index-DGAbdBYF.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-BHJGjcJh.css">
+    <script type="module" crossorigin src="./assets/index-CgU1oKZt.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-BDQCPKeJ.css">
  </head>
  <body class="litegraph grid">
    <div id="vue-app"></div>
				`@ -0,0 +1 @@`
				{"version":3,"file":"ExtensionPanel-DZLYjWBj.js","sources":["../../src/components/dialog/content/setting/ExtensionPanel.vue"],"sourcesContent":["<template>\n <div class=\"extension-panel\">\n <DataTable :value=\"extensionStore.extensions\" stripedRows size=\"small\">\n <Column field=\"name\" :header=\"$t('extensionName')\" sortable></Column>\n <Column\n :pt=\"{\n bodyCell: 'flex items-center justify-end'\n }\"\n >\n <template #body=\"slotProps\">\n <ToggleSwitch\n v-model=\"editingEnabledExtensions[slotProps.data.name]\"\n @change=\"updateExtensionStatus\"\n />\n </template>\n </Column>\n </DataTable>\n <div class=\"mt-4\">\n <Message v-if=\"hasChanges\" severity=\"info\">\n <ul>\n <li v-for=\"ext in changedExtensions\" :key=\"ext.name\">\n <span>\n {{ extensionStore.isExtensionEnabled(ext.name) ? '[-]' : '[+]' }}\n </span>\n {{ ext.name }}\n </li>\n </ul>\n </Message>\n <Button\n :label=\"$t('reloadToApplyChanges')\"\n icon=\"pi pi-refresh\"\n @click=\"applyChanges\"\n :disabled=\"!hasChanges\"\n text\n fluid\n severity=\"danger\"\n />\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted } from 'vue'\nimport { useExtensionStore } from '@/stores/extensionStore'\nimport { useSettingStore } from '@/stores/settingStore'\nimport DataTable from 'primevue/datatable'\nimport Column from 'primevue/column'\nimport ToggleSwitch from 'primevue/toggleswitch'\nimport Button from 'primevue/button'\nimport Message from 'primevue/message'\n\nconst extensionStore = useExtensionStore()\nconst settingStore = useSettingStore()\n\nconst editingEnabledExtensions = ref<Record<string, boolean>>({})\n\nonMounted(() => {\n extensionStore.extensions.forEach((ext) => {\n editingEnabledExtensions.value[ext.name] =\n extensionStore.isExtensionEnabled(ext.name)\n })\n})\n\nconst changedExtensions = computed(() => {\n return extensionStore.extensions.filter(\n (ext) =>\n editingEnabledExtensions.value[ext.name] !==\n extensionStore.isExtensionEnabled(ext.name)\n )\n})\n\nconst hasChanges = computed(() => {\n return changedExtensions.value.length > 0\n})\n\nconst updateExtensionStatus = () => {\n const editingDisabledExtensionNames = Object.entries(\n editingEnabledExtensions.value\n )\n .filter(([_, enabled]) => !enabled)\n .map(([name]) => name)\n\n settingStore.set('Comfy.Extension.Disabled', [\n ...extensionStore.inactiveDisabledExtensionNames,\n ...editingDisabledExtensionNames\n ])\n}\n\nconst applyChanges = () => {\n // Refresh the page to apply changes\n window.location.reload()\n}\n</script>\n"],"names":[],"mappings":";;;;;;;;;;AAmDA,UAAM,iBAAiB;AACvB,UAAM,eAAe;AAEf,UAAA,2BAA2B,IAA6B,CAAA,CAAE;AAEhE,cAAU,MAAM;AACC,qBAAA,WAAW,QAAQ,CAAC,QAAQ;AACzC,iCAAyB,MAAM,IAAI,IAAI,IACrC,eAAe,mBAAmB,IAAI,IAAI;AAAA,MAAA,CAC7C;AAAA,IAAA,CACF;AAEK,UAAA,oBAAoB,SAAS,MAAM;AACvC,aAAO,eAAe,WAAW;AAAA,QAC/B,CAAC,QACC,yBAAyB,MAAM,IAAI,IAAI,MACvC,eAAe,mBAAmB,IAAI,IAAI;AAAA,MAAA;AAAA,IAC9C,CACD;AAEK,UAAA,aAAa,SAAS,MAAM;AACzB,aAAA,kBAAkB,MAAM,SAAS;AAAA,IAAA,CACzC;AAED,UAAM,wBAAwB,6BAAM;AAClC,YAAM,gCAAgC,OAAO;AAAA,QAC3C,yBAAyB;AAAA,MAExB,EAAA,OAAO,CAAC,CAAC,GAAG,OAAO,MAAM,CAAC,OAAO,EACjC,IAAI,CAAC,CAAC,IAAI,MAAM,IAAI;AAEvB,mBAAa,IAAI,4BAA4B;AAAA,QAC3C,GAAG,eAAe;AAAA,QAClB,GAAG;AAAA,MAAA,CACJ;AAAA,IAAA,GAV2B;AAa9B,UAAM,eAAe,6BAAM;AAEzB,aAAO,SAAS;IAAO,GAFJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}