vite-devtools-svelte 0.2.1 → 0.3.0

package/dist/index.mjs

@@ -258,7 +258,7 @@ function N(e) {
 }
 //#endregion
 //#region src/runtime.ts
-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;
+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\n// --- Render Profiling ---\n//\n// Svelte 5 has no virtual DOM: the compiler wraps every dynamic part of a\n// template in a template_effect (deferred_template_effect for <svelte:head>\n// <title>). A re-run of such an effect IS the component updating the DOM, so\n// these two functions are the measurement points for renders / render time.\n//\n// The first run of an effect is the mount-time paint, already covered by\n// initTime, so it is skipped (initialRun). One state change re-runs several\n// effects of the same component, so durations are pooled per microtask and\n// recorded once per flush: recordRender() +1, recordRenderTime() the sum.\n\nconst __pendingRenderDurations = new Map();\nlet __renderFlushScheduled = false;\n\nfunction __flushRenderDurations() {\n  __renderFlushScheduled = false;\n  const dt = __dt();\n  for (const [cid, duration] of __pendingRenderDurations) {\n    if (dt) {\n      try { dt.recordRender(cid); } catch {}\n      try { dt.recordRenderTime(cid, duration); } catch {}\n    }\n  }\n  __pendingRenderDurations.clear();\n}\n\nfunction __recordRenderDuration(cid, duration) {\n  __pendingRenderDurations.set(cid, (__pendingRenderDurations.get(cid) || 0) + duration);\n  if (!__renderFlushScheduled) {\n    __renderFlushScheduled = true;\n    queueMicrotask(__flushRenderDurations);\n  }\n}\n\n// Returns a (possibly new) args array whose first element times each re-run\n// of the effect closure. The owning component is whatever id is on top of\n// __idStack at effect-creation time. User exceptions propagate untouched;\n// only the args are built inside try so the original is called exactly once.\nfunction __wrapTemplateEffect(args) {\n  const cid = __currentId();\n  const fn = args[0];\n  if (cid === null || typeof fn !== 'function') return args;\n  const wrapped = Array.prototype.slice.call(args);\n  let initialRun = true;\n  wrapped[0] = function () {\n    if (initialRun) {\n      initialRun = false;\n      return fn.apply(this, arguments);\n    }\n    const start = performance.now();\n    try {\n      return fn.apply(this, arguments);\n    } finally {\n      try { __recordRenderDuration(cid, performance.now() - start); } catch {}\n    }\n  };\n  return wrapped;\n}\n\nexport function template_effect() {\n  let args = arguments;\n  try { args = __wrapTemplateEffect(arguments); } catch {}\n  return __svelte_original.template_effect.apply(null, args);\n}\n\nexport function deferred_template_effect() {\n  let args = arguments;\n  try { args = __wrapTemplateEffect(arguments); } catch {}\n  return __svelte_original.deferred_template_effect.apply(null, args);\n}\n\n// --- Block Attribution ---\n//\n// Svelte creates render effects synchronously at creation time. At mount this\n// happens during the component function (between push/pop), so __idStack has\n// the owner. But effects for {#each} items added later or re-created {#if}\n// branches are created during a batch flush, when the stack is empty — they\n// would never be attributed. Block helpers themselves ARE always called\n// during their owner's init (or inside an outer block's callback), so the\n// owner id is on the stack at block-creation time. __wrapBlock captures it\n// and re-pushes it around every function argument the block invokes later,\n// so effects created inside land on the innermost owner. Child components\n// push their own id on top, keeping nested attribution correct.\n\nfunction __wrapBlockFn(fn, cid) {\n  return function () {\n    let pushed = false;\n    try { __idStack.push(cid); pushed = true; } catch {}\n    try {\n      return fn.apply(this, arguments);\n    } finally {\n      if (pushed) { try { __idStack.pop(); } catch {} }\n    }\n  };\n}\n\nfunction __wrapBlock(args) {\n  const cid = __currentId();\n  if (cid === null) return args;\n  const wrapped = Array.prototype.slice.call(args);\n  for (let i = 0; i < wrapped.length; i++) {\n    if (typeof wrapped[i] === 'function') wrapped[i] = __wrapBlockFn(wrapped[i], cid);\n  }\n  return wrapped;\n}\n\nexport function each() {\n  let args = arguments;\n  try { args = __wrapBlock(arguments); } catch {}\n  return __svelte_original.each.apply(null, args);\n}\n\nexport function key() {\n  let args = arguments;\n  try { args = __wrapBlock(arguments); } catch {}\n  return __svelte_original.key.apply(null, args);\n}\n\nexport function component() {\n  let args = arguments;\n  try { args = __wrapBlock(arguments); } catch {}\n  return __svelte_original.component.apply(null, args);\n}\n\nexport function boundary() {\n  let args = arguments;\n  try { args = __wrapBlock(arguments); } catch {}\n  return __svelte_original.boundary.apply(null, args);\n}\n\n// 'if' and 'await' are reserved words, so they cannot be declared as\n// function names and are exported via aliases instead.\nfunction __if_block() {\n  let args = arguments;\n  try { args = __wrapBlock(arguments); } catch {}\n  return __svelte_original['if'].apply(null, args);\n}\n\nfunction __await_block() {\n  let args = arguments;\n  try { args = __wrapBlock(arguments); } catch {}\n  return __svelte_original['await'].apply(null, args);\n}\n\nexport { __if_block as if, __await_block as await };\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._cleanupComponent(id);\n      }\n      this._scheduleUpdate();\n      this._scheduleProfileUpdate();\n    },\n\n    // Remounts get a fresh id, so entries keyed by a dead id would otherwise\n    // survive forever — every per-component map must be purged here.\n    _cleanupComponent(id) {\n      this._cleanupReactiveNodes(id);\n      this._instances.delete(id);\n      this._profiles.delete(id);\n      this._initStartTimes.delete(id);\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          this._reactiveProxies.delete(nodeId);\n          this._stateSnapshots.delete(nodeId);\n          if (this._stateSnapshotStrs) this._stateSnapshotStrs.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._cleanupComponent(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) => ({