estreui 1.2.2 → 1.2.3

package/README.md

@@ -1,5 +1,7 @@
 # EstreUI.js
 
+![jQuery 4.0 Supported](https://img.shields.io/badge/jQuery-4.0%20Supported-0769AD?style=for-the-badge&logo=jquery&logoColor=white)
+
 EstreUI is a "Rimwork" (Runnable Frame) designed to bridge the gap between classic web development and modern native-like web applications. It provides a structured, mobile-first environment for developers familiar with jQuery, ASP, PHP, or JSP, as well as native app developers looking to transition to the web.
 
 [한국어 문서 (Korean Documentation)](#estre-ui-rimwork-korean)
@@ -27,6 +29,10 @@ EstreUI is not just a library, nor a full-blown framework in the traditional sen
 *   **Browsers**: Chromium 92+, Safari 15+ (iOS 15+).
 *   **Recommendation**: **iOS 16+** is strongly recommended due to severe CSS limitations in iOS 15.
 
+### Developer & AI Agent Documentation
+*   **[EstreUI.js Developer Docs](.agent/estreui/README.md)**: In-depth, case-based developer documentation covering foundations, page system, handles, markup conventions, boot sequence, navigation API, and template engine.
+*   **[Project Adaptation Guide](.agent/project/README.md)**: Reference material for integrating EstreUI.js into a new project or modifying code in an existing one — includes upstream file classification, adaptation patterns, and style guide.
+
 ---
 
 ## Getting Started
@@ -292,6 +298,10 @@ EstreUI는 단순한 라이브러리도, 전통적인 의미의 완전한 프레
 *   **브라우저**: Chromium 92+, Safari 15+ (iOS 15+).
 *   **권장 사항**: iOS 15의 CSS 제한으로 인해 **iOS 16 이상**을 강력히 권장합니다.
 
+### 개발자 및 AI 에이전트 문서
+*   **[EstreUI.js 개발문서](.agent/estreui/README.md)**: 기초, 페이지 시스템, 핸들, 마크업 컨벤션, 부트 시퀀스, 네비게이션 API, 템플릿 엔진을 다루는 사례 기반 상세 개발문서입니다.
+*   **[프로젝트 적용 가이드](.agent/project/README.md)**: EstreUI.js를 새 프로젝트에 통합하거나 기존 프로젝트의 코드를 수정할 때 필요한 참고 자료 — 업스트림 파일 분류, 적용 패턴, 스타일 가이드를 포함합니다.
+
 ---
 
 ## 시작하기 (Getting Started)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "estreui",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "EstreUI Core Library - A comprehensive UI framework for web applications",
   "main": "scripts/estreUi.js",
   "files": [
@@ -32,7 +32,11 @@
     "mobile-ui",
     "desktop-ui",
     "web-desktop",
-    "jquery-plugin"
+    "jquery-plugin",
+    "legacy-modernization",
+    "no-build",
+    "jquery4",
+    "ai-ready"
   ],
   "author": "SoliEstre",
   "license": "MIT",

package/scripts/estreU0EEOZ.js

@@ -593,6 +593,44 @@ const cvt = {
 
 
 
+/** Data Attribute name alias constant and Data prefixed Kebab Case Characters loopback (2 letters and more) */
+const dd = new Proxy({
+    get a() { return ; }, // *reserved*
+    get b() { return ; }, // *reserved*
+    get c() { return ; }, // *reserved*
+    get d() { return "data-disabled"; },
+    get e() { return ; }, // *reserved*
+    get f() { return ; }, // *reserved*
+    get g() { return ; }, // *reserved*
+    get h() { return ; }, // *reserved*
+    get i() { return ; }, // *reserved*
+    get j() { return ; }, // *reserved*
+    get k() { return ; }, // *reserved*
+    get l() { return ; }, // *reserved*
+    get m() { return ; }, // *reserved*
+    get n() { return ; }, // *reserved*
+    get o() { return ; }, // *reserved*
+    get p() { return ; }, // *reserved*
+    get q() { return ; }, // *reserved*
+    get r() { return ; }, // *reserved*
+    get s() { return ; }, // *reserved*
+    get t() { return ; }, // *reserved*
+    get u() { return ; }, // *reserved*
+    get v() { return ; }, // *reserved*
+    get w() { return ; }, // *reserved*
+    get x() { return ; }, // *reserved*
+    get y() { return ; }, // *reserved*
+    get z() { return ; }, // *reserved*
+}, {
+    get: (target, prop) => {
+        if (prop in target) return target[prop];
+        else return "data-" + prop.replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+            .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
+            .replace(/^([A-Z])/, '-$1').toLowerCase();
+    }
+});
+
+
 // Utility constants block --
 
 // Text alias constant
@@ -899,8 +937,7 @@ class LocalStyle {
             }
             localPrefix += specifier;
         }
-        // const localizedStyles = styles.replace(/^([\t\s]*)##/gm, "$1" + localPrefix);
-        const localizedStyles = styles.replace(/([^#])##([^#])/g, "$1" + localPrefix + "$2").replace(/^##([^#])/gm, localPrefix + "$1");
+        const localizedStyles = styles.replace(/(^|[^#])##(?!#)/gm, "$1" + localPrefix);
 
         const styleSheet = doc.ce("style");
         if (elem == null) location.append(styleSheet);

package/scripts/estreUi.js

@@ -3118,7 +3118,7 @@ class EstreComponent extends EstrePageHostHandle {
 
     openContainer(id, intent, instanceOrigin) {
         if (this.isClosing) return false;
-        const page = pageManager.getConatiner(id, this.id, this.sectionBound);
+        const page = pageManager.getContainer(id, this.id, this.sectionBound);
         if (page == null) return null;
         if (page.statement == "static") return null;
         this.$host.append(page.live);
@@ -5782,7 +5782,7 @@ class EstreUiPageManager {
         else return null;
     }
 
-    getConatiner(id, componentId, sectionBound, statement) {
+    getContainer(id, componentId, sectionBound, statement) {
         var pid = this.findPid(EstreUiPage.getPidContainer(id, componentId, sectionBound, statement));
         if (pid != null) return this.get(pid);
         else return null;
@@ -5895,12 +5895,14 @@ class EstreUiPageManager {
                 if (!isIntentNone && existArticle && (page.isArticle || page.article == "main")) targetProcessed.article = container.showArticle(page.article, intent, articleInstanceOrigin);
                 else targetProcessed.article = article.show();
                 success = targetProcessed.article;
+                // falls through
             case "container":
                 if (success) {
                     if (!isIntentNone && existContainer && (page.isContainer || isRootMain)) targetProcessed.container = component.showContainer(page.container, intent, containerInstanceOrigin);
                     else targetProcessed.container = container.show();
                     success = targetProcessed.container;
                 }
+                // falls through
             case "component":
                 if (success) {
                     if (page.isHeader) {
@@ -5966,12 +5968,14 @@ class EstreUiPageManager {
                 if (!isIntentNone && (page.isArticle || page.article == "main")) targetProcessed.article = container.showArticle(page.article, intent, articleInstanceOrigin);
                 else targetProcessed.article = article.show();
                 success = targetProcessed.article;
+                // falls through
             case "container":
                 if (success) {
                     if (!isIntentNone && (page.isContainer || (page.article == "main" && page.container == "root"))) targetProcessed.container = component.showContainer(page.container, intent, containerInstanceOrigin);
                     else targetProcessed.container = container.show();
                     success = targetProcessed.container;
                 }
+                // falls through
             case "component":
                 if (success) {
                     const isRootMain = page.container == "root" && page.article == "main";
@@ -6053,18 +6057,18 @@ class EstreUiPageManager {
         return postPromise(resolve => {
             postQueue(async _ => {
                 if (pid.indexOf("!") > -1) pid = this.#managedPidMap[pid.replace(/^\!/, "")];
-                if (pid == null) resolve(null);
+                if (pid == null) return resolve(null);
                 if (pid.indexOf("*") > -1) pid = this.extPidMap[pid.replace(/^\*/, "")];
-                if (pid == null) resolve(null);
+                if (pid == null) return resolve(null);
                 if (pid.indexOf("$") < 0) pid = this.findPid(pid);
                 const page = this.get(pid);
-                if (page == null) resolve(null);
+                if (page == null) return resolve(null);
                 page.setInstanceOrigin(instanceOrigin);
                 const sections = page.sections;
-                if (sections == null) resolve(null);
+                if (sections == null) return resolve(null);
 
                 var component = sections[page.componentInstanceId];
-                if (component == null) resolve(null);
+                if (component == null) return resolve(null);
                 var container = null;
                 var article = null;
                 const componentInstanceOrigin = page.componentInstanceOrigin;
@@ -6150,8 +6154,7 @@ class EstreUiCustomPageManager {
     }
 
     showOrBringPage(id, intent, instanceOrigin) {
-        pid = "*" + id;
-        return pageManager.showOrBringPage(id, intent, instanceOrigin);
+        return pageManager.showOrBringPage("*" + id, intent, instanceOrigin);
     }
 
     hidePage(id, hideHost = false, instanceOrigin = null) {
@@ -6174,7 +6177,7 @@ class EstreHandle {
     // constants
     static #handles = {
         get [uis.unifiedCalendar]() { return EstreUnifiedCalendarHandle; },
-        get [uis.dedicatedCalendar]() { return EstreDedicatedCalanderHandle; },
+        get [uis.dedicatedCalendar]() { return EstreDedicatedCalendarHandle; },
 
         get [uis.scalable]() { return EstreScalableHandle; },
         get [uis.collapsible]() { return EstreCollapsibleHandle; },
@@ -9610,7 +9613,7 @@ const scheduleDataSet = new ScheduleDataSet();
 
 
 
-class EstreDedicatedCalanderHandle extends EstreHandle {
+class EstreDedicatedCalendarHandle extends EstreHandle {
 
     // constants
 
@@ -12005,17 +12008,19 @@ class EstreMultiDialSlotHandle extends EstreHandle {
         });
 
 
-        const threshold = 1;
+        const threshold = 0.99;
         const rootMargin = "0px";
 
         this.#itemSelectionObserver[index] = new IntersectionObserver(entries => {
+            let best = n;
             for (const entry of entries) {
-                if (entry.isIntersecting) {
-                    const idx = entry.target.dataset.index;
-                    const i = parseInt(idx);
-                    itemBound.dataset.selected = idx;
-                    this.#onSelected(index, i);
-                }
+                if (entry.intersectionRatio > (best?.intersectionRatio ?? 0)) best = entry;
+            }
+            if (best != n && best.intersectionRatio >= threshold) {
+                const idx = best.target.dataset.index;
+                const i = parseInt(idx);
+                itemBound.dataset.selected = idx;
+                this.#onSelected(index, i);
             }
         }, {
             root: itemBound,
@@ -12038,13 +12043,15 @@ class EstreMultiDialSlotHandle extends EstreHandle {
                 if (current != null) for (const elem of items) current.unobserve(elem);
 
                 this.#itemSelectionObserver[index] = new IntersectionObserver(entries => {
+                    let best = n;
                     for (const entry of entries) {
-                        if (entry.isIntersecting) {
-                            const idx = entry.target.dataset.index;
-                            const i = parseInt(idx);
-                            itemBound.dataset.selected = idx;
-                            this.#onSelected(index, i);
-                        }
+                        if (entry.intersectionRatio > (best?.intersectionRatio ?? 0)) best = entry;
+                    }
+                    if (best != n && best.intersectionRatio >= threshold) {
+                        const idx = best.target.dataset.index;
+                        const i = parseInt(idx);
+                        itemBound.dataset.selected = idx;
+                        this.#onSelected(index, i);
                     }
                 }, {
                     root: itemBound,
@@ -12052,12 +12059,33 @@ class EstreMultiDialSlotHandle extends EstreHandle {
                     threshold
                 });
 
-                for (const item of items) this.#setItemEvent(index, item.dataset.index, item);
+                for (const item of items) this.#setItemEvent(index, item.dataset.index.int, item);
             }
         });
 
         ro.observe(itemBound);
 
+        // Safari/WebKit does not re-evaluate IntersectionObserver entries
+        // when scrolling occurs in an intermediate scroll container (dialHost)
+        // between the IO root (dialBound) and the observed targets (li items).
+        // Force IO re-evaluation on scroll by cycling unobserve/observe.
+        {
+            const dialHost = this.$dialHosts[index];
+            let scrollRaf = 0;
+            dialHost?.addEventListener("scroll", () => {
+                cancelAnimationFrame(scrollRaf);
+                scrollRaf = requestAnimationFrame(() => {
+                    const observer = this.#itemSelectionObserver[index];
+                    if (observer == n) return;
+                    const items = this.getDialItems(index);
+                    for (const item of items) {
+                        observer.unobserve(item);
+                        observer.observe(item);
+                    }
+                });
+            }, { passive: true });
+        }
+
         return ro;
     }
 
@@ -12133,7 +12161,6 @@ class EstreMultiDialSlotHandle extends EstreHandle {
         observer.observe(item);
         $(item).off(c.click).click(function (e) {
             e.preventDefault();
-
             inst.#scrollSmooth(this);
 
             return false;
@@ -14887,83 +14914,99 @@ const estreUi = {
 
 
         let loadExportedFixedBottom;
-        loadExportedFixedBottom = _ => loadExported("fixedBottom.html").then(htmlContent => {
+        loadExportedFixedBottom = (_, attempt = 0) => loadExported("fixedBottom.html").then(htmlContent => {
             this.$fixedBottom.prepend(htmlContent);
             return onLoadedFixedBottom();
         }).catch(error => {
+            const delay = Math.min(1000 * Math.pow(2, attempt), 30000);
             console.error("There has been a problem with your fetch operation for fixedBottom: ", error);
-            console.log("Retrying to load fixedBottom...");
-            return loadExportedFixedBottom();
+            console.log(`Retrying to load fixedBottom in ${delay}ms...`);
+            return postPromise(resolve => setTimeout(resolve, delay))
+                .then(() => loadExportedFixedBottom(_, attempt + 1));
         });
 
         let loadExportedFixedTop;
-        loadExportedFixedTop = subTerm => loadExported("fixedTop.html").then(htmlContent => {
+        loadExportedFixedTop = (subTerm, attempt = 0) => loadExported("fixedTop.html").then(htmlContent => {
             this.$fixedTop.prepend(htmlContent);
             return onLoadedFixedTop(subTerm);
         }).catch(error => {
+            const delay = Math.min(1000 * Math.pow(2, attempt), 30000);
             console.error("There has been a problem with your fetch operation for fixedTop: ", error);
-            console.log("Retrying to load fixedTop...");
-            return loadExportedFixedTop(subTerm);
+            console.log(`Retrying to load fixedTop in ${delay}ms...`);
+            return postPromise(resolve => setTimeout(resolve, delay))
+                .then(() => loadExportedFixedTop(subTerm, attempt + 1));
         });
 
         let loadExportedStaticDoc;
-        loadExportedStaticDoc = subTerm => loadExported("staticDoc.html").then(htmlContent => {
+        loadExportedStaticDoc = (subTerm, attempt = 0) => loadExported("staticDoc.html").then(htmlContent => {
             this.$mainArea.prepend(htmlContent);
             return onLoadedStaticDoc(subTerm);
         }).catch(error => {
+            const delay = Math.min(1000 * Math.pow(2, attempt), 30000);
             console.error("There has been a problem with your fetch operation for staticDoc: ", error);
-            console.log("Retrying to load staticDoc...");
-            return loadExportedStaticDoc(subTerm);
+            console.log(`Retrying to load staticDoc in ${delay}ms...`);
+            return postPromise(resolve => setTimeout(resolve, delay))
+                .then(() => loadExportedStaticDoc(subTerm, attempt + 1));
         });
 
         let loadExportedInstantDoc;
-        loadExportedInstantDoc = subTerm => loadExported("instantDoc.html").then(htmlContent => {
+        loadExportedInstantDoc = (subTerm, attempt = 0) => loadExported("instantDoc.html").then(htmlContent => {
             this.$blindArea.prepend(htmlContent);
             return onLoadedInstantDoc(subTerm);
         }).catch(error => {
+            const delay = Math.min(1000 * Math.pow(2, attempt), 30000);
             console.error("There has been a problem with your fetch operation for instantDoc: ", error);
-            console.log("Retrying to load instantDoc...");
-            return loadExportedInstantDoc(subTerm);
+            console.log(`Retrying to load instantDoc in ${delay}ms...`);
+            return postPromise(resolve => setTimeout(resolve, delay))
+                .then(() => loadExportedInstantDoc(subTerm, attempt + 1));
         });
 
         let loadExportedManagedOverlay;
-        loadExportedManagedOverlay = subTerm => loadExported("managedOverlay.html").then(htmlContent => {
+        loadExportedManagedOverlay = (subTerm, attempt = 0) => loadExported("managedOverlay.html").then(htmlContent => {
             this.$overlayArea.prepend(htmlContent);
             return onLoadedManagedOverlay(subTerm);
         }).catch(error => {
+            const delay = Math.min(1000 * Math.pow(2, attempt), 30000);
             console.error("There has been a problem with your fetch operation for managedOverlay: ", error);
-            console.log("Retrying to load managedOverlay...");
-            return loadExportedManagedOverlay(subTerm);
+            console.log(`Retrying to load managedOverlay in ${delay}ms...`);
+            return postPromise(resolve => setTimeout(resolve, delay))
+                .then(() => loadExportedManagedOverlay(subTerm, attempt + 1));
         });
 
         let loadExportedMainMenu;
-        loadExportedMainMenu = subTerm => loadExported("mainMenu.html").then(htmlContent => {
+        loadExportedMainMenu = (subTerm, attempt = 0) => loadExported("mainMenu.html").then(htmlContent => {
             this.$mainMenu.prepend(htmlContent);
             return onLoadedMainMenu(subTerm);
         }).catch(error => {
+            const delay = Math.min(1000 * Math.pow(2, attempt), 30000);
             console.error("There has been a problem with your fetch operation for mainMenu: ", error);
-            console.log("Retrying to load mainMenu...");
-            return loadExportedMainMenu(subTerm);
+            console.log(`Retrying to load mainMenu in ${delay}ms...`);
+            return postPromise(resolve => setTimeout(resolve, delay))
+                .then(() => loadExportedMainMenu(subTerm, attempt + 1));
         });
 
         let loadExportedStockHandlePrototypes;
-        loadExportedStockHandlePrototypes = _ => loadExported("stockHandlePrototypes.html").then(htmlContent => {
+        loadExportedStockHandlePrototypes = (_, attempt = 0) => loadExported("stockHandlePrototypes.html").then(htmlContent => {
             this.$handlePrototypes.prepend(htmlContent);
             return true;
         }).catch(error => {
+            const delay = Math.min(1000 * Math.pow(2, attempt), 30000);
             console.error("There has been a problem with your fetch operation for stockHandlePrototypes: ", error);
-            console.log("Retrying to load stockHandlePrototypes...");
-            return loadExportedStockHandlePrototypes();
+            console.log(`Retrying to load stockHandlePrototypes in ${delay}ms...`);
+            return postPromise(resolve => setTimeout(resolve, delay))
+                .then(() => loadExportedStockHandlePrototypes(_, attempt + 1));
         });
 
         let loadExportedCustomHandlePrototypes;
-        loadExportedCustomHandlePrototypes = _ => loadExported("customHandlePrototypes.html").then(htmlContent => {
+        loadExportedCustomHandlePrototypes = (_, attempt = 0) => loadExported("customHandlePrototypes.html").then(htmlContent => {
             this.$handlePrototypes.append(htmlContent);
             return true;
         }).catch(error => {
+            const delay = Math.min(1000 * Math.pow(2, attempt), 30000);
             console.error("There has been a problem with your fetch operation for customHandlePrototypes: ", error);
-            console.log("Retrying to load customHandlePrototypes...");
-            return loadExportedCustomHandlePrototypes();
+            console.log(`Retrying to load customHandlePrototypes in ${delay}ms...`);
+            return postPromise(resolve => setTimeout(resolve, delay))
+                .then(() => loadExportedCustomHandlePrototypes(_, attempt + 1));
         });
 
 

package/serviceWorker.js

@@ -1,4 +1,4 @@
-const INSTALLATION_VERSION_NAME = "1.2.1-r20260308";
+const INSTALLATION_VERSION_NAME = "1.2.3-r20260416";
 // ^^ Use for check new update "Native application(webview) version(or Android/iOS version combo) - PWA release version"
 // ex) "1.0.1/1.0.0-r20251101k"
 
@@ -21,7 +21,7 @@ const INSTALLATION_FILE_LIST = [
 
 
 // Common files cache - Be changes some time but, well not changed very often
-const CACHE_NAME_COMMON_FILES = "common-files-cache-v1-20260308";
+const CACHE_NAME_COMMON_FILES = "common-files-cache-v1-20260416";
 
 const COMMON_FILES_TO_CACHE = [
     "./",