@coherent.js/core 1.0.0-beta.5 → 1.0.0-beta.7

package/dist/index.cjs

@@ -24,9 +24,14 @@ __export(index_exports, {
   ComponentLifecycle: () => ComponentLifecycle,
   DOMEventIntegration: () => DOMEventIntegration,
   EventBus: () => EventBus,
+  FORBIDDEN_CHILDREN: () => FORBIDDEN_CHILDREN,
   GlobalErrorHandler: () => GlobalErrorHandler,
+  HTMLNestingError: () => HTMLNestingError,
+  Island: () => Island,
   LIFECYCLE_PHASES: () => LIFECYCLE_PHASES,
   VERSION: () => VERSION,
+  checkPeerDependencies: () => checkPeerDependencies,
+  compose: () => compose,
   createActionHandlers: () => createActionHandlers,
   createAsyncErrorBoundary: () => createAsyncErrorBoundary,
   createComponent: () => createComponent,
@@ -34,10 +39,12 @@ __export(index_exports, {
   createElement: () => createElement,
   createErrorBoundary: () => createErrorBoundary,
   createErrorFallback: () => createErrorFallback,
+  createErrorResponse: () => createErrorResponse,
   createEventBus: () => createEventBus,
   createEventComponent: () => createEventComponent,
   createEventHandlers: () => createEventHandlers,
   createGlobalErrorHandler: () => createGlobalErrorHandler,
+  createLazyIntegration: () => createLazyIntegration,
   createLifecycleHooks: () => createLifecycleHooks,
   createStateManager: () => createStateManager,
   createTextNode: () => createTextNode,
@@ -49,29 +56,40 @@ __export(index_exports, {
   emitSync: () => emitSync,
   evaluateLazy: () => evaluateLazy,
   eventSystem: () => events_default,
+  fp: () => fp,
   getComponent: () => getComponent,
   getRegisteredComponents: () => getRegisteredComponents,
   globalDOMIntegration: () => globalDOMIntegration,
   globalEventBus: () => globalEventBus,
   h: () => h,
   handleAction: () => handleAction,
+  hasChildren: () => hasChildren,
+  hoc: () => hoc,
+  importPeerDependency: () => importPeerDependency,
   initializeDOMIntegration: () => initializeDOMIntegration,
-  isCoherentObject: () => isCoherentObject,
+  isCoherentComponent: () => isCoherentComponent,
+  isCoherentObject: () => isCoherentObject2,
   isLazy: () => isLazy,
+  isPeerDependencyAvailable: () => isPeerDependencyAvailable,
   lazy: () => lazy,
   lifecycleUtils: () => componentUtils,
   memo: () => memo2,
   memoize: () => memoize,
+  normalizeChildren: () => normalizeChildren,
   off: () => off,
   on: () => on,
   once: () => once,
   performanceMonitor: () => performanceMonitor,
   registerAction: () => registerAction,
   registerComponent: () => registerComponent,
-  render: () => render,
+  render: () => render2,
+  renderComponentFactory: () => renderComponentFactory,
+  renderWithMonitoring: () => renderWithMonitoring,
+  renderWithTemplate: () => renderWithTemplate,
   shadowDOM: () => shadow_dom_exports,
   useHooks: () => useHooks,
   validateComponent: () => validateComponent2,
+  validateNesting: () => validateNesting,
   withErrorBoundary: () => withErrorBoundary,
   withEventBus: () => withEventBus,
   withEventState: () => withEventState,
@@ -80,6 +98,7 @@ __export(index_exports, {
   withStateUtils: () => withStateUtils
 });
 module.exports = __toCommonJS(index_exports);
+var import_node_fs = require("node:fs");
 
 // src/performance/monitor.js
 function createPerformanceMonitor(options = {}) {
@@ -670,1580 +689,2734 @@ function validateComponent(component, path = "root") {
   }
   throw new Error(`Invalid component type at ${path}: ${typeof component}`);
 }
-
-// src/components/component-system.js
-var COMPONENT_REGISTRY = /* @__PURE__ */ new Map();
-var COMPONENT_METADATA = /* @__PURE__ */ new WeakMap();
-var ComponentState = class {
-  constructor(initialState = {}) {
-    this.state = { ...initialState };
-    this.listeners = /* @__PURE__ */ new Set();
-    this.isUpdating = false;
+function isCoherentObject(obj) {
+  if (!obj || typeof obj !== "object" || Array.isArray(obj)) {
+    return false;
   }
-  /**
-   * Get state value by key or entire state
-   * 
-   * @param {string} [key] - State key to retrieve
-   * @returns {*} State value or entire state object
-   */
-  get(key) {
-    return key ? this.state[key] : { ...this.state };
+  const keys = Object.keys(obj);
+  if (keys.length === 0) {
+    return false;
   }
-  /**
-   * Update state with new values
-   * 
-   * @param {Object} updates - State updates to apply
-   * @returns {ComponentState} This instance for chaining
-   */
-  set(updates) {
-    if (this.isUpdating) return this;
-    const oldState = { ...this.state };
-    if (typeof updates === "function") {
-      updates = updates(oldState);
+  return keys.every((key) => {
+    if (key === "text") return true;
+    return /^[a-zA-Z][a-zA-Z0-9-]*$/.test(key);
+  });
+}
+function extractProps(coherentObj) {
+  if (!isCoherentObject(coherentObj)) {
+    return {};
+  }
+  const props = {};
+  const keys = Object.keys(coherentObj);
+  keys.forEach((tag) => {
+    const value = coherentObj[tag];
+    if (value && typeof value === "object" && !Array.isArray(value)) {
+      props[tag] = { ...value };
+    } else {
+      props[tag] = { text: value };
     }
-    this.state = { ...this.state, ...updates };
-    this.notifyListeners(oldState, this.state);
-    return this;
-  }
-  subscribe(listener) {
-    this.listeners.add(listener);
-    return () => this.listeners.delete(listener);
+  });
+  return props;
+}
+function hasChildren(component) {
+  if (Array.isArray(component)) {
+    return component.length > 0;
   }
-  notifyListeners(oldState, newState) {
-    if (this.listeners.size === 0) return;
-    this.isUpdating = true;
-    this.listeners.forEach((listener) => {
-      try {
-        listener(newState, oldState);
-      } catch (_error) {
-        console.error("State listener _error:", _error);
-      }
+  if (isCoherentObject(component)) {
+    if (component.children !== void 0 && component.children !== null) {
+      return Array.isArray(component.children) ? component.children.length > 0 : true;
+    }
+    const keys = Object.keys(component);
+    return keys.some((key) => {
+      const value = component[key];
+      return value && typeof value === "object" && value.children;
     });
-    this.isUpdating = false;
   }
+  return false;
+}
+function normalizeChildren(children) {
+  if (children === null || children === void 0) {
+    return [];
+  }
+  if (Array.isArray(children)) {
+    return children.flat().filter((child) => child !== null && child !== void 0);
+  }
+  return [children];
+}
+
+// src/rendering/base-renderer.js
+var DEFAULT_RENDERER_CONFIG = {
+  // Core rendering options
+  maxDepth: 100,
+  enableValidation: true,
+  enableMonitoring: false,
+  validateInput: true,
+  // HTML Renderer specific options
+  enableCache: true,
+  minify: false,
+  cacheSize: 1e3,
+  cacheTTL: 3e5,
+  // 5 minutes
+  // Streaming Renderer specific options
+  chunkSize: 1024,
+  // Size of each chunk in bytes
+  bufferSize: 4096,
+  // Internal buffer size
+  enableMetrics: false,
+  // Track streaming metrics
+  yieldThreshold: 100,
+  // Yield control after N elements
+  encoding: "utf8",
+  // Output encoding
+  // DOM Renderer specific options
+  enableHydration: true,
+  // Enable hydration support
+  namespace: null,
+  // SVG namespace support
+  // Performance options
+  enablePerformanceTracking: false,
+  performanceThreshold: 10,
+  // ms threshold for slow renders
+  // Development options
+  enableDevWarnings: typeof process !== "undefined" && process.env && true,
+  enableDebugLogging: false,
+  // Error handling options
+  errorFallback: "",
+  // Fallback content on errors
+  throwOnError: true
+  // Whether to throw or return fallback
 };
-var Component = class _Component {
-  constructor(definition = {}) {
-    this.definition = definition;
-    this.name = definition.name || "AnonymousComponent";
-    this.props = {};
-    this.state = new ComponentState(definition.state || {});
-    this.children = [];
-    this.parent = null;
-    this.rendered = null;
-    this.isMounted = false;
-    this.isDestroyed = false;
-    this.hooks = {
-      beforeCreate: definition.beforeCreate || (() => {
-      }),
-      created: definition.created || (() => {
-      }),
-      beforeMount: definition.beforeMount || (() => {
-      }),
-      mounted: definition.mounted || (() => {
-      }),
-      beforeUpdate: definition.beforeUpdate || (() => {
-      }),
-      updated: definition.updated || (() => {
-      }),
-      beforeDestroy: definition.beforeDestroy || (() => {
-      }),
-      destroyed: definition.destroyed || (() => {
-      }),
-      errorCaptured: definition.errorCaptured || (() => {
-      })
+var BaseRenderer = class {
+  constructor(options = {}) {
+    this.config = this.validateAndMergeConfig(options);
+    this.metrics = {
+      startTime: null,
+      endTime: null,
+      elementsProcessed: 0
     };
-    this.methods = definition.methods || {};
-    Object.keys(this.methods).forEach((methodName) => {
-      if (typeof this.methods[methodName] === "function") {
-        this[methodName] = this.methods[methodName].bind(this);
-      }
-    });
-    this.computed = definition.computed || {};
-    this.computedCache = /* @__PURE__ */ new Map();
-    this.watchers = definition.watch || {};
-    this.setupWatchers();
-    COMPONENT_METADATA.set(this, {
-      createdAt: Date.now(),
-      updateCount: 0,
-      renderCount: 0
-    });
-    this.callHook("beforeCreate");
-    this.initialize();
-    this.callHook("created");
   }
   /**
-   * Initialize component
+   * Validate and merge configuration options
    */
-  initialize() {
-    this.unsubscribeState = this.state.subscribe((newState, oldState) => {
-      this.onStateChange(newState, oldState);
-    });
-    this.initializeComputed();
+  validateAndMergeConfig(options) {
+    const config = { ...DEFAULT_RENDERER_CONFIG, ...options };
+    if (typeof config.maxDepth !== "number") {
+      throw new Error("maxDepth must be a number");
+    }
+    if (config.maxDepth <= 0) {
+      throw new Error("maxDepth must be a positive number");
+    }
+    if (typeof config.chunkSize !== "number") {
+      throw new Error("chunkSize must be a number");
+    }
+    if (config.chunkSize <= 0) {
+      throw new Error("chunkSize must be a positive number");
+    }
+    if (typeof config.yieldThreshold !== "number") {
+      throw new Error("yieldThreshold must be a number");
+    }
+    if (config.yieldThreshold <= 0) {
+      throw new Error("yieldThreshold must be a positive number");
+    }
+    if (config.enableDevWarnings) {
+      if (config.maxDepth > 1e3) {
+        console.warn("Coherent.js: maxDepth > 1000 may cause performance issues");
+      }
+      if (config.chunkSize > 16384) {
+        console.warn("Coherent.js: Large chunkSize may increase memory usage");
+      }
+    }
+    return config;
   }
   /**
-   * Set up watchers for reactive data
+   * Get configuration for specific renderer type
    */
-  setupWatchers() {
-    Object.keys(this.watchers).forEach((key) => {
-      const handler = this.watchers[key];
-      this.state.subscribe((newState, oldState) => {
-        if (newState[key] !== oldState[key]) {
-          handler.call(this, newState[key], oldState[key]);
-        }
-      });
-    });
+  getRendererConfig(rendererType) {
+    const baseConfig = { ...this.config };
+    switch (rendererType) {
+      case "html":
+        return {
+          ...baseConfig,
+          // HTML-specific defaults
+          enableCache: baseConfig.enableCache !== false,
+          enableMonitoring: baseConfig.enableMonitoring !== false
+        };
+      case "streaming":
+        return {
+          ...baseConfig,
+          // Streaming-specific defaults
+          enableMetrics: baseConfig.enableMetrics ?? false,
+          maxDepth: baseConfig.maxDepth ?? 1e3
+          // Higher default for streaming
+        };
+      case "dom":
+        return {
+          ...baseConfig,
+          // DOM-specific defaults
+          enableHydration: baseConfig.enableHydration !== false
+        };
+      default:
+        return baseConfig;
+    }
   }
   /**
-   * Initialize computed properties
+   * Validate component structure
    */
-  initializeComputed() {
-    Object.keys(this.computed).forEach((key) => {
-      Object.defineProperty(this, key, {
-        get: () => {
-          if (!this.computedCache.has(key)) {
-            const value = this.computed[key].call(this);
-            this.computedCache.set(key, value);
-          }
-          return this.computedCache.get(key);
-        },
-        enumerable: true
-      });
-    });
+  validateComponent(component) {
+    if (this.config.validateInput !== false) {
+      return validateComponent(component);
+    }
+    return true;
   }
   /**
-   * Handle state changes
+   * Check if component is valid for rendering
    */
-  onStateChange() {
-    if (this.isDestroyed) return;
-    this.computedCache.clear();
-    if (this.isMounted) {
-      this.update();
-    }
+  isValidComponent(component) {
+    if (component === null || component === void 0) return true;
+    if (typeof component === "string" || typeof component === "number") return true;
+    if (typeof component === "function") return true;
+    if (Array.isArray(component)) return component.every((child) => this.isValidComponent(child));
+    if (isCoherentObject(component)) return true;
+    return false;
   }
   /**
-   * Call lifecycle hook
+   * Validate rendering depth to prevent stack overflow
    */
-  callHook(hookName, ...args) {
-    try {
-      if (this.hooks[hookName]) {
-        return this.hooks[hookName].call(this, ...args);
-      }
-    } catch (_error) {
-      this.handleError(_error, `${hookName} hook`);
+  validateDepth(depth) {
+    if (depth > this.config.maxDepth) {
+      throw new Error(`Maximum render depth (${this.config.maxDepth}) exceeded`);
     }
   }
   /**
-   * Handle component errors
+   * Handle different component types with consistent logic
    */
-  handleError(_error) {
-    console.error(`Component Error in ${this.name}:`, _error);
-    this.callHook("errorCaptured", _error);
-    if (this.parent && this.parent.handleError) {
-      this.parent.handleError(_error, `${this.name} -> ${context}`);
+  processComponentType(component) {
+    if (component === null || component === void 0) {
+      return { type: "empty", value: "" };
+    }
+    if (typeof component === "string") {
+      return { type: "text", value: component };
+    }
+    if (typeof component === "number" || typeof component === "boolean") {
+      return { type: "text", value: String(component) };
+    }
+    if (typeof component === "function") {
+      return { type: "function", value: component };
+    }
+    if (Array.isArray(component)) {
+      return { type: "array", value: component };
     }
+    if (isCoherentObject(component)) {
+      return { type: "element", value: component };
+    }
+    return { type: "unknown", value: component };
   }
   /**
-   * Render the component
+   * Execute function components with _error handling
    */
-  render(props = {}) {
-    if (this.isDestroyed) {
-      console.warn(`Attempting to render destroyed component: ${this.name}`);
-      return null;
-    }
+  executeFunctionComponent(func, depth = 0) {
     try {
-      const metadata = COMPONENT_METADATA.get(this);
-      if (metadata) {
-        metadata.renderCount++;
-      }
-      this.props = { ...props };
-      if (typeof this.definition.render === "function") {
-        this.rendered = this.definition.render.call(this, this.props, this.state.get());
-      } else if (typeof this.definition.template !== "undefined") {
-        this.rendered = this.processTemplate(this.definition.template, this.props, this.state.get());
+      const isContextProvider = func.length > 0 || func.isContextProvider;
+      let result;
+      if (isContextProvider) {
+        result = func((children) => {
+          return this.renderComponent(children, this.config, depth + 1);
+        });
       } else {
-        throw new Error(`Component ${this.name} must have either render method or template`);
+        result = func();
       }
-      if (this.rendered !== null) {
-        validateComponent(this.rendered, this.name);
+      if (typeof result === "function") {
+        return this.executeFunctionComponent(result, depth);
       }
-      return this.rendered;
+      return result;
     } catch (_error) {
-      this.handleError(_error);
-      return { div: { className: "component-_error", text: `Error in ${this.name}` } };
+      if (this.config.enableMonitoring) {
+        performanceMonitor.recordError("functionComponent", _error);
+      }
+      if (typeof process !== "undefined" && process.env && true) {
+        console.warn("Coherent.js Function Component Error:", _error.message);
+      }
+      return null;
     }
   }
   /**
-   * Process template with data
+   * Process element children consistently
    */
-  processTemplate(template, props, state) {
-    if (typeof template === "function") {
-      return template.call(this, props, state);
-    }
-    if (typeof template === "string") {
-      return template.replace(/\{\{(\w+)\}\}/g, (match, key) => {
-        return props[key] || state[key] || "";
-      });
+  processChildren(children, options, depth) {
+    if (!hasChildren({ children })) {
+      return [];
     }
-    const processed = deepClone(template);
-    this.interpolateObject(processed, { ...props, ...state });
-    return processed;
+    const normalizedChildren = normalizeChildren(children);
+    return normalizedChildren.map(
+      (child) => this.renderComponent(child, options, depth + 1)
+    );
   }
   /**
-   * Interpolate object with data
+   * Extract and process element attributes
    */
-  interpolateObject(obj, data) {
-    if (typeof obj === "string") {
-      return obj.replace(/\{\{(\w+)\}\}/g, (match, key) => data[key] || "");
-    }
-    if (Array.isArray(obj)) {
-      return obj.map((item) => this.interpolateObject(item, data));
-    }
-    if (obj && typeof obj === "object") {
-      Object.keys(obj).forEach((key) => {
-        obj[key] = this.interpolateObject(obj[key], data);
-      });
-    }
-    return obj;
+  extractElementAttributes(props) {
+    if (!props || typeof props !== "object") return {};
+    const attributes = { ...props };
+    delete attributes.children;
+    delete attributes.text;
+    return attributes;
   }
   /**
-   * Mount the component
+   * Record performance metrics
    */
-  mount() {
-    if (this.isMounted || this.isDestroyed) return this;
-    this.callHook("beforeMount");
-    this.isMounted = true;
-    this.callHook("mounted");
-    return this;
+  recordPerformance(operation, startTime, fromCache = false, metadata = {}) {
+    if (this.config.enableMonitoring) {
+      performanceMonitor.recordRender(
+        operation,
+        this.getCurrentTime() - startTime,
+        fromCache,
+        metadata
+      );
+    }
   }
   /**
-   * Update the component
+   * Record _error for monitoring
    */
-  update() {
-    if (!this.isMounted || this.isDestroyed) return this;
-    const metadata = COMPONENT_METADATA.get(this);
-    if (metadata) {
-      metadata.updateCount++;
+  recordError(operation, _error, metadata = {}) {
+    if (this.config.enableMonitoring) {
+      performanceMonitor.recordError(operation, _error, metadata);
     }
-    this.callHook("beforeUpdate");
-    this.callHook("updated");
-    return this;
   }
   /**
-   * Destroy the component
+   * Get current timestamp with fallback
    */
-  destroy() {
-    if (this.isDestroyed) return this;
-    this.callHook("beforeDestroy");
-    if (this.unsubscribeState) {
-      this.unsubscribeState();
+  getCurrentTime() {
+    if (typeof performance !== "undefined" && performance.now) {
+      return performance.now();
     }
-    this.children.forEach((child) => {
-      if (child.destroy) {
-        child.destroy();
-      }
-    });
-    this.isMounted = false;
-    this.isDestroyed = true;
-    this.children = [];
-    this.parent = null;
-    this.callHook("destroyed");
-    return this;
+    return Date.now();
   }
   /**
-   * Get component metadata
+   * Start performance timing
    */
-  getMetadata() {
-    return COMPONENT_METADATA.get(this) || {};
+  startTiming() {
+    this.metrics.startTime = this.getCurrentTime();
   }
   /**
-   * Clone component with new props/state
+   * End performance timing
    */
-  clone(overrides = {}) {
-    const newDefinition = { ...this.definition, ...overrides };
-    return new _Component(newDefinition);
+  endTiming() {
+    this.metrics.endTime = this.getCurrentTime();
   }
-};
-function createComponent(definition) {
-  if (typeof definition === "function") {
-    definition = {
-      name: definition.name || "FunctionalComponent",
-      render: definition
+  /**
+   * Get performance metrics
+   */
+  getMetrics() {
+    const duration = this.metrics.endTime ? this.metrics.endTime - this.metrics.startTime : this.getCurrentTime() - this.metrics.startTime;
+    return {
+      ...this.metrics,
+      duration,
+      elementsPerSecond: this.metrics.elementsProcessed / (duration / 1e3)
     };
   }
-  return new Component(definition);
-}
-function defineComponent(definition) {
-  const componentFactory = (props) => {
-    const component = new Component(definition);
-    return component.render(props);
-  };
-  componentFactory.componentName = definition.name || "Component";
-  componentFactory.definition = definition;
-  return componentFactory;
+  /**
+   * Reset metrics for new render
+   */
+  resetMetrics() {
+    this.metrics = {
+      startTime: null,
+      endTime: null,
+      elementsProcessed: 0
+    };
+  }
+  /**
+   * Abstract method - must be implemented by subclasses
+   */
+  renderComponent() {
+    throw new Error("renderComponent must be implemented by subclass");
+  }
+  /**
+   * Abstract method - must be implemented by subclasses
+   */
+  render() {
+    throw new Error("render must be implemented by subclass");
+  }
+};
+var RendererUtils = {
+  /**
+   * Check if element is static (no functions or circular references)
+   */
+  isStaticElement(element, visited = /* @__PURE__ */ new WeakSet()) {
+    if (!element || typeof element !== "object") {
+      return typeof element === "string" || typeof element === "number";
+    }
+    if (visited.has(element)) {
+      return false;
+    }
+    visited.add(element);
+    for (const [_key, value] of Object.entries(element)) {
+      if (typeof value === "function") return false;
+      if (Array.isArray(value)) {
+        const allStatic = value.every((child) => RendererUtils.isStaticElement(child, visited));
+        if (!allStatic) return false;
+      } else if (typeof value === "object" && value !== null) {
+        if (!RendererUtils.isStaticElement(value, visited)) return false;
+      }
+    }
+    return true;
+  },
+  /**
+   * Check if object has functions (for caching decisions)
+   */
+  hasFunctions(obj, visited = /* @__PURE__ */ new WeakSet()) {
+    if (visited.has(obj)) return false;
+    visited.add(obj);
+    for (const value of Object.values(obj)) {
+      if (typeof value === "function") return true;
+      if (typeof value === "object" && value !== null && RendererUtils.hasFunctions(value, visited)) {
+        return true;
+      }
+    }
+    return false;
+  },
+  /**
+   * Get element complexity score
+   */
+  getElementComplexity(element) {
+    if (!element || typeof element !== "object") return 1;
+    let complexity = Object.keys(element).length;
+    if (element.children && Array.isArray(element.children)) {
+      complexity += element.children.reduce(
+        (sum, child) => sum + RendererUtils.getElementComplexity(child),
+        0
+      );
+    }
+    return complexity;
+  },
+  /**
+   * Generate cache key for element
+   */
+  generateCacheKey(tagName, element) {
+    try {
+      const keyData = {
+        tag: tagName,
+        props: extractProps(element),
+        hasChildren: hasChildren(element),
+        childrenType: Array.isArray(element.children) ? "array" : typeof element.children
+      };
+      return `element:${JSON.stringify(keyData)}`;
+    } catch (_error) {
+      if (typeof process !== "undefined" && process.env && true) {
+        console.warn("Failed to generate cache key:", _error);
+      }
+      return null;
+    }
+  },
+  /**
+   * Check if element is cacheable
+   */
+  isCacheable(element, options) {
+    if (!options.enableCache) return false;
+    if (RendererUtils.hasFunctions(element)) return false;
+    if (RendererUtils.getElementComplexity(element) > 1e3) return false;
+    const cacheKey = RendererUtils.generateCacheKey(element.tagName || "unknown", element);
+    if (!cacheKey) return false;
+    return true;
+  }
+};
+
+// src/core/html-nesting-rules.js
+var FORBIDDEN_CHILDREN = {
+  // Phrasing content only - cannot contain flow content
+  p: /* @__PURE__ */ new Set([
+    "address",
+    "article",
+    "aside",
+    "blockquote",
+    "div",
+    "dl",
+    "fieldset",
+    "footer",
+    "form",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "header",
+    "hr",
+    "main",
+    "nav",
+    "ol",
+    "p",
+    "pre",
+    "section",
+    "table",
+    "ul",
+    "figure",
+    "figcaption"
+  ]),
+  // Interactive content restrictions
+  a: /* @__PURE__ */ new Set(["a"]),
+  // Links cannot nest
+  button: /* @__PURE__ */ new Set(["button", "a", "input", "select", "textarea", "label"]),
+  label: /* @__PURE__ */ new Set(["label"]),
+  // Table structure restrictions
+  thead: /* @__PURE__ */ new Set(["thead", "tbody", "tfoot", "caption", "colgroup", "tr"]),
+  tbody: /* @__PURE__ */ new Set(["thead", "tbody", "tfoot", "caption", "colgroup"]),
+  tfoot: /* @__PURE__ */ new Set(["thead", "tbody", "tfoot", "caption", "colgroup"]),
+  tr: /* @__PURE__ */ new Set(["tr", "thead", "tbody", "tfoot", "table"]),
+  td: /* @__PURE__ */ new Set(["td", "th", "tr", "thead", "tbody", "tfoot", "table"]),
+  th: /* @__PURE__ */ new Set(["td", "th", "tr", "thead", "tbody", "tfoot", "table"]),
+  // Other common restrictions
+  select: /* @__PURE__ */ new Set(["select", "input", "textarea"]),
+  option: /* @__PURE__ */ new Set(["option", "optgroup"])
+};
+function validateNesting(parentTag, childTag, path = "", options = {}) {
+  if (!parentTag || !childTag) {
+    return true;
+  }
+  const parent = parentTag.toLowerCase();
+  const child = childTag.toLowerCase();
+  const forbidden = FORBIDDEN_CHILDREN[parent];
+  if (!forbidden || !forbidden.has(child)) {
+    return true;
+  }
+  const pathSuffix = path ? ` at ${path}` : "";
+  const message = `Invalid HTML nesting: <${child}> cannot be a child of <${parent}>${pathSuffix}. Browsers will auto-correct this, causing potential hydration mismatches.`;
+  if (options.throwOnError) {
+    throw new HTMLNestingError(message, { parent, child, path });
+  }
+  const shouldWarn = options.warn !== false && (typeof process === "undefined" || !process.env || true);
+  if (shouldWarn) {
+    console.warn(`[Coherent.js] ${message}`);
+  }
+  return false;
 }
-function registerComponent(name, definition) {
-  if (COMPONENT_REGISTRY.has(name)) {
-    console.warn(`Component ${name} is already registered. Overriding.`);
+var HTMLNestingError = class extends Error {
+  constructor(message, context2 = {}) {
+    super(message);
+    this.name = "HTMLNestingError";
+    this.parent = context2.parent;
+    this.child = context2.child;
+    this.path = context2.path;
   }
-  const component = typeof definition === "function" ? defineComponent({ name, render: definition }) : defineComponent(definition);
-  COMPONENT_REGISTRY.set(name, component);
-  return component;
+};
+
+// src/core/html-utils.js
+function escapeHtml(text) {
+  if (typeof text !== "string") return text;
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function getComponent(name) {
-  return COMPONENT_REGISTRY.get(name);
+function isVoidElement(tagName) {
+  if (typeof tagName !== "string") {
+    return false;
+  }
+  const voidElements = /* @__PURE__ */ new Set([
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "link",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr"
+  ]);
+  return voidElements.has(tagName.toLowerCase());
 }
-function getRegisteredComponents() {
-  return new Map(COMPONENT_REGISTRY);
+function formatAttributes(props) {
+  let formatted = "";
+  for (const key in props) {
+    if (props.hasOwnProperty(key)) {
+      let value = props[key];
+      const attributeName = key === "className" ? "class" : key;
+      if (typeof value === "function") {
+        if (attributeName.startsWith("on")) {
+          const actionId = `__coherent_action_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+          const DEBUG = typeof process !== "undefined" && process && process.env && (process.env.COHERENT_DEBUG === "1" || true) || typeof window !== "undefined" && window && window.COHERENT_DEBUG === true;
+          if (typeof global !== "undefined") {
+            if (!global.__coherentActionRegistry) {
+              global.__coherentActionRegistry = {};
+              if (DEBUG) console.log("Initialized global action registry");
+            }
+            global.__coherentActionRegistry[actionId] = value;
+            if (DEBUG) console.log(`Added action ${actionId} to global registry, total: ${Object.keys(global.__coherentActionRegistry).length}`);
+            if (DEBUG) console.log(`Global registry keys: ${Object.keys(global.__coherentActionRegistry).join(", ")}`);
+            if (DEBUG) {
+              if (typeof global.__coherentActionRegistryLog === "undefined") {
+                global.__coherentActionRegistryLog = [];
+              }
+              global.__coherentActionRegistryLog.push({
+                action: "add",
+                actionId,
+                timestamp: Date.now(),
+                registrySize: Object.keys(global.__coherentActionRegistry).length
+              });
+            }
+          } else if (typeof window !== "undefined") {
+            if (!window.__coherentActionRegistry) {
+              window.__coherentActionRegistry = {};
+              if (DEBUG) console.log("Initialized window action registry");
+            }
+            window.__coherentActionRegistry[actionId] = value;
+            if (DEBUG) console.log(`Added action ${actionId} to window registry, total: ${Object.keys(window.__coherentActionRegistry).length}`);
+            if (DEBUG) console.log(`Window registry keys: ${Object.keys(window.__coherentActionRegistry).join(", ")}`);
+          }
+          const eventType = attributeName.substring(2);
+          formatted += ` data-action="${actionId}" data-event="${eventType}"`;
+          continue;
+        } else {
+          try {
+            value = value();
+          } catch (_error) {
+            console.warn(`Error executing function for attribute '${key}':`, {
+              _error: _error.message,
+              stack: _error.stack,
+              attributeKey: key
+            });
+            value = "";
+          }
+        }
+      }
+      if (attributeName === "style" && typeof value === "object" && value !== null) {
+        const cssString = Object.entries(value).map(([prop, val]) => {
+          const kebabProp = prop.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+          return `${kebabProp}: ${val}`;
+        }).join("; ");
+        formatted += ` ${attributeName}="${escapeHtml(cssString)}"`;
+      } else if (value === true) {
+        formatted += ` ${attributeName}`;
+      } else if (value !== false && value !== null && value !== void 0) {
+        formatted += ` ${attributeName}="${escapeHtml(String(value))}"`;
+      }
+    }
+  }
+  return formatted.trim();
 }
-if (performanceMonitor) {
-  const originalRender = Component.prototype.render;
-  Component.prototype.render = function(...args) {
-    const start = performance.now();
-    const result = originalRender.apply(this, args);
-    const duration = performance.now() - start;
-    performanceMonitor.recordMetric("renderTime", duration, {
-      type: "component",
-      name: this.name,
-      propsSize: JSON.stringify(this.props || {}).length,
-      hasState: Object.keys(this.state?.get() || {}).length > 0
-    });
-    return result;
-  };
+function minifyHtml(html, options = {}) {
+  if (!options.minify) return html;
+  return html.replace(/<!--[\s\S]*?-->/g, "").replace(/\s+/g, " ").replace(/>\s+</g, "><").trim();
 }
-function lazy(factory, options = {}) {
+
+// src/performance/cache-manager.js
+function createCacheManager(options = {}) {
   const {
-    cache = true,
-    // Cache the result after first evaluation
-    timeout = null,
-    // Optional timeout for evaluation
-    fallback = null,
-    // Fallback value if evaluation fails
-    onError = null,
-    // Error handler
-    dependencies = []
-    // Dependencies that invalidate cache
+    maxCacheSize = 1e3,
+    maxMemoryMB = 100,
+    ttlMs = 1e3 * 60 * 5,
+    // 5 minutes
+    enableStatistics = true
   } = options;
-  let cached = false;
-  let cachedValue = null;
-  let isEvaluating = false;
-  let lastDependencyHash = null;
-  const lazyWrapper = {
-    // Mark as lazy for identification
-    __isLazy: true,
-    __factory: factory,
-    __options: options,
-    // Evaluation method
-    evaluate(...args) {
-      if (isEvaluating) {
-        console.warn("Lazy evaluation cycle detected, returning fallback");
-        return fallback;
+  const caches = {
+    static: /* @__PURE__ */ new Map(),
+    // Never-changing components
+    component: /* @__PURE__ */ new Map(),
+    // Component results with deps
+    template: /* @__PURE__ */ new Map(),
+    // Template strings
+    data: /* @__PURE__ */ new Map()
+    // General purpose data
+  };
+  let memoryUsage = 0;
+  const stats = {
+    hits: 0,
+    misses: 0,
+    hitRate: {
+      static: 0,
+      component: 0,
+      template: 0,
+      data: 0
+    },
+    accessCount: {
+      static: 0,
+      component: 0,
+      template: 0,
+      data: 0
+    }
+  };
+  let cleanupInterval;
+  if (typeof setInterval === "function") {
+    cleanupInterval = setInterval(() => cleanup(), 3e4);
+    if (cleanupInterval.unref) {
+      cleanupInterval.unref();
+    }
+  }
+  function generateCacheKey(component, props = {}, context2 = {}) {
+    const componentStr = typeof component === "function" ? component.name || component.toString() : JSON.stringify(component);
+    const propsStr = JSON.stringify(props, Object.keys(props).sort());
+    const contextStr = JSON.stringify(context2);
+    const hash = simpleHash(componentStr + propsStr + contextStr);
+    return `${extractComponentName(component)}_${hash}`;
+  }
+  function get(key, type = "component") {
+    const cache = caches[type] || caches.component;
+    const entry = cache.get(key);
+    if (!entry) {
+      stats.misses++;
+      if (enableStatistics) stats.accessCount[type]++;
+      return null;
+    }
+    if (Date.now() - entry.timestamp > ttlMs) {
+      cache.delete(key);
+      updateMemoryUsage(-entry.size);
+      stats.misses++;
+      if (enableStatistics) stats.accessCount[type]++;
+      return null;
+    }
+    entry.lastAccess = Date.now();
+    entry.accessCount++;
+    stats.hits++;
+    if (enableStatistics) {
+      stats.accessCount[type]++;
+      stats.hitRate[type] = stats.hits / (stats.hits + stats.misses) * 100;
+    }
+    return entry.value;
+  }
+  function set(key, value, type = "component", metadata = {}) {
+    const cache = caches[type] || caches.component;
+    const size = calculateSize(value);
+    if (memoryUsage + size > maxMemoryMB * 1024 * 1024) {
+      optimize(type, size);
+    }
+    const entry = {
+      value,
+      timestamp: Date.now(),
+      lastAccess: Date.now(),
+      size,
+      metadata,
+      accessCount: 0
+    };
+    const existing = cache.get(key);
+    if (existing) {
+      updateMemoryUsage(-existing.size);
+    }
+    cache.set(key, entry);
+    updateMemoryUsage(size);
+    if (cache.size > maxCacheSize) {
+      optimize(type);
+    }
+  }
+  function remove(key, type) {
+    if (type) {
+      const cache = caches[type];
+      if (!cache) return false;
+      const entry = cache.get(key);
+      if (entry) {
+        updateMemoryUsage(-entry.size);
+        return cache.delete(key);
       }
-      if (cache && dependencies.length > 0) {
-        const currentHash = hashDependencies(dependencies);
-        if (lastDependencyHash !== null && lastDependencyHash !== currentHash) {
-          cached = false;
-          cachedValue = null;
-        }
-        lastDependencyHash = currentHash;
+      return false;
+    }
+    for (const [, cache] of Object.entries(caches)) {
+      const entry = cache.get(key);
+      if (entry) {
+        updateMemoryUsage(-entry.size);
+        return cache.delete(key);
       }
-      if (cache && cached) {
-        return cachedValue;
+    }
+    return false;
+  }
+  function clear(type) {
+    if (type) {
+      const cache = caches[type];
+      if (cache) {
+        cache.clear();
       }
-      isEvaluating = true;
-      try {
-        let result;
-        if (timeout) {
-          result = evaluateWithTimeout(factory, timeout, args, fallback);
-        } else {
-          result = typeof factory === "function" ? factory(...args) : factory;
-        }
-        if (result && typeof result.then === "function") {
-          return result.catch((_error) => {
-            if (onError) onError(_error);
-            return fallback;
-          });
-        }
-        if (cache) {
-          cached = true;
-          cachedValue = result;
-        }
-        return result;
-      } catch (_error) {
-        if (onError) {
-          onError(_error);
-        } else {
-          console.error("Lazy evaluation _error:", _error);
+    } else {
+      Object.values(caches).forEach((cache) => cache.clear());
+    }
+    memoryUsage = 0;
+  }
+  function getStats() {
+    const entries = Object.values(caches).reduce((sum, cache) => sum + cache.size, 0);
+    return {
+      hits: stats.hits,
+      misses: stats.misses,
+      size: memoryUsage,
+      entries,
+      hitRate: stats.hitRate,
+      accessCount: stats.accessCount
+    };
+  }
+  function cleanup() {
+    const now = Date.now();
+    let freed = 0;
+    for (const [, cache] of Object.entries(caches)) {
+      for (const [key, entry] of cache.entries()) {
+        if (now - entry.timestamp > ttlMs) {
+          cache.delete(key);
+          updateMemoryUsage(-entry.size);
+          freed++;
         }
-        return fallback;
-      } finally {
-        isEvaluating = false;
       }
-    },
-    // Force re-evaluation
-    invalidate() {
-      cached = false;
-      cachedValue = null;
-      lastDependencyHash = null;
-      return this;
-    },
-    // Check if evaluated
-    isEvaluated() {
-      return cached;
-    },
-    // Get cached value without evaluation
-    getCachedValue() {
-      return cachedValue;
-    },
-    // Transform the lazy value
-    map(transform) {
-      return lazy((...args) => {
-        const value = this.evaluate(...args);
-        return transform(value);
-      }, { ...options, cache: false });
-    },
-    // Chain lazy evaluations
-    flatMap(transform) {
-      return lazy((...args) => {
-        const value = this.evaluate(...args);
-        const transformed = transform(value);
-        if (isLazy(transformed)) {
-          return transformed.evaluate(...args);
-        }
-        return transformed;
-      }, { ...options, cache: false });
-    },
-    // Convert to string for debugging
-    toString() {
-      return `[Lazy${cached ? " (cached)" : ""}]`;
-    },
-    // JSON serialization
-    toJSON() {
-      return this.evaluate();
-    }
-  };
-  return lazyWrapper;
-}
-function isLazy(value) {
-  return value && typeof value === "object" && value.__isLazy === true;
-}
-function evaluateLazy(obj, ...args) {
-  if (isLazy(obj)) {
-    return obj.evaluate(...args);
-  }
-  if (Array.isArray(obj)) {
-    return obj.map((item) => evaluateLazy(item, ...args));
-  }
-  if (obj && typeof obj === "object") {
-    const result = {};
-    for (const [key, value] of Object.entries(obj)) {
-      result[key] = evaluateLazy(value, ...args);
     }
-    return result;
+    return { freed };
   }
-  return obj;
-}
-function hashDependencies(dependencies) {
-  return dependencies.map((dep) => {
-    if (typeof dep === "function") {
-      return dep.toString();
+  function calculateSize(value) {
+    if (value === null || value === void 0) return 0;
+    if (typeof value === "string") return value.length * 2;
+    if (typeof value === "number") return 8;
+    if (typeof value === "boolean") return 4;
+    if (Array.isArray(value)) {
+      return value.reduce((sum, item) => sum + calculateSize(item), 0);
     }
-    return JSON.stringify(dep);
-  }).join("|");
-}
-function evaluateWithTimeout(factory, timeout, args, fallback) {
-  return new Promise((resolve, reject) => {
-    const timer = setTimeout(() => {
-      reject(new Error(`Lazy evaluation timeout after ${timeout}ms`));
-    }, timeout);
-    try {
-      const result = factory(...args);
-      if (result && typeof result.then === "function") {
-        result.then((value) => {
-          clearTimeout(timer);
-          resolve(value);
-        }).catch((_error) => {
-          clearTimeout(timer);
-          reject(_error);
-        });
-      } else {
-        clearTimeout(timer);
-        resolve(result);
-      }
-    } catch (_error) {
-      clearTimeout(timer);
-      reject(_error);
+    if (typeof value === "object") {
+      return Object.values(value).reduce((sum, val) => sum + calculateSize(val), 0);
     }
-  }).catch(() => fallback);
-}
-function memo(fn, options = {}) {
-  const {
-    // Caching strategy
-    strategy = "lru",
-    // 'lru', 'ttl', 'weak', 'simple'
-    maxSize = 100,
-    // Maximum cache entries
-    ttl = null,
-    // Time to live in milliseconds
-    // Key generation
-    keyFn = null,
-    // Custom key function
-    keySerializer = JSON.stringify,
-    // Default serialization
-    // Comparison
-    // eslint-disable-next-line no-unused-vars
-    compareFn = null,
-    // Custom equality comparison
-    // eslint-disable-next-line no-unused-vars
-    shallow = false,
-    // Shallow comparison for objects
-    // Lifecycle hooks
-    onHit = null,
-    // Called on cache hit
-    onMiss = null,
-    // Called on cache miss
-    onEvict = null,
-    // Called when item evicted
-    // Performance
-    stats = false,
-    // Track hit/miss statistics
-    // Development
-    debug = false
-    // Debug logging
-  } = options;
-  let cache;
-  const stats_data = stats ? { hits: 0, misses: 0, evictions: 0 } : null;
-  switch (strategy) {
-    case "lru":
-      cache = new LRUCache(maxSize, { onEvict });
-      break;
-    case "ttl":
-      cache = new TTLCache(ttl, { onEvict });
-      break;
-    case "weak":
-      cache = /* @__PURE__ */ new WeakMap();
-      break;
-    default:
-      cache = /* @__PURE__ */ new Map();
+    return 0;
   }
-  const generateKey = keyFn || ((...args) => {
-    if (args.length === 0) return "__empty__";
-    if (args.length === 1) return keySerializer(args[0]);
-    return keySerializer(args);
-  });
-  const memoizedFn = (...args) => {
-    const key = generateKey(...args);
-    if (cache.has(key)) {
-      const cached = cache.get(key);
-      if (cached && (!cached.expires || Date.now() < cached.expires)) {
-        if (debug) console.log(`Memo cache hit for key: ${key}`);
-        if (onHit) onHit(key, cached.value, args);
-        if (stats_data) stats_data.hits++;
-        return cached.value || cached;
-      } else {
-        cache.delete(key);
-      }
-    }
-    if (debug) console.log(`Memo cache miss for key: ${key}`);
-    if (onMiss) onMiss(key, args);
-    if (stats_data) stats_data.misses++;
-    const result = fn(...args);
-    const cacheEntry = ttl ? { value: result, expires: Date.now() + ttl } : result;
-    cache.set(key, cacheEntry);
-    return result;
-  };
-  memoizedFn.cache = cache;
-  memoizedFn.clear = () => cache.clear();
-  memoizedFn.delete = (key) => cache.delete(key);
-  memoizedFn.has = (key) => cache.has(key);
-  memoizedFn.size = () => cache.size;
-  if (stats_data) {
-    memoizedFn.stats = () => ({ ...stats_data });
-    memoizedFn.resetStats = () => {
-      stats_data.hits = 0;
-      stats_data.misses = 0;
-      stats_data.evictions = 0;
-    };
+  function updateMemoryUsage(delta) {
+    memoryUsage = Math.max(0, memoryUsage + delta);
   }
-  memoizedFn.refresh = (...args) => {
-    const key = generateKey(...args);
-    cache.delete(key);
-    return memoizedFn(...args);
-  };
-  return memoizedFn;
-}
-var LRUCache = class {
-  constructor(maxSize = 100, options = {}) {
-    this.maxSize = maxSize;
-    this.cache = /* @__PURE__ */ new Map();
-    this.onEvict = options.onEvict;
+  function optimize(type, requiredSpace = 0) {
+    const cache = caches[type] || caches.component;
+    const entries = Array.from(cache.entries()).sort(([, a], [, b]) => a.lastAccess - b.lastAccess);
+    let freed = 0;
+    for (const [key, entry] of entries) {
+      if (freed >= requiredSpace) break;
+      cache.delete(key);
+      updateMemoryUsage(-entry.size);
+      freed += entry.size;
+    }
+    return { freed };
   }
-  get(key) {
-    if (this.cache.has(key)) {
-      const value = this.cache.get(key);
-      this.cache.delete(key);
-      this.cache.set(key, value);
-      return value;
+  function simpleHash(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      const char = str.charCodeAt(i);
+      hash = (hash << 5) - hash + char;
+      hash = hash & hash;
     }
-    return void 0;
+    return Math.abs(hash).toString(36);
   }
-  set(key, value) {
-    if (this.cache.has(key)) {
-      this.cache.delete(key);
-    } else if (this.cache.size >= this.maxSize) {
-      const firstKey = this.cache.keys().next().value;
-      const evicted = this.cache.get(firstKey);
-      this.cache.delete(firstKey);
-      if (this.onEvict) {
-        this.onEvict(firstKey, evicted);
-      }
+  function extractComponentName(component) {
+    if (typeof component === "function") {
+      return component.name || "AnonymousComponent";
     }
-    this.cache.set(key, value);
+    if (component && typeof component === "object") {
+      const keys = Object.keys(component);
+      return keys.length > 0 ? keys[0] : "ObjectComponent";
+    }
+    return "UnknownComponent";
   }
-  has(key) {
-    return this.cache.has(key);
+  function destroy() {
+    if (cleanupInterval) {
+      clearInterval(cleanupInterval);
+    }
+    clear();
   }
-  delete(key) {
-    return this.cache.delete(key);
+  function hashObject(obj) {
+    return simpleHash(JSON.stringify(obj));
   }
-  clear() {
-    this.cache.clear();
+  return {
+    get,
+    set,
+    remove,
+    clear,
+    getStats,
+    cleanup,
+    destroy,
+    generateCacheKey,
+    hashObject,
+    get memoryUsage() {
+      return memoryUsage;
+    },
+    get maxMemory() {
+      return maxMemoryMB * 1024 * 1024;
+    }
+  };
+}
+var cacheManager = createCacheManager();
+
+// src/utils/error-handler.js
+var CoherentError = class _CoherentError extends Error {
+  constructor(message, options = {}) {
+    super(message);
+    this.name = "CoherentError";
+    this.type = options.type || "generic";
+    this.code = options.code || `COHERENT_${String(this.type).toUpperCase()}`;
+    this.docsUrl = options.docsUrl || `/docs/core/errors#${this.code}`;
+    this.component = options.component;
+    this.context = options.context;
+    this.suggestions = options.suggestions || [];
+    this.timestamp = Date.now();
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, _CoherentError);
+    }
   }
-  get size() {
-    return this.cache.size;
+  toJSON() {
+    return {
+      name: this.name,
+      message: this.message,
+      type: this.type,
+      code: this.code,
+      docsUrl: this.docsUrl,
+      component: this.component,
+      context: this.context,
+      suggestions: this.suggestions,
+      timestamp: this.timestamp,
+      stack: this.stack
+    };
   }
 };
-var TTLCache = class {
-  constructor(ttl, options = {}) {
-    this.ttl = ttl;
-    this.cache = /* @__PURE__ */ new Map();
-    this.timers = /* @__PURE__ */ new Map();
-    this.onEvict = options.onEvict;
-  }
-  get(key) {
-    if (this.cache.has(key)) {
-      const entry = this.cache.get(key);
-      if (Date.now() < entry.expires) {
-        return entry.value;
-      } else {
-        this.delete(key);
-      }
-    }
-    return void 0;
+var ComponentValidationError = class extends CoherentError {
+  constructor(message, component, suggestions = []) {
+    super(message, {
+      type: "validation",
+      component,
+      suggestions: [
+        "Check component structure and syntax",
+        "Ensure all required properties are present",
+        "Validate prop types and values",
+        ...suggestions
+      ]
+    });
+    this.name = "ComponentValidationError";
   }
-  set(key, value) {
-    if (this.timers.has(key)) {
-      clearTimeout(this.timers.get(key));
+};
+var RenderingError = class extends CoherentError {
+  constructor(message, component, context2, suggestions = []) {
+    super(message, {
+      type: "rendering",
+      component,
+      context: context2,
+      suggestions: [
+        "Check for circular references",
+        "Validate component depth",
+        "Ensure all functions return valid components",
+        ...suggestions
+      ]
+    });
+    this.name = "RenderingError";
+    if (context2 && context2.path) {
+      this.renderPath = context2.path;
     }
-    const expires = Date.now() + this.ttl;
-    this.cache.set(key, { value, expires });
-    const timer = setTimeout(() => {
-      this.delete(key);
-    }, this.ttl);
-    this.timers.set(key, timer);
   }
-  has(key) {
-    if (this.cache.has(key)) {
-      const entry = this.cache.get(key);
-      return Date.now() < entry.expires;
-    }
-    return false;
+};
+var PerformanceError = class extends CoherentError {
+  constructor(message, metrics, suggestions = []) {
+    super(message, {
+      type: "performance",
+      context: metrics,
+      suggestions: [
+        "Consider component memoization",
+        "Reduce component complexity",
+        "Enable caching",
+        ...suggestions
+      ]
+    });
+    this.name = "PerformanceError";
   }
-  delete(key) {
-    const had = this.cache.has(key);
-    if (had) {
-      const entry = this.cache.get(key);
-      this.cache.delete(key);
-      if (this.timers.has(key)) {
-        clearTimeout(this.timers.get(key));
-        this.timers.delete(key);
-      }
-      if (this.onEvict) {
-        this.onEvict(key, entry.value);
-      }
+};
+var StateError = class extends CoherentError {
+  constructor(message, state, suggestions = []) {
+    super(message, {
+      type: "state",
+      context: state,
+      suggestions: [
+        "Check state mutations",
+        "Ensure proper state initialization",
+        "Validate state transitions",
+        ...suggestions
+      ]
+    });
+    this.name = "StateError";
+  }
+};
+var ErrorHandler = class {
+  constructor(options = {}) {
+    const isDev = typeof process !== "undefined" && process.env && true;
+    const envForceSilent = typeof process !== "undefined" && process.env && process.env.COHERENT_SILENT === "1";
+    const envForceDebug = typeof process !== "undefined" && process.env && process.env.COHERENT_DEBUG === "1";
+    const defaultEnableLogging = envForceSilent ? false : envForceDebug ? true : isDev;
+    this.options = {
+      enableStackTrace: options.enableStackTrace !== false,
+      enableSuggestions: options.enableSuggestions !== false,
+      enableLogging: options.enableLogging ?? defaultEnableLogging,
+      logLevel: options.logLevel || "_error",
+      maxErrorHistory: options.maxErrorHistory || 100,
+      ...options
+    };
+    this.errorHistory = [];
+    this.errorCounts = /* @__PURE__ */ new Map();
+    this.suppressedErrors = /* @__PURE__ */ new Set();
+  }
+  /**
+   * Handle and report errors with detailed context
+   */
+  handle(_error, context2 = {}) {
+    const enhancedError = this.enhanceError(_error, context2);
+    this.addToHistory(enhancedError);
+    if (this.options.enableLogging) {
+      this.logError(enhancedError);
     }
-    return had;
+    return enhancedError;
   }
-  clear() {
-    this.timers.forEach((timer) => clearTimeout(timer));
-    this.timers.clear();
-    this.cache.clear();
+  /**
+   * Enhance existing errors with more context
+   */
+  enhanceError(_error, context2 = {}) {
+    if (_error instanceof CoherentError) {
+      return _error;
+    }
+    const errorType = this.classifyError(_error, context2);
+    switch (errorType) {
+      case "validation":
+        return new ComponentValidationError(
+          _error.message,
+          context2.component,
+          this.generateSuggestions(_error, context2)
+        );
+      case "rendering":
+        return new RenderingError(
+          _error.message,
+          context2.component,
+          context2.renderContext,
+          this.generateSuggestions(_error, context2)
+        );
+      case "performance":
+        return new PerformanceError(
+          _error.message,
+          context2.metrics,
+          this.generateSuggestions(_error, context2)
+        );
+      case "state":
+        return new StateError(
+          _error.message,
+          context2.state,
+          this.generateSuggestions(_error, context2)
+        );
+      default:
+        return new CoherentError(_error.message, {
+          type: errorType,
+          component: context2.component,
+          context: context2.context,
+          suggestions: this.generateSuggestions(_error, context2)
+        });
+    }
   }
-  get size() {
-    return this.cache.size;
+  /**
+   * Classify _error type based on message and context
+   */
+  classifyError(_error, context2) {
+    const message = _error.message.toLowerCase();
+    if (message.includes("invalid") || message.includes("validation") || message.includes("required") || message.includes("type")) {
+      return "validation";
+    }
+    if (message.includes("render") || message.includes("circular") || message.includes("depth") || message.includes("cannot render")) {
+      return "rendering";
+    }
+    if (message.includes("slow") || message.includes("memory") || message.includes("performance") || message.includes("timeout")) {
+      return "performance";
+    }
+    if (message.includes("state") || message.includes("mutation") || message.includes("store") || context2.state) {
+      return "state";
+    }
+    if (context2.component) return "validation";
+    if (context2.renderContext) return "rendering";
+    if (context2.metrics) return "performance";
+    return "generic";
   }
-};
-function withState(initialState = {}, options = {}) {
-  const {
-    // State options
-    persistent = false,
-    // Persist state across component unmounts
-    storageKey = null,
-    // Key for persistent storage
-    storage = typeof window !== "undefined" && typeof window.localStorage !== "undefined" ? window.localStorage : {
-      // Fallback storage for Node.js environments
-      _data: /* @__PURE__ */ new Map(),
-      setItem(key, value) {
-        this._data.set(key, value);
+  /**
+   * Generate helpful suggestions based on _error
+   */
+  generateSuggestions(_error, context2 = {}) {
+    const suggestions = [];
+    const message = _error.message.toLowerCase();
+    const patterns = [
+      {
+        pattern: /cannot render|render.*failed/,
+        suggestions: [
+          "Check if component returns a valid object structure",
+          "Ensure all properties are properly defined",
+          "Look for undefined variables or null references"
+        ]
       },
-      getItem(key) {
-        return this._data.get(key) || null;
+      {
+        pattern: /circular.*reference/,
+        suggestions: [
+          "Remove circular references between components",
+          "Use lazy loading or memoization to break cycles",
+          "Check for self-referencing components"
+        ]
       },
-      removeItem(key) {
-        this._data.delete(key);
+      {
+        pattern: /maximum.*depth/,
+        suggestions: [
+          "Reduce component nesting depth",
+          "Break complex components into smaller parts",
+          "Check for infinite recursion in component functions"
+        ]
       },
-      clear() {
-        this._data.clear();
+      {
+        pattern: /invalid.*component/,
+        suggestions: [
+          "Ensure component follows the expected object structure",
+          "Check property names and values for typos",
+          "Verify component is not null or undefined"
+        ]
+      },
+      {
+        pattern: /performance|slow|timeout/,
+        suggestions: [
+          "Enable component caching",
+          "Use memoization for expensive operations",
+          "Reduce component complexity",
+          "Consider lazy loading for large components"
+        ]
       }
-    },
-    // Storage mechanism
-    // State transformation
-    stateTransform = null,
-    // Transform state before injection
-    propName = "state",
-    // Prop name for state injection
-    actionsName = "actions",
-    // Prop name for action injection
-    // Reducers and actions
-    reducer = null,
-    // State reducer function
-    actions = {},
-    // Action creators
-    middleware = [],
-    // State middleware
-    // Performance
-    memoizeState = false,
-    // Memoize state transformations
-    // eslint-disable-next-line no-unused-vars
-    shallow = false,
-    // Shallow state comparison
-    // Development
-    // eslint-disable-next-line no-unused-vars
-    devTools = false,
-    // Connect to dev tools
-    debug = false,
-    // Debug logging
-    displayName = null,
-    // Component name for debugging
-    // Lifecycle hooks
-    onStateChange = null,
-    // Called when state changes
-    onMount = null,
-    // Called when component mounts
-    onUnmount = null,
-    // Called when component unmounts
-    // Validation
-    validator = null,
-    // State validator function
-    // Async state
-    supportAsync = false
-    // Support async state updates
-  } = options;
-  return function withStateHOC(WrappedComponent) {
-    const stateContainer = createStateContainer(initialState, {
-      persistent,
-      storageKey: storageKey || `${getComponentName(WrappedComponent)}_state`,
-      storage,
-      reducer,
-      middleware,
-      validator,
-      onStateChange,
-      debug
-    });
-    function WithStateComponent(props = {}, globalState = {}, context2 = {}) {
-      if (!stateContainer.initialized) {
-        stateContainer.initialize();
-        if (onMount) {
-          onMount(stateContainer.getState(), props, context2);
-        }
+    ];
+    patterns.forEach(({ pattern, suggestions: patternSuggestions }) => {
+      if (pattern.test(message)) {
+        suggestions.push(...patternSuggestions);
       }
-      const currentState = stateContainer.getState();
-      let transformedState = currentState;
-      if (stateTransform) {
-        transformedState = stateTransform(currentState, props, context2);
+    });
+    if (context2.component) {
+      const componentType = typeof context2.component;
+      if (componentType === "function") {
+        suggestions.push("Check function component return value");
+      } else if (componentType === "object" && context2.component === null) {
+        suggestions.push("Component is null - ensure proper initialization");
+      } else if (Array.isArray(context2.component)) {
+        suggestions.push("Arrays should contain valid component objects");
       }
-      const boundActions = createBoundActions(actions, stateContainer, {
-        props,
-        context: context2,
-        supportAsync,
-        debug
+    }
+    if (suggestions.length === 0) {
+      suggestions.push(
+        "Enable development tools for more detailed debugging",
+        "Check browser console for additional _error details",
+        "Use component validation tools to identify issues"
+      );
+    }
+    return [...new Set(suggestions)];
+  }
+  /**
+   * Add _error to history with deduplication
+   */
+  addToHistory(_error) {
+    const errorKey = `${_error.name}:${_error.message}`;
+    this.errorCounts.set(errorKey, (this.errorCounts.get(errorKey) || 0) + 1);
+    const historyEntry = {
+      ..._error.toJSON(),
+      count: this.errorCounts.get(errorKey),
+      firstSeen: this.errorHistory.find((e) => e.key === errorKey)?.firstSeen || _error.timestamp,
+      key: errorKey
+    };
+    this.errorHistory = this.errorHistory.filter((e) => e.key !== errorKey);
+    this.errorHistory.unshift(historyEntry);
+    if (this.errorHistory.length > this.options.maxErrorHistory) {
+      this.errorHistory = this.errorHistory.slice(0, this.options.maxErrorHistory);
+    }
+  }
+  /**
+   * Log _error with enhanced formatting
+   */
+  logError(_error) {
+    if (this.suppressedErrors.has(`${_error.name}:${_error.message}`)) {
+      return;
+    }
+    const isRepeated = this.errorCounts.get(`${_error.name}:${_error.message}`) > 1;
+    const errorGroup = `\u{1F6A8} ${_error.name}${isRepeated ? ` (\xD7${this.errorCounts.get(`${_error.name}:${_error.message}`)})` : ""}`;
+    console.group(errorGroup);
+    console.error(`\u274C ${_error.message}`);
+    if (_error.code) {
+      console.log("\u{1F3F7}\uFE0F Code:", _error.code);
+    }
+    if (_error.docsUrl) {
+      console.log("\u{1F4D6} Docs:", _error.docsUrl);
+    }
+    if (_error.component) {
+      console.log("\u{1F50D} Component:", this.formatComponent(_error.component));
+    }
+    if (_error.context) {
+      console.log("\u{1F4CB} Context:", _error.context);
+    }
+    if (_error.context && typeof _error.context === "object" && _error.context.path) {
+      console.log("\u{1F4CD} Path:", _error.context.path);
+    }
+    if (this.options.enableSuggestions && _error.suggestions.length > 0) {
+      console.group("\u{1F4A1} Suggestions:");
+      _error.suggestions.forEach((suggestion, index) => {
+        console.log(`${index + 1}. ${suggestion}`);
       });
-      const stateUtils = {
-        // Basic state operations
-        setState: stateContainer.setState.bind(stateContainer),
-        getState: stateContainer.getState.bind(stateContainer),
-        resetState: () => stateContainer.setState(initialState),
-        // Advanced operations
-        updateState: (updater) => {
-          const current = stateContainer.getState();
-          const next = typeof updater === "function" ? updater(current) : updater;
-          stateContainer.setState(next);
-        },
-        // Batch updates
-        batchUpdate: (updates) => {
-          stateContainer.batch(() => {
-            updates.forEach((update) => {
-              if (typeof update === "function") {
-                update(stateContainer);
-              } else {
-                stateContainer.setState(update);
-              }
-            });
-          });
-        },
-        // Computed state
-        computed: (computeFn) => {
-          return memoizeState ? memo(computeFn)(transformedState) : computeFn(transformedState);
-        },
-        // State subscription
-        subscribe: stateContainer.subscribe.bind(stateContainer),
-        unsubscribe: stateContainer.unsubscribe.bind(stateContainer),
-        // Async state operations
-        ...supportAsync && {
-          setStateAsync: async (stateOrPromise) => {
-            const resolved = await Promise.resolve(stateOrPromise);
-            stateContainer.setState(resolved);
-          },
-          updateStateAsync: async (asyncUpdater) => {
-            const current = stateContainer.getState();
-            const next = await Promise.resolve(asyncUpdater(current));
-            stateContainer.setState(next);
-          }
-        }
-      };
-      const enhancedProps = {
-        ...props,
-        [propName]: transformedState,
-        [actionsName]: boundActions,
-        stateUtils
-      };
-      if (debug) {
-        console.log("withState render:", {
-          component: getComponentName(WrappedComponent),
-          state: transformedState,
-          props: enhancedProps
-        });
-      }
-      return typeof WrappedComponent === "function" ? WrappedComponent(enhancedProps, globalState, context2) : WrappedComponent;
+      console.groupEnd();
     }
-    WithStateComponent.displayName = displayName || `withState(${getComponentName(WrappedComponent)})`;
-    WithStateComponent.__isHOC = true;
-    WithStateComponent.__hasState = true;
-    WithStateComponent.__stateContainer = stateContainer;
-    WithStateComponent.__wrappedComponent = WrappedComponent;
-    WithStateComponent.cleanup = () => {
-      if (onUnmount) {
-        onUnmount(stateContainer.getState());
+    if (this.options.enableStackTrace && _error.stack) {
+      console.log("\u{1F4DA} Stack trace:", _error.stack);
+    }
+    console.groupEnd();
+  }
+  /**
+   * Format component for logging
+   */
+  formatComponent(component, maxDepth = 2, currentDepth = 0) {
+    if (currentDepth > maxDepth) {
+      return "[...deep]";
+    }
+    if (typeof component === "function") {
+      return `[Function: ${component.name || "anonymous"}]`;
+    }
+    if (Array.isArray(component)) {
+      return component.slice(0, 3).map(
+        (item) => this.formatComponent(item, maxDepth, currentDepth + 1)
+      );
+    }
+    if (component && typeof component === "object") {
+      const formatted = {};
+      const keys = Object.keys(component).slice(0, 5);
+      for (const key of keys) {
+        if (key === "children" && component[key]) {
+          formatted[key] = this.formatComponent(component[key], maxDepth, currentDepth + 1);
+        } else {
+          formatted[key] = component[key];
+        }
       }
-      if (!persistent) {
-        stateContainer.destroy();
+      if (Object.keys(component).length > 5) {
+        formatted["..."] = `(${Object.keys(component).length - 5} more)`;
       }
-    };
-    return WithStateComponent;
-  };
-}
-function createStateContainer(initialState, options) {
-  const {
-    persistent,
-    storageKey,
-    storage,
-    reducer,
-    middleware,
-    validator,
-    onStateChange,
-    debug
-  } = options;
-  let state = deepClone(initialState);
-  let listeners = /* @__PURE__ */ new Set();
-  const middlewareStack = [...middleware];
-  const container = {
-    initialized: false,
-    initialize() {
-      if (persistent && storageKey) {
-        try {
-          const saved = storage.getItem(storageKey);
-          if (saved) {
-            const parsed = JSON.parse(saved);
-            state = { ...state, ...parsed };
-          }
-        } catch (_error) {
-          if (debug) console.warn("Failed to load persisted state:", _error);
-        }
+      return formatted;
+    }
+    return component;
+  }
+  /**
+   * Suppress specific _error types
+   */
+  suppress(errorPattern) {
+    this.suppressedErrors.add(errorPattern);
+  }
+  /**
+   * Clear _error history
+   */
+  clearHistory() {
+    this.errorHistory = [];
+    this.errorCounts.clear();
+  }
+  /**
+   * Get _error statistics
+   */
+  getStats() {
+    const errorsByType = {};
+    const errorsByTime = {};
+    this.errorHistory.forEach((_error) => {
+      errorsByType[_error.type] = (errorsByType[_error.type] || 0) + _error.count;
+      const hour = new Date(_error.timestamp).toISOString().slice(0, 13);
+      errorsByTime[hour] = (errorsByTime[hour] || 0) + _error.count;
+    });
+    return {
+      totalErrors: this.errorHistory.reduce((sum, e) => sum + e.count, 0),
+      uniqueErrors: this.errorHistory.length,
+      errorsByType,
+      errorsByTime,
+      mostCommonErrors: this.getMostCommonErrors(5),
+      recentErrors: this.errorHistory.slice(0, 10)
+    };
+  }
+  /**
+   * Get most common errors
+   */
+  getMostCommonErrors(limit = 10) {
+    return this.errorHistory.sort((a, b) => b.count - a.count).slice(0, limit).map(({ name, message, count, type }) => ({
+      name,
+      message,
+      count,
+      type
+    }));
+  }
+};
+var globalErrorHandler = new ErrorHandler();
+
+// src/rendering/html-renderer.js
+var rendererCache = createCacheManager({
+  maxSize: 1e3,
+  ttlMs: 3e5
+  // 5 minutes
+});
+function formatRenderPath(path) {
+  if (!path || path.length === 0) return "root";
+  let rendered = "root";
+  for (const segment of path) {
+    if (typeof segment !== "string" || segment.length === 0) continue;
+    if (segment.startsWith("[")) {
+      rendered += segment;
+    } else {
+      rendered += `.${segment}`;
+    }
+  }
+  return rendered;
+}
+var HTMLRenderer = class extends BaseRenderer {
+  constructor(options = {}) {
+    super({
+      enableCache: options.enableCache !== false,
+      enableMonitoring: options.enableMonitoring !== false,
+      minify: options.minify || false,
+      streaming: options.streaming || false,
+      maxDepth: options.maxDepth || 100,
+      ...options
+    });
+    if (this.config.enableCache && !this.cache) {
+      this.cache = rendererCache;
+    }
+  }
+  /**
+   * Main render method - converts components to HTML string
+   *
+   * @param {Object|Array|string|Function} component - Component to render
+   * @param {Object} [options={}] - Rendering options
+   * @param {Object} [options.context] - Rendering context
+   * @param {boolean} [options.enableCache] - Override cache setting
+   * @param {number} [options.depth=0] - Current rendering depth
+   * @returns {string} Rendered HTML string
+   *
+   * @example
+   * const html = renderer.render({
+   *   div: {
+   *     className: 'container',
+   *     children: [
+   *       { h1: { text: 'Title' } },
+   *       { p: { text: 'Content' } }
+   *     ]
+   *   }
+   * });
+   */
+  render(component, options = {}) {
+    const config = { ...this.config, ...options };
+    this.startTiming();
+    try {
+      if (config.validateInput && !this.isValidComponent(component)) {
+        throw new Error("Invalid component structure");
       }
-      container.initialized = true;
-    },
-    getState() {
-      return deepClone(state);
-    },
-    setState(newState) {
-      const prevState = state;
-      if (reducer) {
-        state = reducer(state, { type: "SET_STATE", payload: newState });
-      } else {
-        state = typeof newState === "function" ? newState(state) : { ...state, ...newState };
+      const renderOptions = {
+        ...config,
+        seenObjects: /* @__PURE__ */ new WeakSet()
+      };
+      const html = this.renderComponent(component, renderOptions, 0, []);
+      const finalHtml = config.minify ? minifyHtml(html, config) : html;
+      this.endTiming();
+      this.recordPerformance("render", this.metrics.startTime, false, {
+        cacheEnabled: config.enableCache
+      });
+      return finalHtml;
+    } catch (_error) {
+      this.recordError("render", _error);
+      const enhancedError = globalErrorHandler.handle(_error, {
+        renderContext: { path: "root", renderer: "html" }
+      });
+      if (config.throwOnError === false) {
+        return config.errorFallback;
       }
-      if (validator && !validator(state)) {
-        if (debug) console.warn("State validation failed, reverting:", state);
-        state = prevState;
-        return false;
+      throw enhancedError;
+    }
+  }
+  /**
+   * Render a single component with full optimization pipeline
+   */
+  renderComponent(component, options, depth = 0, path = []) {
+    if (component === null || component === void 0) {
+      return "";
+    }
+    if (Array.isArray(component) && component.length === 0) {
+      return "";
+    }
+    if (typeof component === "object" && component !== null && !Array.isArray(component)) {
+      if (options.seenObjects && options.seenObjects.has(component)) {
+        throw new RenderingError(
+          "Circular reference detected in component tree",
+          component,
+          { path: formatRenderPath(path) },
+          ["Remove the circular reference", "Use lazy loading to break the cycle"]
+        );
       }
-      state = middlewareStack.reduce(
-        (acc, middleware2) => middleware2(acc, prevState) || acc,
-        state
-      );
-      if (persistent && storageKey) {
-        try {
-          storage.setItem(storageKey, JSON.stringify(state));
-        } catch (_error) {
-          if (debug) console.warn("Failed to persist state:", _error);
-        }
+      if (options.seenObjects) {
+        options.seenObjects.add(component);
       }
-      if (state !== prevState) {
-        listeners.forEach((listener) => {
-          try {
-            listener(state, prevState);
-          } catch (_error) {
-            if (debug) console.error("State listener _error:", _error);
+    }
+    this.validateDepth(depth);
+    try {
+      const { type, value } = this.processComponentType(component);
+      switch (type) {
+        case "empty":
+          return "";
+        case "text":
+          return escapeHtml(value);
+        case "function": {
+          const result = this.executeFunctionComponent(value, depth);
+          return this.renderComponent(result, options, depth + 1, [...path, "()"]);
+        }
+        case "array":
+          if (typeof process !== "undefined" && process.env && true && value.length > 1) {
+            const missingKeyCount = value.filter((child) => {
+              if (child && typeof child === "object" && !Array.isArray(child)) {
+                const tagName = Object.keys(child)[0];
+                const props = child[tagName];
+                return props && typeof props === "object" && props.key === void 0;
+              }
+              return false;
+            }).length;
+            if (missingKeyCount > 0) {
+              console.warn(
+                `[Coherent.js] Array of ${value.length} elements at ${formatRenderPath(path)} has ${missingKeyCount} items missing "key" props. Keys help identify which items changed for efficient updates. Add unique key props like: { div: { key: 'unique-id', ... } }`
+              );
+            }
           }
-        });
-        if (onStateChange) {
-          onStateChange(state, prevState);
+          return value.map((child, index) => this.renderComponent(child, options, depth + 1, [...path, `[${index}]`])).join("");
+        case "element": {
+          const tagName = Object.keys(value)[0];
+          const elementContent = value[tagName];
+          return this.renderElement(tagName, elementContent, options, depth, [...path, tagName]);
         }
+        default:
+          this.recordError("renderComponent", new Error(`Unknown component type: ${type}`));
+          return "";
       }
-      return true;
-    },
-    subscribe(listener) {
-      listeners.add(listener);
-      return () => listeners.delete(listener);
-    },
-    unsubscribe(listener) {
-      return listeners.delete(listener);
-    },
-    batch(batchFn) {
-      const originalListeners = listeners;
-      listeners = /* @__PURE__ */ new Set();
-      try {
-        batchFn();
-      } finally {
-        listeners = originalListeners;
-        listeners.forEach((listener) => listener(state));
-      }
-    },
-    destroy() {
-      listeners.clear();
-      if (persistent && storageKey) {
-        try {
-          storage.removeItem(storageKey);
-        } catch (_error) {
-          if (debug) console.warn("Failed to remove persisted state:", _error);
+    } catch (_error) {
+      const renderPath = formatRenderPath(path);
+      if (_error instanceof CoherentError) {
+        if (!_error.context || typeof _error.context !== "object") {
+          _error.context = { path: renderPath };
+        } else if (!_error.context.path) {
+          _error.context = { ..._error.context, path: renderPath };
         }
+        throw _error;
       }
+      throw new RenderingError(_error.message, void 0, { path: renderPath, renderer: "html" });
     }
-  };
-  return container;
-}
-function createBoundActions(actions, stateContainer, options) {
-  const { props, context: context2, supportAsync, debug } = options;
-  const boundActions = {};
-  Object.entries(actions).forEach(([actionName, actionCreator]) => {
-    boundActions[actionName] = (...args) => {
-      try {
-        const result = actionCreator(
-          stateContainer.getState(),
-          stateContainer.setState.bind(stateContainer),
-          { props, context: context2, args }
+  }
+  /**
+   * Render an HTML element with advanced caching and optimization
+   */
+  renderElement(tagName, element, options, depth = 0, path = []) {
+    const startTime = performance.now();
+    if (element && typeof element === "object" && !Array.isArray(element)) {
+      if (options.seenObjects && options.seenObjects.has(element)) {
+        throw new RenderingError(
+          "Circular reference detected in component tree",
+          element,
+          { path: formatRenderPath(path) },
+          ["Remove the circular reference", "Use lazy loading to break the cycle"]
         );
-        if (supportAsync && result && typeof result.then === "function") {
-          return result.catch((_error) => {
-            if (debug) console.error(`Async action ${actionName} failed:`, _error);
-            throw _error;
-          });
+      }
+      if (options.seenObjects) {
+        options.seenObjects.add(element);
+      }
+    }
+    if (options.enableMonitoring && this.cache) {
+    }
+    if (options.enableCache && this.cache && RendererUtils.isStaticElement(element)) {
+      try {
+        const cacheKey = `static:${tagName}:${JSON.stringify(element)}`;
+        const cached = this.cache.get("static", cacheKey);
+        if (cached) {
+          this.recordPerformance(tagName, startTime, true);
+          return cached.value;
         }
-        return result;
-      } catch (_error) {
-        if (debug) console.error(`Action ${actionName} failed:`, _error);
-        throw _error;
+      } catch {
       }
-    };
-  });
-  return boundActions;
-}
-var withStateUtils = {
-  /**
-   * Simple local state
-   */
-  local: (initialState) => withState(initialState),
-  /**
-   * Persistent state with localStorage
-   */
-  persistent: (initialState, key) => withState(initialState, {
-    persistent: true,
-    storageKey: key
-  }),
+    }
+    if (typeof element === "string" || typeof element === "number" || typeof element === "boolean") {
+      const html2 = isVoidElement(tagName) ? `<${tagName}>` : `<${tagName}>${escapeHtml(String(element))}</${tagName}>`;
+      this.cacheIfStatic(tagName, element, html2, options);
+      this.recordPerformance(tagName, startTime, false);
+      return html2;
+    }
+    if (typeof element === "function") {
+      const result = this.executeFunctionComponent(element, depth);
+      return this.renderElement(tagName, result, options, depth, [...path, "()"]);
+    }
+    if (element && typeof element === "object") {
+      return this.renderObjectElement(tagName, element, options, depth, path);
+    }
+    if (element === null || element === void 0) {
+      const html2 = isVoidElement(tagName) ? `<${tagName}>` : `<${tagName}></${tagName}>`;
+      this.recordPerformance(tagName, startTime, false);
+      return html2;
+    }
+    const html = `<${tagName}>${escapeHtml(String(element))}</${tagName}>`;
+    this.recordPerformance(tagName, startTime, false);
+    return html;
+  }
   /**
-   * State with reducer pattern
+   * Cache element if it's static
    */
-  reducer: (initialState, reducer, actions = {}) => withState(initialState, {
-    reducer,
-    actions
-  }),
+  cacheIfStatic(tagName, element, html) {
+    if (this.config.enableCache && this.cache && RendererUtils.isStaticElement(element)) {
+      try {
+        const cacheKey = `static:${tagName}:${JSON.stringify(element)}`;
+        this.cache.set("static", cacheKey, html, {
+          ttlMs: this.config.cacheTTL || 5 * 60 * 1e3,
+          // 5 minutes default
+          size: html.length
+          // Approximate size
+        });
+      } catch {
+      }
+    }
+  }
   /**
-   * Async state management
+   * Render complex object elements with attributes and children
    */
-  async: (initialState, asyncActions = {}) => withState(initialState, {
-    supportAsync: true,
-    actions: asyncActions
-  }),
+  renderObjectElement(tagName, element, options, depth = 0, path = []) {
+    const startTime = performance.now();
+    if (options.enableCache && this.cache) {
+      const cacheKey = RendererUtils.generateCacheKey(tagName, element);
+      if (cacheKey) {
+        const cached = this.cache.get(cacheKey);
+        if (cached) {
+          this.recordPerformance(tagName, startTime, true);
+          return cached;
+        }
+      }
+    }
+    const { children, text, key: _key, html: _rawHtml, ...attributes } = element || {};
+    const attributeString = formatAttributes(attributes);
+    const openingTag = attributeString ? `<${tagName} ${attributeString}>` : `<${tagName}>`;
+    let textContent = "";
+    if (text !== void 0) {
+      const isScript = tagName === "script";
+      const isStyle = tagName === "style";
+      const isRawTag = isScript || isStyle;
+      const raw = typeof text === "function" ? String(text()) : String(text);
+      if (isRawTag) {
+        const safe = raw.replace(/<\/(script)/gi, "<\\/$1").replace(/<\/(style)/gi, "<\\/$1").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+        textContent = safe;
+      } else {
+        textContent = escapeHtml(raw);
+      }
+    }
+    let childrenHtml = "";
+    if (hasChildren(element)) {
+      const normalizedChildren = normalizeChildren(children);
+      childrenHtml = normalizedChildren.map((child, index) => {
+        if (child && typeof child === "object" && !Array.isArray(child)) {
+          const childTagName = Object.keys(child)[0];
+          if (childTagName) {
+            validateNesting(tagName, childTagName, formatRenderPath([...path, `children[${index}]`]));
+          }
+        }
+        return this.renderComponent(child, options, depth + 1, [...path, `children[${index}]`]);
+      }).join("");
+    }
+    const html = `${openingTag}${textContent}${childrenHtml}</${tagName}>`;
+    if (options.enableCache && this.cache && RendererUtils.isCacheable(element, options)) {
+      const cacheKey = RendererUtils.generateCacheKey(tagName, element);
+      if (cacheKey) {
+        this.cache.set(cacheKey, html);
+      }
+    }
+    this.recordPerformance(tagName, startTime, false);
+    return html;
+  }
+};
+function render(component, options = {}) {
+  const mergedOptions = {
+    enableCache: true,
+    enableMonitoring: false,
+    ...options
+  };
+  const renderer = new HTMLRenderer(mergedOptions);
+  return renderer.render(component, mergedOptions);
+}
+
+// src/components/component-system.js
+var COMPONENT_REGISTRY = /* @__PURE__ */ new Map();
+var COMPONENT_METADATA = /* @__PURE__ */ new WeakMap();
+var ComponentState = class {
+  constructor(initialState = {}) {
+    this.state = { ...initialState };
+    this.listeners = /* @__PURE__ */ new Set();
+    this.isUpdating = false;
+  }
   /**
-   * State with validation
+   * Get state value by key or entire state
+   *
+   * @param {string} [key] - State key to retrieve
+   * @returns {*} State value or entire state object
    */
-  validated: (initialState, validator) => withState(initialState, {
-    validator,
-    debug: true
-  }),
+  get(key) {
+    return key ? this.state[key] : { ...this.state };
+  }
   /**
-   * Shared state across components
+   * Update state with new values
+   *
+   * @param {Object} updates - State updates to apply
+   * @returns {ComponentState} This instance for chaining
    */
-  shared: (initialState, sharedKey) => {
-    const sharedStates = withStateUtils._shared || (withStateUtils._shared = /* @__PURE__ */ new Map());
-    if (!sharedStates.has(sharedKey)) {
-      sharedStates.set(sharedKey, createStateContainer(initialState, {}));
-    }
-    return (WrappedComponent) => {
-      const sharedContainer = sharedStates.get(sharedKey);
-      function SharedStateComponent(props, globalState, context2) {
-        const currentState = sharedContainer.getState();
-        const enhancedProps = {
-          ...props,
-          state: currentState,
-          setState: sharedContainer.setState.bind(sharedContainer),
-          subscribe: sharedContainer.subscribe.bind(sharedContainer)
-        };
-        return typeof WrappedComponent === "function" ? WrappedComponent(enhancedProps, globalState, context2) : WrappedComponent;
+  set(updates) {
+    if (this.isUpdating) return this;
+    const oldState = { ...this.state };
+    if (typeof updates === "function") {
+      updates = updates(oldState);
+    }
+    this.state = { ...this.state, ...updates };
+    this.notifyListeners(oldState, this.state);
+    return this;
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  notifyListeners(oldState, newState) {
+    if (this.listeners.size === 0) return;
+    this.isUpdating = true;
+    this.listeners.forEach((listener) => {
+      try {
+        listener(newState, oldState);
+      } catch (_error) {
+        console.error("State listener _error:", _error);
       }
-      SharedStateComponent.displayName = `withSharedState(${getComponentName(WrappedComponent)})`;
-      return SharedStateComponent;
+    });
+    this.isUpdating = false;
+  }
+};
+var Component = class _Component {
+  constructor(definition = {}) {
+    this.definition = definition;
+    this.name = definition.name || "AnonymousComponent";
+    this.props = {};
+    this.state = new ComponentState(definition.state || {});
+    this.children = [];
+    this.parent = null;
+    this.rendered = null;
+    this.isMounted = false;
+    this.isDestroyed = false;
+    this.hooks = {
+      beforeCreate: definition.beforeCreate || (() => {
+      }),
+      created: definition.created || (() => {
+      }),
+      beforeMount: definition.beforeMount || (() => {
+      }),
+      mounted: definition.mounted || (() => {
+      }),
+      beforeUpdate: definition.beforeUpdate || (() => {
+      }),
+      updated: definition.updated || (() => {
+      }),
+      beforeDestroy: definition.beforeDestroy || (() => {
+      }),
+      destroyed: definition.destroyed || (() => {
+      }),
+      errorCaptured: definition.errorCaptured || (() => {
+      })
     };
-  },
+    this.methods = definition.methods || {};
+    Object.keys(this.methods).forEach((methodName) => {
+      if (typeof this.methods[methodName] === "function") {
+        this[methodName] = this.methods[methodName].bind(this);
+      }
+    });
+    this.computed = definition.computed || {};
+    this.computedCache = /* @__PURE__ */ new Map();
+    this.watchers = definition.watch || {};
+    this.setupWatchers();
+    COMPONENT_METADATA.set(this, {
+      createdAt: Date.now(),
+      updateCount: 0,
+      renderCount: 0
+    });
+    this.callHook("beforeCreate");
+    this.initialize();
+    this.callHook("created");
+  }
   /**
-   * State with form utilities
+   * Initialize component
    */
-  form: (initialFormState) => withState(initialFormState, {
-    actions: {
-      updateField: (state, setState, { args: [field, value] }) => {
-        setState({ [field]: value });
-      },
-      updateMultiple: (state, setState, { args: [updates] }) => {
-        setState(updates);
-      },
-      resetForm: (state, setState) => {
-        setState(initialFormState);
-      },
-      validateForm: (state, setState, { args: [validator] }) => {
-        const errors = validator(state);
-        setState({ _errors: errors });
-        return Object.keys(errors).length === 0;
-      }
-    }
-  }),
+  initialize() {
+    this.unsubscribeState = this.state.subscribe((newState, oldState) => {
+      this.onStateChange(newState, oldState);
+    });
+    this.initializeComputed();
+  }
   /**
-   * State with loading/_error handling
+   * Set up watchers for reactive data
    */
-  withLoading: async (initialState) => withState({
-    ...initialState,
-    _loading: false,
-    _error: null
-  }, {
-    supportAsync: true,
-    actions: {
-      setLoading: (state, setState, { args: [loading] }) => {
-        setState({ _loading: loading });
-      },
-      setError: (state, setState, { args: [_error] }) => {
-        setState({ _error, _loading: false });
-      },
-      clearError: (state, setState) => {
-        setState({ _error: null });
-      },
-      asyncAction: async (state, setState, { args: [asyncFn] }) => {
-        setState({ _loading: true, _error: null });
-        try {
-          const result = await asyncFn(state);
-          setState({ _loading: false });
-          return result;
-        } catch (_error) {
-          setState({ _loading: false, _error });
-          throw _error;
+  setupWatchers() {
+    Object.keys(this.watchers).forEach((key) => {
+      const handler = this.watchers[key];
+      this.state.subscribe((newState, oldState) => {
+        if (newState[key] !== oldState[key]) {
+          handler.call(this, newState[key], oldState[key]);
         }
-      }
-    }
-  }),
+      });
+    });
+  }
   /**
-   * State with undo/redo functionality
+   * Initialize computed properties
    */
-  withHistory: (initialState, maxHistory = 10) => {
-    const historyState = {
-      present: initialState,
-      past: [],
-      future: []
-    };
-    return withState(historyState, {
-      actions: {
-        undo: (state, setState) => {
-          if (state.past.length === 0) return;
-          const previous = state.past[state.past.length - 1];
-          const newPast = state.past.slice(0, state.past.length - 1);
-          setState({
-            past: newPast,
-            present: previous,
-            future: [state.present, ...state.future]
-          });
-        },
-        redo: (state, setState) => {
-          if (state.future.length === 0) return;
-          const next = state.future[0];
-          const newFuture = state.future.slice(1);
-          setState({
-            past: [...state.past, state.present],
-            present: next,
-            future: newFuture
-          });
-        },
-        updatePresent: (state, setState, { args: [newPresent] }) => {
-          setState({
-            past: [...state.past, state.present].slice(-maxHistory),
-            present: newPresent,
-            future: []
-          });
+  initializeComputed() {
+    Object.keys(this.computed).forEach((key) => {
+      Object.defineProperty(this, key, {
+        get: () => {
+          if (!this.computedCache.has(key)) {
+            const value = this.computed[key].call(this);
+            this.computedCache.set(key, value);
+          }
+          return this.computedCache.get(key);
         },
-        canUndo: (state) => state.past.length > 0,
-        canRedo: (state) => state.future.length > 0
-      }
+        enumerable: true
+      });
     });
-  },
+  }
   /**
-   * Computed state properties
+   * Handle state changes
    */
-  computed: (initialState, computedProps) => withState(initialState, {
-    stateTransform: (state) => {
-      const computed = {};
-      Object.entries(computedProps).forEach(([key, computeFn]) => {
-        computed[key] = computeFn(state);
-      });
-      return { ...state, ...computed };
-    },
-    memoizeState: true
-  })
-};
-function createStateManager(config) {
-  const {
-    initialState = {},
-    reducers = {},
-    actions = {},
-    middleware = [],
-    plugins = []
-  } = config;
-  const rootReducer = (state, action) => {
-    let nextState = state;
-    Object.entries(reducers).forEach(([key, reducer]) => {
-      nextState = {
-        ...nextState,
-        [key]: reducer(nextState[key], action)
-      };
-    });
-    return nextState;
-  };
-  const enhancedConfig = plugins.reduce(
-    (acc, plugin) => plugin(acc),
-    { initialState, reducer: rootReducer, actions, middleware }
-  );
-  return withState(enhancedConfig.initialState, {
-    reducer: enhancedConfig.reducer,
-    actions: enhancedConfig.actions,
-    middleware: enhancedConfig.middleware
-  });
-}
-function getComponentName(component) {
-  if (!component) return "Component";
-  return component.displayName || component.name || component.constructor?.name || "Component";
-}
-
-// src/utils/error-handler.js
-var CoherentError = class _CoherentError extends Error {
-  constructor(message, options = {}) {
-    super(message);
-    this.name = "CoherentError";
-    this.type = options.type || "generic";
-    this.component = options.component;
-    this.context = options.context;
-    this.suggestions = options.suggestions || [];
-    this.timestamp = Date.now();
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(this, _CoherentError);
+  onStateChange() {
+    if (this.isDestroyed) return;
+    this.computedCache.clear();
+    if (this.isMounted) {
+      this.update();
     }
   }
-  toJSON() {
-    return {
-      name: this.name,
-      message: this.message,
-      type: this.type,
-      component: this.component,
-      context: this.context,
-      suggestions: this.suggestions,
-      timestamp: this.timestamp,
-      stack: this.stack
-    };
-  }
-};
-var ComponentValidationError = class extends CoherentError {
-  constructor(message, component, suggestions = []) {
-    super(message, {
-      type: "validation",
-      component,
-      suggestions: [
-        "Check component structure and syntax",
-        "Ensure all required properties are present",
-        "Validate prop types and values",
-        ...suggestions
-      ]
-    });
-    this.name = "ComponentValidationError";
-  }
-};
-var RenderingError = class extends CoherentError {
-  constructor(message, component, context2, suggestions = []) {
-    super(message, {
-      type: "rendering",
-      component,
-      context: context2,
-      suggestions: [
-        "Check for circular references",
-        "Validate component depth",
-        "Ensure all functions return valid components",
-        ...suggestions
-      ]
-    });
-    this.name = "RenderingError";
-  }
-};
-var PerformanceError = class extends CoherentError {
-  constructor(message, metrics, suggestions = []) {
-    super(message, {
-      type: "performance",
-      context: metrics,
-      suggestions: [
-        "Consider component memoization",
-        "Reduce component complexity",
-        "Enable caching",
-        ...suggestions
-      ]
-    });
-    this.name = "PerformanceError";
-  }
-};
-var StateError = class extends CoherentError {
-  constructor(message, state, suggestions = []) {
-    super(message, {
-      type: "state",
-      context: state,
-      suggestions: [
-        "Check state mutations",
-        "Ensure proper state initialization",
-        "Validate state transitions",
-        ...suggestions
-      ]
-    });
-    this.name = "StateError";
+  /**
+   * Call lifecycle hook
+   */
+  callHook(hookName, ...args) {
+    try {
+      if (this.hooks[hookName]) {
+        return this.hooks[hookName].call(this, ...args);
+      }
+    } catch (_error) {
+      this.handleError(_error, `${hookName} hook`);
+    }
   }
-};
-var ErrorHandler = class {
-  constructor(options = {}) {
-    this.options = {
-      enableStackTrace: options.enableStackTrace !== false,
-      enableSuggestions: options.enableSuggestions !== false,
-      enableLogging: options.enableLogging !== false,
-      logLevel: options.logLevel || "_error",
-      maxErrorHistory: options.maxErrorHistory || 100,
-      ...options
-    };
-    this.errorHistory = [];
-    this.errorCounts = /* @__PURE__ */ new Map();
-    this.suppressedErrors = /* @__PURE__ */ new Set();
+  /**
+   * Handle component errors
+   */
+  handleError(_error) {
+    console.error(`Component Error in ${this.name}:`, _error);
+    this.callHook("errorCaptured", _error);
+    if (this.parent && this.parent.handleError) {
+      this.parent.handleError(_error, `${this.name} -> ${context}`);
+    }
   }
   /**
-   * Handle and report errors with detailed context
+   * Render the component
    */
-  handle(_error, context2 = {}) {
-    const enhancedError = this.enhanceError(_error, context2);
-    this.addToHistory(enhancedError);
-    if (this.options.enableLogging) {
-      this.logError(enhancedError);
+  render(props = {}) {
+    if (this.isDestroyed) {
+      console.warn(`Attempting to render destroyed component: ${this.name}`);
+      return null;
+    }
+    try {
+      const metadata = COMPONENT_METADATA.get(this);
+      if (metadata) {
+        metadata.renderCount++;
+      }
+      this.props = { ...props };
+      if (typeof this.definition.render === "function") {
+        this.rendered = this.definition.render.call(this, this.props, this.state.get());
+      } else if (typeof this.definition.template !== "undefined") {
+        this.rendered = this.processTemplate(this.definition.template, this.props, this.state.get());
+      } else {
+        throw new Error(`Component ${this.name} must have either render method or template`);
+      }
+      if (this.rendered !== null) {
+        validateComponent(this.rendered, this.name);
+      }
+      return this.rendered;
+    } catch (_error) {
+      this.handleError(_error);
+      return { div: { className: "component-_error", text: `Error in ${this.name}` } };
     }
-    return enhancedError;
   }
   /**
-   * Enhance existing errors with more context
+   * Process template with data
    */
-  enhanceError(_error, context2 = {}) {
-    if (_error instanceof CoherentError) {
-      return _error;
+  processTemplate(template, props, state) {
+    if (typeof template === "function") {
+      return template.call(this, props, state);
     }
-    const errorType = this.classifyError(_error, context2);
-    switch (errorType) {
-      case "validation":
-        return new ComponentValidationError(
-          _error.message,
-          context2.component,
-          this.generateSuggestions(_error, context2)
-        );
-      case "rendering":
-        return new RenderingError(
-          _error.message,
-          context2.component,
-          context2.renderContext,
-          this.generateSuggestions(_error, context2)
-        );
-      case "performance":
-        return new PerformanceError(
-          _error.message,
-          context2.metrics,
-          this.generateSuggestions(_error, context2)
-        );
-      case "state":
-        return new StateError(
-          _error.message,
-          context2.state,
-          this.generateSuggestions(_error, context2)
-        );
-      default:
-        return new CoherentError(_error.message, {
-          type: errorType,
-          component: context2.component,
-          context: context2.context,
-          suggestions: this.generateSuggestions(_error, context2)
-        });
+    if (typeof template === "string") {
+      return template.replace(/\{\{(\w+)\}\}/g, (match, key) => {
+        return props[key] || state[key] || "";
+      });
     }
+    const processed = deepClone(template);
+    this.interpolateObject(processed, { ...props, ...state });
+    return processed;
   }
   /**
-   * Classify _error type based on message and context
+   * Interpolate object with data
    */
-  classifyError(_error, context2) {
-    const message = _error.message.toLowerCase();
-    if (message.includes("invalid") || message.includes("validation") || message.includes("required") || message.includes("type")) {
-      return "validation";
+  interpolateObject(obj, data) {
+    if (typeof obj === "string") {
+      return obj.replace(/\{\{(\w+)\}\}/g, (match, key) => data[key] || "");
     }
-    if (message.includes("render") || message.includes("circular") || message.includes("depth") || message.includes("cannot render")) {
-      return "rendering";
+    if (Array.isArray(obj)) {
+      return obj.map((item) => this.interpolateObject(item, data));
     }
-    if (message.includes("slow") || message.includes("memory") || message.includes("performance") || message.includes("timeout")) {
-      return "performance";
+    if (obj && typeof obj === "object") {
+      Object.keys(obj).forEach((key) => {
+        obj[key] = this.interpolateObject(obj[key], data);
+      });
     }
-    if (message.includes("state") || message.includes("mutation") || message.includes("store") || context2.state) {
-      return "state";
+    return obj;
+  }
+  /**
+   * Mount the component
+   */
+  mount() {
+    if (this.isMounted || this.isDestroyed) return this;
+    this.callHook("beforeMount");
+    this.isMounted = true;
+    this.callHook("mounted");
+    return this;
+  }
+  /**
+   * Update the component
+   */
+  update() {
+    if (!this.isMounted || this.isDestroyed) return this;
+    const metadata = COMPONENT_METADATA.get(this);
+    if (metadata) {
+      metadata.updateCount++;
     }
-    if (context2.component) return "validation";
-    if (context2.renderContext) return "rendering";
-    if (context2.metrics) return "performance";
-    return "generic";
+    this.callHook("beforeUpdate");
+    this.callHook("updated");
+    return this;
   }
   /**
-   * Generate helpful suggestions based on _error
+   * Destroy the component
    */
-  generateSuggestions(_error, context2 = {}) {
-    const suggestions = [];
-    const message = _error.message.toLowerCase();
-    const patterns = [
-      {
-        pattern: /cannot render|render.*failed/,
-        suggestions: [
-          "Check if component returns a valid object structure",
-          "Ensure all properties are properly defined",
-          "Look for undefined variables or null references"
-        ]
-      },
-      {
-        pattern: /circular.*reference/,
-        suggestions: [
-          "Remove circular references between components",
-          "Use lazy loading or memoization to break cycles",
-          "Check for self-referencing components"
-        ]
+  destroy() {
+    if (this.isDestroyed) return this;
+    this.callHook("beforeDestroy");
+    if (this.unsubscribeState) {
+      this.unsubscribeState();
+    }
+    this.children.forEach((child) => {
+      if (child.destroy) {
+        child.destroy();
+      }
+    });
+    this.isMounted = false;
+    this.isDestroyed = true;
+    this.children = [];
+    this.parent = null;
+    this.callHook("destroyed");
+    return this;
+  }
+  /**
+   * Get component metadata
+   */
+  getMetadata() {
+    return COMPONENT_METADATA.get(this) || {};
+  }
+  /**
+   * Clone component with new props/state
+   */
+  clone(overrides = {}) {
+    const newDefinition = { ...this.definition, ...overrides };
+    return new _Component(newDefinition);
+  }
+};
+function createComponent(definition) {
+  if (typeof definition === "function") {
+    definition = {
+      name: definition.name || "FunctionalComponent",
+      render: definition
+    };
+  }
+  return new Component(definition);
+}
+function defineComponent(definition) {
+  const componentFactory = (props) => {
+    const component = new Component(definition);
+    return component.render(props);
+  };
+  componentFactory.componentName = definition.name || "Component";
+  componentFactory.definition = definition;
+  return componentFactory;
+}
+function registerComponent(name, definition) {
+  if (COMPONENT_REGISTRY.has(name)) {
+    console.warn(`Component ${name} is already registered. Overriding.`);
+  }
+  const component = typeof definition === "function" ? defineComponent({ name, render: definition }) : defineComponent(definition);
+  COMPONENT_REGISTRY.set(name, component);
+  return component;
+}
+function getComponent(name) {
+  return COMPONENT_REGISTRY.get(name);
+}
+function getRegisteredComponents() {
+  return new Map(COMPONENT_REGISTRY);
+}
+if (performanceMonitor) {
+  const originalRender = Component.prototype.render;
+  Component.prototype.render = function(...args) {
+    const start = performance.now();
+    const result = originalRender.apply(this, args);
+    const duration = performance.now() - start;
+    performanceMonitor.recordMetric("renderTime", duration, {
+      type: "component",
+      name: this.name,
+      propsSize: JSON.stringify(this.props || {}).length,
+      hasState: Object.keys(this.state?.get() || {}).length > 0
+    });
+    return result;
+  };
+}
+function lazy(factory, options = {}) {
+  const {
+    cache = true,
+    // Cache the result after first evaluation
+    timeout = null,
+    // Optional timeout for evaluation
+    fallback = null,
+    // Fallback value if evaluation fails
+    onError = null,
+    // Error handler
+    dependencies = []
+    // Dependencies that invalidate cache
+  } = options;
+  let cached = false;
+  let cachedValue = null;
+  let isEvaluating = false;
+  let lastDependencyHash = null;
+  const lazyWrapper = {
+    // Mark as lazy for identification
+    __isLazy: true,
+    __factory: factory,
+    __options: options,
+    // Evaluation method
+    evaluate(...args) {
+      if (isEvaluating) {
+        console.warn("Lazy evaluation cycle detected, returning fallback");
+        return fallback;
+      }
+      if (cache && dependencies.length > 0) {
+        const currentHash = hashDependencies(dependencies);
+        if (lastDependencyHash !== null && lastDependencyHash !== currentHash) {
+          cached = false;
+          cachedValue = null;
+        }
+        lastDependencyHash = currentHash;
+      }
+      if (cache && cached) {
+        return cachedValue;
+      }
+      isEvaluating = true;
+      try {
+        let result;
+        if (timeout) {
+          result = evaluateWithTimeout(factory, timeout, args, fallback);
+        } else {
+          result = typeof factory === "function" ? factory(...args) : factory;
+        }
+        if (result && typeof result.then === "function") {
+          return result.catch((_error) => {
+            if (onError) onError(_error);
+            return fallback;
+          });
+        }
+        if (cache) {
+          cached = true;
+          cachedValue = result;
+        }
+        return result;
+      } catch (_error) {
+        if (onError) {
+          onError(_error);
+        } else {
+          console.error("Lazy evaluation _error:", _error);
+        }
+        return fallback;
+      } finally {
+        isEvaluating = false;
+      }
+    },
+    // Force re-evaluation
+    invalidate() {
+      cached = false;
+      cachedValue = null;
+      lastDependencyHash = null;
+      return this;
+    },
+    // Check if evaluated
+    isEvaluated() {
+      return cached;
+    },
+    // Get cached value without evaluation
+    getCachedValue() {
+      return cachedValue;
+    },
+    // Transform the lazy value
+    map(transform) {
+      return lazy((...args) => {
+        const value = this.evaluate(...args);
+        return transform(value);
+      }, { ...options, cache: false });
+    },
+    // Chain lazy evaluations
+    flatMap(transform) {
+      return lazy((...args) => {
+        const value = this.evaluate(...args);
+        const transformed = transform(value);
+        if (isLazy(transformed)) {
+          return transformed.evaluate(...args);
+        }
+        return transformed;
+      }, { ...options, cache: false });
+    },
+    // Convert to string for debugging
+    toString() {
+      return `[Lazy${cached ? " (cached)" : ""}]`;
+    },
+    // JSON serialization
+    toJSON() {
+      return this.evaluate();
+    }
+  };
+  return lazyWrapper;
+}
+function isLazy(value) {
+  return value && typeof value === "object" && value.__isLazy === true;
+}
+function evaluateLazy(obj, ...args) {
+  if (isLazy(obj)) {
+    return obj.evaluate(...args);
+  }
+  if (Array.isArray(obj)) {
+    return obj.map((item) => evaluateLazy(item, ...args));
+  }
+  if (obj && typeof obj === "object") {
+    const result = {};
+    for (const [key, value] of Object.entries(obj)) {
+      result[key] = evaluateLazy(value, ...args);
+    }
+    return result;
+  }
+  return obj;
+}
+function hashDependencies(dependencies) {
+  return dependencies.map((dep) => {
+    if (typeof dep === "function") {
+      return dep.toString();
+    }
+    return JSON.stringify(dep);
+  }).join("|");
+}
+function evaluateWithTimeout(factory, timeout, args, fallback) {
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(() => {
+      reject(new Error(`Lazy evaluation timeout after ${timeout}ms`));
+    }, timeout);
+    try {
+      const result = factory(...args);
+      if (result && typeof result.then === "function") {
+        result.then((value) => {
+          clearTimeout(timer);
+          resolve(value);
+        }).catch((_error) => {
+          clearTimeout(timer);
+          reject(_error);
+        });
+      } else {
+        clearTimeout(timer);
+        resolve(result);
+      }
+    } catch (_error) {
+      clearTimeout(timer);
+      reject(_error);
+    }
+  }).catch(() => fallback);
+}
+function memo(fn, options = {}) {
+  const {
+    // Caching strategy
+    strategy = "lru",
+    // 'lru', 'ttl', 'weak', 'simple'
+    maxSize = 100,
+    // Maximum cache entries
+    ttl = null,
+    // Time to live in milliseconds
+    // Key generation
+    keyFn = null,
+    // Custom key function
+    keySerializer = JSON.stringify,
+    // Default serialization
+    // Comparison
+    // eslint-disable-next-line no-unused-vars
+    compareFn = null,
+    // Custom equality comparison
+    // eslint-disable-next-line no-unused-vars
+    shallow = false,
+    // Shallow comparison for objects
+    // Lifecycle hooks
+    onHit = null,
+    // Called on cache hit
+    onMiss = null,
+    // Called on cache miss
+    onEvict = null,
+    // Called when item evicted
+    // Performance
+    stats = false,
+    // Track hit/miss statistics
+    // Development
+    debug = false
+    // Debug logging
+  } = options;
+  let cache;
+  const stats_data = stats ? { hits: 0, misses: 0, evictions: 0 } : null;
+  switch (strategy) {
+    case "lru":
+      cache = new LRUCache(maxSize, { onEvict });
+      break;
+    case "ttl":
+      cache = new TTLCache(ttl, { onEvict });
+      break;
+    case "weak":
+      cache = /* @__PURE__ */ new WeakMap();
+      break;
+    default:
+      cache = /* @__PURE__ */ new Map();
+  }
+  const generateKey = keyFn || ((...args) => {
+    if (args.length === 0) return "__empty__";
+    if (args.length === 1) return keySerializer(args[0]);
+    return keySerializer(args);
+  });
+  const memoizedFn = (...args) => {
+    const key = generateKey(...args);
+    if (cache.has(key)) {
+      const cached = cache.get(key);
+      if (cached && (!cached.expires || Date.now() < cached.expires)) {
+        if (debug) console.log(`Memo cache hit for key: ${key}`);
+        if (onHit) onHit(key, cached.value, args);
+        if (stats_data) stats_data.hits++;
+        return cached.value || cached;
+      } else {
+        cache.delete(key);
+      }
+    }
+    if (debug) console.log(`Memo cache miss for key: ${key}`);
+    if (onMiss) onMiss(key, args);
+    if (stats_data) stats_data.misses++;
+    const result = fn(...args);
+    const cacheEntry = ttl ? { value: result, expires: Date.now() + ttl } : result;
+    cache.set(key, cacheEntry);
+    return result;
+  };
+  memoizedFn.cache = cache;
+  memoizedFn.clear = () => cache.clear();
+  memoizedFn.delete = (key) => cache.delete(key);
+  memoizedFn.has = (key) => cache.has(key);
+  memoizedFn.size = () => cache.size;
+  if (stats_data) {
+    memoizedFn.stats = () => ({ ...stats_data });
+    memoizedFn.resetStats = () => {
+      stats_data.hits = 0;
+      stats_data.misses = 0;
+      stats_data.evictions = 0;
+    };
+  }
+  memoizedFn.refresh = (...args) => {
+    const key = generateKey(...args);
+    cache.delete(key);
+    return memoizedFn(...args);
+  };
+  return memoizedFn;
+}
+var LRUCache = class {
+  constructor(maxSize = 100, options = {}) {
+    this.maxSize = maxSize;
+    this.cache = /* @__PURE__ */ new Map();
+    this.onEvict = options.onEvict;
+  }
+  get(key) {
+    if (this.cache.has(key)) {
+      const value = this.cache.get(key);
+      this.cache.delete(key);
+      this.cache.set(key, value);
+      return value;
+    }
+    return void 0;
+  }
+  set(key, value) {
+    if (this.cache.has(key)) {
+      this.cache.delete(key);
+    } else if (this.cache.size >= this.maxSize) {
+      const firstKey = this.cache.keys().next().value;
+      const evicted = this.cache.get(firstKey);
+      this.cache.delete(firstKey);
+      if (this.onEvict) {
+        this.onEvict(firstKey, evicted);
+      }
+    }
+    this.cache.set(key, value);
+  }
+  has(key) {
+    return this.cache.has(key);
+  }
+  delete(key) {
+    return this.cache.delete(key);
+  }
+  clear() {
+    this.cache.clear();
+  }
+  get size() {
+    return this.cache.size;
+  }
+};
+var TTLCache = class {
+  constructor(ttl, options = {}) {
+    this.ttl = ttl;
+    this.cache = /* @__PURE__ */ new Map();
+    this.timers = /* @__PURE__ */ new Map();
+    this.onEvict = options.onEvict;
+  }
+  get(key) {
+    if (this.cache.has(key)) {
+      const entry = this.cache.get(key);
+      if (Date.now() < entry.expires) {
+        return entry.value;
+      } else {
+        this.delete(key);
+      }
+    }
+    return void 0;
+  }
+  set(key, value) {
+    if (this.timers.has(key)) {
+      clearTimeout(this.timers.get(key));
+    }
+    const expires = Date.now() + this.ttl;
+    this.cache.set(key, { value, expires });
+    const timer = setTimeout(() => {
+      this.delete(key);
+    }, this.ttl);
+    this.timers.set(key, timer);
+  }
+  has(key) {
+    if (this.cache.has(key)) {
+      const entry = this.cache.get(key);
+      return Date.now() < entry.expires;
+    }
+    return false;
+  }
+  delete(key) {
+    const had = this.cache.has(key);
+    if (had) {
+      const entry = this.cache.get(key);
+      this.cache.delete(key);
+      if (this.timers.has(key)) {
+        clearTimeout(this.timers.get(key));
+        this.timers.delete(key);
+      }
+      if (this.onEvict) {
+        this.onEvict(key, entry.value);
+      }
+    }
+    return had;
+  }
+  clear() {
+    this.timers.forEach((timer) => clearTimeout(timer));
+    this.timers.clear();
+    this.cache.clear();
+  }
+  get size() {
+    return this.cache.size;
+  }
+};
+function withState(initialState = {}, options = {}) {
+  const {
+    // State options
+    persistent = false,
+    // Persist state across component unmounts
+    storageKey = null,
+    // Key for persistent storage
+    storage = typeof window !== "undefined" && typeof window.localStorage !== "undefined" ? window.localStorage : {
+      // Fallback storage for Node.js environments
+      _data: /* @__PURE__ */ new Map(),
+      setItem(key, value) {
+        this._data.set(key, value);
       },
-      {
-        pattern: /maximum.*depth/,
-        suggestions: [
-          "Reduce component nesting depth",
-          "Break complex components into smaller parts",
-          "Check for infinite recursion in component functions"
-        ]
+      getItem(key) {
+        return this._data.get(key) || null;
       },
-      {
-        pattern: /invalid.*component/,
-        suggestions: [
-          "Ensure component follows the expected object structure",
-          "Check property names and values for typos",
-          "Verify component is not null or undefined"
-        ]
+      removeItem(key) {
+        this._data.delete(key);
       },
-      {
-        pattern: /performance|slow|timeout/,
-        suggestions: [
-          "Enable component caching",
-          "Use memoization for expensive operations",
-          "Reduce component complexity",
-          "Consider lazy loading for large components"
-        ]
+      clear() {
+        this._data.clear();
+      }
+    },
+    // Storage mechanism
+    // State transformation
+    stateTransform = null,
+    // Transform state before injection
+    propName = "state",
+    // Prop name for state injection
+    actionsName = "actions",
+    // Prop name for action injection
+    // Reducers and actions
+    reducer = null,
+    // State reducer function
+    actions = {},
+    // Action creators
+    middleware = [],
+    // State middleware
+    // Performance
+    memoizeState = false,
+    // Memoize state transformations
+    // eslint-disable-next-line no-unused-vars
+    shallow = false,
+    // Shallow state comparison
+    // Development
+    // eslint-disable-next-line no-unused-vars
+    devTools = false,
+    // Connect to dev tools
+    debug = false,
+    // Debug logging
+    displayName = null,
+    // Component name for debugging
+    // Lifecycle hooks
+    onStateChange = null,
+    // Called when state changes
+    onMount = null,
+    // Called when component mounts
+    onUnmount = null,
+    // Called when component unmounts
+    // Validation
+    validator = null,
+    // State validator function
+    // Async state
+    supportAsync = false
+    // Support async state updates
+  } = options;
+  return function withStateHOC(WrappedComponent) {
+    const stateContainer = createStateContainer(initialState, {
+      persistent,
+      storageKey: storageKey || `${getComponentName(WrappedComponent)}_state`,
+      storage,
+      reducer,
+      middleware,
+      validator,
+      onStateChange,
+      debug
+    });
+    function WithStateComponent(props = {}, globalState = {}, context2 = {}) {
+      if (!stateContainer.initialized) {
+        stateContainer.initialize();
+        if (onMount) {
+          onMount(stateContainer.getState(), props, context2);
+        }
+      }
+      const currentState = stateContainer.getState();
+      let transformedState = currentState;
+      if (stateTransform) {
+        transformedState = stateTransform(currentState, props, context2);
+      }
+      const boundActions = createBoundActions(actions, stateContainer, {
+        props,
+        context: context2,
+        supportAsync,
+        debug
+      });
+      const stateUtils = {
+        // Basic state operations
+        setState: stateContainer.setState.bind(stateContainer),
+        getState: stateContainer.getState.bind(stateContainer),
+        resetState: () => stateContainer.setState(initialState),
+        // Advanced operations
+        updateState: (updater) => {
+          const current = stateContainer.getState();
+          const next = typeof updater === "function" ? updater(current) : updater;
+          stateContainer.setState(next);
+        },
+        // Batch updates
+        batchUpdate: (updates) => {
+          stateContainer.batch(() => {
+            updates.forEach((update) => {
+              if (typeof update === "function") {
+                update(stateContainer);
+              } else {
+                stateContainer.setState(update);
+              }
+            });
+          });
+        },
+        // Computed state
+        computed: (computeFn) => {
+          return memoizeState ? memo(computeFn)(transformedState) : computeFn(transformedState);
+        },
+        // State subscription
+        subscribe: stateContainer.subscribe.bind(stateContainer),
+        unsubscribe: stateContainer.unsubscribe.bind(stateContainer),
+        // Async state operations
+        ...supportAsync && {
+          setStateAsync: async (stateOrPromise) => {
+            const resolved = await Promise.resolve(stateOrPromise);
+            stateContainer.setState(resolved);
+          },
+          updateStateAsync: async (asyncUpdater) => {
+            const current = stateContainer.getState();
+            const next = await Promise.resolve(asyncUpdater(current));
+            stateContainer.setState(next);
+          }
+        }
+      };
+      const enhancedProps = {
+        ...props,
+        [propName]: transformedState,
+        [actionsName]: boundActions,
+        setState: stateUtils.setState,
+        getState: stateUtils.getState,
+        stateUtils
+      };
+      if (debug) {
+        console.log("withState render:", {
+          component: getComponentName(WrappedComponent),
+          state: transformedState,
+          props: enhancedProps
+        });
+      }
+      return typeof WrappedComponent === "function" ? WrappedComponent(enhancedProps, globalState, context2) : WrappedComponent;
+    }
+    WithStateComponent.displayName = displayName || `withState(${getComponentName(WrappedComponent)})`;
+    WithStateComponent.__isHOC = true;
+    WithStateComponent.__hasState = true;
+    WithStateComponent.__stateContainer = stateContainer;
+    WithStateComponent.__wrappedComponent = WrappedComponent;
+    WithStateComponent.cleanup = () => {
+      if (onUnmount) {
+        onUnmount(stateContainer.getState());
+      }
+      if (!persistent) {
+        stateContainer.destroy();
+      }
+    };
+    return WithStateComponent;
+  };
+}
+function createStateContainer(initialState, options) {
+  const {
+    persistent,
+    storageKey,
+    storage,
+    reducer,
+    middleware,
+    validator,
+    onStateChange,
+    debug
+  } = options;
+  let state = deepClone(initialState);
+  let listeners = /* @__PURE__ */ new Set();
+  const middlewareStack = [...middleware];
+  const container = {
+    initialized: false,
+    initialize() {
+      if (persistent && storageKey) {
+        try {
+          const saved = storage.getItem(storageKey);
+          if (saved) {
+            const parsed = JSON.parse(saved);
+            state = { ...state, ...parsed };
+          }
+        } catch (_error) {
+          if (debug) console.warn("Failed to load persisted state:", _error);
+        }
+      }
+      container.initialized = true;
+    },
+    getState() {
+      return deepClone(state);
+    },
+    setState(newState) {
+      const prevState = state;
+      if (reducer) {
+        state = reducer(state, { type: "SET_STATE", payload: newState });
+      } else {
+        state = typeof newState === "function" ? newState(state) : { ...state, ...newState };
+      }
+      if (validator && !validator(state)) {
+        if (debug) console.warn("State validation failed, reverting:", state);
+        state = prevState;
+        return false;
+      }
+      state = middlewareStack.reduce(
+        (acc, middleware2) => middleware2(acc, prevState) || acc,
+        state
+      );
+      if (persistent && storageKey) {
+        try {
+          storage.setItem(storageKey, JSON.stringify(state));
+        } catch (_error) {
+          if (debug) console.warn("Failed to persist state:", _error);
+        }
       }
-    ];
-    patterns.forEach(({ pattern, suggestions: patternSuggestions }) => {
-      if (pattern.test(message)) {
-        suggestions.push(...patternSuggestions);
+      if (state !== prevState) {
+        listeners.forEach((listener) => {
+          try {
+            listener(state, prevState);
+          } catch (_error) {
+            if (debug) console.error("State listener _error:", _error);
+          }
+        });
+        if (onStateChange) {
+          onStateChange(state, prevState);
+        }
       }
-    });
-    if (context2.component) {
-      const componentType = typeof context2.component;
-      if (componentType === "function") {
-        suggestions.push("Check function component return value");
-      } else if (componentType === "object" && context2.component === null) {
-        suggestions.push("Component is null - ensure proper initialization");
-      } else if (Array.isArray(context2.component)) {
-        suggestions.push("Arrays should contain valid component objects");
+      return true;
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    unsubscribe(listener) {
+      return listeners.delete(listener);
+    },
+    batch(batchFn) {
+      const originalListeners = listeners;
+      listeners = /* @__PURE__ */ new Set();
+      try {
+        batchFn();
+      } finally {
+        listeners = originalListeners;
+        listeners.forEach((listener) => listener(state));
+      }
+    },
+    destroy() {
+      listeners.clear();
+      if (persistent && storageKey) {
+        try {
+          storage.removeItem(storageKey);
+        } catch (_error) {
+          if (debug) console.warn("Failed to remove persisted state:", _error);
+        }
       }
     }
-    if (suggestions.length === 0) {
-      suggestions.push(
-        "Enable development tools for more detailed debugging",
-        "Check browser console for additional _error details",
-        "Use component validation tools to identify issues"
-      );
-    }
-    return [...new Set(suggestions)];
-  }
+  };
+  return container;
+}
+function createBoundActions(actions, stateContainer, options) {
+  const { props, context: context2, supportAsync, debug } = options;
+  const boundActions = {};
+  Object.entries(actions).forEach(([actionName, actionCreator]) => {
+    boundActions[actionName] = (...args) => {
+      try {
+        const result = actionCreator(
+          stateContainer.getState(),
+          stateContainer.setState.bind(stateContainer),
+          { props, context: context2, args }
+        );
+        if (supportAsync && result && typeof result.then === "function") {
+          return result.catch((_error) => {
+            if (debug) console.error(`Async action ${actionName} failed:`, _error);
+            throw _error;
+          });
+        }
+        return result;
+      } catch (_error) {
+        if (debug) console.error(`Action ${actionName} failed:`, _error);
+        throw _error;
+      }
+    };
+  });
+  return boundActions;
+}
+var withStateUtils = {
   /**
-   * Add _error to history with deduplication
+   * Simple local state
    */
-  addToHistory(_error) {
-    const errorKey = `${_error.name}:${_error.message}`;
-    this.errorCounts.set(errorKey, (this.errorCounts.get(errorKey) || 0) + 1);
-    const historyEntry = {
-      ..._error.toJSON(),
-      count: this.errorCounts.get(errorKey),
-      firstSeen: this.errorHistory.find((e) => e.key === errorKey)?.firstSeen || _error.timestamp,
-      key: errorKey
-    };
-    this.errorHistory = this.errorHistory.filter((e) => e.key !== errorKey);
-    this.errorHistory.unshift(historyEntry);
-    if (this.errorHistory.length > this.options.maxErrorHistory) {
-      this.errorHistory = this.errorHistory.slice(0, this.options.maxErrorHistory);
-    }
-  }
+  local: (initialState) => withState(initialState),
   /**
-   * Log _error with enhanced formatting
+   * Persistent state with localStorage
    */
-  logError(_error) {
-    if (this.suppressedErrors.has(`${_error.name}:${_error.message}`)) {
-      return;
-    }
-    const isRepeated = this.errorCounts.get(`${_error.name}:${_error.message}`) > 1;
-    const errorGroup = `\u{1F6A8} ${_error.name}${isRepeated ? ` (\xD7${this.errorCounts.get(`${_error.name}:${_error.message}`)})` : ""}`;
-    console.group(errorGroup);
-    console.error(`\u274C ${_error.message}`);
-    if (_error.component) {
-      console.log("\u{1F50D} Component:", this.formatComponent(_error.component));
-    }
-    if (_error.context) {
-      console.log("\u{1F4CB} Context:", _error.context);
-    }
-    if (this.options.enableSuggestions && _error.suggestions.length > 0) {
-      console.group("\u{1F4A1} Suggestions:");
-      _error.suggestions.forEach((suggestion, index) => {
-        console.log(`${index + 1}. ${suggestion}`);
-      });
-      console.groupEnd();
-    }
-    if (this.options.enableStackTrace && _error.stack) {
-      console.log("\u{1F4DA} Stack trace:", _error.stack);
-    }
-    console.groupEnd();
-  }
+  persistent: (initialState, key) => withState(initialState, {
+    persistent: true,
+    storageKey: key
+  }),
   /**
-   * Format component for logging
+   * State with reducer pattern
    */
-  formatComponent(component, maxDepth = 2, currentDepth = 0) {
-    if (currentDepth > maxDepth) {
-      return "[...deep]";
-    }
-    if (typeof component === "function") {
-      return `[Function: ${component.name || "anonymous"}]`;
-    }
-    if (Array.isArray(component)) {
-      return component.slice(0, 3).map(
-        (item) => this.formatComponent(item, maxDepth, currentDepth + 1)
-      );
+  reducer: (initialState, reducer, actions = {}) => withState(initialState, {
+    reducer,
+    actions
+  }),
+  /**
+   * Async state management
+   */
+  async: (initialState, asyncActions = {}) => withState(initialState, {
+    supportAsync: true,
+    actions: asyncActions
+  }),
+  /**
+   * State with validation
+   */
+  validated: (initialState, validator) => withState(initialState, {
+    validator,
+    debug: true
+  }),
+  /**
+   * Shared state across components
+   */
+  shared: (initialState, sharedKey) => {
+    const sharedStates = withStateUtils._shared || (withStateUtils._shared = /* @__PURE__ */ new Map());
+    if (!sharedStates.has(sharedKey)) {
+      sharedStates.set(sharedKey, createStateContainer(initialState, {}));
     }
-    if (component && typeof component === "object") {
-      const formatted = {};
-      const keys = Object.keys(component).slice(0, 5);
-      for (const key of keys) {
-        if (key === "children" && component[key]) {
-          formatted[key] = this.formatComponent(component[key], maxDepth, currentDepth + 1);
-        } else {
-          formatted[key] = component[key];
-        }
-      }
-      if (Object.keys(component).length > 5) {
-        formatted["..."] = `(${Object.keys(component).length - 5} more)`;
+    return (WrappedComponent) => {
+      const sharedContainer = sharedStates.get(sharedKey);
+      function SharedStateComponent(props, globalState, context2) {
+        const currentState = sharedContainer.getState();
+        const enhancedProps = {
+          ...props,
+          state: currentState,
+          setState: sharedContainer.setState.bind(sharedContainer),
+          subscribe: sharedContainer.subscribe.bind(sharedContainer)
+        };
+        return typeof WrappedComponent === "function" ? WrappedComponent(enhancedProps, globalState, context2) : WrappedComponent;
       }
-      return formatted;
-    }
-    return component;
-  }
+      SharedStateComponent.displayName = `withSharedState(${getComponentName(WrappedComponent)})`;
+      return SharedStateComponent;
+    };
+  },
   /**
-   * Suppress specific _error types
+   * State with form utilities
    */
-  suppress(errorPattern) {
-    this.suppressedErrors.add(errorPattern);
-  }
+  form: (initialFormState) => withState(initialFormState, {
+    actions: {
+      updateField: (state, setState, { args: [field, value] }) => {
+        setState({ [field]: value });
+      },
+      updateMultiple: (state, setState, { args: [updates] }) => {
+        setState(updates);
+      },
+      resetForm: (state, setState) => {
+        setState(initialFormState);
+      },
+      validateForm: (state, setState, { args: [validator] }) => {
+        const errors = validator(state);
+        setState({ _errors: errors });
+        return Object.keys(errors).length === 0;
+      }
+    }
+  }),
   /**
-   * Clear _error history
+   * State with loading/_error handling
    */
-  clearHistory() {
-    this.errorHistory = [];
-    this.errorCounts.clear();
-  }
+  withLoading: async (initialState) => withState({
+    ...initialState,
+    _loading: false,
+    _error: null
+  }, {
+    supportAsync: true,
+    actions: {
+      setLoading: (state, setState, { args: [loading] }) => {
+        setState({ _loading: loading });
+      },
+      setError: (state, setState, { args: [_error] }) => {
+        setState({ _error, _loading: false });
+      },
+      clearError: (state, setState) => {
+        setState({ _error: null });
+      },
+      asyncAction: async (state, setState, { args: [asyncFn] }) => {
+        setState({ _loading: true, _error: null });
+        try {
+          const result = await asyncFn(state);
+          setState({ _loading: false });
+          return result;
+        } catch (_error) {
+          setState({ _loading: false, _error });
+          throw _error;
+        }
+      }
+    }
+  }),
   /**
-   * Get _error statistics
+   * State with undo/redo functionality
    */
-  getStats() {
-    const errorsByType = {};
-    const errorsByTime = {};
-    this.errorHistory.forEach((_error) => {
-      errorsByType[_error.type] = (errorsByType[_error.type] || 0) + _error.count;
-      const hour = new Date(_error.timestamp).toISOString().slice(0, 13);
-      errorsByTime[hour] = (errorsByTime[hour] || 0) + _error.count;
-    });
-    return {
-      totalErrors: this.errorHistory.reduce((sum, e) => sum + e.count, 0),
-      uniqueErrors: this.errorHistory.length,
-      errorsByType,
-      errorsByTime,
-      mostCommonErrors: this.getMostCommonErrors(5),
-      recentErrors: this.errorHistory.slice(0, 10)
+  withHistory: (initialState, maxHistory = 10) => {
+    const historyState = {
+      present: initialState,
+      past: [],
+      future: []
     };
-  }
+    return withState(historyState, {
+      actions: {
+        undo: (state, setState) => {
+          if (state.past.length === 0) return;
+          const previous = state.past[state.past.length - 1];
+          const newPast = state.past.slice(0, state.past.length - 1);
+          setState({
+            past: newPast,
+            present: previous,
+            future: [state.present, ...state.future]
+          });
+        },
+        redo: (state, setState) => {
+          if (state.future.length === 0) return;
+          const next = state.future[0];
+          const newFuture = state.future.slice(1);
+          setState({
+            past: [...state.past, state.present],
+            present: next,
+            future: newFuture
+          });
+        },
+        updatePresent: (state, setState, { args: [newPresent] }) => {
+          setState({
+            past: [...state.past, state.present].slice(-maxHistory),
+            present: newPresent,
+            future: []
+          });
+        },
+        canUndo: (state) => state.past.length > 0,
+        canRedo: (state) => state.future.length > 0
+      }
+    });
+  },
   /**
-   * Get most common errors
+   * Computed state properties
    */
-  getMostCommonErrors(limit = 10) {
-    return this.errorHistory.sort((a, b) => b.count - a.count).slice(0, limit).map(({ name, message, count, type }) => ({
-      name,
-      message,
-      count,
-      type
-    }));
-  }
+  computed: (initialState, computedProps) => withState(initialState, {
+    stateTransform: (state) => {
+      const computed = {};
+      Object.entries(computedProps).forEach(([key, computeFn]) => {
+        computed[key] = computeFn(state);
+      });
+      return { ...state, ...computed };
+    },
+    memoizeState: true
+  })
 };
-var globalErrorHandler = new ErrorHandler();
+function createStateManager(config) {
+  const {
+    initialState = {},
+    reducers = {},
+    actions = {},
+    middleware = [],
+    plugins = []
+  } = config;
+  const rootReducer = (state, action) => {
+    let nextState = state;
+    Object.entries(reducers).forEach(([key, reducer]) => {
+      nextState = {
+        ...nextState,
+        [key]: reducer(nextState[key], action)
+      };
+    });
+    return nextState;
+  };
+  const enhancedConfig = plugins.reduce(
+    (acc, plugin) => plugin(acc),
+    { initialState, reducer: rootReducer, actions, middleware }
+  );
+  return withState(enhancedConfig.initialState, {
+    reducer: enhancedConfig.reducer,
+    actions: enhancedConfig.actions,
+    middleware: enhancedConfig.middleware
+  });
+}
+function getComponentName(component) {
+  if (!component) return "Component";
+  return component.displayName || component.name || component.constructor?.name || "Component";
+}
 
 // src/components/lifecycle.js
 var LIFECYCLE_PHASES = {
@@ -3485,6 +4658,117 @@ function createGlobalErrorHandler(options = {}) {
   return new GlobalErrorHandler(options);
 }
 
+// src/utils/render-utils.js
+function renderWithMonitoring(component, options = {}) {
+  const {
+    enablePerformanceMonitoring = false
+  } = options;
+  let html;
+  if (enablePerformanceMonitoring) {
+    const renderId = performanceMonitor.startRender();
+    html = render(component);
+    performanceMonitor.endRender(renderId);
+  } else {
+    html = render(component);
+  }
+  return html;
+}
+function renderWithTemplate(component, options = {}) {
+  const {
+    template = "<!DOCTYPE html>\n{{content}}"
+  } = options;
+  const html = renderWithMonitoring(component, options);
+  return template.replace("{{content}}", html);
+}
+async function renderComponentFactory(componentFactory, factoryArgs, options = {}) {
+  const component = await Promise.resolve(
+    componentFactory(...factoryArgs)
+  );
+  if (!component) {
+    throw new Error("Component factory returned null/undefined");
+  }
+  return renderWithTemplate(component, options);
+}
+function isCoherentComponent(obj) {
+  if (!obj || typeof obj !== "object" || Array.isArray(obj)) {
+    return false;
+  }
+  const keys = Object.keys(obj);
+  return keys.length === 1;
+}
+function createErrorResponse(error, context2 = "rendering") {
+  return {
+    error: "Internal Server Error",
+    message: error.message,
+    context: context2,
+    timestamp: (/* @__PURE__ */ new Date()).toISOString()
+  };
+}
+
+// src/utils/dependency-utils.js
+function isPeerDependencyAvailable(packageName) {
+  try {
+    if (typeof require !== "undefined" && require.resolve) {
+      require.resolve(packageName);
+      return true;
+    }
+    return false;
+  } catch {
+    return false;
+  }
+}
+async function importPeerDependency(packageName, integrationName) {
+  try {
+    return await import(packageName);
+  } catch {
+    throw new Error(
+      `${integrationName} integration requires the '${packageName}' package to be installed.
+Please install it with: npm install ${packageName}
+Or with pnpm: pnpm add ${packageName}
+Or with yarn: yarn add ${packageName}`
+    );
+  }
+}
+function createLazyIntegration(packageName, integrationName, createIntegration) {
+  let cachedIntegration = null;
+  let importPromise = null;
+  return async function(...args) {
+    if (cachedIntegration) {
+      return cachedIntegration(...args);
+    }
+    if (!importPromise) {
+      importPromise = importPeerDependency(packageName, integrationName).then((module2) => {
+        cachedIntegration = createIntegration(module2);
+        return cachedIntegration;
+      });
+    }
+    const integration = await importPromise;
+    return integration(...args);
+  };
+}
+function checkPeerDependencies(dependencies) {
+  const results = {};
+  const missing = [];
+  for (const { package: packageName, integration } of dependencies) {
+    const available = isPeerDependencyAvailable(packageName);
+    results[packageName] = available;
+    if (!available) {
+      missing.push({ package: packageName, integration });
+    }
+  }
+  if (missing.length > 0) {
+    const installCommands = missing.map(({ package: pkg }) => pkg).join(" ");
+    const integrationsList = missing.map(({ integration }) => integration).join(", ");
+    console.warn(
+      `Optional dependencies missing for ${integrationsList} integration(s).
+To use these integrations, install: npm install ${installCommands}
+Or with pnpm: pnpm add ${installCommands}
+Or with yarn: yarn add ${installCommands}`
+    );
+  }
+  return results;
+}
+
 // src/shadow-dom.js
 var shadow_dom_exports = {};
 __export(shadow_dom_exports, {
@@ -4950,7 +6234,99 @@ var eventSystem2 = {
 };
 var events_default = eventSystem2;
 
+// src/components/enhanced-composition.js
+var hoc = {
+  /**
+   * Wrap component with additional props
+   */
+  withProps(additionalProps) {
+    return (Component2) => (props) => {
+      return Component2({ ...props, ...additionalProps });
+    };
+  },
+  /**
+   * Conditional rendering HOC
+   */
+  withCondition(condition) {
+    return (Component2) => (props) => {
+      return condition(props) ? Component2(props) : null;
+    };
+  },
+  /**
+   * Loading state HOC
+   */
+  withLoading(loadingComponent) {
+    return (Component2) => (props) => {
+      return props.loading ? loadingComponent(props) : Component2(props);
+    };
+  },
+  /**
+   * Error boundary HOC
+   */
+  withError(errorComponent) {
+    return (Component2) => (props) => {
+      try {
+        return Component2(props);
+      } catch (error) {
+        return errorComponent({ error, ...props });
+      }
+    };
+  },
+  /**
+   * Memoization HOC
+   */
+  withMemo(getMemoKey) {
+    const cache = /* @__PURE__ */ new Map();
+    return (Component2) => (props) => {
+      const key = getMemoKey ? getMemoKey(props) : JSON.stringify(props);
+      if (cache.has(key)) {
+        return cache.get(key);
+      }
+      const result = Component2(props);
+      cache.set(key, result);
+      return result;
+    };
+  }
+};
+var compose = {
+  /**
+   * Combine multiple components into one
+   */
+  combine(...components) {
+    return (props) => ({
+      fragment: {
+        children: components.map((Component2) => Component2(props))
+      }
+    });
+  },
+  /**
+   * Pipe components through transformations
+   */
+  pipe(...transformers) {
+    return (Component2) => {
+      return transformers.reduce((acc, transformer) => transformer(acc), Component2);
+    };
+  },
+  /**
+   * Branch based on conditions
+   */
+  branch(condition, leftComponent, rightComponent) {
+    return (props) => {
+      return condition(props) ? leftComponent(props) : rightComponent(props);
+    };
+  },
+  /**
+   * Render component or fallback
+   */
+  maybe(Component2, fallback = null) {
+    return (props) => {
+      return Component2 ? Component2(props) : fallback;
+    };
+  }
+};
+
 // src/index.js
+var import_meta = {};
 var scopeCounter = { value: 0 };
 function generateScopeId() {
   return `coh-${scopeCounter.value++}`;
@@ -4994,7 +6370,7 @@ function applyScopeToElement(element, scopeId) {
   }
   return element;
 }
-function escapeHtml(text) {
+function escapeHtml2(text) {
   if (typeof text !== "string") return text;
   return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;");
 }
@@ -5004,83 +6380,47 @@ function dangerouslySetInnerContent(content) {
     __trusted: true
   };
 }
-function isTrustedContent(value) {
-  return value && typeof value === "object" && value.__trusted === true && typeof value.__html === "string";
-}
-function isVoidElement(tagName) {
-  const voidElements = /* @__PURE__ */ new Set([
-    "area",
-    "base",
-    "br",
-    "col",
-    "embed",
-    "hr",
-    "img",
-    "input",
-    "link",
-    "meta",
-    "param",
-    "source",
-    "track",
-    "wbr"
-  ]);
-  return voidElements.has(tagName.toLowerCase());
-}
-function formatAttributes(attrs) {
-  if (!attrs || typeof attrs !== "object") return "";
-  return Object.entries(attrs).filter(([, value]) => value !== null && value !== void 0 && value !== false).map(([key, value]) => {
-    if (typeof value === "function") {
-      value = value();
-    }
-    const attrName = key === "className" ? "class" : key;
-    if (value === true) return attrName;
-    return `${attrName}="${escapeHtml(String(value))}"`;
-  }).join(" ");
-}
-function renderRaw(obj) {
-  if (obj === null || obj === void 0) return "";
-  if (typeof obj === "string" || typeof obj === "number") return escapeHtml(String(obj));
-  if (Array.isArray(obj)) return obj.map(renderRaw).join("");
-  if (typeof obj === "function") {
-    const result = obj(renderRaw);
-    return renderRaw(result);
+function injectHydrationAttributes(component, options) {
+  if (!component || typeof component !== "object" || Array.isArray(component)) {
+    return component;
   }
-  if (typeof obj !== "object") return escapeHtml(String(obj));
-  if (obj.text !== void 0) {
-    return escapeHtml(String(obj.text));
+  const tagName = Object.keys(component)[0];
+  if (!tagName) return component;
+  const props = component[tagName];
+  if (typeof props !== "object" || props === null) return component;
+  const injected = { ...props };
+  if (options.hydratable) {
+    injected["data-hydratable"] = "true";
   }
-  for (const [tagName, props] of Object.entries(obj)) {
-    if (typeof props === "object" && props !== null) {
-      const { children, text, ...attributes } = props;
-      const attrsStr = formatAttributes(attributes);
-      const openTag = attrsStr ? `<${tagName} ${attrsStr}>` : `<${tagName}>`;
-      if (isVoidElement(tagName)) {
-        return openTag.replace(">", " />");
-      }
-      let content = "";
-      if (text !== void 0) {
-        if (isTrustedContent(text)) {
-          content = text.__html;
-        } else {
-          content = escapeHtml(String(text));
-        }
-      } else if (children) {
-        content = renderRaw(children);
-      }
-      return `${openTag}${content}</${tagName}>`;
-    } else if (typeof props === "string") {
-      const content = isTrustedContent(props) ? props.__html : escapeHtml(props);
-      return isVoidElement(tagName) ? `<${tagName} />` : `<${tagName}>${content}</${tagName}>`;
-    }
+  if (options.island) {
+    injected["data-coherent-island"] = "true";
   }
-  return "";
+  if (options._islandComponentName) {
+    injected["data-coherent-island-component"] = options._islandComponentName;
+  }
+  return { [tagName]: injected };
+}
+function Island(componentFn) {
+  const componentName = componentFn.name || "Anonymous";
+  return function IslandComponent(props) {
+    const result = componentFn(props);
+    return injectHydrationAttributes(result, {
+      island: true,
+      _islandComponentName: componentName
+    });
+  };
 }
-function render(obj, options = {}) {
-  const { scoped = false } = options;
-  if (scoped) {
-    return renderScopedComponent(obj);
+function render2(obj, options = {}) {
+  const scoped = options.scoped ?? options.encapsulate ?? false;
+  const { scoped: _scoped, encapsulate: _encapsulate, hydratable: _hydratable, island: _island, ...rendererOptions } = options;
+  let component = scoped ? renderScopedComponent(obj) : obj;
+  if (typeof component === "function") {
+    component = component(options);
+  }
+  if (_hydratable || _island) {
+    component = injectHydrationAttributes(component, { hydratable: _hydratable, island: _island });
   }
-  return renderRaw(obj);
+  return render(component, rendererOptions);
 }
 function renderScopedComponent(component) {
   const scopeId = generateScopeId();
@@ -5112,7 +6452,7 @@ function renderScopedComponent(component) {
   }
   const processedComponent = processScopedElement(component);
   const scopedComponent = applyScopeToElement(processedComponent, scopeId);
-  return renderRaw(scopedComponent);
+  return scopedComponent;
 }
 var memoCache = /* @__PURE__ */ new Map();
 function memo2(component, keyGenerator) {
@@ -5136,7 +6476,7 @@ function validateComponent2(obj) {
   }
   return true;
 }
-function isCoherentObject(obj) {
+function isCoherentObject2(obj) {
   return obj && typeof obj === "object" && !Array.isArray(obj);
 }
 function deepClone2(obj) {
@@ -5149,10 +6489,21 @@ function deepClone2(obj) {
   }
   return cloned;
 }
-var VERSION = "2.0.0";
+var _corePackageJson = JSON.parse(
+  (0, import_node_fs.readFileSync)(new URL("../package.json", import_meta.url), "utf-8")
+);
+var VERSION = _corePackageJson.version;
+var fp = {
+  /**
+   * Curried map: fp.map(fn)(array)
+   */
+  map(fn) {
+    return (array) => array.map(fn);
+  }
+};
 var coherent = {
   // Core rendering
-  render,
+  render: render2,
   // Shadow DOM (client-side only)
   shadowDOM: shadow_dom_exports,
   // Component system
@@ -5204,9 +6555,9 @@ var coherent = {
   withEventState,
   // Utilities
   validateComponent: validateComponent2,
-  isCoherentObject,
+  isCoherentObject: isCoherentObject2,
   deepClone: deepClone2,
-  escapeHtml,
+  escapeHtml: escapeHtml2,
   performanceMonitor,
   VERSION
 };
@@ -5217,9 +6568,14 @@ var index_default = coherent;
   ComponentLifecycle,
   DOMEventIntegration,
   EventBus,
+  FORBIDDEN_CHILDREN,
   GlobalErrorHandler,
+  HTMLNestingError,
+  Island,
   LIFECYCLE_PHASES,
   VERSION,
+  checkPeerDependencies,
+  compose,
   createActionHandlers,
   createAsyncErrorBoundary,
   createComponent,
@@ -5227,10 +6583,12 @@ var index_default = coherent;
   createElement,
   createErrorBoundary,
   createErrorFallback,
+  createErrorResponse,
   createEventBus,
   createEventComponent,
   createEventHandlers,
   createGlobalErrorHandler,
+  createLazyIntegration,
   createLifecycleHooks,
   createStateManager,
   createTextNode,
@@ -5241,19 +6599,26 @@ var index_default = coherent;
   emitSync,
   evaluateLazy,
   eventSystem,
+  fp,
   getComponent,
   getRegisteredComponents,
   globalDOMIntegration,
   globalEventBus,
   h,
   handleAction,
+  hasChildren,
+  hoc,
+  importPeerDependency,
   initializeDOMIntegration,
+  isCoherentComponent,
   isCoherentObject,
   isLazy,
+  isPeerDependencyAvailable,
   lazy,
   lifecycleUtils,
   memo,
   memoize,
+  normalizeChildren,
   off,
   on,
   once,
@@ -5261,9 +6626,13 @@ var index_default = coherent;
   registerAction,
   registerComponent,
   render,
+  renderComponentFactory,
+  renderWithMonitoring,
+  renderWithTemplate,
   shadowDOM,
   useHooks,
   validateComponent,
+  validateNesting,
   withErrorBoundary,
   withEventBus,
   withEventState,
@@ -5271,11 +6640,17 @@ var index_default = coherent;
   withState,
   withStateUtils
 });
+/**
+ * Advanced caching system with memory management and smart invalidation for Coherent.js
+ * 
+ * @module @coherent/performance/cache-manager
+ * @license MIT
+ */
 /**
  * Coherent.js - Object-Based Rendering Framework
  * A pure JavaScript framework for server-side rendering using natural object syntax
  *
- * @version 2.0.0
+ * @version 1.0.0-beta.7
  * @author Coherent Framework Team
  * @license MIT
  */