@coherent.js/devtools 1.1.0 → 2.0.0-rc.0

package/dist/index.js

@@ -1,10 +1,3 @@
-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 = {}) {
@@ -104,20 +97,20 @@ var ComponentInspector = class {
     const warnings = [];
     const info = [];
     const seen = /* @__PURE__ */ new WeakSet();
-    const checkCircular = (obj, path2 = []) => {
+    const checkCircular = (obj, path = []) => {
       if (obj === null || typeof obj !== "object") {
         return;
       }
       if (seen.has(obj)) {
-        warnings.push(`circular reference detected at ${path2.join(".")}`);
+        warnings.push(`circular reference detected at ${path.join(".")}`);
         return;
       }
       seen.add(obj);
       if (Array.isArray(obj)) {
-        obj.forEach((item, index) => checkCircular(item, [...path2, `[${index}]`]));
+        obj.forEach((item, index) => checkCircular(item, [...path, `[${index}]`]));
       } else {
         Object.keys(obj).forEach((key) => {
-          checkCircular(obj[key], [...path2, key]);
+          checkCircular(obj[key], [...path, key]);
         });
       }
     };
@@ -390,10 +383,34 @@ function validateComponent(component) {
 }
 
 // src/profiler.js
+var hasPerformanceTimeline = () => typeof performance !== "undefined" && typeof performance.mark === "function";
+function now() {
+  return typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
+}
+function clearTimelineEntries(marks, measureName) {
+  if (!hasPerformanceTimeline()) return;
+  for (const mark of marks) {
+    performance.clearMarks?.(mark);
+  }
+  if (measureName) {
+    performance.clearMeasures?.(measureName);
+  }
+}
+function recordTimelineMeasure(name, startMark, endMark) {
+  if (!hasPerformanceTimeline()) return;
+  try {
+    performance.mark(endMark);
+    performance.measure?.(name, startMark, endMark);
+  } catch {
+  } finally {
+    clearTimelineEntries([startMark, endMark], name);
+  }
+}
 var PerformanceProfiler = class {
   constructor(options = {}) {
     this.options = {
-      enabled: true,
+      // Opt-in: a profiler that is merely constructed must cost nothing.
+      enabled: false,
       sampleRate: 1,
       // 1.0 = 100% sampling
       slowThreshold: 16,
@@ -420,14 +437,14 @@ var PerformanceProfiler = class {
     const session = {
       id: this.generateId(),
       name,
-      startTime: Date.now(),
+      startTime: now(),
       measurements: [],
       marks: [],
       active: true
     };
     this.sessions.set(session.id, session);
     this.currentSession = session;
-    if (typeof performance !== "undefined" && performance.mark) {
+    if (hasPerformanceTimeline()) {
       performance.mark(`coherent-session-start-${session.id}`);
     }
     return session.id;
@@ -443,19 +460,18 @@ var PerformanceProfiler = class {
     if (!session) {
       return null;
     }
-    session.endTime = Date.now();
+    session.endTime = now();
     session.duration = session.endTime - session.startTime;
     session.active = false;
-    if (typeof performance !== "undefined" && performance.mark) {
-      performance.mark(`coherent-session-end-${session.id}`);
-    }
+    recordTimelineMeasure(
+      `coherent-session-${session.id}`,
+      `coherent-session-start-${session.id}`,
+      `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();
-    }
+    this.addMeasurement(session);
     return this.analyzeSession(session);
   }
   /**
@@ -469,12 +485,12 @@ var PerformanceProfiler = class {
       id: measurementId,
       componentName,
       props,
-      startTime: Date.now(),
+      startTime: now(),
       startMemory: this.getMemoryUsage(),
       phase: "render"
     };
     this.marks.set(measurementId, measurement);
-    if (typeof performance !== "undefined" && performance.mark) {
+    if (hasPerformanceTimeline()) {
       performance.mark(`coherent-render-start-${measurementId}`);
     }
     return measurementId;
@@ -485,28 +501,21 @@ var PerformanceProfiler = class {
   endRender(measurementId, result = {}) {
     if (!measurementId || !this.marks.has(measurementId)) return null;
     const measurement = this.marks.get(measurementId);
-    measurement.endTime = Date.now();
+    measurement.endTime = now();
     measurement.duration = measurement.endTime - measurement.startTime;
     measurement.endMemory = this.getMemoryUsage();
-    measurement.memoryDelta = measurement.endMemory - measurement.startMemory;
+    measurement.memoryDelta = measurement.startMemory && measurement.endMemory ? measurement.endMemory.used - measurement.startMemory.used : null;
     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);
+    recordTimelineMeasure(
+      `coherent-render-${measurementId}`,
+      `coherent-render-start-${measurementId}`,
+      `coherent-render-end-${measurementId}`
+    );
+    this.addMeasurement(measurement);
     if (this.currentSession) {
       this.currentSession.measurements.push(measurement);
+      this.trim(this.currentSession.measurements);
     }
     this.marks.delete(measurementId);
     return measurement;
@@ -517,15 +526,13 @@ var PerformanceProfiler = class {
   mark(name, data = {}) {
     const mark = {
       name,
-      timestamp: Date.now(),
+      timestamp: now(),
       data,
       memory: this.getMemoryUsage()
     };
     if (this.currentSession) {
       this.currentSession.marks.push(mark);
-    }
-    if (typeof performance !== "undefined" && performance.mark) {
-      performance.mark(`coherent-mark-${name}`);
+      this.trim(this.currentSession.marks);
     }
     return mark;
   }
@@ -544,6 +551,22 @@ var PerformanceProfiler = class {
       endMark: end.name
     };
   }
+  /**
+   * Append a measurement, dropping the oldest beyond `maxSamples`.
+   */
+  addMeasurement(measurement) {
+    this.measurements.push(measurement);
+    this.trim(this.measurements);
+  }
+  /**
+   * Drop the oldest entries of `list` beyond `maxSamples`.
+   */
+  trim(list) {
+    const max = Math.max(1, Number(this.options.maxSamples) || 1e3);
+    if (list.length > max) {
+      list.splice(0, list.length - max);
+    }
+  }
   /**
    * Get memory usage
    */
@@ -838,6 +861,10 @@ var PerformanceProfiler = class {
    * Clear all data
    */
   clear() {
+    clearTimelineEntries([
+      ...[...this.marks.keys()].map((id) => `coherent-render-start-${id}`),
+      ...[...this.sessions.values()].filter((session) => session.active).map((session) => `coherent-session-start-${session.id}`)
+    ]);
     this.measurements = [];
     this.sessions.clear();
     this.currentSession = null;
@@ -856,17 +883,28 @@ var PerformanceProfiler = class {
     this.options.enabled = false;
   }
   /**
-   * Generate unique ID
+   * Generate unique ID.
+   *
+   * Uses crypto.getRandomValues rather than Math.random: the ids key the
+   * session and measurement maps, so a predictable suffix lets one caller
+   * guess or collide with another's entry. getRandomValues is available in
+   * Node 19+ and in browsers without requiring a secure context, unlike
+   * randomUUID.
+   *
+   * @returns {string} A unique profiling id
    */
   generateId() {
-    return `prof-${Date.now()}-${Math.random().toString(36).substring(7)}`;
+    const bytes = new Uint8Array(8);
+    globalThis.crypto.getRandomValues(bytes);
+    const suffix = Array.from(bytes, (byte) => byte.toString(16).padStart(2, "0")).join("");
+    return `prof-${Date.now()}-${suffix}`;
   }
 };
 function createProfiler(options = {}) {
   return new PerformanceProfiler(options);
 }
 async function measure(name, fn, profiler = null) {
-  const prof = profiler || new PerformanceProfiler();
+  const prof = profiler || new PerformanceProfiler({ enabled: true });
   const sessionId = prof.start(name);
   try {
     const value = await fn();
@@ -874,14 +912,48 @@ async function measure(name, fn, profiler = null) {
     return { value, duration: result?.duration || 0 };
   } catch (error) {
     const result = prof.stop(sessionId);
-    throw { error, duration: result?.duration || 0 };
+    const failure = error instanceof Error ? error : new Error(`${name} failed: ${String(error)}`, { cause: error });
+    try {
+      failure.duration = result?.duration || 0;
+    } catch {
+    }
+    throw failure;
   }
 }
-function profile(fn) {
-  return function(...args) {
-    const result = fn(...args);
+function profile(fn, options = {}) {
+  if (typeof fn !== "function") {
+    throw new TypeError("profile() expects a function");
+  }
+  const opts = options instanceof PerformanceProfiler ? { profiler: options } : options;
+  const profiler = opts.profiler || new PerformanceProfiler({ enabled: true });
+  const name = opts.name || fn.name || "anonymous";
+  function profiled(...args) {
+    const id = profiler.startRender(name);
+    let result;
+    try {
+      result = fn.apply(this, args);
+    } catch (error) {
+      profiler.endRender(id, { error: true });
+      throw error;
+    }
+    if (result && typeof result.then === "function") {
+      return Promise.resolve(result).then(
+        (value) => {
+          profiler.endRender(id);
+          return value;
+        },
+        (error) => {
+          profiler.endRender(id, { error: true });
+          throw error;
+        }
+      );
+    }
+    profiler.endRender(id);
     return result;
-  };
+  }
+  Object.defineProperty(profiled, "name", { value: name });
+  profiled.profiler = profiler;
+  return profiled;
 }
 
 // src/logger.js
@@ -1340,28 +1412,53 @@ function createConsoleLogger(prefix = "") {
 
 // src/dev-tools.js
 import { performanceMonitor, validateComponent as validateComponent2, isCoherentObject } from "@coherent.js/core";
+var LOCAL_HOSTNAMES = /* @__PURE__ */ new Set(["localhost", "127.0.0.1", "[::1]", "::1"]);
 var DevTools = class {
-  constructor(coherentInstance) {
+  /**
+   * @param {Object} [coherentInstance] - Object exposing `render` (and optionally
+   *   `createComponent` / `cache`), e.g. `import * as coherent from '@coherent.js/core'`.
+   * @param {Object} [options]
+   * @param {boolean} [options.enabled] - Force on or off; defaults to {@link DevTools#shouldEnable}.
+   * @param {number} [options.maxEntries=100] - Cap on retained warnings and errors each.
+   * @param {boolean} [options.captureConsoleErrors=true] - Record console.error calls.
+   * @param {boolean} [options.trackUnhandledRejections=false] - Record unhandled promise
+   *   rejections (Node). They still crash the process as they would without DevTools.
+   * @param {string} [options.hotReloadUrl] - Browser only: WebSocket URL of a dev server
+   *   sending `component-updated` / `full-reload` messages. No connection is made without it.
+   * @param {boolean} [options.globalHelpers=true] - Expose `$inspect`, `$history`, … globally.
+   */
+  constructor(coherentInstance = null, options = {}) {
     this.coherent = coherentInstance;
-    this.isEnabled = this.shouldEnable();
+    this.options = {
+      maxEntries: 100,
+      captureConsoleErrors: true,
+      trackUnhandledRejections: false,
+      hotReloadUrl: null,
+      globalHelpers: true,
+      ...options
+    };
+    this.isEnabled = typeof options.enabled === "boolean" ? options.enabled : this.shouldEnable();
     this.renderHistory = [];
     this.componentRegistry = /* @__PURE__ */ new Map();
     this.warnings = [];
     this.errors = [];
     this.hotReloadEnabled = false;
+    this._teardown = [];
     if (this.isEnabled) {
       this.initialize();
     }
   }
   /**
-   * Check if dev tools should be enabled
+   * Check if dev tools should be enabled: NODE_ENV=development in Node, a
+   * localhost page in the browser. Anything else (a query parameter on a
+   * production host, say) needs the explicit `enabled: true` option.
    */
   shouldEnable() {
-    if (typeof process !== "undefined") {
+    if (typeof process !== "undefined" && process?.env) {
       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");
+    if (typeof window !== "undefined" && window.location) {
+      return LOCAL_HOSTNAMES.has(window.location.hostname);
     }
     return false;
   }
@@ -1370,18 +1467,86 @@ var DevTools = class {
    */
   initialize() {
     console.log("\u{1F6E0}\uFE0F Coherent.js Dev Tools Enabled");
-    this.setupGlobalHelpers();
-    this.setupRenderInterception();
+    if (this.options.globalHelpers) {
+      this.setupGlobalHelpers();
+    }
     this.setupErrorHandling();
     this.setupHotReload();
-    this.setupComponentInspector();
-    if (typeof window !== "undefined") {
+    if (typeof window !== "undefined" && typeof document !== "undefined") {
       this.setupBrowserDevTools();
     }
-    if (typeof process !== "undefined") {
-      this.setupNodeDevTools();
+  }
+  /**
+   * Undo everything initialize() installed: global helpers, the
+   * console.error hook, the unhandled-rejection listener, the hot-reload
+   * socket and the browser panel.
+   */
+  destroy() {
+    while (this._teardown.length) {
+      try {
+        this._teardown.pop()();
+      } catch {
+      }
+    }
+  }
+  /**
+   * Append to a bounded list (warnings, errors), dropping the oldest.
+   */
+  record(list, entry) {
+    list.push(entry);
+    const max = Math.max(1, this.options.maxEntries);
+    if (list.length > max) {
+      list.splice(0, list.length - max);
+    }
+    return entry;
+  }
+  /**
+   * Render through the wrapped Coherent instance, recording timing,
+   * validation warnings and errors.
+   */
+  render(component, context = {}, options = {}) {
+    const render = this.coherent?.render;
+    if (typeof render !== "function") {
+      throw new TypeError("DevTools.render() needs a Coherent instance with a render() function: createDevTools(coherent)");
+    }
+    if (!this.isEnabled) {
+      return render.call(this.coherent, component, context, options);
+    }
+    const renderStart = performance.now();
+    const renderId = this.generateRenderId();
+    try {
+      this.preRenderAnalysis(component, context, renderId);
+      const result = render.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;
     }
   }
+  /**
+   * createComponent() of the wrapped instance, registering the result for
+   * inspection.
+   */
+  createComponent(config) {
+    const create = this.coherent?.createComponent;
+    if (typeof create !== "function") {
+      throw new TypeError("DevTools.createComponent() needs a Coherent instance with createComponent()");
+    }
+    const component = create.call(this.coherent, config);
+    if (this.isEnabled) {
+      this.componentRegistry.set(config?.name || "anonymous", {
+        config,
+        component,
+        registeredAt: Date.now()
+      });
+    }
+    return component;
+  }
   /**
    * Set up global helper functions
    */
@@ -1404,34 +1569,15 @@ var DevTools = class {
       // 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;
+    const target = globalThis;
+    const previous = Object.fromEntries(Object.keys(helpers).map((key) => [key, target[key]]));
+    Object.assign(target, helpers);
+    this._teardown.push(() => {
+      for (const [key, value] of Object.entries(previous)) {
+        if (value === void 0) delete target[key];
+        else target[key] = value;
       }
-    };
+    });
   }
   /**
    * Pre-render analysis and validation
@@ -1439,7 +1585,7 @@ var DevTools = class {
   preRenderAnalysis(component, context, renderId) {
     const validation = this.deepValidateComponent(component);
     if (!validation.isValid) {
-      this.warnings.push({
+      this.record(this.warnings, {
         type: "validation",
         message: validation.message,
         component: this.serializeComponent(component),
@@ -1449,14 +1595,14 @@ var DevTools = class {
     }
     const complexity = this.analyzeComplexity(component);
     if (complexity > 1e3) {
-      this.warnings.push({
+      this.record(this.warnings, {
         type: "performance",
         message: `High complexity component detected (${complexity} nodes)`,
         renderId,
         timestamp: Date.now()
       });
     }
-    this.analyzeContext(context, renderId);
+    this.analyzeContext(context ?? {}, renderId);
   }
   /**
    * Post-render analysis
@@ -1467,7 +1613,7 @@ var DevTools = class {
       timestamp: Date.now(),
       component: this.serializeComponent(component),
       renderTime,
-      outputSize: result.length,
+      outputSize: typeof result === "string" ? result.length : 0,
       complexity: this.analyzeComplexity(component)
     };
     this.renderHistory.push(renderRecord);
@@ -1475,7 +1621,7 @@ var DevTools = class {
       this.renderHistory.shift();
     }
     if (renderTime > 10) {
-      this.warnings.push({
+      this.record(this.warnings, {
         type: "performance",
         message: `Slow render detected: ${renderTime.toFixed(2)}ms`,
         renderId,
@@ -1489,11 +1635,11 @@ var DevTools = class {
   /**
    * Deep component validation
    */
-  deepValidateComponent(component, path2 = "root", depth = 0) {
+  deepValidateComponent(component, path = "root", depth = 0) {
     if (depth > 100) {
       return {
         isValid: false,
-        message: `Component nesting too deep at ${path2}`
+        message: `Component nesting too deep at ${path}`
       };
     }
     try {
@@ -1501,14 +1647,14 @@ var DevTools = class {
     } catch (_error) {
       return {
         isValid: false,
-        message: `Invalid component at ${path2}: ${_error.message}`
+        message: `Invalid component at ${path}: ${_error.message}`
       };
     }
     if (Array.isArray(component)) {
       for (let i = 0; i < component.length; i++) {
         const childValidation = this.deepValidateComponent(
           component[i],
-          `${path2}[${i}]`,
+          `${path}[${i}]`,
           depth + 1
         );
         if (!childValidation.isValid) {
@@ -1520,7 +1666,7 @@ var DevTools = class {
         if (props && typeof props === "object" && props.children) {
           const childValidation = this.deepValidateComponent(
             props.children,
-            `${path2}.${tag}.children`,
+            `${path}.${tag}.children`,
             depth + 1
           );
           if (!childValidation.isValid) {
@@ -1562,26 +1708,27 @@ var DevTools = class {
    * 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()
-      });
-    }
+    let contextSize;
     try {
-      JSON.stringify(context);
+      contextSize = JSON.stringify(context)?.length ?? 0;
     } catch (_error) {
-      if (_error.message.includes("circular")) {
-        this.warnings.push({
+      if (/circular/i.test(_error.message)) {
+        this.record(this.warnings, {
           type: "context",
           message: "Circular reference detected in context",
           renderId,
           timestamp: Date.now()
         });
       }
+      return;
+    }
+    if (contextSize > 1e4) {
+      this.record(this.warnings, {
+        type: "context",
+        message: `Large context object: ${contextSize} characters`,
+        renderId,
+        timestamp: Date.now()
+      });
     }
   }
   /**
@@ -1695,48 +1842,63 @@ ${indent}</${tag}>`;
     return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
   }
   /**
-   * Setup _error handling
+   * Record errors. console.error calls are captured (and still printed);
+   * unhandled rejections only when `trackUnhandledRejections` is set, and
+   * then they still crash the process exactly as they would without us.
    */
   setupErrorHandling() {
-    const originalConsoleError = console.error;
-    console.error = (...args) => {
-      this.errors.push({
-        type: "console",
-        message: args.join(" "),
-        timestamp: Date.now(),
-        stack: new Error().stack
+    if (this.options.captureConsoleErrors) {
+      const originalConsoleError = console.error;
+      const hooked = (...args) => {
+        this.record(this.errors, {
+          type: "console",
+          message: args.map((arg) => String(arg)).join(" "),
+          timestamp: Date.now(),
+          stack: new Error().stack
+        });
+        originalConsoleError.apply(console, args);
+      };
+      console.error = hooked;
+      this._teardown.push(() => {
+        if (console.error === hooked) console.error = originalConsoleError;
       });
-      originalConsoleError.apply(console, args);
-    };
-    if (typeof process !== "undefined") {
-      process.on("unhandledRejection", (reason, promise) => {
-        this.errors.push({
+    }
+    if (this.options.trackUnhandledRejections && typeof process !== "undefined" && typeof process.on === "function") {
+      const listener = (reason) => {
+        this.record(this.errors, {
           type: "unhandled-rejection",
-          message: reason.toString(),
-          promise: promise.toString(),
+          message: reason instanceof Error ? reason.message : String(reason),
+          stack: reason instanceof Error ? reason.stack : void 0,
           timestamp: Date.now()
         });
-      });
+        if (process.listenerCount("unhandledRejection") === 1) {
+          throw reason instanceof Error ? reason : new Error(`Unhandled promise rejection: ${String(reason)}`);
+        }
+      };
+      process.on("unhandledRejection", listener);
+      this._teardown.push(() => process.off("unhandledRejection", listener));
     }
-    if (typeof window !== "undefined") {
-      window.addEventListener("_error", (event) => {
-        this.errors.push({
-          type: "browser-_error",
+    if (typeof window !== "undefined" && typeof window.addEventListener === "function") {
+      const listener = (event) => {
+        this.record(this.errors, {
+          type: "browser-error",
           message: event.message,
           filename: event.filename,
           lineno: event.lineno,
           colno: event.colno,
           timestamp: Date.now()
         });
-      });
+      };
+      window.addEventListener("error", listener);
+      this._teardown.push(() => window.removeEventListener("error", listener));
     }
   }
   /**
    * Handle render errors specifically
    */
   handleRenderError(_error, component, context, renderId) {
-    this.errors.push({
-      type: "render-_error",
+    this.record(this.errors, {
+      type: "render-error",
       message: _error.message,
       stack: _error.stack,
       component: this.serializeComponent(component),
@@ -1748,23 +1910,27 @@ ${indent}</${tag}>`;
     console.error("Component:", this.serializeComponent(component));
   }
   /**
-   * Setup hot reload capability
+   * Connect to a hot-reload WebSocket, only when `hotReloadUrl` is set
+   * (browser only).
    */
   setupHotReload() {
-    if (typeof window !== "undefined" && "WebSocket" in window) {
-      this.setupBrowserHotReload();
-    } else if (typeof __require !== "undefined") {
-      this.setupNodeHotReload();
+    if (this.options.hotReloadUrl && typeof window !== "undefined" && "WebSocket" in window) {
+      this.setupBrowserHotReload(this.options.hotReloadUrl);
     }
   }
   /**
    * Browser hot reload setup
    */
-  setupBrowserHotReload() {
+  setupBrowserHotReload(url) {
     try {
-      const ws = new WebSocket("ws://localhost:3001/coherent-dev");
+      const ws = new window.WebSocket(url);
       ws.onmessage = (event) => {
-        const data = JSON.parse(event.data);
+        let data;
+        try {
+          data = JSON.parse(event.data);
+        } catch {
+          return;
+        }
         if (data.type === "component-updated") {
           console.log("\u{1F504} Component updated:", data.componentName);
           this.handleComponentUpdate(data);
@@ -1780,24 +1946,7 @@ ${indent}</${tag}>`;
         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;
+      this._teardown.push(() => ws.close());
     } catch {
     }
   }
@@ -1805,7 +1954,7 @@ ${indent}</${tag}>`;
    * Handle component updates
    */
   handleComponentUpdate(updateData) {
-    if (this.coherent.cache) {
+    if (this.coherent?.cache?.invalidatePattern) {
       this.coherent.cache.invalidatePattern(updateData.componentName);
     }
     this.componentRegistry.set(updateData.componentName, {
@@ -1816,22 +1965,12 @@ ${indent}</${tag}>`;
       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) => {
+    const onKeyDown = (e) => {
       if (e.ctrlKey && e.shiftKey && e.code === "KeyC") {
         this.toggleDevPanel();
         e.preventDefault();
@@ -1840,7 +1979,9 @@ ${indent}</${tag}>`;
         console.table(this.getPerformanceInsights());
         e.preventDefault();
       }
-    });
+    };
+    document.addEventListener("keydown", onKeyDown);
+    this._teardown.push(() => document.removeEventListener("keydown", onKeyDown));
   }
   /**
    * Create development panel in browser
@@ -1866,6 +2007,10 @@ ${indent}</${tag}>`;
     `;
     document.body.appendChild(panel);
     this.devPanel = panel;
+    this._teardown.push(() => {
+      panel.remove();
+      this.devPanel = null;
+    });
     this.updateDevPanel();
   }
   /**
@@ -1929,15 +2074,6 @@ ${indent}</${tag}>`;
       </div>
     `;
   }
-  /**
-   * Setup Node.js specific dev tools
-   */
-  setupNodeDevTools() {
-    process.on("SIGINT", () => {
-      this.printDevSummary();
-      process.exit();
-    });
-  }
   /**
    * Print development summary
    */
@@ -1972,7 +2108,7 @@ ${indent}</${tag}>`;
       insights.slowestRender = Math.max(...times);
       insights.fastestRender = Math.min(...times);
     }
-    if (this.coherent.cache && this.coherent.cache.getStats) {
+    if (this.coherent?.cache?.getStats) {
       const cacheStats = this.coherent.cache.getStats();
       insights.cacheHits = cacheStats.hits;
       insights.cacheHitRate = cacheStats.hitRate;
@@ -2032,7 +2168,7 @@ ${indent}</${tag}>`;
   toggleFeature(feature) {
     switch (feature) {
       case "cache":
-        if (this.coherent.cache) {
+        if (this.coherent?.cache) {
           this.coherent.cache.enabled = !this.coherent.cache.enabled;
           console.log(`Cache ${this.coherent.cache.enabled ? "enabled" : "disabled"}`);
         }
@@ -2054,23 +2190,9 @@ ${indent}</${tag}>`;
   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);
+function createDevTools(coherentInstance, options) {
+  return new DevTools(coherentInstance, options);
 }
 
 // src/component-visualizer.js
@@ -2579,8 +2701,8 @@ var PerformanceDashboard = class {
    * Update metrics from external sources
    */
   updateMetrics() {
-    const now = Date.now();
-    const uptime = now - this.startTime;
+    const now2 = Date.now();
+    const uptime = now2 - 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);
@@ -2914,10 +3036,10 @@ var EnhancedErrorHandler = class {
   /**
    * Get component context tree
    */
-  getComponentContext(component, path2 = []) {
+  getComponentContext(component, path = []) {
     const context = {
-      path: path2.join("."),
-      depth: path2.length,
+      path: path.join("."),
+      depth: path.length,
       component: this.summarizeComponent(component),
       children: []
     };
@@ -2929,7 +3051,7 @@ var EnhancedErrorHandler = class {
           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}]`]);
+              const childContext = this.getComponentContext(child, [...path, `${tagName}[${index}]`]);
               context.children.push(childContext);
             }
           });