ide-assi 0.444.0 → 0.445.0

package/dist/bundle.cjs.js

@@ -10977,6 +10977,7 @@ class ninegrid {
 		ROW_MOVED			: "rowmoved",
 		//CAN_FIXED_CHANGE	: "canfixedchange",
 		//FIXED_CHANGED		: "fixedchanged",
+		TAB_LOAD			: "tabload",
 	};
 
 	static BAND = {
@@ -119286,7 +119287,21 @@ class NineGridContainer extends HTMLElement
 
 //export { NineGridContainer };
 
-customElements.define("nine-grid", NineGridContainer);
+customElements.define("nine-grid", NineGridContainer);
+
+class NineGridSourceContainer extends NineGridContainer
+{
+	constructor() {
+
+		super();
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+	};
+}
+
+customElements.define("ng-source", NineGridSourceContainer);
 
 class nxDialog extends HTMLElement
 {
@@ -119426,76 +119441,6 @@ class nxDialog extends HTMLElement
 
 customElements.define("nx-dialog", nxDialog);
 
-class nxDiv extends HTMLElement {
-	constructor() {
-		super();
-		this.attachShadow({ mode: "open" });
-		this.isCollapsed = false; // 검색 박스 상태 (true: 축소됨, false: 확장됨)
-	}
-
-	connectedCallback() {
-		this.#init();
-	}
-
-	getJsonData = () => {
-		const parent = this.shadowRoot.querySelector(".search-content");
-		const elements = parent.querySelectorAll("[id]");
-		const jsonData = {};
-
-		elements.forEach(element => {
-			if (element.tagName === "INPUT" || element.tagName === "TEXTAREA" || element.tagName === "SELECT") {
-				jsonData[element.id] = element.value;
-			} else {
-				jsonData[element.id] = element.textContent.trim();
-			}
-		});
-
-		return jsonData;
-	};
-
-	getSearchOptions = () => {
-
-	};
-
-	#init = () => {
-		const contents = this.innerHTML.trim();
-		this.innerHTML = ""; // 기존 내부 HTML 제거
-
-		const htmlTmpl = document.createElement("template");
-		htmlTmpl.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxDiv.css";
-				${ninegrid.getCustomPath(this,"nxDiv.css")}
-				
-				:host {
-				}
-			</style>
-            
-            <div class="search-container">
-                <span class="toggle-icon"></span>
-                <div class="search-content">${contents}</div>
-            </div>
-        `;
-
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
-
-		this.#setupToggle();
-	}
-
-	#setupToggle = () => {
-		const toggleIcon = this.shadowRoot.querySelector(".toggle-icon");
-		const searchContainer = this.shadowRoot.querySelector(".search-container");
-
-		toggleIcon.addEventListener("click", () => {
-			this.isCollapsed = !this.isCollapsed;
-			//toggleIcon.innerHTML = this.isCollapsed ? "" : "X";
-			searchContainer.classList.toggle("collapse", this.isCollapsed);
-		});
-	}
-}
-
-customElements.define("nx-div", nxDiv);
-
 class nxI18nExt extends HTMLElement
 {
 	#enableHtml;
@@ -120123,6 +120068,20 @@ class nxSideMenu extends HTMLElement
 		ninegrid.waitForInnerHTML(this)
 			.then(() => this.#init())
 			.catch(error => console.error(error));
+
+		setTimeout(() => {
+			if (!ninegrid.querySelector("nx-side-menu-item.active", this.shadowRoot)) {
+				const rawUrl = window.location.href;         // 전체 URL
+				const parsedUrl = new URL(rawUrl);           // URL 객체로 파싱
+				const href = parsedUrl.pathname;        // 👉 경로만 추출
+
+				const el = ninegrid.querySelector(`nx-side-menu-item[href="${href}"]`, this.shadowRoot);
+				if (el) {
+					el.classList.add("active");
+				}
+			}
+		}, 300);
+
 	};
 	
 	expand = () => {
@@ -120654,203 +120613,6 @@ class nxSpan extends HTMLElement
 
 customElements.define("nx-span", nxSpan);
 
-class nxTab extends HTMLElement {
-    constructor() {
-        super();
-        this.attachShadow({ mode: 'open' });
-        
-        this.shadowRoot.innerHTML = `
-            <style>
-                :host(.theme-1) {
-					.tabs {
-                        --border-bottom: 1px solid #eee;
-                        gap: 3px;
-                    }
-                    .tab-button {
-						color: #666;
-                        font-weight: 500;
-						transform: translateY(1px);
-						z-index: 1;
-						--border-bottom: 1px solid #ccc;
-                    }
-					.tab-button.active {
-                        color: #666;
-                        font-weight: 700;
-                        border-bottom: 1px solid white;
-                    }
-					.tab-pages {
-                      border: 1px solid #ccc;
-                    }
-                }
-				
-                :host(.theme-2) {
-                    .tabs {
-                        border-bottom: 1px solid #eee;
-                        gap: 40px;
-                    }
-                    .tab-button {
-                        color: #666;
-                        font-weight: 500;
-                        border: none;
-                    }
-                    .tab-button.active {
-                        color: green;
-                        font-weight: 700;
-                        border-bottom: 3px solid green;
-                    }
-                }
-				
-                .tabs {
-                    display: flex;
-                      cursor: pointer;
-                      
-                    }
-                    .tab-button {
-                      padding: 8px;
-                      border: 1px solid #ccc;
-                      text-align: center;
-					  outline: 0;
-                    }
-                    .tab-button:hover {
-                      --filter: brightness(80%);
-                    }
-                    .tab-pages {
-                      position: relative;
-                      width: 100%;
-                      overflow: hidden;
-                      transition: height 0.5s ease-in-out;
-                    }
-                    .tab-page {
-                      position: absolute;
-                      width: 100%;
-                      top: 0;
-                      transition: left 0.5s ease-in-out;
-                      padding: 20px;
-                      box-sizing: border-box;
-                      white-space: nowrap;
-                          overflow: hidden;
-                          text-overflow: ellipsis;
-                        text-align: left;
-                    }
-                    .tab-page.active {
-                      left: 0;
-                    }
-                    .tab-page.exit-left {
-                      left: -100%;
-                    }
-                    .tab-page.exit-right {
-                      left: 100%;
-                    }
-            </style>
-            <div class="tabs"></div>
-            <div class="tab-pages"></div>
-        `;
-        
-		//console.log(this.shadowRoot.querySelector('.tab-page'));
-		//this.shadowRoot.querySelector('.tab-pages').style.height = this.shadowRoot.querySelector('.tab-page').style.height;
-		
-        this.switchTabHandler = this.#switchTab.bind(this);
-    }
-
-    connectedCallback() {
-        this.classList.add(this.getAttribute("theme") || "theme-1");
-        this.#renderTabs();
-        this.shadowRoot.querySelectorAll('.tab-button').forEach(tab => {
-            tab.addEventListener('click', this.switchTabHandler);
-        });
-
-        const firstTab = this.shadowRoot.querySelector('.tab-button');
-        const firstContent = this.shadowRoot.querySelector('.tab-page');
-        if (firstTab && firstContent) {
-            firstTab.classList.add('active');
-            firstContent.classList.add('active');
-			setTimeout(() => {
-				this.shadowRoot.querySelector('.tab-pages').style.height = `${firstContent.scrollHeight}px`;
-			}, 100);
-            //this.shadowRoot.querySelector('.tab-pages').style.height = `${firstContent.scrollHeight}px`;
-			
-			console.log(firstContent.style.height, firstContent.scrollHeight);
-        }
-        
-        this.shadowRoot.querySelectorAll('.tab-page:not(.active)').forEach(el => { el.classList.add('exit-right'); });
-    }
-
-    #renderTabs() {
-        const tabs = this.shadowRoot.querySelector('.tabs');
-        const contents = this.shadowRoot.querySelector('.tab-pages');
-        const tabItems = this.querySelectorAll('nx-tab-page');
-
-        tabItems.forEach((item, index) => {
-            const tab = document.createElement('div');
-            tab.classList.add('tab-button');
-            tab.textContent = item.getAttribute('caption');
-            tab.setAttribute('data-target', `content${index}`);
-            tabs.appendChild(tab);
-
-            const content = document.createElement('div');
-            content.id = `content${index}`;
-            content.classList.add('tab-page');
-            content.innerHTML = item.innerHTML;
-            contents.appendChild(content);
-        });
-
-        tabItems.forEach((item) => {
-            item.remove();
-        });
-    }
-
-    #switchTab(event) {
-        const target = event.target;
-        if (!target.classList.contains('tab-button')) return;
-
-        const targetId = target.getAttribute('data-target');
-        const activeTab = this.shadowRoot.querySelector('.tab-button.active');
-        const activeContent = this.shadowRoot.querySelector('.tab-page.active');
-        const newContent = this.shadowRoot.getElementById(targetId);
-
-        if (activeTab === target) return; // 현재 탭을 클릭했을 때 아무런 변화가 없도록 함
-
-        if (activeTab && activeContent) {
-			activeTab.classList.remove('active');
-			activeContent.classList.remove('active','exit-left','exit-right');
-			//newContent.classList.remove('exit-left','exit-right');
-			activeContent.style.left = '';
-
-			if (activeTab.compareDocumentPosition(target) & Node.DOCUMENT_POSITION_FOLLOWING) {
-				activeContent.classList.add('exit-left');
-			} else {
-				activeContent.classList.add('exit-right');
-			}
-    //console.log(index);
-    //if (index == 1) return;
-
-			newContent.classList.add('active');
-			newContent.style.left = '';
-
-			newContent.classList.remove('exit-left','exit-right');
-        }
-
-        target.classList.add('active');
-        //newContent.classList.add('active');
-        this.shadowRoot.querySelector('.tab-pages').style.height = `${newContent.scrollHeight}px`;
-		
-		//console.log(newContent.style.height, newContent.scrollHeight);
-    }
-}
-
-class nxTabPage extends HTMLElement {
-    constructor() {
-        super();
-    }
-
-    connectedCallback() {
-        this.caption = this.getAttribute('caption');
-    }
-}
-
-customElements.define('nx-tab', nxTab);
-customElements.define('nx-tab-page', nxTabPage);
-
 class nxTest1 extends HTMLElement
 {
 	constructor() {
@@ -121035,6 +120797,704 @@ Array.prototype.nineBinarySearch = function(target)
 	return -1;
 };
 
+class nxDiv extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+		this.isCollapsed = false; // 검색 박스 상태 (true: 축소됨, false: 확장됨)
+	}
+
+	connectedCallback() {
+		this.#init();
+	}
+
+	getJsonData = () => {
+		const parent = this.shadowRoot.querySelector(".search-content");
+		const elements = parent.querySelectorAll("[id]");
+		const jsonData = {};
+
+		elements.forEach(element => {
+			if (element.tagName === "INPUT" || element.tagName === "TEXTAREA" || element.tagName === "SELECT") {
+				jsonData[element.id] = element.value;
+			} else {
+				jsonData[element.id] = element.textContent.trim();
+			}
+		});
+
+		return jsonData;
+	};
+
+	getSearchOptions = () => {
+
+	};
+
+	#init = () => {
+		const contents = this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxDiv.css";
+				${ninegrid.getCustomPath(this,"nxDiv.css")}
+			</style>
+            
+            <div class="search-container">
+                <span class="toggle-icon"></span>
+                <div class="search-content">${contents}</div>
+            </div>
+        `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+
+		this.#setupToggle();
+	}
+
+	#setupToggle = () => {
+		const toggleIcon = this.shadowRoot.querySelector(".toggle-icon");
+		const searchContainer = this.shadowRoot.querySelector(".search-container");
+
+		toggleIcon.addEventListener("click", () => {
+			this.isCollapsed = !this.isCollapsed;
+			//toggleIcon.innerHTML = this.isCollapsed ? "" : "X";
+			searchContainer.classList.toggle("collapse", this.isCollapsed);
+		});
+	}
+}
+
+customElements.define("nx-div", nxDiv);
+
+class nxCollapse extends HTMLElement {
+	#target;
+	#targetPrevDisplay;
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+	}
+
+	connectedCallback() {
+		const targetSelector = this.getAttribute("target");
+		this.#target = ninegrid.querySelector(targetSelector);
+		//if (!this.#target) return;
+
+		this.#init();
+	}
+
+	#init = () => {
+		this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxCollapse.css";
+				${ninegrid.getCustomPath(this,"nxCollapse.css")}
+			</style>
+            
+            <button></button>
+        `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+
+		if (this.#target && this.#target) {
+			const collapseBtn = document.createElement("span");
+			collapseBtn.className = "collapse-toggle";
+
+			const shadowRoot = this.#target.shadowRoot;
+			(shadowRoot || this.#target).appendChild(collapseBtn);
+
+			const style = document.createElement("style");
+			style.textContent = `
+				span.collapse-toggle {
+					position: absolute;
+					top: 0;
+					right: 0;
+					cursor: pointer;
+					width: 16px;
+					height: 16px;
+					border: none;
+					transition: all 0.3s ease;
+    				background-repeat: no-repeat;
+					background-position: center;
+					background-size: auto;
+					background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="darkgray" class="bi bi-box-arrow-in-up-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M6.364 13.5a.5.5 0 0 0 .5.5H13.5a1.5 1.5 0 0 0 1.5-1.5v-10A1.5 1.5 0 0 0 13.5 1h-10A1.5 1.5 0 0 0 2 2.5v6.636a.5.5 0 1 0 1 0V2.5a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H6.864a.5.5 0 0 0-.5.5"/><path fill-rule="evenodd" d="M11 5.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793l-8.147 8.146a.5.5 0 0 0 .708.708L10 6.707V10.5a.5.5 0 0 0 1 0z"/></svg>');
+				}
+
+				span.collapse-toggle:hover {
+					background-color: rgba(60, 60, 60, 0.1);
+					box-shadow: 0 0 6px rgba(60, 60, 60, 0.4);
+					transform: scale(1.2); /* 살짝 확대 */
+				}
+				
+				${shadowRoot ? ":host(.nx-collapse)" : ".nx-collapse"} {
+					animation: collapseShrink 0.7s ease forwards;
+					pointer-events: none; /* 클릭 방지 */
+				}
+				
+				${shadowRoot ? ":host(.nx-expand)" : ".nx-expand"} {
+					animation: expandShrink 0.6s ease forwards;
+					pointer-events: none; /* 클릭 방지 */
+				}
+				
+				@keyframes collapseShrink {
+					0% {
+						opacity: 1;
+						transform: scale(1);
+						transform-origin: top right;
+					}
+					100% {
+						opacity: 0;
+						transform: scale(0);
+						transform-origin: top right;
+					}
+				}
+				
+				@keyframes expandShrink {
+					0% {
+						opacity: 0;
+						transform: scale(0.5);
+						transform-origin: top right;
+					}
+					100% {
+						opacity: 1;
+						transform: scale(1);
+						transform-origin: top right;
+					}
+				}
+			`;
+
+			(shadowRoot || this.#target).appendChild(style);
+
+			// collapse 시 target 숨기고 복원 버튼 등장
+			collapseBtn.addEventListener("click", () => {
+				// fade-out 클래스 먼저 넣고 → 일정 시간 후 display: none
+				// STEP 1: 복원 버튼 애니메이션 시작 (살짝 빠르게 먼저 등장)
+				this.#target.classList.add("nx-collapse");
+
+				setTimeout(() => {
+					// STEP 2: target이 줄어드는 shrinking 애니메이션 시작
+					//this.style.display = "inline-block";
+					this.classList.add("nx-collapse");
+				}, 100); // appearing 시작 후 100ms 딜레이로 target 축소 시작
+
+				setTimeout(() => {
+					// STEP 3: 실제 target 숨기기
+					this.#targetPrevDisplay = this.#target.style.display;
+					this.#target.style.display = "none";
+				}, 500); // shrinking 애니메이션이 끝나고 실제 제거
+			});
+		}
+
+		// 복원 시 target 보이고 복원 버튼 사라짐
+		/**
+		this.shadowRoot.querySelector("button").addEventListener("click", () => {
+			this.#target.classList.remove("nx-collapse");
+			this.classList.remove("nx-collapse");
+
+			this.#target.style.display = this.#targetPrevDisplay;
+			this.style.display = "none";
+		}); */
+
+		this.shadowRoot.querySelector("button").addEventListener("click", () => {
+			// STEP 1: 복원 대상에 애니메이션 클래스 부여
+			this.#target.style.display = this.#targetPrevDisplay;
+			this.#target.classList.remove("nx-collapse");
+			this.#target.classList.add("nx-expand"); // expandReveal 적용
+
+			setTimeout(() => {
+				// STEP 2: target이 줄어드는 shrinking 애니메이션 시작
+				this.classList.remove("nx-collapse");
+				//this.style.display = "inline-block";
+				this.classList.add("nx-expand");
+			}, 100); // appearing 시작 후 100ms 딜레이로 target 축소 시작
+
+
+			setTimeout(() => {
+				// STEP 2: 실제 화면에 표시
+
+				//this.style.display = "none"; // 복원 버튼은 사라짐
+
+				// STEP 3: 애니메이션이 끝난 후 pointer-events 복구 (선택적)
+				this.#target.classList.remove("nx-expand");
+				this.classList.remove("nx-expand");
+				//this.#target.style.pointerEvents = "auto";
+			}, 600); // 애니메이션과 동일한 시간
+		});
+
+	}
+}
+
+customElements.define("nx-collapse", nxCollapse);
+
+class nxTab extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        
+        this.shadowRoot.innerHTML = `
+            <style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTab.css";
+				${ninegrid.getCustomPath(this,"nxTab.css")}
+			</style>
+
+            <div class="tabs"></div>
+            <div class="tab-pages"></div>
+        `;
+        
+		//console.log(this.shadowRoot.querySelector('.tab-page'));
+		//this.shadowRoot.querySelector('.tab-pages').style.height = this.shadowRoot.querySelector('.tab-page').style.height;
+		
+        this.switchTabHandler = this.#switchTab.bind(this);
+    }
+
+    connectedCallback() {
+        this.#init();
+        this.dispatchEvent(new CustomEvent(ninegrid.EVENT.TAB_LOAD, { bubbles: true, detail: {} }));
+    }
+
+    #renderTabs() {
+        const tabs = this.shadowRoot.querySelector('.tabs');
+        const contents = this.shadowRoot.querySelector('.tab-pages');
+        const tabItems = this.querySelectorAll('nx-tab-page');
+
+        tabItems.forEach((item, index) => {
+            const tab = document.createElement('div');
+            tab.classList.add('tab-button');
+            tab.textContent = item.getAttribute('caption');
+            tab.setAttribute('data-target', `content${index}`);
+            tabs.appendChild(tab);
+
+            const content = document.createElement('div');
+            content.id = `content${index}`;
+            content.classList.add('tab-page');
+            content.innerHTML = item.innerHTML;
+            contents.appendChild(content);
+        });
+
+        tabItems.forEach((item) => {
+            item.remove();
+        });
+    }
+
+    #switchTab(event) {
+        const target = event.target;
+        if (!target.classList.contains('tab-button')) return;
+
+        const targetId = target.getAttribute('data-target');
+        const activeTab = this.shadowRoot.querySelector('.tab-button.active');
+        const activeContent = this.shadowRoot.querySelector('.tab-page.active');
+        const newContent = this.shadowRoot.getElementById(targetId);
+
+        if (activeTab === target) return; // 현재 탭을 클릭했을 때 아무런 변화가 없도록 함
+
+        if (activeTab && activeContent) {
+			activeTab.classList.remove('active');
+			activeContent.classList.remove('active','exit-left','exit-right');
+			//newContent.classList.remove('exit-left','exit-right');
+			activeContent.style.left = '';
+
+			if (activeTab.compareDocumentPosition(target) & Node.DOCUMENT_POSITION_FOLLOWING) {
+				activeContent.classList.add('exit-left');
+			} else {
+				activeContent.classList.add('exit-right');
+			}
+    //console.log(index);
+    //if (index == 1) return;
+
+			newContent.classList.add('active');
+			newContent.style.left = '';
+
+			newContent.classList.remove('exit-left','exit-right');
+        }
+
+        target.classList.add('active');
+        //newContent.classList.add('active');
+        this.shadowRoot.querySelector('.tab-pages').style.height = `${newContent.scrollHeight}px`;
+		
+		//console.log(newContent.style.height, newContent.scrollHeight);
+    };
+
+    #init = () => {
+
+        this.classList.add(this.getAttribute("theme") || "theme-1");
+        this.#renderTabs();
+        this.shadowRoot.querySelectorAll('.tab-button').forEach(tab => {
+            tab.addEventListener('click', this.switchTabHandler);
+        });
+
+        const firstTab = this.shadowRoot.querySelector('.tab-button');
+        const firstContent = this.shadowRoot.querySelector('.tab-page');
+        if (firstTab && firstContent) {
+            firstTab.classList.add('active');
+            firstContent.classList.add('active');
+            setTimeout(() => {
+                this.shadowRoot.querySelector('.tab-pages').style.height = `${firstContent.scrollHeight}px`;
+            }, 100);
+            //this.shadowRoot.querySelector('.tab-pages').style.height = `${firstContent.scrollHeight}px`;
+
+            console.log(firstContent.style.height, firstContent.scrollHeight);
+        }
+
+        this.shadowRoot.querySelectorAll('.tab-page:not(.active)').forEach(el => { el.classList.add('exit-right'); });
+
+        const resizeObserver = new ResizeObserver(() => {
+            const activeContent = this.shadowRoot.querySelector('.tab-page.active');
+            if (activeContent) {
+                this.shadowRoot.querySelector('.tab-pages').style.height = `${activeContent.scrollHeight}px`;
+            }
+        });
+
+        const activeContent = this.shadowRoot.querySelector('.tab-page.active');
+        if (activeContent) resizeObserver.observe(activeContent);
+    };
+}
+
+class nxTabPage extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        this.caption = this.getAttribute('caption');
+    }
+}
+
+customElements.define('nx-tab', nxTab);
+customElements.define('nx-tab-page', nxTabPage);
+
+class nxSplitter extends HTMLElement {
+	#mode;
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+	}
+
+	connectedCallback() {
+		this.#init();
+	}
+
+	#detectMode = (el) => {
+		const prev = el.previousElementSibling;
+		const next = el.nextElementSibling;
+
+		const prevRect = prev?.getBoundingClientRect();
+		const nextRect = next?.getBoundingClientRect();
+
+		this.#mode = (!prevRect || !nextRect) || (Math.abs(prevRect.top - nextRect.top) < 5) ? "h" : "v";
+	};
+
+	#startDrag = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+
+		const splitterRect = this.getBoundingClientRect();
+		const isHorizontal = this.#mode === "h";
+
+		const clickOffset = isHorizontal
+			? e.clientX - splitterRect.left
+			: e.clientY - splitterRect.top;
+
+		const dragBar = document.createElement("div");
+		dragBar.className = `nx-splitter-drag-bar-${this.#mode}`;
+
+		Object.assign(dragBar.style, {
+			position: "absolute",
+			zIndex: "999",
+			background: "#666",
+			opacity: "0.6",
+			pointerEvents: "none"
+		});
+
+		const root = this.getRootNode({ composed: true });
+		const parent = root instanceof ShadowRoot ? root.host : this.parentElement;
+
+		const prev = this.previousElementSibling;
+		const next = this.nextElementSibling;
+
+		if (!parent || !prev || !next) {
+			console.warn("Spliter's parent or siblings not found.");
+			return;
+		}
+
+		(parent.shadowRoot || parent).appendChild(dragBar);
+
+		const dragBarOffsetParent = dragBar.offsetParent;
+
+		if (!dragBarOffsetParent) {
+			console.error("dragBar's offsetParent could not be determined. Ensure parent or an ancestor has a position property (e.g., relative).");
+			dragBar.remove();
+			return;
+		}
+
+		const dragBarOffsetParentRect = dragBarOffsetParent.getBoundingClientRect();
+		const prevRect = prev.getBoundingClientRect();
+		const nextRect = next.getBoundingClientRect();
+
+		let initialPosInOffsetParent;
+		if (isHorizontal) {
+			initialPosInOffsetParent = e.clientX - dragBarOffsetParentRect.left;
+			dragBar.style.top = "0";
+			dragBar.style.left = `${initialPosInOffsetParent}px`;
+			dragBar.style.width = "1px";
+			dragBar.style.height = "100%";
+		} else {
+			initialPosInOffsetParent = e.clientY - dragBarOffsetParentRect.top;
+			dragBar.style.left = "0";
+			dragBar.style.top = `${initialPosInOffsetParent}px`;
+			dragBar.style.height = "1px";
+			dragBar.style.width = "100%";
+		}
+
+		const minLimit = isHorizontal
+			? prevRect.left - dragBarOffsetParentRect.left
+			: prevRect.top - dragBarOffsetParentRect.top;
+		const maxLimit = isHorizontal
+			? nextRect.right - dragBarOffsetParentRect.left
+			: nextRect.bottom - dragBarOffsetParentRect.top;
+
+
+		const onMove = moveEvent => {
+			const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
+			const currentPosInOffsetParent = isHorizontal
+				? clientPos - dragBarOffsetParentRect.left
+				: clientPos - dragBarOffsetParentRect.top;
+
+			const clampedPos = Math.max(minLimit, Math.min(currentPosInOffsetParent, maxLimit));
+
+			if (isHorizontal) {
+				dragBar.style.left = `${clampedPos}px`;
+			} else {
+				dragBar.style.top = `${clampedPos}px`;
+			}
+
+			console.log(clampedPos);
+		};
+
+		const onUp = (upEvent) => {
+			window.removeEventListener("mousemove", onMove);
+			window.removeEventListener("mouseup", onUp);
+			dragBar.remove();
+
+			const finalDragBarPosInOffsetParent = isHorizontal
+				? parseFloat(dragBar.style.left)
+				: parseFloat(dragBar.style.top);
+
+			// ⭐⭐ offsetParentTotalSize 변수를 여기서 정의합니다 ⭐⭐
+			const offsetParentTotalSize = isHorizontal
+				? dragBarOffsetParentRect.width
+				: dragBarOffsetParentRect.height;
+
+			const splitterThickness = isHorizontal ? splitterRect.width : splitterRect.height;
+
+			// prev의 시작점 (offsetParent 기준)
+			const prevStartPosInOffsetParent = isHorizontal
+				? prevRect.left - dragBarOffsetParentRect.left
+				: prevRect.top - dragBarOffsetParentRect.top;
+
+			// prev의 새로운 크기 (dragBar의 왼쪽 위치 - prev의 왼쪽 위치)
+			let finalPrevSize = finalDragBarPosInOffsetParent - prevStartPosInOffsetParent;
+
+			// next의 새로운 크기 (offsetParent의 전체 크기 - prev 크기 - 스플리터 두께)
+			// 이 방법이 전체 공간을 정확히 채우면서 오차를 마지막 패널에 몰아넣는 데 더 견고합니다.
+			const MIN_PANEL_SIZE_PX = 1;
+			finalPrevSize = Math.max(MIN_PANEL_SIZE_PX, finalPrevSize) - clickOffset;
+			let finalNextSize = Math.max(MIN_PANEL_SIZE_PX, offsetParentTotalSize - finalPrevSize - splitterThickness);
+
+			// flex 속성 저장 및 복원
+			const originalPrevFlex = prev.style.flex;
+			const originalNextFlex = next.style.flex;
+
+			// 드래그 중에는 flex를 "none"으로 설정하여 직접 크기 조절
+			prev.style.flex = "none";
+			next.style.flex = "none";
+
+			console.log(finalPrevSize, finalNextSize, offsetParentTotalSize);
+
+			if (isHorizontal) {
+				prev.style.width = `${finalPrevSize}px`;
+				next.style.width = `${finalNextSize}px`;
+			} else {
+				prev.style.height = `${finalPrevSize}px`;
+				next.style.height = `${finalNextSize}px`;
+			}
+
+			// 작업 완료 후 원래 flex 값으로 복원
+			prev.style.flex = originalPrevFlex;
+			next.style.flex = originalNextFlex;
+		};
+
+		window.addEventListener("mousemove", onMove);
+		window.addEventListener("mouseup", onUp);
+	};
+
+
+	#init = () => {
+		this.#detectMode(this);
+
+		this.classList.add(this.#mode);
+
+		const contents = this.innerHTML.trim();
+		const gripClass = `grip-${this.#mode}`;
+		const gripTmpl = (contents === "") ? `<div class="${gripClass}"></div>`: `<div class="${gripClass}"></div><div class="inner-container">${contents}</div><div class="${gripClass}"></div>`;
+
+		this.innerHTML = "";
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+          <style>
+             @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxSplitter.css";
+             ${ninegrid.getCustomPath(this,"nxSplitter.css")}
+          </style>
+          
+          ${gripTmpl}
+       `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+
+		this.shadowRoot.querySelectorAll(".grip-h,.grip-v").forEach(el => {
+			el.addEventListener("mousedown", e => this.#startDrag(e));
+		});
+
+		this.#prepareLayout();
+
+		window.addEventListener("resize", () => this.#prepareLayout());
+	};
+
+	#isLastSplitter = () => {
+		const parent = this.parentElement;
+		if (!parent) return false;
+
+		const allSplitters = [...parent.querySelectorAll("nx-splitter")];
+		return allSplitters.at(-1) === this;
+	};
+
+	#getSiblingSizeSum = () => {
+		const parent = this.parentElement;
+		if (!parent) return 0;
+
+		const isHorizontal = this.#mode === "h";
+
+		return Array.from(parent.children).reduce((sum, el) => {
+			const size = isHorizontal ? el.offsetWidth : el.offsetHeight;
+			return sum + size;
+		}, 0);
+	};
+
+
+	#prepareLayout = () => {
+
+		const isHorizontal = this.#mode === "h";
+		const prev = this.previousElementSibling;
+		const next = this.nextElementSibling;
+		const parent = this.parentElement;
+		if (!prev || !next || !parent) return;
+
+		const currentTotal = this.#getSiblingSizeSum();
+		const nextTotal = isHorizontal
+			? parent.getBoundingClientRect().width
+			: parent.getBoundingClientRect().height;
+
+		const prevSize = isHorizontal ? prev.offsetWidth : prev.offsetHeight;
+		const nextSize = isHorizontal ? next.offsetWidth : next.offsetHeight;
+
+		const newPrevSize = nextTotal * prevSize / currentTotal;
+		const newNextSize = nextTotal * nextSize / currentTotal;
+
+
+		if (isHorizontal) {
+			prev.style.width = `${newPrevSize}px`;
+
+			if (this.#isLastSplitter()) {
+				next.style.width = `${newNextSize}px`;
+			}
+		} else {
+			prev.style.height = `${newPrevSize}px`;
+
+			if (this.#isLastSplitter()) {
+				next.style.height = `${newNextSize}px`;
+			}
+		}
+	};
+
+}
+
+customElements.define("nx-splitter", nxSplitter);
+
+class nxForm extends HTMLElement {
+	#mode;
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+	}
+
+	connectedCallback() {
+		this.#init();
+	}
+
+	getData_BAK = () => {
+		const jsonData = {};
+
+		this.shadowRoot.querySelectorAll("[id]").forEach(el => {
+			if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
+				jsonData[el.id] = el.value;
+			} else {
+				jsonData[el.id] = el.textContent.trim();
+			}
+		});
+
+		return jsonData;
+	};
+
+	getData = () => {
+		const jsonData = {};
+
+		this.shadowRoot.querySelectorAll("input, textarea, select, [id], [name]").forEach(el => {
+			const key = el.id || el.name; // id가 있으면 우선, 없으면 name 사용
+			if (!key) return; // id도 name도 없으면 건너뛰기
+
+			const value = (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT")
+				? el.value
+				: el.textContent.trim();
+
+			// 중복 키를 대비한 배열 처리
+			if (jsonData[key]) {
+				if (!Array.isArray(jsonData[key])) {
+					jsonData[key] = [jsonData[key]];
+				}
+				jsonData[key].push(value);
+			} else {
+				jsonData[key] = value;
+			}
+		});
+
+		return jsonData;
+	};
+
+
+	#init = () => {
+
+		const contents = this.innerHTML.trim();
+
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxForm.css";
+				${ninegrid.getCustomPath(this,"nxForm.css")}
+			</style>
+			
+			${contents}
+		`;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+	};
+
+}
+
+customElements.define("nx-form", nxForm);
+
 class aiSettings extends HTMLElement
 {
 	constructor() {
@@ -121409,6 +121869,80 @@ class aiMyMessage extends HTMLElement
 	};
 }
 
