@chrisdudek/yg 5.4.1 → 5.4.2
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/bin.js +153 -41
- package/dist/templates/portal/app.css +278 -0
- package/dist/templates/portal/shell.css +257 -0
- package/dist/templates/portal/shell.html +39 -0
- package/dist/templates/portal/tokens.css +269 -0
- package/dist/templates/portal/views-audit.css +108 -0
- package/dist/templates/portal/views-flows.css +258 -0
- package/dist/templates/portal/views-panel.css +249 -0
- package/dist/templates/portal/views-relations.css +218 -0
- package/dist/templates/portal/views-rulebook.css +279 -0
- package/dist/templates/portal/views-start.css +208 -0
- package/dist/templates/portal/views.css +340 -0
- package/package.json +4 -2
|
@@ -0,0 +1,279 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* V5 Rulebook + V6 Type Model styles.
|
|
3
|
+
*
|
|
4
|
+
* The catalogue table (V5) and the type-vocabulary cards (V6) share a focused stylesheet: the
|
|
5
|
+
* shared `.rb-sub` subtitle line, the kind/status badges, the honest coverage micro-bar (sized
|
|
6
|
+
* by the real verdict states, never a fabricated green), the per-aspect node-cell expansion, and
|
|
7
|
+
* the architecture type cards. Tokens come from tokens.css; every saturated verdict color is
|
|
8
|
+
* resolved through the shared state classes (`.state-*`), so this file invents no green. The
|
|
9
|
+
* relation hues on a type card are relation TYPES (set inline from the view), not verdicts.
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
/* Shared subtitle line, reused by V5 / V6 / V7 / V8. */
|
|
13
|
+
.rb-sub {
|
|
14
|
+
color: var(--text-muted);
|
|
15
|
+
font-size: 12px;
|
|
16
|
+
margin: 0 0 14px;
|
|
17
|
+
}
|
|
18
|
+
.rb-empty {
|
|
19
|
+
color: var(--text-muted);
|
|
20
|
+
font-size: 12.5px;
|
|
21
|
+
font-style: italic;
|
|
22
|
+
margin: 12px 2px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* ── V5 catalogue table ──────────────────────────────────────────────────── */
|
|
26
|
+
.rb-table {
|
|
27
|
+
width: 100%;
|
|
28
|
+
border-collapse: collapse;
|
|
29
|
+
}
|
|
30
|
+
.rb-table thead td {
|
|
31
|
+
font-size: 10px;
|
|
32
|
+
text-transform: uppercase;
|
|
33
|
+
letter-spacing: 0.5px;
|
|
34
|
+
color: var(--text-muted);
|
|
35
|
+
padding: 6px 10px;
|
|
36
|
+
border-bottom: 1px solid var(--border);
|
|
37
|
+
}
|
|
38
|
+
.rb-table tbody td {
|
|
39
|
+
padding: 11px 10px;
|
|
40
|
+
border-bottom: 1px solid var(--border-subtle);
|
|
41
|
+
font-size: 13px;
|
|
42
|
+
vertical-align: middle;
|
|
43
|
+
}
|
|
44
|
+
.rb-row-sel {
|
|
45
|
+
background: var(--surface-2);
|
|
46
|
+
}
|
|
47
|
+
.rb-aid {
|
|
48
|
+
width: 34%;
|
|
49
|
+
}
|
|
50
|
+
.rb-idbtn {
|
|
51
|
+
border: 0;
|
|
52
|
+
background: none;
|
|
53
|
+
padding: 0;
|
|
54
|
+
font: inherit;
|
|
55
|
+
font-weight: 550;
|
|
56
|
+
color: var(--accent-text);
|
|
57
|
+
cursor: pointer;
|
|
58
|
+
text-align: left;
|
|
59
|
+
}
|
|
60
|
+
.rb-desc {
|
|
61
|
+
display: block;
|
|
62
|
+
color: var(--text-muted);
|
|
63
|
+
font-size: 11.5px;
|
|
64
|
+
font-weight: 400;
|
|
65
|
+
margin-top: 1px;
|
|
66
|
+
}
|
|
67
|
+
.rb-badge {
|
|
68
|
+
font-size: 10px;
|
|
69
|
+
border-radius: 5px;
|
|
70
|
+
padding: 1px 6px;
|
|
71
|
+
white-space: nowrap;
|
|
72
|
+
border: 1px solid var(--border-subtle);
|
|
73
|
+
color: var(--text-secondary);
|
|
74
|
+
}
|
|
75
|
+
.rb-badge-deterministic {
|
|
76
|
+
color: var(--verified);
|
|
77
|
+
border-color: color-mix(in srgb, var(--verified) 40%, transparent);
|
|
78
|
+
}
|
|
79
|
+
.rb-badge-llm {
|
|
80
|
+
color: var(--accent-text);
|
|
81
|
+
border-color: color-mix(in srgb, var(--accent) 40%, transparent);
|
|
82
|
+
}
|
|
83
|
+
.rb-badge-aggregate {
|
|
84
|
+
color: var(--text-muted);
|
|
85
|
+
}
|
|
86
|
+
.rb-st {
|
|
87
|
+
font-size: 10px;
|
|
88
|
+
border-radius: 5px;
|
|
89
|
+
padding: 1px 7px;
|
|
90
|
+
font-weight: 600;
|
|
91
|
+
text-transform: lowercase;
|
|
92
|
+
}
|
|
93
|
+
.rb-st-enforced {
|
|
94
|
+
border: 1.5px solid var(--text-secondary);
|
|
95
|
+
color: var(--text-primary);
|
|
96
|
+
}
|
|
97
|
+
.rb-st-advisory {
|
|
98
|
+
border: 1.5px solid var(--unverified);
|
|
99
|
+
color: var(--unverified);
|
|
100
|
+
}
|
|
101
|
+
.rb-st-draft {
|
|
102
|
+
border: 1.5px dotted var(--text-muted);
|
|
103
|
+
color: var(--text-muted);
|
|
104
|
+
}
|
|
105
|
+
.rb-scope {
|
|
106
|
+
font-size: 11.5px;
|
|
107
|
+
color: var(--text-secondary);
|
|
108
|
+
}
|
|
109
|
+
.rb-applies {
|
|
110
|
+
font-size: 12px;
|
|
111
|
+
color: var(--text-secondary);
|
|
112
|
+
}
|
|
113
|
+
.rb-cov {
|
|
114
|
+
min-width: 150px;
|
|
115
|
+
}
|
|
116
|
+
.rb-bar {
|
|
117
|
+
display: flex;
|
|
118
|
+
height: 8px;
|
|
119
|
+
width: 130px;
|
|
120
|
+
border-radius: 4px;
|
|
121
|
+
overflow: hidden;
|
|
122
|
+
border: 1px solid var(--border-subtle);
|
|
123
|
+
}
|
|
124
|
+
.rb-bar-seg.state-verified {
|
|
125
|
+
background: var(--verified);
|
|
126
|
+
}
|
|
127
|
+
.rb-bar-seg.state-refused {
|
|
128
|
+
background: var(--refused);
|
|
129
|
+
}
|
|
130
|
+
.rb-bar-seg.state-unverified {
|
|
131
|
+
background: var(--unverified);
|
|
132
|
+
}
|
|
133
|
+
.rb-bar-seg.state-no-rule {
|
|
134
|
+
flex: 1;
|
|
135
|
+
background: var(--norule-bg);
|
|
136
|
+
}
|
|
137
|
+
.rb-covnum {
|
|
138
|
+
font-size: 11px;
|
|
139
|
+
color: var(--text-muted);
|
|
140
|
+
margin-top: 3px;
|
|
141
|
+
}
|
|
142
|
+
.rb-note {
|
|
143
|
+
font-style: italic;
|
|
144
|
+
color: var(--text-muted);
|
|
145
|
+
font-size: 12px;
|
|
146
|
+
}
|
|
147
|
+
.rb-note-vacuous {
|
|
148
|
+
color: var(--unverified);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
/* ── Per-aspect node cells (rendered in the inspector panel; these classes are reused there) ─ */
|
|
152
|
+
.rb-cells {
|
|
153
|
+
display: flex;
|
|
154
|
+
flex-wrap: wrap;
|
|
155
|
+
gap: 8px;
|
|
156
|
+
}
|
|
157
|
+
.rb-cell {
|
|
158
|
+
display: flex;
|
|
159
|
+
align-items: center;
|
|
160
|
+
gap: 7px;
|
|
161
|
+
border: 1px solid var(--border-subtle);
|
|
162
|
+
border-radius: 7px;
|
|
163
|
+
padding: 4px 9px;
|
|
164
|
+
font: inherit;
|
|
165
|
+
font-size: 12px;
|
|
166
|
+
background: var(--bg);
|
|
167
|
+
cursor: pointer;
|
|
168
|
+
}
|
|
169
|
+
.rb-cell:hover {
|
|
170
|
+
border-color: var(--border-strong);
|
|
171
|
+
}
|
|
172
|
+
.rb-cell-st {
|
|
173
|
+
color: var(--text-muted);
|
|
174
|
+
font-size: 11px;
|
|
175
|
+
}
|
|
176
|
+
/* ── V6 Type Model cards ─────────────────────────────────────────────────── */
|
|
177
|
+
.ty-grid {
|
|
178
|
+
display: grid;
|
|
179
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
180
|
+
gap: 12px;
|
|
181
|
+
}
|
|
182
|
+
.ty-card {
|
|
183
|
+
border: 1px solid var(--border-subtle);
|
|
184
|
+
border-radius: 11px;
|
|
185
|
+
background: var(--surface-1);
|
|
186
|
+
padding: 14px 15px;
|
|
187
|
+
}
|
|
188
|
+
.ty-head {
|
|
189
|
+
display: flex;
|
|
190
|
+
align-items: center;
|
|
191
|
+
gap: 8px;
|
|
192
|
+
}
|
|
193
|
+
.ty-name {
|
|
194
|
+
font-size: 14.5px;
|
|
195
|
+
font-weight: 600;
|
|
196
|
+
}
|
|
197
|
+
.ty-badge {
|
|
198
|
+
font-size: 10px;
|
|
199
|
+
border-radius: 5px;
|
|
200
|
+
padding: 1px 6px;
|
|
201
|
+
border: 1px solid var(--border-subtle);
|
|
202
|
+
color: var(--text-secondary);
|
|
203
|
+
}
|
|
204
|
+
.ty-badge-cls {
|
|
205
|
+
color: var(--accent-text);
|
|
206
|
+
border-color: color-mix(in srgb, var(--accent) 40%, transparent);
|
|
207
|
+
}
|
|
208
|
+
.ty-badge-org {
|
|
209
|
+
color: var(--text-muted);
|
|
210
|
+
}
|
|
211
|
+
.ty-badge-strict {
|
|
212
|
+
color: var(--refused);
|
|
213
|
+
border-color: color-mix(in srgb, var(--refused) 40%, transparent);
|
|
214
|
+
}
|
|
215
|
+
.ty-badge-log {
|
|
216
|
+
color: var(--waived);
|
|
217
|
+
border-color: color-mix(in srgb, var(--waived) 40%, transparent);
|
|
218
|
+
}
|
|
219
|
+
.ty-count {
|
|
220
|
+
margin-left: auto;
|
|
221
|
+
border: 0;
|
|
222
|
+
background: none;
|
|
223
|
+
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
|
224
|
+
font-size: 12px;
|
|
225
|
+
color: var(--accent-text);
|
|
226
|
+
cursor: pointer;
|
|
227
|
+
}
|
|
228
|
+
.ty-desc {
|
|
229
|
+
color: var(--text-secondary);
|
|
230
|
+
font-size: 12.5px;
|
|
231
|
+
margin: 7px 0 10px;
|
|
232
|
+
line-height: 1.5;
|
|
233
|
+
}
|
|
234
|
+
.ty-kv {
|
|
235
|
+
display: grid;
|
|
236
|
+
grid-template-columns: 92px 1fr;
|
|
237
|
+
gap: 4px 10px;
|
|
238
|
+
font-size: 12px;
|
|
239
|
+
margin: 0;
|
|
240
|
+
}
|
|
241
|
+
.ty-kv dt {
|
|
242
|
+
color: var(--text-muted);
|
|
243
|
+
}
|
|
244
|
+
.ty-kv dd {
|
|
245
|
+
margin: 0;
|
|
246
|
+
}
|
|
247
|
+
.ty-rels {
|
|
248
|
+
display: flex;
|
|
249
|
+
flex-wrap: wrap;
|
|
250
|
+
gap: 4px 12px;
|
|
251
|
+
font-size: 11px;
|
|
252
|
+
}
|
|
253
|
+
.ty-reltype {
|
|
254
|
+
font-weight: 600;
|
|
255
|
+
}
|
|
256
|
+
.ty-reltargets {
|
|
257
|
+
color: var(--text-muted);
|
|
258
|
+
}
|
|
259
|
+
.ty-rel-none {
|
|
260
|
+
color: var(--text-muted);
|
|
261
|
+
font-size: 11px;
|
|
262
|
+
}
|
|
263
|
+
.ty-asps {
|
|
264
|
+
display: inline-flex;
|
|
265
|
+
flex-wrap: wrap;
|
|
266
|
+
gap: 5px;
|
|
267
|
+
}
|
|
268
|
+
.ty-asp {
|
|
269
|
+
border: 1px solid var(--border-subtle);
|
|
270
|
+
background: var(--bg);
|
|
271
|
+
border-radius: 5px;
|
|
272
|
+
padding: 1px 7px;
|
|
273
|
+
font-size: 11px;
|
|
274
|
+
color: var(--text-secondary);
|
|
275
|
+
cursor: pointer;
|
|
276
|
+
}
|
|
277
|
+
.ty-asp:hover {
|
|
278
|
+
border-color: var(--border-strong);
|
|
279
|
+
}
|
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* V9 Start here styles — the new-joiner on-ramp.
|
|
3
|
+
*
|
|
4
|
+
* A centered, card-framed 5-step wizard derived entirely from the live PortalData. Tokens come
|
|
5
|
+
* from tokens.css; the area dots and the colour-key in the final step read their treatment from
|
|
6
|
+
* the shared honest-state model (`.state-*`), so this file invents no green of its own.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
.st-frame {
|
|
10
|
+
width: 760px;
|
|
11
|
+
max-width: 96%;
|
|
12
|
+
margin: 0 auto;
|
|
13
|
+
}
|
|
14
|
+
.st-steps {
|
|
15
|
+
display: flex;
|
|
16
|
+
gap: 8px;
|
|
17
|
+
margin-bottom: 14px;
|
|
18
|
+
}
|
|
19
|
+
.st-step {
|
|
20
|
+
flex: 1;
|
|
21
|
+
height: 5px;
|
|
22
|
+
border-radius: 3px;
|
|
23
|
+
background: var(--surface-3);
|
|
24
|
+
}
|
|
25
|
+
.st-step-done {
|
|
26
|
+
background: var(--accent);
|
|
27
|
+
}
|
|
28
|
+
.st-step-now {
|
|
29
|
+
background: var(--accent-text);
|
|
30
|
+
}
|
|
31
|
+
.st-stepno {
|
|
32
|
+
font-size: 12px;
|
|
33
|
+
color: var(--text-muted);
|
|
34
|
+
margin-bottom: 6px;
|
|
35
|
+
}
|
|
36
|
+
.st-card {
|
|
37
|
+
border: 1px solid var(--border);
|
|
38
|
+
border-radius: 16px;
|
|
39
|
+
background: var(--surface-1);
|
|
40
|
+
padding: 24px 26px;
|
|
41
|
+
}
|
|
42
|
+
.st-h1 {
|
|
43
|
+
font-size: 23px;
|
|
44
|
+
font-weight: 650;
|
|
45
|
+
margin: 0 0 12px;
|
|
46
|
+
letter-spacing: -0.01em;
|
|
47
|
+
}
|
|
48
|
+
.st-lead {
|
|
49
|
+
font-size: 14.5px;
|
|
50
|
+
color: var(--text-secondary);
|
|
51
|
+
line-height: 1.6;
|
|
52
|
+
margin: 0 0 16px;
|
|
53
|
+
}
|
|
54
|
+
.st-lead-sm {
|
|
55
|
+
font-size: 13px;
|
|
56
|
+
margin: 6px 0 0;
|
|
57
|
+
}
|
|
58
|
+
.st-areas {
|
|
59
|
+
display: grid;
|
|
60
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
61
|
+
gap: 10px;
|
|
62
|
+
margin: 16px 0;
|
|
63
|
+
}
|
|
64
|
+
.st-area {
|
|
65
|
+
border: 1px solid var(--border-subtle);
|
|
66
|
+
border-radius: 10px;
|
|
67
|
+
padding: 11px 13px;
|
|
68
|
+
background: var(--bg);
|
|
69
|
+
display: flex;
|
|
70
|
+
flex-direction: column;
|
|
71
|
+
gap: 3px;
|
|
72
|
+
text-align: left;
|
|
73
|
+
}
|
|
74
|
+
.st-area-link {
|
|
75
|
+
font: inherit;
|
|
76
|
+
cursor: pointer;
|
|
77
|
+
}
|
|
78
|
+
.st-area-link:hover {
|
|
79
|
+
border-color: var(--border-strong);
|
|
80
|
+
}
|
|
81
|
+
.st-area-top {
|
|
82
|
+
display: flex;
|
|
83
|
+
align-items: center;
|
|
84
|
+
gap: 8px;
|
|
85
|
+
}
|
|
86
|
+
.st-area b {
|
|
87
|
+
font-size: 13.5px;
|
|
88
|
+
}
|
|
89
|
+
.st-area span {
|
|
90
|
+
font-size: 11.5px;
|
|
91
|
+
color: var(--text-muted);
|
|
92
|
+
}
|
|
93
|
+
.st-fact {
|
|
94
|
+
font-size: 22px;
|
|
95
|
+
font-weight: 650;
|
|
96
|
+
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
|
97
|
+
}
|
|
98
|
+
.st-flowcard {
|
|
99
|
+
border: 1px solid var(--border-subtle);
|
|
100
|
+
border-radius: 12px;
|
|
101
|
+
background: var(--bg);
|
|
102
|
+
padding: 16px 18px;
|
|
103
|
+
margin: 8px 0;
|
|
104
|
+
}
|
|
105
|
+
.st-flowcard > b {
|
|
106
|
+
font-size: 15px;
|
|
107
|
+
}
|
|
108
|
+
.st-flow-d {
|
|
109
|
+
color: var(--text-secondary);
|
|
110
|
+
font-size: 13px;
|
|
111
|
+
margin: 6px 0 10px;
|
|
112
|
+
line-height: 1.5;
|
|
113
|
+
}
|
|
114
|
+
.st-flow-meta {
|
|
115
|
+
color: var(--text-muted);
|
|
116
|
+
font-size: 12.5px;
|
|
117
|
+
line-height: 1.5;
|
|
118
|
+
}
|
|
119
|
+
.st-inline-link {
|
|
120
|
+
margin-top: 12px;
|
|
121
|
+
display: inline-flex;
|
|
122
|
+
border: 1px solid var(--border);
|
|
123
|
+
background: var(--surface-1);
|
|
124
|
+
border-radius: 9px;
|
|
125
|
+
padding: 7px 12px;
|
|
126
|
+
font: inherit;
|
|
127
|
+
font-size: 13px;
|
|
128
|
+
color: var(--accent-text);
|
|
129
|
+
font-weight: 550;
|
|
130
|
+
cursor: pointer;
|
|
131
|
+
}
|
|
132
|
+
.st-key {
|
|
133
|
+
display: grid;
|
|
134
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
135
|
+
gap: 10px;
|
|
136
|
+
margin: 14px 0 4px;
|
|
137
|
+
}
|
|
138
|
+
.st-key-item {
|
|
139
|
+
display: flex;
|
|
140
|
+
align-items: center;
|
|
141
|
+
gap: 12px;
|
|
142
|
+
border: 1px solid var(--border-subtle);
|
|
143
|
+
border-radius: 10px;
|
|
144
|
+
padding: 10px 12px;
|
|
145
|
+
background: var(--bg);
|
|
146
|
+
}
|
|
147
|
+
.st-key-text b {
|
|
148
|
+
font-weight: 600;
|
|
149
|
+
}
|
|
150
|
+
.st-key-text span {
|
|
151
|
+
display: block;
|
|
152
|
+
color: var(--text-muted);
|
|
153
|
+
font-size: 12px;
|
|
154
|
+
margin-top: 1px;
|
|
155
|
+
}
|
|
156
|
+
.st-roadmap {
|
|
157
|
+
display: flex;
|
|
158
|
+
gap: 6px;
|
|
159
|
+
flex-wrap: wrap;
|
|
160
|
+
margin: 18px 0 4px;
|
|
161
|
+
}
|
|
162
|
+
.st-chip {
|
|
163
|
+
font-size: 12px;
|
|
164
|
+
border: 1px solid var(--border-subtle);
|
|
165
|
+
border-radius: 999px;
|
|
166
|
+
padding: 4px 11px;
|
|
167
|
+
color: var(--text-muted);
|
|
168
|
+
}
|
|
169
|
+
.st-chip-now {
|
|
170
|
+
color: var(--text-primary);
|
|
171
|
+
border-color: var(--border-strong);
|
|
172
|
+
background: var(--surface-3);
|
|
173
|
+
}
|
|
174
|
+
.st-nav {
|
|
175
|
+
display: flex;
|
|
176
|
+
align-items: center;
|
|
177
|
+
gap: 10px;
|
|
178
|
+
margin-top: 22px;
|
|
179
|
+
}
|
|
180
|
+
.st-btn {
|
|
181
|
+
border: 1px solid var(--border);
|
|
182
|
+
border-radius: 9px;
|
|
183
|
+
padding: 9px 15px;
|
|
184
|
+
font: inherit;
|
|
185
|
+
font-size: 14px;
|
|
186
|
+
background: var(--bg);
|
|
187
|
+
color: var(--text-primary);
|
|
188
|
+
cursor: pointer;
|
|
189
|
+
}
|
|
190
|
+
.st-btn:disabled {
|
|
191
|
+
opacity: 0.5;
|
|
192
|
+
cursor: default;
|
|
193
|
+
}
|
|
194
|
+
.st-btn-primary {
|
|
195
|
+
background: var(--accent);
|
|
196
|
+
border-color: var(--accent);
|
|
197
|
+
color: #fff;
|
|
198
|
+
font-weight: 600;
|
|
199
|
+
}
|
|
200
|
+
.st-skip {
|
|
201
|
+
margin-left: auto;
|
|
202
|
+
border: 0;
|
|
203
|
+
background: none;
|
|
204
|
+
font: inherit;
|
|
205
|
+
font-size: 13px;
|
|
206
|
+
color: var(--text-muted);
|
|
207
|
+
cursor: pointer;
|
|
208
|
+
}
|