eprec 1.4.0 → 1.6.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.
Files changed (31) hide show
  1. package/README.md +1 -1
  2. package/app/assets/styles.css +319 -182
  3. package/app/components/style-system-sample.tsx +197 -0
  4. package/app/styles/tokens.ts +99 -0
  5. package/package.json +8 -11
  6. package/process-course/chapter-processor.ts +6 -3
  7. package/process-course/cli.ts +1 -1
  8. package/process-course/edits/cli.ts +13 -5
  9. package/process-course/edits/combined-video-editor.ts +2 -2
  10. package/process-course/edits/edit-workspace.ts +1 -1
  11. package/process-course/edits/regenerate-transcript.ts +2 -2
  12. package/process-course/edits/remove-ranges.ts +1 -1
  13. package/process-course/edits/timestamp-refinement.ts +1 -1
  14. package/process-course/edits/transcript-output.test.ts +1 -1
  15. package/process-course/edits/transcript-output.ts +1 -1
  16. package/process-course/ffmpeg.ts +1 -1
  17. package/process-course/jarvis-commands/parser.test.ts +1 -1
  18. package/process-course/jarvis-commands/parser.ts +1 -1
  19. package/process-course/jarvis-commands/windows.ts +3 -3
  20. package/process-course/logging.ts +1 -1
  21. package/process-course/summary.ts +1 -1
  22. package/process-course/utils/filename.ts +1 -1
  23. package/process-course/utils/transcript.test.ts +1 -1
  24. package/process-course/utils/transcript.ts +1 -1
  25. package/{app-server.ts → src/app-server.ts} +13 -9
  26. package/{cli.ts → src/cli.ts} +30 -14
  27. package/{process-course-video.ts → src/process-course-video.ts} +9 -9
  28. package/{speech-detection.ts → src/speech-detection.ts} +4 -4
  29. package/src/utils.test.ts +71 -0
  30. /package/{utils.ts → src/utils.ts} +0 -0
  31. /package/{whispercpp-transcribe.ts → src/whispercpp-transcribe.ts} +0 -0