+// aiProgressMessage 클래스 정의
+class aiProgressMessage extends HTMLElement {
+	#progressData = []; // 진행 상태 데이터를 저장할 배열
+	#progressElements = new Map(); // 각 진행 단계의 DOM 요소를 저장할 Map
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+		this.shadowRoot.innerHTML = `
+            <style>
+                @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ai.css";
+                ${ninegrid.getCustomPath(this, "ai.css")}
+            </style>
+            <div class="chat-message progress-message">
+                <ul class="progress-list"></ul>
+            </div>
+        `;
+	}
+
+	/**
+	 * 진행 상태 데이터를 초기화하고 화면에 표시합니다.
+	 * @param {Array<Object>} data - [{id: 'step1', message: '분석중입니다...', completedMessage: '분석이 완료되었습니다.'}, ...]
+	 */
+	initialize(data) {
+		this.#progressData = data.map(item => ({ ...item, status: 'pending' })); // 초기 상태는 'pending'
+		this.#renderProgress();
+	}
+
+	/**
+	 * 특정 단계의 진행 상태를 업데이트합니다.
+	 * @param {string} id - 업데이트할 단계의 고유 ID
+	 * @param {string} status - 'completed' 또는 'pending'
+	 */
+	updateProgress(id, status) {
+		const itemIndex = this.#progressData.findIndex(item => item.id === id);
+		if (itemIndex > -1) {
+			this.#progressData[itemIndex].status = status;
+			this.#updateProgressItem(this.#progressData[itemIndex]);
+		}
+	}
+
+	#renderProgress() {
+		const progressList = this.shadowRoot.querySelector(".progress-list");
+		progressList.innerHTML = ''; // 기존 목록 초기화
+		this.#progressElements.clear(); // 기존 요소 Map 초기화
+
+		this.#progressData.forEach((item, index) => {
+			const li = document.createElement("li");
+			li.setAttribute("data-id", item.id);
+			li.classList.add("progress-item", item.status);
+			li.innerHTML = `
+                <span class="icon"></span>
+                <span class="text">${item.message}</span>
+            `;
+			progressList.appendChild(li);
+			this.#progressElements.set(item.id, li); // DOM 요소 참조 저장
+		});
+	}
+
+	#updateProgressItem(item) {
+		const li = this.#progressElements.get(item.id);
+		if (li) {
+			li.classList.remove('pending', 'completed'); // 기존 클래스 제거
+			li.classList.add(item.status); // 새 상태 클래스 추가
+			li.querySelector(".text").textContent = item.status === 'completed' ? item.completedMessage : item.message;
+		}
+	}
+}
+
+
+
 class aiChat extends HTMLElement
 {
 	constructor() {
@@ -121479,11 +122013,47 @@ class aiChat extends HTMLElement
 			el.scrollIntoView({ behavior: "smooth", block: "end" });
 		}, 200);
 	};
