react-dev-panel 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1745 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var webVitals = require('web-vitals');
+
+// src/tools/dev-logs/index.tsx
+
+// src/core/styles.ts
+var RDP_STYLE_ID = "react-dev-panel-styles";
+var RDP_Z = 2147483e3;
+var CSS = `
+.rdp-root, .rdp-root * { box-sizing: border-box; }
+.rdp-root {
+  --rdp-bg: #11161d;
+  --rdp-bg-elev: #1a212b;
+  --rdp-bg-soft: rgba(148,163,184,0.06);
+  --rdp-border: rgba(255,255,255,0.09);
+  --rdp-text: #e6e9ee;
+  --rdp-text-dim: #9aa4b2;
+  --rdp-text-faint: #6b7585;
+  --rdp-accent: #6950E8;
+  --rdp-accent-contrast: #ffffff;
+  --rdp-success: #3ddc84;
+  --rdp-warning: #e0a82e;
+  --rdp-error: #e5575c;
+  --rdp-info: #56a6e8;
+  --rdp-radius: 10px;
+  --rdp-shadow: 0 8px 28px rgba(0,0,0,0.5);
+  --rdp-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --rdp-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  color: var(--rdp-text);
+  font-family: var(--rdp-sans);
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+/* Launcher FAB */
+.rdp-fab {
+  position: fixed; width: 52px; height: 52px; border-radius: 50%;
+  display: grid; place-items: center; cursor: grab; border: none;
+  color: var(--rdp-accent-contrast);
+  background: linear-gradient(135deg, var(--rdp-accent), #4a36b8);
+  box-shadow: 0 4px 12px rgba(105,80,232,0.35), 0 8px 24px rgba(0,0,0,0.5);
+  z-index: ${RDP_Z};
+}
+.rdp-fab:active { cursor: grabbing; }
+.rdp-fab-badge {
+  position: absolute; bottom: -3px; right: -3px; min-width: 18px; height: 18px;
+  padding: 0 5px; border-radius: 999px; background: var(--rdp-error); color: #fff;
+  font-size: 10px; font-weight: 700; display: grid; place-items: center;
+  border: 2px solid var(--rdp-bg);
+}
+
+/* Floating surfaces */
+.rdp-surface {
+  position: fixed; background: var(--rdp-bg); border: 1px solid var(--rdp-border);
+  border-radius: var(--rdp-radius); box-shadow: var(--rdp-shadow); overflow: hidden;
+  display: flex; flex-direction: column; z-index: ${RDP_Z};
+}
+.rdp-menu { width: 320px; }
+.rdp-panel { width: min(460px, calc(100vw - 32px)); max-height: min(78vh, 720px); }
+
+.rdp-header {
+  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
+  border-bottom: 1px solid var(--rdp-border); flex-shrink: 0;
+}
+.rdp-menu-head {
+  background: linear-gradient(135deg, rgba(105,80,232,0.18), rgba(105,80,232,0.04));
+}
+.rdp-title { font-weight: 700; font-size: 13px; }
+.rdp-sub { color: var(--rdp-text-dim); font-size: 12px; }
+.rdp-body { flex: 1; overflow-y: auto; padding: 12px; }
+
+/* Menu rows */
+.rdp-row {
+  display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px;
+  border-radius: 8px; cursor: pointer; width: 100%; text-align: left; border: none;
+  background: transparent; color: inherit; font: inherit;
+}
+.rdp-row:hover { background: rgba(255,255,255,0.05); }
+.rdp-tile {
+  width: 38px; height: 38px; flex-shrink: 0; border-radius: 9px;
+  display: grid; place-items: center;
+}
+
+/* Primitives */
+.rdp-chip {
+  display: inline-flex; align-items: center; height: 18px; padding: 0 7px;
+  border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1;
+}
+.rdp-btn {
+  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
+  border-radius: 8px; border: 1px solid var(--rdp-border); background: transparent;
+  color: var(--rdp-text); font: inherit; font-size: 12px; cursor: pointer;
+}
+.rdp-btn:hover { background: rgba(255,255,255,0.05); }
+.rdp-btn-primary {
+  background: var(--rdp-accent); color: var(--rdp-accent-contrast); border-color: transparent;
+  font-weight: 600; justify-content: center; width: 100%;
+}
+.rdp-btn-primary:hover { filter: brightness(1.08); }
+.rdp-btn-sm { padding: 2px 7px; font-size: 11px; border-radius: 6px; }
+.rdp-iconbtn {
+  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px;
+  border: 1px solid var(--rdp-border); background: transparent; color: var(--rdp-text);
+  cursor: pointer;
+}
+.rdp-iconbtn:hover { background: rgba(255,255,255,0.06); }
+.rdp-iconbtn-bare { border: none; width: 22px; height: 22px; color: var(--rdp-text-dim); }
+.rdp-iconbtn-bare:hover { color: var(--rdp-text); background: rgba(255,255,255,0.06); }
+
+.rdp-tabs { display: flex; gap: 4px; background: var(--rdp-bg-soft); padding: 3px; border-radius: 9px; }
+.rdp-tab {
+  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
+  padding: 6px 4px; border-radius: 7px; border: none; background: transparent;
+  color: var(--rdp-text-dim); font: inherit; font-size: 12px; cursor: pointer;
+}
+.rdp-tab[aria-selected="true"] { background: var(--rdp-bg-elev); color: var(--rdp-text); box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
+
+.rdp-input {
+  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 9px;
+  border: 1px solid var(--rdp-border); background: var(--rdp-bg-soft);
+}
+.rdp-input input {
+  flex: 1; background: transparent; border: none; outline: none; color: var(--rdp-text);
+  font: inherit; font-size: 13px;
+}
+.rdp-mono { font-family: var(--rdp-mono); }
+.rdp-section-label {
+  display: block; margin: 8px 0 2px; color: var(--rdp-text-faint); font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.5px; font-size: 10px;
+}
+
+/* Inspector overlay bits */
+.rdp-overlay { position: fixed; inset: 0; pointer-events: none; z-index: ${RDP_Z - 1}; }
+.rdp-hl {
+  position: fixed; border: 1px solid var(--rdp-accent); border-radius: 3px;
+  background: rgba(105,80,232,0.14); box-shadow: 0 0 0 1px rgba(105,80,232,0.4);
+  transition: all 60ms linear; pointer-events: none;
+}
+.rdp-tooltip {
+  position: fixed; max-width: 360px; padding: 8px 10px; border-radius: 9px;
+  background: rgba(15,18,24,0.86); backdrop-filter: blur(8px);
+  border: 1px solid rgba(255,255,255,0.12); box-shadow: var(--rdp-shadow); color: #fff;
+  pointer-events: none;
+}
+.rdp-toast {
+  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
+  padding: 7px 14px; border-radius: 9px; background: rgba(15,18,24,0.92);
+  border: 1px solid rgba(255,255,255,0.12); box-shadow: var(--rdp-shadow);
+  font-size: 12px; font-weight: 600; z-index: ${RDP_Z};
+}
+
+.rdp-body::-webkit-scrollbar, .rdp-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
+.rdp-body::-webkit-scrollbar-thumb, .rdp-scroll::-webkit-scrollbar-thumb {
+  background: rgba(255,255,255,0.14); border-radius: 8px;
+}
+.rdp-kbd {
+  padding: 1px 5px; border-radius: 5px; border: 1px solid var(--rdp-border);
+  background: rgba(255,255,255,0.04); font-family: var(--rdp-mono); font-size: 11px;
+  color: var(--rdp-text-dim);
+}
+`;
+var injected = false;
+function injectBaseStyles() {
+  if (injected || typeof document === "undefined") return;
+  if (document.getElementById(RDP_STYLE_ID)) {
+    injected = true;
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = RDP_STYLE_ID;
+  style.textContent = CSS;
+  document.head.appendChild(style);
+  injected = true;
+}
+function colorVar(key) {
+  switch (key) {
+    case "info":
+      return "var(--rdp-info)";
+    case "warning":
+      return "var(--rdp-warning)";
+    case "success":
+      return "var(--rdp-success)";
+    case "error":
+      return "var(--rdp-error)";
+    default:
+      return "var(--rdp-accent)";
+  }
+}
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+
+// src/core/registry.ts
+var tools = /* @__PURE__ */ new Map();
+function registerTool(def) {
+  tools.set(def.id, def);
+}
+function getRegisteredTools() {
+  return [...tools.values()];
+}
+function resolveTools(ids) {
+  if (!ids || ids.length === 0) return getRegisteredTools();
+  return ids.map((id) => tools.get(id)).filter((t) => Boolean(t));
+}
+function Svg({ children, size = 16 }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children
+    }
+  );
+}
+var IconWrench = ({ size }) => /* @__PURE__ */ jsxRuntime.jsx(Svg, { size, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14.7 6.3a4 4 0 0 0-5.4 5.3L3 18v3h3l6.4-6.3a4 4 0 0 0 5.3-5.4l-2.5 2.5-2.1-2.1z" }) });
+var IconBug = ({ size }) => /* @__PURE__ */ jsxRuntime.jsxs(Svg, { size, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "8", y: "6", width: "8", height: "14", rx: "4" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 6a3 3 0 0 1 6 0M3 13h5M16 13h5M4 18l4-2M20 18l-4-2M4 8l4 2M20 8l-4 2" })
+] });
+var IconGauge = ({ size }) => /* @__PURE__ */ jsxRuntime.jsxs(Svg, { size, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 14l3-3" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.5 18a9 9 0 1 1 17 0" })
+] });
+var IconGraph = ({ size }) => /* @__PURE__ */ jsxRuntime.jsxs(Svg, { size, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1.5" }),
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14", y: "14", width: "7", height: "7", rx: "1.5" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 6.5h4a3 3 0 0 1 3 3V14" })
+] });
+var IconX = ({ size }) => /* @__PURE__ */ jsxRuntime.jsx(Svg, { size, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 6l12 12M18 6L6 18" }) });
+var IconChevronRight = ({ size }) => /* @__PURE__ */ jsxRuntime.jsx(Svg, { size, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 6l6 6-6 6" }) });
+var IconChevronDown = ({ size }) => /* @__PURE__ */ jsxRuntime.jsx(Svg, { size, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6" }) });
+var IconSearch = ({ size }) => /* @__PURE__ */ jsxRuntime.jsxs(Svg, { size, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "7" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 21l-4-4" })
+] });
+var IconCopy = ({ size }) => /* @__PURE__ */ jsxRuntime.jsxs(Svg, { size, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "9", width: "11", height: "11", rx: "2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 15V5a2 2 0 0 1 2-2h10" })
+] });
+var IconFileCode = ({ size }) => /* @__PURE__ */ jsxRuntime.jsxs(Svg, { size, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 3v5h5M10 12l-2 2 2 2M14 12l2 2-2 2" })
+] });
+var IconRefresh = ({ size }) => /* @__PURE__ */ jsxRuntime.jsxs(Svg, { size, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-3-6.7L21 8" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 3v5h-5" })
+] });
+var IconPointer = ({ size }) => /* @__PURE__ */ jsxRuntime.jsx(Svg, { size, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 3l16 7-7 2-2 7z" }) });
+var IconLayers = ({ size }) => /* @__PURE__ */ jsxRuntime.jsx(Svg, { size, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3l9 5-9 5-9-5 9-5zM3 13l9 5 9-5" }) });
+var IconArrowUp = ({ size }) => /* @__PURE__ */ jsxRuntime.jsx(Svg, { size, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 19V5M6 11l6-6 6 6" }) });
+var buffer = [];
+var nextId = 1;
+var listeners = /* @__PURE__ */ new Set();
+function emit() {
+  listeners.forEach((l) => l());
+}
+function push(level, message, meta) {
+  buffer = [...buffer.slice(-499), { id: nextId++, level, time: Date.now(), message, meta }];
+  emit();
+}
+function stringify(args) {
+  return args.map((a) => {
+    if (typeof a === "string") return a;
+    try {
+      return JSON.stringify(a);
+    } catch {
+      return String(a);
+    }
+  }).join(" ").slice(0, 2e3);
+}
+var installed = false;
+function installCapture() {
+  if (installed || typeof window === "undefined") return;
+  installed = true;
+  ["log", "info", "warn", "error"].forEach((level) => {
+    const original = console[level].bind(console);
+    console[level] = (...args) => {
+      push(level, stringify(args));
+      original(...args);
+    };
+  });
+  if (typeof window.fetch === "function") {
+    const orig = window.fetch.bind(window);
+    window.fetch = async (input, init) => {
+      const method = (init?.method ?? "GET").toUpperCase();
+      const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
+      const start = Date.now();
+      try {
+        const res = await orig(input, init);
+        push(res.ok ? "network" : "error", `${method} ${url}`, `${res.status} \xB7 ${Date.now() - start}ms`);
+        return res;
+      } catch (err) {
+        push("error", `${method} ${url}`, `failed \xB7 ${String(err)}`);
+        throw err;
+      }
+    };
+  }
+}
+function subscribeLogs(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+function getLogs() {
+  return buffer;
+}
+var EMPTY = [];
+function getServerLogs() {
+  return EMPTY;
+}
+function clearLogs() {
+  buffer = [];
+  emit();
+}
+var LEVELS = ["all", "log", "warn", "error", "network"];
+var LEVEL_COLOR = {
+  log: "var(--rdp-text-dim)",
+  info: "var(--rdp-info)",
+  warn: "var(--rdp-warning)",
+  error: "var(--rdp-error)",
+  network: "var(--rdp-info)"
+};
+function DevLogsPanel({ onClose }) {
+  const logs = react.useSyncExternalStore(subscribeLogs, getLogs, getServerLogs);
+  const [filter, setFilter] = react.useState("all");
+  const shown = filter === "all" ? logs : logs.filter((l) => l.level === filter);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rdp-surface rdp-panel", style: { bottom: 88, right: 20 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rdp-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(IconBug, { size: 16 }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rdp-title", style: { flex: 1 }, children: "Developer Logs" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "rdp-iconbtn-bare", onClick: clearLogs, title: "Clear", style: { width: "auto", padding: "0 8px" }, children: "Clear" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "rdp-iconbtn-bare", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(IconX, { size: 16 }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px 12px 0", display: "flex", gap: 4, flexWrap: "wrap" }, children: LEVELS.map((lvl) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: cx("rdp-btn", "rdp-btn-sm"),
+        style: filter === lvl ? { borderColor: "var(--rdp-accent)", color: "var(--rdp-accent)" } : void 0,
+        onClick: () => setFilter(lvl),
+        children: lvl
+      },
+      lvl
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rdp-body rdp-mono", style: { fontSize: 12 }, children: shown.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "var(--rdp-text-faint)" }, children: "No log entries captured yet." }) : shown.slice().reverse().map((entry) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "3px 0", borderBottom: "1px solid var(--rdp-border)" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: LEVEL_COLOR[entry.level], fontWeight: 700, marginRight: 6 }, children: entry.level === "network" ? "net" : entry.level }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { wordBreak: "break-word" }, children: entry.message }),
+      entry.meta && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--rdp-text-faint)", marginLeft: 6 }, children: entry.meta })
+    ] }, entry.id)) })
+  ] });
+}
+function useBadge() {
+  const logs = react.useSyncExternalStore(subscribeLogs, getLogs, getServerLogs);
+  const errors = logs.filter((l) => l.level === "error").length;
+  if (logs.length === 0) return null;
+  return errors > 0 ? { label: String(errors), tone: "error" } : { label: String(logs.length), tone: "neutral" };
+}
+var devLogsTool = {
+  id: "logs",
+  title: "Developer Logs",
+  subtitle: "Client & network activity",
+  color: "info",
+  icon: /* @__PURE__ */ jsxRuntime.jsx(IconBug, { size: 19 }),
+  Panel: DevLogsPanel,
+  useBadge,
+  init: installCapture
+};
+function registerDevLogs() {
+  registerTool(devLogsTool);
+}
+var HINTS = {
+  LCP: "Largest Contentful Paint \u2014 optimize hero image/font, reduce server time.",
+  CLS: "Cumulative Layout Shift \u2014 set sizes on images/embeds, reserve space.",
+  INP: "Interaction to Next Paint \u2014 break up long tasks, defer work.",
+  FCP: "First Contentful Paint \u2014 reduce render-blocking CSS/JS.",
+  TTFB: "Time to First Byte \u2014 server/edge latency, caching."
+};
+var metrics = {};
+var listeners2 = /* @__PURE__ */ new Set();
+function emit2() {
+  listeners2.forEach((l) => l());
+}
+function record(m) {
+  metrics = {
+    ...metrics,
+    [m.name]: {
+      name: m.name,
+      value: m.value,
+      rating: m.rating,
+      unit: m.name === "CLS" ? "" : "ms"
+    }
+  };
+  emit2();
+}
+var installed2 = false;
+function installPerf() {
+  if (installed2 || typeof window === "undefined") return;
+  installed2 = true;
+  webVitals.onLCP(record);
+  webVitals.onCLS(record);
+  webVitals.onINP(record);
+  webVitals.onFCP(record);
+  webVitals.onTTFB(record);
+}
+function subscribe(l) {
+  listeners2.add(l);
+  return () => listeners2.delete(l);
+}
+function snapshot() {
+  return metrics;
+}
+var EMPTY2 = {};
+function serverSnapshot() {
+  return EMPTY2;
+}
+var RATING_COLOR = {
+  good: "var(--rdp-success)",
+  "needs-improvement": "var(--rdp-warning)",
+  poor: "var(--rdp-error)"
+};
+function PagePerformancePanel({ onClose }) {
+  const data = react.useSyncExternalStore(subscribe, snapshot, serverSnapshot);
+  const order = ["LCP", "INP", "CLS", "FCP", "TTFB"];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rdp-surface rdp-panel", style: { bottom: 88, right: 20 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rdp-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(IconGauge, { size: 16 }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rdp-title", style: { flex: 1 }, children: "Page Performance" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "rdp-iconbtn-bare", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(IconX, { size: 16 }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rdp-body", children: [
+      order.every((k) => !data[k]) && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "var(--rdp-text-faint)" }, children: "Collecting Web Vitals\u2026 interact with the page (INP needs an interaction)." }),
+      order.map((key) => {
+        const m = data[key];
+        if (!m) return null;
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "8px 0", borderBottom: "1px solid var(--rdp-border)" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rdp-chip", style: { background: RATING_COLOR[m.rating], color: "#06210f" }, children: m.name }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "rdp-mono", style: { fontWeight: 700 }, children: [
+              m.unit === "ms" ? Math.round(m.value) : m.value.toFixed(3),
+              m.unit
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: RATING_COLOR[m.rating], fontSize: 11, marginLeft: "auto" }, children: m.rating })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rdp-sub", style: { marginTop: 2 }, children: HINTS[key] })
+        ] }, key);
+      })
+    ] })
+  ] });
+}
+var pagePerformanceTool = {
+  id: "perf",
+  title: "Page Performance",
+  subtitle: "Web Vitals & fix suggestions",
+  color: "warning",
+  icon: /* @__PURE__ */ jsxRuntime.jsx(IconGauge, { size: 19 }),
+  Panel: PagePerformancePanel,
+  init: installPerf
+};
+function registerPagePerformance() {
+  registerTool(pagePerformanceTool);
+}
+function buildProtocolUrl(editor, loc) {
+  const line = loc.line ?? 1;
+  const col = loc.column ?? 1;
+  switch (editor) {
+    case "cursor":
+      return `cursor://file/${loc.file}:${line}:${col}`;
+    case "webstorm":
+      return `webstorm://open?file=${encodeURIComponent(loc.file)}&line=${line}&column=${col}`;
+    case "zed":
+      return `zed://file/${loc.file}:${line}:${col}`;
+    case "vscode":
+    case "auto":
+    default:
+      return `vscode://file/${loc.file}:${line}:${col}`;
+  }
+}
+var defaultOpenInEditor = async (loc, editor = "auto") => {
+  const url = buildProtocolUrl(editor, loc);
+  if (url && typeof window !== "undefined") {
+    try {
+      window.location.assign(url);
+      return true;
+    } catch {
+    }
+  }
+  if (typeof navigator !== "undefined" && navigator.clipboard) {
+    await navigator.clipboard.writeText(`${loc.file}${loc.line ? `:${loc.line}` : ""}`).catch(() => void 0);
+  }
+  return false;
+};
+var DevPanelContext = react.createContext(null);
+function resolve(config) {
+  const enabled = config.enabled ?? (typeof process !== "undefined" ? process.env.NODE_ENV !== "production" : true);
+  return {
+    enabled,
+    editor: config.editor ?? "auto",
+    getRoute: config.getRoute ?? (() => typeof location !== "undefined" ? location.pathname : void 0),
+    openInEditor: config.openInEditor ?? defaultOpenInEditor,
+    graphEndpoint: config.graphEndpoint,
+    theme: config.theme ?? {},
+    tools: config.tools
+  };
+}
+function DevPanelConfigProvider({
+  config,
+  children
+}) {
+  const value = react.useMemo(() => resolve(config), [config]);
+  return /* @__PURE__ */ jsxRuntime.jsx(DevPanelContext.Provider, { value, children });
+}
+function useDevPanelConfig() {
+  const ctx = react.useContext(DevPanelContext);
+  if (!ctx) throw new Error("useDevPanelConfig must be used within <DevPanel> / DevPanelConfigProvider");
+  return ctx;
+}
+function GraphSearch({
+  value,
+  onChange,
+  placeholder = "Search components\u2026"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rdp-input", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--rdp-text-faint)", display: "grid", placeItems: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(IconSearch, { size: 15 }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { value, onChange: (e) => onChange(e.target.value), placeholder, "aria-label": "Search components" }),
+    value && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "rdp-iconbtn-bare", onClick: () => onChange(""), "aria-label": "Clear", children: /* @__PURE__ */ jsxRuntime.jsx(IconX, { size: 14 }) })
+  ] });
+}
+function Chips({ names, onSelect }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "flex", flexWrap: "wrap", gap: 4 }, children: names.map((n) => /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      className: "rdp-chip rdp-mono",
+      style: { border: "1px solid var(--rdp-border)", background: "transparent", color: "var(--rdp-text)", cursor: "pointer" },
+      onClick: () => onSelect(n),
+      children: n
+    },
+    n
+  )) });
+}
+function Row({ label, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8, marginTop: 5 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { minWidth: 52, color: "var(--rdp-text-faint)", fontWeight: 600, flexShrink: 0, fontSize: 11 }, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { minWidth: 0, flex: 1 }, children })
+  ] });
+}
+function NodeDetails({
+  selected,
+  onOpen,
+  onCopyInfo,
+  onCopyPath,
+  onSelectName
+}) {
+  if (!selected) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "var(--rdp-text-faint)", padding: "6px 2px" }, children: "Nothing selected. Enable inspect mode and click a component, or pick one from the tree." });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        padding: 10,
+        borderRadius: 9,
+        border: "1px solid var(--rdp-border)",
+        background: "var(--rdp-bg-soft)"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rdp-chip", style: { background: "rgba(105,80,232,0.22)", color: "var(--rdp-accent)" }, children: selected.componentName }),
+          selected.domTag && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rdp-mono", style: { color: "var(--rdp-text-faint)", fontSize: 11 }, children: `<${selected.domTag}>` })
+        ] }),
+        selected.filePath ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rdp-mono", style: { marginTop: 6, fontSize: 11.5, color: "var(--rdp-text-dim)", wordBreak: "break-all" }, children: [
+          selected.filePath,
+          selected.line ? `:${selected.line}` : "",
+          selected.line && selected.column ? `:${selected.column}` : ""
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 6, fontSize: 11.5, color: "var(--rdp-warning)" }, children: "No source path \u2014 run the graph generator (npx dev-panel-graph) or mount an adapter." }),
+        selected.route && /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Route", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rdp-mono", style: { fontSize: 12 }, children: selected.route }) }),
+        selected.parent && /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Parent", children: /* @__PURE__ */ jsxRuntime.jsx(Chips, { names: [selected.parent], onSelect: onSelectName }) }),
+        selected.children.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Renders", children: /* @__PURE__ */ jsxRuntime.jsx(Chips, { names: selected.children, onSelect: onSelectName }) }),
+        selected.imports.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Imports", children: /* @__PURE__ */ jsxRuntime.jsx(Chips, { names: selected.imports, onSelect: onSelectName }) }),
+        selected.props && selected.props.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Props", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rdp-mono", style: { fontSize: 11, color: "var(--rdp-text-dim)" }, children: selected.props.map((p) => /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { marginRight: 8, display: "inline-block" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--rdp-accent)" }, children: p.name }),
+          "=",
+          p.value
+        ] }, p.name)) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: cx("rdp-btn", "rdp-btn-primary"), style: { marginTop: 12 }, onClick: onOpen, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(IconFileCode, { size: 14 }),
+          " Open in editor"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8, marginTop: 8 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "rdp-iconbtn", onClick: onCopyInfo, title: "Copy component info", children: /* @__PURE__ */ jsxRuntime.jsx(IconCopy, { size: 15 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "rdp-iconbtn",
+              onClick: onCopyPath,
+              disabled: !selected.filePath && !selected.absFilePath,
+              title: "Copy file path",
+              children: /* @__PURE__ */ jsxRuntime.jsx(IconFileCode, { size: 15 })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/tools/component-graph/graph-utils.ts
+var indexCache = /* @__PURE__ */ new WeakMap();
+function pushUnique(map, k, v) {
+  const a = map.get(k);
+  if (a) {
+    if (!a.includes(v)) a.push(v);
+  } else map.set(k, [v]);
+}
+function getIndex(graph) {
+  if (!graph) return null;
+  let idx = indexCache.get(graph);
+  if (idx) return idx;
+  idx = { byName: /* @__PURE__ */ new Map(), childrenOf: /* @__PURE__ */ new Map(), parentsOf: /* @__PURE__ */ new Map(), importsOf: /* @__PURE__ */ new Map() };
+  for (const n of graph.nodes) {
+    idx.byName.set(n.id, n);
+    idx.byName.set(n.name, n);
+  }
+  for (const e of graph.edges) {
+    if (e.type === "renders") {
+      pushUnique(idx.childrenOf, e.from, e.to);
+      pushUnique(idx.parentsOf, e.to, e.from);
+    } else if (e.type === "route") {
+      pushUnique(idx.parentsOf, e.to, e.from);
+    } else if (e.type === "imports") {
+      pushUnique(idx.importsOf, e.from, e.to);
+    }
+  }
+  indexCache.set(graph, idx);
+  return idx;
+}
+function findNode(graph, name) {
+  return getIndex(graph)?.byName.get(name) ?? null;
+}
+function getParents(graph, id) {
+  return getIndex(graph)?.parentsOf.get(id) ?? [];
+}
+function getChildren(graph, id) {
+  return getIndex(graph)?.childrenOf.get(id) ?? [];
+}
+function getImports(graph, id) {
+  return getIndex(graph)?.importsOf.get(id) ?? [];
+}
+function searchNodes(graph, query, limit = 40) {
+  if (!graph) return [];
+  const q = query.trim().toLowerCase();
+  const matches = q ? graph.nodes.filter((n) => n.name.toLowerCase().includes(q) || n.filePath.toLowerCase().includes(q)) : graph.nodes.filter((n) => n.type === "component");
+  matches.sort((a, b) => a.type !== b.type ? a.type === "component" ? -1 : 1 : a.name.localeCompare(b.name));
+  return matches.slice(0, limit);
+}
+function isAbs(p) {
+  return p.startsWith("/") || /^[A-Za-z]:[\\/]/.test(p);
+}
+function toDisplayPath(graph, file) {
+  const root = graph?.root;
+  if (root && file.startsWith(root)) return file.slice(root.length).replace(/^[/\\]/, "");
+  return file;
+}
+function toAbsPath(graph, file) {
+  if (isAbs(file)) return file;
+  return graph?.root ? `${graph.root}/${file}` : void 0;
+}
+function getFiber(node) {
+  const key = Object.keys(node).find(
+    (k) => k.startsWith("__reactFiber$") || k.startsWith("__reactInternalInstance$")
+  );
+  return key ? node[key] ?? null : null;
+}
+function getDisplayName(type) {
+  if (!type || typeof type === "string") return null;
+  if (typeof type === "function") {
+    const fn = type;
+    return fn.displayName || fn.name || null;
+  }
+  const o = type;
+  if (o.displayName) return o.displayName;
+  if (o.render) return getDisplayName(o.render);
+  if (o.type) return getDisplayName(o.type);
+  return null;
+}
+function chain(el) {
+  const out = [];
+  try {
+    let f = getFiber(el);
+    let hops = 0;
+    while (f && hops < 200) {
+      const n = getDisplayName(f.type);
+      if (n && out[out.length - 1] !== n) out.push(n);
+      f = f.return;
+      hops += 1;
+    }
+  } catch {
+  }
+  return out;
+}
+var IGNORE_ATTR = "data-rdp-ignore";
+function isIgnored(el) {
+  return !!el?.closest(`[${IGNORE_ATTR}]`);
+}
+function summarize(v) {
+  if (v == null) return String(v);
+  switch (typeof v) {
+    case "string":
+      return v.length > 40 ? `"${v.slice(0, 40)}\u2026"` : `"${v}"`;
+    case "number":
+    case "boolean":
+      return String(v);
+    case "function":
+      return "\u0192";
+    case "object":
+      if (Array.isArray(v)) return `Array(${v.length})`;
+      if (v.$$typeof) return null;
+      return "{\u2026}";
+    default:
+      return null;
+  }
+}
+function extractProps(el) {
+  try {
+    let f = getFiber(el);
+    while (f && typeof f.type === "string") f = f.return;
+    const props = f?.memoizedProps;
+    if (!props || typeof props !== "object") return void 0;
+    const out = [];
+    for (const name of Object.keys(props)) {
+      if (name === "children") continue;
+      const s = summarize(props[name]);
+      if (s == null) continue;
+      out.push({ name, value: s });
+      if (out.length >= 12) break;
+    }
+    return out.length ? out : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function extractRaw(el) {
+  const host = el.closest("[data-dev-file], [data-dev-component]");
+  const attrFile = host?.getAttribute("data-dev-file") ?? void 0;
+  const attrLine = host?.getAttribute("data-dev-line");
+  const attrCol = host?.getAttribute("data-dev-column");
+  let fiberName = null;
+  try {
+    fiberName = chain(el)[0] ?? null;
+  } catch {
+  }
+  const domTag = el.tagName.toLowerCase();
+  return {
+    componentName: fiberName || host?.getAttribute("data-dev-component") || domTag,
+    filePath: attrFile,
+    line: attrLine ? Number(attrLine) : void 0,
+    column: attrCol ? Number(attrCol) : void 0,
+    domTag
+  };
+}
+function graphMatch(el, graph, fallbackName) {
+  const idx = getIndex(graph);
+  if (idx) {
+    const name = chain(el).find((n) => idx.byName.has(n));
+    if (name) return { componentName: name, node: idx.byName.get(name) ?? null };
+  }
+  return { componentName: fallbackName, node: findNode(graph, fallbackName) };
+}
+function resolveDisplay(el, graph, route) {
+  const raw = extractRaw(el);
+  const { componentName, node } = graphMatch(el, graph, raw.componentName);
+  return {
+    componentName,
+    filePath: raw.filePath ?? node?.filePath,
+    line: raw.line ?? node?.line,
+    domTag: raw.domTag,
+    route
+  };
+}
+function resolveSelected(el, graph, route) {
+  const raw = extractRaw(el);
+  const { componentName, node } = graphMatch(el, graph, raw.componentName);
+  const rel = node?.filePath;
+  const absFromAttr = raw.filePath && isAbs(raw.filePath) ? raw.filePath : void 0;
+  const absFilePath = absFromAttr ?? (rel ? toAbsPath(graph, rel) : void 0);
+  const display = rel ?? (raw.filePath ? toDisplayPath(graph, raw.filePath) : void 0);
+  const parents = node ? getParents(graph, node.id) : [];
+  return {
+    componentName,
+    filePath: display,
+    absFilePath,
+    line: raw.line ?? node?.line,
+    column: raw.column ?? node?.column,
+    route: route ?? node?.route,
+    domTag: raw.domTag,
+    parent: parents[0],
+    parents,
+    children: node ? getChildren(graph, node.id) : [],
+    imports: node ? getImports(graph, node.id) : [],
+    props: extractProps(el),
+    source: "hover",
+    nodeId: node?.id
+  };
+}
+function selectFromNode(graph, node) {
+  return {
+    componentName: node.name,
+    filePath: node.filePath,
+    absFilePath: toAbsPath(graph, node.filePath),
+    line: node.line,
+    column: node.column,
+    route: node.route,
+    parent: getParents(graph, node.id)[0],
+    parents: getParents(graph, node.id),
+    children: getChildren(graph, node.id),
+    imports: getImports(graph, node.id),
+    source: "graph",
+    nodeId: node.id
+  };
+}
+function collectMounted(graph) {
+  const idx = getIndex(graph);
+  if (!idx || typeof document === "undefined") return [];
+  try {
+    let root = null;
+    const all = document.body.getElementsByTagName("*");
+    for (let i = 0; i < all.length; i += 1) {
+      let f = getFiber(all[i]);
+      if (f) {
+        let g = 0;
+        while (f.return && g < 1e5) {
+          f = f.return;
+          g += 1;
+        }
+        root = f;
+        break;
+      }
+    }
+    if (!root) return [];
+    const counts = /* @__PURE__ */ new Map();
+    const stack = [root];
+    let visited = 0;
+    while (stack.length && visited < 2e5) {
+      const cur = stack.pop();
+      if (!cur) continue;
+      visited += 1;
+      const name = getDisplayName(cur.type);
+      if (name) {
+        const node = idx.byName.get(name);
+        if (node && node.type === "component") counts.set(name, (counts.get(name) ?? 0) + 1);
+      }
+      if (cur.child) stack.push(cur.child);
+      if (cur.sibling) stack.push(cur.sibling);
+    }
+    return [...counts.entries()].map(([name, count]) => ({ name, node: idx.byName.get(name), count })).sort((a, b) => a.name.localeCompare(b.name));
+  } catch {
+    return [];
+  }
+}
+function formatForCopy(s) {
+  const lines = [`Component: ${s.componentName}`];
+  if (s.filePath) lines.push(`File: ${s.filePath}${s.line ? `:${s.line}` : ""}`);
+  if (s.route) lines.push(`Route: ${s.route}`);
+  if (s.parent) lines.push(`Parent: ${s.parent}`);
+  if (s.children.length) lines.push(`Children: ${s.children.join(", ")}`);
+  if (s.imports.length) lines.push(`Imports: ${s.imports.join(", ")}`);
+  return lines.join("\n");
+}
+var MAX_DEPTH = 6;
+function Label({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rdp-section-label", children });
+}
+function RowActions({
+  node,
+  onOpen,
+  onCopy
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", gap: 2 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "rdp-iconbtn-bare", title: "Open in editor", onClick: (e) => {
+      e.stopPropagation();
+      onOpen(node);
+    }, children: /* @__PURE__ */ jsxRuntime.jsx(IconFileCode, { size: 13 }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "rdp-iconbtn-bare", title: "Copy file path", onClick: (e) => {
+      e.stopPropagation();
+      onCopy(node);
+    }, children: /* @__PURE__ */ jsxRuntime.jsx(IconCopy, { size: 13 }) })
+  ] });
+}
+function RowShell({
+  depth = 0,
+  active,
+  caret,
+  label,
+  isRoute,
+  onLabel,
+  actions
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "rdp-row",
+      style: {
+        padding: "3px 6px",
+        paddingLeft: 6 + depth * 14,
+        gap: 4,
+        alignItems: "center",
+        background: active ? "rgba(105,80,232,0.16)" : void 0
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 16, display: "grid", placeItems: "center", color: "var(--rdp-text-faint)" }, children: caret }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onLabel,
+            className: "rdp-mono",
+            style: {
+              flex: 1,
+              minWidth: 0,
+              textAlign: "left",
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              fontSize: 12,
+              fontWeight: active ? 700 : 500,
+              color: isRoute ? "var(--rdp-info)" : active ? "var(--rdp-accent)" : "var(--rdp-text)",
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            },
+            children: label
+          }
+        ),
+        actions
+      ]
+    }
+  );
+}
+function Branch({ name, depth, trail, p }) {
+  const node = findNode(p.graph, name);
+  const id = node?.id ?? name;
+  const kids = node ? getChildren(p.graph, id) : [];
+  const hasKids = kids.length > 0 && depth < MAX_DEPTH && !trail.has(id);
+  const open = p.expanded.has(id);
+  const active = p.selected?.nodeId === id || p.selected?.componentName === name;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      RowShell,
+      {
+        depth,
+        active,
+        isRoute: node?.type === "route",
+        caret: hasKids ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { cursor: "pointer" }, onClick: () => p.onToggle(id), children: open ? /* @__PURE__ */ jsxRuntime.jsx(IconChevronDown, { size: 13 }) : /* @__PURE__ */ jsxRuntime.jsx(IconChevronRight, { size: 13 }) }) : null,
+        label: name,
+        onLabel: () => node && p.onSelect(node),
+        actions: node ? /* @__PURE__ */ jsxRuntime.jsx(RowActions, { node, onOpen: p.onOpen, onCopy: p.onCopy }) : null
+      }
+    ),
+    hasKids && open && kids.map((k) => /* @__PURE__ */ jsxRuntime.jsx(Branch, { name: k, depth: depth + 1, trail: /* @__PURE__ */ new Set([...trail, id]), p }, `${id}>${k}`))
+  ] });
+}
+function ComponentGraphTree(p) {
+  const { graph, selected, search } = p;
+  if (graph && search.trim()) {
+    const results = searchNodes(graph, search);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Label, { children: [
+        results.length,
+        " match",
+        results.length === 1 ? "" : "es"
+      ] }),
+      results.map((node) => /* @__PURE__ */ jsxRuntime.jsx(
+        RowShell,
+        {
+          active: selected?.nodeId === node.id,
+          isRoute: node.type === "route",
+          label: node.name,
+          onLabel: () => p.onSelect(node),
+          actions: /* @__PURE__ */ jsxRuntime.jsx(RowActions, { node, onOpen: p.onOpen, onCopy: p.onCopy })
+        },
+        node.id
+      )),
+      results.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { color: "var(--rdp-text-faint)", paddingLeft: 8 }, children: [
+        "No components match \u201C",
+        search,
+        "\u201D."
+      ] })
+    ] });
+  }
+  if (!selected) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "var(--rdp-text-faint)", padding: "8px 2px" }, children: "Lock a component (hover + click) or search above to explore the tree." });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    selected.parents.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Parent chain" }),
+      selected.parents.map((parent) => {
+        const node = findNode(graph, parent);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          RowShell,
+          {
+            isRoute: node?.type === "route",
+            caret: /* @__PURE__ */ jsxRuntime.jsx(IconArrowUp, { size: 12 }),
+            label: parent,
+            onLabel: () => node && p.onSelect(node),
+            actions: node ? /* @__PURE__ */ jsxRuntime.jsx(RowActions, { node, onOpen: p.onOpen, onCopy: p.onCopy }) : null
+          },
+          `p:${parent}`
+        );
+      })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Selected" }),
+    /* @__PURE__ */ jsxRuntime.jsx(RowShell, { active: true, label: selected.componentName, onLabel: () => void 0 }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Label, { children: [
+      "Renders (",
+      selected.children.length,
+      ")"
+    ] }),
+    selected.children.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "var(--rdp-text-faint)", paddingLeft: 20 }, children: "No child components detected." }) : selected.children.map((c) => /* @__PURE__ */ jsxRuntime.jsx(Branch, { name: c, depth: 0, trail: new Set(selected.nodeId ? [selected.nodeId] : []), p }, `c:${c}`)),
+    selected.imports.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Label, { children: [
+        "Imports (",
+        selected.imports.length,
+        ")"
+      ] }),
+      selected.imports.map((imp) => {
+        const node = findNode(graph, imp);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          RowShell,
+          {
+            isRoute: node?.type === "route",
+            label: imp,
+            onLabel: () => node && p.onSelect(node),
+            actions: node ? /* @__PURE__ */ jsxRuntime.jsx(RowActions, { node, onOpen: p.onOpen, onCopy: p.onCopy }) : null
+          },
+          `i:${imp}`
+        );
+      })
+    ] })
+  ] });
+}
+function ComponentGraphPageList({
+  graph,
+  route,
+  selectedName,
+  onSelect,
+  onOpen,
+  onCopy
+}) {
+  const [items, setItems] = react.useState([]);
+  const [query, setQuery] = react.useState("");
+  const scan = react.useCallback(() => setItems(collectMounted(graph)), [graph]);
+  react.useEffect(() => {
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(scan);
+    });
+    const late = setTimeout(scan, 600);
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+      clearTimeout(late);
+    };
+  }, [scan, route]);
+  if (!graph) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "var(--rdp-text-faint)", padding: "6px 2px" }, children: "Load the component graph (Graph tab) to map mounted components to source files." });
+  }
+  const q = query.trim().toLowerCase();
+  const filtered = q ? items.filter((i) => i.name.toLowerCase().includes(q) || i.node.filePath.toLowerCase().includes(q)) : items;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 6 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "rdp-sub", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rdp-mono", style: { color: "var(--rdp-info)" }, children: route ?? "/" }),
+        " \xB7",
+        " ",
+        q ? `${filtered.length} / ${items.length}` : items.length,
+        " component",
+        items.length === 1 ? "" : "s"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "rdp-btn rdp-btn-sm", onClick: scan, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(IconRefresh, { size: 13 }),
+        " Rescan"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(GraphSearch, { value: query, onChange: setQuery, placeholder: "Filter components on this page\u2026" }) }),
+    items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "var(--rdp-text-faint)", paddingLeft: 4 }, children: "No graph components detected in the live tree. Try Rescan, or regenerate the graph." }) : filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { color: "var(--rdp-text-faint)", paddingLeft: 4 }, children: [
+      "No components match \u201C",
+      query,
+      "\u201D."
+    ] }) : filtered.map(({ name, node, count }) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "rdp-row",
+        style: { padding: "4px 6px", alignItems: "center", background: selectedName === name ? "rgba(105,80,232,0.16)" : void 0 },
+        onClick: () => onSelect(node),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rdp-mono", style: { fontWeight: 600, fontSize: 12, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: name }),
+              count > 1 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "rdp-chip", style: { background: "var(--rdp-bg-soft)", color: "var(--rdp-text-dim)", height: 15 }, children: [
+                "\xD7",
+                count
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "block", color: "var(--rdp-text-faint)", fontSize: 11, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: node.filePath })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", gap: 2 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "rdp-iconbtn-bare", title: "Open in editor", onClick: (e) => {
+              e.stopPropagation();
+              onOpen(node);
+            }, children: /* @__PURE__ */ jsxRuntime.jsx(IconFileCode, { size: 13 }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "rdp-iconbtn-bare", title: "Copy file path", onClick: (e) => {
+              e.stopPropagation();
+              onCopy(node);
+            }, children: /* @__PURE__ */ jsxRuntime.jsx(IconCopy, { size: 13 }) })
+          ] })
+        ]
+      },
+      node.id
+    ))
+  ] });
+}
+
+// src/tools/component-graph/store.ts
+var state = {
+  enabled: false,
+  mode: "hover",
+  selected: null,
+  graph: null,
+  status: "idle",
+  search: "",
+  expanded: /* @__PURE__ */ new Set(),
+  toast: null
+};
+var listeners3 = /* @__PURE__ */ new Set();
+var scheduled = false;
+var toastTimer = null;
+function emit3() {
+  if (scheduled) return;
+  scheduled = true;
+  const flush = () => {
+    scheduled = false;
+    listeners3.forEach((l) => l());
+  };
+  if (typeof queueMicrotask === "function") queueMicrotask(flush);
+  else void Promise.resolve().then(flush);
+}
+function set(patch) {
+  state = { ...state, ...patch };
+  emit3();
+}
+function subscribeGraph(l) {
+  listeners3.add(l);
+  return () => listeners3.delete(l);
+}
+function getGraphState() {
+  return state;
+}
+var SERVER = { ...state };
+function getGraphServerState() {
+  return SERVER;
+}
+function disableInspector() {
+  if (state.enabled) set({ enabled: false });
+}
+function toggleInspector(endpoint) {
+  set({ enabled: !state.enabled });
+  if (state.enabled) void loadGraph(endpoint);
+}
+function setMode(mode) {
+  if (state.mode !== mode) set({ mode });
+}
+function setSelected(selected) {
+  set({ selected });
+}
+function setSearch(search) {
+  set({ search });
+}
+function toggleExpanded(id) {
+  const expanded = new Set(state.expanded);
+  if (expanded.has(id)) expanded.delete(id);
+  else expanded.add(id);
+  set({ expanded });
+}
+function showToast(toast) {
+  set({ toast });
+  if (toastTimer) clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => {
+    toastTimer = null;
+    set({ toast: null });
+  }, 2600);
+}
+var graphPromise = null;
+function loadGraph(endpoint, force = false) {
+  if (!endpoint) {
+    set({ status: "empty" });
+    return Promise.resolve();
+  }
+  if (!force && (state.status === "ready" || state.status === "loading")) {
+    return graphPromise ?? Promise.resolve();
+  }
+  set({ status: "loading" });
+  graphPromise = (async () => {
+    try {
+      const res = await fetch(endpoint, { headers: { Accept: "application/json" } });
+      if (res.status === 404) return set({ graph: null, status: "empty" });
+      if (!res.ok) return set({ status: "error" });
+      const graph = await res.json();
+      set({ graph, status: graph.nodes?.length ? "ready" : "empty" });
+    } catch {
+      set({ status: "error" });
+    }
+  })();
+  return graphPromise;
+}
+var TABS = [
+  { value: "hover", label: "Hover", icon: /* @__PURE__ */ jsxRuntime.jsx(IconPointer, { size: 14 }) },
+  { value: "graph", label: "Graph", icon: /* @__PURE__ */ jsxRuntime.jsx(IconGraph, { size: 14 }) },
+  { value: "page", label: "Page", icon: /* @__PURE__ */ jsxRuntime.jsx(IconLayers, { size: 14 }) },
+  { value: "file", label: "File", icon: /* @__PURE__ */ jsxRuntime.jsx(IconFileCode, { size: 14 }) }
+];
+async function copy(text) {
+  if (typeof navigator === "undefined" || !navigator.clipboard) return false;
+  return navigator.clipboard.writeText(text).then(
+    () => true,
+    () => false
+  );
+}
+function ComponentGraphPanel({ onClose }) {
+  const state2 = react.useSyncExternalStore(subscribeGraph, getGraphState, getGraphServerState);
+  const config = useDevPanelConfig();
+  const route = config.getRoute();
+  const { enabled, mode, selected, graph, status, search, expanded } = state2;
+  const openLoc = react.useCallback(
+    async (sel) => {
+      const file = sel?.absFilePath ?? sel?.filePath;
+      if (!file) {
+        showToast({ message: "No source path available", tone: "error" });
+        return;
+      }
+      const ok = await config.openInEditor?.({ file, line: sel?.line, column: sel?.column }, config.editor);
+      showToast(ok === false ? { message: "Editor unavailable \u2014 path copied", tone: "info" } : { message: "Opening in your editor\u2026", tone: "success" });
+    },
+    [config]
+  );
+  const copyInfo = react.useCallback(() => {
+    if (!selected) return;
+    void copy(formatForCopy(selected)).then((ok) => showToast({ message: ok ? "Component info copied" : "Copy failed", tone: ok ? "success" : "error" }));
+  }, [selected]);
+  const copyPath = react.useCallback(
+    (sel) => {
+      const path = sel?.filePath ?? sel?.absFilePath;
+      if (!path) return showToast({ message: "No path to copy", tone: "info" });
+      void copy(`${path}${sel?.line ? `:${sel.line}` : ""}`).then((ok) => showToast({ message: ok ? "File path copied" : "Copy failed", tone: ok ? "success" : "error" }));
+    },
+    []
+  );
+  const selectName = react.useCallback(
+    (name) => {
+      const node = graph?.nodes.find((n) => n.name === name || n.id === name);
+      if (node) setSelected(selectFromNode(graph, node));
+    },
+    [graph]
+  );
+  const selectNode = react.useCallback((node) => setSelected(selectFromNode(graph, node)), [graph]);
+  const openNode = react.useCallback((node) => void openLoc(selectFromNode(graph, node)), [graph, openLoc]);
+  const copyNode = react.useCallback((node) => copyPath(selectFromNode(graph, node)), [graph, copyPath]);
+  const statusText = react.useMemo(() => {
+    if (status === "ready" && graph) return `${graph.nodes.length} components \xB7 ${graph.edges.length} relationships`;
+    if (status === "loading" || status === "idle") return "Loading component graph\u2026";
+    if (status === "empty") return "Graph not generated \u2014 run `npx dev-panel-graph` (or add an adapter)";
+    return "Graph endpoint unavailable.";
+  }, [status, graph]);
+  const details = /* @__PURE__ */ jsxRuntime.jsx(
+    NodeDetails,
+    {
+      selected,
+      onOpen: () => void openLoc(selected),
+      onCopyInfo: copyInfo,
+      onCopyPath: () => copyPath(selected),
+      onSelectName: selectName
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rdp-surface rdp-panel", style: { bottom: 88, right: 20 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rdp-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(IconGraph, { size: 16 }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rdp-title", style: { flex: 1 }, children: "Component Graph Inspector" }),
+      enabled && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rdp-chip", style: { background: "var(--rdp-success)", color: "#06210f" }, children: "ON" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "rdp-iconbtn-bare", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(IconX, { size: 16 }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rdp-body", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: {
+            padding: 12,
+            borderRadius: 9,
+            border: `1px solid ${enabled ? "rgba(61,220,132,0.5)" : "var(--rdp-border)"}`,
+            background: enabled ? "rgba(61,220,132,0.08)" : "var(--rdp-bg-elev)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rdp-title", style: { display: "block" }, children: "Inspect mode" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rdp-sub", children: enabled ? "Hover the UI, click to lock \xB7 Esc to exit" : "Enable, then hover the UI" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: cx("rdp-btn", enabled && "rdp-btn-primary"),
+                style: { width: "auto" },
+                onClick: () => toggleInspector(config.graphEndpoint),
+                children: enabled ? "On" : "Enable"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rdp-tabs", style: { marginTop: 12 }, children: TABS.map((t) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          className: "rdp-tab",
+          "aria-selected": mode === t.value,
+          onClick: () => {
+            setMode(t.value);
+            if (t.value === "graph" || t.value === "page") void loadGraph(config.graphEndpoint);
+          },
+          children: [
+            t.icon,
+            t.label
+          ]
+        },
+        t.value
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 12 }, children: [
+        mode === "hover" && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rdp-section-label", children: "Last locked component" }),
+          details
+        ] }),
+        mode === "graph" && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rdp-sub", style: { marginBottom: 6, color: status === "ready" ? "var(--rdp-success)" : "var(--rdp-text-faint)" }, children: statusText }),
+          (status === "empty" || status === "error") && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "rdp-btn rdp-btn-sm", style: { marginBottom: 8 }, onClick: () => loadGraph(config.graphEndpoint, true), children: "Retry graph load" }),
+          /* @__PURE__ */ jsxRuntime.jsx(GraphSearch, { value: search, onChange: setSearch }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            ComponentGraphTree,
+            {
+              graph,
+              selected,
+              search,
+              expanded,
+              onSelect: selectNode,
+              onToggle: toggleExpanded,
+              onOpen: openNode,
+              onCopy: copyNode
+            }
+          ) }),
+          selected && !search.trim() && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 12 }, children: details })
+        ] }),
+        mode === "page" && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ComponentGraphPageList,
+            {
+              graph,
+              route,
+              selectedName: selected?.componentName,
+              onSelect: selectNode,
+              onOpen: openNode,
+              onCopy: copyNode
+            }
+          ),
+          selected && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 12 }, children: details })
+        ] }),
+        mode === "file" && details
+      ] })
+    ] })
+  ] });
+}
+function ComponentGraphOverlay() {
+  const state2 = react.useSyncExternalStore(subscribeGraph, getGraphState, getGraphServerState);
+  const config = useDevPanelConfig();
+  const [hover, setHover] = react.useState(null);
+  const route = config.getRoute();
+  const { enabled } = state2;
+  const openSelected = react.useCallback(
+    async (file, line, column, name) => {
+      if (!file) {
+        showToast({ message: "No source path \u2014 generate the graph or use inspect build", tone: "error" });
+        return;
+      }
+      const ok = await config.openInEditor?.({ file, line, column }, config.editor);
+      showToast(
+        ok === false ? { message: `Editor unavailable \u2014 path copied (${name ?? ""})`, tone: "info" } : { message: "Opening in your editor\u2026", tone: "success" }
+      );
+    },
+    [config]
+  );
+  react.useEffect(() => {
+    if (!enabled) return void 0;
+    let raf = 0;
+    let last = null;
+    const onMove = (e) => {
+      last = e;
+      if (raf) return;
+      raf = requestAnimationFrame(() => {
+        raf = 0;
+        const ev = last;
+        const target = ev?.target;
+        if (!ev || !target || !(target instanceof Element) || isIgnored(target)) {
+          setHover(null);
+          return;
+        }
+        const meta = resolveDisplay(target, getGraphState().graph, route);
+        const r = target.getBoundingClientRect();
+        setHover({
+          name: meta.componentName,
+          filePath: meta.filePath,
+          line: meta.line,
+          domTag: meta.domTag,
+          route: meta.route,
+          rect: { top: r.top, left: r.left, width: r.width, height: r.height },
+          x: ev.clientX,
+          y: ev.clientY
+        });
+      });
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") disableInspector();
+    };
+    const onClick = (e) => {
+      const target = e.target;
+      if (!target || !(target instanceof Element) || isIgnored(target)) return;
+      const sel = resolveSelected(target, getGraphState().graph, route);
+      e.preventDefault();
+      e.stopPropagation();
+      setSelected(sel);
+      setMode("graph");
+      if (e.metaKey || e.ctrlKey) {
+        void openSelected(sel.absFilePath ?? sel.filePath, sel.line, sel.column, sel.componentName);
+      } else {
+        showToast({ message: `Locked ${sel.componentName}`, tone: "success" });
+      }
+    };
+    document.addEventListener("pointermove", onMove, { passive: true });
+    document.addEventListener("keydown", onKey, true);
+    document.addEventListener("click", onClick, true);
+    return () => {
+      if (raf) cancelAnimationFrame(raf);
+      document.removeEventListener("pointermove", onMove);
+      document.removeEventListener("keydown", onKey, true);
+      document.removeEventListener("click", onClick, true);
+      setHover(null);
+    };
+  }, [enabled, route, openSelected]);
+  if (!enabled) return null;
+  const flipX = typeof window !== "undefined" && hover && hover.x + 374 > window.innerWidth;
+  const flipY = typeof window !== "undefined" && hover && hover.y + 140 > window.innerHeight;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rdp-overlay", children: [
+    hover && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "rdp-hl",
+        style: { top: hover.rect.top, left: hover.rect.left, width: hover.rect.width, height: hover.rect.height }
+      }
+    ),
+    hover && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "rdp-tooltip",
+        style: {
+          top: flipY ? void 0 : hover.y + 14,
+          bottom: flipY ? window.innerHeight - hover.y + 14 : void 0,
+          left: flipX ? void 0 : hover.x + 14,
+          right: flipX ? window.innerWidth - hover.x + 14 : void 0
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: hover.filePath ? 4 : 0 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rdp-chip", style: { background: "rgba(105,80,232,0.5)", color: "#fff" }, children: hover.name }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rdp-mono", style: { color: "rgba(255,255,255,0.6)", fontSize: 11 }, children: `<${hover.domTag}>` })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rdp-mono", style: { fontSize: 11.5, color: "rgba(255,255,255,0.85)", wordBreak: "break-all" }, children: hover.filePath ? `${hover.filePath}${hover.line ? `:${hover.line}` : ""}` : "source resolved from graph on lock" }),
+          hover.route && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 11, color: "rgba(255,255,255,0.45)" }, children: hover.route }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 10.5, marginTop: 4, color: "rgba(255,255,255,0.5)" }, children: "click to lock \xB7 \u2318/Ctrl + click to open \xB7 Esc to exit" })
+        ]
+      }
+    ),
+    state2.toast && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "rdp-toast",
+        style: {
+          color: state2.toast.tone === "success" ? "var(--rdp-success)" : state2.toast.tone === "error" ? "var(--rdp-error)" : "#fff"
+        },
+        children: state2.toast.message
+      }
+    )
+  ] });
+}
+var componentGraphTool = {
+  id: "graph",
+  title: "Component Graph Inspector",
+  subtitle: "Inspect component tree & open source files",
+  color: "primary",
+  icon: /* @__PURE__ */ jsxRuntime.jsx(IconGraph, { size: 19 }),
+  Panel: ComponentGraphPanel,
+  Overlay: ComponentGraphOverlay
+};
+function registerComponentGraph() {
+  registerTool(componentGraphTool);
+}
+var STORAGE_KEY = "react-dev-panel:corner";
+var GAP = 20;
+var FAB = 52;
+var DRAG_THRESHOLD = 5;
+function isCorner(v) {
+  return v === "top-left" || v === "top-right" || v === "bottom-left" || v === "bottom-right";
+}
+function readCorner() {
+  if (typeof window === "undefined") return "bottom-right";
+  try {
+    const s = window.localStorage.getItem(STORAGE_KEY);
+    if (isCorner(s)) return s;
+  } catch {
+  }
+  return "bottom-right";
+}
+function useDraggableCorner() {
+  const [corner, setCorner] = react.useState("bottom-right");
+  const [drag, setDrag] = react.useState(null);
+  const moved = react.useRef(false);
+  const offset = react.useRef({ x: 0, y: 0 });
+  react.useEffect(() => setCorner(readCorner()), []);
+  const onPointerDown = react.useCallback((e) => {
+    if (e.button !== 0) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    offset.current = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    moved.current = false;
+    const sx = e.clientX;
+    const sy = e.clientY;
+    const move = (ev) => {
+      if (!moved.current && Math.hypot(ev.clientX - sx, ev.clientY - sy) < DRAG_THRESHOLD) return;
+      moved.current = true;
+      setDrag({ x: ev.clientX - offset.current.x, y: ev.clientY - offset.current.y });
+    };
+    const up = (ev) => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+      if (moved.current) {
+        const cxp = ev.clientX - offset.current.x + FAB / 2;
+        const cyp = ev.clientY - offset.current.y + FAB / 2;
+        const next = `${cyp < window.innerHeight / 2 ? "top" : "bottom"}-${cxp < window.innerWidth / 2 ? "left" : "right"}`;
+        setCorner(next);
+        try {
+          window.localStorage.setItem(STORAGE_KEY, next);
+        } catch {
+        }
+      }
+      setDrag(null);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+  }, []);
+  const onClickCapture = react.useCallback((e) => {
+    if (moved.current) {
+      e.stopPropagation();
+      e.preventDefault();
+      moved.current = false;
+    }
+  }, []);
+  const isTop = corner.startsWith("top");
+  const isLeft = corner.endsWith("left");
+  const pos = drag ? { top: drag.y, left: drag.x } : {
+    top: isTop ? GAP : void 0,
+    bottom: isTop ? void 0 : GAP,
+    left: isLeft ? GAP : void 0,
+    right: isLeft ? void 0 : GAP
+  };
+  return { pos, isTop, isLeft, onPointerDown, onClickCapture };
+}
+function ToolBadge({ tool }) {
+  const badge = tool.useBadge?.();
+  if (!badge) return null;
+  const bg = badge.tone === "error" ? "var(--rdp-error)" : badge.tone === "success" ? "var(--rdp-success)" : "var(--rdp-bg-soft)";
+  const color = badge.tone === "success" ? "#06210f" : "#fff";
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rdp-chip", style: { background: bg, color }, children: badge.label });
+}
+function Launcher({
+  tools: tools2,
+  onOpenTool
+}) {
+  const { pos, isTop, isLeft, onPointerDown, onClickCapture } = useDraggableCorner();
+  const [menuOpen, setMenuOpen] = react.useState(false);
+  const menuPos = {
+    top: isTop ? pos.top !== void 0 ? pos.top + FAB + 8 : GAP + FAB + 8 : void 0,
+    bottom: isTop ? void 0 : GAP + FAB + 8,
+    left: isLeft ? GAP : void 0,
+    right: isLeft ? void 0 : GAP
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: "rdp-fab",
+        style: pos,
+        onPointerDown,
+        onClickCapture,
+        onClick: () => setMenuOpen((v) => !v),
+        "aria-label": "Open Developer Tools",
+        "aria-haspopup": "menu",
+        children: /* @__PURE__ */ jsxRuntime.jsx(IconWrench, { size: 22 })
+      }
+    ),
+    menuOpen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: { position: "fixed", inset: 0, zIndex: 1 },
+          onClick: () => setMenuOpen(false),
+          "aria-hidden": true
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rdp-surface rdp-menu", style: menuPos, role: "menu", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rdp-header rdp-menu-head", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rdp-tile", style: { color: "var(--rdp-accent)", background: "rgba(105,80,232,0.16)" }, children: /* @__PURE__ */ jsxRuntime.jsx(IconWrench, { size: 17 }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rdp-title", children: "Developer Tools" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rdp-sub", children: "Internal utilities" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 8 }, children: tools2.map((tool) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: "rdp-row",
+            role: "menuitem",
+            onClick: () => {
+              onOpenTool(tool.id);
+              setMenuOpen(false);
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "rdp-tile",
+                  style: { color: colorVar(tool.color), background: "rgba(148,163,184,0.1)" },
+                  children: tool.icon
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rdp-title", style: { display: "block" }, children: tool.title }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rdp-sub", style: { display: "block" }, children: tool.subtitle })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 6, color: "var(--rdp-text-faint)" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ToolBadge, { tool }),
+                /* @__PURE__ */ jsxRuntime.jsx(IconChevronRight, { size: 16 })
+              ] })
+            ]
+          },
+          tool.id
+        )) })
+      ] })
+    ] })
+  ] });
+}
+function DevPanel(config) {
+  const enabled = config.enabled ?? (typeof process !== "undefined" ? process.env.NODE_ENV !== "production" : true);
+  react.useEffect(() => {
+    if (enabled) injectBaseStyles();
+  }, [enabled]);
+  if (!enabled) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(DevPanelConfigProvider, { config, children: /* @__PURE__ */ jsxRuntime.jsx(DevPanelInner, { ids: config.tools, theme: config.theme }) });
+}
+function DevPanelInner({
+  ids,
+  theme
+}) {
+  const tools2 = react.useMemo(() => resolveTools(ids), [ids]);
+  const [openId, setOpenId] = react.useState(null);
+  react.useEffect(() => {
+    tools2.forEach((t) => t.init?.());
+  }, [tools2]);
+  const rootStyle = {};
+  if (theme?.accent) rootStyle["--rdp-accent"] = theme.accent;
+  if (theme?.accentContrast)
+    rootStyle["--rdp-accent-contrast"] = theme.accentContrast;
+  const ActivePanel = tools2.find((t) => t.id === openId)?.Panel ?? null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rdp-root", style: rootStyle, "data-rdp-ignore": "", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Launcher, { tools: tools2, onOpenTool: setOpenId }),
+    ActivePanel && /* @__PURE__ */ jsxRuntime.jsx(ActivePanel, { onClose: () => setOpenId(null) }),
+    tools2.map((t) => t.Overlay ? /* @__PURE__ */ jsxRuntime.jsx(t.Overlay, {}, t.id) : null)
+  ] });
+}
+
+// src/core/server-open.ts
+var DEFAULT_GRAPH_ENDPOINT = "/dev-panel/graph";
+var DEFAULT_OPEN_ENDPOINT = "/dev-panel/open-file";
+function createServerOpenInEditor(endpoint = DEFAULT_OPEN_ENDPOINT) {
+  return async (loc, editor = "auto") => {
+    try {
+      const res = await fetch(endpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ file: loc.file, line: loc.line, column: loc.column, editor })
+      });
+      if (res.ok) return true;
+    } catch {
+    }
+    if (typeof navigator !== "undefined" && navigator.clipboard) {
+      await navigator.clipboard.writeText(`${loc.file}${loc.line ? `:${loc.line}` : ""}`).catch(() => void 0);
+    }
+    return false;
+  };
+}
+var serverOpenInEditor = createServerOpenInEditor();
+
+// src/index.ts
+registerDevLogs();
+registerPagePerformance();
+registerComponentGraph();
+
+exports.DEFAULT_GRAPH_ENDPOINT = DEFAULT_GRAPH_ENDPOINT;
+exports.DEFAULT_OPEN_ENDPOINT = DEFAULT_OPEN_ENDPOINT;
+exports.DevPanel = DevPanel;
+exports.createServerOpenInEditor = createServerOpenInEditor;
+exports.defaultOpenInEditor = defaultOpenInEditor;
+exports.getRegisteredTools = getRegisteredTools;
+exports.injectBaseStyles = injectBaseStyles;
+exports.registerTool = registerTool;
+exports.serverOpenInEditor = serverOpenInEditor;
+exports.useDevPanelConfig = useDevPanelConfig;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map