package/app/assets/styles.css CHANGED
@@ -1,5 +1,132 @@
1
1
  :root {
2
2
  color-scheme: light;
3
+ --color-primary: #0ea5e9;
4
+ --color-primary-hover: #0284c7;
5
+ --color-primary-active: #0369a1;
6
+ --color-on-primary: #ffffff;
7
+ --color-background: #f8fafc;
8
+ --color-surface: #ffffff;
9
+ --color-surface-muted: #f8fafc;
10
+ --color-surface-inverse: #0f172a;
11
+ --color-text: #0f172a;
12
+ --color-text-muted: #64748b;
13
+ --color-text-subtle: #475569;
14
+ --color-text-secondary: #334155;
15
+ --color-text-faint: #94a3b8;
16
+ --color-text-inverse: #e2e8f0;
17
+ --color-border: #e2e8f0;
18
+ --color-border-strong: #cbd5e1;
19
+ --color-border-accent: #38bdf8;
20
+ --color-border-muted: color-mix(
21
+ in srgb,
22
+ var(--color-border) 70%,
23
+ transparent
24
+ );
25
+ --color-info-surface: #e0f2fe;
26
+ --color-info-text: #0369a1;
27
+ --color-success-surface: #dcfce7;
28
+ --color-success-text: #166534;
29
+ --color-warning-surface: #fef3c7;
30
+ --color-warning-text: #92400e;
31
+ --color-warning-border: #fbbf24;
32
+ --color-danger-surface: #fee2e2;
33
+ --color-danger-text: #b91c1c;
34
+ --color-danger-border: #fecaca;
35
+ --color-danger-border-strong: #fca5a5;
36
+ --font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
37
+ --font-size-xs: 12px;
38
+ --font-size-sm: 14px;
39
+ --font-size-base: 16px;
40
+ --font-size-lg: 18px;
41
+ --font-size-xl: 20px;
42
+ --font-size-2xl: 32px;
43
+ --font-weight-normal: 400;
44
+ --font-weight-medium: 500;
45
+ --font-weight-semibold: 600;
46
+ --font-weight-bold: 700;
47
+ --spacing-xs: 4px;
48
+ --spacing-sm: 8px;
49
+ --spacing-md: 12px;
50
+ --spacing-lg: 16px;
51
+ --spacing-xl: 20px;
52
+ --spacing-2xl: 24px;
53
+ --spacing-3xl: 32px;
54
+ --spacing-4xl: 48px;
55
+ --spacing-5xl: 72px;
56
+ --radius-sm: 8px;
57
+ --radius-md: 10px;
58
+ --radius-lg: 12px;
59
+ --radius-xl: 16px;
60
+ --radius-pill: 999px;
61
+ --shadow-sm: 0 1px 2px color-mix(in srgb, var(--color-text) 12%, transparent);
62
+ --shadow-md: 0 6px 16px color-mix(in srgb, var(--color-text) 14%, transparent);
63
+ --shadow-lg: 0 18px 38px
64
+ color-mix(in srgb, var(--color-text) 16%, transparent);
65
+ --transition-fast: 150ms ease;
66
+ --transition-normal: 240ms ease;
67
+ --spacing-page: var(--spacing-4xl);
68
+ --spacing-page-inline: var(--spacing-2xl);
69
+ --spacing-page-bottom: var(--spacing-5xl);
70
+ --spacing-section: var(--spacing-3xl);
71
+ --card-min-width: 240px;
72
+ --card-min-width-wide: calc(var(--card-min-width) + 80px);
73
+ }
74
+
75
+ @media (prefers-color-scheme: dark) {
76
+ :root {
77
+ color-scheme: dark;
78
+ --color-primary: #38bdf8;
79
+ --color-primary-hover: #0ea5e9;
80
+ --color-primary-active: #0284c7;
81
+ --color-on-primary: #0f172a;
82
+ --color-background: #0b1120;
83
+ --color-surface: #111827;
84
+ --color-surface-muted: #0f172a;
85
+ --color-surface-inverse: #f8fafc;
86
+ --color-text: #f8fafc;
87
+ --color-text-muted: #94a3b8;
88
+ --color-text-subtle: #cbd5e1;
89
+ --color-text-secondary: #e2e8f0;
90
+ --color-text-faint: #64748b;
91
+ --color-text-inverse: #0f172a;
92
+ --color-border: #334155;
93
+ --color-border-strong: #475569;
94
+ --color-border-accent: #38bdf8;
95
+ --color-info-surface: #0c4a6e;
96
+ --color-info-text: #7dd3fc;
97
+ --color-success-surface: #14532d;
98
+ --color-success-text: #86efac;
99
+ --color-warning-surface: #78350f;
100
+ --color-warning-text: #fcd34d;
101
+ --color-warning-border: #f59e0b;
102
+ --color-danger-surface: #7f1d1d;
103
+ --color-danger-text: #fecaca;
104
+ --color-danger-border: #ef4444;
105
+ --color-danger-border-strong: #fca5a5;
106
+ --shadow-sm: 0 1px 2px color-mix(in srgb, #0f172a 12%, transparent);
107
+ --shadow-md: 0 6px 16px color-mix(in srgb, #0f172a 14%, transparent);
108
+ --shadow-lg: 0 18px 38px color-mix(in srgb, #0f172a 16%, transparent);
109
+ }
110
+ }
111
+
112
+ @media (max-width: 1024px) {
113
+ :root {
114
+ --spacing-page: var(--spacing-3xl);
115
+ --spacing-page-inline: var(--spacing-xl);
116
+ --spacing-page-bottom: var(--spacing-4xl);
117
+ --spacing-section: var(--spacing-2xl);
118
+ --card-min-width: 220px;
119
+ }
120
+ }
121
+
122
+ @media (max-width: 640px) {
123
+ :root {
124
+ --spacing-page: var(--spacing-2xl);
125
+ --spacing-page-inline: var(--spacing-lg);
126
+ --spacing-page-bottom: var(--spacing-3xl);
127
+ --spacing-section: var(--spacing-lg);
128
+ --card-min-width: 200px;
129
+ }
3
130
  }
4
131
 
5
132
  * {
@@ -8,14 +135,10 @@
8
135
 
9
136
  body {
10
137
  margin: 0;
11
- font-family:
12
- 'Inter',
13
- 'Segoe UI',
14
- system-ui,
15
- -apple-system,
16
- sans-serif;
17
- background: #f8fafc;
18
- color: #0f172a;
138
+ font-family: var(--font-family);
139
+ font-size: var(--font-size-sm);
140
+ background: var(--color-background);
141
+ color: var(--color-text);
19
142
  }
20
143
 
21
144
  h1,
@@ -28,75 +151,76 @@ p {
28
151
  .app-shell {
29
152
  max-width: 960px;
30
153
  margin: 0 auto;
31
- padding: 48px 24px 72px;
154
+ padding: var(--spacing-page) var(--spacing-page-inline)
155
+ var(--spacing-page-bottom);
32
156
  }
33
157
 
34
158
  .app-header {
35
159
  display: flex;
36
160
  flex-direction: column;
37
- gap: 12px;
38
- margin-bottom: 32px;
161
+ gap: var(--spacing-md);
162
+ margin-bottom: var(--spacing-3xl);
39
163
  }
40
164
 
41
165
  .app-kicker {
42
- font-size: 12px;
166
+ font-size: var(--font-size-xs);
43
167
  letter-spacing: 0.16em;
44
168
  text-transform: uppercase;
45
- color: #64748b;
46
- font-weight: 600;
169
+ color: var(--color-text-muted);
170
+ font-weight: var(--font-weight-semibold);
47
171
  }
48
172
 
49
173
  .app-title {
50
- font-size: 32px;
51
- font-weight: 700;
174
+ font-size: var(--font-size-2xl);
175
+ font-weight: var(--font-weight-bold);
52
176
  }
53
177
 
54
178
  .app-subtitle {
55
- font-size: 16px;
56
- color: #475569;
179
+ font-size: var(--font-size-base);
180
+ color: var(--color-text-subtle);
57
181
  line-height: 1.6;
58
182
  max-width: 640px;
59
183
  }
60
184
 
61
185
  .app-grid {
62
186
  display: grid;
63
- gap: 16px;
64
- grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
187
+ gap: var(--spacing-lg);
188
+ grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width), 1fr));
65
189
  }
66
190
 
67
191
  .app-card {
68
- background: #ffffff;
69
- border-radius: 16px;
70
- border: 1px solid #e2e8f0;
71
- padding: 20px;
72
- box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
192
+ background: var(--color-surface);
193
+ border-radius: var(--radius-xl);
194
+ border: 1px solid var(--color-border);
195
+ padding: var(--spacing-xl);
196
+ box-shadow: var(--shadow-sm);
73
197
  display: flex;
74
198
  flex-direction: column;
75
- gap: 12px;
199
+ gap: var(--spacing-md);
76
200
  }
77
201
 
78
202
  .app-list {
79
203
  margin: 0;
80
- padding-left: 18px;
81
- color: #334155;
204
+ padding-left: var(--spacing-lg);
205
+ color: var(--color-text-secondary);
82
206
  line-height: 1.6;
83
207
  }
84
208
 
85
209
  .app-muted {
86
- color: #64748b;
210
+ color: var(--color-text-muted);
87
211
  line-height: 1.5;
88
212
  }
89
213
 
90
214
  .status-pill {
91
215
  display: inline-flex;
92
216
  align-items: center;
93
- gap: 6px;
94
- padding: 4px 12px;
95
- border-radius: 999px;
96
- background: #e0f2fe;
97
- color: #0369a1;
98
- font-size: 12px;
99
- font-weight: 600;
217
+ gap: var(--spacing-xs);
218
+ padding: var(--spacing-xs) var(--spacing-md);
219
+ border-radius: var(--radius-pill);
220
+ background: var(--color-info-surface);
221
+ color: var(--color-info-text);
222
+ font-size: var(--font-size-xs);
223
+ font-weight: var(--font-weight-semibold);
100
224
  width: fit-content;
101
225
  }
102
226
 
@@ -104,22 +228,22 @@ p {
104
228
  display: inline-flex;
105
229
  align-items: center;
106
230
  justify-content: space-between;
107
- gap: 12px;
108
- padding: 10px 14px;
231
+ gap: var(--spacing-md);
232
+ padding: var(--spacing-sm) var(--spacing-md);
109
233
  border: none;
110
- border-radius: 10px;
111
- background: #0ea5e9;
112
- color: #ffffff;
113
- font-size: 14px;
114
- font-weight: 600;
234
+ border-radius: var(--radius-md);
235
+ background: var(--color-primary);
236
+ color: var(--color-on-primary);
237
+ font-size: var(--font-size-sm);
238
+ font-weight: var(--font-weight-semibold);
115
239
  cursor: pointer;
116
240
  transition:
117
- transform 0.15s ease,
118
- background 0.15s ease;
241
+ transform var(--transition-fast),
242
+ background var(--transition-fast);
119
243
  }
120
244
 
121
245
  .counter-button:hover {
122
- background: #0284c7;
246
+ background: var(--color-primary-hover);
123
247
  }
124
248
 
125
249
  .counter-button:disabled {
@@ -132,7 +256,7 @@ p {
132
256
  }
133
257
 
134
258
  .counter-value {
135
- font-weight: 700;
259
+ font-weight: var(--font-weight-bold);
136
260
  }
137
261
 
138
262
  .app-card--full {
@@ -142,81 +266,81 @@ p {
142
266
  .summary-grid {
143
267
  display: grid;
144
268
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
145
- gap: 16px;
146
- margin-top: 8px;
269
+ gap: var(--spacing-lg);
270
+ margin-top: var(--spacing-sm);
147
271
  }
148
272
 
149
273
  .summary-item {
150
274
  display: flex;
151
275
  flex-direction: column;
152
- gap: 4px;
276
+ gap: var(--spacing-xs);
153
277
  }
154
278
 
155
279
  .summary-label {
156
- font-size: 12px;
157
- font-weight: 600;
280
+ font-size: var(--font-size-xs);
281
+ font-weight: var(--font-weight-semibold);
158
282
  text-transform: uppercase;
159
283
  letter-spacing: 0.08em;
160
- color: #94a3b8;
284
+ color: var(--color-text-faint);
161
285
  }
162
286
 
163
287
  .summary-value {
164
- font-size: 16px;
165
- font-weight: 600;
166
- color: #0f172a;
288
+ font-size: var(--font-size-base);
289
+ font-weight: var(--font-weight-semibold);
290
+ color: var(--color-text);
167
291
  }
168
292
 
169
293
  .summary-subtext {
170
- font-size: 13px;
171
- color: #64748b;
294
+ font-size: var(--font-size-sm);
295
+ color: var(--color-text-muted);
172
296
  line-height: 1.4;
173
297
  }
174
298
 
175
299
  .timeline-card {
176
- gap: 20px;
300
+ gap: var(--spacing-xl);
177
301
  }
178
302
 
179
303
  .timeline-header {
180
304
  display: flex;
181
305
  align-items: flex-start;
182
306
  justify-content: space-between;
183
- gap: 16px;
307
+ gap: var(--spacing-lg);
184
308
  flex-wrap: wrap;
185
309
  }
186
310
 
187
311
  .timeline-layout {
188
312
  display: grid;
189
313
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
190
- gap: 20px;
314
+ gap: var(--spacing-xl);
191
315
  }
192
316
 
193
317
  .timeline-preview {
194
318
  display: flex;
195
319
  flex-direction: column;
196
- gap: 12px;
320
+ gap: var(--spacing-md);
197
321
  }
198
322
 
199
323
  .timeline-video {
200
324
  display: flex;
201
325
  flex-direction: column;
202
- gap: 10px;
203
- padding: 12px;
204
- border-radius: 16px;
205
- border: 1px solid #e2e8f0;
206
- background: #ffffff;
326
+ gap: var(--spacing-sm);
327
+ padding: var(--spacing-md);
328
+ border-radius: var(--radius-xl);
329
+ border: 1px solid var(--color-border);
330
+ background: var(--color-surface);
207
331
  }
208
332
 
209
333
  .timeline-video-header {
210
334
  display: flex;
211
335
  align-items: flex-start;
212
336
  justify-content: space-between;
213
- gap: 12px;
337
+ gap: var(--spacing-md);
214
338
  }
215
339
 
216
340
  .timeline-video-player {
217
341
  width: 100%;
218
- border-radius: 12px;
219
- background: #0f172a;
342
+ border-radius: var(--radius-lg);
343
+ background: var(--color-surface-inverse);
220
344
  aspect-ratio: 16 / 9;
221
345
  }
222
346
 
@@ -224,19 +348,19 @@ p {
224
348
  display: flex;
225
349
  align-items: center;
226
350
  justify-content: space-between;
227
- font-size: 12px;
228
- color: #64748b;
351
+ font-size: var(--font-size-xs);
352
+ color: var(--color-text-muted);
229
353
  }
230
354
 
231
355
  .timeline-track {
232
356
  position: relative;
233
357
  height: 72px;
234
- border-radius: 16px;
235
- border: 1px solid #e2e8f0;
358
+ border-radius: var(--radius-xl);
359
+ border: 1px solid var(--color-border);
236
360
  background: linear-gradient(
237
361
  90deg,
238
- rgba(226, 232, 240, 0.7) 0%,
239
- rgba(226, 232, 240, 0.7) 2%,
362
+ var(--color-border-muted) 0%,
363
+ var(--color-border-muted) 2%,
240
364
  transparent 2%,
241
365
  transparent 20%
242
366
  );
@@ -246,7 +370,12 @@ p {
246
370
 
247
371
  .timeline-track--skeleton {
248
372
  min-height: 72px;
249
- background: linear-gradient(90deg, #f8fafc 0%, #e2e8f0 45%, #f8fafc 90%);
373
+ background: linear-gradient(
374
+ 90deg,
375
+ var(--color-background) 0%,
376
+ var(--color-border) 45%,
377
+ var(--color-background) 90%
378
+ );
250
379
  background-size: 200% 100%;
251
380
  animation: shimmer 1.8s infinite;
252
381
  }
@@ -255,29 +384,30 @@ p {
255
384
  position: absolute;
256
385
  top: 14px;
257
386
  height: 44px;
258
- border-radius: 10px;
259
- border: 1px solid #fca5a5;
260
- background: #fee2e2;
387
+ border-radius: var(--radius-md);
388
+ border: 1px solid var(--color-danger-border-strong);
389
+ background: var(--color-danger-surface);
261
390
  cursor: pointer;
262
391
  left: var(--range-left);
263
392
  width: var(--range-width);
264
393
  transition:
265
- transform 0.15s ease,
266
- box-shadow 0.15s ease;
394
+ transform var(--transition-fast),
395
+ box-shadow var(--transition-fast);
267
396
  }
268
397
 
269
398
  .timeline-range--manual {
270
- background: #fef3c7;
271
- border-color: #fbbf24;
399
+ background: var(--color-warning-surface);
400
+ border-color: var(--color-warning-border);
272
401
  }
273
402
 
274
403
  .timeline-range--command {
275
- background: #fee2e2;
276
- border-color: #fca5a5;
404
+ background: var(--color-danger-surface);
405
+ border-color: var(--color-danger-border-strong);
277
406
  }
278
407
 
279
408
  .timeline-range.is-selected {
280
- box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.6);
409
+ box-shadow: 0 0 0 2px
410
+ color-mix(in srgb, var(--color-primary) 60%, transparent);
281
411
  transform: translateY(-1px);
282
412
  }
283
413
 
@@ -287,21 +417,22 @@ p {
287
417
  bottom: 0;
288
418
  width: 2px;
289
419
  left: var(--playhead);
290
- background: #0ea5e9;
291
- box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.4);
420
+ background: var(--color-primary);
421
+ box-shadow: 0 0 0 1px
422
+ color-mix(in srgb, var(--color-primary) 40%, transparent);
292
423
  }
293
424
 
294
425
  .timeline-scale {
295
426
  display: flex;
296
427
  justify-content: space-between;
297
- font-size: 12px;
298
- color: #64748b;
428
+ font-size: var(--font-size-xs);
429
+ color: var(--color-text-muted);
299
430
  }
300
431
 
301
432
  .timeline-controls {
302
433
  display: grid;
303
434
  grid-template-columns: auto 1fr auto auto;
304
- gap: 12px;
435
+ gap: var(--spacing-md);
305
436
  align-items: center;
306
437
  }
307
438
 
@@ -312,39 +443,39 @@ p {
312
443
  .control-label {
313
444
  display: flex;
314
445
  flex-direction: column;
315
- font-size: 12px;
316
- gap: 4px;
317
- color: #64748b;
318
- font-weight: 600;
446
+ font-size: var(--font-size-xs);
447
+ gap: var(--spacing-xs);
448
+ color: var(--color-text-muted);
449
+ font-weight: var(--font-weight-semibold);
319
450
  }
320
451
 
321
452
  .control-value {
322
- font-size: 14px;
323
- color: #0f172a;
453
+ font-size: var(--font-size-sm);
454
+ color: var(--color-text);
324
455
  }
325
456
 
326
457
  .panel-header {
327
458
  display: flex;
328
459
  align-items: center;
329
460
  justify-content: space-between;
330
- gap: 12px;
331
- margin-bottom: 8px;
461
+ gap: var(--spacing-md);
462
+ margin-bottom: var(--spacing-sm);
332
463
  }
333
464
 
334
465
  .panel-grid {
335
466
  display: grid;
336
467
  grid-template-columns: repeat(2, minmax(0, 1fr));
337
- gap: 12px;
338
- margin-bottom: 12px;
468
+ gap: var(--spacing-md);
469
+ margin-bottom: var(--spacing-md);
339
470
  }
340
471
 
341
472
  .input-label {
342
473
  display: flex;
343
474
  flex-direction: column;
344
- gap: 6px;
345
- font-size: 12px;
346
- font-weight: 600;
347
- color: #475569;
475
+ gap: var(--spacing-sm);
476
+ font-size: var(--font-size-xs);
477
+ font-weight: var(--font-weight-semibold);
478
+ color: var(--color-text-subtle);
348
479
  }
349
480
 
350
481
  .input-label--full {
@@ -352,47 +483,50 @@ p {
352
483
  }
353
484
 
354
485
  .text-input {
355
- border: 1px solid #cbd5f5;
356
- border-radius: 10px;
357
- padding: 8px 10px;
358
- font-size: 14px;
486
+ border: 1px solid var(--color-border-strong);
487
+ border-radius: var(--radius-md);
488
+ padding: var(--spacing-sm) var(--spacing-md);
489
+ font-size: var(--font-size-sm);
359
490
  font-family: inherit;
491
+ background: var(--color-surface);
492
+ color: var(--color-text);
360
493
  }
361
494
 
362
495
  .text-input--compact {
363
- padding: 6px 8px;
496
+ padding: var(--spacing-xs) var(--spacing-sm);
364
497
  }
365
498
 
366
499
  .button {
367
- border: 1px solid #cbd5f5;
368
- background: #ffffff;
369
- color: #0f172a;
370
- border-radius: 10px;
371
- padding: 8px 12px;
372
- font-size: 13px;
373
- font-weight: 600;
500
+ border: 1px solid var(--color-border-strong);
501
+ background: var(--color-surface);
502
+ color: var(--color-text);
503
+ border-radius: var(--radius-md);
504
+ padding: var(--spacing-sm) var(--spacing-md);
505
+ font-size: var(--font-size-sm);
506
+ font-weight: var(--font-weight-semibold);
374
507
  cursor: pointer;
375
508
  transition:
376
- background 0.15s ease,
377
- color 0.15s ease;
509
+ background var(--transition-fast),
510
+ color var(--transition-fast),
511
+ box-shadow var(--transition-fast);
378
512
  }
379
513
 
380
514
  .button--primary {
381
- background: #0ea5e9;
382
- color: #ffffff;
383
- border-color: #0284c7;
515
+ background: var(--color-primary);
516
+ color: var(--color-on-primary);
517
+ border-color: var(--color-primary-active);
384
518
  }
385
519
 
386
520
  .button--danger {
387
- background: #fef2f2;
388
- border-color: #fecaca;
389
- color: #b91c1c;
521
+ background: var(--color-danger-surface);
522
+ border-color: var(--color-danger-border);
523
+ color: var(--color-danger-text);
390
524
  }
391
525
 
392
526
  .button--ghost {
393
- background: #f8fafc;
394
- border-color: #e2e8f0;
395
- color: #475569;
527
+ background: var(--color-surface-muted);
528
+ border-color: var(--color-border);
529
+ color: var(--color-text-subtle);
396
530
  }
397
531
 
398
532
  .button:disabled {
@@ -406,23 +540,23 @@ p {
406
540
  margin: 0;
407
541
  display: flex;
408
542
  flex-direction: column;
409
- gap: 10px;
543
+ gap: var(--spacing-sm);
410
544
  }
411
545
 
412
546
  .cut-row {
413
547
  display: flex;
414
548
  align-items: center;
415
- gap: 12px;
549
+ gap: var(--spacing-md);
416
550
  justify-content: space-between;
417
- border: 1px solid #e2e8f0;
418
- border-radius: 12px;
419
- padding: 8px 12px;
420
- background: #f8fafc;
551
+ border: 1px solid var(--color-border);
552
+ border-radius: var(--radius-lg);
553
+ padding: var(--spacing-sm) var(--spacing-md);
554
+ background: var(--color-surface-muted);
421
555
  }
422
556
 
423
557
  .cut-row.is-selected {
424
- border-color: #38bdf8;
425
- background: #e0f2fe;
558
+ border-color: var(--color-border-accent);
559
+ background: var(--color-info-surface);
426
560
  }
427
561
 
428
562
  .cut-select {
@@ -432,40 +566,43 @@ p {
432
566
  cursor: pointer;
433
567
  display: flex;
434
568
  flex-direction: column;
435
- gap: 4px;
436
- font-size: 13px;
437
- color: #0f172a;
569
+ gap: var(--spacing-xs);
570
+ font-size: var(--font-size-sm);
571
+ color: var(--color-text);
438
572
  flex: 1;
439
573
  }
440
574
 
441
575
  .cut-time {
442
- font-weight: 600;
576
+ font-weight: var(--font-weight-semibold);
443
577
  }
444
578
 
445
579
  .cut-reason {
446
- color: #64748b;
580
+ color: var(--color-text-muted);
447
581
  }
448
582
 
449
583
  .app-grid--two {
450
- grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
584
+ grid-template-columns: repeat(
585
+ auto-fit,
586
+ minmax(var(--card-min-width-wide), 1fr)
587
+ );
451
588
  }
452
589
 
453
590
  .chapter-list,
454
591
  .command-list {
455
592
  display: flex;
456
593
  flex-direction: column;
457
- gap: 12px;
594
+ gap: var(--spacing-md);
458
595
  }
459
596
 
460
597
  .chapter-row,
461
598
  .command-row {
462
- border: 1px solid #e2e8f0;
463
- border-radius: 14px;
464
- padding: 12px;
465
- background: #f8fafc;
599
+ border: 1px solid var(--color-border);
600
+ border-radius: var(--radius-lg);
601
+ padding: var(--spacing-md);
602
+ background: var(--color-surface-muted);
466
603
  display: flex;
467
604
  flex-direction: column;
468
- gap: 10px;
605
+ gap: var(--spacing-sm);
469
606
  }
470
607
 
471
608
  .chapter-header,
@@ -473,62 +610,62 @@ p {
473
610
  display: flex;
474
611
  align-items: center;
475
612
  justify-content: space-between;
476
- gap: 12px;
613
+ gap: var(--spacing-md);
477
614
  }
478
615
 
479
616
  .chapter-time {
480
- font-size: 12px;
481
- color: #64748b;
617
+ font-size: var(--font-size-xs);
618
+ color: var(--color-text-muted);
482
619
  }
483
620
 
484
621
  .command-meta {
485
622
  display: flex;
486
623
  align-items: center;
487
624
  justify-content: space-between;
488
- gap: 12px;
625
+ gap: var(--spacing-md);
489
626
  }
490
627
 
491
628
  .command-time {
492
- font-size: 12px;
493
- color: #64748b;
629
+ font-size: var(--font-size-xs);
630
+ color: var(--color-text-muted);
494
631
  }
495
632
 
496
633
  .status-pill--success {
497
- background: #dcfce7;
498
- color: #166534;
634
+ background: var(--color-success-surface);
635
+ color: var(--color-success-text);
499
636
  }
500
637
 
501
638
  .status-pill--warning {
502
- background: #fef3c7;
503
- color: #92400e;
639
+ background: var(--color-warning-surface);
640
+ color: var(--color-warning-text);
504
641
  }
505
642
 
506
643
  .status-pill--danger {
507
- background: #fee2e2;
508
- color: #b91c1c;
644
+ background: var(--color-danger-surface);
645
+ color: var(--color-danger-text);
509
646
  }
510
647
 
511
648
  .status-pill--info {
512
- background: #e0f2fe;
513
- color: #0369a1;
649
+ background: var(--color-info-surface);
650
+ color: var(--color-info-text);
514
651
  }
515
652
 
516
653
  .transcript-card {
517
- gap: 16px;
654
+ gap: var(--spacing-lg);
518
655
  }
519
656
 
520
657
  .transcript-header {
521
658
  display: flex;
522
659
  align-items: flex-start;
523
660
  justify-content: space-between;
524
- gap: 16px;
661
+ gap: var(--spacing-lg);
525
662
  flex-wrap: wrap;
526
663
  }
527
664
 
528
665
  .transcript-preview {
529
666
  display: flex;
530
667
  flex-direction: column;
531
- gap: 4px;
668
+ gap: var(--spacing-xs);
532
669
  max-width: 320px;
533
670
  }
534
671
 
@@ -537,41 +674,41 @@ p {
537
674
  margin: 0;
538
675
  padding: 0;
539
676
  display: grid;
540
- gap: 8px;
677
+ gap: var(--spacing-sm);
541
678
  }
542
679
 
543
680
  .transcript-result {
544
681
  width: 100%;
545
- border: 1px solid #e2e8f0;
546
- border-radius: 10px;
547
- padding: 8px 10px;
548
- background: #ffffff;
682
+ border: 1px solid var(--color-border);
683
+ border-radius: var(--radius-md);
684
+ padding: var(--spacing-sm) var(--spacing-md);
685
+ background: var(--color-surface);
549
686
  display: grid;
550
687
  grid-template-columns: auto 1fr;
551
- gap: 10px;
688
+ gap: var(--spacing-md);
552
689
  text-align: left;
553
690
  cursor: pointer;
554
691
  }
555
692
 
556
693
  .transcript-time {
557
- font-weight: 600;
558
- color: #0f172a;
694
+ font-weight: var(--font-weight-semibold);
695
+ color: var(--color-text);
559
696
  }
560
697
 
561
698
  .transcript-snippet {
562
- color: #64748b;
699
+ color: var(--color-text-muted);
563
700
  }
564
701
 
565
702
  .transcript-empty {
566
- margin-top: 4px;
703
+ margin-top: var(--spacing-xs);
567
704
  }
568
705
 
569
706
  .command-preview {
570
- background: #0f172a;
571
- color: #e2e8f0;
572
- border-radius: 12px;
573
- padding: 16px;
574
- font-size: 13px;
707
+ background: var(--color-surface-inverse);
708
+ color: var(--color-text-inverse);
709
+ border-radius: var(--radius-lg);
710
+ padding: var(--spacing-lg);
711
+ font-size: var(--font-size-sm);
575
712
  line-height: 1.5;
576
713
  overflow-x: auto;
577
714
  }
@@ -585,7 +722,7 @@ p {
585
722
  }
586
723
  }
587
724
 
588
- @media (max-width: 900px) {
725
+ @media (max-width: 1024px) {
589
726
  .timeline-layout {
590
727
  grid-template-columns: 1fr;
591
728
  }