jskelet 0.2.5 → 0.3.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 (106) hide show
  1. package/AGENTS.md +132 -132
  2. package/CHANGELOG.md +403 -383
  3. package/LICENSE +21 -21
  4. package/bin/jskelet.mjs +103 -103
  5. package/docs/01-baslangic.md +285 -285
  6. package/docs/02-mimari.md +293 -287
  7. package/docs/03-routing.md +486 -480
  8. package/docs/04-render-ve-sablonlar.md +490 -490
  9. package/docs/05-islands.md +482 -482
  10. package/docs/06-cache.md +1231 -1209
  11. package/docs/07-yapilandirma.md +44 -21
  12. package/docs/08-build.md +366 -366
  13. package/docs/09-dev-araclari.md +335 -335
  14. package/docs/10-dagitim.md +329 -329
  15. package/docs/11-tasima.md +1 -0
  16. package/docs/12-panel-ve-oturum.md +384 -384
  17. package/docs/README.md +105 -105
  18. package/docs/en/01-getting-started.md +292 -292
  19. package/docs/en/02-architecture.md +311 -305
  20. package/docs/en/03-routing.md +503 -497
  21. package/docs/en/04-rendering.md +504 -504
  22. package/docs/en/05-islands.md +492 -492
  23. package/docs/en/06-caching.md +1197 -1198
  24. package/docs/en/07-configuration.md +1009 -986
  25. package/docs/en/08-build.md +383 -383
  26. package/docs/en/09-dev-tools.md +342 -342
  27. package/docs/en/10-deployment.md +332 -332
  28. package/docs/en/11-migration.md +360 -359
  29. package/docs/en/12-dashboards-and-sessions.md +392 -392
  30. package/docs/en/README.md +112 -112
  31. package/package.json +102 -102
  32. package/src/build/ensure-build.mjs +15 -15
  33. package/src/build/paths.mjs +143 -143
  34. package/src/build/resolve-peer.mjs +36 -36
  35. package/src/build/tasks/client.mjs +268 -268
  36. package/src/build/tasks/css.mjs +124 -124
  37. package/src/build/tasks/fonts.mjs +146 -146
  38. package/src/build/tasks/icons.mjs +224 -224
  39. package/src/build/tasks/images.mjs +244 -244
  40. package/src/build/tasks/precompress.mjs +78 -78
  41. package/src/client/{cache-panel → admin}/i18n.js +756 -670
  42. package/src/client/{cache-panel → admin}/login.html +74 -74
  43. package/src/client/{cache-panel → admin}/panel.css +804 -756
  44. package/src/client/admin/panel.html +486 -0
  45. package/src/client/{cache-panel → admin}/panel.js +1242 -915
  46. package/src/client/devtools/report.html +185 -185
  47. package/src/client/devtools/report.js +725 -725
  48. package/src/client/dom.js +95 -95
  49. package/src/client/form.js +192 -192
  50. package/src/client/index.js +35 -35
  51. package/src/client/registry.js +297 -297
  52. package/src/client/safe-image.js +91 -91
  53. package/src/client/store.js +36 -36
  54. package/src/client/swap.js +188 -188
  55. package/src/config/defaults.js +16 -7
  56. package/src/config/index.js +38 -22
  57. package/src/config/pattern.js +107 -107
  58. package/src/http/control-flow.js +71 -71
  59. package/src/http/cookies.js +257 -257
  60. package/src/http/request-cache.js +46 -46
  61. package/src/http/request-context.js +162 -162
  62. package/src/index.js +83 -83
  63. package/src/init.mjs +221 -221
  64. package/src/log.mjs +58 -0
  65. package/src/runtime/alias-hooks.mjs +119 -119
  66. package/src/runtime/register.mjs +4 -4
  67. package/src/server/admin/actions.js +229 -0
  68. package/src/server/admin/auth.js +125 -0
  69. package/src/server/admin/event-log.js +151 -0
  70. package/src/server/admin/gate.js +209 -0
  71. package/src/server/admin/inventory.js +188 -0
  72. package/src/server/admin/mount.js +56 -0
  73. package/src/server/admin/router.js +216 -0
  74. package/src/server/admin/snapshot.js +126 -0
  75. package/src/server/assets.js +147 -147
  76. package/src/server/cache-deps.js +42 -42
  77. package/src/server/cloudflare.js +607 -607
  78. package/src/server/create-app.js +295 -291
  79. package/src/server/data-cache.js +462 -462
  80. package/src/server/dev/report.js +369 -369
  81. package/src/server/dev/socket.js +170 -170
  82. package/src/server/dev/version-check.mjs +139 -139
  83. package/src/server/html-cache.js +817 -817
  84. package/src/server/metadata.js +102 -102
  85. package/src/server/middleware/compression.js +205 -205
  86. package/src/server/middleware/csrf.js +134 -134
  87. package/src/server/middleware/dev-gate.js +62 -62
  88. package/src/server/middleware/headers.js +37 -37
  89. package/src/server/middleware/redirects.js +32 -32
  90. package/src/server/middleware/static-precompressed.js +100 -100
  91. package/src/server/middleware/trailing-slash.js +53 -0
  92. package/src/server/middleware/upstream-proxy.js +141 -141
  93. package/src/server/prewarm.js +601 -601
  94. package/src/server/redis.js +569 -569
  95. package/src/server/router.js +128 -128
  96. package/src/server/status-page.js +164 -164
  97. package/src/server/upstream-limiter.js +376 -376
  98. package/src/server/upstream-tracking.js +166 -166
  99. package/src/start.mjs +7 -7
  100. package/src/templates/layout.ejs +44 -44
  101. package/src/version.mjs +31 -31
  102. package/src/views/components/loader.js +85 -85
  103. package/src/views/helpers/html.js +102 -102
  104. package/src/views/helpers/tags.js +245 -245
  105. package/src/client/cache-panel/panel.html +0 -308
  106. package/src/server/cache-panel.js +0 -759
