ide-assi 0.377.0 → 0.379.0

package/dist/bundle.cjs.js

@@ -201852,10 +201852,352 @@ class IdeAssi extends HTMLElement
 
 		this.shadowRoot.appendChild(document.createElement('ide-diff-popup'));
 
-		const src3 = 'asdfa asdfadf asdfa asdfadf';
-		const src4 = '111 asdfadf asdfa asdfadf';
+		//setTimeout(() => {
+		const src1 = `
+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;
+    });
+  };
 
-		this.shadowRoot.querySelector("ide-diff-popup").popup(src3, src4);
+  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;
+		`;
+
+		const 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 DocManager;
+		`;
+
+		this.shadowRoot.querySelector("ide-diff-popup").popup(src1, src2);
 
 		return;
 	}
@@ -234435,7 +234777,7 @@ function requireDiffMatchPatch () {
 var diffMatchPatchExports = requireDiffMatchPatch();
 
 // Diff 데코레이션을 위한 StateField 정의 (변동 없음)
-const asisDiffDecorations = StateField.define({
+StateField.define({
 	create() { return Decoration.none; },
 	update(decorations, tr) {
 		return tr.effects.reduce((currentDecos, effect) => {
@@ -234448,7 +234790,7 @@ const asisDiffDecorations = StateField.define({
 	provide: f => EditorView.decorations.from(f)
 });
 
-const tobeDiffDecorations = StateField.define({
+StateField.define({
 	create() { return Decoration.none; },
 	update(decorations, tr) {
 		return tr.effects.reduce((currentDecos, effect) => {
@@ -234545,7 +234887,7 @@ class IdeDiff extends HTMLElement {
 					javascript(),
 					EditorState.readOnly.of(true),
 					this.#languageCompartment.of(javascript()),
-					asisDiffDecorations,
+					//asisDiffDecorations,
 					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
@@ -234567,7 +234909,7 @@ class IdeDiff extends HTMLElement {
 					javascript(),
 					EditorState.readOnly.of(true),
 					this.#languageCompartment.of(javascript()),
-					tobeDiffDecorations,
+					//tobeDiffDecorations,
 					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
@@ -234756,7 +235098,7 @@ class IdeDiff extends HTMLElement {
 		}
 
 		// 데코레이션 효과는 미리 계산해 둡니다.
-		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
+		//const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
 		// 1단계: 텍스트 내용 변경과 언어 확장을 먼저 디스패치합니다.
 		// 'to' 값을 현재 문서 길이 전체로 지정하여 정확한 교체를 보장합니다.
@@ -234774,6 +235116,7 @@ class IdeDiff extends HTMLElement {
 			]
 		});
 
+		/**
 		// ⭐️ 2단계: 텍스트 및 언어 변경이 완전히 적용되고 뷰가 안정화될 시간을 줍니다.
 		// 다음 프레임에서 데코레이션 효과만 별도로 디스패치합니다.
 		requestAnimationFrame(() => {
@@ -234792,7 +235135,7 @@ class IdeDiff extends HTMLElement {
 				// this.#asisEditorView.scrollDOM.scrollTop = 0;
 				// this.#tobeEditorView.scrollDOM.scrollTop = 0;
 			});
-		});
+		}); */
 	};
 
 	disconnectedCallback() {

package/dist/bundle.esm.js

@@ -201848,10 +201848,352 @@ class IdeAssi extends HTMLElement
 
 		this.shadowRoot.appendChild(document.createElement('ide-diff-popup'));
 
-		const src3 = 'asdfa asdfadf asdfa asdfadf';
-		const src4 = '111 asdfadf asdfa asdfadf';
+		//setTimeout(() => {
+		const src1 = `
+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;
+    });
+  };
 
-		this.shadowRoot.querySelector("ide-diff-popup").popup(src3, src4);
+  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;
+		`;
+
+		const 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 DocManager;
+		`;
+
+		this.shadowRoot.querySelector("ide-diff-popup").popup(src1, src2);
 
 		return;
 	}
