eprec 1.7.0 → 1.9.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 (11) hide show
  1. package/README.md +8 -2
  2. package/app/assets/styles.css +193 -10
  3. package/app/client/editing-workspace.tsx +629 -29
  4. package/app/components/layout.tsx +10 -0
  5. package/app/config/import-map.ts +1 -0
  6. package/app/routes/index.tsx +20 -0
  7. package/app/video-api.ts +161 -0
  8. package/package.json +1 -1
  9. package/src/app-server.ts +9 -0
  10. package/src/cli.ts +6 -1
  11. package/src/process-course-video.ts +4 -1
package/README.md CHANGED
@@ -54,8 +54,14 @@ Start the Remix-powered UI shell (watch mode enabled):
54
54
  bun run app:start
55
55
  ```
56
56
 
57
- Then open `http://localhost:3000`. Use `-- --port` or `-- --host` to override
58
- the defaults.
57
+ To preload a local video path for the UI:
58
+
59
+ ```bash
60
+ bun run app:start -- --video-path "/path/to/video.mp4"
61
+ ```
62
+
63
+ Then open `http://localhost:3000`. Use `-- --port`, `-- --host`, or
64
+ `-- --video-path` to override the defaults.
59
65
 
60
66
  ## CLI Options
61
67
 
package/app/assets/styles.css CHANGED
@@ -188,6 +188,7 @@ p {
188
188
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width), 1fr));
189
189
  }
190
190
 
