vite-devtools-svelte 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. package/README.md +159 -56
  2. package/dist/analyzers/api.d.ts +16 -0
  3. package/dist/analyzers/assets.d.ts +6 -1
  4. package/dist/analyzers/build.d.ts +3 -0
  5. package/dist/analyzers/module-graph.d.ts +13 -0
  6. package/dist/analyzers/og.d.ts +7 -0
  7. package/dist/analyzers/source.d.ts +6 -0
  8. package/dist/client/assets/ApiPlayground-BMx5j-7t.js +3 -0
  9. package/dist/client/assets/ApiPlayground-D6P2iQCp.css +1 -0
  10. package/dist/client/assets/Assets-BHhg5Smm.js +1 -0
  11. package/dist/client/assets/Assets-D-EORnuB.css +1 -0
  12. package/dist/client/assets/Badge-BBLKgCiU.css +1 -0
  13. package/dist/client/assets/Badge-CBVv8IFU.js +1 -0
  14. package/dist/client/assets/BuildAnalysis-BdVCnWpb.js +1 -0
  15. package/dist/client/assets/BuildAnalysis-ClES_VN-.css +1 -0
  16. package/dist/client/assets/CaptureNotice-B2odNyXw.css +1 -0
  17. package/dist/client/assets/CaptureNotice-BeXCVhO0.js +1 -0
  18. package/dist/client/assets/Components-Co50xTrv.css +1 -0
  19. package/dist/client/assets/Components-D_qDgEUt.js +1 -0
  20. package/dist/client/assets/DataTable-C6-tmcTQ.js +1 -0
  21. package/dist/client/assets/DataTable-CdVIFm8T.css +1 -0
  22. package/dist/client/assets/ErrorDashboard-0CGkszcN.css +1 -0
  23. package/dist/client/assets/ErrorDashboard-CfUhPzue.js +1 -0
  24. package/dist/client/assets/FpsMonitor-B_AuHgyu.js +1 -0
  25. package/dist/client/assets/FpsMonitor-BmS11Tn7.css +1 -0
  26. package/dist/client/assets/Inspect-BOgmKm6W.js +3 -0
  27. package/dist/client/assets/Inspect-Ci9HWo78.css +1 -0
  28. package/dist/client/assets/Inspector-CDwlmfEg.css +1 -0
  29. package/dist/client/assets/Inspector-DGmAzhki.js +1 -0
  30. package/dist/client/assets/LoadProfiler-5xhnDLjR.js +1 -0
  31. package/dist/client/assets/LoadProfiler-cg28l5zW.css +1 -0
  32. package/dist/client/assets/ModuleGraph-B6XWZJQb.css +1 -0
  33. package/dist/client/assets/ModuleGraph-Cp7f0Nz0.js +1 -0
  34. package/dist/client/assets/OGPreview-CSIAKIGn.css +1 -0
  35. package/dist/client/assets/OGPreview-CjBhXSgn.js +1 -0
  36. package/dist/client/assets/Overview-B8hvIsIM.css +1 -0
  37. package/dist/client/assets/Overview-Kbpkgsas.js +1 -0
  38. package/dist/client/assets/ReactiveGraph-Bq_aP4uo.css +1 -0
  39. package/dist/client/assets/ReactiveGraph-w2TK82c8.js +5 -0
  40. package/dist/client/assets/RenderProfiler-CS1FAvX6.css +1 -0
  41. package/dist/client/assets/RenderProfiler-CeF8_j3b.js +1 -0
  42. package/dist/client/assets/Routes-DArWZtzC.js +1 -0
  43. package/dist/client/assets/Routes-eFPp9T07.css +1 -0
  44. package/dist/client/assets/SearchField-DWMQuleP.css +1 -0
  45. package/dist/client/assets/SearchField-eocQu1eB.js +1 -0
  46. package/dist/client/assets/Segmented-JGNuI5EZ.js +1 -0
  47. package/dist/client/assets/Segmented-OaYMdNpv.css +1 -0
  48. package/dist/client/assets/SplitView-B8lYXXEm.js +1 -0
  49. package/dist/client/assets/SplitView-CbR-hDtW.css +1 -0
  50. package/dist/client/assets/StateTimeline-B4FdF3L3.css +1 -0
  51. package/dist/client/assets/StateTimeline-HpyvgoK1.js +1 -0
  52. package/dist/client/assets/TreeView-BL5XbGhe.css +1 -0
  53. package/dist/client/assets/TreeView-fty5aCC5.js +1 -0
  54. package/dist/client/assets/VirtualList-BvOBTnYJ.js +1 -0
  55. package/dist/client/assets/VirtualList-CRDBwjCp.css +1 -0
  56. package/dist/client/assets/browser-agent-rpc-BXhoSh1z-D9g7mT9G.js +1 -0
  57. package/dist/client/assets/capture.svelte-CUhwdJwX.js +1 -0
  58. package/dist/client/assets/format-CW_NXiBg.js +1 -0
  59. package/dist/client/assets/index-BzMw8R8l.js +7 -0
  60. package/dist/client/assets/index-eZHqMk0z.css +1 -0
  61. package/dist/client/assets/reactive-C2hv2QLH.js +1 -0
  62. package/dist/client/assets/reactive-selection.svelte-Dfd9zWsh.js +1 -0
  63. package/dist/client/assets/versions-CZjRj40E.js +1 -0
  64. package/dist/client/assets/versions-Co596WUJ.css +1 -0
  65. package/dist/client/index.html +3 -14
  66. package/dist/collector.d.ts +284 -0
  67. package/dist/devframe.d.ts +90 -0
  68. package/dist/index.mjs +1839 -808
  69. package/dist/index.mjs.map +1 -1
  70. package/dist/mcp/server.d.ts +21 -1
  71. package/dist/mcp/sessions.d.ts +9 -0
  72. package/dist/mount.d.ts +18 -0
  73. package/dist/runtime.d.ts +2 -2
  74. package/dist/security.d.ts +27 -0
  75. package/dist/template-injector.d.ts +14 -2
  76. package/dist/types.d.ts +176 -0
  77. package/package.json +8 -7
  78. package/dist/client/assets/client-D_AN-igc.js +0 -2
  79. package/dist/client/assets/index-CJElsHas.js +0 -6
  80. package/dist/client/assets/index-D-ChuYqP.css +0 -1
package/README.md CHANGED
@@ -1,13 +1,13 @@
1
1
  # vite-devtools-svelte
2
2
 
