@proteus-vue/devtools 0.1.0

package/dist/index.js

@@ -0,0 +1,3323 @@
+// src/panel.ts
+import {
+  createTimelineCollector,
+  createFlamegraphCollector,
+  createErrorDiagnoser
+} from "@proteus-vue/devtools-runtime";
+
+// src/tooltip.ts
+var TIP_DATA = /* @__PURE__ */ Symbol("pdTip");
+function attachTip(el, data) {
+  el.dataset.tip = "";
+  el[TIP_DATA] = data;
+}
+function resolveTipData(target) {
+  return target[TIP_DATA] ?? null;
+}
+function createTooltipLayer() {
+  const tip = document.createElement("div");
+  tip.className = "pd-tooltip";
+  tip.style.display = "none";
+  tip.style.position = "fixed";
+  tip.style.zIndex = "1000";
+  tip.style.pointerEvents = "none";
+  document.body.appendChild(tip);
+  let visible = false;
+  let hideTimer = null;
+  return {
+    show(data, x, y) {
+      if (hideTimer) {
+        clearTimeout(hideTimer);
+        hideTimer = null;
+      }
+      tip.replaceChildren();
+      const title = document.createElement("div");
+      title.className = "pd-tooltip-title";
+      title.textContent = data.title;
+      tip.appendChild(title);
+      for (const line of data.lines) {
+        const row = document.createElement("div");
+        row.className = "pd-tooltip-line";
+        row.textContent = line;
+        tip.appendChild(row);
+      }
+      tip.style.display = "block";
+      const rect = tip.getBoundingClientRect();
+      let left = x + 12;
+      let top = y + 12;
+      if (left + rect.width > window.innerWidth) left = x - rect.width - 12;
+      if (top + rect.height > window.innerHeight) top = y - rect.height - 12;
+      tip.style.left = left + "px";
+      tip.style.top = top + "px";
+      visible = true;
+    },
+    hide() {
+      if (hideTimer) clearTimeout(hideTimer);
+      tip.style.display = "none";
+      visible = false;
+    },
+    dispose() {
+      if (hideTimer) clearTimeout(hideTimer);
+      tip.remove();
+      visible = false;
+    },
+    get visible() {
+      return visible;
+    }
+  };
+}
+function bindTooltip(root, layer, resolve) {
+  let hoverTimer = null;
+  let current = null;
+  function onOver(e) {
+    const target = e.target.closest("[data-tip]");
+    if (!target) {
+      layer.hide();
+      return;
+    }
+    current = target;
+    if (hoverTimer) clearTimeout(hoverTimer);
+    hoverTimer = setTimeout(() => {
+      if (current !== target) return;
+      const data = resolve(target);
+      if (data) layer.show(data, e.clientX, e.clientY);
+    }, 150);
+  }
+  function onMove(e) {
+    if (!current || !layer.visible) return;
+    layer.show(resolve(current) ?? { title: "", lines: [] }, e.clientX, e.clientY);
+  }
+  function onOut() {
+    current = null;
+    if (hoverTimer) clearTimeout(hoverTimer);
+    layer.hide();
+  }
+  root.addEventListener("mouseover", onOver);
+  root.addEventListener("mousemove", onMove);
+  root.addEventListener("mouseout", onOut);
+  return () => {
+    root.removeEventListener("mouseover", onOver);
+    root.removeEventListener("mousemove", onMove);
+    root.removeEventListener("mouseout", onOut);
+    layer.hide();
+  };
+}
+
+// src/views/timeline.ts
+var LANE_H = 26;
+var OVERSCAN = 2;
+function renderTimeline(container, data) {
+  container.replaceChildren();
+  const spans = data.spans;
+  if (spans.length === 0) {
+    const empty = document.createElement("div");
+    empty.className = "pd-empty";
+    empty.textContent = "\u6682\u65E0\u4E8B\u4EF6\uFF08TraceBus \u672A\u4E0A\u62A5\uFF09";
+    container.appendChild(empty);
+    return;
+  }
+  let winStart = data.window?.start ?? Infinity;
+  let winEnd = data.window?.end ?? -Infinity;
+  if (!data.window) {
+    for (const s of spans) {
+      if (s.start < winStart) winStart = s.start;
+      const end = s.end !== void 0 ? s.end : s.start;
+      if (end > winEnd) winEnd = end;
+    }
+  }
+  const total = Math.max(1, winEnd - winStart);
+  const visible = data.window ? spans.filter((s) => {
+    const end = s.end !== void 0 ? s.end : s.start;
+    return end >= winStart && s.start <= winEnd;
+  }) : spans;
+  const ruler = document.createElement("div");
+  ruler.className = "pd-ruler";
+  for (let i = 0; i <= 4; i++) {
+    const mark = document.createElement("span");
+    mark.style.width = "25%";
+    mark.textContent = Math.round(winStart + total * i / 4) + "ms";
+    ruler.appendChild(mark);
+  }
+  container.appendChild(ruler);
+  const lanes = /* @__PURE__ */ new Map();
+  for (const s of visible) {
+    const list = lanes.get(s.source);
+    if (list) list.push(s);
+    else lanes.set(s.source, [s]);
+  }
+  const laneList = Array.from(lanes);
+  if (data.virtual) {
+    const scrollTop = Math.max(0, data.virtual.scrollTop);
+    const viewHeight = Math.max(1, data.virtual.viewHeight);
+    container.style.overflowY = "auto";
+    const spacer = document.createElement("div");
+    spacer.className = "pd-timeline-spacer";
+    spacer.style.height = laneList.length * LANE_H + "px";
+    const startIdx = Math.max(0, Math.floor((scrollTop - OVERSCAN * LANE_H) / LANE_H));
+    const endIdx = Math.min(laneList.length, Math.ceil((scrollTop + viewHeight + OVERSCAN * LANE_H) / LANE_H));
+    for (let i = startIdx; i < endIdx; i++) {
+      const entry = laneList[i];
+      const lane = buildLane(entry[0], entry[1], winStart, total);
+      lane.style.position = "absolute";
+      lane.style.top = i * LANE_H + "px";
+      lane.style.left = "0";
+      lane.style.right = "0";
+      lane.style.height = LANE_H + "px";
+      lane.style.margin = "0";
+      spacer.appendChild(lane);
+    }
+    container.appendChild(spacer);
+    return;
+  }
+  for (const entry of laneList) {
+    container.appendChild(buildLane(entry[0], entry[1], winStart, total));
+  }
+}
+function buildLane(source, laneSpans, winStart, total) {
+  const lane = document.createElement("div");
+  lane.className = "pd-lane";
+  const label = document.createElement("div");
+  label.className = "pd-lane-label";
+  label.textContent = source;
+  lane.appendChild(label);
+  const track = document.createElement("div");
+  track.className = "pd-lane-track";
+  for (const s of laneSpans) {
+    const seg = document.createElement("div");
+    const left = (s.start - winStart) / total * 100;
+    const end = s.end !== void 0 ? s.end : s.start;
+    const width = Math.max(0.5, (end - s.start) / total * 100);
+    seg.className = "pd-span" + (s.pending ? " pd-span-pending" : "") + (s.durationMs === 0 ? " pd-span-dot" : "");
+    seg.style.left = left.toFixed(2) + "%";
+    seg.style.width = width.toFixed(2) + "%";
+    attachTip(seg, {
+      title: `${s.source}.${s.name}`,
+      lines: [s.durationMs !== void 0 ? `\u8017\u65F6 ${s.durationMs}ms` : "\u77AC\u65F6\u4E8B\u4EF6", s.pending ? "\u9636\u6BB5: pending\uFF08\u8FDB\u884C\u4E2D\uFF09" : "\u9636\u6BB5: completed"]
+    });
+    const text = document.createElement("span");
+    text.textContent = s.name + (s.durationMs !== void 0 ? " " + s.durationMs + "ms" : "");
+    seg.appendChild(text);
+    track.appendChild(seg);
+  }
+  lane.appendChild(track);
+  return lane;
+}
+
+// src/views/timeline-interaction.ts
+var ZOOM_STEP = 1.2;
+var MIN_SPAN = 1;
+function fullWindow(spans) {
+  let start = Infinity;
+  let end = -Infinity;
+  for (const s of spans) {
+    if (s.start < start) start = s.start;
+    const e = s.end !== void 0 ? s.end : s.start;
+    if (e > end) end = e;
+  }
+  return { start, end };
+}
+function createTimelineZoom(container, getSpans, opts = {}) {
+  const { onWindowChange } = opts;
+  let window2 = null;
+  let dragging = false;
+  let dragStartX = 0;
+  let dragStartWindow = null;
+  function apply(w) {
+    window2 = w;
+    onWindowChange?.(w);
+  }
+  function clamp(w) {
+    const full = fullWindow(getSpans());
+    const maxSpan = Math.max(1, full.end - full.start);
+    const span = Math.min(maxSpan, Math.max(MIN_SPAN, w.end - w.start));
+    let start = w.start;
+    if (start < full.start) start = full.start;
+    if (start + span > full.end) start = Math.max(full.start, full.end - span);
+    return { start, end: start + span };
+  }
+  function onWheel(e) {
+    e.preventDefault();
+    if (!window2) window2 = fullWindow(getSpans());
+    const span = window2.end - window2.start;
+    if (span <= 0) return;
+    const rect = container.getBoundingClientRect();
+    const width = Math.max(1, rect.width);
+    const cx = Number.isFinite(e.clientX) ? e.clientX : rect.left + width / 2;
+    const f = Math.min(1, Math.max(0, (cx - rect.left) / width));
+    const cursorTime = window2.start + f * span;
+    const factor = e.deltaY < 0 ? 1 / ZOOM_STEP : ZOOM_STEP;
+    const newSpan = span * factor;
+    const start = cursorTime - f * newSpan;
+    apply(clamp({ start, end: start + newSpan }));
+  }
+  function onDown(e) {
+    if (e.button !== 0) return;
+    if (!window2) window2 = fullWindow(getSpans());
+    dragging = true;
+    dragStartX = e.clientX;
+    dragStartWindow = { ...window2 };
+    e.preventDefault();
+  }
+  function onMove(e) {
+    if (!dragging || !dragStartWindow) return;
+    const span = dragStartWindow.end - dragStartWindow.start;
+    if (span <= 0) return;
+    const rect = container.getBoundingClientRect();
+    const dt = (e.clientX - dragStartX) / Math.max(1, rect.width) * span;
+    apply(clamp({ start: dragStartWindow.start - dt, end: dragStartWindow.end - dt }));
+  }
+  function onUp() {
+    dragging = false;
+    dragStartWindow = null;
+  }
+  function onDblClick() {
+    apply(fullWindow(getSpans()));
+  }
+  container.addEventListener("wheel", onWheel, { passive: false });
+  container.addEventListener("mousedown", onDown);
+  container.addEventListener("mousemove", onMove);
+  container.addEventListener("mouseup", onUp);
+  container.addEventListener("dblclick", onDblClick);
+  return {
+    getWindow: () => window2,
+    destroy() {
+      container.removeEventListener("wheel", onWheel);
+      container.removeEventListener("mousedown", onDown);
+      container.removeEventListener("mousemove", onMove);
+      container.removeEventListener("mouseup", onUp);
+      container.removeEventListener("dblclick", onDblClick);
+      dragging = false;
+      dragStartWindow = null;
+      window2 = null;
+    }
+  };
+}
+
+// src/views/flamegraph.ts
+var ROW_HEIGHT = 22;
+var SRC_COLORS = {
+  lifecycle: "#3e5770",
+  router: "#2e7d5b",
+  api: "#1d6fb8",
+  store: "#8a5a17",
+  compiler: "#6a3d9a",
+  capability: "#0e7c86",
+  component: "#9a3d52",
+  hmr: "#3d9a6a",
+  // ★合成「录制会话」根（视图层包装，不落数据/对比）：中性灰
+  session: "#6b7280"
+};
+function srcColor(source) {
+  return SRC_COLORS[source] ?? "#555";
+}
+function pct(v) {
+  return Math.min(100, v).toFixed(2) + "%";
+}
+function clampPct(v) {
+  return Math.max(0.4, Math.min(100, v)).toFixed(2) + "%";
+}
+function compareMap(compare) {
+  const m = /* @__PURE__ */ new Map();
+  for (const c of compare) m.set(c.source + "\0" + c.name, c);
+  return m;
+}
+function renderFlamegraph(container, data, hooks = {}) {
+  container.replaceChildren();
+  const roots = data.focus ? [data.focus] : data.nodes;
+  if (roots.length === 0) {
+    const empty = document.createElement("div");
+    empty.className = "pd-empty";
+    empty.textContent = '\u6682\u65E0\u5F55\u5236\uFF08\u9762\u677F\u53F3\u4E0A\u89D2"\u5F00\u59CB\u5F55\u5236"\u540E\u4EA7\u751F\uFF09';
+    container.appendChild(empty);
+    return;
+  }
+  const cmp = data.compare ? compareMap(data.compare) : null;
+  const regs = data.compare ? data.compare.filter((c) => c.verdict === "regression") : [];
+  const imps = data.compare ? data.compare.filter((c) => c.verdict === "improvement") : [];
+  if (data.compare && data.compare.length > 0) {
+    const summary = document.createElement("div");
+    summary.className = "pd-cmp";
+    const head = document.createElement("div");
+    head.className = "pd-cmp-head";
+    head.textContent = `\u5BF9\u6BD4\u4E0A\u6B21\u5F55\u5236\uFF1A${regs.length} \u5904\u56DE\u5F52 \xB7 ${imps.length} \u5904\u4F18\u5316`;
+    summary.appendChild(head);
+    const sorted = data.compare.slice().sort((a, b) => Math.abs(b.deltaPct) - Math.abs(a.deltaPct)).slice(0, 8);
+    for (const c of sorted) {
+      const row = document.createElement("div");
+      row.className = "pd-cmp-row pd-cmp-" + c.verdict;
+      const name = document.createElement("span");
+      name.className = "pd-cmp-name";
+      name.textContent = c.source + "." + c.name;
+      const delta = document.createElement("span");
+      delta.className = "pd-cmp-delta";
+      delta.textContent = (c.deltaPct > 0 ? "+" : "") + c.deltaPct + "% (" + c.aMs + "\u2192" + c.bMs + "ms)";
+      row.appendChild(name);
+      row.appendChild(delta);
+      attachTip(row, {
+        title: `${c.source}.${c.name}`,
+        lines: [`\u4E0A\u6B21 ${c.aMs}ms \u2192 \u672C\u6B21 ${c.bMs}ms`, `\u53D8\u5316 ${(c.deltaPct > 0 ? "+" : "") + c.deltaPct}%`]
+      });
+      summary.appendChild(row);
+    }
+    container.appendChild(summary);
+  }
+  if (data.breadcrumb && data.breadcrumb.length > 0) {
+    const crumb = document.createElement("div");
+    crumb.className = "pd-fg-crumb";
+    for (const c of data.breadcrumb) {
+      const item = document.createElement("button");
+      item.className = "pd-fg-crumb-item";
+      item.textContent = c.name;
+      item.addEventListener("click", () => hooks.onFocus?.(c.id));
+      crumb.appendChild(item);
+    }
+    const up = document.createElement("button");
+    up.className = "pd-btn pd-fg-up";
+    up.textContent = "\u8FD4\u56DE\u4E0A\u7EA7";
+    up.addEventListener("click", () => hooks.onFocusUp?.());
+    crumb.appendChild(up);
+    container.appendChild(crumb);
+  }
+  let winStart = Infinity;
+  let winEnd = -Infinity;
+  for (const n of roots) {
+    if (n.startMs < winStart) winStart = n.startMs;
+    const end = n.startMs + n.durationMs;
+    if (end > winEnd) winEnd = end;
+  }
+  const total = Math.max(1, winEnd - winStart);
+  let renderRoots = roots;
+  if (!data.focus && roots.length >= 2) {
+    let childTotal = 0;
+    for (const r of roots) childTotal += r.durationMs;
+    renderRoots = [
+      {
+        id: "__session__",
+        source: "session",
+        name: "\u5F55\u5236\u4F1A\u8BDD",
+        startMs: winStart,
+        durationMs: total,
+        selfMs: Math.max(0, total - childTotal),
+        children: roots,
+        depth: 0
+      }
+    ];
+  }
+  const board = document.createElement("div");
+  board.className = "pd-fg-board";
+  let maxDepth = 0;
+  const depthOf = (n, d) => {
+    let m = d;
+    for (const c of n.children) m = Math.max(m, depthOf(c, d + 1));
+    return m;
+  };
+  for (const n of renderRoots) maxDepth = Math.max(maxDepth, depthOf(n, 0));
+  board.style.height = (maxDepth + 1) * ROW_HEIGHT + "px";
+  function renderNode(box, node, depth, relStart, relDur, isRoot) {
+    const leftPct = isRoot ? (node.startMs - winStart) / total * 100 : (node.startMs - relStart) / relDur * 100;
+    const widthPct = isRoot ? node.durationMs / total * 100 : node.durationMs / relDur * 100;
+    const block = document.createElement("div");
+    const isSession = node.id === "__session__";
+    block.className = "pd-fg-node" + (node.selfMs === 0 ? " pd-fg-zero" : "") + (isSession ? " pd-fg-session" : "");
+    block.style.background = srcColor(node.source);
+    const entry = cmp ? cmp.get(node.source + "\0" + node.name) : void 0;
+    if (entry && entry.verdict !== "same") block.classList.add(entry.verdict === "regression" ? "pd-fg-reg" : "pd-fg-imp");
+    block.style.left = pct(leftPct);
+    block.style.width = clampPct(widthPct);
+    block.style.top = "0px";
+    block.style.height = ROW_HEIGHT - 2 + "px";
+    const tipLines = [`inclusive ${node.durationMs}ms`, `exclusive ${node.selfMs}ms`];
+    if (entry && entry.verdict !== "same") tipLines.push(`\u5BF9\u6BD4 ${(entry.deltaPct > 0 ? "+" : "") + entry.deltaPct}%`);
+    attachTip(block, {
+      title: `${node.source}.${node.name}`,
+      lines: tipLines
+    });
+    const label = document.createElement("span");
+    label.textContent = node.name + " " + node.selfMs + "ms";
+    block.appendChild(label);
+    if (!isSession) block.addEventListener("click", () => hooks.onFocus?.(node.id));
+    box.appendChild(block);
+    let subDepth = 0;
+    if (node.children.length) {
+      const sub = document.createElement("div");
+      sub.className = "pd-fg-children";
+      sub.style.left = pct(leftPct);
+      sub.style.width = clampPct(widthPct);
+      sub.style.top = ROW_HEIGHT + "px";
+      let maxChildDepth = 0;
+      for (const c of node.children) maxChildDepth = Math.max(maxChildDepth, renderNode(sub, c, depth + 1, node.startMs, node.durationMs, false));
+      sub.style.height = maxChildDepth * ROW_HEIGHT + "px";
+      box.appendChild(sub);
+      subDepth = maxChildDepth;
+    }
+    return subDepth + 1;
+  }
+  for (const r of renderRoots) renderNode(board, r, 0, winStart, total, true);
+  container.appendChild(board);
+}
+
+// src/views/inspector.ts
+function editInitial(value, kind) {
+  if (kind === "string") return String(value);
+  if (kind === "null") return value === void 0 ? "undefined" : "null";
+  return String(value);
+}
+function parseEdit(text, kind) {
+  if (kind === "number") {
+    const n = Number(text.trim());
+    if (!Number.isFinite(n)) return { ok: false };
+    return { ok: true, value: n };
+  }
+  if (kind === "boolean") {
+    if (text.trim() === "true") return { ok: true, value: true };
+    if (text.trim() === "false") return { ok: true, value: false };
+    return { ok: false };
+  }
+  if (kind === "string") return { ok: true, value: text };
+  const t = text.trim();
+  if (t === "" || t === "null") return { ok: true, value: null };
+  if (t === "undefined") return { ok: true, value: void 0 };
+  if (t === "true") return { ok: true, value: true };
+  if (t === "false") return { ok: true, value: false };
+  if (/^-?\d+(\.\d+)?$/.test(t)) return { ok: true, value: Number(t) };
+  return { ok: true, value: text };
+}
+function startEdit(valEl, value, kind, path, hooks) {
+  const input = document.createElement("input");
+  input.className = "pd-kv-edit";
+  input.value = editInitial(value, kind);
+  valEl.replaceWith(input);
+  input.focus();
+  let done = false;
+  const finish = (commit) => {
+    if (done) return;
+    done = true;
+    if (commit) {
+      const parsed = parseEdit(input.value, kind);
+      if (parsed.ok) {
+        const nk = kindOf(parsed.value);
+        valEl.textContent = formatPrimitive(parsed.value, nk);
+        valEl.className = "pd-kv-value pd-t-" + nk;
+        input.replaceWith(valEl);
+        hooks.onEdit?.(path, parsed.value);
+      } else {
+        input.replaceWith(valEl);
+      }
+      return;
+    }
+    input.replaceWith(valEl);
+  };
+  input.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") finish(true);
+    else if (e.key === "Escape") finish(false);
+  });
+  input.addEventListener("blur", () => finish(true));
+}
+function kindOf(value) {
+  if (value === null || value === void 0) return "null";
+  const t = typeof value;
+  if (t === "number") return "number";
+  if (t === "string") return "string";
+  if (t === "boolean") return "boolean";
+  if (Array.isArray(value)) return "array";
+  return "object";
+}
+function summarize(value) {
+  const k = kindOf(value);
+  if (k === "array") return "Array(" + value.length + ")";
+  if (k === "object") {
+    const keys = Object.keys(value);
+    return "Object {" + keys.slice(0, 3).join(", ") + (keys.length > 3 ? ", \u2026" : "") + "}";
+  }
+  return formatPrimitive(value, k);
+}
+function formatPrimitive(value, kind) {
+  if (kind === "string") return JSON.stringify(value);
+  if (kind === "null") return value === void 0 ? "undefined" : "null";
+  return String(value);
+}
+function renderKeyValue(container, key, value, depth, initiallyOpen = false, path = [], hooks = {}) {
+  const kind = kindOf(value);
+  const row = document.createElement("div");
+  row.className = "pd-kv";
+  row.style.paddingLeft = 10 + depth * 14 + "px";
+  const toggle = document.createElement("span");
+  toggle.className = "pd-kv-toggle";
+  const keyEl = document.createElement("span");
+  keyEl.className = "pd-kv-key";
+  keyEl.textContent = key;
+  const valEl = document.createElement("span");
+  valEl.className = "pd-kv-value pd-t-" + kind;
+  const collapsible = kind === "object" || kind === "array";
+  toggle.textContent = collapsible ? "\u25B8" : "";
+  if (collapsible) {
+    valEl.textContent = summarize(value);
+    const childBox = document.createElement("div");
+    childBox.style.display = initiallyOpen ? "block" : "none";
+    if (initiallyOpen) toggle.textContent = "\u25BE";
+    let built = false;
+    const build = () => {
+      if (built) return;
+      built = true;
+      const entries = kind === "array" ? value.map((v, i) => [String(i), v]) : Object.entries(value);
+      for (const [k, v] of entries) renderKeyValue(childBox, k, v, depth + 1, false, path.concat(k), hooks);
+    };
+    if (initiallyOpen) build();
+    const expand = () => {
+      const open = childBox.style.display !== "none";
+      childBox.style.display = open ? "none" : "block";
+      toggle.textContent = open ? "\u25B8" : "\u25BE";
+      if (!open) build();
+    };
+    row.addEventListener("click", expand);
+    row.appendChild(toggle);
+    row.appendChild(keyEl);
+    row.appendChild(valEl);
+    container.appendChild(row);
+    container.appendChild(childBox);
+    return;
+  }
+  valEl.textContent = formatPrimitive(value, kind);
+  if (hooks.onEdit) {
+    valEl.classList.add("pd-kv-editable");
+    valEl.addEventListener("click", (e) => {
+      e.stopPropagation();
+      startEdit(valEl, value, kind, path, hooks);
+    });
+  }
+  row.appendChild(toggle);
+  row.appendChild(keyEl);
+  row.appendChild(valEl);
+  container.appendChild(row);
+}
+
+// src/views/state.ts
+function diffLines(before, after) {
+  const keys = /* @__PURE__ */ new Set([...Object.keys(before), ...Object.keys(after)]);
+  const lines = [];
+  for (const k of keys) {
+    const b = before[k];
+    const a = after[k];
+    if (JSON.stringify(b) === JSON.stringify(a)) continue;
+    lines.push(k + ": " + summarize(b) + " \u2192 " + summarize(a));
+  }
+  return lines;
+}
+function renderState(container, data, hooks = {}) {
+  container.replaceChildren();
+  const stores = data.snapshot.stores;
+  const selected = data.selectedStore !== void 0 && stores.some((s) => s.id === data.selectedStore) ? data.selectedStore : stores[0]?.id ?? "";
+  const toolbar = document.createElement("div");
+  toolbar.className = "pd-toolbar";
+  const exportBtn = document.createElement("button");
+  exportBtn.className = "pd-btn";
+  exportBtn.textContent = "\u5BFC\u51FA\u5FEB\u7167 JSON";
+  exportBtn.addEventListener("click", () => hooks.onExport?.());
+  toolbar.appendChild(exportBtn);
+  const importBtn = document.createElement("button");
+  importBtn.className = "pd-btn";
+  importBtn.textContent = "\u5BFC\u5165\u5FEB\u7167 JSON";
+  const fileInput = document.createElement("input");
+  fileInput.type = "file";
+  fileInput.accept = ".json,application/json";
+  fileInput.style.display = "none";
+  importBtn.addEventListener("click", () => fileInput.click());
+  fileInput.addEventListener("change", () => {
+    const f = fileInput.files?.[0];
+    fileInput.value = "";
+    if (!f) return;
+    const reader = new FileReader();
+    reader.onload = () => hooks.onImport?.(String(reader.result ?? ""));
+    reader.readAsText(f);
+  });
+  toolbar.appendChild(importBtn);
+  toolbar.appendChild(fileInput);
+  if (hooks.onExportSession || hooks.onImportSession) {
+    const sessionExportBtn = document.createElement("button");
+    sessionExportBtn.className = "pd-btn";
+    sessionExportBtn.textContent = "\u5BFC\u51FA\u4F1A\u8BDD JSON";
+    sessionExportBtn.title = "\u5BFC\u51FA SessionBundle\uFF08\u53EF\u91CD\u653E\u4E8B\u4EF6\u65E5\u5FD7 + \u8BBE\u5907 + store \u5FEB\u7167\uFF09";
+    sessionExportBtn.addEventListener("click", () => hooks.onExportSession?.());
+    toolbar.appendChild(sessionExportBtn);
+    const sessionImportBtn = document.createElement("button");
+    sessionImportBtn.className = "pd-btn";
+    sessionImportBtn.textContent = "\u5BFC\u5165\u4F1A\u8BDD JSON";
+    sessionImportBtn.title = "\u5BFC\u5165 SessionBundle\uFF08\u6E05\u7A7A\u805A\u5408 \u2192 \u91CD\u653E\u4E8B\u4EF6\u5168\u89C6\u56FE\u91CD\u5EFA \u2192 \u72B6\u6001\u6062\u590D\uFF09";
+    const sessionFileInput = document.createElement("input");
+    sessionFileInput.type = "file";
+    sessionFileInput.accept = ".json,application/json";
+    sessionFileInput.style.display = "none";
+    sessionImportBtn.addEventListener("click", () => sessionFileInput.click());
+    sessionFileInput.addEventListener("change", () => {
+      const f = sessionFileInput.files?.[0];
+      sessionFileInput.value = "";
+      if (!f) return;
+      const reader = new FileReader();
+      reader.onload = () => hooks.onImportSession?.(String(reader.result ?? ""));
+      reader.readAsText(f);
+    });
+    toolbar.appendChild(sessionImportBtn);
+    toolbar.appendChild(sessionFileInput);
+  }
+  const stepInfo = document.createElement("span");
+  stepInfo.textContent = "\u6B65\u9AA4 " + data.steps.length + " \xB7 stores " + stores.length;
+  toolbar.appendChild(stepInfo);
+  container.appendChild(toolbar);
+  if (stores.length) {
+    const picker = document.createElement("div");
+    picker.className = "pd-store-picker";
+    for (const s of stores) {
+      const chip = document.createElement("button");
+      chip.className = "pd-store-chip" + (s.id === selected ? " pd-store-chip-active" : "");
+      chip.textContent = s.id;
+      chip.addEventListener("click", () => hooks.onSelectStore?.(s.id));
+      picker.appendChild(chip);
+    }
+    container.appendChild(picker);
+  }
+  const sel = stores.find((s) => s.id === selected);
+  if (sel) {
+    const card2 = document.createElement("div");
+    card2.className = "pd-store";
+    const head = document.createElement("div");
+    head.className = "pd-store-head";
+    head.textContent = selected + " \xB7 state";
+    card2.appendChild(head);
+    const inspector = document.createElement("div");
+    inspector.className = "pd-inspector";
+    renderKeyValue(inspector, "(root)", sel.state, 0, true, [], hooks.onEditValue ? { onEdit: (path, value) => hooks.onEditValue?.(selected, path, value) } : void 0);
+    card2.appendChild(inspector);
+    container.appendChild(card2);
+    const mine = data.steps.filter((st) => st.storeId === selected);
+    const tl = document.createElement("div");
+    tl.className = "pd-store-timeline";
+    const tlHead = document.createElement("div");
+    tlHead.className = "pd-section-head";
+    tlHead.textContent = "actions / patches\uFF08" + mine.length + "\uFF09";
+    tl.appendChild(tlHead);
+    if (mine.length === 0) {
+      const empty = document.createElement("div");
+      empty.className = "pd-empty";
+      empty.textContent = "\u6682\u65E0\u53D8\u66F4";
+      tl.appendChild(empty);
+    }
+    for (let i = mine.length - 1; i >= 0; i--) {
+      const st = mine[i];
+      const row = document.createElement("div");
+      row.className = "pd-tl-row";
+      const badge = document.createElement("span");
+      const isAction = st.type === "action";
+      badge.className = "pd-tl-badge " + (isAction ? "pd-tl-action" : "pd-tl-patch");
+      badge.textContent = isAction ? "action" : "patch";
+      const name = document.createElement("span");
+      name.className = "pd-tl-name";
+      name.textContent = String(st.payload?.name ?? "?");
+      const meta = document.createElement("span");
+      meta.className = "pd-tl-meta";
+      meta.textContent = "#" + st.index + " \xB7 " + st.timestamp + "ms";
+      row.appendChild(badge);
+      row.appendChild(name);
+      row.appendChild(meta);
+      const diff = diffLines(st.before, st.after);
+      if (diff.length > 0) {
+        attachTip(row, { title: st.type + " #" + st.index, lines: diff });
+      }
+      row.addEventListener("click", () => hooks.onTimeTravel?.(st.index));
+      tl.appendChild(row);
+    }
+    container.appendChild(tl);
+  }
+  if (data.steps.length > 0) {
+    const sliderRow = document.createElement("div");
+    sliderRow.className = "pd-toolbar";
+    const input = document.createElement("input");
+    input.type = "range";
+    input.min = "0";
+    input.max = String(data.steps.length - 1);
+    const initial = data.travelIndex !== void 0 && data.travelIndex >= 0 && data.travelIndex <= data.steps.length - 1 ? data.travelIndex : data.steps.length - 1;
+    input.value = String(initial);
+    input.className = "pd-range";
+    const hint = document.createElement("span");
+    hint.textContent = "\u56DE\u653E " + (initial + 1) + "/" + data.steps.length;
+    input.addEventListener("input", () => {
+      const i = Number(input.value);
+      hint.textContent = "\u56DE\u653E " + (i + 1) + "/" + data.steps.length;
+    });
+    input.addEventListener("change", () => {
+      hooks.onTimeTravel?.(Number(input.value));
+    });
+    sliderRow.appendChild(input);
+    sliderRow.appendChild(hint);
+    container.appendChild(sliderRow);
+  }
+  if (stores.length === 0) {
+    const empty = document.createElement("div");
+    empty.className = "pd-empty";
+    empty.textContent = "\u6682\u65E0 store\uFF08TraceBus store \u4E8B\u4EF6\u672A\u4E0A\u62A5\uFF09";
+    container.appendChild(empty);
+  }
+}
+
+// src/views/route.ts
+function renderRoute(container, data) {
+  container.replaceChildren();
+  const records = data.records;
+  if (records.length === 0) {
+    const empty = document.createElement("div");
+    empty.className = "pd-empty";
+    empty.textContent = "\u6682\u65E0\u5BFC\u822A\u8BB0\u5F55";
+    container.appendChild(empty);
+    return;
+  }
+  for (let i = records.length - 1; i >= 0; i--) {
+    const r = records[i];
+    const row = document.createElement("div");
+    row.className = "pd-nav";
+    const path = document.createElement("div");
+    path.className = "pd-nav-path";
+    const from = document.createElement("span");
+    from.className = "pd-route";
+    from.textContent = r.from.path;
+    const arrow = document.createElement("span");
+    arrow.className = "pd-arrow";
+    arrow.textContent = " \u2192 ";
+    const to = document.createElement("span");
+    to.className = "pd-route";
+    to.textContent = r.to.path + (r.to.query ? "?" + JSON.stringify(r.to.query) : "");
+    path.appendChild(from);
+    path.appendChild(arrow);
+    path.appendChild(to);
+    const meta = document.createElement("span");
+    meta.className = "pd-nav-meta";
+    meta.textContent = r.durationMs + "ms" + (r.traceId ? " #" + r.traceId : "");
+    path.appendChild(meta);
+    row.appendChild(path);
+    const guards = document.createElement("div");
+    guards.className = "pd-guards";
+    for (const g of r.guards) {
+      const badge = document.createElement("span");
+      badge.className = "pd-guard pd-guard-" + g.result;
+      badge.textContent = g.name + " " + g.durationMs + "ms (" + g.result + ")";
+      attachTip(badge, {
+        title: "\u5B88\u536B " + g.name,
+        lines: [`\u7ED3\u679C: ${g.result}`, `\u8017\u65F6 ${g.durationMs}ms`]
+      });
+      guards.appendChild(badge);
+    }
+    row.appendChild(guards);
+    container.appendChild(row);
+  }
+}
+
+// src/views/errors.ts
+function renderErrors(container, data) {
+  container.replaceChildren();
+  const reports = data.reports;
+  if (reports.length === 0) {
+    const empty = document.createElement("div");
+    empty.className = "pd-empty";
+    empty.textContent = "\u6682\u65E0\u5F02\u5E38\uFF08\u6839\u56E0\u9762\u677F\u7A7A\u95F2\uFF09";
+    container.appendChild(empty);
+    return;
+  }
+  for (const r of reports) {
+    const card2 = document.createElement("div");
+    card2.className = "pd-error-card";
+    const head = document.createElement("div");
+    head.className = "pd-error-head";
+    const title = document.createElement("div");
+    title.className = "pd-error-title";
+    title.textContent = r.rootCause.source + "." + r.rootCause.name + " @ " + r.rootCause.timestamp + "ms";
+    head.appendChild(title);
+    if (r.attribution) {
+      const attr = document.createElement("div");
+      attr.className = "pd-error-attr";
+      attr.textContent = "\u2691 " + r.attribution;
+      head.appendChild(attr);
+    }
+    card2.appendChild(head);
+    const chain = document.createElement("div");
+    chain.className = "pd-error-chain";
+    for (let i = r.chain.length - 1; i >= 0; i--) {
+      const c = r.chain[i];
+      const node = document.createElement("div");
+      const isRoot = c.source === r.rootCause.source && c.name === r.rootCause.name && c.timestamp === r.rootCause.timestamp;
+      node.className = "pd-chain-node" + (isRoot ? " pd-chain-root" : "");
+      node.textContent = c.source + "." + c.name;
+      chain.appendChild(node);
+      if (i > 0) {
+        const up = document.createElement("div");
+        up.className = "pd-chain-up";
+        up.textContent = "\u2191";
+        chain.appendChild(up);
+      }
+    }
+    card2.appendChild(chain);
+    const impact = document.createElement("div");
+    impact.className = "pd-error-impact";
+    for (const s of r.impactSources) {
+      const chip = document.createElement("span");
+      chip.className = "pd-chip";
+      chip.textContent = s;
+      impact.appendChild(chip);
+    }
+    card2.appendChild(impact);
+    const repro = document.createElement("ol");
+    repro.className = "pd-repro";
+    for (const step of r.repro) {
+      const li = document.createElement("li");
+      li.textContent = step;
+      repro.appendChild(li);
+    }
+    card2.appendChild(repro);
+    container.appendChild(card2);
+  }
+}
+
+// src/views/components.ts
+function buildChildren(nodes) {
+  const byParent = /* @__PURE__ */ new Map();
+  const alive = new Set(nodes.map((n) => n.id));
+  for (const n of nodes) {
+    const key = n.parentId !== void 0 && alive.has(n.parentId) ? n.parentId : -1;
+    const list = byParent.get(key);
+    if (list) list.push(n);
+    else byParent.set(key, [n]);
+  }
+  return byParent;
+}
+function renderDetail(container, node, dom) {
+  const detail = document.createElement("div");
+  detail.className = "pd-cmp-detail";
+  const head = document.createElement("div");
+  head.className = "pd-section-head";
+  head.textContent = "#" + node.id + " " + node.name + " \xB7 \u8BE6\u60C5";
+  detail.appendChild(head);
+  const sections = [
+    ["props", node.props],
+    ["state", node.state]
+  ];
+  for (const [label, value] of sections) {
+    const box = document.createElement("div");
+    box.className = "pd-cmp-detail-section";
+    const labelEl = document.createElement("div");
+    labelEl.className = "pd-cmp-detail-label";
+    labelEl.textContent = label;
+    box.appendChild(labelEl);
+    if (value !== void 0 && value !== null && (typeof value !== "object" || Object.keys(value).length > 0)) {
+      renderKeyValue(box, "(root)", value, 0, true);
+    } else {
+      const empty = document.createElement("div");
+      empty.className = "pd-empty";
+      empty.textContent = "\u65E0 " + label;
+      box.appendChild(empty);
+    }
+    detail.appendChild(box);
+  }
+  if (dom) {
+    const box = document.createElement("div");
+    box.className = "pd-cmp-detail-section";
+    const labelEl = document.createElement("div");
+    labelEl.className = "pd-cmp-detail-label";
+    labelEl.textContent = "DOM";
+    box.appendChild(labelEl);
+    renderDomTree(box, dom, 0);
+    detail.appendChild(box);
+  }
+  container.appendChild(detail);
+}
+function renderDomTree(container, node, depth) {
+  const row = document.createElement("div");
+  row.className = "pd-dom-node";
+  row.style.paddingLeft = 10 + depth * 14 + "px";
+  const tag = document.createElement("span");
+  tag.className = "pd-dom-tag";
+  tag.textContent = node.tag;
+  row.appendChild(tag);
+  if (node.id) {
+    const idEl = document.createElement("span");
+    idEl.className = "pd-dom-id";
+    idEl.textContent = "#" + node.id;
+    row.appendChild(idEl);
+  }
+  if (node.cls?.length) {
+    const clsEl = document.createElement("span");
+    clsEl.className = "pd-dom-cls";
+    clsEl.textContent = "." + node.cls.join(".");
+    row.appendChild(clsEl);
+  }
+  container.appendChild(row);
+  if (node.children.length) {
+    const box = document.createElement("div");
+    box.className = "pd-dom-children";
+    for (const child of node.children) renderDomTree(box, child, depth + 1);
+    container.appendChild(box);
+  }
+}
+function renderComponents(container, data, hooks = {}) {
+  container.replaceChildren();
+  const nodes = data.nodes;
+  if (nodes.length === 0) {
+    const empty = document.createElement("div");
+    empty.className = "pd-empty";
+    empty.textContent = "\u6682\u65E0\u7EC4\u4EF6\uFF08installComponentTrace \u63A5\u5165\u540E\u51FA\u73B0\uFF09";
+    container.appendChild(empty);
+    return;
+  }
+  const byParent = buildChildren(nodes);
+  const selected = data.selectedId !== void 0 && nodes.some((n) => n.id === data.selectedId) ? data.selectedId : void 0;
+  function buildRow(n, depth, hasChildren) {
+    const row = document.createElement("div");
+    row.className = "pd-cmp-row" + (n.id === selected ? " pd-cmp-active" : "");
+    row.style.paddingLeft = depth * 16 + 6 + "px";
+    const toggle = document.createElement("span");
+    toggle.className = "pd-kv-toggle";
+    toggle.textContent = hasChildren ? "\u25BE" : "\xB7";
+    const name = document.createElement("span");
+    name.className = "pd-cmp-name";
+    name.textContent = n.name;
+    const meta = document.createElement("span");
+    meta.className = "pd-cmp-meta";
+    meta.textContent = "#" + n.id + (n.count > 1 ? " \xD7" + n.count : "");
+    row.appendChild(toggle);
+    row.appendChild(name);
+    row.appendChild(meta);
+    row.addEventListener("click", (e) => {
+      if (e.target.closest(".pd-cmp-row") !== row) return;
+      hooks.onSelect?.(n.id);
+    });
+    if (hasChildren) {
+      let collapsed = false;
+      let subtree = null;
+      const sub = document.createElement("div");
+      sub.className = "pd-cmp-children";
+      subtree = sub;
+      const kids = byParent.get(n.id) ?? [];
+      for (const k of kids) sub.appendChild(buildRow(k, depth + 1, (byParent.get(k.id)?.length ?? 0) > 0));
+      row.appendChild(sub);
+      toggle.addEventListener("click", (e) => {
+        e.stopPropagation();
+        collapsed = !collapsed;
+        toggle.textContent = collapsed ? "\u25B8" : "\u25BE";
+        if (subtree) subtree.style.display = collapsed ? "none" : "block";
+      });
+    }
+    return row;
+  }
+  const roots = byParent.get(-1) ?? [];
+  for (const r of roots) {
+    container.appendChild(buildRow(r, 0, (byParent.get(r.id)?.length ?? 0) > 0));
+  }
+  if (selected !== void 0) {
+    const sel = nodes.find((n) => n.id === selected);
+    if (sel) renderDetail(container, sel, data.dom);
+  }
+}
+
+// src/views/pages.ts
+function renderPages(container, data) {
+  container.replaceChildren();
+  const routes = data.routes;
+  if (routes.length === 0) {
+    const empty = document.createElement("div");
+    empty.className = "pd-empty";
+    empty.textContent = "\u6682\u65E0\u8DEF\u7531\u8868\uFF08Proteus.appInfo \u6CE8\u5165\u540E\u51FA\u73B0\uFF09";
+    container.appendChild(empty);
+    return;
+  }
+  const stack = data.stack ?? [];
+  if (stack.length) {
+    const stackBox = document.createElement("div");
+    stackBox.className = "pd-page-stack";
+    const head = document.createElement("div");
+    head.className = "pd-section-head";
+    head.textContent = "\u9875\u9762\u6808\uFF08" + stack.length + "\uFF09";
+    stackBox.appendChild(head);
+    for (let i = stack.length - 1; i >= 0; i--) {
+      const route = stack[i]?.route ?? "?";
+      const row = document.createElement("div");
+      row.className = "pd-page-row" + (i === stack.length - 1 ? " pd-page-current" : "");
+      const depth = document.createElement("span");
+      depth.className = "pd-page-depth";
+      depth.textContent = String(stack.length - 1 - i);
+      const name = document.createElement("span");
+      name.className = "pd-page-name";
+      name.textContent = route;
+      row.appendChild(depth);
+      row.appendChild(name);
+      stackBox.appendChild(row);
+    }
+    container.appendChild(stackBox);
+  }
+  const main = routes.filter((r) => !r.subPackage);
+  const subs = [];
+  const subNames = /* @__PURE__ */ new Set();
+  for (const r of routes) if (r.subPackage && !subNames.has(r.subPackage)) subNames.add(r.subPackage);
+  for (const s of subNames) subs.push({ name: s, routes: routes.filter((r) => r.subPackage === s) });
+  function renderGroup(title, list) {
+    const group = document.createElement("div");
+    group.className = "pd-page-group";
+    const head = document.createElement("div");
+    head.className = "pd-section-head";
+    head.textContent = title + "\uFF08" + list.length + "\uFF09";
+    group.appendChild(head);
+    for (const r of list) {
+      const row = document.createElement("div");
+      row.className = "pd-page-row";
+      const name = document.createElement("span");
+      name.className = "pd-page-name";
+      name.textContent = r.name;
+      const meta = document.createElement("span");
+      meta.className = "pd-page-meta";
+      meta.textContent = r.path + (r.meta?.isTab ? " \xB7 tab" : "") + (r.meta?.title ? " \xB7 " + r.meta.title : "");
+      row.appendChild(name);
+      row.appendChild(meta);
+      group.appendChild(row);
+    }
+    return group;
+  }
+  container.appendChild(renderGroup("\u4E3B\u5305\u9875\u9762", main));
+  for (const s of subs) container.appendChild(renderGroup("\u5206\u5305 " + s.name, s.routes));
+}
+
+// src/views/graph.ts
+function buildTree(routes) {
+  const byName = /* @__PURE__ */ new Map();
+  for (const r of routes) byName.set(r.name, r);
+  const roots = [];
+  const nodeMap = /* @__PURE__ */ new Map();
+  for (const r of routes) nodeMap.set(r.name, { route: r, children: [] });
+  for (const r of routes) {
+    const node = nodeMap.get(r.name);
+    const parent = r.parent !== void 0 && nodeMap.has(r.parent) ? nodeMap.get(r.parent) : void 0;
+    if (parent) parent.children.push(node);
+    else roots.push(node);
+  }
+  return roots;
+}
+function buildBranch(node, prefix, isLast, out, depth) {
+  const row = document.createElement("div");
+  row.className = "pd-graph-node" + (depth === 0 ? " pd-graph-root" : "");
+  const line = document.createElement("span");
+  line.className = "pd-graph-line";
+  line.textContent = prefix + (isLast ? "\u2514\u2500 " : "\u251C\u2500 ");
+  const name = document.createElement("span");
+  name.className = "pd-graph-name";
+  name.textContent = node.route.name;
+  const meta = document.createElement("span");
+  meta.className = "pd-graph-meta";
+  const parts = [node.route.path];
+  if (node.route.meta?.isTab) parts.push("tab");
+  if (node.route.subPackage) parts.push("\u5206\u5305 " + node.route.subPackage);
+  meta.textContent = parts.join(" \xB7 ");
+  row.appendChild(line);
+  row.appendChild(name);
+  row.appendChild(meta);
+  out.appendChild(row);
+  const kids = node.children;
+  for (let i = 0; i < kids.length; i++) {
+    buildBranch(kids[i], prefix + (isLast ? "  " : "\u2502 "), i === kids.length - 1, out, depth + 1);
+  }
+}
+function renderGraph(container, data) {
+  container.replaceChildren();
+  const routes = data.routes;
+  if (routes.length === 0) {
+    const empty = document.createElement("div");
+    empty.className = "pd-empty";
+    empty.textContent = "\u6682\u65E0\u8DEF\u7531\u8868\uFF08Proteus.appInfo \u6CE8\u5165\u540E\u51FA\u73B0\uFF09";
+    container.appendChild(empty);
+    return;
+  }
+  const roots = buildTree(routes);
+  const box = document.createElement("div");
+  box.className = "pd-graph";
+  const head = document.createElement("div");
+  head.className = "pd-section-head";
+  const subCount = new Set(routes.map((r) => r.subPackage).filter((s) => s !== void 0)).size;
+  head.textContent = "\u8DEF\u7531\u4F9D\u8D56\u6811\uFF08" + routes.length + " \u9875" + (subCount ? " \xB7 " + subCount + " \u5206\u5305" : "") + "\uFF09";
+  box.appendChild(head);
+  for (let i = 0; i < roots.length; i++) {
+    buildBranch(roots[i], "", i === roots.length - 1, box, 0);
+  }
+  container.appendChild(box);
+}
+
+// src/views/device.ts
+function fmtBytes(b) {
+  if (!b || b <= 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB"];
+  let i = 0;
+  let v = b;
+  while (v >= 1024 && i < units.length - 1) {
+    v /= 1024;
+    i += 1;
+  }
+  return v.toFixed(i === 0 ? 0 : 1) + " " + units[i];
+}
+function renderDevice(container, data) {
+  container.replaceChildren();
+  const info = data.info;
+  if (!info) {
+    const empty = document.createElement("div");
+    empty.className = "pd-empty";
+    empty.textContent = "\u6682\u65E0\u8BBE\u5907\u4FE1\u606F\uFF08Proteus.deviceInfo \u6CE8\u5165\u540E\u51FA\u73B0\uFF09";
+    container.appendChild(empty);
+    return;
+  }
+  const overview = document.createElement("div");
+  overview.className = "pd-dev-overview";
+  const cards = [
+    { label: "\u5E73\u53F0", value: info.platform || "\u2014" },
+    { label: "\u57FA\u7840\u5E93", value: info.libVersion || "\u2014" },
+    { label: "\u5C4F\u5E55", value: info.screen ? info.screen.width + "\xD7" + info.screen.height + " @" + info.screen.dpr + "x" : "\u2014" }
+  ];
+  if (info.memory) {
+    const total = info.memory.totalJSHeapSize;
+    const usedPct = total > 0 ? info.memory.usedJSHeapSize / total * 100 : 0;
+    cards.push({ label: "JS \u5806", value: fmtBytes(info.memory.usedJSHeapSize) + " / " + fmtBytes(info.memory.jsHeapLimit), hint: usedPct.toFixed(1) + "% \u5DF2\u7528\uFF08total\uFF09" });
+  }
+  for (const c of cards) {
+    const card2 = document.createElement("div");
+    card2.className = "pd-dev-card";
+    const label = document.createElement("div");
+    label.className = "pd-dev-card-label";
+    label.textContent = c.label;
+    const value = document.createElement("div");
+    value.className = "pd-dev-card-value";
+    value.textContent = c.value;
+    card2.appendChild(label);
+    card2.appendChild(value);
+    if (c.hint) {
+      const hint = document.createElement("div");
+      hint.className = "pd-dev-card-hint";
+      hint.textContent = c.hint;
+      card2.appendChild(hint);
+    }
+    overview.appendChild(card2);
+  }
+  container.appendChild(overview);
+  if (info.userAgent) {
+    const ua = document.createElement("div");
+    ua.className = "pd-dev-ua";
+    ua.textContent = info.userAgent;
+    ua.title = info.userAgent;
+    container.appendChild(ua);
+  }
+  const samples = data.memory;
+  if (samples.length) {
+    const box = document.createElement("div");
+    box.className = "pd-dev-memory";
+    const head = document.createElement("div");
+    head.className = "pd-section-head";
+    head.textContent = "\u5185\u5B58\u66F2\u7EBF\uFF08" + samples.length + " \u91C7\u6837 \xB7 \u9762\u677F\u8FDB\u7A0B\uFF09";
+    box.appendChild(head);
+    const max = Math.max.apply(null, samples.map((s) => s.total)) || 1;
+    const chart = document.createElement("div");
+    chart.className = "pd-dev-mem-chart";
+    for (const s of samples) {
+      const col = document.createElement("div");
+      col.className = "pd-dev-mem-col";
+      const usedH = Math.round(s.used / max * 100);
+      const used = document.createElement("div");
+      used.className = "pd-dev-mem-used";
+      used.style.height = Math.max(1, usedH) + "%";
+      used.title = "used " + fmtBytes(s.used);
+      const total = document.createElement("div");
+      total.className = "pd-dev-mem-total";
+      total.style.height = Math.round(s.total / max * 100) + "%";
+      total.title = "total " + fmtBytes(s.total);
+      col.appendChild(total);
+      col.appendChild(used);
+      chart.appendChild(col);
+    }
+    box.appendChild(chart);
+    const latest = samples[samples.length - 1];
+    const stat = document.createElement("div");
+    stat.className = "pd-dev-mem-stat";
+    stat.textContent = "used " + fmtBytes(latest.used) + " / total " + fmtBytes(latest.total) + " / limit " + fmtBytes(latest.limit);
+    box.appendChild(stat);
+    container.appendChild(box);
+  }
+  const caps = Array.isArray(info.capabilities) ? info.capabilities : [];
+  if (caps.length) {
+    const table = document.createElement("div");
+    table.className = "pd-dev-caps";
+    const head = document.createElement("div");
+    head.className = "pd-section-head";
+    head.textContent = "\u80FD\u529B\uFF08" + caps.length + " \xB7 " + info.platform + "\uFF09";
+    table.appendChild(head);
+    for (const c of caps) {
+      const row = document.createElement("div");
+      row.className = "pd-dev-cap" + (c.supported ? " pd-dev-cap-ok" : " pd-dev-cap-no");
+      const mark = document.createElement("span");
+      mark.className = "pd-dev-cap-mark";
+      mark.textContent = c.supported ? "\u2705" : "\u274C";
+      const name = document.createElement("span");
+      name.className = "pd-dev-cap-name";
+      name.textContent = c.capability;
+      const meta = document.createElement("span");
+      meta.className = "pd-dev-cap-meta";
+      const parts = [];
+      parts.push(c.platforms.join("/"));
+      if (c.required) parts.push("required");
+      if (c.runsInWorklet) parts.push("worklet");
+      if (c.fallback) parts.push("\u2192 " + c.fallback);
+      if (c.priority) parts.push("p" + c.priority);
+      meta.textContent = parts.join(" \xB7 ");
+      row.appendChild(mark);
+      row.appendChild(name);
+      row.appendChild(meta);
+      table.appendChild(row);
+    }
+    container.appendChild(table);
+  }
+}
+
+// src/views/ownership.ts
+function fmtBytes2(n) {
+  if (n >= 1024 * 1024) return (n / (1024 * 1024)).toFixed(1) + " MB";
+  if (n >= 1024) return (n / 1024).toFixed(1) + " KB";
+  return n + " B";
+}
+function card(parent, cls, title) {
+  const el = document.createElement("div");
+  el.className = cls;
+  const t = document.createElement("div");
+  t.className = "pd-own-card-title";
+  t.textContent = title;
+  el.appendChild(t);
+  parent.appendChild(el);
+  return el;
+}
+function renderOwnership(container, data) {
+  container.replaceChildren();
+  container.classList.add("pd-ownership");
+  if (!data || !data.summary) {
+    const empty = document.createElement("div");
+    empty.className = "pd-empty";
+    empty.textContent = "\u6682\u65E0\u6240\u6709\u6743\u6570\u636E\uFF08installProteusDevtools({ ownership: true }) \u542F\u7528\uFF0C\u6216\u4E1A\u52A1\u5728\u521B\u5EFA OwnershipGraph \u65F6\u6302\u63A5\uFF09";
+    container.appendChild(empty);
+    return;
+  }
+  const summary = card(container, "pd-own-summary", "\u6240\u6709\u6743\u6982\u8981");
+  const stats = document.createElement("div");
+  stats.className = "pd-own-stats";
+  stats.textContent = `${data.summary.alive} alive / ${data.summary.total} total \xB7 ${fmtBytes2(data.summary.bytesAlive)}`;
+  summary.appendChild(stats);
+  const types = Object.entries(data.summary.byType);
+  if (types.length > 0) {
+    const typeLine = document.createElement("div");
+    typeLine.className = "pd-own-types";
+    typeLine.textContent = types.map(([type, c]) => `${type}: ${c.alive}/${c.allocated}`).join(" \xB7 ");
+    summary.appendChild(typeLine);
+  }
+  const d = data.diagnosis;
+  const alerts = card(container, "pd-own-alerts", "\u68C0\u6D4B");
+  const alertCount = d.orphans.length + d.leaks.length + d.longBorrows.length + d.crossPageRefs.length;
+  if (alertCount === 0) {
+    const ok = document.createElement("div");
+    ok.className = "pd-own-ok";
+    ok.textContent = "\u2705 \u65E0\u5F02\u5E38\uFF08\u65E0\u65E0\u4E3B\u8D44\u6E90 / \u6CC4\u6F0F\u8DEF\u5F84 / \u957F\u671F\u501F\u7528 / \u8DE8\u9875\u5F3A\u5F15\u7528\uFF09";
+    alerts.appendChild(ok);
+  } else {
+    for (const o of d.orphans) {
+      const row = document.createElement("div");
+      row.className = "pd-own-alert pd-own-alert-orphan";
+      row.textContent = `\u{1F534} \u65E0\u4E3B\u8D44\u6E90 ${o.id}\uFF08${o.type}\uFF0C${fmtBytes2(o.byteSize)}\uFF09${o.sourceLocation ? "\u{1F4CD} " + o.sourceLocation : ""}\u2014\u2014\u5FC5\u7136\u6CC4\u6F0F\uFF08\u6846\u67B6 bug \u6216\u672A\u767B\u8BB0\uFF09`;
+      alerts.appendChild(row);
+    }
+    for (const l of d.leaks) {
+      const row = document.createElement("div");
+      row.className = "pd-own-alert pd-own-alert-leak";
+      row.textContent = `\u26A0\uFE0F \u6CC4\u6F0F\u8DEF\u5F84 ${l.resourceId}\uFF08${l.type}\uFF0C${fmtBytes2(l.byteSize)}\uFF09${l.sourceLocation ? "\u{1F4CD} " + l.sourceLocation : ""}`;
+      alerts.appendChild(row);
+      for (const hop of l.referenceChain) {
+        const chain = document.createElement("div");
+        chain.className = "pd-own-chain";
+        chain.textContent = "    " + hop;
+        alerts.appendChild(chain);
+      }
+    }
+    for (const b of d.longBorrows) {
+      const row = document.createElement("div");
+      row.className = "pd-own-alert pd-own-alert-longborrow";
+      row.textContent = `\u{1F7E1} \u957F\u671F\u501F\u7528 ${b.resourceId} \u2190 borrowed by ${b.borrowedBy}\uFF08owner ${b.owner ?? "\u65E0\u4E3B"}\uFF09`;
+      alerts.appendChild(row);
+    }
+    for (const c of d.crossPageRefs) {
+      const row = document.createElement("div");
+      row.className = "pd-own-alert pd-own-alert-crosspage";
+      row.textContent = `\u26A0\uFE0F \u8DE8\u9875\u5F3A\u5F15\u7528 ${c.resourceId}\uFF08owner ${c.owner ?? "\u65E0\u4E3B"}\uFF09\u2190 \u5F3A\u6301\u6709 by ${c.heldBy}\u2014\u2014\u5E94 transferTo/weak`;
+      alerts.appendChild(row);
+    }
+  }
+  const resCard = card(container, "pd-own-resources", "\u8D44\u6E90\uFF08\u6309 owner\uFF09");
+  if (data.resources.length === 0) {
+    const empty = document.createElement("div");
+    empty.className = "pd-empty";
+    empty.textContent = "\u65E0\u5B58\u6D3B\u8D44\u6E90";
+    resCard.appendChild(empty);
+  }
+  for (const group of data.resources) {
+    const ownerRow = document.createElement("div");
+    ownerRow.className = "pd-own-owner";
+    const bytes = group.items.reduce((s, i) => s + i.byteSize, 0);
+    ownerRow.textContent = `\u25BC ${group.owner}\uFF08${group.items.length} \u8D44\u6E90\uFF0C${fmtBytes2(bytes)}\uFF09`;
+    resCard.appendChild(ownerRow);
+    for (const item of group.items) {
+      const row = document.createElement("div");
+      row.className = "pd-own-resource";
+      const stateMark = group.owner === "\uFF08\u65E0\u4E3B\uFF09" ? "\u{1F534}" : "\u{1F7E2}";
+      const borrowInfo = item.borrowedBy.length > 0 ? ` \u2190 \u{1F7E1} ${item.borrowedBy.join(", ")}` : "";
+      row.textContent = `  ${stateMark} ${item.type} ${fmtBytes2(item.byteSize)}${item.sourceLocation ? " \u{1F4CD} " + item.sourceLocation : ""}${borrowInfo}`;
+      resCard.appendChild(row);
+    }
+  }
+  const tlCard = card(container, "pd-own-timeline", `\u65F6\u95F4\u7EBF${data.timeline.truncated ? `\uFF08\u8FD1 ${data.timeline.events.length} \u6761\uFF09` : ""}`);
+  if (data.timeline.events.length === 0) {
+    const empty = document.createElement("div");
+    empty.className = "pd-empty";
+    empty.textContent = "\u6682\u65E0 alloc/drop \u8BB0\u5F55";
+    tlCard.appendChild(empty);
+  }
+  for (const e of data.timeline.events) {
+    const row = document.createElement("div");
+    if (e.kind === "alloc") {
+      const unpaired = data.timeline.unpairedIds.includes(e.id ?? "");
+      row.className = "pd-own-tl" + (unpaired ? " pd-own-tl-unpaired" : "");
+      row.textContent = `\u2191 alloc ${e.type ?? ""} ${fmtBytes2(e.byteSize ?? 0)}${e.sourceLocation ? " \u{1F4CD} " + e.sourceLocation : ""}${unpaired ? " \u26A0\uFE0F \u672A\u914D\u5BF9\uFF08\u53EF\u7591\uFF09" : ""}`;
+    } else if (e.kind === "drop") {
+      row.className = "pd-own-tl";
+      row.textContent = `\u2193 drop ${e.type ?? ""} ${fmtBytes2(e.byteSize ?? 0)}${e.matchedAllocId ? `\uFF08\u2194 ${e.matchedAllocId}\uFF09` : ""}`;
+    } else if (e.kind === "moved") {
+      row.className = "pd-own-tl";
+      row.textContent = `\u2192 moved ${e.type ?? ""}\uFF08owner ${e.owner ?? "\u2014"}\uFF09`;
+    } else {
+      row.className = "pd-own-tl";
+      row.textContent = `${e.kind} ${e.from ?? ""} \u2192 ${e.to ?? ""}`;
+    }
+    tlCard.appendChild(row);
+  }
+}
+
+// src/snapshot-io.ts
+var SENSITIVE_PATTERNS = ["password", "token", "authorization", "idcard", "phone"];
+function isSensitiveKey(key) {
+  const k = key.toLowerCase();
+  for (let i = 0; i < SENSITIVE_PATTERNS.length; i++) {
+    if (k.indexOf(SENSITIVE_PATTERNS[i]) >= 0) return true;
+  }
+  return false;
+}
+function findSensitiveKeys(stores) {
+  const out = [];
+  const walk = (value) => {
+    if (value === null || typeof value !== "object") return [];
+    const hits = [];
+    const obj = value;
+    for (const k of Object.keys(obj)) {
+      if (isSensitiveKey(k)) hits.push(k);
+      hits.push.apply(hits, walk(obj[k]));
+    }
+    return hits;
+  };
+  for (const s of stores) {
+    const keys = walk(s.state);
+    if (keys.length) out.push({ storeId: s.id, keys: Array.from(new Set(keys)) });
+  }
+  return out;
+}
+function serializeStoreSnapshot(input) {
+  const data = {
+    kind: "proteus-store-snapshot",
+    version: 1,
+    exportedAt: Date.now(),
+    stores: input.stores,
+    steps: input.steps
+  };
+  return JSON.stringify(data, null, 2);
+}
+function parseStoreSnapshot(json) {
+  let data;
+  try {
+    data = JSON.parse(json);
+  } catch {
+    return null;
+  }
+  if (data === null || typeof data !== "object") return null;
+  const d = data;
+  if (d.kind !== "proteus-store-snapshot" || !Array.isArray(d.stores)) return null;
+  const stores = [];
+  for (const s of d.stores) {
+    if (s && typeof s.id === "string" && s.state !== null && typeof s.state === "object" && !Array.isArray(s.state)) {
+      stores.push({ id: s.id, state: s.state });
+    }
+  }
+  const steps = [];
+  if (Array.isArray(d.steps)) {
+    for (const st of d.steps) {
+      if (st && typeof st.index === "number" && typeof st.storeId === "string" && (st.type === "patch" || st.type === "action")) {
+        steps.push({
+          index: st.index,
+          storeId: st.storeId,
+          type: st.type,
+          name: typeof st.name === "string" ? st.name : st.type,
+          payload: st.payload,
+          timestamp: typeof st.timestamp === "number" ? st.timestamp : 0
+        });
+      }
+    }
+  }
+  return { stores, steps };
+}
+
+// src/session-io.ts
+var VALID_SOURCES = ["lifecycle", "router", "store", "api", "capability", "compiler", "component", "hmr"];
+var VALID_PHASES = ["start", "end", "point", "error"];
+function serializeSession(input) {
+  const bundle = {
+    kind: "proteus-session",
+    version: 1,
+    exportedAt: Date.now(),
+    meta: { eventCount: input.events.length },
+    events: input.events,
+    device: input.device,
+    stores: input.stores,
+    steps: input.steps
+  };
+  return JSON.stringify(bundle, null, 2);
+}
+function parseSession(json) {
+  let data;
+  try {
+    data = JSON.parse(json);
+  } catch {
+    return null;
+  }
+  if (data === null || typeof data !== "object") return null;
+  const d = data;
+  if (d.kind !== "proteus-session" || d.version !== 1 || !Array.isArray(d.events)) return null;
+  const events = [];
+  for (const e of d.events) {
+    if (!e || typeof e !== "object") continue;
+    const ev = e;
+    if (typeof ev.source !== "string" || VALID_SOURCES.indexOf(ev.source) < 0) continue;
+    if (typeof ev.phase !== "string" || VALID_PHASES.indexOf(ev.phase) < 0) continue;
+    if (typeof ev.name !== "string" || !ev.name) continue;
+    events.push({
+      source: ev.source,
+      phase: ev.phase,
+      name: ev.name,
+      payload: ev.payload,
+      timestamp: typeof ev.timestamp === "number" ? ev.timestamp : Date.now(),
+      traceId: typeof ev.traceId === "string" ? ev.traceId : void 0
+    });
+  }
+  const stores = [];
+  if (Array.isArray(d.stores)) {
+    for (const s of d.stores) {
+      if (s && typeof s.id === "string" && s.state !== null && typeof s.state === "object" && !Array.isArray(s.state)) {
+        stores.push({ id: s.id, state: s.state });
+      }
+    }
+  }
+  const steps = [];
+  if (Array.isArray(d.steps)) {
+    for (const st of d.steps) {
+      if (st && typeof st.index === "number" && typeof st.storeId === "string" && (st.type === "patch" || st.type === "action")) {
+        steps.push({
+          index: st.index,
+          storeId: st.storeId,
+          type: st.type,
+          name: typeof st.name === "string" ? st.name : st.type,
+          payload: st.payload,
+          timestamp: typeof st.timestamp === "number" ? st.timestamp : 0
+        });
+      }
+    }
+  }
+  return { events, device: d.device, stores, steps };
+}
+
+// src/plugins.ts
+function createMemoryStorage() {
+  const map = /* @__PURE__ */ new Map();
+  return {
+    get: (key) => map.get(key),
+    set: (key, value) => {
+      map.set(key, value);
+    }
+  };
+}
+function createCommandRegistry() {
+  const commands = /* @__PURE__ */ new Map();
+  return {
+    register(id, run) {
+      commands.set(id, run);
+    },
+    run(id) {
+      commands.get(id)?.();
+    },
+    list() {
+      return Array.from(commands.keys());
+    }
+  };
+}
+function resolveActivationOrder(plugins) {
+  const byName = new Map(plugins.map((p) => [p.name, p]));
+  const deps = /* @__PURE__ */ new Map();
+  for (const p of plugins) deps.set(p.name, (p.peerDependencies ?? []).filter((d) => byName.has(d)));
+  const indegree = /* @__PURE__ */ new Map();
+  for (const [name, ds] of deps) indegree.set(name, ds.length);
+  const queue = [];
+  for (const [name, d] of indegree) if (d === 0) queue.push(name);
+  const order = [];
+  while (queue.length) {
+    const name = queue.shift();
+    order.push(name);
+    for (const other of deps.keys()) {
+      const list = deps.get(other);
+      if (list.includes(name)) {
+        const nd = indegree.get(other) - 1;
+        indegree.set(other, nd);
+        if (nd === 0) queue.push(other);
+      }
+    }
+  }
+  const remaining = plugins.map((p) => p.name).filter((n) => !order.includes(n));
+  if (remaining.length) {
+    const start = remaining[0];
+    const cyclePath = [];
+    const seen = /* @__PURE__ */ new Set();
+    let cur = start;
+    while (cur && !seen.has(cur)) {
+      seen.add(cur);
+      cyclePath.push(cur);
+      cur = (deps.get(cur) ?? []).find((d) => remaining.includes(d)) ?? null;
+    }
+    if (cur) cyclePath.push(cur);
+    return { order, cycle: cyclePath };
+  }
+  return { order, cycle: null };
+}
+function createPluginRegistry(initial = []) {
+  const plugins = /* @__PURE__ */ new Map();
+  const statuses = /* @__PURE__ */ new Map();
+  const errors = /* @__PURE__ */ new Map();
+  for (const p of initial) {
+    plugins.set(p.name, p);
+    statuses.set(p.name, "registered");
+  }
+  return {
+    register(plugin) {
+      plugins.set(plugin.name, plugin);
+      statuses.set(plugin.name, "registered");
+    },
+    unregister(name) {
+      plugins.delete(name);
+      statuses.delete(name);
+      errors.delete(name);
+    },
+    async activateAll(ctx) {
+      const all = Array.from(plugins.values());
+      const { order, cycle } = resolveActivationOrder(all);
+      if (cycle) throw new Error("\u63D2\u4EF6\u5FAA\u73AF\u4F9D\u8D56\uFF1A" + cycle.join(" \u2192 ") + "\uFF08\u8BF7\u89E3\u9664\u4F9D\u8D56\u540E\u518D\u6FC0\u6D3B\uFF09");
+      for (const name of order) {
+        const plugin = plugins.get(name);
+        try {
+          await plugin.setup(ctx(plugin));
+          statuses.set(name, "active");
+          errors.delete(name);
+        } catch (err) {
+          statuses.set(name, "crashed");
+          errors.set(name, err instanceof Error ? err.message : String(err));
+        }
+      }
+      return Array.from(plugins.keys()).map((name) => ({
+        name,
+        version: plugins.get(name).version,
+        status: statuses.get(name) ?? "registered",
+        error: errors.get(name)
+      }));
+    },
+    list() {
+      return Array.from(plugins.keys()).map((name) => ({
+        name,
+        version: plugins.get(name).version,
+        status: statuses.get(name) ?? "registered",
+        error: errors.get(name)
+      }));
+    },
+    get: (name) => plugins.get(name)
+  };
+}
+
+// src/panel.ts
+var VIEWS = ["timeline", "flamegraph", "state", "route", "errors", "components", "pages", "graph", "device", "ownership"];
+var VIEW_ICONS = {
+  timeline: "\u229E",
+  flamegraph: "\u25A4",
+  state: "\u2630",
+  route: "\u21C4",
+  errors: "\u2715",
+  components: "\u25EB",
+  pages: "\u25A6",
+  graph: "\u232C",
+  device: "\u2699",
+  ownership: "\u2B21"
+};
+function createDevtoolsPanel(root, options) {
+  const { source, onTimeTravel } = options;
+  root.classList.add("pd-panel");
+  root.replaceChildren();
+  const header = document.createElement("div");
+  header.className = "pd-header";
+  const title = document.createElement("div");
+  title.className = "pd-header-title";
+  title.textContent = "Proteus DevTools";
+  header.appendChild(title);
+  const status = document.createElement("div");
+  status.className = "pd-header-status";
+  const dot = document.createElement("span");
+  dot.className = "pd-dot";
+  const statusText = document.createElement("span");
+  statusText.textContent = "\u8FDE\u63A5\u4E2D";
+  status.appendChild(dot);
+  status.appendChild(statusText);
+  header.appendChild(status);
+  root.appendChild(header);
+  const bodyRow = document.createElement("div");
+  bodyRow.className = "pd-body-row";
+  const sidebar = document.createElement("div");
+  sidebar.className = "pd-sidebar";
+  const content = document.createElement("div");
+  content.className = "pd-content";
+  bodyRow.appendChild(sidebar);
+  bodyRow.appendChild(content);
+  root.appendChild(bodyRow);
+  const tooltip = createTooltipLayer();
+  const unbindTip = bindTooltip(root, tooltip, (target) => resolveTipData(target));
+  const views = /* @__PURE__ */ new Map();
+  const containers = /* @__PURE__ */ new Map();
+  const pluginViews = /* @__PURE__ */ new Map();
+  const pluginSubs = [];
+  const crashedPlugins = /* @__PURE__ */ new Map();
+  for (const v of VIEWS) {
+    const item = document.createElement("div");
+    item.className = "pd-nav-item";
+    item.dataset.view = v;
+    const icon = document.createElement("span");
+    icon.className = "pd-nav-icon";
+    icon.textContent = VIEW_ICONS[v];
+    const label = document.createElement("span");
+    label.textContent = v;
+    item.appendChild(icon);
+    item.appendChild(label);
+    sidebar.appendChild(item);
+    const container = document.createElement("div");
+    container.className = "pd-view";
+    container.dataset.view = v;
+    views.set(v, container);
+    containers.set(v, container);
+    content.appendChild(container);
+  }
+  function registerView(id, label, icon, render, pluginName) {
+    if (views.has(id)) return;
+    const item = document.createElement("div");
+    item.className = "pd-nav-item";
+    item.dataset.view = id;
+    const ic = document.createElement("span");
+    ic.className = "pd-nav-icon";
+    ic.textContent = icon ?? "\u25B8";
+    const lb = document.createElement("span");
+    lb.textContent = label;
+    item.appendChild(ic);
+    item.appendChild(lb);
+    sidebar.appendChild(item);
+    const container = document.createElement("div");
+    container.className = "pd-view";
+    container.dataset.view = id;
+    views.set(id, container);
+    containers.set(id, container);
+    pluginViews.set(id, { name: pluginName, render });
+    content.appendChild(container);
+  }
+  const storage = options.storage ?? createMemoryStorage();
+  const commands = createCommandRegistry();
+  const registry = createPluginRegistry(options.plugins ?? []);
+  function broadcastToPlugins(e) {
+    for (const s of pluginSubs.slice()) s.cb(e);
+  }
+  function crashPlugin(name, err) {
+    crashedPlugins.set(name, err instanceof Error ? err.message : String(err));
+    for (let i = pluginSubs.length - 1; i >= 0; i--) {
+      if (pluginSubs[i].name === name) pluginSubs.splice(i, 1);
+    }
+  }
+  const zoom = createTimelineZoom(containers.get("timeline"), () => timeline.spans(), {
+    onWindowChange: () => scheduleRender()
+  });
+  const timelineView = containers.get("timeline");
+  let tlScrollTop = 0;
+  let tlViewHeight = 300;
+  const onTimelineScroll = () => {
+    tlScrollTop = timelineView.scrollTop;
+    scheduleRender();
+  };
+  timelineView.addEventListener("scroll", onTimelineScroll);
+  function show(view) {
+    for (const [k, el] of views) el.classList.toggle("pd-view-active", k === view);
+    for (const el of Array.from(sidebar.children)) el.classList.toggle("pd-nav-active", el.dataset.view === view);
+    if (view === "device") startMemorySampling();
+    else stopMemorySampling();
+  }
+  sidebar.addEventListener("click", (e) => {
+    const t = e.target.closest(".pd-nav-item");
+    if (t?.dataset.view) show(t.dataset.view);
+  });
+  const timeline = createTimelineCollector();
+  const flame = createFlamegraphCollector();
+  const errors = createErrorDiagnoser();
+  const navs = [];
+  const inflightNav = /* @__PURE__ */ new Map();
+  const storeSnapshots = /* @__PURE__ */ new Map();
+  const storePatchHistory = /* @__PURE__ */ new Map();
+  const storeSteps = [];
+  let stepSeq = 0;
+  let selectedStore = "";
+  const componentNodes = /* @__PURE__ */ new Map();
+  const componentDom = /* @__PURE__ */ new Map();
+  let selectedComponent = 0;
+  let travelIndex = null;
+  const sessionEvents = [];
+  const SESSION_EVENT_CAP = 2e4;
+  function pushSessionEvent(e) {
+    sessionEvents.push(e);
+    if (sessionEvents.length > SESSION_EVENT_CAP) sessionEvents.shift();
+  }
+  const memorySamples = [];
+  let memoryTimer = null;
+  const MEMORY_SAMPLE_MS = 1e3;
+  function sampleMemory() {
+    const perf = performance;
+    const mem = perf.memory;
+    if (!mem) return;
+    memorySamples.push({ t: Date.now(), used: mem.usedJSHeapSize, total: mem.totalJSHeapSize, limit: mem.jsHeapLimit });
+    if (memorySamples.length > 60) memorySamples.shift();
+    scheduleRender();
+  }
+  function startMemorySampling() {
+    if (memoryTimer) return;
+    memoryTimer = setInterval(sampleMemory, MEMORY_SAMPLE_MS);
+    sampleMemory();
+  }
+  function stopMemorySampling() {
+    if (memoryTimer) {
+      clearInterval(memoryTimer);
+      memoryTimer = null;
+    }
+  }
+  function handleEvent(e) {
+    if (e.source === "store" && e.payload && typeof e.payload === "object") {
+      const p = e.payload;
+      if (typeof p.id === "string" && !/action/i.test(e.name)) {
+        const state = {};
+        for (const k of Object.keys(p)) if (k !== "id") state[k] = p[k];
+        const hist = storePatchHistory.get(p.id) ?? [];
+        if (hist.some((h) => JSON.stringify(h.state) === JSON.stringify(state))) {
+          storeSnapshots.set(p.id, state);
+          if (!selectedStore) selectedStore = p.id;
+          return true;
+        }
+      }
+    }
+    timeline.ingest(e);
+    flame.ingest(e);
+    errors.ingest(e);
+    if (e.source === "router") {
+      if (e.phase === "start" && /nav/i.test(e.name)) {
+        const p = e.payload ?? {};
+        const id = e.traceId ?? e.name + "-" + e.timestamp;
+        inflightNav.set(id, {
+          record: {
+            id,
+            from: { path: p.from?.path ?? "?" },
+            to: { path: p.to?.path ?? e.name, query: p.to?.query },
+            guards: [],
+            durationMs: 0,
+            traceId: e.traceId,
+            timestamp: e.timestamp
+          }
+        });
+      } else if (e.phase === "end" && /nav/i.test(e.name)) {
+        const id = e.traceId ?? e.name + "-" + e.timestamp;
+        const nav = inflightNav.get(id);
+        if (nav) {
+          nav.record.durationMs = Math.max(0, e.timestamp - nav.record.timestamp);
+          navs.push(nav.record);
+          inflightNav.delete(id);
+          if (navs.length > 500) navs.shift();
+        }
+      } else if (/guard/i.test(e.name)) {
+        let target = null;
+        let targetTs = -Infinity;
+        for (const nav of inflightNav.values()) {
+          if (nav.record.timestamp > targetTs) {
+            target = nav;
+            targetTs = nav.record.timestamp;
+          }
+        }
+        if (target) {
+          let result = "next";
+          if (/redirect/i.test(e.name)) result = "redirect";
+          else if (/cancel/i.test(e.name)) result = "cancel";
+          else if (/error/i.test(e.name)) result = "error";
+          target.record.guards.push({ name: e.name, durationMs: 0, result });
+        }
+      }
+    }
+    if (e.source === "store") {
+      if (e.payload && typeof e.payload === "object") {
+        const p = e.payload;
+        if (typeof p.id === "string") {
+          const index = stepSeq++;
+          const isAction = /action/i.test(e.name);
+          if (isAction) {
+            storeSteps.push({
+              index,
+              storeId: p.id,
+              type: "action",
+              name: String(p.name ?? "?"),
+              payload: e.payload,
+              timestamp: e.timestamp
+            });
+            if (storeSteps.length > 1e3) storeSteps.shift();
+          } else {
+            const state = {};
+            for (const k of Object.keys(p)) if (k !== "id") state[k] = p[k];
+            storeSnapshots.set(p.id, state);
+            if (!selectedStore) selectedStore = p.id;
+            const list = storePatchHistory.get(p.id) ?? [];
+            list.push({ stepIndex: index, state });
+            storePatchHistory.set(p.id, list);
+            storeSteps.push({
+              index,
+              storeId: p.id,
+              type: "patch",
+              name: "patch",
+              payload: e.payload,
+              timestamp: e.timestamp
+            });
+            if (storeSteps.length > 1e3) storeSteps.shift();
+          }
+          travelIndex = null;
+        }
+      }
+    }
+    if (e.source === "component" && e.payload && typeof e.payload === "object") {
+      const p = e.payload;
+      if (typeof p.id === "number") {
+        if (/inspect/i.test(e.name)) {
+          componentDom.set(p.id, p.dom ?? { tag: "?", children: [] });
+        } else if (/unmount/i.test(e.name)) {
+          componentNodes.delete(p.id);
+          componentDom.delete(p.id);
+        } else if (/mount/i.test(e.name)) {
+          const existing = componentNodes.get(p.id);
+          componentNodes.set(p.id, {
+            id: p.id,
+            name: p.name ?? "Anonymous",
+            parentId: p.parentId,
+            ts: e.timestamp,
+            count: (existing?.count ?? 0) + 1,
+            // ★P1：mount 时刻 props/state 快照（序列化后 JSON-safe；详情面板展示）
+            props: p.props,
+            state: p.state
+          });
+        }
+      }
+    }
+    pushSessionEvent(e);
+    return true;
+  }
+  const fgControls = document.createElement("div");
+  fgControls.className = "pd-fg-controls";
+  const recBtn = document.createElement("button");
+  recBtn.className = "pd-btn";
+  recBtn.textContent = "\u5F00\u59CB\u5F55\u5236";
+  let baseline = null;
+  let compareEntries = [];
+  let flameFocus = null;
+  let flamePath = [];
+  function findFlameNode(id) {
+    const path = [];
+    const walk = (n) => {
+      path.push(n);
+      if (n.id === id) return true;
+      for (const c of n.children) if (walk(c)) return true;
+      path.pop();
+      return false;
+    };
+    for (const r of flame.roots()) if (walk(r)) return { node: path[path.length - 1], path: path.slice() };
+    return null;
+  }
+  recBtn.addEventListener("click", () => {
+    flameFocus = null;
+    flamePath = [];
+    if (flame.recording) {
+      flame.stop();
+      recBtn.textContent = "\u5F00\u59CB\u5F55\u5236";
+      if (baseline) compareEntries = flame.compare(baseline);
+      else compareEntries = [];
+      baseline = flame.roots();
+    } else {
+      compareEntries = [];
+      flame.start();
+      recBtn.textContent = "\u505C\u6B62\u5F55\u5236";
+    }
+    rerender();
+  });
+  fgControls.appendChild(recBtn);
+  function restoreAt(index) {
+    const out = [];
+    for (const [id, history] of storePatchHistory) {
+      let state = null;
+      for (const h of history) {
+        if (h.stepIndex <= index) state = h.state;
+        else break;
+      }
+      if (state) out.push({ id, state });
+    }
+    return out;
+  }
+  function setPathAt(obj, path, value) {
+    if (path.length === 0) return false;
+    let cur = obj;
+    for (let i = 0; i < path.length - 1; i++) {
+      const k = path[i];
+      const next = cur[k];
+      if (next === null || typeof next !== "object") return false;
+      cur = next;
+    }
+    const last = path[path.length - 1];
+    if (Array.isArray(cur)) {
+      ;
+      cur[Number(last)] = value;
+    } else {
+      ;
+      cur[last] = value;
+    }
+    return true;
+  }
+  function editStoreValue(storeId, path, value) {
+    const cur = storeSnapshots.get(storeId);
+    if (!cur) return;
+    const next = JSON.parse(JSON.stringify(cur));
+    if (!setPathAt(next, path, value)) return;
+    storeSnapshots.set(storeId, next);
+    options.onApplyState?.([{ id: storeId, state: next }]);
+    source.sendCommand?.("Proteus.restoreStores", { stores: [{ id: storeId, state: next }] });
+    scheduleRender();
+  }
+  function exportSnapshot() {
+    const stores = Array.from(storeSnapshots.entries()).map((kv) => ({ id: kv[0], state: kv[1] }));
+    const json = serializeStoreSnapshot({ stores, steps: storeSteps.map((s) => ({ index: s.index, storeId: s.storeId, type: s.type, name: s.name, payload: s.payload, timestamp: s.timestamp })) });
+    const sensitive = findSensitiveKeys(stores);
+    if (sensitive.length) {
+      const summary = sensitive.map((h) => `${h.storeId}: ${h.keys.join(", ")}`).join("\uFF1B");
+      const ok = typeof window !== "undefined" && typeof window.confirm === "function" ? window.confirm(`\u5FEB\u7167\u5305\u542B\u654F\u611F\u5B57\u6BB5\uFF08\u5C06\u4E00\u5E76\u5BFC\u51FA\uFF09\uFF1A
+${summary}
+
+\u786E\u8BA4\u5BFC\u51FA\uFF1F`) : true;
+      if (!ok) return "";
+    }
+    if (typeof URL === "undefined" || typeof URL.createObjectURL !== "function") return json;
+    const blob = new Blob([json], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "proteus-store-snapshot.json";
+    a.click();
+    URL.revokeObjectURL(url);
+    return json;
+  }
+  function importSnapshot(json) {
+    const parsed = parseStoreSnapshot(json);
+    if (!parsed) return;
+    storeSnapshots.clear();
+    storePatchHistory.clear();
+    storeSteps.length = 0;
+    stepSeq = 0;
+    selectedStore = "";
+    for (const s of parsed.stores) {
+      storeSnapshots.set(s.id, s.state);
+      if (!selectedStore) selectedStore = s.id;
+    }
+    for (const st of parsed.steps) {
+      const index = stepSeq++;
+      storeSteps.push({ index, storeId: st.storeId, type: st.type, name: st.name, payload: st.payload, timestamp: st.timestamp });
+      if (st.type === "patch" && st.payload && typeof st.payload === "object") {
+        const p = st.payload;
+        const state = {};
+        for (const k of Object.keys(p)) if (k !== "id") state[k] = p[k];
+        const list = storePatchHistory.get(st.storeId) ?? [];
+        list.push({ stepIndex: index, state });
+        storePatchHistory.set(st.storeId, list);
+      }
+    }
+    scheduleRender();
+    options.onApplyState?.(Array.from(storeSnapshots.entries()).map((kv) => ({ id: kv[0], state: kv[1] })));
+  }
+  function exportSession() {
+    const json = serializeSession({
+      events: sessionEvents,
+      device: options.deviceInfo ? options.deviceInfo() : source.deviceInfo?.() ?? void 0,
+      stores: Array.from(storeSnapshots.entries()).map((kv) => ({ id: kv[0], state: kv[1] })),
+      steps: storeSteps.map((s) => ({ index: s.index, storeId: s.storeId, type: s.type, name: s.name, payload: s.payload, timestamp: s.timestamp }))
+    });
+    if (typeof URL === "undefined" || typeof URL.createObjectURL !== "function") return json;
+    const blob = new Blob([json], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "proteus-session.json";
+    a.click();
+    URL.revokeObjectURL(url);
+    return json;
+  }
+  function importSession(json) {
+    const parsed = parseSession(json);
+    if (!parsed) return;
+    timeline.clear();
+    errors.clear();
+    navs.length = 0;
+    inflightNav.clear();
+    storeSnapshots.clear();
+    storePatchHistory.clear();
+    storeSteps.length = 0;
+    stepSeq = 0;
+    travelIndex = null;
+    selectedStore = "";
+    componentNodes.clear();
+    componentDom.clear();
+    selectedComponent = 0;
+    sessionEvents.length = 0;
+    for (const e of parsed.events) handleEvent(e);
+    options.onApplyState?.(Array.from(storeSnapshots.entries()).map((kv) => ({ id: kv[0], state: kv[1] })));
+    scheduleRender();
+  }
+  function timeTravel(index) {
+    travelIndex = index;
+    options.onTimeTravel?.(index);
+    const restore = restoreAt(index);
+    options.onApplyState?.(restore);
+    source.sendCommand?.("Proteus.restoreStores", { stores: restore });
+  }
+  function rerender() {
+    tlViewHeight = timelineView.clientHeight || 300;
+    renderTimeline(containers.get("timeline"), { spans: timeline.spans(), window: zoom.getWindow() ?? void 0, virtual: { scrollTop: tlScrollTop, viewHeight: tlViewHeight } });
+    function fgData() {
+      const data = { nodes: flame.roots(), compare: compareEntries.length ? compareEntries : void 0 };
+      if (flameFocus && flamePath.length) {
+        data.focus = flameFocus;
+        data.breadcrumb = flamePath.map((n) => ({ id: n.id, name: n.source + "." + n.name }));
+      }
+      return data;
+    }
+    renderFlamegraph(containers.get("flamegraph"), fgData(), {
+      // ★点击块 → 聚焦缩放（zoom 到该节点子树）
+      onFocus: (id) => {
+        const found = findFlameNode(id);
+        if (found) {
+          flameFocus = found.node;
+          flamePath = found.path;
+          scheduleRender();
+        }
+      },
+      // ★返回上级（面包屑上一级；根 → 退出聚焦）
+      onFocusUp: () => {
+        if (flamePath.length > 1) {
+          const parent = findFlameNode(flamePath[flamePath.length - 2].id);
+          if (parent) {
+            flameFocus = parent.node;
+            flamePath = parent.path;
+          } else {
+            flameFocus = null;
+            flamePath = [];
+          }
+        } else {
+          flameFocus = null;
+          flamePath = [];
+        }
+        scheduleRender();
+      }
+    });
+    const flameContainer = containers.get("flamegraph");
+    flameContainer.insertBefore(fgControls, flameContainer.firstChild);
+    renderErrors(containers.get("errors"), { reports: errors.diagnose() });
+    renderRoute(containers.get("route"), { records: navs });
+    renderState(
+      containers.get("state"),
+      {
+        snapshot: { version: 1, takenAt: Date.now(), stores: Array.from(storeSnapshots.entries()).map((kv) => ({ id: kv[0], state: kv[1] })) },
+        // ★P0：真实 before/after（patch 步骤：该 store 补丁历史中前一条/本条状态；action 步骤无状态变更）
+        steps: storeSteps.map((s) => {
+          let before = {};
+          let after = {};
+          if (s.type === "patch") {
+            const hist = storePatchHistory.get(s.storeId) ?? [];
+            const idx = hist.findIndex((h) => h.stepIndex === s.index);
+            if (idx >= 0) {
+              after = hist[idx].state;
+              if (idx > 0) before = hist[idx - 1].state;
+            }
+          }
+          return { index: s.index, storeId: s.storeId, type: s.type, payload: s.payload, timestamp: s.timestamp, before, after };
+        }),
+        selectedStore,
+        // ★滑块回放位置（rerender 后保持；新真实变更重置为最新）
+        travelIndex: travelIndex ?? void 0
+      },
+      {
+        onTimeTravel: timeTravel,
+        onSelectStore: (id) => {
+          selectedStore = id;
+          scheduleRender();
+        },
+        onExport: exportSnapshot,
+        onImport: importSnapshot,
+        // ★M11 可观测性（M8.2）：会话导出/导入（完整还原另一环境）
+        onExportSession: exportSession,
+        onImportSession: importSession,
+        // ★双向调试：值编辑 → 面板快照 + 本地/远程双通道写回（$patch 真实状态）
+        onEditValue: editStoreValue
+      }
+    );
+    const deviceInfo = options.deviceInfo ? options.deviceInfo() : source.deviceInfo?.() ?? void 0;
+    renderDevice(containers.get("device"), { info: deviceInfo, memory: memorySamples.slice() });
+    const ownershipData = options.ownershipData ? options.ownershipData() : source.ownership?.() ?? void 0;
+    renderOwnership(containers.get("ownership"), ownershipData);
+    renderComponents(
+      containers.get("components"),
+      { nodes: Array.from(componentNodes.values()), selectedId: selectedComponent || void 0, dom: selectedComponent ? componentDom.get(selectedComponent) : void 0 },
+      {
+        // ★P1：点击选中（同 id 再点取消选中）；首次选中 → 页面元素高亮回调
+        onSelect: (id) => {
+          if (selectedComponent === id) {
+            selectedComponent = 0;
+          } else {
+            selectedComponent = id;
+            options.onSelectComponent?.(id);
+          }
+          scheduleRender();
+        }
+      }
+    );
+    renderPages(containers.get("pages"), resolvePagesData());
+    renderGraph(containers.get("graph"), { routes: resolvePagesData().routes });
+    for (const [id, pv] of pluginViews) {
+      const container = containers.get(id);
+      const err = crashedPlugins.get(pv.name);
+      if (err !== void 0) {
+        renderPluginCrash(container, pv.name, err);
+      } else {
+        try {
+          pv.render(container);
+        } catch (e) {
+          crashPlugin(pv.name, e);
+          renderPluginCrash(container, pv.name, e instanceof Error ? e.message : String(e));
+        }
+      }
+    }
+  }
+  function renderPluginCrash(container, name, err) {
+    container.replaceChildren();
+    const card2 = document.createElement("div");
+    card2.className = "pd-plugin-crash";
+    const t = document.createElement("div");
+    t.className = "pd-plugin-crash-title";
+    t.textContent = "\u63D2\u4EF6\u5D29\u6E83\uFF1A" + name;
+    const m = document.createElement("div");
+    m.className = "pd-plugin-crash-msg";
+    m.textContent = err;
+    card2.appendChild(t);
+    card2.appendChild(m);
+    container.appendChild(card2);
+  }
+  let renderTimer = null;
+  function scheduleRender() {
+    if (renderTimer) return;
+    renderTimer = setTimeout(() => {
+      renderTimer = null;
+      rerender();
+    }, 16);
+  }
+  function resolvePagesData() {
+    if (options.pages) return options.pages;
+    const info = source.appInfo?.();
+    return { routes: info?.routes ?? [] };
+  }
+  let statusConnected = false;
+  const off = source.onEvent((e) => {
+    if (!handleEvent(e)) {
+      broadcastToPlugins(e);
+      return;
+    }
+    broadcastToPlugins(e);
+    scheduleRender();
+    if (!statusConnected) {
+      statusConnected = true;
+      dot.classList.add("pd-dot-on");
+      statusText.textContent = "\u5DF2\u8FDE\u63A5";
+    }
+  });
+  const offStatus = source.onStatus?.((s) => {
+    if (s === "connected" && !statusConnected) {
+      statusConnected = true;
+      dot.classList.add("pd-dot-on");
+      statusText.textContent = "\u5DF2\u8FDE\u63A5";
+    } else if (s === "closed") {
+      statusConnected = false;
+      dot.classList.remove("pd-dot-on");
+      statusText.textContent = "\u5DF2\u65AD\u5F00";
+    }
+  });
+  containers.get("flamegraph").insertBefore(fgControls, containers.get("flamegraph").firstChild);
+  root.style.position = "relative";
+  const paletteBtn = document.createElement("button");
+  paletteBtn.className = "pd-btn pd-palette-btn";
+  paletteBtn.textContent = "\u26A1";
+  paletteBtn.title = "\u547D\u4EE4\u9762\u677F";
+  const palette = document.createElement("div");
+  palette.className = "pd-palette";
+  palette.style.display = "none";
+  function openPalette() {
+    palette.replaceChildren();
+    const ids = commands.list();
+    if (ids.length === 0) {
+      const empty = document.createElement("div");
+      empty.className = "pd-palette-empty";
+      empty.textContent = "\u6682\u65E0\u547D\u4EE4";
+      palette.appendChild(empty);
+    } else {
+      for (const id of ids) {
+        const item = document.createElement("div");
+        item.className = "pd-palette-item";
+        item.textContent = id;
+        item.addEventListener("click", () => {
+          commands.run(id);
+          palette.style.display = "none";
+        });
+        palette.appendChild(item);
+      }
+    }
+    palette.style.display = "block";
+  }
+  paletteBtn.addEventListener("click", () => {
+    if (palette.style.display === "none") openPalette();
+    else palette.style.display = "none";
+  });
+  header.insertBefore(paletteBtn, status);
+  root.appendChild(palette);
+  show("timeline");
+  rerender();
+  if ((options.plugins ?? []).length) {
+    registry.activateAll((plugin) => {
+      const pluginName = plugin.name;
+      return {
+        name: pluginName,
+        bus: {
+          on(cb) {
+            const wrapped = (e) => {
+              try {
+                cb(e);
+              } catch (err) {
+                crashPlugin(pluginName, err);
+              }
+            };
+            pluginSubs.push({ name: pluginName, cb: wrapped });
+            return () => {
+              for (let i = pluginSubs.length - 1; i >= 0; i--) {
+                if (pluginSubs[i].cb === wrapped) pluginSubs.splice(i, 1);
+              }
+            };
+          }
+        },
+        panel: {
+          addView(id, opts) {
+            registerView(id, opts.label, opts.icon, opts.render, pluginName);
+          }
+        },
+        commands,
+        storage
+      };
+    }).then(() => scheduleRender()).catch((err) => {
+      console.error("[proteus-devtools] \u63D2\u4EF6\u6FC0\u6D3B\u5931\u8D25", err);
+      statusText.textContent = "\u63D2\u4EF6\u6FC0\u6D3B\u5931\u8D25";
+    });
+  }
+  return {
+    destroy() {
+      off();
+      offStatus?.();
+      unbindTip();
+      tooltip.dispose();
+      zoom.destroy();
+      timelineView.removeEventListener("scroll", onTimelineScroll);
+      stopMemorySampling();
+      pluginSubs.length = 0;
+      source.close();
+      if (renderTimer) clearTimeout(renderTimer);
+      root.replaceChildren();
+    },
+    show,
+    exportSnapshot,
+    importSnapshot,
+    exportSession,
+    importSession
+  };
+}
+
+// src/source.ts
+function createTraceBusSource(bus) {
+  return {
+    onEvent(cb) {
+      return bus.on(cb);
+    },
+    // 本地直连：进程内总线，状态恒已连接
+    onStatus(cb) {
+      cb("connected");
+      return () => {
+      };
+    },
+    close() {
+    }
+  };
+}
+function createDevtoolsWsSource(url, createSocket) {
+  const makeSocket = createSocket ?? ((u) => new WebSocket(u));
+  const handlers = [];
+  const statusHandlers = [];
+  let ws = null;
+  let closed = false;
+  let seq = 0;
+  let reconnectTimer = null;
+  let appInfoCache;
+  let status = "connecting";
+  let enableId = null;
+  let appInfoId = null;
+  let enableAcked = false;
+  let retryTimer = null;
+  let deviceInfoId = null;
+  let deviceInfoCache;
+  let ownershipId = null;
+  let ownershipCache;
+  function setStatus(s) {
+    status = s;
+    for (const h of statusHandlers) h(s);
+  }
+  function sendCommands(sock) {
+    enableId = ++seq;
+    enableAcked = false;
+    sock.send(JSON.stringify({ id: enableId, method: "Proteus.enable" }));
+    appInfoId = ++seq;
+    sock.send(JSON.stringify({ id: appInfoId, method: "Proteus.appInfo" }));
+    deviceInfoId = ++seq;
+    sock.send(JSON.stringify({ id: deviceInfoId, method: "Proteus.deviceInfo" }));
+    ownershipId = ++seq;
+    sock.send(JSON.stringify({ id: ownershipId, method: "Proteus.ownership" }));
+  }
+  function sendCommand(method, params) {
+    if (!ws || ws.readyState !== WebSocket.OPEN) return;
+    ws.send(JSON.stringify({ id: ++seq, method, params }));
+  }
+  function startRetry() {
+    if (retryTimer) return;
+    retryTimer = setInterval(() => {
+      if (closed || !ws || ws.readyState !== WebSocket.OPEN || enableAcked) return;
+      sendCommands(ws);
+    }, 2e3);
+  }
+  function connect() {
+    if (closed) return;
+    try {
+      ws = makeSocket(url);
+    } catch {
+      scheduleReconnect();
+      return;
+    }
+    const sock = ws;
+    sock.onopen = () => {
+      setStatus("connected");
+      sendCommands(sock);
+      startRetry();
+    };
+    sock.onmessage = (ev) => {
+      let msg;
+      try {
+        msg = JSON.parse(String(ev.data));
+      } catch {
+        return;
+      }
+      if (!msg || typeof msg !== "object") return;
+      if (msg.id === enableId && msg.result !== void 0) {
+        enableAcked = true;
+        return;
+      }
+      if (msg.id === appInfoId && msg.result !== void 0) {
+        appInfoCache = msg.result;
+        return;
+      }
+      if (msg.id === deviceInfoId && msg.result !== void 0) {
+        deviceInfoCache = msg.result;
+        return;
+      }
+      if (msg.id === ownershipId && msg.result !== void 0) {
+        ownershipCache = msg.result;
+        return;
+      }
+      if (msg.method !== "Proteus.event") return;
+      const p = msg.params ?? {};
+      const source = p.source;
+      const name = p.name;
+      if (!source || !name) return;
+      const event = {
+        source,
+        phase: p.phase ?? "point",
+        name,
+        payload: p.payload,
+        timestamp: p.timestamp ?? Date.now(),
+        traceId: p.traceId
+      };
+      for (const h of handlers) h(event);
+    };
+    sock.onclose = () => {
+      setStatus("closed");
+      if (!closed) scheduleReconnect();
+    };
+  }
+  function scheduleReconnect() {
+    if (closed || reconnectTimer) return;
+    reconnectTimer = setTimeout(() => {
+      reconnectTimer = null;
+      connect();
+    }, 1e3);
+  }
+  connect();
+  return {
+    onEvent(cb) {
+      handlers.push(cb);
+      return () => {
+        const i = handlers.indexOf(cb);
+        if (i >= 0) handlers.splice(i, 1);
+      };
+    },
+    onStatus(cb) {
+      statusHandlers.push(cb);
+      cb(status);
+      return () => {
+        const i = statusHandlers.indexOf(cb);
+        if (i >= 0) statusHandlers.splice(i, 1);
+      };
+    },
+    close() {
+      closed = true;
+      if (reconnectTimer) {
+        clearTimeout(reconnectTimer);
+        reconnectTimer = null;
+      }
+      if (retryTimer) {
+        clearInterval(retryTimer);
+        retryTimer = null;
+      }
+      ws?.close();
+      ws = null;
+    },
+    appInfo() {
+      return appInfoCache;
+    },
+    /** ★M8：设备信息（环境/能力；Proteus.deviceInfo 命令响应缓存；未确认前 undefined） */
+    deviceInfo() {
+      return deviceInfoCache;
+    },
+    /** ★G-43 B4：所有权视图数据（Proteus.ownership 命令响应缓存；未确认前 undefined） */
+    ownership() {
+      return ownershipCache;
+    },
+    sendCommand
+  };
+}
+
+// src/ws-bridge.ts
+function createTraceBusWsBridge(bus, options) {
+  const ws = new WebSocket(options.url);
+  function sendEvent(e) {
+    if (ws.readyState !== WebSocket.OPEN) return;
+    ws.send(
+      JSON.stringify({
+        method: "Proteus.event",
+        params: { source: e.source, phase: e.phase, name: e.name, payload: e.payload, timestamp: e.timestamp, traceId: e.traceId }
+      })
+    );
+  }
+  const off = bus.on((e) => sendEvent(e));
+  ws.onmessage = (ev) => {
+    let msg = null;
+    try {
+      msg = JSON.parse(String(ev.data));
+    } catch {
+      return;
+    }
+    if (!msg || typeof msg !== "object") return;
+    if (msg.method === "Proteus.enable") {
+      for (const e of bus.flush()) sendEvent(e);
+      ws.send(JSON.stringify({ id: msg.id, result: {} }));
+    } else if (msg.method === "Proteus.appInfo") {
+      ws.send(JSON.stringify({ id: msg.id, result: options.appInfo ? options.appInfo() : {} }));
+    } else if (msg.method === "Proteus.deviceInfo") {
+      ws.send(JSON.stringify({ id: msg.id, result: options.deviceInfo ? options.deviceInfo() : {} }));
+    } else if (msg.method === "Proteus.ownership") {
+      ws.send(JSON.stringify({ id: msg.id, result: options.ownership ? options.ownership() : {} }));
+    } else if (msg.method === "Proteus.restoreStores") {
+      const params = msg.params;
+      if (options.onRestoreStores && Array.isArray(params?.stores)) {
+        options.onRestoreStores(params.stores);
+      }
+      ws.send(JSON.stringify({ id: msg.id, result: {} }));
+    }
+  };
+  return {
+    close() {
+      off();
+      ws.close();
+    }
+  };
+}
+
+// src/vue-devtools.ts
+var LAYER_ID = "proteus";
+function toTimelineEvent(e) {
+  return {
+    time: e.timestamp,
+    title: e.source + "." + e.name,
+    subtitle: e.phase,
+    data: {
+      source: e.source,
+      name: e.name,
+      phase: e.phase,
+      traceId: e.traceId,
+      payload: e.payload
+    },
+    groupId: e.traceId ?? e.source
+  };
+}
+function installProteusTimeline(api, options) {
+  api.addTimelineLayer({ id: LAYER_ID, label: "Proteus", color: options.color ?? 11101205 });
+  const off = options.source.onEvent((e) => {
+    api.addTimelineEvent({ layerId: LAYER_ID, event: toTimelineEvent(e) });
+  });
+  return {
+    dispose: off,
+    get layerId() {
+      return LAYER_ID;
+    }
+  };
+}
+function pathToPatch(path, value, groupKey) {
+  let p = path;
+  if (groupKey && p[0] === groupKey) p = p.slice(1);
+  const root = {};
+  let cur = root;
+  for (let i = 0; i < p.length - 1; i++) {
+    const next = {};
+    cur[p[i]] = next;
+    cur = next;
+  }
+  cur[p[p.length - 1]] = value;
+  return root;
+}
+function configToStateRows(config) {
+  const keys = Object.keys(config);
+  return keys.length ? keys.map((k) => ({ key: k, value: config[k] })) : [{ key: "(empty)", value: {} }];
+}
+var PROTEUS_DEVTOOLS_PLUGIN_DESCRIPTOR = {
+  id: "proteus",
+  label: "Proteus",
+  /** ★触发 fallback 的占位 logo（根相对路径：扩展/独立/dev server 下 404 或图片解码失败 → img error）
+   * 不能传 undefined（三个 inspector 全默认图标），也不能传真实图片 URL（会直接显示图片而非字典图标） */
+  logo: "/__proteus-inspector-icons__.svg"
+};
+var APP_CONFIG_INSPECTOR = "proteus-app-config";
+var STYLE_SAFETY_INSPECTOR = "proteus-style-safety";
+var ROUTER_INSPECTOR = "proteus-router";
+var TAG_STYLE = { textColor: 16777215, backgroundColor: 1735416 };
+function buildRouterTree(routes, currentRoute) {
+  const byName = new Map(routes.map((r) => [r.name, r]));
+  const childrenOf = /* @__PURE__ */ new Map();
+  const roots = [];
+  for (const r of routes) {
+    if (r.parent && byName.has(r.parent)) {
+      const list = childrenOf.get(r.parent) ?? [];
+      list.push(r);
+      childrenOf.set(r.parent, list);
+    } else {
+      roots.push(r);
+    }
+  }
+  const CURRENT_STYLE = { textColor: 16777215, backgroundColor: 508256 };
+  const toNode = (r) => ({
+    id: r.name,
+    label: r.meta?.title ?? r.name,
+    // ★当前路由高亮（path 匹配 → 绿色「当前」tag）
+    tags: [
+      ...r.path === currentRoute ? [{ label: "\u5F53\u524D", ...CURRENT_STYLE }] : [],
+      { label: r.path, ...TAG_STYLE }
+    ],
+    children: (childrenOf.get(r.name) ?? []).map(toNode)
+  });
+  return roots.map(toNode);
+}
+function installProteusInspectors(api, options = {}) {
+  api.addInspector({ id: APP_CONFIG_INSPECTOR, label: "App Config", icon: "settings" });
+  api.on.getInspectorTree((payload) => {
+    if (payload.inspectorId !== APP_CONFIG_INSPECTOR) return;
+    payload.rootNodes = [{ id: "root", label: "App Config" }];
+  });
+  api.on.getInspectorState((payload) => {
+    if (payload.inspectorId !== APP_CONFIG_INSPECTOR) return;
+    payload.state = { resolved: configToStateRows(options.getConfig ? options.getConfig() : {}) };
+  });
+  if (options.setConfig) {
+    api.on.editInspectorState((payload) => {
+      if (payload.inspectorId !== APP_CONFIG_INSPECTOR) return;
+      options.setConfig?.(pathToPatch(payload.path, payload.state.value, "resolved"));
+    });
+  }
+  if (options.getStyleSafetyRecords) {
+    api.addInspector({ id: STYLE_SAFETY_INSPECTOR, label: "Style Safety", icon: "gpp-good" });
+    api.on.getInspectorTree((payload) => {
+      if (payload.inspectorId !== STYLE_SAFETY_INSPECTOR) return;
+      payload.rootNodes = [{ id: "root", label: "Style Safety" }];
+    });
+    api.on.getInspectorState((payload) => {
+      if (payload.inspectorId !== STYLE_SAFETY_INSPECTOR) return;
+      const records = options.getStyleSafetyRecords();
+      payload.state = {
+        rejected: records.map((r, i) => ({ key: r.prop || "#" + i, value: { value: r.value, reason: r.reason, ts: r.ts } }))
+      };
+    });
+  }
+  if (options.pages) {
+    api.addInspector({ id: ROUTER_INSPECTOR, label: "Router", icon: "route" });
+    api.on.getInspectorTree((payload) => {
+      if (payload.inspectorId !== ROUTER_INSPECTOR) return;
+      const routerState = options.getRouterState?.();
+      const nodes = buildRouterTree(options.pages?.routes ?? [], routerState?.currentRoute);
+      if (routerState) {
+        const recordNodes = routerState.records.slice(-20).reverse().map((r) => ({
+          id: "rec-" + r.timestamp,
+          // ★带参导航显示 query（如 pages/user/profile?id=1）
+          label: `${r.from} \u2192 ${r.to}${r.query && Object.keys(r.query).length ? "?" + new URLSearchParams(r.query).toString() : ""}`,
+          tags: [{ label: r.durationMs + "ms", ...TAG_STYLE }]
+        }));
+        nodes.unshift({
+          id: "proteus-records",
+          label: `\u5BFC\u822A\u8BB0\u5F55 (${routerState.records.length})`,
+          tags: routerState.currentRoute ? [{ label: "\u5F53\u524D: " + routerState.currentRoute, ...TAG_STYLE }] : void 0,
+          children: recordNodes
+        });
+      }
+      payload.rootNodes = nodes;
+    });
+    api.on.getInspectorState((payload) => {
+      if (payload.inspectorId !== ROUTER_INSPECTOR) return;
+      if (payload.nodeId === "proteus-records") {
+        const state = options.getRouterState?.();
+        payload.state = {
+          \u5BFC\u822A\u8BB0\u5F55: [
+            { key: "currentRoute", value: state?.currentRoute ?? "\u2014" },
+            { key: "records", value: (state?.records ?? []).slice(-50).reverse() }
+          ]
+        };
+        return;
+      }
+      if (payload.nodeId.startsWith("rec-")) {
+        const rec = (options.getRouterState?.()?.records ?? []).find((r) => "rec-" + r.timestamp === payload.nodeId);
+        payload.state = rec ? {
+          \u5BFC\u822A\u72B6\u6001: [
+            { key: "from", value: rec.from },
+            { key: "to", value: rec.to },
+            { key: "query", value: rec.query ?? {} },
+            { key: "durationMs", value: rec.durationMs },
+            { key: "timestamp", value: rec.timestamp },
+            { key: "traceId", value: rec.traceId ?? "\u2014" },
+            { key: "guards", value: rec.guards }
+          ]
+        } : {};
+        return;
+      }
+      const route = (options.pages?.routes ?? []).find((r) => r.name === payload.nodeId);
+      if (!route) {
+        payload.state = {};
+        return;
+      }
+      payload.state = {
+        \u8DEF\u7531: [
+          { key: "path", value: route.path },
+          { key: "parent", value: route.parent ?? "\u2014" },
+          { key: "subPackage", value: route.subPackage ?? "\u2014" },
+          { key: "meta", value: route.meta ?? {} }
+        ]
+      };
+    });
+  }
+  return {
+    dispose() {
+    }
+  };
+}
+
+// src/ownership-info.ts
+import {
+  createOwnershipCounters,
+  createOwnershipHistory,
+  diagnoseOwnershipIssues,
+  buildOwnershipTimeline,
+  getProteusOwnershipGraph
+} from "@proteus-vue/render-backend";
+var TIMELINE_LIMIT = 200;
+function createOwnershipTracer(options = {}) {
+  const graph = options.graph ?? getProteusOwnershipGraph();
+  const counters = createOwnershipCounters(graph);
+  const history = options.history ?? createOwnershipHistory(graph);
+  let disposed = false;
+  function collect() {
+    if (disposed) {
+      return {
+        summary: { alive: 0, total: 0, bytesAlive: 0, byType: {} },
+        diagnosis: { orphans: [], leaks: [], longBorrows: [], crossPageRefs: [] },
+        resources: [],
+        timeline: { events: [], unpairedIds: [], truncated: false }
+      };
+    }
+    const diagnosis = diagnoseOwnershipIssues(graph);
+    const seenAllocIds = /* @__PURE__ */ new Set();
+    for (const r of history.records) {
+      if (r.kind === "alloc" && r.id) seenAllocIds.add(r.id);
+    }
+    const merged = [...history.records];
+    for (const n of graph.nodes.values()) {
+      if (!seenAllocIds.has(n.id)) {
+        merged.push({ ts: n.createdAt, kind: "alloc", id: n.id, owner: n.owner, type: n.type, byteSize: n.byteSize, sourceLocation: n.sourceLocation });
+      }
+    }
+    merged.sort((a, b) => a.ts - b.ts);
+    const tl = buildOwnershipTimeline({ records: merged }, graph);
+    const truncated = tl.events.length > TIMELINE_LIMIT;
+    const events = truncated ? tl.events.slice(-TIMELINE_LIMIT) : tl.events;
+    const borrowedBy = /* @__PURE__ */ new Map();
+    for (const e of graph.edges) {
+      if (e.kind !== "borrows") continue;
+      const list = borrowedBy.get(e.to) ?? [];
+      list.push(e.from);
+      borrowedBy.set(e.to, list);
+    }
+    const byOwner = /* @__PURE__ */ new Map();
+    for (const n of graph.nodes.values()) {
+      if (n.state !== "alive") continue;
+      const key = n.owner ?? "\uFF08\u65E0\u4E3B\uFF09";
+      const list = byOwner.get(key) ?? [];
+      list.push({ id: n.id, type: n.type, byteSize: n.byteSize, owner: n.owner, state: n.state, sourceLocation: n.sourceLocation, borrowedBy: borrowedBy.get(n.id) ?? [] });
+      byOwner.set(key, list);
+    }
+    return {
+      summary: { alive: counters.alive, total: counters.total, bytesAlive: counters.bytesAlive, byType: counters.byType },
+      diagnosis: {
+        orphans: diagnosis.orphans.map((o) => ({ id: o.id, type: o.type, byteSize: o.byteSize, sourceLocation: o.sourceLocation })),
+        leaks: diagnosis.leaks.map((l) => ({ resourceId: l.resourceId, type: l.type, byteSize: l.byteSize, sourceLocation: l.sourceLocation, referenceChain: l.referenceChain })),
+        longBorrows: diagnosis.longBorrows.map((b) => ({ resourceId: b.resourceId, borrowedBy: b.borrowedBy, owner: b.owner })),
+        crossPageRefs: diagnosis.crossPageRefs.map((c) => ({ resourceId: c.resourceId, owner: c.owner, heldBy: c.heldBy }))
+      },
+      resources: [...byOwner.entries()].map(([owner, items]) => ({ owner, items })),
+      timeline: {
+        events: events.map((e) => ({ ts: e.ts, kind: e.kind, id: e.id, owner: e.owner, type: e.type, byteSize: e.byteSize, sourceLocation: e.sourceLocation, from: e.from, to: e.to, matchedAllocId: e.matchedAlloc?.id })),
+        unpairedIds: tl.unpairedAllocs.map((a) => a.id ?? ""),
+        truncated
+      }
+    };
+  }
+  return {
+    collect,
+    dispose() {
+      disposed = true;
+      history.dispose();
+    }
+  };
+}
+
+// src/component-trace.ts
+import { serializeState } from "@proteus-vue/devtools-runtime";
+function buildDomTree(el, depth = 0) {
+  if (depth > 4) return null;
+  const node = { tag: el.tagName.toLowerCase(), children: [] };
+  if (el.id) node.id = el.id;
+  const cls = Array.from(el.classList);
+  if (cls.length) node.cls = cls.slice(0, 10);
+  let count = 0;
+  for (const child of Array.from(el.children)) {
+    if (count >= 20) break;
+    const sub = buildDomTree(child, depth + 1);
+    if (sub) {
+      node.children.push(sub);
+      count++;
+    }
+  }
+  return node;
+}
+function installComponentTrace(app, bus) {
+  const ids = /* @__PURE__ */ new WeakMap();
+  const elements = /* @__PURE__ */ new Map();
+  let seq = 0;
+  function getId(instance) {
+    const id = ids.get(instance);
+    if (id !== void 0) return id;
+    const next = ++seq;
+    ids.set(instance, next);
+    return next;
+  }
+  function getRootEl(self) {
+    const el = self.$el;
+    if (!el || typeof el !== "object") return null;
+    const node = el;
+    if (node.nodeType === 1) return el;
+    return node.firstElementChild ?? null;
+  }
+  function snapshot(self) {
+    const out = {};
+    if (self.$props && typeof self.$props === "object") out.props = serializeState(self.$props);
+    const data = self.$data && typeof self.$data === "object" ? self.$data : void 0;
+    const setupState = self.$?.setupState;
+    if (data && Object.keys(data).length) {
+      out.state = serializeState(data);
+    } else if (setupState && typeof setupState === "object" && Object.keys(setupState).length) {
+      out.state = serializeState(setupState);
+    }
+    return out;
+  }
+  app.mixin({
+    mounted() {
+      const self = this;
+      const parentId = self.$parent ? getId(self.$parent) : void 0;
+      const name = self.$options?.name ?? self.$options?.__name ?? "Anonymous";
+      const id = getId(self);
+      const el = getRootEl(self);
+      elements.set(id, el);
+      bus.emit("component", "point", "component.mount", { id, name, parentId, ...snapshot(self) }, "comp-" + id);
+    },
+    unmounted() {
+      const id = getId(this);
+      elements.delete(id);
+      bus.emit("component", "point", "component.unmount", { id }, "comp-" + id);
+    }
+  });
+  return {
+    dispose() {
+    },
+    getElement(id) {
+      return elements.get(id) ?? null;
+    }
+  };
+}
+
+// src/install.ts
+import { getProteusTraceBus, createStoreTracer } from "@proteus-vue/devtools-runtime";
+import { setupDevtoolsPlugin } from "@vue/devtools-api";
+import { setCapabilityTraceBus, globalRegistry } from "@proteus-vue/capabilities";
+
+// src/device-info.ts
+import { detectPlatform } from "@proteus-vue/capabilities";
+function detectRuntimePlatform() {
+  if (typeof window !== "undefined" && typeof document !== "undefined") return "web";
+  return detectPlatform();
+}
+function detectBrowserVersion(ua) {
+  if (!ua) return void 0;
+  const m = ua.match(/(?:Chrome|Firefox|Safari|Edg)\/([\d.]+)/);
+  if (!m) return void 0;
+  const name = /Firefox/.test(ua) ? "Firefox" : /Edg\//.test(ua) ? "Edge" : /Chrome/.test(ua) ? "Chrome" : "Safari";
+  return name + " " + m[1];
+}
+function detectMpLibVersion(wxGlobal) {
+  const g = wxGlobal;
+  try {
+    return g?.getAppBaseInfo?.()?.SDKVersion ?? g?.getSystemInfoSync?.()?.SDKVersion;
+  } catch {
+    return void 0;
+  }
+}
+
+// src/install.ts
+var panelMounted = false;
+var panel = null;
+var PANEL_POS_KEY = "proteus-devtools-panel-pos";
+function loadPanelPos() {
+  try {
+    const raw = localStorage.getItem(PANEL_POS_KEY);
+    if (!raw) return null;
+    const p = JSON.parse(raw);
+    if (typeof p?.left === "number" && typeof p?.top === "number") return { left: p.left, top: p.top };
+  } catch {
+  }
+  return null;
+}
+function savePanelPos(left, top) {
+  try {
+    localStorage.setItem(PANEL_POS_KEY, JSON.stringify({ left, top }));
+  } catch {
+  }
+}
+function makeFloatingDraggable(host, handle) {
+  handle.classList.add("pd-floating-draggable");
+  let startX = 0;
+  let startY = 0;
+  let origLeft = 0;
+  let origTop = 0;
+  handle.addEventListener("mousedown", (e) => {
+    if (e.target.closest("button, input, a, .pd-palette-btn")) return;
+    startX = e.clientX;
+    startY = e.clientY;
+    const rect = host.getBoundingClientRect();
+    origLeft = rect.left;
+    origTop = rect.top;
+    host.style.left = origLeft + "px";
+    host.style.top = origTop + "px";
+    host.style.right = "auto";
+    host.style.bottom = "auto";
+    const onMove = (ev) => {
+      const maxLeft = Math.max(0, (typeof window !== "undefined" ? window.innerWidth : 1024) - 160);
+      const maxTop = Math.max(0, (typeof window !== "undefined" ? window.innerHeight : 768) - 80);
+      const left = Math.max(0, Math.min(origLeft + (ev.clientX - startX), maxLeft));
+      const top = Math.max(0, Math.min(origTop + (ev.clientY - startY), maxTop));
+      host.style.left = left + "px";
+      host.style.top = top + "px";
+    };
+    const onUp = () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      savePanelPos(parseFloat(host.style.left) || 0, parseFloat(host.style.top) || 0);
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+    e.preventDefault();
+  });
+}
+function mountFloatingPanel(bus, pages, applyState, selectComponent, pinia, deviceInfo, ownershipData) {
+  if (panelMounted) return;
+  panelMounted = true;
+  const btn = document.createElement("button");
+  btn.className = "pd-floating-toggle";
+  btn.textContent = "\u25C8";
+  btn.title = "Proteus DevTools";
+  const host = document.createElement("div");
+  host.className = "pd-floating-host";
+  host.style.display = "none";
+  document.body.appendChild(btn);
+  document.body.appendChild(host);
+  btn.addEventListener("click", () => {
+    if (host.style.display !== "none") {
+      host.style.display = "none";
+      return;
+    }
+    const saved = loadPanelPos();
+    if (saved) {
+      host.style.left = saved.left + "px";
+      host.style.top = saved.top + "px";
+      host.style.right = "auto";
+      host.style.bottom = "auto";
+    }
+    host.style.display = "block";
+    if (!panel) {
+      panel = createDevtoolsPanel(host, {
+        source: createTraceBusSource(bus),
+        pages,
+        // ★M8 设备面板：环境/能力信息（navigator/screen + 能力注册表快照）
+        deviceInfo,
+        // ★G-43 B4 所有权面板：视图数据（tracer 采集闭包）
+        ownershipData,
+        // ★P0：时间旅行回放 / 导入快照恢复 → 逐 store $patch 写回（结构类型零硬依赖；无 pinia → 仅面板内展示）
+        onApplyState: applyState,
+        // ★P1：组件视图选中 → 页面元素高亮（scrollIntoView + 描边闪烁）
+        onSelectComponent: selectComponent
+      });
+      const header = host.querySelector(".pd-header");
+      if (header) makeFloatingDraggable(host, header);
+      if (pinia) {
+        for (const entry of pinia._s) {
+          const id = entry[0];
+          const state = entry[1].$state;
+          if (!state) continue;
+          const snapshot = { id };
+          for (const k of Object.keys(state)) if (k !== "$id") snapshot[k] = state[k];
+          bus.emit("store", "point", "store.patch", snapshot, "store-init-" + id);
+        }
+      }
+    }
+  });
+}
+function collectDeviceInfo() {
+  const nav = typeof navigator !== "undefined" ? navigator : void 0;
+  const scr = typeof window !== "undefined" && window.screen ? window.screen : void 0;
+  const win = typeof window !== "undefined" ? window : void 0;
+  const runtimePlatform = detectRuntimePlatform();
+  const perf = performance;
+  const mem = typeof perf.memory === "object" && perf.memory !== null ? perf.memory : void 0;
+  const libVersion = runtimePlatform === "web" ? detectBrowserVersion(nav?.userAgent) : detectMpLibVersion(globalThis.wx);
+  function safeAreaInset(side) {
+    if (typeof getComputedStyle !== "function" || typeof document === "undefined") return void 0;
+    const raw = getComputedStyle(document.documentElement).getPropertyValue("env(safe-area-inset-" + side + ")").trim();
+    const px = /^[\d.]+px$/.test(raw) ? parseFloat(raw) : NaN;
+    return Number.isFinite(px) ? px : void 0;
+  }
+  return {
+    platform: runtimePlatform,
+    userAgent: nav?.userAgent,
+    libVersion,
+    screen: {
+      dpr: win?.devicePixelRatio || 1,
+      width: scr?.width ?? 0,
+      height: scr?.height ?? 0,
+      safeTop: safeAreaInset("top"),
+      safeBottom: safeAreaInset("bottom")
+    },
+    memory: mem ? { jsHeapLimit: mem.jsHeapLimit, totalJSHeapSize: mem.totalJSHeapSize, usedJSHeapSize: mem.usedJSHeapSize } : void 0,
+    // ★能力表按真实运行平台探测（web 有 window → 解析 web adapter）
+    capabilities: globalRegistry.snapshot(runtimePlatform)
+  };
+}
+function installProteusDevtools(app, options = {}) {
+  const bus = options.traceBus ?? getProteusTraceBus();
+  setCapabilityTraceBus(bus);
+  let storeTracer = null;
+  if (options.pinia) {
+    storeTracer = createStoreTracer(options.pinia, bus);
+  }
+  const componentTrace = installComponentTrace(app, bus);
+  const ownershipDisabled = options.ownership === false;
+  const ownershipOpts = typeof options.ownership === "object" ? options.ownership : void 0;
+  const ownershipTracer = ownershipDisabled ? null : createOwnershipTracer({ graph: ownershipOpts?.graph, history: ownershipOpts?.history });
+  const collectOwnershipData = ownershipTracer ? () => ownershipTracer.collect() : void 0;
+  function highlightComponent(id) {
+    const el = componentTrace.getElement(id);
+    if (!el) return;
+    el.scrollIntoView({ behavior: "smooth", block: "center" });
+    el.classList.add("pd-cmp-highlight");
+    setTimeout(() => el.classList.remove("pd-cmp-highlight"), 1500);
+    const dom = buildDomTree(el);
+    bus.emit("component", "point", "component.inspect", { id, dom }, "comp-" + id);
+  }
+  const navRecords = [];
+  let navCurrent = "";
+  let navInflight = null;
+  const offNav = bus.on((e) => {
+    if (e.source !== "router") return;
+    if (e.phase === "start" && /nav/i.test(e.name)) {
+      const p = e.payload ?? {};
+      navInflight = { from: p.from?.path ?? "?", to: p.to?.path ?? e.name, query: p.to?.query, start: e.timestamp, traceId: e.traceId, guards: [] };
+    } else if (navInflight && e.phase === "point" && /guard/i.test(e.name)) {
+      let result = "next";
+      if (/redirect/i.test(e.name)) result = "redirect";
+      else if (/cancel/i.test(e.name)) result = "cancel";
+      else if (/error/i.test(e.name)) result = "error";
+      navInflight.guards.push({ name: e.name, result });
+    } else if (e.phase === "end" && /nav/i.test(e.name) && navInflight) {
+      const rec = {
+        from: navInflight.from,
+        to: navInflight.to,
+        query: navInflight.query,
+        durationMs: Math.max(0, e.timestamp - navInflight.start),
+        timestamp: e.timestamp,
+        traceId: e.traceId ?? navInflight.traceId,
+        guards: navInflight.guards
+      };
+      navRecords.push(rec);
+      navCurrent = rec.to;
+      if (navRecords.length > 50) navRecords.shift();
+      navInflight = null;
+    }
+  });
+  setupDevtoolsPlugin({ ...PROTEUS_DEVTOOLS_PLUGIN_DESCRIPTOR, app }, (devtoolsApi) => {
+    installProteusTimeline(devtoolsApi, { source: createTraceBusSource(bus) });
+    installProteusInspectors(devtoolsApi, {
+      getConfig: options.getConfig,
+      setConfig: options.setConfig,
+      getStyleSafetyRecords: options.styleGuard ? () => options.styleGuard?.records() ?? [] : void 0,
+      pages: options.pages,
+      getRouterState: () => ({ currentRoute: navCurrent || void 0, records: [...navRecords] })
+    });
+  });
+  if (options.mount !== false) {
+    mountFloatingPanel(
+      bus,
+      options.pages,
+      (stores) => {
+        if (!options.pinia) return;
+        for (const s of stores) {
+          const store = options.pinia._s.get(s.id);
+          store?.$patch?.(s.state);
+        }
+      },
+      highlightComponent,
+      options.pinia,
+      collectDeviceInfo,
+      collectOwnershipData
+    );
+  }
+  let remoteBridge = null;
+  if (options.remote) {
+    const remoteOpts = typeof options.remote === "object" ? options.remote : null;
+    const path = remoteOpts !== null && remoteOpts.path ? remoteOpts.path : "/proteus-source";
+    const protocol = typeof location !== "undefined" && location.protocol === "https:" ? "wss" : "ws";
+    const url = `${protocol}://${typeof location !== "undefined" ? location.host : "localhost"}${path}`;
+    remoteBridge = createTraceBusWsBridge(bus, {
+      url,
+      appInfo: remoteOpts !== null && remoteOpts.appInfo ? remoteOpts.appInfo : () => options.pages,
+      // ★M8 设备面板：应用侧环境/能力上报（与本地面板同源采集闭包）
+      deviceInfo: collectDeviceInfo,
+      // ★G-43 B4 所有权面板：应用侧视图数据上报（与本地面板同源 tracer）
+      ownership: collectOwnershipData,
+      // ★远程时间旅行：面板 Proteus.restoreStores 命令 → 应用侧逐 store $patch 恢复（复用 applyState 语义）
+      onRestoreStores: (stores) => {
+        if (!options.pinia) return;
+        for (const s of stores) {
+          const store = options.pinia._s.get(s.id);
+          store?.$patch?.(s.state);
+        }
+      }
+    });
+  }
+  let offHmr = null;
+  if (options.hmr) {
+    const offs = [];
+    offs.push(options.hmr.on("vite:beforeUpdate", () => bus.emit("hmr", "point", "vite:update")) ?? null);
+    offs.push(options.hmr.on("vite:beforeFullReload", () => bus.emit("hmr", "point", "vite:full-reload")) ?? null);
+    offs.push(
+      options.hmr.on(
+        "vite:error",
+        (err) => bus.emit("hmr", "error", "vite:error", { message: err instanceof Error ? err.message : String(err) })
+      ) ?? null
+    );
+    offHmr = () => {
+      for (const f of offs) f?.();
+    };
+  }
+  return {
+    traceBus: bus,
+    destroy() {
+      storeTracer?.dispose();
+      componentTrace.dispose();
+      ownershipTracer?.dispose();
+      offNav();
+      remoteBridge?.close();
+      offHmr?.();
+    }
+  };
+}
+
+// src/plugins/network.ts
+function createNetworkPlugin() {
+  return {
+    name: "@proteus-vue/devtools-plugin-network",
+    version: "0.1.0",
+    setup(ctx) {
+      const rows = [];
+      const inflight = /* @__PURE__ */ new Map();
+      ctx.bus.on((e) => {
+        if (e.source !== "api") return;
+        if (e.phase === "start") {
+          inflight.set(e.traceId ?? e.name + "-" + e.timestamp, e.timestamp);
+        } else if (e.phase === "end" || e.phase === "error") {
+          const start = inflight.get(e.traceId ?? e.name + "-" + e.timestamp);
+          rows.unshift({
+            name: e.name,
+            ms: start !== void 0 ? Math.max(0, e.timestamp - start) : 0,
+            ok: e.phase === "end",
+            ts: e.timestamp
+          });
+          if (rows.length > 200) rows.pop();
+        }
+      });
+      ctx.panel.addView("network", {
+        label: "network",
+        icon: "\u21C5",
+        render(container) {
+          container.replaceChildren();
+          if (rows.length === 0) {
+            const empty = document.createElement("div");
+            empty.className = "pd-empty";
+            empty.textContent = "\u6682\u65E0 API \u4E8B\u4EF6\uFF08source=api\uFF09";
+            container.appendChild(empty);
+            return;
+          }
+          const list = document.createElement("div");
+          list.className = "pd-net";
+          for (const r of rows.slice(0, 50)) {
+            const row = document.createElement("div");
+            row.className = "pd-net-row" + (r.ok ? "" : " pd-net-error");
+            const name = document.createElement("span");
+            name.className = "pd-net-name";
+            name.textContent = r.name;
+            const meta = document.createElement("span");
+            meta.className = "pd-net-meta";
+            meta.textContent = r.ms + "ms" + (r.ok ? "" : " \u2715");
+            row.appendChild(name);
+            row.appendChild(meta);
+            list.appendChild(row);
+          }
+          container.appendChild(list);
+        }
+      });
+    }
+  };
+}
+export {
+  PROTEUS_DEVTOOLS_PLUGIN_DESCRIPTOR,
+  attachTip,
+  bindTooltip,
+  buildDomTree,
+  createCommandRegistry,
+  createDevtoolsPanel,
+  createDevtoolsWsSource,
+  createMemoryStorage,
+  createNetworkPlugin,
+  createOwnershipTracer,
+  createPluginRegistry,
+  createTimelineZoom,
+  createTooltipLayer,
+  createTraceBusSource,
+  createTraceBusWsBridge,
+  detectBrowserVersion,
+  detectMpLibVersion,
+  detectRuntimePlatform,
+  findSensitiveKeys,
+  installComponentTrace,
+  installProteusDevtools,
+  installProteusInspectors,
+  installProteusTimeline,
+  parseSession,
+  parseStoreSnapshot,
+  renderComponents,
+  renderDevice,
+  renderErrors,
+  renderFlamegraph,
+  renderGraph,
+  renderOwnership,
+  renderPages,
+  renderRoute,
+  renderState,
+  renderTimeline,
+  resolveActivationOrder,
+  resolveTipData,
+  serializeSession,
+  serializeStoreSnapshot
+};