videowright 0.1.0

package/src/cli/entry/styles/components.css

@@ -0,0 +1,605 @@
+/**
+ * Component styles for the Videowright dev UI.
+ * Uses design tokens from tokens.css.
+ */
+
+/* ---- Top Bar ---- */
+
+.vw-top-bar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: 56px;
+	padding: 0 24px;
+	background: var(--bg-surface);
+	border-bottom: 1px solid var(--border-subtle);
+	flex-shrink: 0;
+}
+
+.vw-top-bar__left {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	min-width: 0;
+}
+
+.vw-top-bar__wordmark {
+	font-family: var(--font-mono);
+	font-size: 14px;
+	font-weight: 500;
+	color: var(--text-primary);
+	text-decoration: none;
+	cursor: pointer;
+	flex-shrink: 0;
+	transition: color var(--duration) var(--ease-out);
+}
+
+.vw-top-bar__wordmark:hover {
+	color: var(--accent);
+}
+
+.vw-top-bar__sep {
+	color: var(--text-tertiary);
+	font-size: 14px;
+	flex-shrink: 0;
+	user-select: none;
+}
+
+.vw-top-bar__title {
+	font-size: 14px;
+	font-weight: 500;
+	color: var(--text-primary);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	min-width: 0;
+}
+
+.vw-top-bar__right {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	flex-shrink: 0;
+}
+
+.vw-top-bar__project {
+	font-size: 13px;
+	color: var(--text-secondary);
+}
+
+.vw-top-bar__icon-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	border: none;
+	border-radius: var(--radius-sm);
+	background: transparent;
+	color: var(--text-secondary);
+	cursor: pointer;
+	transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
+}
+
+.vw-top-bar__icon-btn:hover {
+	background: var(--bg-surface-hover);
+	color: var(--accent);
+}
+
+/* ---- Video Card ---- */
+
+.vw-card {
+	padding: 16px;
+	border-radius: var(--radius-md);
+	background: var(--bg-surface);
+	border: 1px solid var(--border-subtle);
+	cursor: pointer;
+	color: inherit;
+	text-decoration: none;
+	transition: transform var(--duration) var(--ease-out), border-color var(--duration)
+		var(--ease-out);
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.vw-card:hover {
+	transform: translateY(-1px);
+	border-color: var(--border-strong);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.vw-card:hover {
+		transform: none;
+		border-color: var(--border-strong);
+	}
+}
+
+.vw-card__header {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 8px;
+}
+
+.vw-card__title {
+	font-size: 16px;
+	font-weight: 500;
+	color: var(--text-primary);
+	line-height: 1.3;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.vw-card__download {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	border: none;
+	border-radius: var(--radius-sm);
+	background: transparent;
+	color: var(--text-secondary);
+	cursor: pointer;
+	flex-shrink: 0;
+	transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
+}
+
+.vw-card__download:hover {
+	background: var(--bg-surface-hover);
+	color: var(--accent);
+}
+
+.vw-card__slug {
+	font-family: var(--font-mono);
+	font-size: 13px;
+	color: var(--text-secondary);
+	line-height: 1.4;
+}
+
+.vw-card__badge {
+	display: inline-block;
+	align-self: flex-start;
+	font-family: var(--font-mono);
+	font-size: 11px;
+	color: var(--text-secondary);
+	border: 1px solid var(--border-subtle);
+	border-radius: var(--radius-sm);
+	padding: 2px 8px;
+	line-height: 1.4;
+	margin-top: 4px;
+}
+
+/* ---- Empty State ---- */
+
+.vw-empty {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	max-width: 440px;
+	margin: 0 auto;
+	padding: 64px 32px;
+	min-height: calc(100vh - 56px - 80px);
+}
+
+.vw-empty__hero {
+	font-size: 32px;
+	font-weight: 600;
+	color: var(--text-primary);
+	line-height: 1.3;
+	margin-bottom: 12px;
+}
+
+.vw-empty__desc {
+	font-size: 14px;
+	color: var(--text-secondary);
+	line-height: 1.5;
+	margin-bottom: 20px;
+}
+
+.vw-empty__code {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	background: var(--bg-surface-elevated);
+	border: 1px solid var(--border-subtle);
+	border-radius: var(--radius-md);
+	padding: 12px 16px;
+	margin-bottom: 24px;
+	width: 100%;
+	max-width: 320px;
+}
+
+.vw-empty__code code {
+	font-family: var(--font-mono);
+	font-size: 13px;
+	color: var(--text-primary);
+	flex: 1;
+	text-align: left;
+}
+
+.vw-empty__docs {
+	font-size: 13px;
+	color: var(--text-secondary);
+}
+
+.vw-empty__docs-link {
+	color: var(--accent);
+	text-decoration: none;
+	transition: color var(--duration) var(--ease-out);
+}
+
+.vw-empty__docs-link:hover {
+	color: var(--text-primary);
+}
+
+/* ---- Copy Button ---- */
+
+.vw-copy-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
+	border: none;
+	border-radius: var(--radius-sm);
+	background: transparent;
+	color: var(--text-secondary);
+	cursor: pointer;
+	flex-shrink: 0;
+	transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
+}
+
+.vw-copy-btn:hover {
+	background: var(--bg-surface-hover);
+	color: var(--text-primary);
+}
+
+.vw-copy-btn--copied {
+	color: var(--success);
+}
+
+.vw-copy-btn--copied:hover {
+	color: var(--success);
+}
+
+/* ---- Homepage Layout ---- */
+
+.vw-homepage {
+	min-height: 100vh;
+	background: var(--bg-base);
+}
+
+.vw-homepage__content {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 32px;
+}
+
+.vw-homepage__heading {
+	font-size: 24px;
+	font-weight: 600;
+	color: var(--text-primary);
+	line-height: 1.3;
+	margin: 0 0 4px 0;
+}
+
+.vw-homepage__subtitle {
+	font-size: 12px;
+	color: var(--text-secondary);
+	margin: 0 0 24px 0;
+}
+
+.vw-homepage__grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+	gap: 16px;
+}
+
+/* ---- 404 Layout ---- */
+
+.vw-not-found {
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
+	background: var(--bg-base);
+}
+
+.vw-not-found__content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	flex: 1;
+	text-align: center;
+	padding: 32px;
+}
+
+.vw-not-found__code {
+	font-family: var(--font-mono);
+	font-size: 64px;
+	color: var(--text-tertiary);
+	line-height: 1;
+	margin-bottom: 16px;
+}
+
+.vw-not-found__heading {
+	font-size: 24px;
+	font-weight: 600;
+	color: var(--text-primary);
+	line-height: 1.3;
+	margin: 0 0 8px 0;
+}
+
+.vw-not-found__desc {
+	font-size: 14px;
+	color: var(--text-secondary);
+	margin: 0 0 24px 0;
+}
+
+.vw-not-found__link {
+	font-size: 14px;
+	color: var(--accent);
+	text-decoration: none;
+	cursor: pointer;
+	transition: color var(--duration) var(--ease-out);
+}
+
+.vw-not-found__link:hover {
+	color: var(--text-primary);
+}
+
+/* ---- Download Modal ---- */
+
+.vw-modal-backdrop {
+	position: fixed;
+	inset: 0;
+	background: rgba(0, 0, 0, 0.6);
+	backdrop-filter: blur(8px);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 10000;
+	animation: vw-backdrop-in 100ms ease-out;
+}
+
+@keyframes vw-backdrop-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+.vw-modal {
+	background: var(--bg-surface-elevated);
+	border-radius: var(--radius-lg);
+	box-shadow: var(--shadow-modal);
+	max-width: 720px;
+	width: 90vw;
+	padding: 32px;
+	animation: vw-modal-in 200ms var(--ease-out);
+}
+
+@keyframes vw-modal-in {
+	from {
+		opacity: 0;
+		transform: translateY(8px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.vw-modal-backdrop {
+		animation: none;
+	}
+	.vw-modal {
+		animation: none;
+	}
+}
+
+.vw-modal__header {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	margin-bottom: 24px;
+}
+
+.vw-modal__header-text {
+	min-width: 0;
+}
+
+.vw-modal__title {
+	font-size: 20px;
+	font-weight: 600;
+	color: var(--text-primary);
+	line-height: 1.3;
+	margin: 0;
+}
+
+.vw-modal__slug {
+	font-family: var(--font-mono);
+	font-size: 13px;
+	color: var(--text-secondary);
+	margin-top: 2px;
+}
+
+.vw-modal__close {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	border: none;
+	border-radius: var(--radius-sm);
+	background: transparent;
+	color: var(--text-secondary);
+	cursor: pointer;
+	flex-shrink: 0;
+	transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
+}
+
+.vw-modal__close:hover {
+	background: var(--bg-surface-hover);
+	color: var(--text-primary);
+}
+
+.vw-modal__columns {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 16px;
+}
+
+.vw-modal__column {
+	background: var(--bg-surface);
+	border: 1px solid var(--border-subtle);
+	border-radius: var(--radius-md);
+	padding: 20px;
+}
+
+.vw-modal__column-label {
+	font-size: 11px;
+	font-weight: 500;
+	letter-spacing: 0.05em;
+	text-transform: uppercase;
+	color: var(--text-secondary);
+	margin-bottom: 12px;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.vw-modal__badge {
+	font-size: 10px;
+	font-weight: 500;
+	letter-spacing: 0.02em;
+	text-transform: uppercase;
+	color: var(--accent);
+	background: var(--accent-dim);
+	border-radius: var(--radius-sm);
+	padding: 2px 6px;
+}
+
+.vw-modal__desc {
+	font-size: 13px;
+	color: var(--text-secondary);
+	line-height: 1.5;
+	margin: 0 0 16px 0;
+}
+
+.vw-modal__code {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	background: var(--bg-surface-elevated);
+	border: 1px solid var(--border-subtle);
+	border-radius: var(--radius-sm);
+	padding: 12px;
+	margin-bottom: 12px;
+}
+
+.vw-modal__code code {
+	font-family: var(--font-mono);
+	font-size: 12px;
+	color: var(--text-primary);
+	flex: 1;
+	word-break: break-all;
+}
+
+.vw-modal__note {
+	font-size: 12px;
+	color: var(--text-tertiary);
+	line-height: 1.5;
+	margin: 0;
+}
+
+.vw-modal__tips {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	font-size: 13px;
+	color: var(--text-secondary);
+	line-height: 1.8;
+}
+
+.vw-modal__tips li::before {
+	content: "•";
+	margin-right: 8px;
+	color: var(--text-tertiary);
+}
+
+/* ---- Hide-HUD Tab ---- */
+
+.vw-hide-hud-tab {
+	position: absolute;
+	top: -8px;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 28px;
+	height: 8px;
+	border: none;
+	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+	background: var(--bg-surface-hover);
+	color: var(--text-tertiary);
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0;
+	z-index: 10;
+	transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
+}
+
+.vw-hide-hud-tab:hover {
+	background: var(--border-strong);
+	color: var(--text-secondary);
+}
+
+.vw-hide-hud-tab svg {
+	width: 10px;
+	height: 10px;
+}
+
+/* Focus styles for modal and tab */
+.vw-modal__close:focus-visible,
+.vw-hide-hud-tab:focus-visible {
+	outline: 2px solid var(--accent);
+	outline-offset: 2px;
+}
+
+/* ---- Responsive ---- */
+
+@media (max-width: 640px) {
+	.vw-top-bar {
+		padding: 0 16px;
+	}
+
+	.vw-top-bar__project {
+		display: none;
+	}
+
+	.vw-homepage__content {
+		padding: 24px 16px;
+	}
+
+	.vw-homepage__grid {
+		grid-template-columns: 1fr;
+	}
+
+	.vw-modal__columns {
+		grid-template-columns: 1fr;
+	}
+
+	.vw-modal {
+		padding: 24px;
+	}
+}

package/src/cli/entry/styles/tokens.css

@@ -0,0 +1,44 @@
+/**
+ * Design tokens for the Videowright dev UI.
+ * Dark mode only. See ui_design.md for rationale.
+ */
+
+:root {
+	/* Backgrounds */
+	--bg-base: #0a0a0b;
+	--bg-surface: #131316;
+	--bg-surface-hover: #1a1a1f;
+	--bg-surface-elevated: #1d1d22;
+
+	/* Borders */
+	--border-subtle: #26262d;
+	--border-strong: #3a3a44;
+
+	/* Text */
+	--text-primary: #f5f5f7;
+	--text-secondary: #a0a0a8;
+	--text-tertiary: #6e6e78;
+
+	/* Accent */
+	--accent: #a78bfa;
+	--accent-dim: #7c3aed33;
+
+	/* Semantic */
+	--success: #34d399;
+	--error: #f87171;
+
+	/* Radius */
+	--radius-sm: 6px;
+	--radius-md: 10px;
+	--radius-lg: 14px;
+
+	/* Shadow */
+	--shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--border-subtle);
+
+	/* Typography */
+	--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+
+	/* Motion */
+	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+	--duration: 150ms;
+}

package/src/cli/entry/video.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>Videowright Dev</title>
+	<style>
+		/* Inline critical styles for HUD relocation (used by video_view.ts) */
+		#dev-hud-container .vw-hud { position: relative; inset: auto; }
+		#dev-hud-container .vw-hud-inner { position: relative; }
+		#dev-hud-container .vw-hud-ended {
+			position: relative; top: auto; right: auto;
+			display: inline-block; margin-bottom: 4px;
+		}
+		#dev-hud-container .vw-hud-error-overlay { position: relative; inset: auto; }
+	</style>
+</head>
+<body>
+	<div id="app"></div>
+	<script type="module" src="/entry_video.ts"></script>
+</body>
+</html>

package/src/cli/entry/views/homepage.ts

@@ -0,0 +1,66 @@
+/**
+ * Homepage view.
+ * Shows a grid of video cards, or the empty-state panel when no videos exist.
+ */
+
+import type { ProjectInfo } from "../../../types.js";
+import { renderDownloadModal } from "../components/download_modal.js";
+import { renderEmptyState } from "../components/empty_state.js";
+import { renderTopBar } from "../components/top_bar.js";
+import { renderVideoCard } from "../components/video_card.js";
+
+export function renderHomepage(projectInfo: ProjectInfo): HTMLElement {
+	const container = document.createElement("main");
+	container.className = "vw-homepage";
+
+	// Top bar
+	const topBar = renderTopBar({ projectName: projectInfo.projectName });
+	container.appendChild(topBar);
+
+	// Empty state
+	if (projectInfo.videos.length === 0) {
+		container.appendChild(renderEmptyState());
+		return container;
+	}
+
+	// Content area
+	const content = document.createElement("div");
+	content.className = "vw-homepage__content";
+
+	// Section heading
+	const heading = document.createElement("h1");
+	heading.className = "vw-homepage__heading";
+	heading.textContent = "Videos";
+	content.appendChild(heading);
+
+	const subtitle = document.createElement("p");
+	subtitle.className = "vw-homepage__subtitle";
+	const count = projectInfo.videos.length;
+	subtitle.textContent = `${count} ${count === 1 ? "video" : "videos"} in this project`;
+	content.appendChild(subtitle);
+
+	// Card grid
+	const grid = document.createElement("div");
+	grid.className = "vw-homepage__grid";
+
+	for (const video of projectInfo.videos) {
+		const card = renderVideoCard({
+			slug: video.slug,
+			title: video.title,
+			style: video.style,
+			onDownload: () => {
+				renderDownloadModal({
+					slug: video.slug,
+					title: video.title,
+					onClose: () => {},
+				});
+			},
+		});
+		grid.appendChild(card);
+	}
+
+	content.appendChild(grid);
+	container.appendChild(content);
+
+	return container;
+}