react-dev-panel 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -1,378 +1,808 @@
 'use strict';
 
+var Box6 = require('@mui/material/Box');
+var Chip = require('@mui/material/Chip');
+var Stack = require('@mui/material/Stack');
+var Tooltip2 = require('@mui/material/Tooltip');
+var Collapse = require('@mui/material/Collapse');
+var TextField = require('@mui/material/TextField');
+var Typography = require('@mui/material/Typography');
+var IconButton = require('@mui/material/IconButton');
+var ToggleButton = require('@mui/material/ToggleButton');
+var styles = require('@mui/material/styles');
+var InputAdornment = require('@mui/material/InputAdornment');
+var ToggleButtonGroup = require('@mui/material/ToggleButtonGroup');
 var react = require('react');
+var lu = require('react-icons/lu');
 var jsxRuntime = require('react/jsx-runtime');
 var webVitals = require('web-vitals');
+var Switch = require('@mui/material/Switch');
+var Divider = require('@mui/material/Divider');
+var Button = require('@mui/material/Button');
+var Fab = require('@mui/material/Fab');
+var Menu = require('@mui/material/Menu');
+var MenuItem = require('@mui/material/MenuItem');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Box6__default = /*#__PURE__*/_interopDefault(Box6);
+var Chip__default = /*#__PURE__*/_interopDefault(Chip);
+var Stack__default = /*#__PURE__*/_interopDefault(Stack);
+var Tooltip2__default = /*#__PURE__*/_interopDefault(Tooltip2);
+var Collapse__default = /*#__PURE__*/_interopDefault(Collapse);
+var TextField__default = /*#__PURE__*/_interopDefault(TextField);
+var Typography__default = /*#__PURE__*/_interopDefault(Typography);
+var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
+var ToggleButton__default = /*#__PURE__*/_interopDefault(ToggleButton);
+var InputAdornment__default = /*#__PURE__*/_interopDefault(InputAdornment);
+var ToggleButtonGroup__default = /*#__PURE__*/_interopDefault(ToggleButtonGroup);
+var Switch__default = /*#__PURE__*/_interopDefault(Switch);
+var Divider__default = /*#__PURE__*/_interopDefault(Divider);
+var Button__default = /*#__PURE__*/_interopDefault(Button);
+var Fab__default = /*#__PURE__*/_interopDefault(Fab);
+var Menu__default = /*#__PURE__*/_interopDefault(Menu);
+var MenuItem__default = /*#__PURE__*/_interopDefault(MenuItem);
 
 // 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;
+// src/core/registry.ts
+var tools = /* @__PURE__ */ new Map();
+function registerTool(def) {
+  tools.set(def.id, def);
 }
-
-/* 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);
+function getRegisteredTools() {
+  return [...tools.values()];
 }
-
-/* 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;
+function resolveTools(ids) {
+  if (!ids || ids.length === 0) return getRegisteredTools();
+  return ids.map((id) => tools.get(id)).filter((t) => Boolean(t));
 }
-.rdp-menu-head {
-  background: linear-gradient(135deg, rgba(105,80,232,0.18), rgba(105,80,232,0.04));
+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}`;
+  }
 }
-.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;
+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
+  };
 }
-.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;
+function DevPanelConfigProvider({
+  config,
+  children
+}) {
+  const value = react.useMemo(() => resolve(config), [config]);
+  return /* @__PURE__ */ jsxRuntime.jsx(DevPanelContext.Provider, { value, children });
 }
-
-/* 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;
+function useDevPanelConfig() {
+  const ctx = react.useContext(DevPanelContext);
+  if (!ctx) throw new Error("useDevPanelConfig must be used within <DevPanel> / DevPanelConfigProvider");
+  return ctx;
 }
-.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);
+// src/tools/dev-logs/store.ts
+var MAX_ENTRIES = 500;
+var STORAGE_KEY = "react-dev-panel:dev-logs";
+var entries = [];
+var seq = 0;
+var installed = false;
+var hydrated = false;
+var emitScheduled = false;
+var persistTimer = null;
+var listeners = /* @__PURE__ */ new Set();
+var EMPTY = [];
+function emit() {
+  if (emitScheduled) return;
+  emitScheduled = true;
+  const flush = () => {
+    emitScheduled = false;
+    listeners.forEach((listener) => listener());
+  };
+  if (typeof queueMicrotask === "function") queueMicrotask(flush);
+  else void Promise.resolve().then(flush);
+}
+function persist() {
+  if (typeof window === "undefined") return;
+  let list = entries;
+  for (let attempt = 0; attempt < 6; attempt += 1) {
+    try {
+      window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(list));
+      return;
+    } catch {
+      if (!list.length) return;
+      list = list.slice(0, Math.floor(list.length / 2));
+    }
+  }
 }
