@wsxjs/wsx-core 0.0.7 → 0.0.9

package/dist/index.js

@@ -22,22 +22,17 @@ var index_exports = {};
 __export(index_exports, {
   Fragment: () => Fragment,
   LightComponent: () => LightComponent,
-  ReactiveDebug: () => ReactiveDebug,
-  ReactiveWebComponent: () => ReactiveWebComponent,
   StyleManager: () => StyleManager,
   WSXLogger: () => WSXLogger,
   WebComponent: () => WebComponent,
   autoRegister: () => autoRegister,
   createLogger: () => createLogger,
-  createReactiveComponent: () => createReactiveComponent,
-  createState: () => createState,
   h: () => h,
   jsx: () => h,
   jsxs: () => h,
   logger: () => logger,
-  makeReactive: () => makeReactive,
-  reactive: () => reactive,
-  registerComponent: () => registerComponent
+  registerComponent: () => registerComponent,
+  state: () => state
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -182,6 +177,13 @@ function h(tag, props = {}, ...children) {
         if (value) {
           element.setAttribute(key, "");
         }
+      } else if (key === "value") {
+        if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
+          element.value = String(value);
+        } else {
+          const attributeName = isSVG ? getSVGAttributeName(key) : key;
+          element.setAttribute(attributeName, String(value));
+        }
       } else {
         const attributeName = isSVG ? getSVGAttributeName(key) : key;
         element.setAttribute(attributeName, String(value));
@@ -274,172 +276,6 @@ var StyleManager = class {
 };
 StyleManager.styleSheets = /* @__PURE__ */ new Map();
 
-// src/web-component.ts
-var WebComponent = class extends HTMLElement {
-  constructor(config = {}) {
-    super();
-    this.connected = false;
-    this.config = config;
-    this.attachShadow({ mode: "open" });
-    if (config.styles) {
-      const styleName = config.styleName || this.constructor.name;
-      StyleManager.applyStyles(this.shadowRoot, styleName, config.styles);
-    }
-  }
-  /**
-   * 子类应该重写这个方法来定义观察的属性
-   * @returns 要观察的属性名数组
-   */
-  static get observedAttributes() {
-    return [];
-  }
-  /**
-   * Web Component生命周期：连接到DOM
-   */
-  connectedCallback() {
-    this.connected = true;
-    try {
-      const content = this.render();
-      this.shadowRoot.appendChild(content);
-      this.onConnected?.();
-    } catch (error) {
-      console.error(`[${this.constructor.name}] Error in connectedCallback:`, error);
-      this.renderError(error);
-    }
-  }
-  /**
-   * Web Component生命周期：从DOM断开
-   */
-  disconnectedCallback() {
-    this.onDisconnected?.();
-  }
-  /**
-   * Web Component生命周期：属性变化
-   */
-  attributeChangedCallback(name, oldValue, newValue) {
-    this.onAttributeChanged?.(name, oldValue, newValue);
-  }
-  /**
-   * 查找Shadow DOM内的元素
-   *
-   * @param selector - CSS选择器
-   * @returns 元素或null
-   */
-  querySelector(selector) {
-    return this.shadowRoot.querySelector(selector);
-  }
-  /**
-   * 查找Shadow DOM内的所有匹配元素
-   *
-   * @param selector - CSS选择器
-   * @returns 元素列表
-   */
-  querySelectorAll(selector) {
-    return this.shadowRoot.querySelectorAll(selector);
-  }
-  /**
-   * 重新渲染组件
-   */
-  rerender() {
-    if (!this.connected) {
-      console.warn(
-        `[${this.constructor.name}] Component is not connected, skipping rerender.`
-      );
-      return;
-    }
-    const adoptedStyleSheets = this.shadowRoot.adoptedStyleSheets || [];
-    this.shadowRoot.innerHTML = "";
-    if (this.shadowRoot.adoptedStyleSheets) {
-      this.shadowRoot.adoptedStyleSheets = adoptedStyleSheets;
-    }
-    if (adoptedStyleSheets.length === 0 && this.config.styles) {
-      const styleName = this.config.styleName || this.constructor.name;
-      StyleManager.applyStyles(this.shadowRoot, styleName, this.config.styles);
-    }
-    try {
-      const content = this.render();
-      this.shadowRoot.appendChild(content);
-    } catch (error) {
-      console.error(`[${this.constructor.name}] Error in rerender:`, error);
-      this.renderError(error);
-    }
-  }
-  /**
-   * 渲染错误信息
-   *
-   * @param error - 错误对象
-   */
-  renderError(error) {
-    this.shadowRoot.innerHTML = "";
-    const errorElement = h(
-      "div",
-      {
-        style: "color: red; padding: 10px; border: 1px solid red; background: #ffe6e6; font-family: monospace;"
-      },
-      [
-        h("strong", {}, `[${this.constructor.name}] Component Error:`),
-        h("pre", { style: "margin: 10px 0; white-space: pre-wrap;" }, String(error))
-      ]
-    );
-    this.shadowRoot.appendChild(errorElement);
-  }
-  /**
-   * 获取配置值
-   *
-   * @param key - 配置键
-   * @param defaultValue - 默认值
-   * @returns 配置值
-   */
-  getConfig(key, defaultValue) {
-    return this.config[key] ?? defaultValue;
-  }
-  /**
-   * 设置配置值
-   *
-   * @param key - 配置键
-   * @param value - 配置值
-   */
-  setConfig(key, value) {
-    this.config[key] = value;
-  }
-  /**
-   * 获取属性值
-   *
-   * @param name - 属性名
-   * @param defaultValue - 默认值
-   * @returns 属性值
-   */
-  getAttr(name, defaultValue = "") {
-    return this.getAttribute(name) || defaultValue;
-  }
-  /**
-   * 设置属性值
-   *
-   * @param name - 属性名
-   * @param value - 属性值
-   */
-  setAttr(name, value) {
-    this.setAttribute(name, value);
-  }
-  /**
-   * 移除属性
-   *
-   * @param name - 属性名
-   */
-  removeAttr(name) {
-    this.removeAttribute(name);
-  }
-  /**
-   * 检查是否有属性
-   *
-   * @param name - 属性名
-   * @returns 是否存在
-   */
-  hasAttr(name) {
-    return this.hasAttribute(name);
-  }
-};
-
 // src/utils/logger.ts
 var WSXLogger = class {
   constructor(prefix = "[WSX]", enabled = true, level = "info") {
@@ -510,35 +346,107 @@ var UpdateScheduler = class {
       try {
         callback();
       } catch (error) {
-        console.error("[WSX Reactive] Error in callback:", error);
+        logger2.error("[WSX Reactive] Error in callback:", error);
       }
     });
   }
 };
 var scheduler = new UpdateScheduler();
+var proxyCache = /* @__PURE__ */ new WeakMap();
+var originalCache = /* @__PURE__ */ new WeakMap();
+var unwrappingSet = /* @__PURE__ */ new WeakSet();
+function unwrapProxy(value) {
+  if (value == null || typeof value !== "object") {
+    return value;
+  }
+  let original = value;
+  if (originalCache.has(value)) {
+    original = originalCache.get(value);
+  }
+  if (unwrappingSet.has(original)) {
+    return null;
+  }
+  unwrappingSet.add(original);
+  try {
+    if (Array.isArray(original)) {
+      return original.map((item) => unwrapProxy(item));
+    }
+    const result = {};
+    for (const key in original) {
+      if (Object.prototype.hasOwnProperty.call(original, key)) {
+        const propValue = original[key];
+        if (propValue != null && typeof propValue === "object" && originalCache.has(propValue)) {
+          result[key] = unwrapProxy(originalCache.get(propValue));
+        } else {
+          result[key] = unwrapProxy(propValue);
+        }
+      }
+    }
+    return result;
+  } finally {
+    unwrappingSet.delete(original);
+  }
+}
+var ARRAY_MUTATION_METHODS = [
+  "push",
+  "pop",
+  "shift",
+  "unshift",
+  "splice",
+  "sort",
+  "reverse"
+];
 function reactive(obj, onChange) {
-  return new Proxy(obj, {
+  if (proxyCache.has(obj)) {
+    return proxyCache.get(obj);
+  }
+  const isArray = Array.isArray(obj);
+  const proxy = new Proxy(obj, {
     set(target, key, value) {
       const oldValue = target[key];
-      if (oldValue !== value) {
-        target[key] = value;
+      const oldOriginal = originalCache.get(oldValue) || oldValue;
+      const newOriginal = value != null && typeof value === "object" ? originalCache.get(value) || value : value;
+      if (oldOriginal !== newOriginal) {
+        if (value != null && typeof value === "object") {
+          const reactiveValue = reactive(value, onChange);
+          target[key] = reactiveValue;
+        } else {
+          target[key] = value;
+        }
         scheduler.schedule(onChange);
       }
       return true;
     },
     get(target, key) {
-      return target[key];
+      if (key === "toJSON") {
+        return function() {
+          return unwrapProxy(obj);
+        };
+      }
+      const value = target[key];
+      if (isArray && typeof key === "string" && ARRAY_MUTATION_METHODS.includes(key)) {
+        return function(...args) {
+          const arrayMethod = Array.prototype[key];
+          const result = arrayMethod.apply(target, args);
+          scheduler.schedule(onChange);
+          return result;
+        };
+      }
+      if (value != null && typeof value === "object") {
+        if (proxyCache.has(value)) {
+          return proxyCache.get(value);
+        }
+        return reactive(value, onChange);
+      }
+      return value;
     },
     has(target, key) {
       return key in target;
-    },
-    ownKeys(target) {
-      return Reflect.ownKeys(target);
-    },
-    getOwnPropertyDescriptor(target, key) {
-      return Reflect.getOwnPropertyDescriptor(target, key);
     }
   });
+  proxyCache.set(obj, proxy);
+  originalCache.set(proxy, obj);
+  return proxy;
 }
 function createState(initialValue, onChange) {
   let currentValue = initialValue;
@@ -586,6 +494,7 @@ var ReactiveDebug = {
 };
 function reactiveWithDebug(obj, onChange, debugName) {
   const name = debugName || obj.constructor.name || "Unknown";
+  const isArray = Array.isArray(obj);
   return new Proxy(obj, {
     set(target, key, value) {
       const oldValue = target[key];
@@ -601,21 +510,89 @@ function reactiveWithDebug(obj, onChange, debugName) {
       return true;
     },
     get(target, key) {
-      return target[key];
+      if (key === "toJSON") {
+        return function() {
+          return unwrapProxy(obj);
+        };
+      }
+      const value = target[key];
+      if (isArray && typeof key === "string" && ARRAY_MUTATION_METHODS.includes(key)) {
+        return function(...args) {
+          ReactiveDebug.log(`Array mutation in ${name}:`, {
+            method: key,
+            args
+          });
+          const arrayMethod = Array.prototype[key];
+          const result = arrayMethod.apply(target, args);
+          scheduler.schedule(onChange);
+          return result;
+        };
+      }
+      if (value != null && typeof value === "object") {
+        return reactiveWithDebug(value, onChange, `${name}.${String(key)}`);
+      }
+      return value;
     }
   });
 }
 
-// src/light-component.ts
-var logger3 = createLogger("LightComponent");
-var LightComponent = class extends HTMLElement {
+// src/base-component.ts
+var BaseComponent = class extends HTMLElement {
   constructor(config = {}) {
     super();
     this.connected = false;
     this._isDebugEnabled = false;
     this._reactiveStates = /* @__PURE__ */ new Map();
-    this.config = config;
+    /**
+     * 当前捕获的焦点状态（用于在 render 时使用捕获的值）
+     * @internal - 由 rerender() 方法管理
+     */
+    this._pendingFocusState = null;
+    /**
+     * 防抖定时器，用于延迟重渲染（当用户正在输入时）
+     * @internal
+     */
+    this._rerenderDebounceTimer = null;
+    /**
+     * 待处理的重渲染标志（当用户正在输入时，标记需要重渲染但延迟执行）
+     * @internal
+     */
+    this._pendingRerender = false;
+    /**
+     * 处理 blur 事件，在用户停止输入时执行待处理的重渲染
+     * @internal
+     */
+    this.handleGlobalBlur = (event) => {
+      const root = this.getActiveRoot();
+      const target = event.target;
+      if (target && root.contains(target)) {
+        if (this._pendingRerender && this.connected) {
+          if (this._rerenderDebounceTimer !== null) {
+            clearTimeout(this._rerenderDebounceTimer);
+            this._rerenderDebounceTimer = null;
+          }
+          requestAnimationFrame(() => {
+            if (this._pendingRerender && this.connected) {
+              this._pendingRerender = false;
+              this.rerender();
+            }
+          });
+        }
+      }
+    };
     this._isDebugEnabled = config.debug ?? false;
+    const host = this;
+    const originalStyles = config.styles;
+    this.config = {
+      ...config,
+      get styles() {
+        const result = originalStyles || host._autoStyles || "";
+        return result;
+      },
+      set styles(value) {
+        config.styles = value;
+      }
+    };
   }
   /**
    * 子类应该重写这个方法来定义观察的属性
@@ -624,56 +601,12 @@ var LightComponent = class extends HTMLElement {
   static get observedAttributes() {
     return [];
   }
-  /**
-   * Web Component生命周期：连接到DOM
-   */
-  connectedCallback() {
-    this.connected = true;
-    try {
-      if (this.config.styles) {
-        const styleName = this.config.styleName || this.constructor.name;
-        this.applyScopedStyles(styleName, this.config.styles);
-      }
-      const content = this.render();
-      this.appendChild(content);
-      this.onConnected?.();
-    } catch (error) {
-      logger3.error(`[${this.constructor.name}] Error in connectedCallback:`, error);
-      this.renderError(error);
-    }
-  }
-  /**
-   * Web Component生命周期：从DOM断开
-   */
-  disconnectedCallback() {
-    this.cleanupReactiveStates();
-    this.cleanupStyles();
-    this.onDisconnected?.();
-  }
   /**
    * Web Component生命周期：属性变化
    */
   attributeChangedCallback(name, oldValue, newValue) {
     this.onAttributeChanged?.(name, oldValue, newValue);
   }
-  /**
-   * 查找组件内的元素
-   *
-   * @param selector - CSS选择器
-   * @returns 元素或null
-   */
-  querySelector(selector) {
-    return HTMLElement.prototype.querySelector.call(this, selector);
-  }
-  /**
-   * 查找组件内的所有匹配元素
-   *
-   * @param selector - CSS选择器
-   * @returns 元素列表
-   */
-  querySelectorAll(selector) {
-    return HTMLElement.prototype.querySelectorAll.call(this, selector);
-  }
   /**
    * 创建响应式对象
    *
@@ -696,86 +629,73 @@ var LightComponent = class extends HTMLElement {
   useState(key, initialValue) {
     if (!this._reactiveStates.has(key)) {
       const [getter, setter] = createState(initialValue, () => this.scheduleRerender());
-      this._reactiveStates.set(key, { getter, setter });
+      this._reactiveStates.set(key, {
+        getter,
+        setter
+      });
+    }
+    const state2 = this._reactiveStates.get(key);
+    if (!state2) {
+      throw new Error(`State ${key} not found`);
     }
-    const state = this._reactiveStates.get(key);
-    return [state.getter, state.setter];
+    return [state2.getter, state2.setter];
   }
   /**
    * 调度重渲染
    * 这个方法被响应式系统调用，开发者通常不需要直接调用
+   * 使用 queueMicrotask 进行异步调度，与 reactive() 系统保持一致
    */
   scheduleRerender() {
-    if (this.connected) {
-      this.rerender();
-    }
-  }
-  /**
-   * 重新渲染组件
-   */
-  rerender() {
     if (!this.connected) {
-      logger3.warn(
-        `[${this.constructor.name}] Component is not connected, skipping rerender.`
-      );
+      if (this._rerenderDebounceTimer !== null) {
+        clearTimeout(this._rerenderDebounceTimer);
+        this._rerenderDebounceTimer = null;
+      }
       return;
     }
-    this.innerHTML = "";
-    if (this.config.styles) {
-      const styleName = this.config.styleName || this.constructor.name;
-      const styleElement = document.createElement("style");
-      styleElement.setAttribute("data-wsx-light-component", styleName);
-      styleElement.textContent = this.config.styles;
-      this.appendChild(styleElement);
+    const root = this.getActiveRoot();
+    let hasActiveElement = false;
+    if (root instanceof ShadowRoot) {
+      hasActiveElement = root.activeElement !== null;
+    } else {
+      const docActiveElement = document.activeElement;
+      hasActiveElement = docActiveElement !== null && root.contains(docActiveElement);
     }
-    try {
-      const content = this.render();
-      this.appendChild(content);
-      if (this.config.styles && this.children.length > 1) {
-        const styleElement = this.querySelector(
-          `style[data-wsx-light-component="${this.config.styleName || this.constructor.name}"]`
-        );
-        if (styleElement && styleElement !== this.firstChild) {
-          this.insertBefore(styleElement, this.firstChild);
-        }
+    if (hasActiveElement) {
+      this._pendingRerender = true;
+      if (this._rerenderDebounceTimer !== null) {
+        clearTimeout(this._rerenderDebounceTimer);
+        this._rerenderDebounceTimer = null;
       }
-    } catch (error) {
-      logger3.error(`[${this.constructor.name}] Error in rerender:`, error);
-      this.renderError(error);
+      return;
     }
+    if (this._pendingRerender) {
+      this._pendingRerender = false;
+    }
+    queueMicrotask(() => {
+      if (this.connected) {
+        this.rerender();
+      }
+    });
   }
   /**
-   * 渲染错误信息
-   *
-   * @param error - 错误对象
+   * 清理资源（在组件断开连接时调用）
+   * @internal
    */
-  renderError(error) {
-    this.innerHTML = "";
-    const errorElement = h(
-      "div",
-      {
-        style: "color: red; padding: 10px; border: 1px solid red; background: #ffe6e6; font-family: monospace;"
-      },
-      [
-        h("strong", {}, `[${this.constructor.name}] Component Error:`),
-        h("pre", { style: "margin: 10px 0; white-space: pre-wrap;" }, String(error))
-      ]
-    );
-    this.appendChild(errorElement);
+  cleanup() {
+    if (this._rerenderDebounceTimer !== null) {
+      clearTimeout(this._rerenderDebounceTimer);
+      this._rerenderDebounceTimer = null;
+    }
+    document.removeEventListener("blur", this.handleGlobalBlur, true);
+    this._pendingRerender = false;
   }
   /**
-   * 为Light DOM组件应用样式
-   * 直接将样式注入到组件自身，避免全局污染
+   * 初始化事件监听器（在组件连接时调用）
+   * @internal
    */
-  applyScopedStyles(styleName, cssText) {
-    const existingStyle = this.querySelector(`style[data-wsx-light-component="${styleName}"]`);
-    if (existingStyle) {
-      return;
-    }
-    const styleElement = document.createElement("style");
-    styleElement.setAttribute("data-wsx-light-component", styleName);
-    styleElement.textContent = cssText;
-    this.insertBefore(styleElement, this.firstChild);
+  initializeEventListeners() {
+    document.addEventListener("blur", this.handleGlobalBlur, true);
   }
   /**
    * 获取配置值
@@ -796,22 +716,6 @@ var LightComponent = class extends HTMLElement {
   setConfig(key, value) {
     this.config[key] = value;
   }
-  /**
-   * 清理响应式状态
-   */
-  cleanupReactiveStates() {
-    this._reactiveStates.clear();
-  }
-  /**
-   * 清理组件样式
-   */
-  cleanupStyles() {
-    const styleName = this.config.styleName || this.constructor.name;
-    const existingStyle = this.querySelector(`style[data-wsx-light-component="${styleName}"]`);
-    if (existingStyle) {
-      existingStyle.remove();
-    }
-  }
   /**
    * 获取属性值
    *
@@ -848,254 +752,528 @@ var LightComponent = class extends HTMLElement {
   hasAttr(name) {
     return this.hasAttribute(name);
   }
-};
-
-// src/auto-register.ts
-function autoRegister(options = {}) {
-  return function(constructor) {
-    const tagName = options.tagName || deriveTagName(constructor.name, options.prefix);
-    if (!customElements.get(tagName)) {
-      customElements.define(tagName, constructor);
-    }
-    return constructor;
-  };
-}
-function registerComponent(constructor, options = {}) {
-  const tagName = options.tagName || deriveTagName(constructor.name, options.prefix);
-  if (!customElements.get(tagName)) {
-    customElements.define(tagName, constructor);
-  }
-}
-function deriveTagName(className, prefix) {
-  let kebabCase = className.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-  if (!kebabCase.includes("-")) {
-    kebabCase = `${kebabCase}-component`;
-  }
-  return prefix ? `${prefix}${kebabCase}` : kebabCase;
-}
-
-// src/reactive-component.ts
-var ReactiveWebComponent = class extends WebComponent {
-  constructor(config = {}) {
-    super(config);
-    this._isDebugEnabled = false;
-    this._preserveFocus = true;
-    this._reactiveStates = /* @__PURE__ */ new Map();
-    this._isDebugEnabled = config.debug ?? false;
-    this._preserveFocus = config.preserveFocus ?? true;
-  }
-  /**
-   * 创建响应式对象
-   *
-   * @param obj 要变为响应式的对象
-   * @param debugName 调试名称（可选）
-   * @returns 响应式代理对象
-   */
-  reactive(obj, debugName) {
-    const reactiveFn = this._isDebugEnabled ? reactiveWithDebug : reactive;
-    const name = debugName || `${this.constructor.name}.reactive`;
-    return this._isDebugEnabled ? reactiveFn(obj, () => this.scheduleRerender(), name) : reactiveFn(obj, () => this.scheduleRerender());
-  }
   /**
-   * 创建响应式状态
-   *
-   * @param key 状态标识符
-   * @param initialValue 初始值
-   * @returns [getter, setter] 元组
+   * 清理响应式状态
    */
-  useState(key, initialValue) {
-    if (!this._reactiveStates.has(key)) {
-      const [getter, setter] = createState(initialValue, () => this.scheduleRerender());
-      this._reactiveStates.set(key, { getter, setter });
-    }
-    const state = this._reactiveStates.get(key);
-    return [state.getter, state.setter];
+  cleanupReactiveStates() {
+    this._reactiveStates.clear();
   }
   /**
-   * 调度重渲染
-   * 这个方法被响应式系统调用，开发者通常不需要直接调用
+   * 获取当前活动的 DOM 根（Shadow DOM 或 Light DOM）
+   * @returns 活动的 DOM 根元素
    */
-  scheduleRerender() {
-    if (this.connected) {
-      this.rerender();
+  getActiveRoot() {
+    if ("shadowRoot" in this && this.shadowRoot) {
+      return this.shadowRoot;
     }
+    return this;
   }
   /**
-   * 重写 rerender 方法以支持焦点保持
+   * 捕获当前焦点状态（在重渲染之前调用）
+   * @returns 焦点状态，如果没有焦点元素则返回 null
    */
-  rerender() {
-    if (!this.connected) {
-      return;
-    }
-    let focusData = null;
-    if (this._preserveFocus) {
-      const activeElement = this.shadowRoot.activeElement;
-      focusData = this.saveFocusState(activeElement);
+  captureFocusState() {
+    const root = this.getActiveRoot();
+    let activeElement = null;
+    if (root instanceof ShadowRoot) {
+      activeElement = root.activeElement;
+    } else {
+      const docActiveElement = document.activeElement;
+      if (docActiveElement && root.contains(docActiveElement)) {
+        activeElement = docActiveElement;
+      }
     }
-    super.rerender();
-    if (this._preserveFocus && focusData) {
-      this.restoreFocusState(focusData);
+    if (!activeElement || !(activeElement instanceof HTMLElement)) {
+      return null;
     }
-  }
-  /**
-   * 保存焦点状态
-   */
-  saveFocusState(activeElement) {
-    if (!activeElement) {
+    const key = activeElement.getAttribute("data-wsx-key");
+    if (!key) {
       return null;
     }
-    const focusData = {
-      tagName: activeElement.tagName.toLowerCase(),
-      className: activeElement.className
+    const tagName = activeElement.tagName.toLowerCase();
+    const state2 = {
+      key,
+      elementType: tagName
     };
-    if (activeElement.hasAttribute("contenteditable")) {
+    if (activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement) {
+      state2.value = activeElement.value;
+      state2.selectionStart = activeElement.selectionStart ?? void 0;
+      state2.selectionEnd = activeElement.selectionEnd ?? void 0;
+      if (activeElement instanceof HTMLTextAreaElement) {
+        state2.scrollTop = activeElement.scrollTop;
+      }
+    } else if (activeElement instanceof HTMLSelectElement) {
+      state2.elementType = "select";
+      state2.selectedIndex = activeElement.selectedIndex;
+    } else if (activeElement.hasAttribute("contenteditable")) {
+      state2.elementType = "contenteditable";
       const selection = window.getSelection();
       if (selection && selection.rangeCount > 0) {
         const range = selection.getRangeAt(0);
-        focusData.selectionStart = range.startOffset;
-        focusData.selectionEnd = range.endOffset;
-      }
-    }
-    if (activeElement instanceof HTMLInputElement || activeElement instanceof HTMLSelectElement) {
-      focusData.value = activeElement.value;
-      if ("selectionStart" in activeElement) {
-        focusData.selectionStart = activeElement.selectionStart;
-        focusData.selectionEnd = activeElement.selectionEnd;
+        state2.selectionStart = range.startOffset;
+        state2.selectionEnd = range.endOffset;
       }
     }
-    return focusData;
+    return state2;
   }
   /**
-   * 恢复焦点状态
+   * 恢复焦点状态（在重渲染之后调用）
+   * @param state - 之前捕获的焦点状态
    */
-  restoreFocusState(focusData) {
-    if (!focusData) return;
-    try {
-      let targetElement = null;
-      if (focusData.className) {
-        targetElement = this.shadowRoot.querySelector(
-          `.${focusData.className.split(" ")[0]}`
-        );
+  restoreFocusState(state2) {
+    if (!state2 || !state2.key) {
+      return;
+    }
+    const root = this.getActiveRoot();
+    const target = root.querySelector(`[data-wsx-key="${state2.key}"]`);
+    if (!target) {
+      return;
+    }
+    if (state2.value !== void 0) {
+      if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
+        target.value = state2.value;
       }
-      if (!targetElement) {
-        targetElement = this.shadowRoot.querySelector(focusData.tagName);
+    }
+    if (state2.selectedIndex !== void 0 && target instanceof HTMLSelectElement) {
+      target.selectedIndex = state2.selectedIndex;
+    }
+    requestAnimationFrame(() => {
+      const currentTarget = root.querySelector(
+        `[data-wsx-key="${state2.key}"]`
+      );
+      if (!currentTarget) {
+        return;
       }
-      if (targetElement) {
-        targetElement.focus({ preventScroll: true });
-        if (focusData.selectionStart !== void 0) {
-          if (targetElement instanceof HTMLInputElement) {
-            targetElement.setSelectionRange(
-              focusData.selectionStart,
-              focusData.selectionEnd
-            );
-          } else if (targetElement instanceof HTMLSelectElement) {
-            targetElement.value = focusData.value;
-          } else if (targetElement.hasAttribute("contenteditable")) {
-            this.setCursorPosition(targetElement, focusData.selectionStart);
+      if (state2.value !== void 0) {
+        if (currentTarget instanceof HTMLInputElement || currentTarget instanceof HTMLTextAreaElement) {
+          if (currentTarget.value !== state2.value) {
+            currentTarget.value = state2.value;
           }
         }
       }
-    } catch {
+      currentTarget.focus({ preventScroll: true });
+      if (state2.selectionStart !== void 0) {
+        if (currentTarget instanceof HTMLInputElement || currentTarget instanceof HTMLTextAreaElement) {
+          const start = state2.selectionStart;
+          const end = state2.selectionEnd ?? start;
+          currentTarget.setSelectionRange(start, end);
+          if (state2.scrollTop !== void 0 && currentTarget instanceof HTMLTextAreaElement) {
+            currentTarget.scrollTop = state2.scrollTop;
+          }
+        } else if (currentTarget.hasAttribute("contenteditable")) {
+          const selection = window.getSelection();
+          if (selection) {
+            const range = document.createRange();
+            const textNode = currentTarget.childNodes[0];
+            if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+              const maxPos = Math.min(
+                state2.selectionStart,
+                textNode.textContent?.length || 0
+              );
+              range.setStart(textNode, maxPos);
+              range.setEnd(textNode, state2.selectionEnd ?? maxPos);
+              selection.removeAllRanges();
+              selection.addRange(range);
+            }
+          }
+        }
+      }
+    });
+  }
+};
+
+// src/web-component.ts
+var logger3 = createLogger("WebComponent");
+var WebComponent = class extends BaseComponent {
+  // Initialized by BaseComponent constructor
+  constructor(config = {}) {
+    super(config);
+    this.attachShadow({ mode: "open" });
+  }
+  /**
+   * Web Component生命周期：连接到DOM
+   */
+  connectedCallback() {
+    this.connected = true;
+    try {
+      const stylesToApply = this._autoStyles || this.config.styles;
+      if (stylesToApply) {
+        const styleName = this.config.styleName || this.constructor.name;
+        StyleManager.applyStyles(this.shadowRoot, styleName, stylesToApply);
+      }
+      const content = this.render();
+      this.shadowRoot.appendChild(content);
+      this.initializeEventListeners();
+      this.onConnected?.();
+    } catch (error) {
+      logger3.error(`Error in connectedCallback:`, error);
+      this.renderError(error);
     }
   }
   /**
-   * 设置光标位置
+   * Web Component生命周期：从DOM断开
    */
-  setCursorPosition(element, position) {
+  disconnectedCallback() {
+    this.connected = false;
+    this.cleanup();
+    this.onDisconnected?.();
+  }
+  /**
+   * 查找Shadow DOM内的元素
+   *
+   * @param selector - CSS选择器
+   * @returns 元素或null
+   */
+  querySelector(selector) {
+    return this.shadowRoot.querySelector(selector);
+  }
+  /**
+   * 查找Shadow DOM内的所有匹配元素
+   *
+   * @param selector - CSS选择器
+   * @returns 元素列表
+   */
+  querySelectorAll(selector) {
+    return this.shadowRoot.querySelectorAll(selector);
+  }
+  /**
+   * 重新渲染组件
+   */
+  rerender() {
+    if (!this.connected) {
+      logger3.warn("Component is not connected, skipping rerender.");
+      return;
+    }
+    const focusState = this.captureFocusState();
+    this._pendingFocusState = focusState;
+    const adoptedStyleSheets = this.shadowRoot.adoptedStyleSheets || [];
     try {
-      const selection = window.getSelection();
-      if (selection) {
-        const range = document.createRange();
-        const textNode = element.childNodes[0];
-        if (textNode) {
-          const maxPos = Math.min(position, textNode.textContent?.length || 0);
-          range.setStart(textNode, maxPos);
-          range.setEnd(textNode, maxPos);
-          selection.removeAllRanges();
-          selection.addRange(range);
+      if (adoptedStyleSheets.length === 0) {
+        const stylesToApply = this._autoStyles || this.config.styles;
+        if (stylesToApply) {
+          const styleName = this.config.styleName || this.constructor.name;
+          StyleManager.applyStyles(this.shadowRoot, styleName, stylesToApply);
         }
       }
-    } catch {
+      const content = this.render();
+      if (focusState && focusState.key && focusState.value !== void 0) {
+        const target = content.querySelector(
+          `[data-wsx-key="${focusState.key}"]`
+        );
+        if (target) {
+          if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
+            target.value = focusState.value;
+          }
+        }
+      }
+      if (this.shadowRoot.adoptedStyleSheets) {
+        this.shadowRoot.adoptedStyleSheets = adoptedStyleSheets;
+      }
+      requestAnimationFrame(() => {
+        this.shadowRoot.appendChild(content);
+        const oldChildren = Array.from(this.shadowRoot.children).filter(
+          (child) => child !== content
+        );
+        oldChildren.forEach((child) => child.remove());
+        requestAnimationFrame(() => {
+          this.restoreFocusState(focusState);
+          this._pendingFocusState = null;
+        });
+      });
+    } catch (error) {
+      logger3.error("Error in rerender:", error);
+      this.renderError(error);
     }
   }
   /**
-   * 获取所有响应式状态的快照（用于调试）
+   * 渲染错误信息
+   *
+   * @param error - 错误对象
    */
-  getStateSnapshot() {
-    const snapshot = {};
-    this._reactiveStates.forEach((state, key) => {
-      snapshot[key] = state.getter();
-    });
-    return snapshot;
+  renderError(error) {
+    this.shadowRoot.innerHTML = "";
+    const errorElement = h(
+      "div",
+      {
+        style: "color: red; padding: 10px; border: 1px solid red; background: #ffe6e6; font-family: monospace;"
+      },
+      [
+        h("strong", {}, `[${this.constructor.name}] Component Error:`),
+        h("pre", { style: "margin: 10px 0; white-space: pre-wrap;" }, String(error))
+      ]
+    );
+    this.shadowRoot.appendChild(errorElement);
+  }
+};
+
+// src/light-component.ts
+var logger4 = createLogger("LightComponent");
+var LightComponent = class extends BaseComponent {
+  // Initialized by BaseComponent constructor
+  constructor(config = {}) {
+    super(config);
   }
   /**
-   * 清理响应式状态（组件销毁时）
+   * Web Component生命周期：连接到DOM
    */
-  cleanupReactiveStates() {
-    this._reactiveStates.clear();
+  connectedCallback() {
+    this.connected = true;
+    try {
+      const stylesToApply = this._autoStyles || this.config.styles;
+      if (stylesToApply) {
+        const styleName = this.config.styleName || this.constructor.name;
+        this.applyScopedStyles(styleName, stylesToApply);
+      }
+      const content = this.render();
+      this.appendChild(content);
+      this.initializeEventListeners();
+      this.onConnected?.();
+    } catch (error) {
+      logger4.error(`[${this.constructor.name}] Error in connectedCallback:`, error);
+      this.renderError(error);
+    }
   }
   /**
-   * 重写 disconnectedCallback 以清理状态
+   * Web Component生命周期：从DOM断开
    */
   disconnectedCallback() {
-    super.disconnectedCallback();
+    this.connected = false;
+    this.cleanup();
     this.cleanupReactiveStates();
+    this.cleanupStyles();
+    this.onDisconnected?.();
   }
   /**
-   * 启用调试模式
+   * 查找组件内的元素
+   *
+   * @param selector - CSS选择器
+   * @returns 元素或null
    */
-  enableDebug() {
-    this._isDebugEnabled = true;
+  querySelector(selector) {
+    return HTMLElement.prototype.querySelector.call(this, selector);
   }
   /**
-   * 禁用调试模式
+   * 查找组件内的所有匹配元素
+   *
+   * @param selector - CSS选择器
+   * @returns 元素列表
    */
-  disableDebug() {
-    this._isDebugEnabled = false;
+  querySelectorAll(selector) {
+    return HTMLElement.prototype.querySelectorAll.call(this, selector);
   }
-};
-function makeReactive(_debugMode = false) {
-  return function(constructor) {
-    return class ReactiveComponent extends constructor {
-      constructor(...args) {
-        super(...args);
-        if (!(this instanceof ReactiveWebComponent)) {
-          this.reactive = function(obj) {
-            return reactive(obj, () => this.rerender());
-          };
+  /**
+   * 重新渲染组件
+   */
+  rerender() {
+    if (!this.connected) {
+      logger4.warn(
+        `[${this.constructor.name}] Component is not connected, skipping rerender.`
+      );
+      return;
+    }
+    const focusState = this.captureFocusState();
+    this._pendingFocusState = focusState;
+    try {
+      const content = this.render();
+      if (focusState && focusState.key && focusState.value !== void 0) {
+        const target = content.querySelector(
+          `[data-wsx-key="${focusState.key}"]`
+        );
+        if (target) {
+          if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
+            target.value = focusState.value;
+          }
         }
       }
-      render() {
-        throw new Error("render() method must be implemented by subclass");
+      const stylesToApply = this._autoStyles || this.config.styles;
+      if (stylesToApply) {
+        const styleName = this.config.styleName || this.constructor.name;
+        let styleElement = this.querySelector(
+          `style[data-wsx-light-component="${styleName}"]`
+        );
+        if (!styleElement) {
+          styleElement = document.createElement("style");
+          styleElement.setAttribute("data-wsx-light-component", styleName);
+          styleElement.textContent = stylesToApply;
+          this.insertBefore(styleElement, this.firstChild);
+        } else if (styleElement.textContent !== stylesToApply) {
+          styleElement.textContent = stylesToApply;
+        }
       }
-    };
+      requestAnimationFrame(() => {
+        this.appendChild(content);
+        const oldChildren = Array.from(this.children).filter((child) => {
+          if (child === content) {
+            return false;
+          }
+          if (stylesToApply && child instanceof HTMLStyleElement && child.getAttribute("data-wsx-light-component") === (this.config.styleName || this.constructor.name)) {
+            return false;
+          }
+          return true;
+        });
+        oldChildren.forEach((child) => child.remove());
+        if (stylesToApply && this.children.length > 1) {
+          const styleElement = this.querySelector(
+            `style[data-wsx-light-component="${this.config.styleName || this.constructor.name}"]`
+          );
+          if (styleElement && styleElement !== this.firstChild) {
+            this.insertBefore(styleElement, this.firstChild);
+          }
+        }
+        requestAnimationFrame(() => {
+          this.restoreFocusState(focusState);
+          this._pendingFocusState = null;
+        });
+      });
+    } catch (error) {
+      logger4.error(`[${this.constructor.name}] Error in rerender:`, error);
+      this.renderError(error);
+    }
+  }
+  /**
+   * 渲染错误信息
+   *
+   * @param error - 错误对象
+   */
+  renderError(error) {
+    this.innerHTML = "";
+    const errorElement = h(
+      "div",
+      {
+        style: "color: red; padding: 10px; border: 1px solid red; background: #ffe6e6; font-family: monospace;"
+      },
+      [
+        h("strong", {}, `[${this.constructor.name}] Component Error:`),
+        h("pre", { style: "margin: 10px 0; white-space: pre-wrap;" }, String(error))
+      ]
+    );
+    this.appendChild(errorElement);
+  }
+  /**
+   * 为Light DOM组件应用样式
+   * 直接将样式注入到组件自身，避免全局污染
+   */
+  applyScopedStyles(styleName, cssText) {
+    const existingStyle = this.querySelector(`style[data-wsx-light-component="${styleName}"]`);
+    if (existingStyle) {
+      return;
+    }
+    const styleElement = document.createElement("style");
+    styleElement.setAttribute("data-wsx-light-component", styleName);
+    styleElement.textContent = cssText;
+    this.insertBefore(styleElement, this.firstChild);
+  }
+  /**
+   * 清理组件样式
+   */
+  cleanupStyles() {
+    const styleName = this.config.styleName || this.constructor.name;
+    const existingStyle = this.querySelector(`style[data-wsx-light-component="${styleName}"]`);
+    if (existingStyle) {
+      existingStyle.remove();
+    }
+  }
+};
+
+// src/auto-register.ts
+function autoRegister(options = {}) {
+  return function(constructor) {
+    const tagName = options.tagName || deriveTagName(constructor.name, options.prefix);
+    if (!customElements.get(tagName)) {
+      customElements.define(tagName, constructor);
+    }
+    return constructor;
   };
 }
-function createReactiveComponent(ComponentClass, config) {
-  if (ComponentClass.prototype instanceof ReactiveWebComponent) {
-    return new ComponentClass(config);
+function registerComponent(constructor, options = {}) {
+  const tagName = options.tagName || deriveTagName(constructor.name, options.prefix);
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, constructor);
+  }
+}
+function deriveTagName(className, prefix) {
+  let kebabCase = className.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+  if (!kebabCase.includes("-")) {
+    kebabCase = `${kebabCase}-component`;
+  }
+  return prefix ? `${prefix}${kebabCase}` : kebabCase;
+}
+
+// src/reactive-decorator.ts
+function state(target, propertyKey) {
+  let normalizedPropertyKey;
+  if (typeof propertyKey === "string" || typeof propertyKey === "symbol") {
+    normalizedPropertyKey = propertyKey;
+  } else {
+    const propertyKeyStr = String(propertyKey);
+    if (propertyKeyStr === "[object Object]") {
+      throw new Error(
+        `@state decorator: Invalid propertyKey detected. 
+
+The @state decorator MUST be processed by Babel plugin at compile time. It appears the Babel plugin is not configured in your build setup.
+
+To fix this, please:
+1. Install @wsxjs/wsx-vite-plugin: npm install @wsxjs/wsx-vite-plugin
+2. Configure it in vite.config.ts:
+   import { wsx } from '@wsxjs/wsx-vite-plugin';
+   export default defineConfig({ plugins: [wsx()] });
+3. Configure TypeScript (recommended: use @wsxjs/wsx-tsconfig):
+   npm install --save-dev @wsxjs/wsx-tsconfig
+   Then in tsconfig.json: { "extends": "@wsxjs/wsx-tsconfig/tsconfig.base.json" }
+   Or manually: { "compilerOptions": { "experimentalDecorators": true, "useDefineForClassFields": false } }
+
+See: https://github.com/wsxjs/wsxjs#setup for more details.`
+      );
+    }
+    normalizedPropertyKey = propertyKeyStr;
+  }
+  if (target == null) {
+    const propertyKeyStr = typeof normalizedPropertyKey === "string" ? normalizedPropertyKey : normalizedPropertyKey.toString();
+    throw new Error(
+      `@state decorator: Cannot access property "${propertyKeyStr}". Target is ${target === null ? "null" : "undefined"}.
+
+The @state decorator MUST be processed by Babel plugin at compile time. It appears the Babel plugin is not configured in your build setup.
+
+To fix this, please:
+1. Install @wsxjs/wsx-vite-plugin: npm install @wsxjs/wsx-vite-plugin
+2. Configure it in vite.config.ts:
+   import { wsx } from '@wsxjs/wsx-vite-plugin';
+   export default defineConfig({ plugins: [wsx()] });
+3. Configure TypeScript (recommended: use @wsxjs/wsx-tsconfig):
+   npm install --save-dev @wsxjs/wsx-tsconfig
+   Then in tsconfig.json: { "extends": "@wsxjs/wsx-tsconfig/tsconfig.base.json" }
+   Or manually: { "compilerOptions": { "experimentalDecorators": true, "useDefineForClassFields": false } }
+
+See: https://github.com/wsxjs/wsxjs#setup for more details.`
+    );
+  }
+  if (typeof target !== "object") {
+    const propertyKeyStr = typeof normalizedPropertyKey === "string" ? normalizedPropertyKey : normalizedPropertyKey.toString();
+    throw new Error(
+      `@state decorator: Cannot be used on "${propertyKeyStr}". @state is for properties only, not methods.`
+    );
+  }
+  const descriptor = Object.getOwnPropertyDescriptor(target, normalizedPropertyKey);
+  if (descriptor?.get) {
+    const propertyKeyStr = typeof normalizedPropertyKey === "string" ? normalizedPropertyKey : normalizedPropertyKey.toString();
+    throw new Error(
+      `@state decorator cannot be used with getter properties. Property: "${propertyKeyStr}"`
+    );
   }
-  const ReactiveComponent = makeReactive(config?.debug)(ComponentClass);
-  return new ReactiveComponent(config);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Fragment,
   LightComponent,
-  ReactiveDebug,
-  ReactiveWebComponent,
   StyleManager,
   WSXLogger,
   WebComponent,
   autoRegister,
   createLogger,
-  createReactiveComponent,
-  createState,
   h,
   jsx,
   jsxs,
   logger,
-  makeReactive,
-  reactive,
-  registerComponent
+  registerComponent,
+  state
 });