jskelet 0.2.4 → 0.2.5

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 (91) hide show
  1. package/AGENTS.md +132 -132
  2. package/CHANGELOG.md +8 -0
  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 +287 -287
  7. package/docs/03-routing.md +480 -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 +1209 -1209
  11. package/docs/08-build.md +366 -366
  12. package/docs/09-dev-araclari.md +335 -335
  13. package/docs/10-dagitim.md +329 -329
  14. package/docs/12-panel-ve-oturum.md +384 -384
  15. package/docs/README.md +105 -105
  16. package/docs/en/01-getting-started.md +292 -292
  17. package/docs/en/02-architecture.md +305 -305
  18. package/docs/en/03-routing.md +497 -497
  19. package/docs/en/04-rendering.md +504 -504
  20. package/docs/en/05-islands.md +492 -492
  21. package/docs/en/06-caching.md +1239 -1239
  22. package/docs/en/07-configuration.md +986 -986
  23. package/docs/en/08-build.md +383 -383
  24. package/docs/en/09-dev-tools.md +342 -342
  25. package/docs/en/10-deployment.md +332 -332
  26. package/docs/en/11-migration.md +359 -359
  27. package/docs/en/12-dashboards-and-sessions.md +392 -392
  28. package/docs/en/README.md +112 -112
  29. package/package.json +102 -102
  30. package/src/build/ensure-build.mjs +15 -15
  31. package/src/build/paths.mjs +143 -143
  32. package/src/build/resolve-peer.mjs +36 -36
  33. package/src/build/tasks/client.mjs +268 -268
  34. package/src/build/tasks/css.mjs +124 -124
  35. package/src/build/tasks/fonts.mjs +146 -146
  36. package/src/build/tasks/icons.mjs +224 -224
  37. package/src/build/tasks/images.mjs +244 -244
  38. package/src/build/tasks/precompress.mjs +78 -78
  39. package/src/client/cache-panel/i18n.js +670 -670
  40. package/src/client/cache-panel/login.html +74 -74
  41. package/src/client/cache-panel/panel.css +756 -756
  42. package/src/client/cache-panel/panel.html +308 -308
  43. package/src/client/cache-panel/panel.js +915 -915
  44. package/src/client/devtools/report.html +185 -185
  45. package/src/client/devtools/report.js +725 -725
  46. package/src/client/dom.js +95 -95
  47. package/src/client/form.js +192 -192
  48. package/src/client/index.js +35 -35
  49. package/src/client/registry.js +297 -297
  50. package/src/client/safe-image.js +91 -91
  51. package/src/client/store.js +36 -36
  52. package/src/client/swap.js +188 -188
  53. package/src/config/pattern.js +107 -107
  54. package/src/http/control-flow.js +71 -71
  55. package/src/http/cookies.js +257 -257
  56. package/src/http/request-cache.js +46 -46
  57. package/src/http/request-context.js +162 -162
  58. package/src/index.js +83 -83
  59. package/src/init.mjs +221 -221
  60. package/src/runtime/alias-hooks.mjs +119 -119
  61. package/src/runtime/register.mjs +4 -4
  62. package/src/server/assets.js +147 -147
  63. package/src/server/cache-deps.js +42 -42
  64. package/src/server/cache-panel.js +759 -759
  65. package/src/server/cloudflare.js +607 -595
  66. package/src/server/create-app.js +291 -291
  67. package/src/server/data-cache.js +462 -462
  68. package/src/server/dev/report.js +369 -369
  69. package/src/server/dev/socket.js +170 -170
  70. package/src/server/dev/version-check.mjs +139 -139
  71. package/src/server/html-cache.js +817 -817
  72. package/src/server/metadata.js +102 -102
  73. package/src/server/middleware/compression.js +205 -205
  74. package/src/server/middleware/csrf.js +134 -134
  75. package/src/server/middleware/dev-gate.js +62 -62
  76. package/src/server/middleware/headers.js +37 -37
  77. package/src/server/middleware/redirects.js +32 -32
  78. package/src/server/middleware/static-precompressed.js +100 -100
  79. package/src/server/middleware/upstream-proxy.js +141 -141
  80. package/src/server/prewarm.js +601 -601
  81. package/src/server/redis.js +569 -569
  82. package/src/server/router.js +128 -128
  83. package/src/server/status-page.js +164 -164
  84. package/src/server/upstream-limiter.js +376 -376
  85. package/src/server/upstream-tracking.js +166 -166
  86. package/src/start.mjs +7 -7
  87. package/src/templates/layout.ejs +44 -44
  88. package/src/version.mjs +31 -31
  89. package/src/views/components/loader.js +85 -85
  90. package/src/views/helpers/html.js +102 -102
  91. package/src/views/helpers/tags.js +245 -245
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>