-.rdp-input input {
-  flex: 1; background: transparent; border: none; outline: none; color: var(--rdp-text);
-  font: inherit; font-size: 13px;
+function schedulePersist() {
+  if (typeof window === "undefined" || persistTimer) return;
+  persistTimer = setTimeout(() => {
+    persistTimer = null;
+    persist();
+  }, 500);
 }
-.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;
+function hydrate() {
+  if (hydrated || typeof window === "undefined") return;
+  hydrated = true;
+  try {
+    const raw = window.sessionStorage.getItem(STORAGE_KEY);
+    if (!raw) return;
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return;
+    entries = parsed.slice(0, MAX_ENTRIES);
+    seq = entries.reduce((max, entry) => {
+      const n = Number(String(entry.id).replace("log-", ""));
+      return Number.isFinite(n) && n > max ? n : max;
+    }, 0);
+    emit();
+  } catch {
+  }
 }
-
-/* 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};
+function getDevLogs() {
+  return entries;
 }
-
-.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;
+function getDevLogsServerSnapshot() {
+  return EMPTY;
+}
+function subscribeDevLogs(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+function clearDevLogs() {
+  entries = [];
+  if (persistTimer) {
+    clearTimeout(persistTimer);
+    persistTimer = null;
   }
-  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)";
+  if (typeof window !== "undefined") {
+    try {
+      window.sessionStorage.removeItem(STORAGE_KEY);
+    } catch {
+    }
   }
+  emit();
 }
-function cx(...parts) {
-  return parts.filter(Boolean).join(" ");
+function errorCount() {
+  return entries.reduce((n, e) => e.level === "error" ? n + 1 : n, 0);
 }
-
-// src/core/registry.ts
-var tools = /* @__PURE__ */ new Map();
-function registerTool(def) {
-  tools.set(def.id, def);
+function addDevLog(entry) {
+  seq += 1;
+  const next = {
+    ...entry,
+    id: `log-${seq}`,
+    timestamp: Date.now(),
+    path: typeof window !== "undefined" ? window.location.pathname : void 0
+  };
+  entries = [next, ...entries].slice(0, MAX_ENTRIES);
+  emit();
+  schedulePersist();
 }
-function getRegisteredTools() {
-  return [...tools.values()];
+function safeString(value) {
+  if (typeof value === "string") return value;
+  if (value instanceof Error) return value.message;
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
 }
-function resolveTools(ids) {
-  if (!ids || ids.length === 0) return getRegisteredTools();
-  return ids.map((id) => tools.get(id)).filter((t) => Boolean(t));
+function classifyApolloPayload(payload) {
+  if (payload && typeof payload === "object") {
+    const p = payload;
+    if (p.gqlErrors) return "server";
+    if (p.networkError || p.networkStatus) return "network";
+  }
+  return "server";
+}
+function captureConsole(level, args) {
+  const firstStr = typeof args[0] === "string" ? args[0] : safeString(args[0]);
+  if (firstStr.startsWith("[Apollo error]")) {
+    const payload = args[1];
+    addDevLog({
+      source: classifyApolloPayload(payload),
+      level,
+      message: firstStr.replace("[Apollo error] ", "").trim() || "Apollo error",
+      detail: payload !== void 0 ? safeString(payload) : void 0
+    });
+    return;
+  }
+  const errorArg = args.find((a) => a instanceof Error);
+  addDevLog({
+    source: "client",
+    level,
+    message: args.map(safeString).join(" ").trim() || `console.${level}`,
+    stack: errorArg?.stack
+  });
 }
-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 NETWORK_IGNORE = ["/_next/", "/__nextjs", "hot-update", "webpack", ".map", "/monitoring"];
+function shouldIgnoreNetwork(url) {
+  return NETWORK_IGNORE.some((needle) => url.includes(needle));
+}
+function resolveRequest(input) {
+  if (typeof input === "string") return { url: input, method: "GET" };
+  if (input instanceof URL) return { url: input.href, method: "GET" };
+  return { url: input.url, method: input.method || "GET" };
+}
+function graphqlOperationName(body) {
+  if (typeof body !== "string") return void 0;
+  try {
+    const parsed = JSON.parse(body);
+    if (Array.isArray(parsed)) {
+      const names = parsed.map((p) => p?.operationName).filter(Boolean);
+      return names.length ? names.join(", ") : void 0;
     }
-  );
+    return parsed?.operationName || void 0;
+  } catch {
+    return void 0;
+  }
 }
-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 detectOpType(query, opName) {
+  if (typeof query !== "string") return void 0;
+  if (opName) {
+    const named = new RegExp(`\\b(query|mutation|subscription)\\s+${opName}\\b`).exec(query);
+    if (named) return named[1];
+  }
+  const keyword = /\b(query|mutation|subscription)\b/.exec(query);
+  if (keyword) return keyword[1];
+  return /^\s*\{/.test(query) ? "query" : void 0;
 }
-function push(level, message, meta) {
-  buffer = [...buffer.slice(-499), { id: nextId++, level, time: Date.now(), message, meta }];
-  emit();
+function graphqlOperationType(body) {
+  if (typeof body !== "string") return void 0;
+  try {
+    const parsed = JSON.parse(body);
+    const ops = Array.isArray(parsed) ? parsed : [parsed];
+    const types = ops.map((p) => detectOpType(p?.query, p?.operationName)).filter(Boolean);
+    const unique = Array.from(new Set(types));
+    return unique.length === 1 ? unique[0] : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function collapseSignedQuery(u) {
+  return u.searchParams.has("X-Amz-Signature") ? "?[signed]" : u.search;
+}
+function shortUrl(url) {
+  try {
+    const u = new URL(url, window.location.origin);
+    return u.pathname + collapseSignedQuery(u);
+  } catch {
+    return url;
+  }
+}
+function redactedUrl(url) {
+  try {
+    const u = new URL(url, window.location.origin);
+    return `${u.origin}${u.pathname}${collapseSignedQuery(u)}`;
+  } catch {
+    return url;
+  }
 }
-function stringify(args) {
-  return args.map((a) => {
-    if (typeof a === "string") return a;
+function networkLevel(status) {
+  if (status === 0 || status >= 500) return "error";
+  if (status >= 400) return "warn";
+  return "info";
+}
+var MAX_REASON_CHARS = 160;
+function errorReason(body) {
+  if (!body) return void 0;
+  const text = body.trim();
+  if (!text) return void 0;
+  const xmlCode = /<Code>([^<]+)<\/Code>/i.exec(text)?.[1];
+  const xmlMessage = /<Message>([^<]+)<\/Message>/i.exec(text)?.[1];
+  if (xmlCode || xmlMessage) return [xmlCode, xmlMessage].filter(Boolean).join(": ").slice(0, MAX_REASON_CHARS);
+  if (text[0] === "{" || text[0] === "[") {
     try {
-      return JSON.stringify(a);
+      const parsed = JSON.parse(text);
+      const gql = parsed?.errors?.map((e) => e?.message).filter(Boolean).join("; ");
+      const reason = gql || (typeof parsed.message === "string" ? parsed.message : void 0) || (typeof parsed.error === "string" ? parsed.error : void 0);
+      if (reason) return reason.slice(0, MAX_REASON_CHARS);
     } catch {
-      return String(a);
     }
-  }).join(" ").slice(0, 2e3);
+  }
+  const firstLine = text.split("\n").find((line) => line.trim());
+  return firstLine ? firstLine.slice(0, MAX_REASON_CHARS) : void 0;
 }
-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 graphqlResponseErrors(body) {
+  if (!body) return void 0;
+  const trimmed = body.trim();
+  if (trimmed[0] !== "{" && trimmed[0] !== "[") return void 0;
+  try {
+    const parsed = JSON.parse(trimmed);
+    const result = Array.isArray(parsed) ? parsed[0] : parsed;
+    const errors = result?.errors;
+    if (!Array.isArray(errors) || errors.length === 0) return void 0;
+    const reason = errors.map((e) => {
+      const code = e?.extensions?.code;
+      return code ? `${code}: ${e?.message ?? ""}`.trim() : e?.message;
+    }).filter(Boolean).join("; ").slice(0, MAX_REASON_CHARS) || "GraphQL error";
+    const data = result?.data;
+    const partial = data != null && typeof data === "object" && Object.values(data).some((v) => v != null);
+    return { reason, partial };
+  } catch {
+    return void 0;
   }
 }
-function subscribeLogs(listener) {
-  listeners.add(listener);
-  return () => listeners.delete(listener);
+var MAX_BODY_CHARS = 5e4;
+function truncateBody(text) {
+  if (text.length <= MAX_BODY_CHARS) return text;
+  return `${text.slice(0, MAX_BODY_CHARS)}
+\u2026 [truncated ${text.length - MAX_BODY_CHARS} chars]`;
 }
-function getLogs() {
-  return buffer;
+function prettyMaybeJson(text) {
+  const trimmed = text.trim();
+  if (trimmed[0] !== "{" && trimmed[0] !== "[") return text;
+  try {
+    return JSON.stringify(JSON.parse(trimmed), null, 2);
+  } catch {
+    return text;
+  }
 }
-var EMPTY = [];
-function getServerLogs() {
-  return EMPTY;
+function formatGraphqlBody(parsed) {
+  const ops = Array.isArray(parsed) ? parsed : [parsed];
+  if (!ops.length || !ops.every((op) => op && typeof op === "object" && typeof op.query === "string")) return null;
+  return ops.map((op) => {
+    const parts = [];
+    if (op.operationName) parts.push(`# Operation: ${op.operationName}`);
+    if (op.variables && Object.keys(op.variables).length > 0)
+      parts.push(`# Variables
+${JSON.stringify(op.variables, null, 2)}`);
+    parts.push(`# Query
+${op.query.trim()}`);
+    return parts.join("\n\n");
+  }).join("\n\n\u2014\u2014\u2014\n\n");
+}
+function formatBodyString(text) {
+  const trimmed = text.trim();
+  if (trimmed[0] === "{" || trimmed[0] === "[") {
+    try {
+      const parsed = JSON.parse(trimmed);
+      return formatGraphqlBody(parsed) ?? JSON.stringify(parsed, null, 2);
+    } catch {
+      return text;
+    }
+  }
+  return text;
+}
+var SENSITIVE_HEADERS = ["authorization", "cookie", "set-cookie", "x-api-key", "proxy-authorization"];
+function formatHeaders(source) {
+  const lines = [];
+  source.forEach((value, key) => {
+    const redacted = SENSITIVE_HEADERS.includes(key.toLowerCase()) ? "[redacted]" : value;
+    lines.push(`${key}: ${redacted}`);
+  });
+  return lines.length ? lines.join("\n") : void 0;
+}
+function requestHeaders(input, init) {
+  const merged = new Headers();
+  if (input instanceof Request) input.headers.forEach((value, key) => merged.set(key, value));
+  if (init?.headers) new Headers(init.headers).forEach((value, key) => merged.set(key, value));
+  return formatHeaders(merged);
+}
+function rawRequestBody(body) {
+  if (typeof body !== "string") return void 0;
+  return truncateBody(body);
+}
+function readableRequestBody(body) {
+  if (body == null) return void 0;
+  if (typeof body === "string") return truncateBody(formatBodyString(body));
+  if (body instanceof URLSearchParams) return body.toString();
+  const name = body.constructor?.name;
+  return `[${name || "binary"} body \u2014 not shown]`;
+}
+async function readResponseBody(res) {
+  try {
+    const ct = res.headers.get("content-type") ?? "";
+    if (ct && !/json|text|xml|graphql|javascript|csv|html/i.test(ct)) return `[${ct} response \u2014 not shown]`;
+    const text = await res.text();
+    if (!text) return void 0;
+    return truncateBody(prettyMaybeJson(text));
+  } catch {
+    return void 0;
+  }
 }
-function clearLogs() {
-  buffer = [];
-  emit();
+function captureFetch() {
+  if (typeof window.fetch !== "function") return;
+  const origFetch = window.fetch.bind(window);
+  window.fetch = async (input, init) => {
+    const { url, method: inferredMethod } = resolveRequest(input);
+    const method = (init?.method || inferredMethod || "GET").toUpperCase();
+    if (shouldIgnoreNetwork(url)) return origFetch(input, init);
+    const opName = graphqlOperationName(init?.body ?? null);
+    const opType = graphqlOperationType(init?.body ?? null);
+    const reqHeaders = requestHeaders(input, init);
+    const requestBody = readableRequestBody(init?.body ?? null);
+    const requestBodyRaw = rawRequestBody(init?.body ?? null);
+    const start = Date.now();
+    const log = (status, statusText, errored, responseBody, responseHeaders) => {
+      const ms = Date.now() - start;
+      const opLabel = opName ? `${opType ? `${opType} ` : ""}${opName}` : void 0;
+      const label = opLabel ? `${shortUrl(url)} \xB7 ${opLabel}` : shortUrl(url);
+      const gqlErrors = !errored && status < 400 ? graphqlResponseErrors(responseBody) : void 0;
+      const statusLabel = errored ? "FAILED" : String(status);
+      const reason = errored ? statusText : status >= 400 ? errorReason(responseBody) : gqlErrors?.reason;
+      const level = errored ? "error" : gqlErrors ? gqlErrors.partial ? "warn" : "error" : networkLevel(status);
+      addDevLog({
+        source: "network",
+        level,
+        message: `${method} ${statusLabel} ${label} (${ms}ms)${reason ? ` \u2014 ${reason}` : ""}`,
+        detail: `${method} ${redactedUrl(url)}
+${errored ? statusText : `${status} ${statusText}`} \xB7 ${ms}ms${gqlErrors ? ` \xB7 GraphQL ${gqlErrors.partial ? "partial error" : "error"}` : ""}`,
+        requestHeaders: reqHeaders,
+        requestBody,
+        requestBodyRaw,
+        responseHeaders,
+        responseBody
+      });
+    };
+    try {
+      const res = await origFetch(input, init);
+      let clone = null;
+      try {
+        clone = res.clone();
+      } catch {
+        clone = null;
+      }
+      const resHeaders = formatHeaders(res.headers);
+      if (clone) void readResponseBody(clone).then((body) => log(res.status, res.statusText, false, body, resHeaders));
+      else log(res.status, res.statusText, false, void 0, resHeaders);
+      return res;
+    } catch (err) {
+      log(0, err instanceof Error ? err.message : "Network error", true);
+      throw err;
+    }
+  };
 }
-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 installDevLogCapture() {
+  if (installed || typeof window === "undefined") return;
+  installed = true;
+  hydrate();
+  captureFetch();
+  window.addEventListener("pagehide", persist);
+  const origError = console.error.bind(console);
+  const origWarn = console.warn.bind(console);
+  const origLog = console.log.bind(console);
+  console.error = (...args) => {
+    origError(...args);
+    try {
+      captureConsole("error", args);
+    } catch {
+    }
+  };
+  console.warn = (...args) => {
+    origWarn(...args);
+    try {
+      captureConsole("warn", args);
+    } catch {
+    }
+  };
+  console.log = (...args) => {
+    origLog(...args);
+    try {
+      captureConsole("info", args);
+    } catch {
+    }
+  };
+  window.addEventListener("error", (event) => {
+    addDevLog({
+      source: "client",
+      level: "error",
+      message: event.message || "Uncaught error",
+      stack: event.error?.stack,
+      detail: event.filename ? `${event.filename}:${event.lineno}:${event.colno}` : void 0
+    });
+  });
+  window.addEventListener("unhandledrejection", (event) => {
+    const reason = event.reason;
+    addDevLog({
+      source: "client",
+      level: "error",
+      message: reason?.message ? `Unhandled rejection: ${reason.message}` : "Unhandled promise rejection",
+      stack: reason?.stack,
+      detail: safeString(event.reason)
+    });
+  });
+}
+var SOURCE_COLOR = {
+  server: "warning",
+  client: "info",
+  network: "success"
 };
-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 }) })
+function formatTime(ts) {
+  const d = new Date(ts);
+  const pad = (n) => String(n).padStart(2, "0");
+  return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+}
+function buildSections(entry) {
+  const sections = [];
+  const requestTabs = [];
+  if (entry.requestBody) {
+    const hasRaw = Boolean(entry.requestBodyRaw && entry.requestBodyRaw !== entry.requestBody);
+    requestTabs.push({
+      key: "payload",
+      label: "Payload",
+      value: entry.requestBody,
+      variants: hasRaw ? [
+        { key: "pretty", label: "Pretty", value: entry.requestBody },
+        { key: "raw", label: "Raw", value: entry.requestBodyRaw }
+      ] : void 0
+    });
+  }
+  if (entry.requestHeaders) requestTabs.push({ key: "headers", label: "Headers", value: entry.requestHeaders });
+  if (requestTabs.length) sections.push({ label: "Request", tabs: requestTabs });
+  const responseTabs = [];
+  if (entry.responseBody) responseTabs.push({ key: "body", label: "Body", value: entry.responseBody });
+  if (entry.responseHeaders) responseTabs.push({ key: "headers", label: "Headers", value: entry.responseHeaders });
+  if (responseTabs.length) sections.push({ label: "Response", tabs: responseTabs });
+  if (entry.stack) sections.push({ label: "Stack trace", tabs: [{ key: "stack", label: "Stack trace", value: entry.stack }] });
+  if (!sections.length && entry.detail) sections.push({ label: "Detail", tabs: [{ key: "detail", label: "Detail", value: entry.detail }] });
+  return sections;
+}
+var TOGGLE_SX = {
+  "& .MuiToggleButton-root": {
+    py: 0,
+    px: 0.75,
+    height: 20,
+    fontSize: "0.6rem",
+    fontWeight: 700,
+    lineHeight: 1,
+    letterSpacing: 0.3,
+    textTransform: "uppercase",
+    border: "1px solid",
+    borderColor: "divider"
+  }
+};
+function CopyButton({ value }) {
+  const [copied, setCopied] = react.useState(false);
+  const handleCopy = react.useCallback(
+    (e) => {
+      e.stopPropagation();
+      navigator.clipboard?.writeText(value).then(
+        () => {
+          setCopied(true);
+          window.setTimeout(() => setCopied(false), 1200);
+        },
+        () => void 0
+      );
+    },
+    [value]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip2__default.default, { title: copied ? "Copied" : "Copy", placement: "top", children: /* @__PURE__ */ jsxRuntime.jsx(IconButton__default.default, { size: "small", onClick: handleCopy, sx: { color: copied ? "success.main" : void 0 }, children: copied ? /* @__PURE__ */ jsxRuntime.jsx(lu.LuCheck, { size: 13 }) : /* @__PURE__ */ jsxRuntime.jsx(lu.LuCopy, { size: 13 }) }) });
+}
+function SectionBlock({ section }) {
+  const theme = styles.useTheme();
+  const [activeTabKey, setActiveTabKey] = react.useState(section.tabs[0]?.key);
+  const [variantByTab, setVariantByTab] = react.useState({});
+  const activeTab = section.tabs.find((t) => t.key === activeTabKey) ?? section.tabs[0];
+  const activeVariantKey = variantByTab[activeTab.key] ?? activeTab.variants?.[0]?.key;
+  const activeVariant = activeTab.variants?.find((v) => v.key === activeVariantKey);
+  const displayValue = activeVariant?.value ?? activeTab.value;
+  const showTabs = section.tabs.length > 1;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { px: 1, py: 0.25, gap: 0.5, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", spacing: 0.75, sx: { minWidth: 0 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "caption", sx: { color: "text.disabled", fontWeight: 700, textTransform: "uppercase", letterSpacing: 0.4 }, children: section.label }),
+        showTabs && /* @__PURE__ */ jsxRuntime.jsx(ToggleButtonGroup__default.default, { size: "small", exclusive: true, value: activeTab.key, onChange: (_, next) => next && setActiveTabKey(next), sx: TOGGLE_SX, children: section.tabs.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ToggleButton__default.default, { value: t.key, children: t.label }, t.key)) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", spacing: 0.5, children: [
+        activeTab.variants && /* @__PURE__ */ jsxRuntime.jsx(
+          ToggleButtonGroup__default.default,
+          {
+            size: "small",
+            exclusive: true,
+            value: activeVariantKey,
+            onChange: (_, next) => next && setVariantByTab((prev) => ({ ...prev, [activeTab.key]: next })),
+            sx: TOGGLE_SX,
+            children: activeTab.variants.map((v) => /* @__PURE__ */ jsxRuntime.jsx(ToggleButton__default.default, { value: v.key, children: v.label }, v.key))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { value: displayValue })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px 12px 0", display: "flex", gap: 4, flexWrap: "wrap" }, children: LEVELS.map((lvl) => /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Box6__default.default,
       {
-        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)) })
+        component: "pre",
+        sx: {
+          m: 0,
+          px: 1,
+          pb: 1,
+          fontFamily: "monospace",
+          fontSize: "0.7rem",
+          color: "text.secondary",
+          whiteSpace: "pre-wrap",
+          wordBreak: "break-word",
+          overflowX: "auto",
+          maxHeight: 280,
+          bgcolor: styles.alpha(theme.palette.grey[500], 0.06)
+        },
+        children: displayValue
+      }
+    )
   ] });
 }
+function LogRow({ entry, showPath }) {
+  const [open, setOpen] = react.useState(false);
+  const sections = react.useMemo(() => buildSections(entry), [entry]);
+  const expandable = sections.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { sx: { border: "1px solid", borderColor: "divider", borderRadius: 1, overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Box6__default.default,
+      {
+        onClick: expandable ? () => setOpen((v) => !v) : void 0,
+        sx: {
+          display: "flex",
+          alignItems: "flex-start",
+          gap: 1,
+          px: 1,
+          py: 0.75,
+          cursor: expandable ? "pointer" : "default",
+          "&:hover": expandable ? { bgcolor: "action.hover" } : void 0
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Chip__default.default,
+            {
+              label: entry.source,
+              size: "small",
+              color: SOURCE_COLOR[entry.source],
+              variant: "soft",
+              sx: { height: 18, fontSize: "0.6rem", textTransform: "uppercase", fontWeight: 700, mt: 0.25, flexShrink: 0 }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { sx: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Typography__default.default,
+              {
+                variant: "body2",
+                sx: {
+                  fontFamily: "monospace",
+                  fontSize: "0.75rem",
+                  color: entry.level === "error" ? "error.main" : "text.primary",
+                  wordBreak: "break-word",
+                  whiteSpace: "pre-wrap"
+                },
+                children: entry.message
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", spacing: 1, sx: { mt: 0.25 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "caption", sx: { color: "text.disabled", fontFamily: "monospace" }, children: formatTime(entry.timestamp) }),
+              showPath && entry.path && /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "caption", sx: { color: "text.disabled", fontFamily: "monospace", wordBreak: "break-all" }, children: entry.path })
+            ] })
+          ] }),
+          expandable && /* @__PURE__ */ jsxRuntime.jsx(Box6__default.default, { sx: { flexShrink: 0, color: "text.disabled", transform: open ? "rotate(180deg)" : "none", transition: "transform 0.15s", mt: 0.25 }, children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuChevronDown, { size: 14 }) })
+        ]
+      }
+    ),
+    expandable && /* @__PURE__ */ jsxRuntime.jsx(Collapse__default.default, { in: open, unmountOnExit: true, children: /* @__PURE__ */ jsxRuntime.jsx(Stack__default.default, { spacing: 0.5, sx: { borderTop: "1px solid", borderColor: "divider", py: 0.5 }, children: sections.map((section) => /* @__PURE__ */ jsxRuntime.jsx(SectionBlock, { section }, section.label)) }) })
+  ] });
+}
+function DevLogsPanel({ onClose }) {
+  const logs = react.useSyncExternalStore(subscribeDevLogs, getDevLogs, getDevLogsServerSnapshot);
+  const pathname = useDevPanelConfig().getRoute();
+  const [source, setSource] = react.useState("all");
+  const [level, setLevel] = react.useState("all");
+  const [thisPageOnly, setThisPageOnly] = react.useState(true);
+  const [search, setSearch2] = react.useState("");
+  const filtered = react.useMemo(() => {
+    const term = search.trim().toLowerCase();
+    return logs.filter((entry) => {
+      if (source !== "all" && entry.source !== source) return false;
+      if (level !== "all" && entry.level !== level) return false;
+      if (thisPageOnly && entry.path && entry.path !== pathname) return false;
+      if (term) {
+        const haystack = `${entry.message} ${entry.detail ?? ""} ${entry.stack ?? ""}`.toLowerCase();
+        if (!haystack.includes(term)) return false;
+      }
+      return true;
+    });
+  }, [logs, source, level, thisPageOnly, search, pathname]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Box6__default.default,
+    {
+      "data-rdp-ignore": "",
+      sx: {
+        position: "fixed",
+        bottom: 96,
+        right: 24,
+        zIndex: (t) => t.zIndex.modal + 1,
+        width: "min(460px, calc(100vw - 32px))",
+        maxHeight: "min(70vh, 640px)",
+        display: "flex",
+        flexDirection: "column",
+        borderRadius: 2,
+        overflow: "hidden",
+        border: "1px solid",
+        borderColor: "divider",
+        bgcolor: "background.paper",
+        boxShadow: 12
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { px: 1.5, py: 1, borderBottom: "1px solid", borderColor: "divider", flexShrink: 0 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", spacing: 1, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lu.LuBug, { size: 16 }),
+            /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "subtitle2", sx: { fontWeight: 700 }, children: "Developer Logs" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Chip__default.default, { label: `${filtered.length}/${logs.length}`, size: "small", variant: "soft", sx: { height: 18, fontSize: "0.65rem" } })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", spacing: 0.5, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(IconButton__default.default, { size: "small", onClick: clearDevLogs, disabled: logs.length === 0, children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuTrash2, { size: 15 }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(IconButton__default.default, { size: "small", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuX, { size: 16 }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { spacing: 1, sx: { px: 1.5, py: 1, borderBottom: "1px solid", borderColor: "divider", flexShrink: 0 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", spacing: 1, alignItems: "center", flexWrap: "wrap", useFlexGap: true, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ToggleButtonGroup__default.default, { size: "small", exclusive: true, value: source, onChange: (_, v) => v && setSource(v), children: ["all", "client", "server", "network"].map((v) => /* @__PURE__ */ jsxRuntime.jsx(ToggleButton__default.default, { value: v, sx: { px: 1, py: 0.25, fontSize: "0.7rem", textTransform: "capitalize" }, children: v }, v)) }),
+            /* @__PURE__ */ jsxRuntime.jsx(ToggleButton__default.default, { size: "small", value: "thisPage", selected: thisPageOnly, onChange: () => setThisPageOnly((v) => !v), sx: { px: 1, py: 0.25, fontSize: "0.7rem" }, children: "This page" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToggleButtonGroup__default.default, { size: "small", exclusive: true, value: level, onChange: (_, v) => v && setLevel(v), children: ["all", "error", "warn", "info"].map((v) => /* @__PURE__ */ jsxRuntime.jsx(ToggleButton__default.default, { value: v, sx: { px: 1, py: 0.25, fontSize: "0.7rem", textTransform: "capitalize" }, children: v }, v)) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TextField__default.default,
+            {
+              size: "small",
+              placeholder: "Search...",
+              value: search,
+              onChange: (e) => setSearch2(e.target.value),
+              fullWidth: true,
+              slotProps: {
+                input: {
+                  startAdornment: /* @__PURE__ */ jsxRuntime.jsx(InputAdornment__default.default, { position: "start", children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuSearch, { size: 15 }) })
+                }
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Box6__default.default, { sx: { flex: 1, overflowY: "auto", p: 1 }, children: filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "body2", sx: { color: "text.disabled", textAlign: "center", py: 4 }, children: logs.length === 0 ? "No activity captured this session." : "No logs match the current filters." }) : /* @__PURE__ */ jsxRuntime.jsx(Stack__default.default, { spacing: 0.75, children: filtered.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(LogRow, { entry, showPath: !thisPageOnly }, entry.id)) }) })
+      ]
+    }
+  );
+}
 function useBadge() {
-  const logs = react.useSyncExternalStore(subscribeLogs, getLogs, getServerLogs);
-  const errors = logs.filter((l) => l.level === "error").length;
+  const logs = react.useSyncExternalStore(subscribeDevLogs, getDevLogs, getDevLogsServerSnapshot);
   if (logs.length === 0) return null;
+  const errors = errorCount();
   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",
+  subtitle: "Client, server & network activity",
   color: "info",
-  icon: /* @__PURE__ */ jsxRuntime.jsx(IconBug, { size: 19 }),
+  icon: /* @__PURE__ */ jsxRuntime.jsx(lu.LuBug, { size: 19 }),
   Panel: DevLogsPanel,
   useBadge,
-  init: installCapture
+  init: installDevLogCapture
 };
 function registerDevLogs() {
   registerTool(devLogsTool);
@@ -392,12 +822,7 @@ function emit2() {
 function record(m) {
   metrics = {
     ...metrics,
-    [m.name]: {
-      name: m.name,
-      value: m.value,
-      rating: m.rating,
-      unit: m.name === "CLS" ? "" : "ms"
-    }
+    [m.name]: { name: m.name, value: m.value, rating: m.rating, unit: m.name === "CLS" ? "" : "ms" }
   };
   emit2();
 }
@@ -423,134 +848,112 @@ function serverSnapshot() {
   return EMPTY2;
 }
 var RATING_COLOR = {
-  good: "var(--rdp-success)",
-  "needs-improvement": "var(--rdp-warning)",
-  poor: "var(--rdp-error)"
+  good: "success",
+  "needs-improvement": "warning",
+  poor: "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 })
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Box6__default.default,
+    {
+      "data-rdp-ignore": "",
+      sx: {
+        position: "fixed",
+        bottom: 96,
+        right: 24,
+        zIndex: (t) => t.zIndex.modal + 1,
+        width: "min(440px, calc(100vw - 32px))",
+        maxHeight: "min(70vh, 640px)",
+        display: "flex",
+        flexDirection: "column",
+        borderRadius: 2,
+        overflow: "hidden",
+        border: "1px solid",
+        borderColor: "divider",
+        bgcolor: "background.paper",
+        boxShadow: 12
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { px: 1.5, py: 1, borderBottom: "1px solid", borderColor: "divider" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", spacing: 1, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lu.LuGauge, { size: 16 }),
+            /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "subtitle2", sx: { fontWeight: 700 }, children: "Page Performance" })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rdp-sub", style: { marginTop: 2 }, children: HINTS[key] })
-        ] }, key);
-      })
-    ] })
-  ] });
+          /* @__PURE__ */ jsxRuntime.jsx(IconButton__default.default, { size: "small", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuX, { size: 16 }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { sx: { flex: 1, overflowY: "auto", p: 1.5 }, children: [
+          order.every((k) => !data[k]) && /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "body2", sx: { color: "text.disabled" }, 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(Box6__default.default, { sx: { py: 1, borderBottom: "1px solid", borderColor: "divider" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", spacing: 1, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Chip__default.default,
+                  {
+                    label: m.name,
+                    size: "small",
+                    color: RATING_COLOR[m.rating],
+                    variant: "soft",
+                    sx: { height: 20, fontSize: "0.65rem", fontWeight: 700 }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(Typography__default.default, { variant: "body2", sx: { fontFamily: "monospace", fontWeight: 700 }, children: [
+                  m.unit === "ms" ? Math.round(m.value) : m.value.toFixed(3),
+                  m.unit
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "caption", sx: { color: `${RATING_COLOR[m.rating]}.main`, ml: "auto" }, children: m.rating })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "caption", sx: { color: "text.secondary", display: "block", mt: 0.25 }, 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 }),
+  icon: /* @__PURE__ */ jsxRuntime.jsx(lu.LuGauge, { 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 }) })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TextField__default.default,
+    {
+      size: "small",
+      fullWidth: true,
+      placeholder,
+      value,
+      onChange: (e) => onChange(e.target.value),
+      slotProps: {
+        input: {
+          startAdornment: /* @__PURE__ */ jsxRuntime.jsx(InputAdornment__default.default, { position: "start", children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuSearch, { size: 15 }) })
+        }
+      }
+    }
+  );
 }
 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
-  )) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Stack__default.default, { direction: "row", spacing: 0.5, useFlexGap: true, sx: { flexWrap: "wrap" }, children: names.map((n) => /* @__PURE__ */ jsxRuntime.jsx(Chip__default.default, { label: n, size: "small", variant: "outlined", onClick: () => onSelect(n), sx: { height: 18, fontSize: "0.62rem", fontFamily: "monospace" } }, 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 })
+  return /* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", spacing: 1, sx: { mt: 0.5 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "caption", sx: { minWidth: 56, color: "text.disabled", fontWeight: 600, flexShrink: 0 }, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(Box6__default.default, { sx: { minWidth: 0, flex: 1 }, children })
   ] });
 }
 function NodeDetails({
@@ -561,57 +964,33 @@ function NodeDetails({
   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.jsx(Typography__default.default, { variant: "body2", sx: { color: "text.disabled", px: 0.5, py: 1 }, 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 })
-            }
-          )
-        ] })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { sx: (t) => ({ p: 1.25, borderRadius: 1.5, border: "1px solid", borderColor: "divider", bgcolor: styles.alpha(t.palette.grey[500], 0.06) }), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", spacing: 0.75, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Chip__default.default, { label: selected.componentName, size: "small", color: "primary", variant: "soft", sx: { height: 20, fontSize: "0.68rem", fontWeight: 700 } }),
+      selected.domTag && /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "caption", sx: { color: "text.disabled", fontFamily: "monospace" }, children: `<${selected.domTag}>` })
+    ] }),
+    selected.filePath ? /* @__PURE__ */ jsxRuntime.jsxs(Typography__default.default, { variant: "caption", sx: { display: "block", mt: 0.75, fontFamily: "monospace", fontSize: "0.68rem", wordBreak: "break-all", color: "text.secondary" }, children: [
+      selected.filePath,
+      selected.line ? `:${selected.line}` : "",
+      selected.line && selected.column ? `:${selected.column}` : ""
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "caption", sx: { display: "block", mt: 0.75, color: "warning.main" }, 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(Typography__default.default, { variant: "caption", sx: { fontFamily: "monospace" }, 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(Box6__default.default, { sx: { fontFamily: "monospace", fontSize: "0.66rem", color: "text.secondary" }, children: selected.props.map((p) => /* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { component: "span", sx: { mr: 1, display: "inline-block" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Box6__default.default, { component: "span", sx: { color: "primary.main" }, children: p.name }),
+      "=",
+      p.value
+    ] }, p.name)) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Button__default.default, { fullWidth: true, variant: "contained", startIcon: /* @__PURE__ */ jsxRuntime.jsx(lu.LuFileCode, { size: 14 }), onClick: onOpen, sx: { textTransform: "none", fontSize: "0.72rem", py: 0.4, mt: 1.25 }, children: "Open in editor" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", spacing: 1, sx: { mt: 1 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Tooltip2__default.default, { title: "Copy component info", placement: "top", children: /* @__PURE__ */ jsxRuntime.jsx(IconButton__default.default, { size: "small", onClick: onCopyInfo, sx: { border: "1px solid", borderColor: "divider", borderRadius: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuClipboardCopy, { size: 15 }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Tooltip2__default.default, { title: "Copy file path", placement: "top", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(IconButton__default.default, { size: "small", onClick: onCopyPath, disabled: !selected.filePath && !selected.absFilePath, sx: { border: "1px solid", borderColor: "divider", borderRadius: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuCopy, { size: 15 }) }) }) })
+    ] })
+  ] });
 }
 
 // src/tools/component-graph/graph-utils.ts
@@ -878,27 +1257,23 @@ function formatForCopy(s) {
 }
 var MAX_DEPTH = 6;
 function Label({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rdp-section-label", children });
+  return /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "caption", sx: { display: "block", mt: 1, mb: 0.25, color: "text.disabled", fontWeight: 700, textTransform: "uppercase", letterSpacing: 0.4, fontSize: "0.6rem" }, 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) => {
+function RowActions({ node, onOpen, onCopy }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Tooltip2__default.default, { title: "Open in editor", placement: "top", children: /* @__PURE__ */ jsxRuntime.jsx(IconButton__default.default, { size: "small", sx: { p: 0.25 }, 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) => {
+    }, children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuFileCode, { size: 13 }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Tooltip2__default.default, { title: "Copy file path", placement: "top", children: /* @__PURE__ */ jsxRuntime.jsx(IconButton__default.default, { size: "small", sx: { p: 0.25 }, onClick: (e) => {
       e.stopPropagation();
       onCopy(node);
-    }, children: /* @__PURE__ */ jsxRuntime.jsx(IconCopy, { size: 13 }) })
+    }, children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuCopy, { size: 13 }) }) })
   ] });
 }
 function RowShell({
   depth = 0,
-  active,
+  active = false,
   caret,
   label,
   isRoute,
@@ -906,42 +1281,43 @@ function RowShell({
   actions
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+    Stack__default.default,
     {
-      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
-      },
+      direction: "row",
+      alignItems: "center",
+      spacing: 0.5,
+      sx: (t) => ({
+        pl: 0.5 + depth * 1.5,
+        pr: 0.5,
+        py: 0.25,
+        borderRadius: 1,
+        bgcolor: active ? styles.alpha(t.palette.primary.main, 0.16) : "transparent",
+        "&:hover": { bgcolor: active ? styles.alpha(t.palette.primary.main, 0.2) : "action.hover" },
+        "&:hover .rdp-row-actions": { opacity: 1 }
+      }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 16, display: "grid", placeItems: "center", color: "var(--rdp-text-faint)" }, children: caret }),
+        /* @__PURE__ */ jsxRuntime.jsx(Box6__default.default, { sx: { width: 16, display: "grid", placeItems: "center", color: "text.disabled" }, children: caret }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+          Typography__default.default,
           {
-            type: "button",
             onClick: onLabel,
-            className: "rdp-mono",
-            style: {
+            variant: "caption",
+            sx: {
               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",
+              fontFamily: "monospace",
+              fontSize: "0.72rem",
               overflow: "hidden",
-              textOverflow: "ellipsis"
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              color: isRoute ? "info.main" : active ? "primary.main" : "text.primary"
             },
             children: label
           }
         ),
-        actions
+        actions && /* @__PURE__ */ jsxRuntime.jsx(Stack__default.default, { direction: "row", spacing: 0.25, className: "rdp-row-actions", sx: { opacity: 0, transition: "opacity 120ms" }, children: actions })
       ]
     }
   );
