eprec 1.3.0 → 1.5.0

package/app/components/style-system-sample.tsx

@@ -0,0 +1,197 @@
+import type { Handle } from 'remix/component'
+import {
+	colors,
+	mq,
+	radius,
+	responsive,
+	shadows,
+	spacing,
+	transitions,
+	typography,
+} from '../styles/tokens.ts'
+
+const sectionStyle = {
+	display: 'flex',
+	flexDirection: 'column',
+	gap: spacing.lg,
+	marginTop: responsive.spacingSection,
+}
+
+const headerStyle = {
+	display: 'flex',
+	alignItems: 'center',
+	justifyContent: 'space-between',
+	gap: spacing.md,
+	flexWrap: 'wrap',
+}
+
+const gridStyle = {
+	display: 'grid',
+	gap: spacing.lg,
+	gridTemplateColumns: `repeat(auto-fit, minmax(${responsive.cardMinWidth}, 1fr))`,
+	[mq.mobile]: {
+		gridTemplateColumns: '1fr',
+	},
+}
+
+const cardStyle = {
+	padding: spacing.xl,
+	backgroundColor: colors.surface,
+	borderRadius: radius.lg,
+	border: `1px solid ${colors.border}`,
+	boxShadow: shadows.sm,
+	display: 'flex',
+	flexDirection: 'column',
+	gap: spacing.md,
+	transition: `box-shadow ${transitions.fast}, transform ${transitions.fast}`,
+	'&:hover': {
+		boxShadow: shadows.md,
+		transform: 'translateY(-1px)',
+	},
+	[mq.mobile]: {
+		padding: spacing.lg,
+	},
+}
+
+const primaryButtonStyle = {
+	display: 'inline-flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+	gap: spacing.sm,
+	padding: `${spacing.sm} ${spacing.lg}`,
+	borderRadius: radius.md,
+	border: `1px solid ${colors.primaryActive}`,
+	backgroundColor: colors.primary,
+	color: colors.onPrimary,
+	fontSize: typography.fontSize.base,
+	fontWeight: typography.fontWeight.semibold,
+	cursor: 'pointer',
+	transition: `background-color ${transitions.fast}, box-shadow ${transitions.fast}, transform ${transitions.fast}`,
+	'&:hover': {
+		backgroundColor: colors.primaryHover,
+		boxShadow: shadows.sm,
+	},
+	'&:active': {
+		backgroundColor: colors.primaryActive,
+		transform: 'translateY(1px)',
+	},
+}
+
+const pillStyle = {
+	padding: `${spacing.xs} ${spacing.sm}`,
+	borderRadius: radius.pill,
+	backgroundColor: colors.infoSurface,
+	color: colors.infoText,
+	fontSize: typography.fontSize.xs,
+	fontWeight: typography.fontWeight.semibold,
+}
+
+const swatchStyle = (color: string) => ({
+	width: spacing.sm,
+	height: spacing.sm,
+	borderRadius: radius.xl,
+	backgroundColor: color,
+	boxShadow: `0 0 0 1px ${colors.border}`,
+})
+
+export function StyleSystemSample(handle: Handle) {
+	return () => (
+		<section css={sectionStyle}>
+			<header css={headerStyle}>
+				<div>
+					<h2
+						css={{
+							margin: 0,
+							fontSize: typography.fontSize.xl,
+							fontWeight: typography.fontWeight.semibold,
+							color: colors.text,
+						}}
+					>
+						Design tokens
+					</h2>
+					<p
+						css={{
+							margin: 0,
+							color: colors.textMuted,
+							fontSize: typography.fontSize.base,
+							lineHeight: 1.6,
+						}}
+					>
+						Shared CSS variables and TypeScript helpers for consistent theming.
+					</p>
+				</div>
+				<span css={pillStyle}>Auto dark mode</span>
+			</header>
+
+			<div css={gridStyle}>
+				<div css={cardStyle}>
+					<h3
+						css={{
+							margin: 0,
+							fontSize: typography.fontSize.lg,
+							fontWeight: typography.fontWeight.semibold,
+							color: colors.text,
+						}}
+					>
+						Surface card
+					</h3>
+					<p
+						css={{
+							margin: 0,
+							color: colors.textMuted,
+							fontSize: typography.fontSize.base,
+							lineHeight: 1.5,
+						}}
+					>
+						Spacing, radius, and shadows come from tokens with responsive
+						overrides.
+					</p>
+					<button type="button" css={primaryButtonStyle}>
+						Primary action
+					</button>
+				</div>
+
+				<div css={cardStyle}>
+					<h3
+						css={{
+							margin: 0,
+							fontSize: typography.fontSize.lg,
+							fontWeight: typography.fontWeight.semibold,
+							color: colors.text,
+						}}
+					>
+						Semantic palette
+					</h3>
+					<p
+						css={{
+							margin: 0,
+							color: colors.textMuted,
+							fontSize: typography.fontSize.base,
+							lineHeight: 1.5,
+						}}
+					>
+						Use semantic names like primary, surface, and text instead of hex
+						values.
+					</p>
+					<div
+						css={{
+							display: 'flex',
+							gap: spacing.sm,
+							alignItems: 'center',
+							flexWrap: 'wrap',
+							color: colors.textSecondary,
+							fontSize: typography.fontSize.sm,
+						}}
+					>
+						<span css={swatchStyle(colors.primary)} />
+						<span css={swatchStyle(colors.infoSurface)} />
+						<span css={swatchStyle(colors.successSurface)} />
+						<span css={swatchStyle(colors.warningSurface)} />
+						<span css={swatchStyle(colors.dangerSurface)} />
+						<span>Primary, info, success, warning, danger</span>
+					</div>
+				</div>
+			</div>
+		</section>
+	)
+}

