@dooboostore/simple-web-component 1.0.47 → 1.0.49

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

@@ -32,9 +32,9 @@ var dooboostoreSimpleWebComponent = (() => {
   var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
   var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
-  // ../../node_modules/.pnpm/reflect-metadata@0.2.2/node_modules/reflect-metadata/Reflect.js
+  // ../../../node_modules/.pnpm/reflect-metadata@0.2.2/node_modules/reflect-metadata/Reflect.js
   var require_Reflect = __commonJS({
-    "../../node_modules/.pnpm/reflect-metadata@0.2.2/node_modules/reflect-metadata/Reflect.js"() {
+    "../../../node_modules/.pnpm/reflect-metadata@0.2.2/node_modules/reflect-metadata/Reflect.js"() {
       var Reflect2;
       (function(Reflect3) {
         (function(factory) {
@@ -1127,13 +1127,21 @@ var dooboostoreSimpleWebComponent = (() => {
     ATTRIBUTE_METADATA_KEY: () => ATTRIBUTE_METADATA_KEY,
     BROWSER_GLOBALS: () => BROWSER_GLOBALS,
     CLASS_METADATA_KEY: () => CLASS_METADATA_KEY,
+    ChangedAttributeLifeCycler: () => ChangedAttributeLifeCycler,
     Core: () => esm_exports,
     CoreWeb: () => esm_exports2,
     DOM_EVENT_NAMES: () => DOM_EVENT_NAMES,
     ELEMENT_CONFIG_KEY: () => ELEMENT_CONFIG_KEY,
     EMIT_CUSTOM_EVENT_METADATA_KEY: () => EMIT_CUSTOM_EVENT_METADATA_KEY,
+    EmitCustomEventLifeCycler: () => EmitCustomEventLifeCycler,
+    EventListenerLifeCycler: () => EventListenerLifeCycler,
     HTML_TAG_ENTRIES: () => HTML_TAG_ENTRIES,
+    INTERSECTION_OBSERVER_METADATA_KEY: () => INTERSECTION_OBSERVER_METADATA_KEY,
     InjectSituationType: () => InjectSituationType2,
+    IntersectionObserverLifeCycler: () => IntersectionObserverLifeCycler,
+    MUTATION_OBSERVER_METADATA_KEY: () => MUTATION_OBSERVER_METADATA_KEY,
+    MessageSubscribeLifeCycler: () => MessageSubscribeLifeCycler,
+    MutationObserverLifeCycler: () => MutationObserverLifeCycler,
     ON_ADD_EVENT_LISTENER_METADATA_KEY: () => ON_ADD_EVENT_LISTENER_METADATA_KEY,
     ON_AFTER_ADOPTED_METADATA_KEY: () => ON_AFTER_ADOPTED_METADATA_KEY,
     ON_AFTER_CONNECTED_METADATA_KEY: () => ON_AFTER_CONNECTED_METADATA_KEY,
@@ -1150,11 +1158,18 @@ var dooboostoreSimpleWebComponent = (() => {
     PUBLISH_SWC_APP_MESSAGE_METADATA_KEY: () => PUBLISH_SWC_APP_MESSAGE_METADATA_KEY,
     QUERY_ALL_METADATA_KEY: () => QUERY_ALL_METADATA_KEY,
     QUERY_METADATA_KEY: () => QUERY_METADATA_KEY,
+    RESIZE_OBSERVER_METADATA_KEY: () => RESIZE_OBSERVER_METADATA_KEY,
+    ResizeObserverLifeCycler: () => ResizeObserverLifeCycler,
+    RouteSubscribeLifeCycler: () => RouteSubscribeLifeCycler,
+    SET_INTERVAL_METADATA_KEY: () => SET_INTERVAL_METADATA_KEY,
+    SET_TIMEOUT_METADATA_KEY: () => SET_TIMEOUT_METADATA_KEY,
     STATE_METADATA_KEY: () => STATE_METADATA_KEY,
     STYLE_METADATA_KEY: () => STYLE_METADATA_KEY,
     SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY: () => SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY,
     SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY: () => SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY,
     SWC_NOT_FOUND: () => SWC_NOT_FOUND,
+    SetIntervalLifeCycler: () => SetIntervalLifeCycler,
+    SetTimeoutLifeCycler: () => SetTimeoutLifeCycler,
     SimpleBoot: () => esm_exports3,
     SwcApp: () => SwcApp,
     SwcAppArticle: () => SwcAppArticle,
@@ -1171,30 +1186,60 @@ var dooboostoreSimpleWebComponent = (() => {
     SwcUtils: () => SwcUtils,
     addClass: () => addClass,
     addEventListener: () => addEventListener,
+    addEventListenerAll: () => addEventListenerAll,
     addEventListenerAppHost: () => addEventListenerAppHost,
     addEventListenerDelegate: () => addEventListenerDelegate,
-    addEventListenerDelegateAllDom: () => addEventListenerDelegateAllDom,
-    addEventListenerDelegateLightDom: () => addEventListenerDelegateLightDom,
-    addEventListenerDelegateShadowDom: () => addEventListenerDelegateShadowDom,
+    addEventListenerDelegateAll: () => addEventListenerDelegateAll,
+    addEventListenerDelegateLight: () => addEventListenerDelegateLight,
+    addEventListenerDelegateShadow: () => addEventListenerDelegateShadow,
     addEventListenerDocument: () => addEventListenerDocument,
+    addEventListenerLight: () => addEventListenerLight,
+    addEventListenerMutation: () => addEventListenerMutation,
+    addEventListenerMutationAll: () => addEventListenerMutationAll,
+    addEventListenerMutationLight: () => addEventListenerMutationLight,
+    addEventListenerMutationShadow: () => addEventListenerMutationShadow,
+    addEventListenerShadow: () => addEventListenerShadow,
     addEventListenerThis: () => addEventListenerThis,
     addEventListenerWindow: () => addEventListenerWindow,
     appendHtmlSlot: () => appendHtmlSlot,
     appendSlot: () => appendSlot,
     appendTextSlot: () => appendTextSlot,
+    apply: () => apply,
+    applyAll: () => applyAll,
+    applyAppHost: () => applyAppHost,
     applyAttribute: () => applyAttribute,
     applyClass: () => applyClass,
+    applyIfChanged: () => applyIfChanged,
+    applyLight: () => applyLight,
     applyNode: () => applyNode,
     applyProperty: () => applyProperty,
+    applyShadow: () => applyShadow,
     applySlot: () => applySlot,
     applyStyle: () => applyStyle,
+    applyThis: () => applyThis,
+    attr: () => attr,
+    attrAll: () => attrAll,
+    attrAppHost: () => attrAppHost,
+    attrLight: () => attrLight,
+    attrShadow: () => attrShadow,
+    attrThis: () => attrThis,
     attribute: () => attribute,
+    callProperty: () => callProperty,
+    callPropertyAll: () => callPropertyAll,
+    callPropertyLight: () => callPropertyLight,
+    callPropertyShadow: () => callPropertyShadow,
     changedAttribute: () => changedAttribute,
     changedRoute: () => changedRoute,
     clearChildrenLight: () => clearChildrenLight,
     clearChildrenNode: () => clearChildrenNode,
     clearNode: () => clearNode,
     clearSlot: () => clearSlot,
+    cls: () => cls,
+    clsAll: () => clsAll,
+    clsAppHost: () => clsAppHost,
+    clsLight: () => clsLight,
+    clsShadow: () => clsShadow,
+    clsThis: () => clsThis,
     commentNode: () => commentNode,
     convertAttributeValue: () => convertAttributeValue,
     convertValue: () => convertValue2,
@@ -1212,13 +1257,31 @@ var dooboostoreSimpleWebComponent = (() => {
     defineSwcAppSection: () => defineSwcAppSection,
     elementDefine: () => elementDefine,
     emit: () => emit,
+    emitAll: () => emitAll,
+    emitAppHost: () => emitAppHost,
     emitCustomEvent: () => emitCustomEvent,
+    emitDocument: () => emitDocument,
+    emitLight: () => emitLight,
+    emitShadow: () => emitShadow,
+    emitThis: () => emitThis,
+    emitWindow: () => emitWindow,
     ensureInit: () => ensureInit,
     event: () => event,
+    eventAll: () => eventAll,
+    eventAppHost: () => eventAppHost,
     eventDelegate: () => eventDelegate,
-    eventDelegateAllDom: () => eventDelegateAllDom,
-    eventDelegateLightDom: () => eventDelegateLightDom,
-    eventDelegateShadowDom: () => eventDelegateShadowDom,
+    eventDelegateAll: () => eventDelegateAll,
+    eventDelegateLight: () => eventDelegateLight,
+    eventDelegateShadow: () => eventDelegateShadow,
+    eventDocument: () => eventDocument,
+    eventLight: () => eventLight,
+    eventMutation: () => eventMutation,
+    eventMutationAll: () => eventMutationAll,
+    eventMutationLight: () => eventMutationLight,
+    eventMutationShadow: () => eventMutationShadow,
+    eventShadow: () => eventShadow,
+    eventThis: () => eventThis,
+    eventWindow: () => eventWindow,
     findAllApplyNodeMetadata: () => findAllApplyNodeMetadata,
     findAllApplySlotMetadata: () => findAllApplySlotMetadata,
     findAllAttributeApplyMetadata: () => findAllAttributeApplyMetadata,
@@ -1231,6 +1294,8 @@ var dooboostoreSimpleWebComponent = (() => {
     findAllOnConnectedMetadata: () => findAllOnConnectedMetadata,
     findAllPropertyApplyMetadata: () => findAllPropertyApplyMetadata,
     findAllPropertyMetadata: () => findAllPropertyMetadata,
+    findAllSetIntervalMetadata: () => findAllSetIntervalMetadata,
+    findAllSetTimeoutMetadata: () => findAllSetTimeoutMetadata,
     findAllStateMetadata: () => findAllStateMetadata,
     findAllStyleMetadata: () => findAllStyleMetadata,
     getAddEventListenerMetadata: () => getAddEventListenerMetadata,
@@ -1238,9 +1303,12 @@ var dooboostoreSimpleWebComponent = (() => {
     getChangedAttributeMetadata: () => getChangedAttributeMetadata,
     getElementConfig: () => getElementConfig,
     getEmitCustomEventMetadataList: () => getEmitCustomEventMetadataList,
+    getIntersectionObserverMetadata: () => getIntersectionObserverMetadata,
+    getMutationObserverMetadata: () => getMutationObserverMetadata,
     getPublishSwcAppMessageMetadata: () => getPublishSwcAppMessageMetadata,
     getQueryAllMetadata: () => getQueryAllMetadata,
     getQueryMetadata: () => getQueryMetadata,
+    getResizeObserverMetadata: () => getResizeObserverMetadata,
     getSubscribeSwcAppMessageWhileConnectedMetadata: () => getSubscribeSwcAppMessageWhileConnectedMetadata,
     getSubscribeSwcAppRouteChangeWhileConnectedMetadata: () => getSubscribeSwcAppRouteChangeWhileConnectedMetadata,
     html: () => html,
@@ -1266,7 +1334,26 @@ var dooboostoreSimpleWebComponent = (() => {
     insertBeforeEnd: () => insertBeforeEnd,
     insertBeforeEndLight: () => insertBeforeEndLight,
     insertBeforeEndShadow: () => insertBeforeEndShadow,
+    intersectionObserver: () => intersectionObserver,
+    intersectionObserverAll: () => intersectionObserverAll,
+    intersectionObserverDelegate: () => intersectionObserverDelegate,
+    intersectionObserverDelegateAll: () => intersectionObserverDelegateAll,
+    intersectionObserverDelegateLight: () => intersectionObserverDelegateLight,
+    intersectionObserverDelegateShadow: () => intersectionObserverDelegateShadow,
+    intersectionObserverLight: () => intersectionObserverLight,
+    intersectionObserverShadow: () => intersectionObserverShadow,
+    intersectionObserverThis: () => intersectionObserverThis,
     isSSR: () => isSSR,
+    mutationObserver: () => mutationObserver,
+    mutationObserverAll: () => mutationObserverAll,
+    mutationObserverDelegate: () => mutationObserverDelegate,
+    mutationObserverDelegateAll: () => mutationObserverDelegateAll,
+    mutationObserverDelegateLight: () => mutationObserverDelegateLight,
+    mutationObserverDelegateShadow: () => mutationObserverDelegateShadow,
+    mutationObserverLight: () => mutationObserverLight,
+    mutationObserverShadow: () => mutationObserverShadow,
+    mutationObserverThis: () => mutationObserverThis,
+    node: () => node,
     onAdopted: () => onAdopted,
     onAdoptedAfter: () => onAdoptedAfter,
     onAdoptedBefore: () => onAdoptedBefore,
@@ -1281,14 +1368,33 @@ var dooboostoreSimpleWebComponent = (() => {
     onDisconnectedAfter: () => onDisconnectedAfter,
     onDisconnectedBefore: () => onDisconnectedBefore,
     onInitialize: () => onInitialize,
+    pickElements: () => pickElements,
     prependHtmlSlot: () => prependHtmlSlot,
     prependSlot: () => prependSlot,
     prependTextSlot: () => prependTextSlot,
+    prop: () => prop,
+    propAll: () => propAll,
+    propAppHost: () => propAppHost,
+    propDocument: () => propDocument,
+    propLight: () => propLight,
+    propShadow: () => propShadow,
+    propThis: () => propThis,
+    propWindow: () => propWindow,
     property: () => property,
+    propertyAll: () => propertyAll,
+    propertyLight: () => propertyLight,
+    propertyShadow: () => propertyShadow,
     publishMessage: () => publishMessage,
     publishSwcAppMessage: () => publishSwcAppMessage,
     query: () => query,
     queryAll: () => queryAll,
+    queryAllAll: () => queryAllAll,
+    queryAllLight: () => queryAllLight,
+    queryAllRoots: () => queryAllRoots,
+    queryAllShadow: () => queryAllShadow,
+    queryIn: () => queryIn,
+    queryLight: () => queryLight,
+    queryShadow: () => queryShadow,
     receiveMessage: () => receiveMessage,
     removeClass: () => removeClass,
     removeSSRAttribute: () => removeSSRAttribute,
@@ -1298,14 +1404,38 @@ var dooboostoreSimpleWebComponent = (() => {
     replaceChildrenLight: () => replaceChildrenLight,
     replaceChildrenSlot: () => replaceChildrenSlot,
     replaceChildrenTextSlot: () => replaceChildrenTextSlot,
+    resizeObserver: () => resizeObserver,
+    resizeObserverAll: () => resizeObserverAll,
+    resizeObserverDelegate: () => resizeObserverDelegate,
+    resizeObserverDelegateAll: () => resizeObserverDelegateAll,
+    resizeObserverDelegateLight: () => resizeObserverDelegateLight,
+    resizeObserverDelegateShadow: () => resizeObserverDelegateShadow,
+    resizeObserverLight: () => resizeObserverLight,
+    resizeObserverShadow: () => resizeObserverShadow,
+    resizeObserverThis: () => resizeObserverThis,
     resolveAttributeTargets: () => resolveAttributeTargets,
     resolvePropertyTargets: () => resolvePropertyTargets,
+    resolveQueryElements: () => resolveQueryElements,
     setAttribute: () => setAttribute,
     setClass: () => setClass,
+    setInterval: () => setInterval2,
     setProperty: () => setProperty,
+    setPropertyAll: () => setPropertyAll,
+    setPropertyLight: () => setPropertyLight,
+    setPropertyShadow: () => setPropertyShadow,
     setSSRAttribute: () => setSSRAttribute,
     setStyle: () => setStyle,
+    setTimeout: () => setTimeout2,
+    skipIfEmpty: () => skipIfEmpty,
+    skipIfExists: () => skipIfExists,
+    skipIfSameTagPresent: () => skipIfSameTagPresent,
     state: () => state,
+    style: () => style,
+    styleAll: () => styleAll,
+    styleAppHost: () => styleAppHost,
+    styleLight: () => styleLight,
+    styleShadow: () => styleShadow,
+    styleThis: () => styleThis,
     subscribeSwcAppMessageWhileConnected: () => subscribeSwcAppMessageWhileConnected,
     subscribeSwcAppRouteChangeWhileConnected: () => subscribeSwcAppRouteChangeWhileConnected,
     swcAppArticleTagName: () => swcAppArticleTagName,
@@ -1367,6 +1497,7 @@ var dooboostoreSimpleWebComponent = (() => {
     Fetcher: () => Fetcher,
     FormValidator: () => FormValidator,
     FunctionUtils: () => FunctionUtils,
+    HashUtils: () => HashUtils,
     HttpFetcher: () => HttpFetcher,
     HttpJsonFetcher: () => HttpJsonFetcher,
     HttpResponseError: () => HttpResponseError,
@@ -1447,6 +1578,7 @@ var dooboostoreSimpleWebComponent = (() => {
     isCssCommentItem: () => isCssCommentItem,
     isCssDeclarationItem: () => isCssDeclarationItem,
     isCssRuleItem: () => isCssRuleItem,
+    isDefined: () => isDefined,
     isHttpResponseError: () => isHttpResponseError,
     isPoint2DType: () => isPoint2DType,
     isPoint3DType: () => isPoint3DType,
@@ -2143,8 +2275,8 @@ var dooboostoreSimpleWebComponent = (() => {
             const funcCall = this.parseFunctionCall(true);
             memberExpr.addChild(funcCall);
           } else {
-            const prop = this.parsePropertyAccess(true);
-            memberExpr.addChild(prop);
+            const prop2 = this.parsePropertyAccess(true);
+            memberExpr.addChild(prop2);
           }
         } else if (char === ".") {
           this.advance();
@@ -2152,8 +2284,8 @@ var dooboostoreSimpleWebComponent = (() => {
             const paren = this.parseParenthesizedAccess(false);
             memberExpr.addChild(paren);
           } else {
-            const prop = this.parsePropertyAccess(false);
-            memberExpr.addChild(prop);
+            const prop2 = this.parsePropertyAccess(false);
+            memberExpr.addChild(prop2);
           }
         } else if (char === "[") {
           const bracket = this.parseBracketAccess(false);
@@ -2207,13 +2339,13 @@ var dooboostoreSimpleWebComponent = (() => {
     }
     parsePropertyAccess(isOptional) {
       const start = this.pos;
-      const prop = new Token("property_access", "", start, start);
-      prop.isOptional = isOptional;
+      const prop2 = new Token("property_access", "", start, start);
+      prop2.isOptional = isOptional;
       const identifier = this.parseIdentifier();
-      prop.addChild(identifier);
-      prop.end = this.pos;
-      prop.value = this.input.substring(start, this.pos);
-      return prop;
+      prop2.addChild(identifier);
+      prop2.end = this.pos;
+      prop2.value = this.input.substring(start, this.pos);
+      return prop2;
     }
     parseBracketAccess(isOptional) {
       const start = this.pos;
@@ -2309,8 +2441,8 @@ var dooboostoreSimpleWebComponent = (() => {
               const funcCall = this.parseFunctionCall(true);
               memberExpr.addChild(funcCall);
             } else {
-              const prop = this.parsePropertyAccess(true);
-              memberExpr.addChild(prop);
+              const prop2 = this.parsePropertyAccess(true);
+              memberExpr.addChild(prop2);
             }
           } else if (char === ".") {
             this.advance();
@@ -2318,8 +2450,8 @@ var dooboostoreSimpleWebComponent = (() => {
               const parenAccess = this.parseParenthesizedAccess(false);
               memberExpr.addChild(parenAccess);
             } else {
-              const prop = this.parsePropertyAccess(false);
-              memberExpr.addChild(prop);
+              const prop2 = this.parsePropertyAccess(false);
+              memberExpr.addChild(prop2);
             }
           } else if (char === "[") {
             const bracket = this.parseBracketAccess(false);
@@ -3023,17 +3155,17 @@ var dooboostoreSimpleWebComponent = (() => {
             };
             const handler = new GetDetectProxy(prefix);
             return new Proxy(dummyFunction, {
-              get: (target, prop, receiver) => {
-                if (prop === Symbol.toPrimitive) {
+              get: (target, prop2, receiver) => {
+                if (prop2 === Symbol.toPrimitive) {
                   return () => "";
                 }
-                if (prop === "valueOf") {
+                if (prop2 === "valueOf") {
                   return () => handler.createSafeProxy(prefix);
                 }
-                if (prop === "toString") {
+                if (prop2 === "toString") {
                   return () => "";
                 }
-                return handler.get(target, prop, receiver);
+                return handler.get(target, prop2, receiver);
               },
               set: handler.set.bind(handler),
               apply: handler.apply.bind(handler)
@@ -3406,6 +3538,12 @@ var dooboostoreSimpleWebComponent = (() => {
         this.z = z ?? 0;
       }
     }
+    /**
+     * 성분 대입 (파괴적). 벡터 전달 시 그 성분을 복사.
+     * @example
+     * v.set(1, 2, 3);          // v = (1, 2, 3)
+     * v.set(otherVector);      // v = other와 동일 성분
+     */
     set(v, y = 0, z = 0) {
       if (v instanceof _Vector || v instanceof Point3D) {
         this.set(v.x || 0, v.y || 0, v.z || 0);
@@ -3416,16 +3554,45 @@ var dooboostoreSimpleWebComponent = (() => {
       }
       return this;
     }
+    /**
+     * 복사본 반환 (비파괴). 파괴적 메서드와 조합해 원본 보존용.
+     * @example
+     * const s = a.get(); s.add(b); // s = a+b, a는 그대로
+     */
     get() {
       return new _Vector(this.x, this.y, this.z);
     }
-    // 피타고라스의 정리는 a의 제곱 더하기 b 의 제곱은 c 의 제곱과 같다는 것을 정의합니다.
-    mag() {
+    /**
+     * 노름(norm). 평평한 공간(유클리드 공간)에서의 직선 거리.
+     * - 수식: ‖v‖ = √(x² + y² + z²)
+     * - 2D에서는 피타고라스 정리 그 자체. 3D는 두 번 적용한 것과 같음.
+     *   (바닥 대각선 √(x²+y²) → 공간 대각선 √((바닥)²+z²))
+     * - "유클리드"는 평평한 공간의 기하학을 말함 (좌표계는 데카르트의 것, 유클리드는 좌표 없이 기하학을 세움).
+     *   휘어진 공간(구면·쌍곡)에서는 이 공식이 성립하지 않음.
+     * @example
+     * new Vector(3, 4, 0).norm(); // 5
+     * new Vector(6, 8, 0).norm(); // 10
+     */
+    norm() {
       const x = this.x;
       const y = this.y;
       const z = this.z;
       return Math.sqrt(x * x + y * y + z * z);
     }
+    /**
+     * norm()의 별칭 (p5.js 호환).
+     * @example
+     * new Vector(3, 4, 0).mag(); // 5
+     */
+    mag() {
+      return this.norm();
+    }
+    /**
+     * 덧셈 (파괴적). 성분별 합. 기하학적으로 평행사변형의 대각선.
+     * - 수식: a + b = (ax+bx, ay+by, az+bz)
+     * @example
+     * const a = new Vector(4, 2); a.add(new Vector(-2, 3)); // a = (2, 5)
+     */
     add(v, y = 0, z = 0) {
       if (v instanceof _Vector || v instanceof Point3D) {
         this.x += v.x;
@@ -3437,12 +3604,24 @@ var dooboostoreSimpleWebComponent = (() => {
         this.z += z;
       }
     }
+    /**
+     * 덧셈 결과의 새 벡터 반환 (비파괴).
+     * - 수식: a + b = (ax+bx, ay+by, az+bz)
+     * @example
+     * const s = a.toAdd(a, b); // s = a+b, a·b는 그대로
+     */
     toAdd(v1, v2) {
       return new _Vector(v1.x + v2.x, v1.y + v2.y, v1.x + v2.y);
     }
     // public static add(v1: Vector, v2: Vector): Vector {
     //   return new Vector(v1.x + v2.x, v1.y + v2.y, v1.x + v2.y);
     // }
+    /**
+     * 뺄셈 (파괴적). a - b는 "a에서 b를 되돌리는" 벡터.
+     * - 수식: a - b = (ax-bx, ay-by, az-bz)
+     * @example
+     * const a = new Vector(4, 2); a.sub(new Vector(1, 1)); // a = (3, 1)
+     */
     sub(v, y = 0, z = 0) {
       if (v instanceof _Vector || v instanceof Point3D) {
         this.x -= v.x;
@@ -3454,6 +3633,12 @@ var dooboostoreSimpleWebComponent = (() => {
         this.z -= z;
       }
     }
+    /**
+     * 뺄셈 결과의 새 벡터 반환 (비파괴).
+     * - 수식: a - b = (ax-bx, ay-by, az-bz)
+     * @example
+     * const d = a.toSub(b); // d = a-b, a·b는 그대로
+     */
     toSub(v2) {
       const v1 = this;
       return new _Vector(v1.x - v2.x, v1.y - v2.y, v1.z - v2.z);
@@ -3462,6 +3647,12 @@ var dooboostoreSimpleWebComponent = (() => {
     // public static sub(v1: Vector, v2: Vector): Vector {
     //     return new Vector(v1.x - v2.x, v1.y - v2.y, v1.z - v2.z);
     // }
+    /**
+     * 스칼라배 또는 성분별 곱 (파괴적). 스칼라 k>1이면 늘어나고, 0<k<1이면 줄어듦. k<0이면 반대 방향.
+     * - 수식(스칼라): k·v = (k·x, k·y, k·z)
+     * @example
+     * const v = new Vector(1, 2); v.mult(3); // v = (3, 6)
+     */
     mult(v) {
       if (v instanceof _Vector || v instanceof Point3D) {
         this.x *= v.x;
@@ -3474,6 +3665,12 @@ var dooboostoreSimpleWebComponent = (() => {
       }
       return this;
     }
+    /**
+     * 성분별 곱 결과의 새 벡터 반환 (비파괴).
+     * - 수식: (ax·bx, ay·by, az·bz)
+     * @example
+     * const m = a.toMult(b); // m = 성분별 곱, a·b는 그대로
+     */
     toMult(v2) {
       const v1 = this;
       return new _Vector(v1.x *= v2.x, v1.y *= v2.y, v1.z *= v2.z);
@@ -3481,6 +3678,12 @@ var dooboostoreSimpleWebComponent = (() => {
     // public static mult(v1: Vector, v2: Vector) {
     //   return new Vector(v1.x *= v2.x, v1.y *= v2.y, v1.z *= v2.z);
     // }
+    /**
+     * 스칼라 나눗셈 또는 성분별 나눗셈 (파괴적). 정규화의 핵심 연산.
+     * - 수식(스칼라): v/k = (x/k, y/k, z/k)
+     * @example
+     * const v = new Vector(6, 8); v.div(2); // v = (3, 4)
+     */
     div(v) {
       if (v instanceof _Vector || v instanceof Point3D) {
         this.x /= v.x;
@@ -3493,6 +3696,12 @@ var dooboostoreSimpleWebComponent = (() => {
       }
       return this;
     }
+    /**
+     * 스칼라 나눗셈 결과의 새 벡터 반환 (비파괴).
+     * - 수식: v/k = (x/k, y/k, z/k)
+     * @example
+     * const h = v.toDiv(2); // h = v/2, v는 그대로
+     */
     toDiv(d) {
       const v = this;
       const rv = v.get();
@@ -3508,10 +3717,22 @@ var dooboostoreSimpleWebComponent = (() => {
     //   rv.z /= d;
     //   return rv;
     // }
+    /**
+     * 두 점(벡터) 사이 거리. 차 벡터의 크기.
+     * - 수식: d = √((dx)² + (dy)² + (dz)²)
+     * @example
+     * new Vector(0, 0).dist(new Vector(3, 4)); // 5
+     */
     dist(v) {
       const dx = this.x - v.x, dy = this.y - v.y, dz = this.z - v.z;
       return Math.sqrt(dx * dx + dy * dy + dz * dz);
     }
+    /**
+     * 두 점(벡터) 사이 거리 (toDist는 dist와 동일, 비파괴).
+     * - 수식: d = √((dx)² + (dy)² + (dz)²)
+     * @example
+     * a.toDist(b); // a와 b 사이 거리
+     */
     toDist(v2) {
       const v1 = this;
       const dx = v1.x - v2.x, dy = v1.y - v2.y, dz = v1.z - v2.z;
@@ -3523,36 +3744,90 @@ var dooboostoreSimpleWebComponent = (() => {
     //     dz = v1.z - v2.z;
     //   return Math.sqrt(dx * dx + dy * dy + dz * dz);
     // }
-    dot(v, y, z) {
+    /**
+     * 내적(dot product). 두 벡터가 같은 방향을 향하는 정도.
+     * - 수식: a·b = ax·bx + ay·by + az·bz = |a||b|cosθ
+     * - θ=90°면 0(직교), 0°면 최대(같은 방향).
+     * - 벡터 전달 시 y·z 생략 가능, 스칼라(x) 전달 시 y·z와 함께 사용.
+     * @example
+     * new Vector(5, 12).dot(new Vector(-5, 12)); // -25+144 = 119
+     * new Vector(1, 0).dot(new Vector(0, 1));    // 0 (직각)
+     * new Vector(1, 2).dot(3, 4);                // 1*3+2*4 = 11
+     */
+    dot(v, y = 0, z = 0) {
       if (v instanceof _Vector || v instanceof Point3D) {
         return this.x * v.x + this.y * v.y + this.z * v.z;
       }
       ;
       return this.x * v + this.y * y + this.z * z;
     }
+    /**
+     * 외적(cross product). 두 벡터에 수직인 벡터. 오른손 법칙 방향.
+     * - 수식: a×b = (ay·bz − az·by, az·bx − ax·bz, ax·by − ay·bx)
+     * - 2D에서는 z값 = ax·by − ay·bx (부호 있는 면적, 회전 방향 판정용).
+     * @example
+     * new Vector(1, 0, 0).cross(new Vector(0, 1, 0)); // (0, 0, 1)
+     */
     cross(v) {
       const x = this.x, y = this.y, z = this.z;
       return new _Vector(y * v.z - v.y * z, z * v.x - v.z * x, x * v.y - v.x * y);
     }
+    /**
+     * 정규화 (파괴적). 방향은 그대로, 크기를 1로. 단위벡터 v̂ 생성.
+     * - 수식: v̂ = v / |v|
+     * - 영벡터(|v|=0)는 0으로 나누지 않고 그대로 둠.
+     * @example
+     * const v = new Vector(6, 8); v.normalize(); // v = (0.6, 0.8), |v| = 1
+     */
     normalize() {
-      const m = this.mag();
+      const m = this.norm();
       if (m > 0) this.div(m);
     }
+    /**
+     * 크기 상한 (파괴적). 속도가 high를 넘으면 방향 유지한 채 high로 자름. 물리 시뮬레이션 최고속도용.
+     * - 수식: |v| > high → v = v̂ · high
+     * @example
+     * const v = new Vector(6, 8); v.limit(5); // |v|=10 → 5, v = (3, 4)
+     */
     limit(high) {
-      if (this.mag() > high) {
+      if (this.norm() > high) {
         this.normalize();
         this.mult(high);
       }
     }
+    /**
+     * 2D 방향각. +x축 기준 반시계 방향 라디안 (-π ~ π).
+     * - 수식: θ = atan2(y, x)
+     * @example
+     * new Vector(1, 1).heading2D();  // π/4 (45°)
+     * new Vector(-1, 0).heading2D(); // π (180°)
+     */
     heading2D() {
       return -Math.atan2(-this.y, this.x);
     }
+    /**
+     * 무작위 방향 단위벡터 반환 (새 Vector, 자신은 변경 안 함).
+     * @example
+     * const r = new Vector().random2D(); // |r| = 1, 방향 랜덤
+     */
     random2D() {
       return this.fromAngle(Math.random() * (2 * Math.PI));
     }
+    /**
+     * 각도→벡터. 각도 θ, 길이 L인 2D 벡터 반환 (새 Vector).
+     * - 수식: (L·cosθ, L·sinθ, 0)
+     * @example
+     * new Vector().fromAngle(Math.PI / 3, 2); // (1, 1.73, 0)
+     */
     fromAngle(angle, length = 1) {
       return new _Vector(length * Math.cos(angle), length * Math.sin(angle), 0);
     }
+    /**
+     * 구면좌표→3D 벡터 (새 Vector 반환, p5.js 컨벤션).
+     * - 수식: (L·sinθ·sinφ, −L·cosθ, L·sinθ·cosφ)
+     * @example
+     * new Vector().fromAngles(Math.PI / 2, Math.PI / 2, 1); // (1, 0, 0)
+     */
     fromAngles(theta, phi, length = 1) {
       const cosPhi = Math.cos(phi);
       const sinPhi = Math.sin(phi);
@@ -3564,18 +3839,43 @@ var dooboostoreSimpleWebComponent = (() => {
         length * sinTheta * cosPhi
       );
     }
+    /**
+     * 성분 배열 반환. [x, y, z] 순서.
+     * @example
+     * new Vector(1, 2, 3).array(); // [1, 2, 3]
+     */
     array() {
       return [this.x, this.y, this.z];
     }
+    /**
+     * Point3D로 변환 (위치 의미로 바꿀 때).
+     * @example
+     * new Vector(1, 2, 3).toPoint3D(); // Point3D(1, 2, 3)
+     */
     toPoint3D() {
       return new Point3D(this.x, this.y, this.z);
     }
+    /**
+     * Point2D로 변환 (z 버림).
+     * @example
+     * new Vector(1, 2, 3).toPoint2D(); // Point2D(1, 2)
+     */
     toPoint2D() {
       return new Point2D(this.x, this.y);
     }
+    /**
+     * 복사본 반환 (get()과 동일, 비파괴).
+     * @example
+     * const c = v.copy(); // v와 같은 성분의 새 벡터
+     */
     copy() {
       return new _Vector(this.x, this.y, this.z);
     }
+    /**
+     * 문자열 표현. "[x, y, z]" 형식.
+     * @example
+     * new Vector(1, 2).toString(); // "[1, 2, 0]"
+     */
     toString() {
       return "[" + this.x + ", " + this.y + ", " + this.z + "]";
     }
@@ -8421,7 +8721,7 @@ var dooboostoreSimpleWebComponent = (() => {
 
   // ../core/dist/esm/url/UrlUtils.js
   var UrlUtils;
-  ((UrlUtils2) => {
+  (function(UrlUtils2) {
     UrlUtils2.origin = (fullurl) => {
       return new URL(fullurl).origin;
     };
@@ -8459,15 +8759,28 @@ var dooboostoreSimpleWebComponent = (() => {
       });
       return searchParams;
     };
+    UrlUtils2.toAbsoluteUrl = (relative, base) => {
+      return new URL(relative, base);
+    };
+    function toAbsoluteRequest(input, base) {
+      if (input instanceof URL) {
+        return UrlUtils2.toAbsoluteUrl(input.href, base);
+      }
+      if (typeof input === "string") {
+        return UrlUtils2.toAbsoluteUrl(input, base).href;
+      }
+      return new Request(UrlUtils2.toAbsoluteUrl(input.url, base).href, input);
+    }
+    UrlUtils2.toAbsoluteRequest = toAbsoluteRequest;
     UrlUtils2.manipulateSearchParams = (searchParams, options) => {
       if (options?.delete) {
-        (0, UrlUtils2.deleteSearchParam)(searchParams, options.delete);
+        UrlUtils2.deleteSearchParam(searchParams, options.delete);
       }
       if (options?.append) {
-        (0, UrlUtils2.appendSearchParam)(searchParams, options.append);
+        UrlUtils2.appendSearchParam(searchParams, options.append);
       }
       if (options?.upsert) {
-        (0, UrlUtils2.upsertSearchParam)(searchParams, options.upsert);
+        UrlUtils2.upsertSearchParam(searchParams, options.upsert);
       }
       return searchParams;
     };
@@ -9189,10 +9502,10 @@ ${indentStr}}`;
           if (remaining && remaining.includes(":")) {
             const parts = remaining.split(":");
             if (parts.length >= 2) {
-              const prop = parts[0].trim();
+              const prop2 = parts[0].trim();
               const val = parts.slice(1).join(":").trim();
-              if (prop && val) {
-                content.push({ type: "declaration", property: prop, value: val });
+              if (prop2 && val) {
+                content.push({ type: "declaration", property: prop2, value: val });
               }
             }
           }
@@ -9233,10 +9546,10 @@ ${indentStr}}`;
             } else if (statement.includes(":")) {
               const parts = statement.split(":");
               if (parts.length >= 2) {
-                const prop = parts[0].trim();
+                const prop2 = parts[0].trim();
                 const val = parts.slice(1).join(":").trim();
-                if (prop && val) {
-                  content.push({ type: "declaration", property: prop, value: val });
+                if (prop2 && val) {
+                  content.push({ type: "declaration", property: prop2, value: val });
                 }
               }
             }
@@ -9335,7 +9648,7 @@ ${indentStr}}`;
     }
     static _declarationsToCSS(declarations, indent) {
       const indentStr = "  ".repeat(indent);
-      return Object.entries(declarations).map(([prop, value]) => `${indentStr}${_CssParser._camelToKebab(prop)}: ${value};`).join("\n");
+      return Object.entries(declarations).map(([prop2, value]) => `${indentStr}${_CssParser._camelToKebab(prop2)}: ${value};`).join("\n");
     }
     static _camelToKebab(camelCase) {
       return camelCase.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
@@ -10861,59 +11174,29 @@ ${indentStr}}`;
     };
   }
 
+  // ../core/dist/esm/hash/HashUtils.js
+  var HashUtils;
+  ((HashUtils2) => {
+    const core53 = (str, seed) => {
+      let h1 = 3735928559 ^ seed, h2 = 1103547991 ^ seed;
+      for (let i = 0; i < str.length; i++) {
+        const ch = str.charCodeAt(i);
+        h1 = Math.imul(h1 ^ ch, 2654435761);
+        h2 = Math.imul(h2 ^ ch, 1597334677);
+      }
+      h1 = Math.imul(h1 ^ h1 >>> 16, 2246822507) ^ Math.imul(h2 ^ h2 >>> 13, 3266489909);
+      h2 = Math.imul(h2 ^ h2 >>> 16, 2246822507) ^ Math.imul(h1 ^ h1 >>> 13, 3266489909);
+      return (4294967296 * (2097151 & h2) + (h1 >>> 0)).toString(16).padStart(14, "0");
+    };
+    HashUtils2.hash53 = (str, seed = 0, xyz = 16) => `${core53(str, seed)}${core53(str, seed + 1)}`.slice(0, Math.max(1, xyz));
+  })(HashUtils || (HashUtils = {}));
+
   // ../core/dist/esm/index.js
   var src_default = {
     // Core utilities are exported as named exports above
     // Use: import { Observable, Subject, Promises, ... } from '@dooboostore/core'
   };
 
-  // src/decorators/addEventListener.ts
-  var ADD_EVENT_LISTENER_METADATA_KEY = Symbol.for("simple-web-component:add-event-listener");
-  function addEventListener(selectorOrTarget, type, options = {}) {
-    return (targetObj, propertyKey, descriptor) => {
-      const constructor = targetObj.constructor;
-      let listeners = ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
-      if (!listeners) {
-        listeners = [];
-        ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);
-      }
-      listeners.push({ propertyKey, selector: selectorOrTarget, type, options });
-    };
-  }
-  function addEventListenerDelegateLightDom(selector, type, options) {
-    return addEventListener(selector, type, { ...options ?? {}, root: "light", delegate: true });
-  }
-  function addEventListenerDelegateShadowDom(selector, type, options) {
-    return addEventListener(selector, type, { ...options ?? {}, root: "shadow", delegate: true });
-  }
-  function addEventListenerDelegateAllDom(selector, type, options) {
-    return addEventListener(selector, type, { ...options ?? {}, root: "all", delegate: true });
-  }
-  function addEventListenerDelegate(selector, type, options) {
-    return addEventListener(selector, type, { ...options ?? {}, root: "auto", delegate: true });
-  }
-  var event = addEventListener;
-  var eventDelegateLightDom = addEventListenerDelegateLightDom;
-  var eventDelegateShadowDom = addEventListenerDelegateShadowDom;
-  var eventDelegateAllDom = addEventListenerDelegateAllDom;
-  var eventDelegate = addEventListenerDelegate;
-  function addEventListenerThis(type, options) {
-    return addEventListener("$this", type, options);
-  }
-  function addEventListenerAppHost(type, options) {
-    return addEventListener("$appHost", type, options);
-  }
-  function addEventListenerWindow(type, options) {
-    return addEventListener("$window", type, options);
-  }
-  function addEventListenerDocument(type, options) {
-    return addEventListener("$document", type, options);
-  }
-  var getAddEventListenerMetadata = (target) => {
-    const constructor = target instanceof Function ? target : target.constructor;
-    return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
-  };
-
   // ../core/dist/esm/message/operators/debounceTime.js
   function debounceTime(duration, config) {
     return (source) => {
@@ -11063,157 +11346,6 @@ ${indentStr}}`;
     };
   }
 
-  // src/decorators/lifecycles.ts
-  var ON_INITIALIZE_METADATA_KEY = Symbol.for("simple-web-component:on-constructor");
-  var ON_BEFORE_CONNECTED_METADATA_KEY = Symbol.for("simple-web-component:on-before-connected");
-  var ON_AFTER_CONNECTED_METADATA_KEY = Symbol.for("simple-web-component:on-after-connected");
-  var ON_BEFORE_DISCONNECTED_METADATA_KEY = Symbol.for("simple-web-component:on-before-disconnected");
-  var ON_AFTER_DISCONNECTED_METADATA_KEY = Symbol.for("simple-web-component:on-after-disconnected");
-  var ON_BEFORE_ADOPTED_METADATA_KEY = Symbol.for("simple-web-component:on-before-adopted");
-  var ON_AFTER_ADOPTED_METADATA_KEY = Symbol.for("simple-web-component:on-after-adopted");
-  var ON_ADD_EVENT_LISTENER_METADATA_KEY = Symbol.for("simple-web-component:on-add-event-listener");
-  var ON_CONNECTED_BODY_METADATA_KEY = Symbol.for("simple-web-component:on-connected-body");
-  var ON_CONNECTED_SWC_APP_METADATA_KEY = Symbol.for("simple-web-component:on-connected-swc-app");
-  var ON_CONNECTED_COMPLETED_METADATA_KEY = Symbol.for("simple-web-component:on-completed");
-  var ATTRIBUTE_CHANGED_WILDCARD = "*";
-  function onConnectedBefore(arg1, arg2, arg3) {
-    const decorator2 = (options, target, propertyKey) => {
-      const constructor = target.constructor;
-      let list = ReflectUtils.getMetadata(ON_BEFORE_CONNECTED_METADATA_KEY, constructor);
-      if (!list) {
-        list = [];
-        ReflectUtils.defineMetadata(ON_BEFORE_CONNECTED_METADATA_KEY, list, constructor);
-      }
-      list.push({ propertyKey, options });
-    };
-    if (arg2) {
-      return decorator2({}, arg1, arg2);
-    }
-    return (target, propertyKey) => {
-      decorator2(arg1 || {}, target, propertyKey);
-    };
-  }
-  function onConnectedAfter(arg1, arg2, arg3) {
-    const decorator2 = (options, target, propertyKey) => {
-      const constructor = target.constructor;
-      let list = ReflectUtils.getMetadata(ON_AFTER_CONNECTED_METADATA_KEY, constructor);
-      if (!list) {
-        list = [];
-        ReflectUtils.defineMetadata(ON_AFTER_CONNECTED_METADATA_KEY, list, constructor);
-      }
-      list.push({ propertyKey, options });
-    };
-    if (arg2) {
-      return decorator2({}, arg1, arg2);
-    }
-    return (target, propertyKey) => {
-      decorator2(arg1 || {}, target, propertyKey);
-    };
-  }
-  function createLifecycleDecoratorWithOptions(metadataKey) {
-    return function(optionOrTarget, propertyKey) {
-      if (propertyKey) {
-        const constructor = optionOrTarget.constructor;
-        let list = ReflectUtils.getOwnMetadata(metadataKey, constructor);
-        if (!list) {
-          list = [];
-          ReflectUtils.defineMetadata(metadataKey, list, constructor);
-        }
-        list.push({ propertyKey, order: 0 });
-        return;
-      }
-      return (target, propertyKey2) => {
-        const constructor = target.constructor;
-        let list = ReflectUtils.getOwnMetadata(metadataKey, constructor);
-        if (!list) {
-          list = [];
-          ReflectUtils.defineMetadata(metadataKey, list, constructor);
-        }
-        list.push({ propertyKey: propertyKey2, order: optionOrTarget?.order ?? 0 });
-      };
-    };
-  }
-  function onInitialize(optionOrTarget, propertyKey) {
-    return createLifecycleDecoratorWithOptions(ON_INITIALIZE_METADATA_KEY)(optionOrTarget, propertyKey);
-  }
-  function onDisconnectedBefore(optionOrTarget, propertyKey) {
-    return createLifecycleDecoratorWithOptions(ON_BEFORE_DISCONNECTED_METADATA_KEY)(optionOrTarget, propertyKey);
-  }
-  function onDisconnectedAfter(optionOrTarget, propertyKey) {
-    return createLifecycleDecoratorWithOptions(ON_AFTER_DISCONNECTED_METADATA_KEY)(optionOrTarget, propertyKey);
-  }
-  var onDisconnected = onDisconnectedAfter;
-  function onAdoptedBefore(optionOrTarget, propertyKey) {
-    return createLifecycleDecoratorWithOptions(ON_BEFORE_ADOPTED_METADATA_KEY)(optionOrTarget, propertyKey);
-  }
-  function onAdoptedAfter(optionOrTarget, propertyKey) {
-    return createLifecycleDecoratorWithOptions(ON_AFTER_ADOPTED_METADATA_KEY)(optionOrTarget, propertyKey);
-  }
-  var onAdopted = onAdoptedAfter;
-  function onConnectedSwcApp(optionOrTarget, propertyKey) {
-    return createLifecycleDecoratorWithOptions(ON_CONNECTED_SWC_APP_METADATA_KEY)(optionOrTarget, propertyKey);
-  }
-  function onConnectedCompleted(optionOrTarget, propertyKey) {
-    return createLifecycleDecoratorWithOptions(ON_CONNECTED_COMPLETED_METADATA_KEY)(optionOrTarget, propertyKey);
-  }
-  var decorator = (options, target, propertyKey) => {
-    const constructor = target.constructor;
-    let list = ReflectUtils.getMetadata(ON_CONNECTED_BODY_METADATA_KEY, constructor);
-    if (!list) {
-      list = [];
-      ReflectUtils.defineMetadata(ON_CONNECTED_BODY_METADATA_KEY, list, constructor);
-    }
-    list.push({ propertyKey, options });
-  };
-  function onConnectedBodyShadow(optionOrTarget, propertyKey, arg3) {
-    if (propertyKey) {
-      return decorator({ useShadow: true }, optionOrTarget, propertyKey);
-    }
-    return (target, propertyKey2) => {
-      decorator({ ...optionOrTarget ?? {}, useShadow: true }, target, propertyKey2);
-    };
-  }
-  function onConnectedBodyLight(optionOrTarget, propertyKey, arg3) {
-    if (propertyKey) {
-      return decorator({ useShadow: false }, optionOrTarget, propertyKey);
-    }
-    return (target, propertyKey2) => {
-      decorator({ ...optionOrTarget ?? {}, useShadow: false }, target, propertyKey2);
-    };
-  }
-  function onConnectedBody(optionOrTarget, propertyKey, arg3) {
-    if (propertyKey) {
-      return decorator({}, optionOrTarget, propertyKey);
-    }
-    return (target, propertyKey2) => {
-      decorator(optionOrTarget || {}, target, propertyKey2);
-    };
-  }
-  var findAllLifecycleMetadata = (target, metadataKey) => {
-    const constructor = target instanceof Function ? target : target.constructor;
-    const results = ReflectUtils.getOwnMetadata(metadataKey, constructor) ?? [];
-    return [...results].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
-  };
-  var findAllOnConnectedMetadata = (target) => {
-    const constructor = target instanceof Function ? target : target.constructor;
-    const results = ReflectUtils.getMetadata(ON_CONNECTED_BODY_METADATA_KEY, constructor) ?? [];
-    return [...results].sort((a, b) => {
-      const orderA = a.options?.order ?? 0;
-      const orderB = b.options?.order ?? 0;
-      return orderA - orderB;
-    });
-  };
-  var findAllOnConnectedBeforeMetadata = (target) => {
-    const constructor = target instanceof Function ? target : target.constructor;
-    const results = ReflectUtils.getMetadata(ON_BEFORE_CONNECTED_METADATA_KEY, constructor) ?? [];
-    return [...results].sort((a, b) => (a.options?.order ?? 0) - (b.options?.order ?? 0));
-  };
-  var findAllOnConnectedAfterMetadata = (target) => {
-    const constructor = target instanceof Function ? target : target.constructor;
-    const results = ReflectUtils.getMetadata(ON_AFTER_CONNECTED_METADATA_KEY, constructor) ?? [];
-    return [...results].sort((a, b) => (a.options?.order ?? 0) - (b.options?.order ?? 0));
-  };
-
   // ../core-web/dist/esm/index.js
   var esm_exports2 = {};
   __export(esm_exports2, {
@@ -11371,7 +11503,7 @@ ${indentStr}}`;
       return Array.from(documentFragment.childNodes);
     };
     ElementUtils2.cloneNodeList = (documentFragment) => {
-      return Array.from(documentFragment.childNodes).map((node) => node.cloneNode(true));
+      return Array.from(documentFragment.childNodes).map((node2) => node2.cloneNode(true));
     };
     ElementUtils2.querySelector = (e, selector) => {
       const elements = ElementUtils2.querySelectorAll(e, selector);
@@ -11434,12 +11566,12 @@ ${indentStr}}`;
       return attribute2;
     };
     ElementUtils2.getStyleToObject = (input) => {
-      const style = {};
+      const style2 = {};
       for (let i = 0; i < input.style.length; i++) {
         const key = input.style[i];
-        style[key] = input.style[key];
+        style2[key] = input.style[key];
       }
-      return style;
+      return style2;
     };
   })(ElementUtils || (ElementUtils = {}));
 
@@ -11473,26 +11605,26 @@ ${indentStr}}`;
       }
       return variables;
     }
-    getTarget(node, id) {
-      if (node.nodeType === this.window.Node.COMMENT_NODE || node.data?.trim?.()?.startsWith(`ea:${this.id}:start:html`) || node.data?.trim?.()?.startsWith(`ea:${this.id}:start:text`)) {
-        const fullStr = node.data?.trim?.();
+    getTarget(node2, id) {
+      if (node2.nodeType === this.window.Node.COMMENT_NODE || node2.data?.trim?.()?.startsWith(`ea:${this.id}:start:html`) || node2.data?.trim?.()?.startsWith(`ea:${this.id}:start:text`)) {
+        const fullStr = node2.data?.trim?.();
         let [prefix, ...rest] = fullStr?.split(" ") ?? [];
         prefix = prefix.trim?.();
         const script = rest.join(" ");
         const [eaPrefix, eaId, startEnd, type] = prefix?.split(":") ?? [];
         const endPrefix = `${eaPrefix}:${eaId}:end:${type}`;
-        let next = node.nextSibling;
+        let next = node2.nextSibling;
         while (next) {
           if (next.nodeType === Node.COMMENT_NODE && next.data?.trim?.()?.startsWith(endPrefix)) {
-            return { nodeType: "comment", type, start: node, end: next, script: script ?? "", variables: this.findVariables(script) };
+            return { nodeType: "comment", type, start: node2, end: next, script: script ?? "", variables: this.findVariables(script) };
           }
           next = next.nextSibling;
         }
-      } else if (node.nodeType === Node.ELEMENT_NODE) {
-        const aa = node.getAttributeNames().filter((name) => {
+      } else if (node2.nodeType === Node.ELEMENT_NODE) {
+        const aa = node2.getAttributeNames().filter((name) => {
           return name.startsWith(`ea:${id}:attribute:`) || name.startsWith(`ea:${id}:event:`) || name.startsWith(`ea:${id}:property:`);
         });
-        const element = node;
+        const element = node2;
         const types = aa.map((attrName) => {
           const [eaPrefix, eaId, type, name] = attrName?.split(":") ?? [];
           if (eaPrefix === "ea" && eaId === id && (type === "attribute" || type === "event" || type === "property") && name) {
@@ -11524,8 +11656,8 @@ ${indentStr}}`;
       const targets = [];
       targetRoots.forEach((el) => {
         const walker = this.document.createTreeWalker(el, this.window.NodeFilter.SHOW_ELEMENT | this.window.NodeFilter.SHOW_COMMENT, {
-          acceptNode: (node) => {
-            const target = this.getTarget(node, this.id);
+          acceptNode: (node2) => {
+            const target = this.getTarget(node2, this.id);
             if (target) {
               targets.push(target);
               return this.window.NodeFilter.FILTER_ACCEPT;
@@ -11688,18 +11820,18 @@ ${indentStr}}`;
       FindNodesFilterResult2["NO_MATCH_AND_CONTINUE"] = "NO_MATCH_AND_CONTINUE";
       FindNodesFilterResult2["NO_MATCH_AND_SKIP_CHILDREN"] = "NO_MATCH_AND_SKIP_CHILDREN";
     })(FindNodesFilterResult = NodeUtils2.FindNodesFilterResult || (NodeUtils2.FindNodesFilterResult = {}));
-    NodeUtils2.removeAllChildNode = (node) => {
-      while (node?.firstChild) {
-        node.firstChild.remove();
+    NodeUtils2.removeAllChildNode = (node2) => {
+      while (node2?.firstChild) {
+        node2.firstChild.remove();
       }
     };
-    NodeUtils2.removeAllChildNodeAndAppend = (node, newNode) => {
-      (0, NodeUtils2.removeAllChildNode)(node);
+    NodeUtils2.removeAllChildNodeAndAppend = (node2, newNode) => {
+      (0, NodeUtils2.removeAllChildNode)(node2);
       if (Array.isArray(newNode)) {
-        newNode.forEach((it) => node.appendChild(it));
+        newNode.forEach((it) => node2.appendChild(it));
         return;
       }
-      node.appendChild(newNode);
+      node2.appendChild(newNode);
     };
     NodeUtils2.appendChild = (parentNode, childNode) => {
       return parentNode.appendChild(childNode);
@@ -11715,11 +11847,11 @@ ${indentStr}}`;
     };
     NodeUtils2.findNodes = (rootNode, filter) => {
       const foundNodes = [];
-      function traverse(node) {
-        if (!node) {
+      function traverse(node2) {
+        if (!node2) {
           return;
         }
-        node.childNodes.forEach((child) => {
+        node2.childNodes.forEach((child) => {
           const result = filter(child);
           if (result === "MATCH_AND_CONTINUE" || result === "MATCH_AND_SKIP_CHILDREN") {
             foundNodes.push(child);
@@ -11962,26 +12094,26 @@ ${indentStr}}`;
       if (!doc || !win) return result;
       const find = (target) => {
         const walker = doc.createTreeWalker(target, win.NodeFilter.SHOW_COMMENT, null, false);
-        let node = walker.nextNode();
+        let node2 = walker.nextNode();
         const markerData = targetId ? _NodeSlot.startEndMarkerData(this.id, targetId) : { start: this.startMarkerData, end: this.endMarkerData };
         const startPrefix = markerData.start + ":";
-        while (node) {
-          const data = node.data;
+        while (node2) {
+          const data = node2.data;
           if (data && data.indexOf(startPrefix) === 0) {
             const uid = data.substring(startPrefix.length);
             const expectedEnd = `${markerData.end}:${uid}`;
-            let sibling = node.nextSibling;
+            let sibling = node2.nextSibling;
             let foundEnd = null;
             while (sibling) {
-              if (sibling.nodeType === win.Node.COMMENT_NODE && sibling.data === expectedEnd && sibling.parentNode === node.parentNode) {
+              if (sibling.nodeType === win.Node.COMMENT_NODE && sibling.data === expectedEnd && sibling.parentNode === node2.parentNode) {
                 foundEnd = sibling;
                 break;
               }
               sibling = sibling.nextSibling;
             }
-            result.push(new Slot(node, foundEnd));
+            result.push(new Slot(node2, foundEnd));
           }
-          node = walker.nextNode();
+          node2 = walker.nextNode();
         }
       };
       if (this.host.shadowRoot) {
@@ -13302,7 +13434,7 @@ ${indentStr}}`;
           try {
             Array.from(sheet.cssRules).forEach((rule) => {
               if ("style" in rule && rule.style instanceof CSSStyleDeclaration) {
-                Array.from(rule.style).filter((prop) => prop.startsWith("--")).forEach((prop) => variables.add(prop));
+                Array.from(rule.style).filter((prop2) => prop2.startsWith("--")).forEach((prop2) => variables.add(prop2));
               }
             });
           } catch (e) {
@@ -13311,7 +13443,7 @@ ${indentStr}}`;
         });
       }
       const computedStyles = config.window.getComputedStyle(targetElement);
-      Array.from(computedStyles).filter((prop) => prop.startsWith("--")).forEach((it) => {
+      Array.from(computedStyles).filter((prop2) => prop2.startsWith("--")).forEach((it) => {
         variables.add(it);
       });
       return Array.from(variables).map((it) => [it, computedStyles.getPropertyValue(it)]);
@@ -13674,9 +13806,9 @@ ${indentStr}}`;
       } else if (htmlOrNode) {
         const nodes = Array.isArray(htmlOrNode) ? htmlOrNode : [htmlOrNode];
         const window2 = document2.defaultView;
-        nodes.forEach((node) => {
-          node.normalize();
-          const nodes2 = document2.createTreeWalker(node, window2.NodeFilter.SHOW_ELEMENT | window2.NodeFilter.SHOW_COMMENT);
+        nodes.forEach((node2) => {
+          node2.normalize();
+          const nodes2 = document2.createTreeWalker(node2, window2.NodeFilter.SHOW_ELEMENT | window2.NodeFilter.SHOW_COMMENT);
           const getSlotData = (s) => {
             return s.match(/^\[\[([\s\S]+)\]\]$/)?.[1]?.trim();
           };
@@ -13852,10 +13984,1116 @@ ${indentStr}}`;
     };
   })(SwcUtils || (SwcUtils = {}));
 
-  // src/decorators/emitCustomEvent.ts
-  var EMIT_CUSTOM_EVENT_METADATA_KEY = Symbol.for("simple-web-component:emit-custom-event");
-  function emitCustomEvent(selectorOrTarget, typeOrPropertyKey, optionsOrDescriptor) {
-    if (typeof selectorOrTarget === "object" && typeof typeOrPropertyKey === "string" && typeof optionsOrDescriptor === "object" && "value" in optionsOrDescriptor) {
+  // src/decorators/addEventListener.ts
+  var ADD_EVENT_LISTENER_METADATA_KEY = Symbol.for("simple-web-component:add-event-listener");
+  function addEventListener(selectorOrType, typeOrOptions, maybeOptions) {
+    return (targetObj, propertyKey, descriptor) => {
+      let selector;
+      let types;
+      let opts = {};
+      if (typeof typeOrOptions === "string" || Array.isArray(typeOrOptions)) {
+        selector = selectorOrType;
+        types = Array.isArray(typeOrOptions) ? typeOrOptions : [typeOrOptions];
+        opts = maybeOptions ?? {};
+      } else {
+        selector = "$this";
+        if (Array.isArray(selectorOrType)) types = selectorOrType;
+        else types = [selectorOrType];
+        opts = typeOrOptions ?? {};
+      }
+      const constructor = targetObj.constructor;
+      let listeners = ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
+      if (!listeners) {
+        listeners = [];
+        ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);
+      }
+      for (const type of types) listeners.push({ propertyKey, selector, type, options: opts });
+    };
+  }
+  function addEventListenerDelegateLight(selector, type, options) {
+    return addEventListener(selector, type, { ...options ?? {}, root: "light", delegate: true });
+  }
+  function addEventListenerDelegateShadow(selector, type, options) {
+    return addEventListener(selector, type, { ...options ?? {}, root: "shadow", delegate: true });
+  }
+  function addEventListenerDelegateAll(selector, type, options) {
+    return addEventListener(selector, type, { ...options ?? {}, root: "all", delegate: true });
+  }
+  function addEventListenerDelegate(selector, type, options) {
+    return addEventListener(selector, type, { ...options ?? {}, root: "auto", delegate: true });
+  }
+  function addEventListenerMutationLight(selector, type, options) {
+    return addEventListener(selector, type, { ...options ?? {}, root: "light", delegate: "mutation" });
+  }
+  function addEventListenerMutationShadow(selector, type, options) {
+    return addEventListener(selector, type, { ...options ?? {}, root: "shadow", delegate: "mutation" });
+  }
+  function addEventListenerMutationAll(selector, type, options) {
+    return addEventListener(selector, type, { ...options ?? {}, root: "all", delegate: "mutation" });
+  }
+  function addEventListenerMutation(selector, type, options) {
+    return addEventListener(selector, type, { ...options ?? {}, root: "auto", delegate: "mutation" });
+  }
+  function addEventListenerLight(selector, type, options) {
+    return addEventListener(selector, type, { ...options ?? {}, root: "light" });
+  }
+  function addEventListenerShadow(selector, type, options) {
+    return addEventListener(selector, type, { ...options ?? {}, root: "shadow" });
+  }
+  function addEventListenerAll(selector, type, options) {
+    return addEventListener(selector, type, { ...options ?? {}, root: "all" });
+  }
+  function addEventListenerThis(type, options) {
+    return addEventListener("$this", type, options);
+  }
+  function addEventListenerAppHost(type, options) {
+    return addEventListener("$appHost", type, options);
+  }
+  function addEventListenerWindow(type, options) {
+    return addEventListener("$window", type, options);
+  }
+  function addEventListenerDocument(type, options) {
+    return addEventListener("$document", type, options);
+  }
+  var event = addEventListener;
+  var eventDelegateLight = addEventListenerDelegateLight;
+  var eventDelegateShadow = addEventListenerDelegateShadow;
+  var eventDelegateAll = addEventListenerDelegateAll;
+  var eventDelegate = addEventListenerDelegate;
+  var eventMutationLight = addEventListenerMutationLight;
+  var eventMutationShadow = addEventListenerMutationShadow;
+  var eventMutationAll = addEventListenerMutationAll;
+  var eventMutation = addEventListenerMutation;
+  var eventLight = addEventListenerLight;
+  var eventShadow = addEventListenerShadow;
+  var eventAll = addEventListenerAll;
+  var eventAppHost = addEventListenerAppHost;
+  var eventWindow = addEventListenerWindow;
+  var eventDocument = addEventListenerDocument;
+  var eventThis = addEventListenerThis;
+  var getAddEventListenerMetadata = (target) => {
+    const constructor = target instanceof Function ? target : target.constructor;
+    return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
+  };
+  var EventListenerLifeCycler = class {
+    constructor() {
+      /** 인스턴스별 boundListeners 상태 (시클러는 elementDefine 시 1회 생성되어 공유되므로) */
+      __publicField(this, "boundListenersMap", /* @__PURE__ */ new WeakMap());
+      /** 인스턴스별 delegate:'mutation' 바인딩 추적 WeakSet — MutationObserverLifeCycler 에서 참조 */
+      __publicField(this, "eventBoundSetsMap", /* @__PURE__ */ new WeakMap());
+    }
+    // ── 외부(MutationObserverLifeCycler)에서 직접 사용하는 공개 헬퍼 ──
+    /** 인스턴스별 boundListeners 를 반환한다 (없으면 생성). */
+    getBoundListeners(inst) {
+      let list = this.boundListenersMap.get(inst);
+      if (!list) {
+        list = [];
+        this.boundListenersMap.set(inst, list);
+      }
+      return list;
+    }
+    /** 인스턴스별 eventBoundSets 를 반환한다 (없으면 생성). */
+    getEventBoundSets(inst) {
+      let map = this.eventBoundSetsMap.get(inst);
+      if (!map) {
+        map = /* @__PURE__ */ new Map();
+        this.eventBoundSetsMap.set(inst, map);
+      }
+      return map;
+    }
+    /**
+     * target 에 meta 이벤트를 직접 바인딩한다.
+     * delegate:'mutation' 초기/동적 바인딩에서 호출된다.
+     */
+    bindDirect(helperHostSet, target, meta) {
+      const inst = helperHostSet.$this;
+      const currentWin = helperHostSet.$w;
+      const { type, options } = meta;
+      const opts = { capture: options.capture, once: options.once, passive: options.passive };
+      const handler = async (event2) => {
+        if (options.filter) {
+          const helper = SwcUtils.getHelperAndHostSet(currentWin, target);
+          if (!options.filter(event2, { currentThis: inst, helper })) return;
+        }
+        if (options.stopPropagation) event2.stopPropagation();
+        if (options.stopImmediatePropagation) event2.stopImmediatePropagation();
+        if (options.preventDefault) event2.preventDefault();
+        const currentHostSet = SwcUtils.getHostSet(inst);
+        await inst[meta.propertyKey](event2, { currentHostSet, $matchedElement: event2.currentTarget }, { event: event2, ...currentHostSet, $el: target, $root: target });
+      };
+      const eventSubject = new Subject();
+      let eventStream = eventSubject;
+      if (options.debounceTime && options.debounceTime > 0)
+        eventStream = eventStream.pipe(debounceTime(options.debounceTime));
+      if (options.throttleTime && options.throttleTime > 0)
+        eventStream = eventStream.pipe(throttleTime2(options.throttleTime));
+      if (options.distinctUntilChanged !== void 0 && options.distinctUntilChanged !== false) {
+        eventStream = typeof options.distinctUntilChanged === "function" ? eventStream.pipe(distinctUntilChanged(options.distinctUntilChanged)) : eventStream.pipe(distinctUntilChanged());
+      }
+      const subscription = eventStream.subscribe({
+        next: (e) => handler(e).catch((err) => console.error("Event handler error:", err)),
+        error: (err) => console.error("Event stream error:", err)
+      });
+      const wrappedHandler = (event2) => eventSubject.next(event2);
+      target.addEventListener(type, wrappedHandler, opts);
+      const onRemoves = options.removeListener ? [{ fn: options.removeListener, opts: options }] : [];
+      this.getBoundListeners(inst).push({ target, type, handler: wrappedHandler, options: opts, subscription, onRemoves, meta });
+    }
+    /** target + meta 조합 리스너를 제거한다. MutationObserver 추적 요소 제거 시 호출. */
+    unbindDirect(helperHostSet, target, meta) {
+      const inst = helperHostSet.$this;
+      const list = this.getBoundListeners(inst);
+      for (let i = list.length - 1; i >= 0; i--) {
+        const l = list[i];
+        if (l.target === target && l.type === meta.type && l.meta === meta) {
+          try {
+            l.target.removeEventListener(l.type, l.handler, l.options);
+            l.subscription?.unsubscribe?.();
+          } catch (e) {
+            console.error("[SWC] unbindDirect error:", e);
+          }
+          for (const r of l.onRemoves ?? []) {
+            try {
+              r.fn(l.target, r.opts);
+            } catch (e) {
+              console.error("[SWC] unbindDirect removeListener error:", e);
+            }
+          }
+          list.splice(i, 1);
+        }
+      }
+    }
+    /**
+     * 메타데이터 목록을 delegate / mutationDelegate / nonDelegate 로 분류한다.
+     * MutationObserverLifeCycler 에서 mutationDelegate 목록을 꺼낼 때 사용한다.
+     */
+    classifyListeners(metaList) {
+      const isSpecial = (sel) => [
+        "$window",
+        "$document",
+        "$host",
+        "$appHost",
+        "$firstHost",
+        "$lastHost",
+        "$firstAppHost",
+        "$lastAppHost",
+        "$hosts",
+        "$appHosts",
+        "$this",
+        ""
+      ].includes(sel);
+      const delegateListeners = [];
+      const mutationDelegateListeners = [];
+      const nonDelegateListeners = [];
+      for (const meta of metaList) {
+        const isStr = typeof meta.selector === "string";
+        const mode = meta.options.delegate;
+        if (mode && isStr && !isSpecial(meta.selector)) {
+          mode === "mutation" ? mutationDelegateListeners.push(meta) : delegateListeners.push(meta);
+        } else {
+          nonDelegateListeners.push(meta);
+        }
+      }
+      return { delegateListeners, mutationDelegateListeners, nonDelegateListeners };
+    }
+    // ── ElementDefineLifeCycler 구현 ──
+    onConnected(helperHostSet) {
+      const inst = helperHostSet.$this;
+      const currentWin = helperHostSet.$w;
+      this.boundListenersMap.delete(inst);
+      this.eventBoundSetsMap.delete(inst);
+      const allMeta = getAddEventListenerMetadata(inst) ?? [];
+      const { delegateListeners, nonDelegateListeners, mutationDelegateListeners } = this.classifyListeners(allMeta);
+      const groups = /* @__PURE__ */ new Map();
+      for (const meta of delegateListeners) {
+        const key = `${meta.type}:${meta.options.root || "auto"}`;
+        if (!groups.has(key)) groups.set(key, []);
+        groups.get(key).push(meta);
+      }
+      groups.forEach((metaList, key) => {
+        const ci = key.indexOf(":");
+        const type = key.slice(0, ci);
+        const r = key.slice(ci + 1);
+        const opts = { capture: metaList[0].options.capture, once: metaList[0].options.once, passive: metaList[0].options.passive };
+        const roots = [];
+        if (r === "auto") roots.push(inst.shadowRoot || inst);
+        else if (r === "light") roots.push(inst);
+        else if (r === "shadow" && inst.shadowRoot) roots.push(inst.shadowRoot);
+        else if (r === "all") {
+          roots.push(inst);
+          if (inst.shadowRoot) roots.push(inst.shadowRoot);
+        }
+        for (const br of roots) {
+          const sorted = [...metaList].sort((a, b) => (b.options.stopPropagation ? 1 : 0) - (a.options.stopPropagation ? 1 : 0));
+          const handler = async (event2) => {
+            for (const m of sorted) {
+              const matchedEl = event2.target?.closest(m.selector);
+              console.log("[DBG][delegate] type=", event2.type, "| evtTarget=", event2.target?.tagName, "| sel=", m.selector, "| matchedEl=", matchedEl?.className || matchedEl?.tagName, "| brContains=", br.contains?.(matchedEl), "| brTag=", br.tagName || br.constructor?.name);
+              if (matchedEl && br.contains(matchedEl)) {
+                if (m.options.filter) {
+                  const helper = SwcUtils.getHelperAndHostSet(currentWin, matchedEl);
+                  if (!m.options.filter(event2, { currentThis: inst, helper })) continue;
+                }
+                if (m.options.stopPropagation) event2.stopPropagation();
+                if (m.options.stopImmediatePropagation) event2.stopImmediatePropagation();
+                if (m.options.preventDefault) event2.preventDefault();
+                const hs = SwcUtils.getHostSet(inst);
+                await inst[m.propertyKey](event2, { ...hs, $matchedElement: matchedEl }, { event: event2, ...hs, $el: matchedEl, $root: br });
+                if (event2.cancelBubble) break;
+              }
+            }
+          };
+          br.addEventListener(type, handler, opts);
+          if (type === "click") {
+            console.log("[DBG][eventCycler] bound click on br=", br.tagName || br.constructor?.name, "| inst=", inst.tagName || inst.constructor?.name, "| isSame=", br === inst);
+          }
+          const onRemoves = sorted.filter((m) => m.options.removeListener).map((m) => ({ fn: m.options.removeListener, opts: m.options }));
+          this.getBoundListeners(inst).push({ target: br, type, handler, options: opts, onRemoves });
+        }
+      });
+      for (const meta of nonDelegateListeners) {
+        const { selector, options } = meta;
+        const r = options.root || "auto";
+        const bindTargets = [];
+        let resolvedSel = null;
+        if (typeof selector === "function") {
+          const result = selector(inst, helperHostSet);
+          if (typeof result === "string") resolvedSel = result;
+          else if (result instanceof currentWin.Element) bindTargets.push(result);
+          else if (result instanceof currentWin.NodeList) bindTargets.push(...Array.from(result));
+          else if (Array.isArray(result)) bindTargets.push(...result);
+        } else {
+          resolvedSel = selector;
+        }
+        const applyRoot = (t) => {
+          if (!t) return;
+          if (r === "auto") bindTargets.push(t.shadowRoot || t);
+          else {
+            if (r === "light" || r === "all") bindTargets.push(t);
+            if ((r === "shadow" || r === "all") && t.shadowRoot) bindTargets.push(t.shadowRoot);
+          }
+        };
+        if (resolvedSel) {
+          if (resolvedSel === "$window") bindTargets.push(currentWin);
+          else if (resolvedSel === "$document") bindTargets.push(currentWin.document);
+          else if (resolvedSel === "$host") applyRoot(helperHostSet.$host);
+          else if (resolvedSel === "$parentHost") applyRoot(helperHostSet.$parentHost);
+          else if (resolvedSel === "$appHost") applyRoot(helperHostSet.$appHost);
+          else if (resolvedSel === "$firstHost") applyRoot(helperHostSet.$firstHost);
+          else if (resolvedSel === "$lastHost") applyRoot(helperHostSet.$lastHost);
+          else if (resolvedSel === "$firstAppHost") applyRoot(helperHostSet.$firstAppHost);
+          else if (resolvedSel === "$lastAppHost") applyRoot(helperHostSet.$lastAppHost);
+          else if (resolvedSel === "$hosts") helperHostSet.$hosts.forEach(applyRoot);
+          else if (resolvedSel === "$appHosts") helperHostSet.$appHosts.forEach(applyRoot);
+          else if (resolvedSel === "$this" || !resolvedSel) applyRoot(inst);
+          else {
+            const searchRoots = [];
+            if (r === "auto") searchRoots.push(inst.shadowRoot || inst);
+            else if (r === "light") searchRoots.push(inst);
+            else if (r === "shadow" && inst.shadowRoot) searchRoots.push(inst.shadowRoot);
+            else if (r === "all") {
+              searchRoots.push(inst);
+              if (inst.shadowRoot) searchRoots.push(inst.shadowRoot);
+            }
+            for (const sr of searchRoots) sr.querySelectorAll(resolvedSel).forEach((el) => bindTargets.push(el));
+          }
+        }
+        for (const t of bindTargets) this.bindDirect(helperHostSet, t, meta);
+      }
+      if (mutationDelegateListeners.length > 0) {
+        const shadowEventDelegates = mutationDelegateListeners.filter((m) => {
+          const r = m.options.root || "auto";
+          return inst.shadowRoot && (r === "shadow" || r === "all" || r === "auto");
+        });
+        const lightEventDelegates = mutationDelegateListeners.filter((m) => {
+          const r = m.options.root || "auto";
+          return r === "light" || r === "all" || !inst.shadowRoot && r === "auto";
+        });
+        const buildMutationEntry = (root, eventDelegates) => {
+          if (eventDelegates.length === 0) return null;
+          const boundSets = this.getEventBoundSets(inst);
+          const callback = (mutations, obs) => {
+            for (const m of eventDelegates) {
+              let boundSet = boundSets.get(m);
+              if (!boundSet) {
+                boundSet = /* @__PURE__ */ new WeakSet();
+                boundSets.set(m, boundSet);
+              }
+              const isThis = m.selector === "$this" || m.selector === "";
+              const matchesSel = (n) => {
+                if (!n || n.nodeType !== 1) return false;
+                if (isThis) return true;
+                return typeof m.selector === "string" && n.matches?.(m.selector);
+              };
+              const bindEl = (el) => {
+                if (!boundSet.has(el)) {
+                  this.bindDirect(helperHostSet, el, m);
+                  boundSet.add(el);
+                }
+              };
+              const unbindEl = (el) => {
+                if (boundSet.has(el)) {
+                  this.unbindDirect(helperHostSet, el, m);
+                  boundSet.delete(el);
+                }
+              };
+              for (const mut of mutations) {
+                Array.from(mut.addedNodes || []).forEach((n) => {
+                  if (n.nodeType !== 1) return;
+                  if (matchesSel(n)) bindEl(n);
+                  else if (!isThis && typeof m.selector === "string") n.querySelectorAll?.(m.selector).forEach(bindEl);
+                });
+                Array.from(mut.removedNodes || []).forEach((n) => {
+                  if (n.nodeType !== 1) return;
+                  const el = n;
+                  if (matchesSel(el)) unbindEl(el);
+                  else if (!isThis && typeof m.selector === "string") el.querySelectorAll?.(m.selector).forEach(unbindEl);
+                });
+              }
+            }
+          };
+          for (const m of eventDelegates) {
+            let boundSet = boundSets.get(m);
+            if (!boundSet) {
+              boundSet = /* @__PURE__ */ new WeakSet();
+              boundSets.set(m, boundSet);
+            }
+            if (typeof m.selector !== "string") continue;
+            if (m.selector === "$this" || m.selector === "") {
+              this.bindDirect(helperHostSet, root, m);
+              boundSet.add(root);
+            } else {
+              root.querySelectorAll(m.selector).forEach((el) => {
+                if (!boundSet.has(el)) {
+                  this.bindDirect(helperHostSet, el, m);
+                  boundSet.add(el);
+                }
+              });
+            }
+          }
+          return { target: root, options: { childList: true, subtree: true }, callback };
+        };
+        const shadowEntry = inst.shadowRoot ? buildMutationEntry(inst.shadowRoot, shadowEventDelegates) : null;
+        const lightEntry = buildMutationEntry(inst, lightEventDelegates);
+        const mutationObserverSet = [shadowEntry, lightEntry].filter(Boolean);
+        if (mutationObserverSet.length > 0) return { mutationObserverSet };
+      }
+      return void 0;
+    }
+    onDisconnected(helperHostSet) {
+      const inst = helperHostSet.$this;
+      const list = this.boundListenersMap.get(inst) ?? [];
+      for (const l of list) {
+        try {
+          l.target.removeEventListener(l.type, l.handler, l.options);
+          l.subscription?.unsubscribe?.();
+        } catch (e) {
+          console.error("[SWC] EventListenerLifeCycler cleanup error:", e);
+        }
+        for (const r of l.onRemoves ?? []) {
+          try {
+            r.fn(l.target, r.opts);
+          } catch (e) {
+            console.error("[SWC] removeListener error:", e);
+          }
+        }
+      }
+      this.boundListenersMap.delete(inst);
+      this.eventBoundSetsMap.delete(inst);
+    }
+  };
+
+  // src/decorators/mutationObserver.ts
+  var MUTATION_OBSERVER_METADATA_KEY = Symbol.for("simple-web-component:mutation-observer");
+  function mutationObserver(selectorOrOptions, maybeOptions) {
+    return (targetObj, propertyKey, descriptor) => {
+      let selector = "$this";
+      let options = {};
+      if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+        selector = selectorOrOptions;
+        options = maybeOptions ?? {};
+      } else {
+        selector = "$this";
+        options = selectorOrOptions ?? {};
+      }
+      const constructor = targetObj.constructor;
+      let observers = ReflectUtils.getMetadata(MUTATION_OBSERVER_METADATA_KEY, constructor);
+      if (!observers) {
+        observers = [];
+        ReflectUtils.defineMetadata(MUTATION_OBSERVER_METADATA_KEY, observers, constructor);
+      }
+      observers.push({ propertyKey, selector, options });
+    };
+  }
+  function mutationObserverThis(options) {
+    return mutationObserver("$this", options);
+  }
+  function mutationObserverDelegateLight(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return mutationObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "light", delegate: true });
+    }
+    return mutationObserver({ ...selectorOrOptions ?? {}, root: "light", delegate: true });
+  }
+  function mutationObserverDelegateShadow(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return mutationObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "shadow", delegate: true });
+    }
+    return mutationObserver({ ...selectorOrOptions ?? {}, root: "shadow", delegate: true });
+  }
+  function mutationObserverDelegateAll(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return mutationObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "all", delegate: true });
+    }
+    return mutationObserver({ ...selectorOrOptions ?? {}, root: "all", delegate: true });
+  }
+  function mutationObserverDelegate(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return mutationObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "auto", delegate: true });
+    }
+    return mutationObserver({ ...selectorOrOptions ?? {}, root: "auto", delegate: true });
+  }
+  function mutationObserverLight(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return mutationObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "light" });
+    }
+    return mutationObserver({ ...selectorOrOptions ?? {}, root: "light" });
+  }
+  function mutationObserverShadow(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return mutationObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "shadow" });
+    }
+    return mutationObserver({ ...selectorOrOptions ?? {}, root: "shadow" });
+  }
+  function mutationObserverAll(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return mutationObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "all" });
+    }
+    return mutationObserver({ ...selectorOrOptions ?? {}, root: "all" });
+  }
+  function getMutationObserverMetadata(target) {
+    const constructor = target instanceof Function ? target : target.constructor;
+    return ReflectUtils.getMetadata(MUTATION_OBSERVER_METADATA_KEY, constructor);
+  }
+  var MutationObserverLifeCycler = class {
+    constructor() {
+      __publicField(this, "removeObserverCallbacksMap", /* @__PURE__ */ new WeakMap());
+    }
+    onConnected(helperHostSet) {
+      const inst = helperHostSet.$this;
+      const currentWin = helperHostSet.$w;
+      const removeObserverCallbacks = [];
+      this.removeObserverCallbacksMap.set(inst, removeObserverCallbacks);
+      const allMeta = getMutationObserverMetadata(inst) ?? [];
+      if (allMeta.length === 0) return;
+      const shadowMetas = allMeta.filter((m) => {
+        const r = m.options.root || "auto";
+        return inst.shadowRoot && (r === "shadow" || r === "all" || r === "auto");
+      });
+      const lightMetas = allMeta.filter((m) => {
+        const r = m.options.root || "auto";
+        return r === "light" || r === "all" || !inst.shadowRoot && r === "auto";
+      });
+      const buildSet = (root, metas) => {
+        if (metas.length === 0) return null;
+        const initFrom = (o) => {
+          const init = {
+            childList: o.childList,
+            attributes: o.attributes,
+            characterData: o.characterData,
+            subtree: o.subtree,
+            attributeFilter: o.attributeFilter,
+            attributeOldValue: o.attributeOldValue,
+            characterDataOldValue: o.characterDataOldValue
+          };
+          if (!init.childList && !init.attributes && !init.characterData) init.childList = true;
+          return init;
+        };
+        const fnObservedSets = /* @__PURE__ */ new Map();
+        const callback = (mutations, obs) => {
+          for (const meta of metas) {
+            const { selector, options } = meta;
+            let matchedEls = [];
+            const typeMatches = (m) => {
+              const has = !!(options.childList || options.attributes || options.characterData);
+              if (m.type === "childList") return has ? !!options.childList : true;
+              if (m.type === "attributes") return !!options.attributes;
+              if (m.type === "characterData") return !!options.characterData;
+              return true;
+            };
+            const collect = (matchesSel) => mutations.flatMap((m) => {
+              if (!typeMatches(m)) return [];
+              const els = [];
+              if (matchesSel(m.target)) els.push(m.target);
+              Array.from(m.addedNodes || []).filter(matchesSel).forEach((n) => els.push(n));
+              Array.from(m.removedNodes || []).filter(matchesSel).forEach((n) => els.push(n));
+              return els;
+            });
+            if (options.delegate && typeof selector === "string") {
+              const isThis = selector === "$this" || selector === "";
+              matchedEls = collect((n) => {
+                if (!n || n.nodeType !== 1) return false;
+                if (isThis) return true;
+                const el = n;
+                return el.matches?.(selector) || !!el.closest?.(selector);
+              });
+            } else if (typeof selector === "string") {
+              const isThis = selector === "$this" || selector === "";
+              matchedEls = collect((n) => {
+                if (!n || n.nodeType !== 1) return false;
+                if (isThis) return true;
+                return n.matches?.(selector);
+              });
+            } else if (typeof selector === "function") {
+              const set = fnObservedSets.get(meta);
+              matchedEls = mutations.filter((m) => typeMatches(m)).map((m) => m.target).filter((t) => t && t.nodeType === 1 && (set ? set.has(t) : false));
+            } else {
+              matchedEls = mutations.filter((m) => typeMatches(m)).map((m) => m.target).filter((t) => t && t.nodeType === 1);
+            }
+            if (matchedEls.length === 0) continue;
+            if (options.filter) {
+              if (!options.filter(matchedEls, { currentThis: inst, helper: helperHostSet })) continue;
+            }
+            const hostSet = SwcUtils.getHostSet(inst);
+            inst[meta.propertyKey](matchedEls, mutations, obs, { ...hostSet, $root: root });
+          }
+        };
+        const observeTargets = [];
+        if (metas.some((m) => m.options.delegate)) {
+          observeTargets.push({ target: root, options: { childList: true, subtree: true } });
+        }
+        for (const m of metas.filter((m2) => !m2.options.delegate)) {
+          const { selector, options } = m;
+          const mInit = initFrom(options);
+          if (typeof selector === "string") {
+            if (selector === "$this" || selector === "") {
+              observeTargets.push({ target: root, options: mInit });
+            } else {
+              root.querySelectorAll(selector).forEach((el) => observeTargets.push({ target: el, options: mInit }));
+            }
+          } else if (typeof selector === "function") {
+            const res = selector(inst, helperHostSet);
+            let targets = [];
+            if (res instanceof currentWin.HTMLElement) targets = [res];
+            else if (res instanceof currentWin.NodeList) targets = Array.from(res).filter((e) => e instanceof currentWin.HTMLElement);
+            else if (Array.isArray(res)) targets = res.filter((e) => e instanceof currentWin.HTMLElement);
+            const set = /* @__PURE__ */ new WeakSet();
+            for (const el of targets) {
+              set.add(el);
+              observeTargets.push({ target: el, options: mInit });
+            }
+            fnObservedSets.set(m, set);
+          }
+        }
+        for (const m of metas) {
+          if (m.options.removeObserver) removeObserverCallbacks.push({ fn: m.options.removeObserver, target: root, opts: m.options });
+        }
+        return { callback, observeTargets };
+      };
+      const shadowSet = inst.shadowRoot ? buildSet(inst.shadowRoot, shadowMetas) : null;
+      const lightSet = buildSet(inst, lightMetas);
+      const mutationObserverSet = [
+        ...(shadowSet?.observeTargets ?? []).map((t) => ({ ...t, callback: shadowSet.callback })),
+        ...(lightSet?.observeTargets ?? []).map((t) => ({ ...t, callback: lightSet.callback }))
+      ];
+      if (mutationObserverSet.length === 0) return;
+      return { mutationObserverSet };
+    }
+    onDisconnected(helperHostSet) {
+      const inst = helperHostSet.$this;
+      for (const cb of this.removeObserverCallbacksMap.get(inst) ?? []) {
+        try {
+          cb.fn(cb.target, cb.opts);
+        } catch (e) {
+          console.error("[SWC] removeObserver error:", e);
+        }
+      }
+      this.removeObserverCallbacksMap.delete(inst);
+    }
+  };
+
+  // src/decorators/resizeObserver.ts
+  var RESIZE_OBSERVER_METADATA_KEY = Symbol.for("simple-web-component:resize-observer");
+  function resizeObserver(selectorOrOptions, maybeOptions) {
+    return (targetObj, propertyKey, descriptor) => {
+      let selector = "$this";
+      let options = {};
+      if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+        selector = selectorOrOptions;
+        options = maybeOptions ?? {};
+      } else {
+        selector = "$this";
+        options = selectorOrOptions ?? {};
+      }
+      const constructor = targetObj.constructor;
+      let observers = ReflectUtils.getMetadata(RESIZE_OBSERVER_METADATA_KEY, constructor);
+      if (!observers) {
+        observers = [];
+        ReflectUtils.defineMetadata(RESIZE_OBSERVER_METADATA_KEY, observers, constructor);
+      }
+      observers.push({ propertyKey, selector, options });
+    };
+  }
+  function resizeObserverThis(options) {
+    return resizeObserver("$this", options);
+  }
+  function resizeObserverDelegateLight(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return resizeObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "light", delegate: true });
+    }
+    return resizeObserver({ ...selectorOrOptions ?? {}, root: "light", delegate: true });
+  }
+  function resizeObserverDelegateShadow(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return resizeObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "shadow", delegate: true });
+    }
+    return resizeObserver({ ...selectorOrOptions ?? {}, root: "shadow", delegate: true });
+  }
+  function resizeObserverDelegateAll(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return resizeObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "all", delegate: true });
+    }
+    return resizeObserver({ ...selectorOrOptions ?? {}, root: "all", delegate: true });
+  }
+  function resizeObserverDelegate(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return resizeObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "auto", delegate: true });
+    }
+    return resizeObserver({ ...selectorOrOptions ?? {}, root: "auto", delegate: true });
+  }
+  function resizeObserverLight(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return resizeObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "light" });
+    }
+    return resizeObserver({ ...selectorOrOptions ?? {}, root: "light" });
+  }
+  function resizeObserverShadow(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return resizeObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "shadow" });
+    }
+    return resizeObserver({ ...selectorOrOptions ?? {}, root: "shadow" });
+  }
+  function resizeObserverAll(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return resizeObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "all" });
+    }
+    return resizeObserver({ ...selectorOrOptions ?? {}, root: "all" });
+  }
+  function getResizeObserverMetadata(target) {
+    const constructor = target instanceof Function ? target : target.constructor;
+    return ReflectUtils.getMetadata(RESIZE_OBSERVER_METADATA_KEY, constructor);
+  }
+  var ResizeObserverLifeCycler = class {
+    constructor() {
+      __publicField(this, "removeObserverCallbacksMap", /* @__PURE__ */ new WeakMap());
+    }
+    onConnected(helperHostSet) {
+      const inst = helperHostSet.$this;
+      const currentWin = helperHostSet.$w;
+      const removeObserverCallbacks = [];
+      this.removeObserverCallbacksMap.set(inst, removeObserverCallbacks);
+      const allMeta = getResizeObserverMetadata(inst) ?? [];
+      if (allMeta.length === 0) return;
+      const root = inst.shadowRoot || inst;
+      for (const m of allMeta) {
+        if (m.options.removeObserver) removeObserverCallbacks.push({ fn: m.options.removeObserver, target: root, opts: m.options });
+      }
+      const callback = (entries, obs) => {
+        for (const m of allMeta) {
+          let matchedEls;
+          if (m.options.delegate && typeof m.selector === "string") {
+            const isThis = m.selector === "$this" || m.selector === "";
+            matchedEls = entries.map((e) => e.target).filter((el) => {
+              if (!el || el.nodeType !== 1) return false;
+              if (isThis) return true;
+              return el.matches?.(m.selector) || !!el.closest?.(m.selector);
+            });
+          } else {
+            matchedEls = entries.map((e) => e.target).filter((t) => t && t.nodeType === 1);
+          }
+          if (matchedEls.length === 0) continue;
+          if (m.options.filter) {
+            if (!m.options.filter(matchedEls, { currentThis: inst, helper: helperHostSet })) continue;
+          }
+          const hostSet = SwcUtils.getHostSet(inst);
+          inst[m.propertyKey](matchedEls, entries, obs, { ...hostSet, $root: root });
+        }
+      };
+      const resizeObserverSet = [];
+      for (const m of allMeta) {
+        if (m.options.delegate && typeof m.selector === "string") {
+          resizeObserverSet.push({ target: m.selector, delegate: true, delegateRoot: m.options.root, options: m.options.box ? { box: m.options.box } : void 0, callback });
+          continue;
+        }
+        let targets = [];
+        if (typeof m.selector === "function") {
+          const res = m.selector(inst, helperHostSet);
+          if (res instanceof currentWin.HTMLElement) targets = [res];
+          else if (res instanceof currentWin.NodeList) targets = Array.from(res).filter((e) => e instanceof currentWin.HTMLElement);
+          else if (Array.isArray(res)) targets = res.filter((e) => e instanceof currentWin.HTMLElement);
+        } else if (typeof m.selector === "string") {
+          if (m.selector === "$this" || m.selector === "") {
+            targets = [inst];
+          } else {
+            const r = m.options.root || "auto";
+            const scopes = [];
+            if (r === "auto") scopes.push(inst.shadowRoot || inst);
+            else if (r === "light") scopes.push(inst);
+            else if (r === "shadow" && inst.shadowRoot) scopes.push(inst.shadowRoot);
+            else if (r === "all") {
+              scopes.push(inst);
+              if (inst.shadowRoot) scopes.push(inst.shadowRoot);
+            }
+            for (const s of scopes) {
+              const found = s?.querySelectorAll?.(m.selector);
+              if (found?.length) targets.push(...Array.from(found));
+            }
+          }
+        }
+        for (const el of targets) resizeObserverSet.push({ target: el, options: m.options.box ? { box: m.options.box } : void 0, callback });
+      }
+      return { resizeObserverSet };
+    }
+    onDisconnected(helperHostSet) {
+      const inst = helperHostSet.$this;
+      for (const cb of this.removeObserverCallbacksMap.get(inst) ?? []) {
+        try {
+          cb.fn(cb.target, cb.opts);
+        } catch (e) {
+          console.error("[SWC] removeObserver error:", e);
+        }
+      }
+      this.removeObserverCallbacksMap.delete(inst);
+    }
+  };
+
+  // src/decorators/intersectionObserver.ts
+  var INTERSECTION_OBSERVER_METADATA_KEY = Symbol.for("simple-web-component:intersection-observer");
+  function intersectionObserver(selectorOrOptions, maybeOptions) {
+    return (targetObj, propertyKey, descriptor) => {
+      let selector = "$this";
+      let options = {};
+      if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+        selector = selectorOrOptions;
+        options = maybeOptions ?? {};
+      } else {
+        selector = "$this";
+        options = selectorOrOptions ?? {};
+      }
+      const constructor = targetObj.constructor;
+      let observers = ReflectUtils.getMetadata(INTERSECTION_OBSERVER_METADATA_KEY, constructor);
+      if (!observers) {
+        observers = [];
+        ReflectUtils.defineMetadata(INTERSECTION_OBSERVER_METADATA_KEY, observers, constructor);
+      }
+      observers.push({ propertyKey, selector, options });
+    };
+  }
+  function intersectionObserverThis(options) {
+    return intersectionObserver("$this", options);
+  }
+  function intersectionObserverDelegateLight(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return intersectionObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "light", delegate: true });
+    }
+    return intersectionObserver({ ...selectorOrOptions ?? {}, root: "light", delegate: true });
+  }
+  function intersectionObserverDelegateShadow(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return intersectionObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "shadow", delegate: true });
+    }
+    return intersectionObserver({ ...selectorOrOptions ?? {}, root: "shadow", delegate: true });
+  }
+  function intersectionObserverDelegateAll(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return intersectionObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "all", delegate: true });
+    }
+    return intersectionObserver({ ...selectorOrOptions ?? {}, root: "all", delegate: true });
+  }
+  function intersectionObserverDelegate(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return intersectionObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "auto", delegate: true });
+    }
+    return intersectionObserver({ ...selectorOrOptions ?? {}, root: "auto", delegate: true });
+  }
+  function intersectionObserverLight(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return intersectionObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "light" });
+    }
+    return intersectionObserver({ ...selectorOrOptions ?? {}, root: "light" });
+  }
+  function intersectionObserverShadow(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return intersectionObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "shadow" });
+    }
+    return intersectionObserver({ ...selectorOrOptions ?? {}, root: "shadow" });
+  }
+  function intersectionObserverAll(selectorOrOptions, maybeOptions) {
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return intersectionObserver(selectorOrOptions, { ...maybeOptions ?? {}, root: "all" });
+    }
+    return intersectionObserver({ ...selectorOrOptions ?? {}, root: "all" });
+  }
+  function getIntersectionObserverMetadata(target) {
+    const constructor = target instanceof Function ? target : target.constructor;
+    return ReflectUtils.getMetadata(INTERSECTION_OBSERVER_METADATA_KEY, constructor);
+  }
+  var IntersectionObserverLifeCycler = class {
+    constructor() {
+      __publicField(this, "removeObserverCallbacksMap", /* @__PURE__ */ new WeakMap());
+    }
+    onConnected(helperHostSet) {
+      const inst = helperHostSet.$this;
+      const currentWin = helperHostSet.$w;
+      const removeObserverCallbacks = [];
+      this.removeObserverCallbacksMap.set(inst, removeObserverCallbacks);
+      const allMeta = getIntersectionObserverMetadata(inst) ?? [];
+      if (allMeta.length === 0) return;
+      const root = inst.shadowRoot || inst;
+      for (const m of allMeta) {
+        if (m.options.removeObserver) removeObserverCallbacks.push({ fn: m.options.removeObserver, target: root, opts: m.options });
+      }
+      const buildCallback = (metas) => {
+        return (entries, obs) => {
+          for (const m of metas) {
+            let matchedEls;
+            if (m.options.delegate && typeof m.selector === "string") {
+              const isThis = m.selector === "$this" || m.selector === "";
+              matchedEls = entries.map((e) => e.target).filter((el) => {
+                if (!el || el.nodeType !== 1) return false;
+                if (isThis) return true;
+                return el.matches?.(m.selector) || !!el.closest?.(m.selector);
+              });
+            } else {
+              matchedEls = entries.map((e) => e.target).filter((t) => t && t.nodeType === 1);
+            }
+            if (matchedEls.length === 0) continue;
+            if (m.options.filter) {
+              if (!m.options.filter(matchedEls, { currentThis: inst, helper: helperHostSet })) continue;
+            }
+            const hostSet = SwcUtils.getHostSet(inst);
+            inst[m.propertyKey](matchedEls, entries, obs, { ...hostSet, $root: root });
+          }
+        };
+      };
+      const groups = /* @__PURE__ */ new Map();
+      for (const m of allMeta) {
+        const obsOptions = {
+          root: m.options.intersectionRoot ?? null,
+          rootMargin: m.options.rootMargin,
+          threshold: m.options.threshold
+        };
+        const key = JSON.stringify([obsOptions.root, obsOptions.rootMargin, obsOptions.threshold]);
+        if (!groups.has(key)) groups.set(key, { options: obsOptions, metas: [] });
+        groups.get(key).metas.push(m);
+      }
+      const intersectionObserverSet = [];
+      for (const [, group] of groups) {
+        const callback = buildCallback(group.metas);
+        const observeTargets = [];
+        for (const m of group.metas) {
+          if (m.options.delegate && typeof m.selector === "string") {
+            observeTargets.push({ target: m.selector, delegate: true, delegateRoot: m.options.root, callback });
+            continue;
+          }
+          let targets = [];
+          if (typeof m.selector === "function") {
+            const res = m.selector(inst, helperHostSet);
+            if (res instanceof currentWin.HTMLElement) targets = [res];
+            else if (res instanceof currentWin.NodeList) targets = Array.from(res).filter((e) => e instanceof currentWin.HTMLElement);
+            else if (Array.isArray(res)) targets = res.filter((e) => e instanceof currentWin.HTMLElement);
+          } else if (typeof m.selector === "string") {
+            if (m.selector === "$this" || m.selector === "") {
+              targets = [inst];
+            } else {
+              const r = m.options.root || "auto";
+              const scopes = [];
+              if (r === "auto") scopes.push(inst.shadowRoot || inst);
+              else if (r === "light") scopes.push(inst);
+              else if (r === "shadow" && inst.shadowRoot) scopes.push(inst.shadowRoot);
+              else if (r === "all") {
+                scopes.push(inst);
+                if (inst.shadowRoot) scopes.push(inst.shadowRoot);
+              }
+              for (const s of scopes) {
+                const found = s?.querySelectorAll?.(m.selector);
+                if (found?.length) targets.push(...Array.from(found));
+              }
+            }
+          }
+          for (const el of targets) observeTargets.push({ target: el, callback });
+        }
+        intersectionObserverSet.push({ options: group.options, observeTargets });
+      }
+      return { intersectionObserverSet };
+    }
+    onDisconnected(helperHostSet) {
+      const inst = helperHostSet.$this;
+      for (const cb of this.removeObserverCallbacksMap.get(inst) ?? []) {
+        try {
+          cb.fn(cb.target, cb.opts);
+        } catch (e) {
+          console.error("[SWC] removeObserver error:", e);
+        }
+      }
+      this.removeObserverCallbacksMap.delete(inst);
+    }
+  };
+
+  // src/decorators/lifecycles.ts
+  var ON_INITIALIZE_METADATA_KEY = Symbol.for("simple-web-component:on-constructor");
+  var ON_BEFORE_CONNECTED_METADATA_KEY = Symbol.for("simple-web-component:on-before-connected");
+  var ON_AFTER_CONNECTED_METADATA_KEY = Symbol.for("simple-web-component:on-after-connected");
+  var ON_BEFORE_DISCONNECTED_METADATA_KEY = Symbol.for("simple-web-component:on-before-disconnected");
+  var ON_AFTER_DISCONNECTED_METADATA_KEY = Symbol.for("simple-web-component:on-after-disconnected");
+  var ON_BEFORE_ADOPTED_METADATA_KEY = Symbol.for("simple-web-component:on-before-adopted");
+  var ON_AFTER_ADOPTED_METADATA_KEY = Symbol.for("simple-web-component:on-after-adopted");
+  var ON_ADD_EVENT_LISTENER_METADATA_KEY = Symbol.for("simple-web-component:on-add-event-listener");
+  var ON_CONNECTED_BODY_METADATA_KEY = Symbol.for("simple-web-component:on-connected-body");
+  var ON_CONNECTED_SWC_APP_METADATA_KEY = Symbol.for("simple-web-component:on-connected-swc-app");
+  var ON_CONNECTED_COMPLETED_METADATA_KEY = Symbol.for("simple-web-component:on-completed");
+  var ATTRIBUTE_CHANGED_WILDCARD = "*";
+  function onConnectedBefore(arg1, arg2, arg3) {
+    const decorator2 = (options, target, propertyKey) => {
+      const constructor = target.constructor;
+      let list = ReflectUtils.getMetadata(ON_BEFORE_CONNECTED_METADATA_KEY, constructor);
+      if (!list) {
+        list = [];
+        ReflectUtils.defineMetadata(ON_BEFORE_CONNECTED_METADATA_KEY, list, constructor);
+      }
+      list.push({ propertyKey, options });
+    };
+    if (arg2) {
+      return decorator2({}, arg1, arg2);
+    }
+    return (target, propertyKey) => {
+      decorator2(arg1 || {}, target, propertyKey);
+    };
+  }
+  function onConnectedAfter(arg1, arg2, arg3) {
+    const decorator2 = (options, target, propertyKey) => {
+      const constructor = target.constructor;
+      let list = ReflectUtils.getMetadata(ON_AFTER_CONNECTED_METADATA_KEY, constructor);
+      if (!list) {
+        list = [];
+        ReflectUtils.defineMetadata(ON_AFTER_CONNECTED_METADATA_KEY, list, constructor);
+      }
+      list.push({ propertyKey, options });
+    };
+    if (arg2) {
+      return decorator2({}, arg1, arg2);
+    }
+    return (target, propertyKey) => {
+      decorator2(arg1 || {}, target, propertyKey);
+    };
+  }
+  function createLifecycleDecoratorWithOptions(metadataKey) {
+    return function(optionOrTarget, propertyKey) {
+      if (propertyKey) {
+        const constructor = optionOrTarget.constructor;
+        let list = ReflectUtils.getOwnMetadata(metadataKey, constructor);
+        if (!list) {
+          list = [];
+          ReflectUtils.defineMetadata(metadataKey, list, constructor);
+        }
+        list.push({ propertyKey, order: 0 });
+        return;
+      }
+      return (target, propertyKey2) => {
+        const constructor = target.constructor;
+        let list = ReflectUtils.getOwnMetadata(metadataKey, constructor);
+        if (!list) {
+          list = [];
+          ReflectUtils.defineMetadata(metadataKey, list, constructor);
+        }
+        list.push({ propertyKey: propertyKey2, order: optionOrTarget?.order ?? 0 });
+      };
+    };
+  }
+  function onInitialize(optionOrTarget, propertyKey) {
+    return createLifecycleDecoratorWithOptions(ON_INITIALIZE_METADATA_KEY)(optionOrTarget, propertyKey);
+  }
+  function onDisconnectedBefore(optionOrTarget, propertyKey) {
+    return createLifecycleDecoratorWithOptions(ON_BEFORE_DISCONNECTED_METADATA_KEY)(optionOrTarget, propertyKey);
+  }
+  function onDisconnectedAfter(optionOrTarget, propertyKey) {
+    return createLifecycleDecoratorWithOptions(ON_AFTER_DISCONNECTED_METADATA_KEY)(optionOrTarget, propertyKey);
+  }
+  var onDisconnected = onDisconnectedAfter;
+  function onAdoptedBefore(optionOrTarget, propertyKey) {
+    return createLifecycleDecoratorWithOptions(ON_BEFORE_ADOPTED_METADATA_KEY)(optionOrTarget, propertyKey);
+  }
+  function onAdoptedAfter(optionOrTarget, propertyKey) {
+    return createLifecycleDecoratorWithOptions(ON_AFTER_ADOPTED_METADATA_KEY)(optionOrTarget, propertyKey);
+  }
+  var onAdopted = onAdoptedAfter;
+  function onConnectedSwcApp(optionOrTarget, propertyKey) {
+    return createLifecycleDecoratorWithOptions(ON_CONNECTED_SWC_APP_METADATA_KEY)(optionOrTarget, propertyKey);
+  }
+  function onConnectedCompleted(optionOrTarget, propertyKey) {
+    return createLifecycleDecoratorWithOptions(ON_CONNECTED_COMPLETED_METADATA_KEY)(optionOrTarget, propertyKey);
+  }
+  var decorator = (options, target, propertyKey) => {
+    const constructor = target.constructor;
+    let list = ReflectUtils.getMetadata(ON_CONNECTED_BODY_METADATA_KEY, constructor);
+    if (!list) {
+      list = [];
+      ReflectUtils.defineMetadata(ON_CONNECTED_BODY_METADATA_KEY, list, constructor);
+    }
+    list.push({ propertyKey, options });
+  };
+  function onConnectedBodyShadow(optionOrTarget, propertyKey, arg3) {
+    if (propertyKey) {
+      return decorator({ useShadow: true }, optionOrTarget, propertyKey);
+    }
+    return (target, propertyKey2) => {
+      decorator({ ...optionOrTarget ?? {}, useShadow: true }, target, propertyKey2);
+    };
+  }
+  function onConnectedBodyLight(optionOrTarget, propertyKey, arg3) {
+    if (propertyKey) {
+      return decorator({ useShadow: false }, optionOrTarget, propertyKey);
+    }
+    return (target, propertyKey2) => {
+      decorator({ ...optionOrTarget ?? {}, useShadow: false }, target, propertyKey2);
+    };
+  }
+  function onConnectedBody(optionOrTarget, propertyKey, arg3) {
+    if (propertyKey) {
+      return decorator({}, optionOrTarget, propertyKey);
+    }
+    return (target, propertyKey2) => {
+      decorator(optionOrTarget || {}, target, propertyKey2);
+    };
+  }
+  var findAllLifecycleMetadata = (target, metadataKey) => {
+    const constructor = target instanceof Function ? target : target.constructor;
+    const results = ReflectUtils.getOwnMetadata(metadataKey, constructor) ?? [];
+    return [...results].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  };
+  var findAllOnConnectedMetadata = (target) => {
+    const constructor = target instanceof Function ? target : target.constructor;
+    const results = ReflectUtils.getMetadata(ON_CONNECTED_BODY_METADATA_KEY, constructor) ?? [];
+    return [...results].sort((a, b) => {
+      const orderA = a.options?.order ?? 0;
+      const orderB = b.options?.order ?? 0;
+      return orderA - orderB;
+    });
+  };
+  var findAllOnConnectedBeforeMetadata = (target) => {
+    const constructor = target instanceof Function ? target : target.constructor;
+    const results = ReflectUtils.getMetadata(ON_BEFORE_CONNECTED_METADATA_KEY, constructor) ?? [];
+    return [...results].sort((a, b) => (a.options?.order ?? 0) - (b.options?.order ?? 0));
+  };
+  var findAllOnConnectedAfterMetadata = (target) => {
+    const constructor = target instanceof Function ? target : target.constructor;
+    const results = ReflectUtils.getMetadata(ON_AFTER_CONNECTED_METADATA_KEY, constructor) ?? [];
+    return [...results].sort((a, b) => (a.options?.order ?? 0) - (b.options?.order ?? 0));
+  };
+
+  // src/decorators/emitCustomEvent.ts
+  var EMIT_CUSTOM_EVENT_METADATA_KEY = Symbol.for("simple-web-component:emit-custom-event");
+  function emitCustomEvent(selectorOrTarget, typeOrPropertyKey, optionsOrDescriptor) {
+    if (typeof selectorOrTarget === "object" && typeof typeOrPropertyKey === "string" && typeof optionsOrDescriptor === "object" && "value" in optionsOrDescriptor) {
       throw new Error(`@emitCustomEvent decorator cannot be used on properties. (Property: ${String(typeOrPropertyKey)})`);
     }
     if ((typeof selectorOrTarget === "string" || typeof selectorOrTarget === "function") && typeof typeOrPropertyKey === "string") {
@@ -13979,6 +15217,53 @@ ${indentStr}}`;
     return ReflectUtils.getMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, constructor);
   };
   var emit = emitCustomEvent;
+  function emitThis(type, options) {
+    return emitCustomEvent("$this", type, options);
+  }
+  function emitAppHost(type, options) {
+    return emitCustomEvent("$appHost", type, options);
+  }
+  function emitWindow(type, options) {
+    return emitCustomEvent("$window", type, options);
+  }
+  function emitDocument(type, options) {
+    return emitCustomEvent("$document", type, options);
+  }
+  function emitLight(selector, type, options) {
+    return emitCustomEvent(selector, type, { ...options ?? {}, root: "light" });
+  }
+  function emitShadow(selector, type, options) {
+    return emitCustomEvent(selector, type, { ...options ?? {}, root: "shadow" });
+  }
+  function emitAll(selector, type, options) {
+    return emitCustomEvent(selector, type, { ...options ?? {}, root: "all" });
+  }
+  var EmitCustomEventLifeCycler = class {
+    constructor() {
+      this.hostEmitMeta = null;
+    }
+    getHostEmitMeta(inst) {
+      if (!this.hostEmitMeta) {
+        const all = getEmitCustomEventMetadataList(inst) ?? [];
+        this.hostEmitMeta = all.filter((m) => m.selector === "$this" || m.selector === "");
+      }
+      return this.hostEmitMeta;
+    }
+    /** observedAttributes 에 포함할 attributeName 목록 */
+    getObservedAttributeNames(inst) {
+      return this.getHostEmitMeta(inst).map((m) => m.options.attributeName).filter(Boolean);
+    }
+    onConnected(_helperHostSet) {
+    }
+    /** attributeChangedCallback 에서 elementDefine 이 직접 호출 */
+    onAttributeChanged(helperHostSet, name, _old, newVal) {
+      const inst = helperHostSet.$this;
+      const matched = this.getHostEmitMeta(inst).find((m) => m.options.attributeName === name);
+      if (matched && newVal !== null) {
+        inst._bindAttributeEvent?.(inst, name, newVal, matched.type);
+      }
+    }
+  };
 
   // src/decorators/changedAttribute.ts
   var ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol.for("simple-web-component:on-attribute-changed");
@@ -14025,9 +15310,115 @@ ${indentStr}}`;
   var convertAttributeValue = (val, type) => {
     return convertValue(val, type);
   };
+  var ChangedAttributeLifeCycler = class {
+    constructor() {
+      __publicField(this, "attrChangeMap", null);
+    }
+    /** 클래스 메타데이터 기반 attrChangeMap 을 lazy 로드한다 (공유 시클러 캐시). */
+    getAttrChangeMap(inst) {
+      if (!this.attrChangeMap) this.attrChangeMap = findAllAttributeChangedMetadata(inst);
+      return this.attrChangeMap;
+    }
+    /** observedAttributes 에 포함할 attribute 이름 목록 */
+    getObservedAttributeNames(inst) {
+      return Array.from(this.getAttrChangeMap(inst).keys());
+    }
+    onConnected(helperHostSet) {
+      const inst = helperHostSet.$this;
+      for (const [name, metaList] of this.getAttrChangeMap(inst)) {
+        for (const meta of metaList) {
+          if (meta.options.while === "connected") {
+            const val = getAttributeValue(inst, name, { type: meta.options.type });
+            if (val !== null) inst[meta.propertyKey](val, null, name, helperHostSet);
+          }
+        }
+      }
+    }
+    /** attributeChangedCallback 에서 elementDefine 이 직접 호출 */
+    onAttributeChanged(helperHostSet, name, old, newVal) {
+      const inst = helperHostSet.$this;
+      const metaList = this.getAttrChangeMap(inst).get(name);
+      if (!metaList) return;
+      for (const meta of metaList) {
+        if (meta.options.while === "connected" && !inst.__swc_connected) continue;
+        inst[meta.propertyKey](convertAttributeValue(newVal, meta.options.type), old, name, helperHostSet);
+      }
+    }
+  };
 
   // src/decorators/query.ts
   var QUERY_METADATA_KEY = Symbol.for("simple-web-component:query");
+  var resolveQueryElements = (inst, selector, options, win) => {
+    const hostSet = SwcUtils.getHelperAndHostSet(win, inst);
+    let all = [];
+    if (typeof selector === "function") {
+      const result = selector(inst, hostSet);
+      if (result instanceof win.NodeList)
+        all = Array.from(result).filter((e) => e instanceof win.HTMLElement);
+      else if (Array.isArray(result))
+        all = result.filter((e) => e instanceof win.HTMLElement);
+      else if (result instanceof win.HTMLElement)
+        all = [result];
+    } else if (typeof selector === "string") {
+      const r = options?.root || "auto";
+      if (selector === "$this")
+        all = [inst];
+      else if (selector === "$host")
+        all = hostSet.$host ? [hostSet.$host] : [];
+      else if (selector === "$parentHost")
+        all = hostSet.$parentHost ? [hostSet.$parentHost] : [];
+      else if (selector === "$appHost")
+        all = hostSet.$appHost ? [hostSet.$appHost] : [];
+      else if (selector === "$firstHost")
+        all = hostSet.$firstHost ? [hostSet.$firstHost] : [];
+      else if (selector === "$lastHost")
+        all = hostSet.$lastHost ? [hostSet.$lastHost] : [];
+      else if (selector === "$firstAppHost")
+        all = hostSet.$firstAppHost ? [hostSet.$firstAppHost] : [];
+      else if (selector === "$lastAppHost")
+        all = hostSet.$lastAppHost ? [hostSet.$lastAppHost] : [];
+      else if (selector === "$hosts")
+        all = hostSet.$hosts.filter(Boolean);
+      else if (selector === "$appHosts")
+        all = hostSet.$appHosts.filter(Boolean);
+      else {
+        const scopes = [];
+        if (r === "auto")
+          scopes.push(inst.shadowRoot || inst);
+        else if (r === "light")
+          scopes.push(inst);
+        else if (r === "shadow" && inst.shadowRoot)
+          scopes.push(inst.shadowRoot);
+        else if (r === "all") {
+          scopes.push(inst);
+          if (inst.shadowRoot)
+            scopes.push(inst.shadowRoot);
+        }
+        for (const scope of scopes) {
+          const found = scope?.querySelectorAll?.(selector);
+          if (found?.length)
+            all.push(...Array.from(found).filter((e) => e instanceof win.HTMLElement));
+        }
+      }
+    }
+    if (options?.filter) {
+      all = all.filter((el) => options.filter(el, { currentThis: inst, helper: hostSet }));
+    }
+    return all;
+  };
+  var pickElements = (all, pick) => {
+    if (pick === "all")
+      return all;
+    if (pick === "even")
+      return all.filter((_, i) => i % 2 === 0);
+    if (pick === "odd")
+      return all.filter((_, i) => i % 2 === 1);
+    if (typeof pick === "number")
+      return all[pick] ?? null;
+    if (pick === "last")
+      return all.length ? all[all.length - 1] : null;
+    return all.length ? all[0] : null;
+  };
   function query(selectorOrTarget, optionsOrPropertyKey, descriptor) {
     if (descriptor !== void 0 && (typeof optionsOrPropertyKey === "string" || typeof optionsOrPropertyKey === "symbol")) {
       throw new Error(`@query decorator cannot be used on methods. (Method: ${String(optionsOrPropertyKey)})`);
@@ -14049,112 +15440,26 @@ ${indentStr}}`;
             ensureInit(this);
             const config = getElementConfig(this);
             const win = config?.window || window;
-            const hostSet = SwcUtils.getHelperAndHostSet(win, this);
-            let resolvedSelector;
-            let resolvedElement = null;
-            if (typeof selectorOrTarget === "function") {
-              const result = selectorOrTarget(this, hostSet);
-              if (result instanceof win.Node || result instanceof win.Element) {
-                resolvedElement = result instanceof win.HTMLElement ? result : null;
-              } else if (result instanceof win.NodeList || Array.isArray(result)) {
-                resolvedElement = result.length > 0 && result[0] instanceof win.HTMLElement ? result[0] : null;
-              }
-            } else {
-              resolvedSelector = selectorOrTarget;
-              const r = optionsOrPropertyKey?.root || "auto";
-              const applyRoot = (t) => {
-                if (!t || !(t instanceof HTMLElement))
-                  return t;
-                if (r === "auto")
-                  return t.shadowRoot || t;
-                if (r === "shadow")
-                  return t.shadowRoot;
-                if (r === "light")
-                  return t;
-                if (r === "all")
-                  return t.shadowRoot || t;
-                return t;
-              };
-              if (resolvedSelector === "$this")
-                resolvedElement = applyRoot(this);
-              else if (resolvedSelector === "$host")
-                resolvedElement = applyRoot(hostSet.$host);
-              else if (resolvedSelector === "$parentHost")
-                resolvedElement = applyRoot(hostSet.$parentHost);
-              else if (resolvedSelector === "$appHost")
-                resolvedElement = applyRoot(hostSet.$appHost);
-              else if (resolvedSelector === "$firstHost")
-                resolvedElement = applyRoot(hostSet.$firstHost);
-              else if (resolvedSelector === "$lastHost")
-                resolvedElement = applyRoot(hostSet.$lastHost);
-              else if (resolvedSelector === "$firstAppHost")
-                resolvedElement = applyRoot(hostSet.$firstAppHost);
-              else if (resolvedSelector === "$lastAppHost")
-                resolvedElement = applyRoot(hostSet.$lastAppHost);
-              else if (resolvedSelector === "$window")
-                return win;
-              else if (resolvedSelector === "$document")
-                return win.document;
-              else {
-                if (r === "shadow")
-                  resolvedElement = this.shadowRoot ? this.shadowRoot.querySelector(resolvedSelector) : null;
-                else if (r === "light")
-                  resolvedElement = this.querySelector(resolvedSelector);
-                else if (r === "all") {
-                  const shadowMatch = this.shadowRoot ? this.shadowRoot.querySelector(resolvedSelector) : null;
-                  resolvedElement = shadowMatch || this.querySelector(resolvedSelector);
-                } else
-                  resolvedElement = (this.shadowRoot || this).querySelector(resolvedSelector);
-              }
-            }
-            if (resolvedElement instanceof win.HTMLElement && optionsOrPropertyKey?.filter) {
-              const shouldInclude = optionsOrPropertyKey.filter(resolvedElement, { currentThis: this, helper: hostSet });
-              if (!shouldInclude) {
-                return null;
-              }
-            }
-            return resolvedElement;
+            const options = optionsOrPropertyKey || {};
+            if (typeof selectorOrTarget === "string" && selectorOrTarget === "$window")
+              return win;
+            if (typeof selectorOrTarget === "string" && selectorOrTarget === "$document")
+              return win.document;
+            const all = resolveQueryElements(this, selectorOrTarget, options, win);
+            return pickElements(all, options.pick ?? "first");
           },
           set(nv) {
             ensureInit(this);
-            if (nv === null || nv === void 0) {
+            if (nv === null || nv === void 0 || Array.isArray(nv) && nv.length === 0) {
               const config = getElementConfig(this);
               const win = config?.window || window;
-              const hostSet = SwcUtils.getHelperAndHostSet(win, this);
-              if (typeof selectorOrTarget === "function") {
-                const result = selectorOrTarget(this, hostSet);
-                if (result instanceof win.Element) {
-                  result.remove();
-                } else if (result instanceof win.NodeList || Array.isArray(result)) {
-                  const el = result.length > 0 ? result[0] : null;
-                  if (el instanceof win.Element) {
-                    el.remove();
-                  }
-                }
-                return;
-              }
-              const resolvedSelector = selectorOrTarget;
-              if (resolvedSelector.startsWith("$") && resolvedSelector !== "$this")
-                return;
-              const r = optionsOrPropertyKey?.root || "auto";
-              const targets = [];
-              if (r === "shadow") {
-                if (this.shadowRoot?.querySelector(resolvedSelector))
-                  targets.push(this.shadowRoot.querySelector(resolvedSelector));
-              } else if (r === "light") {
-                if (this.querySelector(resolvedSelector))
-                  targets.push(this.querySelector(resolvedSelector));
-              } else if (r === "all") {
-                if (this.shadowRoot?.querySelector(resolvedSelector))
-                  targets.push(this.shadowRoot.querySelector(resolvedSelector));
-                if (this.querySelector(resolvedSelector))
-                  targets.push(this.querySelector(resolvedSelector));
-              } else {
-                const el = (this.shadowRoot || this).querySelector(resolvedSelector);
-                if (el)
-                  targets.push(el);
-              }
-              targets.forEach((t) => t.remove());
+              const options = optionsOrPropertyKey || {};
+              const all = resolveQueryElements(this, selectorOrTarget, options, win);
+              const picked = pickElements(all, options.pick ?? "first");
+              if (Array.isArray(picked))
+                picked.forEach((t) => t.remove());
+              else if (picked)
+                picked.remove();
             }
           },
           enumerable: true,
@@ -14168,161 +15473,36 @@ ${indentStr}}`;
     const constructor = target instanceof Function ? target : target.constructor;
     return ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor) ?? [];
   };
-
-  // src/decorators/queryAll.ts
-  var QUERY_ALL_METADATA_KEY = Symbol.for("simple-web-component:query-all");
+  var QUERY_ALL_METADATA_KEY = QUERY_METADATA_KEY;
   function queryAll(selectorOrTarget, optionsOrPropertyKey, descriptor) {
     if (descriptor !== void 0 && (typeof optionsOrPropertyKey === "string" || typeof optionsOrPropertyKey === "symbol")) {
-      throw new Error(`@queryAll decorator cannot be used on methods. (Method: ${String(optionsOrPropertyKey)})`);
+      return query(selectorOrTarget, optionsOrPropertyKey, descriptor);
     }
     if (typeof selectorOrTarget === "string" || typeof selectorOrTarget === "function") {
-      return (targetObj, propertyKey, descriptor2) => {
-        if (descriptor2 !== void 0) {
-          throw new Error(`@queryAll decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
-        }
-        const constructor = targetObj.constructor;
-        let queries = ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);
-        if (!queries) {
-          queries = [];
-          ReflectUtils.defineMetadata(QUERY_ALL_METADATA_KEY, queries, constructor);
-        }
-        queries.push({ propertyKey, selector: selectorOrTarget, options: optionsOrPropertyKey || {} });
-        Object.defineProperty(targetObj, propertyKey, {
-          get() {
-            ensureInit(this);
-            const config = getElementConfig(this);
-            const win = config?.window || window;
-            const hostSet = SwcUtils.getHelperAndHostSet(win, this);
-            let resolvedSelector;
-            let resolvedElements = [];
-            if (typeof selectorOrTarget === "function") {
-              const result = selectorOrTarget(this, hostSet);
-              if (result instanceof win.NodeList) {
-                resolvedElements = Array.from(result).filter((el) => el instanceof win.HTMLElement);
-              } else if (Array.isArray(result)) {
-                resolvedElements = result.filter((el) => el instanceof win.HTMLElement);
-              }
-            } else {
-              resolvedSelector = selectorOrTarget;
-              const r = optionsOrPropertyKey?.root || "auto";
-              const applyRoot = (t) => {
-                if (!t)
-                  return [];
-                const items = Array.isArray(t) ? t : [t];
-                const results = [];
-                items.forEach((it) => {
-                  if (!(it instanceof HTMLElement)) {
-                    results.push(it);
-                    return;
-                  }
-                  if (r === "auto")
-                    results.push(it.shadowRoot || it);
-                  else {
-                    if (r === "light" || r === "all")
-                      results.push(it);
-                    if ((r === "shadow" || r === "all") && it.shadowRoot)
-                      results.push(it.shadowRoot);
-                  }
-                });
-                return results;
-              };
-              if (resolvedSelector === "$hosts")
-                resolvedElements = applyRoot(hostSet.$hosts).filter((el) => el instanceof HTMLElement);
-              else if (resolvedSelector === "$appHosts")
-                resolvedElements = applyRoot(hostSet.$appHosts).filter((el) => el instanceof HTMLElement);
-              else if (resolvedSelector === "$host")
-                resolvedElements = applyRoot(hostSet.$host).filter((el) => el instanceof HTMLElement);
-              else if (resolvedSelector === "$parentHost")
-                resolvedElements = applyRoot(hostSet.$parentHost).filter((el) => el instanceof HTMLElement);
-              else if (resolvedSelector === "$appHost")
-                resolvedElements = applyRoot(hostSet.$appHost).filter((el) => el instanceof HTMLElement);
-              else if (resolvedSelector === "$firstHost")
-                resolvedElements = applyRoot(hostSet.$firstHost).filter((el) => el instanceof HTMLElement);
-              else if (resolvedSelector === "$lastHost")
-                resolvedElements = applyRoot(hostSet.$lastHost).filter((el) => el instanceof HTMLElement);
-              else if (resolvedSelector === "$firstAppHost")
-                resolvedElements = applyRoot(hostSet.$firstAppHost).filter((el) => el instanceof HTMLElement);
-              else if (resolvedSelector === "$lastAppHost")
-                resolvedElements = applyRoot(hostSet.$lastAppHost).filter((el) => el instanceof HTMLElement);
-              else if (resolvedSelector === "$window")
-                return [win];
-              else if (resolvedSelector === "$document")
-                return [win.document];
-              else if (resolvedSelector === "$this")
-                resolvedElements = applyRoot(this).filter((el) => el instanceof HTMLElement);
-              else {
-                if (r === "shadow")
-                  resolvedElements = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) : [];
-                else if (r === "light")
-                  resolvedElements = Array.from(this.querySelectorAll(resolvedSelector));
-                else if (r === "all") {
-                  const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) : [];
-                  const lNodes = Array.from(this.querySelectorAll(resolvedSelector));
-                  resolvedElements = [...sNodes, ...lNodes];
-                } else
-                  resolvedElements = Array.from((this.shadowRoot || this).querySelectorAll(resolvedSelector));
-              }
-            }
-            if (optionsOrPropertyKey?.filter) {
-              resolvedElements = resolvedElements.filter((el) => {
-                if (!(el instanceof win.HTMLElement))
-                  return true;
-                return optionsOrPropertyKey.filter(el, { currentThis: this, helper: hostSet });
-              });
-            }
-            return resolvedElements;
-          },
-          set(nv) {
-            ensureInit(this);
-            if (nv === null || nv === void 0 || Array.isArray(nv) && nv.length === 0) {
-              const config = getElementConfig(this);
-              const win = config?.window || window;
-              const hostSet = SwcUtils.getHelperAndHostSet(win, this);
-              if (typeof selectorOrTarget === "function") {
-                const result = selectorOrTarget(this, hostSet);
-                if (result instanceof win.NodeList) {
-                  Array.from(result).forEach((el) => {
-                    if (el instanceof win.Element)
-                      el.remove();
-                  });
-                } else if (Array.isArray(result)) {
-                  result.forEach((el) => {
-                    if (el instanceof win.Element)
-                      el.remove();
-                  });
-                }
-                return;
-              }
-              const resolvedSelector = selectorOrTarget;
-              if (resolvedSelector.startsWith("$") && resolvedSelector !== "$this")
-                return;
-              const r = optionsOrPropertyKey?.root || "auto";
-              let targets = [];
-              if (r === "shadow")
-                targets = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) : [];
-              else if (r === "light")
-                targets = Array.from(this.querySelectorAll(resolvedSelector));
-              else if (r === "all") {
-                const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) : [];
-                const lNodes = Array.from(this.querySelectorAll(resolvedSelector));
-                targets = [...sNodes, ...lNodes];
-              } else {
-                targets = Array.from((this.shadowRoot || this).querySelectorAll(resolvedSelector));
-              }
-              targets.forEach((t) => t.remove());
-            }
-          },
-          enumerable: true,
-          configurable: true
-        });
-      };
+      return query(selectorOrTarget, { ...optionsOrPropertyKey ?? {}, pick: "all" });
     }
-    return queryAll("$this", selectorOrTarget);
+    return query({ ...selectorOrTarget ?? {}, pick: "all" });
   }
-  var getQueryAllMetadata = (target) => {
-    const constructor = target instanceof Function ? target : target.constructor;
-    return ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);
-  };
+  var getQueryAllMetadata = getQueryMetadata;
+  function queryShadow(selector, options) {
+    return query(selector, { ...options ?? {}, root: "shadow" });
+  }
+  function queryLight(selector, options) {
+    return query(selector, { ...options ?? {}, root: "light" });
+  }
+  function queryAllRoots(selector, options) {
+    return query(selector, { ...options ?? {}, root: "all" });
+  }
+  function queryAllShadow(selector, options) {
+    return query(selector, { ...options ?? {}, root: "shadow", pick: "all" });
+  }
+  function queryAllLight(selector, options) {
+    return query(selector, { ...options ?? {}, root: "light", pick: "all" });
+  }
+  function queryAllAll(selector, options) {
+    return query(selector, { ...options ?? {}, root: "all", pick: "all" });
+  }
+  var queryIn = (root, pick) => (selector, options) => query(selector, { ...options ?? {}, root, ...pick !== void 0 ? { pick } : {} });
 
   // src/config/config.ts
   var HTML_TAG_ENTRIES = [
@@ -14384,7 +15564,7 @@ ${indentStr}}`;
     ["HTMLHeadingElement", "h1"],
     ["HTMLBodyElement", "body"]
   ];
-  var DOM_EVENT_NAMES = ["click", "dblclick", "mousedown", "mouseenter", "mouseleave", "mousemove", "mouseout", "mouseover", "mouseup", "contextmenu", "keydown", "keypress", "keyup", "blur", "change", "focus", "focusin", "focusout", "input", "invalid", "reset", "search", "select", "submit", "drag", "dragend", "dragenter", "dragleave", "dragover", "dragstart", "drop", "copy", "cut", "paste", "abort", "canplay", "canplaythrough", "durationchange", "emptied", "ended", "error", "loadeddata", "loadedmetadata", "loadstart", "pause", "play", "playing", "progress", "ratechange", "seeked", "seeking", "stalled", "suspend", "timeupdate", "volumechange", "waiting", "scroll", "resize", "load", "unload", "hashchange", "connected"];
+  var DOM_EVENT_NAMES = ["click", "dblclick", "mousedown", "mouseenter", "mouseleave", "mousemove", "mouseout", "mouseover", "mouseup", "contextmenu", "keydown", "keypress", "keyup", "blur", "change", "focus", "focusin", "focusout", "input", "invalid", "reset", "search", "select", "submit", "drag", "dragend", "dragenter", "dragleave", "dragover", "dragstart", "drop", "copy", "cut", "paste", "abort", "canplay", "canplaythrough", "durationchange", "emptied", "ended", "error", "loadeddata", "loadedmetadata", "loadstart", "pause", "play", "playing", "progress", "ratechange", "seeked", "seeking", "stalled", "suspend", "timeupdate", "volumechange", "waiting", "scroll", "resize", "load", "hashchange", "connected"];
   var BROWSER_GLOBALS = ["window", "document", "Node", "Element", "HTMLElement", "DocumentFragment", "CustomEvent", "customElements", "NodeFilter", ...HTML_TAG_ENTRIES.map(([className]) => className)];
 
   // ../simple-boot/dist/esm/decorators/inject/Inject.js
@@ -14652,6 +15832,12 @@ ${indentStr}}`;
             return;
           }
           const resolvedRes = typeof resolvedValue === "function" ? resolvedValue(targetEl, hostSet) : resolvedValue;
+          if (finalOptions.setType === "call") {
+            if (typeof targetEl[targetPropertyKey] !== "function") return;
+            if (Array.isArray(resolvedRes)) targetEl[targetPropertyKey].apply(targetEl, resolvedRes);
+            else targetEl[targetPropertyKey].call(targetEl, resolvedRes);
+            return;
+          }
           targetEl[targetPropertyKey] = resolvedRes;
         });
         return resolvedValue;
@@ -14696,7 +15882,11 @@ ${indentStr}}`;
             }
             return true;
           });
-          const values = filtered.map((el) => el[targetPropertyKey]);
+          const values = filtered.map((el) => {
+            const raw = el[targetPropertyKey];
+            if (finalOptions.getType === "call" && typeof raw === "function") return raw.call(el);
+            return raw;
+          });
           return values.length === 1 ? values[0] : values;
         },
         set(value) {
@@ -14707,30 +15897,309 @@ ${indentStr}}`;
     };
   }
   function property(selectorOrTarget, targetPropertyKeyOrOptions, optionsOrDescriptor) {
-    if (optionsOrDescriptor !== void 0 && (typeof targetPropertyKeyOrOptions === "string" || typeof targetPropertyKeyOrOptions === "symbol")) {
+    if (optionsOrDescriptor !== void 0 && typeof selectorOrTarget !== "string" && typeof selectorOrTarget !== "function" && (typeof targetPropertyKeyOrOptions === "string" || typeof targetPropertyKeyOrOptions === "symbol")) {
       return applyProperty("$this", void 0, {})(selectorOrTarget, targetPropertyKeyOrOptions, optionsOrDescriptor);
     }
     if (typeof selectorOrTarget === "string") {
       return applyProperty(selectorOrTarget, targetPropertyKeyOrOptions, optionsOrDescriptor);
     }
+    if (typeof selectorOrTarget === "function") {
+      return applyProperty(selectorOrTarget, targetPropertyKeyOrOptions, optionsOrDescriptor);
+    }
     return applyProperty("$this", void 0, selectorOrTarget);
   }
   function setProperty(selectorOrOptions, targetPropertyKeyOrOptions, optionsOrUndefined) {
     if (typeof selectorOrOptions === "string") {
       return applyProperty(selectorOrOptions, targetPropertyKeyOrOptions, optionsOrUndefined);
     }
-    return applyProperty("$this", void 0, selectorOrOptions);
-  }
-  var findAllPropertyMetadata = (target) => {
-    const actualTarget = target instanceof Function ? target : target.constructor;
-    return ReflectUtils.findAllMetadata(PROPERTY_METADATA_KEY, actualTarget).flat();
-  };
-  var findAllPropertyApplyMetadata = (target) => {
-    const result = /* @__PURE__ */ new Map();
-    findAllPropertyMetadata(target).forEach((meta) => {
-      result.set(meta.propertyKey, meta);
-    });
-    return result;
+    if (typeof selectorOrOptions === "function") {
+      return applyProperty(selectorOrOptions, targetPropertyKeyOrOptions, optionsOrUndefined);
+    }
+    return applyProperty("$this", void 0, selectorOrOptions);
+  }
+  function callProperty(selectorOrTarget, targetMethodKeyOrOptions, optionsOrUndefined) {
+    if (typeof selectorOrTarget === "string" || typeof selectorOrTarget === "function") {
+      if (typeof targetMethodKeyOrOptions === "string" || typeof targetMethodKeyOrOptions === "symbol") {
+        return applyProperty(selectorOrTarget, targetMethodKeyOrOptions, { ...optionsOrUndefined ?? {}, setType: "call" });
+      }
+      return applyProperty(selectorOrTarget, { ...optionsOrUndefined ?? targetMethodKeyOrOptions ?? {}, setType: "call" });
+    }
+    return applyProperty("$this", void 0, { ...selectorOrTarget ?? {}, setType: "call" });
+  }
+  function callPropertyLight(selector, targetMethodKeyOrOptions, options) {
+    if (targetMethodKeyOrOptions != null && typeof targetMethodKeyOrOptions !== "string" && typeof targetMethodKeyOrOptions !== "symbol") {
+      return callProperty(selector, void 0, { ...targetMethodKeyOrOptions ?? {}, root: "light" });
+    }
+    return callProperty(selector, targetMethodKeyOrOptions, { ...options ?? {}, root: "light" });
+  }
+  function callPropertyShadow(selector, targetMethodKeyOrOptions, options) {
+    if (targetMethodKeyOrOptions != null && typeof targetMethodKeyOrOptions !== "string" && typeof targetMethodKeyOrOptions !== "symbol") {
+      return callProperty(selector, void 0, { ...targetMethodKeyOrOptions ?? {}, root: "shadow" });
+    }
+    return callProperty(selector, targetMethodKeyOrOptions, { ...options ?? {}, root: "shadow" });
+  }
+  function callPropertyAll(selector, targetMethodKey, options) {
+    return callProperty(selector, targetMethodKey, { ...options ?? {}, root: "all" });
+  }
+  var findAllPropertyMetadata = (target) => {
+    const actualTarget = target instanceof Function ? target : target.constructor;
+    return ReflectUtils.findAllMetadata(PROPERTY_METADATA_KEY, actualTarget).flat();
+  };
+  var findAllPropertyApplyMetadata = (target) => {
+    const result = /* @__PURE__ */ new Map();
+    findAllPropertyMetadata(target).forEach((meta) => {
+      result.set(meta.propertyKey, meta);
+    });
+    return result;
+  };
+  var prop = applyProperty;
+  function propThis(targetPropertyKey, options) {
+    return applyProperty("$this", targetPropertyKey, options);
+  }
+  function propAppHost(targetPropertyKey, options) {
+    return applyProperty("$appHost", targetPropertyKey, options);
+  }
+  function propWindow(targetPropertyKey, options) {
+    return applyProperty("$window", targetPropertyKey, options);
+  }
+  function propDocument(targetPropertyKey, options) {
+    return applyProperty("$document", targetPropertyKey, options);
+  }
+  function propLight(selector, targetPropertyKey, options) {
+    return applyProperty(selector, targetPropertyKey, { ...options ?? {}, root: "light" });
+  }
+  function propShadow(selector, targetPropertyKey, options) {
+    return applyProperty(selector, targetPropertyKey, { ...options ?? {}, root: "shadow" });
+  }
+  function propAll(selector, targetPropertyKey, options) {
+    return applyProperty(selector, targetPropertyKey, { ...options ?? {}, root: "all" });
+  }
+  function setPropertyLight(selector, targetPropertyKey, options) {
+    return applyProperty(selector, targetPropertyKey, { ...options ?? {}, root: "light" });
+  }
+  function setPropertyShadow(selector, targetPropertyKey, options) {
+    return applyProperty(selector, targetPropertyKey, { ...options ?? {}, root: "shadow" });
+  }
+  function setPropertyAll(selector, targetPropertyKey, options) {
+    return applyProperty(selector, targetPropertyKey, { ...options ?? {}, root: "all" });
+  }
+  function propertyLight(selector, targetPropertyKey, options) {
+    return applyProperty(selector, targetPropertyKey, { ...options ?? {}, root: "light" });
+  }
+  function propertyShadow(selector, targetPropertyKey, options) {
+    return applyProperty(selector, targetPropertyKey, { ...options ?? {}, root: "shadow" });
+  }
+  function propertyAll(selector, targetPropertyKey, options) {
+    return applyProperty(selector, targetPropertyKey, { ...options ?? {}, root: "all" });
+  }
+
+  // src/decorators/subscribeSwcAppMessageWhileConnected.ts
+  var SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY = Symbol.for("simple-web-component:subscribe-swc-app-message-while-connected");
+  function createSubscribeSwcAppMessageWhileConnected(options, messageType) {
+    return (target, propertyKey, descriptor) => {
+      const filter = options?.filter;
+      const constructor = target.constructor;
+      let list = ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY, constructor);
+      if (!list) {
+        list = [];
+        ReflectUtils.defineMetadata(SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY, list, constructor);
+      }
+      list.push({ propertyKey, messageType, filter });
+      return descriptor;
+    };
+  }
+  function subscribeSwcAppMessageWhileConnected(targetOrMessageTypeOrOptions, optionsOrPropertyKey, descriptor) {
+    if (targetOrMessageTypeOrOptions && typeof targetOrMessageTypeOrOptions === "object" && optionsOrPropertyKey && (typeof optionsOrPropertyKey === "string" || typeof optionsOrPropertyKey === "symbol") && descriptor) {
+      const target = targetOrMessageTypeOrOptions;
+      const propertyKey = optionsOrPropertyKey;
+      return createSubscribeSwcAppMessageWhileConnected({})(target, propertyKey, descriptor);
+    }
+    let messageType;
+    let options = {};
+    if (typeof targetOrMessageTypeOrOptions === "string") {
+      messageType = targetOrMessageTypeOrOptions;
+      if (optionsOrPropertyKey && typeof optionsOrPropertyKey === "object") {
+        options = optionsOrPropertyKey;
+      }
+    } else if (targetOrMessageTypeOrOptions && typeof targetOrMessageTypeOrOptions === "object") {
+      options = targetOrMessageTypeOrOptions;
+    }
+    return createSubscribeSwcAppMessageWhileConnected(options, messageType);
+  }
+  var receiveMessage = subscribeSwcAppMessageWhileConnected;
+  var getSubscribeSwcAppMessageWhileConnectedMetadata = (target) => {
+    const constructor = target instanceof Function ? target : target.constructor;
+    return ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY, constructor);
+  };
+  var MessageSubscribeLifeCycler = class {
+    onConnected(_helperHostSet) {
+    }
+    /** SwcAppMixin 이 구독 대상 메타를 꺼낼 때 사용 */
+    getMetadata(helperHostSet) {
+      return getSubscribeSwcAppMessageWhileConnectedMetadata(helperHostSet.$this);
+    }
+  };
+
+  // src/decorators/subscribeSwcAppRouteChangeWhileConnected.ts
+  var SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY = Symbol.for("simple-web-component:subscribe-swc-app-route-change-while-connected");
+  function createSubscribeSwcAppRouteChangeWhileConnected(options) {
+    return (target, propertyKey, descriptor) => {
+      const pathPattern = options?.path;
+      const filter = options?.filter;
+      const constructor = target.constructor;
+      let list = ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY, constructor);
+      if (!list) {
+        list = [];
+        ReflectUtils.defineMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY, list, constructor);
+      }
+      list.push({ propertyKey, options });
+      return descriptor;
+    };
+  }
+  function subscribeSwcAppRouteChangeWhileConnected(targetOrOptions, propertyKeyOrConfig, descriptor) {
+    if (propertyKeyOrConfig && (typeof propertyKeyOrConfig === "string" || typeof propertyKeyOrConfig === "symbol")) {
+      return createSubscribeSwcAppRouteChangeWhileConnected({})(targetOrOptions, propertyKeyOrConfig, descriptor);
+    }
+    let options = {};
+    if (Array.isArray(targetOrOptions)) {
+      options.path = targetOrOptions;
+      if (propertyKeyOrConfig && typeof propertyKeyOrConfig === "object") {
+        options = { ...options, ...propertyKeyOrConfig };
+      }
+    } else if (typeof targetOrOptions === "string" || typeof targetOrOptions === "function") {
+      options.path = targetOrOptions;
+      if (propertyKeyOrConfig && typeof propertyKeyOrConfig === "object") {
+        options = { ...options, ...propertyKeyOrConfig };
+      }
+    } else if (targetOrOptions && typeof targetOrOptions === "object") {
+      options = targetOrOptions;
+    }
+    return createSubscribeSwcAppRouteChangeWhileConnected(options);
+  }
+  var changedRoute = subscribeSwcAppRouteChangeWhileConnected;
+  var getSubscribeSwcAppRouteChangeWhileConnectedMetadata = (target) => {
+    const constructor = target instanceof Function ? target : target.constructor;
+    const results = ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY, constructor);
+    if (!results) return [];
+    return [...results].sort((a, b) => (a.options?.order ?? 0) - (b.options?.order ?? 0));
+  };
+  var RouteSubscribeLifeCycler = class {
+    onConnected(_helperHostSet) {
+    }
+    /** SwcAppMixin 이 구독 대상 메타를 꺼낼 때 사용 */
+    getMetadata(helperHostSet) {
+      return getSubscribeSwcAppRouteChangeWhileConnectedMetadata(helperHostSet.$this);
+    }
+  };
+
+  // src/decorators/setInterval.ts
+  var SET_INTERVAL_METADATA_KEY = Symbol.for("simple-web-component:set-interval");
+  function setInterval2(interval2, options = {}) {
+    return (target, propertyKey) => {
+      const constructor = target.constructor;
+      let metaList = ReflectUtils.getOwnMetadata(SET_INTERVAL_METADATA_KEY, constructor);
+      if (!metaList) {
+        metaList = [];
+        ReflectUtils.defineMetadata(SET_INTERVAL_METADATA_KEY, metaList, constructor);
+      }
+      metaList.push({ propertyKey, interval: interval2, options });
+    };
+  }
+  var findAllSetIntervalMetadata = (target) => {
+    const constructor = target instanceof Function ? target : target.constructor;
+    return (ReflectUtils.findAllMetadata(SET_INTERVAL_METADATA_KEY, constructor) || []).flat();
+  };
+  var SetIntervalLifeCycler = class {
+    constructor() {
+      __publicField(this, "activeMap", /* @__PURE__ */ new WeakMap());
+    }
+    onConnected(helperHostSet) {
+      const inst = helperHostSet.$this;
+      const ids = [];
+      for (const meta of findAllSetIntervalMetadata(inst)) {
+        const id = helperHostSet.$w.setInterval(() => {
+          const args = meta.options.parameter?.(helperHostSet) ?? [];
+          try {
+            const res = inst[meta.propertyKey](...args);
+            const vk = meta.options.valueKey;
+            if (vk && res && typeof res === "object" && typeof res[vk] === "function") {
+              res[vk](id);
+            }
+          } catch (e) {
+            console.error("[SWC] setInterval tick error:", e);
+          }
+        }, meta.interval);
+        meta.options.created?.(helperHostSet, id);
+        ids.push(id);
+      }
+      this.activeMap.set(inst, ids);
+    }
+    onDisconnected(helperHostSet) {
+      const inst = helperHostSet.$this;
+      for (const id of this.activeMap.get(inst) ?? []) {
+        try {
+          helperHostSet.$w.clearInterval(id);
+        } catch (e) {
+          console.error("[SWC] clearInterval error:", e);
+        }
+      }
+      this.activeMap.delete(inst);
+    }
+  };
+
+  // src/decorators/setTimeout.ts
+  var SET_TIMEOUT_METADATA_KEY = Symbol.for("simple-web-component:set-timeout");
+  function setTimeout2(delay, options = {}) {
+    return (target, propertyKey) => {
+      const constructor = target.constructor;
+      let metaList = ReflectUtils.getOwnMetadata(SET_TIMEOUT_METADATA_KEY, constructor);
+      if (!metaList) {
+        metaList = [];
+        ReflectUtils.defineMetadata(SET_TIMEOUT_METADATA_KEY, metaList, constructor);
+      }
+      metaList.push({ propertyKey, delay, options });
+    };
+  }
+  var findAllSetTimeoutMetadata = (target) => {
+    const constructor = target instanceof Function ? target : target.constructor;
+    return (ReflectUtils.findAllMetadata(SET_TIMEOUT_METADATA_KEY, constructor) || []).flat();
+  };
+  var SetTimeoutLifeCycler = class {
+    constructor() {
+      __publicField(this, "activeMap", /* @__PURE__ */ new WeakMap());
+    }
+    onConnected(helperHostSet) {
+      const inst = helperHostSet.$this;
+      const ids = [];
+      for (const meta of findAllSetTimeoutMetadata(inst)) {
+        const id = helperHostSet.$w.setTimeout(() => {
+          const args = meta.options.parameter?.(helperHostSet) ?? [];
+          try {
+            const res = inst[meta.propertyKey](...args);
+            const vk = meta.options.valueKey;
+            if (vk && res && typeof res === "object" && typeof res[vk] === "function") {
+              res[vk](id);
+            }
+          } catch (e) {
+            console.error("[SWC] setTimeout fire error:", e);
+          }
+        }, meta.delay);
+        meta.options.created?.(helperHostSet, id);
+        ids.push(id);
+      }
+      this.activeMap.set(inst, ids);
+    }
+    onDisconnected(helperHostSet) {
+      const inst = helperHostSet.$this;
+      for (const id of this.activeMap.get(inst) ?? []) {
+        try {
+          helperHostSet.$w.clearTimeout(id);
+        } catch (e) {
+          console.error("[SWC] clearTimeout error:", e);
+        }
+      }
+      this.activeMap.delete(inst);
+    }
   };
 
   // src/decorators/elementDefine.ts
@@ -14743,7 +16212,6 @@ ${indentStr}}`;
     if (!inst.__swc_initialized) {
       inst._swcId = inst?.getAttribute?.("swc-use-ssr") ?? "s" + Math.random().toString(36).substring(2, 11).toLowerCase();
       inst._emitHandlers = /* @__PURE__ */ new Map();
-      inst._boundListeners = [];
       inst.__swc_initialized = true;
       const target = inst instanceof Function ? inst : inst.constructor;
       const attributeAllList = findAllAttributeMetadata(target).filter((it) => it.type === "property");
@@ -14791,13 +16259,13 @@ ${indentStr}}`;
     const path = event2.composedPath();
     const type = event2.type;
     const attrName = `swc-on-${type}`;
-    for (const node of path) {
-      if (!(node instanceof HTMLElement)) continue;
-      const script = node.getAttribute?.(attrName);
-      if (script && !getElementConfig(node)) {
-        const host = SwcUtils.findNearestSwcHostIncludingSelf(node);
+    for (const node2 of path) {
+      if (!(node2 instanceof HTMLElement)) continue;
+      const script = node2.getAttribute?.(attrName);
+      if (script && !getElementConfig(node2)) {
+        const host = SwcUtils.findNearestSwcHostIncludingSelf(node2);
         if (host && host.isConnected && typeof host.__swc_executeAttributeEvent === "function") {
-          await host.__swc_executeAttributeEvent(node, attrName, script, event2);
+          await host.__swc_executeAttributeEvent(node2, attrName, script, event2);
           event2.__swc_handled = true;
           break;
         }
@@ -14808,8 +16276,8 @@ ${indentStr}}`;
     const win = configWindow;
     const doc = win?.document;
     const builtInTagMap = /* @__PURE__ */ new Map();
-    for (const [cls, tag] of HTML_TAG_ENTRIES) {
-      if (win?.[cls]) builtInTagMap.set(win[cls], tag);
+    for (const [cls2, tag] of HTML_TAG_ENTRIES) {
+      if (win?.[cls2]) builtInTagMap.set(win[cls2], tag);
     }
     const domHelpers = SwcUtils.getHelperSet(win);
     return { win, doc, builtInTagMap, domHelpers };
@@ -14942,10 +16410,6 @@ ${indentStr}}`;
       }
       metadata.extends = extendsTagName;
     }
-    const emitCustomEventList = getEmitCustomEventMetadataList(constructor) || [];
-    const emitHostCustomEventList = emitCustomEventList.filter((meta) => meta.selector === "$this" || meta.selector === "");
-    const addEventListenerList = getAddEventListenerMetadata(constructor) || [];
-    const attrChangeMap = findAllAttributeChangedMetadata(constructor);
     const attributeList = findAllAttributeMetadata(constructor);
     const applyAttributeMap = findAllAttributeApplyMetadata(constructor);
     const swcLifecycleAttributes = ["swc-on-constructor", "swc-on-connected", "swc-on-disconnected", "swc-on-before-connected", "swc-on-after-connected", "swc-on-before-disconnected", "swc-on-after-disconnected", "swc-on-before-adopted", "swc-on-after-adopted", "swc-on-attribute-changed"];
@@ -14953,10 +16417,222 @@ ${indentStr}}`;
     const attributeApplyNames = Array.from(applyAttributeMap.values()).map((it) => it.targetAttributeName).filter(Boolean);
     const hostAttributes = attributeList.filter((it) => it.selector === "$this").map((it) => it.propertyKey || String(it.propertyKey));
     const originalStaticObservedAttributes = constructor.observedAttributes ?? [];
-    const mergedObservedAttributes = [.../* @__PURE__ */ new Set([...metadata.observedAttributes ?? [], ...originalStaticObservedAttributes, ...attrChangeMap.keys(), ...attributeApplyNames, ...hostAttributes, ...emitHostCustomEventList.map((it) => it.options.attributeName).filter(Boolean), ...swcLifecycleAttributes, ...swcOnEvents])];
     const proto = constructor.prototype;
     setupPrototype(proto, win);
     let helperHostSet = null;
+    const eventCycler = new EventListenerLifeCycler();
+    const cyclers = [
+      eventCycler,
+      new ChangedAttributeLifeCycler(),
+      new EmitCustomEventLifeCycler(),
+      new ResizeObserverLifeCycler(),
+      new IntersectionObserverLifeCycler(),
+      new MutationObserverLifeCycler(),
+      new MessageSubscribeLifeCycler(),
+      new RouteSubscribeLifeCycler(),
+      new SetIntervalLifeCycler(),
+      new SetTimeoutLifeCycler()
+    ];
+    const cyclerObservedAttributes = cyclers.flatMap((c) => c.getObservedAttributeNames?.(constructor) ?? []);
+    const mergedObservedAttributes = [.../* @__PURE__ */ new Set([...metadata.observedAttributes ?? [], ...originalStaticObservedAttributes, ...cyclerObservedAttributes, ...attributeApplyNames, ...hostAttributes, ...swcLifecycleAttributes, ...swcOnEvents])];
+    const buildObservers = async (helperHostSet2) => {
+      const inst = helperHostSet2.$this;
+      const observers = [];
+      let resizeObserverSet = [];
+      let mutationObserverSet = [];
+      let intersectionObserverSet = [];
+      const resolveDelegateRoots = (delegateRoot) => {
+        const r = delegateRoot || "auto";
+        const roots = [];
+        if (r === "auto") roots.push(inst.shadowRoot || inst);
+        else if (r === "light") roots.push(inst);
+        else if (r === "shadow" && inst.shadowRoot) roots.push(inst.shadowRoot);
+        else if (r === "all") {
+          roots.push(inst);
+          if (inst.shadowRoot) roots.push(inst.shadowRoot);
+        }
+        return roots;
+      };
+      for (const c of cyclers) {
+        const result = await c.onConnected?.(helperHostSet2, resizeObserverSet);
+        if (!result) continue;
+        if (result.resizeObserverSet?.length) resizeObserverSet = [...resizeObserverSet, ...result.resizeObserverSet];
+        if (result.mutationObserverSet?.length) mutationObserverSet = [...mutationObserverSet, ...result.mutationObserverSet];
+        if (result.intersectionObserverSet?.length) intersectionObserverSet = [...intersectionObserverSet, ...result.intersectionObserverSet];
+      }
+      const resizeDelegates = (resizeObserverSet ?? []).filter((t) => t.delegate && typeof t.target === "string");
+      let resizeObserve;
+      let resizeUnobserve;
+      const resizeObserved = /* @__PURE__ */ new WeakSet();
+      if (resizeObserverSet?.length) {
+        const roCallbacks = [...new Set(resizeObserverSet.map((e) => e.callback))];
+        const ro = new win.ResizeObserver((entries, obs) => {
+          for (const cb of roCallbacks) cb(entries, obs);
+        });
+        for (const e of resizeObserverSet) {
+          if (e.delegate) continue;
+          if (typeof e.target === "string") {
+            const scope = resolveDelegateRoots(e.delegateRoot);
+            for (const sr of scope) {
+              sr.querySelectorAll(e.target).forEach((el) => {
+                if (!resizeObserved.has(el)) {
+                  ro.observe(el, e.options);
+                  resizeObserved.add(el);
+                }
+              });
+            }
+            continue;
+          }
+          ro.observe(e.target, e.options);
+          if (e.target instanceof Element) resizeObserved.add(e.target);
+        }
+        resizeObserve = (el, opts) => {
+          if (resizeObserved.has(el)) return;
+          ro.observe(el, opts);
+          resizeObserved.add(el);
+        };
+        resizeUnobserve = (el) => {
+          if (!resizeObserved.has(el)) return;
+          ro.unobserve(el);
+          resizeObserved.delete(el);
+        };
+        observers.push(ro);
+      }
+      const intersectionDelegates = [];
+      for (const group of intersectionObserverSet) {
+        const ioCallbacks = [...new Set(group.observeTargets.map((e) => e.callback))];
+        const io = new win.IntersectionObserver((entries, obs) => {
+          for (const cb of ioCallbacks) cb(entries, obs);
+        }, group.options);
+        const ioObserved = /* @__PURE__ */ new WeakSet();
+        for (const e of group.observeTargets) {
+          if (e.delegate) {
+            const target = e.target;
+            const observe = (el) => {
+              if (ioObserved.has(el)) return;
+              io.observe(el);
+              ioObserved.add(el);
+            };
+            const unobserve = (el) => {
+              if (!ioObserved.has(el)) return;
+              io.unobserve(el);
+              ioObserved.delete(el);
+            };
+            intersectionDelegates.push({ target, delegateRoot: e.delegateRoot, observe, unobserve });
+            continue;
+          }
+          if (typeof e.target === "string") {
+            const scope = resolveDelegateRoots(e.delegateRoot);
+            for (const sr of scope) {
+              sr.querySelectorAll(e.target).forEach((el) => {
+                if (!ioObserved.has(el)) {
+                  io.observe(el);
+                  ioObserved.add(el);
+                }
+              });
+            }
+            continue;
+          }
+          io.observe(e.target);
+          if (e.target instanceof Element) ioObserved.add(e.target);
+        }
+        observers.push(io);
+      }
+      const handleResizeDelegate = (n, observe) => {
+        if (!resizeObserve || !resizeUnobserve || n.nodeType !== 1) return;
+        const el = n;
+        for (const d of resizeDelegates) {
+          const isThis = d.target === "$this" || d.target === "";
+          const matchesSel = (node2) => {
+            if (!node2 || node2.nodeType !== 1) return false;
+            if (isThis) return true;
+            return node2.matches?.(d.target) || !!node2.closest?.(d.target);
+          };
+          if (matchesSel(el)) {
+            observe ? resizeObserve(el, d.options) : resizeUnobserve(el);
+          } else if (!isThis) {
+            el.querySelectorAll(d.target).forEach((sub) => {
+              observe ? resizeObserve(sub, d.options) : resizeUnobserve(sub);
+            });
+          }
+        }
+      };
+      const handleIntersectionDelegate = (n, observe) => {
+        if (n.nodeType !== 1) return;
+        const el = n;
+        for (const d of intersectionDelegates) {
+          const isThis = d.target === "$this" || d.target === "";
+          const matchesSel = (node2) => {
+            if (!node2 || node2.nodeType !== 1) return false;
+            if (isThis) return true;
+            return node2.matches?.(d.target) || !!node2.closest?.(d.target);
+          };
+          if (matchesSel(el)) {
+            observe ? d.observe(el) : d.unobserve(el);
+          } else if (!isThis) {
+            el.querySelectorAll(d.target).forEach((sub) => {
+              observe ? d.observe(sub) : d.unobserve(sub);
+            });
+          }
+        }
+      };
+      if (mutationObserverSet?.length || resizeDelegates.length > 0 || intersectionDelegates.length > 0) {
+        const callbacks = [...new Set((mutationObserverSet ?? []).map((e) => e.callback))];
+        const mo = new win.MutationObserver((mutations, obs) => {
+          for (const mut of mutations) {
+            Array.from(mut.addedNodes || []).forEach((n) => {
+              handleResizeDelegate(n, true);
+              handleIntersectionDelegate(n, true);
+            });
+            Array.from(mut.removedNodes || []).forEach((n) => {
+              handleResizeDelegate(n, false);
+              handleIntersectionDelegate(n, false);
+            });
+          }
+          for (const cb of callbacks) cb(mutations, obs);
+        });
+        const moObserveTargets = /* @__PURE__ */ new Map();
+        const mergeMutationInit = (existing, next) => {
+          if (!existing) return next;
+          const mergedFilter = existing.attributeFilter || next.attributeFilter ? [.../* @__PURE__ */ new Set([...existing.attributeFilter ?? [], ...next.attributeFilter ?? []])] : void 0;
+          return {
+            childList: existing.childList || next.childList,
+            attributes: existing.attributes || next.attributes,
+            characterData: existing.characterData || next.characterData,
+            subtree: existing.subtree || next.subtree,
+            attributeOldValue: existing.attributeOldValue || next.attributeOldValue,
+            characterDataOldValue: existing.characterDataOldValue || next.characterDataOldValue,
+            attributeFilter: mergedFilter
+          };
+        };
+        const addObserveTarget = (target, options) => {
+          moObserveTargets.set(target, mergeMutationInit(moObserveTargets.get(target), options));
+        };
+        for (const e of mutationObserverSet ?? []) {
+          if (e.delegate) continue;
+          const init = e.options ?? { childList: true };
+          if (typeof e.target === "string") {
+            const scope = resolveDelegateRoots(e.delegateRoot);
+            for (const sr of scope) {
+              sr.querySelectorAll(e.target).forEach((el) => addObserveTarget(el, init));
+            }
+            continue;
+          }
+          addObserveTarget(e.target, init);
+        }
+        for (const d of resizeDelegates) {
+          for (const r of resolveDelegateRoots(d.delegateRoot)) addObserveTarget(r, { childList: true, subtree: true });
+        }
+        for (const d of intersectionDelegates) {
+          for (const r of resolveDelegateRoots(d.delegateRoot)) addObserveTarget(r, { childList: true, subtree: true });
+        }
+        for (const [target, options] of moObserveTargets) {
+          mo.observe(target, options);
+        }
+        observers.push(mo);
+      }
+      inst.__swc_observers = observers;
+    };
     const originalConnected = proto.connectedCallback;
     proto.connectedCallback = async function() {
       ensureInit(this);
@@ -14972,14 +16648,12 @@ ${indentStr}}`;
         }
         const conf = getElementConfig(this);
         const currentWin = this._resolveWindow(conf);
-        const bMethods = findAllOnConnectedBeforeMetadata(this);
-        for (const m of bMethods) await this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
+        for (const m of findAllOnConnectedBeforeMetadata(this)) await this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
         this._executeSwcScript("swc-on-before-connected", helperHostSet);
         const targetConnectedList = useSsr ? [] : findAllOnConnectedMetadata(constructor);
         const shadowMode = conf?.useShadow || targetConnectedList.find((it) => it.options.useShadow)?.options.useShadow;
         if (shadowMode && !this.shadowRoot) {
           const mode = shadowMode === true ? "open" : shadowMode;
-          console.log("tagName=", this.tagName, "mode", mode, this.shadowRoot);
           this.attachShadow({ mode });
         }
         const stateContext = { ...helperHostSet };
@@ -14988,7 +16662,6 @@ ${indentStr}}`;
         });
         const shadowChildren = [];
         const lightChildren = [];
-        console.log("targetConnectList", this.tagName, targetConnectedList.length);
         if (targetConnectedList.length > 0) {
           for (const meta of targetConnectedList) {
             let res = await this._invokeLifecycleMethod(meta.propertyKey, helperHostSet);
@@ -15029,188 +16702,14 @@ ${indentStr}}`;
           });
           globalDelegatedRoots.add(root);
         }
-        const delegateListeners = [];
-        const nonDelegateListeners = [];
-        addEventListenerList.forEach((meta) => {
-          const isStringSelector = typeof meta.selector === "string";
-          if (meta.options.delegate && isStringSelector && meta.selector !== "$window" && meta.selector !== "$document" && meta.selector !== "$host" && meta.selector !== "$appHost" && meta.selector !== "$firstHost" && meta.selector !== "$lastHost" && meta.selector !== "$firstAppHost" && meta.selector !== "$lastAppHost" && meta.selector !== "$hosts" && meta.selector !== "$appHosts" && meta.selector !== "$this" && meta.selector !== "") {
-            delegateListeners.push(meta);
-          } else {
-            nonDelegateListeners.push(meta);
-          }
-        });
-        const delegatesByTypeAndRoot = /* @__PURE__ */ new Map();
-        delegateListeners.forEach((meta) => {
-          const r = meta.options.root || "auto";
-          const rootKey = `${meta.type}:${r}`;
-          if (!delegatesByTypeAndRoot.has(rootKey)) {
-            delegatesByTypeAndRoot.set(rootKey, []);
-          }
-          delegatesByTypeAndRoot.get(rootKey).push(meta);
-        });
-        delegatesByTypeAndRoot.forEach((metaList, typeRootKey) => {
-          const [type, rStr] = typeRootKey.split(":");
-          const r = rStr === "auto" ? "auto" : rStr;
-          const opts = { capture: metaList[0].options.capture, once: metaList[0].options.once, passive: metaList[0].options.passive };
-          const bindRoots = [];
-          if (r === "auto") bindRoots.push(this.shadowRoot || this);
-          else if (r === "light") bindRoots.push(this);
-          else if (r === "shadow" && this.shadowRoot) bindRoots.push(this.shadowRoot);
-          else if (r === "all") {
-            bindRoots.push(this);
-            if (this.shadowRoot) bindRoots.push(this.shadowRoot);
-          }
-          bindRoots.forEach((br) => {
-            const sortedMetaList = [...metaList].sort((a, b) => {
-              const aStop = a.options.stopPropagation ? 1 : 0;
-              const bStop = b.options.stopPropagation ? 1 : 0;
-              return bStop - aStop;
-            });
-            const unifiedHandler = async (event2) => {
-              for (const meta of sortedMetaList) {
-                const { selector, options } = meta;
-                const matchedEl = event2.target?.closest(selector);
-                if (matchedEl && br.contains(matchedEl)) {
-                  if (options.filter) {
-                    const helper = SwcUtils.getHelperAndHostSet(currentWin, matchedEl);
-                    if (!options.filter(event2, helper)) {
-                      continue;
-                    }
-                  }
-                  if (options.stopPropagation) event2.stopPropagation();
-                  if (options.stopImmediatePropagation) event2.stopImmediatePropagation();
-                  if (options.preventDefault) event2.preventDefault();
-                  const currentHostSet = SwcUtils.getHostSet(this);
-                  const args = { event: event2, ...currentHostSet, $el: matchedEl, $root: br };
-                  await this[meta.propertyKey](event2, { ...currentHostSet, $matchedElement: matchedEl }, args);
-                  if (event2.cancelBubble) break;
-                }
-              }
-            };
-            br.addEventListener(type, unifiedHandler, opts);
-            this._boundListeners.push({ target: br, type, handler: unifiedHandler, options: opts });
-          });
-        });
-        nonDelegateListeners.forEach((meta) => {
-          const { selector, type, options } = meta;
-          const opts = { capture: options.capture, once: options.once, passive: options.passive };
-          const bindTargets = [];
-          const r = options.root || "auto";
-          let resolvedSelector = null;
-          if (typeof selector === "function") {
-            const hostSet = SwcUtils.getHelperAndHostSet(currentWin, this);
-            const result = selector(this, hostSet);
-            if (typeof result === "string") {
-              resolvedSelector = result;
-            } else if (result instanceof currentWin.Element) {
-              bindTargets.push(result);
-            } else if (result instanceof currentWin.NodeList) {
-              bindTargets.push(...Array.from(result));
-            } else if (Array.isArray(result)) {
-              bindTargets.push(...result);
-            }
-          } else {
-            resolvedSelector = selector;
-          }
-          const applyRootOption = (target) => {
-            if (!target) return;
-            if (r === "auto") {
-              bindTargets.push(target.shadowRoot || target);
-            } else {
-              if (r === "light" || r === "all") bindTargets.push(target);
-              if ((r === "shadow" || r === "all") && target.shadowRoot) bindTargets.push(target.shadowRoot);
-            }
-          };
-          if (resolvedSelector) {
-            if (resolvedSelector === "$window") bindTargets.push(currentWin);
-            else if (resolvedSelector === "$document") bindTargets.push(currentWin.document);
-            else if (resolvedSelector === "$host") applyRootOption(helperHostSet.$host);
-            else if (resolvedSelector === "$parentHost") applyRootOption(helperHostSet.$parentHost);
-            else if (resolvedSelector === "$appHost") applyRootOption(helperHostSet.$appHost);
-            else if (resolvedSelector === "$firstHost") applyRootOption(helperHostSet.$firstHost);
-            else if (resolvedSelector === "$lastHost") applyRootOption(helperHostSet.$lastHost);
-            else if (resolvedSelector === "$firstAppHost") applyRootOption(helperHostSet.$firstAppHost);
-            else if (resolvedSelector === "$lastAppHost") applyRootOption(helperHostSet.$lastAppHost);
-            else if (resolvedSelector === "$hosts") helperHostSet.$hosts.forEach(applyRootOption);
-            else if (resolvedSelector === "$appHosts") helperHostSet.$appHosts.forEach(applyRootOption);
-            else if (resolvedSelector === "$this" || !resolvedSelector) applyRootOption(this);
-            else {
-              const searchRoots = [];
-              if (r === "auto") searchRoots.push(this.shadowRoot || this);
-              else if (r === "light") searchRoots.push(this);
-              else if (r === "shadow" && this.shadowRoot) searchRoots.push(this.shadowRoot);
-              else if (r === "all") {
-                searchRoots.push(this);
-                if (this.shadowRoot) searchRoots.push(this.shadowRoot);
-              }
-              searchRoots.forEach((sr) => {
-                sr.querySelectorAll(resolvedSelector).forEach((el) => bindTargets.push(el));
-              });
-            }
-          }
-          bindTargets.forEach((t) => {
-            const handler = async (event2) => {
-              if (options.filter) {
-                const helper = SwcUtils.getHelperAndHostSet(currentWin, t);
-                if (!options.filter(event2, { currentThis: this, helper })) {
-                  return;
-                }
-              }
-              if (options.stopPropagation) event2.stopPropagation();
-              if (options.stopImmediatePropagation) event2.stopImmediatePropagation();
-              if (options.preventDefault) event2.preventDefault();
-              const currentHostSet = SwcUtils.getHostSet(this);
-              const args = { event: event2, ...currentHostSet, $el: t, $root: t };
-              await this[meta.propertyKey](event2, { currentHostSet, $matchedElement: event2.currentTarget }, args);
-            };
-            const eventSubject = new Subject();
-            let eventStream = eventSubject;
-            if (options.debounceTime !== void 0 && options.debounceTime > 0) {
-              eventStream = eventStream.pipe(debounceTime(options.debounceTime));
-            }
-            if (options.throttleTime !== void 0 && options.throttleTime > 0) {
-              eventStream = eventStream.pipe(throttleTime2(options.throttleTime));
-            }
-            if (options.distinctUntilChanged !== void 0 && options.distinctUntilChanged !== false) {
-              if (typeof options.distinctUntilChanged === "function") {
-                eventStream = eventStream.pipe(distinctUntilChanged(options.distinctUntilChanged));
-              } else {
-                eventStream = eventStream.pipe(distinctUntilChanged());
-              }
-            }
-            const subscription = eventStream.subscribe({
-              next: (event2) => {
-                handler(event2).catch((err) => console.error("Event handler error:", err));
-              },
-              error: (err) => console.error("Event stream error:", err)
-            });
-            const wrappedHandler = (event2) => {
-              eventSubject.next(event2);
-            };
-            t.addEventListener(type, wrappedHandler, opts);
-            this._boundListeners.push({ target: t, type, handler: wrappedHandler, options: opts, subscription });
-          });
-        });
+        await buildObservers(SwcUtils.getHelperAndHostSet(win, this));
         if (originalConnected) await originalConnected.apply(this);
-        const aMethods = findAllOnConnectedAfterMetadata(this);
-        for (const m of aMethods) await this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
+        for (const m of findAllOnConnectedAfterMetadata(this)) await this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
         this._executeSwcScript("swc-on-connected", helperHostSet);
         this._executeSwcScript("swc-on-after-connected", helperHostSet);
         this.__swc_connected = true;
-        for (let [name2, metaList] of Array.from(attrChangeMap)) {
-          for (const meta of metaList) {
-            if (meta.options.while === "connected") {
-              const val = getAttributeValue(this, name2, { type: meta.options.type });
-              if (val !== null) {
-                await this[meta.propertyKey](val, null, name2, helperHostSet);
-              }
-            }
-          }
-        }
       } finally {
-        for (let m of findAllLifecycleMetadata(this, ON_CONNECTED_COMPLETED_METADATA_KEY)) {
-          await this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
-        }
+        for (const m of findAllLifecycleMetadata(this, ON_CONNECTED_COMPLETED_METADATA_KEY)) await this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
         if (appHost && typeof appHost._connectedDone === "function") {
           await appHost._connectedDone(this);
         }
@@ -15218,26 +16717,24 @@ ${indentStr}}`;
     };
     const originalDisconnected = proto.disconnectedCallback;
     proto.disconnectedCallback = function() {
-      const appHost = helperHostSet.$appHost;
+      const appHost = helperHostSet?.$appHost;
       if (appHost && typeof appHost._disconnected === "function") {
         appHost._disconnected(this);
       }
       this._executeSwcScript("swc-on-before-disconnected", helperHostSet);
-      const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_DISCONNECTED_METADATA_KEY);
-      for (const m of bMethods) this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
-      if (this._boundListeners) {
-        this._boundListeners.forEach((l) => {
-          l.target.removeEventListener(l.type, l.handler, l.options);
-          if (l.subscription && typeof l.subscription.unsubscribe === "function") {
-            l.subscription.unsubscribe();
-          }
-        });
-        this._boundListeners = [];
+      for (const m of findAllLifecycleMetadata(this, ON_BEFORE_DISCONNECTED_METADATA_KEY)) this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
+      for (const c of cyclers) c.onDisconnected?.(helperHostSet);
+      for (const o of this.__swc_observers ?? []) {
+        try {
+          o?.disconnect?.();
+        } catch (e) {
+          console.error("[SWC] observer disconnect error:", e);
+        }
       }
+      this.__swc_observers = [];
       new ElementApply(this, { id: this._swcId }).removeAllEventListener();
       if (originalDisconnected) originalDisconnected.apply(this);
-      const aMethods = findAllLifecycleMetadata(this, ON_AFTER_DISCONNECTED_METADATA_KEY);
-      for (const m of aMethods) this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
+      for (const m of findAllLifecycleMetadata(this, ON_AFTER_DISCONNECTED_METADATA_KEY)) this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
       this._executeSwcScript("swc-on-disconnected", helperHostSet);
       this._executeSwcScript("swc-on-after-disconnected", helperHostSet);
       this.__swc_connected = false;
@@ -15246,35 +16743,34 @@ ${indentStr}}`;
     proto.adoptedCallback = function() {
       const hostSet = SwcUtils.getHostSet(this);
       this._executeSwcScript("swc-on-before-adopted", hostSet);
-      const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_ADOPTED_METADATA_KEY);
-      for (const m of bMethods) this._invokeLifecycleMethod(m.propertyKey, hostSet);
+      for (const m of findAllLifecycleMetadata(this, ON_BEFORE_ADOPTED_METADATA_KEY)) this._invokeLifecycleMethod(m.propertyKey, hostSet);
+      for (const c of cyclers) c.onAdopted?.(helperHostSet);
       if (originalAdopted) originalAdopted.apply(this);
-      const aMethods = findAllLifecycleMetadata(this, ON_AFTER_ADOPTED_METADATA_KEY);
-      for (const m of aMethods) this._invokeLifecycleMethod(m.propertyKey, hostSet);
+      for (const m of findAllLifecycleMetadata(this, ON_AFTER_ADOPTED_METADATA_KEY)) this._invokeLifecycleMethod(m.propertyKey, hostSet);
       this._executeSwcScript("swc-on-adopted", hostSet);
       this._executeSwcScript("swc-on-after-adopted", hostSet);
     };
     const originalAttributeChanged = proto.attributeChangedCallback;
     proto.attributeChangedCallback = function(name2, old, newVal) {
       if (originalAttributeChanged) originalAttributeChanged.apply(this, [name2, old, newVal]);
-      const hSet = SwcUtils.getHostSet(this);
+      const helperAndHostSet = SwcUtils.getHelperAndHostSet(win, this);
       let processedVal = newVal;
       if (newVal !== null) {
         const ae = new ActionExpression(newVal);
         const expr = ae.getFirstExpression("callReturn");
         if (expr) {
           const win2 = this._resolveWindow?.() || (typeof window !== "undefined" ? window : void 0);
-          const helperAndHostSet = SwcUtils.getHelperAndHostSet(win2, this);
+          const exprHelperAndHostSet = SwcUtils.getHelperAndHostSet(win2, this);
           const script = ConvertUtils2.decodeHtmlEntity(expr.script, win2.document);
           try {
             const result = FunctionUtils.executeReturn({
               script,
               context: this,
-              args: helperAndHostSet
+              args: exprHelperAndHostSet
             });
             processedVal = result;
           } catch (e) {
-            console.error(`[SWC] Failed to execute directive {{= ${expr.script} }} on attribute ${name2}: ${helperAndHostSet}`, e);
+            console.error(`[SWC] Failed to execute directive {{= ${expr.script} }} on attribute ${name2}: ${exprHelperAndHostSet}`, e);
             processedVal = newVal;
           }
         }
@@ -15285,20 +16781,7 @@ ${indentStr}}`;
           this._bindAttributeEvent(this, name2, newVal, eventName);
         }
       }
-      const hostCustomEventMeta = emitHostCustomEventList.find((it) => it.options.attributeName === name2);
-      if (hostCustomEventMeta && newVal !== null) {
-        this._bindAttributeEvent(this, name2, newVal, hostCustomEventMeta.type);
-      }
-      const metaList = attrChangeMap.get(name2);
-      if (metaList && Array.isArray(metaList)) {
-        for (const meta of metaList) {
-          if (meta.options.while === "connected" && !this.__swc_connected) {
-            continue;
-          }
-          const convertedVal = convertAttributeValue(processedVal, meta.options.type);
-          this[meta.propertyKey](convertedVal, old, name2, hSet);
-        }
-      }
+      for (const c of cyclers) c.onAttributeChanged?.(helperAndHostSet, name2, old, processedVal);
     };
     Object.defineProperty(constructor, "observedAttributes", {
       get: () => mergedObservedAttributes,
@@ -15528,6 +17011,9 @@ ${indentStr}}`;
     return applyAttribute("$this", void 0, selectorOrAttributeOrTarget);
   }
   function setAttribute(selectorOrAttributeOrOptions, attributeNameOrOptions, optionsOrUndefined) {
+    if (typeof selectorOrAttributeOrOptions === "function") {
+      return applyAttribute(selectorOrAttributeOrOptions, attributeNameOrOptions, optionsOrUndefined);
+    }
     if (typeof selectorOrAttributeOrOptions === "string") {
       const isSelector = isCssSelector(selectorOrAttributeOrOptions);
       if (isSelector) {
@@ -15550,6 +17036,22 @@ ${indentStr}}`;
     });
     return result;
   };
+  var attr = applyAttribute;
+  function attrThis(targetAttributeName, options) {
+    return applyAttribute("$this", targetAttributeName, options);
+  }
+  function attrAppHost(targetAttributeName, options) {
+    return applyAttribute("$appHost", targetAttributeName, options);
+  }
+  function attrLight(selector, targetAttributeName, options) {
+    return applyAttribute(selector, targetAttributeName, { ...options ?? {}, root: "light" });
+  }
+  function attrShadow(selector, targetAttributeName, options) {
+    return applyAttribute(selector, targetAttributeName, { ...options ?? {}, root: "shadow" });
+  }
+  function attrAll(selector, targetAttributeName, options) {
+    return applyAttribute(selector, targetAttributeName, { ...options ?? {}, root: "all" });
+  }
 
   // src/decorators/applyNode.ts
   var APPLY_NODE_METADATA_KEY = Symbol.for("simple-web-component:apply-node");
@@ -15840,6 +17342,23 @@ ${indentStr}}`;
     }
     return applyNode({ ...selectorOrOptions, position: "clearChildren", root: "light" });
   }
+  var apply = applyNode;
+  var node = applyNode;
+  function applyThis(options) {
+    return applyNode("$this", options);
+  }
+  function applyAppHost(options) {
+    return applyNode("$appHost", options);
+  }
+  function applyLight(selector, options) {
+    return applyNode(selector, { ...options ?? {}, root: "light" });
+  }
+  function applyShadow(selector, options) {
+    return applyNode(selector, { ...options ?? {}, root: "shadow" });
+  }
+  function applyAll(selector, options) {
+    return applyNode(selector, { ...options ?? {}, root: "all" });
+  }
   var findAllApplyNodeMetadata = (target) => {
     const result = /* @__PURE__ */ new Map();
     const maps = ReflectUtils.findAllMetadata(APPLY_NODE_METADATA_KEY, target);
@@ -15850,6 +17369,44 @@ ${indentStr}}`;
     });
     return result;
   };
