Update frontend to v1.7.14 (#6522)

Co-authored-by: huchenlei <20929282+huchenlei@users.noreply.github.com>

web/assets/BaseViewTemplate-BNGF4K22.js

@@ -1,23 +0,0 @@
-import { d as defineComponent, o as openBlock, f as createElementBlock, J as renderSlot, T as normalizeClass } from "./index-DjNHn37O.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "BaseViewTemplate",
-  props: {
-    dark: { type: Boolean, default: false }
-  },
-  setup(__props) {
-    const props = __props;
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["font-sans w-screen h-screen flex items-center justify-center pointer-events-auto overflow-auto", [
-          props.dark ? "text-neutral-300 bg-neutral-900 dark-theme" : "text-neutral-900 bg-neutral-300"
-        ]])
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 2);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};
-//# sourceMappingURL=BaseViewTemplate-BNGF4K22.js.map

web/assets/BaseViewTemplate-BhQMaVFP.js

@@ -0,0 +1,54 @@
+import { d as defineComponent, ad as ref, t as onMounted, bT as isElectron, bV as electronAPI, af as nextTick, o as openBlock, f as createElementBlock, i as withDirectives, v as vShow, m as createBaseVNode, M as renderSlot, V as normalizeClass } from "./index-QvfM__ze.js";
+const _hoisted_1 = { class: "flex-grow w-full flex items-center justify-center overflow-auto" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "BaseViewTemplate",
+  props: {
+    dark: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const darkTheme = {
+      color: "rgba(0, 0, 0, 0)",
+      symbolColor: "#d4d4d4"
+    };
+    const lightTheme = {
+      color: "rgba(0, 0, 0, 0)",
+      symbolColor: "#171717"
+    };
+    const topMenuRef = ref(null);
+    const isNativeWindow = ref(false);
+    onMounted(async () => {
+      if (isElectron()) {
+        const windowStyle = await electronAPI().Config.getWindowStyle();
+        isNativeWindow.value = windowStyle === "custom";
+        await nextTick();
+        electronAPI().changeTheme({
+          ...props.dark ? darkTheme : lightTheme,
+          height: topMenuRef.value.getBoundingClientRect().height
+        });
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["font-sans w-screen h-screen flex flex-col pointer-events-auto", [
+          props.dark ? "text-neutral-300 bg-neutral-900 dark-theme" : "text-neutral-900 bg-neutral-300"
+        ]])
+      }, [
+        withDirectives(createBaseVNode("div", {
+          ref_key: "topMenuRef",
+          ref: topMenuRef,
+          class: "app-drag w-full h-[var(--comfy-topbar-height)]"
+        }, null, 512), [
+          [vShow, isNativeWindow.value]
+        ]),
+        createBaseVNode("div", _hoisted_1, [
+          renderSlot(_ctx.$slots, "default")
+        ])
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};
+//# sourceMappingURL=BaseViewTemplate-BhQMaVFP.js.map

web/assets/DesktopStartView-le6AjGZr.js

@@ -0,0 +1,22 @@
+import { d as defineComponent, o as openBlock, J as createBlock, P as withCtx, m as createBaseVNode, k as createVNode, j as unref, ch as script } from "./index-QvfM__ze.js";
+import { _ as _sfc_main$1 } from "./BaseViewTemplate-BhQMaVFP.js";
+const _hoisted_1 = { class: "max-w-screen-sm w-screen p-8" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "DesktopStartView",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, { dark: "" }, {
+        default: withCtx(() => [
+          createBaseVNode("div", _hoisted_1, [
+            createVNode(unref(script), { mode: "indeterminate" })
+          ])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=DesktopStartView-le6AjGZr.js.map

web/assets/DownloadGitView-rPK_vYgU.js

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { d as defineComponent, o as openBlock, k as createBlock, M as withCtx, H as createBaseVNode, X as toDisplayString, N as createVNode, j as unref, l as script, bW as useRouter } from "./index-DjNHn37O.js";
-import { _ as _sfc_main$1 } from "./BaseViewTemplate-BNGF4K22.js";
+import { d as defineComponent, o as openBlock, J as createBlock, P as withCtx, m as createBaseVNode, Z as toDisplayString, k as createVNode, j as unref, l as script, c2 as useRouter } from "./index-QvfM__ze.js";
+import { _ as _sfc_main$1 } from "./BaseViewTemplate-BhQMaVFP.js";
 const _hoisted_1 = { class: "max-w-screen-sm flex flex-col gap-8 p-8 bg-[url('/assets/images/Git-Logo-White.svg')] bg-no-repeat bg-right-top bg-origin-padding" };
 const _hoisted_2 = { class: "mt-24 text-4xl font-bold text-red-500" };
 const _hoisted_3 = { class: "space-y-4" };
@@ -55,4 +55,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   _sfc_main as default
 };
-//# sourceMappingURL=DownloadGitView-DeC7MBzG.js.map
+//# sourceMappingURL=DownloadGitView-rPK_vYgU.js.map

web/assets/ExtensionPanel-3jWrm6Zi.js

@@ -1,9 +1,8 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { d as defineComponent, ab as ref, cn as FilterMatchMode, cs as useExtensionStore, a as useSettingStore, m as onMounted, c as computed, o as openBlock, k as createBlock, M as withCtx, N as createVNode, co as SearchBox, j as unref, bZ as script, H as createBaseVNode, f as createElementBlock, E as renderList, X as toDisplayString, aE as createTextVNode, F as Fragment, l as script$1, I as createCommentVNode, aI as script$3, bO as script$4, c4 as script$5, cp as _sfc_main$1 } from "./index-DjNHn37O.js";
-import { s as script$2, a as script$6 } from "./index-B5F0uxTQ.js";
-import "./index-B-aVupP5.js";
-import "./index-5HFeZax4.js";
+import { d as defineComponent, ad as ref, cu as FilterMatchMode, cz as useExtensionStore, a as useSettingStore, t as onMounted, c as computed, o as openBlock, J as createBlock, P as withCtx, k as createVNode, cv as SearchBox, j as unref, c6 as script, m as createBaseVNode, f as createElementBlock, I as renderList, Z as toDisplayString, aG as createTextVNode, H as Fragment, l as script$1, L as createCommentVNode, aK as script$3, b8 as script$4, cc as script$5, cw as _sfc_main$1 } from "./index-QvfM__ze.js";
+import { s as script$2, a as script$6 } from "./index-DpF-ptbJ.js";
+import "./index-Q1cQr26V.js";
 const _hoisted_1 = { class: "flex justify-end" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ExtensionPanel",
@@ -180,4 +179,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   _sfc_main as default
 };
-//# sourceMappingURL=ExtensionPanel-D4Phn0Zr.js.map
+//# sourceMappingURL=ExtensionPanel-3jWrm6Zi.js.map

web/assets/GraphView-CqZ3opAX.css

@@ -1,8 +1,10 @@
 
-.comfy-menu-hamburger[data-v-5661bed0] {
-  pointer-events: auto;
-  position: fixed;
-  z-index: 9999;
+.comfy-menu-hamburger[data-v-7ed57d1a] {
+    pointer-events: auto;
+    position: fixed;
+    z-index: 9999;
+    display: flex;
+    flex-direction: row
 }
 
 [data-v-e50caa15] .p-splitter-gutter {
@@ -39,14 +41,14 @@
   z-index: 999;
 }
 
-.p-buttongroup-vertical[data-v-cf40dd39] {
+.p-buttongroup-vertical[data-v-cb8f9a1a] {
   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-cf40dd39] {
+.p-buttongroup-vertical .p-button[data-v-cb8f9a1a] {
   margin: 0;
   border-radius: 0;
 }
@@ -82,7 +84,7 @@
   font-size: inherit;
 }
 
-[data-v-5741c9ae] .highlight {
+[data-v-fd0a74bd] .highlight {
   background-color: var(--p-primary-color);
   color: var(--p-primary-contrast-color);
   font-weight: bold;
@@ -131,16 +133,7 @@
   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-37d8d7b4] {
+.side-tool-bar-container[data-v-33cac83a] {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -153,18 +146,91 @@
   background-color: var(--comfy-menu-secondary-bg);
   color: var(--fg-color);
   box-shadow: var(--bar-shadow);
+
+  --sidebar-width: 4rem;
+  --sidebar-icon-size: 1.5rem;
 }
-.side-tool-bar-end[data-v-37d8d7b4] {
+.side-tool-bar-container.small-sidebar[data-v-33cac83a] {
+  --sidebar-width: 2.5rem;
+  --sidebar-icon-size: 1rem;
+}
+.side-tool-bar-end[data-v-33cac83a] {
   align-self: flex-end;
   margin-top: auto;
 }
 
-[data-v-b9328350] .p-inputtext {
+.status-indicator[data-v-8d011a31] {
+  position: absolute;
+  font-weight: 700;
+  font-size: 1.5rem;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%)
+}
+
+[data-v-54fadc45] .p-togglebutton {
+  position: relative;
+  flex-shrink: 0;
+  border-radius: 0px;
+  border-width: 0px;
+  border-right-width: 1px;
+  border-style: solid;
+  background-color: transparent;
+  padding: 0px;
+  border-right-color: var(--border-color)
+}
+[data-v-54fadc45] .p-togglebutton::before {
+  display: none
+}
+[data-v-54fadc45] .p-togglebutton:first-child {
+  border-left-width: 1px;
+  border-style: solid;
+  border-left-color: var(--border-color)
+}
+[data-v-54fadc45] .p-togglebutton:not(:first-child) {
+  border-left-width: 0px
+}
+[data-v-54fadc45] .p-togglebutton.p-togglebutton-checked {
+  height: 100%;
+  border-bottom-width: 1px;
+  border-style: solid;
+  border-bottom-color: var(--p-button-text-primary-color)
+}
+[data-v-54fadc45] .p-togglebutton:not(.p-togglebutton-checked) {
+  opacity: 0.75
+}
+[data-v-54fadc45] .p-togglebutton-checked .close-button,[data-v-54fadc45] .p-togglebutton:hover .close-button {
+  visibility: visible
+}
+[data-v-54fadc45] .p-togglebutton:hover .status-indicator {
+  display: none
+}
+[data-v-54fadc45] .p-togglebutton .close-button {
+  visibility: hidden
+}
+[data-v-54fadc45] .p-scrollpanel-content {
+  height: 100%
+}
+
+/* Scrollbar half opacity to avoid blocking the active tab bottom border */
+[data-v-54fadc45] .p-scrollpanel:hover .p-scrollpanel-bar,[data-v-54fadc45] .p-scrollpanel:active .p-scrollpanel-bar {
+  opacity: 0.5
+}
+[data-v-54fadc45] .p-selectbutton {
+  height: 100%;
+  border-radius: 0px
+}
+
+[data-v-38831d8e] .workflow-tabs {
+  background-color: var(--comfy-menu-bg);
+}
+
+[data-v-26957f1f] .p-inputtext {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.comfyui-queue-button[data-v-7f4f551b] .p-splitbutton-dropdown {
+.comfyui-queue-button[data-v-e9044686] .p-splitbutton-dropdown {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
@@ -195,55 +261,23 @@
   display: none;
 }
 
-.top-menubar[data-v-6fecd137] .p-menubar-item-link svg {
+.top-menubar[data-v-56df69d2] .p-menubar-item-link svg {
   display: none;
 }
-[data-v-6fecd137] .p-menubar-submenu.dropdown-direction-up {
+[data-v-56df69d2] .p-menubar-submenu.dropdown-direction-up {
   top: auto;
   bottom: 100%;
   flex-direction: column-reverse;
 }
-.keybinding-tag[data-v-6fecd137] {
+.keybinding-tag[data-v-56df69d2] {
   background: var(--p-content-hover-background);
   border-color: var(--p-content-border-color);
   border-style: solid;
 }
 
-.status-indicator[data-v-8d011a31] {
-  position: absolute;
-  font-weight: 700;
-  font-size: 1.5rem;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%)
-}
-
-[data-v-d485c044] .p-togglebutton::before {
-  display: none
-}
-[data-v-d485c044] .p-togglebutton {
-  position: relative;
-  flex-shrink: 0;
-  border-radius: 0px;
-  background-color: transparent;
-  padding: 0px
-}
-[data-v-d485c044] .p-togglebutton.p-togglebutton-checked {
-  border-bottom-width: 2px;
-  border-bottom-color: var(--p-button-text-primary-color)
-}
-[data-v-d485c044] .p-togglebutton-checked .close-button,[data-v-d485c044] .p-togglebutton:hover .close-button {
-  visibility: visible
-}
-[data-v-d485c044] .p-togglebutton:hover .status-indicator {
-  display: none
-}
-[data-v-d485c044] .p-togglebutton .close-button {
-  visibility: hidden
-}
-
-.comfyui-menu[data-v-878b63b8] {
+.comfyui-menu[data-v-6e35440f] {
   width: 100vw;
+  height: var(--comfy-topbar-height);
   background: var(--comfy-menu-bg);
   color: var(--fg-color);
   box-shadow: var(--bar-shadow);
@@ -253,18 +287,17 @@
   z-index: 1000;
   order: 0;
   grid-column: 1/-1;
-  max-height: 90vh;
 }
-.comfyui-menu.dropzone[data-v-878b63b8] {
+.comfyui-menu.dropzone[data-v-6e35440f] {
   background: var(--p-highlight-background);
 }
-.comfyui-menu.dropzone-active[data-v-878b63b8] {
+.comfyui-menu.dropzone-active[data-v-6e35440f] {
   background: var(--p-highlight-background-focus);
 }
-[data-v-878b63b8] .p-menubar-item-label {
+[data-v-6e35440f] .p-menubar-item-label {
   line-height: revert;
 }
-.comfyui-logo[data-v-878b63b8] {
+.comfyui-logo[data-v-6e35440f] {
   font-size: 1.2em;
   -webkit-user-select: none;
      -moz-user-select: none;

web/assets/InstallView-By3hC1fC.js

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value2) => __defProp(target, "name", { value: value2, configurable: true });
-import { B as BaseStyle, q as script$6, o as openBlock, f as createElementBlock, D as mergeProps, c1 as findIndexInList, c2 as find, aB as resolveComponent, k as createBlock, G as resolveDynamicComponent, M as withCtx, H as createBaseVNode, X as toDisplayString, J as renderSlot, I as createCommentVNode, T as normalizeClass, P as findSingle, F as Fragment, aC as Transition, i as withDirectives, v as vShow, ak as UniqueComponentId, d as defineComponent, ab as ref, c3 as useModel, N as createVNode, j as unref, c4 as script$7, bQ as script$8, bM as withModifiers, aP as script$9, a1 as useI18n, c as computed, aI as script$a, aE as createTextVNode, c0 as electronAPI, m as onMounted, r as resolveDirective, av as script$b, c5 as script$c, c6 as script$d, l as script$e, bZ as script$f, c7 as MigrationItems, w as watchEffect, E as renderList, c8 as script$g, bW as useRouter, aL as pushScopeId, aM as popScopeId, aU as toRaw, _ as _export_sfc } from "./index-DjNHn37O.js";
-import { _ as _sfc_main$5 } from "./BaseViewTemplate-BNGF4K22.js";
+import { B as BaseStyle, y as script$6, o as openBlock, f as createElementBlock, G as mergeProps, c9 as findIndexInList, ca as find, aD as resolveComponent, J as createBlock, K as resolveDynamicComponent, P as withCtx, m as createBaseVNode, Z as toDisplayString, M as renderSlot, L as createCommentVNode, V as normalizeClass, R as findSingle, H as Fragment, aE as Transition, i as withDirectives, v as vShow, am as UniqueComponentId, d as defineComponent, ad as ref, cb as useModel, k as createVNode, j as unref, cc as script$7, c4 as script$8, b3 as withModifiers, aP as script$9, a3 as useI18n, c as computed, aK as script$a, aG as createTextVNode, p as pushScopeId, q as popScopeId, bV as electronAPI, _ as _export_sfc, t as onMounted, r as resolveDirective, ax as script$b, cd as script$c, ce as script$d, l as script$e, c6 as script$f, cf as MigrationItems, w as watchEffect, I as renderList, cg as script$g, c2 as useRouter, aU as toRaw } from "./index-QvfM__ze.js";
+import { _ as _sfc_main$5 } from "./BaseViewTemplate-BhQMaVFP.js";
 var classes$4 = {
   root: /* @__PURE__ */ __name(function root(_ref) {
     var instance = _ref.instance;
@@ -548,6 +548,12 @@ const _hoisted_15$2 = { class: "font-medium mb-2" };
 const _hoisted_16$2 = { class: "list-disc pl-6 space-y-1" };
 const _hoisted_17$2 = { class: "font-medium mt-4 mb-2" };
 const _hoisted_18$2 = { class: "list-disc pl-6 space-y-1" };
+const _hoisted_19 = { class: "mt-4" };
+const _hoisted_20 = {
+  href: "https://comfy.org/privacy",
+  target: "_blank",
+  class: "text-blue-400 hover:text-blue-300 underline"
+};
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "DesktopSettingsConfiguration",
   props: {
@@ -608,17 +614,29 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             createBaseVNode("div", _hoisted_14$2, [
               createBaseVNode("h4", _hoisted_15$2, toDisplayString(_ctx.$t("install.settings.dataCollectionDialog.whatWeCollect")), 1),
               createBaseVNode("ul", _hoisted_16$2, [
-                createBaseVNode("li", null, toDisplayString(_ctx.$t("install.settings.dataCollectionDialog.errorReports")), 1),
-                createBaseVNode("li", null, toDisplayString(_ctx.$t("install.settings.dataCollectionDialog.systemInfo")), 1)
+                createBaseVNode("li", null, toDisplayString(_ctx.$t("install.settings.dataCollectionDialog.collect.errorReports")), 1),
+                createBaseVNode("li", null, toDisplayString(_ctx.$t("install.settings.dataCollectionDialog.collect.systemInfo")), 1),
+                createBaseVNode("li", null, toDisplayString(_ctx.$t(
+                  "install.settings.dataCollectionDialog.collect.userJourneyEvents"
+                )), 1)
               ]),
               createBaseVNode("h4", _hoisted_17$2, toDisplayString(_ctx.$t("install.settings.dataCollectionDialog.whatWeDoNotCollect")), 1),
               createBaseVNode("ul", _hoisted_18$2, [
-                createBaseVNode("li", null, toDisplayString(_ctx.$t("install.settings.dataCollectionDialog.personalInformation")), 1),
-                createBaseVNode("li", null, toDisplayString(_ctx.$t("install.settings.dataCollectionDialog.workflowContents")), 1),
-                createBaseVNode("li", null, toDisplayString(_ctx.$t("install.settings.dataCollectionDialog.fileSystemInformation")), 1),
                 createBaseVNode("li", null, toDisplayString(_ctx.$t(
-                  "install.settings.dataCollectionDialog.customNodeConfigurations"
+                  "install.settings.dataCollectionDialog.doNotCollect.personalInformation"
+                )), 1),
+                createBaseVNode("li", null, toDisplayString(_ctx.$t(
+                  "install.settings.dataCollectionDialog.doNotCollect.workflowContents"
+                )), 1),
+                createBaseVNode("li", null, toDisplayString(_ctx.$t(
+                  "install.settings.dataCollectionDialog.doNotCollect.fileSystemInformation"
+                )), 1),
+                createBaseVNode("li", null, toDisplayString(_ctx.$t(
+                  "install.settings.dataCollectionDialog.doNotCollect.customNodeConfigurations"
                 )), 1)
+              ]),
+              createBaseVNode("div", _hoisted_19, [
+                createBaseVNode("a", _hoisted_20, toDisplayString(_ctx.$t("install.settings.dataCollectionDialog.viewFullPolicy")), 1)
               ])
             ])
           ]),
@@ -631,36 +649,37 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
 const _imports_0 = "" + new URL("images/nvidia-logo.svg", import.meta.url).href;
 const _imports_1 = "" + new URL("images/apple-mps-logo.png", import.meta.url).href;
 const _imports_2 = "" + new URL("images/manual-configuration.svg", import.meta.url).href;
+const _withScopeId$1 = /* @__PURE__ */ __name((n) => (pushScopeId("data-v-79125ff6"), n = n(), popScopeId(), n), "_withScopeId$1");
 const _hoisted_1$3 = { class: "flex flex-col gap-6 w-[600px] h-[30rem] select-none" };
 const _hoisted_2$3 = { class: "grow flex flex-col gap-4 text-neutral-300" };
 const _hoisted_3$3 = { class: "text-2xl font-semibold text-neutral-100" };
 const _hoisted_4$3 = { class: "m-1 text-neutral-400" };
-const _hoisted_5$2 = /* @__PURE__ */ createBaseVNode("img", {
+const _hoisted_5$2 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createBaseVNode("img", {
   class: "m-12",
   alt: "NVIDIA logo",
   width: "196",
   height: "32",
   src: _imports_0
-}, null, -1);
+}, null, -1));
 const _hoisted_6$2 = [
   _hoisted_5$2
 ];
-const _hoisted_7$2 = /* @__PURE__ */ createBaseVNode("img", {
+const _hoisted_7$2 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createBaseVNode("img", {
   class: "rounded-lg hover-brighten",
   alt: "Apple Metal Performance Shaders Logo",
   width: "292",
   ratio: "",
   src: _imports_1
-}, null, -1);
+}, null, -1));
 const _hoisted_8$2 = [
   _hoisted_7$2
 ];
-const _hoisted_9$2 = /* @__PURE__ */ createBaseVNode("img", {
+const _hoisted_9$2 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createBaseVNode("img", {
   class: "m-12",
   alt: "Manual configuration",
   width: "196",
   src: _imports_2
-}, null, -1);
+}, null, -1));
 const _hoisted_10$2 = [
   _hoisted_9$2
 ];
@@ -797,6 +816,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const GpuPicker = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-79125ff6"]]);
 const _hoisted_1$2 = { class: "flex flex-col gap-6 w-[600px]" };
 const _hoisted_2$2 = { class: "flex flex-col gap-4" };
 const _hoisted_3$2 = { class: "text-2xl font-semibold text-neutral-100" };
@@ -1082,7 +1102,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _withScopeId = /* @__PURE__ */ __name((n) => (pushScopeId("data-v-de33872d"), n = n(), popScopeId(), n), "_withScopeId");
+const _withScopeId = /* @__PURE__ */ __name((n) => (pushScopeId("data-v-0a97b0ae"), n = n(), popScopeId(), n), "_withScopeId");
 const _hoisted_1 = { class: "flex pt-6 justify-end" };
 const _hoisted_2 = { class: "flex pt-6 justify-between" };
 const _hoisted_3 = { class: "flex pt-6 justify-between" };
@@ -1098,6 +1118,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const autoUpdate = ref(true);
     const allowMetrics = ref(true);
     const highestStep = ref(0);
+    const handleStepChange = /* @__PURE__ */ __name((value2) => {
+      setHighestStep(value2);
+      electronAPI().Events.trackEvent("install_stepper_change", {
+        step: value2
+      });
+    }, "handleStepChange");
     const setHighestStep = /* @__PURE__ */ __name((value2) => {
       const int = typeof value2 === "number" ? value2 : parseInt(value2, 10);
       if (!isNaN(int) && int > highestStep.value) highestStep.value = int;
@@ -1122,8 +1148,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onMounted(async () => {
       if (!electron) return;
       const detectedGpu = await electron.Config.getDetectedGpu();
-      if (detectedGpu === "mps" || detectedGpu === "nvidia")
+      if (detectedGpu === "mps" || detectedGpu === "nvidia") {
         device.value = detectedGpu;
+      }
+      electronAPI().Events.trackEvent("install_stepper_change", {
+        step: "0",
+        gpu: detectedGpu
+      });
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$5, { dark: "" }, {
@@ -1131,7 +1162,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createVNode(unref(script), {
             class: "h-full p-8 2xl:p-16",
             value: "0",
-            "onUpdate:value": setHighestStep
+            "onUpdate:value": handleStepChange
           }, {
             default: withCtx(() => [
               createVNode(unref(script$4), { class: "select-none" }, {
@@ -1176,7 +1207,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createVNode(unref(script$3), { value: "0" }, {
                     default: withCtx(({ activateCallback }) => [
-                      createVNode(_sfc_main$3, {
+                      createVNode(GpuPicker, {
                         device: device.value,
                         "onUpdate:device": _cache[0] || (_cache[0] = ($event) => device.value = $event)
                       }, null, 8, ["device"]),
@@ -1281,8 +1312,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const InstallView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-de33872d"]]);
+const InstallView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0a97b0ae"]]);
 export {
   InstallView as default
 };
-//# sourceMappingURL=InstallView-CAcYt0HL.js.map
+//# sourceMappingURL=InstallView-By3hC1fC.js.map

web/assets/InstallView-CxhfFC8Y.css

@@ -1,18 +1,18 @@
 
-:root {
+.p-tag[data-v-79125ff6] {
   --p-tag-gap: 0.5rem;
 }
-.hover-brighten {
+.hover-brighten[data-v-79125ff6] {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
   transition-property: filter, box-shadow;
-&:hover {
+&[data-v-79125ff6]:hover {
     filter: brightness(107%) contrast(105%);
     box-shadow: 0 0 0.25rem #ffffff79;
 }
 }
-.p-accordioncontent-content {
+.p-accordioncontent-content[data-v-79125ff6] {
   border-radius: 0.5rem;
   --tw-bg-opacity: 1;
   background-color: rgb(23 23 23 / var(--tw-bg-opacity));
@@ -20,15 +20,15 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-div.selected {
-.gpu-button:not(.selected) {
+div.selected[data-v-79125ff6] {
+.gpu-button[data-v-79125ff6]:not(.selected) {
     opacity: 0.5;
 }
-.gpu-button:not(.selected):hover {
+.gpu-button[data-v-79125ff6]:not(.selected):hover {
     opacity: 1;
 }
 }
-.gpu-button {
+.gpu-button[data-v-79125ff6] {
   margin: 0px;
   display: flex;
   width: 50%;
@@ -43,37 +43,37 @@ div.selected {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.gpu-button:hover {
+.gpu-button[data-v-79125ff6]:hover {
   --tw-bg-opacity: 0.75;
 }
-.gpu-button {
-&.selected {
+.gpu-button[data-v-79125ff6] {
+&.selected[data-v-79125ff6] {
     --tw-bg-opacity: 1;
     background-color: rgb(64 64 64 / var(--tw-bg-opacity));
 }
-&.selected {
+&.selected[data-v-79125ff6] {
     --tw-bg-opacity: 0.5;
 }
-&.selected {
+&.selected[data-v-79125ff6] {
     opacity: 1;
 }
-&.selected:hover {
+&.selected[data-v-79125ff6]:hover {
     --tw-bg-opacity: 0.6;
 }
 }
-.disabled {
+.disabled[data-v-79125ff6] {
   pointer-events: none;
   opacity: 0.4;
 }
-.p-card-header {
+.p-card-header[data-v-79125ff6] {
   flex-grow: 1;
   text-align: center;
 }
-.p-card-body {
+.p-card-body[data-v-79125ff6] {
   padding-top: 0px;
   text-align: center;
 }
 
-[data-v-de33872d] .p-steppanel {
+[data-v-0a97b0ae] .p-steppanel {
     background-color: transparent
 }

web/assets/KeybindingPanel-D6O16W_1.js

@@ -1,10 +1,9 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { d as defineComponent, c as computed, o as openBlock, f as createElementBlock, F as Fragment, E as renderList, N as createVNode, M as withCtx, aE as createTextVNode, X as toDisplayString, j as unref, aI as script, I as createCommentVNode, ab as ref, cn as FilterMatchMode, a$ as useKeybindingStore, a2 as useCommandStore, a1 as useI18n, af as normalizeI18nKey, w as watchEffect, bs as useToast, r as resolveDirective, k as createBlock, co as SearchBox, H as createBaseVNode, l as script$2, av as script$4, bM as withModifiers, bZ as script$5, aP as script$6, i as withDirectives, cp as _sfc_main$2, aL as pushScopeId, aM as popScopeId, cq as KeyComboImpl, cr as KeybindingImpl, _ as _export_sfc } from "./index-DjNHn37O.js";
-import { s as script$1, a as script$3 } from "./index-B5F0uxTQ.js";
-import { u as useKeybindingService } from "./keybindingService-Bx7YdkXn.js";
-import "./index-B-aVupP5.js";
-import "./index-5HFeZax4.js";
+import { d as defineComponent, c as computed, o as openBlock, f as createElementBlock, H as Fragment, I as renderList, k as createVNode, P as withCtx, aG as createTextVNode, Z as toDisplayString, j as unref, aK as script, L as createCommentVNode, ad as ref, cu as FilterMatchMode, a$ as useKeybindingStore, a4 as useCommandStore, a3 as useI18n, ah as normalizeI18nKey, w as watchEffect, bz as useToast, r as resolveDirective, J as createBlock, cv as SearchBox, m as createBaseVNode, l as script$2, ax as script$4, b3 as withModifiers, c6 as script$5, aP as script$6, i as withDirectives, cw as _sfc_main$2, p as pushScopeId, q as popScopeId, cx as KeyComboImpl, cy as KeybindingImpl, _ as _export_sfc } from "./index-QvfM__ze.js";
+import { s as script$1, a as script$3 } from "./index-DpF-ptbJ.js";
+import { u as useKeybindingService } from "./keybindingService-Cak1En5n.js";
+import "./index-Q1cQr26V.js";
 const _hoisted_1$1 = {
   key: 0,
   class: "px-2"
@@ -281,4 +280,4 @@ const KeybindingPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "d
 export {
   KeybindingPanel as default
 };
-//# sourceMappingURL=KeybindingPanel-Dc3C4lG1.js.map
+//# sourceMappingURL=KeybindingPanel-D6O16W_1.js.map

web/assets/ManualConfigurationView-CsirlNfV.css

@@ -1,7 +1,7 @@
 
-:root {
+.p-tag[data-v-dc169863] {
   --p-tag-gap: 0.5rem;
 }
-.comfy-installer {
+.comfy-installer[data-v-dc169863] {
   margin-top: max(1rem, max(0px, calc((100vh - 42rem) * 0.5)));
 }

web/assets/ManualConfigurationView-enyqGo0M.js

@@ -1,9 +1,8 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { d as defineComponent, a1 as useI18n, ab as ref, m as onMounted, o as openBlock, k as createBlock, M as withCtx, H as createBaseVNode, X as toDisplayString, N as createVNode, j as unref, aI as script, l as script$2, c0 as electronAPI } from "./index-DjNHn37O.js";
-import { s as script$1 } from "./index-jXPKy3pP.js";
-import { _ as _sfc_main$1 } from "./BaseViewTemplate-BNGF4K22.js";
-import "./index-5HFeZax4.js";
+import { d as defineComponent, a3 as useI18n, ad as ref, t as onMounted, o as openBlock, J as createBlock, P as withCtx, m as createBaseVNode, Z as toDisplayString, k as createVNode, j as unref, aK as script, bN as script$1, l as script$2, p as pushScopeId, q as popScopeId, bV as electronAPI, _ as _export_sfc } from "./index-QvfM__ze.js";
+import { _ as _sfc_main$1 } from "./BaseViewTemplate-BhQMaVFP.js";
+const _withScopeId = /* @__PURE__ */ __name((n) => (pushScopeId("data-v-dc169863"), n = n(), popScopeId(), n), "_withScopeId");
 const _hoisted_1 = { class: "comfy-installer grow flex flex-col gap-4 text-neutral-300 max-w-110" };
 const _hoisted_2 = { class: "text-2xl font-semibold text-neutral-100" };
 const _hoisted_3 = { class: "m-1 text-neutral-300" };
@@ -69,7 +68,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const ManualConfigurationView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-dc169863"]]);
 export {
-  _sfc_main as default
+  ManualConfigurationView as default
 };
-//# sourceMappingURL=ManualConfigurationView-Bi_qHE-n.js.map
+//# sourceMappingURL=ManualConfigurationView-enyqGo0M.js.map

web/assets/MetricsConsentView-lSfLu4nr.js

@@ -0,0 +1,86 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { _ as _sfc_main$1 } from "./BaseViewTemplate-BhQMaVFP.js";
+import { d as defineComponent, bz as useToast, a3 as useI18n, ad as ref, c2 as useRouter, o as openBlock, J as createBlock, P as withCtx, m as createBaseVNode, Z as toDisplayString, aG as createTextVNode, k as createVNode, j as unref, cc as script, l as script$1, bV as electronAPI } from "./index-QvfM__ze.js";
+const _hoisted_1 = { class: "h-full p-8 2xl:p-16 flex flex-col items-center justify-center" };
+const _hoisted_2 = { class: "bg-neutral-800 rounded-lg shadow-lg p-6 w-full max-w-[600px] flex flex-col gap-6" };
+const _hoisted_3 = { class: "text-3xl font-semibold text-neutral-100" };
+const _hoisted_4 = { class: "text-neutral-400" };
+const _hoisted_5 = { class: "text-neutral-400" };
+const _hoisted_6 = {
+  href: "https://comfy.org/privacy",
+  target: "_blank",
+  class: "text-blue-400 hover:text-blue-300 underline"
+};
+const _hoisted_7 = { class: "flex items-center gap-4" };
+const _hoisted_8 = {
+  id: "metricsDescription",
+  class: "text-neutral-100"
+};
+const _hoisted_9 = { class: "flex pt-6 justify-end" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MetricsConsentView",
+  setup(__props) {
+    const toast = useToast();
+    const { t } = useI18n();
+    const allowMetrics = ref(true);
+    const router = useRouter();
+    const isUpdating = ref(false);
+    const updateConsent = /* @__PURE__ */ __name(async () => {
+      isUpdating.value = true;
+      try {
+        await electronAPI().setMetricsConsent(allowMetrics.value);
+      } catch (error) {
+        toast.add({
+          severity: "error",
+          summary: t("install.errorUpdatingConsent"),
+          detail: t("install.errorUpdatingConsentDetail"),
+          life: 3e3
+        });
+      } finally {
+        isUpdating.value = false;
+      }
+      router.push("/");
+    }, "updateConsent");
+    return (_ctx, _cache) => {
+      const _component_BaseViewTemplate = _sfc_main$1;
+      return openBlock(), createBlock(_component_BaseViewTemplate, { dark: "" }, {
+        default: withCtx(() => [
+          createBaseVNode("div", _hoisted_1, [
+            createBaseVNode("div", _hoisted_2, [
+              createBaseVNode("h2", _hoisted_3, toDisplayString(_ctx.$t("install.helpImprove")), 1),
+              createBaseVNode("p", _hoisted_4, toDisplayString(_ctx.$t("install.updateConsent")), 1),
+              createBaseVNode("p", _hoisted_5, [
+                createTextVNode(toDisplayString(_ctx.$t("install.moreInfo")) + " ", 1),
+                createBaseVNode("a", _hoisted_6, toDisplayString(_ctx.$t("install.privacyPolicy")), 1),
+                createTextVNode(". ")
+              ]),
+              createBaseVNode("div", _hoisted_7, [
+                createVNode(unref(script), {
+                  modelValue: allowMetrics.value,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => allowMetrics.value = $event),
+                  "aria-describedby": "metricsDescription"
+                }, null, 8, ["modelValue"]),
+                createBaseVNode("span", _hoisted_8, toDisplayString(allowMetrics.value ? _ctx.$t("install.metricsEnabled") : _ctx.$t("install.metricsDisabled")), 1)
+              ]),
+              createBaseVNode("div", _hoisted_9, [
+                createVNode(unref(script$1), {
+                  label: _ctx.$t("g.ok"),
+                  icon: "pi pi-check",
+                  loading: isUpdating.value,
+                  iconPos: "right",
+                  onClick: updateConsent
+                }, null, 8, ["label", "loading"])
+              ])
+            ])
+          ])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=MetricsConsentView-lSfLu4nr.js.map

web/assets/NotSupportedView-DQerxQzi.css

@@ -1,17 +1,17 @@
 
-.sad-container {
+.sad-container[data-v-ebb20958] {
   display: grid;
   align-items: center;
   justify-content: space-evenly;
   grid-template-columns: 25rem 1fr;
-& > * {
+&[data-v-ebb20958] > * {
     grid-row: 1;
 }
 }
-.sad-text {
+.sad-text[data-v-ebb20958] {
   grid-column: 1/3;
 }
-.sad-girl {
+.sad-girl[data-v-ebb20958] {
   grid-column: 2/3;
   width: min(75vw, 100vh);
 }

web/assets/NotSupportedView-Vc8_xWgH.js

@@ -1,14 +1,15 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { d as defineComponent, bW as useRouter, r as resolveDirective, o as openBlock, k as createBlock, M as withCtx, H as createBaseVNode, X as toDisplayString, N as createVNode, j as unref, l as script, i as withDirectives } from "./index-DjNHn37O.js";
-import { _ as _sfc_main$1 } from "./BaseViewTemplate-BNGF4K22.js";
+import { d as defineComponent, c2 as useRouter, r as resolveDirective, o as openBlock, J as createBlock, P as withCtx, m as createBaseVNode, Z as toDisplayString, k as createVNode, j as unref, l as script, i as withDirectives, p as pushScopeId, q as popScopeId, _ as _export_sfc } from "./index-QvfM__ze.js";
+import { _ as _sfc_main$1 } from "./BaseViewTemplate-BhQMaVFP.js";
 const _imports_0 = "" + new URL("images/sad_girl.png", import.meta.url).href;
+const _withScopeId = /* @__PURE__ */ __name((n) => (pushScopeId("data-v-ebb20958"), n = n(), popScopeId(), n), "_withScopeId");
 const _hoisted_1 = { class: "sad-container" };
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("img", {
+const _hoisted_2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("img", {
   class: "sad-girl",
   src: _imports_0,
   alt: "Sad girl illustration"
-}, null, -1);
+}, null, -1));
 const _hoisted_3 = { class: "no-drag sad-text flex items-center" };
 const _hoisted_4 = { class: "flex flex-col gap-8 p-8 min-w-110" };
 const _hoisted_5 = { class: "text-4xl font-bold text-red-500" };
@@ -80,7 +81,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const NotSupportedView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ebb20958"]]);
 export {
-  _sfc_main as default
+  NotSupportedView as default
 };
-//# sourceMappingURL=NotSupportedView-Drz3x2d-.js.map
+//# sourceMappingURL=NotSupportedView-Vc8_xWgH.js.map

web/assets/ServerConfigPanel-B-w0HFlz.js

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { H as createBaseVNode, o as openBlock, f as createElementBlock, Z as markRaw, d as defineComponent, a as useSettingStore, aS as storeToRefs, a5 as watch, cO as useCopyToClipboard, a1 as useI18n, k as createBlock, M as withCtx, j as unref, bZ as script, X as toDisplayString, E as renderList, F as Fragment, N as createVNode, l as script$1, I as createCommentVNode, bQ as script$2, cP as FormItem, cp as _sfc_main$1, c0 as electronAPI } from "./index-DjNHn37O.js";
-import { u as useServerConfigStore } from "./serverConfigStore-CvyKFVuP.js";
+import { m as createBaseVNode, o as openBlock, f as createElementBlock, a0 as markRaw, d as defineComponent, a as useSettingStore, aS as storeToRefs, a7 as watch, cW as useCopyToClipboard, a3 as useI18n, J as createBlock, P as withCtx, j as unref, c6 as script, Z as toDisplayString, I as renderList, H as Fragment, k as createVNode, l as script$1, L as createCommentVNode, c4 as script$2, cX as FormItem, cw as _sfc_main$1, bV as electronAPI } from "./index-QvfM__ze.js";
+import { u as useServerConfigStore } from "./serverConfigStore-DCme3xlV.js";
 const _hoisted_1$1 = {
   viewBox: "0 0 24 24",
   width: "1.2em",
@@ -155,4 +155,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   _sfc_main as default
 };
-//# sourceMappingURL=ServerConfigPanel-Be4StJmv.js.map
+//# sourceMappingURL=ServerConfigPanel-B-w0HFlz.js.map

web/assets/ServerStartView-48wfE1MS.js

@@ -0,0 +1,101 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { d as defineComponent, a3 as useI18n, ad as ref, c7 as ProgressStatus, t as onMounted, o as openBlock, J as createBlock, P as withCtx, m as createBaseVNode, aG as createTextVNode, Z as toDisplayString, j as unref, f as createElementBlock, L as createCommentVNode, k as createVNode, l as script, i as withDirectives, v as vShow, c8 as BaseTerminal, p as pushScopeId, q as popScopeId, bV as electronAPI, _ as _export_sfc } from "./index-QvfM__ze.js";
+import { _ as _sfc_main$1 } from "./BaseViewTemplate-BhQMaVFP.js";
+const _withScopeId = /* @__PURE__ */ __name((n) => (pushScopeId("data-v-4140d62b"), n = n(), popScopeId(), n), "_withScopeId");
+const _hoisted_1 = { class: "flex flex-col w-full h-full items-center" };
+const _hoisted_2 = { class: "text-2xl font-bold" };
+const _hoisted_3 = { key: 0 };
+const _hoisted_4 = {
+  key: 0,
+  class: "flex flex-col items-center gap-4"
+};
+const _hoisted_5 = { class: "flex items-center my-4 gap-2" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ServerStartView",
+  setup(__props) {
+    const electron = electronAPI();
+    const { t } = useI18n();
+    const status = ref(ProgressStatus.INITIAL_STATE);
+    const electronVersion = ref("");
+    let xterm;
+    const terminalVisible = ref(true);
+    const updateProgress = /* @__PURE__ */ __name(({ status: newStatus }) => {
+      status.value = newStatus;
+      if (newStatus === ProgressStatus.ERROR) terminalVisible.value = false;
+      else xterm?.clear();
+    }, "updateProgress");
+    const terminalCreated = /* @__PURE__ */ __name(({ terminal, useAutoSize }, root) => {
+      xterm = terminal;
+      useAutoSize({ root, autoRows: true, autoCols: true });
+      electron.onLogMessage((message) => {
+        terminal.write(message);
+      });
+      terminal.options.cursorBlink = false;
+      terminal.options.disableStdin = true;
+      terminal.options.cursorInactiveStyle = "block";
+    }, "terminalCreated");
+    const reinstall = /* @__PURE__ */ __name(() => electron.reinstall(), "reinstall");
+    const reportIssue = /* @__PURE__ */ __name(() => {
+      window.open("https://forum.comfy.org/c/v1-feedback/", "_blank");
+    }, "reportIssue");
+    const openLogs = /* @__PURE__ */ __name(() => electron.openLogsFolder(), "openLogs");
+    onMounted(async () => {
+      electron.sendReady();
+      electron.onProgressUpdate(updateProgress);
+      electronVersion.value = await electron.getElectronVersion();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        dark: "",
+        class: "flex-col"
+      }, {
+        default: withCtx(() => [
+          createBaseVNode("div", _hoisted_1, [
+            createBaseVNode("h2", _hoisted_2, [
+              createTextVNode(toDisplayString(unref(t)(`serverStart.process.${status.value}`)) + " ", 1),
+              status.value === unref(ProgressStatus).ERROR ? (openBlock(), createElementBlock("span", _hoisted_3, " v" + toDisplayString(electronVersion.value), 1)) : createCommentVNode("", true)
+            ]),
+            status.value === unref(ProgressStatus).ERROR ? (openBlock(), createElementBlock("div", _hoisted_4, [
+              createBaseVNode("div", _hoisted_5, [
+                createVNode(unref(script), {
+                  icon: "pi pi-flag",
+                  severity: "secondary",
+                  label: unref(t)("serverStart.reportIssue"),
+                  onClick: reportIssue
+                }, null, 8, ["label"]),
+                createVNode(unref(script), {
+                  icon: "pi pi-file",
+                  severity: "secondary",
+                  label: unref(t)("serverStart.openLogs"),
+                  onClick: openLogs
+                }, null, 8, ["label"]),
+                createVNode(unref(script), {
+                  icon: "pi pi-refresh",
+                  label: unref(t)("serverStart.reinstall"),
+                  onClick: reinstall
+                }, null, 8, ["label"])
+              ]),
+              !terminalVisible.value ? (openBlock(), createBlock(unref(script), {
+                key: 0,
+                icon: "pi pi-search",
+                severity: "secondary",
+                label: unref(t)("serverStart.showTerminal"),
+                onClick: _cache[0] || (_cache[0] = ($event) => terminalVisible.value = true)
+              }, null, 8, ["label"])) : createCommentVNode("", true)
+            ])) : createCommentVNode("", true),
+            withDirectives(createVNode(BaseTerminal, { onCreated: terminalCreated }, null, 512), [
+              [vShow, terminalVisible.value]
+            ])
+          ])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+const ServerStartView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4140d62b"]]);
+export {
+  ServerStartView as default
+};
+//# sourceMappingURL=ServerStartView-48wfE1MS.js.map

web/assets/ServerStartView-CIDTUh4x.js

@@ -1,98 +0,0 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { d as defineComponent, a1 as useI18n, ab as ref, b_ as ProgressStatus, m as onMounted, o as openBlock, k as createBlock, M as withCtx, H as createBaseVNode, aE as createTextVNode, X as toDisplayString, j as unref, f as createElementBlock, I as createCommentVNode, N as createVNode, l as script, i as withDirectives, v as vShow, b$ as BaseTerminal, aL as pushScopeId, aM as popScopeId, c0 as electronAPI, _ as _export_sfc } from "./index-DjNHn37O.js";
-import { _ as _sfc_main$1 } from "./BaseViewTemplate-BNGF4K22.js";
-const _withScopeId = /* @__PURE__ */ __name((n) => (pushScopeId("data-v-42c1131d"), n = n(), popScopeId(), n), "_withScopeId");
-const _hoisted_1 = { class: "text-2xl font-bold" };
-const _hoisted_2 = { key: 0 };
-const _hoisted_3 = {
-  key: 0,
-  class: "flex flex-col items-center gap-4"
-};
-const _hoisted_4 = { class: "flex items-center my-4 gap-2" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "ServerStartView",
-  setup(__props) {
-    const electron = electronAPI();
-    const { t } = useI18n();
-    const status = ref(ProgressStatus.INITIAL_STATE);
-    const electronVersion = ref("");
-    let xterm;
-    const terminalVisible = ref(true);
-    const updateProgress = /* @__PURE__ */ __name(({ status: newStatus }) => {
-      status.value = newStatus;
-      if (newStatus === ProgressStatus.ERROR) terminalVisible.value = false;
-      else xterm?.clear();
-    }, "updateProgress");
-    const terminalCreated = /* @__PURE__ */ __name(({ terminal, useAutoSize }, root) => {
-      xterm = terminal;
-      useAutoSize(root, true, true);
-      electron.onLogMessage((message) => {
-        terminal.write(message);
-      });
-      terminal.options.cursorBlink = false;
-      terminal.options.disableStdin = true;
-      terminal.options.cursorInactiveStyle = "block";
-    }, "terminalCreated");
-    const reinstall = /* @__PURE__ */ __name(() => electron.reinstall(), "reinstall");
-    const reportIssue = /* @__PURE__ */ __name(() => {
-      window.open("https://forum.comfy.org/c/v1-feedback/", "_blank");
-    }, "reportIssue");
-    const openLogs = /* @__PURE__ */ __name(() => electron.openLogsFolder(), "openLogs");
-    onMounted(async () => {
-      electron.sendReady();
-      electron.onProgressUpdate(updateProgress);
-      electronVersion.value = await electron.getElectronVersion();
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$1, {
-        dark: "",
-        class: "flex-col"
-      }, {
-        default: withCtx(() => [
-          createBaseVNode("h2", _hoisted_1, [
-            createTextVNode(toDisplayString(unref(t)(`serverStart.process.${status.value}`)) + " ", 1),
-            status.value === unref(ProgressStatus).ERROR ? (openBlock(), createElementBlock("span", _hoisted_2, " v" + toDisplayString(electronVersion.value), 1)) : createCommentVNode("", true)
-          ]),
-          status.value === unref(ProgressStatus).ERROR ? (openBlock(), createElementBlock("div", _hoisted_3, [
-            createBaseVNode("div", _hoisted_4, [
-              createVNode(unref(script), {
-                icon: "pi pi-flag",
-                severity: "secondary",
-                label: unref(t)("serverStart.reportIssue"),
-                onClick: reportIssue
-              }, null, 8, ["label"]),
-              createVNode(unref(script), {
-                icon: "pi pi-file",
-                severity: "secondary",
-                label: unref(t)("serverStart.openLogs"),
-                onClick: openLogs
-              }, null, 8, ["label"]),
-              createVNode(unref(script), {
-                icon: "pi pi-refresh",
-                label: unref(t)("serverStart.reinstall"),
-                onClick: reinstall
-              }, null, 8, ["label"])
-            ]),
-            !terminalVisible.value ? (openBlock(), createBlock(unref(script), {
-              key: 0,
-              icon: "pi pi-search",
-              severity: "secondary",
-              label: unref(t)("serverStart.showTerminal"),
-              onClick: _cache[0] || (_cache[0] = ($event) => terminalVisible.value = true)
-            }, null, 8, ["label"])) : createCommentVNode("", true)
-          ])) : createCommentVNode("", true),
-          withDirectives(createVNode(BaseTerminal, { onCreated: terminalCreated }, null, 512), [
-            [vShow, terminalVisible.value]
-          ])
-        ]),
-        _: 1
-      });
-    };
-  }
-});
-const ServerStartView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-42c1131d"]]);
-export {
-  ServerStartView as default
-};
-//# sourceMappingURL=ServerStartView-CIDTUh4x.js.map

web/assets/ServerStartView-CJiwVDQY.css

@@ -1,5 +1,5 @@
 
-[data-v-42c1131d] .xterm-helper-textarea {
+[data-v-4140d62b] .xterm-helper-textarea {
   /* Hide this as it moves all over when uv is running */
   display: none;
 }

web/assets/UserSelectView-CXmVKOeK.js

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { d as defineComponent, aX as useUserStore, bW as useRouter, ab as ref, c as computed, m as onMounted, o as openBlock, k as createBlock, M as withCtx, H as createBaseVNode, X as toDisplayString, N as createVNode, bX as withKeys, j as unref, av as script, bQ as script$1, bY as script$2, bZ as script$3, aE as createTextVNode, I as createCommentVNode, l as script$4 } from "./index-DjNHn37O.js";
-import { _ as _sfc_main$1 } from "./BaseViewTemplate-BNGF4K22.js";
+import { d as defineComponent, aX as useUserStore, c2 as useRouter, ad as ref, c as computed, t as onMounted, o as openBlock, J as createBlock, P as withCtx, m as createBaseVNode, Z as toDisplayString, k as createVNode, c3 as withKeys, j as unref, ax as script, c4 as script$1, c5 as script$2, c6 as script$3, aG as createTextVNode, L as createCommentVNode, l as script$4 } from "./index-QvfM__ze.js";
+import { _ as _sfc_main$1 } from "./BaseViewTemplate-BhQMaVFP.js";
 const _hoisted_1 = {
   id: "comfy-user-selection",
   class: "min-w-84 relative rounded-lg bg-[var(--comfy-menu-bg)] p-5 px-10 shadow-lg"
@@ -99,4 +99,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   _sfc_main as default
 };
-//# sourceMappingURL=UserSelectView-B3jYchWu.js.map
+//# sourceMappingURL=UserSelectView-CXmVKOeK.js.map

web/assets/WelcomeView-C8whKl15.js

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { d as defineComponent, bW as useRouter, o as openBlock, k as createBlock, M as withCtx, H as createBaseVNode, X as toDisplayString, N as createVNode, j as unref, l as script, aL as pushScopeId, aM as popScopeId, _ as _export_sfc } from "./index-DjNHn37O.js";
-import { _ as _sfc_main$1 } from "./BaseViewTemplate-BNGF4K22.js";
+import { d as defineComponent, c2 as useRouter, o as openBlock, J as createBlock, P as withCtx, m as createBaseVNode, Z as toDisplayString, k as createVNode, j as unref, l as script, p as pushScopeId, q as popScopeId, _ as _export_sfc } from "./index-QvfM__ze.js";
+import { _ as _sfc_main$1 } from "./BaseViewTemplate-BhQMaVFP.js";
 const _withScopeId = /* @__PURE__ */ __name((n) => (pushScopeId("data-v-7dfaf74c"), n = n(), popScopeId(), n), "_withScopeId");
 const _hoisted_1 = { class: "flex flex-col items-center justify-center gap-8 p-8" };
 const _hoisted_2 = { class: "animated-gradient-text text-glow select-none" };
@@ -37,4 +37,4 @@ const WelcomeView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-
 export {
   WelcomeView as default
 };
-//# sourceMappingURL=WelcomeView-N0ZXLjdi.js.map
+//# sourceMappingURL=WelcomeView-C8whKl15.js.map

web/assets/index-5HFeZax4.js

@@ -1,27 +0,0 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { ct as script$1, H as createBaseVNode, o as openBlock, f as createElementBlock, D as mergeProps } from "./index-DjNHn37O.js";
-var script = {
-  name: "PlusIcon",
-  "extends": script$1
-};
-var _hoisted_1 = /* @__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 = [_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 as s
-};
-//# sourceMappingURL=index-5HFeZax4.js.map

web/assets/index-Cf-n7v0V.css

@@ -2131,6 +2131,9 @@
   .z-\[1000\]{
     z-index: 1000;
   }
+  .z-\[9999\]{
+    z-index: 9999;
+  }
   .m-0{
     margin: 0px;
   }
@@ -2253,6 +2256,9 @@
   .h-0{
     height: 0px;
   }
+  .h-1{
+    height: 0.25rem;
+  }
   .h-16{
     height: 4rem;
   }
@@ -2271,6 +2277,9 @@
   .h-\[30rem\]{
     height: 30rem;
   }
+  .h-\[var\(--comfy-topbar-height\)\]{
+    height: var(--comfy-topbar-height);
+  }
   .h-full{
     height: 100%;
   }
@@ -2341,6 +2350,9 @@
   .w-screen{
     width: 100vw;
   }
+  .min-w-0{
+    min-width: 0px;
+  }
   .min-w-110{
     min-width: 32rem;
   }
@@ -2359,6 +2371,9 @@
   .max-w-\[150px\]{
     max-width: 150px;
   }
+  .max-w-\[600px\]{
+    max-width: 600px;
+  }
   .max-w-full{
     max-width: 100%;
   }
@@ -2519,6 +2534,9 @@
   .text-wrap{
     text-wrap: wrap;
   }
+  .text-nowrap{
+    text-wrap: nowrap;
+  }
   .rounded{
     border-radius: 0.25rem;
   }
@@ -2528,16 +2546,35 @@
   .rounded-none{
     border-radius: 0px;
   }
+  .rounded-t-lg{
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+  }
   .border{
     border-width: 1px;
   }
+  .border-0{
+    border-width: 0px;
+  }
   .border-x-0{
     border-left-width: 0px;
     border-right-width: 0px;
   }
+  .border-b{
+    border-bottom-width: 1px;
+  }
+  .border-l{
+    border-left-width: 1px;
+  }
+  .border-r{
+    border-right-width: 1px;
+  }
   .border-t-0{
     border-top-width: 0px;
   }
+  .border-solid{
+    border-style: solid;
+  }
   .border-none{
     border-style: none;
   }
@@ -2635,6 +2672,9 @@
   .p-5{
     padding: 1.25rem;
   }
+  .p-6{
+    padding: 1.5rem;
+  }
   .p-8{
     padding: 2rem;
   }
@@ -2701,6 +2741,9 @@
   .text-2xl{
     font-size: 1.5rem;
   }
+  .text-3xl{
+    font-size: 1.875rem;
+  }
   .text-4xl{
     font-size: 2.25rem;
   }
@@ -2783,6 +2826,9 @@
     --tw-text-opacity: 1;
     color: rgb(239 68 68 / var(--tw-text-opacity));
   }
+  .underline{
+    text-decoration-line: underline;
+  }
   .no-underline{
     text-decoration-line: none;
   }
@@ -2868,6 +2914,7 @@
   --bg-color: #fff;
   --comfy-menu-bg: #353535;
   --comfy-menu-secondary-bg: #292929;
+  --comfy-topbar-height: 2.5rem;
   --comfy-input-bg: #222;
   --input-text: #ddd;
   --descrip-text: #999;
@@ -3625,24 +3672,33 @@ audio.comfy-audio.empty-audio-widget {
   padding: var(--comfy-tree-explorer-item-padding) !important;
 }
 
+/* [Desktop] Electron window specific styles */
+.app-drag {
+  app-region: drag;
+}
+
+.no-drag {
+  app-region: no-drag;
+}
+
+.window-actions-spacer {
+  width: calc(100vw - env(titlebar-area-width, 100vw));
+}
+/* End of [Desktop] Electron window specific styles */
 .hover\:bg-neutral-700:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(64 64 64 / var(--tw-bg-opacity));
 }
-
 .hover\:bg-opacity-75:hover{
   --tw-bg-opacity: 0.75;
 }
-
 .hover\:text-blue-300:hover{
   --tw-text-opacity: 1;
   color: rgb(144 205 244 / var(--tw-text-opacity));
 }
-
 .hover\:opacity-100:hover{
   opacity: 1;
 }
-
 @media (min-width: 768px){
 
   .md\:flex{
@@ -3653,7 +3709,6 @@ audio.comfy-audio.empty-audio-widget {
     display: none;
   }
 }
-
 @media (min-width: 1536px){
 
   .\32xl\:mx-4{
@@ -3689,8 +3744,11 @@ audio.comfy-audio.empty-audio-widget {
     padding-left: 1rem;
     padding-right: 1rem;
   }
-}
 
+  .\32xl\:text-sm{
+    font-size: 0.875rem;
+  }
+}
 @media (prefers-color-scheme: dark){
 
   .dark\:bg-gray-800{
@@ -3740,17 +3798,17 @@ audio.comfy-audio.empty-audio-widget {
   margin-bottom: 1rem;
 }
 
-.comfy-error-report[data-v-ddf3e2da] {
+.comfy-error-report[data-v-09b72a20] {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }
-.action-container[data-v-ddf3e2da] {
+.action-container[data-v-09b72a20] {
   display: flex;
   gap: 1rem;
   justify-content: flex-end;
 }
-.wrapper-pre[data-v-ddf3e2da] {
+.wrapper-pre[data-v-09b72a20] {
   white-space: pre-wrap;
   word-wrap: break-word;
 }
@@ -3834,7 +3892,7 @@ audio.comfy-audio.empty-audio-widget {
   padding-top: 0px !important;
 }
 
-.settings-container[data-v-67f71ae9] {
+.settings-container[data-v-2e21278f] {
   display: flex;
   height: 70vh;
   width: 60vw;
@@ -3842,25 +3900,25 @@ audio.comfy-audio.empty-audio-widget {
   overflow: hidden;
 }
 @media (max-width: 768px) {
-.settings-container[data-v-67f71ae9] {
+.settings-container[data-v-2e21278f] {
     flex-direction: column;
     height: auto;
     width: 80vw;
 }
-.settings-sidebar[data-v-67f71ae9] {
+.settings-sidebar[data-v-2e21278f] {
     width: 100%;
 }
-.settings-content[data-v-67f71ae9] {
+.settings-content[data-v-2e21278f] {
     height: 350px;
 }
 }
 
 /* Show a separator line above the Keybinding tab */
 /* This indicates the start of custom setting panels */
-.settings-sidebar[data-v-67f71ae9] .p-listbox-option[aria-label='Keybinding'] {
+.settings-sidebar[data-v-2e21278f] .p-listbox-option[aria-label='Keybinding'] {
   position: relative;
 }
-.settings-sidebar[data-v-67f71ae9] .p-listbox-option[aria-label='Keybinding']::before {
+.settings-sidebar[data-v-2e21278f] .p-listbox-option[aria-label='Keybinding']::before {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -3878,15 +3936,15 @@ audio.comfy-audio.empty-audio-widget {
   margin-left: 0.5rem;
 }
 
-.p-card[data-v-d65acb9a] {
+.p-card[data-v-ffc83afa] {
   --p-card-body-padding: 10px 0 0 0;
   overflow: hidden;
 }
-[data-v-d65acb9a] .p-card-subtitle {
+[data-v-ffc83afa] .p-card-subtitle {
   text-align: center;
 }
 
-.carousel[data-v-fc26284b] {
+.carousel[data-v-d9962275] {
   width: 66vw;
 }
 /**
@@ -4123,18 +4181,18 @@ audio.comfy-audio.empty-audio-widget {
   overflow-y: hidden;
 }
 
-[data-v-6187144a] .p-terminal .xterm {
+[data-v-90a7f075] .p-terminal .xterm {
   overflow-x: auto;
 }
-[data-v-6187144a] .p-terminal .xterm-screen {
+[data-v-90a7f075] .p-terminal .xterm-screen {
   background-color: black;
   overflow-y: hidden;
 }
 
-[data-v-b27b58f4] .p-terminal .xterm {
+[data-v-03daf1c8] .p-terminal .xterm {
   overflow-x: auto;
 }
-[data-v-b27b58f4] .p-terminal .xterm-screen {
+[data-v-03daf1c8] .p-terminal .xterm-screen {
   background-color: black;
   overflow-y: hidden;
 }
@@ -4494,16 +4552,28 @@ audio.comfy-audio.empty-audio-widget {
   pointer-events: none;
 }
 
-[data-v-9159c070] .p-toolbar-end .p-button {
+[data-v-5e759e25] .p-toolbar-end .p-button {
+
     padding-top: 0.25rem;
+
     padding-bottom: 0.25rem
 }
 @media (min-width: 1536px) {
-[data-v-9159c070] .p-toolbar-end .p-button {
+[data-v-5e759e25] .p-toolbar-end .p-button {
+
         padding-top: 0.5rem;
+
         padding-bottom: 0.5rem
 }
 }
+[data-v-5e759e25] .p-toolbar-start {
+
+    min-width: 0px;
+
+    flex: 1 1 0%;
+
+    overflow: hidden
+}
 
 .model_preview[data-v-32e6c4d9] {
   background-color: var(--comfy-menu-bg);
@@ -4736,18 +4806,18 @@ audio.comfy-audio.empty-audio-widget {
     width: 100%
 }
 
-.p-selectbutton .p-button[data-v-4b8adc78] {
+.p-selectbutton .p-button[data-v-05364174] {
   padding: 0.5rem;
 }
-.p-selectbutton .p-button .pi[data-v-4b8adc78] {
+.p-selectbutton .p-button .pi[data-v-05364174] {
   font-size: 1.5rem;
 }
-.field[data-v-4b8adc78] {
+.field[data-v-05364174] {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
-.color-picker-container[data-v-4b8adc78] {
+.color-picker-container[data-v-05364174] {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -4767,10 +4837,10 @@ audio.comfy-audio.empty-audio-widget {
 }
 }
 
-.comfy-image-wrap[data-v-ffe66146] {
+.comfy-image-wrap[data-v-a748ccd8] {
   display: contents;
 }
-.comfy-image-blur[data-v-ffe66146] {
+.comfy-image-blur[data-v-a748ccd8] {
   position: absolute;
   top: 0;
   left: 0;
@@ -4779,7 +4849,7 @@ audio.comfy-audio.empty-audio-widget {
   -o-object-fit: cover;
      object-fit: cover;
 }
-.comfy-image-main[data-v-ffe66146] {
+.comfy-image-main[data-v-a748ccd8] {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
@@ -4788,19 +4858,19 @@ audio.comfy-audio.empty-audio-widget {
      object-position: center;
   z-index: 1;
 }
-.contain .comfy-image-wrap[data-v-ffe66146] {
+.contain .comfy-image-wrap[data-v-a748ccd8] {
   position: relative;
   width: 100%;
   height: 100%;
 }
-.contain .comfy-image-main[data-v-ffe66146] {
+.contain .comfy-image-main[data-v-a748ccd8] {
   -o-object-fit: contain;
      object-fit: contain;
   -webkit-backdrop-filter: blur(10px);
           backdrop-filter: blur(10px);
   position: absolute;
 }
-.broken-image-placeholder[data-v-ffe66146] {
+.broken-image-placeholder[data-v-a748ccd8] {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -4809,7 +4879,7 @@ audio.comfy-audio.empty-audio-widget {
   height: 100%;
   margin: 2rem;
 }
-.broken-image-placeholder i[data-v-ffe66146] {
+.broken-image-placeholder i[data-v-a748ccd8] {
   font-size: 3rem;
   margin-bottom: 0.5rem;
 }
@@ -4827,7 +4897,7 @@ img.galleria-image {
   z-index: 1;
 }
 
-.result-container[data-v-61515e14] {
+.result-container[data-v-2403edc6] {
   width: 100%;
   height: 100%;
   aspect-ratio: 1 / 1;
@@ -4837,7 +4907,7 @@ img.galleria-image {
   justify-content: center;
   align-items: center;
 }
-.preview-mask[data-v-61515e14] {
+.preview-mask[data-v-2403edc6] {
   position: absolute;
   left: 50%;
   top: 50%;
@@ -4849,7 +4919,7 @@ img.galleria-image {
   transition: opacity 0.3s ease;
   z-index: 1;
 }
-.result-container:hover .preview-mask[data-v-61515e14] {
+.result-container:hover .preview-mask[data-v-2403edc6] {
   opacity: 1;
 }
 

web/assets/index-DpF-ptbJ.js

@@ -1,8 +1,7 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { B as BaseStyle, q as script$s, ct as script$t, H as createBaseVNode, o as openBlock, f as createElementBlock, D as mergeProps, X as toDisplayString, S as Ripple, r as resolveDirective, i as withDirectives, k as createBlock, G as resolveDynamicComponent, bY as script$u, aB as resolveComponent, T as normalizeClass, aD as createSlots, M as withCtx, bz as script$v, bw as script$w, F as Fragment, E as renderList, aE as createTextVNode, bq as setAttribute, ak as UniqueComponentId, bo as normalizeProps, J as renderSlot, I as createCommentVNode, R as equals, bk as script$x, c8 as script$y, cu as getFirstFocusableElement, an as OverlayEventBus, A as getVNodeProp, am as resolveFieldData, cv as invokeElementMethod, O as getAttribute, cw as getNextElementSibling, y as getOuterWidth, cx as getPreviousElementSibling, l as script$z, ay as script$A, W as script$B, bn as script$D, aj as isNotEmpty, bM as withModifiers, z as getOuterHeight, cy as _default, al as ZIndex, Q as focus, ap as addStyle, ar as absolutePosition, as as ConnectedOverlayScrollHandler, at as isTouchDevice, cz as FilterOperator, ax as script$E, cA as FocusTrap, N as createVNode, aC as Transition, bX as withKeys, cB as getIndex, aW as script$G, cC as isClickable, cD as clearSelection, cE as localeComparator, cF as sort, cG as FilterService, cn as FilterMatchMode, P as findSingle, c1 as findIndexInList, c2 as find, cH as exportCSV, U as getOffset, cI as getHiddenElementOuterWidth, cJ as getHiddenElementOuterHeight, cK as reorderArray, cL as getWindowScrollTop, cM as removeClass, cN as addClass, ao as isEmpty, aw as script$H, az as script$I } from "./index-DjNHn37O.js";
-import { s as script$C } from "./index-B-aVupP5.js";
-import { s as script$F } from "./index-5HFeZax4.js";
+import { B as BaseStyle, y as script$s, cA as script$t, m as createBaseVNode, o as openBlock, f as createElementBlock, G as mergeProps, Z as toDisplayString, U as Ripple, r as resolveDirective, i as withDirectives, J as createBlock, K as resolveDynamicComponent, c5 as script$u, aD as resolveComponent, V as normalizeClass, aF as createSlots, P as withCtx, bG as script$v, bD as script$w, H as Fragment, I as renderList, aG as createTextVNode, bx as setAttribute, am as UniqueComponentId, bv as normalizeProps, M as renderSlot, L as createCommentVNode, T as equals, br as script$x, cg as script$y, cB as getFirstFocusableElement, ap as OverlayEventBus, E as getVNodeProp, ao as resolveFieldData, cC as invokeElementMethod, Q as getAttribute, cD as getNextElementSibling, C as getOuterWidth, cE as getPreviousElementSibling, l as script$z, aA as script$A, Y as script$B, bu as script$D, al as isNotEmpty, b3 as withModifiers, D as getOuterHeight, cF as _default, an as ZIndex, S as focus, ar as addStyle, at as absolutePosition, au as ConnectedOverlayScrollHandler, av as isTouchDevice, cG as FilterOperator, az as script$E, cH as script$F, cI as FocusTrap, k as createVNode, aE as Transition, c3 as withKeys, cJ as getIndex, aW as script$G, cK as isClickable, cL as clearSelection, cM as localeComparator, cN as sort, cO as FilterService, cu as FilterMatchMode, R as findSingle, c9 as findIndexInList, ca as find, cP as exportCSV, W as getOffset, cQ as getHiddenElementOuterWidth, cR as getHiddenElementOuterHeight, cS as reorderArray, cT as getWindowScrollTop, cU as removeClass, cV as addClass, aq as isEmpty, ay as script$H, aB as script$I } from "./index-QvfM__ze.js";
+import { s as script$C } from "./index-Q1cQr26V.js";
 var ColumnStyle = BaseStyle.extend({
   name: "column"
 });
@@ -8783,4 +8782,4 @@ export {
   script as a,
   script$r as s
 };
-//# sourceMappingURL=index-B5F0uxTQ.js.map
+//# sourceMappingURL=index-DpF-ptbJ.js.map

web/assets/index-Q1cQr26V.js

@@ -1,6 +1,6 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { ct as script$1, H as createBaseVNode, o as openBlock, f as createElementBlock, D as mergeProps } from "./index-DjNHn37O.js";
+import { cA as script$1, m as createBaseVNode, o as openBlock, f as createElementBlock, G as mergeProps } from "./index-QvfM__ze.js";
 var script = {
   name: "BarsIcon",
   "extends": script$1
@@ -26,4 +26,4 @@ script.render = render;
 export {
   script as s
 };
-//# sourceMappingURL=index-B-aVupP5.js.map
+//# sourceMappingURL=index-Q1cQr26V.js.map

web/assets/index-jXPKy3pP.js

@@ -1,173 +0,0 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { B as BaseStyle, q as script$2, ak as UniqueComponentId, c9 as script$4, l as script$5, S as Ripple, aB as resolveComponent, o as openBlock, f as createElementBlock, D as mergeProps, H as createBaseVNode, J as renderSlot, T as normalizeClass, X as toDisplayString, I as createCommentVNode, k as createBlock, M as withCtx, G as resolveDynamicComponent, N as createVNode, aC as Transition, i as withDirectives, v as vShow } from "./index-DjNHn37O.js";
-import { s as script$3 } from "./index-5HFeZax4.js";
-var theme = /* @__PURE__ */ __name(function theme2(_ref) {
-  var dt = _ref.dt;
-  return "\n.p-panel {\n    border: 1px solid ".concat(dt("panel.border.color"), ";\n    border-radius: ").concat(dt("panel.border.radius"), ";\n    background: ").concat(dt("panel.background"), ";\n    color: ").concat(dt("panel.color"), ";\n}\n\n.p-panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: ").concat(dt("panel.header.padding"), ";\n    background: ").concat(dt("panel.header.background"), ";\n    color: ").concat(dt("panel.header.color"), ";\n    border-style: solid;\n    border-width: ").concat(dt("panel.header.border.width"), ";\n    border-color: ").concat(dt("panel.header.border.color"), ";\n    border-radius: ").concat(dt("panel.header.border.radius"), ";\n}\n\n.p-panel-toggleable .p-panel-header {\n    padding: ").concat(dt("panel.toggleable.header.padding"), ";\n}\n\n.p-panel-title {\n    line-height: 1;\n    font-weight: ").concat(dt("panel.title.font.weight"), ";\n}\n\n.p-panel-content {\n    padding: ").concat(dt("panel.content.padding"), ";\n}\n\n.p-panel-footer {\n    padding: ").concat(dt("panel.footer.padding"), ";\n}\n");
-}, "theme");
-var classes = {
-  root: /* @__PURE__ */ __name(function root(_ref2) {
-    var props = _ref2.props;
-    return ["p-panel p-component", {
-      "p-panel-toggleable": props.toggleable
-    }];
-  }, "root"),
-  header: "p-panel-header",
-  title: "p-panel-title",
-  headerActions: "p-panel-header-actions",
-  pcToggleButton: "p-panel-toggle-button",
-  contentContainer: "p-panel-content-container",
-  content: "p-panel-content",
-  footer: "p-panel-footer"
-};
-var PanelStyle = BaseStyle.extend({
-  name: "panel",
-  theme,
-  classes
-});
-var script$1 = {
-  name: "BasePanel",
-  "extends": script$2,
-  props: {
-    header: String,
-    toggleable: Boolean,
-    collapsed: Boolean,
-    toggleButtonProps: {
-      type: Object,
-      "default": /* @__PURE__ */ __name(function _default() {
-        return {
-          severity: "secondary",
-          text: true,
-          rounded: true
-        };
-      }, "_default")
-    }
-  },
-  style: PanelStyle,
-  provide: /* @__PURE__ */ __name(function provide() {
-    return {
-      $pcPanel: this,
-      $parentInstance: this
-    };
-  }, "provide")
-};
-var script = {
-  name: "Panel",
-  "extends": script$1,
-  inheritAttrs: false,
-  emits: ["update:collapsed", "toggle"],
-  data: /* @__PURE__ */ __name(function data() {
-    return {
-      id: this.$attrs.id,
-      d_collapsed: this.collapsed
-    };
-  }, "data"),
-  watch: {
-    "$attrs.id": /* @__PURE__ */ __name(function $attrsId(newValue) {
-      this.id = newValue || UniqueComponentId();
-    }, "$attrsId"),
-    collapsed: /* @__PURE__ */ __name(function collapsed(newValue) {
-      this.d_collapsed = newValue;
-    }, "collapsed")
-  },
-  mounted: /* @__PURE__ */ __name(function mounted() {
-    this.id = this.id || UniqueComponentId();
-  }, "mounted"),
-  methods: {
-    toggle: /* @__PURE__ */ __name(function toggle(event) {
-      this.d_collapsed = !this.d_collapsed;
-      this.$emit("update:collapsed", this.d_collapsed);
-      this.$emit("toggle", {
-        originalEvent: event,
-        value: this.d_collapsed
-      });
-    }, "toggle"),
-    onKeyDown: /* @__PURE__ */ __name(function onKeyDown(event) {
-      if (event.code === "Enter" || event.code === "NumpadEnter" || event.code === "Space") {
-        this.toggle(event);
-        event.preventDefault();
-      }
-    }, "onKeyDown")
-  },
-  computed: {
-    buttonAriaLabel: /* @__PURE__ */ __name(function buttonAriaLabel() {
-      return this.toggleButtonProps && this.toggleButtonProps.ariaLabel ? this.toggleButtonProps.ariaLabel : this.header;
-    }, "buttonAriaLabel")
-  },
-  components: {
-    PlusIcon: script$3,
-    MinusIcon: script$4,
-    Button: script$5
-  },
-  directives: {
-    ripple: Ripple
-  }
-};
-var _hoisted_1 = ["id"];
-var _hoisted_2 = ["id", "aria-labelledby"];
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  var _component_Button = resolveComponent("Button");
-  return openBlock(), createElementBlock("div", mergeProps({
-    "class": _ctx.cx("root")
-  }, _ctx.ptmi("root")), [createBaseVNode("div", mergeProps({
-    "class": _ctx.cx("header")
-  }, _ctx.ptm("header")), [renderSlot(_ctx.$slots, "header", {
-    id: $data.id + "_header",
-    "class": normalizeClass(_ctx.cx("title"))
-  }, function() {
-    return [_ctx.header ? (openBlock(), createElementBlock("span", mergeProps({
-      key: 0,
-      id: $data.id + "_header",
-      "class": _ctx.cx("title")
-    }, _ctx.ptm("title")), toDisplayString(_ctx.header), 17, _hoisted_1)) : createCommentVNode("", true)];
-  }), createBaseVNode("div", mergeProps({
-    "class": _ctx.cx("headerActions")
-  }, _ctx.ptm("headerActions")), [renderSlot(_ctx.$slots, "icons"), _ctx.toggleable ? (openBlock(), createBlock(_component_Button, mergeProps({
-    key: 0,
-    id: $data.id + "_header",
-    "class": _ctx.cx("pcToggleButton"),
-    "aria-label": $options.buttonAriaLabel,
-    "aria-controls": $data.id + "_content",
-    "aria-expanded": !$data.d_collapsed,
-    unstyled: _ctx.unstyled,
-    onClick: $options.toggle,
-    onKeydown: $options.onKeyDown
-  }, _ctx.toggleButtonProps, {
-    pt: _ctx.ptm("pcToggleButton")
-  }), {
-    icon: withCtx(function(slotProps) {
-      return [renderSlot(_ctx.$slots, _ctx.$slots.toggleicon ? "toggleicon" : "togglericon", {
-        collapsed: $data.d_collapsed
-      }, function() {
-        return [(openBlock(), createBlock(resolveDynamicComponent($data.d_collapsed ? "PlusIcon" : "MinusIcon"), mergeProps({
-          "class": slotProps["class"]
-        }, _ctx.ptm("pcToggleButton")["icon"]), null, 16, ["class"]))];
-      })];
-    }),
-    _: 3
-  }, 16, ["id", "class", "aria-label", "aria-controls", "aria-expanded", "unstyled", "onClick", "onKeydown", "pt"])) : createCommentVNode("", true)], 16)], 16), createVNode(Transition, mergeProps({
-    name: "p-toggleable-content"
-  }, _ctx.ptm("transition")), {
-    "default": withCtx(function() {
-      return [withDirectives(createBaseVNode("div", mergeProps({
-        id: $data.id + "_content",
-        "class": _ctx.cx("contentContainer"),
-        role: "region",
-        "aria-labelledby": $data.id + "_header"
-      }, _ctx.ptm("contentContainer")), [createBaseVNode("div", mergeProps({
-        "class": _ctx.cx("content")
-      }, _ctx.ptm("content")), [renderSlot(_ctx.$slots, "default")], 16), _ctx.$slots.footer ? (openBlock(), createElementBlock("div", mergeProps({
-        key: 0,
-        "class": _ctx.cx("footer")
-      }, _ctx.ptm("footer")), [renderSlot(_ctx.$slots, "footer")], 16)) : createCommentVNode("", true)], 16, _hoisted_2), [[vShow, !$data.d_collapsed]])];
-    }),
-    _: 3
-  }, 16)], 16);
-}
-__name(render, "render");
-script.render = render;
-export {
-  script as s
-};
-//# sourceMappingURL=index-jXPKy3pP.js.map

web/assets/index-je62U6DH.js

@@ -1,6 +1,6 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { ca as ComfyDialog, cb as $el, cc as ComfyApp, h as app, a3 as LiteGraph, bd as LGraphCanvas, cd as useExtensionService, ce as processDynamicPrompt, cf as isElectron, c0 as electronAPI, bR as useDialogService, cg as t, ch as DraggableList, bt as useToastStore, ah as LGraphNode, ci as applyTextReplacements, cj as ComfyWidgets, ck as addValueControlWidgets, a6 as useNodeDefStore, cl as serialise, cm as deserialiseAndCreate, b8 as api, a as useSettingStore, ag as LGraphGroup, ad as nextTick } from "./index-DjNHn37O.js";
+import { ci as ComfyDialog, cj as $el, ck as ComfyApp, h as app, a5 as LiteGraph, bl as LGraphCanvas, cl as useExtensionService, cm as processDynamicPrompt, bT as isElectron, bV as electronAPI, bW as useDialogService, cn as t, co as DraggableList, bA as useToastStore, aj as LGraphNode, cp as applyTextReplacements, cq as ComfyWidgets, cr as addValueControlWidgets, a8 as useNodeDefStore, cs as serialise, ct as deserialiseAndCreate, bh as api, a as useSettingStore, ai as LGraphGroup, af as nextTick, bO as lodashExports, bg as setStorageValue, bb as getStorageValue } from "./index-QvfM__ze.js";
 class ClipspaceDialog extends ComfyDialog {
   static {
     __name(this, "ClipspaceDialog");
@@ -441,10 +441,24 @@ app.registerExtension({
       {
         id: "Comfy-Desktop.SendStatistics",
         category: ["Comfy-Desktop", "General", "Send Statistics"],
-        name: "Send anonymous crash reports",
+        name: "Send anonymous usage metrics",
         type: "boolean",
         defaultValue: true,
         onChange: onChangeRestartApp
+      },
+      {
+        id: "Comfy-Desktop.WindowStyle",
+        category: ["Comfy-Desktop", "General", "Window Style"],
+        name: "Window Style",
+        tooltip: "Choose custom option to hide the system title bar",
+        type: "combo",
+        experimental: true,
+        defaultValue: "default",
+        options: ["default", "custom"],
+        onChange: /* @__PURE__ */ __name((newValue, oldValue) => {
+          electronAPI$1.Config.setWindowStyle(newValue);
+          onChangeRestartApp(newValue, oldValue);
+        }, "onChange")
       }
     ],
     commands: [
@@ -2968,10 +2982,10 @@ function manageGroupNodes(type) {
   new ManageGroupDialog(app).show(type);
 }
 __name(manageGroupNodes, "manageGroupNodes");
-const id$2 = "Comfy.GroupNode";
+const id$1 = "Comfy.GroupNode";
 let globalDefs;
 const ext = {
-  name: id$2,
+  name: id$1,
   commands: [
     {
       id: "Comfy.GroupNode.ConvertSelectedNodesToGroupNode",
@@ -3234,39 +3248,6 @@ app.registerExtension({
     };
   }
 });
-const id$1 = "Comfy.InvertMenuScrolling";
-app.registerExtension({
-  name: id$1,
-  init() {
-    const ctxMenu = LiteGraph.ContextMenu;
-    const replace = /* @__PURE__ */ __name(() => {
-      LiteGraph.ContextMenu = function(values, options) {
-        options = options || {};
-        if (options.scroll_speed) {
-          options.scroll_speed *= -1;
-        } else {
-          options.scroll_speed = -0.1;
-        }
-        return ctxMenu.call(this, values, options);
-      };
-      LiteGraph.ContextMenu.prototype = ctxMenu.prototype;
-    }, "replace");
-    app.ui.settings.addSetting({
-      id: id$1,
-      category: ["LiteGraph", "Menu", "InvertMenuScrolling"],
-      name: "Invert Context Menu Scrolling",
-      type: "boolean",
-      defaultValue: false,
-      onChange(value) {
-        if (value) {
-          replace();
-        } else {
-          LiteGraph.ContextMenu = ctxMenu;
-        }
-      }
-    });
-  }
-});
 /**
  * @license
  * Copyright 2010-2024 Three.js Authors
@@ -36361,6 +36342,229 @@ function interceptControlUp(event) {
   }
 }
 __name(interceptControlUp, "interceptControlUp");
+class ViewHelper extends Object3D {
+  static {
+    __name(this, "ViewHelper");
+  }
+  constructor(camera, domElement) {
+    super();
+    this.isViewHelper = true;
+    this.animating = false;
+    this.center = new Vector3();
+    const color1 = new Color("#ff4466");
+    const color2 = new Color("#88ff44");
+    const color3 = new Color("#4488ff");
+    const color4 = new Color("#000000");
+    const options = {};
+    const interactiveObjects = [];
+    const raycaster = new Raycaster();
+    const mouse = new Vector2();
+    const dummy = new Object3D();
+    const orthoCamera = new OrthographicCamera(-2, 2, 2, -2, 0, 4);
+    orthoCamera.position.set(0, 0, 2);
+    const geometry = new CylinderGeometry(0.04, 0.04, 0.8, 5).rotateZ(-Math.PI / 2).translate(0.4, 0, 0);
+    const xAxis = new Mesh(geometry, getAxisMaterial(color1));
+    const yAxis = new Mesh(geometry, getAxisMaterial(color2));
+    const zAxis = new Mesh(geometry, getAxisMaterial(color3));
+    yAxis.rotation.z = Math.PI / 2;
+    zAxis.rotation.y = -Math.PI / 2;
+    this.add(xAxis);
+    this.add(zAxis);
+    this.add(yAxis);
+    const spriteMaterial1 = getSpriteMaterial(color1);
+    const spriteMaterial2 = getSpriteMaterial(color2);
+    const spriteMaterial3 = getSpriteMaterial(color3);
+    const spriteMaterial4 = getSpriteMaterial(color4);
+    const posXAxisHelper = new Sprite(spriteMaterial1);
+    const posYAxisHelper = new Sprite(spriteMaterial2);
+    const posZAxisHelper = new Sprite(spriteMaterial3);
+    const negXAxisHelper = new Sprite(spriteMaterial4);
+    const negYAxisHelper = new Sprite(spriteMaterial4);
+    const negZAxisHelper = new Sprite(spriteMaterial4);
+    posXAxisHelper.position.x = 1;
+    posYAxisHelper.position.y = 1;
+    posZAxisHelper.position.z = 1;
+    negXAxisHelper.position.x = -1;
+    negYAxisHelper.position.y = -1;
+    negZAxisHelper.position.z = -1;
+    negXAxisHelper.material.opacity = 0.2;
+    negYAxisHelper.material.opacity = 0.2;
+    negZAxisHelper.material.opacity = 0.2;
+    posXAxisHelper.userData.type = "posX";
+    posYAxisHelper.userData.type = "posY";
+    posZAxisHelper.userData.type = "posZ";
+    negXAxisHelper.userData.type = "negX";
+    negYAxisHelper.userData.type = "negY";
+    negZAxisHelper.userData.type = "negZ";
+    this.add(posXAxisHelper);
+    this.add(posYAxisHelper);
+    this.add(posZAxisHelper);
+    this.add(negXAxisHelper);
+    this.add(negYAxisHelper);
+    this.add(negZAxisHelper);
+    interactiveObjects.push(posXAxisHelper);
+    interactiveObjects.push(posYAxisHelper);
+    interactiveObjects.push(posZAxisHelper);
+    interactiveObjects.push(negXAxisHelper);
+    interactiveObjects.push(negYAxisHelper);
+    interactiveObjects.push(negZAxisHelper);
+    const point = new Vector3();
+    const dim = 128;
+    const turnRate = 2 * Math.PI;
+    this.render = function(renderer) {
+      this.quaternion.copy(camera.quaternion).invert();
+      this.updateMatrixWorld();
+      point.set(0, 0, 1);
+      point.applyQuaternion(camera.quaternion);
+      const x = domElement.offsetWidth - dim;
+      renderer.clearDepth();
+      renderer.getViewport(viewport);
+      renderer.setViewport(x, 0, dim, dim);
+      renderer.render(this, orthoCamera);
+      renderer.setViewport(viewport.x, viewport.y, viewport.z, viewport.w);
+    };
+    const targetPosition = new Vector3();
+    const targetQuaternion = new Quaternion();
+    const q1 = new Quaternion();
+    const q2 = new Quaternion();
+    const viewport = new Vector4();
+    let radius = 0;
+    this.handleClick = function(event) {
+      if (this.animating === true) return false;
+      const rect = domElement.getBoundingClientRect();
+      const offsetX = rect.left + (domElement.offsetWidth - dim);
+      const offsetY = rect.top + (domElement.offsetHeight - dim);
+      mouse.x = (event.clientX - offsetX) / (rect.right - offsetX) * 2 - 1;
+      mouse.y = -((event.clientY - offsetY) / (rect.bottom - offsetY)) * 2 + 1;
+      raycaster.setFromCamera(mouse, orthoCamera);
+      const intersects2 = raycaster.intersectObjects(interactiveObjects);
+      if (intersects2.length > 0) {
+        const intersection = intersects2[0];
+        const object = intersection.object;
+        prepareAnimationData(object, this.center);
+        this.animating = true;
+        return true;
+      } else {
+        return false;
+      }
+    };
+    this.setLabels = function(labelX, labelY, labelZ) {
+      options.labelX = labelX;
+      options.labelY = labelY;
+      options.labelZ = labelZ;
+      updateLabels();
+    };
+    this.setLabelStyle = function(font, color, radius2) {
+      options.font = font;
+      options.color = color;
+      options.radius = radius2;
+      updateLabels();
+    };
+    this.update = function(delta) {
+      const step = delta * turnRate;
+      q1.rotateTowards(q2, step);
+      camera.position.set(0, 0, 1).applyQuaternion(q1).multiplyScalar(radius).add(this.center);
+      camera.quaternion.rotateTowards(targetQuaternion, step);
+      if (q1.angleTo(q2) === 0) {
+        this.animating = false;
+      }
+    };
+    this.dispose = function() {
+      geometry.dispose();
+      xAxis.material.dispose();
+      yAxis.material.dispose();
+      zAxis.material.dispose();
+      posXAxisHelper.material.map.dispose();
+      posYAxisHelper.material.map.dispose();
+      posZAxisHelper.material.map.dispose();
+      negXAxisHelper.material.map.dispose();
+      negYAxisHelper.material.map.dispose();
+      negZAxisHelper.material.map.dispose();
+      posXAxisHelper.material.dispose();
+      posYAxisHelper.material.dispose();
+      posZAxisHelper.material.dispose();
+      negXAxisHelper.material.dispose();
+      negYAxisHelper.material.dispose();
+      negZAxisHelper.material.dispose();
+    };
+    function prepareAnimationData(object, focusPoint) {
+      switch (object.userData.type) {
+        case "posX":
+          targetPosition.set(1, 0, 0);
+          targetQuaternion.setFromEuler(new Euler(0, Math.PI * 0.5, 0));
+          break;
+        case "posY":
+          targetPosition.set(0, 1, 0);
+          targetQuaternion.setFromEuler(new Euler(-Math.PI * 0.5, 0, 0));
+          break;
+        case "posZ":
+          targetPosition.set(0, 0, 1);
+          targetQuaternion.setFromEuler(new Euler());
+          break;
+        case "negX":
+          targetPosition.set(-1, 0, 0);
+          targetQuaternion.setFromEuler(new Euler(0, -Math.PI * 0.5, 0));
+          break;
+        case "negY":
+          targetPosition.set(0, -1, 0);
+          targetQuaternion.setFromEuler(new Euler(Math.PI * 0.5, 0, 0));
+          break;
+        case "negZ":
+          targetPosition.set(0, 0, -1);
+          targetQuaternion.setFromEuler(new Euler(0, Math.PI, 0));
+          break;
+        default:
+          console.error("ViewHelper: Invalid axis.");
+      }
+      radius = camera.position.distanceTo(focusPoint);
+      targetPosition.multiplyScalar(radius).add(focusPoint);
+      dummy.position.copy(focusPoint);
+      dummy.lookAt(camera.position);
+      q1.copy(dummy.quaternion);
+      dummy.lookAt(targetPosition);
+      q2.copy(dummy.quaternion);
+    }
+    __name(prepareAnimationData, "prepareAnimationData");
+    function getAxisMaterial(color) {
+      return new MeshBasicMaterial({ color, toneMapped: false });
+    }
+    __name(getAxisMaterial, "getAxisMaterial");
+    function getSpriteMaterial(color, text) {
+      const { font = "24px Arial", color: labelColor = "#000000", radius: radius2 = 14 } = options;
+      const canvas = document.createElement("canvas");
+      canvas.width = 64;
+      canvas.height = 64;
+      const context = canvas.getContext("2d");
+      context.beginPath();
+      context.arc(32, 32, radius2, 0, 2 * Math.PI);
+      context.closePath();
+      context.fillStyle = color.getStyle();
+      context.fill();
+      if (text) {
+        context.font = font;
+        context.textAlign = "center";
+        context.fillStyle = labelColor;
+        context.fillText(text, 32, 41);
+      }
+      const texture = new CanvasTexture(canvas);
+      texture.colorSpace = SRGBColorSpace;
+      return new SpriteMaterial({ map: texture, toneMapped: false });
+    }
+    __name(getSpriteMaterial, "getSpriteMaterial");
+    function updateLabels() {
+      posXAxisHelper.material.map.dispose();
+      posYAxisHelper.material.map.dispose();
+      posZAxisHelper.material.map.dispose();
+      posXAxisHelper.material.dispose();
+      posYAxisHelper.material.dispose();
+      posZAxisHelper.material.dispose();
+      posXAxisHelper.material = getSpriteMaterial(color1, options.labelX);
+      posYAxisHelper.material = getSpriteMaterial(color2, options.labelY);
+      posZAxisHelper.material = getSpriteMaterial(color3, options.labelZ);
+    }
+    __name(updateLabels, "updateLabels");
+  }
+}
 /*!
 fflate - fast JavaScript compression/decompression
 <https://101arrowz.github.io/fflate>
@@ -45833,7 +46037,6 @@ class Load3d {
   stlLoader;
   currentModel = null;
   originalModel = null;
-  node;
   animationFrameId = null;
   gridHelper;
   lights = [];
@@ -45846,6 +46049,10 @@ class Load3d {
   materialMode = "original";
   currentUpDirection = "original";
   originalRotation = null;
+  viewHelper;
+  viewHelperContainer;
+  cameraSwitcherContainer;
+  gridSwitcherContainer;
   constructor(container) {
     this.scene = new Scene();
     this.perspectiveCamera = new PerspectiveCamera(75, 1, 0.1, 1e3);
@@ -45866,6 +46073,7 @@ class Load3d {
     this.renderer = new WebGLRenderer({ alpha: true, antialias: true });
     this.renderer.setSize(300, 300);
     this.renderer.setClearColor(2631720);
+    this.renderer.autoClear = false;
     const rendererDomElement = this.renderer.domElement;
     container.appendChild(rendererDomElement);
     this.controls = new OrbitControls(
@@ -45901,10 +46109,113 @@ class Load3d {
       side: DoubleSide
     });
     this.standardMaterial = this.createSTLMaterial();
-    this.animate();
+    this.createViewHelper(container);
+    this.createGridSwitcher(container);
+    this.createCameraSwitcher(container);
     this.handleResize();
     this.startAnimation();
   }
+  createViewHelper(container) {
+    this.viewHelperContainer = document.createElement("div");
+    this.viewHelperContainer.style.position = "absolute";
+    this.viewHelperContainer.style.bottom = "0";
+    this.viewHelperContainer.style.left = "0";
+    this.viewHelperContainer.style.width = "128px";
+    this.viewHelperContainer.style.height = "128px";
+    this.viewHelperContainer.addEventListener("pointerup", (event) => {
+      event.stopPropagation();
+      this.viewHelper.handleClick(event);
+    });
+    this.viewHelperContainer.addEventListener("pointerdown", (event) => {
+      event.stopPropagation();
+    });
+    container.appendChild(this.viewHelperContainer);
+    this.viewHelper = new ViewHelper(
+      this.activeCamera,
+      this.viewHelperContainer
+    );
+    this.viewHelper.center = this.controls.target;
+  }
+  createGridSwitcher(container) {
+    this.gridSwitcherContainer = document.createElement("div");
+    this.gridSwitcherContainer.style.position = "absolute";
+    this.gridSwitcherContainer.style.top = "28px";
+    this.gridSwitcherContainer.style.left = "3px";
+    this.gridSwitcherContainer.style.width = "20px";
+    this.gridSwitcherContainer.style.height = "20px";
+    this.gridSwitcherContainer.style.cursor = "pointer";
+    this.gridSwitcherContainer.style.alignItems = "center";
+    this.gridSwitcherContainer.style.justifyContent = "center";
+    this.gridSwitcherContainer.style.transition = "background-color 0.2s";
+    const gridIcon = document.createElement("div");
+    gridIcon.innerHTML = `
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
+      <path d="M3 3h18v18H3z"/>
+      <path d="M3 9h18"/>
+      <path d="M3 15h18"/>
+      <path d="M9 3v18"/>
+      <path d="M15 3v18"/>
+    </svg>
+  `;
+    const updateButtonState = /* @__PURE__ */ __name(() => {
+      if (this.gridHelper.visible) {
+        this.gridSwitcherContainer.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
+      } else {
+        this.gridSwitcherContainer.style.backgroundColor = "transparent";
+      }
+    }, "updateButtonState");
+    updateButtonState();
+    this.gridSwitcherContainer.addEventListener("mouseenter", () => {
+      if (!this.gridHelper.visible) {
+        this.gridSwitcherContainer.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
+      }
+    });
+    this.gridSwitcherContainer.addEventListener("mouseleave", () => {
+      if (!this.gridHelper.visible) {
+        this.gridSwitcherContainer.style.backgroundColor = "transparent";
+      }
+    });
+    this.gridSwitcherContainer.title = "Toggle Grid";
+    this.gridSwitcherContainer.addEventListener("click", (event) => {
+      event.stopPropagation();
+      this.toggleGrid(!this.gridHelper.visible);
+      updateButtonState();
+    });
+    this.gridSwitcherContainer.appendChild(gridIcon);
+    container.appendChild(this.gridSwitcherContainer);
+  }
+  createCameraSwitcher(container) {
+    this.cameraSwitcherContainer = document.createElement("div");
+    this.cameraSwitcherContainer.style.position = "absolute";
+    this.cameraSwitcherContainer.style.top = "3px";
+    this.cameraSwitcherContainer.style.left = "3px";
+    this.cameraSwitcherContainer.style.width = "20px";
+    this.cameraSwitcherContainer.style.height = "20px";
+    this.cameraSwitcherContainer.style.cursor = "pointer";
+    this.cameraSwitcherContainer.style.alignItems = "center";
+    this.cameraSwitcherContainer.style.justifyContent = "center";
+    const cameraIcon = document.createElement("div");
+    cameraIcon.innerHTML = `
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
+        <path d="M18 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Z"/>
+        <path d="m12 12 4-2.4"/>
+        <circle cx="12" cy="12" r="3"/>
+      </svg>
+    `;
+    this.cameraSwitcherContainer.addEventListener("mouseenter", () => {
+      this.cameraSwitcherContainer.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
+    });
+    this.cameraSwitcherContainer.addEventListener("mouseleave", () => {
+      this.cameraSwitcherContainer.style.backgroundColor = "rgba(0, 0, 0, 0.3)";
+    });
+    this.cameraSwitcherContainer.title = "Switch Camera (Perspective/Orthographic)";
+    this.cameraSwitcherContainer.addEventListener("click", (event) => {
+      event.stopPropagation();
+      this.toggleCamera();
+    });
+    this.cameraSwitcherContainer.appendChild(cameraIcon);
+    container.appendChild(this.cameraSwitcherContainer);
+  }
   setFOV(fov2) {
     if (this.activeCamera === this.perspectiveCamera) {
       this.perspectiveCamera.fov = fov2;
@@ -46097,6 +46408,12 @@ class Load3d {
     this.controls.object = this.activeCamera;
     this.controls.target.copy(target);
     this.controls.update();
+    this.viewHelper.dispose();
+    this.viewHelper = new ViewHelper(
+      this.activeCamera,
+      this.viewHelperContainer
+    );
+    this.viewHelper.center = this.controls.target;
     this.handleResize();
   }
   getCurrentCameraType() {
@@ -46127,8 +46444,14 @@ class Load3d {
   startAnimation() {
     const animate = /* @__PURE__ */ __name(() => {
       this.animationFrameId = requestAnimationFrame(animate);
+      const delta = this.clock.getDelta();
+      if (this.viewHelper.animating) {
+        this.viewHelper.update(delta);
+      }
+      this.renderer.clear();
       this.controls.update();
       this.renderer.render(this.scene, this.activeCamera);
+      this.viewHelper.render(this.renderer);
     }, "animate");
     animate();
   }
@@ -46193,6 +46516,7 @@ class Load3d {
       cancelAnimationFrame(this.animationFrameId);
     }
     this.controls.dispose();
+    this.viewHelper.dispose();
     this.renderer.dispose();
     this.renderer.domElement.remove();
     this.scene.clear();
@@ -46372,9 +46696,11 @@ class Load3d {
           this.orthographicCamera.bottom = -frustumSize / 2;
           this.orthographicCamera.updateProjectionMatrix();
         }
+        this.renderer.clear();
         this.renderer.render(this.scene, this.activeCamera);
         const sceneData = this.renderer.domElement.toDataURL("image/png");
         this.renderer.setClearColor(0, 0);
+        this.renderer.clear();
         this.renderer.render(this.scene, this.activeCamera);
         const maskData = this.renderer.domElement.toDataURL("image/png");
         this.renderer.setClearColor(originalClearColor, originalClearAlpha);
@@ -46395,38 +46721,6 @@ class Load3d {
       side: DoubleSide
     });
   }
-  setViewPosition(position) {
-    if (!this.currentModel) {
-      return;
-    }
-    const box = new Box3();
-    let center = new Vector3();
-    let size = new Vector3();
-    if (this.currentModel) {
-      box.setFromObject(this.currentModel);
-      box.getCenter(center);
-      box.getSize(size);
-    }
-    const maxDim = Math.max(size.x, size.y, size.z);
-    const distance = maxDim * 2;
-    switch (position) {
-      case "front":
-        this.activeCamera.position.set(0, 0, distance);
-        break;
-      case "top":
-        this.activeCamera.position.set(0, distance, 0);
-        break;
-      case "right":
-        this.activeCamera.position.set(distance, 0, 0);
-        break;
-      case "isometric":
-        this.activeCamera.position.set(distance, distance, distance);
-        break;
-    }
-    this.activeCamera.lookAt(center);
-    this.controls.target.copy(center);
-    this.controls.update();
-  }
   setBackgroundColor(color) {
     this.renderer.setClearColor(new Color(color));
     this.renderer.render(this.scene, this.activeCamera);
@@ -46536,15 +46830,23 @@ class Load3dAnimation extends Load3d {
       }
     });
   }
-  animate = /* @__PURE__ */ __name(() => {
-    requestAnimationFrame(this.animate);
-    if (this.currentAnimation && this.isAnimationPlaying) {
+  startAnimation() {
+    const animate = /* @__PURE__ */ __name(() => {
+      this.animationFrameId = requestAnimationFrame(animate);
       const delta = this.clock.getDelta();
-      this.currentAnimation.update(delta);
-    }
-    this.controls.update();
-    this.renderer.render(this.scene, this.activeCamera);
-  }, "animate");
+      if (this.currentAnimation && this.isAnimationPlaying) {
+        this.currentAnimation.update(delta);
+      }
+      this.controls.update();
+      this.renderer.clear();
+      this.renderer.render(this.scene, this.activeCamera);
+      if (this.viewHelper.animating) {
+        this.viewHelper.update(delta);
+      }
+      this.viewHelper.render(this.renderer);
+    }, "animate");
+    animate();
+  }
 }
 function splitFilePath$1(path) {
   const folder_separator = path.lastIndexOf("/");
@@ -46577,7 +46879,7 @@ const load3dCanvasCSSCLASS = `display: flex;
     width: 100% !important;
     height: 100% !important;`;
 const containerToLoad3D = /* @__PURE__ */ new Map();
-function configureLoad3D(load3d, loadFolder, modelWidget, showGrid, cameraType, view, material, bgColor, lightIntensity, upDirection, fov2, cameraState, postModelUpdateFunc) {
+function configureLoad3D(load3d, loadFolder, modelWidget, material, bgColor, lightIntensity, upDirection, fov2, cameraState, postModelUpdateFunc) {
   const createModelUpdateHandler = /* @__PURE__ */ __name(() => {
     let isFirstLoad = true;
     return async (value) => {
@@ -46611,17 +46913,6 @@ function configureLoad3D(load3d, loadFolder, modelWidget, showGrid, cameraType,
     onModelWidgetUpdate(modelWidget.value);
   }
   modelWidget.callback = onModelWidgetUpdate;
-  load3d.toggleGrid(showGrid.value);
-  showGrid.callback = (value) => {
-    load3d.toggleGrid(value);
-  };
-  load3d.toggleCamera(cameraType.value);
-  cameraType.callback = (value) => {
-    load3d.toggleCamera(value);
-  };
-  view.callback = (value) => {
-    load3d.setViewPosition(value);
-  };
   material.callback = (value) => {
     load3d.setMaterialMode(value);
   };
@@ -46741,11 +47032,6 @@ app.registerExtension({
     const modelWidget = node.widgets.find(
       (w2) => w2.name === "model_file"
     );
-    const showGrid = node.widgets.find((w2) => w2.name === "show_grid");
-    const cameraType = node.widgets.find(
-      (w2) => w2.name === "camera_type"
-    );
-    const view = node.widgets.find((w2) => w2.name === "view");
     const material = node.widgets.find((w2) => w2.name === "material");
     const bgColor = node.widgets.find((w2) => w2.name === "bg_color");
     const lightIntensity = node.widgets.find(
@@ -46769,9 +47055,6 @@ app.registerExtension({
       load3d,
       "input",
       modelWidget,
-      showGrid,
-      cameraType,
-      view,
       material,
       bgColor,
       lightIntensity,
@@ -46939,11 +47222,6 @@ app.registerExtension({
     const modelWidget = node.widgets.find(
       (w2) => w2.name === "model_file"
     );
-    const showGrid = node.widgets.find((w2) => w2.name === "show_grid");
-    const cameraType = node.widgets.find(
-      (w2) => w2.name === "camera_type"
-    );
-    const view = node.widgets.find((w2) => w2.name === "view");
     const material = node.widgets.find((w2) => w2.name === "material");
     const bgColor = node.widgets.find((w2) => w2.name === "bg_color");
     const lightIntensity = node.widgets.find(
@@ -46976,9 +47254,6 @@ app.registerExtension({
       load3d,
       "input",
       modelWidget,
-      showGrid,
-      cameraType,
-      view,
       material,
       bgColor,
       lightIntensity,
@@ -47001,6 +47276,7 @@ app.registerExtension({
     const h = node.widgets.find((w2) => w2.name === "height");
     sceneWidget.serializeValue = async () => {
       node.properties["Camera Info"] = JSON.stringify(load3d.getCameraState());
+      load3d.toggleAnimation(false);
       const { scene: imageData, mask: maskData } = await load3d.captureScene(
         w.value,
         h.value
@@ -47081,11 +47357,6 @@ app.registerExtension({
     const modelWidget = node.widgets.find(
       (w) => w.name === "model_file"
     );
-    const showGrid = node.widgets.find((w) => w.name === "show_grid");
-    const cameraType = node.widgets.find(
-      (w) => w.name === "camera_type"
-    );
-    const view = node.widgets.find((w) => w.name === "view");
     const material = node.widgets.find((w) => w.name === "material");
     const bgColor = node.widgets.find((w) => w.name === "bg_color");
     const lightIntensity = node.widgets.find(
@@ -47109,9 +47380,6 @@ app.registerExtension({
         load3d,
         "output",
         modelWidget,
-        showGrid,
-        cameraType,
-        view,
         material,
         bgColor,
         lightIntensity,
@@ -48299,15 +48567,15 @@ var styles = `
   }
   #maskEditor_toolPanel {
     height: 100%;
-    width: var(--sidebar-width);
+    width: 4rem;
     z-index: 8888;
     background: var(--comfy-menu-bg);
     display: flex;
     flex-direction: column;
   }
   .maskEditor_toolPanelContainer {
-    width: var(--sidebar-width);
-    height: var(--sidebar-width);
+    width: 4rem;
+    height: 4rem;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -48368,7 +48636,7 @@ var styles = `
     margin-bottom: 5px;
   }
   #maskEditor_pointerZone {
-    width: calc(100% - var(--sidebar-width) - 220px);
+    width: calc(100% - 4rem - 220px);
     height: 100%;
   }
   #maskEditor_uiContainer {
@@ -48740,8 +49008,8 @@ var styles = `
   }
 
   .maskEditor_toolPanelZoomIndicator {
-    width: var(--sidebar-width);
-    height: var(--sidebar-width);
+    width: 4rem;
+    height: 4rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -48800,6 +49068,31 @@ var ColorComparisonMethod = /* @__PURE__ */ ((ColorComparisonMethod2) => {
   ColorComparisonMethod2["LAB"] = "lab";
   return ColorComparisonMethod2;
 })(ColorComparisonMethod || {});
+const saveBrushToCache = lodashExports.debounce(function(key, brush) {
+  try {
+    const brushString = JSON.stringify(brush);
+    setStorageValue(key, brushString);
+  } catch (error) {
+    console.error("Failed to save brush to cache:", error);
+  }
+}, 300);
+function loadBrushFromCache(key) {
+  try {
+    const brushString = getStorageValue(key);
+    if (brushString) {
+      const brush = JSON.parse(brushString);
+      console.log("Loaded brush from cache:", brush);
+      return brush;
+    } else {
+      console.log("No brush found in cache.");
+      return null;
+    }
+  } catch (error) {
+    console.error("Failed to load brush from cache:", error);
+    return null;
+  }
+}
+__name(loadBrushFromCache, "loadBrushFromCache");
 class MaskEditorDialog extends ComfyDialog {
   static {
     __name(this, "MaskEditorDialog");
@@ -49065,7 +49358,7 @@ class MaskEditorDialog extends ComfyDialog {
     }).then((response) => {
       if (!response.ok) {
         console.log("Failed to upload mask:", response);
-        this.uploadMask(filepath, formData, 2);
+        this.uploadMask(filepath, formData, retries - 1);
       }
     }).catch((error) => {
       console.error("Error:", error);
@@ -49664,13 +49957,18 @@ class BrushTool {
     this.brushAdjustmentSpeed = app.extensionManager.setting.get(
       "Comfy.MaskEditor.BrushAdjustmentSpeed"
     );
-    this.brushSettings = {
-      size: 10,
-      opacity: 100,
-      hardness: 1,
-      type: "arc"
-      /* Arc */
-    };
+    const cachedBrushSettings = loadBrushFromCache("maskeditor_brush_settings");
+    if (cachedBrushSettings) {
+      this.brushSettings = cachedBrushSettings;
+    } else {
+      this.brushSettings = {
+        type: "arc",
+        size: 10,
+        opacity: 0.7,
+        hardness: 1,
+        smoothingPrecision: 10
+      };
+    }
     this.maskBlendMode = "black";
   }
   createListeners() {
@@ -49732,6 +50030,10 @@ class BrushTool {
       "brushType",
       async () => this.brushSettings.type
     );
+    this.messageBroker.createPullTopic(
+      "brushSmoothingPrecision",
+      async () => this.brushSettings.smoothingPrecision
+    );
     this.messageBroker.createPullTopic(
       "maskBlendMode",
       async () => this.maskBlendMode
@@ -49840,7 +50142,7 @@ class BrushTool {
       dy = points[i + 1].y - points[i].y;
       totalLength += Math.sqrt(dx * dx + dy * dy);
     }
-    const distanceBetweenPoints = this.brushSettings.size / this.smoothingPrecision * 6;
+    const distanceBetweenPoints = this.brushSettings.size / this.brushSettings.smoothingPrecision * 6;
     const stepNr = Math.ceil(totalLength / distanceBetweenPoints);
     let interpolatedPoints = points;
     if (stepNr > 0) {
@@ -49871,7 +50173,7 @@ class BrushTool {
     const brush_size = await this.messageBroker.pull("brushSize");
     const distance = Math.sqrt((p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2);
     const steps = Math.ceil(
-      distance / (brush_size / this.smoothingPrecision * 4)
+      distance / (brush_size / this.brushSettings.smoothingPrecision * 4)
     );
     const interpolatedOpacity = 1 / (1 + Math.exp(-6 * (this.brushSettings.opacity - 0.5))) - 1 / (1 + Math.exp(3));
     this.init_shape(compositionOp);
@@ -50123,18 +50425,23 @@ class BrushTool {
   }
   setBrushSize(size) {
     this.brushSettings.size = size;
+    saveBrushToCache("maskeditor_brush_settings", this.brushSettings);
   }
   setBrushOpacity(opacity) {
     this.brushSettings.opacity = opacity;
+    saveBrushToCache("maskeditor_brush_settings", this.brushSettings);
   }
   setBrushHardness(hardness) {
     this.brushSettings.hardness = hardness;
+    saveBrushToCache("maskeditor_brush_settings", this.brushSettings);
   }
   setBrushType(type) {
     this.brushSettings.type = type;
+    saveBrushToCache("maskeditor_brush_settings", this.brushSettings);
   }
   setBrushSmoothingPrecision(precision) {
-    this.smoothingPrecision = precision;
+    this.brushSettings.smoothingPrecision = precision;
+    saveBrushToCache("maskeditor_brush_settings", this.brushSettings);
   }
 }
 class UIManager {
@@ -50340,7 +50647,6 @@ class UIManager {
     const circle_shape = document.createElement("div");
     circle_shape.id = "maskEditor_sidePanelBrushShapeCircle";
     circle_shape.classList.add(shapeColor);
-    circle_shape.style.background = "var(--p-button-text-primary-color)";
     circle_shape.addEventListener("click", () => {
       this.messageBroker.publish(
         "setBrushShape",
@@ -50354,7 +50660,6 @@ class UIManager {
     const square_shape = document.createElement("div");
     square_shape.id = "maskEditor_sidePanelBrushShapeSquare";
     square_shape.classList.add(shapeColor);
-    square_shape.style.background = "";
     square_shape.addEventListener("click", () => {
       this.messageBroker.publish(
         "setBrushShape",
@@ -50365,6 +50670,13 @@ class UIManager {
       square_shape.style.background = "var(--p-button-text-primary-color)";
       circle_shape.style.background = "";
     });
+    if ((await this.messageBroker.pull("brushSettings")).type === "arc") {
+      circle_shape.style.background = "var(--p-button-text-primary-color)";
+      square_shape.style.background = "";
+    } else {
+      circle_shape.style.background = "";
+      square_shape.style.background = "var(--p-button-text-primary-color)";
+    }
     brush_shape_container.appendChild(circle_shape);
     brush_shape_container.appendChild(square_shape);
     brush_shape_outer_container.appendChild(brush_shape_title);
@@ -50374,7 +50686,7 @@ class UIManager {
       1,
       100,
       1,
-      10,
+      (await this.messageBroker.pull("brushSettings")).size,
       (event, value) => {
         this.messageBroker.publish("setBrushSize", parseInt(value));
         this.updateBrushPreview();
@@ -50386,7 +50698,7 @@ class UIManager {
       0,
       1,
       0.01,
-      0.7,
+      (await this.messageBroker.pull("brushSettings")).opacity,
       (event, value) => {
         this.messageBroker.publish("setBrushOpacity", parseFloat(value));
         this.updateBrushPreview();
@@ -50398,7 +50710,7 @@ class UIManager {
       0,
       1,
       0.01,
-      1,
+      (await this.messageBroker.pull("brushSettings")).hardness,
       (event, value) => {
         this.messageBroker.publish("setBrushHardness", parseFloat(value));
         this.updateBrushPreview();
@@ -50410,7 +50722,7 @@ class UIManager {
       1,
       100,
       1,
-      10,
+      (await this.messageBroker.pull("brushSettings")).smoothingPrecision,
       (event, value) => {
         this.messageBroker.publish(
           "setBrushSmoothingPrecision",
@@ -50418,7 +50730,30 @@ class UIManager {
         );
       }
     );
+    const resetBrushSettingsButton = document.createElement("button");
+    resetBrushSettingsButton.id = "resetBrushSettingsButton";
+    resetBrushSettingsButton.innerText = "Reset to Default";
+    resetBrushSettingsButton.addEventListener("click", () => {
+      this.messageBroker.publish(
+        "setBrushShape",
+        "arc"
+        /* Arc */
+      );
+      this.messageBroker.publish("setBrushSize", 10);
+      this.messageBroker.publish("setBrushOpacity", 0.7);
+      this.messageBroker.publish("setBrushHardness", 1);
+      this.messageBroker.publish("setBrushSmoothingPrecision", 10);
+      circle_shape.style.background = "var(--p-button-text-primary-color)";
+      square_shape.style.background = "";
+      thicknesSliderObj.slider.value = "10";
+      opacitySliderObj.slider.value = "0.7";
+      hardnessSliderObj.slider.value = "1";
+      brushSmoothingPrecisionSliderObj.slider.value = "10";
+      this.setBrushBorderRadius();
+      this.updateBrushPreview();
+    });
     brush_settings_container.appendChild(brush_settings_title);
+    brush_settings_container.appendChild(resetBrushSettingsButton);
     brush_settings_container.appendChild(brush_shape_outer_container);
     brush_settings_container.appendChild(thicknesSliderObj.container);
     brush_settings_container.appendChild(opacitySliderObj.container);
@@ -53211,4 +53546,4 @@ app.registerExtension({
     });
   }
 });
-//# sourceMappingURL=index-Bordpmzt.js.map
+//# sourceMappingURL=index-je62U6DH.js.map

web/assets/keybindingService-Cak1En5n.js

@@ -1,6 +1,6 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { a$ as useKeybindingStore, a2 as useCommandStore, a as useSettingStore, cq as KeyComboImpl, cr as KeybindingImpl } from "./index-DjNHn37O.js";
+import { a$ as useKeybindingStore, a4 as useCommandStore, a as useSettingStore, cx as KeyComboImpl, cy as KeybindingImpl } from "./index-QvfM__ze.js";
 const CORE_KEYBINDINGS = [
   {
     combo: {
@@ -96,7 +96,7 @@ const CORE_KEYBINDINGS = [
       alt: true
     },
     commandId: "Comfy.Canvas.ZoomIn",
-    targetSelector: "#graph-canvas"
+    targetElementId: "graph-canvas"
   },
   {
     combo: {
@@ -105,7 +105,7 @@ const CORE_KEYBINDINGS = [
       shift: true
     },
     commandId: "Comfy.Canvas.ZoomIn",
-    targetSelector: "#graph-canvas"
+    targetElementId: "graph-canvas"
   },
   // For number pad '+'
   {
@@ -114,7 +114,7 @@ const CORE_KEYBINDINGS = [
       alt: true
     },
     commandId: "Comfy.Canvas.ZoomIn",
-    targetSelector: "#graph-canvas"
+    targetElementId: "graph-canvas"
   },
   {
     combo: {
@@ -122,21 +122,21 @@ const CORE_KEYBINDINGS = [
       alt: true
     },
     commandId: "Comfy.Canvas.ZoomOut",
-    targetSelector: "#graph-canvas"
+    targetElementId: "graph-canvas"
   },
   {
     combo: {
       key: "."
     },
     commandId: "Comfy.Canvas.FitView",
-    targetSelector: "#graph-canvas"
+    targetElementId: "graph-canvas"
   },
   {
     combo: {
       key: "p"
     },
     commandId: "Comfy.Canvas.ToggleSelected.Pin",
-    targetSelector: "#graph-canvas"
+    targetElementId: "graph-canvas"
   },
   {
     combo: {
@@ -144,7 +144,7 @@ const CORE_KEYBINDINGS = [
       alt: true
     },
     commandId: "Comfy.Canvas.ToggleSelectedNodes.Collapse",
-    targetSelector: "#graph-canvas"
+    targetElementId: "graph-canvas"
   },
   {
     combo: {
@@ -152,7 +152,7 @@ const CORE_KEYBINDINGS = [
       ctrl: true
     },
     commandId: "Comfy.Canvas.ToggleSelectedNodes.Bypass",
-    targetSelector: "#graph-canvas"
+    targetElementId: "graph-canvas"
   },
   {
     combo: {
@@ -160,7 +160,7 @@ const CORE_KEYBINDINGS = [
       ctrl: true
     },
     commandId: "Comfy.Canvas.ToggleSelectedNodes.Mute",
-    targetSelector: "#graph-canvas"
+    targetElementId: "graph-canvas"
   },
   {
     combo: {
@@ -190,7 +190,7 @@ const useKeybindingService = /* @__PURE__ */ __name(() => {
       return;
     }
     const keybinding = keybindingStore.getKeybinding(keyCombo);
-    if (keybinding && keybinding.targetSelector !== "#graph-canvas") {
+    if (keybinding && keybinding.targetElementId !== "graph-canvas") {
       event.preventDefault();
       await commandStore.execute(keybinding.commandId);
       return;
@@ -247,4 +247,4 @@ const useKeybindingService = /* @__PURE__ */ __name(() => {
 export {
   useKeybindingService as u
 };
-//# sourceMappingURL=keybindingService-Bx7YdkXn.js.map
+//# sourceMappingURL=keybindingService-Cak1En5n.js.map

web/assets/serverConfigStore-DCme3xlV.js

@@ -1,6 +1,6 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { $ as defineStore, ab as ref, c as computed } from "./index-DjNHn37O.js";
+import { a1 as defineStore, ad as ref, c as computed } from "./index-QvfM__ze.js";
 const useServerConfigStore = defineStore("serverConfig", () => {
   const serverConfigById = ref({});
   const serverConfigs = computed(() => {
@@ -87,4 +87,4 @@ const useServerConfigStore = defineStore("serverConfig", () => {
 export {
   useServerConfigStore as u
 };
-//# sourceMappingURL=serverConfigStore-CvyKFVuP.js.map
+//# sourceMappingURL=serverConfigStore-DCme3xlV.js.map

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-DjNHn37O.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-t-sFBuUC.css">
+    <script type="module" crossorigin src="./assets/index-QvfM__ze.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-Cf-n7v0V.css">
   </head>
   <body class="litegraph grid">
     <div id="vue-app"></div>