@agent-scope/site 1.17.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.
- package/dist/index.cjs +1144 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +11 -0
- package/dist/index.d.ts +11 -0
- package/dist/index.js +1142 -0
- package/dist/index.js.map +1 -0
- package/package.json +41 -0
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,1144 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var promises = require('fs/promises');
|
|
4
|
+
var path = require('path');
|
|
5
|
+
|
|
6
|
+
// src/builder.ts
|
|
7
|
+
function normalizeOptions(options) {
|
|
8
|
+
return {
|
|
9
|
+
inputDir: options?.inputDir ?? ".reactscope",
|
|
10
|
+
outputDir: options?.outputDir ?? ".reactscope/site",
|
|
11
|
+
basePath: options?.basePath ?? "/",
|
|
12
|
+
compliancePath: options?.compliancePath ?? "",
|
|
13
|
+
title: options?.title ?? "Scope \u2014 Component Gallery"
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
async function readJsonFile(filePath) {
|
|
17
|
+
const content = await promises.readFile(filePath, "utf-8");
|
|
18
|
+
return JSON.parse(content);
|
|
19
|
+
}
|
|
20
|
+
async function readSiteData(options) {
|
|
21
|
+
const manifestPath = path.join(options.inputDir, "manifest.json");
|
|
22
|
+
const manifest = await readJsonFile(manifestPath);
|
|
23
|
+
const renders = /* @__PURE__ */ new Map();
|
|
24
|
+
const rendersDir = path.join(options.inputDir, "renders");
|
|
25
|
+
try {
|
|
26
|
+
const entries = await promises.readdir(rendersDir);
|
|
27
|
+
const jsonFiles = entries.filter((f) => f.endsWith(".json"));
|
|
28
|
+
await Promise.all(
|
|
29
|
+
jsonFiles.map(async (file) => {
|
|
30
|
+
const componentName = file.replace(/\.json$/, "");
|
|
31
|
+
const filePath = path.join(rendersDir, file);
|
|
32
|
+
try {
|
|
33
|
+
const renderData = await readJsonFile(filePath);
|
|
34
|
+
renders.set(componentName, renderData);
|
|
35
|
+
} catch (err) {
|
|
36
|
+
console.warn(
|
|
37
|
+
`[scope/site] Warning: could not read render file ${filePath}:`,
|
|
38
|
+
err instanceof Error ? err.message : String(err)
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
})
|
|
42
|
+
);
|
|
43
|
+
} catch {
|
|
44
|
+
}
|
|
45
|
+
let complianceBatch;
|
|
46
|
+
if (options.compliancePath) {
|
|
47
|
+
try {
|
|
48
|
+
complianceBatch = await readJsonFile(options.compliancePath);
|
|
49
|
+
} catch (err) {
|
|
50
|
+
console.warn(
|
|
51
|
+
`[scope/site] Warning: could not read compliance file ${options.compliancePath}:`,
|
|
52
|
+
err instanceof Error ? err.message : String(err)
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
return {
|
|
57
|
+
manifest,
|
|
58
|
+
renders,
|
|
59
|
+
complianceBatch,
|
|
60
|
+
options
|
|
61
|
+
};
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
// src/utils.ts
|
|
65
|
+
function escapeHtml(str) {
|
|
66
|
+
return str.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
|
67
|
+
}
|
|
68
|
+
function slugify(name) {
|
|
69
|
+
return name.replace(/([A-Z])/g, (m) => `-${m.toLowerCase()}`).replace(/^-/, "").replace(/[^a-z0-9-]/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
|
|
70
|
+
}
|
|
71
|
+
function renderDOMTree(node, depth = 0) {
|
|
72
|
+
const indent = " ".repeat(depth);
|
|
73
|
+
const attrs = Object.entries(node.attrs).map(
|
|
74
|
+
([k, v]) => ` <span class="dom-attr-name">${escapeHtml(k)}</span>=<span class="dom-attr-value">"${escapeHtml(v)}"</span>`
|
|
75
|
+
).join("");
|
|
76
|
+
const hasChildren = node.children.length > 0;
|
|
77
|
+
const hasText = node.text !== void 0 && node.text.trim().length > 0;
|
|
78
|
+
if (!hasChildren && !hasText) {
|
|
79
|
+
return `${indent}<span class="dom-tag-open"><${escapeHtml(node.tag)}${attrs} /></span>
|
|
80
|
+
`;
|
|
81
|
+
}
|
|
82
|
+
const childrenHtml = node.children.map((child) => renderDOMTree(child, depth + 1)).join("");
|
|
83
|
+
const textHtml = hasText ? `${indent} <span class="dom-text">${escapeHtml(node.text ?? "")}</span>
|
|
84
|
+
` : "";
|
|
85
|
+
return `<details class="dom-node" ${depth < 2 ? "open" : ""}>
|
|
86
|
+
${indent}<summary><span class="dom-tag-open"><${escapeHtml(node.tag)}${attrs}></span></summary>
|
|
87
|
+
${textHtml}${childrenHtml}${indent}<span class="dom-tag-open"></${escapeHtml(node.tag)}></span>
|
|
88
|
+
</details>`;
|
|
89
|
+
}
|
|
90
|
+
function propTableRow(name, prop) {
|
|
91
|
+
const valuesHtml = prop.values && prop.values.length > 0 ? `<br><span style="color:var(--color-muted);font-size:11px">${prop.values.map((v) => escapeHtml(v)).join(" | ")}</span>` : "";
|
|
92
|
+
const defaultHtml = prop.default !== void 0 ? escapeHtml(prop.default) : "\u2014";
|
|
93
|
+
return `<tr>
|
|
94
|
+
<td><span class="prop-name">${escapeHtml(name)}</span></td>
|
|
95
|
+
<td><span class="prop-type">${escapeHtml(prop.type)}</span>${valuesHtml}</td>
|
|
96
|
+
<td>${prop.required ? '<span class="prop-required">required</span>' : '<span style="color:var(--color-muted)">optional</span>'}</td>
|
|
97
|
+
<td><span class="prop-default">${defaultHtml}</span></td>
|
|
98
|
+
</tr>`;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
// src/css.ts
|
|
102
|
+
function generateCSS() {
|
|
103
|
+
const css = `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=JetBrains+Mono:wght@400;700&display=swap');
|
|
104
|
+
|
|
105
|
+
:root {
|
|
106
|
+
--color-text: #0f0f0f;
|
|
107
|
+
--color-muted: #6b7280;
|
|
108
|
+
--color-border: #e5e7eb;
|
|
109
|
+
--color-bg: #ffffff;
|
|
110
|
+
--color-bg-subtle: #f9fafb;
|
|
111
|
+
--color-bg-code: #1a1a2e;
|
|
112
|
+
--color-accent: #2563eb;
|
|
113
|
+
--color-success: #16a34a;
|
|
114
|
+
--color-warn: #d97706;
|
|
115
|
+
--color-error: #dc2626;
|
|
116
|
+
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
|
|
117
|
+
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
|
118
|
+
--radius: 6px;
|
|
119
|
+
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
|
|
120
|
+
--shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
*, *::before, *::after { box-sizing: border-box; }
|
|
124
|
+
|
|
125
|
+
body {
|
|
126
|
+
font-family: var(--font-body);
|
|
127
|
+
font-size: 14px;
|
|
128
|
+
line-height: 1.6;
|
|
129
|
+
color: var(--color-text);
|
|
130
|
+
background: var(--color-bg);
|
|
131
|
+
margin: 0;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
/* Top nav */
|
|
135
|
+
.top-nav {
|
|
136
|
+
position: sticky;
|
|
137
|
+
top: 0;
|
|
138
|
+
z-index: 100;
|
|
139
|
+
background: var(--color-bg);
|
|
140
|
+
border-bottom: 1px solid var(--color-border);
|
|
141
|
+
height: 52px;
|
|
142
|
+
display: flex;
|
|
143
|
+
align-items: center;
|
|
144
|
+
padding: 0 24px;
|
|
145
|
+
gap: 16px;
|
|
146
|
+
}
|
|
147
|
+
.top-nav .site-title { font-weight: 600; font-size: 15px; text-decoration: none; color: var(--color-text); }
|
|
148
|
+
.top-nav .spacer { flex: 1; }
|
|
149
|
+
.search-box {
|
|
150
|
+
border: 1px solid var(--color-border);
|
|
151
|
+
border-radius: var(--radius);
|
|
152
|
+
padding: 6px 12px;
|
|
153
|
+
font-family: var(--font-body);
|
|
154
|
+
font-size: 13px;
|
|
155
|
+
width: 240px;
|
|
156
|
+
outline: none;
|
|
157
|
+
background: var(--color-bg-subtle);
|
|
158
|
+
}
|
|
159
|
+
.search-box:focus { border-color: var(--color-accent); background: var(--color-bg); }
|
|
160
|
+
|
|
161
|
+
/* Page layout */
|
|
162
|
+
.page-layout {
|
|
163
|
+
display: flex;
|
|
164
|
+
min-height: calc(100vh - 52px);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
/* Left sidebar (component list) */
|
|
168
|
+
.sidebar {
|
|
169
|
+
width: 220px;
|
|
170
|
+
min-width: 220px;
|
|
171
|
+
border-right: 1px solid var(--color-border);
|
|
172
|
+
padding: 16px 0;
|
|
173
|
+
position: sticky;
|
|
174
|
+
top: 52px;
|
|
175
|
+
height: calc(100vh - 52px);
|
|
176
|
+
overflow-y: auto;
|
|
177
|
+
}
|
|
178
|
+
.sidebar-heading {
|
|
179
|
+
font-size: 11px;
|
|
180
|
+
font-weight: 600;
|
|
181
|
+
letter-spacing: 0.06em;
|
|
182
|
+
text-transform: uppercase;
|
|
183
|
+
color: var(--color-muted);
|
|
184
|
+
padding: 4px 16px 8px;
|
|
185
|
+
}
|
|
186
|
+
.sidebar a {
|
|
187
|
+
display: block;
|
|
188
|
+
padding: 5px 16px;
|
|
189
|
+
font-size: 13px;
|
|
190
|
+
color: var(--color-text);
|
|
191
|
+
text-decoration: none;
|
|
192
|
+
border-radius: 0;
|
|
193
|
+
}
|
|
194
|
+
.sidebar a:hover { background: var(--color-bg-subtle); }
|
|
195
|
+
.sidebar a.active { color: var(--color-accent); font-weight: 500; }
|
|
196
|
+
|
|
197
|
+
/* Main content */
|
|
198
|
+
.main-content {
|
|
199
|
+
flex: 1;
|
|
200
|
+
min-width: 0;
|
|
201
|
+
display: flex;
|
|
202
|
+
}
|
|
203
|
+
.content-body {
|
|
204
|
+
flex: 1;
|
|
205
|
+
min-width: 0;
|
|
206
|
+
padding: 32px 40px;
|
|
207
|
+
max-width: 900px;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
/* On this page nav (right side) */
|
|
211
|
+
.on-this-page {
|
|
212
|
+
width: 200px;
|
|
213
|
+
min-width: 200px;
|
|
214
|
+
padding: 32px 16px;
|
|
215
|
+
position: sticky;
|
|
216
|
+
top: 52px;
|
|
217
|
+
height: calc(100vh - 52px);
|
|
218
|
+
overflow-y: auto;
|
|
219
|
+
}
|
|
220
|
+
.on-this-page h4 {
|
|
221
|
+
font-size: 11px;
|
|
222
|
+
font-weight: 600;
|
|
223
|
+
letter-spacing: 0.06em;
|
|
224
|
+
text-transform: uppercase;
|
|
225
|
+
color: var(--color-muted);
|
|
226
|
+
margin: 0 0 8px;
|
|
227
|
+
}
|
|
228
|
+
.on-this-page a {
|
|
229
|
+
display: block;
|
|
230
|
+
padding: 3px 0;
|
|
231
|
+
font-size: 12px;
|
|
232
|
+
color: var(--color-muted);
|
|
233
|
+
text-decoration: none;
|
|
234
|
+
}
|
|
235
|
+
.on-this-page a:hover { color: var(--color-text); }
|
|
236
|
+
|
|
237
|
+
/* Component header */
|
|
238
|
+
.component-header { margin-bottom: 32px; }
|
|
239
|
+
.component-header h1 { font-size: 28px; font-weight: 700; margin: 0 0 8px; }
|
|
240
|
+
.component-header .meta {
|
|
241
|
+
display: flex;
|
|
242
|
+
gap: 8px;
|
|
243
|
+
align-items: center;
|
|
244
|
+
flex-wrap: wrap;
|
|
245
|
+
margin-bottom: 8px;
|
|
246
|
+
}
|
|
247
|
+
.badge {
|
|
248
|
+
display: inline-flex;
|
|
249
|
+
align-items: center;
|
|
250
|
+
padding: 2px 8px;
|
|
251
|
+
border-radius: 999px;
|
|
252
|
+
font-size: 11px;
|
|
253
|
+
font-weight: 500;
|
|
254
|
+
border: 1px solid var(--color-border);
|
|
255
|
+
color: var(--color-muted);
|
|
256
|
+
background: var(--color-bg-subtle);
|
|
257
|
+
}
|
|
258
|
+
.badge.complex { border-color: #fbbf24; color: #92400e; background: #fffbeb; }
|
|
259
|
+
.badge.simple { border-color: #6ee7b7; color: #065f46; background: #ecfdf5; }
|
|
260
|
+
.badge.memoized { border-color: #a5b4fc; color: #3730a3; background: #eef2ff; }
|
|
261
|
+
|
|
262
|
+
.filepath {
|
|
263
|
+
font-family: var(--font-mono);
|
|
264
|
+
font-size: 12px;
|
|
265
|
+
color: var(--color-muted);
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
/* Sections */
|
|
269
|
+
.section {
|
|
270
|
+
padding: 32px 0;
|
|
271
|
+
border-bottom: 1px solid var(--color-border);
|
|
272
|
+
}
|
|
273
|
+
.section:last-child { border-bottom: none; }
|
|
274
|
+
.section-header { margin-bottom: 20px; }
|
|
275
|
+
.section-header h2 {
|
|
276
|
+
font-size: 18px;
|
|
277
|
+
font-weight: 600;
|
|
278
|
+
margin: 0 0 4px;
|
|
279
|
+
}
|
|
280
|
+
.section-header p { color: var(--color-muted); margin: 0; font-size: 13px; }
|
|
281
|
+
|
|
282
|
+
/* Not generated placeholder */
|
|
283
|
+
.not-generated {
|
|
284
|
+
background: var(--color-bg-subtle);
|
|
285
|
+
border: 1px dashed var(--color-border);
|
|
286
|
+
border-radius: var(--radius);
|
|
287
|
+
padding: 32px;
|
|
288
|
+
text-align: center;
|
|
289
|
+
color: var(--color-muted);
|
|
290
|
+
font-size: 13px;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
/* Render preview */
|
|
294
|
+
.render-preview {
|
|
295
|
+
border: 1px solid var(--color-border);
|
|
296
|
+
border-radius: var(--radius);
|
|
297
|
+
overflow: hidden;
|
|
298
|
+
background: #f8f8f8;
|
|
299
|
+
display: inline-block;
|
|
300
|
+
max-width: 100%;
|
|
301
|
+
}
|
|
302
|
+
.render-preview img { display: block; max-width: 100%; }
|
|
303
|
+
|
|
304
|
+
/* Props table */
|
|
305
|
+
.props-table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
|
306
|
+
.props-table th {
|
|
307
|
+
text-align: left;
|
|
308
|
+
font-weight: 600;
|
|
309
|
+
font-size: 11px;
|
|
310
|
+
text-transform: uppercase;
|
|
311
|
+
letter-spacing: 0.05em;
|
|
312
|
+
color: var(--color-muted);
|
|
313
|
+
padding: 8px 12px;
|
|
314
|
+
border-bottom: 2px solid var(--color-border);
|
|
315
|
+
}
|
|
316
|
+
.props-table td {
|
|
317
|
+
padding: 8px 12px;
|
|
318
|
+
border-bottom: 1px solid var(--color-border);
|
|
319
|
+
vertical-align: top;
|
|
320
|
+
}
|
|
321
|
+
.props-table tr:last-child td { border-bottom: none; }
|
|
322
|
+
.prop-name { font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
|
|
323
|
+
.prop-type { font-family: var(--font-mono); font-size: 11px; color: var(--color-accent); }
|
|
324
|
+
.prop-required { color: var(--color-error); font-size: 11px; }
|
|
325
|
+
.prop-default { font-family: var(--font-mono); font-size: 11px; color: var(--color-muted); }
|
|
326
|
+
|
|
327
|
+
/* Code blocks */
|
|
328
|
+
pre.code-block {
|
|
329
|
+
background: var(--color-bg-code);
|
|
330
|
+
color: #e2e8f0;
|
|
331
|
+
border-radius: var(--radius);
|
|
332
|
+
padding: 16px 20px;
|
|
333
|
+
overflow-x: auto;
|
|
334
|
+
font-family: var(--font-mono);
|
|
335
|
+
font-size: 13px;
|
|
336
|
+
line-height: 1.6;
|
|
337
|
+
margin: 0;
|
|
338
|
+
}
|
|
339
|
+
.token-keyword { color: #c792ea; }
|
|
340
|
+
.token-string { color: #c3e88d; }
|
|
341
|
+
.token-comment { color: #546e7a; font-style: italic; }
|
|
342
|
+
.token-tag { color: #f07178; }
|
|
343
|
+
.token-attr { color: #ffcb6b; }
|
|
344
|
+
.token-number { color: #f78c6c; }
|
|
345
|
+
|
|
346
|
+
/* Stats grid */
|
|
347
|
+
.stats-grid {
|
|
348
|
+
display: grid;
|
|
349
|
+
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
|
350
|
+
gap: 12px;
|
|
351
|
+
margin-bottom: 24px;
|
|
352
|
+
}
|
|
353
|
+
.stat-card {
|
|
354
|
+
background: var(--color-bg-subtle);
|
|
355
|
+
border: 1px solid var(--color-border);
|
|
356
|
+
border-radius: var(--radius);
|
|
357
|
+
padding: 16px;
|
|
358
|
+
}
|
|
359
|
+
.stat-card .stat-label { font-size: 11px; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
|
|
360
|
+
.stat-card .stat-value { font-size: 22px; font-weight: 700; }
|
|
361
|
+
|
|
362
|
+
/* Analysis grid */
|
|
363
|
+
.analysis-grid {
|
|
364
|
+
display: grid;
|
|
365
|
+
grid-template-columns: 1fr 1fr;
|
|
366
|
+
gap: 16px;
|
|
367
|
+
}
|
|
368
|
+
.analysis-card {
|
|
369
|
+
background: var(--color-bg-subtle);
|
|
370
|
+
border: 1px solid var(--color-border);
|
|
371
|
+
border-radius: var(--radius);
|
|
372
|
+
padding: 16px;
|
|
373
|
+
}
|
|
374
|
+
.analysis-card h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); margin: 0 0 8px; }
|
|
375
|
+
.analysis-card .value { font-size: 14px; }
|
|
376
|
+
.tag-list { display: flex; flex-wrap: wrap; gap: 4px; }
|
|
377
|
+
.tag {
|
|
378
|
+
display: inline-block;
|
|
379
|
+
padding: 2px 8px;
|
|
380
|
+
background: var(--color-border);
|
|
381
|
+
border-radius: 4px;
|
|
382
|
+
font-family: var(--font-mono);
|
|
383
|
+
font-size: 11px;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
/* Token pills */
|
|
387
|
+
.pill-on {
|
|
388
|
+
display: inline-flex; align-items: center; gap: 4px;
|
|
389
|
+
padding: 2px 8px; border-radius: 999px;
|
|
390
|
+
background: #dcfce7; color: #166534;
|
|
391
|
+
font-size: 11px; font-weight: 500;
|
|
392
|
+
}
|
|
393
|
+
.pill-off {
|
|
394
|
+
display: inline-flex; align-items: center; gap: 4px;
|
|
395
|
+
padding: 2px 8px; border-radius: 999px;
|
|
396
|
+
background: #fef3c7; color: #92400e;
|
|
397
|
+
font-size: 11px; font-weight: 500;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
/* Compliance bar */
|
|
401
|
+
.compliance-bar-container { margin-bottom: 16px; }
|
|
402
|
+
.compliance-bar-bg { background: var(--color-border); border-radius: 999px; height: 8px; overflow: hidden; }
|
|
403
|
+
.compliance-bar-fill { height: 100%; border-radius: 999px; background: var(--color-success); }
|
|
404
|
+
.compliance-label { font-size: 13px; color: var(--color-muted); margin-bottom: 4px; }
|
|
405
|
+
|
|
406
|
+
/* Token table */
|
|
407
|
+
.token-table { width: 100%; border-collapse: collapse; font-size: 12px; }
|
|
408
|
+
.token-table th {
|
|
409
|
+
text-align: left; font-weight: 600; font-size: 11px;
|
|
410
|
+
text-transform: uppercase; letter-spacing: 0.05em;
|
|
411
|
+
color: var(--color-muted); padding: 6px 10px;
|
|
412
|
+
border-bottom: 2px solid var(--color-border);
|
|
413
|
+
}
|
|
414
|
+
.token-table td { padding: 6px 10px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
|
|
415
|
+
.token-table tr:last-child td { border-bottom: none; }
|
|
416
|
+
.token-path { font-family: var(--font-mono); color: var(--color-accent); }
|
|
417
|
+
.token-value-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; border: 1px solid var(--color-border); margin-right: 4px; vertical-align: middle; }
|
|
418
|
+
|
|
419
|
+
/* A11y violations */
|
|
420
|
+
.violation-list { list-style: none; padding: 0; margin: 0; }
|
|
421
|
+
.violation-list li {
|
|
422
|
+
padding: 8px 12px;
|
|
423
|
+
background: #fef2f2;
|
|
424
|
+
border: 1px solid #fecaca;
|
|
425
|
+
border-radius: var(--radius);
|
|
426
|
+
margin-bottom: 6px;
|
|
427
|
+
font-size: 13px;
|
|
428
|
+
color: #991b1b;
|
|
429
|
+
}
|
|
430
|
+
.a11y-role-badge { font-family: var(--font-mono); font-size: 11px; background: var(--color-bg-subtle); border: 1px solid var(--color-border); padding: 2px 6px; border-radius: 4px; }
|
|
431
|
+
|
|
432
|
+
/* Matrix grid */
|
|
433
|
+
.matrix-grid {
|
|
434
|
+
display: grid;
|
|
435
|
+
gap: 1px;
|
|
436
|
+
background: var(--color-border);
|
|
437
|
+
border: 1px solid var(--color-border);
|
|
438
|
+
border-radius: var(--radius);
|
|
439
|
+
overflow: hidden;
|
|
440
|
+
}
|
|
441
|
+
.matrix-cell { background: var(--color-bg); padding: 8px; text-align: center; }
|
|
442
|
+
.matrix-cell img { max-width: 100%; border-radius: 2px; }
|
|
443
|
+
.matrix-cell .cell-label { font-size: 10px; color: var(--color-muted); margin-top: 4px; }
|
|
444
|
+
.matrix-header { background: var(--color-bg-subtle); padding: 6px 8px; font-size: 11px; font-weight: 600; color: var(--color-muted); }
|
|
445
|
+
|
|
446
|
+
/* DOM tree */
|
|
447
|
+
.dom-tree { font-family: var(--font-mono); font-size: 12px; line-height: 1.8; }
|
|
448
|
+
details.dom-node > summary { cursor: pointer; list-style: none; }
|
|
449
|
+
details.dom-node > summary::-webkit-details-marker { display: none; }
|
|
450
|
+
.dom-tag-open { color: #f07178; }
|
|
451
|
+
.dom-attr-name { color: #ffcb6b; }
|
|
452
|
+
.dom-attr-value { color: #c3e88d; }
|
|
453
|
+
.dom-text { color: #a0a0b0; font-style: italic; }
|
|
454
|
+
|
|
455
|
+
/* Composition graph */
|
|
456
|
+
.composition-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
|
457
|
+
.comp-list h3 { font-size: 13px; font-weight: 600; margin: 0 0 8px; color: var(--color-muted); }
|
|
458
|
+
.comp-list ul { list-style: none; padding: 0; margin: 0; }
|
|
459
|
+
.comp-list li { padding: 4px 0; font-size: 13px; border-bottom: 1px solid var(--color-border); }
|
|
460
|
+
.comp-list a { color: var(--color-accent); text-decoration: none; }
|
|
461
|
+
.comp-list a:hover { text-decoration: underline; }
|
|
462
|
+
|
|
463
|
+
/* Index page */
|
|
464
|
+
.index-header { margin-bottom: 32px; }
|
|
465
|
+
.index-header h1 { font-size: 32px; font-weight: 700; margin: 0 0 8px; }
|
|
466
|
+
.index-header p { color: var(--color-muted); font-size: 15px; margin: 0; }
|
|
467
|
+
.component-grid {
|
|
468
|
+
display: grid;
|
|
469
|
+
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
470
|
+
gap: 16px;
|
|
471
|
+
}
|
|
472
|
+
.component-card {
|
|
473
|
+
border: 1px solid var(--color-border);
|
|
474
|
+
border-radius: var(--radius);
|
|
475
|
+
overflow: hidden;
|
|
476
|
+
text-decoration: none;
|
|
477
|
+
color: var(--color-text);
|
|
478
|
+
transition: box-shadow 0.15s;
|
|
479
|
+
display: block;
|
|
480
|
+
}
|
|
481
|
+
.component-card:hover { box-shadow: var(--shadow); }
|
|
482
|
+
.card-preview {
|
|
483
|
+
background: #f8f8f8;
|
|
484
|
+
height: 160px;
|
|
485
|
+
overflow: hidden;
|
|
486
|
+
display: flex;
|
|
487
|
+
align-items: center;
|
|
488
|
+
justify-content: center;
|
|
489
|
+
border-bottom: 1px solid var(--color-border);
|
|
490
|
+
}
|
|
491
|
+
.card-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
|
|
492
|
+
.card-preview .no-preview { color: var(--color-muted); font-size: 12px; }
|
|
493
|
+
.card-body { padding: 12px 16px; }
|
|
494
|
+
.card-name { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
|
|
495
|
+
.card-meta { font-size: 12px; color: var(--color-muted); display: flex; gap: 8px; }
|
|
496
|
+
|
|
497
|
+
/* Dashboard */
|
|
498
|
+
.dashboard-header { margin-bottom: 32px; }
|
|
499
|
+
.dashboard-header h1 { font-size: 28px; font-weight: 700; margin: 0 0 8px; }
|
|
500
|
+
.section-title { font-size: 16px; font-weight: 600; margin: 0 0 16px; }
|
|
501
|
+
|
|
502
|
+
/* Responsive */
|
|
503
|
+
@media (max-width: 1024px) {
|
|
504
|
+
.on-this-page { display: none; }
|
|
505
|
+
}
|
|
506
|
+
@media (max-width: 768px) {
|
|
507
|
+
.sidebar { display: none; }
|
|
508
|
+
.content-body { padding: 20px 16px; }
|
|
509
|
+
.analysis-grid { grid-template-columns: 1fr; }
|
|
510
|
+
.composition-lists { grid-template-columns: 1fr; }
|
|
511
|
+
}`;
|
|
512
|
+
return `<style>
|
|
513
|
+
${css}
|
|
514
|
+
</style>`;
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
// src/templates/layout.ts
|
|
518
|
+
function sidebarLinks(components, currentSlug, basePath) {
|
|
519
|
+
const links = components.sort().map((name) => {
|
|
520
|
+
const slug = slugify(name);
|
|
521
|
+
const isActive = slug === currentSlug;
|
|
522
|
+
return `<a href="${basePath}${slug}.html" class="${isActive ? "active" : ""}">${escapeHtml(name)}</a>`;
|
|
523
|
+
}).join("\n");
|
|
524
|
+
return `<div class="sidebar-heading">Components</div>
|
|
525
|
+
${links}`;
|
|
526
|
+
}
|
|
527
|
+
function htmlShell(options) {
|
|
528
|
+
const { title, body, sidebar, onThisPage, basePath } = options;
|
|
529
|
+
return `<!DOCTYPE html>
|
|
530
|
+
<html lang="en">
|
|
531
|
+
<head>
|
|
532
|
+
<meta charset="UTF-8" />
|
|
533
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
534
|
+
<title>${escapeHtml(title)}</title>
|
|
535
|
+
${generateCSS()}
|
|
536
|
+
</head>
|
|
537
|
+
<body>
|
|
538
|
+
<nav class="top-nav">
|
|
539
|
+
<a class="site-title" href="${basePath}index.html">Scope</a>
|
|
540
|
+
<div class="spacer"></div>
|
|
541
|
+
<input
|
|
542
|
+
class="search-box"
|
|
543
|
+
type="search"
|
|
544
|
+
placeholder="Search components\u2026"
|
|
545
|
+
id="sidebar-search"
|
|
546
|
+
aria-label="Search components"
|
|
547
|
+
/>
|
|
548
|
+
</nav>
|
|
549
|
+
<div class="page-layout">
|
|
550
|
+
<nav class="sidebar" id="sidebar">
|
|
551
|
+
${sidebar}
|
|
552
|
+
</nav>
|
|
553
|
+
<div class="main-content">
|
|
554
|
+
<div class="content-body">
|
|
555
|
+
${body}
|
|
556
|
+
</div>
|
|
557
|
+
<nav class="on-this-page">
|
|
558
|
+
<h4>On this page</h4>
|
|
559
|
+
${onThisPage}
|
|
560
|
+
</nav>
|
|
561
|
+
</div>
|
|
562
|
+
</div>
|
|
563
|
+
<script>
|
|
564
|
+
(function () {
|
|
565
|
+
var search = document.getElementById('sidebar-search');
|
|
566
|
+
var sidebar = document.getElementById('sidebar');
|
|
567
|
+
if (!search || !sidebar) return;
|
|
568
|
+
search.addEventListener('input', function () {
|
|
569
|
+
var q = search.value.toLowerCase();
|
|
570
|
+
var links = sidebar.querySelectorAll('a');
|
|
571
|
+
links.forEach(function (link) {
|
|
572
|
+
var text = link.textContent || '';
|
|
573
|
+
link.style.display = text.toLowerCase().includes(q) ? '' : 'none';
|
|
574
|
+
});
|
|
575
|
+
});
|
|
576
|
+
})();
|
|
577
|
+
</script>
|
|
578
|
+
</body>
|
|
579
|
+
</html>`;
|
|
580
|
+
}
|
|
581
|
+
|
|
582
|
+
// src/templates/component-detail.ts
|
|
583
|
+
var SECTIONS = [
|
|
584
|
+
"Playground",
|
|
585
|
+
"Matrix",
|
|
586
|
+
"Docs",
|
|
587
|
+
"Analysis",
|
|
588
|
+
"X-Ray",
|
|
589
|
+
"Tokens",
|
|
590
|
+
"Accessibility",
|
|
591
|
+
"Composition",
|
|
592
|
+
"Responsive",
|
|
593
|
+
"Stress Tests"
|
|
594
|
+
];
|
|
595
|
+
function notGenerated(message = "Not generated") {
|
|
596
|
+
return `<div class="not-generated">${escapeHtml(message)}</div>`;
|
|
597
|
+
}
|
|
598
|
+
function sectionWrap(id, title, description, content) {
|
|
599
|
+
return `<section class="section" id="${id}">
|
|
600
|
+
<div class="section-header">
|
|
601
|
+
<h2>${escapeHtml(title)}</h2>
|
|
602
|
+
<p>${escapeHtml(description)}</p>
|
|
603
|
+
</div>
|
|
604
|
+
${content}
|
|
605
|
+
</section>`;
|
|
606
|
+
}
|
|
607
|
+
function renderPlayground(name, data) {
|
|
608
|
+
const component = data.manifest.components[name];
|
|
609
|
+
const render = data.renders.get(name);
|
|
610
|
+
const props = component ? Object.entries(component.props) : [];
|
|
611
|
+
const propsTable = props.length > 0 ? `<table class="props-table">
|
|
612
|
+
<thead>
|
|
613
|
+
<tr>
|
|
614
|
+
<th>Prop</th>
|
|
615
|
+
<th>Type</th>
|
|
616
|
+
<th>Required</th>
|
|
617
|
+
<th>Default</th>
|
|
618
|
+
</tr>
|
|
619
|
+
</thead>
|
|
620
|
+
<tbody>
|
|
621
|
+
${props.map(([n, p]) => propTableRow(n, p)).join("\n ")}
|
|
622
|
+
</tbody>
|
|
623
|
+
</table>` : `<p style="color:var(--color-muted);font-size:13px">No props defined.</p>`;
|
|
624
|
+
const renderHtml = render?.screenshot ? `<div class="render-preview">
|
|
625
|
+
<img src="data:image/png;base64,${render.screenshot}" alt="${escapeHtml(name)} render" />
|
|
626
|
+
</div>` : notGenerated("Render not generated. Run scope render to produce screenshots.");
|
|
627
|
+
return sectionWrap(
|
|
628
|
+
"playground",
|
|
629
|
+
"Playground",
|
|
630
|
+
"Props reference and rendered preview.",
|
|
631
|
+
`${propsTable}
|
|
632
|
+
<div style="margin-top:24px">${renderHtml}</div>`
|
|
633
|
+
);
|
|
634
|
+
}
|
|
635
|
+
function renderMatrix(name, data) {
|
|
636
|
+
const render = data.renders.get(name);
|
|
637
|
+
if (!render?.cells || render.cells.length === 0) {
|
|
638
|
+
return sectionWrap(
|
|
639
|
+
"matrix",
|
|
640
|
+
"Matrix",
|
|
641
|
+
"Prop combination matrix renders.",
|
|
642
|
+
notGenerated("Matrix renders not generated. Run scope render --matrix to produce a matrix.")
|
|
643
|
+
);
|
|
644
|
+
}
|
|
645
|
+
const cells = render.cells;
|
|
646
|
+
const cols = Math.ceil(Math.sqrt(cells.length));
|
|
647
|
+
const cellsHtml = cells.map((cell) => {
|
|
648
|
+
const label = cell.axisValues.join(" / ");
|
|
649
|
+
const imgHtml = cell.screenshot ? `<img src="data:image/png;base64,${cell.screenshot}" alt="${escapeHtml(label)}" />` : `<span style="color:var(--color-muted);font-size:11px">${cell.error ? escapeHtml(cell.error) : "failed"}</span>`;
|
|
650
|
+
return `<div class="matrix-cell">${imgHtml}<div class="cell-label">${escapeHtml(label)}</div></div>`;
|
|
651
|
+
}).join("\n");
|
|
652
|
+
const grid = `<div class="matrix-grid" style="grid-template-columns: repeat(${cols}, 1fr)">
|
|
653
|
+
${cellsHtml}
|
|
654
|
+
</div>`;
|
|
655
|
+
return sectionWrap("matrix", "Matrix", "Prop combination matrix renders.", grid);
|
|
656
|
+
}
|
|
657
|
+
function renderDocs() {
|
|
658
|
+
return sectionWrap(
|
|
659
|
+
"docs",
|
|
660
|
+
"Docs",
|
|
661
|
+
"Component documentation.",
|
|
662
|
+
`<p style="color:var(--color-muted);font-size:13px">No documentation file found for this component.</p>`
|
|
663
|
+
);
|
|
664
|
+
}
|
|
665
|
+
function renderAnalysis(name, data) {
|
|
666
|
+
const component = data.manifest.components[name];
|
|
667
|
+
if (!component) {
|
|
668
|
+
return sectionWrap("analysis", "Analysis", "Static analysis results.", notGenerated());
|
|
669
|
+
}
|
|
670
|
+
const propCount = Object.keys(component.props).length;
|
|
671
|
+
const hookCount = component.detectedHooks.length;
|
|
672
|
+
const sideEffectCount = component.sideEffects.fetches.length + (component.sideEffects.timers ? 1 : 0) + component.sideEffects.subscriptions.length + (component.sideEffects.globalListeners ? 1 : 0);
|
|
673
|
+
const statsGrid = `<div class="stats-grid">
|
|
674
|
+
<div class="stat-card">
|
|
675
|
+
<div class="stat-label">Complexity</div>
|
|
676
|
+
<div class="stat-value"><span class="badge ${component.complexityClass}">${escapeHtml(component.complexityClass)}</span></div>
|
|
677
|
+
</div>
|
|
678
|
+
<div class="stat-card">
|
|
679
|
+
<div class="stat-label">Props</div>
|
|
680
|
+
<div class="stat-value">${propCount}</div>
|
|
681
|
+
</div>
|
|
682
|
+
<div class="stat-card">
|
|
683
|
+
<div class="stat-label">Hooks</div>
|
|
684
|
+
<div class="stat-value">${hookCount}</div>
|
|
685
|
+
</div>
|
|
686
|
+
<div class="stat-card">
|
|
687
|
+
<div class="stat-label">Side Effects</div>
|
|
688
|
+
<div class="stat-value">${sideEffectCount}</div>
|
|
689
|
+
</div>
|
|
690
|
+
<div class="stat-card">
|
|
691
|
+
<div class="stat-label">Export</div>
|
|
692
|
+
<div class="stat-value" style="font-size:14px">${escapeHtml(component.exportType)}</div>
|
|
693
|
+
</div>
|
|
694
|
+
<div class="stat-card">
|
|
695
|
+
<div class="stat-label">Memoized</div>
|
|
696
|
+
<div class="stat-value" style="font-size:14px">${component.memoized ? "Yes" : "No"}</div>
|
|
697
|
+
</div>
|
|
698
|
+
<div class="stat-card">
|
|
699
|
+
<div class="stat-label">forwardedRef</div>
|
|
700
|
+
<div class="stat-value" style="font-size:14px">${component.forwardedRef ? "Yes" : "No"}</div>
|
|
701
|
+
</div>
|
|
702
|
+
</div>`;
|
|
703
|
+
function tagList(items) {
|
|
704
|
+
if (items.length === 0)
|
|
705
|
+
return `<span style="color:var(--color-muted);font-size:12px">None</span>`;
|
|
706
|
+
return `<div class="tag-list">${items.map((i) => `<span class="tag">${escapeHtml(i)}</span>`).join("")}</div>`;
|
|
707
|
+
}
|
|
708
|
+
const sideEffectItems = [
|
|
709
|
+
...component.sideEffects.fetches.map((f) => `fetch: ${f}`),
|
|
710
|
+
...component.sideEffects.timers ? ["timers"] : [],
|
|
711
|
+
...component.sideEffects.subscriptions.map((s) => `sub: ${s}`),
|
|
712
|
+
...component.sideEffects.globalListeners ? ["global listeners"] : []
|
|
713
|
+
];
|
|
714
|
+
const analysisGrid = `<div class="analysis-grid">
|
|
715
|
+
<div class="analysis-card">
|
|
716
|
+
<h3>Detected Hooks</h3>
|
|
717
|
+
<div class="value">${tagList(component.detectedHooks)}</div>
|
|
718
|
+
</div>
|
|
719
|
+
<div class="analysis-card">
|
|
720
|
+
<h3>Required Contexts</h3>
|
|
721
|
+
<div class="value">${tagList(component.requiredContexts)}</div>
|
|
722
|
+
</div>
|
|
723
|
+
<div class="analysis-card">
|
|
724
|
+
<h3>HOC Wrappers</h3>
|
|
725
|
+
<div class="value">${tagList(component.hocWrappers)}</div>
|
|
726
|
+
</div>
|
|
727
|
+
<div class="analysis-card">
|
|
728
|
+
<h3>Side Effects</h3>
|
|
729
|
+
<div class="value">${tagList(sideEffectItems)}</div>
|
|
730
|
+
</div>
|
|
731
|
+
</div>`;
|
|
732
|
+
return sectionWrap(
|
|
733
|
+
"analysis",
|
|
734
|
+
"Analysis",
|
|
735
|
+
"Static analysis results for this component.",
|
|
736
|
+
`${statsGrid}${analysisGrid}`
|
|
737
|
+
);
|
|
738
|
+
}
|
|
739
|
+
function renderXRay(name, data) {
|
|
740
|
+
const render = data.renders.get(name);
|
|
741
|
+
if (!render?.dom) {
|
|
742
|
+
return sectionWrap(
|
|
743
|
+
"x-ray",
|
|
744
|
+
"X-Ray",
|
|
745
|
+
"DOM structure and computed styles.",
|
|
746
|
+
notGenerated("X-Ray data not generated. Run scope render with DOM capture enabled.")
|
|
747
|
+
);
|
|
748
|
+
}
|
|
749
|
+
const dom = render.dom;
|
|
750
|
+
const treeHtml = `<div class="dom-tree">${renderDOMTree(dom.tree)}</div>`;
|
|
751
|
+
const stylesHtml = render.computedStyles && Object.keys(render.computedStyles).length > 0 ? `<details style="margin-top:16px">
|
|
752
|
+
<summary style="cursor:pointer;font-size:13px;font-weight:600;margin-bottom:8px">Computed Styles</summary>
|
|
753
|
+
<table class="token-table" style="margin-top:8px">
|
|
754
|
+
<thead><tr><th>Selector</th><th>Property</th><th>Value</th></tr></thead>
|
|
755
|
+
<tbody>
|
|
756
|
+
${Object.entries(render.computedStyles).flatMap(
|
|
757
|
+
([selector, styles]) => Object.entries(styles).map(
|
|
758
|
+
([prop, val]) => `<tr><td class="token-path">${escapeHtml(selector)}</td><td>${escapeHtml(prop)}</td><td>${escapeHtml(val)}</td></tr>`
|
|
759
|
+
)
|
|
760
|
+
).join("\n ")}
|
|
761
|
+
</tbody>
|
|
762
|
+
</table>
|
|
763
|
+
</details>` : "";
|
|
764
|
+
return sectionWrap(
|
|
765
|
+
"x-ray",
|
|
766
|
+
"X-Ray",
|
|
767
|
+
`DOM structure \u2014 ${dom.elementCount} elements.`,
|
|
768
|
+
`${treeHtml}${stylesHtml}`
|
|
769
|
+
);
|
|
770
|
+
}
|
|
771
|
+
function renderTokens(name, data) {
|
|
772
|
+
if (!data.complianceBatch) {
|
|
773
|
+
return sectionWrap(
|
|
774
|
+
"tokens",
|
|
775
|
+
"Tokens",
|
|
776
|
+
"Design token compliance.",
|
|
777
|
+
notGenerated("Compliance data not generated. Run scope tokens to audit design tokens.")
|
|
778
|
+
);
|
|
779
|
+
}
|
|
780
|
+
const report = data.complianceBatch.components[name];
|
|
781
|
+
if (!report) {
|
|
782
|
+
return sectionWrap(
|
|
783
|
+
"tokens",
|
|
784
|
+
"Tokens",
|
|
785
|
+
"Design token compliance.",
|
|
786
|
+
notGenerated("No compliance report found for this component.")
|
|
787
|
+
);
|
|
788
|
+
}
|
|
789
|
+
const pct = Math.round(report.compliance * 100);
|
|
790
|
+
const barHtml = `<div class="compliance-bar-container">
|
|
791
|
+
<div class="compliance-label">${pct}% on-system (${report.onSystem} / ${report.total} properties)</div>
|
|
792
|
+
<div class="compliance-bar-bg">
|
|
793
|
+
<div class="compliance-bar-fill" style="width:${pct}%"></div>
|
|
794
|
+
</div>
|
|
795
|
+
</div>`;
|
|
796
|
+
const rows = Object.entries(report.properties).map(([prop, result]) => {
|
|
797
|
+
const pill = result.status === "on_system" ? `<span class="pill-on">\u2713 ${escapeHtml(result.token ?? "")}</span>` : `<span class="pill-off">\u2717 off-system</span>`;
|
|
798
|
+
const swatchStyle = result.value.startsWith("#") ? ` style="background:${escapeHtml(result.value)}"` : "";
|
|
799
|
+
const nearestHtml = result.nearest ? `<span style="color:var(--color-muted);font-size:10px"> nearest: ${escapeHtml(result.nearest.token)}</span>` : "";
|
|
800
|
+
return `<tr>
|
|
801
|
+
<td class="token-path">${escapeHtml(prop)}</td>
|
|
802
|
+
<td><span class="token-value-swatch"${swatchStyle}></span>${escapeHtml(result.value)}</td>
|
|
803
|
+
<td>${pill}${nearestHtml}</td>
|
|
804
|
+
</tr>`;
|
|
805
|
+
}).join("\n ");
|
|
806
|
+
const tableHtml = `<table class="token-table">
|
|
807
|
+
<thead><tr><th>Property</th><th>Value</th><th>Status</th></tr></thead>
|
|
808
|
+
<tbody>${rows}</tbody>
|
|
809
|
+
</table>`;
|
|
810
|
+
return sectionWrap(
|
|
811
|
+
"tokens",
|
|
812
|
+
"Tokens",
|
|
813
|
+
"Design token compliance audit.",
|
|
814
|
+
`${barHtml}${tableHtml}`
|
|
815
|
+
);
|
|
816
|
+
}
|
|
817
|
+
function renderAccessibility(name, data) {
|
|
818
|
+
const render = data.renders.get(name);
|
|
819
|
+
if (!render?.accessibility) {
|
|
820
|
+
return sectionWrap(
|
|
821
|
+
"accessibility",
|
|
822
|
+
"Accessibility",
|
|
823
|
+
"Accessibility audit results.",
|
|
824
|
+
notGenerated(
|
|
825
|
+
"Accessibility data not generated. Run scope render with accessibility capture enabled."
|
|
826
|
+
)
|
|
827
|
+
);
|
|
828
|
+
}
|
|
829
|
+
const a11y = render.accessibility;
|
|
830
|
+
const roleBadge = `<span class="a11y-role-badge">${escapeHtml(a11y.role)}</span>`;
|
|
831
|
+
const violationsHtml = a11y.violations.length > 0 ? `<ul class="violation-list">${a11y.violations.map((v) => `<li>${escapeHtml(v)}</li>`).join("")}</ul>` : `<p style="color:var(--color-success);font-size:13px">\u2713 No violations found.</p>`;
|
|
832
|
+
return sectionWrap(
|
|
833
|
+
"accessibility",
|
|
834
|
+
"Accessibility",
|
|
835
|
+
"Accessibility audit results.",
|
|
836
|
+
`<p style="font-size:13px;margin:0 0 12px">Role: ${roleBadge} Name: <em>${escapeHtml(a11y.name || "(none)")}</em></p>
|
|
837
|
+
${violationsHtml}`
|
|
838
|
+
);
|
|
839
|
+
}
|
|
840
|
+
function renderComposition(name, data) {
|
|
841
|
+
const component = data.manifest.components[name];
|
|
842
|
+
if (!component || component.composes.length === 0 && component.composedBy.length === 0) {
|
|
843
|
+
return sectionWrap(
|
|
844
|
+
"composition",
|
|
845
|
+
"Composition",
|
|
846
|
+
"Component dependency graph.",
|
|
847
|
+
`<p style="color:var(--color-muted);font-size:13px">This component stands alone.</p>`
|
|
848
|
+
);
|
|
849
|
+
}
|
|
850
|
+
function compList(title, items) {
|
|
851
|
+
if (items.length === 0) {
|
|
852
|
+
return `<div class="comp-list"><h3>${escapeHtml(title)}</h3><p style="color:var(--color-muted);font-size:12px">None</p></div>`;
|
|
853
|
+
}
|
|
854
|
+
const liItems = items.map(
|
|
855
|
+
(n) => `<li><a href="${data.options.basePath}${slugify(n)}.html">${escapeHtml(n)}</a></li>`
|
|
856
|
+
).join("");
|
|
857
|
+
return `<div class="comp-list"><h3>${escapeHtml(title)}</h3><ul>${liItems}</ul></div>`;
|
|
858
|
+
}
|
|
859
|
+
return sectionWrap(
|
|
860
|
+
"composition",
|
|
861
|
+
"Composition",
|
|
862
|
+
"Component dependency graph.",
|
|
863
|
+
`<div class="composition-lists">
|
|
864
|
+
${compList("Composes", component.composes)}
|
|
865
|
+
${compList("Composed By", component.composedBy)}
|
|
866
|
+
</div>`
|
|
867
|
+
);
|
|
868
|
+
}
|
|
869
|
+
function renderComponentDetail(name, data) {
|
|
870
|
+
const component = data.manifest.components[name];
|
|
871
|
+
const slug = slugify(name);
|
|
872
|
+
const complexityBadge = component ? `<span class="badge ${component.complexityClass}">${escapeHtml(component.complexityClass)}</span>` : "";
|
|
873
|
+
const memoizedBadge = component?.memoized ? `<span class="badge memoized">memo</span>` : "";
|
|
874
|
+
const exportBadge = component ? `<span class="badge">${escapeHtml(component.exportType)}</span>` : "";
|
|
875
|
+
const filepath = component ? `<div class="filepath">${escapeHtml(component.filePath)}</div>` : "";
|
|
876
|
+
const header = `<div class="component-header">
|
|
877
|
+
<h1>${escapeHtml(name)}</h1>
|
|
878
|
+
<div class="meta">${complexityBadge}${memoizedBadge}${exportBadge}</div>
|
|
879
|
+
${filepath}
|
|
880
|
+
</div>`;
|
|
881
|
+
const sections = [
|
|
882
|
+
renderPlayground(name, data),
|
|
883
|
+
renderMatrix(name, data),
|
|
884
|
+
renderDocs(),
|
|
885
|
+
renderAnalysis(name, data),
|
|
886
|
+
renderXRay(name, data),
|
|
887
|
+
renderTokens(name, data),
|
|
888
|
+
renderAccessibility(name, data),
|
|
889
|
+
renderComposition(name, data),
|
|
890
|
+
sectionWrap(
|
|
891
|
+
"responsive",
|
|
892
|
+
"Responsive",
|
|
893
|
+
"Multi-viewport renders.",
|
|
894
|
+
notGenerated(
|
|
895
|
+
"Responsive renders not generated. Multi-viewport rendering is a future feature."
|
|
896
|
+
)
|
|
897
|
+
),
|
|
898
|
+
sectionWrap(
|
|
899
|
+
"stress-tests",
|
|
900
|
+
"Stress Tests",
|
|
901
|
+
"Edge case and stress test renders.",
|
|
902
|
+
notGenerated("Stress tests not generated. Stress render runs are a future feature.")
|
|
903
|
+
)
|
|
904
|
+
];
|
|
905
|
+
const body = `${header}${sections.join("\n")}`;
|
|
906
|
+
const onThisPage = SECTIONS.map((s) => {
|
|
907
|
+
const id = s.toLowerCase().replace(/\s+/g, "-");
|
|
908
|
+
return `<a href="#${id}">${escapeHtml(s)}</a>`;
|
|
909
|
+
}).join("\n");
|
|
910
|
+
const componentNames = Object.keys(data.manifest.components);
|
|
911
|
+
const sidebar = sidebarLinks(componentNames, slug, data.options.basePath);
|
|
912
|
+
return htmlShell({
|
|
913
|
+
title: `${name} \u2014 ${data.options.title}`,
|
|
914
|
+
body,
|
|
915
|
+
sidebar,
|
|
916
|
+
onThisPage,
|
|
917
|
+
basePath: data.options.basePath
|
|
918
|
+
});
|
|
919
|
+
}
|
|
920
|
+
|
|
921
|
+
// src/templates/component-index.ts
|
|
922
|
+
function renderComponentIndex(data) {
|
|
923
|
+
const components = Object.entries(data.manifest.components);
|
|
924
|
+
const totalCount = components.length;
|
|
925
|
+
const simpleCount = components.filter(([, c]) => c.complexityClass === "simple").length;
|
|
926
|
+
const complexCount = components.filter(([, c]) => c.complexityClass === "complex").length;
|
|
927
|
+
const memoizedCount = components.filter(([, c]) => c.memoized).length;
|
|
928
|
+
const statsGrid = `<div class="stats-grid">
|
|
929
|
+
<div class="stat-card">
|
|
930
|
+
<div class="stat-label">Total Components</div>
|
|
931
|
+
<div class="stat-value">${totalCount}</div>
|
|
932
|
+
</div>
|
|
933
|
+
<div class="stat-card">
|
|
934
|
+
<div class="stat-label">Simple</div>
|
|
935
|
+
<div class="stat-value">${simpleCount}</div>
|
|
936
|
+
</div>
|
|
937
|
+
<div class="stat-card">
|
|
938
|
+
<div class="stat-label">Complex</div>
|
|
939
|
+
<div class="stat-value">${complexCount}</div>
|
|
940
|
+
</div>
|
|
941
|
+
<div class="stat-card">
|
|
942
|
+
<div class="stat-label">Memoized</div>
|
|
943
|
+
<div class="stat-value">${memoizedCount}</div>
|
|
944
|
+
</div>
|
|
945
|
+
</div>`;
|
|
946
|
+
const cards = components.sort(([a], [b]) => a.localeCompare(b)).map(([name, component]) => {
|
|
947
|
+
const slug = slugify(name);
|
|
948
|
+
const render = data.renders.get(name);
|
|
949
|
+
const propCount = Object.keys(component.props).length;
|
|
950
|
+
const hookCount = component.detectedHooks.length;
|
|
951
|
+
const previewHtml = render?.screenshot ? `<img src="data:image/png;base64,${render.screenshot}" alt="${escapeHtml(name)}" />` : `<span class="no-preview">No preview</span>`;
|
|
952
|
+
return `<a class="component-card" href="${data.options.basePath}${slug}.html" data-name="${escapeHtml(name.toLowerCase())}">
|
|
953
|
+
<div class="card-preview">${previewHtml}</div>
|
|
954
|
+
<div class="card-body">
|
|
955
|
+
<div class="card-name">${escapeHtml(name)}</div>
|
|
956
|
+
<div class="card-meta">
|
|
957
|
+
<span>${propCount} props</span>
|
|
958
|
+
<span class="badge ${component.complexityClass}" style="font-size:10px">${escapeHtml(component.complexityClass)}</span>
|
|
959
|
+
${hookCount > 0 ? `<span>${hookCount} hooks</span>` : ""}
|
|
960
|
+
</div>
|
|
961
|
+
</div>
|
|
962
|
+
</a>`;
|
|
963
|
+
}).join("\n");
|
|
964
|
+
const cardGrid = `<div class="component-grid" id="component-grid">${cards}</div>`;
|
|
965
|
+
const filterScript = `<script>
|
|
966
|
+
(function () {
|
|
967
|
+
var grid = document.getElementById('component-grid');
|
|
968
|
+
var search = document.getElementById('sidebar-search');
|
|
969
|
+
if (!grid || !search) return;
|
|
970
|
+
var indexSearch = document.getElementById('index-search');
|
|
971
|
+
function filter(q) {
|
|
972
|
+
var cards = grid.querySelectorAll('.component-card');
|
|
973
|
+
cards.forEach(function (card) {
|
|
974
|
+
var name = card.getAttribute('data-name') || '';
|
|
975
|
+
card.style.display = name.includes(q) ? '' : 'none';
|
|
976
|
+
});
|
|
977
|
+
}
|
|
978
|
+
search.addEventListener('input', function () { filter(search.value.toLowerCase()); });
|
|
979
|
+
if (indexSearch) {
|
|
980
|
+
indexSearch.addEventListener('input', function () { filter(indexSearch.value.toLowerCase()); });
|
|
981
|
+
}
|
|
982
|
+
})();
|
|
983
|
+
</script>`;
|
|
984
|
+
const header = `<div class="index-header">
|
|
985
|
+
<h1>${escapeHtml(data.options.title)}</h1>
|
|
986
|
+
<p>${totalCount} component${totalCount === 1 ? "" : "s"} analysed</p>
|
|
987
|
+
<input class="search-box" type="search" id="index-search" placeholder="Filter components\u2026" style="margin-top:12px" />
|
|
988
|
+
</div>`;
|
|
989
|
+
const body = `${header}${statsGrid}${cardGrid}${filterScript}`;
|
|
990
|
+
const componentNames = Object.keys(data.manifest.components);
|
|
991
|
+
const sidebar = sidebarLinks(componentNames, null, data.options.basePath);
|
|
992
|
+
const onThisPage = `<a href="#top">Overview</a>
|
|
993
|
+
<a href="#component-grid">Components</a>`;
|
|
994
|
+
return htmlShell({
|
|
995
|
+
title: data.options.title,
|
|
996
|
+
body,
|
|
997
|
+
sidebar,
|
|
998
|
+
onThisPage,
|
|
999
|
+
basePath: data.options.basePath
|
|
1000
|
+
});
|
|
1001
|
+
}
|
|
1002
|
+
|
|
1003
|
+
// src/templates/dashboard.ts
|
|
1004
|
+
function renderDashboard(data) {
|
|
1005
|
+
const components = Object.entries(data.manifest.components);
|
|
1006
|
+
const totalCount = components.length;
|
|
1007
|
+
const simpleCount = components.filter(([, c]) => c.complexityClass === "simple").length;
|
|
1008
|
+
const complexCount = components.filter(([, c]) => c.complexityClass === "complex").length;
|
|
1009
|
+
const renderedCount = components.filter(([name]) => data.renders.has(name)).length;
|
|
1010
|
+
const totalProps = components.reduce((sum, [, c]) => sum + Object.keys(c.props).length, 0);
|
|
1011
|
+
const avgProps = totalCount > 0 ? Math.round(totalProps / totalCount) : 0;
|
|
1012
|
+
let overallCompliance = null;
|
|
1013
|
+
if (data.complianceBatch) {
|
|
1014
|
+
const reports = Object.values(data.complianceBatch.components);
|
|
1015
|
+
if (reports.length > 0) {
|
|
1016
|
+
overallCompliance = Math.round(
|
|
1017
|
+
reports.reduce((sum, r) => sum + r.compliance, 0) / reports.length * 100
|
|
1018
|
+
);
|
|
1019
|
+
}
|
|
1020
|
+
}
|
|
1021
|
+
const statsGrid = `<div class="stats-grid" style="margin-bottom:32px">
|
|
1022
|
+
<div class="stat-card">
|
|
1023
|
+
<div class="stat-label">Total Components</div>
|
|
1024
|
+
<div class="stat-value">${totalCount}</div>
|
|
1025
|
+
</div>
|
|
1026
|
+
<div class="stat-card">
|
|
1027
|
+
<div class="stat-label">Avg Props</div>
|
|
1028
|
+
<div class="stat-value">${avgProps}</div>
|
|
1029
|
+
</div>
|
|
1030
|
+
<div class="stat-card">
|
|
1031
|
+
<div class="stat-label">With Renders</div>
|
|
1032
|
+
<div class="stat-value">${renderedCount}</div>
|
|
1033
|
+
</div>
|
|
1034
|
+
<div class="stat-card">
|
|
1035
|
+
<div class="stat-label">Compliance</div>
|
|
1036
|
+
<div class="stat-value">${overallCompliance !== null ? `${overallCompliance}%` : "\u2014"}</div>
|
|
1037
|
+
</div>
|
|
1038
|
+
</div>`;
|
|
1039
|
+
const complexitySection = `<div class="section" style="padding:24px 0;border-bottom:1px solid var(--color-border)">
|
|
1040
|
+
<h2 class="section-title">Complexity Breakdown</h2>
|
|
1041
|
+
<div class="stats-grid">
|
|
1042
|
+
<div class="stat-card">
|
|
1043
|
+
<div class="stat-label">Simple</div>
|
|
1044
|
+
<div class="stat-value" style="color:var(--color-success)">${simpleCount}</div>
|
|
1045
|
+
</div>
|
|
1046
|
+
<div class="stat-card">
|
|
1047
|
+
<div class="stat-label">Complex</div>
|
|
1048
|
+
<div class="stat-value" style="color:var(--color-warn)">${complexCount}</div>
|
|
1049
|
+
</div>
|
|
1050
|
+
<div class="stat-card">
|
|
1051
|
+
<div class="stat-label">Simple %</div>
|
|
1052
|
+
<div class="stat-value">${totalCount > 0 ? Math.round(simpleCount / totalCount * 100) : 0}%</div>
|
|
1053
|
+
</div>
|
|
1054
|
+
</div>
|
|
1055
|
+
</div>`;
|
|
1056
|
+
const topByProps = components.sort(([, a], [, b]) => Object.keys(b.props).length - Object.keys(a.props).length).slice(0, 10);
|
|
1057
|
+
const topPropsRows = topByProps.map(([name, component]) => {
|
|
1058
|
+
const slug = slugify(name);
|
|
1059
|
+
const propCount = Object.keys(component.props).length;
|
|
1060
|
+
return `<tr>
|
|
1061
|
+
<td><a href="${data.options.basePath}${slug}.html" style="color:var(--color-accent);text-decoration:none">${escapeHtml(name)}</a></td>
|
|
1062
|
+
<td>${propCount}</td>
|
|
1063
|
+
<td><span class="badge ${component.complexityClass}">${escapeHtml(component.complexityClass)}</span></td>
|
|
1064
|
+
</tr>`;
|
|
1065
|
+
}).join("\n ");
|
|
1066
|
+
const topPropsSection = `<div class="section" style="padding:24px 0;border-bottom:1px solid var(--color-border)">
|
|
1067
|
+
<h2 class="section-title">Top Components by Prop Count</h2>
|
|
1068
|
+
<table class="props-table">
|
|
1069
|
+
<thead><tr><th>Component</th><th>Props</th><th>Complexity</th></tr></thead>
|
|
1070
|
+
<tbody>${topPropsRows}</tbody>
|
|
1071
|
+
</table>
|
|
1072
|
+
</div>`;
|
|
1073
|
+
let complianceSection = "";
|
|
1074
|
+
if (data.complianceBatch && overallCompliance !== null) {
|
|
1075
|
+
const complianceRows = Object.entries(data.complianceBatch.components).sort(([, a], [, b]) => b.compliance - a.compliance).map(([name, report]) => {
|
|
1076
|
+
const pct = Math.round(report.compliance * 100);
|
|
1077
|
+
const slug = slugify(name);
|
|
1078
|
+
const barHtml = `<div class="compliance-bar-bg" style="min-width:120px">
|
|
1079
|
+
<div class="compliance-bar-fill" style="width:${pct}%"></div>
|
|
1080
|
+
</div>`;
|
|
1081
|
+
return `<tr>
|
|
1082
|
+
<td><a href="${data.options.basePath}${slug}.html" style="color:var(--color-accent);text-decoration:none">${escapeHtml(name)}</a></td>
|
|
1083
|
+
<td>${pct}%</td>
|
|
1084
|
+
<td>${barHtml}</td>
|
|
1085
|
+
<td>${report.onSystem} / ${report.total}</td>
|
|
1086
|
+
</tr>`;
|
|
1087
|
+
}).join("\n ");
|
|
1088
|
+
complianceSection = `<div class="section" style="padding:24px 0">
|
|
1089
|
+
<h2 class="section-title">Design Token Compliance \u2014 ${overallCompliance}% overall</h2>
|
|
1090
|
+
<table class="props-table">
|
|
1091
|
+
<thead><tr><th>Component</th><th>Score</th><th>Bar</th><th>On-System</th></tr></thead>
|
|
1092
|
+
<tbody>${complianceRows}</tbody>
|
|
1093
|
+
</table>
|
|
1094
|
+
</div>`;
|
|
1095
|
+
}
|
|
1096
|
+
const header = `<div class="dashboard-header">
|
|
1097
|
+
<h1>Dashboard</h1>
|
|
1098
|
+
<p style="color:var(--color-muted);font-size:14px">Overview of all ${totalCount} analysed components.</p>
|
|
1099
|
+
</div>`;
|
|
1100
|
+
const body = `${header}${statsGrid}${complexitySection}${topPropsSection}${complianceSection}`;
|
|
1101
|
+
const componentNames = Object.keys(data.manifest.components);
|
|
1102
|
+
const sidebar = sidebarLinks(componentNames, null, data.options.basePath);
|
|
1103
|
+
const onThisPage = `<a href="#top">Overview</a>
|
|
1104
|
+
<a href="#complexity">Complexity</a>
|
|
1105
|
+
<a href="#top-props">Top by Props</a>
|
|
1106
|
+
${data.complianceBatch ? '<a href="#compliance">Compliance</a>' : ""}`;
|
|
1107
|
+
return htmlShell({
|
|
1108
|
+
title: `Dashboard \u2014 ${data.options.title}`,
|
|
1109
|
+
body,
|
|
1110
|
+
sidebar,
|
|
1111
|
+
onThisPage,
|
|
1112
|
+
basePath: data.options.basePath
|
|
1113
|
+
});
|
|
1114
|
+
}
|
|
1115
|
+
|
|
1116
|
+
// src/builder.ts
|
|
1117
|
+
async function buildSite(options) {
|
|
1118
|
+
const normalizedOptions = normalizeOptions(options);
|
|
1119
|
+
console.log(`[scope/site] Reading data from ${normalizedOptions.inputDir}\u2026`);
|
|
1120
|
+
const data = await readSiteData(normalizedOptions);
|
|
1121
|
+
const componentNames = Object.keys(data.manifest.components);
|
|
1122
|
+
console.log(`[scope/site] Found ${componentNames.length} components.`);
|
|
1123
|
+
await promises.mkdir(normalizedOptions.outputDir, { recursive: true });
|
|
1124
|
+
for (const name of componentNames) {
|
|
1125
|
+
const slug = slugify(name);
|
|
1126
|
+
const html = renderComponentDetail(name, data);
|
|
1127
|
+
const outputPath = path.join(normalizedOptions.outputDir, `${slug}.html`);
|
|
1128
|
+
await promises.writeFile(outputPath, html, "utf-8");
|
|
1129
|
+
console.log(`[scope/site] \u2713 ${name} \u2192 ${slug}.html`);
|
|
1130
|
+
}
|
|
1131
|
+
const indexHtml = renderComponentIndex(data);
|
|
1132
|
+
await promises.writeFile(path.join(normalizedOptions.outputDir, "index.html"), indexHtml, "utf-8");
|
|
1133
|
+
console.log(`[scope/site] \u2713 index.html`);
|
|
1134
|
+
const dashboardHtml = renderDashboard(data);
|
|
1135
|
+
await promises.writeFile(path.join(normalizedOptions.outputDir, "dashboard.html"), dashboardHtml, "utf-8");
|
|
1136
|
+
console.log(`[scope/site] \u2713 dashboard.html`);
|
|
1137
|
+
console.log(
|
|
1138
|
+
`[scope/site] Done. Site written to ${normalizedOptions.outputDir} (${componentNames.length + 2} files).`
|
|
1139
|
+
);
|
|
1140
|
+
}
|
|
1141
|
+
|
|
1142
|
+
exports.buildSite = buildSite;
|
|
1143
|
+
//# sourceMappingURL=index.cjs.map
|
|
1144
|
+
//# sourceMappingURL=index.cjs.map
|