@@ -953,14 +1329,14 @@ function Branch({ name, depth, trail, p }) {
   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: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { 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,
+        caret: hasKids ? /* @__PURE__ */ jsxRuntime.jsx(Box6__default.default, { sx: { cursor: "pointer", display: "grid", placeItems: "center" }, onClick: () => p.onToggle(id), children: open ? /* @__PURE__ */ jsxRuntime.jsx(lu.LuChevronDown, { size: 13 }) : /* @__PURE__ */ jsxRuntime.jsx(lu.LuChevronRight, { size: 13 }) }) : null,
         label: name,
         onLabel: () => node && p.onSelect(node),
         actions: node ? /* @__PURE__ */ jsxRuntime.jsx(RowActions, { node, onOpen: p.onOpen, onCopy: p.onCopy }) : null
@@ -973,7 +1349,7 @@ function ComponentGraphTree(p) {
   const { graph, selected, search } = p;
   if (graph && search.trim()) {
     const results = searchNodes(graph, search);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Label, { children: [
         results.length,
         " match",
@@ -990,7 +1366,7 @@ function ComponentGraphTree(p) {
         },
         node.id
       )),
-      results.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { color: "var(--rdp-text-faint)", paddingLeft: 8 }, children: [
+      results.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs(Typography__default.default, { variant: "caption", sx: { color: "text.disabled", pl: 1 }, children: [
         "No components match \u201C",
         search,
         "\u201D."
@@ -998,9 +1374,9 @@ function ComponentGraphTree(p) {
     ] });
   }
   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.jsx(Typography__default.default, { variant: "body2", sx: { color: "text.disabled", px: 0.5, py: 1 }, children: "Lock a component (hover + click) or search above to explore the tree." });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { children: [
     selected.parents.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Parent chain" }),
       selected.parents.map((parent) => {
@@ -1009,7 +1385,7 @@ function ComponentGraphTree(p) {
           RowShell,
           {
             isRoute: node?.type === "route",
-            caret: /* @__PURE__ */ jsxRuntime.jsx(IconArrowUp, { size: 12 }),
+            caret: /* @__PURE__ */ jsxRuntime.jsx(lu.LuArrowUp, { size: 12 }),
             label: parent,
             onLabel: () => node && p.onSelect(node),
             actions: node ? /* @__PURE__ */ jsxRuntime.jsx(RowActions, { node, onOpen: p.onOpen, onCopy: p.onCopy }) : null
@@ -1019,13 +1395,13 @@ function ComponentGraphTree(p) {
       })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Selected" }),
-    /* @__PURE__ */ jsxRuntime.jsx(RowShell, { active: true, label: selected.componentName, onLabel: () => void 0 }),
+    /* @__PURE__ */ jsxRuntime.jsx(RowShell, { active: true, label: selected.componentName, onLabel: () => void 0, actions: /* @__PURE__ */ jsxRuntime.jsx(Chip__default.default, { size: "small", variant: "soft", color: "primary", label: selected.source, sx: { height: 16, fontSize: "0.55rem", fontWeight: 700 } }) }),
     /* @__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.children.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "caption", sx: { color: "text.disabled", pl: 1.5 }, 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 (",
@@ -1072,56 +1448,60 @@ function ComponentGraphPageList({
     };
   }, [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." });
+    return /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "body2", sx: { color: "text.disabled", px: 0.5, py: 1 }, 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",
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { mb: 0.5 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Typography__default.default, { variant: "caption", sx: { color: "text.secondary" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Box6__default.default, { component: "span", sx: { fontFamily: "monospace", color: "info.main" }, 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(Button__default.default, { size: "small", startIcon: /* @__PURE__ */ jsxRuntime.jsx(lu.LuRefreshCw, { size: 13 }), onClick: scan, sx: { textTransform: "none", fontSize: "0.7rem", py: 0.25 }, children: "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: [
+    /* @__PURE__ */ jsxRuntime.jsx(Box6__default.default, { sx: { mb: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(GraphSearch, { value: query, onChange: setQuery, placeholder: "Filter components on this page\u2026" }) }),
+    items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "caption", sx: { color: "text.disabled", pl: 0.5 }, children: "No graph components detected in the live tree. Try Rescan, or regenerate the graph." }) : filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(Typography__default.default, { variant: "caption", sx: { color: "text.disabled", pl: 0.5 }, children: [
       "No components match \u201C",
       query,
       "\u201D."
     ] }) : filtered.map(({ name, node, count }) => /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+      Stack__default.default,
       {
-        className: "rdp-row",
-        style: { padding: "4px 6px", alignItems: "center", background: selectedName === name ? "rgba(105,80,232,0.16)" : void 0 },
+        direction: "row",
+        alignItems: "center",
+        spacing: 0.5,
         onClick: () => onSelect(node),
+        sx: (t) => ({
+          px: 0.5,
+          py: 0.4,
+          borderRadius: 1,
+          cursor: "pointer",
+          bgcolor: selectedName === name ? styles.alpha(t.palette.primary.main, 0.16) : "transparent",
+          "&:hover": { bgcolor: "action.hover" },
+          "&:hover .rdp-row-actions": { opacity: 1 }
+        }),
         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.jsxs(Box6__default.default, { sx: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", spacing: 0.5, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "caption", sx: { fontFamily: "monospace", fontWeight: 600, fontSize: "0.72rem", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: name }),
+              count > 1 && /* @__PURE__ */ jsxRuntime.jsx(Chip__default.default, { label: `\xD7${count}`, size: "small", variant: "soft", sx: { height: 15, fontSize: "0.55rem", "& .MuiChip-label": { px: 0.5 } } })
             ] }),
-            /* @__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.jsx(Typography__default.default, { variant: "caption", sx: { display: "block", color: "text.disabled", fontSize: "0.62rem", 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) => {
+          /* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", spacing: 0.25, className: "rdp-row-actions", sx: { opacity: 0, transition: "opacity 120ms" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Tooltip2__default.default, { title: "Open in editor", placement: "top", children: /* @__PURE__ */ jsxRuntime.jsx(IconButton__default.default, { size: "small", sx: { p: 0.25 }, 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) => {
+            }, children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuFileCode, { size: 13 }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(Tooltip2__default.default, { title: "Copy file path", placement: "top", children: /* @__PURE__ */ jsxRuntime.jsx(IconButton__default.default, { size: "small", sx: { p: 0.25 }, onClick: (e) => {
               e.stopPropagation();
               onCopy(node);
-            }, children: /* @__PURE__ */ jsxRuntime.jsx(IconCopy, { size: 13 }) })
+            }, children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuCopy, { size: 13 }) }) })
           ] })
         ]
       },
@@ -1223,10 +1603,10 @@ function loadGraph(endpoint, force = false) {
   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 }) }
