@lytjs/devtools 6.4.0 → 6.6.0

package/dist/index.mjs

@@ -32,7 +32,10 @@ function buildComponentTreeRecursive(component, parentId) {
   if (component.children && Array.isArray(component.children)) {
     const children = [];
     for (const child of component.children) {
-      const childNode = buildComponentTreeRecursive(child, node.id);
+      const childNode = buildComponentTreeRecursive(
+        child,
+        node.id
+      );
       if (childNode) {
         children.push(childNode);
       }
@@ -130,16 +133,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 (!isObject(current[key])) {
-      return false;
-    }
+    if (!isObject(current)) return false;
     current = current[key];
   }
   const lastKey = keys[keys.length - 1];
-  if (lastKey) {
+  if (lastKey && isObject(current)) {
     current[lastKey] = value;
   }
   return true;
@@ -182,7 +183,7 @@ function subscribeStore(storeId) {
     unsubscribeStore(storeId);
   }
   if (isFunction(store.$subscribe)) {
-    const unsubscribe = store.$subscribe((_mutation, state) => {
+    const unsubscribe = store.$subscribe?.((_mutation, state) => {
       const currentState = isObject(state) ? deepClone(state) : {};
       globalChangeCallbacks.forEach((cb) => cb(storeId, currentState));
     });
@@ -249,7 +250,7 @@ function watchRouteChanges() {
   if (afterEachHandler !== null) {
     unwatchRouteChanges();
   }
-  routerInstance.afterEach((to) => {
+  routerInstance.afterEach?.((to) => {
     const routeInfo = {
       path: to.path || "/",
       name: to.name || null,
@@ -283,7 +284,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) {
@@ -329,6 +331,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: [],
@@ -484,6 +494,9 @@ function createSnapshot(label) {
 function getSnapshots() {
   return snapshotManager.getAll();
 }
+function getSnapshot(index) {
+  return snapshotManager.get(index);
+}
 function getTimeTravelState() {
   const length = snapshotManager.getLength();
   return {
@@ -637,6 +650,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 = {
@@ -881,7 +1240,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;"
@@ -968,6 +1327,151 @@ 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 = [
@@ -1208,7 +1712,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 面板
@@ -1296,6 +1800,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;
@@ -1352,6 +1865,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;
@@ -1386,7 +1902,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>
@@ -1491,6 +2007,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 标签页
    */
@@ -1663,6 +2270,6 @@ function uninstallDevTools() {
   }
 }
 
-export { LARGE_SCALE_SCENARIOS, acknowledgeAlert, acknowledgeAllAlerts, addObserver, clearAlerts, clearBenchmarkResults, clearMetrics, clearPerformanceRecords, clearRouteHistory, clearSignalRegistry, clearSnapshots, clearStoreRegistry, compareBenchmarkResults, createLargeScaleBenchmark, createRegressionDetector, createSnapshot, installDevTools as default, dispatchStoreAction, getAlertRules, getAlerts, getBenchmarkResults, getComponentTree, getCurrentRoute, getDependencyGraph, getDevTools, getLatestBenchmarkResult, getMemoryUsage, getMetrics, getPerformanceRecords, getPerformanceReport, getPerformanceStats, getRegisteredStoreIds, getRouteHistory, getRoutes, getSignalNode, getSignalNodes, getSnapshots, getStats, getStoreState, getStoreStates, getTimeTravelState, goBack, initPerformanceMonitor, installDevTools, isRouterRegistered, navigateTo, navigateToName, onStoreChange, recordDependency, recordMetric, recordSignalUpdate, registerAlertRule, registerRootComponent, registerRouter, registerSignal, registerStore, removeObserver, resetPerformanceMonitor, restoreSnapshot, runAsyncBenchmark, runBenchmark, serializeAllBenchmarkResults, serializeBenchmarkResult, serializeComponentTree, serializeDependencyGraph, serializeMemoryUsage, serializePerformanceReport, serializePerformanceStats, serializeRouteInfo, serializeSignalNode, serializeStoreStates, setAlertRuleEnabled, setStoreState, startTimer, subscribeStore, uninstallDevTools, unregisterAlertRule, unregisterRootComponent, unregisterRouter, unregisterSignal, unregisterStore, unsubscribeStore, unwatchRouteChanges, watchRouteChanges };
+export { LARGE_SCALE_SCENARIOS, acknowledgeAlert, acknowledgeAllAlerts, addObserver, beginTimelineEvent, clearAlerts, clearBenchmarkResults, clearMetrics, clearPerformanceRecords, clearRouteHistory, clearSignalRegistry, clearSnapshots, clearStoreRegistry, clearTimelineEvents, compareBenchmarkResults, compareSnapshots, createLargeScaleBenchmark, createRegressionDetector, createSnapshot, installDevTools as default, dispatchStoreAction, endTimelineEvent, exportTimelineAsJSON, filterSignals, getAlertRules, getAlerts, getBenchmarkResults, getComponentTree, getCurrentRoute, getDependencyGraph, getDevTools, getDiffBetweenSnapshots, getFlameGraphData, getLatestBenchmarkResult, getMemoryUsage, getMetrics, getPerformanceRecords, getPerformanceReport, getPerformanceStats, getRegisteredStoreIds, getRouteHistory, getRoutes, getSignalNode, getSignalNodes, getSlowOperations, getSnapshots, getStats, getStoreState, getStoreStates, getSubgraph, getTimeTravelNavigator, getTimeTravelState, getTimelineEvents, getTimelineEventsInRange, getVisualLayoutGraph, goBack, initPerformanceMonitor, installDevTools, isRouterRegistered, navigateTo, navigateToName, onStoreChange, recordDependency, recordMetric, recordSignalUpdate, registerAlertRule, registerRootComponent, registerRouter, registerSignal, registerStore, removeObserver, resetPerformanceMonitor, restoreSnapshot, runAsyncBenchmark, runBenchmark, searchSignals, serializeAllBenchmarkResults, serializeBenchmarkResult, serializeComponentTree, serializeDependencyGraph, serializeMemoryUsage, serializePerformanceReport, serializePerformanceStats, serializeRouteInfo, serializeSignalNode, serializeSnapshotDiff, serializeStoreStates, serializeTimelineEvents, setAlertRuleEnabled, setStoreState, startTimer, subscribeStore, timeTravelBack, timeTravelForward, uninstallDevTools, unregisterAlertRule, unregisterRootComponent, unregisterRouter, unregisterSignal, unregisterStore, unsubscribeStore, unwatchRouteChanges, watchRouteChanges };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map