+
+	/**
+	 * 챗 메시지를 추가합니다.
+	 * @param {string} sender - 메시지 발신자 ('me', 'ing', 'ai', 'progress')
+	 * @param {string} message - 메시지 내용 (progress 타입의 경우 사용되지 않음)
+	 * @param {Array<Object>} info - nine-grid 정보 (ai 타입에만 해당)
+	 * @param {Array<Object>} data - nine-grid 데이터 (ai 타입에만 해당)
+	 * @param {Array<string>|string} unique - nine-grid 고유 키 (ai 타입에만 해당)
+	 * @param {Array<Object>} progressData - aiProgressMessage의 초기 진행 데이터 (progress 타입에만 해당)
+	 * @returns {HTMLElement|null} 생성된 메시지 엘리먼트 (특히 aiProgressMessage의 경우 업데이트를 위해 반환)
+	 */
+	addProgress = (progressData = null) => { // progressData 파라미터 추가
+
+		const target = this.shadowRoot.querySelector(".chat-body");
+
+		this.shadowRoot.querySelectorAll("nx-ai-ing-message").forEach(el => {
+			el.remove();
+		});
+
+		let el = document.createElement("nx-ai-progress-message");
+		if (progressData) {
+			el.initialize(progressData); // progressData로 초기화
+		}
+		target.appendChild(el);
+
+		setTimeout(() => {
+			if (el) { // el이 null이 아닐 때만 scrollIntoView 호출
+				el.scrollIntoView({ behavior: "smooth", block: "end" });
+			}
+		}, 200);
+
+		return el; // 생성된 엘리먼트를 반환
+	};
 }
 
