@qwik.dev/devtools 0.0.6 → 0.1.1

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 (51) hide show
  1. package/README.md +66 -0
  2. package/dist/plugin/index.cjs +39 -0
  3. package/dist/plugin/index.mjs +39 -0
  4. package/dist/ui/components/DevtoolsButton/DevtoolsButton.qwik.cjs +21 -0
  5. package/dist/ui/components/DevtoolsButton/DevtoolsButton.qwik.mjs +21 -0
  6. package/dist/ui/components/DevtoolsContainer/DevtoolsContainer.qwik.cjs +12 -0
  7. package/dist/ui/components/DevtoolsContainer/DevtoolsContainer.qwik.mjs +12 -0
  8. package/dist/ui/components/DevtoolsPanel/DevtoolsPanel.qwik.cjs +34 -0
  9. package/dist/ui/components/DevtoolsPanel/DevtoolsPanel.qwik.mjs +34 -0
  10. package/dist/ui/components/Tab/Tab.qwik.cjs +17 -0
  11. package/dist/ui/components/Tab/Tab.qwik.mjs +17 -0
  12. package/dist/ui/components/TabContent/TabContent.qwik.cjs +21 -0
  13. package/dist/ui/components/TabContent/TabContent.qwik.mjs +21 -0
  14. package/dist/ui/components/TabTitle/TabTitle.qwik.cjs +11 -0
  15. package/dist/ui/components/TabTitle/TabTitle.qwik.mjs +11 -0
  16. package/dist/ui/devtools.qwik.cjs +87 -415
  17. package/dist/ui/devtools.qwik.mjs +88 -416
  18. package/dist/ui/features/Assets/Assets.qwik.cjs +60 -0
  19. package/dist/ui/features/Assets/Assets.qwik.mjs +60 -0
  20. package/dist/ui/features/Overview/Overview.qwik.cjs +165 -0
  21. package/dist/ui/features/Overview/Overview.qwik.mjs +165 -0
  22. package/dist/ui/features/Packages/Packages.qwik.cjs +95 -0
  23. package/dist/ui/features/Packages/Packages.qwik.mjs +95 -0
  24. package/dist/ui/features/Packages/components/InstallButton/InstallButton.qwik.cjs +36 -0
  25. package/dist/ui/features/Packages/components/InstallButton/InstallButton.qwik.mjs +36 -0
  26. package/dist/ui/features/Routes/Routes.qwik.cjs +65 -0
  27. package/dist/ui/features/Routes/Routes.qwik.mjs +65 -0
  28. package/dist/ui/global.css.qwik.cjs +3 -0
  29. package/dist/ui/global.css.qwik.mjs +4 -0
  30. package/dist/ui/hooks/useDebouncer.qwik.cjs +13 -0
  31. package/dist/ui/hooks/useDebouncer.qwik.mjs +13 -0
  32. package/dist/ui/lib-types/kit/src/types.d.ts +4 -0
  33. package/dist/ui/lib-types/ui/src/components/DevtoolsButton/DevtoolsButton.d.ts +6 -0
  34. package/dist/ui/lib-types/ui/src/components/DevtoolsContainer/DevtoolsContainer.d.ts +1 -0
  35. package/dist/ui/lib-types/ui/src/components/DevtoolsPanel/DevtoolsPanel.d.ts +6 -0
  36. package/dist/ui/lib-types/ui/src/components/Tab/Tab.d.ts +8 -0
  37. package/dist/ui/lib-types/ui/src/components/TabContent/TabContent.d.ts +1 -0
  38. package/dist/ui/lib-types/ui/src/components/TabTitle/TabTitle.d.ts +5 -0
  39. package/dist/ui/lib-types/ui/src/features/Assets/Assets.d.ts +6 -0
  40. package/dist/ui/lib-types/ui/src/features/Components/Components.d.ts +1 -0
  41. package/dist/ui/lib-types/ui/src/features/Overview/Overview.d.ts +6 -0
  42. package/dist/ui/lib-types/ui/src/features/Packages/Packages.d.ts +1 -0
  43. package/dist/ui/lib-types/ui/src/features/Packages/components/InstallButton/InstallButton.d.ts +6 -0
  44. package/dist/ui/lib-types/ui/src/features/Packages/types.d.ts +5 -0
  45. package/dist/ui/lib-types/ui/src/features/Routes/Routes.d.ts +6 -0
  46. package/dist/ui/lib-types/ui/src/hooks/useDebouncer.d.ts +2 -0
  47. package/dist/ui/lib-types/ui/src/index.d.ts +1 -1
  48. package/dist/ui/lib-types/ui/src/types/state.d.ts +10 -0
  49. package/package.json +3 -2
  50. package/dist/ui/devtools.css.qwik.cjs +0 -3
  51. package/dist/ui/devtools.css.qwik.mjs +0 -4
