@coherent.js/devtools 1.0.0-beta.3 → 1.0.0-beta.6

package/dist/index.js

@@ -2074,44 +2074,1259 @@ function createDevTools(coherentInstance) {
   return new DevTools(coherentInstance);
 }
 
-// src/index.js
-var index_default = {
-  // Inspector
-  ComponentInspector,
-  createInspector,
-  inspect,
-  validateComponent,
-  // Profiler
-  PerformanceProfiler,
-  createProfiler,
-  measure,
-  profile,
-  // Logger
-  DevLogger,
-  LogLevel,
-  createLogger,
-  createComponentLogger,
-  createConsoleLogger,
-  // DevTools
-  DevTools,
-  createDevTools
+// src/component-visualizer.js
+import {
+  isCoherentObject as isCoherentObject2,
+  hasChildren,
+  normalizeChildren
+} from "@coherent.js/core";
+var ComponentVisualizer = class {
+  constructor(options = {}) {
+    this.options = {
+      maxDepth: options.maxDepth || 50,
+      showProps: options.showProps !== false,
+      showMetadata: options.showMetadata !== false,
+      colorOutput: options.colorOutput !== false,
+      compactMode: options.compactMode || false,
+      ...options
+    };
+    this.stats = {
+      totalComponents: 0,
+      totalDepth: 0,
+      staticComponents: 0,
+      dynamicComponents: 0,
+      renderTime: 0
+    };
+  }
+  /**
+   * Visualize a component tree
+   */
+  visualize(component, name = "Root") {
+    const startTime = performance.now();
+    this.stats = { totalComponents: 0, totalDepth: 0, staticComponents: 0, dynamicComponents: 0, renderTime: 0 };
+    const tree = this.buildTree(component, name, 0);
+    const visualization = this.renderTree(tree);
+    this.stats.renderTime = performance.now() - startTime;
+    return {
+      visualization,
+      stats: { ...this.stats },
+      tree
+    };
+  }
+  /**
+   * Build component tree structure
+   */
+  buildTree(component, name, depth) {
+    if (depth > this.options.maxDepth) {
+      return {
+        name: "MAX_DEPTH_REACHED",
+        type: "warning",
+        depth,
+        children: [],
+        metadata: { message: `Maximum depth ${this.options.maxDepth} exceeded` }
+      };
+    }
+    this.stats.totalComponents++;
+    this.stats.totalDepth = Math.max(this.stats.totalDepth, depth);
+    const node = {
+      name,
+      depth,
+      children: [],
+      metadata: {}
+    };
+    if (component === null || component === void 0) {
+      node.type = "empty";
+      node.value = "";
+      this.stats.staticComponents++;
+    } else if (typeof component === "string") {
+      node.type = "text";
+      node.value = component;
+      node.metadata.length = component.length;
+      this.stats.staticComponents++;
+    } else if (typeof component === "number") {
+      node.type = "number";
+      node.value = component;
+      this.stats.staticComponents++;
+    } else if (typeof component === "boolean") {
+      node.type = "boolean";
+      node.value = component;
+      this.stats.staticComponents++;
+    } else if (typeof component === "function") {
+      node.type = "function";
+      node.value = `Function: ${component.name || "anonymous"}`;
+      node.metadata.arity = component.length;
+      node.metadata.isAsync = component.constructor.name === "AsyncFunction";
+      this.stats.dynamicComponents++;
+    } else if (Array.isArray(component)) {
+      node.type = "array";
+      node.metadata.length = component.length;
+      component.forEach((item, _index) => {
+        const childNode = this.buildTree(item, `[${_index}]`, depth + 1);
+        node.children.push(childNode);
+      });
+      this.stats.dynamicComponents++;
+    } else if (isCoherentObject2(component)) {
+      const entries = Object.entries(component);
+      if (entries.length === 1) {
+        const [tagName, props] = entries;
+        node.type = "element";
+        node.tagName = tagName;
+        node.props = this.options.showProps ? this.analyzeProps(props) : {};
+        if (hasChildren(props)) {
+          const children = normalizeChildren(props.children);
+          children.forEach((child, _index) => {
+            const childNode = this.buildTree(child, `${tagName}[${_index}]`, depth + 1);
+            node.children.push(childNode);
+          });
+        }
+        if (this.hasDynamicContent(props)) {
+          this.stats.dynamicComponents++;
+          node.metadata.dynamic = true;
+        } else {
+          this.stats.staticComponents++;
+          node.metadata.dynamic = false;
+        }
+      } else {
+        node.type = "complex";
+        node.metadata.keys = entries.map(([key]) => key);
+        this.stats.dynamicComponents++;
+      }
+    } else {
+      node.type = "unknown";
+      node.value = String(component);
+      node.metadata.constructor = component.constructor?.name || "Object";
+      this.stats.staticComponents++;
+    }
+    return node;
+  }
+  /**
+   * Analyze component props
+   */
+  analyzeProps(props) {
+    const analyzed = {};
+    if (!props || typeof props !== "object") {
+      return analyzed;
+    }
+    Object.entries(props).forEach(([key, value]) => {
+      if (key === "children") return;
+      if (typeof value === "function") {
+        analyzed[key] = {
+          type: "function",
+          name: value.name || "anonymous",
+          isEvent: /^on[A-Z]/.test(key)
+        };
+      } else if (typeof value === "string") {
+        analyzed[key] = {
+          type: "string",
+          length: value.length,
+          preview: value.length > 50 ? `${value.substring(0, 47)}...` : value
+        };
+      } else if (typeof value === "object" && value !== null) {
+        analyzed[key] = {
+          type: "object",
+          keys: Object.keys(value),
+          constructor: value.constructor?.name || "Object"
+        };
+      } else {
+        analyzed[key] = {
+          type: typeof value,
+          value
+        };
+      }
+    });
+    return analyzed;
+  }
+  /**
+   * Check if component has dynamic content
+   */
+  hasDynamicContent(props) {
+    if (typeof props === "object" && props !== null) {
+      for (const value of Object.values(props)) {
+        if (typeof value === "function") return true;
+        if (typeof value === "object" && this.hasDynamicContent(value)) return true;
+      }
+    }
+    return false;
+  }
+  /**
+   * Render tree as formatted text
+   */
+  renderTree(tree) {
+    const lines = [];
+    if (this.options.colorOutput) {
+      lines.push(this.colorize("\u{1F333} Coherent.js Component Tree", "cyan"));
+      lines.push(this.colorize("\u2550".repeat(40), "cyan"));
+    } else {
+      lines.push("\u{1F333} Coherent.js Component Tree");
+      lines.push("\u2550".repeat(40));
+    }
+    this.renderNode(tree, lines, "", true);
+    if (this.options.showMetadata) {
+      lines.push("");
+      lines.push("\u{1F4CA} Tree Statistics:");
+      lines.push(`   Total Components: ${this.stats.totalComponents}`);
+      lines.push(`   Max Depth: ${this.stats.totalDepth}`);
+      lines.push(`   Static Components: ${this.stats.staticComponents}`);
+      lines.push(`   Dynamic Components: ${this.stats.dynamicComponents}`);
+      lines.push(`   Render Time: ${this.stats.renderTime.toFixed(2)}ms`);
+    }
+    return lines.join("\n");
+  }
+  /**
+   * Render individual node
+   */
+  renderNode(node, lines, prefix = "", isLast = true) {
+    const connector = isLast ? "\u2514\u2500\u2500 " : "\u251C\u2500\u2500 ";
+    const childPrefix = prefix + (isLast ? "    " : "\u2502   ");
+    let nodeLine = prefix + connector;
+    if (this.options.colorOutput) {
+      nodeLine += this.getNodeIcon(node.type);
+      nodeLine += this.colorize(node.name, this.getNodeColor(node.type));
+    } else {
+      nodeLine += this.getNodeIcon(node.type) + node.name;
+    }
+    if (!this.options.compactMode) {
+      nodeLine += ` (${node.type})`;
+      if (node.type === "element") {
+        nodeLine += ` <${node.tagName}>`;
+      } else if (node.type === "text" && node.value) {
+        nodeLine += `: "${node.value.substring(0, 30)}${node.value.length > 30 ? "..." : ""}"`;
+      } else if (node.type === "function") {
+        nodeLine += `(${node.metadata.arity || 0} args)`;
+      }
+      if (node.metadata.dynamic !== void 0) {
+        nodeLine += node.metadata.dynamic ? " \u{1F504}" : " \u{1F4CC}";
+      }
+    }
+    lines.push(nodeLine);
+    if (this.options.showProps && node.props && !this.options.compactMode) {
+      Object.entries(node.props).forEach(([key, prop], _index) => {
+        const isLastProp = _index === Object.keys(node.props).length - 1;
+        const propConnector = isLastProp ? "\u2514\u2500\u2500 " : "\u251C\u2500\u2500 ";
+        const _propPrefix = childPrefix + (isLastProp && node.children.length === 0 ? "    " : "\u2502   ");
+        let propLine = childPrefix + propConnector;
+        if (this.options.colorOutput) {
+          propLine += this.colorize(key, "yellow");
+        } else {
+          propLine += key;
+        }
+        propLine += `: ${this.formatPropValue(prop)}`;
+        lines.push(propLine);
+      });
+    }
+    node.children.forEach((child, index) => {
+      const isLastChild = index === node.children.length - 1;
+      this.renderNode(child, lines, childPrefix, isLastChild);
+    });
+  }
+  /**
+   * Get node icon based on type
+   */
+  getNodeIcon(type) {
+    const icons = {
+      element: "\u{1F3F7}\uFE0F ",
+      text: "\u{1F4DD} ",
+      function: "\u26A1 ",
+      array: "\u{1F4CB} ",
+      empty: "\u2B55 ",
+      number: "\u{1F522} ",
+      boolean: "\u2611\uFE0F ",
+      complex: "\u{1F4E6} ",
+      unknown: "\u2753 ",
+      warning: "\u26A0\uFE0F "
+    };
+    return icons[type] || "\u{1F4C4} ";
+  }
+  /**
+   * Get node color based on type
+   */
+  getNodeColor(type) {
+    const colors = {
+      element: "green",
+      text: "blue",
+      function: "magenta",
+      array: "cyan",
+      empty: "gray",
+      number: "yellow",
+      boolean: "yellow",
+      complex: "red",
+      unknown: "red",
+      warning: "red"
+    };
+    return colors[type] || "white";
+  }
+  /**
+   * Format property value for display
+   */
+  formatPropValue(prop) {
+    if (prop.type === "function") {
+      return `\u26A1 ${prop.name}${prop.isEvent ? " (event)" : ""}`;
+    } else if (prop.type === "string") {
+      return `"${prop.preview}"`;
+    } else if (prop.type === "object") {
+      return `${prop.constructor} {${prop.keys.join(", ")}}`;
+    } else {
+      return String(prop.value);
+    }
+  }
+  /**
+   * Add color to text (ANSI colors)
+   */
+  colorize(text, color) {
+    const colors = {
+      black: "\x1B[30m",
+      red: "\x1B[31m",
+      green: "\x1B[32m",
+      yellow: "\x1B[33m",
+      blue: "\x1B[34m",
+      magenta: "\x1B[35m",
+      cyan: "\x1B[36m",
+      white: "\x1B[37m",
+      gray: "\x1B[90m"
+    };
+    const reset = "\x1B[0m";
+    return `${colors[color] || ""}${text}${reset}`;
+  }
+  /**
+   * Export tree as JSON for further analysis
+   */
+  exportAsJSON(tree) {
+    return JSON.stringify(tree, null, 2);
+  }
+  /**
+   * Export tree as DOT format for Graphviz
+   */
+  exportAsDOT(tree) {
+    const lines = ["digraph ComponentTree {"];
+    lines.push("  rankdir=TB;");
+    lines.push("  node [shape=box, style=rounded];");
+    this.generateDOTNodes(tree, lines, "root");
+    lines.push("}");
+    return lines.join("\n");
+  }
+  /**
+   * Generate DOT nodes
+   */
+  generateDOTNodes(node, lines, parentId) {
+    const nodeId = `${parentId}_${node.name.replace(/[^a-zA-Z0-9]/g, "_")}`;
+    let label = node.name;
+    if (node.type === "element") {
+      label = `<${node.tagName}>\\n${node.name}`;
+    }
+    lines.push(`  "${nodeId}" [label="${label}"];`);
+    if (parentId !== "root") {
+      lines.push(`  "${parentId}" -> "${nodeId}";`);
+    }
+    node.children.forEach((child, _index) => {
+      this.generateDOTNodes(child, lines, nodeId);
+    });
+  }
+};
+function createComponentVisualizer(options = {}) {
+  return new ComponentVisualizer(options);
+}
+function visualizeComponent(component, name = "Root", options = {}) {
+  const visualizer = createComponentVisualizer(options);
+  return visualizer.visualize(component, name);
+}
+function logComponentTree(component, name = "Root", options = {}) {
+  const result = visualizeComponent(component, name, options);
+  console.log(result.visualization);
+  return result;
+}
+
+// src/performance-dashboard.js
+var PerformanceDashboard = class {
+  constructor(options = {}) {
+    this.options = {
+      updateInterval: options.updateInterval || 5e3,
+      maxHistoryPoints: options.maxHistoryPoints || 100,
+      enableAlerts: options.enableAlerts !== false,
+      enableRecommendations: options.enableRecommendations !== false,
+      colorOutput: options.colorOutput !== false,
+      ...options
+    };
+    this.metrics = {
+      api: {
+        requests: 0,
+        averageTime: 0,
+        cacheHits: 0,
+        cacheMisses: 0,
+        staticRoutes: 0,
+        dynamicRoutes: 0,
+        history: []
+      },
+      components: {
+        renders: 0,
+        averageTime: 0,
+        cacheHits: 0,
+        cacheMisses: 0,
+        staticComponents: 0,
+        dynamicComponents: 0,
+        memoryUsage: 0,
+        history: []
+      },
+      fullstack: {
+        totalRequests: 0,
+        averageTime: 0,
+        errors: 0,
+        bottlenecks: [],
+        history: []
+      }
+    };
+    this.alerts = [];
+    this.recommendations = [];
+    this.startTime = Date.now();
+    this.updateTimer = null;
+  }
+  /**
+   * Start monitoring performance
+   */
+  startMonitoring() {
+    if (this.updateTimer) return;
+    this.updateTimer = setInterval(() => {
+      this.updateMetrics();
+      this.generateAlerts();
+      this.generateRecommendations();
+    }, this.options.updateInterval);
+  }
+  /**
+   * Stop monitoring
+   */
+  stopMonitoring() {
+    if (this.updateTimer) {
+      clearInterval(this.updateTimer);
+      this.updateTimer = null;
+    }
+  }
+  /**
+   * Record API request metrics
+   */
+  recordAPIRequest(duration, routeType, cacheHit = false) {
+    this.metrics.api.requests++;
+    this.metrics.api.averageTime = this.updateAverage(
+      this.metrics.api.averageTime,
+      duration,
+      this.metrics.api.requests
+    );
+    if (cacheHit) {
+      this.metrics.api.cacheHits++;
+    } else {
+      this.metrics.api.cacheMisses++;
+    }
+    if (routeType === "static") {
+      this.metrics.api.staticRoutes++;
+    } else {
+      this.metrics.api.dynamicRoutes++;
+    }
+    this.addToHistory("api", {
+      timestamp: Date.now(),
+      duration,
+      routeType,
+      cacheHit
+    });
+  }
+  /**
+   * Record component render metrics
+   */
+  recordComponentRender(duration, componentType, cacheHit = false, memoryDelta = 0) {
+    this.metrics.components.renders++;
+    this.metrics.components.averageTime = this.updateAverage(
+      this.metrics.components.averageTime,
+      duration,
+      this.metrics.components.renders
+    );
+    if (cacheHit) {
+      this.metrics.components.cacheHits++;
+    } else {
+      this.metrics.components.cacheMisses++;
+    }
+    if (componentType === "static") {
+      this.metrics.components.staticComponents++;
+    } else {
+      this.metrics.components.dynamicComponents++;
+    }
+    this.metrics.components.memoryUsage += memoryDelta;
+    this.addToHistory("components", {
+      timestamp: Date.now(),
+      duration,
+      componentType,
+      cacheHit,
+      memoryDelta
+    });
+  }
+  /**
+   * Record full-stack request metrics
+   */
+  recordFullStackRequest(duration, error = null, bottlenecks = []) {
+    this.metrics.fullstack.totalRequests++;
+    this.metrics.fullstack.averageTime = this.updateAverage(
+      this.metrics.fullstack.averageTime,
+      duration,
+      this.metrics.fullstack.totalRequests
+    );
+    if (error) {
+      this.metrics.fullstack.errors++;
+    }
+    this.metrics.fullstack.bottlenecks = bottlenecks;
+    this.addToHistory("fullstack", {
+      timestamp: Date.now(),
+      duration,
+      error,
+      bottlenecks
+    });
+  }
+  /**
+   * Update metrics from external sources
+   */
+  updateMetrics() {
+    const now = Date.now();
+    const uptime = now - this.startTime;
+    const apiRate = this.metrics.api.requests / (uptime / 1e3);
+    const componentRate = this.metrics.components.renders / (uptime / 1e3);
+    const fullStackRate = this.metrics.fullstack.totalRequests / (uptime / 1e3);
+    return {
+      apiRate,
+      componentRate,
+      fullStackRate,
+      uptime
+    };
+  }
+  /**
+   * Generate performance alerts
+   */
+  generateAlerts() {
+    this.alerts = [];
+    if (this.metrics.api.averageTime > 50) {
+      this.alerts.push({
+        type: "warning",
+        category: "api",
+        message: `API response time is high: ${this.metrics.api.averageTime.toFixed(2)}ms`,
+        threshold: 50,
+        current: this.metrics.api.averageTime
+      });
+    }
+    const apiCacheHitRate = this.getCacheHitRate("api");
+    if (apiCacheHitRate < 80) {
+      this.alerts.push({
+        type: "warning",
+        category: "api",
+        message: `API cache hit rate is low: ${apiCacheHitRate.toFixed(1)}%`,
+        threshold: 80,
+        current: apiCacheHitRate
+      });
+    }
+    if (this.metrics.components.averageTime > 20) {
+      this.alerts.push({
+        type: "warning",
+        category: "components",
+        message: `Component render time is high: ${this.metrics.components.averageTime.toFixed(2)}ms`,
+        threshold: 20,
+        current: this.metrics.components.averageTime
+      });
+    }
+    const componentCacheHitRate = this.getCacheHitRate("components");
+    if (componentCacheHitRate < 90) {
+      this.alerts.push({
+        type: "warning",
+        category: "components",
+        message: `Component cache hit rate is low: ${componentCacheHitRate.toFixed(1)}%`,
+        threshold: 90,
+        current: componentCacheHitRate
+      });
+    }
+    if (this.metrics.fullstack.errors > 0) {
+      this.alerts.push({
+        type: "error",
+        category: "fullstack",
+        message: `${this.metrics.fullstack.errors} errors detected`,
+        threshold: 0,
+        current: this.metrics.fullstack.errors
+      });
+    }
+  }
+  /**
+   * Generate performance recommendations
+   */
+  generateRecommendations() {
+    this.recommendations = [];
+    const staticRouteRatio = this.metrics.api.staticRoutes / Math.max(this.metrics.api.requests, 1);
+    if (staticRouteRatio < 0.7) {
+      this.recommendations.push({
+        type: "optimization",
+        category: "api",
+        message: "Consider adding more static routes to improve smart routing efficiency",
+        impact: "high",
+        effort: "low"
+      });
+    }
+    const apiCacheHitRate = this.getCacheHitRate("api");
+    if (apiCacheHitRate < 90) {
+      this.recommendations.push({
+        type: "optimization",
+        category: "api",
+        message: "Increase API cache size or TTL to improve cache hit rate",
+        impact: "medium",
+        effort: "low"
+      });
+    }
+    const staticComponentRatio = this.metrics.components.staticComponents / Math.max(this.metrics.components.renders, 1);
+    if (staticComponentRatio < 0.8) {
+      this.recommendations.push({
+        type: "optimization",
+        category: "components",
+        message: "More components could be optimized as static for better caching",
+        impact: "high",
+        effort: "medium"
+      });
+    }
+    if (this.metrics.components.memoryUsage > 100 * 1024 * 1024) {
+      this.recommendations.push({
+        type: "optimization",
+        category: "memory",
+        message: "Memory usage is high. Consider reducing cache size or implementing memory cleanup",
+        impact: "medium",
+        effort: "medium"
+      });
+    }
+  }
+  /**
+   * Get cache hit rate for category
+   */
+  getCacheHitRate(category) {
+    const metrics = this.metrics[category];
+    if (!metrics || !metrics.cacheHits) return 0;
+    const total = metrics.cacheHits + metrics.cacheMisses;
+    return total > 0 ? metrics.cacheHits / total * 100 : 0;
+  }
+  /**
+   * Update running average
+   */
+  updateAverage(current, newValue, count) {
+    return (current * (count - 1) + newValue) / count;
+  }
+  /**
+   * Add data point to history
+   */
+  addToHistory(category, data) {
+    if (!this.metrics[category].history) {
+      this.metrics[category].history = [];
+    }
+    this.metrics[category].history.push(data);
+    if (this.metrics[category].history.length > this.options.maxHistoryPoints) {
+      this.metrics[category].history = this.metrics[category].history.slice(-this.options.maxHistoryPoints);
+    }
+  }
+  /**
+   * Generate dashboard visualization
+   */
+  generateDashboard() {
+    const lines = [];
+    if (this.options.colorOutput) {
+      lines.push(this.colorize("\u{1F4CA} Coherent.js Performance Dashboard", "cyan"));
+      lines.push(this.colorize("\u2550".repeat(50), "cyan"));
+    } else {
+      lines.push("\u{1F4CA} Coherent.js Performance Dashboard");
+      lines.push("\u2550".repeat(50));
+    }
+    const uptime = (Date.now() - this.startTime) / 1e3;
+    lines.push(`\u23F1\uFE0F  Uptime: ${uptime.toFixed(1)}s`);
+    lines.push("");
+    lines.push("\u{1F680} API Performance");
+    lines.push("\u2500".repeat(20));
+    const apiCacheHitRate = this.getCacheHitRate("api");
+    lines.push(`   Requests: ${this.metrics.api.requests} (${(this.metrics.api.requests / uptime).toFixed(1)} req/s)`);
+    lines.push(`   Avg Time: ${this.metrics.api.averageTime.toFixed(2)}ms`);
+    lines.push(`   Cache Hit Rate: ${apiCacheHitRate.toFixed(1)}%`);
+    lines.push(`   Static Routes: ${this.metrics.api.staticRoutes}/${this.metrics.api.requests} (${(this.metrics.api.staticRoutes / Math.max(this.metrics.api.requests, 1) * 100).toFixed(1)}%)`);
+    lines.push("");
+    lines.push("\u{1F3D7}\uFE0F  Component Performance");
+    lines.push("\u2500".repeat(25));
+    const componentCacheHitRate = this.getCacheHitRate("components");
+    lines.push(`   Renders: ${this.metrics.components.renders} (${(this.metrics.components.renders / uptime).toFixed(1)} renders/s)`);
+    lines.push(`   Avg Time: ${this.metrics.components.averageTime.toFixed(2)}ms`);
+    lines.push(`   Cache Hit Rate: ${componentCacheHitRate.toFixed(1)}%`);
+    lines.push(`   Static Components: ${this.metrics.components.staticComponents}/${this.metrics.components.renders} (${(this.metrics.components.staticComponents / Math.max(this.metrics.components.renders, 1) * 100).toFixed(1)}%)`);
+    lines.push(`   Memory Usage: ${(this.metrics.components.memoryUsage / 1024 / 1024).toFixed(1)}MB`);
+    lines.push("");
+    lines.push("\u{1F310} Full-Stack Performance");
+    lines.push("\u2500".repeat(26));
+    lines.push(`   Total Requests: ${this.metrics.fullstack.totalRequests} (${(this.metrics.fullstack.totalRequests / uptime).toFixed(1)} req/s)`);
+    lines.push(`   Avg Time: ${this.metrics.fullstack.averageTime.toFixed(2)}ms`);
+    lines.push(`   Errors: ${this.metrics.fullstack.errors}`);
+    lines.push("");
+    if (this.alerts.length > 0) {
+      lines.push("\u26A0\uFE0F  Performance Alerts");
+      lines.push("\u2500".repeat(22));
+      this.alerts.forEach((alert) => {
+        const icon = alert.type === "error" ? "\u274C" : "\u26A0\uFE0F";
+        lines.push(`   ${icon} ${alert.message}`);
+      });
+      lines.push("");
+    }
+    if (this.recommendations.length > 0) {
+      lines.push("\u{1F4A1} Optimization Recommendations");
+      lines.push("\u2500".repeat(30));
+      this.recommendations.forEach((rec) => {
+        const impact = rec.impact === "high" ? "\u{1F525}" : rec.impact === "medium" ? "\u26A1" : "\u{1F4A4}";
+        lines.push(`   ${impact} ${rec.message} (${rec.effort} effort)`);
+      });
+      lines.push("");
+    }
+    const score = this.calculatePerformanceScore();
+    const scoreColor = score >= 90 ? "green" : score >= 70 ? "yellow" : "red";
+    lines.push(`Performance Score: ${this.colorize(`${score.toFixed(1)}/100`, scoreColor)}`);
+    return lines.join("\n");
+  }
+  /**
+   * Calculate overall performance score
+   */
+  calculatePerformanceScore() {
+    let score = 100;
+    if (this.metrics.api.averageTime > 50) score -= 10;
+    if (this.metrics.api.averageTime > 100) score -= 10;
+    if (this.getCacheHitRate("api") < 90) score -= 10;
+    if (this.metrics.components.averageTime > 20) score -= 10;
+    if (this.metrics.components.averageTime > 50) score -= 10;
+    if (this.getCacheHitRate("components") < 95) score -= 10;
+    if (this.metrics.fullstack.errors > 0) score -= Math.min(20, this.metrics.fullstack.errors * 5);
+    return Math.max(0, score);
+  }
+  /**
+   * Add color to text
+   */
+  colorize(text, color) {
+    if (!this.options.colorOutput) return text;
+    const colors = {
+      black: "\x1B[30m",
+      red: "\x1B[31m",
+      green: "\x1B[32m",
+      yellow: "\x1B[33m",
+      blue: "\x1B[34m",
+      magenta: "\x1B[35m",
+      cyan: "\x1B[36m",
+      white: "\x1B[37m",
+      gray: "\x1B[90m"
+    };
+    const reset = "\x1B[0m";
+    return `${colors[color] || ""}${text}${reset}`;
+  }
+  /**
+   * Export metrics as JSON
+   */
+  exportMetrics() {
+    return {
+      timestamp: Date.now(),
+      uptime: Date.now() - this.startTime,
+      metrics: { ...this.metrics },
+      alerts: [...this.alerts],
+      recommendations: [...this.recommendations],
+      performanceScore: this.calculatePerformanceScore()
+    };
+  }
+  /**
+   * Reset all metrics
+   */
+  reset() {
+    this.metrics = {
+      api: { requests: 0, averageTime: 0, cacheHits: 0, cacheMisses: 0, staticRoutes: 0, dynamicRoutes: 0, history: [] },
+      components: { renders: 0, averageTime: 0, cacheHits: 0, cacheMisses: 0, staticComponents: 0, dynamicComponents: 0, memoryUsage: 0, history: [] },
+      fullstack: { totalRequests: 0, averageTime: 0, errors: 0, bottlenecks: [], history: [] }
+    };
+    this.alerts = [];
+    this.recommendations = [];
+    this.startTime = Date.now();
+  }
 };
+function createPerformanceDashboard(options = {}) {
+  return new PerformanceDashboard(options);
+}
+function showPerformanceDashboard(dashboard) {
+  const output = dashboard.generateDashboard();
+  console.log(output);
+  return dashboard;
+}
+
+// src/enhanced-errors.js
+import { isCoherentObject as isCoherentObject3, hasChildren as hasChildren2 } from "@coherent.js/core";
+var EnhancedErrorHandler = class {
+  constructor(options = {}) {
+    this.options = {
+      maxContextDepth: options.maxContextDepth || 5,
+      includeStackTrace: options.includeStackTrace !== false,
+      showSuggestions: options.showSuggestions !== false,
+      colorOutput: options.colorOutput !== false,
+      ...options
+    };
+    this.errorHistory = [];
+    this.commonPatterns = this.initializeCommonPatterns();
+  }
+  /**
+   * Handle and enhance an error with component context
+   */
+  handleError(error, component = null, context = {}) {
+    const enhancedError = {
+      originalError: error,
+      message: error.message,
+      stack: error.stack,
+      timestamp: Date.now(),
+      component: component ? this.analyzeComponent(component) : null,
+      context,
+      suggestions: [],
+      severity: this.determineSeverity(error),
+      category: this.categorizeError(error)
+    };
+    if (component) {
+      enhancedError.componentContext = this.getComponentContext(component, context.path || []);
+      enhancedError.propValidation = this.validateProps(component);
+    }
+    if (this.options.showSuggestions) {
+      enhancedError.suggestions = this.generateSuggestions(enhancedError);
+    }
+    this.errorHistory.push(enhancedError);
+    if (this.errorHistory.length > 100) {
+      this.errorHistory = this.errorHistory.slice(-100);
+    }
+    return enhancedError;
+  }
+  /**
+   * Analyze component structure
+   */
+  analyzeComponent(component) {
+    const analysis = {
+      type: this.getComponentType(component),
+      isValid: this.isValidComponent(component),
+      complexity: this.assessComplexity(component),
+      hasDynamicContent: this.hasDynamicContent(component),
+      estimatedSize: this.estimateSize(component)
+    };
+    if (isCoherentObject3(component)) {
+      const entries = Object.entries(component);
+      if (entries.length === 1) {
+        const [_tagName, props] = entries;
+        analysis.tagName = _tagName;
+        analysis.propCount = Object.keys(props).length;
+        analysis.hasChildren = hasChildren2(props);
+        analysis.eventHandlers = this.extractEventHandlers(props);
+      }
+    }
+    return analysis;
+  }
+  /**
+   * Get component context tree
+   */
+  getComponentContext(component, path2 = []) {
+    const context = {
+      path: path2.join("."),
+      depth: path2.length,
+      component: this.summarizeComponent(component),
+      children: []
+    };
+    if (isCoherentObject3(component) && context.depth < this.options.maxContextDepth) {
+      const entries = Object.entries(component);
+      if (entries.length === 1) {
+        const [tagName, props] = entries;
+        if (hasChildren2(props)) {
+          const children = Array.isArray(props.children) ? props.children : [props.children];
+          children.forEach((child, index) => {
+            if (child && typeof child === "object") {
+              const childContext = this.getComponentContext(child, [...path2, `${tagName}[${index}]`]);
+              context.children.push(childContext);
+            }
+          });
+        }
+      }
+    }
+    return context;
+  }
+  /**
+   * Validate component props
+   */
+  validateProps(component) {
+    if (!isCoherentObject3(component)) return { valid: true, issues: [] };
+    const entries = Object.entries(component);
+    if (entries.length !== 1) return { valid: false, issues: ["Component must have exactly one root element"] };
+    const [tagName, props] = entries;
+    const issues = [];
+    const warnings = [];
+    Object.entries(props).forEach(([key, value]) => {
+      if (value === void 0) {
+        issues.push(`Prop '${key}' is undefined`);
+      }
+      if (value === null && key !== "children" && key !== "text") {
+        warnings.push(`Prop '${key}' is null`);
+      }
+      if (typeof value === "function" && !/^on[A-Z]/.test(key)) {
+        warnings.push(`Function prop '${key}' doesn't follow event handler naming convention (onXxx)`);
+      }
+      if (typeof value === "object" && value !== null) {
+        const size = JSON.stringify(value).length;
+        if (size > 1e4) {
+          warnings.push(`Prop '${key}' is large (${size} bytes) - consider optimizing`);
+        }
+      }
+    });
+    if (tagName === "img" && !props.src && !props["data-src"]) {
+      issues.push("Image element missing required src or data-src prop");
+    }
+    if (tagName === "a" && !props.href && !props.onclick) {
+      warnings.push("Link element missing href or onclick prop");
+    }
+    return {
+      valid: issues.length === 0,
+      issues,
+      warnings,
+      propCount: Object.keys(props).length
+    };
+  }
+  /**
+   * Generate fix suggestions based on error and context
+   */
+  generateSuggestions(enhancedError) {
+    const suggestions = [];
+    const { originalError, component, category } = enhancedError;
+    if (component && component.type === "element") {
+      if (component.hasDynamicContent && category === "performance") {
+        suggestions.push({
+          type: "optimization",
+          message: "Consider making this component static for better caching",
+          code: "Remove functions from props to enable static optimization"
+        });
+      }
+      if (component.complexity > 10) {
+        suggestions.push({
+          type: "structure",
+          message: "Component is complex - consider breaking it into smaller components",
+          code: "Split complex components into reusable functional components"
+        });
+      }
+    }
+    if (originalError && originalError.message && originalError.message.includes("undefined")) {
+      suggestions.push({
+        type: "fix",
+        message: "Check for undefined props or missing data",
+        code: "Add prop validation: if (!props.required) return null;"
+      });
+    }
+    if (originalError && originalError.message && originalError.message.includes("Maximum render depth")) {
+      suggestions.push({
+        type: "fix",
+        message: "Possible infinite recursion detected",
+        code: "Check for circular references in component props"
+      });
+    }
+    this.commonPatterns.forEach((pattern) => {
+      if (originalError && originalError.message && pattern.matcher.test(originalError.message)) {
+        suggestions.push(pattern.suggestion);
+      }
+    });
+    return suggestions;
+  }
+  /**
+   * Format enhanced error for display
+   */
+  formatError(enhancedError) {
+    const lines = [];
+    if (this.options.colorOutput) {
+      lines.push(this.colorize("\u274C Coherent.js Error", "red"));
+      lines.push(this.colorize("\u2500".repeat(40), "red"));
+    } else {
+      lines.push("\u274C Coherent.js Error");
+      lines.push("\u2500".repeat(40));
+    }
+    lines.push(`Message: ${enhancedError.message}`);
+    lines.push(`Category: ${enhancedError.category} (${enhancedError.severity})`);
+    lines.push(`Time: ${new Date(enhancedError.timestamp).toLocaleTimeString()}`);
+    lines.push("");
+    if (enhancedError.componentContext) {
+      lines.push("\u{1F3D7}\uFE0F  Component Context");
+      lines.push("\u2500".repeat(20));
+      lines.push(`Path: ${enhancedError.componentContext.path}`);
+      lines.push(`Type: ${enhancedError.component.type}`);
+      lines.push(`Depth: ${enhancedError.componentContext.depth}`);
+      if (enhancedError.componentContext.component) {
+        lines.push(`Summary: ${enhancedError.componentContext.component}`);
+      }
+      lines.push("");
+    }
+    if (enhancedError.propValidation) {
+      const validation = enhancedError.propValidation;
+      lines.push("\u{1F4DD} Prop Validation");
+      lines.push("\u2500".repeat(18));
+      lines.push(`Valid: ${validation.valid ? "\u2705" : "\u274C"}`);
+      lines.push(`Props: ${validation.propCount}`);
+      if (validation.issues.length > 0) {
+        lines.push("Issues:");
+        validation.issues.forEach((issue) => {
+          lines.push(`  \u274C ${issue}`);
+        });
+      }
+      if (validation.warnings.length > 0) {
+        lines.push("Warnings:");
+        validation.warnings.forEach((warning) => {
+          lines.push(`  \u26A0\uFE0F  ${warning}`);
+        });
+      }
+      lines.push("");
+    }
+    if (enhancedError.suggestions.length > 0) {
+      lines.push("\u{1F4A1} Suggestions");
+      lines.push("\u2500".repeat(13));
+      enhancedError.suggestions.forEach((suggestion, index) => {
+        const icon = suggestion.type === "fix" ? "\u{1F527}" : suggestion.type === "optimization" ? "\u26A1" : suggestion.type === "structure" ? "\u{1F3D7}\uFE0F" : "\u{1F4A1}";
+        lines.push(`${index + 1}. ${icon} ${suggestion.message}`);
+        if (suggestion.code) {
+          lines.push(`   Code: ${suggestion.code}`);
+        }
+      });
+      lines.push("");
+    }
+    if (this.options.includeStackTrace && enhancedError.stack) {
+      lines.push("\u{1F4DA} Stack Trace");
+      lines.push("\u2500".repeat(15));
+      lines.push(enhancedError.stack.split("\n").slice(0, 10).join("\n"));
+      if (enhancedError.stack.split("\n").length > 10) {
+        lines.push("... (truncated)");
+      }
+    }
+    return lines.join("\n");
+  }
+  /**
+   * Get component type
+   */
+  getComponentType(component) {
+    if (component === null || component === void 0) return "empty";
+    if (typeof component === "string") return "text";
+    if (typeof component === "number") return "number";
+    if (typeof component === "boolean") return "boolean";
+    if (typeof component === "function") return "function";
+    if (Array.isArray(component)) return "array";
+    if (isCoherentObject3(component)) return "element";
+    return "object";
+  }
+  /**
+   * Check if component is valid
+   */
+  isValidComponent(component) {
+    try {
+      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 (isCoherentObject3(component)) {
+        const entries = Object.entries(component);
+        return entries.length === 1;
+      }
+      return false;
+    } catch {
+      return false;
+    }
+  }
+  /**
+   * Assess component complexity
+   */
+  assessComplexity(component) {
+    let complexity = 0;
+    if (typeof component === "object" && component !== null) {
+      if (isCoherentObject3(component)) {
+        const entries = Object.entries(component);
+        if (entries.length === 1) {
+          const [_tagName, props] = entries;
+          complexity += Object.keys(props).length;
+          if (hasChildren2(props)) {
+            const children = Array.isArray(props.children) ? props.children : [props.children];
+            children.forEach((child) => {
+              complexity += this.assessComplexity(child);
+            });
+          }
+        }
+      } else {
+        complexity += Object.keys(component).length;
+      }
+    }
+    return complexity;
+  }
+  /**
+   * Check if component has dynamic content
+   */
+  hasDynamicContent(component) {
+    if (typeof component === "function") return true;
+    if (typeof component === "object" && component !== null) {
+      for (const value of Object.values(component)) {
+        if (typeof value === "function") return true;
+        if (typeof value === "object" && this.hasDynamicContent(value)) return true;
+      }
+    }
+    return false;
+  }
+  /**
+   * Estimate component size
+   */
+  estimateSize(component) {
+    try {
+      return JSON.stringify(component).length;
+    } catch {
+      return 0;
+    }
+  }
+  /**
+   * Summarize component for context
+   */
+  summarizeComponent(component) {
+    const type = this.getComponentType(component);
+    if (type === "element" && isCoherentObject3(component)) {
+      const entries = Object.entries(component);
+      if (entries.length === 1) {
+        const [tagName, props] = entries;
+        const propCount = Object.keys(props).length;
+        const hasChildren3 = hasChildren3(props);
+        return `<${tagName}> (${propCount} props, ${hasChildren3 ? "has" : "no"} children)`;
+      }
+    }
+    if (type === "text") {
+      const preview = String(component).substring(0, 30);
+      return `Text: "${preview}${component.length > 30 ? "..." : ""}"`;
+    }
+    if (type === "function") {
+      return `Function: ${component.name || "anonymous"}`;
+    }
+    return `${type} (${this.estimateSize(component)} bytes)`;
+  }
+  /**
+   * Extract event handlers from props
+   */
+  extractEventHandlers(props) {
+    return Object.keys(props).filter((key) => /^on[A-Z]/.test(key));
+  }
+  /**
+   * Determine error severity
+   */
+  determineSeverity(error) {
+    if (error.name === "TypeError" || error.name === "ReferenceError") return "critical";
+    if (error.message.includes("Maximum render depth")) return "critical";
+    if (error.message.includes("undefined")) return "high";
+    if (error.message.includes("performance")) return "medium";
+    return "low";
+  }
+  /**
+   * Categorize error
+   */
+  categorizeError(error) {
+    if (error.message.includes("render") || error.message.includes("component")) return "rendering";
+    if (error.message.includes("props") || error.message.includes("prop")) return "props";
+    if (error.message.includes("cache") || error.message.includes("performance")) return "performance";
+    if (error.message.includes("route") || error.message.includes("router")) return "routing";
+    return "general";
+  }
+  /**
+   * Initialize common error patterns and suggestions
+   */
+  initializeCommonPatterns() {
+    return [
+      {
+        matcher: /undefined.*property/gi,
+        suggestion: {
+          type: "fix",
+          message: "Check for undefined properties in component props",
+          code: 'Add default props: const { required = "default" } = props;'
+        }
+      },
+      {
+        matcher: /maximum.*depth/gi,
+        suggestion: {
+          type: "fix",
+          message: "Infinite recursion detected in component tree",
+          code: "Check for circular references in component children"
+        }
+      },
+      {
+        matcher: /cannot.*read.*property/gi,
+        suggestion: {
+          type: "fix",
+          message: "Property access error - check object structure",
+          code: "Use optional chaining: obj?.prop?.nested"
+        }
+      },
+      {
+        matcher: /performance/gi,
+        suggestion: {
+          type: "optimization",
+          message: "Consider optimizing component for better performance",
+          code: "Use memoization or static components where possible"
+        }
+      }
+    ];
+  }
+  /**
+   * Add color to text
+   */
+  colorize(text, color) {
+    if (!this.options.colorOutput) return text;
+    const colors = {
+      black: "\x1B[30m",
+      red: "\x1B[31m",
+      green: "\x1B[32m",
+      yellow: "\x1B[33m",
+      blue: "\x1B[34m",
+      magenta: "\x1B[35m",
+      cyan: "\x1B[36m",
+      white: "\x1B[37m",
+      gray: "\x1B[90m"
+    };
+    const reset = "\x1B[0m";
+    return `${colors[color] || ""}${text}${reset}`;
+  }
+  /**
+   * Get error statistics
+   */
+  getErrorStats() {
+    const stats = {
+      total: this.errorHistory.length,
+      byCategory: {},
+      bySeverity: {},
+      recent: this.errorHistory.slice(-10)
+    };
+    this.errorHistory.forEach((error) => {
+      stats.byCategory[error.category] = (stats.byCategory[error.category] || 0) + 1;
+      stats.bySeverity[error.severity] = (stats.bySeverity[error.severity] || 0) + 1;
+    });
+    return stats;
+  }
+};
+function createEnhancedErrorHandler(options = {}) {
+  return new EnhancedErrorHandler(options);
+}
+function handleEnhancedError(error, component = null, context = {}) {
+  const handler = createEnhancedErrorHandler();
+  const enhancedError = handler.handleError(error, component, context);
+  console.error(handler.formatError(enhancedError));
+  return enhancedError;
+}
 export {
   ComponentInspector,
+  ComponentVisualizer,
   DevLogger,
   DevTools,
+  EnhancedErrorHandler,
   LogLevel,
+  PerformanceDashboard,
   PerformanceProfiler,
   createComponentLogger,
+  createComponentVisualizer,
   createConsoleLogger,
   createDevTools,
+  createEnhancedErrorHandler,
   createInspector,
   createLogger,
+  createPerformanceDashboard,
   createProfiler,
-  index_default as default,
+  handleEnhancedError,
   inspect,
+  logComponentTree,
   measure,
   profile,
-  validateComponent
+  showPerformanceDashboard,
+  validateComponent,
+  visualizeComponent
 };
 //# sourceMappingURL=index.js.map