+  var filterScopeOf = (target) => {
+    if (target && typeof target.querySelector === "function") {
+      return target;
+    }
+    const host = target?.host;
+    return host && typeof host.querySelector === "function" ? host : null;
+  };
+  var tagNameOf = (node2) => {
+    const tag = node2?.tagName;
+    return typeof tag === "string" ? tag.toLowerCase() : null;
+  };
+  var skipIfSameTagPresent = (target, newValue) => {
+    const nodes = (Array.isArray(newValue) ? newValue : [newValue]).filter((n) => tagNameOf(n) !== null);
+    if (nodes.length === 0) return true;
+    const scope = filterScopeOf(target);
+    if (!scope) return true;
+    return !nodes.some((n) => scope.querySelector(tagNameOf(n)));
+  };
+  var skipIfExists = (selector) => (target) => {
+    const scope = filterScopeOf(target);
+    if (!scope) return true;
+    return !scope.querySelector(selector);
+  };
+  var skipIfEmpty = (_target, newValue) => {
+    if (newValue === null || newValue === void 0 || newValue === false) return false;
+    if (typeof newValue === "string") return newValue.trim().length > 0;
+    if (Array.isArray(newValue)) return newValue.length > 0;
+    return true;
+  };
+  var applyIfChanged = (target, newValue) => {
+    const textOf = (v) => {
+      if (typeof v === "string") return v;
+      if (Array.isArray(v)) return v.map(textOf).join("");
+      return typeof v?.textContent === "string" ? v.textContent : "";
+    };
+    const current = typeof target?.textContent === "string" ? target.textContent : "";
+    return current !== textOf(newValue);
+  };
 
   // src/decorators/applyClass.ts
   var CLASS_METADATA_KEY = Symbol.for("simple-web-component:class");
