ide-assi 0.647.0 → 0.648.0

package/dist/bundle.esm.js

@@ -11155,6 +11155,29 @@ class ninegrid {
 			}, intervalTime);
 		});
 	};
+
+	static delayQuerySelector = (selector, root = document, maxAttempts = 3, intervalTime = 100) => {
+		return new Promise((resolve, reject) => {
+			let attempts = 0;
+			const interval = setInterval(() => {
+				const el = ninegrid.querySelector(selector, root);
+
+				if (el) {
+					//console.log("InnerHTML 확인됨, init() 실행 가능!");
+					clearInterval(interval);
+					resolve(el);
+				} else {
+					attempts++;
+					//console.log(`InnerHTML이 비어 있음, ${attempts}/${maxAttempts}번 재시도`);
+
+					if (attempts >= maxAttempts) {
+						clearInterval(interval);
+						reject("Element를 찾지 못했습니다.");
+					}
+				}
+			}, intervalTime);
+		});
+	};
 	
 	static copyProperty = (target, source, properties) => {
 		
@@ -11266,6 +11289,20 @@ class ninegrid {
 		return formatedDate;
 	};
 
+	static goto = (selector, params) => {
+
+		const el = document.querySelector(selector);
+		if (!el) return;
+
+		document.querySelectorAll(".list-wrapper.active,[class*='detail-wrapper-'].active").forEach((el) => {
+			el.classList.remove("active");
+		});
+
+		el.classList.add("active");
+
+		return el;
+	};
+
 
 	static context;
 	static measureTextSize = (_text, _font) => {
@@ -11510,6 +11547,14 @@ class ninegrid {
 		return null; // 없으면 null 반환
 	};
 
+	static setOptions = (k,o) => {
+		for (const prop in o) {
+			if (ninegrid.options[k][prop]) {
+				ninegrid.options[k][prop] = o[prop];
+			}
+		}
+	};
+
 	static confirm(message, title, options) {
 		return nxConfirmPopup.confirm(message, title, options);
 	};
@@ -11518,6 +11563,62 @@ class ninegrid {
 		return nxAlertPopup.alert(message, title, options);
 	};
 
+	static loading = {
+		show: () => {
+			let overlay = document.getElementById("global-loading-overlay");
+			if (!overlay) {
+					overlay = document.createElement("div");
+					overlay.id = "global-loading-overlay";
+					overlay.className = "loading-overlay";
+
+					overlay.style.position = "fixed";
+					overlay.style.inset = "0";
+					overlay.style.zIndex = "9999";
+					overlay.style.background = "rgba(0, 0, 0, 0.4)";
+					overlay.style.color = "white";
+					overlay.style.display = "flex";
+					overlay.style.justifyContent = "center";
+					overlay.style.alignItems = "center";
+					overlay.style.fontSize = "20px";
+					overlay.style.pointerEvents = "all";
+					overlay.style.backdropFilter = "blur(2px)";
+					overlay.innerHTML = `
+			<div style="text-align: center;">
+			  <div class="loading-spinner"></div>
+			</div>
+		  `;
+
+			document.body.appendChild(overlay);
+
+			// CSS 스피너 스타일 삽입
+			const style = document.createElement("style");
+			style.innerHTML = `
+				.loading-spinner {
+				  width: 48px;
+				  height: 48px;
+				  border: 5px solid rgba(255, 255, 255, 0.3);
+				  border-top-color: white;
+				  border-radius: 50%;
+				  animation: spin 1s linear infinite;
+				}
+		
+				@keyframes spin {
+				  to { transform: rotate(360deg); }
+				}
+			  `;
+
+				document.head.appendChild(style);
+			}
+
+			overlay.style.display = "flex";
+		},
+		hide: () => {
+			const overlay = document.getElementById("global-loading-overlay");
+			if (overlay) overlay.style.display = "none";
+		},
+	};
+
+
 	static i18n = {
 		convertArrayToJSON : (arr) => {
 			let result = {};
@@ -118010,6 +118111,7 @@ customElements.define("ng-filter-panel", ngFilterPanel);
 
 class NineGridContainer extends HTMLElement
 {
+	#created = false;
 	#colResizer;
 	#colMover;
 	#rowMover;
@@ -118490,7 +118592,9 @@ class NineGridContainer extends HTMLElement
 	};
 	
 	#initialize = () => {
-		
+
+		if (this.#created) return;
+
 		this.originFormat = this.outerHTML;
 		
 		this.uuid = ninegrid.randomUUID();	//crypto.randomUUID();
@@ -118809,6 +118913,7 @@ class NineGridContainer extends HTMLElement
 			this.addEventListener(handler.type, handler.listener);
 		} */
 
+		this.#created = true;
 	};
 	
 	#initOption = () => {
@@ -119309,18 +119414,18 @@ class nxDialog extends HTMLElement
 {
 	//#owner;
 	#shift;
-	
+
 	constructor () {
 		super();
 	}
-	
+
 	connectedCallback() {
 
 		const v = this.innerHTML;
 		const cssFile = this.getAttribute("css-file");
 		const customFile1 = cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/${cssFile}";`: "";
 		const customFile2 = cssFile ? ninegrid.getCustomPath(this, cssFile) : "";
-		
+
 		//console.log(ninegrid.getCustomPath(this,"nxDialog.css"));
 
 		this.innerHTML = `
@@ -119360,18 +119465,18 @@ class nxDialog extends HTMLElement
 				</div>
 			</dialog>
 		`;
-		
+
 		//this.#owner = this.getRootNode().host.closest("nine-grid");
-		
+
 		$(".title", this).html("Details");
-		
+
 		this.#init();
 	};
-	
+
 	showModal = () => {
 		this.querySelector('dialog').showModal();
 	};
-	
+
 	close = () => {
 		$(".head", this)	.off('mousedown',	this.#onMouseDown);
 		$(".head", this)	.off('touchstart',	this.#onTouchStart);
@@ -119379,29 +119484,39 @@ class nxDialog extends HTMLElement
 		$(document)			.off('touchend',	this.#onTouchEnd);
 		$(document)			.off('mousemove',	this.#onMouseMove);
 		$(document)			.off("touchmove",	this.#onTouchMove);
-		
+
 		this.querySelector('dialog').close();
 	};
-	
+
 	#init = () => {
-		$(".close,.close2", this).on("click", e => {
+		/**
+		 $(".close,.close2", this).on("click", e => {
+		 ninegrid.j.querySelectorAll('dialog', this).addClass("out");
+		 setTimeout(() => { this.close(); }, 300);
+		 }); */
+
+		$(".close", this).on("click", e => {
 			ninegrid.j.querySelectorAll('dialog', this).addClass("out");
 			setTimeout(() => { this.close(); }, 300);
 		});
-		
+
+		$(".close2", this).on("click", e => {
+			this.close();
+		});
+
 		$(".head", this)	.on('mousedown',	this.#onMouseDown);
 		$(".head", this)	.on('touchstart',	this.#onTouchStart);
 		$(document)			.on('mouseup',		this.#onMouseUp);
 		$(document)			.on('touchend',		this.#onTouchEnd);
 	};
-	
+
 
 	#onMouseDown = e => {
 		if (e.target.closest("buttons")) return;
 		if (e.buttons != 1 || e.altKey || e.ctrlKey || e.shiftkey) return;
 
 		var rect = this.querySelector('dialog').getBoundingClientRect();
-		
+
 		this.#shift = {
 			x : e.clientX - rect.x,
 			y : e.clientY - rect.y,
@@ -119409,33 +119524,33 @@ class nxDialog extends HTMLElement
 
 		$(document).on('mousemove', this.#onMouseMove);
 	};
-	
-	
+
+
 	#onMouseMove = e => {
 		$(this.querySelector('dialog')).offset( { left : e.pageX - this.#shift.x, top : e.pageY - this.#shift.y });
 	};
-	
+
 	#onMouseUp = e => {
 		$(document).off('mousemove', this.#onMouseMove);
 	};
-	
+
 	#onTouchStart = e => {
 		if (e.target.closest("buttons")) return;
-		
+
 		var rect = this.querySelector('dialog').getBoundingClientRect();
-		
+
 		this.#shift = {
 			x : e.changedTouches[0].pageX - rect.x,
 			y : e.changedTouches[0].pageY - rect.y,
 		};
-		
+
 		$(document).on("touchmove", this.#onTouchMove);
 	};
-	
+
 	#onTouchMove = e => {
 		$(this.querySelector('dialog')).offset( { left : e.changedTouches[0].pageX - this.#shift.x, top : e.changedTouches[0].pageY - this.#shift.y });
 	};
-	
+
 	#onTouchEnd = e => {
 		$(document).off('touchmove', this.#onTouchMove);
 	};
@@ -120405,20 +120520,40 @@ class nxSideMenuBody extends HTMLElement
 
 class nxSideMenuItem extends HTMLElement
 {
+	#caption;
 	#owner;
 	#type;
 	
 	constructor() {
+
 		super();
 		this.attachShadow({ mode: 'open' });
-		
+
+		this.test = this.innerText.trim();
 		this.uuid = ninegrid.randomUUID();
 	}
 
 	connectedCallback() {
-		ninegrid.waitForInnerHTML(this)
-			.then(() => this.#init())
-			.catch(error => console.error(error));
+		this.#caption = this.getAttribute("title");//this.innerText.trim();
+
+		//requestAnimationFrame(() => {
+
+
+			//console.log("nxSideMenuItem", this.#caption);
+			//this.data.caption = this.#caption;
+			//this.setAttribute("data-caption", this.innerText.trim());
+			//this.#init();
+
+
+			ninegrid.waitForInnerHTML(this)
+				.then(() => this.#init())
+				.catch(error => console.error(error));
+		//});
+
+	}
+
+	get caption() {
+		return this.#caption;
 	}
 	
 	#init = () => {
@@ -120506,6 +120641,8 @@ class nxSideMenuItem extends HTMLElement
 		
 		const iconClass = this.getAttribute('icon-class');
 		const contents	= this.innerHTML.trim();
+
+
 		
 		this.innerHTML = "";
 		
@@ -120799,73 +120936,6 @@ 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;
@@ -121245,11 +121315,21 @@ class nxSplitter extends HTMLElement {
 	#detectMode = (el) => {
 		const prev = el.previousElementSibling;
 		const next = el.nextElementSibling;
+		if (!prev || !next) {
+			this.#mode = this.classList.contains('h') ? "h" : "v";
+			return;
+		}
 
-		const prevRect = prev?.getBoundingClientRect();
-		const nextRect = next?.getBoundingClientRect();
+		const prevRect = prev.getBoundingClientRect();
+		const nextRect = next.getBoundingClientRect();
 
-		this.#mode = (!prevRect || !nextRect) || (Math.abs(prevRect.top - nextRect.top) < 5) ? "h" : "v";
+		if (this.classList.contains('h')) {
+			this.#mode = "h";
+		} else if (this.classList.contains('v')) {
+			this.#mode = "v";
+		} else {
+			this.#mode = (Math.abs(prevRect.top - nextRect.top) < 5) ? "h" : "v";
+		}
 	};
 
 	#startDrag = (e) => {
@@ -121259,6 +121339,7 @@ class nxSplitter extends HTMLElement {
 		const splitterRect = this.getBoundingClientRect();
 		const isHorizontal = this.#mode === "h";
 
+		// 마우스 포인터와 스플리터 시작점 사이의 거리
 		const clickOffset = isHorizontal
 			? e.clientX - splitterRect.left
 			: e.clientY - splitterRect.top;
@@ -121276,7 +121357,6 @@ class nxSplitter extends HTMLElement {
 
 		const root = this.getRootNode({ composed: true });
 		const parent = root instanceof ShadowRoot ? root.host : this.parentElement;
-
 		const prev = this.previousElementSibling;
 		const next = this.nextElementSibling;
 
@@ -121286,30 +121366,24 @@ class nxSplitter extends HTMLElement {
 		}
 
 		(parent.shadowRoot || parent).appendChild(dragBar);
+		const dragBarOffsetParentRect = dragBar.offsetParent.getBoundingClientRect();
 
-		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;
+		// 드래그 바의 초기 위치와 크기 설정
+		const initialSplitterPosInParent = (isHorizontal
+			? splitterRect.left - dragBarOffsetParentRect.left
+			: splitterRect.top - dragBarOffsetParentRect.top) + clickOffset;
+
 		if (isHorizontal) {
-			initialPosInOffsetParent = e.clientX - dragBarOffsetParentRect.left;
 			dragBar.style.top = "0";
-			dragBar.style.left = `${initialPosInOffsetParent}px`;
+			dragBar.style.left = `${initialSplitterPosInParent}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.top = `${initialSplitterPosInParent}px`;
 			dragBar.style.height = "1px";
 			dragBar.style.width = "100%";
 		}
@@ -121318,104 +121392,111 @@ class nxSplitter extends HTMLElement {
 			? prevRect.left - dragBarOffsetParentRect.left
 			: prevRect.top - dragBarOffsetParentRect.top;
 		const maxLimit = isHorizontal
-			? nextRect.right - dragBarOffsetParentRect.left
-			: nextRect.bottom - dragBarOffsetParentRect.top;
-
+			? nextRect.right - dragBarOffsetParentRect.left - splitterRect.width
+			: nextRect.bottom - dragBarOffsetParentRect.top - splitterRect.height;
 
 		const onMove = moveEvent => {
 			const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
-			const currentPosInOffsetParent = isHorizontal
+			const currentPosInParent = isHorizontal
 				? clientPos - dragBarOffsetParentRect.left
 				: clientPos - dragBarOffsetParentRect.top;
 
-			const clampedPos = Math.max(minLimit, Math.min(currentPosInOffsetParent, maxLimit));
+			const clampedPos = Math.max(minLimit, Math.min(currentPosInParent, maxLimit));
 
 			if (isHorizontal) {
 				dragBar.style.left = `${clampedPos}px`;
 			} else {
 				dragBar.style.top = `${clampedPos}px`;
 			}
-
-			console.log(clampedPos);
 		};
 
-		const onUp = (upEvent) => {
+		const onUp = () => {
 			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 allChildren = Array.from(parent.children);
+			const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
 
-			const splitterThickness = isHorizontal ? splitterRect.width : splitterRect.height;
+			// ⭐⭐ gap 크기 계산 ⭐⭐
+			const style = window.getComputedStyle(parent);
+			const gapValue = isHorizontal ? style.getPropertyValue('column-gap') : style.getPropertyValue('row-gap');
+			const gapSize = parseFloat(gapValue) || 0;
+			const gapCount = allChildren.length > 1 ? allChildren.length - 1 : 0;
+			const totalGapSize = gapCount * gapSize;
 
-			// prev의 시작점 (offsetParent 기준)
-			const prevStartPosInOffsetParent = isHorizontal
-				? prevRect.left - dragBarOffsetParentRect.left
-				: prevRect.top - dragBarOffsetParentRect.top;
+			const finalDragBarPos = isHorizontal ? parseFloat(dragBar.style.left) : parseFloat(dragBar.style.top);
+			const dragOffset = finalDragBarPos - initialSplitterPosInParent;
 
-			// prev의 새로운 크기 (dragBar의 왼쪽 위치 - prev의 왼쪽 위치)
-			let finalPrevSize = finalDragBarPosInOffsetParent - prevStartPosInOffsetParent;
+			const prevSize = isHorizontal ? prev.getBoundingClientRect().width : prev.getBoundingClientRect().height;
+			const nextSize = isHorizontal ? next.getBoundingClientRect().width : next.getBoundingClientRect().height;
 
-			// 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);
+			let newPrevSize = prevSize + dragOffset;
+			let newNextSize = nextSize - dragOffset;
 
-			// flex 속성 저장 및 복원
-			const originalPrevFlex = prev.style.flex;
-			const originalNextFlex = next.style.flex;
+			// 패널 크기가 음수가 되지 않도록 제한하고, 다른 패널에 차이를 보정
+			if (newPrevSize < 0) {
+				newNextSize += newPrevSize;
+				newPrevSize = 0;
+			}
+			if (newNextSize < 0) {
+				newPrevSize += newNextSize;
+				newNextSize = 0;
+			}
 
-			// 드래그 중에는 flex를 "none"으로 설정하여 직접 크기 조절
-			prev.style.flex = "none";
-			next.style.flex = "none";
+			const initialSizes = allPanels.map(panel => isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height);
 
-			console.log(finalPrevSize, finalNextSize, offsetParentTotalSize);
+			const totalSplitterSize = allChildren.reduce((sum, child) => {
+				if (child.tagName.toLowerCase() === 'nx-splitter') {
+					return sum + (isHorizontal ? child.getBoundingClientRect().width : child.getBoundingClientRect().height);
+				}
+				return sum;
+			}, 0);
+
+			const totalContainerSize = (isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height);
+			const totalFlexSpace = totalContainerSize - totalSplitterSize - totalGapSize;
+
+			let flexSum = 0;
+			allPanels.forEach((panel, index) => {
+				let newSize;
+				if (panel === prev) {
+					newSize = newPrevSize;
+				} else if (panel === next) {
+					newSize = newNextSize;
+				} else {
+					newSize = initialSizes[index];
+				}
 
-			if (isHorizontal) {
-				prev.style.width = `${finalPrevSize}px`;
-				next.style.width = `${finalNextSize}px`;
-			} else {
-				prev.style.height = `${finalPrevSize}px`;
-				next.style.height = `${finalNextSize}px`;
-			}
+				const newFlexBasis = newSize / totalFlexSpace;
+				panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
+				flexSum += newFlexBasis;
+			});
 
-			// 작업 완료 후 원래 flex 값으로 복원
-			prev.style.flex = originalPrevFlex;
-			next.style.flex = originalNextFlex;
+			console.log(`dragOffset: ${dragOffset}`);
+			console.log(`Calculated FlexSum: ${flexSum}`);
 		};
 
 		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>`;
+		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}
-       `;
+           <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));
 
@@ -121428,62 +121509,26 @@ class nxSplitter extends HTMLElement {
 		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 allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
+		if (allPanels.length < 2) return;
 
-		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`;
+		const parentRect = parent.getBoundingClientRect();
+		const totalContentSize = allPanels.reduce((sum, el) => {
+			const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
+			return sum + size;
+		}, 0);
+		const totalParentSize = isHorizontal ? parentRect.width : parentRect.height;
 
-			if (this.#isLastSplitter()) {
-				next.style.height = `${newNextSize}px`;
-			}
-		}
+		allPanels.forEach(panel => {
+			const size = isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height;
+			const newSize = totalParentSize * (size / totalContentSize);
+			const flexGrow = newSize / totalParentSize;
+			panel.style.flex = `${flexGrow} ${flexGrow} 0`;
+		});
 	};
-
 }
 
 customElements.define("nx-splitter", nxSplitter);
@@ -121562,6 +121607,640 @@ class nxForm extends HTMLElement {
 
 customElements.define("nx-form", nxForm);
 
+class nxTitle extends HTMLElement {
+
+	#breadcrumbPath = [];		// Breadcrumb 경로를 저장할 내부 상태 초기화
+	#dynamicPath = []; // 동적으로 추가할 빵 부스러기 경로 (상세 페이지 등)
+
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+	}
+
+	connectedCallback() {
+		this.#init();
+	}
+
+	// 컴포넌트가 DOM에서 제거될 때 이벤트 리스너를 정리
+	disconnectedCallback() {
+		document.removeEventListener('DOMContentLoaded', this.#init);
+	}
+
+	setDynamicPath(pathArray) {
+		this.#dynamicPath = pathArray;
+		this.#generateBreadcrumb(); // 빵 부스러기 재생성 및 렌더링
+		this.#renderer();
+	}
+
+	#init = () => {
+		/**
+		console.log("111");
+		const activeMenuItem = ninegrid.delayQuerySelector('nx-side-menu-item.active');
+		console.log(activeMenuItem);
+
+		this.#generateBreadcrumb(); // 빵 부스러기 데이터 생성 및 최종 렌더링 트리거
+		this.#renderer(); // 초기 렌더링 (빵 부스러기 데이터는 아직 없음)
+		*/
+		ninegrid.delayQuerySelector('nx-side-menu-item.active')
+			.then((el) => {
+				this.#generateBreadcrumb(el); // 빵 부스러기 데이터 생성 및 최종 렌더링 트리거
+				this.#renderer(); // 초기 렌더링 (빵 부스러기 데이터는 아직 없음)
+			});
+	};
+
+	// Breadcrumb 경로를 구성하는 비공개 메서드
+	#generateBreadcrumb = (activeMenuItem) => {
+		this.#breadcrumbPath = [];
+
+
+		// 'active' 클래스를 가진 가장 하위 nx-side-menu-item 찾기
+		//const activeMenuItem = ninegrid.querySelector('nx-side-menu-item.active');
+		//console.log(activeMenuItem);
+
+		if (activeMenuItem) {
+
+			// 1. 현재 활성화된 메뉴 항목의 캡션을 추가 (예: '심의자료')
+			const currentActiveCaption = activeMenuItem.caption;//activeMenuItem.caption;
+
+			if (currentActiveCaption) {
+				this.#breadcrumbPath.unshift({
+					path: activeMenuItem.getAttribute("href"),
+					caption: currentActiveCaption,
+				});
+			}
+
+			// 2. 현재 activeMenuItem의 이전 형제들을 탐색하여 'group'이 아닌 상위 메뉴(예: '심의자료')를 찾고,
+			//    그 이전에 있는 'group' 메뉴(예: '자료관리')를 찾습니다.
+			let currentElement = activeMenuItem;
+			let foundGroupParent = false;    // '자료관리' 그룹을 찾았는지 여부
+
+			// activeMenuItem부터 이전 형제들을 역으로 탐색
+			while (currentElement) {
+				// 현재 activeMenuItem이 'group' 속성이 없는 일반 메뉴일 경우,
+				// 바로 그 자체가 두 번째 레벨 메뉴(예: '심의자료')의 역할을 합니다.
+				// 이미 activeMenuItem의 캡션은 추가되었으므로 여기서는 건너뜁니다.
+
+				// 이전 형제 탐색
+				currentElement = currentElement.previousElementSibling;
+
+				if (currentElement && currentElement.tagName === 'NX-SIDE-MENU-ITEM') {
+					const caption = currentElement.caption;//.getAttribute('caption');
+
+					// 'group' 속성을 가진 메뉴 항목 찾기 (예: '자료관리')
+					if (currentElement.getAttribute('type') === "group") {
+						if (caption && !foundGroupParent) { // 이미 찾지 않은 경우에만 추가
+
+							this.#breadcrumbPath.unshift({
+								path: currentElement.getAttribute("href"),
+								caption: caption,
+							});
+							foundGroupParent = true;
+						}
+						// 그룹을 찾으면 탐색 중단 (가장 가까운 상위 그룹만 필요)
+						break;
+					}
+				}
+			}
+
+			// tempPath의 내용을 Home 다음으로 삽입
+			// activeMenuItem이 '심의자료' 역할을 하고, 그 이전에 '자료관리' 그룹이 있다면
+			// tempPath: ['자료관리', '심의자료']
+
+		}
+
+		// 마지막으로 현재 페이지의 구체적인 제목 추가
+		// 현재 nx-title의 캡션을 현재 페이지 캡션으로 사용
+		if (!this.closest(".list-wrapper")) {
+			this.#breadcrumbPath.push({
+				path: "",
+				caption: this.getAttribute("caption") || "Current Page",
+			});
+		}
+
+		this.#breadcrumbPath.unshift({
+			path: "/",
+			caption: "Home",
+		});
+
+		//console.log(this.#dynamicPath)
+
+		// 2. 동적으로 추가된 경로 (상세 페이지)
+		// #dynamicPath 배열의 내용을 병합
+		this.#breadcrumbPath = this.#breadcrumbPath.concat(this.#dynamicPath);
+
+//console.log(this.#breadcrumbPath);
+		//this.#breadcrumbPath = path;
+		//this.#renderer();
+	};
+
+	#renderer = () => {
+		const el = ninegrid.querySelector('nx-side-menu-item.active');
+		//console.log(el);
+
+		const caption = el ? el.caption : "No Caption";
+
+		// 내부 HTML (Light DOM)은 이 컴포넌트의 자식으로 넘어오는 콘텐츠이므로,
+		// Breadcrumb에서는 사용하지 않는다면 제거하는 것이 맞습니다.
+		// 여기서는 이전에 contents 변수에 저장했지만 사용하지 않았으므로, 제거 로직을 유지합니다.
+		this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		// Shadow DOM 초기화 (새로운 콘텐츠를 위해)
+		this.shadowRoot.innerHTML = "";
+
+
+
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTitle.css";
+				${ninegrid.getCustomPath(this,"nxTitle.css")}
+			</style>
+            
+            <div class="wrapper">
+                <div class="title-wrapper">
+                	<div class="bar1"></div>
+                	<div class="bar2"></div>
+                	<div class="bar3"></div>
+                    <i class="title-icon"></i> 
+                    <span class="title-text">${caption}</span>
+                    <div class="bar7"></div>
+                	<div class="bar8"></div>
+                	<div class="bar9"></div>
+                </div>
+                <div class="breadcrumb-container">
+                    ${this.#breadcrumbPath.map((item, index) => {
+						
+						const isCurrent = index === this.#breadcrumbPath.length - 1;
+						// static 메서드를 직접 호출하도록 수정
+						const linkTag = item.path && !isCurrent
+							? `<a href="javascript:void(0);"
+											class="breadcrumb-item breadcrumb-link"
+											data-path="${item.path}"
+											>${item.caption}</a>`
+							: `<span class="breadcrumb-item ${isCurrent ? 'breadcrumb-current' : ''}">${item.caption}</span>`;
+			
+						const separator = index < this.#breadcrumbPath.length - 1
+							? `<span class="breadcrumb-separator"> &gt; </span>`
+							: '';
+			
+						return `${linkTag}${separator}`;
+					}).join('')}
+                </div>
+            </div>
+        `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+
+		this.shadowRoot.querySelectorAll('.breadcrumb-link').forEach(link => {
+			link.addEventListener('click', this.#menuClickHandler);
+		});
+	}
+
+	#menuClickHandler = (e) => {
+		console.log(e);
+		const path = e.target.dataset.path;
+		if (path) {
+			window.location.href = path;
+		}
+	}
+}
+
+customElements.define("nx-title", nxTitle);
+
+class nxDiv extends HTMLElement
+{
+	originContents;
+	#isInitialized = false;
+
+	constructor () {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+	
+	connectedCallback() {
+		if (!this.#isInitialized) {
+			this.#init();
+			this.#isInitialized = true; // 3. 초기화 후 플래그를 true로 변경합니다.
+			return true;
+		}
+
+		return false;
+	}
+
+	getData = () => {
+		const jsonData = {};
+
+		// Shadow DOM 내의 폼 요소만 선택
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
+			const key = el.name;
+			if (!key) return; // name이 없는 요소는 건너뜁니다.
+
+			let value;
+			if (el.tagName === "INPUT" && (el.type === "checkbox" || el.type === "radio")) {
+				value = el.checked;
+			} else {
+				value = el.value;
+			}
+
+			// 중복 name을 대비한 배열 처리
+			if (jsonData[key]) {
+				if (!Array.isArray(jsonData[key])) {
+					jsonData[key] = [jsonData[key]];
+				}
+				jsonData[key].push(value);
+			} else {
+				jsonData[key] = value;
+			}
+		});
+
+		return jsonData;
+	};
+
+	setData = (jsonData) => {
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
+			console.log("------", el);
+			el.removeEventListener("input", this.#changeHandler);
+			el.addEventListener("input", this.#changeHandler);
+		});
+
+		if (!jsonData || typeof jsonData !== 'object') {
+			console.error("setData: Invalid data provided. Expected an object.");
+			return;
+		}
+
+		let bChanged = false;
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
+			const key = el.name;
+			if (!key || !jsonData.hasOwnProperty(key)) return;
+
+			const value = jsonData[key];
+
+			// 폼 요소에만 데이터를 설정합니다.
+			if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
+				if (el.type === "checkbox" || el.type === "radio") {
+					if (el.checked !== (el.value === String(value))) bChanged = true;
+					el.checked = (el.value === String(value));
+				} else {
+					if (el.value !== value) bChanged = true;
+					el.value = value;
+				}
+			} else {
+				// 폼 요소가 아닌 경우, textContent를 사용합니다.
+				if (el.textContent !== value) bChanged = true;
+				el.textContent = value;
+			}
+		});
+
+		if (bChanged) this.#changed(bChanged);
+	};
+
+	initData = (jsonData) => {
+		this.setData(jsonData);
+		this.#changed(false);
+	};
+
+	#changed = (v) => {
+		const parent = this.closest(".detail-wrapper");
+		if (parent) {
+			const el = parent.querySelector("nx-title2");
+			if (el) el.changed = v;
+		}
+	}
+
+	#changeHandler = (e) => {
+		this.#changed(true);
+	}
+
+	#init = () => {
+
+		//console.log(this);
+		//console.log(this.querySelectorAll("input[name], textarea[name], select[name]"));
+
+		/**
+		 * css style 적용
+		 */
+		for (const attr of this.attributes) {
+			if (attr.name.startsWith("css-")) {
+				// "css-" 접두사를 제거하고 CSS 속성명으로 변환
+				this.style.setProperty(attr.name.substring(4), attr.value);
+			}
+		}
+
+		this.originContents = this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+	};
+}
+
+class nxTitle2 extends nxDiv {
+
+	#changed = false;
+
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		if (super.connectedCallback()) this.#init();
+	};
+
+	get changed() {
+		return this.#changed;
+	};
+	set changed(v) {
+		this.#changed = v;
+		v ? this.classList.add("changed") : this.classList.remove("changed");
+	};
+
+	#init = () => {
+		const caption = this.getAttribute("caption") || "";
+		const htmlTmpl = document.createElement("template");
+
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTitle2.css";
+				${ninegrid.getCustomPath(this,"nxTitle2.css")}
+			</style>
+            
+            <div class="left">
+            	<span>${caption}</span>
+			</div>
+			${this.originContents}
+        `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+	}
+}
+
+customElements.define("nx-title2", nxTitle2);
+
+class NxLayout extends HTMLElement {
+
+	#originalChildren;
+
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		this.#originalChildren = Array.from(this.children).filter(child => child.tagName.toLowerCase() !== 'nx-splitter');
+		this.#render();
+	}
+
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (this.#originalChildren && oldValue !== newValue) {
+			this.#render();
+		}
+	}
+
+	static get observedAttributes() {
+		return ['columns'];
+	}
+
+	#render() {
+		const children = this.#originalChildren;
+		if (!children || children.length === 0) return;
+
+		// 기존 자식 노드를 모두 제거하여 초기화
+		while (this.firstChild) {
+			this.removeChild(this.firstChild);
+		}
+
+		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
+		const numRows = columnsLayout.length;
+
+		// 메인 컨테이너를 Flexbox로 설정
+		//*this.style.display = 'flex';
+		//*this.style.flexDirection = 'column'; // 'flex-direction' 대신 CamelCase 사용
+		//*this.style.width = '100%';
+		//*this.style.height = '100%';
+		//this.style.overflow = 'hidden'; // 부모 요소에 스크롤 방지
+
+		let childIndex = 0;
+
+		for (let row = 0; row < numRows; row++) {
+			const numColumns = columnsLayout[row];
+
+			// 행 래퍼 생성
+			const rowWrapper = document.createElement('div');
+			rowWrapper.classList.add('row');
+			//*rowWrapper.style.display = 'flex';
+			//*rowWrapper.style.flex = "1 1 0";//`1 1 ${flexBasis}%`; // 모든 행이 균등한 높이를 갖도록 설정
+			//*rowWrapper.style.width = '100%';
+			//rowWrapper.style.minWidth = '0';
+			//rowWrapper.style.minHeight = '0';
+			//rowWrapper.style.gap = '8px'; // Flexbox 간격 설정
+
+			for (let col = 0; col < numColumns; col++) {
+				if (children[childIndex]) {
+					const panel = children[childIndex];
+					//*panel.style.flex = '1 1 0'; // Flexbox 환경에 맞게 flex 속성 추가
+					rowWrapper.appendChild(panel);
+					childIndex++;
+				}
+				if (col < numColumns - 1) {
+					const splitter = document.createElement('nx-splitter');
+					//splitter.classList.add("h");
+					rowWrapper.appendChild(splitter);
+				}
+			}
+
+			this.appendChild(rowWrapper);
+
+			if (row < numRows - 1) {
+				const splitter = document.createElement('nx-splitter');
+				splitter.classList.add("v");
+				this.appendChild(splitter);
+			}
+		}
+	}
+}
+
+customElements.define('nx-layout', NxLayout);
+
+class NxLayout2 extends HTMLElement {
+
+	#originalChildren;
+
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		this.#originalChildren = Array.from(this.children).filter(child => child.tagName.toLowerCase() !== 'nx-splitter');
+		this.#render();
+	}
+
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (this.#originalChildren && oldValue !== newValue) {
+			this.#render();
+		}
+	}
+
+	static get observedAttributes() {
+		return ['columns'];
+	}
+
+	#render() {
+		const children = this.#originalChildren;
+		if (!children || children.length === 0) return;
+
+		// 기존 자식 노드를 모두 제거하여 초기화
+		while (this.firstChild) {
+			this.removeChild(this.firstChild);
+		}
+
+		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
+		const numRows = columnsLayout.length;
+
+		let childIndex = 0;
+
+		for (let row = 0; row < numRows; row++) {
+			const numColumns = columnsLayout[row];
+
+			// 행 래퍼 생성
+			const rowWrapper = document.createElement('div');
+			rowWrapper.classList.add('row');
+
+			for (let col = 0; col < numColumns; col++) {
+				if (children[childIndex]) {
+					const child = children[childIndex];
+					rowWrapper.appendChild(child);
+					childIndex++;
+				}
+			}
+
+			this.appendChild(rowWrapper);
+		}
+
+		setTimeout(() => {
+			this.#position();
+		}, 300);
+	};
+
+	#position = () => {
+		const getRenderedWidthWithClone = (element) => {
+			// 1. 요소의 계산된 스타일을 가져옵니다.
+			const computedStyle = window.getComputedStyle(element);
+
+			// 2. 복사본을 생성합니다.
+			const clone = element.cloneNode(true);
+
+			// 3. 복사본에 필요한 스타일만 명시적으로 적용합니다.
+			// 이렇게 하면 부모가 숨겨져 있어도 정확한 스타일을 얻을 수 있습니다.
+			clone.style.fontSize = computedStyle.fontSize;
+			clone.style.fontFamily = computedStyle.fontFamily;
+			clone.style.fontWeight = computedStyle.fontWeight;
+
+			// 4. 복제본을 화면 밖으로 이동시킬 스타일을 적용합니다.
+			clone.style.position = 'absolute';
+			clone.style.left = '-9999px';
+			clone.style.visibility = 'hidden';
+
+			// 5. 복제본을 body에 임시로 추가합니다.
+			document.body.appendChild(clone);
+
+			// 6. 너비 측정
+			const width = clone.getBoundingClientRect().width;
+
+			// 7. 측정이 끝나면 복제본을 제거합니다.
+			document.body.removeChild(clone);
+
+			return width + 4;
+		};
+
+		const allLabels = [];
+
+		this.querySelectorAll(".row").forEach((el) => {
+			const labelsInRow = el.querySelectorAll(".label");
+			labelsInRow.forEach((label, index) => {
+				if (!allLabels[index]) {
+					allLabels[index] = [];
+				}
+				allLabels[index].push(label);
+			});
+		});
+
+		allLabels.forEach((labelGroup) => {
+			if (labelGroup && labelGroup.length > 0) {
+				const renderedWidths = labelGroup.map(label => getRenderedWidthWithClone(label));
+				const maxWidth = Math.max(...renderedWidths);
+
+				labelGroup.forEach(label => {
+					label.style.width = `${maxWidth}px`;
+				});
+			}
+		});
+	};
+}
+
+customElements.define('nx-layout2', NxLayout2);
+
+class nxPanel extends nxDiv {
+
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		if (super.connectedCallback()) this.#init();
+	}
+
+	#init = () => {
+		const caption = this.getAttribute("caption");
+		const columns = this.getAttribute("columns") || "";
+
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxPanel.css";
+				${ninegrid.getCustomPath(this,"nxPanel.css")}
+			</style>
+            
+			<div class="head ${caption ? '' : 'hide'}">
+				<div class="caption"><span>${caption}</span></div>
+			</div>
+			<div class="body">
+				<nx-layout2 columns="${columns}">
+					${this.originContents}
+				</nx-layout2>
+			</div>
+        `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+	}
+}
+
+customElements.define("nx-panel", nxPanel);
+
+class nxButtons extends nxDiv {
+
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		if (super.connectedCallback()) this.#init();
+	};
+
+	#init = () => {
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxButtons.css";
+				${ninegrid.getCustomPath(this,"nxButtons.css")}
+			</style>
+            
+			${this.originContents}
+        `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+	}
+}
+
+customElements.define("nx-buttons", nxButtons);
+
 class aiSettings extends HTMLElement
 {
 	constructor() {
@@ -202537,30 +203216,10 @@ console.log(el, href, title);
 
 		console.log(where1);
 
-		const srcPath1 = this.#getSourcePath(where.menu.url);
+		const srcPath1 = this.#getSourcePath(where1.menu.url);
 		console.log(srcPath1);
 
 		return;
-		//console.log(src);
-
-		/**
-		 const response = await fetch(srcPath.javascript);
-		 src.javascript = await response.text();*/
-
-		//console.log(src);
-		//const template = await fetch(path).then(res => res.text());
-		/*
-		arr.push({
-			//menuId: elem.getAttribute("menu-id"),
-			url: elem.getAttribute("href"),
-			title: elem.getAttribute("title"),
-		})*/
-
-
-
-
-
-		const where = await this.#where(`${title}에서 ${userPrompt}`, [{url: href, title: title}], await this.#getTableList());
 	};
 
 	#generateDetailSource = async (userPrompt, apply, progressMessageInstance) => {