@dooboostore/simple-web-component 1.0.15 → 1.0.17

package/dist/esm-bundle/dooboostore-simple-web-component.esm.js

@@ -1116,32 +1116,33 @@ var import_reflect_metadata2 = __toESM(require_Reflect(), 1);
 var import_reflect_metadata = __toESM(require_Reflect(), 1);
 
 // ../core/dist/esm/reflect/ReflectUtils.js
-var ReflectUtils = {
-  getParameterTypes: (target, propertyKey) => {
+var ReflectUtils;
+((ReflectUtils2) => {
+  ReflectUtils2.getParameterTypes = (target, propertyKey) => {
     if (propertyKey) {
       return Reflect.getMetadata("design:paramtypes", target, propertyKey) || [];
     } else {
       return Reflect.getMetadata("design:paramtypes", target) || [];
     }
-  },
-  getReturnType: (target, propertyKey) => {
+  };
+  ReflectUtils2.getReturnType = (target, propertyKey) => {
     return Reflect.getMetadata("design:returntype", target, propertyKey);
-  },
-  getType: (target, propertyKey) => {
+  };
+  ReflectUtils2.getType = (target, propertyKey) => {
     if (propertyKey) {
       return Reflect.getMetadata("design:type", target, propertyKey);
     } else {
       return Reflect.getMetadata("design:type", target);
     }
-  },
-  getMetadata: (metadataKey, target, propertyKey) => {
+  };
+  ReflectUtils2.getMetadata = (metadataKey, target, propertyKey) => {
     if (propertyKey) {
       return Reflect.getMetadata(metadataKey, target, propertyKey);
     } else {
       return Reflect.getMetadata(metadataKey, target);
     }
-  },
-  findMetadata: (metadataKey, target, propertyKey) => {
+  };
+  ReflectUtils2.findMetadata = (metadataKey, target, propertyKey) => {
     if (target == null) return void 0;
     let searchTarget = typeof target === "object" && typeof target !== "function" ? target.constructor : target;
     while (searchTarget && searchTarget !== Object) {
@@ -1152,11 +1153,8 @@ var ReflectUtils = {
       if (searchTarget === target) break;
     }
     return void 0;
-  },
-  /**
-   * 프로토타입 체인의 모든 메타데이터를 수집하여 리스트로 반환합니다. (부모 -> 자식 순)
-   */
-  findAllMetadata: (metadataKey, target, propertyKey) => {
+  };
+  ReflectUtils2.findAllMetadata = (metadataKey, target, propertyKey) => {
     const results = [];
     if (target == null) return results;
     let searchTarget = typeof target === "object" && typeof target !== "function" ? target.constructor : target;
@@ -1168,24 +1166,18 @@ var ReflectUtils = {
       if (searchTarget === target) break;
     }
     return results;
-  },
-  /**
-   * 모든 메타데이터(배열 형태)를 수집하여 하나의 배열로 합칩니다. (부모 -> 자식 순)
-   */
-  findAllMetadataFlatten: (metadataKey, target, propertyKey) => {
+  };
+  ReflectUtils2.findAllMetadataFlatten = (metadataKey, target, propertyKey) => {
     const results = [];
-    const metaList = ReflectUtils.findAllMetadata(metadataKey, target, propertyKey);
+    const metaList = (0, ReflectUtils2.findAllMetadata)(metadataKey, target, propertyKey);
     metaList.forEach((data) => {
       if (Array.isArray(data)) results.push(...data);
     });
     return [...new Set(results)];
-  },
-  /**
-   * 프로토타입 체인의 모든 메타데이터(맵 형태)를 수집하여 합칩니다. (부모 -> 자식 순)
-   */
-  findAllMapMetadata: (metadataKey, target) => {
+  };
+  ReflectUtils2.findAllMapMetadata = (metadataKey, target) => {
     const finalMap = /* @__PURE__ */ new Map();
-    const metaList = ReflectUtils.findAllMetadata(metadataKey, target);
+    const metaList = (0, ReflectUtils2.findAllMetadata)(metadataKey, target);
     metaList.forEach((data) => {
       if (data instanceof Map) {
         data.forEach((values, key) => {
@@ -1196,31 +1188,69 @@ var ReflectUtils = {
       }
     });
     return finalMap;
-  },
-  getMetadataKeys: (target) => {
+  };
+  ReflectUtils2.getMetadataKeys = (target) => {
     return Reflect.getMetadataKeys(target);
-  },
-  getOwnMetadata: (metadataKey, target, propertyKey) => {
+  };
+  ReflectUtils2.getOwnMetadata = (metadataKey, target, propertyKey) => {
     if (propertyKey) {
       return Reflect.getOwnMetadata(metadataKey, target, propertyKey);
     } else {
       return Reflect.getOwnMetadata(metadataKey, target);
     }
-  },
-  getMetadatas: (target) => {
-    return ReflectUtils.getMetadataKeys(target).map((it) => ReflectUtils.getMetadata(it, target));
-  },
-  metadata: (metadataKey, data) => {
+  };
+  ReflectUtils2.getMetadatas = (target) => {
+    return (0, ReflectUtils2.getMetadataKeys)(target).map((it) => (0, ReflectUtils2.getMetadata)(it, target));
+  };
+  ReflectUtils2.metadata = (metadataKey, data) => {
     return Reflect.metadata(metadataKey, data);
-  },
-  defineMetadata: (metadataKey, value, target, propertyKey) => {
+  };
+  ReflectUtils2.defineMetadata = (metadataKey, value, target, propertyKey) => {
     if (propertyKey && Reflect.defineMetadata) {
       Reflect.defineMetadata(metadataKey, value, target, propertyKey);
     } else if (Reflect.defineMetadata) {
       Reflect.defineMetadata(metadataKey, value, target);
     }
-  }
-};
+  };
+})(ReflectUtils || (ReflectUtils = {}));
+
+// ../core/dist/esm/function/FunctionUtils.js
+var FunctionUtils;
+((FunctionUtils2) => {
+  FunctionUtils2.getParameterNames = (func, property) => {
+    if (typeof func === "object" && property) {
+      func = func[property];
+    }
+    return new RegExp("(?:" + func.name + "\\s*|^)\\s*\\((.*?)\\)").exec(func.toString().replace(/\n/g, ""))?.[1].replace(/\/\*.*?\*\//g, "").replace(/ /g, "").split(",") ?? [];
+  };
+  FunctionUtils2.evalScript = (script, obj) => {
+    try {
+      if (script && obj) {
+        return Function(`"use strict";
+                    ${script}
+                    `).bind(obj)();
+      } else if (script) {
+        return new Function("return " + script)();
+      } else {
+        return null;
+      }
+    } catch (e) {
+      return null;
+    }
+  };
+  FunctionUtils2.execute = (params) => {
+    const { script, context, args = {} } = params;
+    const argNames = Object.keys(args);
+    const argValues = Object.values(args);
+    return new Function(...argNames, script).apply(context, argValues);
+  };
+  FunctionUtils2.executeReturn = (params) => {
+    const { script, context, args = {} } = params;
+    const argNames = Object.keys(args);
+    const argValues = Object.values(args);
+    return new Function(...argNames, `return ${script}`).apply(context, argValues);
+  };
+})(FunctionUtils || (FunctionUtils = {}));
 
 // src/decorators/innerHtml.ts
 var INNER_HTML_METADATA_KEY = Symbol("simple-web-component:inner-html");
@@ -1248,16 +1278,15 @@ var getInnerHtmlMetadataList = (target) => {
 
 // src/decorators/addEventListener.ts
 var ADD_EVENT_LISTENER_METADATA_KEY = Symbol("simple-web-component:add-event-listener");
-function addEventListener(arg1, arg2) {
+function addEventListener(selector, type, options = {}) {
   return (target, propertyKey, descriptor) => {
     const constructor = target.constructor;
-    const options = typeof arg1 === "string" ? { type: arg1, query: arg2 } : arg1;
     let listeners = ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
     if (!listeners) {
       listeners = [];
       ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);
     }
-    listeners.push({ options, propertyKey });
+    listeners.push({ selector, type, options, propertyKey });
   };
 }
 var getAddEventListenerMetadata = (target) => {
@@ -1303,11 +1332,11 @@ var findAllLifecycleMetadata = (target, metadataKey) => {
 // src/decorators/emitCustomEvent.ts
 var EMIT_CUSTOM_EVENT_METADATA_KEY = Symbol("simple-web-component:emit-custom-event");
 function emitCustomEvent(typeOrOptions) {
-  return (target, propertyKey, descriptor) => {
+  return (target, propertyKey) => {
     const constructor = target.constructor;
     const options = typeof typeOrOptions === "string" ? { type: typeOrOptions } : typeOrOptions;
     if (!options.attributeName) {
-      options.attributeName = `on${options.type}`;
+      options.attributeName = `swc-on-${options.type}`;
     }
     if (options.bubbles === void 0) options.bubbles = true;
     if (options.composed === void 0) options.composed = true;
@@ -1317,18 +1346,6 @@ function emitCustomEvent(typeOrOptions) {
       ReflectUtils.defineMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, list, constructor);
     }
     list.push({ propertyKey, options });
-    const originalMethod = descriptor.value;
-    descriptor.value = function(...args) {
-      const detail = originalMethod.apply(this, args);
-      const event = new CustomEvent(options.type, {
-        detail,
-        bubbles: options.bubbles,
-        composed: options.composed,
-        cancelable: options.cancelable
-      });
-      this.dispatchEvent(event);
-      return detail;
-    };
   };
 }
 var getEmitCustomEventMetadataList = (target) => {
@@ -1393,183 +1410,112 @@ var findAllSetAttributeMetadata = (target) => {
 
 // src/utils/Utils.ts
 var SWC_NOT_FOUND = Symbol("SWC_NOT_FOUND");
-var SwcUtils = class _SwcUtils {
-  static getValueByPath(obj, path, rootName) {
+var SwcUtils;
+((SwcUtils2) => {
+  SwcUtils2.getHelperSet = (win) => {
+    const doc = win.document;
+    return {
+      $d: doc,
+      $w: win,
+      $q: (sel, root) => (root ?? doc).querySelector(sel),
+      $qa: (sel, root) => Array.from((root ?? doc).querySelectorAll(sel)),
+      $qi: (id, root) => (root ?? doc).getElementById(id)
+    };
+  };
+  SwcUtils2.getHelperAndHostSet = (win, el) => {
+    const helperSet = (0, SwcUtils2.getHelperSet)(win);
+    const hostSet = (0, SwcUtils2.getHostSet)(el);
+    return {
+      ...helperSet,
+      ...hostSet
+    };
+  };
+  SwcUtils2.getValueByPath = (obj, path, rootName) => {
     if (!obj || !path) return SWC_NOT_FOUND;
     const parts = path.split(".");
-    if (parts[0] === rootName && parts.length > 1) {
-      const subParts = parts.slice(1);
-      let subResult = obj;
-      for (const part of subParts) {
-        if (subResult === null || typeof subResult !== "object" || !(part in subResult)) return SWC_NOT_FOUND;
-        subResult = subResult[part];
-      }
-      return subResult;
-    }
-    let result = obj;
+    let current = obj;
     for (const part of parts) {
-      if (result === null || typeof result !== "object" || !(part in result)) {
-        return SWC_NOT_FOUND;
-      }
-      result = result[part];
+      if (current === null || current === void 0) return SWC_NOT_FOUND;
+      current = current[part];
     }
-    if (result !== obj && !(result instanceof HTMLElement)) {
-      return result;
+    return current;
+  };
+  SwcUtils2.findNearestSwcHost = (el) => {
+    if (el.__swc_host) return el.__swc_host;
+    let current = el.parentElement || el.getRootNode?.()?.host;
+    while (current && current !== document && current !== window) {
+      if (current.__swc_host) return current.__swc_host;
+      if (getElementConfig(current)) return current;
+      current = current.parentElement || current.getRootNode?.()?.host;
     }
-    return SWC_NOT_FOUND;
-  }
-  static evalExpression(expr, context) {
-    try {
-      const keys = Object.keys(context);
-      const values = Object.values(context);
-      return new Function(...keys, `return (${expr})`).apply(null, values);
-    } catch {
-      return SWC_NOT_FOUND;
-    }
-  }
-  static applyData(node, data, options) {
-    const { asKey, asIndexKey, index, hostContext } = options;
-    const context = {};
-    if (index !== void 0) {
-      context[asIndexKey] = index;
-    }
-    if (data !== null && data !== void 0) {
-      context[asKey] = data;
-      context["value"] = data;
-    }
-    const fullContext = { ...hostContext || {}, ...context };
-    const resolveExpr = (expr, match) => {
-      expr = expr.trim();
-      const simpleVal = _SwcUtils.getValueByPath(data, expr, asKey);
-      if (simpleVal !== SWC_NOT_FOUND && typeof simpleVal !== "symbol") {
-        return simpleVal === null || simpleVal === void 0 ? "" : String(simpleVal);
-      }
-      const exprVal = _SwcUtils.evalExpression(expr, fullContext);
-      if (exprVal !== SWC_NOT_FOUND && typeof exprVal !== "symbol") {
-        return exprVal === null || exprVal === void 0 ? "" : String(exprVal);
-      }
-      return match;
-    };
-    const walk = (n) => {
-      if (n.nodeType === Node.TEXT_NODE) {
-        if (!n._original) n._original = n.textContent;
-        let text = n._original;
-        text = text.replace(/{{(.*?)}}/g, (match, path) => {
-          return resolveExpr(path, match);
-        });
-        if (n.textContent !== text) n.textContent = text;
-      } else if (n.nodeType === Node.ELEMENT_NODE) {
-        const el = n;
-        Array.from(el.attributes).forEach((a) => {
-          if (!a._original) a._original = a.value;
-          let val = a._original;
-          val = val.replace(/{{(.*?)}}/g, (match, path) => {
-            return resolveExpr(path, match);
-          });
-          if (a.value !== val) a.value = val;
-        });
-        el.childNodes.forEach(walk);
-      }
-    };
-    walk(node);
-  }
-  static createReactiveProxy(target, onChange, onIndexChange) {
-    const makeRecursiveProxy = (obj) => {
-      if (typeof obj !== "object" || obj === null || obj instanceof Node) return obj;
-      if (obj.__swc_is_proxy) return obj;
-      const IS_PROXY_KEY = "__swc_is_proxy";
-      const proxy = new Proxy(obj, {
-        get: (t, prop) => {
-          if (prop === IS_PROXY_KEY) return true;
-          if (typeof prop === "symbol") return t[prop];
-          return t[prop];
-        },
-        set: (t, prop, val) => {
-          if (prop === IS_PROXY_KEY) return true;
-          if (typeof prop === "symbol") {
-            t[prop] = val;
-            return true;
-          }
-          const oldVal = t[prop];
-          if (oldVal === val) return true;
-          t[prop] = makeRecursiveProxy(val);
-          const isIndex = !isNaN(Number(prop)) && Array.isArray(t);
-          if (isIndex && onIndexChange) {
-            onIndexChange(Number(prop), val);
-          } else {
-            onChange();
-          }
-          return true;
-        },
-        deleteProperty: (t, prop) => {
-          delete t[prop];
-          onChange();
-          return true;
-        }
-      });
-      return proxy;
-    };
-    return makeRecursiveProxy(target);
-  }
-  static findNearestSwcHost(el) {
-    const hosts = this.findAllSwcHosts(el);
-    return hosts.length > 0 ? hosts[hosts.length - 1] : null;
-  }
-  static findAllSwcHosts(el) {
+    return void 0;
+  };
+  SwcUtils2.findAllSwcHosts = (el) => {
     const hosts = [];
-    let curr = el instanceof Node && !(el instanceof HTMLElement) ? el.host : el;
-    curr = curr?.parentElement || curr?.getRootNode()?.host;
-    while (curr) {
-      if (curr._swcId) hosts.push(curr);
-      curr = curr.parentElement || curr?.getRootNode()?.host;
+    let current = (0, SwcUtils2.findNearestSwcHost)(el);
+    while (current) {
+      hosts.push(current);
+      current = (0, SwcUtils2.findNearestSwcHost)(current);
     }
     return hosts.reverse();
-  }
-  static getHosts(el) {
-    return this.findAllSwcHosts(el);
-  }
-  static getHost(el) {
-    const hosts = this.getHosts(el);
-    return hosts.length > 0 ? hosts[hosts.length - 1] : void 0;
-  }
-  static getFirstHost(el) {
-    const hosts = this.getHosts(el);
-    return hosts.length > 0 ? hosts[0] : void 0;
-  }
-  static getAppHosts(el) {
-    const hosts = this.getHosts(el);
+  };
+  SwcUtils2.getHosts = (el) => {
+    const ancestors = (0, SwcUtils2.findAllSwcHosts)(el);
+    if (getElementConfig(el)) return [...ancestors, el];
+    return ancestors;
+  };
+  SwcUtils2.getHost = (el) => {
+    if (getElementConfig(el)) return el;
+    return (0, SwcUtils2.findNearestSwcHost)(el);
+  };
+  SwcUtils2.getAppHosts = (el) => {
+    const hosts = (0, SwcUtils2.getHosts)(el);
     return hosts.filter((host) => host.tagName.toLowerCase() === "swc-app" || host.getAttribute("is")?.startsWith("swc-app-"));
-  }
-  static getAppHost(el) {
-    const appHosts = this.getAppHosts(el);
-    return appHosts.length > 0 ? appHosts[appHosts.length - 1] : void 0;
-  }
-  static getFirstAppHost(el) {
-    const appHosts = this.getAppHosts(el);
-    return appHosts.length > 0 ? appHosts[0] : void 0;
-  }
-  static getLastAppHost(el) {
-    return this.getAppHost(el);
-  }
-  static getHostSet(el) {
-    const $hosts = this.getHosts(el);
-    const $appHosts = this.getAppHosts(el);
-    const $firstHost = $hosts[0] || null;
-    const $lastHost = $hosts[$hosts.length - 1] || null;
-    const $firstAppHost = $appHosts[0] || null;
-    const $lastAppHost = $appHosts[$appHosts.length - 1] || null;
+  };
+  SwcUtils2.getAppHost = (el) => {
+    const appHosts = (0, SwcUtils2.getAppHosts)(el);
+    const appHostsWithoutSelf = appHosts.filter((h) => h !== el);
+    return appHostsWithoutSelf.length > 0 ? appHostsWithoutSelf[appHostsWithoutSelf.length - 1] : void 0;
+  };
+  SwcUtils2.getHostSet = (el) => {
+    const isSwc = !!getElementConfig(el);
+    const ancestors = (0, SwcUtils2.findAllSwcHosts)(el);
+    let $host;
+    let $parentHost;
+    if (isSwc) {
+      $host = el;
+      $parentHost = ancestors.length > 0 ? ancestors[ancestors.length - 1] : null;
+    } else {
+      $host = ancestors.length > 0 ? ancestors[ancestors.length - 1] : el;
+      $parentHost = ancestors.length > 1 ? ancestors[ancestors.length - 2] : null;
+    }
+    const $hosts = isSwc ? [...ancestors, el] : ancestors;
+    const $firstHost = $hosts.length > 0 ? $hosts[0] : null;
+    const loopContext = {};
+    let curr = el;
+    while (curr && curr !== document.documentElement) {
+      if (curr.__swc_loop_context) {
+        Object.assign(loopContext, curr.__swc_loop_context);
+      }
+      curr = curr.parentElement || curr.getRootNode().host;
+    }
+    const $appHosts = $hosts.filter((h) => h.tagName.toLowerCase() === "swc-app" || h.getAttribute("is")?.startsWith("swc-app-"));
+    const $appHost = $appHosts.length > 0 ? $appHosts[$appHosts.length - 1] === el ? $appHosts.length > 1 ? $appHosts[$appHosts.length - 2] : null : $appHosts[$appHosts.length - 1] : null;
+    const $firstAppHost = $appHosts.length > 0 ? $appHosts[0] : null;
     return {
-      $host: $lastHost,
+      $host,
+      $parentHost,
       $hosts,
       $firstHost,
-      $lastHost,
-      $appHost: $lastAppHost,
+      $lastHost: $parentHost,
+      $appHost,
       $appHosts,
       $firstAppHost,
-      $lastAppHost
+      $lastAppHost: $appHost,
+      ...loopContext
     };
-  }
-};
+  };
+})(SwcUtils || (SwcUtils = {}));
 
 // src/config/config.ts
 var HTML_TAG_ENTRIES = [
@@ -1681,6 +1627,7 @@ var InjectSituationType = /* @__PURE__ */ ((InjectSituationType2) => {
   InjectSituationType2["APP_HOST"] = "SIMPLE_WEB_COMPONENT://APPHOST";
   InjectSituationType2["APP_HOSTS"] = "SIMPLE_WEB_COMPONENT://APPHOSTS";
   InjectSituationType2["HOST"] = "SIMPLE_WEB_COMPONENT://HOST";
+  InjectSituationType2["PARENT_HOST"] = "SIMPLE_WEB_COMPONENT://PARENTHOST";
   InjectSituationType2["HOSTS"] = "SIMPLE_WEB_COMPONENT://HOSTS";
   InjectSituationType2["FIRST_HOST"] = "SIMPLE_WEB_COMPONENT://FIRSTHOST";
   InjectSituationType2["LAST_HOST"] = "SIMPLE_WEB_COMPONENT://LASTHOST";
@@ -1691,6 +1638,7 @@ var InjectSituationType = /* @__PURE__ */ ((InjectSituationType2) => {
 
 // src/decorators/elementDefine.ts
 var ELEMENT_CONFIG_KEY = Symbol("simple-web-component:element-config");
+var globalDelegatedRoots = /* @__PURE__ */ new WeakSet();
 function buildEnv(configWindow) {
   const win = configWindow || (typeof window !== "undefined" ? window : void 0);
   const doc = win?.document;
@@ -1699,13 +1647,7 @@ function buildEnv(configWindow) {
     if (win?.[cls])
       builtInTagMap.set(win[cls], tag);
   }
-  const domHelpers = {
-    $d: doc,
-    $w: win,
-    $q: (sel, root) => (root ?? doc).querySelector(sel),
-    $qa: (sel, root) => Array.from((root ?? doc).querySelectorAll(sel)),
-    $qi: (id, root) => (root ?? doc).getElementById(id)
-  };
+  const domHelpers = SwcUtils.getHelperSet(win);
   return { win, doc, builtInTagMap, domHelpers };
 }
 var getHandlers = (inst) => {
@@ -1717,8 +1659,6 @@ var elementDefine = (inConfig) => (constructor) => {
   const config = typeof inConfig === "string" ? { name: inConfig } : inConfig;
   const { win, doc, builtInTagMap: BUILT_IN_TAG_MAP, domHelpers: SWC_DOM_HELPERS } = buildEnv(config.window);
   config.window = win;
-  const SWC_DOM_HELPER_KEYS = Object.keys(SWC_DOM_HELPERS);
-  const SWC_DOM_HELPER_VALS = () => SWC_DOM_HELPER_KEYS.map((k) => SWC_DOM_HELPERS[k]);
   let extendsTagName = config.extends;
   if (!extendsTagName) {
     let proto = constructor;
@@ -1744,9 +1684,7 @@ var elementDefine = (inConfig) => (constructor) => {
       if (script) {
         try {
           const args = { ...hostSet, ...SWC_DOM_HELPERS, ...extraArgs };
-          const argNames = Object.keys(args);
-          const argValues = Object.values(args);
-          new Function(...argNames, script).apply(this, argValues);
+          FunctionUtils.execute({ script, context: this, args });
         } catch (e) {
           console.error(`[SWC] Failed to execute ${attrName}:`, e);
         }
@@ -1769,10 +1707,12 @@ var elementDefine = (inConfig) => (constructor) => {
         return this[methodName](...extraArgs);
       }
     }
-    _bindAttributeEvent(el, attrName, script) {
-      if (!attrName.startsWith("swc-on-"))
-        return;
-      const eventName = attrName.substring(7);
+    _bindAttributeEvent(el, attrName, script, eventName) {
+      if (!eventName) {
+        if (!attrName.startsWith("swc-on-"))
+          return;
+        eventName = attrName.substring(7);
+      }
       if (swcLifecycleAttributes.includes(attrName))
         return;
       const elHandlers = getHandlers(this);
@@ -1786,9 +1726,13 @@ var elementDefine = (inConfig) => (constructor) => {
         el.removeEventListener(eventName, oldHandler);
       const handler = (event) => {
         const hostSet = SwcUtils.getHostSet(el);
-        const argNames = Object.keys(hostSet);
-        const argValues = Object.values(hostSet);
-        new Function("event", "$data", ...argNames, ...SWC_DOM_HELPER_KEYS, script).call(el, event, event.detail, ...argValues, ...SWC_DOM_HELPER_VALS());
+        const args = {
+          event,
+          $data: event.detail,
+          ...hostSet,
+          ...SWC_DOM_HELPERS
+        };
+        FunctionUtils.execute({ script, context: el, args });
       };
       el.addEventListener(eventName, handler);
       handlers.set(attrName, handler);
@@ -1797,6 +1741,7 @@ var elementDefine = (inConfig) => (constructor) => {
       super(...args);
       this._swcId = Math.random().toString(36).substring(2, 11);
       this._emitHandlers = /* @__PURE__ */ new Map();
+      this._boundListeners = [];
       const hostSet = SwcUtils.getHostSet(this);
       this._executeSwcScript("swc-on-constructor", hostSet);
       if (innerHtmlList.some((it) => it.options.useShadow === true) && !this.shadowRoot) {
@@ -1807,6 +1752,9 @@ var elementDefine = (inConfig) => (constructor) => {
       return mergedObservedAttributes;
     }
     async connectedCallback() {
+      const conf = getElementConfig(this);
+      const currentWin = conf?.window || window;
+      const currentDoc = currentWin.document;
       const hostSet = SwcUtils.getHostSet(this);
       this._executeSwcScript("swc-on-before-connected", hostSet);
       const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_CONNECTED_METADATA_KEY);
@@ -1832,19 +1780,122 @@ var elementDefine = (inConfig) => (constructor) => {
         if (lContent)
           this.innerHTML = lContent;
       }
+      const createDelegationHandler = (delegateHost) => (event) => {
+        if (event.__swc_handled)
+          return;
+        const path = event.composedPath();
+        const type = event.type;
+        const attrName = `swc-on-${type}`;
+        for (const node of path) {
+          if (node === delegateHost)
+            break;
+          if (!(node instanceof HTMLElement))
+            continue;
+          const script = node.getAttribute?.(attrName);
+          if (script && !getElementConfig(node)) {
+            const host = SwcUtils.findNearestSwcHost(node);
+            if (host) {
+              const childHostSet = SwcUtils.getHostSet(node);
+              const args = {
+                event,
+                $data: event.detail,
+                ...childHostSet,
+                ...SWC_DOM_HELPERS
+              };
+              FunctionUtils.execute({ script, context: node, args });
+              event.__swc_handled = true;
+              break;
+            }
+          }
+        }
+      };
+      DOM_EVENT_NAMES.forEach((type) => {
+        this.addEventListener(type, createDelegationHandler(this));
+        this._boundListeners.push({ target: this, type, handler: createDelegationHandler(this) });
+      });
+      const hasParentHost = SwcUtils.findAllSwcHosts(this).length > 0;
+      if (!hasParentHost) {
+        const root = this.getRootNode();
+        if (!globalDelegatedRoots.has(root)) {
+          DOM_EVENT_NAMES.forEach((type) => {
+            const handler = createDelegationHandler(root);
+            root.addEventListener(type, handler);
+          });
+          globalDelegatedRoots.add(root);
+        }
+      }
       addEventListenerList.forEach((meta) => {
-        const { type, query: query2, root, capture, once, passive, stopPropagation, stopImmediatePropagation, preventDefault } = meta.options;
-        const targetEls = [];
-        if (!query2) {
-          targetEls.push(this);
+        const { selector, type, options } = meta;
+        const { root, capture, once, passive, stopPropagation, stopImmediatePropagation, preventDefault, delegate, removeOnDisconnected } = options;
+        const opts = { capture, once, passive };
+        const bindTargets = [];
+        if (selector === ":window") {
+          bindTargets.push(currentWin);
+        } else if (selector === ":document") {
+          bindTargets.push(currentDoc);
+        } else if (selector === ":parentHost") {
+          if (hostSet.$parentHost)
+            bindTargets.push(hostSet.$parentHost);
+        } else if (selector === ":appHost") {
+          if (hostSet.$appHost)
+            bindTargets.push(hostSet.$appHost);
+        } else if (selector === ":firstHost") {
+          if (hostSet.$firstHost)
+            bindTargets.push(hostSet.$firstHost);
+        } else if (selector === ":lastHost") {
+          if (hostSet.$lastHost)
+            bindTargets.push(hostSet.$lastHost);
+        } else if (selector === ":firstAppHost") {
+          if (hostSet.$firstAppHost)
+            bindTargets.push(hostSet.$firstAppHost);
+        } else if (selector === ":lastAppHost") {
+          if (hostSet.$lastAppHost)
+            bindTargets.push(hostSet.$lastAppHost);
+        } else if (!selector || selector === ":host") {
+          bindTargets.push(this);
+        } else if (delegate) {
+          const bindRoots = [];
+          const r = root || "auto";
+          if (r === "auto")
+            bindRoots.push(this.shadowRoot || this);
+          else if (r === "light")
+            bindRoots.push(this);
+          else if (r === "shadow") {
+            if (this.shadowRoot)
+              bindRoots.push(this.shadowRoot);
+          } else if (r === "all") {
+            bindRoots.push(this);
+            if (this.shadowRoot)
+              bindRoots.push(this.shadowRoot);
+          }
+          bindRoots.forEach((br) => {
+            const handler = (event) => {
+              const matchedEl = event.target.closest(selector);
+              if (matchedEl && br.contains(matchedEl)) {
+                if (stopPropagation)
+                  event.stopPropagation();
+                if (stopImmediatePropagation)
+                  event.stopImmediatePropagation();
+                if (preventDefault)
+                  event.preventDefault();
+                const currentHostSet = SwcUtils.getHostSet(this);
+                this._invokeLifecycleMethod(meta.propertyKey, currentHostSet, [event, currentHostSet, matchedEl]);
+              }
+            };
+            br.addEventListener(type, handler, opts);
+            const self2 = this;
+            if (removeOnDisconnected === true || br !== self2 && br !== self2.shadowRoot) {
+              this._boundListeners.push({ target: br, type, handler, options: opts });
+            }
+          });
         } else {
           const searchRoots = [];
           const r = root || "auto";
-          if (r === "auto") {
+          if (r === "auto")
             searchRoots.push(this.shadowRoot || this);
-          } else if (r === "light") {
+          else if (r === "light")
             searchRoots.push(this);
-          } else if (r === "shadow") {
+          else if (r === "shadow") {
             if (this.shadowRoot)
               searchRoots.push(this.shadowRoot);
           } else if (r === "all") {
@@ -1853,11 +1904,10 @@ var elementDefine = (inConfig) => (constructor) => {
               searchRoots.push(this.shadowRoot);
           }
           searchRoots.forEach((sr) => {
-            const found = sr.querySelectorAll(query2);
-            found.forEach((el) => targetEls.push(el));
+            sr.querySelectorAll(selector).forEach((el) => bindTargets.push(el));
           });
         }
-        targetEls.forEach((el) => {
+        bindTargets.forEach((target) => {
           const handler = (event) => {
             if (stopPropagation)
               event.stopPropagation();
@@ -1865,11 +1915,13 @@ var elementDefine = (inConfig) => (constructor) => {
               event.stopImmediatePropagation();
             if (preventDefault)
               event.preventDefault();
-            const hostSet2 = SwcUtils.getHostSet(this);
-            this._invokeLifecycleMethod(meta.propertyKey, hostSet2, [event, hostSet2]);
+            const currentHostSet = SwcUtils.getHostSet(this);
+            this._invokeLifecycleMethod(meta.propertyKey, currentHostSet, [event, currentHostSet]);
           };
-          const options = { capture, once, passive };
-          el.addEventListener(type, handler, options);
+          target.addEventListener(type, handler, opts);
+          if (removeOnDisconnected === true || target === currentWin || target === currentDoc) {
+            this._boundListeners.push({ target, type, handler, options: opts });
+          }
         });
       });
       if (super.connectedCallback)
@@ -1888,6 +1940,8 @@ var elementDefine = (inConfig) => (constructor) => {
       const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_DISCONNECTED_METADATA_KEY);
       if (bMethods)
         bMethods.forEach((m) => this._invokeLifecycleMethod(m, hostSet));
+      this._boundListeners.forEach((l) => l.target.removeEventListener(l.type, l.handler, l.options));
+      this._boundListeners = [];
       if (super.disconnectedCallback)
         super.disconnectedCallback();
       const aMethods = findAllLifecycleMetadata(this, ON_AFTER_DISCONNECTED_METADATA_KEY);
@@ -1915,7 +1969,9 @@ var elementDefine = (inConfig) => (constructor) => {
         super.attributeChangedCallback(name, old, newVal);
       if (name.startsWith("swc-on-") && !swcLifecycleAttributes.includes(name)) {
         if (newVal !== null) {
-          this._bindAttributeEvent(this, name, newVal);
+          const customEventMeta = emitCustomEventList.find((it) => it.options.attributeName === name);
+          const eventName = customEventMeta ? customEventMeta.options.type : name.substring(7);
+          this._bindAttributeEvent(this, name, newVal, eventName);
         }
       }
       const mKeys = attrChangeMap.get(name);
@@ -1940,6 +1996,23 @@ var elementDefine = (inConfig) => (constructor) => {
       };
     }
   });
+  emitCustomEventList.forEach((meta) => {
+    const { propertyKey, options } = meta;
+    const original = NewClass.prototype[propertyKey];
+    if (typeof original === "function") {
+      NewClass.prototype[propertyKey] = function(...args) {
+        const detail = original.apply(this, args);
+        const event = new CustomEvent(options.type, {
+          detail,
+          bubbles: options.bubbles,
+          composed: options.composed,
+          cancelable: options.cancelable
+        });
+        this.dispatchEvent(event);
+        return detail;
+      };
+    }
+  });
   const originalProto = constructor.prototype;
   const newProto = NewClass.prototype;
   Object.getOwnPropertyNames(originalProto).forEach((name) => {
@@ -1963,48 +2036,57 @@ var getElementConfig = (target) => {
 
 // src/decorators/query.ts
 var QUERY_METADATA_KEY = Symbol("simple-web-component:query");
-function query(arg1, arg2) {
-  const decorator = (selector, options, target, propertyKey, descriptor) => {
-    const isMethod = !!descriptor;
+function query(selector, options = {}) {
+  return (target, propertyKey, descriptor) => {
+    if (descriptor !== void 0) {
+      throw new Error(`@query decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
+    }
     const constructor = target.constructor;
     let queries = ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor);
     if (!queries) {
       queries = [];
       ReflectUtils.defineMetadata(QUERY_METADATA_KEY, queries, constructor);
     }
-    queries.push({ selector, options, propertyKey, isMethod });
-    if (!isMethod) {
-      Object.defineProperty(target, propertyKey, {
-        get() {
-          if (!selector)
-            return this;
-          let searchRoot = this;
-          if (options.root === "shadow")
-            searchRoot = this.shadowRoot || this;
-          else if (options.root === "light")
-            searchRoot = this;
-          else
-            searchRoot = this.shadowRoot || this;
-          return searchRoot.querySelector(selector);
-        },
-        enumerable: true,
-        configurable: true
-      });
-    }
-  };
-  if (arg1 && typeof arg2 === "string") {
-    return decorator("", {}, arg1, arg2);
-  }
-  return (target, propertyKey, descriptor) => {
-    let selector = "";
-    let options = {};
-    if (typeof arg1 === "string") {
-      selector = arg1;
-    } else if (typeof arg1 === "object") {
-      options = arg1;
-      selector = options.selector || "";
-    }
-    decorator(selector, options, target, propertyKey, descriptor);
+    queries.push({ selector, options, propertyKey });
+    Object.defineProperty(target, propertyKey, {
+      get() {
+        const hostSet = SwcUtils.getHostSet(this);
+        if (selector === ":parentHost")
+          return hostSet.$parentHost;
+        if (selector === ":appHost")
+          return hostSet.$appHost;
+        if (selector === ":firstHost")
+          return hostSet.$firstHost;
+        if (selector === ":lastHost")
+          return hostSet.$lastHost;
+        if (selector === ":firstAppHost")
+          return hostSet.$firstAppHost;
+        if (selector === ":lastAppHost")
+          return hostSet.$lastAppHost;
+        const config = getElementConfig(this);
+        const win = config?.window || window;
+        const doc = win.document;
+        if (selector === ":window")
+          return win;
+        if (selector === ":document")
+          return doc;
+        if (!selector || selector === ":host")
+          return this;
+        const r = options.root || "auto";
+        if (r === "shadow") {
+          return this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;
+        }
+        if (r === "light") {
+          return this.querySelector(selector);
+        }
+        if (r === "all") {
+          return this.shadowRoot?.querySelector(selector) || this.querySelector(selector);
+        }
+        return (this.shadowRoot || this).querySelector(selector);
+      },
+      enumerable: true,
+      configurable: true
+    });
   };
 }
 var getQueryMetadata = (target) => {
@@ -2014,48 +2096,52 @@ var getQueryMetadata = (target) => {
 
 // src/decorators/queryAll.ts
 var QUERY_ALL_METADATA_KEY = Symbol("simple-web-component:query-all");
-function queryAll(arg1, arg2) {
-  const decorator = (selector, options, target, propertyKey, descriptor) => {
-    const isMethod = !!descriptor;
+function queryAll(selector, options = {}) {
+  return (target, propertyKey, descriptor) => {
+    if (descriptor !== void 0) {
+      throw new Error(`@queryAll decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
+    }
     const constructor = target.constructor;
     let queries = ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);
     if (!queries) {
       queries = [];
       ReflectUtils.defineMetadata(QUERY_ALL_METADATA_KEY, queries, constructor);
     }
-    queries.push({ selector, options, propertyKey, isMethod });
-    if (!isMethod) {
-      Object.defineProperty(target, propertyKey, {
-        get() {
-          if (!selector)
-            return [this];
-          let searchRoot = this;
-          if (options.root === "shadow")
-            searchRoot = this.shadowRoot || this;
-          else if (options.root === "light")
-            searchRoot = this;
-          else
-            searchRoot = this.shadowRoot || this;
-          return searchRoot.querySelectorAll(selector);
-        },
-        enumerable: true,
-        configurable: true
-      });
-    }
-  };
-  if (arg1 && typeof arg2 === "string") {
-    return decorator("", {}, arg1, arg2);
-  }
-  return (target, propertyKey, descriptor) => {
-    let selector = "";
-    let options = {};
-    if (typeof arg1 === "string") {
-      selector = arg1;
-    } else if (typeof arg1 === "object") {
-      options = arg1;
-      selector = options.selector || "";
-    }
-    decorator(selector, options, target, propertyKey, descriptor);
+    queries.push({ selector, options, propertyKey });
+    Object.defineProperty(target, propertyKey, {
+      get() {
+        const hostSet = SwcUtils.getHostSet(this);
+        if (selector === ":hosts")
+          return hostSet.$hosts;
+        if (selector === ":appHosts")
+          return hostSet.$appHosts;
+        const config = getElementConfig(this);
+        const win = config?.window || window;
+        const doc = win.document;
+        if (selector === ":window")
+          return [win];
+        if (selector === ":document")
+          return [doc];
+        if (!selector || selector === ":host")
+          return [this];
+        const r = options.root || "auto";
+        if (r === "shadow") {
+          return this.shadowRoot ? this.shadowRoot.querySelectorAll(selector) : [];
+        }
+        if (r === "light") {
+          return this.querySelectorAll(selector);
+        }
+        if (r === "all") {
+          const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
+          const lNodes = Array.from(this.querySelectorAll(selector));
+          return [...sNodes, ...lNodes];
+        }
+        const root = this.shadowRoot || this;
+        return root.querySelectorAll(selector);
+      },
+      enumerable: true,
+      configurable: true
+    });
   };
 }
 var getQueryAllMetadata = (target) => {
@@ -7680,7 +7766,7 @@ var SwcAppEngine = class {
     const configStr = this.host.getAttribute("swc-get-application-config");
     if (!configStr) return;
     try {
-      const userConfig = new Function(`return ${configStr}`).apply(this.host);
+      const userConfig = FunctionUtils.executeReturn({ script: configStr, context: this.host });
       if (userConfig && userConfig.rootRouter) {
         const _config = {
           routeType: "element",
@@ -9544,6 +9630,732 @@ var SwcAppBody = class SwcAppBody2 extends HTMLBodyElement {
 SwcAppBody = __decorate57([
   elementDefine({ name: "swc-app-body", extends: "body" })
 ], SwcAppBody);
+
+// src/elements/SwcSubTemplates.ts
+var __decorate58 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var SwcLoading = class SwcLoading2 extends HTMLTemplateElement {
+};
+SwcLoading = __decorate58([
+  elementDefine({ name: "swc-loading", extends: "template" })
+], SwcLoading);
+var SwcError = class SwcError2 extends HTMLTemplateElement {
+};
+SwcError = __decorate58([
+  elementDefine({ name: "swc-error", extends: "template" })
+], SwcError);
+var SwcSuccess = class SwcSuccess2 extends HTMLTemplateElement {
+};
+SwcSuccess = __decorate58([
+  elementDefine({ name: "swc-success", extends: "template" })
+], SwcSuccess);
+var SwcWhen = class SwcWhen2 extends HTMLTemplateElement {
+};
+SwcWhen = __decorate58([
+  elementDefine({ name: "swc-when", extends: "template" })
+], SwcWhen);
+var SwcOtherwise = class SwcOtherwise2 extends HTMLTemplateElement {
+};
+SwcOtherwise = __decorate58([
+  elementDefine({ name: "swc-otherwise", extends: "template" })
+], SwcOtherwise);
+var SwcDefault = class SwcDefault2 extends HTMLTemplateElement {
+};
+SwcDefault = __decorate58([
+  elementDefine({ name: "swc-default", extends: "template" })
+], SwcDefault);
+
+// src/elements/SwcLoop.ts
+var __decorate59 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = function(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var SwcLoop = class SwcLoop2 extends HTMLTemplateElement {
+  constructor() {
+    super(...arguments);
+    this._value = [];
+    this._nodes = [];
+    this._defaultNodes = [];
+  }
+  get value() {
+    return this._value;
+  }
+  set value(nv) {
+    this._value = Array.isArray(nv) ? [...nv] : [];
+    this.render();
+  }
+  getNodes(index) {
+    return this._nodes[index] || null;
+  }
+  _getTarget() {
+    const script = this.getAttribute("on-get-portal");
+    if (!script)
+      return null;
+    try {
+      const res = FunctionUtils.executeReturn({
+        script,
+        context: this,
+        args: SwcUtils.getHelperAndHostSet(window, this)
+      });
+      if (typeof res === "string")
+        return document.querySelector(res);
+      if (res instanceof Node)
+        return res;
+    } catch (e) {
+      console.error("[SwcLoop] Portal target error:", e);
+    }
+    return null;
+  }
+  append(...items) {
+    if (!items.length || !this.parentElement)
+      return;
+    if (this._defaultNodes.length > 0)
+      this._cleanupDefault();
+    const fragment = document.createDocumentFragment();
+    const startIndex = this._value.length;
+    items.forEach((item, i) => {
+      const index = startIndex + i;
+      const nodes = this._createItemNodes(item, index);
+      if (nodes) {
+        this._nodes.push(nodes);
+        nodes.forEach((n) => fragment.appendChild(n));
+        this._value.push(item);
+      } else {
+        this._nodes.push(null);
+        this._value.push(null);
+      }
+    });
+    const target = this._getTarget();
+    if (target) {
+      target.appendChild(fragment);
+    } else {
+      const lastValidIdx = this._nodes.length - items.length - 1;
+      let refNode = this;
+      for (let i = lastValidIdx; i >= 0; i--) {
+        const group = this._nodes[i];
+        if (group && group.length > 0) {
+          refNode = group[group.length - 1];
+          break;
+        }
+      }
+      this.parentElement.insertBefore(fragment, refNode.nextSibling);
+    }
+  }
+  remove(index) {
+    const targetIdx = index !== void 0 ? index : this._nodes.length - 1;
+    if (targetIdx < 0 || targetIdx >= this._nodes.length)
+      return;
+    const nodes = this._nodes[targetIdx];
+    if (nodes) {
+      nodes.forEach((n) => {
+        if (n.parentElement)
+          n.parentElement.removeChild(n);
+      });
+      this._nodes[targetIdx] = null;
+      this._value[targetIdx] = null;
+    }
+    const activeRows = this._value.filter((v) => v !== null);
+    if (activeRows.length === 0) {
+      this.render();
+    }
+  }
+  _createItemNodes(item, index) {
+    const clone = this.content.cloneNode(true);
+    Array.from(clone.querySelectorAll('template[is="swc-default"]')).forEach((t) => t.remove());
+    const nodes = Array.from(clone.childNodes);
+    const elements = nodes.filter((n) => n.nodeType === 1);
+    const groupCtx = {
+      $index: index,
+      $item: item,
+      $nodes: nodes,
+      $elements: elements,
+      $firstNode: nodes[0],
+      $lastNode: nodes[nodes.length - 1],
+      $firstElement: elements[0],
+      $lastElement: elements[elements.length - 1],
+      $isFirst: index === 0,
+      $isLast: index === this._value.length - 1,
+      $isEven: index % 2 === 0,
+      $isOdd: index % 2 !== 0,
+      $count: this._value.length
+    };
+    this._executeCallback("on-clone-nodes", groupCtx);
+    nodes.forEach((node, nodeIndex) => {
+      if (node instanceof HTMLElement)
+        node.__swc_host = this;
+      this._executeCallback("on-clone-node", { ...groupCtx, $node: node, $nodeIndex: nodeIndex, $isElement: node.nodeType === 1 });
+    });
+    return nodes;
+  }
+  _executeCallback(attrName, extraArgs) {
+    const script = this.getAttribute(attrName);
+    if (!script)
+      return;
+    const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);
+    try {
+      FunctionUtils.execute({ script, context: this, args: { ...helperHostSet, ...extraArgs } });
+    } catch (e) {
+      console.error(`[SwcLoop] Error in ${attrName}:`, e);
+    }
+  }
+  refreshValue(newValue) {
+    const script = newValue !== void 0 ? newValue : this.getAttribute("on-get-value");
+    if (!script) {
+      this.value = [];
+      return;
+    }
+    const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);
+    try {
+      const res = FunctionUtils.executeReturn({ script, context: this, args: helperHostSet });
+      if (Array.isArray(res)) {
+        this.value = res;
+      }
+    } catch (e) {
+      console.error("[SwcLoop] Failed to get value from on-get-value script:", e);
+      this.value = [];
+    }
+  }
+  render() {
+    this._cleanup();
+    if (!this.parentElement)
+      return;
+    const activeRows = this._value.filter((v) => v !== null);
+    const target = this._getTarget();
+    if (activeRows.length === 0) {
+      const t = this.content.querySelector('template[is="swc-default"]');
+      if (t) {
+        const clone = t.content.cloneNode(true);
+        this._defaultNodes = Array.from(clone.childNodes);
+        this._defaultNodes.forEach((n) => {
+          if (n instanceof HTMLElement)
+            n.__swc_host = this;
+        });
+        if (target)
+          target.appendChild(clone);
+        else
+          this.parentElement.insertBefore(clone, this.nextSibling);
+      }
+      return;
+    }
+    const fragment = document.createDocumentFragment();
+    this._value.forEach((item, index) => {
+      if (item === null) {
+        this._nodes.push(null);
+        return;
+      }
+      const nodes = this._createItemNodes(item, index);
+      this._nodes.push(nodes);
+      nodes.forEach((n) => fragment.appendChild(n));
+    });
+    if (target)
+      target.appendChild(fragment);
+    else
+      this.parentElement.insertBefore(fragment, this.nextSibling);
+  }
+  _cleanup() {
+    this._nodes.forEach((group) => {
+      if (group)
+        group.forEach((node) => node.parentElement?.removeChild(node));
+    });
+    this._nodes = [];
+    this._cleanupDefault();
+  }
+  _cleanupDefault() {
+    this._defaultNodes.forEach((n) => n.parentElement?.removeChild(n));
+    this._defaultNodes = [];
+  }
+  connectedCallback() {
+    this.refreshValue();
+  }
+  disconnectedCallback() {
+    this._cleanup();
+  }
+};
+__decorate59([
+  changedAttribute("on-get-value"),
+  __metadata("design:type", Function),
+  __metadata("design:paramtypes", [String]),
+  __metadata("design:returntype", void 0)
+], SwcLoop.prototype, "refreshValue", null);
+SwcLoop = __decorate59([
+  elementDefine({ name: "swc-loop", extends: "template" })
+], SwcLoop);
+
+// src/elements/SwcIf.ts
+var __decorate60 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata2 = function(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var SwcIf = class SwcIf2 extends HTMLTemplateElement {
+  constructor() {
+    super(...arguments);
+    this._nodes = [];
+    this._value = null;
+  }
+  get value() {
+    return this._value;
+  }
+  set value(nv) {
+    this._value = nv;
+    this.render();
+  }
+  _getTarget() {
+    const script = this.getAttribute("on-get-portal");
+    if (!script)
+      return null;
+    try {
+      const res = FunctionUtils.executeReturn({
+        script,
+        context: this,
+        args: SwcUtils.getHelperAndHostSet(window, this)
+      });
+      if (typeof res === "string")
+        return document.querySelector(res);
+      if (res instanceof Node)
+        return res;
+    } catch (e) {
+      console.error("[SwcIf] Portal target error:", e);
+    }
+    return null;
+  }
+  _executeCallback(attrName, extraArgs) {
+    const script = this.getAttribute(attrName);
+    if (!script)
+      return;
+    const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);
+    try {
+      FunctionUtils.execute({ script, context: this, args: { ...helperHostSet, ...extraArgs } });
+    } catch (e) {
+      console.error(`[SwcIf] Error in ${attrName}:`, e);
+    }
+  }
+  refresh(newValue) {
+    const script = newValue !== void 0 ? newValue : this.getAttribute("on-get-value");
+    if (!script) {
+      this.value = null;
+      return;
+    }
+    if (!this.parentElement)
+      return;
+    const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);
+    try {
+      const result = FunctionUtils.executeReturn({
+        script,
+        context: this,
+        args: helperHostSet
+      });
+      this.value = result;
+    } catch (e) {
+      console.error("[SwcIf] Error in on-get-value:", e);
+      this.value = null;
+    }
+  }
+  render() {
+    this.cleanup();
+    if (!this.parentElement)
+      return;
+    let fragment = null;
+    const ctx = { $value: this._value, $nodes: [], $elements: [] };
+    if (this._value) {
+      const clone = this.content.cloneNode(true);
+      Array.from(clone.querySelectorAll('template[is="swc-default"]')).forEach((t) => t.remove());
+      fragment = clone;
+    } else {
+      const t = this.content.querySelector('template[is="swc-default"]');
+      if (t)
+        fragment = t.content.cloneNode(true);
+    }
+    if (fragment) {
+      this.mount(fragment, ctx);
+    }
+  }
+  mount(fragment, ctx) {
+    const nodes = Array.from(fragment.childNodes);
+    const elements = nodes.filter((n) => n.nodeType === 1);
+    Object.assign(ctx, {
+      $nodes: nodes,
+      $elements: elements,
+      $firstNode: nodes[0],
+      $lastNode: nodes[nodes.length - 1],
+      $firstElement: elements[0],
+      $lastElement: elements[elements.length - 1]
+    });
+    this._executeCallback("on-clone-nodes", ctx);
+    nodes.forEach((node, nodeIndex) => {
+      if (node instanceof HTMLElement)
+        node.__swc_host = this;
+      this._executeCallback("on-clone-node", { ...ctx, $node: node, $nodeIndex: nodeIndex, $isElement: node.nodeType === 1 });
+    });
+    this._nodes = nodes;
+    const target = this._getTarget();
+    if (target) {
+      target.appendChild(fragment);
+    } else {
+      this.parentElement?.insertBefore(fragment, this.nextSibling);
+    }
+  }
+  cleanup() {
+    this._nodes.forEach((n) => {
+      if (n.parentElement)
+        n.parentElement.removeChild(n);
+    });
+    this._nodes = [];
+  }
+  connectedCallback() {
+    this.refresh();
+  }
+  disconnectedCallback() {
+    this.cleanup();
+  }
+};
+__decorate60([
+  changedAttribute("on-get-value"),
+  __metadata2("design:type", Function),
+  __metadata2("design:paramtypes", [String]),
+  __metadata2("design:returntype", void 0)
+], SwcIf.prototype, "refresh", null);
+SwcIf = __decorate60([
+  elementDefine({ name: "swc-if", extends: "template" })
+], SwcIf);
+
+// src/elements/SwcChoose.ts
+var __decorate61 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata3 = function(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var SwcChoose = class SwcChoose2 extends HTMLTemplateElement {
+  constructor() {
+    super(...arguments);
+    this._nodes = [];
+    this._value = null;
+  }
+  get value() {
+    return this._value;
+  }
+  set value(nv) {
+    this._value = nv;
+    this.render();
+  }
+  _executeCallback(attrName, extraArgs) {
+    const script = this.getAttribute(attrName);
+    if (!script)
+      return;
+    const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);
+    try {
+      FunctionUtils.execute({ script, context: this, args: { ...helperHostSet, ...extraArgs } });
+    } catch (e) {
+      console.error(`[SwcChoose] Error in ${attrName}:`, e);
+    }
+  }
+  refresh(newValue) {
+    const script = newValue !== void 0 ? newValue : this.getAttribute("on-get-value");
+    if (!script) {
+      this.value = null;
+      return;
+    }
+    if (!this.parentElement)
+      return;
+    const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);
+    try {
+      const result = FunctionUtils.executeReturn({
+        script,
+        context: this,
+        args: helperHostSet
+      });
+      this.value = result;
+    } catch (e) {
+      console.error("[SwcChoose] Error in on-get-value:", e);
+    }
+  }
+  render() {
+    this.cleanup();
+    if (!this.parentElement)
+      return;
+    const templates = Array.from(this.content.querySelectorAll("template"));
+    let selected = null;
+    let otherwise = null;
+    let defaultTmp = null;
+    for (const t of templates) {
+      const is = t.getAttribute("is");
+      if (is === "swc-when") {
+        const whenVal = t.getAttribute("value");
+        if (String(whenVal) === String(this._value)) {
+          selected = t;
+          break;
+        }
+      } else if (is === "swc-otherwise") {
+        otherwise = t;
+      } else if (is === "swc-default") {
+        defaultTmp = t;
+      }
+    }
+    const targetTemplate = (this._value == null ? defaultTmp : selected) || otherwise || defaultTmp;
+    if (targetTemplate) {
+      const clone = targetTemplate.content.cloneNode(true);
+      const nodes = Array.from(clone.childNodes);
+      const elements = nodes.filter((n) => n.nodeType === 1);
+      const ctx = {
+        $value: this._value,
+        $nodes: nodes,
+        $elements: elements,
+        $firstNode: nodes[0],
+        $lastNode: nodes[nodes.length - 1],
+        $firstElement: elements[0],
+        $lastElement: elements[elements.length - 1]
+      };
+      this._executeCallback("on-clone-nodes", ctx);
+      nodes.forEach((node, nodeIndex) => {
+        if (node instanceof HTMLElement) {
+          node.__swc_host = this;
+        }
+        this._executeCallback("on-clone-node", {
+          ...ctx,
+          $node: node,
+          $nodeIndex: nodeIndex,
+          $isElement: node.nodeType === 1
+        });
+      });
+      this._nodes = nodes;
+      this.parentElement.insertBefore(clone, this.nextSibling);
+    }
+  }
+  cleanup() {
+    this._nodes.forEach((n) => {
+      if (n.parentElement)
+        n.parentElement.removeChild(n);
+    });
+    this._nodes = [];
+  }
+  connectedCallback() {
+    this.refresh();
+  }
+  disconnectedCallback() {
+    this.cleanup();
+  }
+};
+__decorate61([
+  changedAttribute("on-get-value"),
+  __metadata3("design:type", Function),
+  __metadata3("design:paramtypes", [String]),
+  __metadata3("design:returntype", void 0)
+], SwcChoose.prototype, "refresh", null);
+SwcChoose = __decorate61([
+  elementDefine({ name: "swc-choose", extends: "template" })
+], SwcChoose);
+
+// src/elements/SwcAsync.ts
+var __decorate62 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata4 = function(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var SwcAsync = class SwcAsync2 extends HTMLTemplateElement {
+  constructor() {
+    super(...arguments);
+    this._nodes = [];
+    this._currentPromise = null;
+    this._value = null;
+  }
+  get value() {
+    return this._value;
+  }
+  set value(nv) {
+    if (nv instanceof Promise) {
+      this.handlePromise(nv);
+    } else {
+      this._value = nv;
+      this.render(nv === null ? "default" : "success", nv);
+    }
+  }
+  refresh(newValue) {
+    const script = newValue !== void 0 ? newValue : this.getAttribute("on-get-value");
+    if (!script) {
+      this.value = null;
+      return;
+    }
+    if (!this.parentElement)
+      return;
+    const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);
+    try {
+      const result = FunctionUtils.executeReturn({
+        script,
+        context: this,
+        args: helperHostSet
+      });
+      if (result instanceof Promise) {
+        this.handlePromise(result);
+      } else {
+        this.value = result;
+      }
+    } catch (e) {
+      this.render("error", e);
+    }
+  }
+  async handlePromise(promise) {
+    this._currentPromise = promise;
+    this.render("loading");
+    try {
+      const result = await promise;
+      if (this._currentPromise !== promise)
+        return;
+      this._value = result;
+      this.render("success", result);
+    } catch (e) {
+      if (this._currentPromise !== promise)
+        return;
+      this.render("error", e);
+    }
+  }
+  render(state, data) {
+    this.cleanup();
+    if (!this.parentElement)
+      return;
+    let fragment;
+    const ctx = {
+      $nodes: [],
+      $elements: [],
+      $state: state,
+      $value: null,
+      $error: null
+    };
+    if (state === "default") {
+      const t = this.content.querySelector('template[is="swc-default"]');
+      fragment = t ? t.content.cloneNode(true) : document.createDocumentFragment();
+    } else if (state === "loading") {
+      const t = this.content.querySelector('template[is="swc-loading"]');
+      fragment = t ? t.content.cloneNode(true) : document.createDocumentFragment();
+    } else if (state === "error") {
+      const t = this.content.querySelector('template[is="swc-error"]');
+      ctx.$error = data;
+      fragment = t ? t.content.cloneNode(true) : document.createDocumentFragment();
+    } else {
+      const t = this.content.querySelector('template[is="swc-success"]');
+      ctx.$value = data;
+      if (t) {
+        fragment = t.content.cloneNode(true);
+      } else {
+        const clone = this.content.cloneNode(true);
+        Array.from(clone.querySelectorAll('template[is="swc-loading"], template[is="swc-error"], template[is="swc-success"], template[is="swc-default"]')).forEach((tmp) => tmp.remove());
+        fragment = clone;
+      }
+    }
+    this.mount(fragment, ctx);
+  }
+  mount(fragment, ctx) {
+    const nodes = Array.from(fragment.childNodes);
+    const elements = nodes.filter((n) => n.nodeType === 1);
+    Object.assign(ctx, {
+      $nodes: nodes,
+      $elements: elements,
+      $firstNode: nodes[0],
+      $lastNode: nodes[nodes.length - 1],
+      $firstElement: elements[0],
+      $lastElement: elements[elements.length - 1]
+    });
+    this._executeCallback("on-clone-nodes", ctx);
+    nodes.forEach((node, nodeIndex) => {
+      if (node instanceof HTMLElement) {
+        node.__swc_host = this;
+      }
+      this._executeCallback("on-clone-node", {
+        ...ctx,
+        $node: node,
+        $nodeIndex: nodeIndex,
+        $isElement: node.nodeType === 1
+      });
+    });
+    this._nodes = nodes;
+    this.parentElement?.insertBefore(fragment, this.nextSibling);
+  }
+  _executeCallback(attrName, extraArgs) {
+    const script = this.getAttribute(attrName);
+    if (!script)
+      return;
+    const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);
+    try {
+      FunctionUtils.execute({ script, context: this, args: { ...helperHostSet, ...extraArgs } });
+    } catch (e) {
+      console.error(`[SwcAsync] Error in ${attrName}:`, e);
+    }
+  }
+  cleanup() {
+    this._nodes.forEach((n) => {
+      if (n.parentElement)
+        n.parentElement.removeChild(n);
+    });
+    this._nodes = [];
+  }
+  connectedCallback() {
+    this.refresh();
+  }
+  disconnectedCallback() {
+    this.cleanup();
+  }
+};
+__decorate62([
+  changedAttribute("on-get-value"),
+  __metadata4("design:type", Function),
+  __metadata4("design:paramtypes", [String]),
+  __metadata4("design:returntype", void 0)
+], SwcAsync.prototype, "refresh", null);
+SwcAsync = __decorate62([
+  elementDefine({ name: "swc-async", extends: "template" })
+], SwcAsync);
+
+// src/elements/SwcApp.ts
+var __decorate63 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var SwcApp = class SwcApp2 extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    this._engine = new SwcAppEngine(this);
+  }
+  get simpleApplication() {
+    return this._engine.simpleApplication;
+  }
+  get router() {
+    return this._engine.router;
+  }
+  connectedCallback() {
+    this._engine.connect();
+  }
+  disconnectedCallback() {
+    this._engine.disconnect();
+  }
+  async routing(path) {
+    await this._engine.router?.go(path);
+  }
+};
+SwcApp = __decorate63([
+  elementDefine({ name: "swc-app", extends: void 0 })
+], SwcApp);
 export {
   ADD_EVENT_LISTENER_METADATA_KEY,
   ATTRIBUTE_CHANGED_WILDCARD,
@@ -9563,6 +10375,7 @@ export {
   QUERY_METADATA_KEY,
   SET_ATTRIBUTE_METADATA_KEY,
   SWC_NOT_FOUND,
+  SwcApp,
   SwcAppAnchor,
   SwcAppArea,
   SwcAppAudio,
@@ -9577,6 +10390,7 @@ export {
   SwcAppDiv,
   SwcAppDl,
   SwcAppEmbed,
+  SwcAppEngine,
   SwcAppFieldSet,
   SwcAppForm,
   SwcAppHeading,
@@ -9620,7 +10434,17 @@ export {
   SwcAppTrack,
   SwcAppUl,
   SwcAppVideo,
+  SwcAsync,
+  SwcChoose,
+  SwcDefault,
+  SwcError,
+  SwcIf,
+  SwcLoading,
+  SwcLoop,
+  SwcOtherwise,
+  SwcSuccess,
   SwcUtils,
+  SwcWhen,
   addEventListener,
   changedAttribute,
   elementDefine,