@coherent.js/devtools 1.0.0-beta.2

package/dist/index.js

@@ -0,0 +1,2117 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/inspector.js
+var ComponentInspector = class {
+  constructor(options = {}) {
+    this.options = {
+      trackHistory: true,
+      maxHistory: 100,
+      verbose: false,
+      ...options
+    };
+    this.components = /* @__PURE__ */ new Map();
+    this.history = [];
+    this.inspectionCount = 0;
+  }
+  /**
+   * Inspect a component
+   * 
+   * @param {Object} component - Component to inspect
+   * @param {Object} [metadata] - Additional metadata
+   * @returns {Object} Inspection result
+   */
+  inspect(component, metadata = {}) {
+    this.inspectionCount++;
+    const startTime = performance.now();
+    const analysis = this.analyzeComponent(component);
+    const tree = this.buildComponentTree(component);
+    const stats = this.calculateStats(component);
+    const endTime = performance.now();
+    const inspection = {
+      id: this.generateId(),
+      timestamp: Date.now(),
+      inspectionTime: endTime - startTime,
+      component,
+      metadata,
+      // Flatten analysis results to top level for easier access
+      type: analysis.type,
+      structure: component,
+      props: this.extractProps(component),
+      depth: stats.depth || 0,
+      // Use stats.depth, not tree.depth
+      childCount: stats.elementCount || 0,
+      complexity: stats.complexity || 0,
+      nodeCount: stats.nodeCount || 0,
+      // Keep nested data for detailed inspection
+      analysis,
+      tree,
+      stats,
+      valid: analysis.valid,
+      issues: analysis.issues || [],
+      errors: analysis.issues || [],
+      // Alias for compatibility
+      warnings: analysis.warnings || []
+    };
+    if (this.options.trackHistory) {
+      this.history.push(inspection);
+      if (this.history.length > this.options.maxHistory) {
+        this.history.shift();
+      }
+    }
+    this.components.set(inspection.id, inspection);
+    if (this.options.verbose) {
+      console.log("[Inspector] Component inspected:", inspection.id);
+    }
+    return inspection;
+  }
+  /**
+   * Extract props from component
+   */
+  extractProps(component) {
+    const props = [];
+    if (!component || typeof component !== "object") {
+      return props;
+    }
+    Object.keys(component).forEach((key) => {
+      const element = component[key];
+      if (element && typeof element === "object") {
+        Object.keys(element).forEach((prop) => {
+          if (!props.includes(prop) && prop !== "children" && prop !== "text") {
+            props.push(prop);
+          }
+        });
+      }
+    });
+    return props;
+  }
+  /**
+   * Analyze component structure
+   */
+  analyzeComponent(component) {
+    if (!component || typeof component !== "object") {
+      return {
+        type: typeof component,
+        valid: false,
+        issues: ["Component is not an object"]
+      };
+    }
+    const issues = [];
+    const warnings = [];
+    const info = [];
+    const seen = /* @__PURE__ */ new WeakSet();
+    const checkCircular = (obj, path2 = []) => {
+      if (obj === null || typeof obj !== "object") {
+        return;
+      }
+      if (seen.has(obj)) {
+        warnings.push(`circular reference detected at ${path2.join(".")}`);
+        return;
+      }
+      seen.add(obj);
+      if (Array.isArray(obj)) {
+        obj.forEach((item, index) => checkCircular(item, [...path2, `[${index}]`]));
+      } else {
+        Object.keys(obj).forEach((key) => {
+          checkCircular(obj[key], [...path2, key]);
+        });
+      }
+    };
+    checkCircular(component, ["root"]);
+    const keys = Object.keys(component);
+    if (keys.length === 0) {
+      issues.push("Component is empty");
+    }
+    if (keys.length > 1) {
+      warnings.push("Component has multiple root elements");
+    }
+    keys.forEach((key) => {
+      const element = component[key];
+      if (typeof element === "object" && element !== null) {
+        if (element.children && !Array.isArray(element.children)) {
+          issues.push(`Children of ${key} should be an array`);
+        }
+        if (element.className && typeof element.className !== "string") {
+          warnings.push(`className of ${key} should be a string`);
+        }
+        if (element.style && typeof element.style !== "object") {
+          warnings.push(`style of ${key} should be an object`);
+        }
+        const eventHandlers = Object.keys(element).filter((k) => k.startsWith("on"));
+        if (eventHandlers.length > 0) {
+          info.push(`${key} has ${eventHandlers.length} event handler(s): ${eventHandlers.join(", ")}`);
+        }
+      }
+    });
+    return {
+      type: "component",
+      valid: issues.length === 0,
+      rootElements: keys,
+      issues,
+      warnings,
+      info
+    };
+  }
+  /**
+   * Build component tree structure
+   */
+  buildComponentTree(component, depth = 0, maxDepth = 10) {
+    if (depth > maxDepth) {
+      return { _truncated: true, reason: "Max depth reached" };
+    }
+    if (!component || typeof component !== "object") {
+      return { type: typeof component, value: component };
+    }
+    if (Array.isArray(component)) {
+      return component.map((child) => this.buildComponentTree(child, depth + 1, maxDepth));
+    }
+    const tree = {};
+    for (const [key, value] of Object.entries(component)) {
+      if (typeof value === "object" && value !== null) {
+        tree[key] = {
+          type: "element",
+          props: {},
+          children: []
+        };
+        for (const [prop, propValue] of Object.entries(value)) {
+          if (prop === "children") {
+            tree[key].children = this.buildComponentTree(propValue, depth + 1, maxDepth);
+          } else {
+            tree[key].props[prop] = propValue;
+          }
+        }
+      } else {
+        tree[key] = { type: typeof value, value };
+      }
+    }
+    return tree;
+  }
+  /**
+   * Calculate component statistics
+   */
+  calculateStats(component) {
+    const stats = {
+      elementCount: 0,
+      depth: 0,
+      textNodes: 0,
+      eventHandlers: 0,
+      hasStyles: false,
+      hasClasses: false,
+      complexity: 0
+    };
+    const traverse = (node, currentDepth = 1) => {
+      if (!node || typeof node !== "object") {
+        if (node !== null && node !== void 0) {
+          stats.textNodes++;
+        }
+        return;
+      }
+      if (Array.isArray(node)) {
+        node.forEach((child) => traverse(child, currentDepth));
+        return;
+      }
+      stats.elementCount++;
+      stats.depth = Math.max(stats.depth, currentDepth);
+      for (const [_key, value] of Object.entries(node)) {
+        if (typeof value === "object" && value !== null) {
+          if (value.style) stats.hasStyles = true;
+          if (value.className) stats.hasClasses = true;
+          const handlers = Object.keys(value).filter((k) => k.startsWith("on"));
+          stats.eventHandlers += handlers.length;
+          if (value.children) {
+            traverse(value.children, currentDepth + 1);
+          }
+        }
+      }
+    };
+    traverse(component);
+    stats.complexity = stats.elementCount * 10 + // Base complexity from element count
+    stats.depth * 5 + // Depth adds complexity
+    stats.eventHandlers * 3 + // Event handlers add complexity
+    stats.textNodes + // Text nodes add minimal complexity
+    (stats.hasStyles ? 5 : 0) + // Styles add complexity
+    (stats.hasClasses ? 3 : 0);
+    return stats;
+  }
+  /**
+   * Get component by ID
+   */
+  getComponent(id) {
+    return this.components.get(id);
+  }
+  /**
+   * Get inspection history
+   */
+  getHistory() {
+    return [...this.history];
+  }
+  /**
+   * Search components by criteria
+   */
+  search(criteria) {
+    const results = [];
+    for (const [id, inspection] of this.components.entries()) {
+      let matches = true;
+      if (criteria.hasIssues && inspection.analysis.issues.length === 0) {
+        matches = false;
+      }
+      if (criteria.hasWarnings && inspection.analysis.warnings.length === 0) {
+        matches = false;
+      }
+      if (criteria.minElements && inspection.stats.elementCount < criteria.minElements) {
+        matches = false;
+      }
+      if (criteria.maxElements && inspection.stats.elementCount > criteria.maxElements) {
+        matches = false;
+      }
+      if (matches) {
+        results.push({ id, inspection });
+      }
+    }
+    return results;
+  }
+  /**
+   * Compare two components
+   */
+  compare(componentA, componentB) {
+    const inspectionA = typeof componentA === "string" ? this.getComponent(componentA) : this.inspect(componentA);
+    const inspectionB = typeof componentB === "string" ? this.getComponent(componentB) : this.inspect(componentB);
+    return {
+      statsComparison: {
+        elementCount: {
+          a: inspectionA.stats.elementCount,
+          b: inspectionB.stats.elementCount,
+          diff: inspectionB.stats.elementCount - inspectionA.stats.elementCount
+        },
+        depth: {
+          a: inspectionA.stats.depth,
+          b: inspectionB.stats.depth,
+          diff: inspectionB.stats.depth - inspectionA.stats.depth
+        },
+        textNodes: {
+          a: inspectionA.stats.textNodes,
+          b: inspectionB.stats.textNodes,
+          diff: inspectionB.stats.textNodes - inspectionA.stats.textNodes
+        }
+      },
+      structureMatch: JSON.stringify(inspectionA.tree) === JSON.stringify(inspectionB.tree),
+      issuesComparison: {
+        a: inspectionA.analysis.issues.length,
+        b: inspectionB.analysis.issues.length
+      }
+    };
+  }
+  /**
+   * Generate report
+   */
+  generateReport() {
+    return {
+      totalInspections: this.inspectionCount,
+      componentsTracked: this.components.size,
+      historySize: this.history.length,
+      summary: {
+        totalElements: Array.from(this.components.values()).reduce((sum, c) => sum + c.stats.elementCount, 0),
+        averageDepth: Array.from(this.components.values()).reduce((sum, c) => sum + c.stats.depth, 0) / this.components.size || 0,
+        componentsWithIssues: Array.from(this.components.values()).filter((c) => c.analysis.issues.length > 0).length,
+        componentsWithWarnings: Array.from(this.components.values()).filter((c) => c.analysis.warnings.length > 0).length
+      }
+    };
+  }
+  /**
+   * Clear all data
+   */
+  clear() {
+    this.components.clear();
+    this.history = [];
+    this.inspectionCount = 0;
+  }
+  /**
+   * Clear history only
+   */
+  clearHistory() {
+    this.history = [];
+  }
+  /**
+   * Get inspection statistics
+   */
+  getStats() {
+    return {
+      totalInspections: this.inspectionCount,
+      componentsTracked: this.components.size,
+      historySize: this.history.length
+    };
+  }
+  /**
+   * Export inspection data
+   */
+  export() {
+    return {
+      inspections: this.history.map((h) => ({
+        id: h.id,
+        timestamp: h.timestamp,
+        type: h.type,
+        complexity: h.complexity,
+        depth: h.depth,
+        issues: h.issues,
+        warnings: h.warnings
+      })),
+      stats: this.getStats(),
+      exportedAt: Date.now()
+    };
+  }
+  /**
+   * Generate unique ID
+   */
+  generateId() {
+    return `inspect-${Date.now()}-${Math.random().toString(36).substring(7)}`;
+  }
+};
+function createInspector(options = {}) {
+  return new ComponentInspector(options);
+}
+function inspect(component, options = {}) {
+  const inspector = new ComponentInspector(options);
+  return inspector.inspect(component);
+}
+function validateComponent(component) {
+  const inspector = new ComponentInspector();
+  const inspection = inspector.inspect(component);
+  return {
+    valid: inspection.valid,
+    errors: inspection.issues || [],
+    issues: inspection.issues || [],
+    warnings: inspection.warnings || [],
+    stats: inspection.stats
+  };
+}
+
+// src/profiler.js
+var PerformanceProfiler = class {
+  constructor(options = {}) {
+    this.options = {
+      enabled: true,
+      sampleRate: 1,
+      // 1.0 = 100% sampling
+      slowThreshold: 16,
+      // 16ms = 60fps
+      trackMemory: typeof performance !== "undefined" && performance.memory,
+      maxSamples: options.maxSamples || 1e3,
+      ...options
+    };
+    this.measurements = [];
+    this.sessions = /* @__PURE__ */ new Map();
+    this.currentSession = null;
+    this.marks = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Start a profiling session
+   */
+  start(name = "default") {
+    if (!this.options.enabled) {
+      return null;
+    }
+    if (this.options.sampleRate < 1 && Math.random() > this.options.sampleRate) {
+      return null;
+    }
+    const session = {
+      id: this.generateId(),
+      name,
+      startTime: Date.now(),
+      measurements: [],
+      marks: [],
+      active: true
+    };
+    this.sessions.set(session.id, session);
+    this.currentSession = session;
+    if (typeof performance !== "undefined" && performance.mark) {
+      performance.mark(`coherent-session-start-${session.id}`);
+    }
+    return session.id;
+  }
+  /**
+   * Stop a profiling session
+   */
+  stop(sessionId) {
+    if (!sessionId) {
+      return null;
+    }
+    const session = this.sessions.get(sessionId);
+    if (!session) {
+      return null;
+    }
+    session.endTime = Date.now();
+    session.duration = session.endTime - session.startTime;
+    session.active = false;
+    if (typeof performance !== "undefined" && performance.mark) {
+      performance.mark(`coherent-session-end-${session.id}`);
+    }
+    if (this.currentSession === session) {
+      this.currentSession = null;
+    }
+    this.measurements.push(session);
+    if (this.measurements.length > this.options.maxSamples) {
+      this.measurements.shift();
+    }
+    return this.analyzeSession(session);
+  }
+  /**
+   * Start measuring a render
+   */
+  startRender(componentName, props = {}) {
+    if (!this.options.enabled) return null;
+    if (Math.random() > this.options.sampleRate) return null;
+    const measurementId = this.generateId();
+    const measurement = {
+      id: measurementId,
+      componentName,
+      props,
+      startTime: Date.now(),
+      startMemory: this.getMemoryUsage(),
+      phase: "render"
+    };
+    this.marks.set(measurementId, measurement);
+    if (typeof performance !== "undefined" && performance.mark) {
+      performance.mark(`coherent-render-start-${measurementId}`);
+    }
+    return measurementId;
+  }
+  /**
+   * End measuring a render
+   */
+  endRender(measurementId, result = {}) {
+    if (!measurementId || !this.marks.has(measurementId)) return null;
+    const measurement = this.marks.get(measurementId);
+    measurement.endTime = Date.now();
+    measurement.duration = measurement.endTime - measurement.startTime;
+    measurement.endMemory = this.getMemoryUsage();
+    measurement.memoryDelta = measurement.endMemory - measurement.startMemory;
+    measurement.result = result;
+    measurement.slow = measurement.duration > this.options.slowThreshold;
+    if (typeof performance !== "undefined" && performance.mark) {
+      performance.mark(`coherent-render-end-${measurementId}`);
+      if (performance.measure) {
+        try {
+          performance.measure(
+            `coherent-render-${measurementId}`,
+            `coherent-render-start-${measurementId}`,
+            `coherent-render-end-${measurementId}`
+          );
+        } catch {
+        }
+      }
+    }
+    this.measurements.push(measurement);
+    if (this.currentSession) {
+      this.currentSession.measurements.push(measurement);
+    }
+    this.marks.delete(measurementId);
+    return measurement;
+  }
+  /**
+   * Mark a point in time
+   */
+  mark(name, data = {}) {
+    const mark = {
+      name,
+      timestamp: Date.now(),
+      data,
+      memory: this.getMemoryUsage()
+    };
+    if (this.currentSession) {
+      this.currentSession.marks.push(mark);
+    }
+    if (typeof performance !== "undefined" && performance.mark) {
+      performance.mark(`coherent-mark-${name}`);
+    }
+    return mark;
+  }
+  /**
+   * Measure time between two marks
+   */
+  measure(startMark, endMark) {
+    const start = this.findMark(startMark);
+    const end = this.findMark(endMark);
+    if (!start || !end) {
+      throw new Error("Mark not found");
+    }
+    return {
+      duration: end.timestamp - start.timestamp,
+      startMark: start.name,
+      endMark: end.name
+    };
+  }
+  /**
+   * Get memory usage
+   */
+  getMemoryUsage() {
+    if (typeof performance !== "undefined" && performance.memory) {
+      return {
+        used: performance.memory.usedJSHeapSize,
+        total: performance.memory.totalJSHeapSize,
+        limit: performance.memory.jsHeapSizeLimit
+      };
+    }
+    return null;
+  }
+  /**
+   * Find a mark by name
+   */
+  findMark(name) {
+    if (!this.currentSession) return null;
+    return this.currentSession.marks.find((m) => m.name === name);
+  }
+  /**
+   * Get all measurements
+   */
+  getMeasurements(filter = {}) {
+    let results = [...this.measurements];
+    if (filter.componentName) {
+      results = results.filter((m) => m.componentName === filter.componentName);
+    }
+    if (filter.slow) {
+      results = results.filter((m) => m.slow);
+    }
+    if (filter.minDuration) {
+      results = results.filter((m) => m.duration >= filter.minDuration);
+    }
+    if (filter.limit) {
+      results = results.slice(0, filter.limit);
+    }
+    return results;
+  }
+  /**
+   * Analyze a session
+   */
+  analyzeSession(session) {
+    const measurements = session.measurements;
+    if (measurements.length === 0) {
+      return {
+        session: session.id,
+        duration: session.duration,
+        measurements: 0,
+        analysis: null
+      };
+    }
+    const durations = measurements.map((m) => m.duration);
+    const sorted = [...durations].sort((a, b) => a - b);
+    return {
+      session: session.id,
+      name: session.name,
+      duration: session.duration,
+      measurements: measurements.length,
+      analysis: {
+        total: durations.reduce((a, b) => a + b, 0),
+        average: durations.reduce((a, b) => a + b, 0) / durations.length,
+        median: sorted[Math.floor(sorted.length / 2)],
+        min: Math.min(...durations),
+        max: Math.max(...durations),
+        p95: sorted[Math.floor(sorted.length * 0.95)],
+        p99: sorted[Math.floor(sorted.length * 0.99)],
+        slowRenders: measurements.filter((m) => m.slow).length,
+        slowPercentage: measurements.filter((m) => m.slow).length / measurements.length * 100
+      },
+      byComponent: this.groupByComponent(measurements),
+      slowest: measurements.sort((a, b) => b.duration - a.duration).slice(0, 10).map((m) => ({
+        component: m.componentName,
+        duration: m.duration,
+        timestamp: m.startTime
+      }))
+    };
+  }
+  /**
+   * Group measurements by component
+   */
+  groupByComponent(measurements) {
+    const groups = {};
+    measurements.forEach((m) => {
+      if (!groups[m.componentName]) {
+        groups[m.componentName] = {
+          count: 0,
+          totalDuration: 0,
+          durations: []
+        };
+      }
+      groups[m.componentName].count++;
+      groups[m.componentName].totalDuration += m.duration;
+      groups[m.componentName].durations.push(m.duration);
+    });
+    Object.keys(groups).forEach((name) => {
+      const group = groups[name];
+      group.average = group.totalDuration / group.count;
+      group.min = Math.min(...group.durations);
+      group.max = Math.max(...group.durations);
+    });
+    return groups;
+  }
+  /**
+   * Get performance summary
+   */
+  getSummary() {
+    const allMeasurements = this.measurements;
+    if (allMeasurements.length === 0) {
+      return {
+        totalMeasurements: 0,
+        totalSessions: this.sessions.size,
+        analysis: null
+      };
+    }
+    const durations = allMeasurements.map((m) => m.duration);
+    return {
+      totalMeasurements: allMeasurements.length,
+      totalSessions: this.sessions.size,
+      slowRenders: allMeasurements.filter((m) => m.slow).length,
+      analysis: {
+        average: durations.reduce((a, b) => a + b, 0) / durations.length,
+        min: Math.min(...durations),
+        max: Math.max(...durations),
+        slowPercentage: allMeasurements.filter((m) => m.slow).length / allMeasurements.length * 100
+      },
+      byComponent: this.groupByComponent(allMeasurements),
+      recentSlow: allMeasurements.filter((m) => m.slow).slice(-10).map((m) => ({
+        component: m.componentName,
+        duration: m.duration,
+        timestamp: m.startTime
+      }))
+    };
+  }
+  /**
+   * Get statistics
+   */
+  getStatistics() {
+    if (this.measurements.length === 0) {
+      return { mean: 0, median: 0, min: 0, max: 0, stdDev: 0 };
+    }
+    const durations = this.measurements.map((m) => m.duration);
+    const sum = durations.reduce((a, b) => a + b, 0);
+    const mean = sum / durations.length;
+    const sorted = [...durations].sort((a, b) => a - b);
+    const median = sorted[Math.floor(sorted.length / 2)];
+    const variance = durations.reduce((acc, val) => acc + Math.pow(val - mean, 2), 0) / durations.length;
+    const stdDev = Math.sqrt(variance);
+    return {
+      mean,
+      median,
+      min: Math.min(...durations),
+      max: Math.max(...durations),
+      stdDev
+    };
+  }
+  /**
+   * Get bottlenecks
+   */
+  getBottlenecks(threshold = null) {
+    const slowThreshold = threshold || this.options.slowThreshold;
+    return this.measurements.filter((m) => m.duration > slowThreshold).sort((a, b) => b.duration - a.duration).map((m) => ({
+      name: m.name,
+      duration: m.duration,
+      timestamp: m.startTime
+    }));
+  }
+  /**
+   * Get metrics
+   */
+  getMetrics() {
+    const operationCounts = {};
+    this.measurements.forEach((m) => {
+      operationCounts[m.name] = (operationCounts[m.name] || 0) + 1;
+    });
+    const totalDuration = this.measurements.reduce((sum, m) => sum + m.duration, 0);
+    return {
+      totalOperations: this.measurements.length,
+      totalDuration,
+      operationCounts,
+      averageDuration: this.measurements.length > 0 ? totalDuration / this.measurements.length : 0,
+      memoryUsage: this.options.trackMemory && typeof performance !== "undefined" && performance.memory ? performance.memory.usedJSHeapSize : null
+    };
+  }
+  /**
+   * Generate report
+   */
+  generateReport() {
+    const stats = this.getStatistics();
+    const metrics = this.getMetrics();
+    const bottlenecks = this.getBottlenecks();
+    const recommendations = this.getRecommendations();
+    return {
+      summary: {
+        totalOperations: metrics.totalOperations,
+        averageDuration: metrics.averageDuration,
+        slowOperations: bottlenecks.length
+      },
+      statistics: stats,
+      operations: this.measurements.map((m) => ({
+        name: m.name,
+        duration: m.duration,
+        timestamp: m.startTime
+      })),
+      bottlenecks: bottlenecks.slice(0, 10),
+      recommendations,
+      timestamp: Date.now()
+    };
+  }
+  /**
+   * Export profiling data
+   */
+  export() {
+    return {
+      sessions: Array.from(this.sessions.values()),
+      measurements: this.measurements,
+      metrics: this.getMetrics(),
+      statistics: this.getStatistics(),
+      exportedAt: Date.now()
+    };
+  }
+  /**
+   * Format metrics for display
+   */
+  formatMetrics() {
+    const metrics = this.getMetrics();
+    const stats = this.getStatistics();
+    let output = `Performance Metrics
+`;
+    output += `==================
+`;
+    output += `Total Operations: ${metrics.totalOperations}
+`;
+    output += `Average Duration: ${metrics.averageDuration.toFixed(2)}ms
+`;
+    output += `Mean: ${stats.mean.toFixed(2)}ms
+`;
+    output += `Median: ${stats.median.toFixed(2)}ms
+`;
+    output += `Min: ${stats.min.toFixed(2)}ms
+`;
+    output += `Max: ${stats.max.toFixed(2)}ms
+`;
+    return output;
+  }
+  /**
+   * Compare two profiles
+   */
+  compare(profileId1, profileId2) {
+    const session1 = this.sessions.get(profileId1);
+    const session2 = this.sessions.get(profileId2);
+    if (!session1 || !session2) {
+      return null;
+    }
+    return {
+      difference: session2.duration - session1.duration,
+      percentChange: (session2.duration - session1.duration) / session1.duration * 100,
+      profile1: { name: session1.name, duration: session1.duration },
+      profile2: { name: session2.name, duration: session2.duration }
+    };
+  }
+  /**
+   * Get performance recommendations
+   */
+  getRecommendations() {
+    const recommendations = [];
+    const bottlenecks = this.getBottlenecks();
+    const stats = this.getStatistics();
+    if (bottlenecks.length > 0) {
+      bottlenecks.slice(0, 5).forEach((bottleneck) => {
+        recommendations.push({
+          type: "bottleneck",
+          operation: bottleneck.name,
+          suggestion: `Optimize ${bottleneck.name} - duration: ${bottleneck.duration.toFixed(2)}ms exceeds threshold`,
+          severity: "high",
+          message: `Found slow operation exceeding ${this.options.slowThreshold}ms`
+        });
+      });
+    }
+    if (stats.max > this.options.slowThreshold * 2) {
+      recommendations.push({
+        type: "performance",
+        operation: "general",
+        suggestion: `Review operations with high duration`,
+        message: `Maximum duration (${stats.max.toFixed(2)}ms) is significantly high`,
+        severity: "medium"
+      });
+    }
+    return recommendations;
+  }
+  /**
+   * Clear all data
+   */
+  clear() {
+    this.measurements = [];
+    this.sessions.clear();
+    this.currentSession = null;
+    this.marks.clear();
+  }
+  /**
+   * Enable profiler
+   */
+  enable() {
+    this.options.enabled = true;
+  }
+  /**
+   * Disable profiler
+   */
+  disable() {
+    this.options.enabled = false;
+  }
+  /**
+   * Generate unique ID
+   */
+  generateId() {
+    return `prof-${Date.now()}-${Math.random().toString(36).substring(7)}`;
+  }
+};
+function createProfiler(options = {}) {
+  return new PerformanceProfiler(options);
+}
+async function measure(name, fn, profiler = null) {
+  const prof = profiler || new PerformanceProfiler();
+  const sessionId = prof.start(name);
+  try {
+    const value = await fn();
+    const result = prof.stop(sessionId);
+    return { value, duration: result?.duration || 0 };
+  } catch (error) {
+    const result = prof.stop(sessionId);
+    throw { error, duration: result?.duration || 0 };
+  }
+}
+function profile(fn) {
+  return function(...args) {
+    const result = fn(...args);
+    return result;
+  };
+}
+
+// src/logger.js
+var LogLevel = {
+  TRACE: 0,
+  DEBUG: 1,
+  INFO: 2,
+  WARN: 3,
+  ERROR: 4,
+  FATAL: 5
+};
+var DevLogger = class _DevLogger {
+  constructor(options = {}) {
+    this.options = {
+      level: options.level !== void 0 ? options.level : LogLevel.INFO,
+      prefix: "[Coherent]",
+      timestamp: true,
+      colors: true,
+      maxLogs: 1e3,
+      maxBufferSize: options.maxBufferSize || 1e3,
+      grouping: true,
+      buffer: options.buffer || false,
+      sampleRate: options.sampleRate !== void 0 ? options.sampleRate : 1,
+      silent: options.silent || false,
+      output: options.output || null,
+      categories: options.categories || null,
+      filter: options.filter || null,
+      ...options
+    };
+    this.logs = [];
+    this.groups = [];
+    this.filters = [];
+    this.handlers = [];
+    this.context = {};
+  }
+  /**
+   * Generic log method (supports category logging)
+   */
+  log(categoryOrLevel, messageOrData, data) {
+    if (typeof categoryOrLevel === "string" && typeof messageOrData === "string") {
+      return this.logWithLevel(LogLevel.INFO, messageOrData, { category: categoryOrLevel, ...data });
+    }
+    return this.logWithLevel(categoryOrLevel, messageOrData, data);
+  }
+  /**
+   * Log a trace message
+   */
+  trace(message, data = {}) {
+    return this.logWithLevel(LogLevel.TRACE, message, data);
+  }
+  /**
+   * Log a debug message
+   */
+  debug(message, data = {}) {
+    return this.log(LogLevel.DEBUG, message, data);
+  }
+  /**
+   * Log an info message
+   */
+  info(message, data = {}) {
+    return this.log(LogLevel.INFO, message, data);
+  }
+  /**
+   * Log a warning
+   */
+  warn(message, data = {}) {
+    return this.log(LogLevel.WARN, message, data);
+  }
+  /**
+   * Log an error
+   */
+  error(message, data = {}) {
+    if (data instanceof Error) {
+      data = {
+        message: data.message,
+        stack: data.stack,
+        name: data.name,
+        ...data
+      };
+    }
+    return this.logWithLevel(LogLevel.ERROR, message, data);
+  }
+  /**
+   * Log a fatal error
+   */
+  fatal(message, data = {}) {
+    return this.log(LogLevel.FATAL, message, data);
+  }
+  /**
+   * Core logging function
+   */
+  logWithLevel(level, message, data = {}) {
+    if (this.options.sampleRate < 1 && Math.random() > this.options.sampleRate) {
+      return;
+    }
+    if (level < this.options.level) {
+      return;
+    }
+    if (!this.shouldLog(level, message, data)) {
+      return;
+    }
+    const mergedData = { ...this.context, ...data };
+    const logEntry = {
+      id: this.generateId(),
+      level,
+      levelName: this.getLevelName(level),
+      message,
+      data: mergedData,
+      timestamp: Date.now(),
+      group: this.groups.length > 0 ? this.groups[this.groups.length - 1] : null,
+      stack: level >= LogLevel.ERROR ? new Error().stack : null
+    };
+    this.logs.push(logEntry);
+    const maxSize = this.options.buffer ? this.options.maxBufferSize : this.options.maxLogs;
+    if (this.logs.length > maxSize) {
+      this.logs.shift();
+    }
+    this.handlers.forEach((handler) => {
+      try {
+        handler(logEntry);
+      } catch (error) {
+        console.error("Error in log handler:", error);
+      }
+    });
+    this.output(logEntry);
+    return logEntry;
+  }
+  /**
+   * Output log to console
+   */
+  output(logEntry) {
+    const parts = [];
+    if (this.options.timestamp) {
+      const date = new Date(logEntry.timestamp);
+      parts.push(`[${date.toISOString()}]`);
+    }
+    if (this.options.prefix) {
+      parts.push(this.options.prefix);
+    }
+    parts.push(`[${logEntry.levelName}]`);
+    if (logEntry.group) {
+      parts.push(`[${logEntry.group}]`);
+    }
+    parts.push(logEntry.message);
+    const contextKeys = Object.keys(logEntry.data);
+    if (contextKeys.length > 0) {
+      const contextStr = contextKeys.map((key) => `${key}=${logEntry.data[key]}`).join(" ");
+      parts.push(`{${contextStr}}`);
+    }
+    const output = parts.join(" ");
+    if (this.options.silent) {
+      return;
+    }
+    if (this.options.output) {
+      this.options.output(logEntry);
+      return;
+    }
+    if (typeof console !== "undefined") {
+      switch (logEntry.level) {
+        case LogLevel.TRACE:
+        case LogLevel.DEBUG:
+        case LogLevel.INFO:
+          console.log(output, logEntry.data);
+          break;
+        case LogLevel.WARN:
+          console.warn(output, logEntry.data);
+          break;
+        case LogLevel.ERROR:
+        case LogLevel.FATAL:
+          console.error(output, logEntry.data);
+          if (logEntry.stack) {
+            console.error(logEntry.stack);
+          }
+          break;
+      }
+    } else {
+      console.log(output, logEntry.data);
+    }
+  }
+  /**
+   * Get color style for log level
+   */
+  getColorStyle(level) {
+    const styles = {
+      [LogLevel.TRACE]: "color: gray",
+      [LogLevel.DEBUG]: "color: blue",
+      [LogLevel.INFO]: "color: green",
+      [LogLevel.WARN]: "color: orange",
+      [LogLevel.ERROR]: "color: red",
+      [LogLevel.FATAL]: "color: red; font-weight: bold"
+    };
+    return styles[level] || "";
+  }
+  /**
+   * Get level name
+   */
+  getLevelName(level) {
+    const names = {
+      [LogLevel.TRACE]: "TRACE",
+      [LogLevel.DEBUG]: "DEBUG",
+      [LogLevel.INFO]: "INFO",
+      [LogLevel.WARN]: "WARN",
+      [LogLevel.ERROR]: "ERROR",
+      [LogLevel.FATAL]: "FATAL"
+    };
+    return names[level] || "UNKNOWN";
+  }
+  /**
+   * Check if log should be output
+   */
+  shouldLog(level, message, data) {
+    if (this.options.filter && !this.options.filter(message, data)) {
+      return false;
+    }
+    if (this.options.categories && data.category) {
+      if (!this.options.categories.includes(data.category)) {
+        return false;
+      }
+    }
+    if (this.filters.length > 0) {
+      return this.filters.every((filter) => filter(level, message, data));
+    }
+    return true;
+  }
+  /**
+   * Add a filter
+   */
+  addFilter(filter) {
+    this.filters.push(filter);
+  }
+  /**
+   * Remove a filter
+   */
+  removeFilter(filter) {
+    const index = this.filters.indexOf(filter);
+    if (index > -1) {
+      this.filters.splice(index, 1);
+    }
+  }
+  /**
+   * Add a log handler
+   */
+  addHandler(handler) {
+    this.handlers.push(handler);
+  }
+  /**
+   * Remove a log handler
+   */
+  removeHandler(handler) {
+    const index = this.handlers.indexOf(handler);
+    if (index > -1) {
+      this.handlers.splice(index, 1);
+    }
+  }
+  /**
+   * Start a log group
+   */
+  group(name) {
+    this.groups.push(name);
+    if (typeof console !== "undefined" && console.group) {
+      console.group(name);
+    }
+  }
+  /**
+   * End a log group
+   */
+  groupEnd() {
+    this.groups.pop();
+    if (typeof console !== "undefined" && console.groupEnd) {
+      console.groupEnd();
+    }
+  }
+  /**
+   * Get all logs
+   */
+  getLogs(filter = {}) {
+    let results = [...this.logs];
+    if (filter.level !== void 0) {
+      results = results.filter((log) => log.level >= filter.level);
+    }
+    if (filter.group) {
+      results = results.filter((log) => log.group === filter.group);
+    }
+    if (filter.search) {
+      const search = filter.search.toLowerCase();
+      results = results.filter(
+        (log) => log.message.toLowerCase().includes(search) || JSON.stringify(log.data).toLowerCase().includes(search)
+      );
+    }
+    if (filter.limit) {
+      results = results.slice(-filter.limit);
+    }
+    return results;
+  }
+  /**
+   * Get log statistics
+   */
+  getStats() {
+    const byLevel = {};
+    Object.values(LogLevel).forEach((level) => {
+      byLevel[this.getLevelName(level)] = 0;
+    });
+    this.logs.forEach((log) => {
+      byLevel[log.levelName]++;
+    });
+    return {
+      total: this.logs.length,
+      byLevel,
+      groups: [...new Set(this.logs.map((l) => l.group).filter(Boolean))],
+      timeRange: this.logs.length > 0 ? {
+        start: this.logs[0].timestamp,
+        end: this.logs[this.logs.length - 1].timestamp,
+        duration: this.logs[this.logs.length - 1].timestamp - this.logs[0].timestamp
+      } : null
+    };
+  }
+  /**
+   * Clear all logs
+   */
+  clear() {
+    this.logs = [];
+    this.groups = [];
+  }
+  /**
+   * Set log level
+   */
+  setLevel(level) {
+    this.options.level = level;
+  }
+  /**
+   * Export logs
+   */
+  export(format = "array") {
+    if (format === "array" || !format) {
+      return this.logs.map((log) => ({
+        level: log.levelName,
+        message: log.message,
+        timestamp: log.timestamp,
+        data: log.data
+      }));
+    }
+    switch (format) {
+      case "json":
+        return JSON.stringify(this.logs, null, 2);
+      case "csv":
+        const headers = ["timestamp", "level", "group", "message", "data"];
+        const rows = this.logs.map((log) => [
+          new Date(log.timestamp).toISOString(),
+          log.levelName,
+          log.group || "",
+          log.message,
+          JSON.stringify(log.data)
+        ]);
+        return [headers, ...rows].map((row) => row.join(",")).join("\n");
+      case "text":
+        return this.logs.map((log) => {
+          const date = new Date(log.timestamp).toISOString();
+          const group = log.group ? `[${log.group}]` : "";
+          return `${date} [${log.levelName}] ${group} ${log.message} ${JSON.stringify(log.data)}`;
+        }).join("\n");
+      default:
+        throw new Error(`Unknown export format: ${format}`);
+    }
+  }
+  /**
+   * Create a logger with additional context
+   */
+  withContext(context) {
+    const contextLogger = new _DevLogger(this.options);
+    contextLogger.context = { ...this.context, ...context };
+    contextLogger.logs = this.logs;
+    contextLogger.groups = this.groups;
+    contextLogger.filters = this.filters;
+    contextLogger.handlers = this.handlers;
+    return contextLogger;
+  }
+  /**
+   * Log a table
+   */
+  table(data) {
+    if (typeof console !== "undefined" && console.table) {
+      console.table(data);
+    } else {
+      console.log(JSON.stringify(data, null, 2));
+    }
+  }
+  /**
+   * Start a timer
+   */
+  time(label) {
+    if (typeof console !== "undefined" && console.time) {
+      console.time(label);
+    }
+  }
+  /**
+   * End a timer
+   */
+  timeEnd(label) {
+    if (typeof console !== "undefined" && console.timeEnd) {
+      console.timeEnd(label);
+    }
+  }
+  /**
+   * Get log buffer
+   */
+  getBuffer() {
+    return this.logs;
+  }
+  /**
+   * Flush buffered logs
+   */
+  flush() {
+    this.logs.forEach((log) => {
+      this.output(log);
+    });
+  }
+  /**
+   * Clear buffer
+   */
+  clearBuffer() {
+    this.logs = [];
+  }
+  /**
+   * Generate unique ID
+   */
+  generateId() {
+    return `log-${Date.now()}-${Math.random().toString(36).substring(7)}`;
+  }
+};
+function createLogger(options = {}) {
+  return new DevLogger(options);
+}
+function createComponentLogger(componentName, options = {}) {
+  const logger = new DevLogger({
+    prefix: `[${componentName}]`,
+    ...options
+  });
+  logger.perf = (operation, duration) => {
+    logger.info(`${operation} completed in ${duration}ms`);
+  };
+  logger.lifecycle = (event) => {
+    logger.info(`Lifecycle: ${event}`);
+  };
+  return logger;
+}
+function createConsoleLogger(prefix = "") {
+  return {
+    trace: (...args) => console.debug(prefix, ...args),
+    debug: (...args) => console.debug(prefix, ...args),
+    info: (...args) => console.info(prefix, ...args),
+    warn: (...args) => console.warn(prefix, ...args),
+    error: (...args) => console.error(prefix, ...args),
+    fatal: (...args) => console.error(prefix, "FATAL:", ...args)
+  };
+}
+
+// src/dev-tools.js
+import { performanceMonitor } from "@coherent.js/core/src/performance/monitor.js";
+import { validateComponent as validateComponent2, isCoherentObject } from "@coherent.js/core/src/core/object-utils.js";
+var DevTools = class {
+  constructor(coherentInstance) {
+    this.coherent = coherentInstance;
+    this.isEnabled = this.shouldEnable();
+    this.renderHistory = [];
+    this.componentRegistry = /* @__PURE__ */ new Map();
+    this.warnings = [];
+    this.errors = [];
+    this.hotReloadEnabled = false;
+    if (this.isEnabled) {
+      this.initialize();
+    }
+  }
+  /**
+   * Check if dev tools should be enabled
+   */
+  shouldEnable() {
+    if (typeof process !== "undefined") {
+      return process.env.NODE_ENV === "development";
+    }
+    if (typeof window !== "undefined") {
+      return window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" || window.location.search.includes("dev=true");
+    }
+    return false;
+  }
+  /**
+   * Initialize dev tools
+   */
+  initialize() {
+    console.log("\u{1F6E0}\uFE0F Coherent.js Dev Tools Enabled");
+    this.setupGlobalHelpers();
+    this.setupRenderInterception();
+    this.setupErrorHandling();
+    this.setupHotReload();
+    this.setupComponentInspector();
+    if (typeof window !== "undefined") {
+      this.setupBrowserDevTools();
+    }
+    if (typeof process !== "undefined") {
+      this.setupNodeDevTools();
+    }
+  }
+  /**
+   * Set up global helper functions
+   */
+  setupGlobalHelpers() {
+    const helpers = {
+      // Inspect any component
+      $inspect: (component) => this.inspectComponent(component),
+      // Get render history
+      $history: () => this.renderHistory,
+      // Get performance stats
+      $perf: () => this.getPerformanceInsights(),
+      // Validate component structure
+      $validate: (component) => this.validateComponent(component),
+      // Get component registry
+      $registry: () => Array.from(this.componentRegistry.entries()),
+      // Clear dev data
+      $clear: () => this.clearDevData(),
+      // Enable/disable features
+      $toggle: (feature) => this.toggleFeature(feature),
+      // Get warnings and errors
+      $issues: () => ({ warnings: this.warnings, errors: this.errors })
+    };
+    if (typeof window !== "undefined") {
+      Object.assign(window, helpers);
+    } else if (typeof global !== "undefined") {
+      Object.assign(global, helpers);
+    }
+  }
+  /**
+   * Intercept render calls for debugging
+   */
+  setupRenderInterception() {
+    const originalRender = this.coherent.render;
+    this.coherent.render = (component, context = {}, options = {}) => {
+      const renderStart = performance.now();
+      const renderId = this.generateRenderId();
+      try {
+        this.preRenderAnalysis(component, context, renderId);
+        const result = originalRender.call(this.coherent, component, context, {
+          ...options,
+          _devRenderId: renderId
+        });
+        const renderTime = performance.now() - renderStart;
+        this.postRenderAnalysis(component, result, renderTime, renderId);
+        return result;
+      } catch (_error) {
+        this.handleRenderError(_error, component, context, renderId);
+        throw _error;
+      }
+    };
+  }
+  /**
+   * Pre-render analysis and validation
+   */
+  preRenderAnalysis(component, context, renderId) {
+    const validation = this.deepValidateComponent(component);
+    if (!validation.isValid) {
+      this.warnings.push({
+        type: "validation",
+        message: validation.message,
+        component: this.serializeComponent(component),
+        renderId,
+        timestamp: Date.now()
+      });
+    }
+    const complexity = this.analyzeComplexity(component);
+    if (complexity > 1e3) {
+      this.warnings.push({
+        type: "performance",
+        message: `High complexity component detected (${complexity} nodes)`,
+        renderId,
+        timestamp: Date.now()
+      });
+    }
+    this.analyzeContext(context, renderId);
+  }
+  /**
+   * Post-render analysis
+   */
+  postRenderAnalysis(component, result, renderTime, renderId) {
+    const renderRecord = {
+      id: renderId,
+      timestamp: Date.now(),
+      component: this.serializeComponent(component),
+      renderTime,
+      outputSize: result.length,
+      complexity: this.analyzeComplexity(component)
+    };
+    this.renderHistory.push(renderRecord);
+    if (this.renderHistory.length > 50) {
+      this.renderHistory.shift();
+    }
+    if (renderTime > 10) {
+      this.warnings.push({
+        type: "performance",
+        message: `Slow render detected: ${renderTime.toFixed(2)}ms`,
+        renderId,
+        timestamp: Date.now()
+      });
+    }
+    if (renderTime > 1) {
+      console.log(`\u{1F504} Render ${renderId}: ${renderTime.toFixed(2)}ms`);
+    }
+  }
+  /**
+   * Deep component validation
+   */
+  deepValidateComponent(component, path2 = "root", depth = 0) {
+    if (depth > 100) {
+      return {
+        isValid: false,
+        message: `Component nesting too deep at ${path2}`
+      };
+    }
+    try {
+      validateComponent2(component);
+    } catch (_error) {
+      return {
+        isValid: false,
+        message: `Invalid component at ${path2}: ${_error.message}`
+      };
+    }
+    if (Array.isArray(component)) {
+      for (let i = 0; i < component.length; i++) {
+        const childValidation = this.deepValidateComponent(
+          component[i],
+          `${path2}[${i}]`,
+          depth + 1
+        );
+        if (!childValidation.isValid) {
+          return childValidation;
+        }
+      }
+    } else if (isCoherentObject(component)) {
+      for (const [tag, props] of Object.entries(component)) {
+        if (props && typeof props === "object" && props.children) {
+          const childValidation = this.deepValidateComponent(
+            props.children,
+            `${path2}.${tag}.children`,
+            depth + 1
+          );
+          if (!childValidation.isValid) {
+            return childValidation;
+          }
+        }
+      }
+    }
+    return { isValid: true };
+  }
+  /**
+   * Analyze component complexity
+   */
+  analyzeComplexity(component, depth = 0) {
+    if (depth > 100) return 1e3;
+    if (typeof component === "string" || typeof component === "number") {
+      return 1;
+    }
+    if (Array.isArray(component)) {
+      return component.reduce((sum, child) => sum + this.analyzeComplexity(child, depth + 1), 0);
+    }
+    if (isCoherentObject(component)) {
+      let complexity = 1;
+      for (const [, props] of Object.entries(component)) {
+        if (props && typeof props === "object") {
+          if (props.children) {
+            complexity += this.analyzeComplexity(props.children, depth + 1);
+          }
+          if (typeof props.text === "function") {
+            complexity += 2;
+          }
+        }
+      }
+      return complexity;
+    }
+    return 1;
+  }
+  /**
+   * Context analysis
+   */
+  analyzeContext(context, renderId) {
+    const contextSize = JSON.stringify(context).length;
+    if (contextSize > 1e4) {
+      this.warnings.push({
+        type: "context",
+        message: `Large context object: ${contextSize} characters`,
+        renderId,
+        timestamp: Date.now()
+      });
+    }
+    try {
+      JSON.stringify(context);
+    } catch (_error) {
+      if (_error.message.includes("circular")) {
+        this.warnings.push({
+          type: "context",
+          message: "Circular reference detected in context",
+          renderId,
+          timestamp: Date.now()
+        });
+      }
+    }
+  }
+  /**
+   * Component inspector
+   */
+  inspectComponent(component) {
+    return {
+      type: this.getComponentType(component),
+      complexity: this.analyzeComplexity(component),
+      validation: this.deepValidateComponent(component),
+      structure: this.visualizeStructure(component),
+      serialized: this.serializeComponent(component),
+      recommendations: this.getOptimizationRecommendations(component)
+    };
+  }
+  /**
+   * Get component type
+   */
+  getComponentType(component) {
+    if (typeof component === "string") return "text";
+    if (typeof component === "function") return "function";
+    if (Array.isArray(component)) return "array";
+    if (isCoherentObject(component)) return "element";
+    return "unknown";
+  }
+  /**
+   * Visualize component structure
+   */
+  visualizeStructure(component, depth = 0, maxDepth = 5) {
+    if (depth > maxDepth) return "...";
+    const indent = "  ".repeat(depth);
+    if (typeof component === "string") {
+      return `${indent}"${component.substring(0, 20)}${component.length > 20 ? "..." : ""}"`;
+    }
+    if (Array.isArray(component)) {
+      const items = component.slice(0, 3).map(
+        (child) => this.visualizeStructure(child, depth + 1, maxDepth)
+      );
+      const more = component.length > 3 ? `${indent}  ...${component.length - 3} more` : "";
+      return `${indent}[
+${items.join("\n")}${more ? `
+${more}` : ""}
+${indent}]`;
+    }
+    if (isCoherentObject(component)) {
+      const entries = Object.entries(component).slice(0, 3);
+      const elements = entries.map(([tag, props]) => {
+        let result = `${indent}<${tag}`;
+        if (props && props.children) {
+          result += `>
+${this.visualizeStructure(props.children, depth + 1, maxDepth)}
+${indent}</${tag}>`;
+        } else if (props && props.text) {
+          result += `>${props.text}</${tag}>`;
+        } else {
+          result += " />";
+        }
+        return result;
+      });
+      return elements.join("\n");
+    }
+    return `${indent}${typeof component}`;
+  }
+  /**
+   * Get optimization recommendations
+   */
+  getOptimizationRecommendations(component) {
+    const recommendations = [];
+    const complexity = this.analyzeComplexity(component);
+    if (complexity > 500) {
+      recommendations.push({
+        type: "complexity",
+        message: "Consider breaking down this component into smaller parts",
+        priority: "high"
+      });
+    }
+    const serialized = JSON.stringify(component);
+    const patterns = this.findRepeatedPatterns(serialized);
+    if (patterns.length > 0) {
+      recommendations.push({
+        type: "caching",
+        message: "Consider extracting repeated patterns into cached components",
+        priority: "medium",
+        patterns: patterns.slice(0, 3)
+      });
+    }
+    return recommendations;
+  }
+  /**
+   * Find repeated patterns in component
+   */
+  findRepeatedPatterns(serialized) {
+    const patterns = [];
+    const minPatternLength = 20;
+    for (let i = 0; i < serialized.length - minPatternLength; i++) {
+      for (let len = minPatternLength; len <= 100 && i + len < serialized.length; len++) {
+        const pattern = serialized.substring(i, i + len);
+        const occurrences = (serialized.match(new RegExp(this.escapeRegex(pattern), "g")) || []).length;
+        if (occurrences > 2) {
+          patterns.push({ pattern: `${pattern.substring(0, 50)}...`, occurrences });
+          break;
+        }
+      }
+    }
+    return patterns.sort((a, b) => b.occurrences - a.occurrences);
+  }
+  /**
+   * Escape regex special characters
+   */
+  escapeRegex(string) {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  }
+  /**
+   * Setup _error handling
+   */
+  setupErrorHandling() {
+    const originalConsoleError = console.error;
+    console.error = (...args) => {
+      this.errors.push({
+        type: "console",
+        message: args.join(" "),
+        timestamp: Date.now(),
+        stack: new Error().stack
+      });
+      originalConsoleError.apply(console, args);
+    };
+    if (typeof process !== "undefined") {
+      process.on("unhandledRejection", (reason, promise) => {
+        this.errors.push({
+          type: "unhandled-rejection",
+          message: reason.toString(),
+          promise: promise.toString(),
+          timestamp: Date.now()
+        });
+      });
+    }
+    if (typeof window !== "undefined") {
+      window.addEventListener("_error", (event) => {
+        this.errors.push({
+          type: "browser-_error",
+          message: event.message,
+          filename: event.filename,
+          lineno: event.lineno,
+          colno: event.colno,
+          timestamp: Date.now()
+        });
+      });
+    }
+  }
+  /**
+   * Handle render errors specifically
+   */
+  handleRenderError(_error, component, context, renderId) {
+    this.errors.push({
+      type: "render-_error",
+      message: _error.message,
+      stack: _error.stack,
+      component: this.serializeComponent(component),
+      context: Object.keys(context),
+      renderId,
+      timestamp: Date.now()
+    });
+    console.error(`\u{1F6A8} Render Error in ${renderId}:`, _error.message);
+    console.error("Component:", this.serializeComponent(component));
+  }
+  /**
+   * Setup hot reload capability
+   */
+  setupHotReload() {
+    if (typeof window !== "undefined" && "WebSocket" in window) {
+      this.setupBrowserHotReload();
+    } else if (typeof __require !== "undefined") {
+      this.setupNodeHotReload();
+    }
+  }
+  /**
+   * Browser hot reload setup
+   */
+  setupBrowserHotReload() {
+    try {
+      const ws = new WebSocket("ws://localhost:3001/coherent-dev");
+      ws.onmessage = (event) => {
+        const data = JSON.parse(event.data);
+        if (data.type === "component-updated") {
+          console.log("\u{1F504} Component updated:", data.componentName);
+          this.handleComponentUpdate(data);
+        } else if (data.type === "full-reload") {
+          window.location.reload();
+        }
+      };
+      ws.onopen = () => {
+        console.log("\u{1F517} Connected to Coherent dev server");
+        this.hotReloadEnabled = true;
+      };
+      ws.onclose = () => {
+        console.log("\u{1F50C} Disconnected from dev server");
+        this.hotReloadEnabled = false;
+      };
+    } catch {
+    }
+  }
+  /**
+   * Node.js hot reload setup
+   */
+  setupNodeHotReload() {
+    try {
+      const fs = __require("fs");
+      const path2 = __require("path");
+      const watchDir = path2.join(process.cwd(), "src");
+      fs.watch(watchDir, { recursive: true }, (eventType, filename) => {
+        if (filename && filename.endsWith(".js")) {
+          console.log(`\u{1F504} File changed: ${filename}`);
+          this.handleFileChange(filename, eventType);
+        }
+      });
+      this.hotReloadEnabled = true;
+    } catch {
+    }
+  }
+  /**
+   * Handle component updates
+   */
+  handleComponentUpdate(updateData) {
+    if (this.coherent.cache) {
+      this.coherent.cache.invalidatePattern(updateData.componentName);
+    }
+    this.componentRegistry.set(updateData.componentName, {
+      ...updateData,
+      lastUpdated: Date.now()
+    });
+    if (typeof window !== "undefined" && window.location.search.includes("auto-reload=true")) {
+      window.location.reload();
+    }
+  }
+  /**
+   * Handle file changes
+   */
+  handleFileChange(filename, eventType) {
+    if (typeof __require !== "undefined" && __require.cache) {
+      const fullPath = __require.resolve(path.resolve(filename));
+      delete __require.cache[fullPath];
+    }
+    console.log(`\u{1F4DD} ${eventType}: ${filename}`);
+  }
+  /**
+   * Setup browser-specific dev tools
+   */
+  setupBrowserDevTools() {
+    this.createDevPanel();
+    document.addEventListener("keydown", (e) => {
+      if (e.ctrlKey && e.shiftKey && e.code === "KeyC") {
+        this.toggleDevPanel();
+        e.preventDefault();
+      }
+      if (e.ctrlKey && e.shiftKey && e.code === "KeyP") {
+        console.table(this.getPerformanceInsights());
+        e.preventDefault();
+      }
+    });
+  }
+  /**
+   * Create development panel in browser
+   */
+  createDevPanel() {
+    const panel = document.createElement("div");
+    panel.id = "coherent-dev-panel";
+    panel.style.cssText = `
+      position: fixed;
+      top: 10px;
+      right: 10px;
+      width: 300px;
+      background: #1a1a1a;
+      color: #fff;
+      font-family: monospace;
+      font-size: 12px;
+      border-radius: 8px;
+      box-shadow: 0 4px 20px rgba(0,0,0,0.5);
+      z-index: 999999;
+      display: none;
+      max-height: 80vh;
+      overflow-y: auto;
+    `;
+    document.body.appendChild(panel);
+    this.devPanel = panel;
+    this.updateDevPanel();
+  }
+  /**
+   * Toggle dev panel visibility
+   */
+  toggleDevPanel() {
+    if (this.devPanel) {
+      const isVisible = this.devPanel.style.display === "block";
+      this.devPanel.style.display = isVisible ? "none" : "block";
+      if (!isVisible) {
+        this.updateDevPanel();
+      }
+    }
+  }
+  /**
+   * Update dev panel content
+   */
+  updateDevPanel() {
+    if (!this.devPanel) return;
+    const stats = this.getPerformanceInsights();
+    const recentRenders = this.renderHistory.slice(-5);
+    const recentWarnings = this.warnings.slice(-3);
+    this.devPanel.innerHTML = `
+      <div style="padding: 15px; border-bottom: 1px solid #333;">
+        <strong>\u{1F6E0}\uFE0F Coherent.js Dev Tools</strong>
+        <button onclick="this.parentElement.parentElement.style.display='none'"
+                style="float: right; background: none; border: none; color: #fff; cursor: pointer;">\xD7</button>
+      </div>
+
+      <div style="padding: 10px;">
+        <h4 style="margin: 0 0 10px 0; color: #4CAF50;">Performance</h4>
+        <div style="font-size: 11px;">
+          <div>Avg Render: ${stats.averageRenderTime || 0}ms</div>
+          <div>Cache Hit Rate: ${((stats.cacheHits || 0) / Math.max(stats.totalRenders || 1, 1) * 100).toFixed(1)}%</div>
+          <div>Memory Usage: ${(performance.memory?.usedJSHeapSize / 1024 / 1024 || 0).toFixed(1)}MB</div>
+        </div>
+      </div>
+
+      <div style="padding: 10px;">
+        <h4 style="margin: 0 0 10px 0; color: #2196F3;">Recent Renders</h4>
+        ${recentRenders.map((r) => `
+          <div style="font-size: 10px; margin-bottom: 5px; padding: 3px; background: #333; border-radius: 3px;">
+            ${r.id}: ${r.renderTime.toFixed(1)}ms (${r.complexity} nodes)
+          </div>
+        `).join("")}
+      </div>
+
+      ${recentWarnings.length > 0 ? `
+        <div style="padding: 10px;">
+          <h4 style="margin: 0 0 10px 0; color: #FF9800;">Warnings</h4>
+          ${recentWarnings.map((w) => `
+            <div style="font-size: 10px; margin-bottom: 5px; padding: 3px; background: #4a2c0a; border-radius: 3px; color: #FFB74D;">
+              ${w.type}: ${w.message}
+            </div>
+          `).join("")}
+        </div>
+      ` : ""}
+
+      <div style="padding: 10px; font-size: 10px; color: #888;">
+        Press Ctrl+Shift+P for performance details
+      </div>
+    `;
+  }
+  /**
+   * Setup Node.js specific dev tools
+   */
+  setupNodeDevTools() {
+    process.on("SIGINT", () => {
+      this.printDevSummary();
+      process.exit();
+    });
+  }
+  /**
+   * Print development summary
+   */
+  printDevSummary() {
+    console.log("\n\u{1F6E0}\uFE0F Coherent.js Development Summary");
+    console.log("=================================");
+    console.log(`Total Renders: ${this.renderHistory.length}`);
+    console.log(`Total Warnings: ${this.warnings.length}`);
+    console.log(`Total Errors: ${this.errors.length}`);
+    if (this.renderHistory.length > 0) {
+      const avgTime = this.renderHistory.reduce((sum, r) => sum + r.renderTime, 0) / this.renderHistory.length;
+      console.log(`Average Render Time: ${avgTime.toFixed(2)}ms`);
+    }
+    console.log("=================================\n");
+  }
+  /**
+   * Get performance insights
+   */
+  getPerformanceInsights() {
+    const insights = {
+      totalRenders: this.renderHistory.length,
+      averageRenderTime: 0,
+      slowestRender: null,
+      fastestRender: null,
+      cacheHits: 0,
+      totalWarnings: this.warnings.length,
+      totalErrors: this.errors.length
+    };
+    if (this.renderHistory.length > 0) {
+      const times = this.renderHistory.map((r) => r.renderTime);
+      insights.averageRenderTime = times.reduce((a, b) => a + b, 0) / times.length;
+      insights.slowestRender = Math.max(...times);
+      insights.fastestRender = Math.min(...times);
+    }
+    if (this.coherent.cache && this.coherent.cache.getStats) {
+      const cacheStats = this.coherent.cache.getStats();
+      insights.cacheHits = cacheStats.hits;
+      insights.cacheHitRate = cacheStats.hitRate;
+    }
+    if (performanceMonitor && performanceMonitor.getStats) {
+      const perfStats = performanceMonitor.getStats();
+      insights.performanceMonitorStats = perfStats;
+    }
+    return insights;
+  }
+  /**
+   * Utility methods
+   */
+  generateRenderId() {
+    return `render_${Date.now()}_${Math.random().toString(36).substr(2, 5)}`;
+  }
+  serializeComponent(component, maxDepth = 3, currentDepth = 0) {
+    if (currentDepth > maxDepth) return "...";
+    try {
+      if (typeof component === "function") {
+        return `[Function: ${component.name || "anonymous"}]`;
+      }
+      if (Array.isArray(component)) {
+        return component.slice(0, 3).map(
+          (c) => this.serializeComponent(c, maxDepth, currentDepth + 1)
+        ).concat(component.length > 3 ? [`...(${component.length - 3} more)`] : []);
+      }
+      if (component && typeof component === "object") {
+        const serialized = {};
+        const keys = Object.keys(component).slice(0, 10);
+        for (const key of keys) {
+          if (key === "children" && component[key]) {
+            serialized[key] = this.serializeComponent(component[key], maxDepth, currentDepth + 1);
+          } else if (typeof component[key] === "function") {
+            serialized[key] = `[Function: ${component[key].name || "anonymous"}]`;
+          } else {
+            serialized[key] = component[key];
+          }
+        }
+        if (Object.keys(component).length > 10) {
+          serialized["..."] = `(${Object.keys(component).length - 10} more properties)`;
+        }
+        return serialized;
+      }
+      return component;
+    } catch (_error) {
+      return `[Serialization Error: ${_error.message}]`;
+    }
+  }
+  clearDevData() {
+    this.renderHistory = [];
+    this.warnings = [];
+    this.errors = [];
+    this.componentRegistry.clear();
+    console.log("\u{1F9F9} Dev data cleared");
+  }
+  toggleFeature(feature) {
+    switch (feature) {
+      case "cache":
+        if (this.coherent.cache) {
+          this.coherent.cache.enabled = !this.coherent.cache.enabled;
+          console.log(`Cache ${this.coherent.cache.enabled ? "enabled" : "disabled"}`);
+        }
+        break;
+      case "monitoring":
+        if (performanceMonitor) {
+          performanceMonitor.enabled = !performanceMonitor.enabled;
+          console.log(`Monitoring ${performanceMonitor.enabled ? "enabled" : "disabled"}`);
+        }
+        break;
+      case "hot-reload":
+        this.hotReloadEnabled = !this.hotReloadEnabled;
+        console.log(`Hot reload ${this.hotReloadEnabled ? "enabled" : "disabled"}`);
+        break;
+      default:
+        console.log(`Unknown feature: ${feature}`);
+    }
+  }
+  validateComponent(component) {
+    return this.deepValidateComponent(component);
+  }
+  setupComponentInspector() {
+    const originalCreateComponent = this.coherent.createComponent;
+    if (originalCreateComponent) {
+      this.coherent.createComponent = (config) => {
+        const component = originalCreateComponent.call(this.coherent, config);
+        this.componentRegistry.set(config.name || "anonymous", {
+          config,
+          component,
+          registeredAt: Date.now()
+        });
+        return component;
+      };
+    }
+  }
+};
+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
+};
+export {
+  ComponentInspector,
+  DevLogger,
+  DevTools,
+  LogLevel,
+  PerformanceProfiler,
+  createComponentLogger,
+  createConsoleLogger,
+  createDevTools,
+  createInspector,
+  createLogger,
+  createProfiler,
+  index_default as default,
+  inspect,
+  measure,
+  profile,
+  validateComponent
+};
+//# sourceMappingURL=index.js.map