package/app/styles/tokens.ts

@@ -0,0 +1,99 @@
+export const colors = {
+	primary: 'var(--color-primary)',
+	primaryHover: 'var(--color-primary-hover)',
+	primaryActive: 'var(--color-primary-active)',
+	onPrimary: 'var(--color-on-primary)',
+	background: 'var(--color-background)',
+	surface: 'var(--color-surface)',
+	surfaceMuted: 'var(--color-surface-muted)',
+	surfaceInverse: 'var(--color-surface-inverse)',
+	text: 'var(--color-text)',
+	textMuted: 'var(--color-text-muted)',
+	textSubtle: 'var(--color-text-subtle)',
+	textSecondary: 'var(--color-text-secondary)',
+	textFaint: 'var(--color-text-faint)',
+	textInverse: 'var(--color-text-inverse)',
+	border: 'var(--color-border)',
+	borderStrong: 'var(--color-border-strong)',
+	borderAccent: 'var(--color-border-accent)',
+	infoSurface: 'var(--color-info-surface)',
+	infoText: 'var(--color-info-text)',
+	successSurface: 'var(--color-success-surface)',
+	successText: 'var(--color-success-text)',
+	warningSurface: 'var(--color-warning-surface)',
+	warningText: 'var(--color-warning-text)',
+	warningBorder: 'var(--color-warning-border)',
+	dangerSurface: 'var(--color-danger-surface)',
+	dangerText: 'var(--color-danger-text)',
+	dangerBorder: 'var(--color-danger-border)',
+	dangerBorderStrong: 'var(--color-danger-border-strong)',
+	primarySoft: 'color-mix(in srgb, var(--color-primary) 12%, transparent)',
+	primaryMuted: 'color-mix(in srgb, var(--color-primary) 24%, transparent)',
+	borderSubtle: 'color-mix(in srgb, var(--color-border) 60%, transparent)',
+} as const
+
+export const typography = {
+	fontFamily: 'var(--font-family)',
+	fontSize: {
+		xs: 'var(--font-size-xs)',
+		sm: 'var(--font-size-sm)',
+		base: 'var(--font-size-base)',
+		lg: 'var(--font-size-lg)',
+		xl: 'var(--font-size-xl)',
+		'2xl': 'var(--font-size-2xl)',
+	},
+	fontWeight: {
+		normal: 'var(--font-weight-normal)',
+		medium: 'var(--font-weight-medium)',
+		semibold: 'var(--font-weight-semibold)',
+		bold: 'var(--font-weight-bold)',
+	},
+} as const
+
+export const spacing = {
+	xs: 'var(--spacing-xs)',
+	sm: 'var(--spacing-sm)',
+	md: 'var(--spacing-md)',
+	lg: 'var(--spacing-lg)',
+	xl: 'var(--spacing-xl)',
+	'2xl': 'var(--spacing-2xl)',
+	'3xl': 'var(--spacing-3xl)',
+	'4xl': 'var(--spacing-4xl)',
+	'5xl': 'var(--spacing-5xl)',
+} as const
+
+export const radius = {
+	sm: 'var(--radius-sm)',
+	md: 'var(--radius-md)',
+	lg: 'var(--radius-lg)',
+	xl: 'var(--radius-xl)',
+	pill: 'var(--radius-pill)',
+} as const
+
+export const shadows = {
+	sm: 'var(--shadow-sm)',
+	md: 'var(--shadow-md)',
+	lg: 'var(--shadow-lg)',
+} as const
+
+export const transitions = {
+	fast: 'var(--transition-fast)',
+	normal: 'var(--transition-normal)',
+} as const
+
+export const responsive = {
+	spacingPage: 'var(--spacing-page)',
+	spacingSection: 'var(--spacing-section)',
+	cardMinWidth: 'var(--card-min-width)',
+} as const
+
+export const breakpoints = {
+	mobile: '640px',
+	tablet: '1024px',
+} as const
+
+export const mq = {
+	mobile: `@media (max-width: ${breakpoints.mobile})`,
+	tablet: `@media (max-width: ${breakpoints.tablet})`,
+	desktop: `@media (min-width: ${parseInt(breakpoints.tablet) + 1}px)`,
+} as const

