@wsxjs/wsx-core 0.0.6 → 0.0.8

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);
 
@@ -274,172 +269,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") {
@@ -606,16 +435,26 @@ function reactiveWithDebug(obj, onChange, debugName) {
   });
 }
 
-// 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;
     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 +463,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,10 +491,16 @@ 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];
   }
   /**
    * 调度重渲染
@@ -711,91 +512,23 @@ var LightComponent = class extends HTMLElement {
     }
   }
   /**
-   * 重新渲染组件
+   * 获取配置值
+   *
+   * @param key - 配置键
+   * @param defaultValue - 默认值
+   * @returns 配置值
    */
-  rerender() {
-    if (!this.connected) {
-      logger3.warn(
-        `[${this.constructor.name}] Component is not connected, skipping rerender.`
-      );
-      return;
-    }
-    this.innerHTML = "";
-    try {
-      const content = this.render();
-      this.appendChild(content);
-    } catch (error) {
-      logger3.error(`[${this.constructor.name}] Error in rerender:`, error);
-      this.renderError(error);
-    }
+  getConfig(key, defaultValue) {
+    return this.config[key] ?? defaultValue;
   }
   /**
-   * 渲染错误信息
+   * 设置配置值
    *
-   * @param error - 错误对象
+   * @param key - 配置键
+   * @param value - 配置值
    */
-  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);
-  }
-  /**
-   * 获取配置值
-   *
-   * @param key - 配置键
-   * @param defaultValue - 默认值
-   * @returns 配置值
-   */
-  getConfig(key, defaultValue) {
-    return this.config[key] ?? defaultValue;
-  }
-  /**
-   * 设置配置值
-   *
-   * @param key - 配置键
-   * @param value - 配置值
-   */
-  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();
-    }
+  setConfig(key, value) {
+    this.config[key] = value;
   }
   /**
    * 获取属性值
@@ -833,92 +566,102 @@ 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`;
+  /**
+   * 清理响应式状态
+   */
+  cleanupReactiveStates() {
+    this._reactiveStates.clear();
   }
-  return prefix ? `${prefix}${kebabCase}` : kebabCase;
-}
+};
 
-// src/reactive-component.ts
-var ReactiveWebComponent = class extends WebComponent {
+// src/web-component.ts
+var WebComponent = class extends BaseComponent {
   constructor(config = {}) {
     super(config);
-    this._isDebugEnabled = false;
+    // Initialized by BaseComponent constructor
     this._preserveFocus = true;
-    this._reactiveStates = /* @__PURE__ */ new Map();
-    this._isDebugEnabled = config.debug ?? false;
     this._preserveFocus = config.preserveFocus ?? true;
+    this.attachShadow({ mode: "open" });
   }
   /**
-   * 创建响应式对象
-   *
-   * @param obj 要变为响应式的对象
-   * @param debugName 调试名称（可选）
-   * @returns 响应式代理对象
+   * Web Component生命周期：连接到DOM
    */
-  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());
+  connectedCallback() {
+    this.connected = true;
+    try {
+      const stylesToApply = this._getAutoStyles?.() || 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.onConnected?.();
+    } catch (error) {
+      console.error(`[${this.constructor.name}] Error in connectedCallback:`, error);
+      this.renderError(error);
+    }
   }
   /**
-   * 创建响应式状态
+   * Web Component生命周期：从DOM断开
+   */
+  disconnectedCallback() {
+    this.connected = false;
+    this.onDisconnected?.();
+  }
+  /**
+   * 查找Shadow DOM内的元素
    *
-   * @param key 状态标识符
-   * @param initialValue 初始值
-   * @returns [getter, setter] 元组
+   * @param selector - CSS选择器
+   * @returns 元素或null
    */
-  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];
+  querySelector(selector) {
+    return this.shadowRoot.querySelector(selector);
   }
   /**
-   * 调度重渲染
-   * 这个方法被响应式系统调用，开发者通常不需要直接调用
+   * 查找Shadow DOM内的所有匹配元素
+   *
+   * @param selector - CSS选择器
+   * @returns 元素列表
    */