+  { value: "hover", label: "Hover", icon: /* @__PURE__ */ jsxRuntime.jsx(lu.LuMousePointerClick, { size: 14 }) },
+  { value: "graph", label: "Graph", icon: /* @__PURE__ */ jsxRuntime.jsx(lu.LuWorkflow, { size: 14 }) },
+  { value: "page", label: "Page", icon: /* @__PURE__ */ jsxRuntime.jsx(lu.LuLayers, { size: 14 }) },
+  { value: "file", label: "File", icon: /* @__PURE__ */ jsxRuntime.jsx(lu.LuFile, { size: 14 }) }
 ];
 async function copy(text) {
   if (typeof navigator === "undefined" || !navigator.clipboard) return false;
@@ -1237,16 +1617,14 @@ async function copy(text) {
 }
 function ComponentGraphPanel({ onClose }) {
   const state2 = react.useSyncExternalStore(subscribeGraph, getGraphState, getGraphServerState);
+  const theme = styles.useTheme();
   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;
-      }
+      if (!file) return showToast({ message: "No source path available", tone: "error" });
       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" });
     },
@@ -1256,14 +1634,11 @@ function ComponentGraphPanel({ onClose }) {
     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 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);
@@ -1280,130 +1655,113 @@ function ComponentGraphPanel({ onClose }) {
     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,
+  const details = /* @__PURE__ */ jsxRuntime.jsx(NodeDetails, { selected, onOpen: () => void openLoc(selected), onCopyInfo: copyInfo, onCopyPath: () => copyPath(selected), onSelectName: selectName });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Box6__default.default,
     {
-      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
+      "data-rdp-ignore": "",
+      sx: {
+        position: "fixed",
+        bottom: 96,
+        right: 24,
+        zIndex: (t) => t.zIndex.modal + 1,
+        width: "min(460px, calc(100vw - 32px))",
+        maxHeight: "min(78vh, 720px)",
+        display: "flex",
+        flexDirection: "column",
+        borderRadius: 2,
+        overflow: "hidden",
+        border: "1px solid",
+        borderColor: "divider",
+        bgcolor: "background.paper",
+        boxShadow: 12
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { px: 1.5, py: 1, borderBottom: "1px solid", borderColor: "divider", flexShrink: 0 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", spacing: 1, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lu.LuWorkflow, { size: 16 }),
+            /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "subtitle2", sx: { fontWeight: 700 }, children: "Component Graph Inspector" }),
+            enabled && /* @__PURE__ */ jsxRuntime.jsx(Chip__default.default, { label: "ON", size: "small", color: "success", variant: "soft", sx: { height: 18, fontSize: "0.6rem", fontWeight: 700 } })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(IconButton__default.default, { size: "small", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuX, { size: 16 }) })
         ] }),
