@lytjs/devtools 6.4.0 → 6.5.0

package/dist/index.cjs

@@ -134,16 +134,14 @@ function setStoreState(storeId, path, value) {
   const store = storeRegistry.get(storeId);
   if (!store) return false;
   const keys = path.split(".");
-  let current = store.$state || store;
+  let current = store;
   for (let i = 0; i < keys.length - 1; i++) {
     const key = keys[i];
-    if (!commonIs.isObject(current[key])) {
-      return false;
-    }
+    if (!commonIs.isObject(current)) return false;
     current = current[key];
   }
   const lastKey = keys[keys.length - 1];
-  if (lastKey) {
+  if (lastKey && commonIs.isObject(current)) {
     current[lastKey] = value;
   }
   return true;
@@ -186,7 +184,7 @@ function subscribeStore(storeId) {
     unsubscribeStore(storeId);
   }
   if (commonIs.isFunction(store.$subscribe)) {
-    const unsubscribe = store.$subscribe((_mutation, state) => {
+    const unsubscribe = store.$subscribe?.((_mutation, state) => {
       const currentState = commonIs.isObject(state) ? deepClone(state) : {};
       globalChangeCallbacks.forEach((cb) => cb(storeId, currentState));
     });
@@ -253,7 +251,7 @@ function watchRouteChanges() {
   if (afterEachHandler !== null) {
     unwatchRouteChanges();
   }
-  routerInstance.afterEach((to) => {
+  routerInstance.afterEach?.((to) => {
     const routeInfo = {
       path: to.path || "/",
       name: to.name || null,
@@ -287,7 +285,8 @@ function navigateToName(name, params) {
   if (!routerInstance) {
     return Promise.reject(new Error("Router not registered"));
   }
-  return routerInstance.push?.({ name, params }) || Promise.resolve();
+  const path = `/${name}${params ? "?" + new URLSearchParams(params).toString() : ""}`;
+  return routerInstance.push?.(path) || Promise.resolve();
 }
 function goBack() {
   if (!routerInstance) {
@@ -333,6 +332,14 @@ function clearRouteHistory() {
 }
 
 // src/signalsInspector.ts
+var DEFAULT_LAYOUT_OPTIONS = {
+  nodeWidth: 120,
+  nodeHeight: 40,
+  horizontalSpacing: 60,
+  verticalSpacing: 80,
+  centerX: 300,
+  centerY: 200
+};
 var signalRegistry = /* @__PURE__ */ new Map();
 var snapshotManager = {
   snapshots: [],
@@ -488,6 +495,9 @@ function createSnapshot(label) {
 function getSnapshots() {
   return snapshotManager.getAll();
 }
+function getSnapshot(index) {
+  return snapshotManager.get(index);
+}
 function getTimeTravelState() {
   const length = snapshotManager.getLength();
   return {
@@ -641,6 +651,352 @@ function serializePerformanceStats() {
   });
   return result;
 }
+function calculateNodeLevels() {
+  const levels = /* @__PURE__ */ new Map();
+  const visited = /* @__PURE__ */ new Set();
+  function visitNode(nodeId, level) {
+    if (visited.has(nodeId)) {
+      const existingLevel = levels.get(nodeId);
+      if (existingLevel !== void 0 && level > existingLevel) {
+        levels.set(nodeId, level);
+      }
+      return;
+    }
+    visited.add(nodeId);
+    levels.set(nodeId, level);
+    const node = signalRegistry.get(nodeId);
+    if (node) {
+      node.dependents.forEach((depId) => {
+        visitNode(depId, level + 1);
+      });
+    }
+  }
+  signalRegistry.forEach((node, id) => {
+    if (node.dependencies.size === 0) {
+      visitNode(id, 0);
+    }
+  });
+  signalRegistry.forEach((_, id) => {
+    if (!visited.has(id)) {
+      visitNode(id, 0);
+    }
+  });
+  return levels;
+}
+function calculateNodeDegrees() {
+  const degrees = /* @__PURE__ */ new Map();
+  signalRegistry.forEach((node, id) => {
+    degrees.set(id, {
+      inDegree: node.dependencies.size,
+      outDegree: node.dependents.size
+    });
+  });
+  return degrees;
+}
+function getVisualLayoutGraph(options2) {
+  const opts = { ...DEFAULT_LAYOUT_OPTIONS, ...options2 };
+  if (signalRegistry.size === 0) {
+    return { nodes: [], edges: [], width: 0, height: 0 };
+  }
+  const levels = calculateNodeLevels();
+  const degrees = calculateNodeDegrees();
+  const levelNodes = /* @__PURE__ */ new Map();
+  levels.forEach((level, nodeId) => {
+    const nodes2 = levelNodes.get(level) || [];
+    nodes2.push(nodeId);
+    levelNodes.set(level, nodes2);
+  });
+  const maxLevel = Math.max(...Array.from(levels.values()), 0);
+  const maxNodesInLevel = Math.max(...Array.from(levelNodes.values()).map((n) => n.length), 1);
+  const graphWidth = (maxNodesInLevel + 1) * (opts.nodeWidth + opts.horizontalSpacing);
+  const graphHeight = (maxLevel + 2) * (opts.nodeHeight + opts.verticalSpacing);
+  const nodes = [];
+  const edges = [];
+  levelNodes.forEach((nodeIds, level) => {
+    const levelWidth = nodeIds.length * (opts.nodeWidth + opts.horizontalSpacing) - opts.horizontalSpacing;
+    const startX = (graphWidth - levelWidth) / 2;
+    nodeIds.forEach((nodeId, index) => {
+      const node = signalRegistry.get(nodeId);
+      if (!node) return;
+      const degree = degrees.get(nodeId) || { inDegree: 0, outDegree: 0 };
+      const x = startX + index * (opts.nodeWidth + opts.horizontalSpacing);
+      const y = opts.centerY - graphHeight / 2 + level * (opts.nodeHeight + opts.verticalSpacing) + opts.verticalSpacing / 2;
+      nodes.push({
+        id: nodeId,
+        name: node.name,
+        type: node.type,
+        x,
+        y,
+        level,
+        width: opts.nodeWidth,
+        height: opts.nodeHeight,
+        inDegree: degree.inDegree,
+        outDegree: degree.outDegree
+      });
+      node.dependencies.forEach((depId) => {
+        const depNode = nodes.find((n) => n.id === depId);
+        if (depNode) {
+          edges.push({
+            source: depId,
+            target: nodeId,
+            sourceX: depNode.x + opts.nodeWidth,
+            sourceY: depNode.y + opts.nodeHeight / 2,
+            targetX: x,
+            targetY: y + opts.nodeHeight / 2,
+            type: "dependency"
+          });
+        }
+      });
+    });
+  });
+  return { nodes, edges, width: graphWidth, height: graphHeight };
+}
+function getSubgraph(centerId, depth = 2) {
+  const includedNodes = /* @__PURE__ */ new Set([centerId]);
+  const queue = [{ id: centerId, currentDepth: 0 }];
+  while (queue.length > 0) {
+    const { id, currentDepth: currentDepth2 } = queue.shift();
+    if (currentDepth2 >= depth) continue;
+    const node = signalRegistry.get(id);
+    if (node) {
+      node.dependencies.forEach((depId) => {
+        if (!includedNodes.has(depId)) {
+          includedNodes.add(depId);
+          queue.push({ id: depId, currentDepth: currentDepth2 + 1 });
+        }
+      });
+      node.dependents.forEach((depId) => {
+        if (!includedNodes.has(depId)) {
+          includedNodes.add(depId);
+          queue.push({ id: depId, currentDepth: currentDepth2 + 1 });
+        }
+      });
+    }
+  }
+  const tempRegistry = new Map(signalRegistry);
+  signalRegistry.forEach((_, id) => {
+    if (!includedNodes.has(id)) {
+      signalRegistry.delete(id);
+    }
+  });
+  const subgraph = getVisualLayoutGraph();
+  signalRegistry.clear();
+  tempRegistry.forEach((value, key) => {
+    signalRegistry.set(key, value);
+  });
+  return subgraph;
+}
+function searchSignals(query) {
+  const lowerQuery = query.toLowerCase();
+  return getSignalNodes().filter(
+    (node) => node.name.toLowerCase().includes(lowerQuery) || node.id.toLowerCase().includes(lowerQuery) || node.type.toLowerCase().includes(lowerQuery)
+  );
+}
+function filterSignals(options2) {
+  return getSignalNodes().filter((node) => {
+    if (options2.types && !options2.types.includes(node.type)) {
+      return false;
+    }
+    if (options2.minUpdateCount !== void 0 && node.updateCount < options2.minUpdateCount) {
+      return false;
+    }
+    if (options2.hasDependencies && node.dependencies.length === 0) {
+      return false;
+    }
+    if (options2.hasDependents && node.dependents.length === 0) {
+      return false;
+    }
+    return true;
+  });
+}
+function compareSnapshots(snapshot1, snapshot2) {
+  const diff = {
+    added: [],
+    removed: [],
+    changed: []
+  };
+  const ids1 = new Set(Object.keys(snapshot1.signals));
+  const ids2 = new Set(Object.keys(snapshot2.signals));
+  ids2.forEach((id) => {
+    if (!ids1.has(id)) {
+      diff.added.push({
+        id,
+        value: snapshot2.signals[id].value
+      });
+    }
+  });
+  ids1.forEach((id) => {
+    if (!ids2.has(id)) {
+      diff.removed.push({
+        id,
+        value: snapshot1.signals[id].value
+      });
+    }
+  });
+  ids1.forEach((id) => {
+    if (ids2.has(id)) {
+      const oldValue = snapshot1.signals[id].value;
+      const newValue = snapshot2.signals[id].value;
+      if (!Object.is(oldValue, newValue)) {
+        diff.changed.push({ id, oldValue, newValue });
+      }
+    }
+  });
+  return diff;
+}
+function serializeSnapshotDiff(diff) {
+  let result = "";
+  if (diff.added.length > 0) {
+    result += `\u2795 \u65B0\u589E\u4FE1\u53F7 (${diff.added.length}):
+`;
+    diff.added.forEach(({ id, value }) => {
+      result += `   ${id}: ${JSON.stringify(value)}
+`;
+    });
+    result += "\n";
+  }
+  if (diff.removed.length > 0) {
+    result += `\u2796 \u79FB\u9664\u4FE1\u53F7 (${diff.removed.length}):
+`;
+    diff.removed.forEach(({ id, value }) => {
+      result += `   ${id}: ${JSON.stringify(value)}
+`;
+    });
+    result += "\n";
+  }
+  if (diff.changed.length > 0) {
+    result += `\u{1F504} \u53D8\u66F4\u4FE1\u53F7 (${diff.changed.length}):
+`;
+    diff.changed.forEach(({ id, oldValue, newValue }) => {
+      result += `   ${id}:
+`;
+      result += `     \u65E7\u503C: ${JSON.stringify(oldValue)}
+`;
+      result += `     \u65B0\u503C: ${JSON.stringify(newValue)}
+`;
+    });
+    result += "\n";
+  }
+  if (result === "") {
+    result = "\u2728 \u5FEB\u7167\u5B8C\u5168\u76F8\u540C";
+  }
+  return result;
+}
+function getDiffBetweenSnapshots(index1, index2) {
+  const snapshot1 = getSnapshot(index1);
+  const snapshot2 = getSnapshot(index2);
+  if (!snapshot1 || !snapshot2) {
+    return null;
+  }
+  return compareSnapshots(snapshot1, snapshot2);
+}
+function getTimeTravelNavigator(index) {
+  const snapshots = getSnapshots();
+  const currentIndex = index !== void 0 ? index : Math.max(0, snapshots.length - 1);
+  return {
+    currentIndex,
+    total: snapshots.length,
+    canGoBack: currentIndex > 0,
+    canGoForward: currentIndex < snapshots.length - 1,
+    currentSnapshot: snapshots[currentIndex] ?? null,
+    previousSnapshot: currentIndex > 0 ? snapshots[currentIndex - 1] ?? null : null,
+    nextSnapshot: snapshots[currentIndex + 1] ?? null,
+    diff: currentIndex > 0 ? compareSnapshots(snapshots[currentIndex - 1], snapshots[currentIndex]) : null
+  };
+}
+function timeTravelBack() {
+  const navigator = getTimeTravelNavigator();
+  if (!navigator.canGoBack) return null;
+  return restoreSnapshot(navigator.currentIndex - 1) ?? null;
+}
+function timeTravelForward() {
+  const navigator = getTimeTravelNavigator();
+  if (!navigator.canGoForward) return null;
+  return restoreSnapshot(navigator.currentIndex + 1) ?? null;
+}
+
+// src/vdomInspector.ts
+var registry = {
+  roots: /* @__PURE__ */ new Map(),
+  nodes: /* @__PURE__ */ new Map()};
+function getVDOMRoots() {
+  return Array.from(registry.roots.values());
+}
+function getVDOMTree() {
+  return getVDOMRoots();
+}
+function getVDOMStats() {
+  let maxDepth = 0;
+  let componentCount = 0;
+  let elementCount = 0;
+  let textCount = 0;
+  for (const node of registry.nodes.values()) {
+    if (node.depth > maxDepth) maxDepth = node.depth;
+    if (node.isComponent) componentCount++;
+    else if (node.type === "element") elementCount++;
+    else if (node.type === "text") textCount++;
+  }
+  return {
+    totalNodes: registry.nodes.size,
+    rootCount: registry.roots.size,
+    maxDepth,
+    componentCount,
+    elementCount,
+    textCount
+  };
+}
+function serializeVDOMNode(node, indent = 0) {
+  const spaces = "  ".repeat(indent);
+  let result = "";
+  if (node.type === "text") {
+    result += `${spaces}\u{1F4DD} "${node.text || ""}"
+`;
+  } else if (node.isComponent) {
+    result += `${spaces}\u{1F9E9} <${node.tagName || "Component"}`;
+    if (node.key !== void 0) result += ` key="${node.key}"`;
+    result += ">\n";
+  } else if (node.type === "element") {
+    result += `${spaces}\u{1F3F7}\uFE0F <${node.tagName || "unknown"}`;
+    if (node.key !== void 0) result += ` key="${node.key}"`;
+    if (node.props) {
+      const propStr = Object.entries(node.props).slice(0, 3).map(([k, v]) => `${k}="${v}"`).join(" ");
+      if (propStr) result += ` ${propStr}`;
+      if (Object.keys(node.props).length > 3) {
+        result += " ...";
+      }
+    }
+    result += ">\n";
+  }
+  for (const child of node.children) {
+    result += serializeVDOMNode(child, indent + 1);
+  }
+  if ((node.isComponent || node.type === "element") && node.children.length === 0) {
+    result += `${spaces}  (empty)
+`;
+  }
+  return result;
+}
+function serializeVDOMTree() {
+  const roots = getVDOMRoots();
+  if (roots.length === 0) {
+    return "No VDOM roots registered.";
+  }
+  let result = `\u{1F4E6} VDOM Tree (${roots.length} root(s))
+`;
+  result += "\u2500".repeat(40) + "\n";
+  for (const root of roots) {
+    result += serializeVDOMNode(root);
+    result += "\n";
+  }
+  const stats = getVDOMStats();
+  result += "\u2500".repeat(40) + "\n";
+  result += `\u{1F4CA} Stats: ${stats.totalNodes} nodes, ${stats.componentCount} components, `;
+  result += `${stats.elementCount} elements, ${stats.textCount} text nodes
+`;
+  result += `\u{1F4CF} Max depth: ${stats.maxDepth}
+`;
+  return result;
+}
 
 // src/performance.ts
 var DEFAULT_OPTIONS = {
@@ -885,7 +1241,7 @@ function outputAlert(alert) {
     error: "color: #ff4d4f;",
     critical: "color: #722ed1; background: #ff4d4f; padding: 2px 5px;"
   };
-  console.log(
+  console.warn(
     `%c[LytJS Alert] ${alert.ruleName}%c ${alert.message}`,
     levelStyles[alert.level],
     "color: inherit;"
@@ -972,6 +1328,144 @@ function startTimer(name, type = "custom") {
     recordMetric({ name, type, duration });
   };
 }
+var timelineEventStack = [];
+var timelineEvents = [];
+var maxTimelineEvents = 1e3;
+var currentDepth = 0;
+function beginTimelineEvent(name, category = "custom", metadata) {
+  const id = `timeline_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+  const event = {
+    id,
+    name,
+    category,
+    startTime: performance.now(),
+    duration: 0,
+    depth: currentDepth,
+    metadata
+  };
+  timelineEventStack.push({
+    event,
+    startTime: performance.now()
+  });
+  currentDepth++;
+  return id;
+}
+function endTimelineEvent(id) {
+  const stackIndex = timelineEventStack.findIndex((item) => item.event.id === id);
+  if (stackIndex === -1) {
+    console.warn(`[DevTools] Timeline event ${id} not found in stack`);
+    return null;
+  }
+  const { event } = timelineEventStack[stackIndex];
+  const endTime = performance.now();
+  event.duration = endTime - event.startTime;
+  for (let i = stackIndex + 1; i < timelineEventStack.length; i++) {
+    const nestedEvent = timelineEventStack[i];
+    event.duration = Math.max(event.duration, nestedEvent.startTime - event.startTime + nestedEvent.event.duration);
+  }
+  timelineEventStack.splice(stackIndex);
+  currentDepth = Math.max(0, currentDepth - 1);
+  timelineEvents.push(event);
+  if (timelineEvents.length > maxTimelineEvents) {
+    timelineEvents.shift();
+  }
+  return event;
+}
+function getTimelineEvents() {
+  return [...timelineEvents];
+}
+function getTimelineEventsInRange(startTime, endTime) {
+  return timelineEvents.filter(
+    (event) => event.startTime >= startTime && event.startTime <= endTime
+  );
+}
+function getSlowOperations(limit = 10, threshold) {
+  const sorted = [...timelineEvents].sort((a, b) => b.duration - a.duration);
+  const result = threshold !== void 0 ? sorted.filter((e) => e.duration >= threshold) : sorted;
+  return result.slice(0, limit);
+}
+function getFlameGraphData() {
+  const root = {
+    name: "root",
+    value: 0,
+    children: [],
+    category: "custom"
+  };
+  const nodeMap = /* @__PURE__ */ new Map();
+  nodeMap.set("root", root);
+  timelineEvents.forEach((event) => {
+    const node = {
+      name: event.name,
+      value: event.duration,
+      category: event.category,
+      children: []
+    };
+    const parentNode = event.depth === 0 ? root : findParentNode(root, event.depth);
+    if (parentNode) {
+      if (!parentNode.children) {
+        parentNode.children = [];
+      }
+      parentNode.children.push(node);
+    }
+    nodeMap.set(event.id, node);
+  });
+  aggregateFlameGraphValues(root);
+  return root;
+}
+function findParentNode(node, depth) {
+  if (!node.children || node.children.length === 0) {
+    return depth === 1 ? node : null;
+  }
+  let targetDepth = depth - 1;
+  let currentNode = node;
+  while (targetDepth > 0 && currentNode) {
+    const children = currentNode.children || [];
+    if (children.length === 0) {
+      return currentNode;
+    }
+    const lastChild = children[children.length - 1];
+    currentNode = lastChild;
+    targetDepth--;
+  }
+  return currentNode;
+}
+function aggregateFlameGraphValues(node) {
+  if (!node.children || node.children.length === 0) {
+    return node.value;
+  }
+  let totalValue = node.value;
+  node.children.forEach((child) => {
+    totalValue += aggregateFlameGraphValues(child);
+  });
+  node.value = totalValue;
+  return totalValue;
+}
+function clearTimelineEvents() {
+  timelineEvents.length = 0;
+  timelineEventStack.length = 0;
+  currentDepth = 0;
+}
+function exportTimelineAsJSON() {
+  return JSON.stringify({
+    events: timelineEvents,
+    exportedAt: Date.now()
+  }, null, 2);
+}
+function serializeTimelineEvents() {
+  if (timelineEvents.length === 0) {
+    return "\u6682\u65E0\u65F6\u5E8F\u4E8B\u4EF6\u6570\u636E";
+  }
+  let result = `\u{1F4CA} \u65F6\u5E8F\u4E8B\u4EF6 (${timelineEvents.length} \u4E2A)
+
+`;
+  timelineEvents.slice(-20).forEach((event) => {
+    const indent = "  ".repeat(event.depth);
+    const duration = event.duration.toFixed(2);
+    result += `${indent}\u251C\u2500 ${event.name} [${event.category}] ${duration}ms
+`;
+  });
+  return result;
+}
 
 // src/benchmark.ts
 var LARGE_SCALE_SCENARIOS = [
@@ -1212,7 +1706,7 @@ var DevTools = class {
         this.toggle();
       }
     });
-    console.log("[LytJS DevTools] Initialized. Press Ctrl+Shift+D to toggle.");
+    console.warn("[LytJS DevTools] Initialized. Press Ctrl+Shift+D to toggle.");
   }
   /**
    * 创建 DevTools 面板
@@ -1300,6 +1794,15 @@ var DevTools = class {
         cursor: pointer;
         border-bottom: 2px solid transparent;
       ">Signals</button>
+      <button class="lytjs-devtools-tab" data-tab="vdom" style="
+        flex: 1;
+        padding: 10px;
+        background: transparent;
+        border: none;
+        color: #d4d4d4;
+        cursor: pointer;
+        border-bottom: 2px solid transparent;
+      ">VDOM</button>
       <button class="lytjs-devtools-tab" data-tab="performance" style="
         flex: 1;
         padding: 10px;
@@ -1356,6 +1859,9 @@ var DevTools = class {
       case "signals":
         content.innerHTML = this.renderSignalsTab();
         break;
+      case "vdom":
+        content.innerHTML = this.renderVDOMTab();
+        break;
       case "performance":
         content.innerHTML = this.renderPerformanceTab();
         break;
@@ -1390,7 +1896,7 @@ var DevTools = class {
    */
   renderSignalsTab() {
     const nodes = getSignalNodes();
-    let html = `
+    const html = `
       <div style="margin-bottom: 15px;">
         <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
           <strong>\u{1F4CA} Signals (${nodes.length})</strong>
@@ -1495,6 +2001,97 @@ var DevTools = class {
     html += "</div>";
     return html;
   }
+  /**
+   * 渲染 VDOM 标签页
+   */
+  renderVDOMTab() {
+    const roots = getVDOMTree();
+    const stats = getVDOMStats();
+    if (roots.length === 0) {
+      return `
+        <div style="color: #666; text-align: center; padding: 40px;">
+          <div style="font-size: 48px; margin-bottom: 15px;">\u{1F333}</div>
+          <div>No VDOM roots registered.</div>
+          <div style="font-size: 11px; margin-top: 10px; color: #555;">
+            Use registerVDOMRoot() to register your VDOM roots.
+          </div>
+        </div>
+      `;
+    }
+    const html = `
+      <div style="margin-bottom: 15px;">
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
+          <strong>\u{1F333} VDOM Tree</strong>
+          <button id="lytjs-devtools-clear-vdom" style="
+            background: #ff4d4f;
+            border: none;
+            color: white;
+            padding: 5px 10px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 11px;
+          ">\u6E05\u7A7A</button>
+        </div>
+        
+        <div style="background: #252526; border-radius: 4px; padding: 15px; margin-bottom: 15px;">
+          <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center;">
+            <div>
+              <div style="color: #888; font-size: 11px;">\u603B\u8282\u70B9\u6570</div>
+              <div style="font-size: 20px; font-weight: bold; color: #4fc08d;">${stats.totalNodes}</div>
+            </div>
+            <div>
+              <div style="color: #888; font-size: 11px;">\u7EC4\u4EF6\u6570</div>
+              <div style="font-size: 20px; font-weight: bold; color: #1890ff;">${stats.componentCount}</div>
+            </div>
+            <div>
+              <div style="color: #888; font-size: 11px;">\u5143\u7D20\u6570</div>
+              <div style="font-size: 20px; font-weight: bold; color: #faad14;">${stats.elementCount}</div>
+            </div>
+          </div>
+          <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; margin-top: 10px;">
+            <div>
+              <div style="color: #888; font-size: 11px;">\u6587\u672C\u8282\u70B9</div>
+              <div style="font-size: 16px; font-weight: bold; color: #888;">${stats.textCount}</div>
+            </div>
+            <div>
+              <div style="color: #888; font-size: 11px;">\u6839\u8282\u70B9</div>
+              <div style="font-size: 16px; font-weight: bold; color: #888;">${stats.rootCount}</div>
+            </div>
+            <div>
+              <div style="color: #888; font-size: 11px;">\u6700\u5927\u6DF1\u5EA6</div>
+              <div style="font-size: 16px; font-weight: bold; color: #888;">${stats.maxDepth}</div>
+            </div>
+          </div>
+        </div>
+        
+        <div style="margin-bottom: 10px;">
+          <input id="lytjs-devtools-vdom-search" type="text" placeholder="\u641C\u7D22\u6807\u7B7E\u540D..." style="
+            width: 100%;
+            padding: 8px;
+            background: #252526;
+            border: 1px solid #3d3d3d;
+            border-radius: 4px;
+            color: #d4d4d4;
+            font-size: 12px;
+          " />
+        </div>
+        
+        <div id="lytjs-devtools-vdom-tree" style="
+          background: #252526;
+          border-radius: 4px;
+          padding: 15px;
+          max-height: 400px;
+          overflow: auto;
+          font-family: 'Consolas', 'Monaco', monospace;
+          font-size: 11px;
+          line-height: 1.6;
+        ">
+          <pre style="margin: 0; white-space: pre-wrap; word-break: break-all;">${serializeVDOMTree()}</pre>
+        </div>
+      </div>
+    `;
+    return html;
+  }
   /**
    * 渲染 Performance 标签页
    */
@@ -1671,6 +2268,7 @@ exports.LARGE_SCALE_SCENARIOS = LARGE_SCALE_SCENARIOS;
 exports.acknowledgeAlert = acknowledgeAlert;
 exports.acknowledgeAllAlerts = acknowledgeAllAlerts;
 exports.addObserver = addObserver;
+exports.beginTimelineEvent = beginTimelineEvent;
 exports.clearAlerts = clearAlerts;
 exports.clearBenchmarkResults = clearBenchmarkResults;
 exports.clearMetrics = clearMetrics;
@@ -1679,12 +2277,17 @@ exports.clearRouteHistory = clearRouteHistory;
 exports.clearSignalRegistry = clearSignalRegistry;
 exports.clearSnapshots = clearSnapshots;
 exports.clearStoreRegistry = clearStoreRegistry;
+exports.clearTimelineEvents = clearTimelineEvents;
 exports.compareBenchmarkResults = compareBenchmarkResults;
+exports.compareSnapshots = compareSnapshots;
 exports.createLargeScaleBenchmark = createLargeScaleBenchmark;
 exports.createRegressionDetector = createRegressionDetector;
 exports.createSnapshot = createSnapshot;
 exports.default = installDevTools;
 exports.dispatchStoreAction = dispatchStoreAction;
+exports.endTimelineEvent = endTimelineEvent;
+exports.exportTimelineAsJSON = exportTimelineAsJSON;
+exports.filterSignals = filterSignals;
 exports.getAlertRules = getAlertRules;
 exports.getAlerts = getAlerts;
 exports.getBenchmarkResults = getBenchmarkResults;
@@ -1692,6 +2295,8 @@ exports.getComponentTree = getComponentTree;
 exports.getCurrentRoute = getCurrentRoute;
 exports.getDependencyGraph = getDependencyGraph;
 exports.getDevTools = getDevTools;
+exports.getDiffBetweenSnapshots = getDiffBetweenSnapshots;
+exports.getFlameGraphData = getFlameGraphData;
 exports.getLatestBenchmarkResult = getLatestBenchmarkResult;
 exports.getMemoryUsage = getMemoryUsage;
 exports.getMetrics = getMetrics;
@@ -1703,11 +2308,17 @@ exports.getRouteHistory = getRouteHistory;
 exports.getRoutes = getRoutes;
 exports.getSignalNode = getSignalNode;
 exports.getSignalNodes = getSignalNodes;
+exports.getSlowOperations = getSlowOperations;
 exports.getSnapshots = getSnapshots;
 exports.getStats = getStats;
 exports.getStoreState = getStoreState;
 exports.getStoreStates = getStoreStates;
+exports.getSubgraph = getSubgraph;
+exports.getTimeTravelNavigator = getTimeTravelNavigator;
 exports.getTimeTravelState = getTimeTravelState;
+exports.getTimelineEvents = getTimelineEvents;
+exports.getTimelineEventsInRange = getTimelineEventsInRange;
+exports.getVisualLayoutGraph = getVisualLayoutGraph;
 exports.goBack = goBack;
 exports.initPerformanceMonitor = initPerformanceMonitor;
 exports.installDevTools = installDevTools;
@@ -1728,6 +2339,7 @@ exports.resetPerformanceMonitor = resetPerformanceMonitor;
 exports.restoreSnapshot = restoreSnapshot;
 exports.runAsyncBenchmark = runAsyncBenchmark;
 exports.runBenchmark = runBenchmark;
+exports.searchSignals = searchSignals;
 exports.serializeAllBenchmarkResults = serializeAllBenchmarkResults;
 exports.serializeBenchmarkResult = serializeBenchmarkResult;
 exports.serializeComponentTree = serializeComponentTree;
@@ -1737,11 +2349,15 @@ exports.serializePerformanceReport = serializePerformanceReport;
 exports.serializePerformanceStats = serializePerformanceStats;
 exports.serializeRouteInfo = serializeRouteInfo;
 exports.serializeSignalNode = serializeSignalNode;
+exports.serializeSnapshotDiff = serializeSnapshotDiff;
 exports.serializeStoreStates = serializeStoreStates;
+exports.serializeTimelineEvents = serializeTimelineEvents;
 exports.setAlertRuleEnabled = setAlertRuleEnabled;
 exports.setStoreState = setStoreState;
 exports.startTimer = startTimer;
 exports.subscribeStore = subscribeStore;
+exports.timeTravelBack = timeTravelBack;
+exports.timeTravelForward = timeTravelForward;
 exports.uninstallDevTools = uninstallDevTools;
 exports.unregisterAlertRule = unregisterAlertRule;
 exports.unregisterRootComponent = unregisterRootComponent;