package/dist/ui/devtools.qwik.cjs CHANGED
@@ -9,15 +9,24 @@ const client = require("./packages/kit/src/client.qwik.cjs");
9
9
  require("./node_modules/.pnpm/superjson@2.2.2/node_modules/superjson/dist/index.qwik.cjs");
10
10
  const context = require("./packages/kit/src/context.qwik.cjs");
11
11
  const index_esm = require("./node_modules/.pnpm/dree@5.1.5/node_modules/dree/bundled/lib/esm/index.esm.qwik.cjs");
12
- const devtools = require("./devtools.css.qwik.cjs");
13
- const router = require("@qwik.dev/router");
12
+ const global = require("./global.css.qwik.cjs");
13
+ const Tab = require("./components/Tab/Tab.qwik.cjs");
14
+ const TabContent = require("./components/TabContent/TabContent.qwik.cjs");
15
+ const Overview = require("./features/Overview/Overview.qwik.cjs");
16
+ const Assets = require("./features/Assets/Assets.qwik.cjs");
17
+ const Routes = require("./features/Routes/Routes.qwik.cjs");
18
+ const TabTitle = require("./components/TabTitle/TabTitle.qwik.cjs");
19
+ const DevtoolsButton = require("./components/DevtoolsButton/DevtoolsButton.qwik.cjs");
20
+ const DevtoolsContainer = require("./components/DevtoolsContainer/DevtoolsContainer.qwik.cjs");
21
+ const DevtoolsPanel = require("./components/DevtoolsPanel/DevtoolsPanel.qwik.cjs");
22
+ const Packages = require("./features/Packages/Packages.qwik.cjs");
14
23
  function getClientRpcFunctions() {
15
24
  return {
16
25
  healthCheck: () => true
17
26
  };
18
27
  }