+
+
 customElements.define("nx-ai-message", aiMessage);
 customElements.define("nx-ai-ing-message", aiIngMessage);
 customElements.define("nx-ai-my-message", aiMyMessage);
+customElements.define("nx-ai-progress-message", aiProgressMessage);
 customElements.define("nx-ai-chat", aiChat);
 
 /**
@@ -201851,351 +202421,6 @@ class IdeAssi extends HTMLElement
 		//this.shadowRoot.querySelector('ide-diff-popup').remove();
 
 		this.shadowRoot.appendChild(document.createElement('ide-diff-popup'));
-
-		//setTimeout(() => {
-		let src1 = `
-import React, { useRef, useEffect } from "react" adfa;
-import { api, ai } from "ide-assi";
-import ninegrid from "ninegrid2";
-
-const DocManager = () => {
-  const tabRef = useRef(null);
-  const gridRef = useRef(null);
-
-  const selectList = async (params) => {
-    if (!gridRef.current) return;
-    gridRef.current.classList.add("loading");
-    api.post(\`/api/tmpl-a/doc-manager/selectList\`, params).then((res) => {
-      gridRef.current.data.source = res.list;
-    });
-  };
-
-  const handleNaturalLanguageSearch = async () => {
-    const searchTextElement = ninegrid.querySelector("#searchText", tabRef.current);
-    const searchText = searchTextElement ? searchTextElement.value : "";
-
-    if (!gridRef.current) return;
-    gridRef.current.classList.add("loading");
-
-    let params = {};
-    if (searchText) {
-      params = {
-        _whereClause: await ai.generateWhereCause(
-          "tmpla/DocManagerMapper.xml",
-          "selectList",
-          searchText,
-          import.meta.env.VITE_GEMINI_API_KEY
-        ),
-      };
-    }
-    selectList(params);
-  };
-
-  const handleClassicSearch = () => {
-    if (!gridRef.current) return;
-    gridRef.current.classList.add("loading");
-
-    const form2Element = ninegrid.querySelector(".form2", tabRef.current);
-    const params = form2Element ? form2Element.getData() : {};
-    selectList(params);
-  };
-
-  useEffect(() => {
-    selectList({});
-
-    const searchTextElement = ninegrid.querySelector("#searchText", tabRef.current);
-    const searchButton = ninegrid.querySelector(".search", tabRef.current);
-
-    const handleKeyDown = (e) => {
-      if (e.key === "Enter" && !e.isComposing) {
-        handleNaturalLanguageSearch();
-      }
-    };
-
-    const handleClick = () => {
-      handleClassicSearch();
-    };
-
-    if (searchTextElement) {
-      searchTextElement.addEventListener("keydown", handleKeyDown);
-    }
-    if (searchButton) {
-      searchButton.addEventListener("click", handleClick);
-    }
-
-    return () => {
-      if (searchTextElement) {
-        searchTextElement.removeEventListener("keydown", handleKeyDown);
-      }
-      if (searchButton) {
-        searchButton.removeEventListener("click", handleClick);
-      }
-    };
-  }, []);
-
-  return (
-    <div className="wrapper">
-      <nx-collapse target="nx-tab" className="search-collapse"></nx-collapse>
-      <div className="list-wrapper">
-        <nx-tab theme="theme-3" ref={tabRef}>
-          <nx-tab-page caption="자연어 검색">
-            <nx-form className="form1">
-              <input
-                type="text"
-                id="searchText"
-                name="searchText"
-                placeholder="자연어 검색어를 입력하세요 (ex: 작성자가 홍길동인 데이타를 찾아줘)"
-              />
-            </nx-form>
-          </nx-tab-page>
-          <nx-tab-page caption="클래식 검색">
-            <nx-form className="form2">
-              <label>문서명: <input type="text" name="docNm" /></label>
-              <label>매출액:
-                <input type="number" name="minAmt" placeholder="최소" /> ~
-                <input type="number" name="maxAmt" placeholder="최대" />
-              </label>
-            </nx-form>
-            <button className="search">검색</button>
-          </nx-tab-page>
-        </nx-tab>
-
-        <div className="grid-wrapper">
-          <nine-grid
-            ref={gridRef}
-            caption="문서관리"
-            select-type="row"
-            show-title-bar="true"
-            show-menu-icon="true"
-            show-status-bar="true"
-            enable-fixed-col="true"
-            row-resizable="false"
-            col-movable="true"
-          >
-            <table>
-              <colgroup>
-                <col width="50" fixed="left" background-color="gray" />
-                <col width="100" />
-                <col width="100" />
-                <col width="200" />
-                <col width="120" />
-                <col width="100" />
-                <col width="150" />
-                <col width="150" />
-              </colgroup>
-              <thead>
-                <tr>
-                  <th>No.</th>
-                  <th>최종수정자</th>
-                  <th>문서ID</th>
-                  <th>문서명</th>
-                  <th>매출액</th>
-                  <th>최초등록자</th>
-                  <th>최초등록일</th>
-                  <th>최종수정일</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <th><ng-row-indicator /></th>
-                  <td data-bind="updateUser" text-align="center"></td>
-                  <td data-bind="docId" text-align="center"></td>
-                  <td data-bind="docNm" text-align="left"></td>
-                  <td
-                    data-bind="amt"
-                    data-expr="data.amt.toLocaleString()"
-                    text-align="right"
-                    show-icon="true"
-                    icon-type="sphere"
-                    icon-color="data.amt >= 2000 ? 'red' : 'gray'"
-                  ></td>
-                  <td data-bind="insertUser" text-align="center"></td>
-                  <td data-bind="insertDt" text-align="center"></td>
-                  <td data-bind="updateDt" text-align="center"></td>
-                </tr>
-              </tbody>
-            </table>
-          </nine-grid>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default DocManager;
-		`;
-
-		let src2 = `
-import React, { useRef, useEffect } from "react";
-import { api, ai } from "ide-assi";
-import ninegrid from "ninegrid2";
-
-const DocManager = () => {
-  const tabRef = useRef(null);
-  const gridRef = useRef(null);
-
-  const selectList = async (params) => {
-    if (!gridRef.current) return;
-    gridRef.current.classList.add("loading");
-    api.post(\`/api/tmpl-a/doc-manager/selectList\`, params).then((res) => {
-      gridRef.current.data.source = res.list;
-    });
-  };
-
-  const handleNaturalLanguageSearch = async () => {
-    const searchTextElement = ninegrid.querySelector("#searchText", tabRef.current);
-    const searchText = searchTextElement ? searchTextElement.value : "";
-
-    if (!gridRef.current) return;
-    gridRef.current.classList.add("loading");
-
-    let params = {};
-    if (searchText) {
-      params = {
-        _whereClause: await ai.generateWhereCause(
-          "tmpla/DocManagerMapper.xml",
-          "selectList",
-          searchText,
-          import.meta.env.VITE_GEMINI_API_KEY
-        ),
-      };
-    }
-    selectList(params);
-  };
-
-  const handleClassicSearch = () => {
-    if (!gridRef.current) return;
-    gridRef.current.classList.add("loading");
-
-    const form2Element = ninegrid.querySelector(".form2", tabRef.current);
-    const params = form2Element ? form2Element.getData() : {};
-    selectList(params);
-  };
-
-  useEffect(() => {
-    selectList({});
-
-    const searchTextElement = ninegrid.querySelector("#searchText", tabRef.current);
-    const searchButton = ninegrid.querySelector(".search", tabRef.current);
-
-    const handleKeyDown = (e) => {
-      if (e.key === "Enter" && !e.isComposing) {
-        handleNaturalLanguageSearch();
-      }
-    };
-
-    const handleClick = () => {
-      handleClassicSearch();
-    };
-
-    if (searchTextElement) {
-      searchTextElement.addEventListener("keydown", handleKeyDown);
-    }
-    if (searchButton) {
-      searchButton.addEventListener("click", handleClick);
-    }
-
-    return () => {
-      if (searchTextElement) {
-        searchTextElement.removeEventListener("keydown", handleKeyDown);
-      }
-      if (searchButton) {
-        searchButton.removeEventListener("click", handleClick);
-      }
-    };
-  }, []);
-
-  return (
-    <div className="wrapper">
-      <nx-collapse target="nx-tab" className="search-collapse"></nx-collapse>
-      <div className="list-wrapper">
-        <nx-tab theme="theme-3" ref={tabRef}>
-          <nx-tab-page caption="자연어 검색">
-            <nx-form className="form1">
-              <input
-                type="text"
-                id="searchText"
-                name="searchText"
-                placeholder="자연어 검색어를 입력하세요 (ex: 작성자가 홍길동인 데이타를 찾아줘)"
-              />
-            </nx-form>
-          </nx-tab-page>
-          <nx-tab-page caption="클래식 검색">
-            <nx-form className="form2">
-              <label>문서명: <input type="text" name="docNm" /></label>
-              <label>매출액:
-                <input type="number" name="minAmt" placeholder="최소" /> ~
-                <input type="number" name="maxAmt" placeholder="최대" />
-              </label>
-            </nx-form>
-            <button className="search">검색</button>
-          </nx-tab-page>
-        </nx-tab>
-
-        <div className="grid-wrapper">
-          <nine-grid
-            ref={gridRef}
-            caption="매출 문서 관리"
-            select-type="row"
-            show-title-bar="true"
-            show-menu-icon="true"
-            show-status-bar="true"
-            enable-fixed-col="true"
-            row-resizable="false"
-            col-movable="true"
-          >
-            <table>
-              <colgroup>
-                <col width="50" fixed="left" background-color="gray" />
-                <col width="100" />
-                <col width="120" />
-                <col width="100" />
-                <col width="200" />
-                <col width="100" />
-                <col width="150" />
-                <col width="150" />
-              </colgroup>
-              <thead>
-                <tr>
-                  <th>No.</th>
-                  <th>문서ID</th>
-                  <th>매출액</th>
-                  <th>최종수정자</th>
-                  <th>문서명</th>
-                  <th>최초등록자</th>
-                  <th>최초등록일</th>
-                  <th>최종수정일</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <th><ng-row-indicator /></th>
-                  <td data-bind="docId" text-align="center"></td>
-                  <td
-                    data-bind="amt"
-                    data-expr="data.amt.toLocaleString()"
-                    text-align="right"
-                    show-icon="true"
-                    icon-type="sphere"
-                    icon-color="data.amt >= 2000 ? 'red' : 'gray'"
-                  ></td>
-                  <td data-bind="updateUser" text-align="center"></td>
-                  <td data-bind="docNm" text-align="left"></td>
-                  <td data-bind="insertUser" text-align="center"></td>
-                  <td data-bind="insertDt" text-align="center"></td>
-                  <td data-bind="updateDt" text-align="center"></td>
-                </tr>
-              </tbody>
-            </table>
-          </nine-grid>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default DocManager1;
-		`;
 /**
 		src1 = `
 <tr>
@@ -202222,9 +202447,48 @@ export default DocManager1;
 </tr>
 `; */
 