-        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,
+        /* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { sx: { flex: 1, overflowY: "auto", p: 1.5 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Box6__default.default,
             {
-              graph,
-              selected,
-              search,
-              expanded,
-              onSelect: selectNode,
-              onToggle: toggleExpanded,
-              onOpen: openNode,
-              onCopy: copyNode
+              sx: {
+                p: 1.25,
+                borderRadius: 1.5,
+                border: "1px solid",
+                borderColor: enabled ? styles.alpha(theme.palette.success.main, 0.5) : "divider",
+                bgcolor: enabled ? styles.alpha(theme.palette.success.main, 0.08) : "background.default"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "body2", sx: { fontWeight: 700 }, children: "Inspect mode" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "caption", sx: { color: "text.secondary" }, children: enabled ? "Hover the UI, click to lock \xB7 Esc to exit" : "Enable, then hover the UI" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(Switch__default.default, { checked: enabled, onChange: () => toggleInspector(config.graphEndpoint) })
+              ] })
             }
-          ) }),
-          selected && !search.trim() && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 12 }, children: details })
-        ] }),
-        mode === "page" && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            ComponentGraphPageList,
+            ToggleButtonGroup__default.default,
             {
-              graph,
-              route,
-              selectedName: selected?.componentName,
-              onSelect: selectNode,
-              onOpen: openNode,
-              onCopy: copyNode
+              fullWidth: true,
+              exclusive: true,
+              size: "small",
+              value: mode,
+              onChange: (_, next) => {
+                if (!next) return;
+                setMode(next);
+                if (next === "graph" || next === "page") void loadGraph(config.graphEndpoint);
+              },
+              sx: { mt: 1.5 },
+              children: TABS.map((t) => /* @__PURE__ */ jsxRuntime.jsxs(ToggleButton__default.default, { value: t.value, sx: { textTransform: "none", gap: 0.5, py: 0.5 }, children: [
+                t.icon,
+                t.label
+              ] }, t.value))
             }
           ),
