@azure-id/orc 1.2.0 → 1.4.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.
@@ -0,0 +1,379 @@
1
+ /* css/panels/hookui.css — the CLI Hook Interface.
2
+
3
+ Every colour comes from a token defined once, on bare :root, in
4
+ 00-tokens.css. This file defines none.
5
+
6
+ Nothing here declares an animation, deliberately: the motion rules live in
7
+ 04-motion.css and nowhere else. The board's affordances are borders and
8
+ opacity, and both survive a reader who has asked for less motion. */
9
+
10
+ /* ── the preview ───────────────────────────────────────────────────────── */
11
+ /* A terminal is a monospaced grid, so the preview has to be one too. Anything
12
+ proportional here would misrepresent every width decision the user makes. */
13
+ .hk-preview {
14
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
15
+ font-size: 13px;
16
+ line-height: 1.55;
17
+ margin: 0;
18
+ padding: 10px 12px;
19
+ border-radius: 8px;
20
+ background: var(--bg-sunken);
21
+ border: 1px solid var(--line);
22
+ /* A wide line SCROLLS inside its own box. The page body must never scroll
23
+ sideways — and squeezing a status line to fit would misreport its width,
24
+ which is the one thing this preview exists to get right. */
25
+ overflow-x: auto;
26
+ white-space: pre;
27
+ scrollbar-width: thin;
28
+ scrollbar-color: var(--line) transparent;
29
+ }
30
+ .hk-preview::-webkit-scrollbar {
31
+ height: 8px;
32
+ }
33
+ .hk-preview::-webkit-scrollbar-track {
34
+ background: transparent;
35
+ }
36
+ .hk-preview::-webkit-scrollbar-thumb {
37
+ background: var(--line);
38
+ border-radius: 4px;
39
+ }
40
+ .hk-preview-sm {
41
+ font-size: 12px;
42
+ padding: 6px 10px;
43
+ }
44
+ .hk-preview-chip {
45
+ font-size: 12px;
46
+ padding: 4px 8px;
47
+ border: none;
48
+ background: transparent;
49
+ }
50
+ .hk-line {
51
+ min-height: 1.55em;
52
+ }
53
+ .hk-fixtures {
54
+ margin-bottom: 10px;
55
+ }
56
+
57
+ .hk-degrade {
58
+ margin-top: 14px;
59
+ display: grid;
60
+ gap: 6px;
61
+ }
62
+ .hk-degrade-row {
63
+ display: grid;
64
+ grid-template-columns: 90px 1fr;
65
+ gap: 10px;
66
+ align-items: center;
67
+ }
68
+ .hk-degrade-label {
69
+ font-size: 11px;
70
+ color: var(--fg-dim);
71
+ text-align: right;
72
+ }
73
+
74
+ /* ── cautions ──────────────────────────────────────────────────────────── */
75
+ .hk-caution {
76
+ display: grid;
77
+ grid-template-columns: 20px 1fr;
78
+ gap: 8px;
79
+ align-items: start;
80
+ padding: 6px 0;
81
+ font-size: 13px;
82
+ }
83
+ .hk-caution-mark {
84
+ color: var(--warn);
85
+ }
86
+ .hk-caution-bad .hk-caution-mark {
87
+ color: var(--bad);
88
+ }
89
+
90
+ /* ── the board ─────────────────────────────────────────────────────────── */
91
+ .hk-line-wrap {
92
+ margin-bottom: 16px;
93
+ }
94
+ .hk-line-head {
95
+ display: flex;
96
+ justify-content: space-between;
97
+ align-items: baseline;
98
+ margin-bottom: 6px;
99
+ }
100
+ .hk-line-name {
101
+ font-size: 12px;
102
+ font-weight: 600;
103
+ color: var(--fg-dim);
104
+ }
105
+ .hk-line-count {
106
+ font-size: 11px;
107
+ color: var(--fg-dim);
108
+ }
109
+ .hk-full {
110
+ color: var(--warn);
111
+ }
112
+
113
+ .hk-zone {
114
+ display: flex;
115
+ flex-wrap: wrap;
116
+ gap: 8px;
117
+ padding: 10px;
118
+ border: 1px dashed var(--line);
119
+ border-radius: 10px;
120
+ min-height: 64px;
121
+ align-items: stretch;
122
+ }
123
+ /* An illegal line is DISABLED with its reason on the zone itself — never a
124
+ toast after the fact, never a validation error on Apply. A user should not be
125
+ able to do the wrong thing and then be told off for it. */
126
+ .hk-line-blocked .hk-zone {
127
+ opacity: 0.55;
128
+ background: repeating-linear-gradient(
129
+ 45deg,
130
+ transparent,
131
+ transparent 6px,
132
+ var(--bg-sunken) 6px,
133
+ var(--bg-sunken) 12px
134
+ );
135
+ }
136
+ .hk-blocked {
137
+ display: flex;
138
+ gap: 8px;
139
+ align-items: center;
140
+ font-size: 12px;
141
+ color: var(--fg-dim);
142
+ padding: 8px;
143
+ }
144
+
145
+ /* A chip's child count CHANGES with its state — an open editor adds a whole
146
+ drawer — so it is a FLEX COLUMN and never declares its rows. A card whose
147
+ child count changes with its state must not have a row template; that is what
148
+ put a 250px ellipse on the Extra panel. */
149
+ .hk-chip {
150
+ display: flex;
151
+ flex-direction: column;
152
+ gap: 4px;
153
+ padding: 8px;
154
+ border: 1px solid var(--line);
155
+ border-radius: 8px;
156
+ background: var(--bg-raised);
157
+ min-width: 120px;
158
+ }
159
+ .hk-chip:focus-visible {
160
+ outline: 2px solid var(--accent);
161
+ outline-offset: 2px;
162
+ }
163
+ .hk-chip-open {
164
+ border-color: var(--accent);
165
+ width: 100%;
166
+ }
167
+ .hk-chip-face {
168
+ min-height: 24px;
169
+ }
170
+ .hk-chip-foot {
171
+ display: flex;
172
+ justify-content: space-between;
173
+ align-items: center;
174
+ gap: 6px;
175
+ }
176
+ .hk-chip-id {
177
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
178
+ font-size: 11px;
179
+ color: var(--fg-dim);
180
+ }
181
+ .hk-icon {
182
+ background: none;
183
+ border: none;
184
+ color: var(--fg-dim);
185
+ cursor: pointer;
186
+ font-size: 14px;
187
+ line-height: 1;
188
+ padding: 2px 4px;
189
+ border-radius: 4px;
190
+ }
191
+ .hk-icon:hover {
192
+ background: var(--bg-sunken);
193
+ color: var(--fg);
194
+ }
195
+ .hk-move {
196
+ display: flex;
197
+ gap: 4px;
198
+ flex-wrap: wrap;
199
+ }
200
+ .hk-add {
201
+ border: 1px dashed var(--line);
202
+ background: none;
203
+ color: var(--fg-dim);
204
+ border-radius: 8px;
205
+ padding: 8px 14px;
206
+ cursor: pointer;
207
+ font-size: 12px;
208
+ }
209
+ .hk-add:hover {
210
+ border-color: var(--accent);
211
+ color: var(--fg);
212
+ }
213
+
214
+ .hk-line-opts {
215
+ display: flex;
216
+ align-items: center;
217
+ gap: 8px;
218
+ margin-top: 6px;
219
+ }
220
+ .hk-sep,
221
+ .hk-input {
222
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
223
+ font-size: 12px;
224
+ padding: 4px 8px;
225
+ border: 1px solid var(--line);
226
+ border-radius: 6px;
227
+ background: var(--bg-sunken);
228
+ color: var(--fg);
229
+ max-width: 200px;
230
+ }
231
+
232
+ /* ── the editor drawer ─────────────────────────────────────────────────── */
233
+ .hk-drawer {
234
+ border-top: 1px solid var(--line);
235
+ margin-top: 8px;
236
+ padding-top: 10px;
237
+ display: grid;
238
+ gap: 8px;
239
+ }
240
+ .hk-drawer-head {
241
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
242
+ font-weight: 600;
243
+ font-size: 13px;
244
+ }
245
+ .hk-section {
246
+ font-size: 11px;
247
+ text-transform: uppercase;
248
+ letter-spacing: 0.06em;
249
+ color: var(--fg-dim);
250
+ margin-top: 8px;
251
+ border-bottom: 1px solid var(--line);
252
+ padding-bottom: 3px;
253
+ }
254
+ /* THE SHAPE PICKER IS A GALLERY, NOT A DROPDOWN: every option drawn with this
255
+ component's real value. A dropdown containing the word `braille-bar` tells
256
+ nobody anything. */
257
+ .hk-gallery {
258
+ display: grid;
259
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
260
+ gap: 6px;
261
+ }
262
+ .hk-sample {
263
+ display: flex;
264
+ flex-direction: column;
265
+ align-items: flex-start;
266
+ gap: 2px;
267
+ padding: 6px 8px;
268
+ border: 1px solid var(--line);
269
+ border-radius: 6px;
270
+ background: var(--bg-sunken);
271
+ cursor: pointer;
272
+ text-align: left;
273
+ }
274
+ .hk-sample-on {
275
+ border-color: var(--accent);
276
+ background: var(--bg-raised);
277
+ }
278
+ .hk-sample-id {
279
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
280
+ font-size: 10px;
281
+ color: var(--fg-dim);
282
+ }
283
+
284
+ .hk-field {
285
+ display: grid;
286
+ grid-template-columns: 110px 1fr;
287
+ gap: 10px;
288
+ align-items: center;
289
+ }
290
+ .hk-field-name {
291
+ font-size: 12px;
292
+ color: var(--fg-dim);
293
+ }
294
+ .hk-picks {
295
+ display: flex;
296
+ flex-wrap: wrap;
297
+ gap: 4px;
298
+ }
299
+ .hk-pick {
300
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
301
+ font-size: 11px;
302
+ padding: 3px 7px;
303
+ border: 1px solid var(--line);
304
+ border-radius: 5px;
305
+ background: var(--bg-sunken);
306
+ color: var(--fg-dim);
307
+ cursor: pointer;
308
+ }
309
+ .hk-pick-on {
310
+ border-color: var(--accent);
311
+ color: var(--fg);
312
+ background: var(--bg-raised);
313
+ }
314
+ .hk-checks {
315
+ display: grid;
316
+ gap: 4px;
317
+ }
318
+ .hk-check {
319
+ display: grid;
320
+ grid-template-columns: 20px 90px 1fr;
321
+ gap: 6px;
322
+ align-items: center;
323
+ font-size: 12px;
324
+ }
325
+
326
+ /* ── the palette ───────────────────────────────────────────────────────── */
327
+ .hk-palette-search {
328
+ font-size: 12px;
329
+ padding: 4px 10px;
330
+ border: 1px solid var(--line);
331
+ border-radius: 6px;
332
+ background: var(--bg-sunken);
333
+ color: var(--fg);
334
+ min-width: 180px;
335
+ }
336
+ /* A row's child count changes with its state — a refused row carries a reason
337
+ and no buttons — so it is a flex column, not a grid with declared columns. */
338
+ .hk-prow {
339
+ display: flex;
340
+ flex-wrap: wrap;
341
+ align-items: center;
342
+ gap: 10px;
343
+ padding: 7px 0;
344
+ border-bottom: 1px solid var(--line);
345
+ }
346
+ .hk-prow-id {
347
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
348
+ font-size: 12px;
349
+ min-width: 150px;
350
+ }
351
+ .hk-prow-why {
352
+ flex-basis: 100%;
353
+ }
354
+
355
+ /* ── presets ───────────────────────────────────────────────────────────── */
356
+ .hk-preset {
357
+ padding: 10px 0;
358
+ border-bottom: 1px solid var(--line);
359
+ display: grid;
360
+ gap: 6px;
361
+ }
362
+ .hk-preset-head {
363
+ display: flex;
364
+ gap: 8px;
365
+ align-items: center;
366
+ }
367
+
368
+ /* A number field is a NUMBER field: wide enough for three digits and its
369
+ spinner, and no wider. A 200px box for a value between 0 and 8 reads as a
370
+ free-text field somebody has to think about. */
371
+ .hk-num {
372
+ max-width: 90px;
373
+ }
374
+
375
+ /* The board switch. Two buttons, and the card holds nothing else — a heading
376
+ above two tabs would just say "boards" twice. */
377
+ .hk-boards {
378
+ margin-bottom: 4px;
379
+ }