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