package/app-server.ts

@@ -10,6 +10,140 @@ type AppServerOptions = {
 	port?: number
 }
 
+const LOCALHOST_ALIASES = new Set(['127.0.0.1', '::1', 'localhost'])
+const COLOR_ENABLED =
+	process.env.FORCE_COLOR === '1' ||
+	(Boolean(process.stdout.isTTY) && !process.env.NO_COLOR)
+const SHORTCUT_COLORS: Record<string, string> = {
+	o: '\u001b[36m',
+	r: '\u001b[33m',
+	q: '\u001b[31m',
+	h: '\u001b[35m',
+}
+const ANSI_RESET = '\u001b[0m'
+
+function colorizeShortcut(key: string) {
+	if (!COLOR_ENABLED) {
+		return key
+	}
+	const color = SHORTCUT_COLORS[key.toLowerCase()]
+	return color ? `${color}${key}${ANSI_RESET}` : key
+}
+
+function formatHostnameForDisplay(hostname: string) {
+	if (LOCALHOST_ALIASES.has(hostname)) {
+		return 'localhost'
+	}
+	if (hostname.includes(':')) {
+		return `[${hostname}]`
+	}
+	return hostname
+}
+
+function formatServerUrl(hostname: string, port: number) {
+	return `http://${formatHostnameForDisplay(hostname)}:${port}`
+}
+
+function getShortcutLines(url: string) {
+	return [
+		'[app] shortcuts:',
+		`  ${colorizeShortcut('o')}: open ${url} in browser`,
+		`  ${colorizeShortcut('r')}: restart server`,
+		`  ${colorizeShortcut('q')}: quit server`,
+		`  ${colorizeShortcut('h')}: show shortcuts`,
+	]
+}
+
+function logShortcuts(url: string) {
+	for (const line of getShortcutLines(url)) {
+		console.log(line)
+	}
+}
+
+function openBrowser(url: string) {
+	const platform = process.platform
+	const command =
+		platform === 'darwin'
+			? ['open', url]
+			: platform === 'win32'
+				? ['cmd', '/c', 'start', '', url]
+				: ['xdg-open', url]
+	try {
+		const subprocess = Bun.spawn({
+			cmd: command,
+			stdin: 'ignore',
+			stdout: 'ignore',
+			stderr: 'ignore',
+		})
+		void subprocess.exited.catch((error) => {
+			console.warn(
+				`[app] failed to open browser: ${
+					error instanceof Error ? error.message : String(error)
+				}`,
+			)
+		})
+	} catch (error) {
+		console.warn(
+			`[app] failed to open browser: ${
+				error instanceof Error ? error.message : String(error)
+			}`,
+		)
+	}
+}
+
+function setupShortcutHandling(options: {
+	getUrl: () => string
+	restart: () => void
+	stop: () => void
+}) {
+	if (!process.stdin.isTTY || typeof process.stdin.setRawMode !== 'function') {
+		return () => {}
+	}
+
+	const stdin = process.stdin
+	const handleKey = (key: string) => {
+		if (key === '\u0003') {
+			options.stop()
+			return
+		}
+		const lower = key.toLowerCase()
+		if (lower === 'o') {
+			openBrowser(options.getUrl())
+			return
+		}
+		if (lower === 'r') {
+			options.restart()
+			return
+		}
+		if (lower === 'q') {
+			options.stop()
+			return
+		}
+		if (lower === 'h' || lower === '?') {
+			logShortcuts(options.getUrl())
+		}
+	}
+
+	const onData = (chunk: Buffer | string) => {
+		const input = chunk.toString()
+		for (const key of input) {
+			handleKey(key)
+		}
+	}
+
+	stdin.setRawMode(true)
+	stdin.resume()
+	stdin.on('data', onData)
+
+	return () => {
+		stdin.off('data', onData)
+		if (stdin.isTTY && typeof stdin.setRawMode === 'function') {
+			stdin.setRawMode(false)
+		}
+		stdin.pause()
+	}
+}
+
 function startServer(port: number, hostname: string) {
 	const router = createAppRouter(import.meta.dirname)
 	return Bun.serve({
@@ -46,15 +180,50 @@ export async function startAppServer(options: AppServerOptions = {}) {
 	const host = options.host ?? env.HOST
 	const desiredPort = options.port ?? env.PORT
 	const port = await getServerPort(env.NODE_ENV, desiredPort)
-	const server = startServer(port, host)
-	const hostname = server.hostname.includes(':')
-		? `[${server.hostname}]`
-		: server.hostname
-	const url = `http://${hostname}:${server.port}`
+	let server = startServer(port, host)
+	const getUrl = () => formatServerUrl(server.hostname, server.port)
+	let cleanupInput = () => {}
+	let isRestarting = false
+	const stopServer = () => {
+		console.log('[app] stopping server...')
+		cleanupInput()
+		server.stop()
+		process.exit(0)
+	}
+	const restartServer = async () => {
+		if (isRestarting) {
+			return
+		}
+		isRestarting = true
+		try {
+			console.log('[app] restarting server...')
+			await server.stop()
+			server = startServer(port, host)
+			console.log(`[app] running at ${getUrl()}`)
+		} finally {
+			isRestarting = false
+		}
+	}
+	cleanupInput = setupShortcutHandling({
+		getUrl,
+		restart: restartServer,
+		stop: stopServer,
+	})
+	const url = getUrl()
 
 	console.log(`[app] running at ${url}`)
+	logShortcuts(url)
 
-	return { server, url }
+	return {
+		get server() {
+			return server
+		},
+		url,
+		stop: () => {
+			cleanupInput()
+			server.stop()
+		},
+	}
 }
 
 if (import.meta.main) {

package/cli.ts

@@ -164,14 +164,15 @@ async function main(rawArgs = hideBin(process.argv)) {
 						})
 						resultText = result.text
 					},
-					{ successText: 'Transcription complete', enabled: context.interactive },
+					{
+						successText: 'Transcription complete',
+						enabled: context.interactive,
+					},
 				)
 				console.log(
 					`Transcript written to ${transcribeArgs.outputBasePath}.txt`,
 				)
-				console.log(
-					`Segments written to ${transcribeArgs.outputBasePath}.json`,
-				)
+				console.log(`Segments written to ${transcribeArgs.outputBasePath}.json`)
 				console.log(resultText)
 			},
 		)
