estreui 1.0.7 → 1.2.0

package/scripts/estreUi.js

@@ -20,6 +20,9 @@ const uis = {
     dotlottieLoader: "dotlottie-loader",
 
     // rim ui //
+    prefix: ".prefix",
+    suffix: ".suffix",
+    divider: ".divider",
     
     // component //
     container: ".container",
@@ -158,6 +161,20 @@ const uis = {
     paddedDate: ".padded_date",
     shortDay: ".short_day",
 
+    // live timestamp
+    liveTimestamp: "[data-live-timestamp]",
+
+
+    // on click set text
+    onClickSetText: "[data-on-click-set-text]",
+
+    // on click set html
+    onClickSetHtml: "[data-on-click-set-html]",
+
+
+    // help alert
+    dataHelpAlert: "[data-help-alert]",
+
     // num keypad
     numKeypad: ".num_keypad",
 
@@ -170,6 +187,12 @@ const uis = {
     // toaster slot
     toasterSlot: ".toaster_slot",
 
+    // multi dial slot
+    multiDialSlot: ".multi_dial_slot",
+    dialHolder: ".dialHolder",
+    dialBound: ".dial_bound",
+    dialHost: ".dial_host",
+    
 
     // exported content
     exportedContent: ".exported_content",
@@ -204,6 +227,7 @@ const eds = {
     static: "data-static",
     exported: "data-exported",
     multiInstance: "data-multi-instance",
+    instanceOrigin: "data-instance-origin",
 
     // for bind data
     index: "data-index",
@@ -313,6 +337,8 @@ const eds = {
     options: "data-options",
     code: "data-code",
     value: "data-value",
+    align: "data-align",
+    initial: "data-initial",
     intersectionRootMargin: "data-intersection-root-margin",
     intersectionThreshold: "data-intersection-threshold",
 
@@ -402,12 +428,32 @@ const eds = {
     withPrefix: "data-with-prefix",
     withSuffix: "data-with-suffix",
 
+    // for live timestamp
+    liveTimestamp: "data-live-timestamp",
+    shortSuffix: "data-short-suffix",
+
+
+    // for on click set text
+    onClickSetText: "data-on-click-set-text",
+
+    // for on click set html
+    onClickSetHtml: "data-on-click-set-html",
+
+
     // for month selector bar
     dropdownOpen: "data-dropdown-open",
     showFuture: "data-show-future",
     usePopupSelector: "data-use-popup-selector",
 
 
+    // multi dial slot
+    itemTable: "data-item-table", // [['item1', 'item2', 'item3', ...], ['item1', 'item2', 'item3', ...], ...]
+    itemAligns: "data-item-aligns", // [t, n, f, ...] :: f: left, n: center, t: right
+    itemPrefixes: "data-item-prefixes", // ['prefix1', 'prefix2', ...]
+    itemSuffixes: "data-item-suffixes", // ['suffix1', 'suffix2', ...]
+    itemDividers: "data-item-dividers", // ['before', 'dividerForAll', 'after'] / ['divider0', 'divider1', ...]
+
+
     // for solid point
     solid: "data-solid",
 
@@ -662,6 +708,74 @@ const selectionToast = (options = ["option A", "option B", "option C"],
 ) => toastSelection(title, message, minSelection, maxSelection, options, defaultSelected, callbackConfirm, callbackSelect, callbackDissmiss, callbackAnother, confirm, another);
 
 
+function estreToastDials(options = {}) {
+    const arrays = [c.table, c.initial, c.aligns, c.prefixes, c.suffixes, c.dividers];
+    for (const name of arrays) if (!typeString(options[name])) options[name] = Jcodd.coddify(options[name]);
+    options.stretch = !options.stretch ? "" : t1;
+    options.hideScrollbar = !options.hideScrollbar ? "" : t1;
+    let intent;
+    new Promise((resolve) => {
+        intent = {
+            data: options,
+            onConfirm(selections, keys, values) {
+                this.data?.callbackConfirm?.(selections, keys, values);
+                resolve(selections)
+            },
+            onSelect(boundIndex, index, value, selectionIndexes, selectionValues) {
+                this?.data?.callbackSelect?.(boundIndex, index, value, selectionIndexes, selectionValues);
+            },
+            onAnother(selections, keys, values) {
+                this?.data?.callbackAnother?.(selections, keys, values);
+                resolve(false);
+            },
+            onDissmiss(selections, keys, values) {
+                this?.data?.callbackDissmiss?.(selections, keys, values);
+                resolve(undefined);
+            },
+        };
+        return pageManager.bringPage("!toastDials", intent);
+    });
+    return new class {
+        get data() { return intent.data; }
+        get handle() { return intent.handle; }
+    }();
+}
+
+const toastDials = (title = "", message = "",
+    table = [[]],
+    initial = [],
+    callbackConfirm = (selections, keys, values) => {},
+    callbackSelect = (boundIndex, index, value, selectionIndexes, selectionValues) => {},
+    callbackDissmiss = (selections, keys, values) => {},
+    callbackAnother = null,
+    confirm = isKorean() ? "닫기" : "Close",
+    another = isKorean() ? "되돌리기" : "rollback",
+    aligns = [],
+    prefixes = [],
+    suffixes = [],
+    dividers = [],
+    stretch = t,
+    hideScrollbar = t,
+) => estreToastDials({ title, message, table, initial, aligns, prefixes, suffixes, dividers, stretch, hideScrollbar, callbackConfirm, callbackSelect, callbackDissmiss, callbackAnother, confirm, another });
+
+const dialsToast = (table = [[]],
+    initial = [],
+    title = "", message = "",
+    callbackConfirm = (selections, keys, values) => {},
+    confirm = isKorean() ? "닫기" : "Close",
+    callbackAnother = null,
+    another = isKorean() ? "되돌리기" : "rollback",
+    callbackDissmiss = (selections, keys, values) => {},
+    callbackSelect = (boundIndex, index, value, selectionIndexes, selectionValues) => {},
+    aligns = [],
+    prefixes = [],
+    suffixes = [],
+    dividers = [],
+    stretch = t,
+    hideScrollbar = t,
+) => toastDials(title, message, table, initial, callbackConfirm, callbackSelect, callbackDissmiss, callbackAnother, confirm, another, aligns, prefixes, suffixes, dividers, stretch, hideScrollbar);
+
+
 
 
 //override global(window) methods
@@ -772,7 +886,7 @@ prompt = (title,
 
 // Infinite loop and prograss meter
 const waitings = new Set();
-let latestIO = null;
+// let latestIO = null;
 let backHolds = 0;
 
 /**
@@ -781,8 +895,8 @@ let backHolds = 0;
  * @param {instanceOrigin: string} / instance access origin code
  */
 const wait = function (options, instanceOrigin = "wait_" + Date.now()) {
-    if (instanceOrigin != n) waitings.add(instanceOrigin);
-    latestIO = instanceOrigin;
+    // if (instanceOrigin != n) waitings.add(instanceOrigin);
+    // latestIO = instanceOrigin;
     pageManager.bringPage("!onRunning", { data: options }, instanceOrigin);
     return instanceOrigin;
 }
@@ -795,15 +909,18 @@ const wait = function (options, instanceOrigin = "wait_" + Date.now()) {
  */
 const stedy = function (options, delay = 600, instanceOrigin = "stedy_" + Date.now()) {
     if (instanceOrigin != n) waitings.add(instanceOrigin);
-    latestIO = instanceOrigin;
+    // latestIO = instanceOrigin;
     setTimeout(_ => {
-        if (latestIO == instanceOrigin) wait(options, instanceOrigin);
+        if (waitings.has(instanceOrigin)) {
+            waitings.delete(instanceOrigin);
+            wait(options, instanceOrigin);
+        }
     }, delay);
     return instanceOrigin;
 }
 
 const onBackWhile = function (handle) {
-    if (handle != n || latestIO != n) {
+    if (handle != n) {// || latestIO != n) {
         backHolds++;
         return t;
     }
@@ -816,20 +933,24 @@ const onBackWhile = function (handle) {
  * @param {instanceOrigin} / instance access origin code
  */
 const go = function (instanceOrigin) {
-    if (instanceOrigin != n) {
-        if (waitings.has(instanceOrigin) == f) return;
+    // if (instanceOrigin != n) {
+    //     if (waitings.has(instanceOrigin) == f) return;
+    //     waitings.delete(instanceOrigin);
+    //     if (latestIO != instanceOrigin && waitings.size > 0) return;
+    // }
+    if (instanceOrigin != n && waitings.has(instanceOrigin)) {
         waitings.delete(instanceOrigin);
-        if (latestIO != instanceOrigin && waitings.size > 0) return;
+        // return instanceOrigin;
     }
     const aio = pageManager.closePage("!onRunning", f, instanceOrigin);
-    latestIO = n;
+    // latestIO = n;
     if (backHolds > 0) postAsyncQueue(async _ => {
         const holds = backHolds;
         backHolds = 0;
         await aio;
         if (window.isLogging) console.log("Release holded back requests");
-        // for (let i=0; i<holds; i++) await estreUi.onBack();
-        await estreUi.onBack();
+        for (let i=0; i<holds; i++) await estreUi.onBack();
+        // await estreUi.onBack();
     })
     return aio;
 }
@@ -1454,14 +1575,20 @@ class EstrePageHandle {
 
     hostType = "unknown";
 
-    host = null
+    #host = null;
+    get host() { return this.#host; }
+    #$host = null;
+    get $host() { return this.#$host; }
 
-    host = null;
-    $host = null;
     id = null;
+    get instanceId() { return !this.isStatic && this.isMultiInstance ? this.id + "^" + this.instanceOrigin : this.id; }
+    get instanceOrigin() { return !this.isStatic && this.isMultiInstance ? this.$host?.attr(eds.instanceOrigin)?.ifEmpty(_ => u) : u; }
+    set instanceOrigin(value) { if (!this.isStatic && this.isMultiInstance) this.$host?.attr(eds.instanceOrigin, value ?? ""); }
 
-    page = null;
-    pid = null;
+    #page = null;
+    get page() { return this.#page; }
+    get pid() { return this.page?.pid; }
+    get instancePid() { return this.page?.instancePid; }
 
     get isStatic() { return this.$host?.attr(eds.static) == t1; }
     get isFullyStatic() { return this.isStatic; }
@@ -1470,6 +1597,7 @@ class EstrePageHandle {
         const onTop = this.$host?.attr(eds.onTop);
         return onTop == t1 || onTop == "1*";
     }
+    get isMultiInstance() { return this.$host?.attr(eds.multiInstance) == t1; }
 
     get isCanBack() { return false; }
 
@@ -1546,24 +1674,29 @@ class EstrePageHandle {
     #intentProxy;
     #intentDataProxy;
     #intentDataBindProxy = {};
-    #revokeIntentProxy;
-    #revokeIntentDataProxy;
-    #revokeIntentDataBindProxy = {};
+    // #revokeIntentProxy;
+    // #revokeIntentDataProxy;
+    // #revokeIntentDataBindProxy = {};
 
     #isProcessing = f;
+    get isProcessing() { return this.#isProcessing; }
+
+    get mainArticle() { return this; }
 
-    constructor(host) {
-        this.host = host;
-        this.$host = $(host);
 
-        if (this.host.pageHandle != null && this.host.pageHandle != this) {
+    constructor(host, instanceOrigin) {
+        this.#host = host;
+        this.#$host = $(host);
+
+        if (host.pageHandle != null && host.pageHandle != this) {
             try {
-            this.host.pageHandle.release();
+            host.pageHandle.release();
             } catch (ex) {
                 if (window.isLogging) console.error(ex.name + "\n", ex.message);
             }
         }
-        this.host.pageHandle = this;
+        this.#host.pageHandle = this;
+        if (!this.isStatic && this.isMultiInstance) this.instanceOrigin = instanceOrigin ?? "ai_" + Date.now();
     }
 
     release(remove) {
@@ -1574,14 +1707,13 @@ class EstrePageHandle {
         if (remove === true) this.$host?.remove();
         else {
             if (remove === false) this.$host?.empty();
-            this.host = n;
-            this.$host = n;
+            this.#host = n;
+            this.#$host = n;
         }
     }
 
     init(page, intent) {
-        this.page = page;
-        this.pid = page.pid;
+        this.#page = page;
         page.fetchHandler(this);
         if (this.handler == null) this.setHandler(new EstrePageHandler(this));
 
@@ -1597,14 +1729,15 @@ class EstrePageHandle {
     }
 
     takeOnPageIntent(intent = {}) {
-        this.#revokeIntentProxy?.();
+        // this.#revokeIntentProxy?.();
         if (nn(intent?.data) && !intent.data.isProxy) intent.data = this.takeOnPageData(intent.data);
-        const { proxy, revoke } = nn(intent) ? Proxy.revocable(intent, {
+        // const { proxy, revoke } = nn(intent) ? Proxy.revocable(intent, {
+        const proxy = nn(intent) ? new Proxy(intent, {
             get: (target, prop) => prop == "isProxy" ? t : target[prop],
             set: (target, prop, value) => {
                 if (prop == "data") {
                     target.data = this.takeOnPageData(value);
-                    if (!this.#isProcessing) this.applyActiveStruct();
+                    if (!this.mainArticle.isProcessing) this.mainArticle.applyActiveStruct(this.mainArticle.$host, this);
                 } else target[prop] = value;
                 return t;
             },
@@ -1613,81 +1746,85 @@ class EstrePageHandle {
                     this.takeOnPageData(u);
                     delete target.data;
                 } else delete target[prop];
-                if (!this.#isProcessing) this.applyActiveStruct();
+                if (!this.mainArticle.isProcessing) this.mainArticle.applyActiveStruct(this.mainArticle.$host, this);
                 return t;
             },
-        }) : { proxy: u, revoke: u };
+        }) : u;//{ proxy: u, revoke: u };
         this.#intentProxy = proxy;
-        this.#revokeIntentProxy = revoke;
+        // this.#revokeIntentProxy = revoke;
         return proxy ?? intent;
     }
 
     takeOnPageData(data = {}) {
-        this.#revokeIntentDataProxy?.();
+        // this.#revokeIntentDataProxy?.();
         const isObject = nn(data) && tj(data);
         if (isObject) for (const key in data) if (!data[key]?.isProxy) data[key] = this.takeOnPageBind(key, data[key]);
-        const { proxy, revoke } = isObject ? Proxy.revocable(data, {
+        // const { proxy, revoke } = isObject ? Proxy.revocable(data, {
+        const proxy = isObject ? new Proxy(data, {
             get: (target, prop) => prop == "isProxy" ? t : target[prop],
             set: (target, prop, value) => {
                 target[prop] = this.takeOnPageBind(prop, value);
-                if (!this.#isProcessing) this.applyActiveStruct();
+                if (!this.mainArticle.isProcessing) this.mainArticle.applyActiveStruct(this.mainArticle.$host, this);
                 return t;
             },
             deleteProperty: (target, prop) => {
                 this.takeOnPageBind(prop, u);
                 delete target[prop];
-                if (!this.#isProcessing) this.applyActiveStruct();
+                if (!this.mainArticle.isProcessing) this.mainArticle.applyActiveStruct(this.mainArticle.$host, this);
                 return t;
             },
-        }) : { proxy: u, revoke: u };
+        }) : u;//{ proxy: u, revoke: u };
         this.#intentDataProxy = proxy;
-        this.#revokeIntentDataProxy = revoke;
+        // this.#revokeIntentDataProxy = revoke;
         return proxy ?? data;
     }
 
     takeOnPageBind(pr, bind) {
-        const rv = this.#revokeIntentDataBindProxy[pr];
-        if (tf(rv)) rv();
+        // const rv = this.#revokeIntentDataBindProxy[pr];
+        // if (tf(rv)) rv();
         if (nn(bind) && tj(bind)) {
-            const { proxy, revoke } = Proxy.revocable(bind, {
+            // const { proxy, revoke } = Proxy.revocable(bind, {
+            const proxy = new Proxy(bind, {
                 get: (target, prop) => prop == "isProxy" ? t : target[prop],
                 set: (target, prop, value) => {
                     target[prop] = value;
-                    if (!this.#isProcessing) this.applyActiveStruct();
+                    if (!this.mainArticle.isProcessing) this.mainArticle.applyActiveStruct(this.mainArticle.$host, this);
                     return t;
                 },
                 deleteProperty: (target, prop) => {
                     delete target[prop];
-                    if (!this.#isProcessing) this.applyActiveStruct();
+                    if (!this.mainArticle.isProcessing) this.mainArticle.applyActiveStruct(this.mainArticle.$host, this);
                     return t;
                 },
             });
             this.#intentDataBindProxy[pr] = proxy;
-            this.#revokeIntentDataBindProxy[pr] = revoke;
+            // this.#revokeIntentDataBindProxy[pr] = revoke;
             return proxy;
         } else {
             delete this.#intentDataBindProxy[pr];
-            delete this.#revokeIntentDataBindProxy[pr];
+            // delete this.#revokeIntentDataBindProxy[pr];
             return bind;
         }
     }
 
-    apply(process = (data, intent) => {}, $bound = this.$host) {
+    apply(process = (data, intent) => {}, $bound = this.mainArticle.$host, handle = this) {
+        if (this.mainArticle != this) return this.mainArticle.apply(process, $bound, this);
         const isAlreadyProcessing = this.#isProcessing;
         if (!isAlreadyProcessing) this.#isProcessing = t;
         this.placeIntentData();
         process(this.intent.data, this.intent);
         if (!isAlreadyProcessing) this.#isProcessing = f;
-        return this.applyActiveStruct($bound);
+        return this.applyActiveStruct($bound, handle);
     }
 
-    async applyAsync(process = async (data, intent) => {}, $bound = this.$host) {
+    async applyAsync(process = async (data, intent) => {}, $bound = this.mainArticle.$host, handle = this) {
+        if (this.mainArticle != this) return await this.mainArticle.applyAsync(process, $bound, handle);
         const isAlreadyProcessing = this.#isProcessing;
         if (!isAlreadyProcessing) this.#isProcessing = t;
         this.placeIntentData();
         await process(this.intent.data, this.intent);
         if (!isAlreadyProcessing) this.#isProcessing = f;
-        return await this.applyActiveStruct($bound);
+        return await this.applyActiveStruct($bound, handle);
     }
 
     placeIntent(intent = {}) {
@@ -1929,11 +2066,11 @@ class EstrePageHandle {
             if (this.handler?.onRelease != null) await this.handler.onRelease(this, remove);
             if (this.intent?.onRelease != null) for (var item of this.intent.onRelease) if (item.from == this.hostType && !item.disabled) await this.processAction(item);
 
-            for (const revoke of this.#revokeIntentDataBindProxy.looks) try {
-                revoke?.();
-            } catch (ex) {}
-            this.#revokeIntentDataProxy?.();
-            this.#revokeIntentProxy?.();
+            // for (const revoke of this.#revokeIntentDataBindProxy.looks) try {
+            //     revoke?.();
+            // } catch (ex) {}
+            // this.#revokeIntentDataProxy?.();
+            // this.#revokeIntentProxy?.();
             return true;
         } else return false;
     }
@@ -1967,11 +2104,13 @@ class EstrePageHandle {
 
 
     // active struct master
-    applyActiveStruct($host = this.$host, replaceHandles = false) {
+    applyActiveStruct($host = this.$host, handle = this, replaceHandles = false) {
         this.initContentBrokers($host);
         this.initLiveElement($host, replaceHandles);
 
-        return this.handler.onApplied?.(this, this.intent?.data, this.intent, $host, replaceHandles);
+        const applied = this.handler.onApplied?.(this, this.intent?.data, this.intent, $host, replaceHandles);
+        if (handle != this) handle.handler.onApplied?.(handle, handle.intent?.data, handle.intent, $host, replaceHandles);
+        return applied;
     }
 
     applyActiveStructLocalBind($host = this.$host) {
@@ -1998,11 +2137,11 @@ class EstrePageHandle {
         const eachTarget = ($elem, attrId, each = (target, prefix = "", suffix = "") => {}) => {
             const specifier = $elem.attr(attrId);
             if (specifier != null && specifier != "") {
-                const targets = specifier.split(" ");
+                const targets = specifier.split(s);
                 for (let target of targets) {
                     let prefix = "", suffix = "";
-                    if (target.indexOf("^") > -1) [target, prefix] = target.split("^");
-                    if (target.indexOf("$") > -1) [suffix, target] = target.split("$");
+                    if (target.indexOf(cf) > -1) [target, prefix] = target.split(cf);
+                    if (target.indexOf(ds) > -1) [suffix, target] = target.split(ds);
                     each(target, prefix, suffix);
                 }
             }
@@ -2010,12 +2149,12 @@ class EstrePageHandle {
         const eachTargetFor = ($elem, attrId, each = (targetItem, targetName, prefix = "", suffix = "") => {}) => {
             const specifier = $elem.attr(attrId);
             if (specifier != null && specifier != "") {
-                const targets = specifier.split(" ");
+                const targets = specifier.split(s);
                 for (const target of targets) {
-                    let [targetItem, targetName] = target.split("@");
+                    let [targetItem, targetName] = target.split(at);
                     let prefix = "", suffix = "";
-                    if (targetItem.indexOf("^") > -1) [targetItem, prefix] = targetItem.split("^");
-                    if (targetItem.indexOf("$") > -1) [suffix, targetItem] = targetItem.split("$");
+                    if (targetItem.indexOf(cf) > -1) [targetItem, prefix] = targetItem.split(cf);
+                    if (targetItem.indexOf(ds) > -1) [suffix, targetItem] = targetItem.split(ds);
                     each(targetItem, targetName, prefix, suffix);
                 }
             }
@@ -2036,20 +2175,20 @@ class EstrePageHandle {
                 $host.find(aiv(eds.bindAmount, item)).html(v2a(value));
                 $host.find(aiv(eds.bindValue, item)).val(value);
 
-                if ($host.is(acv(eds.bindAttr, item + "@"))) eachTargetFor($host, eds.bindAttr, (targetItem, targetAttr, prefix = "", suffix = "") => {
+                if ($host.is(acv(eds.bindAttr, item) + acv(eds.bindAttr, at))) eachTargetFor($host, eds.bindAttr, (targetItem, targetAttr, prefix = "", suffix = "") => {
                     if (targetItem == item) $host.attr(targetAttr, prefix + value + suffix);
                 });
-                $host.find(acv(eds.bindAttr, item + "@")).each((i, elem) => {
+                $host.find(acv(eds.bindAttr, item) + acv(eds.bindAttr, at)).each((i, elem) => {
                     const $elem = $(elem);
                     eachTargetFor($elem, eds.bindAttr, (targetItem, targetAttr, prefix = "", suffix = "") => {
                         if (targetItem == item) $elem.attr(targetAttr, prefix + value + suffix);
                     });
                 });
 
-                if ($host.find(acv(eds.bindStyle, item + "@"))) eachTargetFor($host, eds.bindStyle, (targetItem, targetStyle, prefix = "", suffix = "") => {
+                if ($host.find(acv(eds.bindStyle, item) + acv(eds.bindStyle, at))) eachTargetFor($host, eds.bindStyle, (targetItem, targetStyle, prefix = "", suffix = "") => {
                     if (targetItem == item) $host.css(targetStyle, prefix + value + suffix);
                 });
-                $host.find(acv(eds.bindStyle, item + "@")).each((i, elem) => {
+                $host.find(acv(eds.bindStyle, item) + acv(eds.bindStyle, at)).each((i, elem) => {
                     const $elem = $(elem);
                     eachTargetFor($elem, eds.bindStyle, (targetItem, targetStyle, prefix = "", suffix = "") => {
                         if (targetItem == item) $elem.css(targetStyle, prefix + value + suffix);
@@ -2112,10 +2251,10 @@ class EstrePageHandle {
                                     $li.find(aiv(eds.bindObjectArrayAmount, objItem)).html(v2a(value));
                                     $li.find(aiv(eds.bindObjectArrayValue, objItem)).val(value);
 
-                                    if ($li.is(acv(eds.bindObjectArrayAttr, objItem + "@"))) eachTargetFor($li, eds.bindObjectArrayAttr, (targetItem, targetAttr, prefix = "", suffix = "") => {
+                                    if ($li.is(acv(eds.bindObjectArrayAttr, objItem) + acv(eds.bindObjectArrayAttr, at))) eachTargetFor($li, eds.bindObjectArrayAttr, (targetItem, targetAttr, prefix = "", suffix = "") => {
                                         if (targetItem == objItem) $li.attr(targetAttr, prefix + value + suffix);
                                     });
-                                    $li.find(acv(eds.bindObjectArrayAttr, objItem + "@")).each((i, elem) => {
+                                    $li.find(acv(eds.bindObjectArrayAttr, objItem) + acv(eds.bindObjectArrayAttr, at)).each((i, elem) => {
                                         const $elem = $(elem);
                                         eachTargetFor($elem, eds.bindObjectArrayAttr, (targetItem, targetAttr, prefix = "", suffix = "") => {
                                             if (targetItem == objItem) $elem.attr(targetAttr, prefix + value + suffix);
@@ -2124,10 +2263,10 @@ class EstrePageHandle {
 
                                     const styleValue = isEmpty(value) ? "unset" : value;
 
-                                    if ($li.is(acv(eds.bindObjectArrayStyle, objItem + "@"))) eachTargetFor($li, eds.bindObjectArrayStyle, (targetItem, targetStyle, prefix = "", suffix = "") => {
+                                    if ($li.is(acv(eds.bindObjectArrayStyle, objItem) + acv(eds.bindObjectArrayStyle, at))) eachTargetFor($li, eds.bindObjectArrayStyle, (targetItem, targetStyle, prefix = "", suffix = "") => {
                                         if (targetItem == objItem) $li.css(targetStyle, prefix + styleValue + suffix);
                                     });
-                                    $li.find(acv(eds.bindObjectArrayStyle, objItem + "@")).each((i, elem) => {
+                                    $li.find(acv(eds.bindObjectArrayStyle, objItem) + acv(eds.bindObjectArrayStyle, at)).each((i, elem) => {
                                         const $elem = $(elem);
                                         eachTargetFor($elem, eds.bindObjectArrayStyle, (targetItem, targetStyle, prefix = "", suffix = "") => {
                                             if (targetItem == objItem) $elem.css(targetStyle, prefix + styleValue + suffix);
@@ -2687,13 +2826,27 @@ class EstrePageHostHandle extends EstrePageHandle {
 
     get currentTop() { return this.currentOnTop ?? this.subPageList.at(-1); }
 
-    #prevSubPageId = null;
-    get prevSubPageId() { return this.#prevSubPageId; };
-    set prevSubPageId(id) { 
-        this.#prevSubPageId = id;
+    #prevSubPageIds = new Set();
+    get latestSubPageId() { return [...this.#prevSubPageIds].pop(); }
+    get prevSubPageId() {
+        const subPageIds = this.subPages.ways;
+        let latestSubPageId = null;
+        while (latestSubPageId = this.latestSubPageId) {
+            this.#prevSubPageIds.delete(latestSubPageId);
+            if (subPageIds.includes(latestSubPageId)) return latestSubPageId;
+        }
+        return null;
+    };
+    set prevSubPageId(id) {
+        if (id == null) return;
+        if (this.#prevSubPageIds.has(id)) this.$prevSubPages.delete(id);
+        this.#prevSubPageIds.add(id);
     };
 
-    get isAvailablePrevSubPage() { return this.prevSubPageId != null && this.subPages[this.prevSubPageId] != null; }
+    get isAvailablePrevSubPage() {
+        const latestSubPageId = this.latestSubPageId;
+        return latestSubPageId != null && this.subPages[latestSubPageId] != null;
+    }
 
 
     initSubPages(intent) {
@@ -2709,19 +2862,19 @@ class EstrePageHostHandle extends EstrePageHandle {
     }
 
 
-    showSubPage(id, intent) {
+    showSubPage(id, intent, instanceOrigin) {
         return false;
     }
 
-    openSubPage(id, intent) {
+    openSubPage(id, intent, instanceOrigin) {
         return false;
     }
 
-    bringSubPage(id, intent) {
+    bringSubPage(id, intent, instanceOrigin) {
         return false;
     }
 
-    closeSubPage(id, isTermination = false) {
+    closeSubPage(id, instanceOrigin, isTermination = false) {
 
     }
 
@@ -2762,12 +2915,13 @@ class EstreComponent extends EstrePageHostHandle {
         if (registered === false) return false;
         this.unregister(component);
         this.componentList.push(component);
-        this.components[component.id] = component;
+        this.components[component.instanceId] = component;
         return registered;
     }
 
     static unregister(component) {
-        if (this.components[component.id] != null) delete this.components[component.id];
+        const instanceId = component.instanceId;
+        if (this.components[instanceId] != null) delete this.components[instanceId];
         const index = this.componentList.indexOf(component);
         if (index > -1) this.componentList.splice(index, 1);
         return EstreUiPage.unregisterFrom(component);
@@ -2777,7 +2931,8 @@ class EstreComponent extends EstrePageHostHandle {
     // instance property
     get isCanBack() { switch (this.sectionBound) {
             case "main":
-                return !this.isHome && ((estreUi.prevRootTabId != null && estreUi.mainSections[estreUi.prevRootTabId] != null) || estreUi.mainSections["home"] != null);
+                const latestRootTabId = estreUi.latestRootTabId;
+                return !this.isHome && ((latestRootTabId != null && estreUi.mainSections[latestRootTabId] != null) || estreUi.mainSections["home"] != null);
 
             case "blind":
             case "menu":
@@ -2815,8 +2970,8 @@ class EstreComponent extends EstrePageHostHandle {
 
     get isHome() { return this.id == "home" || this.$host.hasClass("home"); }
 
-    constructor(component) {
-        super(component);
+    constructor(component, instanceOrigin) {
+        super(component, instanceOrigin);
         this.id = component.id;
     }
 
@@ -2851,8 +3006,8 @@ class EstreComponent extends EstrePageHostHandle {
         return this.initContainers(intent);
     }
 
-    registerSubPage(element, intent) {
-        return this.registerContainer(element, intent);
+    registerSubPage(element, intent, instanceOrigin) {
+        return this.registerContainer(element, intent, instanceOrigin);
     }
 
     unregisterSubPage(pageHandle) {
@@ -2872,11 +3027,12 @@ class EstreComponent extends EstrePageHostHandle {
         $top[$top.length - 1]?.pageHandle?.show(false, false);
     }
 
-    registerContainer(element, intent) {
+    registerContainer(element, intent, instanceOrigin) {
         this.unregisterConatiner(element.pageHandle);
-        const container = new EstreContainer(element, this);
-        this.$container[container.id] = container.$host;
-        this.containers[container.id] = container;
+        const container = new EstreContainer(element, this, instanceOrigin);
+        const instanceId = container.instanceId;
+        this.$container[instanceId] = container.$host;
+        this.containers[instanceId] = container;
         this.containerList.push(container);
         const registered = EstreUiPage.registerOrCommitFrom(container);
         container.init(registered, intent);
@@ -2886,10 +3042,11 @@ class EstreComponent extends EstrePageHostHandle {
 
     unregisterConatiner(container) {
         if (container == null) return;
+        const instanceId = container.instanceId;
         const unregitered = EstreUiPage.unregisterFrom(container);
         container.release(!container.isStatic ? true : null);
-        if (this.$container[container.id] != null) delete this.$container[container.id];
-        if (this.containers[container.id] != null) delete this.containers[container.id];
+        if (this.$container[instanceId] != null) delete this.$container[instanceId];
+        if (this.containers[instanceId] != null) delete this.containers[instanceId];
         const index = this.containerList.indexOf(container);
         if (index > -1) this.containerList.splice(index, 1);
         return unregitered;
@@ -2897,29 +3054,28 @@ class EstreComponent extends EstrePageHostHandle {
 
 
     // handles
-    showSubPage(id, intent) {
-        return this.showContainer(id, intent);
+    showSubPage(id, intent, instanceOrigin) {
+        return this.showContainer(id, intent, instanceOrigin);
     }
 
-    openSubPage(id, intent) {
-        return this.openContainer(id, intent);
+    openSubPage(id, intent, instanceOrigin) {
+        return this.openContainer(id, intent, instanceOrigin);
     }
 
-    bringSubPage(id, intent) {
-        return this.bringContainer(id, intent);
+    bringSubPage(id, intent, instanceOrigin) {
+        return this.bringContainer(id, intent, instanceOrigin);
     }
 
-    closeSubPage(id, isTermination = false) {
-        return this.closeContainer(id, isTermination);
+    closeSubPage(id, instanceOrigin, isTermination = false) {
+        return this.closeContainer(id, instanceOrigin, isTermination);
     }
 
-    showContainer(id, intent) {
+    showContainer(id, intent, instanceOrigin) {
         if (id != null && !this.isClosing) {
-            const container = this.containers[id];
-            if (container != null) {
+            const show = container => {
                 const currentTopHandle = this.currentTop;
-                const currentTopHandleId = currentTopHandle.id;
-                if (id != currentTopHandleId && currentTopHandleId != this.prevSubPageId) {
+                const currentTopHandleId = currentTopHandle.instanceId;
+                if (id != currentTopHandleId && currentTopHandleId != this.latestSubPageId) {
                     this.prevSubPageId = currentTopHandleId;
 
                     // if (estreUi.euiState == "onReady" && currentTopHandle != null) switch (currentTopHandle.sectionBound) {
@@ -2944,12 +3100,23 @@ class EstreComponent extends EstrePageHostHandle {
                         break;
                 }
                 return true;
+            };
+            
+            const container = this.containers[id + (instanceOrigin?.let(it => "^" + it) ?? "")];
+            if (container != null) return show(container);
+            else if (instanceOrigin == n) {
+                const containerIds = this.containers.ways.filter(it => it.startsWith(id + "^"));
+                if (containerIds.length > 0) {
+                    const containerId = containerIds[containerIds.length - 1];
+                    const container = this.containers[containerId];
+                    if (container != null) return show(container);
+                }
             }
         }
         return false;
     }
 
-    openContainer(id, intent) {
+    openContainer(id, intent, instanceOrigin) {
         if (this.isClosing) return false;
         const page = pageManager.getConatiner(id, this.id, this.sectionBound);
         if (page == null) return null;
@@ -2957,13 +3124,12 @@ class EstreComponent extends EstrePageHostHandle {
         this.$host.append(page.live);
         const $container = this.$containers.filter(aiv(eds.containerId, id));
         if ($container == null || $container.length < 1) return null;
-        return this.registerContainer($container[0], intent);
+        return this.registerContainer($container[$container.length - 1], intent, instanceOrigin);
     }
 
-    closeContainer(id, isTermination = false) {
+    closeContainer(id, instanceOrigin, isTermination = false) {
         if (id != null) {
-            const container = this.containers[id];
-            if (container != null) {
+            const close = container => {
                 const task = container.close(false, isTermination || !container.isStatic);
                 if (!isTermination && !this.isClosing) postAsyncQueue(async _ => {
                     if (this.isClosing) return;
@@ -2971,9 +3137,8 @@ class EstreComponent extends EstrePageHostHandle {
                     const subPageList = this.subPageList.filter(it => !it.isClosing && it != target);
                     if (subPageList.length > 0) {
                         const prev = this.prevSubPageId;
-                        if (prev != null && id != prev && this.subPages[prev] != null) {
-                            if (this.showSubPage(prev)) this.prevSubPageId = null;
-                        } else subPageList[subPageList.length - 1].show();
+                        if (prev != null) this.showSubPage(prev);
+                        else subPageList[subPageList.length - 1].show();
                     } else {
                         await task;
                         if (!this.isClosing && !this.isStatic && subPageList.length < 1) this.close(true, true);
@@ -2984,16 +3149,27 @@ class EstreComponent extends EstrePageHostHandle {
                     if (isTermination || !container.isStatic) this.unregisterConatiner(container);
                     return result;
                 });
+            };
+
+            const container = this.containers[id + (instanceOrigin?.let(it => "^" + it) ?? "")];
+            if (container != null) return close(container);
+            else if (instanceOrigin == n) {
+                const containerIds = this.containers.ways.filter(it => it.startsWith(id + "^"));
+                if (containerIds.length > 0) {
+                    const containerId = containerIds[containerIds.length - 1];
+                    const container = this.containers[containerId];
+                    return close(container);
+                }
             }
         }
         return null;
     }
 
-    bringContainer(id, intent) {
+    bringContainer(id, intent, instanceOrigin) {
         if (this.containers[id] == null) {
-            if (this.openContainer(id, intent)) return this.showContainer(id);
+            if (this.openContainer(id, intent, instanceOrigin)) return this.showContainer(id, u, instanceOrigin);
             else return false;
-        } else return this.showContainer(id, intent);
+        } else return this.showContainer(id, intent, instanceOrigin);
     }
 
     onCloseContainer() {
@@ -3046,7 +3222,7 @@ class EstreComponent extends EstrePageHostHandle {
         else return false;
     }
 
-    close(isRequest = true, isTermination = false) {
+    close(isRequest = true, isTermination = !this.isStatic) {
         if (isRequest) {
             if (this.isModal) {
                 return this.onTop ? estreUi.closeModalTab(this.id, this.$host) : false;
@@ -3115,8 +3291,8 @@ class EstreMenuComponent extends EstreComponent {
 
 
 
-    constructor(component) {
-        super(component);
+    constructor(component, instanceOrigin) {
+        super(component, instanceOrigin);
     }
 
     release(remove) {
@@ -3149,9 +3325,9 @@ class EstreMenuComponent extends EstreComponent {
         } else super.show(false, setFocus);
     }
 
-    close(isRequest = true, isTermination = false) {
+    close(isRequest = true, isTermination = !this.isStatic) {
         if (isRequest) {
-            return estreUi.closeMenuArea(this.id, isTermination);
+            return estreUi.closeMenuArea(this.id, this.instanceOrigin, isTermination);
         } else return super.close(false, isTermination);
     }
 }
@@ -3179,8 +3355,8 @@ class EstreHeaderComponent extends EstreComponent {
 
 
 
-    constructor(component) {
-        super(component);
+    constructor(component, instanceOrigin) {
+        super(component, instanceOrigin);
     }
 
     release(remove) {
@@ -3213,9 +3389,9 @@ class EstreHeaderComponent extends EstreComponent {
         } else super.show(false, setFocus);
     }
 
-    close(isRequest = true, isTermination = false) {
+    close(isRequest = true, isTermination = !this.isStatic) {
         if (isRequest) {
-            return estreUi.closeHeaderBar(this.id, isTermination);
+            return estreUi.closeHeaderBar(this.id, this.instanceOrigin, isTermination);
         } else return super.close(false, isTermination);
     }
 }
@@ -3243,8 +3419,8 @@ class EstreInstantComponent extends EstreComponent {
 
 
 
-    constructor(component) {
-        super(component);
+    constructor(component, instanceOrigin) {
+        super(component, instanceOrigin);
     }
 
     release(remove) {
@@ -3277,9 +3453,9 @@ class EstreInstantComponent extends EstreComponent {
         } else super.show(false, setFocus);
     }
 
-    close(isRequest = true, isTermination = false) {
+    close(isRequest = true, isTermination = !this.isStatic) {
         if (isRequest) {
-            return estreUi.closeInstantBlinded(this.id, isTermination);
+            return estreUi.closeInstantBlinded(this.id, this.instanceOrigin, isTermination);
         } else return super.close(false, isTermination);
     }
 }
@@ -3307,8 +3483,8 @@ class EstreOverlayComponent extends EstreInstantComponent {
 
 
 
-    constructor(component) {
-        super(component);
+    constructor(component, instanceOrigin) {
+        super(component, instanceOrigin);
     }
 
     release(remove) {
@@ -3341,9 +3517,9 @@ class EstreOverlayComponent extends EstreInstantComponent {
         } else super.show(false, setFocus);
     }
 
-    close(isRequest = true, isTermination = false) {
+    close(isRequest = true, isTermination = !this.isStatic) {
         if (isRequest) {
-            return estreUi.closeManagedOverlay(this.id, isTermination);
+            return estreUi.closeManagedOverlay(this.id, this.instanceOrigin, isTermination);
         } else return super.close(false, isTermination);
     }
 }
@@ -3418,8 +3594,8 @@ class EstreContainer extends EstrePageHostHandle {
     }
     get stepPagesLength() { return pageManager.getStepPagesLength(this.#articleStepsId, this.id, this.component.id, this.component.sectionBound); }
 
-    constructor(container, component) {
-        super(container);
+    constructor(container, component, instanceOrigin) {
+        super(container, instanceOrigin);
         this.component = component;
         this.id = this.$host.attr(eds.containerId);
     }
@@ -3499,8 +3675,8 @@ class EstreContainer extends EstrePageHostHandle {
         return this.initArticles(intent);
     }
 
-    registerSubPage(element, intent) {
-        return this.registerArticle(element, intent);
+    registerSubPage(element, intent, instanceOrigin) {
+        return this.registerArticle(element, intent, instanceOrigin);
     }
 
     unregisterConatiner(pageHandle) {
@@ -3551,11 +3727,12 @@ class EstreContainer extends EstrePageHostHandle {
         }
     }
 
-    registerArticle(element, intent) {
+    registerArticle(element, intent, instanceOrigin) {
         this.unregisterArticle(element.pageHandle);
-        const article = new EstreArticle(element, this);
-        this.$article[article.id] = article.$host;
-        this.articles[article.id] = article;
+        const article = new EstreArticle(element, this, instanceOrigin);
+        const instanceId = article.instanceId;
+        this.$article[instanceId] = article.$host;
+        this.articles[instanceId] = article;
         this.articleList.push(article);
         const registered = EstreUiPage.registerOrCommitFrom(article);
         article.init(registered, intent);
@@ -3565,10 +3742,11 @@ class EstreContainer extends EstrePageHostHandle {
 
     unregisterArticle(article) {
         if (article == null) return;
+        const instanceId = article.instanceId;
         const unregistered = EstreUiPage.unregisterFrom(article);
         article.release(!article.isStatic ? true : null);
-        if (this.$article[article.id] != null) delete this.$article[article.id];
-        if (this.articles[article.id] != null) delete this.articles[article.id];
+        if (this.$article[instanceId] != null) delete this.$article[instanceId];
+        if (this.articles[instanceId] != null) delete this.articles[instanceId];
         const index = this.articleList.indexOf(article);
         if (index > -1) this.articleList.splice(index, 1);
         return unregistered;
@@ -3702,7 +3880,7 @@ class EstreContainer extends EstrePageHostHandle {
 
     close(isRequest = true, isTermination = false) {
         if (isRequest) {
-            return this.component.closeContainer(this.id, isTermination) ?? super.close(isTermination);
+            return this.component.closeContainer(this.id, this.instanceOrigin, isTermination) ?? super.close(isTermination);
         } else return super.close(isTermination);
     }
 
@@ -3744,7 +3922,7 @@ class EstreContainer extends EstrePageHostHandle {
 
         if (stepped.length > 0) {
             const sorted = stepped.sort();
-            for (var i=sorted.length-1; i>-1; i--) closer.push(this.closeArticle(sorted[i], isTermination));
+            for (var i=sorted.length-1; i>-1; i--) closer.push(this.closeArticle(sorted[i], u, isTermination));
         } else {
             for (var article of this.articleList.reverse()) closer.push(article.close(true, isTermination));
         }
@@ -3756,32 +3934,31 @@ class EstreContainer extends EstrePageHostHandle {
 
 
     // handles
-    showSubPage(id, intent) {
-        return this.showArticle(id, intent);
+    showSubPage(id, intent, instanceOrigin) {
+        return this.showArticle(id, intent, instanceOrigin);
     }
 
-    openSubPage(id, intent) {
-        return this.openArticle(id, intent);
+    openSubPage(id, intent, instanceOrigin) {
+        return this.openArticle(id, intent, instanceOrigin);
     }
 
     bringSubPage(id, intent) {
-        return this.bringArticle(id, intent);
+        return this.bringArticle(id, intent, instanceOrigin);
     }
 
-    closeSubPage(id, isTermination = false) {
-        return this.closeArticle(id, isTermination);
+    closeSubPage(id, instanceOrigin, isTermination = false) {
+        return this.closeArticle(id, instanceOrigin, isTermination);
     }
 
-    showArticle(id, intent) {
+    showArticle(id, intent, instanceOrigin) {
         if (id != null && !this.isClosing) {
-            const $target = this.$article[id];
-            if ($target != null && $target.length > 0) {
+            const show = $target => {
                 const onlyOne = this.$articles.filter(ntc("dummy")).length === 1;
                 const $currentTop = this.$articles.filter(asv(eds.onTop, t1));
                 //console.log("current top: ", $currentTop);
                 const currentTopHandle = this.currentTop;
                 const currentTopHandleId = currentTopHandle.id;
-                if (id != currentTopHandleId && currentTopHandleId != this.prevSubPageId) {
+                if (id != currentTopHandleId && currentTopHandleId != this.latestSubPageId) {
                     this.prevSubPageId = currentTopHandleId;
 
                     // if (estreUi.euiState == "onReady" && currentTopHandle != null) estreUi.pushCurrentState(currentTopHandle);
@@ -3853,23 +4030,36 @@ class EstreContainer extends EstrePageHostHandle {
                     }
                     return true;
                 }
+            };
+            
+            const $target = this.$article[id + (instanceOrigin?.let(it => "^" + it) ?? "")];
+            if ($target != null && $target.length > 0) return show($target);
+            else if (instanceOrigin == n) {
+                const articleIds = this.$article.ways.filter(it => it.startsWith(id + "^"));
+                if (articleIds.length > 0) {
+                    const articleId = articleIds[articleIds.length - 1];
+                    const $target = this.$article[articleId];
+                    if ($target != null && $target.length > 0) return show($target);
+                }
             }
         }
         return false;
     }
 
-    openArticle(id, intent) {
+    openArticle(id, intent, instanceOrigin) {
         if (this.isClosing) return false;
         const page = pageManager.getArticle(id, this.id, this.component.id, this.component.sectionBound);
         if (page == null) return null;
         if (page.statement == "static") return null;
-        var $exist = this.$articles.filter(aiv(eds.articleId, id));
-        if ($exist.length > 0) {
-            this.closeArticle(id);
+        if (!page.isMultiInstance) {
             var $exist = this.$articles.filter(aiv(eds.articleId, id));
             if ($exist.length > 0) {
-                if ($exist[0].pageHandle != null) $exist[0].pageHandle.release(true);
-                else $exist.remove();
+                this.closeArticle(id);
+                var $exist = this.$articles.filter(aiv(eds.articleId, id));
+                if ($exist.length > 0) {
+                    if ($exist[0].pageHandle != null) $exist[0].pageHandle.release(true);
+                    else $exist.remove();
+                }
             }
         }
         const $articles = this.$articles;
@@ -3878,22 +4068,21 @@ class EstreContainer extends EstrePageHostHandle {
         else this.$host.append(page.live);
         const $article = this.$articles.filter(aiv(eds.articleId, id));
         if ($article == null || $article.length < 1) return null;
-        const article = this.registerArticle($article[0], intent);
+        const article = this.registerArticle($article[$article.length - 1], intent, instanceOrigin);
         //this.#updateStepNavigation();
         return article;
     }
 
-    bringArticle(id, intent) {
+    bringArticle(id, intent, instanceOrigin) {
         if (this.articles[id] == null) {
-            if (this.openArticle(id, intent)) return this.showArticle(id);
+            if (this.openArticle(id, intent, instanceOrigin)) return this.showArticle(id);
             else return false;
         } else return this.showArticle(id, intent);
     }
 
-    closeArticle(id, isTermination = false) {
+    closeArticle(id, instanceOrigin, isTermination = false) {
         if (id != null) {
-            const article = this.articles[id];
-            if (article != null) {
+            const close = article => {
                 const task = article.close(false, isTermination || !article.isStatic);
                 if (!isTermination && !this.isClosing) postAsyncQueue(async _ => {
                     if (this.isClosing) return;
@@ -3901,9 +4090,8 @@ class EstreContainer extends EstrePageHostHandle {
                     const subPageList = this.subPageList.filter(it => !it.isClosing && it != target);
                     if (subPageList.length > 0) {
                         const prev = this.prevSubPageId;
-                        if (prev != null && id != prev && this.subPages[prev] != null) {
-                            if (this.showSubPage(prev)) this.prevSubPageId = null;
-                        } else subPageList[subPageList.length - 1].show();
+                        if (prev != null) this.showSubPage(prev);
+                        else subPageList[subPageList.length - 1].show();
                     } else {
                         await task;
                         if (!this.isClosing && !this.isStatic && subPageList.length < 1) this.close(true, true);
@@ -3914,6 +4102,17 @@ class EstreContainer extends EstrePageHostHandle {
                     if (isTermination || !article.isStatic) this.unregisterArticle(article);
                     return result;
                 });
+            };
+
+            const article = this.articles[id + (instanceOrigin?.let(it => "^" + it) ?? "")];
+            if (article != null) return close(article);
+            else if (instanceOrigin == n) {
+                const articleIds = this.$article.ways.filter(it => it.startsWith(id + "^"));
+                if (articleIds.length > 0) {
+                    const articleId = articleIds[articleIds.length - 1];
+                    const article = this.articles[articleId];
+                    return close(article);
+                }
             }
         }
         return null;
@@ -3959,8 +4158,8 @@ class EstreArticle extends EstrePageHandle {
 
     dateShowers = [];
 
-    constructor(article, container) {
-        super(article);
+    constructor(article, container, instanceOrigin) {
+        super(article, instanceOrigin);
         this.container = container;
         this.id = this.$host.attr(eds.articleId);
     }
@@ -4005,7 +4204,7 @@ class EstreArticle extends EstrePageHandle {
 
     close(isRequest = true, isTermination = false) {
         if (isRequest) {
-            return this.container.closeArticle(this.id, isTermination) ?? super.close(isTermination);
+            return this.container.closeArticle(this.id, this.instanceOrigin, isTermination) ?? super.close(isTermination);
         } else return super.close(isTermination);
     }
 
@@ -4458,11 +4657,11 @@ class EstreSelectionDialogPageHandler extends EstreDialogPageHandler {
         if (isNotNully(defaultSelected)) forkv(defaultSelected, (k, v) => {
             switch(to(v)) {
                 case BOOLEAN:
-                    this.$optionCheckboxes.filter(aiv("data-index", k)).prop(m.v, v);
+                    this.$optionCheckboxes.filter(aiv(eds.index, k)).prop(m.v, v);
                     break;
                 
                 case NUMBER:
-                    this.$optionCheckboxes.filter(aiv("data-index", v)).prop(m.v, true);
+                    this.$optionCheckboxes.filter(aiv(eds.index, v)).prop(m.v, true);
                     break;
             }
         });
@@ -4535,6 +4734,72 @@ class EstreSelectionDialogPageHandler extends EstreDialogPageHandler {
     }
 }
 
+class EstreDialsDialogPageHandler extends EstreDialogPageHandler {
+    $dial;
+    dialHandle;
+
+    $confirm;
+    $another;
+
+    onBring(handle) {
+        super.onBring(handle);
+
+        this.$dial = handle.$host.find(uis.multiDialSlot);
+
+        this.$confirm = this.$actions.find(btn + cls + "confirm");
+        this.$another = this.$actions.find(btn + cls + "another");
+    }
+
+    onOpen(handle) {
+        super.onOpen(handle);
+
+        this.intent.handle = this.dialHandle = this.$dial[0].handle;
+
+        handle.intent?.onSelect?.let(it => this.dialHandle.setOnSelected(it));
+
+        handle.intent?.data?.let(it => {
+            this.$dial.css("--font-size", it.fontSize ?? "2rem");
+            if (it.fontWeight != n) this.$dial.css("--font-weight", it.fontWeight);
+            this.$dial.css("--item-height", it.itemHeight ?? "1.2em");
+            this.$dial.css("--holder-pad", it.holderPad ?? "var(--basic-ui-inset-h)");
+            if (it.holderPadL != n) this.$dial.css("--holder-pad-l", it.holderPadL);
+            if (it.holderPadR != n) this.$dial.css("--holder-pad-r", it.holderPadR);
+            if (it.colGap != n) this.$dial.css("--col-gap", it.colGap);
+            if (it.boundGap != n) this.$dial.css("--bound-gap", it.boundGap);
+        });
+
+        const handler = this;
+
+        this.$confirm.click(function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            const { itemSelectionIndexes, itemSelectionValues } = handler.dialHandle;
+            handle?.intent?.onConfirm?.(itemSelectionIndexes.mock, itemSelectionValues.mock, handle.intent?.data?.initial);
+            handle?.close();
+            return false;
+        });
+        if (handle?.intent?.data?.callbackAnother == null) this.$another.remove();
+        else this.$another.click(function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            const { itemSelectionIndexes, itemSelectionValues } = handler.dialHandle;
+            handle?.intent?.onAnother?.(itemSelectionIndexes.mock, itemSelectionValues.mock, handle.intent?.data?.initial);
+            handle?.close();
+            return false;
+        });
+
+        this.$confirm.focus();
+    }
+
+    onFocus(handle) {
+        this.$confirm.focus();
+    }
+
+    onClose(handle) {
+        const { itemSelectionIndexes, itemSelectionValues } = this.dialHandle;
+        handle?.intent?.onDissmiss(handle.intent?.data?.initial, itemSelectionIndexes.mock, itemSelectionValues.mock);
+    }
+}
 
 /**
  * Pages profiling manager
@@ -4748,6 +5013,9 @@ class EstreUiPage {
         },
         "$i&o=toastUpSlide#selection^": class extends EstreSelectionDialogPageHandler {
 
+        },
+        "$i&o=toastUpSlide#dials^": class extends EstreDialsDialogPageHandler {
+
         },
 
         "$i&o=interaction#onRunning^": class extends EstreLottieAnimatedHandler {
@@ -4760,11 +5028,11 @@ class EstreUiPage {
                 } else if (backHolds < cancellationExceeds - 1) {
                     return onBackWhile(handle);
                 } else if (backHolds == cancellationExceeds - 1) {
-                    const instanceOrigin = latestIO;
+                    // const instanceOrigin = latestIO;
                     backHolds = 0;
                     this.isTriggeredCancellation = t;
                     this.intentData?.callbackCancellation?.();
-                    postQueue(_ => go(instanceOrigin));
+                    // postQueue(_ => go(instanceOrigin));
                     return handle.close();
                 }
             }
@@ -5068,6 +5336,25 @@ class EstreUiPage {
         else return null;
     }
 
+    #componentInstanceOrigin;
+    #containerInstanceOrigin;
+    #articleInstanceOrigin;
+
+    get componentInstanceOrigin() { return this.#componentInstanceOrigin; }
+    get containerInstanceOrigin() { return this.#containerInstanceOrigin; }
+    get articleInstanceOrigin() { return this.#articleInstanceOrigin; }
+
+    get instanceOrigin() {
+        if (this.#article != null) return this.#articleInstanceOrigin;
+        else if (this.#container != null) return this.#containerInstanceOrigin;
+        else if (this.#component != null) return this.#componentInstanceOrigin;
+        else return null;
+    }
+
+    get componentInstanceId() { return this.#componentIsMultiInstance ? this.#component + "^" + this.#componentInstanceOrigin : this.component; }
+    get containerInstanceId() { return this.#containerIsMultiInstance ? this.#container + "^" + this.#containerInstanceOrigin : this.container; }
+    get articleInstanceId() { return this.#articleIsMultiInstance ? this.#article + "^" + this.#articleInstanceOrigin : this.article; }
+
     #instances = [];
     get instances() { return this.#instances; }
 
@@ -5122,9 +5409,26 @@ class EstreUiPage {
         pid += "&" + (this.sectionBound == "main" ? "m" : (this.sectionBound == "blind" ? "b" : (this.sectionBound == "overlay" ? "o" : (this.sectionBound == "header" ? "h" : (this.sectionBound == "menu" ? "u" : "")))));
         pid += "=";
         pid += this.#component;
-        if (this.#container != null) pid += "#" + this.#container;
-        if (this.#article != null) pid += "@" + this.#article;
-        if (this.isMultiInstance) pid += "^";
+        if (this.#componentIsMultiInstance) pid += "^";
+        if (this.#container != null) {
+            pid += "#" + this.#container;
+            if (this.#containerIsMultiInstance) pid += "^";
+        }
+        if (this.#article != null) {
+            pid += "@" + this.#article;
+            if (this.#articleIsMultiInstance) pid += "^";
+        }
+        return pid;
+    }
+
+    get instancePid() {
+        var pid = "";
+        pid += "$" + (this.statement == "static" ? "s" : (this.statement == "instant" ? "i" : ""));
+        pid += "&" + (this.sectionBound == "main" ? "m" : (this.sectionBound == "blind" ? "b" : (this.sectionBound == "overlay" ? "o" : (this.sectionBound == "header" ? "h" : (this.sectionBound == "menu" ? "u" : "")))));
+        pid += "=";
+        pid += this.componentInstanceId;
+        if (this.#container != null) pid += "#" + this.containerInstanceId;
+        if (this.#article != null) pid += "@" + this.articleInstanceId;
         return pid;
     }
 
@@ -5227,6 +5531,18 @@ class EstreUiPage {
         return this;
     }
 
+    setInstanceOrigin(instanceOrigin) {
+        if (isArray(instanceOrigin)) {
+            this.#componentInstanceOrigin = instanceOrigin[0];
+            this.#containerInstanceOrigin = instanceOrigin[1];
+            this.#articleInstanceOrigin = instanceOrigin[2];
+        } else equalCase(this.hostType, {
+            "component": _ => this.#componentInstanceOrigin = instanceOrigin,
+            "container": _ => this.#containerInstanceOrigin = instanceOrigin,
+            "article": _ => this.#articleInstanceOrigin = instanceOrigin,
+        });
+    }
+
     setComponentRefer($component) {
         if (this.#commited) return false;
 
@@ -5239,6 +5555,7 @@ class EstreUiPage {
 
         this.#componentStatement = $component.attr(eds.static) == t1 ? "static" : "instant";
         this.#componentIsMultiInstance = $component.attr(eds.multiInstance) == t1;
+        this.#componentInstanceOrigin = $component.attr(eds.instanceOrigin)?.ifEmpty(_ => u);
 
         if (this.#sectionBound == null) {
             const $componentHost = $component.closest("main, nav, header, footer");
@@ -5264,6 +5581,7 @@ class EstreUiPage {
 
         this.#containerStatement = $container.attr(eds.static) == t1 ? "static" : "instant";
         this.#containerIsMultiInstance = $container.attr(eds.multiInstance) == t1;
+        this.#containerInstanceOrigin = $container.attr(eds.instanceOrigin)?.ifEmpty(_ => u);
 
         if ($component == null) $component = $container.closest("section");
 
@@ -5286,6 +5604,7 @@ class EstreUiPage {
 
         this.#articleStatement = $article.attr(eds.static) == t1 ? "static" : "instant";
         this.#articleIsMultiInstance = $article.attr(eds.multiInstance) == t1;
+        this.#articleInstanceOrigin = $article.attr(eds.instanceOrigin)?.ifEmpty(_ => u);
 
         if ($container == null) $container = $article.closest("div.container");
 
@@ -5402,6 +5721,7 @@ class EstreUiPageManager {
         get toastPrompt() { return "$i&o=toastUpSlide#prompt^"; },
         get toastOption() { return "$i&o=toastUpSlide#option^"; },
         get toastSelection() { return "$i&o=toastUpSlide#selection^"; },
+        get toastDials() { return "$i&o=toastUpSlide#dials^"; },
 
 
         get onRunning() { return "$i&o=interaction#onRunning^"; },
@@ -5491,6 +5811,7 @@ class EstreUiPageManager {
         if (pid.indexOf("$") < 0) pid = this.findPid(pid);
         const page = this.get(pid);
         if (page == null) return null;
+        page.setInstanceOrigin(instanceOrigin);
         const sections = page.sections;
         if (sections == null) return null;
 
@@ -5498,35 +5819,38 @@ class EstreUiPageManager {
 
         //check open component
         const isIntentNone = typeof intent == UNDEFINED;
+        const componentInstanceOrigin = page.componentInstanceOrigin;
         var componentIntentPushed = false;
-        var component = sections[page.component];
+        var component = sections[page.componentInstanceId];
         var existComponent = false;
         if (component == null) {
             if (page.componentIsInatant) {
                 if (page.isMenu) {
                     if (page.isComponent) {
-                        component = estreUi.openMenuArea(page.component, intent);
+                        component = estreUi.openMenuArea(page.component, intent, componentInstanceOrigin);
                         componentIntentPushed = true;
-                    } else component = estreUi.openMenuArea(page.component);
+                    } else component = estreUi.openMenuArea(page.component, u, componentInstanceOrigin);
                 } else if (page.isBlinded) {
                     if (page.isComponent) {
-                        component = estreUi.openInstantBlinded(page.component, intent);
+                        component = estreUi.openInstantBlinded(page.component, intent, componentInstanceOrigin);
                         componentIntentPushed = true;
-                    } else component = estreUi.openInstantBlinded(page.component);
+                    } else component = estreUi.openInstantBlinded(page.component, u, componentInstanceOrigin);
                 } else if (page.isOverlay) {
                     if (page.isComponent) {
-                        component = estreUi.openManagedOverlay(page.component, intent);
+                        component = estreUi.openManagedOverlay(page.component, intent, componentInstanceOrigin);
                         componentIntentPushed = true;
-                    } else component = estreUi.openManagedOverlay(page.component);
+                    } else component = estreUi.openManagedOverlay(page.component, u, componentInstanceOrigin);
                 } else if (page.isHeader) {
                     if (page.isComponent) {
-                        component = estreUi.openHeaderBar(page.component, intent);
+                        component = estreUi.openHeaderBar(page.component, intent, componentInstanceOrigin);
                         componentIntentPushed = true;
-                    } else component = estreUi.openHeaderBar(page.component);
+                    } else component = estreUi.openHeaderBar(page.component, u, componentInstanceOrigin);
                 } else return false;
             } else return false;
         } else existComponent = true;
         if (component == null) return null;
+        const containerInstanceOrigin = page.containerInstanceOrigin;
+        const articleInstanceOrigin = page.articleInstanceOrigin;
         var containerIntentPushed = false;
         var articleIntentPushed = false;
         var container = null;
@@ -5535,13 +5859,13 @@ class EstreUiPageManager {
         var existArticle = false;
         if (page.container != null) {
             //check open container
-            container = component.containers[page.container];
+            container = component.containers[page.containerInstanceId];
             if (container == null) {
                 if (page.containerIsInatant) {
                     if (page.isArticle || page.isContainer || page.container == "root") {
-                        container = component.openContainer(page.container, intent);
+                        container = component.openContainer(page.container, intent, containerInstanceOrigin);
                         containerIntentPushed = true;
-                    } else container = component.openContainer(page.container);
+                    } else container = component.openContainer(page.container, u, containerInstanceOrigin);
                 } else if (page.isContainer) return false;//static container is cannot open
                 else {
                     
@@ -5551,13 +5875,13 @@ class EstreUiPageManager {
 
             if (page.article != null) {
                 //check open article
-                article = container.articles[page.article];
+                article = container.articles[page.articleInstanceId];
                 if (article == null) {
                     if (page.articleIsInatant) {
                         if (page.isArticle || page.article == "main") {
-                            article = container.openArticle(page.article, intent);
+                            article = container.openArticle(page.article, intent, articleInstanceOrigin);
                             articleIntentPushed = true;
-                        } else article = container.openArticle(page.article);
+                        } else article = container.openArticle(page.article, u, articleInstanceOrigin);
                     } else return false;//static article is cannot open
                 } else existArticle = true;
                 if (article == null) return null;
@@ -5568,35 +5892,35 @@ class EstreUiPageManager {
         const isRootMain = page.container == "root" && page.article == "main";
         switch (page.hostType) {
             case "article":
-                if (!isIntentNone && existArticle && (page.isArticle || page.article == "main")) targetProcessed.article = container.showArticle(page.article, intent);
+                if (!isIntentNone && existArticle && (page.isArticle || page.article == "main")) targetProcessed.article = container.showArticle(page.article, intent, articleInstanceOrigin);
                 else targetProcessed.article = article.show();
                 success = targetProcessed.article;
             case "container":
                 if (success) {
-                    if (!isIntentNone && existContainer && (page.isContainer || isRootMain)) targetProcessed.container = component.showContainer(page.container, intent);
+                    if (!isIntentNone && existContainer && (page.isContainer || isRootMain)) targetProcessed.container = component.showContainer(page.container, intent, containerInstanceOrigin);
                     else targetProcessed.container = container.show();
                     success = targetProcessed.container;
                 }
             case "component":
                 if (success) {
                     if (page.isHeader) {
-                        if (!isIntentNone && existComponent && (page.isComponent || isRootMain)) targetProcessed.component = estreUi.showHeaderBar(page.component, intent);
-                        else targetProcessed.component = estreUi.showHeaderBar(page.component);
+                        if (!isIntentNone && existComponent && (page.isComponent || isRootMain)) targetProcessed.component = estreUi.showHeaderBar(page.component, intent, componentInstanceOrigin);
+                        else targetProcessed.component = estreUi.showHeaderBar(page.component, u, componentInstanceOrigin);
                     } else if (page.isMenu) {
-                        if (!isIntentNone && existComponent && (page.isComponent || isRootMain)) targetProcessed.component = estreUi.showMenuArea(page.component, intent);
-                        else targetProcessed.component = estreUi.showMenuArea(page.component);
+                        if (!isIntentNone && existComponent && (page.isComponent || isRootMain)) targetProcessed.component = estreUi.showMenuArea(page.component, intent, componentInstanceOrigin);
+                        else targetProcessed.component = estreUi.showMenuArea(page.component, u, componentInstanceOrigin);
                     } else if (page.isOverlay) {
-                        if (!isIntentNone && existComponent && (page.isComponent || isRootMain)) targetProcessed.component = estreUi.showManagedOverlay(page.component, intent);
-                        else targetProcessed.component = estreUi.showManagedOverlay(page.component);
+                        if (!isIntentNone && existComponent && (page.isComponent || isRootMain)) targetProcessed.component = estreUi.showManagedOverlay(page.component, intent, componentInstanceOrigin);
+                        else targetProcessed.component = estreUi.showManagedOverlay(page.component, u, componentInstanceOrigin);
                     } else if (page.isBlinded) {
-                        if (!isIntentNone && existComponent && (page.isComponent || isRootMain)) targetProcessed.component = estreUi.showInstantBlinded(page.component, intent);
-                        else targetProcessed.component = estreUi.showInstantBlinded(page.component);
+                        if (!isIntentNone && existComponent && (page.isComponent || isRootMain)) targetProcessed.component = estreUi.showInstantBlinded(page.component, intent, componentInstanceOrigin);
+                        else targetProcessed.component = estreUi.showInstantBlinded(page.component, u, componentInstanceOrigin);
                     } else if (component.isModal) {
-                        if (!isIntentNone && existComponent && (page.isComponent || isRootMain)) targetProcessed.component = estreUi.openModalTab(page.component, component, intent);
-                        else targetProcessed.component = estreUi.openModalTab(page.component, component);
+                        if (!isIntentNone && existComponent && (page.isComponent || isRootMain)) targetProcessed.component = estreUi.openModalTab(page.component, component, intent, componentInstanceOrigin);
+                        else targetProcessed.component = estreUi.openModalTab(page.component, u, componentInstanceOrigin);
                     } else {
-                        if (!isIntentNone && existComponent && (page.isComponent || isRootMain)) targetProcessed.component = estreUi.switchRootTab(page.component, intent);
-                        else targetProcessed.component = estreUi.mainCurrentOnTop == component || estreUi.switchRootTab(page.component);
+                        if (!isIntentNone && existComponent && (page.isComponent || isRootMain)) targetProcessed.component = estreUi.switchRootTab(page.component, intent, componentInstanceOrigin);
+                        else targetProcessed.component = estreUi.mainCurrentOnTop == component || estreUi.switchRootTab(page.component, u, componentInstanceOrigin);
                     }
                     success = targetProcessed.component;
                 }
@@ -5613,21 +5937,25 @@ class EstreUiPageManager {
         if (pid.indexOf("$") < 0) pid = this.findPid(pid);
         const page = this.get(pid);
         if (page == null) return null;
+        page.setInstanceOrigin(instanceOrigin);
         const sections = page.sections;
         if (sections == null) return null;
 
         if (intent?.bringOnBack != n && intent.bringOnBack.hostType == n) intent.bringOnBack.hostType = page.hostType;
 
         const isIntentNone = typeof intent == UNDEFINED;
-        var component = sections[page.component];
+        var component = sections[page.componentInstanceId];
         if (component == null) return null;
+        const componentInstanceOrigin = page.componentInstanceOrigin;
+        const containerInstanceOrigin = page.containerInstanceOrigin;
+        const articleInstanceOrigin = page.articleInstanceOrigin;
         var container = null;
         var article = null;
         if (page.container != null) {
-            container = component.containers[page.container];
+            container = component.containers[page.containerInstanceId];
             if (container == null) return null;
             if (page.article != null) {
-                article = container.articles[page.article];
+                article = container.articles[page.articleInstanceId];
                 if (article == null) return null;
             }
         }
@@ -5635,12 +5963,12 @@ class EstreUiPageManager {
         var targetProcessed = { component: null, container: null, article: null };
         switch (page.hostType) {
             case "article":
-                if (!isIntentNone && (page.isArticle || page.article == "main")) targetProcessed.article = container.showArticle(page.article, intent);
+                if (!isIntentNone && (page.isArticle || page.article == "main")) targetProcessed.article = container.showArticle(page.article, intent, articleInstanceOrigin);
                 else targetProcessed.article = article.show();
                 success = targetProcessed.article;
             case "container":
                 if (success) {
-                    if (!isIntentNone && (page.isContainer || (page.article == "main" && page.container == "root"))) targetProcessed.container = component.showContainer(page.container, intent);
+                    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;
                 }
@@ -5648,20 +5976,20 @@ class EstreUiPageManager {
                 if (success) {
                     const isRootMain = page.container == "root" && page.article == "main";
                     if (page.isOverlay) {
-                        if (!isIntentNone && (page.isComponent || isRootMain)) targetProcessed.component = estreUi.showManagedOverlay(page.component, intent);
-                        else targetProcessed.component = estreUi.showManagedOverlay(page.component);
+                        if (!isIntentNone && (page.isComponent || isRootMain)) targetProcessed.component = estreUi.showManagedOverlay(page.component, intent, componentInstanceOrigin);
+                        else targetProcessed.component = estreUi.showManagedOverlay(page.component, u, componentInstanceOrigin);
                     } else if (page.isMenu) {
-                        if (!isIntentNone && (page.isComponent || isRootMain)) targetProcessed.component = estreUi.showMenuArea(page.component, intent);
-                        else targetProcessed.component = estreUi.showMenuArea(page.component);
+                        if (!isIntentNone && (page.isComponent || isRootMain)) targetProcessed.component = estreUi.showMenuArea(page.component, intent, componentInstanceOrigin);
+                        else targetProcessed.component = estreUi.showMenuArea(page.component, u, componentInstanceOrigin);
                     } else if (page.isBlinded) {
-                        if (!isIntentNone && (page.isComponent || isRootMain)) targetProcessed.component = estreUi.showInstantBlinded(page.component, intent);
-                        else targetProcessed.component = estreUi.showInstantBlinded(page.component);
+                        if (!isIntentNone && (page.isComponent || isRootMain)) targetProcessed.component = estreUi.showInstantBlinded(page.component, intent, componentInstanceOrigin);
+                        else targetProcessed.component = estreUi.showInstantBlinded(page.component, u, componentInstanceOrigin);
                     } else if (component.isModal) {
-                        if (!isIntentNone && (page.isComponent || isRootMain)) targetProcessed.component = estreUi.openModalTab(page.component, component, intent);
-                        else targetProcessed.component = estreUi.openModalTab(page.component, component);
+                        if (!isIntentNone && (page.isComponent || isRootMain)) targetProcessed.component = estreUi.openModalTab(page.component, component, intent, componentInstanceOrigin);
+                        else targetProcessed.component = estreUi.openModalTab(page.component, component, u, componentInstanceOrigin);
                     } else {
-                        if (!isIntentNone && (page.isComponent || isRootMain)) targetProcessed.component = estreUi.switchRootTab(page.component, intent);
-                        else targetProcessed.component = estreUi.mainCurrentOnTop == component || estreUi.switchRootTab(page.component, intent);
+                        if (!isIntentNone && (page.isComponent || isRootMain)) targetProcessed.component = estreUi.switchRootTab(page.component, intent, componentInstanceOrigin);
+                        else targetProcessed.component = estreUi.mainCurrentOnTop == component || estreUi.switchRootTab(page.component, intent, u, componentInstanceOrigin);
                     }
                     success = targetProcessed.component;
                 }
@@ -5682,19 +6010,23 @@ class EstreUiPageManager {
         if (pid.indexOf("$") < 0) pid = this.findPid(pid);
         const page = this.get(pid);
         if (page == null) return null;
+        page.setInstanceOrigin(instanceOrigin);
         const sections = page.sections;
         if (sections == null) return null;
 
-        var component = sections[page.component];
+        var component = sections[page.componentInstanceId];
         if (component == null) return null;
         var container = null;
         var article = null;
+        const componentInstanceOrigin = page.componentInstanceOrigin;
+        const containerInstanceOrigin = page.containerInstanceOrigin;
+        const articleInstanceOrigin = page.articleInstanceOrigin;
         var targetProcessed = { component: null, container: null, article: null };
         if (page.container != null) {
-            container = component.containers[page.container];
+            container = component.containers[page.containerInstanceId];
             if (container != null) {
                 if (page.article != null) {
-                    article = container.articles[page.article];
+                    article = container.articles[page.articleInstanceId];
                     if (article != null) {
                         targetProcessed.article = article.hide();
                     }
@@ -5717,7 +6049,7 @@ class EstreUiPageManager {
         return targetProcessed[page.hostType];
     }
 
-    closePage(pid, closeHost = false, instanceOrigin = null) {
+    closePage(pid, closeHost = false, instanceOrigin) {
         return postPromise(resolve => {
             postQueue(async _ => {
                 if (pid.indexOf("!") > -1) pid = this.#managedPidMap[pid.replace(/^\!/, "")];
@@ -5727,37 +6059,41 @@ class EstreUiPageManager {
                 if (pid.indexOf("$") < 0) pid = this.findPid(pid);
                 const page = this.get(pid);
                 if (page == null) resolve(null);
+                page.setInstanceOrigin(instanceOrigin);
                 const sections = page.sections;
                 if (sections == null) resolve(null);
 
-                var component = sections[page.component];
+                var component = sections[page.componentInstanceId];
                 if (component == null) resolve(null);
                 var container = null;
                 var article = null;
+                const componentInstanceOrigin = page.componentInstanceOrigin;
+                const containerInstanceOrigin = page.containerInstanceOrigin;
+                const articleInstanceOrigin = page.articleInstanceOrigin;
                 var targetProcessed = { component: null, container: null, article: null };
                 if (page.container != null) {
-                    container = component.containers[page.container];
+                    container = component.containers[page.containerInstanceId];
                     if (container != null) {
                         if (page.article != null) {
-                            article = container.articles[page.article];
+                            article = container.articles[page.articleInstanceId];
                             if (article != null) {
-                                targetProcessed.article = await container.closeArticle(page.article);
+                                targetProcessed.article = await container.closeArticle(page.article, articleInstanceOrigin);
                             }
                         }
                         if (page.isContainer || closeHost || (page.isArticle && page.articleIsStatic && container.isArticlesAllyStatic)) {
-                            targetProcessed.container = await component.closeContainer(page.container);
+                            targetProcessed.container = await component.closeContainer(page.container, containerInstanceOrigin);
                         }
                     }
                 }
                 if (page.isComponent || closeHost || (!page.isComponent && page.containerIsStatic && component.isContainersAllyStatic)) {
                     if (page.isOverlay) {
-                        targetProcessed.component = await estreUi.closeManagedOverlay(page.component);
+                        targetProcessed.component = await estreUi.closeManagedOverlay(page.component, componentInstanceOrigin);
                     } else if (page.isMenu) {
-                        targetProcessed.component = await estreUi.closeMenuArea(page.component);
+                        targetProcessed.component = await estreUi.closeMenuArea(page.component, componentInstanceOrigin);
                     } else if (page.isBlinded) {
-                        targetProcessed.component = await estreUi.closeInstantBlinded(page.component);
+                        targetProcessed.component = await estreUi.closeInstantBlinded(page.component, componentInstanceOrigin);
                     } else if (component.isModal) {
-                        targetProcessed.component = await estreUi.closeModalTab(page.component, $(component));
+                        targetProcessed.component = await estreUi.closeModalTab(page.component, $(component), componentInstanceOrigin);
                     } else {
                         targetProcessed.component = await estreUi.switchRootTab("home");
                     }
@@ -5854,14 +6190,20 @@ class EstreHandle {
         get [uis.checkboxAlly]() { return EstreCheckboxAllyHandle; },
 
         get [uis.toasterSlot]() { return EstreToasterSlotHandle; },
+        get [uis.multiDialSlot]() { return EstreMultiDialSlotHandle; },
 
         get [uis.customSelectorBar]() { return EstreCustomSelectorBarHandle; },
         get [uis.monthSelectorBar]() { return EstreMonthSelectorBarHandle; },
 
 
         get [uis.dateShower]() { return EstreDateShowerHandle; },
+        get [uis.liveTimestamp]() { return EstreLiveTimestampHandle; },
+
+        get [uis.onClickSetText]() { return EstreOnClickSetTextHandle; },
+        get [uis.onClickSetHtml]() { return EstreOnClickSetHtmlHandle; },
 
         get [uis.exportedContent]() { return EstreExportedContentHandle; },
+        get [uis.dataHelpAlert]() { return EstreHelpAlertHandle; },
 
         get [uis.ezHidable]() { return EstreEzHidableHandle; },
         get [uis.fixedAccess]() { return EstreFixedAccessHandle; },
@@ -5954,7 +6296,7 @@ class EstreHandle {
         host.unregisterHandle(specifier, element.handle);
         const loaded = this.activeHandle[specifier];
         if (loaded != null) loaded.delete(element.handle);
-        element.handle.release();
+        element.handle?.release();
     }
 
 
@@ -10030,8 +10372,12 @@ class EstreMinimalScheduler {
         });
     }
 
-    buildScheduleItem(subject, time, origin, associated) {
+    buildScheduleItem(subject, time, origin, associated, itemAdditionalClass) {
         const item = doc.ce(li, uis.scheduleItem);
+        if (itemAdditionalClass != n) kindCase(itemAdditionalClass, {
+            [STRING]: _ => item.className += " " + itemAdditionalClass,
+            [_ARRAY]: _ => itemAdditionalClass.forEach(cls => item.classList.add(cls)),
+        });
         const block = doc.ce(div, uis.schedule);
         const subjectLine = doc.ce(div, "subject_line");
         subjectLine.append(doc.ce(sp, "subject", subject));
@@ -11340,9 +11686,9 @@ class EstreCheckboxAllyHandle extends EstreHandle {
 
 
 /**
- * Toaster slots handle
+ * Multi dial slot handle
  */
-class EstreToasterSlotHandle extends EstreHandle {
+class EstreMultiDialSlotHandle extends EstreHandle {
 
     // constants
 
@@ -11351,15 +11697,91 @@ class EstreToasterSlotHandle extends EstreHandle {
 
 
     // open property
-    
+    $dialHolder;
+    dialHolder;
+    $dialBounds;
+    $dialHosts;
+    $dialPrefixes;
+    $dialSuffixes;
+    $dialDividers;
+
+
     // enclosed property
+    #itemTableOrigin = [];
+    #itemAlignsOrigin = [];
+    #itemPrefixesOrigin = [];
+    #itemSuffixesOrigin = [];
+    #itemDividersOrigin = [];
+
+    #itemSelectionObserver = [];
+    #itemTableProxy = [];
+
+    #itemTable;
+    #itemAligns;
+    #itemPrefixes;
+    #itemSuffixes;
+    #itemDividers;
 
+    #initialItemSelectionIndexes = [];
+    #itemSelectionIndexes = [];
+    #itemSelectionValues = [];
+
+    #itemSelectionIndexesProxy = [];
+    #itemSelectionValuesProxy = [];
+
+    #onSelectionChanged;
+
+    #isInit = f;
+    
 
     // getter and setter
+    get itemTable() { return this.#itemTable; }
+    set itemTable(value) { this.updateItemTable(value); }
+    get itemAligns() { return this.#itemAligns; }
+    set itemAligns(value) { this.updateItemAligns(value); }
+    get itemPrefixes() { return this.#itemPrefixes; }
+    set itemPrefixes(value) { this.updateItemPrefixes(value); }
+    get itemSuffixes() { return this.#itemSuffixes; }
+    set itemSuffixes(value) { this.updateItemSuffixes(value); }
+    get itemDividers() { return this.#itemDividers; }
+    set itemDividers(value) { this.updateItemDividers(value); }
+
+    get dataset() { return new Proxy({
+        table: this.#itemTable,
+        aligns: this.#itemAligns,
+        prefixes: this.#itemPrefixes,
+        suffixes: this.#itemSuffixes,
+        dividers: this.#itemDividers,
+    }, {
+        set: (target, property, value) => {
+            equalCase(property, {
+                table: _ => this.updateItemTable(value),
+                aligns: _ => this.updateItemAligns(value),
+                prefixes: _ => this.updateItemPrefixes(value),
+                suffixes: _ => this.updateItemSuffixes(value),
+                dividers: _ => this.updateItemDividers(value),
+                [def]: _ => target[property] = value,
+            });
+            return true;
+        }
+    }); }
+    set dataset(value) { this.setDataset(value); }
 
+    get itemSelectionIndexes() { return this.#itemSelectionIndexesProxy; }
+    set itemSelectionIndexes(value) { this.#setSelectionIndexes(value); }
+    get itemSelectionValues() { return this.#itemSelectionValuesProxy; }
+    set itemSelectionValues(value) { this.#setSelectionValues(value); }
+    get itemSelections() {
+        const selections = [];
+        for (let i=0; i<this.#itemSelectionIndexes.length; i++) {
+            selections.push([this.#itemSelectionIndexes[i], this.#itemSelectionValues[i]]);
+        }
+        return selections;
+    }
 
-    constructor(toasterSlot, host) {
-        super(toasterSlot, host);
+
+    constructor(multiDialSlot, host) {
+        super(multiDialSlot, host);
     }
 
     release(remove) {
@@ -11368,93 +11790,697 @@ class EstreToasterSlotHandle extends EstreHandle {
 
     init() {
         super.init();
+        
+        this.$dialHolder = this.$bound.find(uis.dialHolder);
+        this.dialHolder = this.$dialHolder[0];
+        this.$dialBounds = this.$dialHolder.find(uis.dialBound);
+        this.$dialHosts = this.$dialBounds.find(uis.dialHost);
 
-        this.setEvent();
+        this.$dialHosts[0].solid();
+        const divider = this.$dialHolder.find(li + cls + c.divider).stringified();
+        this.$dialHolder.attr("data-frozen-divider", divider);
+        this.$dialHolder[0].solid();
+
+        this.loadDataset();
     }
 
-    setEvent() {
-        const inst = this;
+    loadDataset() {
+        try {
+            const dataItemTable = this.$bound.attr(eds.itemTable);
+            if (nne(dataItemTable)) this.#itemTableOrigin = Jcodd.parse(dataItemTable);
+        } catch (e) {
+            if (window.isLogging) console.error(e);
+        }
 
-        this.$bound.click(function (e) {
-            e.preventDefault();
+        try {
+            const dataInitial = this.$bound.attr(eds.initial);
+            if (nne(dataInitial)) this.#itemSelectionIndexes = Jcodd.parse(dataInitial);
+        } catch (e) {
+            if (window.isLogging) console.error(e);
+        }
+        
+        try {
+            const dataItemAligns = this.$bound.attr(eds.itemAligns);
+            if (nne(dataItemAligns)) this.#itemAlignsOrigin = Jcodd.parse(dataItemAligns);
+        } catch (e) {
+            if (window.isLogging) console.error(e);
+        }
 
-            switch (this.dataset.toast) {
-                case "option":
-                const options = this.dataset.options;
-                try {
-                    const parsed = JSON.parse(options);
-                    toastOption(this.dataset.toastTitle ?? "", this.dataset.toastMessage ?? "", parsed, (index, value) => this.onselected?.(index, value));
-                } catch (e) {
-                    if (window.isLogging) console.error(e);
-                }
-                break;
+        try {
+            const dataItemPrefixes = this.$bound.attr(eds.itemPrefixes);
+            if (nne(dataItemPrefixes)) this.#itemPrefixesOrigin = Jcodd.parse(dataItemPrefixes);
+        } catch (e) {
+            if (window.isLogging) console.error(e);
+        }
 
-                // <= 케이스 추가 구현
-            }
+        try {
+            const dataItemSuffixes = this.$bound.attr(eds.itemSuffixes);
+            if (nne(dataItemSuffixes)) this.#itemSuffixesOrigin = Jcodd.parse(dataItemSuffixes);
+        } catch (e) {
+            if (window.isLogging) console.error(e);
+        }
 
-            return false;
-        });
+        try {
+            const dataItemDividers = this.$bound.attr(eds.itemDividers);
+            if (nne(dataItemDividers)) this.#itemDividersOrigin = Jcodd.parse(dataItemDividers);
+        } catch (e) {
+            if (window.isLogging) console.error(e);
+        }
 
+        this.updateAll();
     }
-}
-
-
-
-/**
- * Estre custom selector bar handle
- */
-class EstreCustomSelectorBarHandle extends EstreHandle {
-
-    // constants
 
+    get$dialHost(boundIndex) {
+        return this.$dialHosts[boundIndex]?.let(it => $(it));
+    }
 
-    // statics
+    getDialItems(boundIndex) {
+        return this.get$dialHost(boundIndex).find(c.c + li);
+    }
 
+    setDataset(dataset = { table: [[]], initial: [], aligns: [], prefixes: [], suffixes: [], dividers: [] }) {
+        this.#itemTableOrigin = dataset.table;
+        this.#itemSelectionIndexes = dataset.initial;
+        this.#itemAlignsOrigin = dataset.aligns;
+        this.#itemPrefixesOrigin = dataset.prefixes;
+        this.#itemSuffixesOrigin = dataset.suffixes;
+        this.#itemDividersOrigin = dataset.dividers;
+        this.updateAll();
+    }
 
-    // open property
-    $selectorBtn;
+    updateAll() {
+        this.updateItemTable();
+        this.updateItemAligns();
+        this.updateItemPrefixes();
+        this.updateItemSuffixes();
+        this.updateItemDividers();
+    }
 
-    $prevBtn;
-    $nextBtn;
+    updateItemTable(itemTable = this.#itemTableOrigin, itemSelectionIndexes = this.#itemSelectionIndexes) {
+        const isInit = this.#isInit;
+        if (!isInit) this.#isInit = t;
 
-    $selectionsList;
-    
-    // enclosed property
-    #selections = [];
-    #currentIndex;
+        itemTable ??= [];
+        const isNew = itemTable != this.#itemTableOrigin;
+        if (isNew) {
+            this.#itemTableOrigin = itemTable;
+            this.#itemTableProxy = [];
+            this.#itemSelectionObserver = [];
+        }
 
-    #onBuildSelector = $selectorBtn => doc.ce(sp);
-    #onBuildSelectionsItem = (index, id, item, button) => doc.ce(sp, n, id);
+        if (itemSelectionIndexes.length != itemTable.length) {
+            itemSelectionIndexes = [];
+            for (let i=itemSelectionIndexes.length; i<itemTable.length; i++) itemSelectionIndexes[i] = 0;
+        }
+        if (itemSelectionIndexes != this.#itemSelectionIndexes) this.#itemSelectionIndexes = itemSelectionIndexes;
+        this.#itemSelectionIndexesProxy = new Proxy(itemSelectionIndexes, {
+            set: (target, property, value) => {
+                const index = parseInt(property);
+                const isIndex = !isNaN(index);
+                if (isIndex) this.#scrollInstant(this.getDialItems(index)[value]);
+                else target[property] = value;
+                return true;
+            }
+        });
 
-    #onSelected = (index, id, $selectorBtn, isUpdateOnly) => $selectorBtn.find(sp).html(id);
+        const itemSelectionValues = []
+        this.#itemSelectionValues = itemSelectionValues;
+        for (const [index, i] of itemSelectionIndexes.entries()) {
+            const value = this.#itemTableOrigin[index]?.[i];
+            this.#itemSelectionValues[index] = value;
+        }
+        this.#itemSelectionValuesProxy = new Proxy(itemSelectionValues, {
+            set: (target, property, value) => {
+                const index = parseInt(property);
+                const isIndex = !isNaN(index);
+                if (isIndex) {
+                    const itemIndex = this.#itemTableOrigin[index]?.indexOf(value);
+                    if (itemIndex > -1) this.#scrollInstant(this.getDialItems(index)[itemIndex]);
+                } else target[property] = value;
+                return true;
+            }
+        });
 
+        this.$dialHolder.empty();
+        this.dialHolder.worm({ offset: 0 }, c.frozenDivider);
+        for (var [index, list] of itemTable.entries()) {
+            this.dialHolder.worm({ boundIndex: index });
+            this.dialHolder.worm({ offset: index + 1 }, c.frozenDivider);
+        }
+        const updateBoundLinks = _ => {
+            this.$dialBounds = this.$dialHolder.find(uis.dialBound);
+            this.$dialHosts = this.$dialBounds.find(c.c + uis.dialHost);
+            this.$dialPrefixes = this.$dialHolder.find(c.c + li + c.c + uis.prefix + c.c + sp);
+            this.$dialSuffixes = this.$dialHolder.find(c.c + li + c.c + uis.suffix + c.c + sp);
+            this.$dialDividers = this.$dialHolder.find(c.c + uis.divider + c.c + sp);
+        }
+        updateBoundLinks();
+
+        for (var [index, list] of itemTable.entries()) {
+            this.#setItemBoundEvents(index);
+            this.updateItemBound(index, list);
+        }
+
+        if (!isInit) this.#isInit = f;
+
+        return this.#itemTable = new Proxy(this.#itemTableProxy, {
+            set: (target, property, value) => {
+                const index = parseInt(property);
+                const isIndex = !isNaN(index);
+                target[property] = isIndex ? this.#setItemTableProxy(index, value) : value;
+                if (isIndex) {
+                    const boundLength = this.$dialBounds.length;
+                    if (boundLength > index) this.updateItemBound(index, value);
+                    else {
+                        for (let i=boundLength; i<=index; i++) {
+                            this.dialHolder.worm({ boundIndex: i });
+                            this.dialHolder.worm({ offset: i + 1 }, c.frozenDivider);
+                        }
+                        updateBoundLinks();
 
-    // getter and setter
-    get prev() { return this.#currentIndex - 1; }
-    get current() { return this.#currentIndex; }
-    get next() { return this.#currentIndex + 1; }
-    
-    get prevId() { return this.#currentIndex > 0 ? this.#selections[this.prev] : n; }
-    get currentId() { return this.#selections[this.current]; }
-    get nextId() { return this.#currentIndex < this.#selections.length - 1 ? this.#selections[this.next] : n; }
+                        for (let i=boundLength; i<=index; i++) {
+                            this.#setItemBoundEvents(i);
+                            this.updateItemBound(i, i == index ? value : []);
+                        }
+                    }
+                }
+                return true;
+            },
+            deleteProperty: (target, property) => {
+                delete target[property];
+                const index = parseInt(property);
+                const isIndex = !isNaN(index);
+                if (isIndex) {
+                    this.$dialBounds[index].remove();
+                    this.$dialHolder.find(c.c + uis.dialDivider)[index + 1].remove();
+                    const dividerLength = this.#itemDividers.length;
+                    const dividerCount = this.$dialDividers.length;
+                    updateBoundLinks();
+                    this.#itemTableProxy.splice(index, 1);
+                    this.#itemAlignsOrigin.splice(index, 1);
+                    this.#itemPrefixesOrigin.splice(index, 1);
+                    this.#itemSuffixesOrigin.splice(index, 1);
+                    this.#itemSelectionObserver.splice(index, 1);
+                    if (dividerLength == 3 && dividerCount != 3) this.updateItemDividers();
+                    else this.#itemDividersOrigin.splice(index + 1, 1);
+                }
+                return true;
+            }
+        });
+    }
 
-    get isUsePopupSelector() { return this.$bound.attr(eds.usePopupSelector) == t1; }
+    #setItemBoundEvents(index, itemBound = this.$dialBounds[index]) {
+        const inst = this;
+        const $itemBound = $(itemBound);
 
+        $itemBound.on(c.wheel, function (e) {
+            e.preventDefault();
 
-    constructor(checkboxAlly, host) {
-        super(checkboxAlly, host);
-    }
+            const delta = Math.sign(e.originalEvent.deltaY);
+            const selected = parseInt(this.dataset.selected);
+            const $item = $(this).find(c.c + ul + c.c + li + aiv(eds.index, Math.min(Math.max(0, selected + delta), inst.#itemTable[index].length - 1) ) );
+            $item.click();
 
-    release(remove) {
-        super.release(remove);
-    }
+            return false;
+        });
 
-    init() {
-        super.init();
 
-        this.$selectorBtn = this.$bound.find(c.c + cls + "bar_side" + c.c + btn + cls + "selector");
+        const threshold = 1;
+        const rootMargin = "0px";
 
-        this.$prevBtn = this.$bound.find(c.c + cls + "bar_side" + c.c + btn + cls + "prev");
+        this.#itemSelectionObserver[index] = new IntersectionObserver(entries => {
+            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);
+                }
+            }
+        }, {
+            root: itemBound,
+            rootMargin,
+            threshold
+        });
+        
+        const ro = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const items = this.getDialItems(index);
+                const itemHeight = items[0]?.offsetHeight ?? 0;
+                const halfHeight = parseInt(itemHeight / 2);
+                const padding = getComputedStyle(entry.target.querySelector(ul)).padding;
+                const paddings = padding.split(s).map(it => parseInt(it));
+                for (let i=0; i<paddings.length; i+=2) paddings[i] = Math.max(paddings[i] - halfHeight, 0);
+                const rootMargin = paddings.map(it => hp + it + c.px).join(s);
+
+                const current = this.#itemSelectionObserver[index];
+
+                if (current != null) for (const elem of items) current.unobserve(elem);
+
+                this.#itemSelectionObserver[index] = new IntersectionObserver(entries => {
+                    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);
+                        }
+                    }
+                }, {
+                    root: itemBound,
+                    rootMargin,
+                    threshold
+                });
+
+                for (const item of items) this.#setItemEvent(index, item.dataset.index, item);
+            }
+        });
+
+        ro.observe(itemBound);
+
+        return ro;
+    }
+
+    updateItemBound(index, list) {
+        const host = this.$dialHosts[index];
+        if (host != n) {
+            const isInit = this.#isInit;
+            if (!isInit) this.#isInit = t;
+
+            const $host = $(host);
+            const align = typeCase(list?.[0]?.let(it => parseFloat(it).let(num => isNaN(num) ? it : num)), {
+                [NUMBER]: "right",
+                [STRING]: "left",
+                [DEFAULT]: c.center,
+            });
+            $host.attr(eds.align, align);
+            if (list.length < 1) host.melt({ index: "0", value: "-" });
+            else {
+                $host.empty();
+                for (const [index, value] of list.entries()) {
+                    host.worm({ index, value, dataPlaceholder: "" });
+                }
+                const $items = $host.find(c.c + li);
+                for (let idx = 0; idx < $items.length; idx++) {
+                    this.#setItemEvent(index, idx, $items[idx]);
+                }
+            }
+
+            const $items = $host.find(c.c + li);
+            const selectedIndex = Math.min(Math.max(0, this.#itemSelectionIndexes[index] ?? 0), $items.length - 1);
+            this.#scrollInstant($items[selectedIndex]);
+
+            if (!isInit) this.#isInit = f;
+
+            return this.#setItemTableProxy(index, list);
+        } else return this.#itemTable[index];
+    }
+
+    #setItemTableProxy(boundIndex, list) {
+        return this.#itemTableProxy[boundIndex] = new Proxy(list ?? [], {
+            set: (target, property, value) => {
+                const index = parseInt(property);
+                const isIndex = !isNaN(index);
+                target[property] = value;
+                if (isIndex) {
+                    const host = this.$dialHosts[boundIndex];
+                    const $host = $(host);
+                    const $items = $host.find(c.c + li);
+                    const length = $items.length;
+                    if (length > index) {
+                        const $item = $($items[index]);
+                        const $span = $item.find(c.c + sp);
+                        $span.html(value);
+                    } else for (let i=length; i<=index; i++) {
+                        host.worm({ index: i, value: i == index ? value : "" });
+                        this.#setItemEvent(boundIndex, i);
+                    }
+                }
+                return true;
+            },
+            deleteProperty: (target, property) => {
+                delete target[property];
+                const index = parseInt(property);
+                const isIndex = !isNaN(index);
+                if (isIndex) this.getDialItems(boundIndex)[index].remove();
+                return true;
+            }
+        });
+    }
+
+    #setItemEvent(boundIndex, index, item = this.getDialItems(boundIndex)[index], observer = this.#itemSelectionObserver[boundIndex]) {
+        const inst = this;
+        observer.observe(item);
+        $(item).off(c.click).click(function (e) {
+            e.preventDefault();
+
+            inst.#scrollSmooth(this);
+
+            return false;
+        });
+    }
+
+    updateItemAligns(itemAligns = this.#itemAlignsOrigin) {
+        itemAligns ??= [];
+        if (itemAligns != this.#itemAlignsOrigin) this.#itemAlignsOrigin = itemAligns;
+        for (const [index, value] of itemAligns.entries()) {
+            const align = typeUndefined(value) ? "" : value == n ? c.center : value ? c.right : c.left;
+            this.get$dialHost(index).attr(eds.align, align);
+        }
+        this.#itemAligns = new Proxy(itemAligns, {
+            set: (target, property, value) => {
+                const index = parseInt(property);
+                const isIndex = !isNaN(index);
+                target[property] = value;
+                if (isIndex && index < this.$dialHosts.length) {
+                    const align = typeUndefined(value) ? "" : value == n ? c.center : value ? c.right : c.left;
+                    this.get$dialHost(index).attr(eds.align, align);
+                }
+                return true;
+            },
+            deleteProperty: (target, property) => {
+                delete target[property];
+                return true;
+            }
+        });
+    }
+
+    updateItemPrefixes(itemPrefixes = this.#itemPrefixesOrigin) {
+        itemPrefixes ??= [];
+        if (itemPrefixes != this.#itemPrefixesOrigin) this.#itemPrefixesOrigin = itemPrefixes;
+        for (const [index, value] of itemPrefixes.entries()) {
+            $(this.$dialPrefixes[index]).html(value);
+        }
+        this.#itemPrefixes = new Proxy(itemPrefixes, {
+            set: (target, property, value) => {
+                const index = parseInt(property);
+                const isIndex = !isNaN(index);
+                target[property] = value;
+                if (isIndex && index < this.$dialPrefixes.length) {
+                    $(this.$dialPrefixes[index]).html(value);
+                }
+                return true;
+            },
+            deleteProperty: (target, property) => {
+                delete target[property];
+                return true;
+            }
+        });
+    }
+
+    updateItemSuffixes(itemSuffixes = this.#itemSuffixesOrigin) {
+        itemSuffixes ??= [];
+        if (itemSuffixes != this.#itemSuffixesOrigin) this.#itemSuffixesOrigin = itemSuffixes;
+        for (const [index, value] of itemSuffixes.entries()) {
+            $(this.$dialSuffixes[index]).html(value);
+        }
+        this.#itemSuffixes = new Proxy(itemSuffixes, {
+            set: (target, property, value) => {
+                const index = parseInt(property);
+                const isIndex = !isNaN(index);
+                target[property] = value;
+                if (isIndex && index < this.$dialSuffixes.length) {
+                    $(this.$dialSuffixes[index]).html(value);
+                }
+                return true;
+            },
+            deleteProperty: (target, property) => {
+                delete target[property];
+                return true;
+            }
+        });
+    }
+
+    updateItemDividers(itemDividers = this.#itemDividersOrigin) {
+        itemDividers ??= [];
+        if (itemDividers != this.#itemDividersOrigin) this.#itemDividersOrigin = itemDividers;
+        if (itemDividers.length == 3) {
+            const lastIndex = this.$dialDividers.length - 1;
+            for (let i=0; i<this.$dialDividers.length; i++) {
+                if (i == 0) $(this.$dialDividers[i]).html(itemDividers[0]);
+                else if (i == lastIndex) $(this.$dialDividers[i]).html(itemDividers[2]);
+                else $(this.$dialDividers[i]).html(itemDividers[1]);
+            }
+        } else for (const [index, value] of itemDividers.entire) {
+            $(this.$dialDividers[index]).html(value);
+        }
+        this.#itemDividers = new Proxy(itemDividers, {
+            set: (target, property, value) => {
+                const index = parseInt(property);
+                const isIndex = !isNaN(index);
+                target[property] = value;
+                if (isIndex) {
+                    if (target.length == 3 && index > 0) {
+                        const lastIndex = this.$dialDividers.length - 1;
+                        if (index == 3) $(this.$dialDividers[lastIndex]).html(value);
+                        else if (index == 2) for (let i=1; i<lastIndex; i++) $(this.$dialDividers[i]).html(value);
+                    } else if (index < this.$dialDividers.length) {
+                        $(this.$dialDividers[index]).html(value);
+                    }
+                }
+                return true;
+            },
+            deleteProperty: (target, property) => {
+                delete target[property];
+                return true;
+            }
+        });
+    }
+
+
+    setOnSelected(callback = (boundIndex, index, value, selectionIndexes, selectionValues) => {}) {
+        this.#onSelectionChanged = callback;
+    }
+
+    #onSelected(boundIndex, index, value = this.#itemTable[boundIndex][index]) {
+        if (this.#initialItemSelectionIndexes[boundIndex] == n) {
+            const idx = this.#itemSelectionIndexes[boundIndex];
+            if (idx != n) {
+                const item = this.getDialItems(boundIndex)?.[idx];
+                if (item != n && this.$dialBounds[boundIndex].dataset.selected != idx) {
+                    const isInit = this.#isInit;
+                    if (!isInit) this.#isInit = t;
+                    this.#scrollInstant(item);
+                    if (!isInit) this.#isInit = f;
+                    return;
+                }
+            }
+            this.#initialItemSelectionIndexes[boundIndex] = index;
+        }
+        if (!this.isInit) {
+            if (window.isVerbosely) console.log("Item selected: [" + idx + "] " + value);
+            this.#itemSelectionIndexes[boundIndex] = index;
+            this.#itemSelectionValues[boundIndex] = value;
+            
+            const selectionIndexes = this.#itemSelectionIndexes.mock;
+            const selectionValues = this.#itemSelectionValues.mock;
+            this.#onSelectionChanged?.(boundIndex, index, value, selectionIndexes, selectionValues);
+        }
+    }
+
+    #setSelectionIndexes(selectionIndexes = [], setByEvent = t) {
+        const isInit = this.#isInit;
+        const isInitializing = !setByEvent;
+        const isSingleEvent = setByEvent == n;
+        if (isInitializing && !isInit) this.#isInit = t;
+        for (let i=0; i<this.#itemTableOrigin.length; i++) {
+            const index = selectionIndexes[i];
+            if (index != n) {
+                if (isInitializing) {
+                    this.#itemSelectionIndexes[i] = index;
+                    this.#itemSelectionValues[i] = this.#itemTableOrigin[i]?.[index];
+                }
+                if (this.$dialBounds[i].dataset.selected != index) {
+                    const items = this.getDialItems(i);
+                    this.#scrollInstant(items[index]);
+                }
+            }
+        }
+        if (isInitializing && !isInit) this.#isInit = f;
+        if (isSingleEvent) this.#onSelectionChanged?.(n, n, n, this.#itemSelectionIndexes.mock, this.itemSelectionValues.mock);
+        return this.itemSelectionIndexes;
+    }
+
+    #setSelectionValues(selectionValues = [], setByEvent = t) {
+        const isInit = this.#isInit;
+        const isInitializing = !setByEvent;
+        const isSingleEvent = setByEvent == n;
+        if (isInitializing && !isInit) this.#isInit = t;
+        for (let i=0; i<this.#itemTableOrigin.length; i++) {
+            const value = selectionValues[i];
+            if (value != n) {
+                const index = this.#itemTableOrigin[i]?.indexOf(value);
+                if (index != n) {
+                    if (isInitializing) {
+                        this.#itemSelectionIndexes[i] = index;
+                        this.#itemSelectionValues[i] = value;
+                    }
+                    if (index > -1 && this.$dialBounds[i].dataset.selected != index) {
+                        const items = this.getDialItems(i);
+                        this.#scrollInstant(items[index]);
+                    }
+                }
+            }
+        }
+        if (isInitializing && !isInit) this.#isInit = f;
+        if (isSingleEvent) this.#onSelectionChanged?.(n, n, n, this.#itemSelectionIndexes.mock, this.itemSelectionValues.mock);
+        return this.itemSelectionValues;
+    }
+
+    setSelectionsByIndexes(selectionIndexes = [], isUpdateOnly = n) {
+        return this.#setSelectionIndexes(selectionIndexes, isUpdateOnly?.let(it => !it));
+    }
+
+    setSelectionsByValues(selectionValues = [], isUpdateOnly = n) {
+        return this.#setSelectionValues(selectionValues, isUpdateOnly?.let(it => !it));
+    }
+
+    #scrollInstant(elem, host = elem?.parentElement) {
+        // elem?.scrollIntoView({ behavior: c.instant, block: c.center });
+        if (elem != n && host != n) {
+            host.scrollTop = host.scrollTop;
+
+            postQueue(_ => {
+                const hostRect = host.getBoundingClientRect();
+                const elemRect = elem.getBoundingClientRect();
+
+                const offset = elemRect.top - hostRect.top - (hostRect.height / 2) + (elemRect.height / 2);
+                host.scrollTop += offset;
+            });
+        }
+    }
+
+    #scrollSmooth(elem, host = elem?.parentElement) {
+        // elem?.scrollIntoView({ behavior: c.smooth, block: c.center });
+        if (elem != n && host != n) {
+            const hostRect = host.getBoundingClientRect();
+            const elemRect = elem.getBoundingClientRect();
+
+            host.scrollBy({
+                top: elemRect.top - hostRect.top - (hostRect.height / 2) + (elemRect.height / 2),
+                behavior: c.smooth
+            });
+        }
+    }
+}
+
+
+/**
+ * Toaster slot handle
+ */
+class EstreToasterSlotHandle extends EstreHandle {
+
+    // constants
+
+
+    // statics
+
+
+    // open property
+    
+    // enclosed property
+
+
+    // getter and setter
+
+
+    constructor(toasterSlot, host) {
+        super(toasterSlot, host);
+    }
+
+    release(remove) {
+        super.release(remove);
+    }
+
+    init() {
+        super.init();
+
+        this.setEvent();
+    }
+
+    setEvent() {
+        const inst = this;
+
+        this.$bound.click(function (e) {
+            e.preventDefault();
+
+            switch (this.dataset.toast) {
+                case "option":
+                const options = this.dataset.options;
+                try {
+                    const parsed = JSON.parse(options);
+                    toastOption(this.dataset.toastTitle ?? "", this.dataset.toastMessage ?? "", parsed, (index, value) => this.onselected?.(index, value));
+                } catch (e) {
+                    if (window.isLogging) console.error(e);
+                }
+                break;
+
+                // <= 케이스 추가 구현
+            }
+
+            return false;
+        });
+
+    }
+}
+
+
+
+/**
+ * Estre custom selector bar handle
+ */
+class EstreCustomSelectorBarHandle extends EstreHandle {
+
+    // constants
+
+
+    // statics
+
+
+    // open property
+    $selectorBtn;
+
+    $prevBtn;
+    $nextBtn;
+
+    $selectionsList;
+    
+    // enclosed property
+    #selections = [];
+    #currentIndex;
+
+    #onBuildSelector = $selectorBtn => doc.ce(sp);
+    #onBuildSelectionsItem = (index, id, item, button) => doc.ce(sp, n, id);
+
+    #onSelected = (index, id, $selectorBtn, isUpdateOnly) => $selectorBtn.find(sp).html(id);
+
+
+    // getter and setter
+    get prev() { return this.#currentIndex - 1; }
+    get current() { return this.#currentIndex; }
+    get next() { return this.#currentIndex + 1; }
+    
+    get prevId() { return this.#currentIndex > 0 ? this.#selections[this.prev] : n; }
+    get currentId() { return this.#selections[this.current]; }
+    get nextId() { return this.#currentIndex < this.#selections.length - 1 ? this.#selections[this.next] : n; }
+
+    get isUsePopupSelector() { return this.$bound.attr(eds.usePopupSelector) == t1; }
+
+
+    constructor(checkboxAlly, host) {
+        super(checkboxAlly, host);
+    }
+
+    release(remove) {
+        super.release(remove);
+    }
+
+    init() {
+        super.init();
+
+        this.$selectorBtn = this.$bound.find(c.c + cls + "bar_side" + c.c + btn + cls + "selector");
+
+        this.$prevBtn = this.$bound.find(c.c + cls + "bar_side" + c.c + btn + cls + "prev");
         this.$nextBtn = this.$bound.find(c.c + cls + "bar_side" + c.c + btn + cls + "next");
 
         this.$selectionsList = this.$bound.find(c.c + cls + "float_selections" + c.c + ul + cls + "selections");
@@ -11914,6 +12940,194 @@ class EstreDateShowerHandle extends EstreHandle {
     }
 }
 
+class EstreLiveTimestampHandle extends EstreHandle {
+
+    // constants
+
+
+    // statics
+
+
+    // open property
+
+    
+    // enclosed property
+    #date;
+    
+    #timeout;
+
+
+    #nextTimeout = 1000;
+
+
+    // getter and setter
+    get date() { return new Date(this.#date); }
+
+    get from() { return this.$bound.attr(eds.liveTimestamp).int; }
+
+    get isShortSuffix() { return this.$bound.attr(eds.shortSuffix) == t1; }
+
+
+    constructor(liveTimestamp, host) {
+        super(liveTimestamp, host);
+    }
+
+    release() {
+        clearTimeout(this.#timeout);
+        this.#timeout = n;
+
+        super.release();
+    }
+
+    init() {
+        super.init();
+
+        this.#date = new Date(this.from).time;
+
+        if (!isNaN(this.#date)) {
+            this.updateDisplay();
+
+            this.setLive();
+        }
+
+        return this;
+    }
+
+    setLive() {
+        if (this.#timeout != n) {
+            clearTimeout(this.#timeout);
+            this.#timeout = n;
+        }
+
+        const postTimeout = _ => this.#timeout = setTimeout(_ => {
+            if (!this.bound.isConnected) {
+                clearTimeout(this.#timeout);
+                this.#timeout = n
+                return;
+            }
+            this.updateDisplay();
+            if (this.#nextTimeout != n) postTimeout();
+            else this.#timeout = n;
+        }, this.#nextTimeout);
+
+        if (this.#nextTimeout != n) postTimeout();
+        else this.#timeout = n;
+    }
+
+    updateDisplay() {
+        const suffixType = this.isShortSuffix ? "ShortSuffix" : "Suffix";
+        const now = dt.t;
+        const time = this.#date;
+        const diff = now - time;
+        let text = "";
+        let nextTimeout = n;
+        if (diff < 10000) {
+            text = EsLocale.get("now");
+            nextTimeout = 10000 - diff;
+        } else {
+            const texts = [];
+            const ago = EsLocale.get("ago");
+            if (diff < 20000) {
+                texts.push(EsLocale.get("just"));
+                nextTimeout = 20000 - diff;
+            } else if (diff < 60000) {
+                texts.push(Math.floor(diff / 1000) + EsLocale.get("seconds" + suffixType));
+                nextTimeout = 10000;
+            } else if (diff < 3600000) {
+                texts.push(Math.floor(diff / 60000) + EsLocale.get("minutes" + suffixType));
+                nextTimeout = 60000;
+            } else if (diff < 86400000) {
+                texts.push(Math.floor(diff / 3600000) + EsLocale.get("hours" + suffixType));
+                nextTimeout = 3600000;
+            } else if (diff < 604800000) {
+                texts.push(Math.floor(diff / 86400000) + EsLocale.get("days" + suffixType));
+                nextTimeout = 86400000;
+            } else if (diff < 2592000000) texts.push(Math.floor(diff / 604800000) + EsLocale.get("weeks" + suffixType));
+            else if (diff < 31104000000) texts.push(Math.floor(diff / 2592000000) + EsLocale.get("months" + suffixType));
+            else texts.push(Math.floor(diff / 31104000000) + EsLocale.get("years" + suffixType));
+            texts.push(ago);
+            text = texts.join(s);
+        }
+        this.#nextTimeout = nextTimeout;
+        this.$bound.html(text);
+    }
+}
+
+
+
+// on click set text
+class EstreOnClickSetTextHandle extends EstreHandle {
+    // constants
+
+    // statics
+
+    // open property
+
+    // enclosed property
+
+    // getter and setter
+
+
+    constructor(bound, host) {
+        super(bound, host);
+    }
+
+    release() {
+        super.release();
+    }
+
+    init() {
+        super.init();
+
+        this.$bound.click(function (e) {
+            e.preventDefault();
+
+            const text = this.dataset.onClickSetText;
+            $(this).text(text);
+
+            return false;
+        });
+    }
+
+}
+
+// on click set html
+class EstreOnClickSetHtmlHandle extends EstreHandle {
+    // constants
+
+    // statics
+
+    // open property
+
+    // enclosed property
+
+    // getter and setter
+
+
+    constructor(bound, host) {
+        super(bound, host);
+    }
+
+    release() {
+        super.release();
+    }
+
+    init() {
+        super.init();
+
+        this.$bound.click(function (e) {
+            e.preventDefault();
+
+            const text = this.dataset.onClickSetHtml;
+            $(this).html(text);
+
+            return false;
+        });
+    }
+
+}
+
+
 
 // exported content
 class EstreExportedContentHandle extends EstreHandle {
@@ -11964,6 +13178,44 @@ class EstreExportedContentHandle extends EstreHandle {
     }
 }
 
+class EstreHelpAlertHandle extends EstreHandle {
+
+    // constants
+
+    // statics
+
+
+    // open property
+
+
+    // enclosed property
+
+
+    // getter and setter
+
+
+    constructor(bound, host) {
+        super(bound, host);
+    }
+
+    release() {
+        super.release();
+    }
+
+    init() {
+        super.init();
+
+        this.$bound.click(function (e) {
+            e.preventDefault();
+
+            alert(this.dataset.helpAlertTitle?.replace(/\\n/g, "<br />") ?? "", this.dataset.helpAlert.replace(/\\n/g, "<br />") ?? "");
+
+            return false;
+        });
+    }
+}
+
+
 
 // quick transitions
 class EstreEzHidableHandle extends EstreHandle {
@@ -13518,8 +14770,41 @@ const estreUi = {
     initialHistoryOffset: null,
     isBackwardFlow: false,
 
-    prevRootTabId: null,
-    prevBlindedId: null,
+
+    prevRootTabIds: new Set(),
+    get latestRootTabId() { return [...this.prevRootTabIds].pop(); },
+    get prevRootTabId() {
+        const rootTabIds = this.mainSections.ways;
+        let latestRootTabId = null;
+        while (latestRootTabId = this.latestRootTabId) {
+            this.prevRootTabIds.delete(latestRootTabId);
+            if (rootTabIds.includes(latestRootTabId)) return latestRootTabId;
+        }
+        return null;
+    },
+    set prevRootTabId(id) {
+        if (id == null) return;
+        if (this.prevRootTabIds.has(id)) this.prevRootTabIds.delete(id);
+        this.prevRootTabIds.add(id);
+    },
+
+    prevBlindedIds: new Set(),
+    get latestBlindedId() { return [...this.prevBlindedIds].pop(); },
+    get prevBlindedId() {
+        const blindedIds = this.blindSections.ways;
+        let latestBlindedId = null;
+        while (latestBlindedId = this.latestBlindedId) {
+            this.prevBlindedIds.delete(latestBlindedId);
+            if (blindedIds.includes(latestBlindedId)) return latestBlindedId;
+        }
+        return null;
+    },
+    set prevBlindedId(id) {
+        if (id == null) return;
+        if (this.prevBlindedIds.has(id)) this.prevBlindedIds.delete(id);
+        this.prevBlindedIds.add(id);
+    },
+
 
     //getter and setter
     get isOpenMainMenu() { return this.$mainMenu.attr(eds.opened) == t1; },
@@ -14105,7 +15390,7 @@ const estreUi = {
 
                     const currentTopHandle = this.mainCurrentOnTop;
                     const currentTopHandleId = currentTopHandle?.id;
-                    if (id != currentTopHandleId && currentTopHandleId != this.prevRootTabId) {
+                    if (id != currentTopHandleId && currentTopHandleId != this.latestRootTabId) {
                         this.prevRootTabId = currentTopHandleId;
     
                         // if (estreUi.euiState == "onReady" && currentTopHandle != null) {
@@ -14144,29 +15429,34 @@ const estreUi = {
     },
 
     switchRootTabPrev() {
-        if (this.prevRootTabId != null) {
-            const processed = this.switchRootTab(this.prevRootTabId);
-            if (processed) this.prevRootTabId = null;
+        const prev = this.prevRootTabId;
+        if (prev != null) {
+            const processed = this.switchRootTab(prev);
             return processed;
         } else return false;
     },
 
-    openInstantBlinded(id, intent) {
+    openInstantBlinded(id, intent, instanceOrigin) {
         const page = pageManager.getComponent(id);
         if (page == null) return null;
         if (page.statement == "static") return null;
         this.$blindArea.append(page.live);
         const $section = this.$blindSections.filter(eid + id);
         if ($section == null || $section.length < 1) return null;
-        const component = this.initInstantContent($section[0], intent);
+        const component = this.initInstantContent($section[$section.length - 1], intent, instanceOrigin);
         if (component.isOnTop) component.show(false);
         return component;
     },
 
-    showInstantBlinded(id, intent) {
-        const $targetSection = this.$blindSections.filter(eid + id);
+    showInstantBlinded(id, intent, instanceOrigin) {
+        let $targetSection = this.$blindSections.filter(eid + id + (instanceOrigin?.let(it => aiv(eds.instanceOrigin, it)) ?? ""));
 
-        if ($targetSection.length < 1) return false;
+        if ($targetSection.length < 1) {
+            if (instanceOrigin != null) return false;
+            $targetSection = this.$blindSections.filter(eid + id);
+            if ($targetSection.length < 1) return false;
+            $targetSection = $($targetSection[$targetSection.length - 1]);
+        }
 
         const isModal = $targetSection.hasClass("modal");
 
@@ -14184,7 +15474,7 @@ const estreUi = {
 
             const currentTopHandle = this.blindedCurrentOnTop;
             const currentTopHandleId = currentTopHandle?.id;
-            if (id != currentTopHandleId && currentTopHandleId != this.prevBlindedId) {
+            if (id != currentTopHandleId && currentTopHandleId != this.latestBlindedId) {
                 this.prevBlindedId = currentTopHandleId;
 
                 // if (estreUi.euiState == "onReady" && currentTopHandle != null) {
@@ -14193,8 +15483,13 @@ const estreUi = {
             }
         }
 
-        const targetComponent = this.blindSections[id];
-        if (targetComponent == null) return false;
+        let targetComponent = this.blindSections[id + (instanceOrigin?.let(it => "^" + it) ?? "")];
+        if (targetComponent == null) {
+            if (instanceOrigin != null) return false;
+            const componentIds = this.blindSections.ways.filter(it => it.startsWith(id + "^"));
+            if (componentIds.length < 1) return false;
+            targetComponent = this.blindSections[componentIds[componentIds.length - 1]];
+        }
         targetComponent.pushIntent(intent);
         if (targetComponent.isOnTop) {
             unhandled = true;
@@ -14206,9 +15501,14 @@ const estreUi = {
         return !unhandled;
     },
 
-    async closeInstantBlinded(id) {
-        const component = this.blindSections[id];
-        if (component == null) return null;
+    async closeInstantBlinded(id, instanceOrigin, isTermination = !component.isStatic) {
+        let component = this.blindSections[id + (instanceOrigin?.let(it => "^" + it) ?? "")];
+        if (component == null) {
+            if (instanceOrigin != null) return null;
+            const componentIds = this.blindSections.ways.filter(it => it.startsWith(id + "^"));
+            if (componentIds.length < 1) return null;
+            component = this.blindSections[componentIds[componentIds.length - 1]];
+        }
         const $targetSection = component.$host;
         const isModal = $targetSection.hasClass("modal");
 
@@ -14220,7 +15520,6 @@ const estreUi = {
             } else return null;
         } else {
             if (!component.$host.hasClass("home")) {
-                const isTermination = !component.isStatic;
                 const closed = await component.close(false, isTermination);
                 setTimeout(async _ => {
                     const $components = this.$blindSections.filter(naiv(m.id, id));
@@ -14236,22 +15535,27 @@ const estreUi = {
         }
     },
 
-    openMenuArea(id, intent) {
+    openMenuArea(id, intent, instanceOrigin) {
         const page = pageManager.getComponent(id);
         if (page == null) return null;
         if (page.statement == "static") return null;
         this.$mainMenu.append(page.live);
         const $section = this.$menuSections.filter(eid + id);
         if ($section == null || $section.length < 1) return null;
-        const component = this.initStaticMenu($section[0], intent);
+        const component = this.initStaticMenu($section[$section.length - 1], intent, instanceOrigin);
         if (component.isOnTop) component.show(false);
         return component;
     },
 
-    showMenuArea(id, intent) {
-        const $targetSection = this.$menuSections.filter(eid + id);
+    showMenuArea(id, intent, instanceOrigin) {
+        let $targetSection = this.$menuSections.filter(eid + id + (instanceOrigin?.let(it => aiv(eds.instanceOrigin, it)) ?? ""));
 
-        if ($targetSection.length < 1) return false;
+        if ($targetSection.length < 1) {
+            if (instanceOrigin != null) return false;
+            $targetSection = this.$menuSections.filter(eid + id);
+            if ($targetSection.length < 1) return false;
+            $targetSection = $($targetSection[$targetSection.length - 1]);
+        }
         
         const isModal = $targetSection.hasClass("modal");
 
@@ -14268,8 +15572,13 @@ const estreUi = {
             for (var section of $elseSections) section.pageHandle?.hide(false);
         }
 
-        const targetComponent = this.menuSections[id];
-        if (targetComponent == null) return false;
+        let targetComponent = this.menuSections[id + (instanceOrigin?.let(it => "^" + it) ?? "")];
+        if (targetComponent == null) {
+            if (instanceOrigin != null) return false;
+            const componentIds = this.menuSections.ways.filter(it => it.startsWith(id + "^"));
+            if (componentIds.length < 1) return false;
+            targetComponent = this.menuSections[componentIds[componentIds.length - 1]];
+        }
         targetComponent.pushIntent(intent);
         if (targetComponent.isOnTop) {
             unhandled = true;
@@ -14283,9 +15592,14 @@ const estreUi = {
         return !unhandled;
     },
 
-    async closeMenuArea(id) {
-        const component = this.menuSections[id];
-        if (component == null) return null;
+    async closeMenuArea(id, instanceOrigin, isTermination) {
+        let component = this.menuSections[id + (instanceOrigin?.let(it => "^" + it) ?? "")];
+        if (component == null) {
+            if (instanceOrigin != null) return null;
+            const componentIds = this.menuSections.ways.filter(it => it.startsWith(id + "^"));
+            if (componentIds.length < 1) return null;
+            component = this.menuSections[componentIds[componentIds.length - 1]];
+        }
         const $targetSection = component.$host;
         const isModal = $targetSection.hasClass("modal");
 
@@ -14296,29 +15610,34 @@ const estreUi = {
                 return closed;
             } else return null;
         } else {
-            const isTermination = !component.isStatic;
+            isTermination ??= !component.isStatic;
             const closed = await component.close(false, isTermination);
             if (isTermination) await this.releaseInstantContent(component);
             return closed;
         }
     },
 
-    openHeaderBar(id, intent) {
+    openHeaderBar(id, intent, instanceOrigin) {
         const page = pageManager.getComponent(id);
         if (page == null) return null;
         if (page.statement == "static") return null;
         this.$headerArea.append(page.live);
         const $section = this.$headerSections.filter(eid + id);
         if ($section == null || $section.length < 1) return null;
-        const component = this.initHeaderBar($section[0], intent);
+        const component = this.initHeaderBar($section[$section.length - 1], intent, instanceOrigin);
         // if (component.isOnTop) component.show(false);
         return component;
     },
 
-    showHeaderBar(id, intent) {
-        const $targetSection = this.$headerSections.filter(eid + id);
+    showHeaderBar(id, intent, instanceOrigin) {
+        let $targetSection = this.$headerSections.filter(eid + id + (instanceOrigin?.let(it => aiv(eds.instanceOrigin, it)) ?? ""));
 
-        if ($targetSection.length < 1) return false;
+        if ($targetSection.length < 1) {
+            if (instanceOrigin != null) return false;
+            $targetSection = this.$headerSections.filter(eid + id);
+            if ($targetSection.length < 1) return false;
+            $targetSection = $($targetSection[$targetSection.length - 1]);
+        }
 
         const isModal = $targetSection.hasClass("modal");
 
@@ -14335,8 +15654,13 @@ const estreUi = {
             for (var section of $elseSections) section.pageHandle?.hide(false);
         }
 
-        const targetComponent = this.headerSections[id];
-        if (targetComponent == null) return false;
+        let targetComponent = this.headerSections[id + (instanceOrigin?.let(it => "^" + it) ?? "")];
+        if (targetComponent == null) {
+            if (instanceOrigin != null) return false;
+            const componentIds = this.headerSections.ways.filter(it => it.startsWith(id + "^"));
+            if (componentIds.length < 1) return false;
+            targetComponent = this.headerSections[componentIds[componentIds.length - 1]];
+        }
         targetComponent.pushIntent(intent);
         if (targetComponent.isOnTop) {
             unhandled = true;
@@ -14348,9 +15672,14 @@ const estreUi = {
         return !unhandled;
     },
 
-    async closeHeaderBar(id) {
-        const component = this.headerSections[id];
-        if (component == null) return null;
+    async closeHeaderBar(id, instanceOrigin, isTermination) {
+        let component = this.headerSections[id + (instanceOrigin?.let(it => "^" + it) ?? "")];
+        if (component == null) {
+            if (instanceOrigin != null) return null;
+            const componentIds = this.headerSections.ways.filter(it => it.startsWith(id + "^"));
+            if (componentIds.length < 1) return null;
+            component = this.headerSections[componentIds[componentIds.length - 1]];
+        }
         const $targetSection = component.$host;
         const isModal = $targetSection.hasClass("modal");
 
@@ -14361,29 +15690,34 @@ const estreUi = {
                 return closed;
             } else return null;
         } else {
-            const isTermination = !component.isStatic;
+            isTermination ??= !component.isStatic;
             const closed = await component.close(false, isTermination);
             if (isTermination) await this.releaseInstantContent(component);
             return closed;
         }
     },
 
-    openManagedOverlay(id, intent) {
+    openManagedOverlay(id, intent, instanceOrigin) {
         const page = pageManager.getComponent(id, "overlay");
         if (page == null) return null;
         if (page.statement == "static") return null;
         this.$overlayArea.append(page.live);
         const $section = this.$overlaySections.filter(eid + id);
         if ($section == null || $section.length < 1) return null;
-        const component = this.initOverlayContent($section[0], intent);
+        const component = this.initOverlayContent($section[$section.length - 1], intent, instanceOrigin);
         // if (component.isOnTop) component.show(false);
         return component;
     },
 
-    showManagedOverlay(id, intent) {
-        const $targetSection = this.$overlaySections.filter(eid + id);
+    showManagedOverlay(id, intent, instanceOrigin) {
+        let $targetSection = this.$overlaySections.filter(eid + id + (instanceOrigin?.let(it => aiv(eds.instanceOrigin, it)) ?? ""));
 
-        if ($targetSection.length < 1) return false;
+        if ($targetSection.length < 1) {
+            if (instanceOrigin != null) return false;
+            $targetSection = this.$overlaySections.filter(eid + id);
+            if ($targetSection.length < 1) return false;
+            $targetSection = $($targetSection[$targetSection.length - 1]);
+        }
 
         const isModal = $targetSection.hasClass("modal");
 
@@ -14400,8 +15734,13 @@ const estreUi = {
             for (var section of $elseSections) section.pageHandle?.hide(false);
         }
 
-        const targetComponent = this.overlaySections[id];
-        if (targetComponent == null) return false;
+        let targetComponent = this.overlaySections[id + (instanceOrigin?.let(it => "^" + it) ?? "")];
+        if (targetComponent == null) {
+            if (instanceOrigin != null) return false;
+            const componentIds = this.overlaySections.ways.filter(it => it.startsWith(id + "^"));
+            if (componentIds.length < 1) return false;
+            targetComponent = this.overlaySections[componentIds[componentIds.length - 1]];
+        }
         targetComponent.pushIntent(intent);
         if (targetComponent.isOnTop) {
             unhandled = true;
@@ -14413,9 +15752,14 @@ const estreUi = {
         return !unhandled;
     },
 
-    async closeManagedOverlay(id) {
-        const component = this.overlaySections[id];
-        if (component == null) return null;
+    async closeManagedOverlay(id, instanceOrigin, isTermination) {
+        let component = this.overlaySections[id + (instanceOrigin?.let(it => "^" + it) ?? "")];
+        if (component == null) {
+            if (instanceOrigin != null) return null;
+            const componentIds = this.overlaySections.ways.filter(it => it.startsWith(id + "^"));
+            if (componentIds.length < 1) return null;
+            component = this.overlaySections[componentIds[componentIds.length - 1]];
+        }
         const $targetSection = component.$host;
         const isModal = $targetSection.hasClass("modal");
 
@@ -14426,7 +15770,7 @@ const estreUi = {
                 return closed;
             } else return null;
         } else {
-            const isTermination = !component.isStatic;
+            isTermination ??= !component.isStatic;
             const closed = await component.close(false, isTermination);
             if (isTermination) await this.releaseInstantContent(component);
             return closed;
@@ -14503,7 +15847,7 @@ const estreUi = {
 
         const delayer = (delay = term) => postPromise(resolve => setTimeout(resolve, delay));
         for (var i=0; i<$oss.length; i++) {
-            this.initOverlayContent($oss[i], null, true);
+            this.initOverlayContent($oss[i], null, u, true);
             await delayer();
         }
 
@@ -14514,17 +15858,18 @@ const estreUi = {
 
     releaseOverlayContent(component) {
         if (component == null) return;
+        const instanceId = component.instanceId;
         component.release(component.isStatic ? null : true);
-        if (this.blindSections[component.id] != null) delete this.overlaySections[component.id];
+        if (this.blindSections[instanceId] != null) delete this.overlaySections[instanceId];
         const index = this.overlaySectionList.indexOf(component);
         if (index > -1) this.overlaySectionList.splice(index, 1);
     },
 
-    initOverlayContent(bound, intent = null, init = false) {
+    initOverlayContent(bound, intent = null, instanceOrigin, init = false) {
         this.releaseOverlayContent(bound.pageHandle);
-        const component = new EstreOverlayComponent(bound);
+        const component = new EstreOverlayComponent(bound, instanceOrigin);
         if (!init || component.isStatic) {
-            this.overlaySections[component.id] = component;
+            this.overlaySections[component.instanceId] = component;
             this.overlaySectionList.push(component);
         }
         component.init(intent);
@@ -14537,7 +15882,7 @@ const estreUi = {
 
         const delayer = (delay = term) => postPromise(resolve => setTimeout(resolve, delay));
         for (var i=0; i<$bss.length; i++) {
-            this.initInstantContent($bss[i], null, true);
+            this.initInstantContent($bss[i], null, u, true);
             await delayer();
         }
 
@@ -14552,17 +15897,18 @@ const estreUi = {
 
     releaseInstantContent(component) {
         if (component == null) return;
+        const instanceId = component.instanceId;
         component.release(component.isStatic ? null : true);
-        if (this.blindSections[component.id] != null) delete this.blindSections[component.id];
+        if (this.blindSections[instanceId] != null) delete this.blindSections[instanceId];
         const index = this.blindSectionList.indexOf(component);
         if (index > -1) this.blindSectionList.splice(index, 1);
     },
 
-    initInstantContent(bound, intent = null, init = false) {
+    initInstantContent(bound, intent = null, instanceOrigin, init = false) {
         this.releaseInstantContent(bound.pageHandle);
-        const component = new EstreInstantComponent(bound);
+        const component = new EstreInstantComponent(bound, instanceOrigin);
         if (!init || component.isStatic) {
-            this.blindSections[component.id] = component;
+            this.blindSections[component.instanceId] = component;
             this.blindSectionList.push(component);
         }
         component.init(intent);
@@ -14575,7 +15921,7 @@ const estreUi = {
 
         const delayer = (delay = term) => postPromise(resolve => setTimeout(resolve, delay));
         for (var i=0; i<$mss.length; i++) {
-            this.initStaticContent($mss[i], null, true);
+            this.initStaticContent($mss[i], null, u, true);
             await delayer();
         }
 
@@ -14592,17 +15938,18 @@ const estreUi = {
 
     releaseStaticContent(component) {
         if (component == null) return;
+        const instanceId = component.instanceId;
         component.release(component.isStatic ? null : true);
-        if (this.mainSections[component.id] != null) delete this.mainSections[component.id];
+        if (this.mainSections[instanceId] != null) delete this.mainSections[instanceId];
         const index = this.mainSectionList.indexOf(component);
         if (index > -1) this.mainSectionList.splice(index, 1);
     },
 
-    initStaticContent(bound, intent = null, init = false) {
+    initStaticContent(bound, intent = null, instanceOrigin, init = false) {
         this.releaseStaticContent(bound.pageHandle);
-        const component = new EstreComponent(bound);
+        const component = new EstreComponent(bound, instanceOrigin);
         if (!init || component.isStatic) {
-            this.mainSections[component.id] = component;
+            this.mainSections[component.instanceId] = component;
             this.mainSectionList.push(component);
         }
         component.init(intent);
@@ -14617,7 +15964,7 @@ const estreUi = {
 
         const delayer = (delay = term) => postPromise(resolve => setTimeout(resolve, delay));
         for (var i=0; i<$mss.length; i++) {
-            this.initStaticMenu($mss[i], null, true);
+            this.initStaticMenu($mss[i], null, u, true);
             await delayer();
         }
 
@@ -14632,17 +15979,18 @@ const estreUi = {
 
     releaseStaticMenu(component) {
         if (component == null) return;
+        const instanceId = component.instanceId;
         component.release(component.isStatic ? null : true);
-        if (this.menuSections[component.id] != null) delete this.menuSections[component.id];
+        if (this.menuSections[instanceId] != null) delete this.menuSections[instanceId];
         const index = this.menuSectionList.indexOf(component);
         if (index > -1) this.menuSectionList.splice(index, 1);
     },
 
-    initStaticMenu(bound, intent = null, init = false) {
+    initStaticMenu(bound, intent = null, instanceOrigin, init = false) {
         this.releaseStaticMenu(bound.pageHandle);
-        const component = new EstreMenuComponent(bound);
+        const component = new EstreMenuComponent(bound, instanceOrigin);
         if (!init || component.isStatic) {
-            this.menuSections[component.id] = component;
+            this.menuSections[component.instanceId] = component;
             this.menuSectionList.push(component);
         }
         component.init(intent);
@@ -14655,7 +16003,7 @@ const estreUi = {
 
         const delayer = (delay = term) => postPromise(resolve => setTimeout(resolve, delay));
         for (var i=0; i<$hss.length; i++) {
-            this.initHeaderBar($hss[i], null, true);
+            this.initHeaderBar($hss[i], null, u, true);
             await delayer();
         }
 
@@ -14671,17 +16019,18 @@ const estreUi = {
 
     releaseHeaderBar(component) {
         if (component == null) return;
+        const instanceId = component.instanceId;
         component.release(component.isStatic ? null : true);
-        if (this.headerSections[component.id] != null) delete this.headerSections[component.id];
+        if (this.headerSections[instanceId] != null) delete this.headerSections[instanceId];
         const index = this.headerSectionList.indexOf(component);
         if (index > -1) this.headerSectionList.splice(index, 1);
     },
 
-    initHeaderBar(bound, intent = null, init = false) {
+    initHeaderBar(bound, intent = null, instanceOrigin, init = false) {
         this.releaseHeaderBar(bound.pageHandle);
-        const component = new EstreHeaderComponent(bound);
+        const component = new EstreHeaderComponent(bound, instanceOrigin);
         if (!init || component.isStatic) {
-            this.headerSections[component.id] = component;
+            this.headerSections[component.instanceId] = component;
             this.headerSectionList.push(component);
         }
         component.init(intent);
@@ -14823,9 +16172,9 @@ const estreUi = {
         const currentOnTop = this.blindedCurrentOnTop;
         let processed = false;
         if (currentOnTop != null) processed = await currentOnTop.onBack();
-        if (!processed && this.prevBlindedId != null) {
-            processed = await this.showInstantBlinded(this.prevBlindedId);
-            if (processed) this.prevBlindedId = null;
+        const prevBlindedId = this.prevBlindedId;
+        if (!processed && prevBlindedId != null) {
+            processed = await this.showInstantBlinded(prevBlindedId);
         }
         return processed;
     },