package/src/client/devtools/report.html CHANGED
@@ -1,185 +1,185 @@
1
- <!doctype html>
2
- <html lang="tr">
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1" />
6
- <meta name="robots" content="noindex" />
7
- <title>JSkelet Dev · Detaylı İnceleme</title>
8
- <link rel="icon" href="/__jskelet/dev/logo.png" />
9
- <style>
10
- :root {
11
- --bg: #0a0c10;
12
- --panel: #10131a;
13
- --surface: rgba(255, 255, 255, 0.045);
14
- --surface-hover: rgba(255, 255, 255, 0.08);
15
- --line: rgba(255, 255, 255, 0.09);
16
- --text: #eef1f5;
17
- --muted: #8b95a3;
18
- --good: #34d399;
19
- --mid: #fbbf24;
20
- --bad: #fb7185;
21
- --info: #60a5fa;
22
- color-scheme: dark;
23
- }
24
-
25
- * { box-sizing: border-box; }
26
-
27
- body {
28
- margin: 0;
29
- background:
30
- radial-gradient(1200px 600px at 20% -10%, #171c25 0%, transparent 60%),
31
- var(--bg);
32
- color: var(--text);
33
- font: 400 13px/1.6 ui-sans-serif, system-ui, -apple-system, sans-serif;
34
- min-height: 100vh;
35
- }
36
-
37
- a { color: inherit; }
38
-
39
- header {
40
- position: sticky; top: 0; z-index: 10;
41
- display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
42
- padding: 14px 24px;
43
- background: rgba(10, 12, 16, 0.86);
44
- border-bottom: 1px solid var(--line);
45
- backdrop-filter: blur(10px);
46
- }
47
- header img { width: 24px; height: 24px; object-fit: contain; }
48
- header h1 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
49
- header .spacer { flex: 1; }
50
-
51
- .pill {
52
- display: inline-flex; align-items: center; gap: 7px;
53
- padding: 4px 10px; border-radius: 999px;
54
- border: 1px solid var(--line); background: var(--surface);
55
- color: var(--muted); font-size: 11.5px; font-weight: 600;
56
- }
57
- .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
58
-
59
- button, .btn {
60
- display: inline-flex; align-items: center; gap: 7px;
61
- background: var(--surface); border: 1px solid var(--line); color: var(--text);
62
- border-radius: 9px; padding: 6px 11px; font-size: 12px; font-weight: 600;
63
- cursor: pointer; font-family: inherit; text-decoration: none;
64
- transition: background 0.15s ease, border-color 0.15s ease;
65
- }
66
- button:hover, .btn:hover { background: var(--surface-hover); }
67
- button[aria-pressed="true"] { border-color: rgba(96, 165, 250, 0.5); color: #cfe3ff; }
68
- button.danger { color: #ffc9d2; border-color: rgba(251, 113, 133, 0.28); background: rgba(251, 113, 133, 0.1); }
69
- button.danger:hover { border-color: rgba(251, 113, 133, 0.55); background: rgba(251, 113, 133, 0.22); }
70
-
71
- nav {
72
- display: flex; gap: 6px; flex-wrap: wrap;
73
- padding: 12px 24px 0;
74
- }
75
- nav button {
76
- border-radius: 999px; color: var(--muted); background: transparent;
77
- border-color: transparent;
78
- }
79
- nav button:hover { color: var(--text); background: var(--surface); }
80
- nav button[aria-selected="true"] {
81
- color: #fff; background: var(--surface-hover); border-color: var(--line);
82
- }
83
-
84
- main { padding: 18px 24px 60px; }
85
- section[hidden] { display: none; }
86
-
87
- h2 {
88
- margin: 26px 0 12px; font-size: 11px; color: var(--muted);
89
- text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
90
- }
91
- h2:first-child { margin-top: 6px; }
92
- h2 .note { text-transform: none; letter-spacing: 0; font-weight: 600; color: #6c7684; margin-left: 8px; }
93
-
94
- .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
95
- .metric {
96
- background: var(--panel); border: 1px solid var(--line);
97
- border-radius: 14px; padding: 13px 15px 15px;
98
- }
99
- .metric .label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
100
- .metric .value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
101
- .metric .sub { color: var(--muted); font-size: 11px; }
102
- .metric .bar { margin-top: 8px; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
103
- .metric .bar span { display: block; height: 100%; background: var(--muted); }
104
-
105
- .good { color: var(--good); } .mid { color: var(--mid); } .bad { color: var(--bad); }
106
- .bar span.good { background: var(--good); } .bar span.mid { background: var(--mid); } .bar span.bad { background: var(--bad); }
107
-
108
- .card {
109
- background: var(--panel); border: 1px solid var(--line);
110
- border-radius: 14px; padding: 14px 16px; margin-bottom: 12px;
111
- }
112
-
113
- .toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
114
- input[type="search"] {
115
- flex: 1; min-width: 220px;
116
- background: var(--surface); border: 1px solid var(--line); color: var(--text);
117
- border-radius: 9px; padding: 7px 11px; font: inherit; font-size: 12px;
118
- }
119
- input[type="search"]::placeholder { color: #61697a; }
120
-
121
- .table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
122
- table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
123
- th, td { text-align: right; padding: 9px 12px; white-space: nowrap; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
124
- th:first-child, td:first-child { text-align: left; }
125
- th {
126
- position: sticky; top: 0; z-index: 1;
127
- background: #141821; color: var(--muted); font-size: 10.5px;
128
- text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; user-select: none;
129
- }
130
- th:hover { color: var(--text); }
131
- th[data-dir]::after { content: " ↓"; }
132
- th[data-dir="asc"]::after { content: " ↑"; }
133
- tbody tr:hover { background: var(--surface); }
134
- tbody tr.clickable { cursor: pointer; }
135
- tbody tr.selected { background: rgba(96, 165, 250, 0.1); }
136
- td.path { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11.5px; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
137
- td.path a { text-decoration: none; border-bottom: 1px solid transparent; }
138
- td.path a:hover { border-bottom-color: rgba(255, 255, 255, 0.35); }
139
-
140
- .tag {
141
- border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px;
142
- font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
143
- color: var(--muted);
144
- }
145
- .tag.entry { color: #cfe3ff; border-color: rgba(96, 165, 250, 0.4); }
146
- .tag.chunk { color: #ffeec2; border-color: rgba(251, 191, 36, 0.35); }
147
-
148
- .split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: start; }
149
- @media (max-width: 1000px) { .split { grid-template-columns: 1fr; } }
150
-
151
- .bars { display: flex; flex-direction: column; gap: 7px; }
152
- .barrow { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 10px; align-items: center; }
153
- .barrow .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; color: #cfd6de; }
154
- .barrow .track { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; margin-top: -4px; }
155
- .barrow .track span { display: block; height: 100%; background: var(--info); }
156
- .barrow .size { text-align: right; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
157
-
158
- .empty {
159
- color: #5f6874; padding: 18px; text-align: center;
160
- background: var(--panel); border: 1px dashed var(--line); border-radius: 14px;
161
- }
162
- code { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11.5px; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px; }
163
- .hint { color: var(--muted); font-size: 11.5px; }
164
- .status { border-radius: 6px; padding: 1px 6px; font-size: 10.5px; font-weight: 700; background: rgba(52, 211, 153, 0.14); color: var(--good); }
165
- .status.warn { background: rgba(251, 191, 36, 0.14); color: var(--mid); }
166
- .status.bad { background: rgba(251, 113, 133, 0.14); color: var(--bad); }
167
- </style>
168
- </head>
169
- <body>
170
- <header>
171
- <img src="/__jskelet/dev/logo.png" alt="" />
172
- <h1>JSkelet Dev · Detaylı İnceleme</h1>
173
- <span class="pill"><span class="dot"></span><span data-part="status">yükleniyor…</span></span>
174
- <span class="spacer"></span>
175
- <button data-action="refresh">Yenile</button>
176
- <button data-action="auto" aria-pressed="false">Otomatik yenile</button>
177
- <button class="danger" data-action="reset">Ölçümleri sıfırla</button>
178
- </header>
179
-
180
- <nav data-part="tabs"></nav>
181
- <main data-part="main"></main>
182
-
183
- <script type="module" src="/__jskelet/dev/report.js"></script>
184
- </body>
185
- </html>
1
+ <!doctype html>
2
+ <html lang="tr">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <meta name="robots" content="noindex" />
7
+ <title>JSkelet Dev · Detaylı İnceleme</title>
8
+ <link rel="icon" href="/__jskelet/dev/logo.png" />
9
+ <style>
10
+ :root {
11
+ --bg: #0a0c10;
12
+ --panel: #10131a;
13
+ --surface: rgba(255, 255, 255, 0.045);
14
+ --surface-hover: rgba(255, 255, 255, 0.08);
15
+ --line: rgba(255, 255, 255, 0.09);
16
+ --text: #eef1f5;
17
+ --muted: #8b95a3;
18
+ --good: #34d399;
19
+ --mid: #fbbf24;
20
+ --bad: #fb7185;
21
+ --info: #60a5fa;
22
+ color-scheme: dark;
23
+ }
24
+
25
+ * { box-sizing: border-box; }
26
+
27
+ body {
28
+ margin: 0;
29
+ background:
30
+ radial-gradient(1200px 600px at 20% -10%, #171c25 0%, transparent 60%),
31
+ var(--bg);
32
+ color: var(--text);
33
+ font: 400 13px/1.6 ui-sans-serif, system-ui, -apple-system, sans-serif;
34
+ min-height: 100vh;
35
+ }
36
+
37
+ a { color: inherit; }
38
+
39
+ header {
40
+ position: sticky; top: 0; z-index: 10;
41
+ display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
42
+ padding: 14px 24px;
43
+ background: rgba(10, 12, 16, 0.86);
44
+ border-bottom: 1px solid var(--line);
45
+ backdrop-filter: blur(10px);
46
+ }
47
+ header img { width: 24px; height: 24px; object-fit: contain; }
48
+ header h1 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
49
+ header .spacer { flex: 1; }
50
+
51
+ .pill {
52
+ display: inline-flex; align-items: center; gap: 7px;
53
+ padding: 4px 10px; border-radius: 999px;
54
+ border: 1px solid var(--line); background: var(--surface);
55
+ color: var(--muted); font-size: 11.5px; font-weight: 600;
56
+ }
57
+ .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
58
+
59
+ button, .btn {
60
+ display: inline-flex; align-items: center; gap: 7px;
61
+ background: var(--surface); border: 1px solid var(--line); color: var(--text);
62
+ border-radius: 9px; padding: 6px 11px; font-size: 12px; font-weight: 600;
63
+ cursor: pointer; font-family: inherit; text-decoration: none;
64
+ transition: background 0.15s ease, border-color 0.15s ease;
65
+ }
66
+ button:hover, .btn:hover { background: var(--surface-hover); }
67
+ button[aria-pressed="true"] { border-color: rgba(96, 165, 250, 0.5); color: #cfe3ff; }
68
+ button.danger { color: #ffc9d2; border-color: rgba(251, 113, 133, 0.28); background: rgba(251, 113, 133, 0.1); }
69
+ button.danger:hover { border-color: rgba(251, 113, 133, 0.55); background: rgba(251, 113, 133, 0.22); }
70
+
71
+ nav {
72
+ display: flex; gap: 6px; flex-wrap: wrap;
73
+ padding: 12px 24px 0;
74
+ }
75
+ nav button {
76
+ border-radius: 999px; color: var(--muted); background: transparent;
77
+ border-color: transparent;
78
+ }
79
+ nav button:hover { color: var(--text); background: var(--surface); }
80
+ nav button[aria-selected="true"] {
81
+ color: #fff; background: var(--surface-hover); border-color: var(--line);
82
+ }
83
+
84
+ main { padding: 18px 24px 60px; }
85
+ section[hidden] { display: none; }
86
+
87
+ h2 {
88
+ margin: 26px 0 12px; font-size: 11px; color: var(--muted);
89
+ text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
90
+ }
91
+ h2:first-child { margin-top: 6px; }
92
+ h2 .note { text-transform: none; letter-spacing: 0; font-weight: 600; color: #6c7684; margin-left: 8px; }
93
+
94
+ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
95
+ .metric {
96
+ background: var(--panel); border: 1px solid var(--line);
97
+ border-radius: 14px; padding: 13px 15px 15px;
98
+ }
99
+ .metric .label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
100
+ .metric .value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
101
+ .metric .sub { color: var(--muted); font-size: 11px; }
102
+ .metric .bar { margin-top: 8px; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
103
+ .metric .bar span { display: block; height: 100%; background: var(--muted); }
104
+
105
+ .good { color: var(--good); } .mid { color: var(--mid); } .bad { color: var(--bad); }
106
+ .bar span.good { background: var(--good); } .bar span.mid { background: var(--mid); } .bar span.bad { background: var(--bad); }
107
+
108
+ .card {
109
+ background: var(--panel); border: 1px solid var(--line);
110
+ border-radius: 14px; padding: 14px 16px; margin-bottom: 12px;
111
+ }
112
+
113
+ .toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
114
+ input[type="search"] {
115
+ flex: 1; min-width: 220px;
116
+ background: var(--surface); border: 1px solid var(--line); color: var(--text);
117
+ border-radius: 9px; padding: 7px 11px; font: inherit; font-size: 12px;
118
+ }
119
+ input[type="search"]::placeholder { color: #61697a; }
120
+
121
+ .table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
122
+ table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
123
+ th, td { text-align: right; padding: 9px 12px; white-space: nowrap; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
124
+ th:first-child, td:first-child { text-align: left; }
125
+ th {
126
+ position: sticky; top: 0; z-index: 1;
127
+ background: #141821; color: var(--muted); font-size: 10.5px;
128
+ text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; user-select: none;
129
+ }
130
+ th:hover { color: var(--text); }
131
+ th[data-dir]::after { content: " ↓"; }
132
+ th[data-dir="asc"]::after { content: " ↑"; }
133
+ tbody tr:hover { background: var(--surface); }
134
+ tbody tr.clickable { cursor: pointer; }
135
+ tbody tr.selected { background: rgba(96, 165, 250, 0.1); }
136
+ td.path { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11.5px; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
137
+ td.path a { text-decoration: none; border-bottom: 1px solid transparent; }
138
+ td.path a:hover { border-bottom-color: rgba(255, 255, 255, 0.35); }
139
+
140
+ .tag {
141
+ border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px;
142
+ font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
143
+ color: var(--muted);
144
+ }
145
+ .tag.entry { color: #cfe3ff; border-color: rgba(96, 165, 250, 0.4); }
146
+ .tag.chunk { color: #ffeec2; border-color: rgba(251, 191, 36, 0.35); }
147
+
148
+ .split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: start; }
149
+ @media (max-width: 1000px) { .split { grid-template-columns: 1fr; } }
150
+
151
+ .bars { display: flex; flex-direction: column; gap: 7px; }
152
+ .barrow { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 10px; align-items: center; }
153
+ .barrow .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; color: #cfd6de; }
154
+ .barrow .track { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; margin-top: -4px; }
155
+ .barrow .track span { display: block; height: 100%; background: var(--info); }
156
+ .barrow .size { text-align: right; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
157
+
158
+ .empty {
159
+ color: #5f6874; padding: 18px; text-align: center;
160
+ background: var(--panel); border: 1px dashed var(--line); border-radius: 14px;
161
+ }
162
+ code { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11.5px; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px; }
163
+ .hint { color: var(--muted); font-size: 11.5px; }
164
+ .status { border-radius: 6px; padding: 1px 6px; font-size: 10.5px; font-weight: 700; background: rgba(52, 211, 153, 0.14); color: var(--good); }
165
+ .status.warn { background: rgba(251, 191, 36, 0.14); color: var(--mid); }
166
+ .status.bad { background: rgba(251, 113, 133, 0.14); color: var(--bad); }
167
+ </style>
168
+ </head>
169
+ <body>
170
+ <header>
171
+ <img src="/__jskelet/dev/logo.png" alt="" />
172
+ <h1>JSkelet Dev · Detaylı İnceleme</h1>
173
+ <span class="pill"><span class="dot"></span><span data-part="status">yükleniyor…</span></span>
174
+ <span class="spacer"></span>
175
+ <button data-action="refresh">Yenile</button>
176
+ <button data-action="auto" aria-pressed="false">Otomatik yenile</button>
177
+ <button class="danger" data-action="reset">Ölçümleri sıfırla</button>
178
+ </header>
179
+
180
+ <nav data-part="tabs"></nav>
181
+ <main data-part="main"></main>
182
+
183
+ <script type="module" src="/__jskelet/dev/report.js"></script>
184
+ </body>
185
+ </html>