@@ -208,7 +209,10 @@ async function main(rawArgs = hideBin(process.argv)) {
 							end,
 						})
 					},
-					{ successText: 'Speech detection complete', enabled: context.interactive },
+					{
+						successText: 'Speech detection complete',
+						enabled: context.interactive,
+					},
 				)
 				console.log(JSON.stringify(segments, null, 2))
 			},
@@ -230,9 +234,7 @@ function createCliUxContext(): CliUxContext {
 	return { interactive, prompter, pathPicker }
 }
 
-async function promptForCommand(
-	prompter: Prompter,
-): Promise<string[] | null> {
+async function promptForCommand(prompter: Prompter): Promise<string[] | null> {
 	const selection = await prompter.select('Choose a command', [
 		{
 			name: 'Process chapters into separate files',
@@ -283,7 +285,12 @@ async function resolveProcessArgs(argv: Arguments, context: CliUxContext) {
 	}
 
 	let outputDir = resolveOptionalString(argv['output-dir'])
-	if (!outputDir && context.interactive && context.prompter && context.pathPicker) {
+	if (
+		!outputDir &&
+		context.interactive &&
+		context.prompter &&
+		context.pathPicker
+	) {
 		const chooseOutput = await context.prompter.confirm(
 			'Choose a custom output directory?',
 			{ defaultValue: false },

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "eprec",
   "type": "module",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/epicweb-dev/eprec"
   },
   "scripts": {
-    "app:start": "bun ./app-server.ts",
+    "app:start": "bun --watch ./cli.ts app start",
     "format": "prettier --write .",
     "test": "bun test process-course utils.test.ts",
     "test:e2e": "bun test ./e2e",

package/process-course/edits/cli.ts

@@ -40,7 +40,10 @@ type CliUxOptions = {
 	pathPicker?: PathPicker
 }
 
-export function buildCombinedOutputPath(video1Path: string, video2Path: string) {
+export function buildCombinedOutputPath(
+	video1Path: string,
+	video2Path: string,
+) {
 	const dir = path.dirname(video1Path)
 	const ext = path.extname(video1Path) || path.extname(video2Path) || '.mp4'
 	const name1 = path.parse(video1Path).name
@@ -81,8 +84,7 @@ export async function resolveEditVideoArgs(
 		})
 	}
 	const defaultOutputPath = buildEditedOutputPath(input)
-	const outputPath =
-		resolveOptionalString(argv.output) ?? defaultOutputPath
+	const outputPath = resolveOptionalString(argv.output) ?? defaultOutputPath
 	const paddingMs = resolvePaddingMs(argv['padding-ms'])
 
 	return {
@@ -194,7 +196,9 @@ export function createEditVideoHandler(options: CliUxOptions): CommandHandler {
 	}
 }
 
-export function createCombineVideosHandler(options: CliUxOptions): CommandHandler {
+export function createCombineVideosHandler(
+	options: CliUxOptions,
+): CommandHandler {
 	return async (argv) => {
 		const args = await resolveCombineVideosArgs(argv, options)
 		let outputPath = ''