@@ -234431,7 +234773,7 @@ function requireDiffMatchPatch () {
 var diffMatchPatchExports = requireDiffMatchPatch();
 
 // Diff 데코레이션을 위한 StateField 정의 (변동 없음)
-const asisDiffDecorations = StateField.define({
+StateField.define({
 	create() { return Decoration.none; },
 	update(decorations, tr) {
 		return tr.effects.reduce((currentDecos, effect) => {
@@ -234444,7 +234786,7 @@ const asisDiffDecorations = StateField.define({
 	provide: f => EditorView.decorations.from(f)
 });
 
-const tobeDiffDecorations = StateField.define({
+StateField.define({
 	create() { return Decoration.none; },
 	update(decorations, tr) {
 		return tr.effects.reduce((currentDecos, effect) => {
@@ -234541,7 +234883,7 @@ class IdeDiff extends HTMLElement {
 					javascript(),
 					EditorState.readOnly.of(true),
 					this.#languageCompartment.of(javascript()),
-					asisDiffDecorations,
+					//asisDiffDecorations,
 					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
@@ -234563,7 +234905,7 @@ class IdeDiff extends HTMLElement {
 					javascript(),
 					EditorState.readOnly.of(true),
 					this.#languageCompartment.of(javascript()),
-					tobeDiffDecorations,
+					//tobeDiffDecorations,
 					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
@@ -234752,7 +235094,7 @@ class IdeDiff extends HTMLElement {
 		}
 
 		// 데코레이션 효과는 미리 계산해 둡니다.
-		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
+		//const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
 		// 1단계: 텍스트 내용 변경과 언어 확장을 먼저 디스패치합니다.
 		// 'to' 값을 현재 문서 길이 전체로 지정하여 정확한 교체를 보장합니다.
@@ -234770,6 +235112,7 @@ class IdeDiff extends HTMLElement {
 			]
 		});
 
+		/**
 		// ⭐️ 2단계: 텍스트 및 언어 변경이 완전히 적용되고 뷰가 안정화될 시간을 줍니다.
 		// 다음 프레임에서 데코레이션 효과만 별도로 디스패치합니다.
 		requestAnimationFrame(() => {
@@ -234788,7 +235131,7 @@ class IdeDiff extends HTMLElement {
 				// this.#asisEditorView.scrollDOM.scrollTop = 0;
 				// this.#tobeEditorView.scrollDOM.scrollTop = 0;
 			});
-		});
+		}); */
 	};
 
 	disconnectedCallback() {

package/dist/components/ideAssi.js

@@ -470,7 +470,7 @@ export default DocManager;
 		const src3 = 'asdfa asdfadf asdfa asdfadf';
 		const src4 = '111 asdfadf asdfa asdfadf';
 
-		this.shadowRoot.querySelector("ide-diff-popup").popup(src3, src4);
+		this.shadowRoot.querySelector("ide-diff-popup").popup(src1, src2);
 
 		return;
 

package/dist/components/ideDiff.js

@@ -135,7 +135,7 @@ export class IdeDiff extends HTMLElement {
 					javascript(),
 					EditorState.readOnly.of(true),
 					this.#languageCompartment.of(javascript()),
-					asisDiffDecorations,
+					//asisDiffDecorations,
 					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
@@ -157,7 +157,7 @@ export class IdeDiff extends HTMLElement {
 					javascript(),
 					EditorState.readOnly.of(true),
 					this.#languageCompartment.of(javascript()),
-					tobeDiffDecorations,
+					//tobeDiffDecorations,
 					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
@@ -346,7 +346,7 @@ export class IdeDiff extends HTMLElement {
 		}
 
 		// 데코레이션 효과는 미리 계산해 둡니다.
-		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
+		//const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
 		// 1단계: 텍스트 내용 변경과 언어 확장을 먼저 디스패치합니다.
 		// 'to' 값을 현재 문서 길이 전체로 지정하여 정확한 교체를 보장합니다.
@@ -364,6 +364,7 @@ export class IdeDiff extends HTMLElement {
 			]
 		});
 
+		/**
 		// ⭐️ 2단계: 텍스트 및 언어 변경이 완전히 적용되고 뷰가 안정화될 시간을 줍니다.
 		// 다음 프레임에서 데코레이션 효과만 별도로 디스패치합니다.
 		requestAnimationFrame(() => {
@@ -382,7 +383,7 @@ export class IdeDiff extends HTMLElement {
 				// this.#asisEditorView.scrollDOM.scrollTop = 0;
 				// this.#tobeEditorView.scrollDOM.scrollTop = 0;
 			});
-		});
+		}); */
 	};
 
 	disconnectedCallback() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ide-assi",
   "type": "module",
-  "version": "0.377.0",
+  "version": "0.379.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/components/ideAssi.js

@@ -470,7 +470,7 @@ export default DocManager;
 		const src3 = 'asdfa asdfadf asdfa asdfadf';
 		const src4 = '111 asdfadf asdfa asdfadf';
 
-		this.shadowRoot.querySelector("ide-diff-popup").popup(src3, src4);
+		this.shadowRoot.querySelector("ide-diff-popup").popup(src1, src2);
 
 		return;
 

package/src/components/ideDiff.js

@@ -135,7 +135,7 @@ export class IdeDiff extends HTMLElement {
 					javascript(),
 					EditorState.readOnly.of(true),
 					this.#languageCompartment.of(javascript()),
-					asisDiffDecorations,
+					//asisDiffDecorations,
 					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
@@ -157,7 +157,7 @@ export class IdeDiff extends HTMLElement {
 					javascript(),
 					EditorState.readOnly.of(true),
 					this.#languageCompartment.of(javascript()),
-					tobeDiffDecorations,
+					//tobeDiffDecorations,
 					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
@@ -346,7 +346,7 @@ export class IdeDiff extends HTMLElement {
 		}
 
 		// 데코레이션 효과는 미리 계산해 둡니다.
-		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
+		//const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
 		// 1단계: 텍스트 내용 변경과 언어 확장을 먼저 디스패치합니다.
 		// 'to' 값을 현재 문서 길이 전체로 지정하여 정확한 교체를 보장합니다.
@@ -364,6 +364,7 @@ export class IdeDiff extends HTMLElement {
 			]
 		});
 
+		/**
 		// ⭐️ 2단계: 텍스트 및 언어 변경이 완전히 적용되고 뷰가 안정화될 시간을 줍니다.
 		// 다음 프레임에서 데코레이션 효과만 별도로 디스패치합니다.
 		requestAnimationFrame(() => {
@@ -382,7 +383,7 @@ export class IdeDiff extends HTMLElement {
 				// this.#asisEditorView.scrollDOM.scrollTop = 0;
 				// this.#tobeEditorView.scrollDOM.scrollTop = 0;
 			});
-		});
+		}); */
 	};
 
 	disconnectedCallback() {