vite-devtools-svelte 0.2.0 → 0.2.1

package/README.md

@@ -1,6 +1,6 @@
 # vite-devtools-svelte
 
-Svelte DevTools plugin for [Vite DevTools](https://github.com/nicepkg/vite-devtools). Provides 15 specialized panels for debugging, profiling, and inspecting Svelte/SvelteKit applications — all integrated directly into the Vite DevTools UI.
+Svelte DevTools plugin for [Vite DevTools](https://github.com/vitejs/devtools). Provides 15 specialized panels for debugging, profiling, and inspecting Svelte/SvelteKit applications — all integrated directly into the Vite DevTools UI.
 
 > **Status:** Early development. APIs may change.
 
@@ -135,25 +135,33 @@ Svelte DevTools plugin for [Vite DevTools](https://github.com/nicepkg/vite-devto
 - **Vite** >= 8.0.0
 - **Svelte** 5 (runes mode)
 - **SvelteKit** (recommended, but not required for basic features)
+- **[@vitejs/devtools](https://devtools.vite.dev/)** — the host UI this plugin's panels render inside
 
 ## Installation
 
+`vite-devtools-svelte` is a panel provider — it needs the [`@vitejs/devtools`](https://devtools.vite.dev/) host plugin to render its UI. Install both:
+
 ```bash
-npm install -D vite-devtools-svelte
+npm install -D vite-devtools-svelte @vitejs/devtools
 ```
 
 ## Setup
 
-Add the plugin to your `vite.config.ts`. **It must come before `sveltekit()`** so that the transforms run before the Svelte compiler.
+Register **both** plugins in your `vite.config.ts`. `svelteDevtools()` **must come before `sveltekit()`** so that its transforms run before the Svelte compiler.
 
 ```ts
 // vite.config.ts
-import { svelteDevtools } from 'vite-devtools-svelte'
 import { sveltekit } from '@sveltejs/kit/vite'
+import { DevTools } from '@vitejs/devtools'
+import { svelteDevtools } from 'vite-devtools-svelte'
 import { defineConfig } from 'vite'
 
 export default defineConfig({
-  plugins: [svelteDevtools(), sveltekit()],
+  plugins: [
+    svelteDevtools(), // must come before sveltekit()
+    DevTools(),       // the @vitejs/devtools host — without it the panels have nowhere to render
+    sveltekit(),
+  ],
 })
 ```
 
@@ -163,7 +171,10 @@ Then start your dev server as usual:
 npm run dev
 ```
 
-The Svelte DevTools panels will appear inside the Vite DevTools UI.
+Open your app in the browser. The Vite DevTools drawer appears at the bottom edge of the page — click the floating handle to open it, then switch to the **Svelte** tab to see the panels provided by this plugin.
+
+> [!NOTE]
+> If you only register `svelteDevtools()` without `DevTools()` from `@vitejs/devtools`, the dev server starts fine but **no DevTools UI appears** — there is no host for the panels to mount into.
 
 ## Options
 

package/dist/index.mjs

@@ -258,8 +258,8 @@ function N(e) {
 }
 //#endregion
 //#region src/runtime.ts
-var P = "virtual:svelte-devtools-runtime", F = "\0virtual:svelte-devtools-runtime", I = "\0svelte-devtools:wrapped-client", L = "\nimport * as __svelte_original from 'svelte/internal/client';\nexport * from 'svelte/internal/client';\n\nfunction __dt() {\n  return typeof window !== 'undefined' ? window.__SVELTE_DEVTOOLS__ : null;\n}\n\n// Component ID stack (parallel to runtime._stack but local to wrapper)\nconst __idStack = [];\nfunction __currentId() {\n  return __idStack.length > 0 ? __idStack[__idStack.length - 1] : null;\n}\n\n// Tracks the most recently created signal for type determination in tag()\nconst __pendingSignal = { ref: null, type: null };\n\n// --- Component Lifecycle ---\n//\n// Observer must not break the observed: every devtools side-effect below is\n// wrapped in try/catch so a bug or an out-of-shape runtime cannot tear down\n// the user's app. The original Svelte function is always called, and its\n// return value always returned, regardless of devtools failures.\n\nexport function push() {\n  const result = __svelte_original.push.apply(null, arguments);\n  try {\n    const dt = __dt();\n    if (dt) {\n      const file = dt._pendingFile || 'Unknown';\n      dt._pendingFile = null;\n      const id = dt.register(file);\n      __idStack.push(id);\n      dt.startInit(id);\n      try {\n        __svelte_original.user_effect(() => {\n          return () => { try { dt.unmount(id); } catch {} };\n        });\n      } catch {}\n    }\n  } catch {}\n  return result;\n}\n\nexport function pop() {\n  // Capture devtools errors but ALWAYS forward to the original pop so the\n  // Svelte component stack stays balanced.\n  try {\n    const dt = __dt();\n    if (dt && __idStack.length > 0) {\n      const id = __idStack.pop();\n      try { dt.endInit(id); } catch {}\n      try { dt.registered(id); } catch {}\n    }\n  } catch {}\n  return __svelte_original.pop.apply(null, arguments);\n}\n\n// --- Signal Creation (type markers) ---\n\nexport function state() {\n  const signal = __svelte_original.state.apply(null, arguments);\n  try {\n    __pendingSignal.ref = signal;\n    __pendingSignal.type = 'state';\n  } catch {}\n  return signal;\n}\n\nexport function derived() {\n  const signal = __svelte_original.derived.apply(null, arguments);\n  try {\n    __pendingSignal.ref = signal;\n    __pendingSignal.type = 'derived';\n  } catch {}\n  return signal;\n}\n\nexport function proxy() {\n  const p = __svelte_original.proxy.apply(null, arguments);\n  try {\n    __pendingSignal.ref = p;\n    __pendingSignal.type = 'proxy';\n  } catch {}\n  return p;\n}\n\n// --- Signal Tagging (Svelte dev mode) ---\n\nexport function tag(signal, name) {\n  const result = __svelte_original.tag.apply(null, arguments);\n  try {\n    const dt = __dt();\n    const cid = __currentId();\n    if (dt && cid !== null) {\n      const type = (__pendingSignal.ref === signal) ? __pendingSignal.type : 'state';\n      if (type === 'derived') {\n        dt.trackDerived(signal, name, cid);\n      } else {\n        dt.trackState(signal, name, cid);\n      }\n    }\n    __pendingSignal.ref = null;\n    __pendingSignal.type = null;\n  } catch {}\n  return result;\n}\n\nexport function tag_proxy(proxy, name) {\n  const result = __svelte_original.tag_proxy.apply(null, arguments);\n  try {\n    const dt = __dt();\n    const cid = __currentId();\n    if (dt && cid !== null) {\n      dt.trackProxy(proxy, name, cid);\n    }\n    __pendingSignal.ref = null;\n    __pendingSignal.type = null;\n  } catch {}\n  return result;\n}\n\n// --- Effect Tracking ---\n\nexport function user_effect() {\n  const result = __svelte_original.user_effect.apply(null, arguments);\n  try {\n    const dt = __dt();\n    const cid = __currentId();\n    if (dt && cid !== null) {\n      dt._effectCounter = (dt._effectCounter || 0) + 1;\n      // Track the effect OBJECT (not the callback). The Svelte runtime\n      // populates result.deps with the signals this effect depends on,\n      // which is what getReactiveGraph() reads to build edges.\n      dt.trackEffect(result, 'effect_' + dt._effectCounter, cid);\n    }\n  } catch {}\n  return result;\n}\n\nexport function user_pre_effect() {\n  const result = __svelte_original.user_pre_effect.apply(null, arguments);\n  try {\n    const dt = __dt();\n    const cid = __currentId();\n    if (dt && cid !== null) {\n      dt._effectCounter = (dt._effectCounter || 0) + 1;\n      dt.trackEffect(result, 'effect_pre_' + dt._effectCounter, cid);\n    }\n  } catch {}\n  return result;\n}\n", R = "\nif (typeof window !== 'undefined' && !window.__SVELTE_DEVTOOLS__) {\n  const __SVELTE_DT = {\n    _nextId: 0,\n    _instances: new Map(),\n    _stack: [],\n    _pendingFile: null,\n    _effectCounter: 0,\n    _debounceTimer: null,\n    _listeners: new Set(),\n\n    // Phase 2: Profiling data\n    _profiles: new Map(),\n    _initStartTimes: new Map(),\n    _profileDebounceTimer: null,\n\n    // Phase 2: Reactive graph data\n    _reactiveNodes: new Map(),\n    _reactiveProxies: new Map(),\n\n    // Phase 3: State timeline\n    _stateTimeline: [],\n    _stateSnapshots: new Map(),\n    _timelineDebounceTimer: null,\n\n    register(file) {\n      const id = this._nextId++;\n      const parentId = this._stack.length > 0 ? this._stack[this._stack.length - 1] : null;\n      const name = file.split('/').pop()?.replace('.svelte', '') || 'Unknown';\n      this._instances.set(id, { id, file, name, parentId, mounted: true, children: [] });\n      if (parentId !== null) {\n        const parent = this._instances.get(parentId);\n        if (parent) parent.children.push(id);\n      }\n      this._stack.push(id);\n      this._scheduleUpdate();\n      return id;\n    },\n\n    registered(id) {\n      const idx = this._stack.indexOf(id);\n      if (idx !== -1) this._stack.splice(idx, 1);\n    },\n\n    mount(id) {\n      const instance = this._instances.get(id);\n      if (instance && !instance.mounted) {\n        instance.mounted = true;\n        this._scheduleUpdate();\n      }\n    },\n\n    unmount(id) {\n      const instance = this._instances.get(id);\n      if (instance) {\n        if (instance.parentId !== null) {\n          const parent = this._instances.get(instance.parentId);\n          if (parent) {\n            parent.children = parent.children.filter(cid => cid !== id);\n          }\n        }\n        this._removeChildren(id);\n        this._cleanupReactiveNodes(id);\n        this._instances.delete(id);\n      }\n      this._scheduleUpdate();\n    },\n\n    _cleanupReactiveNodes(componentId) {\n      for (const [nodeId, entry] of this._reactiveNodes) {\n        if (entry.meta.componentId === componentId) {\n          this._reactiveNodes.delete(nodeId);\n        }\n      }\n    },\n\n    _removeChildren(parentId) {\n      const parent = this._instances.get(parentId);\n      if (!parent) return;\n      for (const childId of [...parent.children]) {\n        this._removeChildren(childId);\n        this._cleanupReactiveNodes(childId);\n        this._instances.delete(childId);\n      }\n    },\n\n    _scheduleUpdate() {\n      if (this._debounceTimer) clearTimeout(this._debounceTimer);\n      this._debounceTimer = setTimeout(() => {\n        this._sendUpdate();\n      }, 100);\n    },\n\n    _sendUpdate() {\n      const components = [];\n      for (const [, instance] of this._instances) {\n        if (instance.mounted) {\n          components.push({\n            id: instance.id,\n            file: instance.file,\n            name: instance.name,\n            parentId: instance.parentId,\n            mounted: instance.mounted,\n          });\n        }\n      }\n      if (import.meta.hot) {\n        import.meta.hot.send('svelte-devtools:components', { components });\n      }\n    },\n\n    getTree() {\n      const components = [];\n      for (const [, instance] of this._instances) {\n        if (instance.mounted) {\n          components.push({\n            id: instance.id,\n            file: instance.file,\n            name: instance.name,\n            parentId: instance.parentId,\n            mounted: instance.mounted,\n          });\n        }\n      }\n      return components;\n    },\n\n    // --- Phase 2: Render Profiling ---\n\n    startInit(id) {\n      this._initStartTimes.set(id, performance.now());\n    },\n\n    endInit(id) {\n      const start = this._initStartTimes.get(id);\n      if (start === undefined) return;\n      const initTime = performance.now() - start;\n      this._initStartTimes.delete(id);\n      const instance = this._instances.get(id);\n      if (!instance) return;\n      this._profiles.set(id, {\n        componentId: id,\n        file: instance.file,\n        name: instance.name,\n        initTime,\n        renderCount: 0,\n        totalRenderTime: 0,\n        lastRenderTime: 0,\n        lastRenderAt: Date.now(),\n      });\n      this._scheduleProfileUpdate();\n    },\n\n    recordRender(id) {\n      const profile = this._profiles.get(id);\n      if (!profile) {\n        const instance = this._instances.get(id);\n        if (!instance) return;\n        this._profiles.set(id, {\n          componentId: id,\n          file: instance.file,\n          name: instance.name,\n          initTime: 0,\n          renderCount: 1,\n          totalRenderTime: 0,\n          lastRenderTime: 0,\n          lastRenderAt: Date.now(),\n        });\n      } else {\n        profile.renderCount++;\n        profile.lastRenderAt = Date.now();\n      }\n      this._scheduleProfileUpdate();\n    },\n\n    recordRenderTime(id, duration) {\n      const profile = this._profiles.get(id);\n      if (profile) {\n        profile.totalRenderTime += duration;\n        profile.lastRenderTime = duration;\n      }\n    },\n\n    _scheduleProfileUpdate() {\n      if (this._profileDebounceTimer) clearTimeout(this._profileDebounceTimer);\n      this._profileDebounceTimer = setTimeout(() => {\n        this._sendProfileUpdate();\n      }, 500);\n    },\n\n    _sendProfileUpdate() {\n      const profiles = Array.from(this._profiles.values());\n      if (import.meta.hot) {\n        import.meta.hot.send('svelte-devtools:profiles', { profiles });\n      }\n    },\n\n    getProfiles() {\n      return Array.from(this._profiles.values());\n    },\n\n    resetProfiles() {\n      this._profiles.clear();\n      this._scheduleProfileUpdate();\n    },\n\n    // --- Phase 2: Reactive Graph Tracking ---\n\n    trackState(signal, name, componentId) {\n      const instance = this._instances.get(componentId);\n      const nodeId = componentId + ':' + name;\n      this._reactiveNodes.set(nodeId, {\n        signal: new WeakRef(signal),\n        meta: { id: nodeId, type: 'state', name, componentId, componentFile: instance ? instance.file : '' }\n      });\n    },\n\n    trackProxy(proxy, name, componentId) {\n      const instance = this._instances.get(componentId);\n      const nodeId = componentId + ':' + name;\n      this._reactiveProxies.set(nodeId, new WeakRef(proxy));\n      this._reactiveNodes.set(nodeId, {\n        signal: new WeakRef({ v: '(proxy)', _isProxy: true }),\n        meta: { id: nodeId, type: 'state', name, componentId, componentFile: instance ? instance.file : '' }\n      });\n    },\n\n    trackDerived(signal, name, componentId) {\n      const instance = this._instances.get(componentId);\n      const nodeId = componentId + ':' + name;\n      this._reactiveNodes.set(nodeId, {\n        signal: new WeakRef(signal),\n        meta: { id: nodeId, type: 'derived', name, componentId, componentFile: instance ? instance.file : '' }\n      });\n    },\n\n    trackEffect(effect, name, componentId) {\n      const instance = this._instances.get(componentId);\n      const nodeId = componentId + ':' + name;\n      this._reactiveNodes.set(nodeId, {\n        signal: new WeakRef(effect || { v: undefined, _isEffect: true }),\n        meta: { id: nodeId, type: 'effect', name, componentId, componentFile: instance ? instance.file : '' }\n      });\n      return effect;\n    },\n\n    getReactiveGraph() {\n      const nodes = [];\n      const edges = [];\n      const signalToId = new Map();\n\n      for (const [nodeId, entry] of this._reactiveNodes) {\n        const signal = entry.signal.deref();\n        if (!signal || !this._instances.has(entry.meta.componentId)) {\n          this._reactiveNodes.delete(nodeId);\n          continue;\n        }\n        signalToId.set(signal, nodeId);\n        const node = { ...entry.meta };\n        if (signal._isProxy) {\n          const proxyRef = this._reactiveProxies.get(nodeId);\n          const proxy = proxyRef?.deref();\n          if (proxy) {\n            try {\n              node.value = Array.isArray(proxy) ? '[' + proxy.length + ']' : '{' + Object.keys(proxy).length + '}';\n            } catch { node.value = '(proxy)'; }\n          }\n        } else if (node.type !== 'effect' && signal.v !== undefined && typeof signal.v !== 'symbol') {\n          try {\n            const v = signal.v;\n            if (typeof v === 'number' || typeof v === 'string' || typeof v === 'boolean' || v === null) {\n              node.value = v;\n            } else {\n              node.value = '(object)';\n            }\n          } catch { /* ignore */ }\n        }\n        nodes.push(node);\n      }\n\n      // Map proxy internal signals to their proxy node ID\n      for (const [nodeId, ref] of this._reactiveProxies) {\n        const proxy = ref.deref();\n        if (!proxy) { this._reactiveProxies.delete(nodeId); continue; }\n        const meta = this._reactiveNodes.get(nodeId)?.meta;\n        if (!meta || !this._instances.has(meta.componentId)) { this._reactiveProxies.delete(nodeId); continue; }\n      }\n\n      // Build edges from deps\n      const edgeSet = new Set();\n      for (const [nodeId, entry] of this._reactiveNodes) {\n        const signal = entry.signal.deref();\n        if (!signal) continue;\n        if (!signal.deps) continue;\n\n        const visited = new Set();\n        const queue = [...signal.deps];\n        while (queue.length > 0) {\n          const dep = queue.shift();\n          if (!dep || visited.has(dep)) continue;\n          visited.add(dep);\n          const depId = signalToId.get(dep);\n          if (depId) {\n            const key = depId + '>' + nodeId;\n            if (depId !== nodeId && !edgeSet.has(key)) {\n              edgeSet.add(key);\n              edges.push({ from: depId, to: nodeId });\n            }\n          } else if (dep.deps) {\n            for (const d of dep.deps) queue.push(d);\n          }\n        }\n      }\n\n      return { nodes, edges };\n    },\n\n    sendReactiveGraph() {\n      const graph = this.getReactiveGraph();\n      if (import.meta.hot) {\n        import.meta.hot.send('svelte-devtools:reactive-graph', graph);\n      }\n    },\n\n    // --- Phase 3: State Timeline ---\n\n    _pollStateValues() {\n      for (const [nodeId, entry] of this._reactiveNodes) {\n        if (entry.meta.type !== 'state') continue;\n        if (!this._instances.has(entry.meta.componentId)) {\n          this._reactiveNodes.delete(nodeId);\n          continue;\n        }\n        const signal = entry.signal.deref();\n        if (!signal || signal.v === undefined) continue;\n        try {\n          const currentVal = signal.v;\n          const prev = this._stateSnapshots.get(nodeId);\n          if (prev !== undefined && currentVal === prev) continue;\n          const isPrimitive = currentVal === null || typeof currentVal !== 'object';\n          let newSnapshot;\n          if (isPrimitive) {\n            if (prev !== undefined && prev === currentVal) continue;\n            newSnapshot = currentVal;\n          } else {\n            const currStr = JSON.stringify(currentVal);\n            const prevStr = this._stateSnapshotStrs?.get(nodeId);\n            if (prevStr === currStr) continue;\n            newSnapshot = JSON.parse(currStr);\n            if (!this._stateSnapshotStrs) this._stateSnapshotStrs = new Map();\n            this._stateSnapshotStrs.set(nodeId, currStr);\n          }\n          if (this._stateTimeline.length >= 500) this._stateTimeline.splice(0, this._stateTimeline.length - 499);\n          this._stateTimeline.push({\n            id: nodeId,\n            name: entry.meta.name,\n            componentFile: entry.meta.componentFile,\n            oldValue: prev !== undefined ? prev : null,\n            newValue: newSnapshot,\n            timestamp: Date.now(),\n          });\n          this._stateSnapshots.set(nodeId, newSnapshot);\n          this._scheduleTimelineUpdate();\n        } catch { /* ignore non-serializable */ }\n      }\n    },\n\n    _scheduleTimelineUpdate() {\n      if (this._timelineDebounceTimer) clearTimeout(this._timelineDebounceTimer);\n      this._timelineDebounceTimer = setTimeout(() => {\n        if (import.meta.hot) {\n          import.meta.hot.send('svelte-devtools:state-timeline', { changes: this._stateTimeline });\n        }\n      }, 300);\n    },\n\n    getStateTimeline() {\n      return this._stateTimeline;\n    },\n\n    clearStateTimeline() {\n      this._stateTimeline = [];\n      this._scheduleTimelineUpdate();\n    },\n\n    // --- FPS Monitoring ---\n    // Uses requestAnimationFrame to measure frame rate with minimal overhead.\n    // Only stores timestamps - no allocations per frame beyond a single array push.\n    _fpsFrameTimes: [],\n\n    _fpsLoop() {\n      this._fpsFrameTimes.push(performance.now());\n      requestAnimationFrame(() => this._fpsLoop());\n    },\n\n    _sampleFps() {\n      const now = performance.now();\n      // Remove frame timestamps older than 1 second\n      const cutoff = now - 1000;\n      let i = 0;\n      while (i < this._fpsFrameTimes.length && this._fpsFrameTimes[i] < cutoff) i++;\n      if (i > 0) this._fpsFrameTimes.splice(0, i);\n      const fps = this._fpsFrameTimes.length;\n      if (import.meta.hot) {\n        import.meta.hot.send('svelte-devtools:fps', { timestamp: Date.now(), fps });\n      }\n    }\n  };\n\n  window.__SVELTE_DEVTOOLS__ = __SVELTE_DT;\n\n  // Poll state values for timeline\n  setInterval(() => { __SVELTE_DT._pollStateValues(); }, 200);\n\n  // FPS monitoring\n  requestAnimationFrame(() => __SVELTE_DT._fpsLoop());\n  setInterval(() => __SVELTE_DT._sampleFps(), 500);\n\n  // Phase 3: Capture runtime errors\n  window.addEventListener('error', (event) => {\n    if (import.meta.hot) {\n      import.meta.hot.send('svelte-devtools:runtime-error', {\n        message: event.message,\n        file: event.filename,\n        line: event.lineno,\n        column: event.colno,\n        stack: event.error?.stack || '',\n        timestamp: Date.now(),\n      });\n    }\n  });\n  window.addEventListener('unhandledrejection', (event) => {\n    if (import.meta.hot) {\n      const reason = event.reason;\n      import.meta.hot.send('svelte-devtools:runtime-error', {\n        message: reason?.message || String(reason),\n        stack: reason?.stack || '',\n        timestamp: Date.now(),\n      });\n    }\n  });\n\n  // Listen for reactive graph requests from server\n  if (import.meta.hot) {\n    import.meta.hot.on('svelte-devtools:request-reactive-graph', () => {\n      __SVELTE_DT.sendReactiveGraph();\n    });\n    import.meta.hot.on('svelte-devtools:request-state-timeline', () => {\n      import.meta.hot.send('svelte-devtools:state-timeline', { changes: __SVELTE_DT._stateTimeline });\n    });\n    import.meta.hot.on('svelte-devtools:clear-state-timeline', () => {\n      __SVELTE_DT.clearStateTimeline();\n    });\n  }\n}\n", z = 1, B = 5, V = 1, H = 30;
-function U(e) {
+var P = "virtual:svelte-devtools-runtime", ee = "\0virtual:svelte-devtools-runtime", F = "\0svelte-devtools:wrapped-client", I = "\nimport * as __svelte_original from 'svelte/internal/client';\nexport * from 'svelte/internal/client';\n\nfunction __dt() {\n  return typeof window !== 'undefined' ? window.__SVELTE_DEVTOOLS__ : null;\n}\n\n// Component ID stack (parallel to runtime._stack but local to wrapper)\nconst __idStack = [];\nfunction __currentId() {\n  return __idStack.length > 0 ? __idStack[__idStack.length - 1] : null;\n}\n\n// Tracks the most recently created signal for type determination in tag()\nconst __pendingSignal = { ref: null, type: null };\n\n// --- Component Lifecycle ---\n//\n// Observer must not break the observed: every devtools side-effect below is\n// wrapped in try/catch so a bug or an out-of-shape runtime cannot tear down\n// the user's app. The original Svelte function is always called, and its\n// return value always returned, regardless of devtools failures.\n\nexport function push() {\n  const result = __svelte_original.push.apply(null, arguments);\n  try {\n    const dt = __dt();\n    if (dt) {\n      const file = dt._pendingFile || 'Unknown';\n      dt._pendingFile = null;\n      const id = dt.register(file);\n      __idStack.push(id);\n      dt.startInit(id);\n      try {\n        __svelte_original.user_effect(() => {\n          return () => { try { dt.unmount(id); } catch {} };\n        });\n      } catch {}\n    }\n  } catch {}\n  return result;\n}\n\nexport function pop() {\n  // Capture devtools errors but ALWAYS forward to the original pop so the\n  // Svelte component stack stays balanced.\n  try {\n    const dt = __dt();\n    if (dt && __idStack.length > 0) {\n      const id = __idStack.pop();\n      try { dt.endInit(id); } catch {}\n      try { dt.registered(id); } catch {}\n    }\n  } catch {}\n  return __svelte_original.pop.apply(null, arguments);\n}\n\n// --- Signal Creation (type markers) ---\n\nexport function state() {\n  const signal = __svelte_original.state.apply(null, arguments);\n  try {\n    __pendingSignal.ref = signal;\n    __pendingSignal.type = 'state';\n  } catch {}\n  return signal;\n}\n\nexport function derived() {\n  const signal = __svelte_original.derived.apply(null, arguments);\n  try {\n    __pendingSignal.ref = signal;\n    __pendingSignal.type = 'derived';\n  } catch {}\n  return signal;\n}\n\nexport function proxy() {\n  const p = __svelte_original.proxy.apply(null, arguments);\n  try {\n    __pendingSignal.ref = p;\n    __pendingSignal.type = 'proxy';\n  } catch {}\n  return p;\n}\n\n// --- Signal Tagging (Svelte dev mode) ---\n\nexport function tag(signal, name) {\n  const result = __svelte_original.tag.apply(null, arguments);\n  try {\n    const dt = __dt();\n    const cid = __currentId();\n    if (dt && cid !== null) {\n      const type = (__pendingSignal.ref === signal) ? __pendingSignal.type : 'state';\n      if (type === 'derived') {\n        dt.trackDerived(signal, name, cid);\n      } else {\n        dt.trackState(signal, name, cid);\n      }\n    }\n    __pendingSignal.ref = null;\n    __pendingSignal.type = null;\n  } catch {}\n  return result;\n}\n\nexport function tag_proxy(proxy, name) {\n  const result = __svelte_original.tag_proxy.apply(null, arguments);\n  try {\n    const dt = __dt();\n    const cid = __currentId();\n    if (dt && cid !== null) {\n      dt.trackProxy(proxy, name, cid);\n    }\n    __pendingSignal.ref = null;\n    __pendingSignal.type = null;\n  } catch {}\n  return result;\n}\n\n// --- Effect Tracking ---\n\nexport function user_effect() {\n  const result = __svelte_original.user_effect.apply(null, arguments);\n  try {\n    const dt = __dt();\n    const cid = __currentId();\n    if (dt && cid !== null) {\n      dt._effectCounter = (dt._effectCounter || 0) + 1;\n      // Track the effect OBJECT (not the callback). The Svelte runtime\n      // populates result.deps with the signals this effect depends on,\n      // which is what getReactiveGraph() reads to build edges.\n      dt.trackEffect(result, 'effect_' + dt._effectCounter, cid);\n    }\n  } catch {}\n  return result;\n}\n\nexport function user_pre_effect() {\n  const result = __svelte_original.user_pre_effect.apply(null, arguments);\n  try {\n    const dt = __dt();\n    const cid = __currentId();\n    if (dt && cid !== null) {\n      dt._effectCounter = (dt._effectCounter || 0) + 1;\n      dt.trackEffect(result, 'effect_pre_' + dt._effectCounter, cid);\n    }\n  } catch {}\n  return result;\n}\n", L = "\nif (typeof window !== 'undefined' && !window.__SVELTE_DEVTOOLS__) {\n  const __SVELTE_DT = {\n    _nextId: 0,\n    _instances: new Map(),\n    _stack: [],\n    _pendingFile: null,\n    _effectCounter: 0,\n    _debounceTimer: null,\n    _listeners: new Set(),\n\n    // Phase 2: Profiling data\n    _profiles: new Map(),\n    _initStartTimes: new Map(),\n    _profileDebounceTimer: null,\n\n    // Phase 2: Reactive graph data\n    _reactiveNodes: new Map(),\n    _reactiveProxies: new Map(),\n\n    // Phase 3: State timeline\n    _stateTimeline: [],\n    _stateSnapshots: new Map(),\n    _timelineDebounceTimer: null,\n\n    register(file) {\n      const id = this._nextId++;\n      const parentId = this._stack.length > 0 ? this._stack[this._stack.length - 1] : null;\n      const name = file.split('/').pop()?.replace('.svelte', '') || 'Unknown';\n      this._instances.set(id, { id, file, name, parentId, mounted: true, children: [] });\n      if (parentId !== null) {\n        const parent = this._instances.get(parentId);\n        if (parent) parent.children.push(id);\n      }\n      this._stack.push(id);\n      this._scheduleUpdate();\n      return id;\n    },\n\n    registered(id) {\n      const idx = this._stack.indexOf(id);\n      if (idx !== -1) this._stack.splice(idx, 1);\n    },\n\n    mount(id) {\n      const instance = this._instances.get(id);\n      if (instance && !instance.mounted) {\n        instance.mounted = true;\n        this._scheduleUpdate();\n      }\n    },\n\n    unmount(id) {\n      const instance = this._instances.get(id);\n      if (instance) {\n        if (instance.parentId !== null) {\n          const parent = this._instances.get(instance.parentId);\n          if (parent) {\n            parent.children = parent.children.filter(cid => cid !== id);\n          }\n        }\n        this._removeChildren(id);\n        this._cleanupReactiveNodes(id);\n        this._instances.delete(id);\n      }\n      this._scheduleUpdate();\n    },\n\n    _cleanupReactiveNodes(componentId) {\n      for (const [nodeId, entry] of this._reactiveNodes) {\n        if (entry.meta.componentId === componentId) {\n          this._reactiveNodes.delete(nodeId);\n        }\n      }\n    },\n\n    _removeChildren(parentId) {\n      const parent = this._instances.get(parentId);\n      if (!parent) return;\n      for (const childId of [...parent.children]) {\n        this._removeChildren(childId);\n        this._cleanupReactiveNodes(childId);\n        this._instances.delete(childId);\n      }\n    },\n\n    _scheduleUpdate() {\n      if (this._debounceTimer) clearTimeout(this._debounceTimer);\n      this._debounceTimer = setTimeout(() => {\n        this._sendUpdate();\n      }, 100);\n    },\n\n    _sendUpdate() {\n      const components = [];\n      for (const [, instance] of this._instances) {\n        if (instance.mounted) {\n          components.push({\n            id: instance.id,\n            file: instance.file,\n            name: instance.name,\n            parentId: instance.parentId,\n            mounted: instance.mounted,\n          });\n        }\n      }\n      if (import.meta.hot) {\n        import.meta.hot.send('svelte-devtools:components', { components });\n      }\n    },\n\n    getTree() {\n      const components = [];\n      for (const [, instance] of this._instances) {\n        if (instance.mounted) {\n          components.push({\n            id: instance.id,\n            file: instance.file,\n            name: instance.name,\n            parentId: instance.parentId,\n            mounted: instance.mounted,\n          });\n        }\n      }\n      return components;\n    },\n\n    // --- Phase 2: Render Profiling ---\n\n    startInit(id) {\n      this._initStartTimes.set(id, performance.now());\n    },\n\n    endInit(id) {\n      const start = this._initStartTimes.get(id);\n      if (start === undefined) return;\n      const initTime = performance.now() - start;\n      this._initStartTimes.delete(id);\n      const instance = this._instances.get(id);\n      if (!instance) return;\n      this._profiles.set(id, {\n        componentId: id,\n        file: instance.file,\n        name: instance.name,\n        initTime,\n        renderCount: 0,\n        totalRenderTime: 0,\n        lastRenderTime: 0,\n        lastRenderAt: Date.now(),\n      });\n      this._scheduleProfileUpdate();\n    },\n\n    recordRender(id) {\n      const profile = this._profiles.get(id);\n      if (!profile) {\n        const instance = this._instances.get(id);\n        if (!instance) return;\n        this._profiles.set(id, {\n          componentId: id,\n          file: instance.file,\n          name: instance.name,\n          initTime: 0,\n          renderCount: 1,\n          totalRenderTime: 0,\n          lastRenderTime: 0,\n          lastRenderAt: Date.now(),\n        });\n      } else {\n        profile.renderCount++;\n        profile.lastRenderAt = Date.now();\n      }\n      this._scheduleProfileUpdate();\n    },\n\n    recordRenderTime(id, duration) {\n      const profile = this._profiles.get(id);\n      if (profile) {\n        profile.totalRenderTime += duration;\n        profile.lastRenderTime = duration;\n      }\n    },\n\n    _scheduleProfileUpdate() {\n      if (this._profileDebounceTimer) clearTimeout(this._profileDebounceTimer);\n      this._profileDebounceTimer = setTimeout(() => {\n        this._sendProfileUpdate();\n      }, 500);\n    },\n\n    _sendProfileUpdate() {\n      const profiles = Array.from(this._profiles.values());\n      if (import.meta.hot) {\n        import.meta.hot.send('svelte-devtools:profiles', { profiles });\n      }\n    },\n\n    getProfiles() {\n      return Array.from(this._profiles.values());\n    },\n\n    resetProfiles() {\n      this._profiles.clear();\n      this._scheduleProfileUpdate();\n    },\n\n    // --- Phase 2: Reactive Graph Tracking ---\n\n    trackState(signal, name, componentId) {\n      const instance = this._instances.get(componentId);\n      const nodeId = componentId + ':' + name;\n      this._reactiveNodes.set(nodeId, {\n        signal: new WeakRef(signal),\n        meta: { id: nodeId, type: 'state', name, componentId, componentFile: instance ? instance.file : '' }\n      });\n    },\n\n    trackProxy(proxy, name, componentId) {\n      const instance = this._instances.get(componentId);\n      const nodeId = componentId + ':' + name;\n      this._reactiveProxies.set(nodeId, new WeakRef(proxy));\n      this._reactiveNodes.set(nodeId, {\n        signal: new WeakRef({ v: '(proxy)', _isProxy: true }),\n        meta: { id: nodeId, type: 'state', name, componentId, componentFile: instance ? instance.file : '' }\n      });\n    },\n\n    trackDerived(signal, name, componentId) {\n      const instance = this._instances.get(componentId);\n      const nodeId = componentId + ':' + name;\n      this._reactiveNodes.set(nodeId, {\n        signal: new WeakRef(signal),\n        meta: { id: nodeId, type: 'derived', name, componentId, componentFile: instance ? instance.file : '' }\n      });\n    },\n\n    trackEffect(effect, name, componentId) {\n      const instance = this._instances.get(componentId);\n      const nodeId = componentId + ':' + name;\n      this._reactiveNodes.set(nodeId, {\n        signal: new WeakRef(effect || { v: undefined, _isEffect: true }),\n        meta: { id: nodeId, type: 'effect', name, componentId, componentFile: instance ? instance.file : '' }\n      });\n      return effect;\n    },\n\n    getReactiveGraph() {\n      const nodes = [];\n      const edges = [];\n      const signalToId = new Map();\n\n      for (const [nodeId, entry] of this._reactiveNodes) {\n        const signal = entry.signal.deref();\n        if (!signal || !this._instances.has(entry.meta.componentId)) {\n          this._reactiveNodes.delete(nodeId);\n          continue;\n        }\n        signalToId.set(signal, nodeId);\n        const node = { ...entry.meta };\n        if (signal._isProxy) {\n          const proxyRef = this._reactiveProxies.get(nodeId);\n          const proxy = proxyRef?.deref();\n          if (proxy) {\n            try {\n              node.value = Array.isArray(proxy) ? '[' + proxy.length + ']' : '{' + Object.keys(proxy).length + '}';\n            } catch { node.value = '(proxy)'; }\n          }\n        } else if (node.type !== 'effect' && signal.v !== undefined && typeof signal.v !== 'symbol') {\n          try {\n            const v = signal.v;\n            if (typeof v === 'number' || typeof v === 'string' || typeof v === 'boolean' || v === null) {\n              node.value = v;\n            } else {\n              node.value = '(object)';\n            }\n          } catch { /* ignore */ }\n        }\n        nodes.push(node);\n      }\n\n      // Map proxy internal signals to their proxy node ID\n      for (const [nodeId, ref] of this._reactiveProxies) {\n        const proxy = ref.deref();\n        if (!proxy) { this._reactiveProxies.delete(nodeId); continue; }\n        const meta = this._reactiveNodes.get(nodeId)?.meta;\n        if (!meta || !this._instances.has(meta.componentId)) { this._reactiveProxies.delete(nodeId); continue; }\n      }\n\n      // Build edges from deps\n      const edgeSet = new Set();\n      for (const [nodeId, entry] of this._reactiveNodes) {\n        const signal = entry.signal.deref();\n        if (!signal) continue;\n        if (!signal.deps) continue;\n\n        const visited = new Set();\n        const queue = [...signal.deps];\n        while (queue.length > 0) {\n          const dep = queue.shift();\n          if (!dep || visited.has(dep)) continue;\n          visited.add(dep);\n          const depId = signalToId.get(dep);\n          if (depId) {\n            const key = depId + '>' + nodeId;\n            if (depId !== nodeId && !edgeSet.has(key)) {\n              edgeSet.add(key);\n              edges.push({ from: depId, to: nodeId });\n            }\n          } else if (dep.deps) {\n            for (const d of dep.deps) queue.push(d);\n          }\n        }\n      }\n\n      return { nodes, edges };\n    },\n\n    sendReactiveGraph() {\n      const graph = this.getReactiveGraph();\n      if (import.meta.hot) {\n        import.meta.hot.send('svelte-devtools:reactive-graph', graph);\n      }\n    },\n\n    // --- Phase 3: State Timeline ---\n\n    _pollStateValues() {\n      for (const [nodeId, entry] of this._reactiveNodes) {\n        if (entry.meta.type !== 'state') continue;\n        if (!this._instances.has(entry.meta.componentId)) {\n          this._reactiveNodes.delete(nodeId);\n          continue;\n        }\n        const signal = entry.signal.deref();\n        if (!signal || signal.v === undefined) continue;\n        try {\n          const currentVal = signal.v;\n          const prev = this._stateSnapshots.get(nodeId);\n          if (prev !== undefined && currentVal === prev) continue;\n          const isPrimitive = currentVal === null || typeof currentVal !== 'object';\n          let newSnapshot;\n          if (isPrimitive) {\n            if (prev !== undefined && prev === currentVal) continue;\n            newSnapshot = currentVal;\n          } else {\n            const currStr = JSON.stringify(currentVal);\n            const prevStr = this._stateSnapshotStrs?.get(nodeId);\n            if (prevStr === currStr) continue;\n            newSnapshot = JSON.parse(currStr);\n            if (!this._stateSnapshotStrs) this._stateSnapshotStrs = new Map();\n            this._stateSnapshotStrs.set(nodeId, currStr);\n          }\n          if (this._stateTimeline.length >= 500) this._stateTimeline.splice(0, this._stateTimeline.length - 499);\n          this._stateTimeline.push({\n            id: nodeId,\n            name: entry.meta.name,\n            componentFile: entry.meta.componentFile,\n            oldValue: prev !== undefined ? prev : null,\n            newValue: newSnapshot,\n            timestamp: Date.now(),\n          });\n          this._stateSnapshots.set(nodeId, newSnapshot);\n          this._scheduleTimelineUpdate();\n        } catch { /* ignore non-serializable */ }\n      }\n    },\n\n    _scheduleTimelineUpdate() {\n      if (this._timelineDebounceTimer) clearTimeout(this._timelineDebounceTimer);\n      this._timelineDebounceTimer = setTimeout(() => {\n        if (import.meta.hot) {\n          import.meta.hot.send('svelte-devtools:state-timeline', { changes: this._stateTimeline });\n        }\n      }, 300);\n    },\n\n    getStateTimeline() {\n      return this._stateTimeline;\n    },\n\n    clearStateTimeline() {\n      this._stateTimeline = [];\n      this._scheduleTimelineUpdate();\n    },\n\n    // --- FPS Monitoring ---\n    // Uses requestAnimationFrame to measure frame rate with minimal overhead.\n    // Only stores timestamps - no allocations per frame beyond a single array push.\n    _fpsFrameTimes: [],\n\n    _fpsLoop() {\n      this._fpsFrameTimes.push(performance.now());\n      requestAnimationFrame(() => this._fpsLoop());\n    },\n\n    _sampleFps() {\n      const now = performance.now();\n      // Remove frame timestamps older than 1 second\n      const cutoff = now - 1000;\n      let i = 0;\n      while (i < this._fpsFrameTimes.length && this._fpsFrameTimes[i] < cutoff) i++;\n      if (i > 0) this._fpsFrameTimes.splice(0, i);\n      const fps = this._fpsFrameTimes.length;\n      if (import.meta.hot) {\n        import.meta.hot.send('svelte-devtools:fps', { timestamp: Date.now(), fps });\n      }\n    }\n  };\n\n  window.__SVELTE_DEVTOOLS__ = __SVELTE_DT;\n\n  // Poll state values for timeline\n  setInterval(() => { __SVELTE_DT._pollStateValues(); }, 200);\n\n  // FPS monitoring\n  requestAnimationFrame(() => __SVELTE_DT._fpsLoop());\n  setInterval(() => __SVELTE_DT._sampleFps(), 500);\n\n  // Phase 3: Capture runtime errors\n  window.addEventListener('error', (event) => {\n    if (import.meta.hot) {\n      import.meta.hot.send('svelte-devtools:runtime-error', {\n        message: event.message,\n        file: event.filename,\n        line: event.lineno,\n        column: event.colno,\n        stack: event.error?.stack || '',\n        timestamp: Date.now(),\n      });\n    }\n  });\n  window.addEventListener('unhandledrejection', (event) => {\n    if (import.meta.hot) {\n      const reason = event.reason;\n      import.meta.hot.send('svelte-devtools:runtime-error', {\n        message: reason?.message || String(reason),\n        stack: reason?.stack || '',\n        timestamp: Date.now(),\n      });\n    }\n  });\n\n  // Listen for reactive graph requests from server\n  if (import.meta.hot) {\n    import.meta.hot.on('svelte-devtools:request-reactive-graph', () => {\n      __SVELTE_DT.sendReactiveGraph();\n    });\n    import.meta.hot.on('svelte-devtools:request-state-timeline', () => {\n      import.meta.hot.send('svelte-devtools:state-timeline', { changes: __SVELTE_DT._stateTimeline });\n    });\n    import.meta.hot.on('svelte-devtools:clear-state-timeline', () => {\n      __SVELTE_DT.clearStateTimeline();\n    });\n  }\n}\n", R = 1, z = 5, B = 1, V = 30;
+function H(e) {
 	return {
 		renderProfiles: e.getRenderProfiles().map((e) => ({
 			componentId: e.componentId,
@@ -273,10 +273,10 @@ function U(e) {
 		takenAt: Date.now()
 	};
 }
-function W(e, t, n) {
+function U(e, t, n) {
 	return Math.abs(e) < t ? "unchanged" : n ? e < 0 ? "improved" : "regressed" : e > 0 ? "improved" : "regressed";
 }
-var G = class {
+var te = class {
 	sessions = /* @__PURE__ */ new Map();
 	active = null;
 	persistDir;
@@ -291,7 +291,7 @@ var G = class {
 			label: e,
 			startedAt: Date.now(),
 			persist: t,
-			startSnapshot: U(this.getters),
+			startSnapshot: H(this.getters),
 			loadProfiles: [],
 			fpsSamples: []
 		};
@@ -311,7 +311,7 @@ var G = class {
 		if (!this.active) throw Error("No active session");
 		let t = this.sessions.get(this.active);
 		if (!t) throw Error("Active session missing from store");
-		return t.endedAt = Date.now(), t.endSnapshot = U(this.getters), this.active = null, e === "discard" ? this.sessions.delete(t.id) : (e === "disk" || t.persist) && this.persistToDisk(t), t;
+		return t.endedAt = Date.now(), t.endSnapshot = H(this.getters), this.active = null, e === "discard" ? this.sessions.delete(t.id) : (e === "disk" || t.persist) && this.persistToDisk(t), t;
 	}
 	get(e) {
 		return this.sessions.get(e) || this.loadFromDisk(e);
@@ -367,7 +367,7 @@ var G = class {
 				totalRenderTimeDelta: o,
 				avgRenderTimeDelta: a > 0 ? o / a : 0
 			};
-		}).filter((e) => e.renderCountDelta > 0).sort((e, t) => t.totalRenderTimeDelta - e.totalRenderTimeDelta), i = t.loadProfiles.map((e) => e.duration), a = K(i), o = ee(i, 95), s = t.fpsSamples.map((e) => e.fps), c = K(s), l = s.length ? Math.min(...s) : 0, u = s.filter((e) => e < H).length;
+		}).filter((e) => e.renderCountDelta > 0).sort((e, t) => t.totalRenderTimeDelta - e.totalRenderTimeDelta), i = t.loadProfiles.map((e) => e.duration), a = W(i), o = ne(i, 95), s = t.fpsSamples.map((e) => e.fps), c = W(s), l = s.length ? Math.min(...s) : 0, u = s.filter((e) => e < V).length;
 		return {
 			durationMs: t.endedAt - t.startedAt,
 			components: r,
@@ -399,19 +399,19 @@ var G = class {
 				totalRenderTimeDeltaA: o,
 				totalRenderTimeDeltaB: s,
 				diff: c,
-				verdict: W(c, z, !0)
+				verdict: U(c, R, !0)
 			},
 			load: {
 				avgA: n.loadProfiles.avgDuration,
 				avgB: r.loadProfiles.avgDuration,
 				diff: l,
-				verdict: W(l, B, !0)
+				verdict: U(l, z, !0)
 			},
 			fps: {
 				avgA: n.fps.avg,
 				avgB: r.fps.avg,
 				diff: u,
-				verdict: W(u, V, !1)
+				verdict: U(u, B, !1)
 			}
 		};
 	}
@@ -432,26 +432,26 @@ var G = class {
 		}
 	}
 };
-function K(e) {
+function W(e) {
 	return e.length ? e.reduce((e, t) => e + t, 0) / e.length : 0;
 }
-function ee(e, t) {
+function ne(e, t) {
 	if (!e.length) return 0;
 	let n = [...e].sort((e, t) => e - t);
 	return n[Math.min(n.length - 1, Math.floor(t / 100 * n.length))];
 }
 //#endregion
 //#region src/mcp/issues.ts
-var q = {
+var G = {
 	avgRenderTimeMs: 4,
 	renderCount: 30,
 	loadDurationMs: 200,
 	fpsDropThreshold: 40,
 	effectMaxDeps: 8
 };
-function te(e, t = {}) {
+function re(e, t = {}) {
 	let n = {
-		...q,
+		...G,
 		...t
 	}, r = [];
 	for (let t of e.renderProfiles) {
@@ -463,9 +463,9 @@ function te(e, t = {}) {
 			summary: `${t.name} averages ${e.toFixed(2)}ms per render (${t.renderCount} renders)`,
 			file: t.file,
 			metric: {
-				avgRenderTimeMs: Y(e),
+				avgRenderTimeMs: q(e),
 				renderCount: t.renderCount,
-				totalRenderTimeMs: Y(t.totalRenderTime)
+				totalRenderTimeMs: q(t.totalRenderTime)
 			},
 			suggestedTool: "get_render_profile"
 		}), t.renderCount >= n.renderCount && r.push({
@@ -476,7 +476,7 @@ function te(e, t = {}) {
 			file: t.file,
 			metric: {
 				renderCount: t.renderCount,
-				avgRenderTimeMs: Y(e)
+				avgRenderTimeMs: q(e)
 			},
 			suggestedTool: "get_component_hotspots"
 		});
@@ -488,7 +488,7 @@ function te(e, t = {}) {
 		summary: `${t.type} load for ${t.route} took ${t.duration.toFixed(0)}ms`,
 		file: t.file,
 		metric: {
-			durationMs: Y(t.duration),
+			durationMs: q(t.duration),
 			dataSizeBytes: t.dataSize
 		},
 		suggestedTool: "get_load_waterfall"
@@ -539,22 +539,22 @@ function te(e, t = {}) {
 			});
 		}
 	}
-	return r.sort(ne);
+	return r.sort(ie);
 }
-var J = {
+var K = {
 	high: 0,
 	medium: 1,
 	low: 2
 };
-function ne(e, t) {
-	return J[e.severity] - J[t.severity];
+function ie(e, t) {
+	return K[e.severity] - K[t.severity];
 }
-function Y(e) {
+function q(e) {
 	return Math.round(e * 100) / 100;
 }
-function re(e, t = {}) {
+function ae(e, t = {}) {
 	let n = {
-		...q,
+		...G,
 		...t
 	}, r = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map();
 	for (let t of e.edges) r.set(t.to, (r.get(t.to) ?? 0) + 1), i.set(t.from, (i.get(t.from) ?? 0) + 1);
@@ -585,11 +585,11 @@ function re(e, t = {}) {
 }
 //#endregion
 //#region src/mcp/server.ts
-var X = (e) => ({ content: [{
+var J = (e) => ({ content: [{
 	type: "text",
 	text: typeof e == "string" ? e : JSON.stringify(e, null, 2)
 }] });
-function ie(e) {
+function oe(e) {
 	let t = new c({
 		name: "vite-devtools-svelte",
 		version: "0.1.0"
@@ -605,13 +605,13 @@ function ie(e) {
 			effectMaxDeps: u.number().optional()
 		}
 	}, async (t) => {
-		let n = t, r = await e.getReactiveGraph(), i = te({
+		let n = t, r = await e.getReactiveGraph(), i = re({
 			renderProfiles: e.getRenderProfiles(),
 			reactiveGraph: r,
 			loadProfiles: e.getLoadProfiles(),
 			fpsSamples: e.getFpsSamples()
 		}, n);
-		return X({
+		return J({
 			count: i.length,
 			issues: i
 		});
@@ -619,20 +619,20 @@ function ie(e) {
 		title: "Component render hotspots",
 		description: "Top components by total render time, with render count and per-render average.",
 		inputSchema: { topN: u.number().int().min(1).max(200).optional() }
-	}, async ({ topN: t = 20 }) => X([...e.getRenderProfiles()].map((e) => ({
+	}, async ({ topN: t = 20 }) => J([...e.getRenderProfiles()].map((e) => ({
 		file: e.file,
 		name: e.name,
 		componentId: e.componentId,
 		renderCount: e.renderCount,
-		totalRenderTimeMs: Z(e.totalRenderTime),
-		avgRenderTimeMs: Z(e.renderCount > 0 ? e.totalRenderTime / e.renderCount : 0),
-		lastRenderTimeMs: Z(e.lastRenderTime),
+		totalRenderTimeMs: Y(e.totalRenderTime),
+		avgRenderTimeMs: Y(e.renderCount > 0 ? e.totalRenderTime / e.renderCount : 0),
+		lastRenderTimeMs: Y(e.lastRenderTime),
 		lastRenderAt: e.lastRenderAt
 	})).sort((e, t) => t.totalRenderTimeMs - e.totalRenderTimeMs).slice(0, t))), t.registerTool("get_reactive_graph_problems", {
 		title: "Reactive graph problems",
 		description: "Classified reactive graph issues: over-connected effects, orphan deriveds, isolated nodes. Returns categories instead of the full graph.",
 		inputSchema: { effectMaxDeps: u.number().int().min(1).optional() }
-	}, async ({ effectMaxDeps: t }) => X(re(await e.getReactiveGraph(), { effectMaxDeps: t }))), t.registerTool("get_load_waterfall", {
+	}, async ({ effectMaxDeps: t }) => J(ae(await e.getReactiveGraph(), { effectMaxDeps: t }))), t.registerTool("get_load_waterfall", {
 		title: "SvelteKit load waterfall",
 		description: "Load profiles grouped by route, with timing and data size. Optionally filtered by route.",
 		inputSchema: { route: u.string().optional() }
@@ -644,14 +644,14 @@ function ie(e) {
 			let t = r.get(e.route) ?? [];
 			t.push(e), r.set(e.route, t);
 		}
-		return X([...r.entries()].map(([e, t]) => {
+		return J([...r.entries()].map(([e, t]) => {
 			let n = t.map((e) => e.duration);
 			return {
 				route: e,
 				file: t[0]?.file,
 				count: t.length,
-				avgDuration: Z(ae(n)),
-				maxDuration: Z(Math.max(...n)),
+				avgDuration: Y(se(n)),
+				maxDuration: Y(Math.max(...n)),
 				totalDataBytes: t.reduce((e, t) => e + t.dataSize, 0),
 				samples: t
 			};
@@ -670,7 +670,7 @@ function ie(e) {
 			r = r.filter((t) => t.timestamp >= e);
 		}
 		let i = r.filter((e) => e.fps < t);
-		return X({
+		return J({
 			threshold: t,
 			sampleCount: r.length,
 			dropCount: i.length,
@@ -681,27 +681,27 @@ function ie(e) {
 		title: "Render profile for a specific file",
 		description: "Returns render profile entries matching the given component file (substring match).",
 		inputSchema: { file: u.string() }
-	}, async ({ file: t }) => X(e.getRenderProfiles().filter((e) => e.file.includes(t)).map((e) => ({
+	}, async ({ file: t }) => J(e.getRenderProfiles().filter((e) => e.file.includes(t)).map((e) => ({
 		...e,
-		totalRenderTimeMs: Z(e.totalRenderTime),
-		avgRenderTimeMs: Z(e.renderCount > 0 ? e.totalRenderTime / e.renderCount : 0)
+		totalRenderTimeMs: Y(e.totalRenderTime),
+		avgRenderTimeMs: Y(e.renderCount > 0 ? e.totalRenderTime / e.renderCount : 0)
 	})))), t.registerTool("get_project_info", {
 		title: "Project info",
 		description: "Package name/version, Svelte / SvelteKit / Vite versions, dependency lists.",
 		inputSchema: {}
-	}, async () => X(e.getProject())), t.registerTool("get_routes", {
+	}, async () => J(e.getProject())), t.registerTool("get_routes", {
 		title: "SvelteKit routes",
 		description: "Static analysis of the SvelteKit routes tree.",
 		inputSchema: {}
-	}, async () => X(e.getRoutes())), t.registerTool("get_live_components", {
+	}, async () => J(e.getRoutes())), t.registerTool("get_live_components", {
 		title: "Currently mounted components",
 		description: "Component instances with file, parent, mounted status as currently mounted in the browser.",
 		inputSchema: {}
-	}, async () => X(e.getLiveComponents())), t.registerTool("get_component_relations", {
+	}, async () => J(e.getLiveComponents())), t.registerTool("get_component_relations", {
 		title: "Component import graph",
 		description: "Static import relations between .svelte components.",
 		inputSchema: {}
-	}, async () => X(e.getComponentRelations())), t.registerTool("start_session", {
+	}, async () => J(e.getComponentRelations())), t.registerTool("start_session", {
 		title: "Start measurement session",
 		description: "Begin capturing metrics under a labelled session. Required before compare_sessions. Set `persist:true` to write to disk on end; otherwise the session lives in memory only.",
 		inputSchema: {
@@ -710,7 +710,7 @@ function ie(e) {
 		}
 	}, async ({ label: t, persist: n = !1 }) => {
 		let r = e.sessions.start(t, n);
-		return X({
+		return J({
 			id: r.id,
 			label: r.label,
 			startedAt: r.startedAt,
@@ -726,7 +726,7 @@ function ie(e) {
 		]).optional() }
 	}, async ({ keep: t = "memory" }) => {
 		let n = e.sessions.end(t), r = n.endedAt ? e.sessions.delta(n.id) : null;
-		return X({
+		return J({
 			id: n.id,
 			label: n.label,
 			startedAt: n.startedAt,
@@ -741,19 +741,19 @@ function ie(e) {
 			a: u.string(),
 			b: u.string()
 		}
-	}, async ({ a: t, b: n }) => X(e.sessions.compare(t, n))), t.registerTool("list_sessions", {
+	}, async ({ a: t, b: n }) => J(e.sessions.compare(t, n))), t.registerTool("list_sessions", {
 		title: "List sessions",
 		description: "In-memory + on-disk sessions, most recent first.",
 		inputSchema: {}
-	}, async () => X(e.sessions.list())), t.registerTool("load_session", {
+	}, async () => J(e.sessions.list())), t.registerTool("load_session", {
 		title: "Load a session by id",
 		description: "Returns the full session record (including delta if ended) by id.",
 		inputSchema: { id: u.string() }
 	}, async ({ id: t }) => {
 		let n = e.sessions.get(t);
-		if (!n) return X({ error: `Session not found: ${t}` });
+		if (!n) return J({ error: `Session not found: ${t}` });
 		let r = n.endedAt ? e.sessions.delta(t) : null;
-		return X({
+		return J({
 			...n,
 			delta: r
 		});
@@ -761,14 +761,35 @@ function ie(e) {
 		title: "Delete a session",
 		description: "Removes a session from memory and disk.",
 		inputSchema: { id: u.string() }
-	}, async ({ id: t }) => X({ deleted: e.sessions.delete(t) })), t;
+	}, async ({ id: t }) => J({ deleted: e.sessions.delete(t) })), t;
 }
-function ae(e) {
+function se(e) {
 	return e.length ? e.reduce((e, t) => e + t, 0) / e.length : 0;
 }
-function Z(e) {
+function Y(e) {
 	return Math.round(e * 100) / 100;
 }
+var ce = "templates: {", X = "/@id/@vitejs/devtools/client/inject", le = `<script type=\\"module\\" src=\\"${X}\\"><\/script>`, Z = "</body>";
+function ue(e) {
+	if (!e.includes("templates: {") || !e.includes(Z) || e.includes(X)) return null;
+	let t = e.indexOf(ce), n = e.indexOf(Z, t);
+	return n === -1 ? null : e.slice(0, n) + le + e.slice(n);
+}
+function de() {
+	return {
+		name: "vite-devtools-svelte:sveltekit-template-injector",
+		enforce: "post",
+		apply: (e, t) => t.command === "serve" && !t.isSsrBuild,
+		transform(e, t) {
+			if (!t.endsWith(".svelte-kit/generated/server/internal.js")) return;
+			let n = ue(e);
+			if (n !== null) return {
+				code: n,
+				map: null
+			};
+		}
+	};
+}
 //#endregion
 //#region src/plugin.ts
 var Q = e.dirname(i(import.meta.url));
@@ -783,17 +804,17 @@ function $(e) {
 	let r = t.hostname;
 	if (r === "::1" || r === "[::1]") throw Error("Blocked: loopback address");
 	if (n.isIP(r)) {
-		if (oe(r)) throw Error(`Blocked: private IP address ${r}`);
+		if (fe(r)) throw Error(`Blocked: private IP address ${r}`);
 	} else {
 		let e = r.toLowerCase();
 		if (e === "localhost" || e.endsWith(".local") || e.endsWith(".internal")) throw Error(`Blocked: internal hostname ${r}`);
 	}
 }
-function oe(e) {
+function fe(e) {
 	let t = e.split(".").map(Number);
 	return !!(t.length === 4 && (t[0] === 127 || t[0] === 10 || t[0] === 172 && t[1] >= 16 && t[1] <= 31 || t[0] === 192 && t[1] === 168 || t[0] === 169 && t[1] === 254 || t.every((e) => e === 0)));
 }
-function se(n = {}) {
+function pe(n = {}) {
 	let { componentTracking: i = !0 } = n, o, s, c, u = r.randomUUID();
 	function f(n) {
 		if (typeof n != "string" || n.length === 0) throw Error("Invalid file path");
@@ -811,7 +832,7 @@ function se(n = {}) {
 		edges: []
 	}, y = [], b = [], x = [], S = [], w = [], T = [], E = null;
 	function D() {
-		return E ||= new G({
+		return E ||= new te({
 			persistDir: e.join(c, "node_modules", ".vite-devtools-svelte", "sessions"),
 			getters: {
 				getRenderProfiles: () => m,
@@ -985,7 +1006,7 @@ function se(n = {}) {
 			},
 			"svelte-devtools:get-module-graph": async () => M(),
 			"svelte-devtools:get-og-preview": async (e) => N(String(e)),
-			"svelte-devtools:get-build-analysis": async () => z(),
+			"svelte-devtools:get-build-analysis": async () => R(),
 			"svelte-devtools:get-fps": async () => T,
 			"svelte-devtools:clear-fps": async () => {
 				T = [];
@@ -1119,7 +1140,7 @@ function se(n = {}) {
 					r.statusCode = 404, r.end("Not found");
 				}
 			});
-			let S = () => ie({
+			let S = () => oe({
 				getProject: () => C(c),
 				getRoutes: () => d(C(c).routesDir),
 				getLiveComponents: () => p,
@@ -1161,14 +1182,14 @@ function se(n = {}) {
 		},
 		resolveId(e, t) {
 			if (o?.command === "serve") {
-				if (e === "virtual:svelte-devtools-runtime") return F;
-				if (i && e === "svelte/internal/client" && t && !t.includes("node_modules") && !t.startsWith("\0")) return I;
+				if (e === "virtual:svelte-devtools-runtime") return ee;
+				if (i && e === "svelte/internal/client" && t && !t.includes("node_modules") && !t.startsWith("\0")) return F;
 			}
 		},
 		load(e) {
 			if (o?.command === "serve") {
-				if (e === "\0virtual:svelte-devtools-runtime") return R;
-				if (e === "\0svelte-devtools:wrapped-client") return L;
+				if (e === "\0virtual:svelte-devtools-runtime") return L;
+				if (e === "\0svelte-devtools:wrapped-client") return I;
 			}
 		},
 		transformIndexHtml() {
@@ -1298,7 +1319,7 @@ function se(n = {}) {
 		}
 		return t;
 	}
-	function z() {
+	function R() {
 		let n = e.resolve(c, ".svelte-kit/output"), r = e.resolve(c, "build/client"), i = [];
 		for (let a of [
 			n,
@@ -1413,10 +1434,11 @@ export const load = async (event) => {
 					t(e, n);
 				};
 			}
-		}
+		},
+		de()
 	];
 }
 //#endregion
-export { se as svelteDevtools };
+export { pe as svelteDevtools };
 
 //# sourceMappingURL=index.mjs.map