@ohos-ports/stacksjs-stx 0.2.287-beta.0

package/dist/web-components.js

@@ -0,0 +1,1466 @@
+import fs from "node:fs";
+import path from "node:path";
+import { ErrorCodes, inlineError } from "./error-handling.js";
+import { fileExists, resolveTemplatePath } from "./utils.js";
+export async function buildWebComponents(options, dependencies) {
+  if (!options.webComponents?.enabled)
+    return [];
+  const webComponents = options.webComponents.components || [], builtComponents = [];
+  if (webComponents.length > 0) {
+    if (options.debug)
+      console.log(`Building ${webComponents.length} web components...`);
+    for (const component of webComponents)
+      try {
+        const outputPath = await buildWebComponent(component, options, dependencies);
+        if (outputPath)
+          builtComponents.push(outputPath);
+      } catch (error) {
+        console.error(`Error building web component ${component.name}:`, error);
+        if (options.debug)
+          throw error;
+      }
+  }
+  return builtComponents;
+}
+async function buildWebComponent(component, options, dependencies) {
+  const { name, file, tag, extends: baseElement } = component;
+  if (!name || !file || !tag) {
+    console.error("Invalid web component configuration, missing required fields:", component);
+    return null;
+  }
+  let filePath = null;
+  if (path.isAbsolute(file) && await fileExists(file))
+    filePath = file;
+  else if (options.componentsDir) {
+    const componentsPath = path.join(options.componentsDir, file);
+    if (await fileExists(componentsPath))
+      filePath = componentsPath;
+  }
+  if (!filePath)
+    filePath = await resolveTemplatePath(file, process.cwd(), options, dependencies);
+  if (!filePath) {
+    console.error(`Web component source file not found: ${file}`);
+    return null;
+  }
+  const source = await Bun.file(filePath).text();
+  dependencies.add(filePath);
+  const isTypeScript = (component.outputFormat || "js") === "ts", webComponentCode = isTypeScript ? generateWebComponentCodeTypeScript({
+    name,
+    tag,
+    baseElement,
+    source,
+    shadowDOM: component.shadowDOM ?? !0,
+    template: component.template ?? !0,
+    styleSource: component.styleSource,
+    attributes: component.attributes || [],
+    attributeTypes: component.attributeTypes || {}
+  }) : generateWebComponentCode({
+    name,
+    tag,
+    baseElement,
+    source,
+    shadowDOM: component.shadowDOM ?? !0,
+    template: component.template ?? !0,
+    styleSource: component.styleSource,
+    attributes: component.attributes || []
+  }), outputDir = options.webComponents?.outputDir || "dist/web-components";
+  await fs.promises.mkdir(outputDir, { recursive: !0 });
+  const extension = isTypeScript ? "ts" : "js", outputFile = path.join(outputDir, `${tag}.${extension}`);
+  await Bun.write(outputFile, webComponentCode);
+  if (options.debug)
+    console.log(`Built web component ${name} -> ${outputFile}`);
+  return outputFile;
+}
+function generateWebComponentCode(options) {
+  const {
+    name,
+    tag,
+    baseElement = "HTMLElement",
+    source,
+    shadowDOM,
+    template,
+    styleSource,
+    attributes = []
+  } = options;
+  let htmlContent = source.replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, "").trim();
+  if (!shadowDOM) {
+    htmlContent = htmlContent.replace(/<slot\s+name=["']([^"']+)["']\s*>([\s\S]*?)<\/slot>/gi, '<div data-slot="$1">$2</div>');
+    htmlContent = htmlContent.replace(/<slot\s+name=["']([^"']+)["']\s*\/>/gi, '<div data-slot="$1"></div>');
+    htmlContent = htmlContent.replace(/<slot\s*>([\s\S]*?)<\/slot>/gi, "<div data-default-slot>$1</div>");
+    htmlContent = htmlContent.replace(/<slot\s*\/>/gi, "<div data-default-slot></div>");
+  }
+  let styles = "";
+  if (styleSource)
+    styles = `<link rel="stylesheet" href="${styleSource}">`;
+  return `/**
+ * ${name} Web Component
+ * Auto-generated from stx component
+ */
+class ${name.replace(/\W/g, "")} extends ${baseElement} {
+  constructor() {
+    super()
+    this._initialized = false
+    ${shadowDOM ? "" : "this._slotContent = []"}
+    ${shadowDOM ? 'this.attachShadow({ mode: "open" })' : ""}
+  }
+
+  ${template ? `
+  _createTemplate() {
+    const template = document.createElement('template')
+    template.innerHTML = \`${styles}${htmlContent}\`
+    ${shadowDOM ? "this.shadowRoot.appendChild(template.content.cloneNode(true))" : "this.appendChild(template.content.cloneNode(true))"}
+    this._processSlots()
+  }
+  ` : `
+  _render() {
+    ${shadowDOM ? "this.shadowRoot.innerHTML" : "this.innerHTML"} = \`${styles}${htmlContent}\`
+    this._processSlots()
+  }
+  `}
+
+  _processSlots() {
+    ${shadowDOM ? `// Shadow DOM handles slot assignment automatically
+    // Listen for slot changes if needed
+    const slots = this.shadowRoot.querySelectorAll('slot')
+    slots.forEach(slot => {
+      slot.addEventListener('slotchange', (e) => {
+        const assignedNodes = slot.assignedNodes()
+        this.dispatchEvent(new CustomEvent('slot-changed', {
+          detail: { slotName: slot.name || 'default', assignedNodes }
+        }))
+      })
+    })` : `// Manual slot processing for non-shadow DOM mode
+    const slots = this.querySelectorAll('[data-slot]')
+
+    // Process named slots
+    slots.forEach(slotEl => {
+      const slotName = slotEl.getAttribute('data-slot')
+      const slottedContent = this._slotContent.filter(
+        node => node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') === slotName
+      )
+      if (slottedContent.length > 0) {
+        slotEl.innerHTML = ''
+        slottedContent.forEach(content => slotEl.appendChild(content))
+      }
+    })
+
+    // Process default slot
+    const defaultSlot = this.querySelector('[data-slot=""]') || this.querySelector('[data-default-slot]')
+    if (defaultSlot) {
+      const unslottedContent = this._slotContent.filter(
+        node => node.nodeType !== Node.ELEMENT_NODE || !node.hasAttribute('slot')
+      )
+      if (unslottedContent.length > 0) {
+        defaultSlot.innerHTML = ''
+        unslottedContent.forEach(content => defaultSlot.appendChild(content))
+      }
+    }`}
+  }
+
+  ${attributes.length > 0 ? `
+  static get observedAttributes() {
+    return [${attributes.map((attr) => `'${attr}'`).join(", ")}]
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      this[name] = newValue
+      ${template ? "" : "if (this._initialized) this._render()"}
+    }
+  }
+  ` : ""}
+
+  connectedCallback() {
+    if (this._initialized) return
+    ${shadowDOM ? "" : "this._slotContent = Array.from(this.childNodes)"}
+    this._initialized = true
+    ${template ? "this._createTemplate()" : "this._render()"}
+  }
+
+  disconnectedCallback() {
+    // Component removed from the DOM
+  }
+}
+
+// Register the web component
+customElements.define('${tag}', ${name.replace(/\W/g, "")})
+`;
+}
+function generateWebComponentCodeTypeScript(options) {
+  const {
+    name,
+    tag,
+    baseElement = "HTMLElement",
+    source,
+    shadowDOM,
+    template,
+    styleSource,
+    attributes = [],
+    attributeTypes = {}
+  } = options, className = name.replace(/\W/g, "");
+  let htmlContent = source.replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, "").trim();
+  if (!shadowDOM) {
+    htmlContent = htmlContent.replace(/<slot\s+name=["']([^"']+)["']\s*>([\s\S]*?)<\/slot>/gi, '<div data-slot="$1">$2</div>');
+    htmlContent = htmlContent.replace(/<slot\s+name=["']([^"']+)["']\s*\/>/gi, '<div data-slot="$1"></div>');
+    htmlContent = htmlContent.replace(/<slot\s*>([\s\S]*?)<\/slot>/gi, "<div data-default-slot>$1</div>");
+    htmlContent = htmlContent.replace(/<slot\s*\/>/gi, "<div data-default-slot></div>");
+  }
+  htmlContent = htmlContent.replace(/`/g, "\\`").replace(/\$\{/g, "\\${");
+  const styles = styleSource ? `<link rel="stylesheet" href="${styleSource}">` : "", getTypeScriptType = (attr) => {
+    switch (attributeTypes[attr]) {
+      case "number":
+        return "number";
+      case "boolean":
+        return "boolean";
+      case "object":
+        return "Record<string, unknown>";
+      default:
+        return "string";
+    }
+  }, toCamelCase = (str) => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase()), propertyDeclarations = attributes.map((attr) => `  private _${toCamelCase(attr)}: ${getTypeScriptType(attr)} | null = null;`).join(`
+`), gettersSetters = attributes.map((attr) => {
+    const type = getTypeScriptType(attr), camelCase = toCamelCase(attr);
+    return `
+  get ${camelCase}(): ${type} | null {
+    return this._${camelCase};
+  }
+
+  set ${camelCase}(value: ${type} | null) {
+    this._${camelCase} = value;
+    if (value !== null) {
+      this.setAttribute('${attr}', String(value));
+    }
+else {
+      this.removeAttribute('${attr}');
+    }
+  }`;
+  }).join(`
+`), propsInterface = attributes.length > 0 ? `/**
+ * Props interface for ${name}
+ */
+export interface ${className}Props {
+${attributes.map((attr) => {
+    const type = getTypeScriptType(attr);
+    return `  ${toCamelCase(attr)}?: ${type};`;
+  }).join(`
+`)}
+}
+` : "", observedAttributesCode = attributes.length > 0 ? `
+  static get observedAttributes(): string[] {
+    return [${attributes.map((attr) => `'${attr}'`).join(", ")}];
+  }
+
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void {
+    if (oldValue !== newValue) {
+      const camelCase = name.replace(/-([a-z])/g, (_: string, letter: string) => letter.toUpperCase());
+      (this as unknown as Record<string, unknown>)[\`_\${camelCase}\`] = this._parseAttributeValue(name, newValue);
+      ${template ? "" : "if (this._initialized) this._render();"}
+    }
+  }
+
+  private _parseAttributeValue(name: string, value: string | null): unknown {
+    if (value === null) return null;
+    const typeMap: Record<string, string> = ${JSON.stringify(attributeTypes)};
+    const type = typeMap[name] || 'string';
+    switch (type) {
+      case 'number': return Number(value);
+      case 'boolean': return value !== 'false' && value !== '0';
+      case 'object': try { return JSON.parse(value); }
+catch { return value; }
+      default: return value;
+    }
+  }
+` : "", templateMethod = template ? `
+  private _createTemplate(): void {
+    const template = document.createElement('template');
+    template.innerHTML = \`${styles}${htmlContent}\`;
+    ${shadowDOM ? "this.shadowRoot!.appendChild(template.content.cloneNode(true));" : "this.appendChild(template.content.cloneNode(true));"}
+    this._processSlots();
+  }` : `
+  private _render(): void {
+    ${shadowDOM ? "this.shadowRoot!.innerHTML" : "this.innerHTML"} = \`${styles}${htmlContent}\`;
+    this._processSlots();
+  }`;
+  return `/**
+ * ${name} Web Component
+ * Auto-generated from stx component (TypeScript)
+ *
+ * @example
+ * \`\`\`html
+ * <${tag}></${tag}>
+ * \`\`\`
+ */
+
+/**
+ * Detail type for slot-changed event
+ */
+interface SlotChangeDetail {
+  slotName: string;
+  assignedNodes: Node[];
+}
+
+${propsInterface}
+/**
+ * ${name} custom element class
+ * @customElement ${tag}
+ */
+export class ${className} extends ${baseElement} {
+${propertyDeclarations}
+  private _initialized = false;
+  ${shadowDOM ? "" : "private _slotContent: Node[] = [];"}
+
+  constructor() {
+    super();
+    ${shadowDOM ? 'this.attachShadow({ mode: "open" });' : ""}
+  }
+${templateMethod}
+${shadowDOM ? `
+  private _processSlots(): void {
+    const slots = this.shadowRoot!.querySelectorAll('slot');
+    slots.forEach((slot) => {
+      slot.addEventListener('slotchange', () => {
+        const assignedNodes = (slot as HTMLSlotElement).assignedNodes();
+        this.dispatchEvent(new CustomEvent<SlotChangeDetail>('slot-changed', {
+          detail: { slotName: slot.getAttribute('name') || 'default', assignedNodes }
+        }));
+      });
+    });
+  }` : `
+  private _processSlots(): void {
+    const slots = this.querySelectorAll('[data-slot]');
+    slots.forEach((slotEl) => {
+      const slotName = slotEl.getAttribute('data-slot');
+      if (slotName) {
+        const slottedContent = this._slotContent.filter(
+          node => node.nodeType === Node.ELEMENT_NODE && (node as Element).getAttribute('slot') === slotName
+        );
+        if (slottedContent.length > 0) {
+          slotEl.innerHTML = '';
+          slottedContent.forEach(content => slotEl.appendChild(content));
+        }
+      }
+    });
+    const defaultSlot = this.querySelector('[data-slot=""]') || this.querySelector('[data-default-slot]');
+    if (defaultSlot) {
+      const unslottedContent = this._slotContent.filter(
+        node => node.nodeType !== Node.ELEMENT_NODE || !(node as Element).hasAttribute('slot')
+      );
+      if (unslottedContent.length > 0) {
+        defaultSlot.innerHTML = '';
+        unslottedContent.forEach(content => defaultSlot.appendChild(content));
+      }
+    }
+  }`}
+${observedAttributesCode}
+${gettersSetters}
+
+  connectedCallback(): void {
+    if (this._initialized) return;
+    ${shadowDOM ? "" : "this._slotContent = Array.from(this.childNodes);"}
+    this._initialized = true;
+    ${template ? "this._createTemplate();" : "this._render();"}
+  }
+
+  disconnectedCallback(): void {
+    // Component removed from the DOM
+  }
+
+  adoptedCallback(): void {
+    // Component moved to a new document
+  }
+}
+
+// Type augmentation for HTMLElementTagNameMap
+declare global {
+  interface HTMLElementTagNameMap {
+    '${tag}': ${className};
+  }
+}
+
+// Register the web component
+customElements.define('${tag}', ${className});
+`;
+}
+const defaultCssScopingConfig = {
+  strategy: "attribute",
+  attributeName: "data-v",
+  preserveOriginal: !0
+};
+export function generateScopeId(componentName) {
+  const hash = componentName.split("").reduce((acc, char) => (acc << 5) - acc + char.charCodeAt(0) | 0, 0);
+  return Math.abs(hash).toString(36).slice(0, 8);
+}
+export function scopeCSS(css, componentTag, config = {}) {
+  const mergedConfig = { ...defaultCssScopingConfig, ...config }, scopeId = generateScopeId(componentTag);
+  switch (mergedConfig.strategy) {
+    case "shadow":
+      return css;
+    case "prefix":
+      return scopeCSSWithPrefix(css, mergedConfig.prefix || componentTag, mergedConfig.preserveOriginal);
+    case "attribute":
+      return scopeCSSWithAttribute(css, scopeId, mergedConfig.attributeName || "data-v", mergedConfig.preserveOriginal);
+    case "bem":
+      return scopeCSSWithBEM(css, componentTag, mergedConfig.preserveOriginal);
+    default:
+      return css;
+  }
+}
+function scopeCSSWithAttribute(css, scopeId, attributeName, preserveOriginal) {
+  const scopeAttr = `[${attributeName}-${scopeId}]`;
+  return css.replace(/([.#]?[\w-]+|\*)\s*(\{|,)/g, (match, selector, delimiter) => {
+    if (selector.startsWith("@"))
+      return match;
+    if (/^(?::root|:host|html|body)$/i.test(selector))
+      return match;
+    return `${preserveOriginal ? `${selector}${scopeAttr}` : `${selector}${scopeAttr}`}${delimiter}`;
+  });
+}
+function scopeCSSWithPrefix(css, prefix, preserveOriginal) {
+  return css.replace(/\.([a-z_][\w-]*)/gi, (match, className) => {
+    if (className.startsWith(prefix))
+      return match;
+    const scopedClass = `${prefix}__${className}`;
+    return preserveOriginal ? `.${scopedClass}` : `.${scopedClass}`;
+  });
+}
+function scopeCSSWithBEM(css, componentName, preserveOriginal) {
+  const block = componentName.replace(/[^a-z0-9]/gi, "-");
+  return css.replace(/\.([a-z_][\w-]*)/gi, (match, className) => {
+    if (className.includes("__") || className.includes("--")) {
+      if (!className.startsWith(block))
+        return `.${block}__${className}`;
+      return match;
+    }
+    const scopedClass = `${block}__${className}`;
+    return preserveOriginal ? `.${scopedClass}` : `.${scopedClass}`;
+  });
+}
+export function scopeHTML(html, componentTag, config = {}) {
+  const mergedConfig = { ...defaultCssScopingConfig, ...config };
+  if (mergedConfig.strategy === "shadow")
+    return html;
+  if (mergedConfig.strategy === "attribute") {
+    const scopeId = generateScopeId(componentTag), scopeAttr = `${mergedConfig.attributeName || "data-v"}-${scopeId}`;
+    return html.replace(/<([a-z][a-z0-9-]*)([^>]*)>/gi, (match, tag, attrs) => {
+      if (/^(?:script|style|!--)$/i.test(tag))
+        return match;
+      const isSelfClosing = attrs.trimEnd().endsWith("/"), cleanAttrs = isSelfClosing ? attrs.slice(0, -1) : attrs;
+      return `<${tag}${cleanAttrs} ${scopeAttr}${isSelfClosing ? "/" : ""}>`;
+    });
+  }
+  if (mergedConfig.strategy === "prefix" || mergedConfig.strategy === "bem") {
+    const prefix = mergedConfig.strategy === "bem" ? componentTag.replace(/[^a-z0-9]/gi, "-") : mergedConfig.prefix || componentTag;
+    return html.replace(/\bclass\s*=\s*["']([^"']+)["']/gi, (match, classes) => {
+      return `class="${classes.split(/\s+/).map((cls) => {
+        if (!cls)
+          return cls;
+        if (cls.startsWith(prefix))
+          return cls;
+        return `${prefix}__${cls}`;
+      }).join(" ")}"`;
+    });
+  }
+  return html;
+}
+export function getScopeAttribute(componentTag, config = {}) {
+  const mergedConfig = { ...defaultCssScopingConfig, ...config }, scopeId = generateScopeId(componentTag);
+  return `${mergedConfig.attributeName || "data-v"}-${scopeId}`;
+}
+export function extractAndScopeStyles(html, componentTag, config = {}) {
+  let extractedCSS = "";
+  const htmlWithoutStyles = html.replace(/<style([^>]*)>([\s\S]*?)<\/style>/gi, (_match, attrs, cssContent) => {
+    if (/\bscoped\b/i.test(attrs) || config.strategy !== "shadow")
+      extractedCSS += `${scopeCSS(cssContent, componentTag, config)}
+`;
+    else
+      extractedCSS += `${cssContent}
+`;
+    return "";
+  });
+  return {
+    html: scopeHTML(htmlWithoutStyles, componentTag, config),
+    css: extractedCSS.trim()
+  };
+}
+function camelToKebab(str) {
+  return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function _kebabToCamel(str) {
+  return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+export function generateReactiveWebComponent(config) {
+  const {
+    name,
+    tag,
+    baseElement = "HTMLElement",
+    template,
+    styles = "",
+    shadowDOM = !0,
+    properties = {},
+    lifecycle = {},
+    events = {},
+    methods = {},
+    state = {}
+  } = config, className = name.replace(/\W/g, ""), propertyNames = Object.keys(properties), observedAttributes = propertyNames.filter((prop) => properties[prop].attribute !== !1).map((prop) => properties[prop].attribute || camelToKebab(prop)), propertyDeclarations = propertyNames.map((prop) => {
+    const def = properties[prop], defaultValue = def.default !== void 0 ? JSON.stringify(def.default) : def.type === "string" ? '""' : def.type === "number" ? "0" : def.type === "boolean" ? "false" : def.type === "array" ? "[]" : "{}";
+    return `    this._${prop} = ${defaultValue};`;
+  }).join(`
+`), propertyAccessors = propertyNames.map((prop) => {
+    const def = properties[prop], attrName = def.attribute !== !1 ? def.attribute || camelToKebab(prop) : null, reflectCode = def.reflect && attrName ? `
+      if (value !== null && value !== undefined) {
+        ${def.type === "boolean" ? `if (value) { this.setAttribute('${attrName}', ''); }
+else { this.removeAttribute('${attrName}'); }` : `this.setAttribute('${attrName}', ${def.type === "object" || def.type === "array" ? "JSON.stringify(value)" : "String(value)"});`}
+      }
+else {
+        this.removeAttribute('${attrName}');
+      }` : "", observerCode = def.observer ? `this.${def.observer}(value, oldValue);` : "", renderCode = def.render !== !1 ? "this._scheduleRender();" : "";
+    return `
+  get ${prop}() {
+    return this._${prop};
+  }
+
+  set ${prop}(value) {
+    const oldValue = this._${prop};
+    if (oldValue === value) return;
+    this._${prop} = value;${reflectCode}
+    ${observerCode}
+    ${renderCode}
+    this.dispatchEvent(new CustomEvent('${prop}-changed', {
+      detail: { value, oldValue },
+      bubbles: true
+    }));
+  }`;
+  }).join(`
+`), attributeChangedCode = observedAttributes.length > 0 ? `
+  static get observedAttributes() {
+    return [${observedAttributes.map((a) => `'${a}'`).join(", ")}];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    const propName = this._attrToProp[name];
+    if (propName) {
+      const propDef = this._propertyDefs[propName];
+      this[propName] = this._deserializeAttribute(newValue, propDef.type);
+    }
+    ${lifecycle.attributeChanged || ""}
+  }` : "", eventBindings = Object.entries(events).map(([event, handler]) => {
+    return `this._root.addEventListener('${event}', (e) => { ${handler} });`;
+  }).join(`
+    `), methodDefinitions = Object.entries(methods).map(([methodName, body]) => {
+    return `
+  ${methodName}() {
+    ${body}
+  }`;
+  }).join(`
+`), propertyDefsMap = JSON.stringify(Object.fromEntries(propertyNames.map((prop) => [prop, properties[prop]]))), attrToPropMap = JSON.stringify(Object.fromEntries(propertyNames.filter((prop) => properties[prop].attribute !== !1).map((prop) => [properties[prop].attribute || camelToKebab(prop), prop]))), escapedTemplate = template.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/g, "\\${"), escapedStyles = styles.replace(/\\/g, "\\\\").replace(/`/g, "\\`");
+  return `/**
+ * ${name} - Reactive Web Component
+ * Auto-generated with reactive properties and lifecycle management
+ *
+ * @customElement ${tag}
+ */
+class ${className} extends ${baseElement} {
+  // Property definitions
+  _propertyDefs = ${propertyDefsMap};
+  _attrToProp = ${attrToPropMap};
+
+  // Internal state
+  _state = ${JSON.stringify(state)};
+  _renderPending = false;
+  _isConnected = false;
+
+  constructor() {
+    super();
+    ${shadowDOM ? 'this.attachShadow({ mode: "open" });' : ""}
+    this._root = ${shadowDOM ? "this.shadowRoot" : "this"};
+
+    // Initialize properties with defaults
+${propertyDeclarations}
+
+    // Initial render
+    this._render();
+  }
+
+  // =========================================================================
+  // Reactive Properties
+  // =========================================================================
+${propertyAccessors}
+
+  // =========================================================================
+  // State Management
+  // =========================================================================
+
+  /**
+   * Get current internal state
+   */
+  get state() {
+    return { ...this._state };
+  }
+
+  /**
+   * Update internal state and trigger re-render
+   * @param {Object} updates - State updates to merge
+   */
+  setState(updates) {
+    const oldState = { ...this._state };
+    this._state = { ...this._state, ...updates };
+    this._scheduleRender();
+    this.dispatchEvent(new CustomEvent('state-changed', {
+      detail: { state: this._state, oldState },
+      bubbles: true
+    }));
+  }
+
+  // =========================================================================
+  // Rendering
+  // =========================================================================
+
+  /**
+   * Schedule a render on the next animation frame (batched)
+   */
+  _scheduleRender() {
+    if (this._renderPending) return;
+    this._renderPending = true;
+    requestAnimationFrame(() => {
+      this._renderPending = false;
+      this._render();
+    });
+  }
+
+  /**
+   * Render the component template
+   */
+  _render() {
+    const template = \`${escapedStyles ? `<style>${escapedStyles}</style>` : ""}${escapedTemplate}\`;
+
+    // Interpolate template with property values
+    const rendered = template.replace(/\\{\\{\\s*(\\w+)\\s*\\}\\}/g, (match, propName) => {
+      if (propName in this) {
+        const value = this[propName];
+        if (value === null || value === undefined) return '';
+        if (typeof value === 'object') return JSON.stringify(value);
+        return String(value);
+      }
+      if (propName in this._state) {
+        const value = this._state[propName];
+        if (value === null || value === undefined) return '';
+        if (typeof value === 'object') return JSON.stringify(value);
+        return String(value);
+      }
+      return match;
+    });
+
+    this._root.innerHTML = rendered;
+    this._bindEvents();
+  }
+
+  /**
+   * Bind event handlers after render
+   */
+  _bindEvents() {
+    ${eventBindings}
+  }
+
+  // =========================================================================
+  // Attribute Handling
+  // =========================================================================
+
+  /**
+   * Deserialize attribute value to property type
+   */
+  _deserializeAttribute(value, type) {
+    if (value === null) return null;
+    switch (type) {
+      case 'number': return Number(value);
+      case 'boolean': return value !== null && value !== 'false' && value !== '0';
+      case 'object':
+      case 'array':
+        try { return JSON.parse(value); }
+        catch { return type === 'array' ? [] : {}; }
+      default: return value;
+    }
+  }
+
+${attributeChangedCode}
+
+  // =========================================================================
+  // Lifecycle
+  // =========================================================================
+
+  connectedCallback() {
+    this._isConnected = true;
+    ${lifecycle.connected || "// Component connected to DOM"}
+  }
+
+  disconnectedCallback() {
+    this._isConnected = false;
+    ${lifecycle.disconnected || "// Component disconnected from DOM"}
+  }
+
+  adoptedCallback() {
+    ${lifecycle.adopted || "// Component moved to new document"}
+  }
+
+  // =========================================================================
+  // Custom Methods
+  // =========================================================================
+${methodDefinitions}
+}
+
+// Register the custom element
+customElements.define('${tag}', ${className});
+
+// Export for module usage
+export { ${className} };
+export default ${className};
+`;
+}
+export function generateReactiveWebComponentTS(config) {
+  const {
+    name,
+    tag,
+    baseElement = "HTMLElement",
+    template,
+    styles = "",
+    shadowDOM = !0,
+    properties = {},
+    lifecycle = {},
+    events = {},
+    methods = {},
+    state = {}
+  } = config, className = name.replace(/\W/g, ""), propertyNames = Object.keys(properties), observedAttributes = propertyNames.filter((prop) => properties[prop].attribute !== !1).map((prop) => properties[prop].attribute || camelToKebab(prop)), getTypeScriptType = (type) => {
+    switch (type) {
+      case "string":
+        return "string";
+      case "number":
+        return "number";
+      case "boolean":
+        return "boolean";
+      case "object":
+        return "Record<string, unknown>";
+      case "array":
+        return "unknown[]";
+      default:
+        return "unknown";
+    }
+  }, propsInterface = propertyNames.length > 0 ? `
+/**
+ * Props interface for ${name}
+ */
+export interface ${className}Props {
+${propertyNames.map((prop) => `  ${prop}?: ${getTypeScriptType(properties[prop].type)};`).join(`
+`)}
+}
+` : "", stateInterface = Object.keys(state).length > 0 ? `
+/**
+ * State interface for ${name}
+ */
+export interface ${className}State {
+${Object.entries(state).map(([key, value]) => `  ${key}: ${typeof value};`).join(`
+`)}
+}
+` : `
+export interface ${className}State {
+  [key: string]: unknown;
+}
+`, propertyDeclarations = propertyNames.map((prop) => {
+    const def = properties[prop], tsType = getTypeScriptType(def.type);
+    return `  private _${prop}: ${tsType};`;
+  }).join(`
+`), propertyAccessors = propertyNames.map((prop) => {
+    const def = properties[prop], tsType = getTypeScriptType(def.type), attrName = def.attribute !== !1 ? def.attribute || camelToKebab(prop) : null, defaultValue = def.default !== void 0 ? JSON.stringify(def.default) : def.type === "string" ? '""' : def.type === "number" ? "0" : def.type === "boolean" ? "false" : def.type === "array" ? "[]" : "{}", reflectCode = def.reflect && attrName ? `
+      if (value !== null && value !== undefined) {
+        ${def.type === "boolean" ? `if (value) { this.setAttribute('${attrName}', ''); }
+else { this.removeAttribute('${attrName}'); }` : `this.setAttribute('${attrName}', ${def.type === "object" || def.type === "array" ? "JSON.stringify(value)" : "String(value)"});`}
+      }
+else {
+        this.removeAttribute('${attrName}');
+      }` : "", observerCode = def.observer ? `this.${def.observer}(value, oldValue);` : "", renderCode = def.render !== !1 ? "this._scheduleRender();" : "";
+    return `
+  get ${prop}(): ${tsType} {
+    return this._${prop};
+  }
+
+  set ${prop}(value: ${tsType}) {
+    const oldValue = this._${prop};
+    if (oldValue === value) return;
+    this._${prop} = value;${reflectCode}
+    ${observerCode}
+    ${renderCode}
+    this.dispatchEvent(new CustomEvent('${prop}-changed', {
+      detail: { value, oldValue },
+      bubbles: true
+    }));
+  }
+
+  // Property default: ${defaultValue}`;
+  }).join(`
+`), attributeChangedCode = observedAttributes.length > 0 ? `
+  static get observedAttributes(): string[] {
+    return [${observedAttributes.map((a) => `'${a}'`).join(", ")}];
+  }
+
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void {
+    if (oldValue === newValue) return;
+    const propName = this._attrToProp[name];
+    if (propName) {
+      const propDef = this._propertyDefs[propName];
+      (this as unknown as Record<string, unknown>)[propName] = this._deserializeAttribute(newValue, propDef.type);
+    }
+    ${lifecycle.attributeChanged || ""}
+  }` : "", eventBindings = Object.entries(events).map(([event, handler]) => {
+    return `this._root.addEventListener('${event}', (e: Event) => { ${handler} });`;
+  }).join(`
+    `), methodDefinitions = Object.entries(methods).map(([methodName, body]) => {
+    return `
+  ${methodName}(): void {
+    ${body}
+  }`;
+  }).join(`
+`), escapedTemplate = template.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/g, "\\${"), escapedStyles = styles.replace(/\\/g, "\\\\").replace(/`/g, "\\`");
+  return `/**
+ * ${name} - Reactive Web Component (TypeScript)
+ * Auto-generated with reactive properties and lifecycle management
+ *
+ * @customElement ${tag}
+ */
+
+${propsInterface}
+${stateInterface}
+
+/**
+ * Property definition type
+ */
+interface PropertyDefinition {
+  type: 'string' | 'number' | 'boolean' | 'object' | 'array';
+  default?: unknown;
+  reflect?: boolean;
+  attribute?: string | false;
+  observer?: string;
+  render?: boolean;
+}
+
+/**
+ * ${name} custom element
+ */
+export class ${className} extends ${baseElement} {
+  // Property definitions
+  private _propertyDefs: Record<string, PropertyDefinition> = ${JSON.stringify(properties)};
+  private _attrToProp: Record<string, string> = ${JSON.stringify(Object.fromEntries(propertyNames.filter((prop) => properties[prop].attribute !== !1).map((prop) => [properties[prop].attribute || camelToKebab(prop), prop])))};
+
+  // Internal state
+  private _state: ${className}State = ${JSON.stringify(state)};
+  private _renderPending = false;
+  private _isConnected = false;
+  private _root: ShadowRoot | HTMLElement;
+
+  // Property backing fields
+${propertyDeclarations}
+
+  constructor() {
+    super();
+    ${shadowDOM ? 'this.attachShadow({ mode: "open" });' : ""}
+    this._root = ${shadowDOM ? "this.shadowRoot!" : "this"};
+
+    // Initialize properties with defaults
+${propertyNames.map((prop) => {
+    const def = properties[prop], defaultValue = def.default !== void 0 ? JSON.stringify(def.default) : def.type === "string" ? '""' : def.type === "number" ? "0" : def.type === "boolean" ? "false" : def.type === "array" ? "[]" : "{}";
+    return `    this._${prop} = ${defaultValue};`;
+  }).join(`
+`)}
+
+    // Initial render
+    this._render();
+  }
+
+  // =========================================================================
+  // Reactive Properties
+  // =========================================================================
+${propertyAccessors}
+
+  // =========================================================================
+  // State Management
+  // =========================================================================
+
+  /**
+   * Get current internal state
+   */
+  get state(): ${className}State {
+    return { ...this._state };
+  }
+
+  /**
+   * Update internal state and trigger re-render
+   */
+  setState(updates: Partial<${className}State>): void {
+    const oldState = { ...this._state };
+    this._state = { ...this._state, ...updates };
+    this._scheduleRender();
+    this.dispatchEvent(new CustomEvent('state-changed', {
+      detail: { state: this._state, oldState },
+      bubbles: true
+    }));
+  }
+
+  // =========================================================================
+  // Rendering
+  // =========================================================================
+
+  /**
+   * Schedule a render on the next animation frame (batched)
+   */
+  private _scheduleRender(): void {
+    if (this._renderPending) return;
+    this._renderPending = true;
+    requestAnimationFrame(() => {
+      this._renderPending = false;
+      this._render();
+    });
+  }
+
+  /**
+   * Render the component template
+   */
+  private _render(): void {
+    const template = \`${escapedStyles ? `<style>${escapedStyles}</style>` : ""}${escapedTemplate}\`;
+
+    // Interpolate template with property values
+    const rendered = template.replace(/\\{\\{\\s*(\\w+)\\s*\\}\\}/g, (match, propName) => {
+      if (propName in this) {
+        const value = (this as unknown as Record<string, unknown>)[propName];
+        if (value === null || value === undefined) return '';
+        if (typeof value === 'object') return JSON.stringify(value);
+        return String(value);
+      }
+      if (propName in this._state) {
+        const value = this._state[propName as keyof ${className}State];
+        if (value === null || value === undefined) return '';
+        if (typeof value === 'object') return JSON.stringify(value);
+        return String(value);
+      }
+      return match;
+    });
+
+    this._root.innerHTML = rendered;
+    this._bindEvents();
+  }
+
+  /**
+   * Bind event handlers after render
+   */
+  private _bindEvents(): void {
+    ${eventBindings}
+  }
+
+  // =========================================================================
+  // Attribute Handling
+  // =========================================================================
+
+  /**
+   * Deserialize attribute value to property type
+   */
+  private _deserializeAttribute(value: string | null, type: string): unknown {
+    if (value === null) return null;
+    switch (type) {
+      case 'number': return Number(value);
+      case 'boolean': return value !== null && value !== 'false' && value !== '0';
+      case 'object':
+      case 'array':
+        try { return JSON.parse(value); }
+        catch { return type === 'array' ? [] : {}; }
+      default: return value;
+    }
+  }
+
+${attributeChangedCode}
+
+  // =========================================================================
+  // Lifecycle
+  // =========================================================================
+
+  connectedCallback(): void {
+    this._isConnected = true;
+    ${lifecycle.connected || "// Component connected to DOM"}
+  }
+
+  disconnectedCallback(): void {
+    this._isConnected = false;
+    ${lifecycle.disconnected || "// Component disconnected from DOM"}
+  }
+
+  adoptedCallback(): void {
+    ${lifecycle.adopted || "// Component moved to new document"}
+  }
+
+  // =========================================================================
+  // Custom Methods
+  // =========================================================================
+${methodDefinitions}
+}
+
+// Type augmentation for HTMLElementTagNameMap
+declare global {
+  interface HTMLElementTagNameMap {
+    '${tag}': ${className};
+  }
+}
+
+// Register the custom element
+customElements.define('${tag}', ${className});
+
+export default ${className};
+`;
+}
+export function generateReactiveMixin() {
+  return `/**
+ * ReactiveElement Mixin
+ * Adds reactive properties and lifecycle management to web components
+ */
+const ReactiveElement = (Base) => class extends Base {
+  static get observedAttributes() {
+    const props = this.properties || {};
+    return Object.keys(props)
+      .filter(prop => props[prop].attribute !== false)
+      .map(prop => props[prop].attribute || prop.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase());
+  }
+
+  constructor() {
+    super();
+    this._state = {};
+    this._renderPending = false;
+    this._propertyValues = new Map();
+    this._initializeProperties();
+  }
+
+  _initializeProperties() {
+    const props = this.constructor.properties || {};
+    for (const [name, def] of Object.entries(props)) {
+      // Set default value
+      if (def.default !== undefined) {
+        this._propertyValues.set(name, def.default);
+      }
+
+      // Define getter/setter
+      Object.defineProperty(this, name, {
+        get: () => this._propertyValues.get(name),
+        set: (value) => {
+          const oldValue = this._propertyValues.get(name);
+          if (oldValue === value) return;
+          this._propertyValues.set(name, value);
+
+          // Reflect to attribute
+          if (def.reflect) {
+            const attrName = def.attribute || name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+            if (def.type === 'boolean') {
+              value ? this.setAttribute(attrName, '') : this.removeAttribute(attrName);
+            }
+else {
+              this.setAttribute(attrName, def.type === 'object' ? JSON.stringify(value) : String(value));
+            }
+          }
+
+          // Call observer
+          if (def.observer && typeof this[def.observer] === 'function') {
+            this[def.observer](value, oldValue);
+          }
+
+          // Schedule render
+          if (def.render !== false) {
+            this._scheduleRender();
+          }
+
+          // Dispatch event
+          this.dispatchEvent(new CustomEvent(\`\${name}-changed\`, {
+            detail: { value, oldValue },
+            bubbles: true
+          }));
+        },
+        enumerable: true,
+        configurable: true
+      });
+    }
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    const props = this.constructor.properties || {};
+    const propName = Object.keys(props).find(p =>
+      (props[p].attribute || p.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()) === name
+    );
+    if (propName) {
+      const def = props[propName];
+      this[propName] = this._deserialize(newValue, def.type);
+    }
+  }
+
+  _deserialize(value, type) {
+    if (value === null) return null;
+    switch (type) {
+      case 'number': return Number(value);
+      case 'boolean': return value !== null && value !== 'false';
+      case 'object':
+      case 'array':
+        try { return JSON.parse(value); }
+        catch { return type === 'array' ? [] : {}; }
+      default: return value;
+    }
+  }
+
+  get state() {
+    return { ...this._state };
+  }
+
+  setState(updates) {
+    const oldState = { ...this._state };
+    this._state = { ...this._state, ...updates };
+    this._scheduleRender();
+    this.dispatchEvent(new CustomEvent('state-changed', {
+      detail: { state: this._state, oldState },
+      bubbles: true
+    }));
+  }
+
+  _scheduleRender() {
+    if (this._renderPending) return;
+    this._renderPending = true;
+    requestAnimationFrame(() => {
+      this._renderPending = false;
+      if (typeof this.render === 'function') {
+        this.render();
+      }
+    });
+  }
+};
+
+export { ReactiveElement };
+export default ReactiveElement;
+`;
+}
+export function generateReactiveRuntime() {
+  return `/**
+ * stx Reactive Web Components Runtime
+ * Provides base classes and utilities for reactive web components
+ */
+(function(global) {
+  'use strict';
+
+  /**
+   * Base class for reactive web components
+   */
+  class StxElement extends HTMLElement {
+    static get observedAttributes() {
+      const props = this.properties || {};
+      return Object.keys(props)
+        .filter(prop => props[prop].attribute !== false)
+        .map(prop => props[prop].attribute || toKebabCase(prop));
+    }
+
+    constructor() {
+      super();
+      this._state = {};
+      this._renderPending = false;
+      this._props = new Map();
+      this._setupShadowDOM();
+      this._initProperties();
+    }
+
+    _setupShadowDOM() {
+      if (this.constructor.useShadowDOM !== false) {
+        this.attachShadow({ mode: 'open' });
+        this._root = this.shadowRoot;
+      }
+else {
+        this._root = this;
+      }
+    }
+
+    _initProperties() {
+      const props = this.constructor.properties || {};
+      for (const [name, def] of Object.entries(props)) {
+        let value = def.default;
+        this._props.set(name, value);
+
+        Object.defineProperty(this, name, {
+          get: () => this._props.get(name),
+          set: (newValue) => this._setProperty(name, newValue, def),
+          enumerable: true
+        });
+      }
+    }
+
+    _setProperty(name, value, def) {
+      const oldValue = this._props.get(name);
+      if (oldValue === value) return;
+
+      this._props.set(name, value);
+
+      if (def.reflect && def.attribute !== false) {
+        this._reflectToAttribute(name, value, def);
+      }
+
+      if (def.observer && this[def.observer]) {
+        this[def.observer](value, oldValue);
+      }
+
+      if (def.render !== false) {
+        this.requestUpdate();
+      }
+
+      this.dispatchEvent(new CustomEvent(name + '-changed', {
+        detail: { value, oldValue },
+        bubbles: true,
+        composed: true
+      }));
+    }
+
+    _reflectToAttribute(name, value, def) {
+      const attrName = def.attribute || toKebabCase(name);
+      if (value == null || (def.type === 'boolean' && !value)) {
+        this.removeAttribute(attrName);
+      }
+else if (def.type === 'boolean') {
+        this.setAttribute(attrName, '');
+      }
+else if (def.type === 'object' || def.type === 'array') {
+        this.setAttribute(attrName, JSON.stringify(value));
+      }
+else {
+        this.setAttribute(attrName, String(value));
+      }
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (oldValue === newValue) return;
+      const props = this.constructor.properties || {};
+      const propName = Object.keys(props).find(p => {
+        const def = props[p];
+        return (def.attribute || toKebabCase(p)) === name;
+      });
+
+      if (propName) {
+        const def = props[propName];
+        this[propName] = deserialize(newValue, def.type);
+      }
+    }
+
+    get state() {
+      return { ...this._state };
+    }
+
+    setState(updates) {
+      const oldState = { ...this._state };
+      Object.assign(this._state, updates);
+      this.requestUpdate();
+      this.dispatchEvent(new CustomEvent('state-changed', {
+        detail: { state: this._state, oldState },
+        bubbles: true
+      }));
+    }
+
+    requestUpdate() {
+      if (this._renderPending) return;
+      this._renderPending = true;
+      requestAnimationFrame(() => {
+        this._renderPending = false;
+        this.update();
+      });
+    }
+
+    update() {
+      if (this.render) {
+        const content = this.render();
+        if (typeof content === 'string') {
+          this._root.innerHTML = content;
+        }
+      }
+    }
+
+    connectedCallback() {
+      this.update();
+      if (this.connected) this.connected();
+    }
+
+    disconnectedCallback() {
+      if (this.disconnected) this.disconnected();
+    }
+
+    adoptedCallback() {
+      if (this.adopted) this.adopted();
+    }
+
+    // Template helper
+    html(strings, ...values) {
+      return strings.reduce((result, str, i) => {
+        let value = values[i] || '';
+        if (Array.isArray(value)) value = value.join('');
+        if (typeof value === 'object') value = JSON.stringify(value);
+        return result + str + value;
+      }, '');
+    }
+  }
+
+  // Utility functions
+  function toKebabCase(str) {
+    return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+  }
+
+  function deserialize(value, type) {
+    if (value === null) return null;
+    switch (type) {
+      case 'number': return Number(value);
+      case 'boolean': return value !== null && value !== 'false' && value !== '0';
+      case 'object':
+      case 'array':
+        try { return JSON.parse(value); }
+        catch { return type === 'array' ? [] : {}; }
+      default: return value;
+    }
+  }
+
+  // Export to global
+  global.StxElement = StxElement;
+  global.stxComponents = global.stxComponents || {};
+
+  // Helper to define components
+  global.defineStxComponent = function(tag, config) {
+    const { properties, template, styles, methods, ...options } = config;
+
+    class Component extends StxElement {
+      static get properties() { return properties || {}; }
+      static get useShadowDOM() { return options.shadowDOM !== false; }
+
+      render() {
+        let html = template || '';
+        // Simple interpolation
+        html = html.replace(/\\{\\{\\s*(\\w+)\\s*\\}\\}/g, (match, key) => {
+          if (key in this) return this[key] ?? '';
+          if (key in this._state) return this._state[key] ?? '';
+          return match;
+        });
+        return (styles ? '<style>' + styles + '</style>' : '') + html;
+      }
+    }
+
+    // Add methods
+    if (methods) {
+      for (const [name, fn] of Object.entries(methods)) {
+        Component.prototype[name] = fn;
+      }
+    }
+
+    customElements.define(tag, Component);
+    global.stxComponents[tag] = Component;
+    return Component;
+  };
+
+})(typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : this);
+`;
+}
+export function parseSFCComponent(source, defaultTag) {
+  const scriptMatch = source.match(/<script\b[^>]*>([\s\S]*?)<\/script>/i), scriptContent = scriptMatch ? scriptMatch[1].trim() : "";
+  let tag = defaultTag, props = [], shadowDOM = !0;
+  if (scriptContent) {
+    const exportMatch = scriptContent.match(/export\s+default\s+({[\s\S]*})/);
+    if (exportMatch)
+      try {
+        const configStr = exportMatch[1], tagMatch = configStr.match(/tag\s*:\s*['"`]([^'"`]+)['"`]/);
+        if (tagMatch)
+          tag = tagMatch[1];
+        const propsMatch = configStr.match(/props\s*:\s*\[([\s\S]*?)\]/);
+        if (propsMatch)
+          props = propsMatch[1].split(",").map((p) => p.trim().replace(/['"`]/g, "")).filter((p) => p.length > 0);
+        const shadowMatch = configStr.match(/shadowDOM\s*:\s*(true|false)/);
+        if (shadowMatch)
+          shadowDOM = shadowMatch[1] === "true";
+      } catch {}
+  }
+  const templateMatch = source.match(/<template\b(?![^>]*\bid\s*=)[^>]*>([\s\S]*?)<\/template>/i), template = templateMatch ? templateMatch[1].trim() : "", styleMatch = source.match(/<style\b[^>]*>([\s\S]*?)<\/style>/i), styles = styleMatch ? styleMatch[1].trim() : "";
+  return {
+    tag,
+    props,
+    template,
+    styles,
+    script: scriptContent,
+    shadowDOM
+  };
+}
+export function generateSFCWebComponent(parsed) {
+  const { tag, props, template, styles, shadowDOM } = parsed, className = tag.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(""), escapedTemplate = template.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/g, "\\${"), escapedStyles = styles.replace(/\\/g, "\\\\").replace(/`/g, "\\`"), observedAttrs = props.map((p) => `'${p}'`).join(", "), propertyAccessors = props.map((prop) => `
+  get ${prop}() {
+    return this.getAttribute('${prop}') || '';
+  }
+  set ${prop}(value) {
+    if (value) {
+      this.setAttribute('${prop}', value);
+    }
+else {
+      this.removeAttribute('${prop}');
+    }
+  }`).join(`
+`);
+  return `/**
+ * ${className} Web Component
+ * Auto-generated from SFC
+ */
+class ${className} extends HTMLElement {
+  constructor() {
+    super();
+    ${shadowDOM ? "this.attachShadow({ mode: 'open' });" : ""}
+    this._render();
+  }
+
+  static get observedAttributes() {
+    return [${observedAttrs}];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      this._render();
+    }
+  }
+${propertyAccessors}
+
+  _render() {
+    const template = \`${escapedStyles ? `<style>${escapedStyles}</style>` : ""}${escapedTemplate}\`;
+
+    // Interpolate {{ prop }} with attribute values
+    const rendered = template.replace(/\\{\\{\\s*(\\w+)\\s*\\}\\}/g, (match, prop) => {
+      return this.getAttribute(prop) || '';
+    });
+
+    ${shadowDOM ? "this.shadowRoot.innerHTML = rendered;" : "this.innerHTML = rendered;"}
+  }
+
+  connectedCallback() {
+    this._render();
+  }
+}
+
+customElements.define('${tag}', ${className});
+`;
+}
+export async function webComponentDirectiveHandler(content, params, context, filePath) {
+  if (params.length < 1)
+    return inlineError("WebComponent", "@webcomponent directive requires at least the tag name parameter", ErrorCodes.INVALID_DIRECTIVE_SYNTAX);
+  const tagName = params[0].replace(/['"]/g, ""), componentsDir = (context.__stx_options || {}).componentsDir || "components", possiblePaths = path.isAbsolute(componentsDir) ? [
+    path.join(componentsDir, `${tagName}.stx`),
+    path.join(path.dirname(filePath), `${tagName}.stx`)
+  ] : [
+    path.join(path.dirname(filePath), componentsDir, `${tagName}.stx`),
+    path.join(process.cwd(), componentsDir, `${tagName}.stx`),
+    path.join(path.dirname(filePath), `${tagName}.stx`)
+  ];
+  let componentSource = null;
+  for (const componentPath of possiblePaths)
+    if (await fileExists(componentPath)) {
+      componentSource = await Bun.file(componentPath).text();
+      break;
+    }
+  if (!componentSource)
+    return inlineError("WebComponent", `Component file not found: ${tagName}.stx`, ErrorCodes.FILE_NOT_FOUND);
+  const parsed = parseSFCComponent(componentSource, tagName);
+  return `<script type="module">
+${generateSFCWebComponent(parsed)}
+</script>`;
+}