-          selected && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 12 }, children: details })
-        ] }),
-        mode === "file" && details
-      ] })
-    ] })
-  ] });
+          /* @__PURE__ */ jsxRuntime.jsx(Divider__default.default, { sx: { my: 1.5 } }),
+          mode === "hover" && /* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "caption", sx: { color: "text.disabled", fontWeight: 700, textTransform: "uppercase", letterSpacing: 0.4 }, children: "Last locked component" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Box6__default.default, { sx: { mt: 0.5 }, children: details })
+          ] }),
+          mode === "graph" && /* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "caption", sx: { display: "block", mb: 0.5, color: status === "ready" ? "success.main" : "text.disabled" }, children: statusText }),
+            (status === "empty" || status === "error") && /* @__PURE__ */ jsxRuntime.jsx(Chip__default.default, { size: "small", variant: "outlined", label: "Retry graph load", onClick: () => loadGraph(config.graphEndpoint, true), sx: { mb: 1, height: 22, fontSize: "0.65rem" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(GraphSearch, { value: search, onChange: setSearch }),
+            /* @__PURE__ */ jsxRuntime.jsx(Box6__default.default, { sx: { mt: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(ComponentGraphTree, { graph, selected, search, expanded, onSelect: selectNode, onToggle: toggleExpanded, onOpen: openNode, onCopy: copyNode }) }),
+            selected && !search.trim() && /* @__PURE__ */ jsxRuntime.jsx(Box6__default.default, { sx: { mt: 1.5 }, children: details })
+          ] }),
+          mode === "page" && /* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ComponentGraphPageList, { graph, route, selectedName: selected?.componentName, onSelect: selectNode, onOpen: openNode, onCopy: copyNode }),
+            selected && /* @__PURE__ */ jsxRuntime.jsx(Box6__default.default, { sx: { mt: 1.5 }, children: details })
+          ] }),
+          mode === "file" && details
+        ] })
+      ]
+    }
+  );
 }
