@try-works/dsh-recursive-mode 0.1.12 → 0.1.13
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/lib/client/board.d.ts +1 -0
- package/lib/client/derive.d.ts +11 -0
- package/lib/client/inspector.d.ts +2 -0
- package/lib/client/styles.d.ts +9 -7
- package/lib/client/theme.d.ts +20 -0
- package/lib/client.js +423 -171
- package/package.json +1 -1
- package/src/client/board.tsx +24 -12
- package/src/client/derive.ts +34 -0
- package/src/client/inspector.tsx +20 -11
- package/src/client/styles.ts +300 -131
- package/src/client/theme.ts +53 -0
package/src/client/styles.ts
CHANGED
|
@@ -1,27 +1,137 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* One-shot board/inspector stylesheet injection (run 15
|
|
3
|
-
* plain CJS closure with NO CSS pipeline (tsdown
|
|
4
|
-
* inject a single <style data-dsh-recursive> element into document.head
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
2
|
+
* One-shot board/inspector stylesheet injection (run 15 + run 16 / Paper).
|
|
3
|
+
* The client bundle is a plain CJS closure with NO CSS pipeline (tsdown), so we
|
|
4
|
+
* inject a single <style data-dsh-recursive> element into document.head.
|
|
5
|
+
*
|
|
6
|
+
* Run 16 (Paper): the design is ported 1:1 — DEFAULT LIGHT theme, dark via a
|
|
7
|
+
* data-theme attribute on the .rec-board / .rec-inspector root. Raw --rm3-*
|
|
8
|
+
* tokens live on the scoped roots; semantic --board-* aliases remap under
|
|
9
|
+
* [data-theme='dark']. EVERY component rule consumes ONLY --board-* aliases
|
|
10
|
+
* (never --rm3-* directly). Idempotent injection; disposer removes the element.
|
|
9
11
|
*/
|
|
10
12
|
|
|
11
13
|
const BOARD_CSS = `
|
|
12
|
-
/* dsh-recursive
|
|
14
|
+
/* ===== dsh-recursive Paper theme (run 16) ===== */
|
|
15
|
+
|
|
16
|
+
/* Raw tokens: light (default) + dark + shared, scoped to the board/inspector. */
|
|
17
|
+
.rec-board, .rec-inspector {
|
|
18
|
+
/* light */
|
|
19
|
+
--rm3-light-background: #FFFFFF;
|
|
20
|
+
--rm3-light-foreground: #111111;
|
|
21
|
+
--rm3-light-card: #FFFFFF;
|
|
22
|
+
--rm3-light-muted: #FAFAFA;
|
|
23
|
+
--rm3-light-muted-foreground: #666666;
|
|
24
|
+
--rm3-light-accent: #F5F5F5;
|
|
25
|
+
--rm3-light-border: #EAEAEA;
|
|
26
|
+
--rm3-light-success: #27A644;
|
|
27
|
+
--rm3-light-warning: #B67A11;
|
|
28
|
+
--rm3-light-error: #D84F6A;
|
|
29
|
+
--rm3-light-advisory: #9664E8;
|
|
30
|
+
--rm3-light-info: #3F87F5;
|
|
31
|
+
--rm3-light-destructive: #B4261A;
|
|
32
|
+
/* dark */
|
|
33
|
+
--rm3-background: #0A0A0A;
|
|
34
|
+
--rm3-foreground: #EDEDED;
|
|
35
|
+
--rm3-card: #0F0F0F;
|
|
36
|
+
--rm3-muted: #141414;
|
|
37
|
+
--rm3-muted-foreground: #9A9A9A;
|
|
38
|
+
--rm3-accent: #1A1A1A;
|
|
39
|
+
--rm3-border: #1F1F1F;
|
|
40
|
+
--rm3-success: #27A644;
|
|
41
|
+
--rm3-warning: #D9A441;
|
|
42
|
+
--rm3-error: #E06C89;
|
|
43
|
+
--rm3-advisory: #B479FF;
|
|
44
|
+
--rm3-info: #6EA8FF;
|
|
45
|
+
/* shared */
|
|
46
|
+
--rm3-font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
|
|
47
|
+
--rm3-font-mono: 'Geist Mono', ui-monospace, Menlo, monospace;
|
|
48
|
+
--rm3-text-xs: 12px;
|
|
49
|
+
--rm3-text-sm: 14px;
|
|
50
|
+
--rm3-text-md: 16px;
|
|
51
|
+
--rm3-text-lg: 20px;
|
|
52
|
+
--rm3-text-xl: 28px;
|
|
53
|
+
--rm3-font-weight-regular: 400;
|
|
54
|
+
--rm3-font-weight-medium: 500;
|
|
55
|
+
--rm3-font-weight-semibold: 600;
|
|
56
|
+
--rm3-radius-sm: 5px;
|
|
57
|
+
--rm3-radius-md: 6px;
|
|
58
|
+
--rm3-radius-lg: 8px;
|
|
59
|
+
--rm3-radius-xl: 11px;
|
|
60
|
+
--rm3-space-8: 8px;
|
|
61
|
+
--rm3-space-12: 12px;
|
|
62
|
+
--rm3-space-16: 16px;
|
|
63
|
+
--rm3-space-24: 24px;
|
|
64
|
+
--rm3-space-32: 32px;
|
|
65
|
+
--rm3-tracking-tight: -0.02em;
|
|
66
|
+
--rm3-tracking-mono: 0.02em;
|
|
67
|
+
|
|
68
|
+
/* Semantic aliases (LIGHT default) */
|
|
69
|
+
--board-bg: var(--rm3-light-background);
|
|
70
|
+
--board-fg: var(--rm3-light-foreground);
|
|
71
|
+
--board-card: var(--rm3-light-card);
|
|
72
|
+
--board-muted: var(--rm3-light-muted);
|
|
73
|
+
--board-muted-fg: var(--rm3-light-muted-foreground);
|
|
74
|
+
--board-accent: var(--rm3-light-accent);
|
|
75
|
+
--board-border: var(--rm3-light-border);
|
|
76
|
+
--board-success: var(--rm3-light-success);
|
|
77
|
+
--board-warning: var(--rm3-light-warning);
|
|
78
|
+
--board-error: var(--rm3-light-error);
|
|
79
|
+
--board-advisory: var(--rm3-light-advisory);
|
|
80
|
+
--board-info: var(--rm3-light-info);
|
|
81
|
+
--board-destructive: var(--rm3-light-destructive);
|
|
82
|
+
--board-font-sans: var(--rm3-font-sans);
|
|
83
|
+
--board-font-mono: var(--rm3-font-mono);
|
|
84
|
+
--board-text-xs: var(--rm3-text-xs);
|
|
85
|
+
--board-text-sm: var(--rm3-text-sm);
|
|
86
|
+
--board-text-md: var(--rm3-text-md);
|
|
87
|
+
--board-text-lg: var(--rm3-text-lg);
|
|
88
|
+
--board-text-xl: var(--rm3-text-xl);
|
|
89
|
+
--board-fw-regular: var(--rm3-font-weight-regular);
|
|
90
|
+
--board-fw-medium: var(--rm3-font-weight-medium);
|
|
91
|
+
--board-fw-semibold: var(--rm3-font-weight-semibold);
|
|
92
|
+
--board-radius-sm: var(--rm3-radius-sm);
|
|
93
|
+
--board-radius-md: var(--rm3-radius-md);
|
|
94
|
+
--board-radius-lg: var(--rm3-radius-lg);
|
|
95
|
+
--board-radius-xl: var(--rm3-radius-xl);
|
|
96
|
+
--board-space-8: var(--rm3-space-8);
|
|
97
|
+
--board-space-12: var(--rm3-space-12);
|
|
98
|
+
--board-space-16: var(--rm3-space-16);
|
|
99
|
+
--board-space-24: var(--rm3-space-24);
|
|
100
|
+
--board-space-32: var(--rm3-space-32);
|
|
101
|
+
--board-tracking-tight: var(--rm3-tracking-tight);
|
|
102
|
+
--board-tracking-mono: var(--rm3-tracking-mono);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* Semantic aliases remapped for DARK. */
|
|
106
|
+
.rec-board[data-theme='dark'], .rec-inspector[data-theme='dark'] {
|
|
107
|
+
--board-bg: var(--rm3-background);
|
|
108
|
+
--board-fg: var(--rm3-foreground);
|
|
109
|
+
--board-card: var(--rm3-card);
|
|
110
|
+
--board-muted: var(--rm3-muted);
|
|
111
|
+
--board-muted-fg: var(--rm3-muted-foreground);
|
|
112
|
+
--board-accent: var(--rm3-accent);
|
|
113
|
+
--board-border: var(--rm3-border);
|
|
114
|
+
--board-success: var(--rm3-success);
|
|
115
|
+
--board-warning: var(--rm3-warning);
|
|
116
|
+
--board-error: var(--rm3-error);
|
|
117
|
+
--board-advisory: var(--rm3-advisory);
|
|
118
|
+
--board-info: var(--rm3-info);
|
|
119
|
+
--board-destructive: var(--rm3-error);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* ===== Board ===== */
|
|
13
123
|
.rec-board {
|
|
14
124
|
position: fixed;
|
|
15
125
|
inset: 0;
|
|
16
126
|
z-index: 9999;
|
|
17
|
-
background: var(--dsw-alias-bg-base);
|
|
18
|
-
color: var(--dsw-alias-label-primary);
|
|
19
|
-
font-family: var(--dsw-font-family);
|
|
20
127
|
display: flex;
|
|
21
128
|
flex-direction: column;
|
|
22
129
|
box-sizing: border-box;
|
|
23
|
-
padding:
|
|
24
|
-
gap:
|
|
130
|
+
padding: var(--board-space-16);
|
|
131
|
+
gap: var(--board-space-12);
|
|
132
|
+
background: var(--board-bg);
|
|
133
|
+
color: var(--board-fg);
|
|
134
|
+
font-family: var(--board-font-sans);
|
|
25
135
|
pointer-events: auto;
|
|
26
136
|
overflow: hidden;
|
|
27
137
|
}
|
|
@@ -29,86 +139,119 @@ const BOARD_CSS = `
|
|
|
29
139
|
.rec-board-header {
|
|
30
140
|
display: flex;
|
|
31
141
|
align-items: center;
|
|
32
|
-
gap:
|
|
142
|
+
gap: var(--board-space-12);
|
|
33
143
|
flex: none;
|
|
34
144
|
}
|
|
35
145
|
|
|
36
146
|
.rec-board-title {
|
|
37
147
|
margin: 0;
|
|
38
|
-
font-size:
|
|
39
|
-
font-weight:
|
|
40
|
-
|
|
148
|
+
font-size: 22px;
|
|
149
|
+
font-weight: var(--board-fw-semibold);
|
|
150
|
+
letter-spacing: var(--board-tracking-tight);
|
|
151
|
+
color: var(--board-fg);
|
|
41
152
|
white-space: nowrap;
|
|
42
153
|
}
|
|
43
154
|
|
|
155
|
+
.rec-board-path {
|
|
156
|
+
flex: none;
|
|
157
|
+
font-family: var(--board-font-mono);
|
|
158
|
+
font-size: var(--board-text-xs);
|
|
159
|
+
letter-spacing: var(--board-tracking-mono);
|
|
160
|
+
color: var(--board-muted-fg);
|
|
161
|
+
overflow: hidden;
|
|
162
|
+
text-overflow: ellipsis;
|
|
163
|
+
white-space: nowrap;
|
|
164
|
+
max-width: 40%;
|
|
165
|
+
}
|
|
166
|
+
|
|
44
167
|
.rec-board-count {
|
|
45
168
|
flex: none;
|
|
46
|
-
font-size:
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
169
|
+
font-size: var(--board-text-xs);
|
|
170
|
+
font-weight: var(--board-fw-medium);
|
|
171
|
+
color: var(--board-muted-fg);
|
|
172
|
+
background: var(--board-muted);
|
|
173
|
+
border-radius: 9999px;
|
|
174
|
+
padding: 4px 10px;
|
|
51
175
|
}
|
|
52
176
|
|
|
53
177
|
.rec-board-empty {
|
|
54
178
|
margin: 0;
|
|
55
|
-
padding:
|
|
179
|
+
padding: var(--board-space-32);
|
|
56
180
|
text-align: center;
|
|
57
|
-
color: var(--
|
|
181
|
+
color: var(--board-muted-fg);
|
|
58
182
|
}
|
|
59
183
|
|
|
60
184
|
.rec-close {
|
|
61
|
-
position: absolute;
|
|
62
|
-
top: 14px;
|
|
63
|
-
right: 16px;
|
|
64
|
-
z-index: 1;
|
|
65
185
|
display: inline-flex;
|
|
66
186
|
align-items: center;
|
|
67
187
|
justify-content: center;
|
|
68
|
-
width:
|
|
69
|
-
height:
|
|
188
|
+
width: 28px;
|
|
189
|
+
height: 28px;
|
|
70
190
|
padding: 0;
|
|
191
|
+
margin-left: auto;
|
|
192
|
+
flex: none;
|
|
71
193
|
background: transparent;
|
|
72
|
-
border: 1px solid var(--
|
|
73
|
-
border-radius:
|
|
74
|
-
color: var(--
|
|
194
|
+
border: 1px solid var(--board-border);
|
|
195
|
+
border-radius: var(--board-radius-md);
|
|
196
|
+
color: var(--board-muted-fg);
|
|
75
197
|
cursor: pointer;
|
|
76
|
-
font-size:
|
|
198
|
+
font-size: var(--board-text-md);
|
|
77
199
|
line-height: 1;
|
|
78
200
|
}
|
|
79
201
|
|
|
80
202
|
.rec-close:hover {
|
|
81
|
-
background: var(--
|
|
82
|
-
color: var(--
|
|
203
|
+
background: var(--board-accent);
|
|
204
|
+
color: var(--board-fg);
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.rec-theme-toggle {
|
|
208
|
+
display: inline-flex;
|
|
209
|
+
align-items: center;
|
|
210
|
+
justify-content: center;
|
|
211
|
+
width: 28px;
|
|
212
|
+
height: 28px;
|
|
213
|
+
padding: 0;
|
|
214
|
+
flex: none;
|
|
215
|
+
background: transparent;
|
|
216
|
+
border: 1px solid var(--board-border);
|
|
217
|
+
border-radius: var(--board-radius-md);
|
|
218
|
+
color: var(--board-muted-fg);
|
|
219
|
+
cursor: pointer;
|
|
220
|
+
font-size: var(--board-text-md);
|
|
221
|
+
line-height: 1;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.rec-theme-toggle:hover {
|
|
225
|
+
background: var(--board-accent);
|
|
226
|
+
color: var(--board-fg);
|
|
83
227
|
}
|
|
84
228
|
|
|
85
229
|
.rec-columns {
|
|
86
230
|
display: grid;
|
|
87
231
|
grid-auto-flow: column;
|
|
88
|
-
grid-auto-columns: minmax(
|
|
89
|
-
gap:
|
|
232
|
+
grid-auto-columns: minmax(220px, 1fr);
|
|
233
|
+
gap: var(--board-space-12);
|
|
90
234
|
flex: 1;
|
|
91
235
|
min-height: 0;
|
|
92
236
|
overflow-x: auto;
|
|
93
237
|
overflow-y: hidden;
|
|
94
238
|
overscroll-behavior-inline: contain;
|
|
95
239
|
padding-bottom: 6px;
|
|
96
|
-
scrollbar-color: var(--
|
|
240
|
+
scrollbar-color: var(--board-border) var(--board-accent);
|
|
97
241
|
scrollbar-width: thin;
|
|
98
242
|
}
|
|
99
243
|
|
|
100
244
|
.rec-columns::-webkit-scrollbar { height: 10px; }
|
|
101
|
-
.rec-columns::-webkit-scrollbar-track { background: var(--
|
|
102
|
-
.rec-columns::-webkit-scrollbar-thumb { background: var(--
|
|
103
|
-
.rec-columns::-webkit-scrollbar-thumb:hover { background: var(--dsw-alias-border-l3); background-clip: content-box; }
|
|
245
|
+
.rec-columns::-webkit-scrollbar-track { background: var(--board-accent); border-radius: 999px; }
|
|
246
|
+
.rec-columns::-webkit-scrollbar-thumb { background: var(--board-border); border-radius: 999px; }
|
|
104
247
|
|
|
105
248
|
.rec-column {
|
|
106
249
|
display: flex;
|
|
107
250
|
flex-direction: column;
|
|
108
251
|
min-height: 0;
|
|
109
|
-
background: var(--
|
|
110
|
-
border: 1px solid var(--
|
|
111
|
-
border-radius:
|
|
252
|
+
background: var(--board-muted);
|
|
253
|
+
border: 1px solid var(--board-border);
|
|
254
|
+
border-radius: var(--board-radius-xl);
|
|
112
255
|
overflow: hidden;
|
|
113
256
|
}
|
|
114
257
|
|
|
@@ -116,7 +259,7 @@ const BOARD_CSS = `
|
|
|
116
259
|
display: flex;
|
|
117
260
|
align-items: center;
|
|
118
261
|
gap: 6px;
|
|
119
|
-
padding:
|
|
262
|
+
padding: var(--board-space-12);
|
|
120
263
|
flex: none;
|
|
121
264
|
}
|
|
122
265
|
|
|
@@ -124,8 +267,8 @@ const BOARD_CSS = `
|
|
|
124
267
|
margin: 0;
|
|
125
268
|
flex: 1;
|
|
126
269
|
font-size: 13px;
|
|
127
|
-
font-weight:
|
|
128
|
-
color: var(--
|
|
270
|
+
font-weight: var(--board-fw-semibold);
|
|
271
|
+
color: var(--board-fg);
|
|
129
272
|
overflow: hidden;
|
|
130
273
|
text-overflow: ellipsis;
|
|
131
274
|
white-space: nowrap;
|
|
@@ -133,77 +276,71 @@ const BOARD_CSS = `
|
|
|
133
276
|
|
|
134
277
|
.rec-column-count {
|
|
135
278
|
flex: none;
|
|
136
|
-
font-size:
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
279
|
+
font-size: var(--board-text-xs);
|
|
280
|
+
font-weight: var(--board-fw-medium);
|
|
281
|
+
color: var(--board-muted-fg);
|
|
282
|
+
background: var(--board-accent);
|
|
283
|
+
border-radius: 9999px;
|
|
140
284
|
padding: 1px 8px;
|
|
141
285
|
}
|
|
142
286
|
|
|
143
287
|
.rec-status-dot {
|
|
144
|
-
width:
|
|
145
|
-
height:
|
|
288
|
+
width: 6px;
|
|
289
|
+
height: 6px;
|
|
146
290
|
border-radius: 50%;
|
|
147
291
|
flex: none;
|
|
148
292
|
}
|
|
149
293
|
|
|
150
|
-
.rec-status-dot[data-status='new'] { background: var(--
|
|
151
|
-
.rec-status-dot[data-status='active'] { background: var(--
|
|
152
|
-
.rec-status-dot[data-status='paused'] { background: var(--
|
|
153
|
-
.rec-status-dot[data-status='blocked'] { background: var(--
|
|
154
|
-
.rec-status-dot[data-status='complete'] { background: var(--
|
|
294
|
+
.rec-status-dot[data-status='new'] { background: var(--board-muted-fg); }
|
|
295
|
+
.rec-status-dot[data-status='active'] { background: var(--board-info); }
|
|
296
|
+
.rec-status-dot[data-status='paused'] { background: var(--board-warning); }
|
|
297
|
+
.rec-status-dot[data-status='blocked'] { background: var(--board-error); }
|
|
298
|
+
.rec-status-dot[data-status='complete'] { background: var(--board-success); }
|
|
155
299
|
|
|
156
300
|
.rec-cards {
|
|
157
301
|
display: flex;
|
|
158
302
|
flex-direction: column;
|
|
159
|
-
gap:
|
|
160
|
-
padding:
|
|
303
|
+
gap: var(--board-space-8);
|
|
304
|
+
padding: 10px;
|
|
161
305
|
overflow-y: auto;
|
|
162
306
|
flex: 1;
|
|
163
307
|
min-height: 0;
|
|
164
308
|
}
|
|
165
309
|
|
|
166
310
|
.rec-column-empty {
|
|
167
|
-
padding:
|
|
311
|
+
padding: var(--board-space-24) var(--board-space-8);
|
|
168
312
|
text-align: center;
|
|
169
|
-
font-size:
|
|
170
|
-
color: var(--
|
|
313
|
+
font-size: var(--board-text-xs);
|
|
314
|
+
color: var(--board-muted-fg);
|
|
171
315
|
}
|
|
172
316
|
|
|
173
317
|
.rec-card {
|
|
174
318
|
display: flex;
|
|
175
319
|
flex-direction: column;
|
|
176
|
-
gap:
|
|
177
|
-
padding:
|
|
320
|
+
gap: var(--board-space-8);
|
|
321
|
+
padding: var(--board-space-12) 14px;
|
|
178
322
|
text-align: left;
|
|
179
|
-
background: var(--
|
|
180
|
-
border: 1px solid var(--
|
|
181
|
-
border-radius:
|
|
323
|
+
background: var(--board-card);
|
|
324
|
+
border: 1px solid var(--board-border);
|
|
325
|
+
border-radius: var(--board-radius-lg);
|
|
182
326
|
cursor: pointer;
|
|
183
|
-
color: var(--
|
|
327
|
+
color: var(--board-fg);
|
|
184
328
|
font-family: inherit;
|
|
185
329
|
transition: box-shadow 120ms ease, border-color 120ms ease, transform 120ms ease;
|
|
186
330
|
}
|
|
187
331
|
|
|
188
332
|
.rec-card:hover {
|
|
189
|
-
|
|
190
|
-
border-color: var(--dsw-alias-border-l3);
|
|
333
|
+
border-color: var(--board-info);
|
|
191
334
|
transform: translateY(-1px);
|
|
192
335
|
}
|
|
193
336
|
|
|
194
337
|
.rec-card:active {
|
|
195
|
-
box-shadow: var(--dsw-shadow-lv1);
|
|
196
338
|
transform: translateY(0);
|
|
197
339
|
}
|
|
198
340
|
|
|
199
|
-
.rec-card[data-state='active'] { border-color: var(--dsw-alias-state-business-primary); }
|
|
200
|
-
.rec-card[data-state='paused'] { border-color: var(--dsw-alias-state-warn-primary); }
|
|
201
|
-
.rec-card[data-state='blocked'] { border-color: var(--dsw-alias-state-error-primary); }
|
|
202
|
-
.rec-card[data-state='complete'] { border-color: var(--dsw-alias-state-success-primary); }
|
|
203
|
-
|
|
204
341
|
.rec-card-title {
|
|
205
342
|
font-size: 13px;
|
|
206
|
-
font-weight:
|
|
343
|
+
font-weight: var(--board-fw-semibold);
|
|
207
344
|
line-height: 1.35;
|
|
208
345
|
overflow: hidden;
|
|
209
346
|
display: -webkit-box;
|
|
@@ -213,52 +350,55 @@ const BOARD_CSS = `
|
|
|
213
350
|
|
|
214
351
|
.rec-card-progress {
|
|
215
352
|
height: 6px;
|
|
216
|
-
background: var(--
|
|
353
|
+
background: var(--board-accent);
|
|
217
354
|
border-radius: 3px;
|
|
218
355
|
overflow: hidden;
|
|
219
356
|
}
|
|
220
357
|
|
|
221
358
|
.rec-card-progress-fill {
|
|
222
359
|
height: 100%;
|
|
223
|
-
background: var(--
|
|
360
|
+
background: var(--board-info);
|
|
224
361
|
}
|
|
225
362
|
|
|
226
363
|
.rec-card-meta {
|
|
227
364
|
display: flex;
|
|
228
365
|
align-items: center;
|
|
229
|
-
gap:
|
|
230
|
-
font-size: 11px;
|
|
231
|
-
color: var(--dsw-alias-label-tertiary);
|
|
366
|
+
gap: var(--board-space-8);
|
|
232
367
|
}
|
|
233
368
|
|
|
234
369
|
.rec-card-phase {
|
|
235
370
|
flex: 1;
|
|
371
|
+
font-family: var(--board-font-mono);
|
|
372
|
+
font-size: var(--board-text-xs);
|
|
373
|
+
letter-spacing: var(--board-tracking-mono);
|
|
374
|
+
color: var(--board-muted-fg);
|
|
236
375
|
overflow: hidden;
|
|
237
376
|
text-overflow: ellipsis;
|
|
238
377
|
white-space: nowrap;
|
|
239
378
|
}
|
|
240
379
|
|
|
241
|
-
|
|
380
|
+
/* ===== Solid status pill (Paper StatusPill) ===== */
|
|
381
|
+
.rec-pill {
|
|
242
382
|
flex: none;
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
383
|
+
border-radius: 9999px;
|
|
384
|
+
padding: 4px 10px;
|
|
385
|
+
font-size: var(--board-text-xs);
|
|
386
|
+
font-weight: var(--board-fw-medium);
|
|
387
|
+
line-height: 1;
|
|
388
|
+
border: none;
|
|
389
|
+
background: var(--board-muted-fg);
|
|
390
|
+
color: var(--board-bg);
|
|
248
391
|
}
|
|
249
392
|
|
|
250
|
-
.rec-
|
|
251
|
-
.rec-
|
|
252
|
-
.rec-
|
|
253
|
-
.rec-
|
|
254
|
-
.rec-
|
|
393
|
+
.rec-pill[data-pill='locked'] { background: var(--board-success); color: var(--board-bg); }
|
|
394
|
+
.rec-pill[data-pill='in-progress'] { background: var(--board-info); color: var(--board-bg); }
|
|
395
|
+
.rec-pill[data-pill='paused'] { background: var(--board-warning); color: var(--board-bg); }
|
|
396
|
+
.rec-pill[data-pill='blocked'] { background: var(--board-error); color: var(--board-bg); }
|
|
397
|
+
.rec-pill[data-pill='tampered'] { background: var(--board-error); color: var(--board-bg); }
|
|
398
|
+
.rec-pill[data-pill='advisory'] { background: var(--board-advisory); color: var(--board-bg); }
|
|
399
|
+
.rec-pill[data-pill='neutral'] { background: var(--board-muted-fg); color: var(--board-bg); }
|
|
255
400
|
|
|
256
|
-
|
|
257
|
-
color: var(--dsw-alias-state-error-primary);
|
|
258
|
-
border-color: var(--dsw-alias-state-error-primary);
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
/* inspector: centered modal-style detail */
|
|
401
|
+
/* ===== Inspector: centered modal detail ===== */
|
|
262
402
|
.rec-inspector {
|
|
263
403
|
position: fixed;
|
|
264
404
|
inset: 0;
|
|
@@ -266,7 +406,7 @@ const BOARD_CSS = `
|
|
|
266
406
|
display: flex;
|
|
267
407
|
align-items: center;
|
|
268
408
|
justify-content: center;
|
|
269
|
-
background:
|
|
409
|
+
background: rgba(0, 0, 0, 0.4);
|
|
270
410
|
pointer-events: auto;
|
|
271
411
|
}
|
|
272
412
|
|
|
@@ -275,20 +415,21 @@ const BOARD_CSS = `
|
|
|
275
415
|
flex-direction: column;
|
|
276
416
|
width: min(640px, calc(100vw - 48px));
|
|
277
417
|
max-height: calc(100vh - 80px);
|
|
278
|
-
background: var(--
|
|
279
|
-
border: 1px solid var(--
|
|
418
|
+
background: var(--board-bg);
|
|
419
|
+
border: 1px solid var(--board-border);
|
|
280
420
|
border-radius: 14px;
|
|
281
|
-
box-shadow:
|
|
282
|
-
color: var(--
|
|
421
|
+
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
|
|
422
|
+
color: var(--board-fg);
|
|
423
|
+
font-family: var(--board-font-sans);
|
|
283
424
|
overflow: hidden;
|
|
284
425
|
}
|
|
285
426
|
|
|
286
427
|
.rec-detail-header {
|
|
287
428
|
display: flex;
|
|
288
429
|
align-items: center;
|
|
289
|
-
gap:
|
|
290
|
-
padding:
|
|
291
|
-
border-bottom: 1px solid var(--
|
|
430
|
+
gap: var(--board-space-12);
|
|
431
|
+
padding: var(--board-space-16) var(--board-space-16);
|
|
432
|
+
border-bottom: 1px solid var(--board-border);
|
|
292
433
|
flex: none;
|
|
293
434
|
}
|
|
294
435
|
|
|
@@ -296,7 +437,8 @@ const BOARD_CSS = `
|
|
|
296
437
|
margin: 0;
|
|
297
438
|
flex: 1;
|
|
298
439
|
font-size: 15px;
|
|
299
|
-
font-weight:
|
|
440
|
+
font-weight: var(--board-fw-semibold);
|
|
441
|
+
letter-spacing: var(--board-tracking-tight);
|
|
300
442
|
overflow-wrap: anywhere;
|
|
301
443
|
}
|
|
302
444
|
|
|
@@ -304,26 +446,26 @@ const BOARD_CSS = `
|
|
|
304
446
|
display: inline-flex;
|
|
305
447
|
align-items: center;
|
|
306
448
|
gap: 4px;
|
|
307
|
-
padding: 5px
|
|
308
|
-
font-size:
|
|
309
|
-
color: var(--
|
|
449
|
+
padding: 5px var(--board-space-12);
|
|
450
|
+
font-size: var(--board-text-xs);
|
|
451
|
+
color: var(--board-fg);
|
|
310
452
|
background: transparent;
|
|
311
|
-
border: 1px solid var(--
|
|
312
|
-
border-radius:
|
|
453
|
+
border: 1px solid var(--board-border);
|
|
454
|
+
border-radius: var(--board-radius-lg);
|
|
313
455
|
cursor: pointer;
|
|
314
456
|
white-space: nowrap;
|
|
315
457
|
}
|
|
316
458
|
|
|
317
459
|
.rec-back:hover {
|
|
318
|
-
background: var(--
|
|
460
|
+
background: var(--board-accent);
|
|
319
461
|
}
|
|
320
462
|
|
|
321
463
|
.rec-detail-body {
|
|
322
|
-
padding:
|
|
464
|
+
padding: var(--board-space-16);
|
|
323
465
|
overflow-y: auto;
|
|
324
466
|
display: flex;
|
|
325
467
|
flex-direction: column;
|
|
326
|
-
gap:
|
|
468
|
+
gap: var(--board-space-16);
|
|
327
469
|
flex: 1;
|
|
328
470
|
}
|
|
329
471
|
|
|
@@ -335,43 +477,70 @@ const BOARD_CSS = `
|
|
|
335
477
|
|
|
336
478
|
.rec-detail-section h3 {
|
|
337
479
|
margin: 0;
|
|
338
|
-
font-size:
|
|
339
|
-
font-weight:
|
|
340
|
-
color: var(--
|
|
480
|
+
font-size: var(--board-text-xs);
|
|
481
|
+
font-weight: var(--board-fw-semibold);
|
|
482
|
+
color: var(--board-muted-fg);
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
.rec-detail-text {
|
|
486
|
+
margin: 0;
|
|
487
|
+
font-size: var(--board-text-sm);
|
|
488
|
+
color: var(--board-muted-fg);
|
|
341
489
|
}
|
|
342
490
|
|
|
343
491
|
.rec-phase-row {
|
|
344
492
|
display: flex;
|
|
345
493
|
align-items: center;
|
|
346
|
-
gap:
|
|
347
|
-
padding:
|
|
348
|
-
border: 1px solid var(--
|
|
349
|
-
border-radius:
|
|
494
|
+
gap: var(--board-space-12);
|
|
495
|
+
padding: var(--board-space-8) var(--board-space-12);
|
|
496
|
+
border: 1px solid var(--board-border);
|
|
497
|
+
border-radius: var(--board-radius-lg);
|
|
350
498
|
font-size: 13px;
|
|
351
499
|
}
|
|
352
500
|
|
|
353
501
|
.rec-phase-id {
|
|
354
502
|
min-width: 48px;
|
|
355
|
-
font-family: var(--
|
|
356
|
-
|
|
503
|
+
font-family: var(--board-font-mono);
|
|
504
|
+
font-size: var(--board-text-xs);
|
|
505
|
+
letter-spacing: var(--board-tracking-mono);
|
|
506
|
+
color: var(--board-info);
|
|
357
507
|
}
|
|
358
508
|
|
|
359
509
|
.rec-phase-name {
|
|
360
510
|
flex: 1;
|
|
361
|
-
color: var(--
|
|
511
|
+
color: var(--board-fg);
|
|
362
512
|
overflow: hidden;
|
|
363
513
|
text-overflow: ellipsis;
|
|
364
514
|
white-space: nowrap;
|
|
365
515
|
}
|
|
366
516
|
|
|
367
517
|
.rec-lockhash {
|
|
368
|
-
font-family: var(--
|
|
518
|
+
font-family: var(--board-font-mono);
|
|
369
519
|
font-size: 11px;
|
|
370
|
-
|
|
520
|
+
letter-spacing: var(--board-tracking-mono);
|
|
521
|
+
color: var(--board-muted-fg);
|
|
522
|
+
}
|
|
523
|
+
|
|
524
|
+
/* ===== Strip (session dock) — keeps the shell --dsw-* theme ===== */
|
|
525
|
+
.rec-badge {
|
|
526
|
+
flex: none;
|
|
527
|
+
padding: 2px 10px;
|
|
528
|
+
font-size: 12px;
|
|
529
|
+
border-radius: 999px;
|
|
530
|
+
border: 1px solid var(--dsw-alias-border-l2);
|
|
531
|
+
color: var(--dsw-alias-label-secondary);
|
|
532
|
+
}
|
|
533
|
+
.rec-badge-tamper {
|
|
534
|
+
color: var(--dsw-alias-state-error-primary);
|
|
535
|
+
border-color: var(--dsw-alias-state-error-primary);
|
|
536
|
+
}
|
|
537
|
+
.rec-badge-gate {
|
|
538
|
+
color: var(--dsw-alias-state-warn-primary);
|
|
539
|
+
border-color: var(--dsw-alias-state-warn-primary);
|
|
371
540
|
}
|
|
372
541
|
|
|
373
542
|
@media (prefers-reduced-motion: reduce) {
|
|
374
|
-
.rec-card, .rec-back, .rec-close { transition: none; }
|
|
543
|
+
.rec-card, .rec-back, .rec-close, .rec-theme-toggle { transition: none; }
|
|
375
544
|
}
|
|
376
545
|
`
|
|
377
546
|
|