Fix deprecated legacy API imports with modern API shims

js/comfyui-gui-builder.js

@@ -1,4 +1,9 @@
-import { $el } from "../../scripts/ui.js";
+// === SHIM FOR NEW COMFYUI (removes ui.js warning) ===
+let $el;
+if (window?.comfyAPI?.ui) {
+    ({ $el } = window.comfyAPI.ui);
+} else {
+    ({ $el } = await import("../../scripts/ui.js"));
 
 function normalizeContent(content) {
 	const tmp = document.createElement('div');
@@ -224,4 +229,4 @@ export function buildGuiFrameCustomHeader(dialogId, customHeader, content, owner
 	});
 
 	return dialog_mask;
-}
+}

js/comfyui-manager.js

@@ -1,6 +1,5 @@
 import { api } from "../../scripts/api.js";
 import { app } from "../../scripts/app.js";
-import { $el, ComfyDialog } from "../../scripts/ui.js";
 import {
 	SUPPORTED_OUTPUT_NODE_TYPES,
 	ShareDialog,
@@ -22,6 +21,27 @@ import { ModelManager } from "./model-manager.js";
 import { SnapshotManager } from "./snapshot.js";
 import { buildGuiFrame, createSettingsCombo } from "./comfyui-gui-builder.js";
 
+// === SHIM FOR NEW COMFYUI (removes ui.js, button.js + buttonGroup.js warnings) ===
+let $el, ComfyDialog, ComfyButton, ComfyButtonGroup;
+
+if (window?.comfyAPI?.ui) {
+	({ $el, ComfyDialog } = window.comfyAPI.ui);
+} else {
+	({ $el, ComfyDialog } = await import("../../scripts/ui.js"));
+}
+
+if (window?.comfyAPI?.button) {
+	ComfyButton = window.comfyAPI.button.ComfyButton;
+} else {
+	ComfyButton = (await import("../../scripts/ui/components/button.js")).ComfyButton;
+}
+
+if (window?.comfyAPI?.buttonGroup?.ComfyButtonGroup) {
+	ComfyButtonGroup = window.comfyAPI.buttonGroup.ComfyButtonGroup;
+} else {
+	ComfyButtonGroup = (await import("../../scripts/ui/components/buttonGroup.js")).ComfyButtonGroup;
+}
+
 let manager_version = await getVersion();
 
 var docStyle = document.createElement('style');
@@ -1567,8 +1587,9 @@ app.registerExtension({
 		try {
 			// new style Manager buttons
 			// unload models button into new style Manager button
-			let cmGroup = new (await import("../../scripts/ui/components/buttonGroup.js")).ComfyButtonGroup(
-				new(await import("../../scripts/ui/components/button.js")).ComfyButton({
+			// Use hoisted ComfyButton + ComfyButtonGroup from shim at top of file
+			let cmGroup = new ComfyButtonGroup(
+				new ComfyButton({
 					icon: "puzzle",
 					action: () => {
 						if(!manager_instance)
@@ -1579,7 +1600,7 @@ app.registerExtension({
 					content: "Manager",
 					classList: "comfyui-button comfyui-menu-mobile-collapse primary"
 				}).element,
-				new(await import("../../scripts/ui/components/button.js")).ComfyButton({
+				new ComfyButton({
 					icon: "star",
 					action: () => {
 						if(!manager_instance)
@@ -1592,21 +1613,21 @@ app.registerExtension({
 					},
 					tooltip: "Show favorite custom node list"
 				}).element,
-				new(await import("../../scripts/ui/components/button.js")).ComfyButton({
+				new ComfyButton({
 					icon: "vacuum-outline",
 					action: () => {
 						free_models();
 					},
 					tooltip: "Unload Models"
 				}).element,
-				new(await import("../../scripts/ui/components/button.js")).ComfyButton({
+				new ComfyButton({
 					icon: "vacuum",
 					action: () => {
 						free_models(true);
 					},
 					tooltip: "Free model and node cache"
 				}).element,
-				new(await import("../../scripts/ui/components/button.js")).ComfyButton({
+				new ComfyButton({
 					icon: "share",
 					action: () => {
 						if (share_option === 'openart') {

js/comfyui-share-common.js

@@ -1,11 +1,18 @@
 import { api } from "../../scripts/api.js";
 import { app } from "../../scripts/app.js";
-import { $el, ComfyDialog } from "../../scripts/ui.js";
 import { CopusShareDialog } from "./comfyui-share-copus.js";
 import { OpenArtShareDialog } from "./comfyui-share-openart.js";
 import { YouMLShareDialog } from "./comfyui-share-youml.js";
 import { customAlert } from "./common.js";
 
+// === SHIM FOR NEW COMFYUI (removes ui.js warning) ===
+let $el, ComfyDialog;
+if (window?.comfyAPI?.ui) {
+    ({ $el, ComfyDialog } = window.comfyAPI.ui);
+} else {
+    ({ $el, ComfyDialog } = await import("../../scripts/ui.js"));
+}
+
 export const SUPPORTED_OUTPUT_NODE_TYPES = [
 	"PreviewImage",
 	"SaveImage",

js/comfyui-share-copus.js

@@ -1,7 +1,14 @@
 import { app } from "../../scripts/app.js";
-import { $el, ComfyDialog } from "../../scripts/ui.js";
 import { customAlert } from "./common.js";
 
+// === SHIM FOR NEW COMFYUI (removes ui.js warning) ===
+let $el, ComfyDialog;
+if (window?.comfyAPI?.ui) {
+    ({ $el, ComfyDialog } = window.comfyAPI.ui);
+} else {
+    ({ $el, ComfyDialog } = await import("../../scripts/ui.js"));
+}
+
 const env = "prod";
 
 let DEFAULT_HOMEPAGE_URL = "https://copus.io";

js/comfyui-share-openart.js

@@ -1,8 +1,15 @@
 import {app} from "../../scripts/app.js";
 import {api} from "../../scripts/api.js";
-import {ComfyDialog, $el} from "../../scripts/ui.js";
 import { customAlert } from "./common.js";
 
+// === SHIM FOR NEW COMFYUI (removes ui.js warning) ===
+let $el, ComfyDialog;
+if (window?.comfyAPI?.ui) {
+    ({ $el, ComfyDialog } = window.comfyAPI.ui);
+} else {
+    ({ $el, ComfyDialog } = await import("../../scripts/ui.js"));
+}
+
 const LOCAL_STORAGE_KEY = "openart_comfy_workflow_key";
 const DEFAULT_HOMEPAGE_URL = "https://openart.ai/workflows/dev?developer=true";
 //const DEFAULT_HOMEPAGE_URL = "http://localhost:8080/workflows/dev?developer=true";

js/comfyui-share-youml.js

@@ -1,8 +1,15 @@
 import {app} from "../../scripts/app.js";
 import {api} from "../../scripts/api.js";
-import {ComfyDialog, $el} from "../../scripts/ui.js";
 import { customAlert } from "./common.js";
 
+// === SHIM FOR NEW COMFYUI (removes ui.js warning) ===
+let $el, ComfyDialog;
+if (window?.comfyAPI?.ui) {
+    ({ $el, ComfyDialog } = window.comfyAPI.ui);
+} else {
+    ({ $el, ComfyDialog } = await import("../../scripts/ui.js"));
+}
+
 const BASE_URL = "https://youml.com";
 //const BASE_URL = "http://localhost:3000";
 const DEFAULT_HOMEPAGE_URL = `${BASE_URL}/?from=comfyui`;

js/common.js

@@ -1,8 +1,15 @@
 import { app } from "../../scripts/app.js";
 import { api } from "../../scripts/api.js";
-import { $el, ComfyDialog } from "../../scripts/ui.js";
 import { getBestPosition, getPositionStyle, getRect } from './popover-helper.js';
 
+// === SHIM FOR NEW COMFYUI (removes ui.js warning) ===
+let $el, ComfyDialog;
+if (window?.comfyAPI?.ui) {
+    ({ $el, ComfyDialog } = window.comfyAPI.ui);
+} else {
+    ({ $el, ComfyDialog } = await import("../../scripts/ui.js"));
+}
+
 
 function internalCustomConfirm(message, confirmMessage, cancelMessage) {
 	return new Promise((resolve) => {
@@ -667,4 +674,4 @@ function initTooltip () {
     document.body.addEventListener('mouseleave', mouseleaveHandler, true);
 }
 
-initTooltip();
+initTooltip();

js/components-manager.js

@@ -1,8 +1,22 @@
 import { app } from "../../scripts/app.js";
 import { api } from "../../scripts/api.js"
 import { sleep, show_message, customConfirm, customAlert } from "./common.js";
-import { GroupNodeConfig, GroupNodeHandler } from "../../extensions/core/groupNode.js";
-import { ComfyDialog, $el } from "../../scripts/ui.js";
+
+// === SHIM FOR NEW COMFYUI (removes groupNode.js warning) ===
+let GroupNodeConfig, GroupNodeHandler;
+if (window?.comfyAPI?.groupNode) {
+    ({ GroupNodeConfig, GroupNodeHandler } = window.comfyAPI.groupNode);
+} else {
+    ({ GroupNodeConfig, GroupNodeHandler } = await import("../../extensions/core/groupNode.js"));
+}
+
+// === SHIM FOR NEW COMFYUI (removes ui.js warning) ===
+let ComfyDialog, $el;
+if (window?.comfyAPI?.ui) {
+    ({ ComfyDialog, $el } = window.comfyAPI.ui);
+} else {
+    ({ ComfyDialog, $el } = await import("../../scripts/ui.js"));
+}
 
 const SEPARATOR = ">"
 

js/custom-nodes-manager.js

@@ -1,5 +1,4 @@
 import { app } from "../../scripts/app.js";
-import { ComfyDialog, $el } from "../../scripts/ui.js";
 import { api } from "../../scripts/api.js";
 import { buildGuiFrameCustomHeader,  createSettingsCombo } from "./comfyui-gui-builder.js";
 
@@ -14,6 +13,14 @@ import {
 // https://cenfun.github.io/turbogrid/api.html
 import TG from "./turbogrid.esm.js";
 
+// === SHIM FOR NEW COMFYUI (removes ui.js warning) ===
+let ComfyDialog, $el;
+if (window?.comfyAPI?.ui) {
+    ({ ComfyDialog, $el } = window.comfyAPI.ui);
+} else {
+    ({ ComfyDialog, $el } = await import("../../scripts/ui.js"));
+}
+
 loadCss("./custom-nodes-manager.css");
 
 const gridId = "node";
@@ -2245,4 +2252,4 @@ export class CustomNodesManager {
 	get isVisible() {
 		return this.element?.style?.display !== "none";
 	}
-}
+}

js/model-manager.js

@@ -1,5 +1,4 @@
 import { app } from "../../scripts/app.js";
-import { $el } from "../../scripts/ui.js";
 import {
 	manager_instance, rebootAPI,
 	fetchData, md5, icons, show_message, customAlert, infoToast, showTerminal,
@@ -11,6 +10,14 @@ import { api } from "../../scripts/api.js";
 import TG from "./turbogrid.esm.js";
 import { buildGuiFrameCustomHeader,  createSettingsCombo } from "./comfyui-gui-builder.js";
 
+// === SHIM FOR NEW COMFYUI (removes ui.js warning) ===
+let $el;
+if (window?.comfyAPI?.ui) {
+    ({ $el } = window.comfyAPI.ui);
+} else {
+    ({ $el } = await import("../../scripts/ui.js"));
+}
+
 loadCss("./model-manager.css");
 
 const gridId = "model";

js/snapshot.js

@@ -1,9 +1,16 @@
 import { app } from "../../scripts/app.js";
 import { api } from "../../scripts/api.js"
-import { ComfyDialog, $el } from "../../scripts/ui.js";
 import { manager_instance, rebootAPI, show_message, handle403Response, loadCss } from  "./common.js";
 import { buildGuiFrame } from "./comfyui-gui-builder.js";
 
+// === SHIM FOR NEW COMFYUI (removes ui.js warning) ===
+let ComfyDialog, $el;
+if (window?.comfyAPI?.ui) {
+    ({ ComfyDialog, $el } = window.comfyAPI.ui);
+} else {
+    ({ ComfyDialog, $el } = await import("../../scripts/ui.js"));
+}
+
 loadCss("./snapshot.css");
 
 async function restore_snapshot(target) {