+var TOOLTIP_W = 360;
 function ComponentGraphOverlay() {
   const state2 = react.useSyncExternalStore(subscribeGraph, getGraphState, getGraphServerState);
+  const theme = styles.useTheme();
   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) => {
+  const [hover, setHover] = react.useState(null);
+  const open = react.useCallback(
+    async (file, line, column) => {
       if (!file) {
-        showToast({ message: "No source path \u2014 generate the graph or use inspect build", tone: "error" });
+        showToast({ message: "No source path \u2014 generate the graph", 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" }
-      );
+      showToast(ok === false ? { message: "Editor unavailable \u2014 path copied", tone: "info" } : { message: "Opening in your editor\u2026", tone: "success" });
     },
     [config]
   );
@@ -1447,11 +1805,8 @@ function ComponentGraphOverlay() {
       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" });
-      }
+      if (e.metaKey || e.ctrlKey) void open(sel.absFilePath ?? sel.filePath, sel.line, sel.column);
+      else showToast({ message: `Locked ${sel.componentName}`, tone: "success" });
     };
     document.addEventListener("pointermove", onMove, { passive: true });
     document.addEventListener("keydown", onKey, true);
@@ -1463,47 +1818,92 @@ function ComponentGraphOverlay() {
       document.removeEventListener("click", onClick, true);
       setHover(null);
     };
-  }, [enabled, route, openSelected]);
+  }, [enabled, route, open]);
   if (!enabled) return null;
-  const flipX = typeof window !== "undefined" && hover && hover.x + 374 > window.innerWidth;
+  const flipX = typeof window !== "undefined" && hover && hover.x + TOOLTIP_W + 14 > window.innerWidth;
   const flipY = typeof window !== "undefined" && hover && hover.y + 140 > window.innerHeight;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rdp-overlay", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { "data-rdp-ignore": "", sx: { position: "fixed", inset: 0, pointerEvents: "none", zIndex: (t) => t.zIndex.tooltip + 1 }, children: [
     hover && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+      Box6__default.default,
       {
-        className: "rdp-hl",
-        style: { top: hover.rect.top, left: hover.rect.left, width: hover.rect.width, height: hover.rect.height }
+        sx: {
+          position: "fixed",
+          top: hover.rect.top,
+          left: hover.rect.left,
+          width: hover.rect.width,
+          height: hover.rect.height,
+          border: "1px solid",
+          borderColor: "primary.main",
+          bgcolor: styles.alpha(theme.palette.primary.main, 0.12),
+          borderRadius: 0.5,
+          boxShadow: `0 0 0 1px ${styles.alpha(theme.palette.primary.main, 0.4)}`,
+          transition: "all 60ms linear"
+        }
       }
     ),
     hover && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+      Box6__default.default,
       {
-        className: "rdp-tooltip",
-        style: {
+        sx: {
+          position: "fixed",
           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
+          right: flipX ? window.innerWidth - hover.x + 14 : void 0,
+          maxWidth: TOOLTIP_W,
+          px: 1.25,
+          py: 1,
+          borderRadius: 1.5,
+          border: "1px solid",
+          borderColor: styles.alpha(theme.palette.common.white, 0.12),
+          bgcolor: styles.alpha(theme.palette.grey[900], 0.85),
+          backdropFilter: "blur(8px)",
+          boxShadow: "0 8px 28px rgba(0,0,0,0.45)",
+          color: theme.palette.common.white
         },
         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.jsxs(Stack__default.default, { direction: "row", alignItems: "center", spacing: 0.75, sx: { mb: hover.filePath ? 0.5 : 0 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Chip__default.default,
+              {
+                label: hover.name,
+                size: "small",
+                sx: { height: 18, fontWeight: 700, fontSize: "0.65rem", color: "#fff", bgcolor: styles.alpha(theme.palette.primary.main, 0.5) }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "caption", sx: { color: styles.alpha(theme.palette.common.white, 0.6), fontFamily: "monospace" }, 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" })
+          /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "caption", sx: { display: "block", fontFamily: "monospace", fontSize: "0.68rem", wordBreak: "break-all", color: hover.filePath ? styles.alpha(theme.palette.common.white, 0.85) : styles.alpha(theme.palette.warning.light, 0.9) }, children: hover.filePath ? `${hover.filePath}${hover.line ? `:${hover.line}` : ""}` : "source resolved from graph on lock" }),
+          hover.route && /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "caption", sx: { display: "block", fontSize: "0.62rem", color: styles.alpha(theme.palette.common.white, 0.45) }, children: hover.route }),
+          /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "caption", sx: { display: "block", mt: 0.5, fontSize: "0.6rem", color: styles.alpha(theme.palette.common.white, 0.5) }, children: "click to lock \xB7 \u2318/Ctrl + click to open \xB7 Esc to exit" })
         ]
       }
     ),
     state2.toast && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+      Box6__default.default,
       {
-        className: "rdp-toast",
-        style: {
-          color: state2.toast.tone === "success" ? "var(--rdp-success)" : state2.toast.tone === "error" ? "var(--rdp-error)" : "#fff"
+        sx: {
+          position: "fixed",
+          bottom: 24,
+          left: "50%",
+          transform: "translateX(-50%)",
+          px: 1.5,
+          py: 0.75,
+          borderRadius: 1.5,
+          border: "1px solid",
+          borderColor: styles.alpha(theme.palette.common.white, 0.12),
+          bgcolor: styles.alpha(theme.palette.grey[900], 0.9),
+          backdropFilter: "blur(8px)",
+          boxShadow: "0 8px 28px rgba(0,0,0,0.45)"
         },
-        children: state2.toast.message
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Typography__default.default,
+          {
+            variant: "caption",
+            sx: { fontWeight: 600, color: state2.toast.tone === "success" ? "success.light" : state2.toast.tone === "error" ? "error.light" : "common.white" },
+            children: state2.toast.message
+          }
+        )
       }
     )
   ] });
@@ -1513,191 +1913,237 @@ var componentGraphTool = {
   title: "Component Graph Inspector",
   subtitle: "Inspect component tree & open source files",
   color: "primary",
-  icon: /* @__PURE__ */ jsxRuntime.jsx(IconGraph, { size: 19 }),
+  icon: /* @__PURE__ */ jsxRuntime.jsx(lu.LuWorkflow, { size: 19 }),
   Panel: ComponentGraphPanel,
   Overlay: ComponentGraphOverlay
 };
 function registerComponentGraph() {
   registerTool(componentGraphTool);
 }