-		this.shadowRoot.querySelector("ide-diff-popup").popup(src1, src2);
+		//this.shadowRoot.querySelector("ide-diff-popup").popup(src1, src2);
+
+		//return;
+
+
+// 1. 초기 진행 상태 메시지 추가
+		const initialProgressData = [
+			{ id: 'analysis', message: '1. 분석중입니다...', completedMessage: '1-1. 분석이 완료되었습니다.' },
+			{ id: 'design', message: '2. 설계중...', completedMessage: '2-1. 설계가 완료되었습니다.' },
+			{ id: 'development', message: '3. 개발중...', completedMessage: '3-1. 개발이 완료되었습니다.' }
+		];
+
+// aiChat.add 호출 시, progressData를 마지막 인자로 전달하고 생성된 엘리먼트를 받습니다.
+		const progressMessageInstance = elAiChat.addProgress(initialProgressData);
+
+// 2. 시간이 지난 후, 특정 단계의 완료를 알림
+// 예를 들어, 3초 후에 분석 완료
+		setTimeout(() => {
+			if (progressMessageInstance) {
+				progressMessageInstance.updateProgress('analysis', 'completed');
+				console.log("분석 완료 메시지 업데이트");
+			}
+		}, 3000);
+
+// 예를 들어, 6초 후에 설계 완료
+		setTimeout(() => {
+			if (progressMessageInstance) {
+				progressMessageInstance.updateProgress('design', 'completed');
+				console.log("설계 완료 메시지 업데이트");
+			}
+		}, 6000);
+
+// 모든 단계가 완료된 후, 일반 AI 메시지 추가 (선택 사항)
+		setTimeout(() => {
+			elAiChat.add("ai", "모든 작업이 성공적으로 완료되었습니다!", [], []);
+		}, 9000);
+
+
 
 		return;
+
+		const elAiChat = this.shadowRoot.querySelector("nx-ai-chat");
 	}
 
 	#toggleCollapseHandler = () => {