-  scheduleRerender() {
-    if (this.connected) {
-      this.rerender();
-    }
+  querySelectorAll(selector) {
+    return this.shadowRoot.querySelectorAll(selector);
   }
   /**
-   * 重写 rerender 方法以支持焦点保持
+   * 重新渲染组件
    */
   rerender() {
     if (!this.connected) {
+      console.warn(
+        `[${this.constructor.name}] Component is not connected, skipping rerender.`
+      );
       return;
     }
     let focusData = null;
-    if (this._preserveFocus) {
+    if (this._preserveFocus && this.shadowRoot) {
       const activeElement = this.shadowRoot.activeElement;
       focusData = this.saveFocusState(activeElement);
     }
-    super.rerender();
-    if (this._preserveFocus && focusData) {
+    const adoptedStyleSheets = this.shadowRoot.adoptedStyleSheets || [];
+    this.shadowRoot.innerHTML = "";
+    if (this.shadowRoot.adoptedStyleSheets) {
+      this.shadowRoot.adoptedStyleSheets = adoptedStyleSheets;
+    }
+    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);
+      }
+    }
+    try {
+      const content = this.render();
+      this.shadowRoot.appendChild(content);
+    } catch (error) {
+      console.error(`[${this.constructor.name}] Error in rerender:`, error);
+      this.renderError(error);
+    }
+    if (this._preserveFocus && focusData && this.shadowRoot) {
       this.restoreFocusState(focusData);
     }
   }
@@ -944,8 +687,8 @@ var ReactiveWebComponent = class extends WebComponent {
     if (activeElement instanceof HTMLInputElement || activeElement instanceof HTMLSelectElement) {
       focusData.value = activeElement.value;
       if ("selectionStart" in activeElement) {
-        focusData.selectionStart = activeElement.selectionStart;
-        focusData.selectionEnd = activeElement.selectionEnd;
+        focusData.selectionStart = activeElement.selectionStart ?? void 0;
+        focusData.selectionEnd = activeElement.selectionEnd ?? void 0;
       }
     }
     return focusData;
@@ -971,10 +714,10 @@ var ReactiveWebComponent = class extends WebComponent {
           if (targetElement instanceof HTMLInputElement) {
             targetElement.setSelectionRange(
               focusData.selectionStart,
-              focusData.selectionEnd
+              focusData.selectionEnd ?? focusData.selectionStart
             );
           } else if (targetElement instanceof HTMLSelectElement) {
-            targetElement.value = focusData.value;
+            targetElement.value = focusData.value ?? "";
           } else if (targetElement.hasAttribute("contenteditable")) {
             this.setCursorPosition(targetElement, focusData.selectionStart);
           }
@@ -1004,83 +747,228 @@ var ReactiveWebComponent = class extends WebComponent {
     }
   }
   /**
-   * 获取所有响应式状态的快照（用于调试）
+   * 渲染错误信息
+   *
+   * @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 logger3 = 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.onConnected?.();
+    } catch (error) {
+      logger3.error(`[${this.constructor.name}] Error in connectedCallback:`, error);
+      this.renderError(error);
+    }
   }
   /**
-   * 重写 disconnectedCallback 以清理状态
+   * Web Component生命周期：从DOM断开
    */
   disconnectedCallback() {
-    super.disconnectedCallback();
     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) {
+      logger3.warn(
+        `[${this.constructor.name}] Component is not connected, skipping rerender.`
+      );
+      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);
+    }
+    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);
         }
       }
-      render() {
-        throw new Error("render() method must be implemented by subclass");
-      }
-    };
+    } catch (error) {
+      logger3.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. This usually means the build tool doesn't support decorators properly. Please ensure Babel plugin is configured in vite.config.ts`
+      );
+    }
+    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"}. Please ensure Babel plugin is configured in vite.config.ts`
+    );
+  }
+  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
 });