-var STORAGE_KEY = "react-dev-panel:corner";
-var GAP = 20;
-var FAB = 52;
+function ToolTile({ color, size = 38, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box6__default.default,
+    {
+      sx: (theme) => ({
+        width: size,
+        height: size,
+        flexShrink: 0,
+        borderRadius: 1.5,
+        display: "grid",
+        placeItems: "center",
+        color: theme.palette[color].main,
+        bgcolor: styles.alpha(theme.palette[color].main, 0.14)
+      }),
+      children
+    }
+  );
+}
+var STORAGE_KEY2 = "react-dev-panel:corner";
+var EDGE_GAP = 24;
+var FAB_SIZE = 56;
 var DRAG_THRESHOLD = 5;
 function isCorner(v) {
   return v === "top-left" || v === "top-right" || v === "bottom-left" || v === "bottom-right";
 }
-function readCorner() {
+function readStoredCorner() {
   if (typeof window === "undefined") return "bottom-right";
   try {
-    const s = window.localStorage.getItem(STORAGE_KEY);
-    if (isCorner(s)) return s;
+    const stored = window.localStorage.getItem(STORAGE_KEY2);
+    if (isCorner(stored)) return stored;
   } 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 [dragPos, setDragPos] = react.useState(null);
+  const movedRef = react.useRef(false);
+  const offsetRef = react.useRef({ x: 0, y: 0 });
+  react.useEffect(() => setCorner(readStoredCorner()), []);
+  const onPointerDown = react.useCallback((event) => {
+    if (event.button !== 0) return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    offsetRef.current = { x: event.clientX - rect.left, y: event.clientY - rect.top };
+    movedRef.current = false;
+    const startX = event.clientX;
+    const startY = event.clientY;
+    const handleMove = (ev) => {
+      if (!movedRef.current && Math.hypot(ev.clientX - startX, ev.clientY - startY) < DRAG_THRESHOLD) return;
+      movedRef.current = true;
+      setDragPos({ x: ev.clientX - offsetRef.current.x, y: ev.clientY - offsetRef.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"}`;
+    const handleUp = (ev) => {
+      window.removeEventListener("pointermove", handleMove);
+      window.removeEventListener("pointerup", handleUp);
+      if (movedRef.current) {
+        const cx = ev.clientX - offsetRef.current.x + FAB_SIZE / 2;
+        const cy = ev.clientY - offsetRef.current.y + FAB_SIZE / 2;
+        const next = `${cy < window.innerHeight / 2 ? "top" : "bottom"}-${cx < window.innerWidth / 2 ? "left" : "right"}`;
         setCorner(next);
         try {
-          window.localStorage.setItem(STORAGE_KEY, next);
+          window.localStorage.setItem(STORAGE_KEY2, next);
         } catch {
         }
       }
-      setDrag(null);
+      setDragPos(null);
     };
-    window.addEventListener("pointermove", move);
-    window.addEventListener("pointerup", up);
+    window.addEventListener("pointermove", handleMove);
+    window.addEventListener("pointerup", handleUp);
   }, []);
-  const onClickCapture = react.useCallback((e) => {
-    if (moved.current) {
-      e.stopPropagation();
-      e.preventDefault();
-      moved.current = false;
+  const onClickCapture = react.useCallback((event) => {
+    if (movedRef.current) {
+      event.stopPropagation();
+      event.preventDefault();
+      movedRef.current = false;
     }
   }, []);
+  const dragging = dragPos !== null;
   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
+  const positionSx = dragging ? { top: dragPos.y, left: dragPos.x, right: "auto", bottom: "auto" } : {
+    top: isTop ? EDGE_GAP : "auto",
+    bottom: isTop ? "auto" : EDGE_GAP,
+    left: isLeft ? EDGE_GAP : "auto",
+    right: isLeft ? "auto" : EDGE_GAP
   };
-  return { pos, isTop, isLeft, onPointerDown, onClickCapture };
+  return { positionSx, onPointerDown, onClickCapture, isTop, isLeft, dragging };
 }
 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 });
+  const color = badge.tone === "error" ? "error" : badge.tone === "success" ? "success" : "default";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Chip__default.default,
+    {
+      size: "small",
+      variant: "soft",
+      color,
+      label: badge.label,
+      sx: { height: 18, fontWeight: 700, fontSize: "0.65rem", "& .MuiChip-label": { px: 0.75 } }
+    }
+  );
 }
-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
-  };
+function Launcher({ tools: tools2, onOpenTool }) {
+  const { positionSx, onPointerDown, onClickCapture, isTop, isLeft, dragging } = useDraggableCorner();
+  const [menuAnchor, setMenuAnchor] = react.useState(null);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
+      Box6__default.default,
       {
-        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 })
+        "data-rdp-ignore": "",
+        sx: (theme) => ({ position: "fixed", zIndex: theme.zIndex.modal + 2, ...positionSx }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip2__default.default, { title: dragging ? "" : "Developer Tools \u2014 drag to a corner", placement: isLeft ? "right" : "left", arrow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Fab__default.default,
+          {
+            onClick: (e) => setMenuAnchor(e.currentTarget),
+            onClickCapture,
+            onPointerDown,
+            "aria-label": "Open Developer Tools",
+            "aria-haspopup": "menu",
+            sx: (theme) => ({
+              width: FAB_SIZE,
+              height: FAB_SIZE,
+              touchAction: "none",
+              cursor: dragging ? "grabbing" : "grab",
+              color: theme.palette.primary.contrastText,
+              background: `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.primary.dark})`,
+              boxShadow: `0 4px 12px ${styles.alpha(theme.palette.primary.main, 0.24)}, 0 8px 24px rgba(0,0,0,0.5)`,
+              "&:hover": {
+                background: `linear-gradient(135deg, ${theme.palette.primary.dark}, ${theme.palette.primary.dark})`
+              }
+            }),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuWrench, { 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 })
-              ] })
-            ]
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Menu__default.default,
+      {
+        anchorEl: menuAnchor,
+        open: Boolean(menuAnchor),
+        onClose: () => setMenuAnchor(null),
+        sx: (theme) => ({ zIndex: theme.zIndex.modal + 2 }),
+        anchorOrigin: { vertical: isTop ? "bottom" : "top", horizontal: isLeft ? "left" : "right" },
+        transformOrigin: { vertical: isTop ? "top" : "bottom", horizontal: isLeft ? "left" : "right" },
+        slotProps: {
+          paper: {
+            sx: {
+              width: 320,
+              mt: isTop ? 1.5 : 0,
+              mb: isTop ? 0 : 1.5,
+              borderRadius: 2.5,
+              overflow: "hidden",
+              border: "1px solid",
+              borderColor: "divider",
+              boxShadow: 16
+            }
           },
-          tool.id
-        )) })
-      ] })
-    ] })
+          list: { sx: { py: 0 } }
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Box6__default.default,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1.25,
+                px: 2,
+                py: 1.5,
+                background: (theme) => `linear-gradient(135deg, ${styles.alpha(theme.palette.primary.main, 0.16)}, ${styles.alpha(theme.palette.primary.main, 0.04)})`
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ToolTile, { color: "primary", size: 34, children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuWrench, { size: 17 }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { sx: { minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "subtitle2", sx: { fontWeight: 700, lineHeight: 1.2 }, children: "Developer Tools" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "caption", sx: { color: "text.secondary" }, children: "Internal utilities" })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(Divider__default.default, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(Box6__default.default, { sx: { p: 1 }, children: tools2.map((tool, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+            MenuItem__default.default,
+            {
+              onClick: () => {
+                onOpenTool(tool.id);
+                setMenuAnchor(null);
+              },
+              disableGutters: true,
+              sx: { alignItems: "flex-start", gap: 1.25, px: 1.25, py: 1.25, mt: i === 0 ? 0 : 0.5, borderRadius: 1.5, whiteSpace: "normal" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ToolTile, { color: tool.color ?? "primary", children: tool.icon }),
+                /* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { sx: { flex: 1, minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "subtitle2", sx: { fontWeight: 600, lineHeight: 1.3 }, children: tool.title }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Typography__default.default, { variant: "caption", sx: { color: "text.secondary", display: "block" }, children: tool.subtitle })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", spacing: 0.5, alignItems: "center", sx: { mt: 0.25 }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ToolBadge, { tool }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Box6__default.default, { sx: { display: "grid", placeItems: "center", color: "text.disabled" }, children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuChevronRight, { 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 }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(DevPanelConfigProvider, { config, children: /* @__PURE__ */ jsxRuntime.jsx(DevPanelInner, { ids: config.tools }) });
 }
-function DevPanelInner({
-  ids,
-  theme
-}) {
+function DevPanelInner({ ids }) {
   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: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { 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)
@@ -1737,7 +2183,6 @@ exports.DevPanel = DevPanel;
 exports.createServerOpenInEditor = createServerOpenInEditor;
 exports.defaultOpenInEditor = defaultOpenInEditor;
 exports.getRegisteredTools = getRegisteredTools;
-exports.injectBaseStyles = injectBaseStyles;
 exports.registerTool = registerTool;
 exports.serverOpenInEditor = serverOpenInEditor;
 exports.useDevPanelConfig = useDevPanelConfig;