@miman/json-schema-viewer-react 1.0.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 +726 -0
- package/dist/index.js +1204 -0
- package/dist/types/index.d.ts +4 -0
- package/dist/types/react/SchemaViewer.d.ts +9 -0
- package/dist/types/react/index.d.ts +1 -0
- package/dist/types/styles/ensureStyles.d.ts +1 -0
- package/dist/types/styles/styles.d.ts +7 -0
- package/dist/types/viewerCore.d.ts +15 -0
- package/dist/types/viewerDom.d.ts +11 -0
- package/dist/types/viewerDomNormal.d.ts +13 -0
- package/dist/types/viewerDomTree.d.ts +11 -0
- package/package.json +38 -0
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,726 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react/jsx-runtime"),M=require("react");function J(){return`
|
|
2
|
+
.schema-container {
|
|
3
|
+
--bg-color: #1e1e1e;
|
|
4
|
+
--text-color: #d4d4d4;
|
|
5
|
+
--border-color: #3c3c3c;
|
|
6
|
+
--header-bg: #252526;
|
|
7
|
+
--type-string: #ce9178;
|
|
8
|
+
--type-number: #b5cea8;
|
|
9
|
+
--type-boolean: #569cd6;
|
|
10
|
+
--type-array: #dcdcaa;
|
|
11
|
+
--type-object: #4ec9b0;
|
|
12
|
+
--type-enum: #8a2be2; /* purple */
|
|
13
|
+
--type-null: #808080;
|
|
14
|
+
--required-color: #d18616; /* Orange */
|
|
15
|
+
--missing-color: #f14c4c; /* Red */
|
|
16
|
+
--description-color: #6a9955;
|
|
17
|
+
--property-name: #9cdcfe;
|
|
18
|
+
--expand-icon: #808080;
|
|
19
|
+
--hover-bg: #2a2d2e;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@media (prefers-color-scheme: light) {
|
|
23
|
+
.schema-container {
|
|
24
|
+
--bg-color: #ffffff;
|
|
25
|
+
--text-color: #333333;
|
|
26
|
+
--border-color: #e0e0e0;
|
|
27
|
+
--header-bg: #f5f5f5;
|
|
28
|
+
--type-string: #a31515;
|
|
29
|
+
--type-number: #098658;
|
|
30
|
+
--type-boolean: #0000ff;
|
|
31
|
+
--type-array: #795e26;
|
|
32
|
+
--type-object: #267f99;
|
|
33
|
+
--type-enum: #6a00d9;
|
|
34
|
+
--type-null: #808080;
|
|
35
|
+
--required-color: #b85a00; /* Darker Orange */
|
|
36
|
+
--missing-color: #d32f2f; /* Darker Red */
|
|
37
|
+
--description-color: #008000;
|
|
38
|
+
--property-name: #001080;
|
|
39
|
+
--expand-icon: #666666;
|
|
40
|
+
--hover-bg: #f0f0f0;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.schema-container {
|
|
45
|
+
width: 100%;
|
|
46
|
+
margin: 0 auto;
|
|
47
|
+
font-family: var(--vscode-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif);
|
|
48
|
+
font-size: 13px;
|
|
49
|
+
line-height: 1.5;
|
|
50
|
+
color: var(--text-color);
|
|
51
|
+
background-color: var(--bg-color);
|
|
52
|
+
padding: 16px;
|
|
53
|
+
box-sizing: border-box;
|
|
54
|
+
text-align: left;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.schema-container.normal-view {
|
|
58
|
+
max-width: 1200px;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.schema-container * {
|
|
62
|
+
box-sizing: border-box;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.schema-header {
|
|
66
|
+
background: var(--header-bg);
|
|
67
|
+
padding: 16px;
|
|
68
|
+
border-radius: 8px;
|
|
69
|
+
margin-bottom: 16px;
|
|
70
|
+
border: 1px solid var(--border-color);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.schema-header-top {
|
|
74
|
+
display: flex;
|
|
75
|
+
justify-content: space-between;
|
|
76
|
+
align-items: center;
|
|
77
|
+
margin-bottom: 8px;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.schema-title {
|
|
81
|
+
font-size: 24px;
|
|
82
|
+
font-weight: 600;
|
|
83
|
+
color: var(--type-object);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.view-selector {
|
|
87
|
+
display: flex;
|
|
88
|
+
flex-direction: column;
|
|
89
|
+
align-items: flex-end;
|
|
90
|
+
gap: 8px;
|
|
91
|
+
font-size: 12px;
|
|
92
|
+
color: var(--expand-icon);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.view-switch {
|
|
96
|
+
display: inline-flex;
|
|
97
|
+
align-items: center;
|
|
98
|
+
gap: 8px;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.view-switch-label {
|
|
102
|
+
font-size: 12px;
|
|
103
|
+
color: var(--expand-icon);
|
|
104
|
+
user-select: none;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.view-switch-checkbox {
|
|
108
|
+
appearance: none;
|
|
109
|
+
width: 33px;
|
|
110
|
+
height: 18px;
|
|
111
|
+
border-radius: 18px;
|
|
112
|
+
background: var(--border-color);
|
|
113
|
+
position: relative;
|
|
114
|
+
cursor: pointer;
|
|
115
|
+
outline: none;
|
|
116
|
+
display: inline-block;
|
|
117
|
+
vertical-align: middle;
|
|
118
|
+
transition: background 0.15s ease;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.view-switch-checkbox::after {
|
|
122
|
+
content: '';
|
|
123
|
+
position: absolute;
|
|
124
|
+
top: 3px;
|
|
125
|
+
left: 3px;
|
|
126
|
+
width: 12px;
|
|
127
|
+
height: 12px;
|
|
128
|
+
border-radius: 50%;
|
|
129
|
+
background: var(--bg-color);
|
|
130
|
+
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
|
131
|
+
transition: transform 0.15s ease;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.view-switch-checkbox:checked::after {
|
|
135
|
+
transform: translateX(15px);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.view-switch-left {
|
|
139
|
+
margin-right: 6px;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.view-switch-right {
|
|
143
|
+
margin-left: 6px;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.active-link-label {
|
|
147
|
+
display: inline-flex;
|
|
148
|
+
align-items: center;
|
|
149
|
+
gap: 6px;
|
|
150
|
+
font-size: 12px;
|
|
151
|
+
color: var(--expand-icon);
|
|
152
|
+
cursor: pointer;
|
|
153
|
+
user-select: none;
|
|
154
|
+
font-style: normal;
|
|
155
|
+
white-space: nowrap;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.active-link-checkbox {
|
|
159
|
+
appearance: none;
|
|
160
|
+
width: 16px;
|
|
161
|
+
height: 16px;
|
|
162
|
+
border: 1px solid var(--border-color);
|
|
163
|
+
border-radius: 3px;
|
|
164
|
+
cursor: pointer;
|
|
165
|
+
position: relative;
|
|
166
|
+
background: var(--bg-color);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.active-link-checkbox:checked {
|
|
170
|
+
background: var(--type-boolean);
|
|
171
|
+
border-color: var(--type-boolean);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.active-link-checkbox:checked::after {
|
|
175
|
+
content: '✓';
|
|
176
|
+
position: absolute;
|
|
177
|
+
top: 50%;
|
|
178
|
+
left: 50%;
|
|
179
|
+
transform: translate(-50%, -50%);
|
|
180
|
+
color: var(--bg-color);
|
|
181
|
+
font-size: 12px;
|
|
182
|
+
font-weight: bold;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.source-highlight {
|
|
186
|
+
background-color: rgba(255, 255, 0, 0.2) !important;
|
|
187
|
+
outline: 2px solid rgba(255, 255, 0, 0.4);
|
|
188
|
+
outline-offset: -2px;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.schema-object-header[data-source-line]:hover {
|
|
192
|
+
cursor: pointer;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.schema-description {
|
|
196
|
+
color: var(--description-color);
|
|
197
|
+
font-style: italic;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.active-link-bottom-row {
|
|
201
|
+
margin-top: 8px;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.schema-meta {
|
|
205
|
+
display: flex;
|
|
206
|
+
gap: 16px;
|
|
207
|
+
margin-top: 12px;
|
|
208
|
+
font-size: 12px;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.schema-meta-item {
|
|
212
|
+
display: flex;
|
|
213
|
+
align-items: center;
|
|
214
|
+
gap: 4px;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.schema-meta-label {
|
|
218
|
+
color: var(--expand-icon);
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.schema-meta-value {
|
|
222
|
+
color: var(--type-string);
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.definitions-section {
|
|
226
|
+
margin-top: 24px;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.section-title {
|
|
230
|
+
font-size: 18px;
|
|
231
|
+
font-weight: 600;
|
|
232
|
+
margin-bottom: 12px;
|
|
233
|
+
padding-bottom: 8px;
|
|
234
|
+
border-bottom: 1px solid var(--border-color);
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.schema-object {
|
|
238
|
+
border: 1px solid var(--border-color);
|
|
239
|
+
border-radius: 6px;
|
|
240
|
+
margin-bottom: 8px;
|
|
241
|
+
overflow: hidden;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.schema-object-header {
|
|
245
|
+
display: flex;
|
|
246
|
+
align-items: center;
|
|
247
|
+
padding: 10px 12px;
|
|
248
|
+
background: var(--header-bg);
|
|
249
|
+
cursor: pointer;
|
|
250
|
+
user-select: none;
|
|
251
|
+
transition: background-color 0.15s ease;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.schema-object-header:hover {
|
|
255
|
+
background: var(--hover-bg);
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.expand-icon {
|
|
259
|
+
width: 16px;
|
|
260
|
+
height: 16px;
|
|
261
|
+
margin-right: 8px;
|
|
262
|
+
color: var(--expand-icon);
|
|
263
|
+
transition: transform 0.2s ease;
|
|
264
|
+
flex-shrink: 0;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.expand-icon.expanded {
|
|
268
|
+
transform: rotate(90deg);
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.property-name {
|
|
272
|
+
font-weight: 600;
|
|
273
|
+
color: var(--property-name);
|
|
274
|
+
margin-right: 8px;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.property-type {
|
|
278
|
+
font-size: 12px;
|
|
279
|
+
padding: 2px 8px;
|
|
280
|
+
border-radius: 4px;
|
|
281
|
+
margin-right: 8px;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.type-string { background: rgba(206, 145, 120, 0.2); color: var(--type-string); }
|
|
285
|
+
.type-integer, .type-number { background: rgba(181, 206, 168, 0.2); color: var(--type-number); }
|
|
286
|
+
.type-boolean { background: rgba(86, 156, 214, 0.2); color: var(--type-boolean); }
|
|
287
|
+
.type-array { background: rgba(220, 220, 170, 0.2); color: var(--type-array); }
|
|
288
|
+
.type-object { background: rgba(78, 201, 176, 0.2); color: var(--type-object); }
|
|
289
|
+
.type-enum { background: rgba(138, 43, 226, 0.12); color: var(--type-enum); }
|
|
290
|
+
.type-null { background: rgba(128, 128, 128, 0.2); color: var(--type-null); }
|
|
291
|
+
|
|
292
|
+
.required-badge {
|
|
293
|
+
font-size: 10px;
|
|
294
|
+
padding: 2px 6px;
|
|
295
|
+
border-radius: 4px;
|
|
296
|
+
background: rgba(209, 134, 22, 0.2);
|
|
297
|
+
color: var(--required-color);
|
|
298
|
+
margin-right: 8px;
|
|
299
|
+
text-transform: uppercase;
|
|
300
|
+
font-weight: 600;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.missing-badge {
|
|
304
|
+
font-size: 10px;
|
|
305
|
+
padding: 2px 6px;
|
|
306
|
+
border-radius: 4px;
|
|
307
|
+
background: rgba(241, 76, 76, 0.2);
|
|
308
|
+
color: var(--missing-color);
|
|
309
|
+
margin-right: 8px;
|
|
310
|
+
text-transform: uppercase;
|
|
311
|
+
font-weight: 600;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.imported-badge {
|
|
315
|
+
font-size: 10px;
|
|
316
|
+
padding: 2px 6px;
|
|
317
|
+
border-radius: 4px;
|
|
318
|
+
background: rgba(86, 156, 214, 0.2);
|
|
319
|
+
color: var(--type-boolean);
|
|
320
|
+
margin-right: 8px;
|
|
321
|
+
text-transform: uppercase;
|
|
322
|
+
font-weight: 600;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
|
|
326
|
+
.property-description {
|
|
327
|
+
color: var(--description-color);
|
|
328
|
+
font-size: 12px;
|
|
329
|
+
flex: 1;
|
|
330
|
+
overflow: hidden;
|
|
331
|
+
text-overflow: ellipsis;
|
|
332
|
+
white-space: nowrap;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
.schema-object-content {
|
|
336
|
+
display: none;
|
|
337
|
+
padding: 12px;
|
|
338
|
+
border-top: 1px solid var(--border-color);
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
.schema-object-content.expanded {
|
|
342
|
+
display: block;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.property-details {
|
|
346
|
+
font-size: 12px;
|
|
347
|
+
margin-bottom: 12px;
|
|
348
|
+
padding: 8px;
|
|
349
|
+
background: var(--header-bg);
|
|
350
|
+
border-radius: 4px;
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
.property-detail-row {
|
|
354
|
+
display: flex;
|
|
355
|
+
margin-bottom: 4px;
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
.property-detail-row:last-child {
|
|
359
|
+
margin-bottom: 0;
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
.property-detail-label {
|
|
363
|
+
color: var(--expand-icon);
|
|
364
|
+
min-width: 120px;
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
.property-detail-value {
|
|
368
|
+
color: var(--text-color);
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
.nested-properties {
|
|
372
|
+
margin-left: 16px;
|
|
373
|
+
padding-left: 16px;
|
|
374
|
+
border-left: 2px solid var(--border-color);
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
.array-items-label {
|
|
378
|
+
font-size: 11px;
|
|
379
|
+
color: var(--expand-icon);
|
|
380
|
+
margin-bottom: 8px;
|
|
381
|
+
text-transform: uppercase;
|
|
382
|
+
letter-spacing: 0.5px;
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
.enum-values {
|
|
386
|
+
display: flex;
|
|
387
|
+
flex-wrap: wrap;
|
|
388
|
+
gap: 4px;
|
|
389
|
+
margin-top: 4px;
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
.enum-value {
|
|
393
|
+
font-size: 11px;
|
|
394
|
+
padding: 2px 6px;
|
|
395
|
+
background: var(--header-bg);
|
|
396
|
+
border: 1px solid var(--border-color);
|
|
397
|
+
border-radius: 3px;
|
|
398
|
+
color: var(--type-enum);
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
.ref-link {
|
|
402
|
+
color: var(--type-object);
|
|
403
|
+
cursor: pointer;
|
|
404
|
+
text-decoration: underline;
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
.ref-link:hover {
|
|
408
|
+
opacity: 0.8;
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
.no-properties {
|
|
412
|
+
color: var(--expand-icon);
|
|
413
|
+
font-style: italic;
|
|
414
|
+
padding: 8px;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
.root-type-badge {
|
|
418
|
+
font-size: 12px;
|
|
419
|
+
padding: 4px 12px;
|
|
420
|
+
border-radius: 4px;
|
|
421
|
+
display: inline-block;
|
|
422
|
+
margin-top: 8px;
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
.view-toggle {
|
|
426
|
+
display: inline-flex;
|
|
427
|
+
margin-bottom: 12px;
|
|
428
|
+
border: 1px solid var(--border-color);
|
|
429
|
+
border-radius: 4px;
|
|
430
|
+
overflow: hidden;
|
|
431
|
+
font-size: 11px;
|
|
432
|
+
}
|
|
433
|
+
|
|
434
|
+
.view-toggle-btn {
|
|
435
|
+
padding: 4px 12px;
|
|
436
|
+
border: none;
|
|
437
|
+
background: transparent;
|
|
438
|
+
color: var(--text-color);
|
|
439
|
+
cursor: pointer;
|
|
440
|
+
font-size: 11px;
|
|
441
|
+
font-family: inherit;
|
|
442
|
+
transition: background-color 0.15s ease;
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
.view-toggle-btn:hover {
|
|
446
|
+
background: var(--hover-bg);
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
.view-toggle-btn.active {
|
|
450
|
+
background: var(--type-object);
|
|
451
|
+
color: #ffffff;
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
.view-toggle-btn:first-child {
|
|
455
|
+
border-right: 1px solid var(--border-color);
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
.object-example-view {
|
|
459
|
+
background: var(--bg-color);
|
|
460
|
+
border: 1px solid var(--border-color);
|
|
461
|
+
border-radius: 4px;
|
|
462
|
+
padding: 12px;
|
|
463
|
+
margin-top: 8px;
|
|
464
|
+
overflow-x: auto;
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
.object-example-view pre {
|
|
468
|
+
margin: 0;
|
|
469
|
+
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
|
|
470
|
+
font-size: 12px;
|
|
471
|
+
line-height: 1.4;
|
|
472
|
+
white-space: pre-wrap;
|
|
473
|
+
word-break: break-word;
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
.example-view {
|
|
477
|
+
background: var(--header-bg);
|
|
478
|
+
border: 1px solid var(--border-color);
|
|
479
|
+
border-radius: 6px;
|
|
480
|
+
padding: 16px;
|
|
481
|
+
overflow-x: auto;
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
.example-view pre {
|
|
485
|
+
margin: 0;
|
|
486
|
+
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
|
|
487
|
+
font-size: 13px;
|
|
488
|
+
line-height: 1.5;
|
|
489
|
+
white-space: pre-wrap;
|
|
490
|
+
word-break: break-word;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
.example-view .json-key {
|
|
494
|
+
color: var(--property-name);
|
|
495
|
+
}
|
|
496
|
+
|
|
497
|
+
.example-view .json-string {
|
|
498
|
+
color: var(--type-string);
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
.example-view .json-number {
|
|
502
|
+
color: var(--type-number);
|
|
503
|
+
}
|
|
504
|
+
|
|
505
|
+
.example-view .json-boolean {
|
|
506
|
+
color: var(--type-boolean);
|
|
507
|
+
}
|
|
508
|
+
|
|
509
|
+
.example-view .json-null {
|
|
510
|
+
color: var(--type-null);
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
/* Styles for the new Imported Files section */
|
|
514
|
+
.imported-files-container {
|
|
515
|
+
margin-top: 12px; /* Adjust margin as section-title now precedes it */
|
|
516
|
+
padding: 16px;
|
|
517
|
+
border: 1px solid var(--border-color);
|
|
518
|
+
border-radius: 8px;
|
|
519
|
+
background: var(--header-bg);
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
.imported-files-container ul {
|
|
523
|
+
list-style: none; /* Remove default list bullets */
|
|
524
|
+
padding-left: 0;
|
|
525
|
+
}
|
|
526
|
+
|
|
527
|
+
.imported-files-container li {
|
|
528
|
+
margin-bottom: 8px;
|
|
529
|
+
color: var(--text-color);
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
/* Tree View Styles */
|
|
533
|
+
.tree-view-wrapper {
|
|
534
|
+
width: 100%;
|
|
535
|
+
overflow-x: auto;
|
|
536
|
+
overflow-y: hidden;
|
|
537
|
+
padding: 20px 0;
|
|
538
|
+
display: block;
|
|
539
|
+
}
|
|
540
|
+
|
|
541
|
+
.tree-view-container {
|
|
542
|
+
position: relative;
|
|
543
|
+
display: inline-flex;
|
|
544
|
+
min-width: 100%;
|
|
545
|
+
padding-bottom: 40px;
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
.tree-nodes-container {
|
|
549
|
+
display: flex;
|
|
550
|
+
gap: 60px;
|
|
551
|
+
z-index: 1;
|
|
552
|
+
}
|
|
553
|
+
|
|
554
|
+
.tree-column {
|
|
555
|
+
display: flex;
|
|
556
|
+
flex-direction: column;
|
|
557
|
+
gap: 20px;
|
|
558
|
+
justify-content: center;
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
.tree-node {
|
|
562
|
+
background: var(--header-bg);
|
|
563
|
+
border: 1px solid var(--border-color);
|
|
564
|
+
border-radius: 8px;
|
|
565
|
+
padding: 12px;
|
|
566
|
+
min-width: 180px;
|
|
567
|
+
max-width: 300px;
|
|
568
|
+
position: relative;
|
|
569
|
+
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
570
|
+
cursor: default;
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
.tree-node:hover {
|
|
574
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
575
|
+
border-color: var(--type-object);
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
.tree-node-header {
|
|
579
|
+
display: flex;
|
|
580
|
+
flex-direction: column;
|
|
581
|
+
gap: 4px;
|
|
582
|
+
}
|
|
583
|
+
|
|
584
|
+
.tree-node-title-row {
|
|
585
|
+
display: flex;
|
|
586
|
+
align-items: center;
|
|
587
|
+
justify-content: space-between;
|
|
588
|
+
gap: 8px;
|
|
589
|
+
margin-bottom: 2px;
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
.tree-node-meta {
|
|
593
|
+
font-size: 11px;
|
|
594
|
+
margin-top: 8px;
|
|
595
|
+
padding-top: 8px;
|
|
596
|
+
border-top: 1px solid var(--border-color);
|
|
597
|
+
display: flex;
|
|
598
|
+
flex-direction: column;
|
|
599
|
+
gap: 4px;
|
|
600
|
+
}
|
|
601
|
+
|
|
602
|
+
.tree-node-meta-item {
|
|
603
|
+
color: var(--text-color);
|
|
604
|
+
opacity: 0.9;
|
|
605
|
+
}
|
|
606
|
+
|
|
607
|
+
.tree-node-meta-item code {
|
|
608
|
+
background: rgba(0,0,0,0.1);
|
|
609
|
+
padding: 1px 4px;
|
|
610
|
+
border-radius: 3px;
|
|
611
|
+
font-family: 'Consolas', monospace;
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
.tree-enum-values {
|
|
615
|
+
color: var(--type-string);
|
|
616
|
+
font-size: 10px;
|
|
617
|
+
word-break: break-all;
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
.tree-node-header .property-name {
|
|
621
|
+
margin-right: 0;
|
|
622
|
+
font-size: 14px;
|
|
623
|
+
}
|
|
624
|
+
|
|
625
|
+
.tree-node-description {
|
|
626
|
+
font-size: 11px;
|
|
627
|
+
color: var(--description-color);
|
|
628
|
+
margin-top: 8px;
|
|
629
|
+
border-top: 1px solid var(--border-color);
|
|
630
|
+
padding-top: 8px;
|
|
631
|
+
font-style: italic;
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
.tree-node-toggle {
|
|
635
|
+
position: absolute;
|
|
636
|
+
right: -12px;
|
|
637
|
+
top: 50%;
|
|
638
|
+
transform: translateY(-50%);
|
|
639
|
+
width: 20px;
|
|
640
|
+
height: 20px;
|
|
641
|
+
background: var(--type-object);
|
|
642
|
+
color: white;
|
|
643
|
+
border-radius: 50%;
|
|
644
|
+
display: flex;
|
|
645
|
+
align-items: center;
|
|
646
|
+
justify-content: center;
|
|
647
|
+
font-size: 14px;
|
|
648
|
+
cursor: pointer;
|
|
649
|
+
border: 2px solid var(--bg-color);
|
|
650
|
+
z-index: 2;
|
|
651
|
+
}
|
|
652
|
+
|
|
653
|
+
.tree-connectors {
|
|
654
|
+
position: absolute;
|
|
655
|
+
top: 0;
|
|
656
|
+
left: 0;
|
|
657
|
+
pointer-events: none;
|
|
658
|
+
z-index: 0;
|
|
659
|
+
}
|
|
660
|
+
|
|
661
|
+
.tree-connector-line {
|
|
662
|
+
fill: none;
|
|
663
|
+
stroke: var(--border-color);
|
|
664
|
+
stroke-width: 1.5px;
|
|
665
|
+
transition: stroke 0.2s ease;
|
|
666
|
+
}
|
|
667
|
+
|
|
668
|
+
.tree-node:hover + .tree-connector-line {
|
|
669
|
+
stroke: var(--type-object);
|
|
670
|
+
}
|
|
671
|
+
`}const q="json-schema-viewer-styles";function _(){if(typeof document>"u"||document.getElementById(q))return;const e=document.createElement("style");e.id=q,e.textContent=J(),document.head.appendChild(e)}function I(e){const t=Math.max(e.lastIndexOf("/"),e.lastIndexOf("\\"));return t>=0?e.slice(t+1):e}function N(e){if(!e||typeof e!="object")return!1;for(const t in e){if(!Object.prototype.hasOwnProperty.call(e,t))continue;const n=e[t];if(t==="$ref"&&typeof n=="string"&&n.includes(".json")||N(n))return!0}return!1}function C(e,t,n){if(!e||!e.$ref)return e||{};const r=e.$ref,c=n||{};let l=null,d=!1;if(r.includes(".json#/")){const[s,p]=r.split("#"),i=I(s),a=c[i];if(!a)return{$ref:r,__isMissing:!0};let o=a;const m=(p||"").split("/").slice(1);for(const f of m)if(o&&typeof o=="object"&&f in o)o=o[f];else return{$ref:r,__isMissing:!0};l=o,d=!0}else if(r.includes(".json")){const s=I(r.split("#")[0]);if(l=c[s],!l)return{$ref:r,__isMissing:!0};d=!0}else if(r.startsWith("#/")){let s=t;const p=r.split("/").slice(1);for(const i of p)if(s&&typeof s=="object"&&i in s)s=s[i];else return{$ref:r,__isMissing:!0};l=s}if(l&&d){const s={...l};return Object.defineProperty(s,"__isImported",{value:!0,enumerable:!1}),s}return l||e}function L(e){return e?e.__isMissing?"missing":e.$ref?"ref":e.type?Array.isArray(e.type)?e.type.join(" | "):e.type:e.enum?"enum":e.oneOf?"oneOf":e.anyOf?"anyOf":e.allOf?"allOf":e.properties?"object":e.items?"array":"any":"any"}function O(e){return e?!!(e.properties||e.items||e.oneOf||e.anyOf||e.allOf||e.description||e.enum||e.default!==void 0||e.example!==void 0||e.format||e.pattern||e.minimum!==void 0||e.maximum!==void 0||e.minLength!==void 0||e.maxLength!==void 0):!1}function E(e,t,n,r){if(!e)return null;if(e.$ref){if(r.has(e.$ref))return"...";r.add(e.$ref);const l=C(e,t,n),d=E(l,t,n,r);return r.delete(e.$ref),d}if(e.example!==void 0)return e.example;if(e.default!==void 0)return e.default;if(e.enum&&e.enum.length>0)return e.enum[0];if(e.const!==void 0)return e.const;if(e.oneOf&&e.oneOf.length>0)return E(e.oneOf[0],t,n,r);if(e.anyOf&&e.anyOf.length>0)return E(e.anyOf[0],t,n,r);if(e.allOf&&e.allOf.length>0){let l={};for(const d of e.allOf){const s=C(d,t,n);if(s.properties){const p=E(s,t,n,r);l={...l,...p}}}return l}const c=Array.isArray(e.type)?e.type[0]:e.type;switch(c){case"object":{if(e.properties){const l={};for(const[d,s]of Object.entries(e.properties))l[d]=E(s,t,n,r);return l}return{}}case"array":return e.items?[E(e.items,t,n,r)]:[];case"string":return e.format==="date-time"?new Date().toISOString():e.format==="date"?new Date().toISOString().split("T")[0]:e.format==="time"?"12:00:00":e.format==="email"?"user@example.com":e.format==="uri"||e.format==="url"?"https://example.com":e.format==="uuid"?"550e8400-e29b-41d4-a716-446655440000":e.minLength?"x".repeat(e.minLength):"string";case"number":case"integer":return e.minimum!==void 0?e.minimum:e.maximum!==void 0?e.maximum:0;case"boolean":return!0;case"null":return null;default:{if(e.properties){const l={};for(const[d,s]of Object.entries(e.properties))l[d]=E(s,t,n,r);return l}return e.items?[E(e.items,t,n,r)]:null}}}function V(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\\"])*")(\s*:)?/g,t=>{let n="json-string";return/:$/.test(t)&&(n="json-key"),'<span class="'+n+'">'+t+"</span>"}).replace(/\b(true|false)\b/g,'<span class="json-boolean">$1</span>').replace(/\bnull\b/g,'<span class="json-null">null</span>').replace(/\b(-?\d+(\.\d+)?([eE][+-]?\d+)?)\b/g,'<span class="json-number">$1</span>')}function g(e){if(typeof e!="string")return String(e??"");const t=document.createElement("div");return t.textContent=e,t.innerHTML}function B(e,t){const n=t.schema,r=t.bundle??{},c=t.importedFileNames??[],l=t.missingFileNames??[],d=t.sourcePositions??{},s=t.activeLinkEnabled??!1,p=t.onNavigateToSource;if(n.properties){const a=document.createElement("div");a.innerHTML='<div class="section-title">Properties</div>';const o=n.required||[];S(a,n.properties,o,n,r,d,s,p,"properties"),e.appendChild(a)}const i=n.definitions||n.$defs||{};if(Object.keys(i).length>0){const a=document.createElement("div");a.className="definitions-section",a.innerHTML='<div class="section-title">Definitions</div>';const o=n.definitions?"definitions":"$defs";for(const[m,f]of Object.entries(i)){const v=K(String(m),f,n,r,d,s,p,o);a.appendChild(v)}e.appendChild(a)}if(c.length>0){const a=document.createElement("h2");a.className="section-title",a.textContent="Imported files",e.appendChild(a);const o=document.createElement("div");o.className="imported-files-container";const m=document.createElement("ul");c.forEach(f=>{const v=document.createElement("li");if(v.textContent=f,l.includes(f)){const b=document.createElement("span");b.className="missing-badge",b.textContent="file not found",v.appendChild(document.createTextNode(" ")),v.appendChild(b)}m.appendChild(v)}),o.appendChild(m),e.appendChild(o)}}function S(e,t,n,r,c,l,d,s,p){for(const[i,a]of Object.entries(t)){const o=n.includes(i),m=`${p}.${i}`,f=F(i,a,o,r,c,l,d,s,m);e.appendChild(f)}}function F(e,t,n,r,c,l,d,s,p){const i=document.createElement("div");i.className="schema-object";const a=C(t,r,c),o=L(a),m=O(a),f=a.description||"",v=a.__isImported||N(t),b=a.__isMissing,w=l[p],x=h=>{if(!h)return null;const u=h.match(/[#/](\$defs|definitions)\/([^/]+)$/);if(u)return u[2];const k=h.match(/\/([^/]+)$/);return k?k[1]:null};let $=o;if(t.$ref){const h=x(t.$ref);h&&($=`object<${h}>`)}else if(o==="array"&&t.items?.$ref){const h=x(t.items.$ref);h&&($=`array<${h}>`)}const y=document.createElement("div");if(y.className="schema-object-header",w!==void 0&&(y.dataset.sourceLine=String(w)),y.innerHTML=`
|
|
672
|
+
${m?'<svg class="expand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>':'<div style="width: 24px;"></div>'}
|
|
673
|
+
<span class="property-name">${g(e)}</span>
|
|
674
|
+
<span class="property-type type-${g(o)}">${o==="missing"?"file not found":g($)}</span>
|
|
675
|
+
${n?'<span class="required-badge">required</span>':""}
|
|
676
|
+
${v?'<span class="imported-badge">imported</span>':""}
|
|
677
|
+
${b?'<span class="missing-badge">file not found</span>':""}
|
|
678
|
+
${f?`<span class="property-description">${g(f)}</span>`:""}
|
|
679
|
+
`,y.addEventListener("click",h=>{if(m){const u=i.querySelector(".schema-object-content"),k=y.querySelector(".expand-icon");u?.classList.toggle("expanded"),k?.classList.toggle("expanded")}d&&w!==void 0&&s&&(s(w),h.stopPropagation())}),i.appendChild(y),m&&!b){const h=document.createElement("div");h.className="schema-object-content",P(h,a,r,c,l,d,s,p),i.appendChild(h)}return i}function P(e,t,n,r,c,l,d,s){if(!(t.properties||t.items||t.oneOf||t.anyOf||t.allOf)){A(e,t,n,r,c,l,d,s);return}let i="schema";const a=document.createElement("div");a.className="view-toggle",a.innerHTML=`
|
|
680
|
+
<button class="view-toggle-btn" data-view="example">Example Value</button>
|
|
681
|
+
<button class="view-toggle-btn active" data-view="schema">Schema</button>
|
|
682
|
+
`;const o=document.createElement("div");o.className="property-content-area";const m=()=>{if(o.innerHTML="",a.querySelectorAll(".view-toggle-btn").forEach(f=>{f.classList.toggle("active",f.dataset.view===i)}),i==="example"){const f=document.createElement("div");f.className="object-example-view";const v=E(t,n,r,new Set),b=V(JSON.stringify(v,null,2));f.innerHTML=`<pre>${b}</pre>`,o.appendChild(f)}else A(o,t,n,r,c,l,d,s)};a.addEventListener("click",f=>{const v=f.target?.closest(".view-toggle-btn");v&&v.dataset.view&&v.dataset.view!==i&&(i=v.dataset.view,m())}),e.appendChild(a),e.appendChild(o),m()}function A(e,t,n,r,c,l,d,s){const p=document.createElement("div");p.className="property-details";let i="";if(t.description&&(i+=`<div class="property-detail-row"><span class="property-detail-label">Description:</span><span class="property-detail-value">${g(t.description)}</span></div>`),t.default!==void 0&&(i+=`<div class="property-detail-row"><span class="property-detail-label">Default:</span><span class="property-detail-value">${g(JSON.stringify(t.default))}</span></div>`),t.example!==void 0&&(i+=`<div class="property-detail-row"><span class="property-detail-label">Example:</span><span class="property-detail-value">${g(JSON.stringify(t.example))}</span></div>`),t.format&&(i+=`<div class="property-detail-row"><span class="property-detail-label">Format:</span><span class="property-detail-value">${g(t.format)}</span></div>`),t.pattern&&(i+=`<div class="property-detail-row"><span class="property-detail-label">Pattern:</span><span class="property-detail-value">${g(t.pattern)}</span></div>`),t.minimum!==void 0&&(i+=`<div class="property-detail-row"><span class="property-detail-label">Minimum:</span><span class="property-detail-value">${String(t.minimum)}</span></div>`),t.maximum!==void 0&&(i+=`<div class="property-detail-row"><span class="property-detail-label">Maximum:</span><span class="property-detail-value">${String(t.maximum)}</span></div>`),t.minLength!==void 0&&(i+=`<div class="property-detail-row"><span class="property-detail-label">Min Length:</span><span class="property-detail-value">${String(t.minLength)}</span></div>`),t.maxLength!==void 0&&(i+=`<div class="property-detail-row"><span class="property-detail-label">Max Length:</span><span class="property-detail-value">${String(t.maxLength)}</span></div>`),t.minItems!==void 0&&(i+=`<div class="property-detail-row"><span class="property-detail-label">Min Items:</span><span class="property-detail-value">${String(t.minItems)}</span></div>`),t.maxItems!==void 0&&(i+=`<div class="property-detail-row"><span class="property-detail-label">Max Items:</span><span class="property-detail-value">${String(t.maxItems)}</span></div>`),t.enum&&(i+=`<div class="property-detail-row"><span class="property-detail-label">Enum Values:</span><span class="property-detail-value"><div class="enum-values">${t.enum.map(a=>`<span class="enum-value">${g(JSON.stringify(a))}</span>`).join("")}</div></span></div>`),i&&(p.innerHTML=i,e.appendChild(p)),t.properties){const a=document.createElement("div");a.className="nested-properties";const o=t.required||[];S(a,t.properties,o,n,r,c,l,d,`${s}.properties`),e.appendChild(a)}if(t.items){const a=document.createElement("div");a.className="array-items-label",a.textContent="Array Items:",e.appendChild(a);const o=C(t.items,n,r);if(o.properties){const m=document.createElement("div");m.className="nested-properties";const f=o.required||[];S(m,o.properties,f,n,r,c,l,d,`${s}.items.properties`),e.appendChild(m)}else{const m=L(o),f=document.createElement("div");f.innerHTML=`<span class="property-type type-${g(m)}">${g(m)}</span>`,o.description&&(f.innerHTML+=` <span class="property-description">${g(o.description)}</span>`),e.appendChild(f)}}["oneOf","anyOf","allOf"].forEach(a=>{if(t[a]){const o=document.createElement("div");o.className="array-items-label",o.textContent=a+":",e.appendChild(o),t[a].forEach((m,f)=>{const v=C(m,n,r),b=`${s}.${a}.${f}`,w=F(`Option ${f+1}`,v,!1,n,r,c,l,d,b);e.appendChild(w)})}})}function K(e,t,n,r,c,l,d,s){const p=document.createElement("div");p.className="schema-object",p.id=`def-${e}`;const i=C(t,n,r),a=L(i),o=O(i),m=i.description||"",f=i.__isImported||N(t),v=i.__isMissing,b=`${s}.${e}`,w=c[b],x=document.createElement("div");if(x.className="schema-object-header",w!==void 0&&(x.dataset.sourceLine=String(w)),x.innerHTML=`
|
|
683
|
+
${o?'<svg class="expand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>':'<div style="width: 24px;"></div>'}
|
|
684
|
+
<span class="property-name">${g(e)}</span>
|
|
685
|
+
<span class="property-type type-${g(a)}">${a==="missing"?"file not found":g(a)}</span>
|
|
686
|
+
${f?'<span class="imported-badge">imported</span>':""}
|
|
687
|
+
${v?'<span class="missing-badge">file not found</span>':""}
|
|
688
|
+
${m?`<span class="property-description">${g(m)}</span>`:""}
|
|
689
|
+
`,x.addEventListener("click",$=>{if(o){const y=p.querySelector(".schema-object-content"),h=x.querySelector(".expand-icon");y?.classList.toggle("expanded"),h?.classList.toggle("expanded")}l&&w!==void 0&&d&&(d(w),$.stopPropagation())}),p.appendChild(x),o&&!v){const $=document.createElement("div");$.className="schema-object-content",P($,i,n,r,c,l,d,b),p.appendChild($)}return p}function W(e,t){const{schema:n,bundle:r={},sourcePositions:c={},activeLinkEnabled:l=!1,onNavigateToSource:d}=t;e.innerHTML="",e.classList.add("tree-view-wrapper");const s=X(n);Y(e,s,n,r,c,l,d)}function X(e,t){return{name:e.title||"root",prop:e,level:0,children:[],isExpanded:!0,parentId:null,id:"root",jsonPath:""}}function Y(e,t,n,r,c,l,d){const s=document.createElement("div");s.className="tree-view-container",e.appendChild(s);const p=document.createElementNS("http://www.w3.org/2000/svg","svg");p.setAttribute("class","tree-connectors"),s.appendChild(p);const i=document.createElement("div");i.className="tree-nodes-container",s.appendChild(i);const a={expandedNodes:new Set(["root"]),nodeElements:new Map},o=()=>{i.innerHTML="",a.nodeElements.clear(),D(i,t,0,a,n,r,o,c,l,d),setTimeout(()=>H(p,a),0)};o(),window.addEventListener("resize",()=>H(p,a))}function D(e,t,n,r,c,l,d,s,p,i){const a=Z(e,n),o=document.createElement("div");o.className="tree-node",o.id=`node-${t.id}`;const m=C(t.prop,c,l);let f=t.jsonPath||"";if(t.prop.$ref&&typeof t.prop.$ref=="string"){const u=t.prop.$ref.match(/#\/(.+)$/);u&&(f=u[1].replace(/\//g,"."))}const v=f?s[f]:void 0;v!==void 0&&(o.dataset.sourceLine=String(v));const b=L(m),w=O(m),x=r.expandedNodes.has(t.id),$=u=>{if(!u)return null;const k=u.match(/[#/](\$defs|definitions)\/([^/]+)$/);if(k)return k[2];const z=u.match(/\/([^/]+)$/);return z?z[1]:null};let y=m.enum?"enum":b;if(t.prop.$ref){const u=$(t.prop.$ref);u&&(y=u)}else if(b==="array"&&t.prop.items?.$ref){const u=$(t.prop.items.$ref);u&&(y=`array<${u}>`)}else if(b==="object"&&m.properties){const u=Object.keys(m.properties).length;y=`object (${u} ${u===1?"property":"properties"})`}else if(b==="array"&&m.items){const u=C(m.items,c,l);y=`array<${L(u)}>`}let h="";x&&(m.pattern&&(h+=`<div class="tree-node-meta-item">Pattern: <code>${g(m.pattern)}</code></div>`),m.minLength!==void 0&&(h+=`<div class="tree-node-meta-item">Min Length: ${m.minLength}</div>`)),m.enum&&(h+=`<div class="tree-node-meta-item">Enum: <span class="tree-enum-values">${m.enum.map(u=>JSON.stringify(u)).join(", ")}</span></div>`),o.innerHTML=`
|
|
690
|
+
<div class="tree-node-header">
|
|
691
|
+
<div class="tree-node-title-row">
|
|
692
|
+
<span class="property-name">${g(t.name)}</span>
|
|
693
|
+
${t.isRequired?'<span class="required-badge">required</span>':""}
|
|
694
|
+
</div>
|
|
695
|
+
<span class="property-type type-${g(y)}">${g(y)}</span>
|
|
696
|
+
</div>
|
|
697
|
+
${h?`<div class="tree-node-meta">${h}</div>`:""}
|
|
698
|
+
${x&&m.description?`<div class="tree-node-description">${g(m.description)}</div>`:""}
|
|
699
|
+
${w?`
|
|
700
|
+
<div class="tree-node-toggle">
|
|
701
|
+
${x?"−":"+"}
|
|
702
|
+
</div>
|
|
703
|
+
`:""}
|
|
704
|
+
`,w&&o.querySelector(".tree-node-toggle")?.addEventListener("click",u=>{u.stopPropagation(),x?r.expandedNodes.delete(t.id):r.expandedNodes.add(t.id),d()}),o.addEventListener("click",u=>{p&&v!==void 0&&i&&i(v)}),a.appendChild(o),r.nodeElements.set(t.id,o),x&&G(m,c,l,t.id,f).forEach(k=>{D(e,k,n+1,r,c,l,d,s,p,i)})}function Z(e,t){let n=e.querySelector(`.tree-column[data-depth="${t}"]`);return n||(n=document.createElement("div"),n.className="tree-column",n.setAttribute("data-depth",t.toString()),e.appendChild(n)),n}function G(e,t,n,r,c){const l=[],d=Array.isArray(e.required)?e.required:[];if(e.properties){const s=c?`${c}.properties`:"properties";for(const[p,i]of Object.entries(e.properties))l.push({name:p,prop:i,level:0,children:[],isExpanded:!1,parentId:r,id:`${r}.${p}`,isRequired:d.includes(p),jsonPath:`${s}.${p}`})}if(e.items){const s=c?`${c}.items`:"items";l.push({name:"items",prop:e.items,level:0,children:[],isExpanded:!1,parentId:r,id:`${r}.items`,jsonPath:s})}return["oneOf","anyOf","allOf"].forEach(s=>{e[s]&&Array.isArray(e[s])&&e[s].forEach((p,i)=>{const a=c?`${c}.${s}.${i}`:`${s}.${i}`;l.push({name:`${s}[${i}]`,prop:p,level:0,children:[],isExpanded:!1,parentId:r,id:`${r}.${s}[${i}]`,jsonPath:a})})}),l}function H(e,t){e.innerHTML="";const n=e.parentElement.getBoundingClientRect();e.setAttribute("width",n.width.toString()),e.setAttribute("height",n.height.toString()),t.nodeElements.forEach((r,c)=>{const l=c.substring(0,c.lastIndexOf("."));if(l&&t.nodeElements.has(l)){const d=t.nodeElements.get(l);Q(e,d,r,n)}else c!=="root"&&c.includes(".")})}function Q(e,t,n,r){const c=t.getBoundingClientRect(),l=n.getBoundingClientRect(),d=c.right-r.left,s=c.top+c.height/2-r.top,p=l.left-r.left,i=l.top+l.height/2-r.top,a=document.createElementNS("http://www.w3.org/2000/svg","path"),o=(d+p)/2,m=`M ${d} ${s} C ${o} ${s}, ${o} ${i}, ${p} ${i}`;a.setAttribute("d",m),a.setAttribute("class","tree-connector-line"),e.appendChild(a)}let j="normal";function T(e,t){const n=t.schema;if(t.initialView&&(j=t.initialView),e.innerHTML="",e.classList.add("schema-container"),e.classList.toggle("normal-view",j==="normal"),!n){const o=document.createElement("div");o.className="loading",o.textContent="Loading schema...",e.appendChild(o);return}const r=document.createElement("div");r.className="schema-header";const c=n.title||"JSON Schema",l=n.description||"",d=n.$schema||"",s=n.$id||"";r.innerHTML=`
|
|
705
|
+
<div class="schema-header-top">
|
|
706
|
+
<div class="schema-title">${g(c)}</div>
|
|
707
|
+
<div class="view-selector">
|
|
708
|
+
<div class="view-switch" title="Toggle between normal and tree view modes">
|
|
709
|
+
<span class="view-switch-label view-switch-left">Normal</span>
|
|
710
|
+
<input type="checkbox" id="view-toggle" class="view-switch-checkbox" aria-label="Toggle Tree View" ${j==="tree"?"checked":""} />
|
|
711
|
+
<span class="view-switch-label view-switch-right">Tree view</span>
|
|
712
|
+
</div>
|
|
713
|
+
</div>
|
|
714
|
+
</div>
|
|
715
|
+
${l?`<div class="schema-description">${g(l)}</div>`:""}
|
|
716
|
+
<div class="schema-meta">
|
|
717
|
+
${d?`<div class="schema-meta-item"><span class="schema-meta-label">Schema:</span><span class="schema-meta-value">${g(d)}</span></div>`:""}
|
|
718
|
+
${s?`<div class="schema-meta-item"><span class="schema-meta-label">ID:</span><span class="schema-meta-value">${g(s)}</span></div>`:""}
|
|
719
|
+
</div>
|
|
720
|
+
${t.onActiveLinkChange?`<div class="active-link-bottom-row">
|
|
721
|
+
<label class="active-link-label" title="Enable clicking on properties to navigate to their source location">
|
|
722
|
+
<input type="checkbox" id="active-link-toggle" class="active-link-checkbox" ${t.activeLinkEnabled?"checked":""} />
|
|
723
|
+
<span>Active link</span>
|
|
724
|
+
</label>
|
|
725
|
+
</div>`:""}
|
|
726
|
+
`,e.appendChild(r);const p=r.querySelector("#view-toggle");p&&p.addEventListener("change",()=>{j=p.checked?"tree":"normal",T(e,{...t,initialView:j})});const i=r.querySelector("#active-link-toggle");i&&t.onActiveLinkChange&&i.addEventListener("change",()=>{t.onActiveLinkChange&&t.onActiveLinkChange(i.checked)});const a=document.createElement("div");a.className="schema-content-root",e.appendChild(a),j==="tree"?W(a,t):B(a,t)}function U(e){const t=M.useRef(null),n=M.useMemo(()=>({schema:e.schema,bundle:e.bundle??{},importedFileNames:e.importedFileNames??[],missingFileNames:e.missingFileNames??[]}),[e.schema,e.bundle,e.importedFileNames,e.missingFileNames]);return M.useEffect(()=>{_(),t.current&&T(t.current,n)},[n]),R.jsx("div",{ref:t,className:e.className})}exports.SchemaViewer=U;exports.ensureSchemaViewerStyles=_;exports.escapeHtml=g;exports.generateExampleValue=E;exports.getType=L;exports.hasNestedContent=O;exports.hasRemoteRef=N;exports.renderSchemaInto=T;exports.resolveRef=C;exports.syntaxHighlightJson=V;
|