@@ -15869,6 +17426,9 @@ ${indentStr}}`;
       if (result === null) {
         return [];
       }
+      if (result instanceof win.Node) {
+        return [];
+      }
       return result;
     }
     return selector;
@@ -15950,7 +17510,7 @@ ${indentStr}}`;
                   if (classMap && typeof classMap === "string") {
                     classes = resolvedRes ? classMap : "";
                   } else if (typeof resolvedRes === "object" && resolvedRes !== null && !Array.isArray(resolvedRes)) {
-                    classes = Object.entries(resolvedRes).filter(([_, force]) => typeof force === "function" ? force(targetEl, hostSet) : !!force).map(([cls]) => cls).join(" ");
+                    classes = Object.entries(resolvedRes).filter(([_, force]) => typeof force === "function" ? force(targetEl, hostSet) : !!force).map(([cls2]) => cls2).join(" ");
                   } else {
                     classes = Array.isArray(resolvedRes) ? resolvedRes.join(" ") : String(resolvedRes);
                   }
@@ -15959,9 +17519,9 @@ ${indentStr}}`;
                   if (classMap && typeof classMap === "string") {
                     targetEl.classList.toggle(classMap, !!resolvedRes);
                   } else if (typeof resolvedRes === "object" && resolvedRes !== null && !Array.isArray(resolvedRes)) {
-                    Object.entries(resolvedRes).forEach(([cls, force]) => {
+                    Object.entries(resolvedRes).forEach(([cls2, force]) => {
                       const isActive = typeof force === "function" ? force(targetEl, hostSet) : !!force;
-                      targetEl.classList.toggle(cls, isActive);
+                      targetEl.classList.toggle(cls2, isActive);
                     });
                   } else {
                     const classes = Array.isArray(resolvedRes) ? resolvedRes.map(String) : [String(resolvedRes)];
@@ -15973,11 +17533,11 @@ ${indentStr}}`;
                     if (action === "add") targetEl.classList.add(classMap);
                     else targetEl.classList.remove(classMap);
                   } else if (typeof resolvedRes === "object" && resolvedRes !== null && !Array.isArray(resolvedRes)) {
-                    Object.entries(resolvedRes).forEach(([cls, force]) => {
+                    Object.entries(resolvedRes).forEach(([cls2, force]) => {
                       const shouldExecute = typeof force === "function" ? force(targetEl, hostSet) : !!force;
                       if (shouldExecute) {
-                        if (action === "add") targetEl.classList.add(cls);
-                        else targetEl.classList.remove(cls);
+                        if (action === "add") targetEl.classList.add(cls2);
+                        else targetEl.classList.remove(cls2);
                       }
                     });
                   } else {
@@ -16001,10 +17561,10 @@ ${indentStr}}`;
     };
   }
   function applyClass(selectorOrTarget, actionOrPropertyKey, optionsOrDescriptor) {
-    if (optionsOrDescriptor !== void 0 && (typeof actionOrPropertyKey === "string" || typeof actionOrPropertyKey === "symbol")) {
+    if (optionsOrDescriptor !== void 0 && typeof selectorOrTarget !== "string" && typeof selectorOrTarget !== "function" && (typeof actionOrPropertyKey === "string" || typeof actionOrPropertyKey === "symbol")) {
       return createClassDecorator("update")("$this", {})(selectorOrTarget, actionOrPropertyKey, optionsOrDescriptor);
     }
-    if (typeof selectorOrTarget === "string") {
+    if (typeof selectorOrTarget === "string" || typeof selectorOrTarget === "function") {
       const action2 = typeof actionOrPropertyKey === "string" ? actionOrPropertyKey : "update";
       const options2 = typeof actionOrPropertyKey === "object" ? actionOrPropertyKey : optionsOrDescriptor;
       return createClassDecorator(action2)(selectorOrTarget, options2);
@@ -16014,50 +17574,72 @@ ${indentStr}}`;
     return createClassDecorator(action)("$this", options);
   }
   function setClass(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor) {
-    if (optionsOrDescriptor !== void 0 && (typeof classMapOrOptionsOrPropertyKey === "string" || typeof classMapOrOptionsOrPropertyKey === "symbol")) {
+    if (optionsOrDescriptor !== void 0 && typeof selectorOrTarget !== "string" && typeof selectorOrTarget !== "function" && (typeof classMapOrOptionsOrPropertyKey === "string" || typeof classMapOrOptionsOrPropertyKey === "symbol")) {
       return createClassDecorator("set")("$this", {})(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor);
     }
-    if (typeof selectorOrTarget === "string") {
+    if (typeof selectorOrTarget === "string" || typeof selectorOrTarget === "function") {
       return createClassDecorator("set")(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor);
     }
     return createClassDecorator("set")("$this", selectorOrTarget);
   }
   function updateClass(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor) {
-    if (optionsOrDescriptor !== void 0 && (typeof classMapOrOptionsOrPropertyKey === "string" || typeof classMapOrOptionsOrPropertyKey === "symbol")) {
+    if (optionsOrDescriptor !== void 0 && typeof selectorOrTarget !== "string" && typeof selectorOrTarget !== "function" && (typeof classMapOrOptionsOrPropertyKey === "string" || typeof classMapOrOptionsOrPropertyKey === "symbol")) {
       return createClassDecorator("update")("$this", {})(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor);
     }
-    if (typeof selectorOrTarget === "string") {
+    if (typeof selectorOrTarget === "string" || typeof selectorOrTarget === "function") {
       return createClassDecorator("update")(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor);
     }
     return createClassDecorator("update")("$this", selectorOrTarget);
   }
   function addClass(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor) {
-    if (optionsOrDescriptor !== void 0 && (typeof classMapOrOptionsOrPropertyKey === "string" || typeof classMapOrOptionsOrPropertyKey === "symbol")) {
+    if (optionsOrDescriptor !== void 0 && typeof selectorOrTarget !== "string" && typeof selectorOrTarget !== "function" && (typeof classMapOrOptionsOrPropertyKey === "string" || typeof classMapOrOptionsOrPropertyKey === "symbol")) {
       return createClassDecorator("add")("$this", {})(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor);
     }
-    if (typeof selectorOrTarget === "string") {
+    if (typeof selectorOrTarget === "string" || typeof selectorOrTarget === "function") {
       return createClassDecorator("add")(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor);
     }
     return createClassDecorator("add")("$this", selectorOrTarget);
   }
   function removeClass(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor) {
-    if (optionsOrDescriptor !== void 0 && (typeof classMapOrOptionsOrPropertyKey === "string" || typeof classMapOrOptionsOrPropertyKey === "symbol")) {
+    if (optionsOrDescriptor !== void 0 && typeof selectorOrTarget !== "string" && typeof selectorOrTarget !== "function" && (typeof classMapOrOptionsOrPropertyKey === "string" || typeof classMapOrOptionsOrPropertyKey === "symbol")) {
       return createClassDecorator("remove")("$this", {})(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor);
     }
-    if (typeof selectorOrTarget === "string") {
+    if (typeof selectorOrTarget === "string" || typeof selectorOrTarget === "function") {
       return createClassDecorator("remove")(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor);
     }
     return createClassDecorator("remove")("$this", selectorOrTarget);
   }
   function toggleClass(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor) {
-    if (optionsOrDescriptor !== void 0 && (typeof classMapOrOptionsOrPropertyKey === "string" || typeof classMapOrOptionsOrPropertyKey === "symbol")) {
+    if (optionsOrDescriptor !== void 0 && typeof selectorOrTarget !== "string" && typeof selectorOrTarget !== "function" && (typeof classMapOrOptionsOrPropertyKey === "string" || typeof classMapOrOptionsOrPropertyKey === "symbol")) {
       return createClassDecorator("toggle")("$this", {})(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor);
     }
-    if (typeof selectorOrTarget === "string") {
+    if (typeof selectorOrTarget === "string" || typeof selectorOrTarget === "function") {
       return createClassDecorator("toggle")(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor);
     }
     return createClassDecorator("toggle")("$this", selectorOrTarget);
   }
+  var cls = applyClass;
+  function clsThis(action, options) {
+    return applyClass("$this", action, options);
+  }
+  function clsAppHost(action, options) {
+    return applyClass("$appHost", action, options);
+  }
+  function clsLight(selector, actionOrOptions, options) {
+    const action = typeof actionOrOptions === "string" ? actionOrOptions : void 0;
+    const opts = typeof actionOrOptions === "object" ? actionOrOptions : options;
+    return applyClass(selector, action, { ...opts ?? {}, root: "light" });
+  }
+  function clsShadow(selector, actionOrOptions, options) {
+    const action = typeof actionOrOptions === "string" ? actionOrOptions : void 0;
+    const opts = typeof actionOrOptions === "object" ? actionOrOptions : options;
+    return applyClass(selector, action, { ...opts ?? {}, root: "shadow" });
+  }
+  function clsAll(selector, actionOrOptions, options) {
+    const action = typeof actionOrOptions === "string" ? actionOrOptions : void 0;
+    const opts = typeof actionOrOptions === "object" ? actionOrOptions : options;
+    return applyClass(selector, action, { ...opts ?? {}, root: "all" });
+  }
   var findAllClassMetadata = (target) => {
     const result = /* @__PURE__ */ new Map();
     const maps = ReflectUtils.findAllMetadata(CLASS_METADATA_KEY, target);
@@ -16087,6 +17669,9 @@ ${indentStr}}`;
       if (result === null) {
         return [];
       }
+      if (result instanceof win.Node) {
+        return [];
+      }
       return result;
     }
     return selector;
@@ -16159,12 +17744,12 @@ ${indentStr}}`;
                 if (action === "set" || action === "update") {
                   if (action === "set") targetEl.style.cssText = "";
                   if (typeof resolvedRes === "object" && resolvedRes !== null && !Array.isArray(resolvedRes)) {
-                    Object.entries(resolvedRes).forEach(([prop, val]) => {
+                    Object.entries(resolvedRes).forEach(([prop2, val]) => {
                       const finalVal = typeof val === "function" ? val(targetEl, hostSet) : val;
                       if (finalVal === null || finalVal === void 0) {
-                        targetEl.style.removeProperty(prop);
+                        targetEl.style.removeProperty(prop2);
                       } else {
-                        targetEl.style[prop] = String(finalVal);
+                        targetEl.style[prop2] = String(finalVal);
                       }
                     });
                   } else if (typeof resolvedRes === "string") {
@@ -16172,10 +17757,10 @@ ${indentStr}}`;
                   }
                 } else if (action === "remove") {
                   if (typeof resolvedRes === "object" && resolvedRes !== null && !Array.isArray(resolvedRes)) {
-                    Object.entries(resolvedRes).forEach(([prop, val]) => {
+                    Object.entries(resolvedRes).forEach(([prop2, val]) => {
                       const shouldRemove = typeof val === "function" ? val(targetEl, hostSet) : !!val;
                       if (shouldRemove) {
-                        targetEl.style.removeProperty(prop);
+                        targetEl.style.removeProperty(prop2);
                       }
                     });
                   } else {
@@ -16198,10 +17783,10 @@ ${indentStr}}`;
     };
   }
   function applyStyle(selectorOrTarget, actionOrPropertyKey, optionsOrDescriptor) {
-    if (optionsOrDescriptor !== void 0 && (typeof actionOrPropertyKey === "string" || typeof actionOrPropertyKey === "symbol")) {
+    if (optionsOrDescriptor !== void 0 && typeof selectorOrTarget !== "string" && typeof selectorOrTarget !== "function" && (typeof actionOrPropertyKey === "string" || typeof actionOrPropertyKey === "symbol")) {
       return createStyleDecorator("update")("$this", {})(selectorOrTarget, actionOrPropertyKey, optionsOrDescriptor);
     }
-    if (typeof selectorOrTarget === "string") {
+    if (typeof selectorOrTarget === "string" || typeof selectorOrTarget === "function") {
       const action2 = typeof actionOrPropertyKey === "string" ? actionOrPropertyKey : "update";
       const options2 = typeof actionOrPropertyKey === "object" ? actionOrPropertyKey : optionsOrDescriptor;
       return createStyleDecorator(action2)(selectorOrTarget, options2);
@@ -16214,7 +17799,7 @@ ${indentStr}}`;
     if (descriptor !== void 0 && (typeof optionsOrPropertyKey === "string" || typeof optionsOrPropertyKey === "symbol")) {
       return createStyleDecorator("set")("$this", {})(selectorOrTarget, optionsOrPropertyKey, descriptor);
     }
-    if (typeof selectorOrTarget === "string") {
+    if (typeof selectorOrTarget === "string" || typeof selectorOrTarget === "function") {
       return createStyleDecorator("set")(selectorOrTarget, optionsOrPropertyKey);
     }
     return createStyleDecorator("set")("$this", selectorOrTarget);
@@ -16223,7 +17808,7 @@ ${indentStr}}`;
     if (descriptor !== void 0 && (typeof optionsOrPropertyKey === "string" || typeof optionsOrPropertyKey === "symbol")) {
       return createStyleDecorator("update")("$this", {})(selectorOrTarget, optionsOrPropertyKey, descriptor);
     }
-    if (typeof selectorOrTarget === "string") {
+    if (typeof selectorOrTarget === "string" || typeof selectorOrTarget === "function") {
       return createStyleDecorator("update")(selectorOrTarget, optionsOrPropertyKey);
     }
     return createStyleDecorator("update")("$this", selectorOrTarget);
@@ -16232,11 +17817,33 @@ ${indentStr}}`;
     if (descriptor !== void 0 && (typeof optionsOrPropertyKey === "string" || typeof optionsOrPropertyKey === "symbol")) {
       return createStyleDecorator("remove")("$this", {})(selectorOrTarget, optionsOrPropertyKey, descriptor);
     }
-    if (typeof selectorOrTarget === "string") {
+    if (typeof selectorOrTarget === "string" || typeof selectorOrTarget === "function") {
       return createStyleDecorator("remove")(selectorOrTarget, optionsOrPropertyKey);
     }
     return createStyleDecorator("remove")("$this", selectorOrTarget);
   }
+  var style = applyStyle;
+  function styleThis(action, options) {
+    return applyStyle("$this", action, options);
+  }
+  function styleAppHost(action, options) {
+    return applyStyle("$appHost", action, options);
+  }
+  function styleLight(selector, actionOrOptions, options) {
+    const action = typeof actionOrOptions === "string" ? actionOrOptions : void 0;
+    const opts = typeof actionOrOptions === "object" ? actionOrOptions : options;
+    return applyStyle(selector, action, { ...opts ?? {}, root: "light" });
+  }
+  function styleShadow(selector, actionOrOptions, options) {
+    const action = typeof actionOrOptions === "string" ? actionOrOptions : void 0;
+    const opts = typeof actionOrOptions === "object" ? actionOrOptions : options;
+    return applyStyle(selector, action, { ...opts ?? {}, root: "shadow" });
+  }
+  function styleAll(selector, actionOrOptions, options) {
+    const action = typeof actionOrOptions === "string" ? actionOrOptions : void 0;
+    const opts = typeof actionOrOptions === "object" ? actionOrOptions : options;
+    return applyStyle(selector, action, { ...opts ?? {}, root: "all" });
+  }
   var findAllStyleMetadata = (target) => {
     const result = /* @__PURE__ */ new Map();
     const maps = ReflectUtils.findAllMetadata(STYLE_METADATA_KEY, target);
@@ -16248,89 +17855,6 @@ ${indentStr}}`;
     return result;
   };
 
-  // src/decorators/subscribeSwcAppRouteChangeWhileConnected.ts
-  var SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY = Symbol.for("simple-web-component:subscribe-swc-app-route-change-while-connected");
-  function createSubscribeSwcAppRouteChangeWhileConnected(options) {
-    return (target, propertyKey, descriptor) => {
-      const pathPattern = options?.path;
-      const filter = options?.filter;
-      const constructor = target.constructor;
-      let list = ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY, constructor);
-      if (!list) {
-        list = [];
-        ReflectUtils.defineMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY, list, constructor);
-      }
-      list.push({ propertyKey, options });
-      return descriptor;
-    };
-  }
-  function subscribeSwcAppRouteChangeWhileConnected(targetOrOptions, propertyKeyOrConfig, descriptor) {
-    if (propertyKeyOrConfig && (typeof propertyKeyOrConfig === "string" || typeof propertyKeyOrConfig === "symbol")) {
-      return createSubscribeSwcAppRouteChangeWhileConnected({})(targetOrOptions, propertyKeyOrConfig, descriptor);
-    }
-    let options = {};
-    if (Array.isArray(targetOrOptions)) {
-      options.path = targetOrOptions;
-      if (propertyKeyOrConfig && typeof propertyKeyOrConfig === "object") {
-        options = { ...options, ...propertyKeyOrConfig };
-      }
-    } else if (typeof targetOrOptions === "string" || typeof targetOrOptions === "function") {
-      options.path = targetOrOptions;
-      if (propertyKeyOrConfig && typeof propertyKeyOrConfig === "object") {
-        options = { ...options, ...propertyKeyOrConfig };
-      }
-    } else if (targetOrOptions && typeof targetOrOptions === "object") {
-      options = targetOrOptions;
-    }
-    return createSubscribeSwcAppRouteChangeWhileConnected(options);
-  }
-  var changedRoute = subscribeSwcAppRouteChangeWhileConnected;
-  var getSubscribeSwcAppRouteChangeWhileConnectedMetadata = (target) => {
-    const constructor = target instanceof Function ? target : target.constructor;
-    const results = ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY, constructor);
-    if (!results) return [];
-    return [...results].sort((a, b) => (a.options?.order ?? 0) - (b.options?.order ?? 0));
-  };
-
-  // src/decorators/subscribeSwcAppMessageWhileConnected.ts
-  var SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY = Symbol.for("simple-web-component:subscribe-swc-app-message-while-connected");
-  function createSubscribeSwcAppMessageWhileConnected(options, messageType) {
-    return (target, propertyKey, descriptor) => {
-      const filter = options?.filter;
-      const constructor = target.constructor;
-      let list = ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY, constructor);
-      if (!list) {
-        list = [];
-        ReflectUtils.defineMetadata(SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY, list, constructor);
-      }
-      list.push({ propertyKey, messageType, filter });
-      return descriptor;
-    };
-  }
-  function subscribeSwcAppMessageWhileConnected(targetOrMessageTypeOrOptions, optionsOrPropertyKey, descriptor) {
-    if (targetOrMessageTypeOrOptions && typeof targetOrMessageTypeOrOptions === "object" && optionsOrPropertyKey && (typeof optionsOrPropertyKey === "string" || typeof optionsOrPropertyKey === "symbol") && descriptor) {
-      const target = targetOrMessageTypeOrOptions;
-      const propertyKey = optionsOrPropertyKey;
-      return createSubscribeSwcAppMessageWhileConnected({})(target, propertyKey, descriptor);
-    }
-    let messageType;
-    let options = {};
-    if (typeof targetOrMessageTypeOrOptions === "string") {
-      messageType = targetOrMessageTypeOrOptions;
-      if (optionsOrPropertyKey && typeof optionsOrPropertyKey === "object") {
-        options = optionsOrPropertyKey;
-      }
-    } else if (targetOrMessageTypeOrOptions && typeof targetOrMessageTypeOrOptions === "object") {
-      options = targetOrMessageTypeOrOptions;
-    }
-    return createSubscribeSwcAppMessageWhileConnected(options, messageType);
-  }
-  var receiveMessage = subscribeSwcAppMessageWhileConnected;
-  var getSubscribeSwcAppMessageWhileConnectedMetadata = (target) => {
-    const constructor = target instanceof Function ? target : target.constructor;
-    return ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY, constructor);
-  };
-
   // src/decorators/publishSwcAppMessage.ts
   var PUBLISH_SWC_APP_MESSAGE_METADATA_KEY = Symbol.for("simple-web-component:publish-swc-app-message");
   function createPublishSwcAppMessage(messageType, options) {
@@ -16955,9 +18479,9 @@ ${indentStr}}`;
         return target[name];
       }
     }
-    set(obj, prop, value, receiver) {
+    set(obj, prop2, value, receiver) {
       value = this.simstanceManager?.proxy(value);
-      obj[prop] = value;
+      obj[prop2] = value;
       return true;
     }
     apply(target, thisArg, argumentsList) {