3
- 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.
3
+ Svelte DevTools for Vite, built on [Devframe](https://devfra.me/). Provides 15 specialized panels for debugging, profiling, and inspecting Svelte/SvelteKit applications. The same tool runs **standalone** at `/.svelte-devtools/` on your dev server, or **inside the [Vite DevTools](https://devtools.vite.dev/) dock** when `@vitejs/devtools` is installed.
4
4
 
5
- > **Status:** Early development. APIs may change.
5
+ > **Status:** Early development. APIs may change. This README describes **0.4.0** (Devframe host: standalone or inside the Vite DevTools dock). 0.3.x rendered only inside `@vitejs/devtools`; see [Upgrading from 0.3.x](#upgrading-from-03x).
6
6
 
7
7
  ## Features
8
8
 
9
9
  - **Component Inspector** — View component hierarchy, props, state, and reactive values in real-time
10
- - **Reactive Graph** — Visualize `$state`, `$derived`, and `$effect` dependencies as an interactive DAG
10
+ - **Reactivity** — A whole-app overview of the busiest components, then the current dependencies of one component's `$state`, `$derived` and `$effect` signals (signals created during component init; edges are "can affect", not a recorded cause, and not the complete app graph)
11
11
  - **Render Profiler** — Track component render counts, render times, and identify bottlenecks
12
12
  - **Route Viewer** — Explore SvelteKit file-based routing structure with dynamic parameters
13
13
  - **Load Profiler** — Monitor SvelteKit `load` functions with waterfall visualization
@@ -24,157 +24,181 @@ Svelte DevTools plugin for [Vite DevTools](https://github.com/vitejs/devtools).
24
24
 
25
25
  ### Screenshots
26
26
 
27
+ Panel shots: captured from the UI in dev-mock mode with synthetic data, before the reactivity update (Social preview: a generated SvelteKit test app). Reactivity shots: captured in CI from the real runtime, against the synthetic demo app in `examples/sample-app`.
28
+
27
29
  <details>
28
30
  <summary>Overview</summary>
29
31
 
30
- ![Overview](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/panel-overview.png)
32
+ ![Overview](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/ui-overview.png)
31
33
 
32
34
  </details>
33
35
 
34
36
  <details>
35
37
  <summary>Components</summary>
36
38
 
37
- ![Components](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/panel-components.png)
39
+ ![Components](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/ui-components.png)
38
40
 
39
41
  </details>
40
42
 
41
43
  <details>
42
44
  <summary>Routes</summary>
43
45
 
44
- ![Routes](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/panel-routes.png)
46
+ ![Routes](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/ui-routes.png)
45
47
 
46
48
  </details>
47
49
 
48
50
  <details>
49
51
  <summary>Assets</summary>
50
52
 
51
- ![Assets](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/panel-assets.png)
53
+ ![Assets](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/ui-assets.png)
52
54
 
53
55
  </details>
54
56
 
55
57
  <details>
56
- <summary>Render Profiler</summary>
58
+ <summary>Render</summary>
57
59
 
58
- ![Render Profiler](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/panel-profiler.png)
60
+ ![Render](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/ui-profiler.png)
59
61
 
60
62
  </details>
61
63
 
62
64
  <details>
63
- <summary>Reactive Graph</summary>
65
+ <summary>Reactivity</summary>
66
+
67
+ Overview: what the counts cover and the most active components:
68
+
69
+ ![Reactivity overview](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/reactivity-overview.png)
70
+
71
+ One component (ReactivePriceChart) and the signals it is directly linked to; edges mean "can affect", not a recorded cause:
72
+
73
+ ![Reactivity, one component](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/reactivity-component.png)
74
+
75
+ $state signals by sampled changes in the timeline buffer:
64
76
 
65
- ![Reactive Graph](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/panel-reactive.png)
77
+ ![Reactivity, states](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/reactivity-states.png)
78
+
79
+ After the app page reloads, a selected component id may belong to another instance, and the panel says so:
80
+
81
+ ![Reactivity after a page reload](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/reactivity-epoch.png)
66
82
 
67
83
  </details>
68
84
 
69
85
  <details>
70
- <summary>FPS Monitor</summary>
86
+ <summary>Frame rate</summary>
71
87
 
72
- ![FPS Monitor](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/panel-fps.png)
88
+ ![Frame rate](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/ui-fps.png)
73
89
 
74
90
  </details>
75
91
 
76
92
  <details>
77
- <summary>Load Profiler</summary>
93
+ <summary>Load functions</summary>
78
94
 
79
- ![Load Profiler](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/panel-loads.png)
95
+ ![Load functions](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/ui-loads.png)
80
96
 
81
97
  </details>
82
98
 
83
99
  <details>
84
- <summary>State Timeline</summary>
100
+ <summary>State timeline</summary>
85
101
 
86
- ![State Timeline](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/panel-timeline.png)
102
+ ![State timeline](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/ui-timeline.png)
87
103
 
88
104
  </details>
89
105
 
90
106
  <details>
91
- <summary>API Playground</summary>
107
+ <summary>API</summary>
92
108
 
93
- ![API Playground](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/panel-api.png)
109
+ ![API](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/ui-api.png)
94
110
 
95
111
  </details>
96
112
 
97
113
  <details>
98
- <summary>Errors & Warnings</summary>
114
+ <summary>Problems</summary>
99
115
 
100
- ![Errors & Warnings](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/panel-errors.png)
116
+ ![Problems](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/ui-errors.png)
101
117
 
102
118
  </details>
103
119
 
104
120
  <details>
105
- <summary>Code Inspector</summary>
121
+ <summary>Compiled output</summary>
106
122
 
107
- ![Inspect](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/panel-inspect.png)
108
- ![Inspect Detail](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/panel-inspect-detail.png)
123
+ ![Compiled output](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/ui-inspect.png)
109
124
 
110
125
  </details>
111
126
 
112
127
  <details>
113
- <summary>Module Graph</summary>
128
+ <summary>Modules</summary>
114
129
 
115
- ![Module Graph](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/panel-modules.png)
130
+ ![Modules](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/ui-modules.png)
116
131
 
117
132
  </details>
118
133
 
119
134
  <details>
120
- <summary>OG Preview</summary>
135
+ <summary>Social preview</summary>
121
136
 
122
- ![OG Preview](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/panel-og.png)
137
+ ![Social preview](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/ui-og.png)
123
138
 
124
139
  </details>
125
140
 
126
141
  <details>
127
- <summary>Build Analysis</summary>
142
+ <summary>Build</summary>
128
143
 
129
- ![Build Analysis](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/panel-build.png)
144
+ ![Build](https://raw.githubusercontent.com/baseballyama/vite-devtools-svelte/main/docs/images/ui-build.png)
130
145
 
131
146
  </details>
132
147
 
133
148
  ## Requirements
134
149
 
135
- - **Vite** >= 8.0.0
150
+ - **Vite** >= 8.3.2
136
151
  - **Svelte** 5 (runes mode)
137
152
  - **SvelteKit** (recommended, but not required for basic features)
138
- - **[@vitejs/devtools](https://devtools.vite.dev/)** — the host UI this plugin's panels render inside
153
+ - **[@vitejs/devtools](https://devtools.vite.dev/)** >= 0.7.6 — optional; only for the in-page dock
139
154
 
140
155
  ## Installation
141
156
 
142
- `vite-devtools-svelte` is a panel provider — it needs the [`@vitejs/devtools`](https://devtools.vite.dev/) host plugin to render its UI. Install both:
143
-
144
157
  ```bash
145
- npm install -D vite-devtools-svelte @vitejs/devtools
158
+ npm install -D vite-devtools-svelte
159
+ # optional: show the panels inside the Vite DevTools dock
160
+ npm install -D @vitejs/devtools
146
161
  ```
147
162
 
148
163
  ## Setup
149
164
 
150
- Register **both** plugins in your `vite.config.ts`. `svelteDevtools()` **must come before `sveltekit()`** so that its transforms run before the Svelte compiler.
165
+ Register the plugin in your `vite.config.ts`. `svelteDevtools()` **must come before `sveltekit()`** so that its transforms run before the Svelte compiler.
151
166
 
152
167
  ```ts
153
168
  // vite.config.ts
154
169
  import { sveltekit } from '@sveltejs/kit/vite'
155
- import { DevTools } from '@vitejs/devtools'
156
170
  import { svelteDevtools } from 'vite-devtools-svelte'
157
171
  import { defineConfig } from 'vite'
158
172
 
159
173
  export default defineConfig({
160
174
  plugins: [
161
175
  svelteDevtools(), // must come before sveltekit()
162
- DevTools(), // the @vitejs/devtools host — without it the panels have nowhere to render
163
176
  sveltekit(),
164
177
  ],
165
178
  })
166
179
  ```
167
180
 
168
- Then start your dev server as usual:
181
+ Start your dev server as usual (`npm run dev`) and open the URL it prints:
169
182
 
170
- ```bash
171
- npm run dev
183
+ ```
184
+ ➜ Svelte DevTools: http://localhost:5173/.svelte-devtools/
172
185
  ```
173
186
 
174
- 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.
187
+ The first time a browser opens the DevTools it asks for a one-time code: request it from the page, and the dev server prints a 6-digit code plus a link (`…/.svelte-devtools/#devframe_otp=…`) in the terminal. Opening the link (or typing the code) trusts that browser; the token is remembered across reloads and dev-server restarts.
175
188
 
176
- > [!NOTE]
177
- > 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.
189
+ ### Inside the Vite DevTools dock
190
+
191
+ With `@vitejs/devtools` installed, add its plugin as well. The Svelte tool then mounts as a dock entry instead of standalone (never both), and authentication is handled once by Vite DevTools:
192
+
193
+ ```ts
194
+ import { DevTools } from '@vitejs/devtools'
195
+
196
+ export default defineConfig({
197
+ plugins: [svelteDevtools(), DevTools(), sveltekit()],
198
+ })
199
+ ```
200
+
201
+ Open your app, click the floating Vite DevTools handle and switch to the **Svelte** tab. The panels are also reachable directly at `/.svelte-devtools/`.
178
202
 
179
203
  ## Options
180
204
 
@@ -187,25 +211,104 @@ svelteDevtools({
187
211
 
188
212
  ## How It Works
189
213
 
190
- The plugin uses a **virtual module architecture** instead of fragile regex transforms:
214
+ 1. **Runtime wrapper** — Intercepts `svelte/internal/client` to track component lifecycle and reactive signals (`$state`, `$derived`, `$effect`). It only polls state / samples FPS while a DevTools tab or an MCP agent is watching.
215
+ 2. **HMR channel** — Streams runtime data (component tree, render profiles, state-timeline deltas, reactive graph) from the browser to the dev server.
216
+ 3. **Static analyzers** — Extract routes, component relations, assets, and project metadata from the filesystem.
217
+ 4. **Devframe tool** — One portable [Devframe](https://devfra.me/) definition exposes all of this over a typed, schema-validated RPC. It is served standalone (`initDevframe` on Vite's own HTTP server) or mounted into Vite DevTools (`createPluginFromDevframe`); the UI connects with `connectDevframe()` either way.
218
+
219
+ The plugin is **development-only** — every sub-plugin is `apply: 'serve'`, so nothing of it reaches a production build. In development, the runtime only samples while a DevTools tab or MCP agent is watching (an activity lease), and the dev server keeps its buffers bounded.
220
+
221
+ ## Upgrading from 0.3.x
222
+
223
+ The public API is unchanged — still `svelteDevtools({ componentTracking })`, and the same 15 panels. MCP keeps every existing tool and adds four reactivity tools (see [AI access](#ai-access-mcp)). What changed is how the UI is hosted and how it talks to the dev server:
224
+
225
+ | | 0.3.x | 0.4.0 |
226
+ | --------- | --------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
227
+ | Host | panels only rendered inside `@vitejs/devtools` (required) | standalone at `/.svelte-devtools/`, or inside the Vite DevTools dock when `@vitejs/devtools` is installed (optional) |
228
+ | Transport | DevTools Kit RPC + HTTP fallback (`/__svelte-devtools/rpc`, `/__svelte-devtools/asset`) | one Devframe WebSocket RPC (SSE in Vite middleware mode); the HTTP endpoints are removed |
229
+ | Auth | per-process token injected into the UI HTML | Devframe one-time code → per-browser token (secure by default); Vite DevTools' own auth when docked |
230
+ | Peer deps | `vite >= 8.0.0` | `vite ^8.3.2` (uses the public `closeServer` hook), `@vitejs/devtools >= 0.7.6` optional |
231
+
232
+ Static assets in the Assets panel are now served by Vite itself (their public URL) instead of a custom endpoint. The MCP endpoint (`/__svelte-devtools/mcp`) is unchanged.
233
+
234
+ ## Known limitations
235
+
236
+ - **Very large apps (tens of thousands of live components):** after the initial snapshot the runtime sends only component deltas (≤ 2 000 per message), with periodic full checkpoints. The panels, however, still fetch the whole stored tree (up to 50 000 instances) from the dev server whenever it changes — estimated at a few MB per refresh at that size, about once per second at most. Real-browser performance at this scale has not been benchmarked yet.
237
+ - **Deep in-place mutations of very large `$state` values** are detected after about 1 s (reassignments and primitive changes are picked up on the next 200 ms tick).
238
+ - **Several app tabs:** the panels show the tab that pushed most recently (up to 4 page loads are tracked); there is no per-tab selector yet.
239
+ - **Components tree selection** follows the same instance while the page stays loaded; after a reload, or when an instance is replaced (e.g. `{#key}`, HMR), it is matched by its position in the tree instead. Instances beyond the 50 000 cap are counted but cannot be selected.
240
+ - **Components added after the first render** (e.g. new `{#each}` rows) are placed under their parent using Svelte internals (checked in a browser on Svelte 5.56.8; the CI compatibility profiles run Svelte 5.57.1); with a different internal layout they would appear as separate top-level entries instead.
241
+ - **Reactivity:** which write changed a state is not recorded (the panel says "Cause: Not recorded"); full value inspection and per-signal history are not available (values are shown as bounded summaries; sampled changes are in the State timeline). Only state created during component init is tracked — module-level `.svelte.ts` state is not. A component's top-level `$effect` is deferred by Svelte until mount, so it appears as a node without dependencies (and may disappear after garbage collection): the graph shows what the runtime observed, not every dependency. Render profiles are still sent as a bounded full tail rather than deltas, and behaviour at very large scale (tens of thousands of components) has not been measured.
242
+ - **Restarts in Vite middleware mode** dispose the DevTools via Vite's `closeServer` hook, which is why `vite ^8.3.2` is required.
243
+
244
+ ## AI access (MCP)
245
+
246
+ The plugin exposes an MCP (Model Context Protocol) endpoint so AI agents such as Claude Code can read performance metrics and run measurement sessions autonomously. The intent: surface the same data the panels show, in a shape an agent can act on — and let the agent's own file-editing tools propose fixes.
247
+
248
+ On dev-server startup the plugin prints a copy-pasteable registration command:
249
+
250
+ ```
251
+ svelte-devtools MCP ready — register with Claude Code:
252
+ claude mcp add --transport http svelte http://localhost:5173/__svelte-devtools/mcp --header x-svelte-devtools-token:<token>
253
+ ```
254
+
255
+ The endpoint is gated by a per-process random token (MCP clients are local processes, not browser tabs, so they don't use the browser login). The token rotates every dev-server start, so you'll re-register after a restart.
256
+
257
+ The endpoint is served wherever your Vite dev server listens. With the default (`localhost`) only local processes can reach it; with `server.host` set to `true` or `0.0.0.0`, other machines on your network can reach it too and only the token protects it. There is no separate Host/Origin check.
258
+
259
+ ### Tools exposed
260
+
261
+ | Tool | Purpose |
262
+ | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
263
+ | `list_performance_issues` | Cross-cuts render / reactive / load / fps and returns ranked issues with `suggestedTool` for drill-down. Entry point. |
264
+ | `get_component_hotspots` | Top components by total render time. |
265
+ | `get_reactive_graph_problems` | Classified reactive-graph issues (over-connected effects, orphan deriveds, isolated nodes). |
266
+ | `get_load_waterfall` | SvelteKit `load` timings grouped by route. |
267
+ | `get_fps_drops` | FPS samples below threshold. |
268
+ | `get_render_profile` | Render profile entries for a specific file. |
269
+ | `get_project_info`, `get_routes` | Package and framework versions; the SvelteKit routes tree (static analysis). |
270
+ | `get_live_components`, `get_component_relations` | Mounted component instances (`includeMeta: true` adds the page-load epoch the ids belong to, totals and a limit); static import relations between components. |
271
+ | `get_reactive_summary` | Busiest component instances from runtime counters (sampled changes and renders in a time window), with totals; does not capture the whole graph. Repeated identical requests may get the same answer for up to 1 s; `window.until` says when it was computed. `stale: true` means the app did not answer and an earlier (or empty) answer was returned. |
272
+ | `get_reactive_scope` | `$state` / `$derived` / `$effect` nodes of one component instance and their direct neighbours. Edges mean "can affect", not a recorded cause. Repeated identical requests may get the same answer for up to 1 s; `computedAt` says when the app built it. |
273
+ | `get_state_timeline` | Sampled `$state` changes after a cursor, at most 500 per call, with large values replaced by a size summary. |
274
+ | `get_capture_info` | What is held versus what the app reported, per dataset (totals, truncation, dropped counts). |
275
+ | `start_session`, `end_session`, `compare_sessions` | Bracket a measurement window so the agent can diff before/after a fix. `persist:true` writes the session to `node_modules/.vite-devtools-svelte/sessions/`. |
276
+ | `list_sessions`, `load_session`, `delete_session` | Session inspection / cleanup. The agent owns disposal — the plugin never auto-persists. |
277
+
278
+ ### Skills
279
+
280
+ Two Claude Code skills ship under `node_modules/vite-devtools-svelte/skills/`:
281
+
282
+ - `vite-devtools-svelte:perf-audit` — captures a baseline session, calls `list_performance_issues`, and presents the top issues for the user to triage.
283
+ - `vite-devtools-svelte:perf-fix` — one issue per run: baseline → edit → after → `compare_sessions`, with `verdict` reported verbatim and an explicit revert path if the change regresses or has no effect.
284
+
285
+ Skill names are namespaced with `vite-devtools-svelte:` so they don't collide with other skills in your `.claude/skills/`.
286
+
287
+ To install for a given project:
288
+
289
+ ```bash
290
+ mkdir -p .claude/skills
291
+ cp -r node_modules/vite-devtools-svelte/skills/* .claude/skills/
292
+ ```
293
+
294
+ ### Scope
191
295
 
192
- 1. **Runtime wrapper** — Intercepts `svelte/internal/client` to track component lifecycle and reactive signals (`$state`, `$derived`, `$effect`)
193
- 2. **HMR channel** — Streams runtime data (component tree, render profiles, reactive graph) from the browser to the dev server via WebSocket
194
- 3. **Static analyzers** — Extract routes, component relations, assets, and project metadata from the filesystem
195
- 4. **Dual transport RPC** — DevTools Kit RPC with HTTP fallback for compatibility
296
+ **What an agent can see:** `get_state_timeline` and `get_reactive_scope` return values of `$state` in your running app (each timeline value capped, large ones summarised). Treat the token like any credential that grants read access to your app's state in development.
196
297
 
197
- The plugin is **development-only** — it adds zero overhead to production builds.
298
+ The MCP server is **read + measure only** — it never edits files. Editing is left to the agent's own tools (Claude Code's `Edit`/`Write`), which keeps the permission boundary clean and lets `git` own rollback.
198
299
 
199
300
  ## Security model
200
301
 
201
- The DevTools backend exposes a small set of dev-only HTTP endpoints (`/__svelte-devtools/rpc`, `/__svelte-devtools/asset`) to drive the panel UI. Some of those endpoints can read files from disk or open them in your editor, so we treat them as authenticated even though the dev server is normally only reachable from `localhost`.
302
+ Some RPCs read files from disk or open them in your editor, so the DevTools backend is authenticated even though the dev server is normally only reachable from `localhost`.
202
303
 
203
- - **Per-process random token.** On every dev-server start the plugin generates a fresh UUID and injects it into the DevTools UI HTML as a `<meta>` tag. The HTTP fallback RPC and the asset middleware require that token in the `x-svelte-devtools-token` header, plus a same-origin `Origin`/`Referer`. Cross-origin requests, requests with the wrong token, and requests without `Content-Type: application/json` are rejected with `403` / `415`. Bodies above 1 MB are rejected with `413`.
204
- - **Path sandbox.** `inspect-file`, `open-in-editor`, and `open-reactive-in-editor` resolve their input through `fs.realpath()` and refuse anything outside the project root, so a hostile RPC caller cannot read `/etc/passwd` or your `~/.ssh/` files even if they get past the token check. Symlinks inside the project are followed normally.
205
- - **SSRF defenses.** Outbound fetches from `send-api-request` and the OG-preview RPC block `127.0.0.0/8` / `10.0.0.0/8` / `172.16.0.0/12` / `192.168.0.0/16` / `169.254.0.0/16` / IPv6 loopback / `localhost` / `*.local` / `*.internal`.
206
- - **Dev-only by construction.** Both the runtime virtual module and the `svelte/internal/client` wrapper are gated on `config.command === 'serve'` and never resolve during a production build, so none of this surface ships to end users.
304
+ - **Devframe auth gate.** Every RPC connection must be trusted first: a browser exchanges a single-use 6-digit code (printed in the dev-server terminal, valid for 5 minutes) for a bearer token stored in that browser. Inside Vite DevTools the hub's own gate covers the tool.
305
+ - **Origin checks.** The RPC WebSocket only accepts loopback origins (plus the dev server's own LAN origins when you use `--host`), which blocks cross-site pages and DNS-rebinding attacks.
306
+ - **Schema-validated arguments.** RPC inputs are validated with zod schemas before any handler runs.
307
+ - **Path sandbox.** `inspect-file`, `open-in-editor`, and `open-reactive-in-editor` resolve their input through `fs.realpath()` and refuse anything outside the project root. Symlinks inside the project are followed normally.
308
+ - **SSRF defenses.** Outbound fetches from the API playground and OG preview block private / loopback / link-local IPv4 and IPv6 targets (also when a hostname _resolves_ to one), `localhost`, `*.local` and `*.internal`, and never follow redirects. The dev server's own origins are the only local targets allowed, so the playground can call your app's endpoints.
309
+ - **Dev-only by construction.** Nothing is registered during `vite build`.
207
310
 
208
- If you bind your dev server to `0.0.0.0` (e.g. `vite --host`), the same-origin check still blocks LAN browsers from invoking RPC, but anyone on the LAN can still see the panel UI itself. Treat that as you would any unauthenticated dev tool: don't run it on networks you don't trust.
311
+ Trusted-browser tokens are stored in your home directory (`~/.svelte-devtools/devframe/auth.json`) and shared across projects. The SSRF check resolves hostnames before fetching, so a resolver that changes its answer between that check and the request (DNS rebinding) is not fully excluded. If you bind your dev server to a non-loopback address, only use it on networks you trust.
209
312
 
210
313
  ## Contributing
211
314
 
@@ -0,0 +1,16 @@
1
+ import { OutboundUrlOptions } from '../security.js';
2
+ import { ApiEndpoint, ApiResponse, RouteInfo } from '../types.js';
3
+ /** List `+server` endpoints and the HTTP methods they export. */
4
+ export declare function analyzeApiEndpoints(routes: RouteInfo[]): ApiEndpoint[];
5
+ export interface ApiRequestInput {
6
+ url: string;
7
+ method: string;
8
+ /** JSON-encoded header object (as typed by the user). */
9
+ headers: string;
10
+ body: string;
11
+ }
12
+ /**
13
+ * Send a request to a public URL or the dev server itself (SSRF-guarded) and
14
+ * report the response. Redirects are returned, never followed.
15
+ */
16
+ export declare function sendApiRequest(input: ApiRequestInput, options?: OutboundUrlOptions): Promise<ApiResponse>;
@@ -1,3 +1,8 @@
1
1
  import { AssetInfo } from '../types.js';
2
2
  export declare const MIME_TYPES: Record<string, string>;
3
- export declare function analyzeAssets(staticDir: string): AssetInfo[];
3
+ /**
4
+ * List files in the static directory. `publicBase` is the dev server's
5
+ * public base (Vite `base`); static files are served under it, so each asset
6
+ * gets a previewable `url` without a dedicated file-serving endpoint.
7
+ */
8
+ export declare function analyzeAssets(staticDir: string, publicBase?: string): AssetInfo[];
@@ -0,0 +1,3 @@
1
+ import { BuildAnalysis } from '../types.js';
2
+ /** Scan common SvelteKit build output directories for emitted web assets. */
3
+ export declare function analyzeBuild(root: string): BuildAnalysis;
@@ -0,0 +1,13 @@
1
+ import { ModuleGraphData } from '../types.js';
2
+ /** Minimal shape of a Vite module-graph node that we read. */
3
+ export interface GraphModuleLike {
4
+ file?: string | null;
5
+ importedModules: Iterable<{
6
+ file?: string | null;
7
+ }>;
8
+ }
9
+ /**
10
+ * Build the project-local module graph (node_modules and files outside
11
+ * `root` excluded) and detect import cycles.
12
+ */
13
+ export declare function buildModuleGraph(root: string, allModules: GraphModuleLike[]): ModuleGraphData;
@@ -0,0 +1,7 @@
1
+ import { OutboundUrlOptions } from '../security.js';
2
+ import { OGPreview } from '../types.js';
3
+ /**
4
+ * Fetch a public URL (or a page of the dev server itself) and report its Open
5
+ * Graph tags + missing-tag issues. Redirects are not followed.
6
+ */
7
+ export declare function getOGPreview(url: string, options?: OutboundUrlOptions): Promise<OGPreview>;
@@ -0,0 +1,6 @@
1
+ /**
2
+ * Find the 1-based line of a reactive declaration in a component source:
3
+ * the first `$effect(` / `$effect.pre(` for effects, otherwise the
4
+ * `let|const|var <name>` declaration. Returns 0 when not found.
5
+ */
6
+ export declare function findReactiveLine(source: string, name: string, type: string): number;
@@ -0,0 +1,3 @@
1
+ import{A as e,At as t,Dt as n,F as r,I as i,J as a,Mt as o,N as s,Nt as c,O as l,Ot as u,P as d,Pt as ee,St as f,T as p,Tt as m,U as h,X as g,Y as te,a as _,at as v,bt as y,ct as b,dt as x,ft as S,gt as C,it as w,jt as T,kt as ne,mt as E,ot as D,pt as re,q as ie,st as O,tt as k,ut as A,wt as j,xt as M,yt as N}from"./index-BzMw8R8l.js";import{i as ae,o as oe}from"./format-CW_NXiBg.js";import{n as se,t as P}from"./Badge-CBVv8IFU.js";import{t as ce}from"./SplitView-B8lYXXEm.js";import{t as F}from"./VirtualList-BvOBTnYJ.js";import{t as I}from"./SearchField-eocQu1eB.js";var L=b(`<span class="methods svelte-1wcbixy"><!> <!></span> <span class="truncate mono path svelte-1wcbixy"><!></span>`,1),le=b(`<option> </option>`),ue=b(`<span class="err-dot svelte-1wcbixy"></span>`),de=b(`<button class="file mono svelte-1wcbixy" title="Open handler in editor"> </button>`),fe=b(`<textarea class="input editor svelte-1wcbixy" aria-label="Request body" spellcheck="false"></textarea>`),pe=b(`<p class="hint svelte-1wcbixy"> </p>`),me=b(`<p class="hint error svelte-1wcbixy"> </p>`),he=b(`<textarea class="input editor svelte-1wcbixy" aria-label="Request headers as JSON" spellcheck="false"></textarea> <!>`,1),ge=b(`<p class="mono"> </p>`),_e=b(`<dt class="mono"> </dt><dd class="mono"> </dd>`,1),ve=b(`<header class="res-head svelte-1wcbixy"><!> <span class="num muted"> </span> <span class="num muted"> </span> <details class="hdrs svelte-1wcbixy"><summary class="svelte-1wcbixy"> </summary> <dl class="kv svelte-1wcbixy"></dl></details></header> <pre class="body mono svelte-1wcbixy"> </pre>`,1),ye=b(`<p>Pick an endpoint on the left or type any URL. <kbd class="svelte-1wcbixy">⌘</kbd> <kbd class="svelte-1wcbixy">↵</kbd> sends.</p>`),be=b(`<div class="client svelte-1wcbixy"><form class="bar svelte-1wcbixy"><select class="select method svelte-1wcbixy" aria-label="HTTP method"></select> <input class="input url mono svelte-1wcbixy" placeholder="http://localhost:5173/api/…" aria-label="Request URL" spellcheck="false"/> <!></form> <div class="tabs svelte-1wcbixy" role="tablist" aria-label="Request parts"><button role="tab" class="svelte-1wcbixy">Body</button> <button role="tab" class="svelte-1wcbixy">Headers <!></button> <!></div> <div class="req svelte-1wcbixy" role="tabpanel"><!></div> <section class="res svelte-1wcbixy" aria-label="Response" aria-live="polite"><!></section></div>`);function R(b,x){t(x,!0);let R=i(_,{initial:[]}),xe=[`GET`,`POST`,`PUT`,`PATCH`,`DELETE`,`HEAD`,`OPTIONS`],z=e=>e===`GET`?`blue`:e===`POST`?`green`:e===`DELETE`?`red`:e===`HEAD`||e===`OPTIONS`?`neutral`:`yellow`,B=m(``),V=m(null),H=m(`GET`),U=m(``),W=m(`{
2
+
3
+ }`),G=m(``),K=m(`body`),q=m(!1),J=m(null),Y=m(null),X=n(()=>{let e=s(E(B));return e?R.data.filter(t=>e(t.path,t.route,t.methods.join(` `))):R.data}),Z=n(()=>E(V)?R.data.find(e=>e.route===E(V))??null:null),Q=n(()=>{if(!E(W).trim())return null;try{let e=JSON.parse(E(W));return e&&typeof e==`object`&&!Array.isArray(e)?null:`Headers must be a JSON object`}catch(e){return e.message}}),Se=n(()=>E(H)!==`GET`&&E(H)!==`HEAD`),Ce=n(()=>{if(!E(J)?.body)return``;if((Object.entries(E(J).headers).find(([e])=>e.toLowerCase()===`content-type`)?.[1]??``).includes(`json`)||/^\s*[[{]/.test(E(J).body))try{return JSON.stringify(JSON.parse(E(J).body),null,2)}catch{}return E(J).body});function we(e){j(V,e.route,!0),j(H,e.methods[0]??`GET`,!0),j(U,new URL(e.path,location.origin).href,!0),j(J,null),j(Y,null)}async function $(){if(!(!E(U)||E(Q)||E(q))){j(q,!0),j(Y,null);try{j(J,await l(E(U),E(H),E(W).trim()||`{}`,E(Se)?E(G):``),!0)}catch(e){j(J,null),j(Y,e instanceof Error?e.message:String(e),!0)}finally{j(q,!1)}}}function Te(e){(e.metaKey||e.ctrlKey)&&e.key===`Enter`&&(e.preventDefault(),$())}function Ee(e){return e>=200&&e<300?`green`:e>=300&&e<400?`yellow`:e>=400?`red`:`neutral`}se(b,{title:`API`,get count(){return R.data.length},toolbar:e=>{I(e,{placeholder:`Filter endpoints…`,get count(){return E(X).length},get value(){return E(B)},set value(e){j(B,e,!0)}})},actions:e=>{d(e,{icon:`refresh`,variant:`ghost`,label:`Rescan endpoints`,get disabled(){return R.busy},onclick:()=>R.refresh()})},children:(t,i)=>{ce(t,{id:`api`,side:`start`,initial:300,min:200,aside:t=>{F(t,{get items(){return E(X)},getKey:e=>e.route,label:`API endpoints`,onselect:we,get selected(){return E(V)},set selected(e){j(V,e,!0)},row:(t,r=c)=>{var i=L(),a=y(i),s=N(a);k(s,16,()=>r().methods.slice(0,3),e=>e,(e,t)=>{{let r=n(()=>z(t));P(e,{get tone(){return E(r)},children:(e,n)=>{T();var r=A();C(()=>v(r,t)),D(e,r)},$$slots:{default:!0}})}});var l=f(s,2),u=e=>{P(e,{children:(e,t)=>{T();var n=A();C(()=>v(n,`+${r().methods.length-3}`)),D(e,n)},$$slots:{default:!0}})};w(l,e=>{r().methods.length>3&&e(u)}),o(a);var d=f(a,2),ee=N(d);e(ee,{get text(){return r().path},get query(){return E(B)}}),o(d),D(t,i)},empty:e=>{var t=O(),i=y(t),a=e=>{r(e,{title:`Scanning +server files…`})},o=e=>{{let t=n(()=>R.data.length?`No endpoints match`:`No +server endpoints`);r(e,{icon:`api`,get title(){return E(t)}})}};w(i,e=>{R.loading?e(a):e(o,-1)}),D(e,t)},$$slots:{row:!0,empty:!0}})},children:(e,t)=>{var i=be(),s=N(i),c=N(s);k(c,20,()=>E(Z)?.methods.length?E(Z).methods:xe,e=>e,(e,t)=>{var n=le(),r=M(n,!0),i={};C(()=>{v(r,t),i!==(i=t)&&(n.__value=i)}),D(e,n)}),o(c),g(c);var l=f(c,2);ie(l);var m=f(l,2);{let e=n(()=>!E(U)||!!E(Q)||E(q));d(m,{type:`submit`,variant:`primary`,icon:`send`,get disabled(){return E(e)},title:`Send (⌘↵)`,children:(e,t)=>{T();var n=A();C(()=>v(n,E(q)?`Sending…`:`Send`)),D(e,n)},$$slots:{default:!0}})}o(s);var _=f(s,2),b=N(_),x=f(b,2),ne=f(N(x)),se=e=>{var t=ue();C(()=>a(t,`title`,E(Q))),D(e,t)};w(ne,e=>{E(Q)&&e(se)}),o(x);var ce=f(x,2),F=e=>{var t=de(),n=M(t,!0);C(()=>v(n,E(Z).file)),S(`click`,t,()=>p(E(Z).file).catch(()=>{})),D(e,t)};w(ce,e=>{E(Z)&&e(F)}),o(_);var I=f(_,2),L=N(I),R=e=>{var t=O(),n=y(t),r=e=>{var t=fe();u(t),a(t,`placeholder`,`{ "name": "value" }`),h(t,()=>E(G),e=>j(G,e)),D(e,t)},i=e=>{var t=pe(),n=M(t);C(()=>v(n,`${E(H)??``} requests have no body.`)),D(e,t)};w(n,e=>{E(Se)?e(r):e(i,-1)}),D(e,t)},z=e=>{var t=he(),n=y(t);u(n);var r=f(n,2),i=e=>{var t=me(),n=M(t,!0);C(()=>v(n,E(Q))),D(e,t)};w(r,e=>{E(Q)&&e(i)}),C(()=>a(n,`aria-invalid`,!!E(Q))),h(n,()=>E(W),e=>j(W,e)),D(e,t)};w(L,e=>{E(K)===`body`?e(R):e(z,-1)}),o(I);var B=f(I,2),V=N(B),X=e=>{r(e,{icon:`errors`,tone:`error`,title:`Request failed`,children:(e,t)=>{var n=ge(),r=M(n,!0);C(()=>v(r,E(Y))),D(e,n)},$$slots:{default:!0}})},we=e=>{var t=ve(),r=y(t),i=N(r);{let e=n(()=>Ee(E(J).status));P(i,{get tone(){return E(e)},children:(e,t)=>{T();var n=A();C(()=>v(n,`${E(J).status??``} ${E(J).statusText??``}`)),D(e,n)},$$slots:{default:!0}})}var a=f(i,2),s=M(a,!0),c=f(a,2),l=M(c,!0),u=f(c,2),d=N(u),p=M(d),m=f(d,2);k(m,21,()=>Object.entries(E(J).headers),([e,t])=>e,(e,t)=>{var r=n(()=>ee(E(t),2));let i=()=>E(r)[0],a=()=>E(r)[1];var o=_e(),s=y(o),c=M(s,!0),l=f(s),u=M(l,!0);C(()=>{v(c,i()),v(u,a())}),D(e,o)}),o(m),o(u),o(r);var h=f(r,2),g=M(h,!0);C((e,t,n)=>{v(s,e),v(l,t),v(p,`${n??``} headers`),v(g,E(Ce)||`(empty body)`)},[()=>oe(E(J).duration),()=>ae(new Blob([E(J).body]).size),()=>Object.keys(E(J).headers).length]),D(e,t)},De=e=>{r(e,{icon:`send`,title:`Send a request`,children:(e,t)=>{var n=ye();D(e,n)},$$slots:{default:!0}})};w(V,e=>{E(Y)?e(X):E(J)?e(we,1):e(De,-1)}),o(B),o(i),C(()=>{a(b,`aria-selected`,E(K)===`body`),a(x,`aria-selected`,E(K)===`headers`)}),S(`keydown`,i,Te),re(`submit`,s,e=>{e.preventDefault(),$()}),te(c,()=>E(H),e=>j(H,e)),h(l,()=>E(U),e=>j(U,e)),S(`click`,b,()=>j(K,`body`)),S(`click`,x,()=>j(K,`headers`)),D(e,i)},$$slots:{aside:!0,default:!0}})},$$slots:{toolbar:!0,actions:!0,default:!0}}),ne()}x([`keydown`,`click`]);export{R as default};
@@ -0,0 +1 @@
1
+ .client.svelte-1wcbixy{flex-direction:column;height:100%;min-height:0;display:flex}.bar.svelte-1wcbixy{gap:6px;padding:10px 12px;display:flex}.method.svelte-1wcbixy{width:96px;font-weight:600}.url.svelte-1wcbixy{flex:1}.tabs.svelte-1wcbixy{border-bottom:1px solid var(--border);align-items:center;gap:2px;padding:0 12px;display:flex}.tabs.svelte-1wcbixy button:where(.svelte-1wcbixy){height:30px;color:var(--fg-muted);font-size:var(--fs-sm);background:0 0;border:0;align-items:center;gap:6px;padding:0 10px;display:inline-flex;position:relative}.tabs.svelte-1wcbixy [aria-selected=true]:where(.svelte-1wcbixy){color:var(--fg);box-shadow:inset 0 -2px 0 var(--accent)}.tabs.svelte-1wcbixy .file:where(.svelte-1wcbixy){font-size:var(--fs-xs);color:var(--fg-faint);margin-left:auto}.tabs.svelte-1wcbixy .file:where(.svelte-1wcbixy):hover{color:var(--accent-fg)}.err-dot.svelte-1wcbixy{background:var(--red);border-radius:50%;width:6px;height:6px}.req.svelte-1wcbixy{padding:10px 12px}.editor.svelte-1wcbixy{width:100%;height:110px;min-height:84px}.hint.svelte-1wcbixy{color:var(--fg-faint);font-size:var(--fs-sm);margin:4px 0 0}.hint.error.svelte-1wcbixy{color:var(--red)}.res.svelte-1wcbixy{border-top:1px solid var(--border);flex-direction:column;flex:1;min-height:0;display:flex}.res-head.svelte-1wcbixy{font-size:var(--fs-xs);flex-wrap:wrap;align-items:center;gap:10px;padding:8px 12px;display:flex}.hdrs.svelte-1wcbixy{color:var(--fg-muted);margin-left:auto}.hdrs[open].svelte-1wcbixy{flex-basis:100%;margin-left:0}.hdrs.svelte-1wcbixy summary:where(.svelte-1wcbixy){cursor:pointer}.hdrs.svelte-1wcbixy .kv:where(.svelte-1wcbixy){padding:6px 0 0}.body.svelte-1wcbixy{background:var(--bg-inset);border-top:1px solid var(--border);font-size:var(--fs-xs);white-space:pre-wrap;overflow-wrap:anywhere;flex:1;margin:0;padding:10px 12px;line-height:1.55;overflow:auto}.methods.svelte-1wcbixy{gap:2px;display:inline-flex}.path.svelte-1wcbixy{font-size:var(--fs-xs)}kbd.svelte-1wcbixy{border:1px solid var(--border-strong);font-size:var(--fs-2xs);border-radius:3px;padding:0 4px}
@@ -0,0 +1 @@
1
+ import{A as e,At as t,Ct as n,Dt as r,F as i,I as a,J as o,L as s,Mt as c,N as l,Nt as u,P as d,St as f,T as p,Tt as m,Z as h,at as g,bt as _,ct as v,gt as y,it as b,jt as x,kt as S,mt as C,o as w,ot as T,st as E,ut as D,wt as O,xt as k,yt as A}from"./index-BzMw8R8l.js";import{i as j}from"./format-CW_NXiBg.js";import{n as M,t as N}from"./Badge-CBVv8IFU.js";import{t as P}from"./SplitView-B8lYXXEm.js";import{t as F}from"./SearchField-eocQu1eB.js";import{t as I}from"./DataTable-C6-tmcTQ.js";import{t as L}from"./Inspector-DGmAzhki.js";import{t as R}from"./Segmented-JGNuI5EZ.js";var z=v(`<!> <!>`,1),B=v(`<span class="total num svelte-qp140w" title="Total size of shown assets"> </span> <!>`,1),V=v(`<div class="preview svelte-qp140w"><img loading="lazy" class="svelte-qp140w"/></div>`),H=v(`<!> <h3 class="section-title">Details</h3> <dl class="kv"><dt>Public URL</dt><dd class="mono"> </dd> <dt>Size</dt><dd class="num"> <span class="faint"> </span></dd> <dt>Modified</dt><dd> </dd> <dt>Disk path</dt><dd class="mono faint"> </dd></dl>`,1),ee=v(`<span class="muted truncate mono small svelte-qp140w"> </span>`),te=v(`<span class="end faint num small svelte-qp140w"> </span>`),ne=v(`<span class="file svelte-qp140w"><!> <span class="truncate"><!></span></span> <!> <!> <span class="size end svelte-qp140w"><span class="bar svelte-qp140w"></span> <span class="num"> </span></span>`,1),re=v(`<p class="mono"> </p>`);function U(v,U){t(U,!0);let W=a(w,{initial:[]});function G(e){let t=e.split(`/`)[0];return t===`image`||t===`font`||t===`video`||t===`audio`||t===`text`?t:`other`}let ie={image:`assets`,font:`file`,video:`play`,audio:`play`,text:`file`,other:`file`},K=m(``),q=m(`all`),J=m(n({id:`size`,desc:!0})),Y=m(null),X=r(()=>{let e=new Map;for(let t of W.data)e.set(G(t.type),(e.get(G(t.type))??0)+1);return e}),ae=r(()=>[{value:`all`,label:`All`,count:W.data.length},...[`image`,`font`,`video`,`audio`,`text`,`other`].filter(e=>C(X).get(e)).map(e=>({value:e,label:e[0].toUpperCase()+e.slice(1),count:C(X).get(e)}))]),Z=r(()=>{let e=l(C(K));return W.data.filter(t=>(C(q)===`all`||G(t.type)===C(q))&&(!e||e(t.relativePath,t.type)))}),oe=r(()=>C(Z).reduce((e,t)=>e+t.size,0)),se=r(()=>W.data.reduce((e,t)=>Math.max(e,t.size),1)),Q=r(()=>C(Y)?W.data.find(e=>e.path===C(Y))??null:null),ce=[{id:`name`,label:`File`,width:`minmax(0, 1fr)`,sort:(e,t)=>e.relativePath.localeCompare(t.relativePath)},{id:`type`,label:`Type`,width:`120px`,minWidth:640,sort:(e,t)=>e.type.localeCompare(t.type)},{id:`mtime`,label:`Modified`,width:`96px`,align:`end`,minWidth:760,descFirst:!0,sort:(e,t)=>e.mtime-t.mtime},{id:`size`,label:`Size`,width:`140px`,align:`end`,descFirst:!0,sort:(e,t)=>e.size-t.size}];function $(e){return e.url||`/`+e.relativePath}M(v,{title:`Assets`,get count(){return W.data.length},toolbar:e=>{var t=z(),n=_(t);R(n,{label:`Asset type`,get options(){return C(ae)},get value(){return C(q)},set value(e){O(q,e,!0)}});var r=f(n,2);F(r,{placeholder:`Filter assets…`,get count(){return C(Z).length},get value(){return C(K)},set value(e){O(K,e,!0)}}),T(e,t)},actions:e=>{var t=B(),n=_(t),r=k(n,!0),i=f(n,2);d(i,{icon:`refresh`,variant:`ghost`,label:`Rescan static directory`,get disabled(){return W.busy},onclick:()=>W.refresh()}),y(e=>g(r,e),[()=>j(C(oe))]),T(e,t)},children:(t,n)=>{{let n=e=>{var t=E(),n=_(t),i=e=>{L(e,{get title(){return C(Q).name},get subtitle(){return C(Q).relativePath},onclose:()=>O(Y,null),badges:e=>{var t=z(),n=_(t);N(n,{children:(e,t)=>{x();var n=D();y(()=>g(n,C(Q).type)),T(e,n)},$$slots:{default:!0}});var i=f(n,2);{let e=r(()=>C(Q).size>5e5?`yellow`:`neutral`);N(i,{get tone(){return C(e)},children:(e,t)=>{x();var n=D();y(e=>g(n,e),[()=>j(C(Q).size)]),T(e,n)},$$slots:{default:!0}})}T(e,t)},actions:e=>{var t=z(),n=_(t);d(n,{icon:`external`,onclick:()=>window.open($(C(Q)),`_blank`,`noopener`),children:(e,t)=>{x();var n=D(`Open URL`);T(e,n)},$$slots:{default:!0}});var r=f(n,2);d(r,{icon:`editor`,onclick:()=>p(C(Q).path).catch(()=>{}),children:(e,t)=>{x();var n=D(`Reveal`);T(e,n)},$$slots:{default:!0}}),T(e,t)},children:(e,t)=>{var n=H(),i=_(n),a=e=>{var t=V(),n=k(t);y(e=>{o(n,`src`,e),o(n,`alt`,C(Q).name)},[()=>$(C(Q))]),T(e,t)},s=r(()=>C(Q).type.startsWith(`image/`));b(i,e=>{C(s)&&e(a)});var l=f(i,4),u=f(A(l)),d=k(u,!0),p=f(u,3),m=A(p),h=f(m),v=k(h);c(p);var x=f(p,3),S=k(x,!0),w=f(x,3),E=k(w,!0);c(l),y((e,t,n,r)=>{g(d,e),g(m,`${t??``} `),g(v,`(${n??``} bytes)`),g(S,r),g(E,C(Q).path)},[()=>$(C(Q)),()=>j(C(Q).size),()=>C(Q).size.toLocaleString(),()=>new Date(C(Q).mtime).toLocaleString()]),T(e,n)},$$slots:{badges:!0,actions:!0,default:!0}})};b(n,e=>{C(Q)&&e(i)}),T(e,t)},a=r(()=>!!C(Q));P(t,{id:`assets`,get open(){return C(a)},aside:n,children:(t,n)=>{I(t,{get items(){return C(Z)},get columns(){return ce},getKey:e=>e.path,label:`Static assets`,onactivate:e=>p(e.path).catch(()=>{}),get sort(){return C(J)},set sort(e){O(J,e,!0)},get selected(){return C(Y)},set selected(e){O(Y,e,!0)},row:(t,n=u,i)=>{let a=()=>(i?.()).visible;var o=ne(),l=_(o),d=A(l);{let e=r(()=>ie[G(n().type)]);s(d,{get name(){return C(e)},size:14})}var p=f(d,2),m=A(p);e(m,{get text(){return n().relativePath},get query(){return C(K)}}),c(p),c(l);var v=f(l,2),x=e=>{var t=ee(),r=k(t,!0);y(()=>g(r,n().type)),T(e,t)},S=r(()=>a().has(`type`));b(v,e=>{C(S)&&e(x)});var w=f(v,2),E=e=>{var t=te(),r=k(t,!0);y(e=>g(r,e),[()=>new Date(n().mtime).toLocaleDateString()]),T(e,t)},D=r(()=>a().has(`mtime`));b(w,e=>{C(D)&&e(E)});var O=f(w,2),M=A(O);let N;var P=f(M,2),F=k(P,!0);c(O),y((e,t)=>{N=h(M,``,N,{width:e}),g(F,t)},[()=>`${Math.max(2,n().size/C(se)*56)}px`,()=>j(n().size)]),T(t,o)},empty:e=>{var t=E(),n=_(t),a=e=>{i(e,{title:`Scanning static directory…`})},o=e=>{i(e,{icon:`errors`,tone:`error`,title:`Could not read assets`,children:(e,t)=>{var n=re(),r=k(n,!0);y(()=>g(r,W.error)),T(e,n)},$$slots:{default:!0}})},s=e=>{{let t=r(()=>W.data.length?`No assets match`:`No static assets`);i(e,{icon:`assets`,get title(){return C(t)}})}};b(n,e=>{W.loading?e(a):W.error?e(o,1):e(s,-1)}),T(e,t)},$$slots:{row:!0,empty:!0}})},$$slots:{aside:!0,default:!0}})}},$$slots:{toolbar:!0,actions:!0,default:!0}}),S()}export{U as default};
@@ -0,0 +1 @@
1
+ .file.svelte-qp140w{min-width:0;color:var(--fg);align-items:center;gap:8px;display:flex}.file.svelte-qp140w .icon{color:var(--fg-faint)}.small.svelte-qp140w{font-size:var(--fs-xs)}.size.svelte-qp140w{justify-content:flex-end;align-items:center;gap:8px;display:flex}.bar.svelte-qp140w{background:var(--accent);opacity:.55;border-radius:2px;height:4px}.total.svelte-qp140w{color:var(--fg-muted);font-size:var(--fs-xs);margin-right:4px}.preview.svelte-qp140w{border:1px solid var(--border);border-radius:var(--radius-lg);background-color:var(--bg-inset);background-image:linear-gradient(45deg, var(--bg-active) 25%, transparent 25%, transparent 75%, var(--bg-active) 75%), linear-gradient(45deg, var(--bg-active) 25%, transparent 25%, transparent 75%, var(--bg-active) 75%);background-position:0 0,8px 8px;background-size:16px 16px;place-items:center;min-height:120px;margin:12px 14px 0;padding:12px;display:grid}.preview.svelte-qp140w img:where(.svelte-qp140w){object-fit:contain;max-width:100%;max-height:260px}
@@ -0,0 +1 @@
1
+ .panel.svelte-6jyhgm{flex-direction:column;min-width:0;height:100%;display:flex}.header.svelte-6jyhgm{min-height:var(--header-h);border-bottom:1px solid var(--border);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:6px 10px;padding:8px 12px 8px 16px;display:flex}.title.svelte-6jyhgm{font-size:var(--fs-md);letter-spacing:-.005em;white-space:nowrap;align-items:baseline;gap:8px;margin:0 6px 0 0;font-weight:600;display:flex}.count.svelte-6jyhgm{font-size:var(--fs-xs);color:var(--fg-faint);font-weight:500}.toolbar.svelte-6jyhgm{flex-wrap:wrap;flex:260px;align-items:center;gap:6px;min-width:0;display:flex}.actions.svelte-6jyhgm{align-items:center;gap:4px;margin-left:auto;display:flex}.body.svelte-6jyhgm{flex:1;min-height:0;position:relative}.body.scroll.svelte-6jyhgm{overflow:auto}.badge.svelte-1fmrh5r{border-radius:var(--radius-sm);height:17px;font-size:var(--fs-2xs);letter-spacing:.01em;white-space:nowrap;font-variant-numeric:tabular-nums;flex-shrink:0;align-items:center;gap:3px;padding:0 6px;font-weight:600;line-height:1;display:inline-flex}.neutral.svelte-1fmrh5r{background:var(--bg-active);color:var(--fg-muted)}.accent.svelte-1fmrh5r{background:var(--bg-selected);color:var(--accent-fg)}.green.svelte-1fmrh5r{background:var(--green-bg);color:var(--green)}.yellow.svelte-1fmrh5r{background:var(--yellow-bg);color:var(--yellow)}.red.svelte-1fmrh5r{background:var(--red-bg);color:var(--red)}.blue.svelte-1fmrh5r{background:var(--blue-bg);color:var(--blue)}.purple.svelte-1fmrh5r{background:var(--purple-bg);color:var(--purple)}.cyan.svelte-1fmrh5r{background:var(--cyan-bg);color:var(--cyan)}
@@ -0,0 +1 @@
1
+ import{$ as e,B as t,J as n,Mt as r,Q as i,St as a,at as o,ct as s,gt as c,it as l,ot as u,xt as d,yt as f}from"./index-BzMw8R8l.js";var p=s(`<span class="count num svelte-6jyhgm"> </span>`),m=s(`<div class="toolbar svelte-6jyhgm"><!></div>`),h=s(`<div class="actions svelte-6jyhgm"><!></div>`),g=s(`<section class="panel svelte-6jyhgm"><header class="header svelte-6jyhgm"><h1 class="title svelte-6jyhgm"> <!></h1> <!> <!></header> <div><!></div></section>`);function _(s,_){let v=t(_,`count`,3,null),y=t(_,`scroll`,3,!1);var b=g(),x=f(b),S=f(x),C=f(S),w=a(C),T=e=>{var t=p(),n=d(t,!0);c(()=>o(n,v())),u(e,t)};l(w,e=>{v()!=null&&e(T)}),r(S);var E=a(S,2),D=t=>{var n=m(),i=f(n);e(i,()=>_.toolbar),r(n),u(t,n)};l(E,e=>{_.toolbar&&e(D)});var O=a(E,2),k=t=>{var n=h(),i=f(n);e(i,()=>_.actions),r(n),u(t,n)};l(O,e=>{_.actions&&e(k)}),r(x);var A=a(x,2);let j;var M=f(A);e(M,()=>_.children),r(A),r(b),c(()=>{n(b,`aria-label`,_.title),o(C,`${_.title??``} `),j=i(A,1,`body svelte-6jyhgm`,null,j,{scroll:y()})}),u(s,b)}var v=s(`<span><!></span>`);function y(a,o){let s=t(o,`tone`,3,`neutral`);var l=v(),d=f(l);e(d,()=>o.children),r(l),c(()=>{i(l,1,`badge ${s()??``}`,`svelte-1fmrh5r`),n(l,`title`,o.title)}),u(a,l)}export{_ as n,y as t};
@@ -0,0 +1 @@
1
+ import{A as e,At as t,Ct as n,Dt as r,F as i,I as a,J as o,Mt as s,N as c,Nt as l,P as u,Q as d,St as f,Tt as p,Z as m,at as h,bt as g,ct as _,gt as v,it as y,jt as b,kt as x,mt as S,nt as C,ot as w,s as T,st as E,tt as D,ut as O,wt as k,xt as A,yt as j}from"./index-BzMw8R8l.js";import{i as M,t as ee}from"./format-CW_NXiBg.js";import{n as N,t as P}from"./Badge-CBVv8IFU.js";import{t as F}from"./SplitView-B8lYXXEm.js";import{t as I}from"./SearchField-eocQu1eB.js";import{t as L}from"./DataTable-C6-tmcTQ.js";import{t as R}from"./Inspector-DGmAzhki.js";import{t as z}from"./Segmented-JGNuI5EZ.js";var B=_(`<!> <!>`,1),te=_(`<span class="stamp svelte-1fwnyq9"> </span>`),ne=_(`<p>Run <code>vite build</code> (or <code>pnpm build</code>) to produce chunks, then refresh.</p> <!>`,1),re=_(`<span></span>`),ie=_(`<span class="svelte-1fwnyq9"><i></i> <span class="num muted svelte-1fwnyq9"> </span></span>`),ae=_(`<!> <!> <!>`,1),oe=_(`<li class="mono truncate svelte-1fwnyq9"><!></li>`),se=_(`<h3 class="section-title">Modules <span class="num"> </span></h3> <ul class="mods svelte-1fwnyq9"></ul>`,1),ce=_(`<span class="end num muted"> </span>`),le=_(`<span class="end num faint"> </span>`),ue=_(`<span class="chunk svelte-1fwnyq9"><!> <span class="truncate mono file svelte-1fwnyq9"><!></span> <!></span> <!> <!> <span class="size end svelte-1fwnyq9"><span></span> <span> </span></span>`,1),de=_(`<div class="layout svelte-1fwnyq9"><div class="composition svelte-1fwnyq9" aria-label="Bundle composition"><div class="total svelte-1fwnyq9"><span class="muted">Total</span> <strong class="num svelte-1fwnyq9"> </strong></div> <div class="stack svelte-1fwnyq9" role="img"></div> <div class="legend svelte-1fwnyq9"></div></div> <div class="table svelte-1fwnyq9"><!></div></div>`);function V(_,V){t(V,!0);let H=a(T,{initial:null}),U=p(``),W=p(`all`),G=p(n({id:`size`,desc:!0})),K=p(null),q=e=>e.file.split(`.`).pop()??``,J=e=>q(e)===`js`||q(e)===`mjs`?`js`:q(e)===`css`?`css`:`other`,Y={js:`yellow`,css:`purple`,other:`neutral`},X=r(()=>H.data?.chunks??[]),fe=r(()=>{let e=c(S(U));return S(X).filter(t=>(S(W)===`all`||J(t)===S(W))&&(!e||e(t.file,t.name,...t.modules)))}),Z=r(()=>H.data?.totalSize??0),pe=r(()=>S(X).reduce((e,t)=>Math.max(e,t.size),1)),Q=r(()=>S(K)?S(X).find(e=>e.file===S(K))??null:null),$=r(()=>{let e={js:0,css:0,other:0};for(let t of S(X))e[J(t)]+=t.size;return e}),me=[{id:`file`,label:`Chunk`,width:`minmax(0, 1fr)`,sort:(e,t)=>e.file.localeCompare(t.file)},{id:`modules`,label:`Modules`,width:`72px`,align:`end`,descFirst:!0,minWidth:560,sort:(e,t)=>e.modules.length-t.modules.length},{id:`share`,label:`Share`,width:`64px`,align:`end`,descFirst:!0,minWidth:640,sort:(e,t)=>e.size-t.size},{id:`size`,label:`Size`,width:`150px`,align:`end`,descFirst:!0,sort:(e,t)=>e.size-t.size}];N(_,{title:`Build`,get count(){return S(X).length},toolbar:e=>{var t=B(),n=g(t);{let e=r(()=>[{value:`all`,label:`All`},{value:`js`,label:`JS`,count:S(X).filter(e=>J(e)===`js`).length},{value:`css`,label:`CSS`,count:S(X).filter(e=>J(e)===`css`).length},{value:`other`,label:`Other`,count:S(X).filter(e=>J(e)===`other`).length}]);z(n,{label:`Chunk type`,get options(){return S(e)},get value(){return S(W)},set value(e){k(W,e,!0)}})}var i=f(n,2);I(i,{placeholder:`Filter chunks or modules…`,get count(){return S(fe).length},get value(){return S(U)},set value(e){k(U,e,!0)}}),w(e,t)},actions:e=>{var t=B(),n=g(t),r=e=>{var t=te(),n=A(t);v(e=>h(n,`built ${e??``}`),[()=>new Date(H.data.timestamp).toLocaleString()]),w(e,t)};y(n,e=>{H.data?.timestamp&&e(r)});var i=f(n,2);u(i,{icon:`refresh`,variant:`ghost`,label:`Re-read build output`,get disabled(){return H.busy},onclick:()=>H.refresh()}),w(e,t)},children:(t,n)=>{var a=E(),c=g(a),p=e=>{i(e,{icon:`build`,title:`No build output found`,children:(e,t)=>{var n=ne(),r=f(g(n),2);u(r,{icon:`refresh`,onclick:()=>H.refresh(),children:(e,t)=>{b();var n=O(`Refresh`);w(e,n)},$$slots:{default:!0}}),w(e,n)},$$slots:{default:!0}})},_=t=>{var n=de(),a=j(n),c=j(a),u=f(j(c),2),p=A(u,!0);s(c);var _=f(c,2);D(_,20,()=>[`js`,`css`,`other`],e=>e,(e,t)=>{var n=E(),r=g(n),i=e=>{var n=re();let r;v(e=>{d(n,1,`seg ${t??``}`,`svelte-1fwnyq9`),o(n,`title`,`${t??``}: ${e??``}`),r=m(n,``,r,{"flex-grow":S($)[t]})},[()=>M(S($)[t])]),w(e,n)};y(r,e=>{S($)[t]&&e(i)}),w(e,n)}),s(_);var x=f(_,2);D(x,20,()=>[`js`,`css`,`other`],e=>e,(e,t)=>{var n=ie(),r=j(n),i=f(r),a=f(i),o=A(a,!0);s(n),v((e,n)=>{d(r,1,`dot ${t??``}`,`svelte-1fwnyq9`),h(i,`${e??``} `),h(o,n)},[()=>t.toUpperCase(),()=>M(S($)[t])]),w(e,n)}),s(x),s(a);var T=f(a,2),N=j(T);{let t=t=>{var n=E(),i=g(n),a=t=>{{let n=e=>{var t=ae(),n=g(t);{let e=r(()=>Y[J(S(Q))]);P(n,{get tone(){return S(e)},children:(e,t)=>{b();var n=O();v(e=>h(n,e),[()=>q(S(Q))]),w(e,n)},$$slots:{default:!0}})}var i=f(n,2);P(i,{children:(e,t)=>{b();var n=O();v(e=>h(n,e),[()=>M(S(Q).size)]),w(e,n)},$$slots:{default:!0}});var a=f(i,2),o=e=>{P(e,{tone:`accent`,children:(e,t)=>{b();var n=O(`entry`);w(e,n)},$$slots:{default:!0}})};y(a,e=>{S(Q).isEntry&&e(o)}),w(e,t)},i=r(()=>ee(S(Q).file));R(t,{get title(){return S(i)},get subtitle(){return S(Q).file},onclose:()=>k(K,null),badges:n,children:(t,n)=>{var r=se(),i=g(r),a=f(j(i)),c=A(a,!0);s(i);var l=f(i,2);D(l,21,()=>S(Q).modules.slice(0,1e3),C,(t,n)=>{var r=oe(),i=j(r);e(i,{get text(){return S(n)},get query(){return S(U)}}),s(r),v(()=>o(r,`title`,S(n))),w(t,r)}),s(l),v(()=>h(c,S(Q).modules.length)),w(t,r)},$$slots:{badges:!0,default:!0}})}};y(i,e=>{S(Q)&&e(a)}),w(t,n)},n=r(()=>!!S(Q));F(N,{id:`build`,get open(){return S(n)},aside:t,children:(t,n)=>{L(t,{get items(){return S(fe)},get columns(){return me},getKey:e=>e.file,label:`Build chunks`,get sort(){return S(G)},set sort(e){k(G,e,!0)},get selected(){return S(K)},set selected(e){k(K,e,!0)},row:(t,n=l,i)=>{let a=()=>(i?.()).visible;var o=ue(),c=g(o),u=j(c);{let e=r(()=>Y[J(n())]);P(u,{get tone(){return S(e)},children:(e,t)=>{b();var r=O();v(e=>h(r,e),[()=>q(n())]),w(e,r)},$$slots:{default:!0}})}var p=f(u,2),_=j(p);e(_,{get text(){return n().file},get query(){return S(U)}}),s(p);var x=f(p,2),C=e=>{P(e,{tone:`accent`,children:(e,t)=>{b();var n=O(`entry`);w(e,n)},$$slots:{default:!0}})};y(x,e=>{n().isEntry&&e(C)}),s(c);var T=f(c,2),E=e=>{var t=ce(),r=A(t,!0);v(()=>h(r,n().modules.length)),w(e,t)},D=r(()=>a().has(`modules`));y(T,e=>{S(D)&&e(E)});var k=f(T,2),ee=e=>{var t=le(),r=A(t);v(e=>h(r,`${e??``}%`),[()=>S(Z)?(n().size/S(Z)*100).toFixed(1):0]),w(e,t)},N=r(()=>a().has(`share`));y(k,e=>{S(N)&&e(ee)});var F=f(k,2),I=j(F);let L;var R=f(I,2);let z;var B=A(R,!0);s(F),v((e,t,r)=>{d(I,1,`bar ${e??``}`,`svelte-1fwnyq9`),L=m(I,``,L,{width:t}),z=d(R,1,`num svelte-1fwnyq9`,null,z,{big:n().size>25e4}),h(B,r)},[()=>J(n()),()=>`${Math.max(2,n().size/S(pe)*60)}px`,()=>M(n().size)]),w(t,o)},empty:e=>{{let t=r(()=>H.loading?void 0:`search`),n=r(()=>H.loading?`Reading build output…`:`No chunks match`);i(e,{get icon(){return S(t)},get title(){return S(n)}})}},$$slots:{row:!0,empty:!0}})},$$slots:{aside:!0,default:!0}})}s(T),s(n),v((e,t,n,r)=>{h(p,e),o(_,`aria-label`,`JS ${t??``}, CSS ${n??``}, other ${r??``}`)},[()=>M(S(Z)),()=>M(S($).js),()=>M(S($).css),()=>M(S($).other)]),w(t,n)};y(c,e=>{!H.loading&&S(X).length===0?e(p):e(_,-1)}),w(t,a)},$$slots:{toolbar:!0,actions:!0,default:!0}}),x()}export{V as default};
@@ -0,0 +1 @@
1
+ .layout.svelte-1fwnyq9{flex-direction:column;height:100%;display:flex}.table.svelte-1fwnyq9{border-top:1px solid var(--border);flex:1;min-height:0}.composition.svelte-1fwnyq9{flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 16px;display:flex}.total.svelte-1fwnyq9 strong:where(.svelte-1fwnyq9){font-size:var(--fs-lg)}.stack.svelte-1fwnyq9{border-radius:4px;flex:240px;gap:2px;height:8px;display:flex;overflow:hidden}.seg.svelte-1fwnyq9{flex-basis:0}.legend.svelte-1fwnyq9{font-size:var(--fs-xs);gap:12px;display:flex}.legend.svelte-1fwnyq9 span:where(.svelte-1fwnyq9){align-items:center;gap:5px;display:inline-flex}.dot.svelte-1fwnyq9{border-radius:2px;width:8px;height:8px}.js.svelte-1fwnyq9{background:var(--yellow)}.css.svelte-1fwnyq9{background:var(--purple)}.other.svelte-1fwnyq9{background:var(--fg-faint)}.stamp.svelte-1fwnyq9{color:var(--fg-faint);font-size:var(--fs-xs)}.chunk.svelte-1fwnyq9{align-items:center;gap:8px;min-width:0;display:flex}.file.svelte-1fwnyq9{font-size:var(--fs-xs)}.size.svelte-1fwnyq9{justify-content:flex-end;align-items:center;gap:8px;display:flex}.bar.svelte-1fwnyq9{opacity:.7;border-radius:2px;height:4px}.big.svelte-1fwnyq9{color:var(--yellow)}.mods.svelte-1fwnyq9{font-size:var(--fs-xs);color:var(--fg-muted);margin:0;padding:0 14px;list-style:none}.mods.svelte-1fwnyq9 li:where(.svelte-1fwnyq9){padding:2px 0}
@@ -0,0 +1 @@
1
+ .notice.svelte-52vxjm{border-radius:var(--radius-full);background:var(--yellow-bg);height:22px;color:var(--yellow);font-size:var(--fs-xs);white-space:nowrap;cursor:help;align-items:center;gap:5px;padding:0 8px;display:inline-flex}strong.svelte-52vxjm{font-weight:650}
@@ -0,0 +1 @@
1
+ import{At as e,B as t,Dt as n,J as r,L as i,Mt as a,St as o,at as s,bt as c,ct as l,gt as u,it as d,jt as f,kt as p,mt as m,ot as h,st as g,ut as _,xt as v,yt as y}from"./index-BzMw8R8l.js";var b=l(`of <span class="num"> </span>`,1),x=l(`Showing <!> <strong class="num svelte-52vxjm"> </strong> <!>`,1),S=l(`<!> <span class="num"> </span> dropped`,1),C=l(`<!> <span class="num"> </span> detached`,1),w=l(`<!> stale`,1),T=l(`<span class="notice svelte-52vxjm" role="status"><!> <!> <!> <!> <!></span>`);function E(l,E){e(E,!0);let D=t(E,`noun`,3,`items`),O=t(E,`detached`,3,0),k=t(E,`stale`,3,null),A={"runtime-count":`the app buffer was full before they were sent`,"runtime-bytes":`the app buffer hit its size budget before they were sent`,"server-count":`the dev server buffer was full`,"server-bytes":`the dev server buffer hit its size budget`},j=n(()=>!!E.info?.truncated&&(E.info.total===null||E.info.total>E.info.captured)),M=n(()=>E.info?.dropped?.reduce((e,t)=>e+t.count,0)??0),N=n(()=>[m(j)?E.info.total===null?`The dev server keeps ${E.info.captured.toLocaleString()} ${D()}; more exist in the app (total not reported).`:`The dev server keeps ${E.info.captured.toLocaleString()} ${D()}; ${(E.info.total-E.info.captured).toLocaleString()} more exist in the app.`:``,E.info?.policy?`Policy: ${E.info.policy}.`:``,...(E.info?.dropped??[]).filter(e=>e.count>0).map(e=>`${e.count.toLocaleString()} dropped: ${A[e.reason]??e.reason}.`),E.info?.valueTooLarge?`${E.info.valueTooLarge.toLocaleString()} values were too large to snapshot (shown as a size).`:``,O()?`${O().toLocaleString()} ${D()} are shown as roots because their parent was not captured.`:``,k()?`Stale: ${k()}.`:``].filter(Boolean).join(` `));var P=g(),F=c(P),I=e=>{var t=T(),n=y(t);i(n,{name:`warning`,size:12});var l=o(n,2),p=e=>{var t=x(),n=o(c(t)),r=e=>{var t=_();u(()=>s(t,E.info.policy)),h(e,t)};d(n,e=>{E.info.policy&&e(r)});var i=o(n,2),a=v(i,!0),l=o(i,2),f=e=>{var t=_(`of ?`);h(e,t)},p=e=>{var t=b(),n=o(c(t)),r=v(n,!0);u(e=>s(r,e),[()=>E.info.total.toLocaleString()]),h(e,t)};d(l,e=>{E.info.total===null?e(f):e(p,-1)}),u(e=>s(a,e),[()=>E.info.captured.toLocaleString()]),h(e,t)};d(l,e=>{m(j)&&e(p)});var g=o(l,2),D=e=>{var t=S(),n=c(t),r=e=>{var t=_(`·`);h(e,t)};d(n,e=>{m(j)&&e(r)});var i=o(n,2),a=v(i,!0);f(),u(e=>s(a,e),[()=>m(M).toLocaleString()]),h(e,t)};d(g,e=>{m(M)&&e(D)});var A=o(g,2),P=e=>{var t=C(),n=c(t),r=e=>{var t=_(`·`);h(e,t)};d(n,e=>{(m(j)||m(M))&&e(r)});var i=o(n,2),a=v(i,!0);f(),u(e=>s(a,e),[()=>O().toLocaleString()]),h(e,t)};d(A,e=>{O()&&e(P)});var F=o(A,2),I=e=>{var t=w(),n=c(t),r=e=>{var t=_(`·`);h(e,t)};d(n,e=>{(m(j)||m(M)||O())&&e(r)}),f(),h(e,t)};d(F,e=>{k()&&e(I)}),a(t),u(()=>r(t,`title`,m(N))),h(e,t)};d(F,e=>{(m(j)||m(M)||O()||k())&&e(I)}),h(l,P),p()}export{E as t};
@@ -0,0 +1 @@
1
+ .tag.svelte-grpov{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--accent-fg);white-space:nowrap}.tag.dim.svelte-grpov{opacity:.5}.lt.svelte-grpov{color:var(--fg-faint)}.file.svelte-grpov{color:var(--fg-faint);font-size:var(--fs-xs)}.detached.svelte-grpov{border-radius:var(--radius-sm);background:var(--yellow-bg);color:var(--yellow);font-size:var(--fs-2xs);padding:0 5px}.kids.svelte-grpov{border-radius:var(--radius-full);background:var(--bg-active);color:var(--fg-muted);font-size:var(--fs-2xs);margin-left:auto;padding:0 5px}.name-cell.svelte-grpov{align-items:baseline;gap:8px;min-width:0;display:flex}.cname.svelte-grpov{white-space:nowrap;font-weight:500}.crumbs.svelte-grpov{font-size:var(--fs-xs);font-family:var(--font-mono);flex-wrap:wrap;gap:2px 0;margin:0;padding:0 14px;list-style:none;display:flex}.crumbs.svelte-grpov li:where(.svelte-grpov):not(:last-child):after{content:"›";color:var(--fg-faint);margin:0 4px}.crumbs.svelte-grpov button:where(.svelte-grpov),.link.svelte-grpov{color:var(--fg-muted);font:inherit;background:0 0;border:0;padding:0}.crumbs.svelte-grpov button:where(.svelte-grpov):hover,.link.svelte-grpov:hover{color:var(--accent-fg);text-decoration:underline}.crumbs.svelte-grpov [aria-current]:where(.svelte-grpov){color:var(--fg)}.none.svelte-grpov{color:var(--fg-faint);font-size:var(--fs-sm);margin:0;padding:0 14px}
@@ -0,0 +1 @@
1
+ import{A as e,At as t,Ct as n,Dt as r,F as i,I as a,J as o,Mt as s,N as c,Nt as l,P as u,Q as d,R as f,St as p,T as m,Tt as h,V as g,_t as _,at as v,bt as y,ct as b,d as x,dt as S,f as ee,ft as C,gt as w,ht as te,it as T,jt as E,kt as ne,l as re,mt as D,ot as O,st as k,tt as A,ut as j,vt as ie,wt as M,xt as N,yt as P,z as ae}from"./index-BzMw8R8l.js";import{l as F,n as oe}from"./format-CW_NXiBg.js";import{n as se,t as ce}from"./Badge-CBVv8IFU.js";import{t as le}from"./SplitView-B8lYXXEm.js";import{t as ue}from"./SearchField-eocQu1eB.js";import{t as de}from"./DataTable-C6-tmcTQ.js";import{t as fe}from"./Inspector-DGmAzhki.js";import{t as pe}from"./Segmented-JGNuI5EZ.js";import{i as me,n as he,r as ge,t as _e}from"./TreeView-fty5aCC5.js";import{n as ve,t as ye}from"./versions-CZjRj40E.js";import{t as be}from"./CaptureNotice-BeXCVhO0.js";import{t as xe}from"./reactive-selection.svelte-Dfd9zWsh.js";var Se=b(`<!> <!> <!>`,1),I=b(`<!> <!>`,1),Ce=b(`<li class="svelte-grpov"><button class="svelte-grpov"> </button></li>`),we=b(`<h3 class="section-title">Ancestors</h3> <ol class="crumbs svelte-grpov"><!> <li aria-current="true" class="svelte-grpov"> </li></ol>`,1),Te=b(`<li><button><span class="truncate"> </span><span class="sub mono"> </span></button></li>`),Ee=b(`<h3 class="section-title">Children <span class="num"> </span></h3> <ul class="link-list"></ul>`,1),L=b(`<li><button><span class="truncate"> </span><span class="sub truncate"> </span></button></li>`),De=b(`<h3 class="section-title">Imports <span class="num"> </span></h3> <ul class="link-list"></ul>`,1),Oe=b(`<!> <h3 class="section-title">Instance</h3> <dl class="kv"><dt>Children</dt><dd class="num"> </dd> <dt>Same file</dt> <dd><button class="link svelte-grpov"> </button></dd></dl> <!> <!>`,1),ke=b(`<p class="mono"> </p>`),Ae=b(`<span class="detached svelte-grpov">detached</span>`),je=b(`<span class="kids num svelte-grpov"> </span>`),Me=b(`<span><span class="lt svelte-grpov">&lt;</span><!><span class="lt svelte-grpov">&gt;</span></span> <span class="file truncate svelte-grpov"><!></span> <!> <!>`,1),Ne=b(`<p>Open your app in another tab — the tree updates live as components mount and unmount.</p> <!>`,1),Pe=b(`<ul class="link-list"></ul>`),Fe=b(`<p class="none svelte-grpov">Imports no other components.</p>`),Ie=b(`<p class="none svelte-grpov">Not imported by any component (route or entry).</p>`),Le=b(`<h3 class="section-title">Imports <span class="num"> </span></h3> <!> <h3 class="section-title">Used by <span class="num"> </span></h3> <!>`,1),Re=b(`<span> </span>`),ze=b(`<span class="name-cell svelte-grpov"><span class="cname svelte-grpov"><!></span> <span class="file truncate svelte-grpov"><!></span></span> <span class="end num muted"> </span> <span class="end num muted"> </span> <!>`,1);function R(b,S){t(S,!0);let R=f(`components:mode`,`tree`),z=h(``),B=a(async()=>{let e=await ee(),t=await x(),n=await ee();return{list:t,meta:n,epoch:e.epoch===n.epoch?n.epoch??``:null}},{initial:{list:[],meta:null,epoch:``},interval:2e3,version:ye(`components`)}),V=r(()=>B.data.list),H=r(()=>{let e=new Map;for(let t of D(V))e.set(t.id,{c:t,key:``,children:[]});let t=[],n=new Set;for(let r of e.values()){let i=r.c.parentId==null?void 0:e.get(r.c.parentId);i?i.children.push(r):(t.push(r),r.c.parentId!=null&&n.add(r))}let r=new Map,i=(e,t)=>{let a=new Map;for(let o of e){let e=a.get(o.c.name)??0;a.set(o.c.name,e+1),o.key=`${t}${n.has(o)?`~`:``}${o.c.name}#${e}`,r.set(o.key,o),o.children.length&&i(o.children,o.key+`/`)}};return i(t,``),{roots:t,byId:e,byKey:r,detached:new Set([...n].map(e=>e.key)),epoch:B.data.epoch}}),Be=r(()=>{let e=B.data.meta;return e?{captured:e.kept,total:e.total,truncated:e.truncated,policy:`parents first`}:null}),U=r(()=>{let e=new Map;for(let t of D(V))e.set(t.file,(e.get(t.file)??0)+1);return e}),W=h(n(new Set)),G=h(null),Ve=h(null),He,Ue=null,We=e=>e.c.id,K=e=>e.key;ie(()=>{let e=D(H);te(()=>{let t=Ue;if(Ue=e,t&&t!==e){if(D(W).size){let n=me(D(W),t,e,We,K);(n.length!==D(W).size||n.some(e=>!D(W).has(e)))&&M(W,new Set(n),!0)}D(G)!=null&&M(G,me([D(G)],t,e,We,K)[0]??null,!0)}})}),_(()=>{if(D(H).epoch===null||He===D(H).epoch)return;let e=ge(D(H).roots,e=>e.children,K);e.length!==0&&(He=D(H).epoch,te(()=>M(W,new Set([...D(W),...e]),!0)))});let Ge=r(()=>{let e=c(D(z));return e?t=>e(t.c.name,t.c.file):null}),Ke=r(()=>D(Ge)?D(V).filter(e=>D(Ge)({c:e})).length:null),q=r(()=>D(G)==null?null:D(H).byKey.get(D(G))??null);function qe(e){let t=[],n=D(H).byId.get(e);for(;n&&n.c.parentId!=null;){let e=D(H).byId.get(n.c.parentId);if(!e)break;t.unshift(e),n=e}return t}function Je(e){let t=D(H).byId.get(e);t&&D(Ve)?.reveal(t.key,qe(e).map(e=>e.key))}let J=a(re,{initial:[],when:()=>R.value===`files`||D(G)!=null}),Y=r(()=>{let e=new Map;for(let t of J.data)for(let n of t.imports){let r=e.get(n);r?r.push(t):e.set(n,[t])}return e}),Ye=r(()=>new Map(J.data.map(e=>[e.file,e]))),Xe=r(()=>{let e=c(D(z));return e?J.data.filter(t=>e(t.name,t.file)):J.data}),Ze=h(n({id:`name`,desc:!1})),X=h(null),Z=r(()=>D(X)?D(Ye).get(D(X))??null:null),Qe=[{id:`name`,label:`Component`,width:`minmax(0, 1fr)`,sort:(e,t)=>e.name.localeCompare(t.name)},{id:`imports`,label:`Imports`,width:`72px`,align:`end`,descFirst:!0,sort:(e,t)=>e.imports.length-t.imports.length},{id:`used`,label:`Used by`,width:`72px`,align:`end`,descFirst:!0,sort:(e,t)=>(D(Y).get(e.file)?.length??0)-(D(Y).get(t.file)?.length??0)},{id:`live`,label:`Mounted`,width:`72px`,align:`end`,descFirst:!0,minWidth:520,sort:(e,t)=>(D(U).get(e.file)??0)-(D(U).get(t.file)??0)}],Q=r(()=>B.data.epoch||null);_(()=>{B.data.epoch===null&&te(()=>B.refresh())});function $e(e){D(Q)&&(xe.set({componentId:e.id,epoch:D(Q),label:`<${e.name}>`,file:e.file}),ae.go(`reactive`))}function $(e){m(e).catch(()=>{})}function et(e){R.value=`files`,M(z,``),M(X,e,!0)}function tt(e){let t=D(V).find(t=>t.file===e);R.value=`tree`,M(z,``),t&&queueMicrotask(()=>Je(t.id))}{let t=e=>{var t=Se(),n=y(t);pe(n,{label:`View`,options:[{value:`tree`,label:`Live tree`},{value:`files`,label:`Files`}],get value(){return R.value},set value(e){R.value=e}});var i=p(n,2);{let e=r(()=>R.value===`tree`?`Filter instances…`:`Filter components…`),t=r(()=>R.value===`tree`?D(Ke):D(Xe).length);ue(i,{get placeholder(){return D(e)},get count(){return D(t)},get value(){return D(z)},set value(e){M(z,e,!0)}})}var a=p(i,2),o=e=>{var t=Se(),n=y(t);be(n,{get info(){return D(Be)},noun:`components`,get detached(){return D(H).detached.size}});var r=p(n,2);u(r,{icon:`expand`,variant:`ghost`,label:`Expand all`,onclick:()=>M(W,he(D(H).roots,{key:e=>e.key,children:e=>e.children}),!0)});var i=p(r,2);u(i,{icon:`collapse`,variant:`ghost`,label:`Collapse all`,onclick:()=>M(W,new Set,!0)}),O(e,t)};T(a,e=>{R.value===`tree`&&e(o)}),O(e,t)},n=e=>{var t=k(),n=y(t),r=e=>{ve(e,{get res(){return B}})},i=e=>{u(e,{icon:`refresh`,variant:`ghost`,label:`Re-analyze`,get disabled(){return J.busy},onclick:()=>J.refresh()})};T(n,e=>{R.value===`tree`?e(r):e(i,-1)}),O(e,t)},a=r(()=>R.value===`tree`?D(V).length:J.data.length);se(b,{title:`Components`,get count(){return D(a)},toolbar:t,actions:n,children:(t,n)=>{var a=k(),c=y(a),f=t=>{{let n=e=>{var t=k(),n=y(t),i=e=>{let t=r(()=>D(q).c),n=r(()=>D(Ye).get(D(t).file)),i=r(()=>qe(D(t).id));fe(e,{get title(){return`<${D(t).name??``}>`},get subtitle(){return D(t).file},onclose:()=>M(G,null),badges:e=>{var n=I(),i=y(n);{let e=r(()=>D(t).mounted?`green`:`neutral`);ce(i,{get tone(){return D(e)},children:(e,n)=>{E();var r=j();w(()=>v(r,D(t).mounted?`mounted`:`unmounted`)),O(e,r)},$$slots:{default:!0}})}var a=p(i,2);ce(a,{children:(e,n)=>{E();var r=j();w(()=>v(r,`#${D(t).id??``}`)),O(e,r)},$$slots:{default:!0}}),O(e,n)},actions:e=>{var n=I(),i=y(n);u(i,{icon:`editor`,onclick:()=>$(D(t).file),children:(e,t)=>{E();var n=j(`Open in editor`);O(e,n)},$$slots:{default:!0}});var a=p(i,2),o=e=>{{let n=r(()=>!D(Q));u(e,{icon:`reactive`,get disabled(){return D(n)},onclick:()=>$e(D(t)),children:(e,t)=>{E();var n=j();w(()=>v(n,D(Q)?`Show reactivity`:`Show reactivity (waiting for a consistent snapshot)`)),O(e,n)},$$slots:{default:!0}})}};T(a,e=>{D(t).mounted&&e(o)}),O(e,n)},children:(e,r)=>{var a=Oe(),c=y(a),l=e=>{var n=we(),r=p(y(n),2),a=P(r);A(a,17,()=>D(i),e=>e.key,(e,t)=>{var n=Ce(),r=P(n),i=N(r,!0);s(n),w(()=>v(i,D(t).c.name)),C(`click`,r,()=>Je(D(t).c.id)),O(e,n)});var o=p(a,2),c=N(o,!0);s(r),w(()=>v(c,D(t).name)),O(e,n)};T(c,e=>{D(i).length&&e(l)});var u=p(c,4),d=p(P(u)),f=N(d,!0),m=p(d,4),h=P(m),g=N(h);s(m),s(u);var _=p(u,2),b=e=>{var t=Ee(),n=y(t),r=p(P(n)),i=N(r,!0);s(n);var a=p(n,2);A(a,21,()=>D(q).children.slice(0,200),e=>e.key,(e,t)=>{var n=Te(),r=P(n),i=P(r),a=N(i,!0),o=p(i),c=N(o);s(r),s(n),w(()=>{v(a,D(t).c.name),v(c,`#${D(t).c.id??``}`)}),C(`click`,r,()=>Je(D(t).c.id)),O(e,n)}),s(a),w(()=>v(i,D(q).children.length)),O(e,t)};T(_,e=>{D(q).children.length&&e(b)});var x=p(_,2),S=e=>{var t=De(),r=y(t),i=p(P(r)),a=N(i,!0);s(r);var c=p(r,2);A(c,20,()=>D(n).imports,e=>e,(e,t)=>{var n=L(),r=P(n),i=P(r),a=N(i,!0),c=p(i),l=N(c,!0);s(r),s(n),w((e,n)=>{o(r,`title`,`Open ${t??``}`),v(a,e),v(l,n)},[()=>oe(t),()=>F(t)]),C(`click`,r,()=>$(t)),O(e,n)}),s(c),w(()=>v(a,D(n).imports.length)),O(e,t)};T(x,e=>{D(n)&&D(n).imports.length&&e(S)}),w((e,t)=>{v(f,D(q).children.length),v(g,`${e??``} mounted instance${t??``}`)},[()=>D(U).get(D(t).file)??1,()=>(D(U).get(D(t).file)??1)===1?``:`s`]),C(`click`,h,()=>et(D(t).file)),O(e,a)},$$slots:{badges:!0,actions:!0,default:!0}})};T(n,e=>{D(q)&&e(i)}),O(e,t)},a=r(()=>!!D(q));le(t,{id:`components-tree`,get open(){return D(a)},aside:n,children:(t,n)=>{var a=k(),c=y(a),f=e=>{i(e,{icon:`errors`,tone:`error`,title:`Could not read live components`,children:(e,t)=>{var n=ke(),r=N(n,!0);w(()=>v(r,B.error)),O(e,n)},$$slots:{default:!0}})},m=t=>{g(_e(t,{get roots(){return D(H).roots},getKey:e=>e.key,getChildren:e=>e.children,get filter(){return D(Ge)},label:`Mounted component tree`,onactivate:e=>$(e.c.file),get expanded(){return D(W)},set expanded(e){M(W,e,!0)},get selected(){return D(G)},set selected(e){M(G,e,!0)},row:(t,n=l,i=l)=>{var a=Me(),c=y(a);let u;var f=p(P(c));e(f,{get text(){return n().c.name},get query(){return D(z)}}),E(),s(c);var m=p(c,2),h=P(m);{let t=r(()=>F(n().c.file));e(h,{get text(){return D(t)},get query(){return D(z)}})}s(m);var g=p(m,2),_=e=>{var t=Ae();w(()=>o(t,`title`,`Parent #${n().c.parentId??``} is outside the captured set`)),O(e,t)},b=r(()=>D(H).detached.has(n().key));T(g,e=>{D(b)&&e(_)});var x=p(g,2),S=e=>{var t=je(),r=N(t,!0);w(()=>v(r,n().children.length)),O(e,t)};T(x,e=>{i().hasChildren&&!i().expanded&&e(S)}),w(()=>u=d(c,1,`tag svelte-grpov`,null,u,{dim:!n().c.mounted})),O(t,a)},empty:e=>{var t=k(),n=y(t),r=e=>{i(e,{title:`Connecting to the app…`})},a=e=>{i(e,{icon:`search`,get title(){return`No instances match “${D(z)??``}”`}})},o=e=>{i(e,{icon:`components`,title:`No mounted components`,children:(e,t)=>{var n=Ne(),r=p(y(n),2);u(r,{onclick:()=>R.value=`files`,children:(e,t)=>{E();var n=j(`Browse component files instead`);O(e,n)},$$slots:{default:!0}}),O(e,n)},$$slots:{default:!0}})};T(n,e=>{B.loading?e(r):D(z)?e(a,1):e(o,-1)}),O(e,t)},$$slots:{row:!0,empty:!0}}),e=>M(Ve,e,!0),()=>D(Ve))};T(c,e=>{B.error&&D(V).length===0?e(f):e(m,-1)}),O(t,a)},$$slots:{aside:!0,default:!0}})}},m=t=>{{let n=e=>{var t=k(),n=y(t),i=e=>{let t=r(()=>D(Y).get(D(Z).file)??[]);fe(e,{get title(){return D(Z).name},get subtitle(){return D(Z).file},onclose:()=>M(X,null),actions:e=>{var t=I(),n=y(t),i=e=>{u(e,{icon:`tree`,onclick:()=>tt(D(Z).file),children:(e,t)=>{E();var n=j(`Show in tree`);O(e,n)},$$slots:{default:!0}})},a=r(()=>D(U).get(D(Z).file));T(n,e=>{D(a)&&e(i)});var o=p(n,2);u(o,{icon:`editor`,onclick:()=>$(D(Z).file),children:(e,t)=>{E();var n=j(`Open in editor`);O(e,n)},$$slots:{default:!0}}),O(e,t)},children:(e,n)=>{var r=Le(),i=y(r),a=p(P(i)),o=N(a,!0);s(i);var c=p(i,2),l=e=>{var t=Pe();A(t,20,()=>D(Z).imports,e=>e,(e,t)=>{var n=L(),r=P(n),i=P(r),a=N(i,!0),o=p(i),c=N(o,!0);s(r),s(n),w((e,t)=>{v(a,e),v(c,t)},[()=>oe(t),()=>F(t)]),C(`click`,r,()=>D(Ye).has(t)?M(X,t,!0):$(t)),O(e,n)}),s(t),O(e,t)},u=e=>{var t=Fe();O(e,t)};T(c,e=>{D(Z).imports.length?e(l):e(u,-1)});var d=p(c,2),f=p(P(d)),m=N(f,!0);s(d);var h=p(d,2),g=e=>{var n=Pe();A(n,21,()=>D(t),e=>e.file,(e,t)=>{var n=L(),r=P(n),i=P(r),a=N(i,!0),o=p(i),c=N(o,!0);s(r),s(n),w(e=>{v(a,D(t).name),v(c,e)},[()=>F(D(t).file)]),C(`click`,r,()=>M(X,D(t).file,!0)),O(e,n)}),s(n),O(e,n)},_=e=>{var t=Ie();O(e,t)};T(h,e=>{D(t).length?e(g):e(_,-1)}),w(()=>{v(o,D(Z).imports.length),v(m,D(t).length)}),O(e,r)},$$slots:{actions:!0,default:!0}})};T(n,e=>{D(Z)&&e(i)}),O(e,t)},a=r(()=>!!D(Z));le(t,{id:`components-files`,get open(){return D(a)},aside:n,children:(t,n)=>{de(t,{get items(){return D(Xe)},get columns(){return Qe},getKey:e=>e.file,label:`Component files`,onactivate:e=>$(e.file),get sort(){return D(Ze)},set sort(e){M(Ze,e,!0)},get selected(){return D(X)},set selected(e){M(X,e,!0)},row:(t,n=l,i)=>{let a=()=>(i?.()).visible;var o=ze(),c=y(o),u=P(c),f=P(u);e(f,{get text(){return n().name},get query(){return D(z)}}),s(u);var m=p(u,2),h=P(m);e(h,{get text(){return n().file},get query(){return D(z)}}),s(m),s(c);var g=p(c,2),_=N(g,!0),b=p(g,2),x=N(b,!0),S=p(b,2),ee=e=>{var t=Re();let r;var i=N(t,!0);w((e,n)=>{r=d(t,1,`end num`,null,r,{faint:e}),v(i,n)},[()=>!D(U).get(n().file),()=>D(U).get(n().file)??`–`]),O(e,t)},C=r(()=>a().has(`live`));T(S,e=>{D(C)&&e(ee)}),w(e=>{v(_,n().imports.length||``),v(x,e)},[()=>D(Y).get(n().file)?.length||``]),O(t,o)},empty:e=>{var t=k(),n=y(t),a=e=>{i(e,{title:`Analyzing components…`})},o=e=>{i(e,{icon:`errors`,tone:`error`,title:`Analysis failed`,children:(e,t)=>{var n=ke(),r=N(n,!0);w(()=>v(r,J.error)),O(e,n)},$$slots:{default:!0}})},s=e=>{{let t=r(()=>D(z)?`No components match “${D(z)}”`:`No .svelte files found`);i(e,{icon:`search`,get title(){return D(t)}})}};T(n,e=>{J.loading?e(a):J.error?e(o,1):e(s,-1)}),O(e,t)},$$slots:{row:!0,empty:!0}})},$$slots:{aside:!0,default:!0}})}};T(c,e=>{R.value===`tree`?e(f):e(m,-1)}),O(t,a)},$$slots:{toolbar:!0,actions:!0,default:!0}})}ne()}S([`click`]);export{R as default};