191
+
191
192
  .app-card {
192
193
  background: var(--color-surface);
193
194
  border-radius: var(--radius-xl);
@@ -199,6 +200,91 @@ p {
199
200
  gap: var(--spacing-md);
200
201
  }
201
202
 
203
+ .stacked-list {
204
+ display: flex;
205
+ flex-direction: column;
206
+ gap: 0;
207
+ margin: 0;
208
+ padding: 0;
209
+ list-style: none;
210
+ }
211
+
212
+ .stacked-item {
213
+ border-radius: 0;
214
+ }
215
+
216
+ .stacked-item:first-child {
217
+ border-top-left-radius: var(--radius-lg);
218
+ border-top-right-radius: var(--radius-lg);
219
+ }
220
+
221
+ .stacked-item:last-child {
222
+ border-bottom-left-radius: var(--radius-lg);
223
+ border-bottom-right-radius: var(--radius-lg);
224
+ }
225
+
226
+ .stacked-item.is-selected {
227
+ background: var(--color-info-surface);
228
+ box-shadow: inset 0 0 0 1px var(--color-border-accent);
229
+ }
230
+
231
+ .source-card {
232
+ gap: var(--spacing-lg);
233
+ }
234
+
235
+ .source-header {
236
+ display: flex;
237
+ align-items: flex-start;
238
+ justify-content: space-between;
239
+ gap: var(--spacing-lg);
240
+ flex-wrap: wrap;
241
+ }
242
+
243
+ .source-grid {
244
+ display: flex;
245
+ flex-direction: column;
246
+ gap: var(--spacing-lg);
247
+ }
248
+
249
+ .source-fields {
250
+ display: flex;
251
+ flex-direction: column;
252
+ gap: var(--spacing-md);
253
+ }
254
+
255
+ .source-actions {
256
+ display: flex;
257
+ flex-wrap: wrap;
258
+ gap: var(--spacing-sm);
259
+ }
260
+ .status-note {
261
+ margin: 0;
262
+ padding: var(--spacing-sm) var(--spacing-md);
263
+ border-radius: var(--radius-md);
264
+ font-size: var(--font-size-xs);
265
+ background: var(--color-surface-muted);
266
+ color: var(--color-text-subtle);
267
+ border: 1px solid var(--color-border);
268
+ }
269
+
270
+ .status-note--success {
271
+ background: var(--color-success-surface);
272
+ color: var(--color-success-text);
273
+ border-color: color-mix(in srgb, var(--color-success-text) 20%, transparent);
274
+ }
275
+
276
+ .status-note--warning {
277
+ background: var(--color-warning-surface);
278
+ color: var(--color-warning-text);
279
+ border-color: var(--color-warning-border);
280
+ }
281
+
282
+ .status-note--danger {
283
+ background: var(--color-danger-surface);
284
+ color: var(--color-danger-text);
285
+ border-color: var(--color-danger-border);
286
+ }
287
+
202
288
  .app-list {
203
289
  margin: 0;
204
290
  padding-left: var(--spacing-lg);
@@ -296,6 +382,93 @@ p {
296
382
  line-height: 1.4;
297
383
  }
298
384
 
385
+ .actions-card {
386
+ gap: var(--spacing-xl);
387
+ }
388
+
389
+ .actions-header {
390
+ display: flex;
391
+ flex-wrap: wrap;
392
+ align-items: flex-start;
393
+ justify-content: space-between;
394
+ gap: var(--spacing-lg);
395
+ }
396
+
397
+ .actions-meta {
398
+ min-width: 180px;
399
+ }
400
+
401
+ .actions-buttons {
402
+ display: flex;
403
+ flex-wrap: wrap;
404
+ gap: var(--spacing-sm);
405
+ }
406
+
407
+ .actions-grid {
408
+ display: grid;
409
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
410
+ gap: var(--spacing-lg);
411
+ }
412
+
413
+ .actions-panel {
414
+ border: 1px solid var(--color-border);
415
+ border-radius: var(--radius-lg);
416
+ padding: var(--spacing-lg);
417
+ background: var(--color-surface-muted);
418
+ display: flex;
419
+ flex-direction: column;
420
+ gap: var(--spacing-md);
421
+ }
422
+
423
+ .actions-button-row {
424
+ display: flex;
425
+ flex-wrap: wrap;
426
+ gap: var(--spacing-sm);
427
+ }
428
+
429
+ .actions-queue {
430
+ display: flex;
431
+ flex-direction: column;
432
+ gap: var(--spacing-md);
433
+ }
434
+
435
+ .processing-list .stacked-item {
436
+ background: var(--color-surface);
437
+ }
438
+
439
+ .processing-row {
440
+ border: 1px solid var(--color-border);
441
+ }
442
+
443
+ .processing-row-header {
444
+ display: flex;
445
+ align-items: flex-start;
446
+ justify-content: space-between;
447
+ gap: var(--spacing-md);
448
+ padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
449
+ }
450
+
451
+ .processing-row-header h4 {
452
+ margin: 0 0 var(--spacing-xs);
453
+ font-size: var(--font-size-base);
454
+ }
455
+
456
+ .processing-row-meta {
457
+ display: flex;
458
+ align-items: center;
459
+ justify-content: space-between;
460
+ gap: var(--spacing-md);
461
+ padding: 0 var(--spacing-md) var(--spacing-md);
462
+ }
463
+
464
+ .processing-row.is-running {
465
+ box-shadow: inset 0 0 0 1px var(--color-warning-border);
466
+ }
467
+
468
+ .processing-row.is-complete {
469
+ background: var(--color-success-surface);
470
+ }
471
+
299
472
  .timeline-card {
300
473
  gap: var(--spacing-xl);
301
474
  }
@@ -540,7 +713,7 @@ p {
540
713
  margin: 0;
541
714
  display: flex;
542
715
  flex-direction: column;
543
- gap: var(--spacing-sm);
716
+ gap: 0;
544
717
  }
545
718
 
546
719
  .cut-row {
@@ -549,14 +722,14 @@ p {
549
722
  gap: var(--spacing-md);
550
723
  justify-content: space-between;
551
724
  border: 1px solid var(--color-border);
552
- border-radius: var(--radius-lg);
725
+ border-radius: 0;
553
726
  padding: var(--spacing-sm) var(--spacing-md);
554
727
  background: var(--color-surface-muted);
555
728
  }
556
729
 
557
730
  .cut-row.is-selected {
558
- border-color: var(--color-border-accent);
559
731
  background: var(--color-info-surface);
732
+ box-shadow: inset 0 0 0 1px var(--color-border-accent);
560
733
  }
561
734
 
562
735
  .cut-select {
@@ -591,13 +764,13 @@ p {
591
764
  .command-list {
592
765
  display: flex;
593
766
  flex-direction: column;
594
- gap: var(--spacing-md);
767
+ gap: 0;
595
768
  }
596
769
 
597
770
  .chapter-row,
598
771
  .command-row {
599
772
  border: 1px solid var(--color-border);
600
- border-radius: var(--radius-lg);
773
+ border-radius: 0;
601
774
  padding: var(--spacing-md);
602
775
  background: var(--color-surface-muted);
603
776
  display: flex;
@@ -673,16 +846,22 @@ p {
673
846
  list-style: none;
674
847
  margin: 0;
675
848
  padding: 0;
676
- display: grid;
677
- gap: var(--spacing-sm);
849
+ display: flex;
850
+ flex-direction: column;
851
+ gap: 0;
852
+ }
853
+
854
+ .transcript-results .stacked-item {
855
+ border: 1px solid var(--color-border);
856
+ background: var(--color-surface);
678
857
  }
679
858
 
680
859
  .transcript-result {
681
860
  width: 100%;
682
- border: 1px solid var(--color-border);
683
- border-radius: var(--radius-md);
684
861
  padding: var(--spacing-sm) var(--spacing-md);
685
- background: var(--color-surface);
862
+ border: none;
863
+ border-radius: 0;
864
+ background: transparent;
686
865
  display: grid;
687
866
  grid-template-columns: auto 1fr;
688
867
  gap: var(--spacing-md);
@@ -713,6 +892,10 @@ p {
713
892
  overflow-x: auto;
714
893
  }
715
894
 
895
+ .stacked-list .stacked-item + .stacked-item {
896
+ border-top: none;
897
+ }
898
+
716
899
  @keyframes shimmer {
717
900
  0% {
718
901
  background-position: 0% 50%;