@rogatio/cli 1.8.2 → 1.9.1

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.
@@ -0,0 +1,565 @@
1
+ /* packages/editor/src/editor.css */
2
+ @font-face {
3
+ font-family: "Hanken Grotesk";
4
+ font-style: normal;
5
+ font-weight: 400;
6
+ font-display: swap;
7
+ src: url(fonts/hanken-grotesk-400.woff2) format("woff2");
8
+ }
9
+ @font-face {
10
+ font-family: "Hanken Grotesk";
11
+ font-style: normal;
12
+ font-weight: 500;
13
+ font-display: swap;
14
+ src: url(fonts/hanken-grotesk-500.woff2) format("woff2");
15
+ }
16
+ @font-face {
17
+ font-family: "Hanken Grotesk";
18
+ font-style: normal;
19
+ font-weight: 700;
20
+ font-display: swap;
21
+ src: url(fonts/hanken-grotesk-700.woff2) format("woff2");
22
+ }
23
+ @font-face {
24
+ font-family: "JetBrains Mono";
25
+ font-style: normal;
26
+ font-weight: 400;
27
+ font-display: swap;
28
+ src: url(fonts/jetbrains-mono-400.woff2) format("woff2");
29
+ }
30
+ @font-face {
31
+ font-family: "JetBrains Mono";
32
+ font-style: normal;
33
+ font-weight: 700;
34
+ font-display: swap;
35
+ src: url(fonts/jetbrains-mono-700.woff2) format("woff2");
36
+ }
37
+ .rogatio-editor {
38
+ --rogatio-bg: #121417;
39
+ --rogatio-surface: #161b22;
40
+ --rogatio-surface-raised: #1c222c;
41
+ --rogatio-surface-inset: #10131a;
42
+ --rogatio-primary: #007aff;
43
+ --rogatio-primary-strong: #0066d6;
44
+ --rogatio-secondary: #64748b;
45
+ --rogatio-tertiary: #0f172a;
46
+ --rogatio-neutral: #1e293b;
47
+ --rogatio-text: #f8fafc;
48
+ --rogatio-muted: #94a3b8;
49
+ --rogatio-faint: #64748b;
50
+ --rogatio-border: rgba(148, 163, 184, 0.16);
51
+ --rogatio-danger: #f87171;
52
+ --rogatio-danger-bg: rgba(248, 113, 113, 0.12);
53
+ --rogatio-success: #4ade80;
54
+ --rogatio-success-bg: rgba(74, 222, 128, 0.12);
55
+ --rogatio-warning: #fbbf24;
56
+ --rogatio-warning-bg: rgba(251, 191, 36, 0.12);
57
+ --rogatio-radius: 0.75rem;
58
+ --rogatio-radius-sm: 0.5rem;
59
+ --rogatio-font-body:
60
+ "Hanken Grotesk",
61
+ system-ui,
62
+ -apple-system,
63
+ "Segoe UI",
64
+ sans-serif;
65
+ --rogatio-font-mono:
66
+ "JetBrains Mono",
67
+ ui-monospace,
68
+ "SF Mono",
69
+ "Cascadia Mono",
70
+ Menlo,
71
+ Consolas,
72
+ monospace;
73
+ box-sizing: border-box;
74
+ color: var(--rogatio-text);
75
+ background: var(--rogatio-surface);
76
+ font-family: var(--rogatio-font-body);
77
+ font-size: 1rem;
78
+ line-height: 1.5;
79
+ }
80
+ .rogatio-editor *,
81
+ .rogatio-editor *::before,
82
+ .rogatio-editor *::after {
83
+ box-sizing: border-box;
84
+ }
85
+ .rogatio-editor button,
86
+ .rogatio-editor input,
87
+ .rogatio-editor select,
88
+ .rogatio-editor textarea {
89
+ color: inherit;
90
+ font: inherit;
91
+ }
92
+ .rogatio-editor button {
93
+ border: 1px solid var(--rogatio-border);
94
+ border-radius: var(--rogatio-radius-sm);
95
+ background: var(--rogatio-neutral);
96
+ color: var(--rogatio-text);
97
+ padding: 0.45rem 0.7rem;
98
+ cursor: pointer;
99
+ font-weight: 500;
100
+ transition:
101
+ background-color 120ms ease,
102
+ border-color 120ms ease,
103
+ color 120ms ease;
104
+ }
105
+ .rogatio-editor button:hover:not(:disabled) {
106
+ background: var(--rogatio-surface-raised);
107
+ border-color: rgba(148, 163, 184, 0.28);
108
+ }
109
+ .rogatio-editor button:disabled {
110
+ cursor: not-allowed;
111
+ opacity: 0.55;
112
+ }
113
+ .rogatio-editor :focus-visible {
114
+ outline: 3px solid var(--rogatio-primary);
115
+ outline-offset: 2px;
116
+ }
117
+ .rogatio-editor [data-editor-layout] {
118
+ display: grid;
119
+ grid-template-rows: auto minmax(0, 1fr);
120
+ min-width: 0;
121
+ }
122
+ .rogatio-editor [data-desktop-route-rail] {
123
+ position: sticky;
124
+ top: 0;
125
+ z-index: 1;
126
+ display: flex;
127
+ flex-wrap: wrap;
128
+ align-items: center;
129
+ gap: 0.35rem;
130
+ border-bottom: 1px solid var(--rogatio-border);
131
+ background: var(--rogatio-surface);
132
+ padding: 0.6rem 1rem;
133
+ }
134
+ .rogatio-editor [data-desktop-route-rail] button {
135
+ border: 1px solid transparent;
136
+ border-radius: 999px;
137
+ background: transparent;
138
+ padding: 0.35rem 0.8rem;
139
+ color: var(--rogatio-muted);
140
+ }
141
+ .rogatio-editor [data-desktop-route-rail] button:hover:not(:disabled) {
142
+ background: var(--rogatio-surface-raised);
143
+ color: var(--rogatio-text);
144
+ }
145
+ .rogatio-editor [data-desktop-route-rail] button[aria-current=page] {
146
+ border-color: rgba(0, 122, 255, 0.45);
147
+ background: rgba(0, 122, 255, 0.14);
148
+ color: var(--rogatio-text);
149
+ font-weight: 700;
150
+ }
151
+ .rogatio-editor [data-editor-main] {
152
+ min-width: 0;
153
+ padding: 1rem clamp(1rem, 3vw, 3rem) 3rem;
154
+ }
155
+ .rogatio-editor [data-editor-header] {
156
+ display: grid;
157
+ grid-template-columns: minmax(0, 1fr) minmax(14rem, 24rem);
158
+ gap: 1rem;
159
+ align-items: end;
160
+ margin-bottom: 1rem;
161
+ }
162
+ .rogatio-editor [data-editor-header] h1,
163
+ .rogatio-editor [data-editor-form] h2,
164
+ .rogatio-editor [data-editor-form] h3 {
165
+ overflow-wrap: anywhere;
166
+ }
167
+ .rogatio-editor [data-editor-header] h1 {
168
+ margin: 0;
169
+ font-size: 1.75rem;
170
+ font-weight: 700;
171
+ letter-spacing: -0.02em;
172
+ }
173
+ .rogatio-editor [data-dirty-state] {
174
+ margin: 0.2rem 0 0;
175
+ color: var(--rogatio-muted);
176
+ font-size: 0.875rem;
177
+ font-weight: 500;
178
+ }
179
+ .rogatio-editor [data-editor-header] label,
180
+ .rogatio-editor [data-editor-field] > label {
181
+ display: grid;
182
+ gap: 0.3rem;
183
+ font-weight: 600;
184
+ color: var(--rogatio-text);
185
+ }
186
+ .rogatio-editor input:not([type=checkbox]),
187
+ .rogatio-editor select,
188
+ .rogatio-editor textarea {
189
+ width: 100%;
190
+ min-width: 0;
191
+ border: 1px solid var(--rogatio-border);
192
+ border-radius: var(--rogatio-radius-sm);
193
+ background: var(--rogatio-surface-inset);
194
+ color: var(--rogatio-text);
195
+ padding: 0.45rem 0.55rem;
196
+ }
197
+ .rogatio-editor input:not([type=checkbox])::placeholder,
198
+ .rogatio-editor textarea::placeholder {
199
+ color: var(--rogatio-faint);
200
+ }
201
+ .rogatio-editor textarea {
202
+ min-height: 5rem;
203
+ resize: vertical;
204
+ }
205
+ .rogatio-editor [data-mobile-route-nav] {
206
+ display: none;
207
+ }
208
+ .rogatio-editor [data-editor-status] {
209
+ min-height: 1.5rem;
210
+ margin-block: 0.5rem;
211
+ color: var(--rogatio-muted);
212
+ font-size: 0.875rem;
213
+ }
214
+ .rogatio-editor [data-editor-summary] {
215
+ margin-block: 1rem;
216
+ border: 1px solid var(--rogatio-danger);
217
+ border-radius: var(--rogatio-radius);
218
+ background: var(--rogatio-danger-bg);
219
+ padding: 0.8rem 1rem;
220
+ }
221
+ .rogatio-editor [data-editor-summary] h2 {
222
+ margin-top: 0;
223
+ font-size: 1.1rem;
224
+ color: var(--rogatio-danger);
225
+ }
226
+ .rogatio-editor [data-editor-summary] ul {
227
+ margin-bottom: 0;
228
+ color: var(--rogatio-text);
229
+ }
230
+ .rogatio-editor [data-editor-summary] button {
231
+ border: 0;
232
+ background: transparent;
233
+ color: inherit;
234
+ padding: 0;
235
+ text-align: left;
236
+ text-decoration: underline;
237
+ }
238
+ .rogatio-editor [data-editor-command-bar] {
239
+ display: flex;
240
+ flex-wrap: wrap;
241
+ gap: 0.5rem;
242
+ margin-block: 1rem;
243
+ }
244
+ .rogatio-editor [data-editor-form] {
245
+ display: grid;
246
+ gap: 1rem;
247
+ }
248
+ .rogatio-editor fieldset {
249
+ min-width: 0;
250
+ border: 1px solid var(--rogatio-border);
251
+ border-radius: var(--rogatio-radius);
252
+ background: var(--rogatio-surface);
253
+ padding: 1rem;
254
+ }
255
+ .rogatio-editor legend {
256
+ padding-inline: 0.5rem;
257
+ font-weight: 700;
258
+ font-family: var(--rogatio-font-mono);
259
+ font-size: 0.8125rem;
260
+ text-transform: uppercase;
261
+ letter-spacing: 0.06em;
262
+ color: var(--rogatio-muted);
263
+ }
264
+ .rogatio-editor [data-editor-fields] {
265
+ display: grid;
266
+ gap: 0.85rem;
267
+ }
268
+ .rogatio-editor [data-editor-field] {
269
+ min-width: 0;
270
+ }
271
+ .rogatio-editor [data-editor-field] > small {
272
+ display: block;
273
+ margin-top: 0.25rem;
274
+ color: var(--rogatio-muted);
275
+ font-size: 0.8125rem;
276
+ }
277
+ .rogatio-editor [data-editor-field-error] {
278
+ margin-top: 0.25rem;
279
+ color: var(--rogatio-danger);
280
+ font-weight: 600;
281
+ font-size: 0.8125rem;
282
+ }
283
+ .rogatio-editor [data-editor-origin-row] {
284
+ display: grid;
285
+ grid-template-columns: minmax(0, 1fr) auto;
286
+ gap: 0.5rem;
287
+ align-items: end;
288
+ margin-bottom: 0.5rem;
289
+ }
290
+ .rogatio-editor [data-editor-url-row] {
291
+ display: grid;
292
+ grid-template-columns: minmax(0, 1fr) auto;
293
+ gap: 0.5rem;
294
+ align-items: end;
295
+ }
296
+ .rogatio-editor [data-editor-checks] {
297
+ display: grid;
298
+ grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
299
+ gap: 0.35rem 0.7rem;
300
+ }
301
+ .rogatio-editor [data-editor-checks] label {
302
+ display: flex;
303
+ gap: 0.4rem;
304
+ align-items: center;
305
+ font-weight: 500;
306
+ color: var(--rogatio-muted);
307
+ }
308
+ .rogatio-editor [data-rule-card] {
309
+ display: grid;
310
+ gap: 1rem;
311
+ border: 1px solid var(--rogatio-border);
312
+ border-radius: var(--rogatio-radius);
313
+ background: var(--rogatio-surface);
314
+ padding: 1rem;
315
+ }
316
+ .rogatio-editor [data-rule-card] h3 {
317
+ margin: 0;
318
+ font-weight: 700;
319
+ }
320
+ .rogatio-editor [data-rule-actions] {
321
+ display: flex;
322
+ flex-wrap: wrap;
323
+ gap: 0.5rem;
324
+ }
325
+ .rogatio-editor [data-search-results] {
326
+ margin-block: 1rem;
327
+ border-block: 1px solid var(--rogatio-border);
328
+ padding-block: 0.8rem;
329
+ }
330
+ .rogatio-editor [data-search-results] h2 {
331
+ margin-top: 0;
332
+ }
333
+ .rogatio-editor [data-search-results] ul {
334
+ display: grid;
335
+ gap: 0.35rem;
336
+ margin-bottom: 0;
337
+ padding-left: 1.2rem;
338
+ color: var(--rogatio-muted);
339
+ }
340
+ .rogatio-editor [data-search-results] button {
341
+ border: 0;
342
+ background: transparent;
343
+ padding: 0;
344
+ text-align: left;
345
+ text-decoration: underline;
346
+ color: var(--rogatio-text);
347
+ }
348
+ .rogatio-editor [data-editor-confirmation] {
349
+ position: fixed;
350
+ inset: 0;
351
+ z-index: 2;
352
+ display: grid;
353
+ place-items: center;
354
+ padding: 1rem;
355
+ background: rgb(0 0 0 / 60%);
356
+ }
357
+ .rogatio-editor [data-editor-dialog] {
358
+ width: min(32rem, 100%);
359
+ border: 1px solid var(--rogatio-border);
360
+ border-radius: var(--rogatio-radius);
361
+ background: var(--rogatio-surface);
362
+ box-shadow: 0 20px 50px rgb(0 0 0 / 45%);
363
+ padding: 1rem;
364
+ }
365
+ .rogatio-editor [data-editor-dialog] h2 {
366
+ margin-top: 0;
367
+ }
368
+ .rogatio-editor [data-editor-dialog-actions] {
369
+ display: flex;
370
+ flex-wrap: wrap;
371
+ gap: 0.5rem;
372
+ }
373
+ .rogatio-editor [data-editor-visually-hidden] {
374
+ position: absolute;
375
+ width: 1px;
376
+ height: 1px;
377
+ margin: -1px;
378
+ overflow: hidden;
379
+ clip: rect(0 0 0 0);
380
+ white-space: nowrap;
381
+ }
382
+ .rogatio-editor [data-search-wrap] {
383
+ position: relative;
384
+ margin-left: auto;
385
+ }
386
+ .rogatio-editor [data-search-label] {
387
+ display: inline-flex;
388
+ flex-direction: column;
389
+ gap: 0.15rem;
390
+ font-size: 0.75rem;
391
+ color: var(--rogatio-muted);
392
+ }
393
+ .rogatio-editor [data-search-wrap] input[type=search] {
394
+ width: min(18rem, 60vw);
395
+ }
396
+ .rogatio-editor [data-search-results] {
397
+ position: absolute;
398
+ top: calc(100% + 0.4rem);
399
+ right: 0;
400
+ z-index: 4;
401
+ width: min(28rem, 90vw);
402
+ max-height: min(60vh, 24rem);
403
+ overflow: auto;
404
+ border: 1px solid var(--rogatio-border);
405
+ border-radius: var(--rogatio-radius);
406
+ background: var(--rogatio-surface);
407
+ box-shadow: 0 20px 50px rgb(0 0 0 / 45%);
408
+ padding: 0.6rem;
409
+ display: grid;
410
+ gap: 0.4rem;
411
+ }
412
+ .rogatio-editor [data-search-results][hidden] {
413
+ display: none;
414
+ }
415
+ .rogatio-editor [data-search-results] ul {
416
+ list-style: none;
417
+ margin: 0;
418
+ padding: 0;
419
+ display: grid;
420
+ gap: 0.3rem;
421
+ }
422
+ .rogatio-editor [data-search-results] li button {
423
+ width: 100%;
424
+ text-align: left;
425
+ }
426
+ @media (max-width: 48rem) {
427
+ .rogatio-editor [data-editor-layout] {
428
+ display: block;
429
+ }
430
+ .rogatio-editor [data-desktop-route-rail] {
431
+ display: none;
432
+ }
433
+ .rogatio-editor [data-mobile-route-nav] {
434
+ display: grid;
435
+ gap: 0.3rem;
436
+ margin-block: 1rem;
437
+ color: var(--rogatio-muted);
438
+ }
439
+ .rogatio-editor [data-editor-header] {
440
+ grid-template-columns: 1fr;
441
+ }
442
+ }
443
+ @media (forced-colors: active) {
444
+ .rogatio-editor {
445
+ --rogatio-border: ButtonText;
446
+ --rogatio-muted: ButtonText;
447
+ --rogatio-primary: Highlight;
448
+ --rogatio-primary-strong: Highlight;
449
+ --rogatio-danger: Mark;
450
+ --rogatio-success: ButtonText;
451
+ --rogatio-warning: ButtonText;
452
+ color: CanvasText;
453
+ background: Canvas;
454
+ }
455
+ .rogatio-editor button,
456
+ .rogatio-editor input:not([type=checkbox]),
457
+ .rogatio-editor select,
458
+ .rogatio-editor textarea,
459
+ .rogatio-editor fieldset,
460
+ .rogatio-editor [data-rule-card] {
461
+ border-color: ButtonText;
462
+ background: Canvas;
463
+ }
464
+ .rogatio-editor :focus-visible {
465
+ outline-color: Highlight;
466
+ }
467
+ .rogatio-editor [data-desktop-route-rail] {
468
+ border-bottom-color: ButtonText;
469
+ }
470
+ }
471
+ @media (prefers-reduced-motion: reduce) {
472
+ .rogatio-editor *,
473
+ .rogatio-editor *::before,
474
+ .rogatio-editor *::after {
475
+ scroll-behavior: auto;
476
+ transition: none;
477
+ }
478
+ }
479
+ .rogatio-editor [data-test-description] {
480
+ color: var(--rogatio-muted);
481
+ margin-block: 0 1rem;
482
+ }
483
+ .rogatio-editor [data-test-panel] {
484
+ display: grid;
485
+ gap: 1rem;
486
+ }
487
+ .rogatio-editor [data-test-defaults] {
488
+ display: grid;
489
+ grid-template-columns: 1fr 1fr;
490
+ gap: 1rem;
491
+ }
492
+ .rogatio-editor [data-test-result-card] {
493
+ display: grid;
494
+ gap: 0.5rem;
495
+ border: 1px solid var(--rogatio-border);
496
+ border-radius: var(--rogatio-radius);
497
+ background: var(--rogatio-surface);
498
+ padding: 0.75rem;
499
+ margin-bottom: 0.75rem;
500
+ }
501
+ .rogatio-editor [data-test-result-card][data-matched=false] {
502
+ border-style: dashed;
503
+ border-color: var(--rogatio-faint);
504
+ }
505
+ .rogatio-editor [data-test-result-header] {
506
+ display: flex;
507
+ justify-content: space-between;
508
+ gap: 0.5rem;
509
+ margin-bottom: 0.25rem;
510
+ }
511
+ .rogatio-editor [data-test-rule] {
512
+ padding: 0.5rem;
513
+ border-radius: var(--rogatio-radius-sm);
514
+ background: var(--rogatio-surface-inset);
515
+ }
516
+ .rogatio-editor [data-test-rule-header] {
517
+ display: flex;
518
+ justify-content: space-between;
519
+ gap: 0.5rem;
520
+ margin-bottom: 0.25rem;
521
+ }
522
+ .rogatio-editor [data-test-dimension] {
523
+ font-size: 0.85rem;
524
+ margin-top: 0.2rem;
525
+ color: var(--rogatio-muted);
526
+ }
527
+ .rogatio-editor [data-test-badge] {
528
+ display: inline-block;
529
+ padding: 0.15rem 0.45rem;
530
+ border-radius: 999px;
531
+ font-family: var(--rogatio-font-mono);
532
+ font-size: 0.75rem;
533
+ font-weight: 700;
534
+ margin-right: 0.5rem;
535
+ }
536
+ .rogatio-editor [data-test-badge][data-variant=matched] {
537
+ background: var(--rogatio-success-bg);
538
+ color: var(--rogatio-success);
539
+ }
540
+ .rogatio-editor [data-test-badge][data-variant=unmatched] {
541
+ background: var(--rogatio-danger-bg);
542
+ color: var(--rogatio-danger);
543
+ }
544
+ .rogatio-editor [data-test-badge][data-variant=na] {
545
+ background: var(--rogatio-neutral);
546
+ color: var(--rogatio-muted);
547
+ }
548
+ .rogatio-editor [data-test-errors] {
549
+ margin-block: 0 1rem;
550
+ color: var(--rogatio-danger);
551
+ }
552
+ .rogatio-editor [data-test-action-preview] {
553
+ margin-top: 0.25rem;
554
+ font-size: 0.8rem;
555
+ color: var(--rogatio-muted);
556
+ }
557
+ @media (forced-colors: active) {
558
+ .rogatio-editor [data-test-rule] {
559
+ border: 1px solid ButtonText;
560
+ background: Canvas;
561
+ }
562
+ .rogatio-editor [data-test-badge] {
563
+ border: 1px solid ButtonText;
564
+ }
565
+ }