19
28
  const QwikDevtools = core.component$(() => {
20
- core.useStyles$(devtools);
29
+ core.useStyles$(global);
21
30
  const state = core.useStore({
22
31
  isOpen: false,
23
32
  activeTab: "overview",
@@ -25,9 +34,7 @@ const QwikDevtools = core.component$(() => {
25
34
  assets: [],
26
35
  routes: void 0
27
36
  });
28
- const panelRef = core.useSignal();
29
- const location = router.useLocation();
30
- core.useVisibleTask$(async ({ cleanup, track }) => {
37
+ core.useVisibleTask$(async ({ track }) => {
31
38
  const hot = await index.tryCreateHotContext(void 0, [
32
39
  "/"
33
40
  ]);
@@ -63,467 +70,132 @@ const QwikDevtools = core.component$(() => {
63
70
  });
64
71
  }
65
72
  });
66
- const handleKeyPress = (e) => {
67
- if (e.key === "`" && e.metaKey) {
68
- state.isOpen = !state.isOpen;
69
- }
70
- if (e.key === "Escape" && state.isOpen) {
71
- state.isOpen = false;
72
- }
73
- };
74
- const handleClickOutside = (e) => {
75
- if (state.isOpen && panelRef.value && !panelRef.value.contains(e.target)) {
76
- state.isOpen = false;
77
- }
78
- };
79
- window.addEventListener("keydown", handleKeyPress);
80
- window.addEventListener("mousedown", handleClickOutside);
81
- cleanup(() => {
82
- window.removeEventListener("keydown", handleKeyPress);
83
- window.removeEventListener("mousedown", handleClickOutside);
84
- });
85
73
  });
86
- return /* @__PURE__ */ jsxRuntime.jsxs("div", {
87
- class: {
88
- "devtools-container": true,
89
- "devtools-open": state.isOpen
90
- },
74
+ return /* @__PURE__ */ jsxRuntime.jsxs(DevtoolsContainer.DevtoolsContainer, {
91
75
  children: [
92
- /* @__PURE__ */ jsxRuntime.jsx("div", {
93
- class: {
94
- "devtools-toggle": true,
95
- "is-open": state.isOpen
96
- },
97
- onClick$: () => state.isOpen = !state.isOpen,
98
- children: /* @__PURE__ */ jsxRuntime.jsx("img", {
99
- width: 20,
100
- height: 20,
101
- src: "https://qwik.dev/logos/qwik-logo.svg",
102
- alt: "Qwik Logo",
103
- class: "toggle-icon"
104
- })
76
+ /* @__PURE__ */ jsxRuntime.jsx(DevtoolsButton.DevtoolsButton, {
77
+ state
105
78
  }),
106
- state.isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", {
107
- ref: panelRef,
108
- class: "devtools-panel",
79
+ state.isOpen && /* @__PURE__ */ jsxRuntime.jsxs(DevtoolsPanel.DevtoolsPanel, {
80
+ state,
109
81
  children: [
110
82
  /* @__PURE__ */ jsxRuntime.jsxs("div", {
111
- class: "devtools-tabs",
83
+ class: "flex flex-col gap-2 border-r border-zinc-700 bg-zinc-900/95 p-3",
112
84
  children: [
113
- /* @__PURE__ */ jsxRuntime.jsx("button", {
114
- class: {
115
- "tab-active": state.activeTab === "overview"
116
- },
117
- onClick$: () => state.activeTab = "overview",
85
+ /* @__PURE__ */ jsxRuntime.jsx(Tab.Tab, {
86
+ state,
87
+ id: "overview",
118
88
  title: "Overview",
119
89
  children: /* @__PURE__ */ jsxRuntime.jsx(hi_qwik.HiBoltOutline, {
120
- width: 20,
121
- height: 20
90
+ class: "h-5 w-5"
122
91
  })
123
92
  }),
124
- /* @__PURE__ */ jsxRuntime.jsx("button", {
125
- class: {
126
- "tab-active": state.activeTab === "components"
127
- },
128
- onClick$: () => state.activeTab = "components",
129
- title: "Components",
93
+ /* @__PURE__ */ jsxRuntime.jsx(Tab.Tab, {
94
+ state,
95
+ id: "packages",
96
+ title: "Packages",
130
97
  children: /* @__PURE__ */ jsxRuntime.jsx(hi_qwik.HiCubeOutline, {
131
- width: 20,
132
- height: 20
98
+ class: "h-5 w-5"
133
99
  })
134
100
  }),
135
- /* @__PURE__ */ jsxRuntime.jsx("button", {
136
- class: {
137
- "tab-active": state.activeTab === "routes"
138
- },
139
- onClick$: () => state.activeTab = "routes",
101
+ /* @__PURE__ */ jsxRuntime.jsx(Tab.Tab, {
102
+ state,
103
+ id: "routes",
140
104
  title: "Routes",
141
105
  children: /* @__PURE__ */ jsxRuntime.jsx(lu_qwik.LuFolderTree, {
142
- width: 20,
143
- height: 20
106
+ class: "h-5 w-5"
144
107
  })
145
108
  }),
146
- /* @__PURE__ */ jsxRuntime.jsx("button", {
147
- class: {
148
- "tab-active": state.activeTab === "state"
149
- },
150
- onClick$: () => state.activeTab = "state",
151
- title: "State",
152
- children: /* @__PURE__ */ jsxRuntime.jsxs("svg", {
153
- width: "20",
154
- height: "20",
155
- viewBox: "0 0 24 24",
156
- fill: "none",
157
- xmlns: "http://www.w3.org/2000/svg",
158
- children: [
159
- /* @__PURE__ */ jsxRuntime.jsx("path", {
160
- d: "M12 2a7 7 0 0 1 7 7c0 2.38-1.19 4.47-3 5.74V17a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 0 1 7-7zm0 2a5 5 0 0 0-5 5c0 2.05 1.23 3.81 3 4.58V16h4v-2.42c1.77-.77 3-2.53 3-4.58a5 5 0 0 0-5-5z",
161
- fill: "currentColor"
162
- }),
163
- /* @__PURE__ */ jsxRuntime.jsx("path", {
164
- d: "M8 20v1h8v-1H8z",
165
- fill: "currentColor"
166
- })
167
- ]
168
- })
169
- }),
170
- /* @__PURE__ */ jsxRuntime.jsx("button", {
171
- class: {
172
- "tab-active": state.activeTab === "assets"
173
- },
174
- onClick$: () => state.activeTab = "assets",
109
+ /* @__PURE__ */ jsxRuntime.jsx(Tab.Tab, {
110
+ state,
111
+ id: "assets",
175
112
  title: "Assets",
176
113
  children: /* @__PURE__ */ jsxRuntime.jsx(hi_qwik.HiPhotoOutline, {
177
- width: 20,
178
- height: 20
114
+ class: "h-5 w-5"
179
115
  })
180
116
  })
181
117
  ]
182
118
  }),
183
119
  /* @__PURE__ */ jsxRuntime.jsxs("div", {
184
- class: "devtools-content",
120
+ class: "custom-scrollbar flex-1 overflow-y-auto p-4",
185
121
  children: [
186
- state.activeTab === "overview" && /* @__PURE__ */ jsxRuntime.jsxs("div", {
187
- class: "tab-content overview",
122
+ state.activeTab === "overview" && /* @__PURE__ */ jsxRuntime.jsxs(TabContent.TabContent, {
188
123
  children: [
189
124
  /* @__PURE__ */ jsxRuntime.jsxs("div", {
190
- class: "header-section",
125
+ class: "flex items-center gap-3",
126
+ "q:slot": "title",
191
127
  children: [
192
- /* @__PURE__ */ jsxRuntime.jsxs("div", {
193
- class: "title-container",
194
- children: [
195
- /* @__PURE__ */ jsxRuntime.jsx("img", {
196
- width: 32,
197
- height: 32,
198
- src: "https://qwik.dev/logos/qwik-logo.svg",
199
- alt: "Qwik Logo",
200
- class: "qwik-logo"
201
- }),
202
- /* @__PURE__ */ jsxRuntime.jsx("h1", {
203
- children: "Qwik DevTools"
204
- })
205
- ]
128
+ /* @__PURE__ */ jsxRuntime.jsx("img", {
129
+ width: 32,
130
+ height: 32,
131
+ src: "https://qwik.dev/logos/qwik-logo.svg",
132
+ alt: "Qwik Logo",
133
+ class: "h-8 w-8"
206
134
  }),
207
- /* @__PURE__ */ jsxRuntime.jsxs("div", {
208
- class: "version",
209
- children: [
210
- "v",
211
- state.npmPackages.find(([name]) => name.includes("core"))?.[1] || "0.0.0"
212
- ]
135
+ /* @__PURE__ */ jsxRuntime.jsx("h1", {
136
+ class: "text-2xl font-semibold",
137
+ children: "Qwik DevTools"
213
138
  })
214
139
  ]
215
140
  }),
141
+ /* @__PURE__ */ jsxRuntime.jsx(Overview.Overview, {
142
+ state,
143
+ "q:slot": "content"
144
+ })
145
+ ]
146
+ }),
147
+ state.activeTab === "assets" && /* @__PURE__ */ jsxRuntime.jsxs(TabContent.TabContent, {
148
+ children: [
149
+ /* @__PURE__ */ jsxRuntime.jsx(TabTitle.TabTitle, {
150
+ title: "Public Assets",
151
+ "q:slot": "title"
152
+ }),
216
153
  /* @__PURE__ */ jsxRuntime.jsxs("div", {
217
- class: "metrics-grid",
154
+ class: "flex gap-4 text-sm text-zinc-400",
218
155
  children: [
219
- /* @__PURE__ */ jsxRuntime.jsxs("div", {
220
- class: "metric-card",
221
- children: [
222
- /* @__PURE__ */ jsxRuntime.jsx("div", {
223
- class: "metric-icon",
224
- children: /* @__PURE__ */ jsxRuntime.jsx(lu_qwik.LuFolderTree, {
225
- class: "icon"
226
- })
227
- }),
228
- /* @__PURE__ */ jsxRuntime.jsxs("div", {
229
- class: "metric-content",
230
- children: [
231
- /* @__PURE__ */ jsxRuntime.jsx("div", {
232
- class: "metric-value",
233
- children: state.routes?.length
234
- }),
235
- /* @__PURE__ */ jsxRuntime.jsx("div", {
236
- class: "metric-label",
237
- children: "pages"
238
- })
239
- ]
240
- })
241
- ]
242
- }),
243
- /* @__PURE__ */ jsxRuntime.jsxs("div", {
244
- class: "metric-card",
156
+ /* @__PURE__ */ jsxRuntime.jsxs("span", {
245
157
  children: [
246
- /* @__PURE__ */ jsxRuntime.jsx("div", {
247
- class: "metric-icon",
248
- children: /* @__PURE__ */ jsxRuntime.jsx(hi_qwik.HiCubeOutline, {
249
- class: "icon"
250
- })
251
- }),
252
- /* @__PURE__ */ jsxRuntime.jsxs("div", {
253
- class: "metric-content",
254
- children: [
255
- /* @__PURE__ */ jsxRuntime.jsx("div", {
256
- class: "metric-value",
257
- children: state.assets.length
258
- }),
259
- /* @__PURE__ */ jsxRuntime.jsx("div", {
260
- class: "metric-label",
261
- children: "components"
262
- })
263
- ]
264
- })
158
+ "Total Size:",
159
+ " ",
160
+ (state.assets?.reduce((acc, asset) => acc + asset.size, 0) / 1024).toFixed(2),
161
+ " ",
162
+ "KB"
265
163
  ]
266
164
  }),
267
- /* @__PURE__ */ jsxRuntime.jsxs("div", {
268
- class: "metric-card",
165
+ /* @__PURE__ */ jsxRuntime.jsxs("span", {
269
166
  children: [
270
- /* @__PURE__ */ jsxRuntime.jsx("div", {
271
- class: "metric-icon",
272
- children: /* @__PURE__ */ jsxRuntime.jsx(hi_qwik.HiPhotoOutline, {
273
- class: "icon"
274
- })
275
- }),
276
- /* @__PURE__ */ jsxRuntime.jsxs("div", {
277
- class: "metric-content",
278
- children: [
279
- /* @__PURE__ */ jsxRuntime.jsx("div", {
280
- class: "metric-value",
281
- children: state.assets.length || 0
282
- }),
283
- /* @__PURE__ */ jsxRuntime.jsx("div", {
284
- class: "metric-label",
285
- children: "assets"
286
- })
287
- ]
288
- })
167
+ "Count: ",
168
+ state.assets?.length || 0
289
169
  ]
290
170
  })
291
171
  ]
292
172
  }),
293
- /* @__PURE__ */ jsxRuntime.jsxs("div", {
294
- class: "packages-section",
295
- children: [
296
- /* @__PURE__ */ jsxRuntime.jsx("h3", {
297
- children: "Installed Packages"
298
- }),
299
- /* @__PURE__ */ jsxRuntime.jsx("div", {
300
- class: "packages-grid",
301
- children: state.npmPackages.map(([name, version]) => /* @__PURE__ */ jsxRuntime.jsxs("div", {
302
- class: "package-item",
303
- children: [
304
- /* @__PURE__ */ jsxRuntime.jsx("div", {
305
- class: "package-name",
306
- children: name
307
- }),
308
- /* @__PURE__ */ jsxRuntime.jsxs("div", {
309
- class: "package-version",
310
- children: [
311
- "v",
312
- version
313
- ]
314
- })
315
- ]
316
- }, name))
317
- })
318
- ]
319
- }),
320
- /* @__PURE__ */ jsxRuntime.jsxs("div", {
321
- class: "performance-section",
322
- children: [
323
- /* @__PURE__ */ jsxRuntime.jsx("h3", {
324
- children: "Performance"
325
- }),
326
- /* @__PURE__ */ jsxRuntime.jsxs("div", {
327
- class: "performance-metrics",
328
- children: [
329
- /* @__PURE__ */ jsxRuntime.jsxs("div", {
330
- class: "perf-item",
331
- children: [
332
- /* @__PURE__ */ jsxRuntime.jsx("span", {
333
- children: "SSR to full load"
334
- }),
335
- /* @__PURE__ */ jsxRuntime.jsx("span", {
336
- class: "perf-value",
337
- children: "-"
338
- })
339
- ]
340
- }),
341
- /* @__PURE__ */ jsxRuntime.jsxs("div", {
342
- class: "perf-item",
343
- children: [
344
- /* @__PURE__ */ jsxRuntime.jsx("span", {
345
- children: "Page load"
346
- }),
347
- /* @__PURE__ */ jsxRuntime.jsx("span", {
348
- class: "perf-value",
349
- children: "-"
350
- })
351
- ]
352
- }),
353
- /* @__PURE__ */ jsxRuntime.jsxs("div", {
354
- class: "perf-item",
355
- children: [
356
- /* @__PURE__ */ jsxRuntime.jsx("span", {
357
- children: "Navigation"
358
- }),
359
- /* @__PURE__ */ jsxRuntime.jsx("span", {
360
- class: "perf-value",
361
- children: "-"
362
- })
363
- ]
364
- })
365
- ]
366
- })
367
- ]
173
+ /* @__PURE__ */ jsxRuntime.jsx(Assets.Assets, {
174
+ state,
175
+ "q:slot": "content"
368
176
  })
369
177
  ]
370
178
  }),
371
- state.activeTab === "assets" && /* @__PURE__ */ jsxRuntime.jsxs("div", {
372
- class: "tab-content assets",
179
+ state.activeTab === "packages" && /* @__PURE__ */ jsxRuntime.jsxs(TabContent.TabContent, {
373
180
  children: [
374
- /* @__PURE__ */ jsxRuntime.jsxs("div", {
375
- class: "header-section",
376
- children: [
377
- /* @__PURE__ */ jsxRuntime.jsx("h3", {
378
- children: "Public Assets"
379
- }),
380
- /* @__PURE__ */ jsxRuntime.jsxs("div", {
381
- class: "assets-stats",
382
- children: [
383
- /* @__PURE__ */ jsxRuntime.jsxs("span", {
384
- class: "stat-item",
385
- children: [
386
- "Total Size:",
387
- " ",
388
- (state.assets?.reduce((acc, asset) => acc + asset.size, 0) / 1024).toFixed(2),
389
- " ",
390
- "KB"
391
- ]
392
- }),
393
- /* @__PURE__ */ jsxRuntime.jsxs("span", {
394
- class: "stat-item",
395
- children: [
396
- "Count: ",
397
- state.assets?.length || 0
398
- ]
399
- })
400
- ]
401
- })
402
- ]
181
+ /* @__PURE__ */ jsxRuntime.jsx(TabTitle.TabTitle, {
182
+ title: "Install an npm package",
183
+ "q:slot": "title"
403
184
  }),
404
- /* @__PURE__ */ jsxRuntime.jsx("div", {
405
- class: "assets-grid",
406
- children: state.assets?.map((asset) => {
407
- const isImage = asset.path.match(/\.(jpg|jpeg|png|gif|svg|webp)$/i);
408
- const fileExt = asset.path.split(".").pop()?.toUpperCase();
409
- return /* @__PURE__ */ jsxRuntime.jsxs("div", {
410
- class: "asset-card",
411
- children: [
412
- isImage ? /* @__PURE__ */ jsxRuntime.jsx("div", {
413
- class: "asset-preview",
414
- children: /* @__PURE__ */ jsxRuntime.jsx("img", {
415
- width: 176,
416
- height: 176,
417
- src: asset.publicPath,
418
- alt: asset.path
419
- })
420
- }) : /* @__PURE__ */ jsxRuntime.jsx("div", {
421
- class: "file-preview",
422
- children: /* @__PURE__ */ jsxRuntime.jsx("span", {
423
- class: "file-ext",
424
- children: fileExt
425
- })
426
- }),
427
- /* @__PURE__ */ jsxRuntime.jsxs("div", {
428
- class: "asset-info",
429
- children: [
430
- /* @__PURE__ */ jsxRuntime.jsx("div", {
431
- class: "asset-path",
432
- title: asset.path,
433
- children: asset.path.split("/").pop()
434
- }),
435
- /* @__PURE__ */ jsxRuntime.jsxs("div", {
436
- class: "asset-meta",
437
- children: [
438
- /* @__PURE__ */ jsxRuntime.jsxs("span", {
439
- class: "asset-size",
440
- children: [
441
- (asset.size / 1024).toFixed(2),
442
- " KB"
443
- ]
444
- }),
445
- /* @__PURE__ */ jsxRuntime.jsx("span", {
446
- class: "asset-type",
447
- children: fileExt
448
- })
449
- ]
450
- })
451
- ]
452
- })
453
- ]
454
- }, asset.filePath);
455
- })
185
+ /* @__PURE__ */ jsxRuntime.jsx(Packages.Packages, {
186
+ "q:slot": "content"
456
187
  })
457
188
  ]
458
189
  }),
459
- state.activeTab === "components" && /* @__PURE__ */ jsxRuntime.jsx("div", {
460
- class: "tab-content",
461
- children: /* @__PURE__ */ jsxRuntime.jsx("h3", {
462
- children: "Components"
463
- })
464
- }),
465
- state.activeTab === "routes" && /* @__PURE__ */ jsxRuntime.jsxs("div", {
466
- class: "tab-content",
190
+ state.activeTab === "routes" && /* @__PURE__ */ jsxRuntime.jsxs(TabContent.TabContent, {
467
191
  children: [
468
- /* @__PURE__ */ jsxRuntime.jsx("h3", {
469
- children: "Application Routes"
192
+ /* @__PURE__ */ jsxRuntime.jsx(TabTitle.TabTitle, {
193
+ title: "Application Routes",
194
+ "q:slot": "title"
470
195
  }),
471
- /* @__PURE__ */ jsxRuntime.jsxs("div", {
472
- class: "routes-table",
473
- children: [
474
- /* @__PURE__ */ jsxRuntime.jsxs("div", {
475
- class: "table-header",
476
- children: [
477
- /* @__PURE__ */ jsxRuntime.jsx("div", {
478
- class: "col-route",
479
- children: "Route Path"
480
- }),
481
- /* @__PURE__ */ jsxRuntime.jsx("div", {
482
- class: "col-route",
483
- children: "Name"
484
- }),
485
- /* @__PURE__ */ jsxRuntime.jsx("div", {
486
- class: "col-route",
487
- children: "Middleware"
488
- }),
489
- /* @__PURE__ */ jsxRuntime.jsx("div", {
490
- class: "col-route",
491
- children: "Layout"
492
- })
493
- ]
494
- }),
495
- state.routes?.map((route, i) => {
496
- const children = route.children || [];
497
- const layout = route.relativePath !== "" && route.type === "directory" && children.find((child) => child.name.startsWith("layout"));
498
- return /* @__PURE__ */ jsxRuntime.jsxs("div", {
499
- class: "table-row",
500
- children: [
501
- /* @__PURE__ */ jsxRuntime.jsx("div", {
502
- class: "col-route",
503
- children: /* @__PURE__ */ jsxRuntime.jsx("span", {
504
- class: location.url.pathname === "/" && route.relativePath === "" || location.url.pathname === `/${route.relativePath}/` ? "active-route" : "",
505
- children: route.relativePath === "" ? "/" : `/${route.relativePath}/`
506
- })
507
- }),
508
- /* @__PURE__ */ jsxRuntime.jsx("div", {
509
- class: "col-route",
510
- children: route.name
511
- }),
512
- /* @__PURE__ */ jsxRuntime.jsx("div", {
513
- class: "col-route",
514
- children: "-"
515
- }),
516
- /* @__PURE__ */ jsxRuntime.jsx("div", {
517
- class: "col-route",
518
- children: /* @__PURE__ */ jsxRuntime.jsx("span", {
519
- class: layout && i > 0 ? "custom-layout" : "",
520
- children: layout && i > 0 ? `${route.relativePath}/layout` : "default"
521
- })
522
- })
523
- ]
524
- }, route.relativePath);
525
- })
526
- ]
196
+ /* @__PURE__ */ jsxRuntime.jsx(Routes.Routes, {
197
+ state,
198
+ "q:slot": "content"
527
199
  })
528
200
  ]
529
201
  })