eprec 1.1.0 → 1.3.0

package/app/assets/styles.css

@@ -8,7 +8,12 @@
 
 body {
 	margin: 0;
-	font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
+	font-family:
+		'Inter',
+		'Segoe UI',
+		system-ui,
+		-apple-system,
+		sans-serif;
 	background: #f8fafc;
 	color: #0f172a;
 }
@@ -108,7 +113,9 @@ p {
 	font-size: 14px;
 	font-weight: 600;
 	cursor: pointer;
-	transition: transform 0.15s ease, background 0.15s ease;
+	transition:
+		transform 0.15s ease,
+		background 0.15s ease;
 }
 
 .counter-button:hover {
@@ -127,3 +134,463 @@ p {
 .counter-value {
 	font-weight: 700;
 }
+
+.app-card--full {
+	width: 100%;
+}
+
+.summary-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+	gap: 16px;
+	margin-top: 8px;
+}
+
+.summary-item {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.summary-label {
+	font-size: 12px;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
+	color: #94a3b8;
+}
+
+.summary-value {
+	font-size: 16px;
+	font-weight: 600;
+	color: #0f172a;
+}
+
+.summary-subtext {
+	font-size: 13px;
+	color: #64748b;
+	line-height: 1.4;
+}
+
+.timeline-card {
+	gap: 20px;
+}
+
+.timeline-header {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 16px;
+	flex-wrap: wrap;
+}
+
+.timeline-layout {
+	display: grid;
+	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+	gap: 20px;
+}
+
+.timeline-preview {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.timeline-video {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	padding: 12px;
+	border-radius: 16px;
+	border: 1px solid #e2e8f0;
+	background: #ffffff;
+}
+
+.timeline-video-header {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 12px;
+}
+
+.timeline-video-player {
+	width: 100%;
+	border-radius: 12px;
+	background: #0f172a;
+	aspect-ratio: 16 / 9;
+}
+
+.timeline-video-meta {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	font-size: 12px;
+	color: #64748b;
+}
+
+.timeline-track {
+	position: relative;
+	height: 72px;
+	border-radius: 16px;
+	border: 1px solid #e2e8f0;
+	background: linear-gradient(
+		90deg,
+		rgba(226, 232, 240, 0.7) 0%,
+		rgba(226, 232, 240, 0.7) 2%,
+		transparent 2%,
+		transparent 20%
+	);
+	background-size: 20% 100%;
+	overflow: hidden;
+}
+
+.timeline-track--skeleton {
+	min-height: 72px;
+	background: linear-gradient(90deg, #f8fafc 0%, #e2e8f0 45%, #f8fafc 90%);
+	background-size: 200% 100%;
+	animation: shimmer 1.8s infinite;
+}
+
+.timeline-range {
+	position: absolute;
+	top: 14px;
+	height: 44px;
+	border-radius: 10px;
+	border: 1px solid #fca5a5;
+	background: #fee2e2;
+	cursor: pointer;
+	left: var(--range-left);
+	width: var(--range-width);
+	transition:
+		transform 0.15s ease,
+		box-shadow 0.15s ease;
+}
+
+.timeline-range--manual {
+	background: #fef3c7;
+	border-color: #fbbf24;
+}
+
+.timeline-range--command {
+	background: #fee2e2;
+	border-color: #fca5a5;
+}
+
+.timeline-range.is-selected {
+	box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.6);
+	transform: translateY(-1px);
+}
+
+.timeline-playhead {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	width: 2px;
+	left: var(--playhead);
+	background: #0ea5e9;
+	box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.4);
+}
+
+.timeline-scale {
+	display: flex;
+	justify-content: space-between;
+	font-size: 12px;
+	color: #64748b;
+}
+
+.timeline-controls {
+	display: grid;
+	grid-template-columns: auto 1fr auto auto;
+	gap: 12px;
+	align-items: center;
+}
+
+.timeline-slider {
+	width: 100%;
+}
+
+.control-label {
+	display: flex;
+	flex-direction: column;
+	font-size: 12px;
+	gap: 4px;
+	color: #64748b;
+	font-weight: 600;
+}
+
+.control-value {
+	font-size: 14px;
+	color: #0f172a;
+}
+
+.panel-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+	margin-bottom: 8px;
+}
+
+.panel-grid {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 12px;
+	margin-bottom: 12px;
+}
+
+.input-label {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	font-size: 12px;
+	font-weight: 600;
+	color: #475569;
+}
+
+.input-label--full {
+	grid-column: 1 / -1;
+}
+
+.text-input {
+	border: 1px solid #cbd5f5;
+	border-radius: 10px;
+	padding: 8px 10px;
+	font-size: 14px;
+	font-family: inherit;
+}
+
+.text-input--compact {
+	padding: 6px 8px;
+}
+
+.button {
+	border: 1px solid #cbd5f5;
+	background: #ffffff;
+	color: #0f172a;
+	border-radius: 10px;
+	padding: 8px 12px;
+	font-size: 13px;
+	font-weight: 600;
+	cursor: pointer;
+	transition:
+		background 0.15s ease,
+		color 0.15s ease;
+}
+
+.button--primary {
+	background: #0ea5e9;
+	color: #ffffff;
+	border-color: #0284c7;
+}
+
+.button--danger {
+	background: #fef2f2;
+	border-color: #fecaca;
+	color: #b91c1c;
+}
+
+.button--ghost {
+	background: #f8fafc;
+	border-color: #e2e8f0;
+	color: #475569;
+}
+
+.button:disabled {
+	cursor: not-allowed;
+	opacity: 0.6;
+}
+
+.cut-list {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+.cut-row {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	justify-content: space-between;
+	border: 1px solid #e2e8f0;
+	border-radius: 12px;
+	padding: 8px 12px;
+	background: #f8fafc;
+}
+
+.cut-row.is-selected {
+	border-color: #38bdf8;
+	background: #e0f2fe;
+}
+
+.cut-select {
+	background: transparent;
+	border: none;
+	text-align: left;
+	cursor: pointer;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	font-size: 13px;
+	color: #0f172a;
+	flex: 1;
+}
+
+.cut-time {
+	font-weight: 600;
+}
+
+.cut-reason {
+	color: #64748b;
+}
+
+.app-grid--two {
+	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+}
+
+.chapter-list,
+.command-list {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.chapter-row,
+.command-row {
+	border: 1px solid #e2e8f0;
+	border-radius: 14px;
+	padding: 12px;
+	background: #f8fafc;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+.chapter-header,
+.command-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+}
+
+.chapter-time {
+	font-size: 12px;
+	color: #64748b;
+}
+
+.command-meta {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+}
+
+.command-time {
+	font-size: 12px;
+	color: #64748b;
+}
+
+.status-pill--success {
+	background: #dcfce7;
+	color: #166534;
+}
+
+.status-pill--warning {
+	background: #fef3c7;
+	color: #92400e;
+}
+
+.status-pill--danger {
+	background: #fee2e2;
+	color: #b91c1c;
+}
+
+.status-pill--info {
+	background: #e0f2fe;
+	color: #0369a1;
+}
+
+.transcript-card {
+	gap: 16px;
+}
+
+.transcript-header {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 16px;
+	flex-wrap: wrap;
+}
+
+.transcript-preview {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	max-width: 320px;
+}
+
+.transcript-results {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: grid;
+	gap: 8px;
+}
+
+.transcript-result {
+	width: 100%;
+	border: 1px solid #e2e8f0;
+	border-radius: 10px;
+	padding: 8px 10px;
+	background: #ffffff;
+	display: grid;
+	grid-template-columns: auto 1fr;
+	gap: 10px;
+	text-align: left;
+	cursor: pointer;
+}
+
+.transcript-time {
+	font-weight: 600;
+	color: #0f172a;
+}
+
+.transcript-snippet {
+	color: #64748b;
+}
+
+.transcript-empty {
+	margin-top: 4px;
+}
+
+.command-preview {
+	background: #0f172a;
+	color: #e2e8f0;
+	border-radius: 12px;
+	padding: 16px;
+	font-size: 13px;
+	line-height: 1.5;
+	overflow-x: auto;
+}
+
+@keyframes shimmer {
+	0% {
+		background-position: 0% 50%;
+	}
+	100% {
+		background-position: 200% 50%;
+	}
+}
+
+@media (max-width: 900px) {
+	.timeline-layout {
+		grid-template-columns: 1fr;
+	}
+
+	.timeline-controls {
+		grid-template-columns: 1fr;
+	}
+}

package/app/client/app.tsx

@@ -1,37 +1,5 @@
-import { Counter } from './counter.tsx'
+import { EditingWorkspace } from './editing-workspace.tsx'
 
 export function App() {
-	return () => (
-		<main class="app-shell">
-			<header class="app-header">
-				<span class="app-kicker">Eprec Studio</span>
-				<h1 class="app-title">Editing workspace</h1>
-				<p class="app-subtitle">
-					Prepare edits with the CLI, then review them here.
-				</p>
-			</header>
-			<div class="app-grid">
-				<section class="app-card">
-					<h2>Workflow</h2>
-					<ol class="app-list">
-						<li>Run a CLI edit command.</li>
-						<li>Open the workspace UI.</li>
-						<li>Review and refine the cut list.</li>
-					</ol>
-				</section>
-				<section class="app-card">
-					<h2>UI status</h2>
-					<p class="status-pill">Running locally</p>
-					<p class="app-muted">
-						Server-rendered shell with client-side edits.
-					</p>
-				</section>
-				<section class="app-card">
-					<h2>Interaction check</h2>
-					<p class="app-muted">Click the counter to verify interactivity.</p>
-					<Counter setup={{ initial: 0 }} />
-				</section>
-			</div>
-		</main>
-	)
+	return () => <EditingWorkspace />
 }