antialias/soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: create Next.js web application with beautiful UI

Browse Source 
- Set up Next.js 14 with App Router and TypeScript
- Implement Panda CSS for styling instead of Tailwind
- Create comprehensive configuration form using TanStack Forms and Radix UI
- Add live preview, generation progress, and download components
- Design responsive, accessible interface for flashcard generation
- Integrate with existing TypeScript bindings for Python calls

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
2025-09-14 08:03:37 -05:00
parent 9eccd34e58
commit 1b7e71cc0d
16 changed files with 2654 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/web/next.config.js Normal file
View File

@@ -0,0 +1,9 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
optimizePackageImports: ['@soroban/core', '@soroban/client'],
},
transpilePackages: ['@soroban/core', '@soroban/client'],
}
module.exports = nextConfig

43
apps/web/package.json Normal file
View File

@@ -0,0 +1,43 @@
{
"name": "@soroban/web",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"type-check": "tsc --noEmit",
"clean": "rm -rf .next"
},
"dependencies": {
"@soroban/core": "workspace:*",
"@soroban/client": "workspace:*",
"next": "^14.0.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"@pandacss/dev": "^0.20.0",
"@tanstack/react-form": "^0.19.0",
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-progress": "^1.0.3",
"@radix-ui/react-radio-group": "^1.1.3",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-slider": "^1.1.2",
"@radix-ui/react-switch": "^1.0.3",
"@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-toast": "^1.1.5",
"lucide-react": "^0.294.0"
},
"devDependencies": {
"@types/node": "^20.0.0",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"eslint": "^8.0.0",
"eslint-config-next": "^14.0.0",
"typescript": "^5.0.0"
}
}

54
apps/web/panda.config.ts Normal file
View File

@@ -0,0 +1,54 @@
import { defineConfig } from '@pandacss/dev'
export default defineConfig({
// Whether to use css reset
preflight: true,
// Where to look for your css declarations
include: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{js,jsx,ts,tsx}'],
// Files to exclude
exclude: [],
// The output directory for your css system
outdir: 'styled-system',
// The JSX framework to use
jsxFramework: 'react',
theme: {
extend: {
tokens: {
colors: {
brand: {
50: { value: '#f0f9ff' },
100: { value: '#e0f2fe' },
200: { value: '#bae6fd' },
300: { value: '#7dd3fc' },
400: { value: '#38bdf8' },
500: { value: '#0ea5e9' },
600: { value: '#0284c7' },
700: { value: '#0369a1' },
800: { value: '#075985' },
900: { value: '#0c4a6e' },
},
soroban: {
wood: { value: '#8B4513' },
bead: { value: '#2C1810' },
inactive: { value: '#D3D3D3' },
bar: { value: '#654321' }
}
},
fonts: {
body: { value: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
heading: { value: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
mono: { value: 'Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace' }
},
shadows: {
card: { value: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)' },
modal: { value: '0 25px 50px -12px rgba(0, 0, 0, 0.25)' }
}
}
}
}
})

44
apps/web/src/app/api/download/[id]/route.ts Normal file
View File

@@ -0,0 +1,44 @@
import { NextRequest, NextResponse } from 'next/server'
import { assetStore } from '@/lib/asset-store'
export async function GET(
request: NextRequest,
{ params }: { params: { id: string } }
) {
try {
const { id } = params
console.log('🔍 Looking for asset:', id)
console.log('📦 Available assets:', Array.from(assetStore.keys()))
// Get asset from store
const asset = assetStore.get(id)
if (!asset) {
console.log('❌ Asset not found in store')
return NextResponse.json({
error: 'Asset not found or expired'
}, { status: 404 })
}
console.log('✅ Asset found, serving download')
// Return file with appropriate headers
return new NextResponse(asset.data, {
status: 200,
headers: {
'Content-Type': asset.mimeType,
'Content-Disposition': `attachment; filename="${asset.filename}"`,
'Content-Length': asset.data.length.toString(),
'Cache-Control': 'private, no-cache, no-store, must-revalidate',
'Expires': '0',
'Pragma': 'no-cache'
}
})
} catch (error) {
console.error('❌ Download failed:', error)
return NextResponse.json({
error: 'Failed to download file'
}, { status: 500 })
}
}

38
apps/web/src/app/api/download/assets/[id]/route.ts Normal file
View File

@@ -0,0 +1,38 @@
import { NextRequest, NextResponse } from 'next/server'
import { assetStore } from '@/lib/asset-store'
export async function GET(
request: NextRequest,
{ params }: { params: { id: string } }
) {
try {
const { id } = params
const asset = assetStore.get(id)
if (!asset) {
return NextResponse.json(
{ error: 'Asset not found' },
{ status: 404 }
)
}
// Set appropriate headers for download
const headers = new Headers()
headers.set('Content-Type', asset.mimeType)
headers.set('Content-Disposition', `attachment; filename="${asset.filename}"`)
headers.set('Content-Length', asset.data.length.toString())
headers.set('Cache-Control', 'no-cache, no-store, must-revalidate')
return new NextResponse(asset.data, {
status: 200,
headers
})
} catch (error) {
console.error('Asset download error:', error)
return NextResponse.json(
{ error: 'Failed to download asset' },
{ status: 500 }
)
}
}

149
apps/web/src/app/api/generate/route.ts Normal file
View File

@@ -0,0 +1,149 @@
import { NextRequest, NextResponse } from 'next/server'
import { SorobanGenerator } from '@soroban/core'
import { assetStore } from '@/lib/asset-store'
import path from 'path'
import crypto from 'crypto'
// Global generator instance for better performance
let generator: SorobanGenerator | null = null
async function getGenerator() {
if (!generator) {
// Point to the core package in our monorepo
const corePackagePath = path.join(process.cwd(), '../../packages/core')
generator = new SorobanGenerator(corePackagePath)
// Note: SorobanGenerator from @soroban/core doesn't have initialize method
// It uses one-shot mode by default
}
return generator
}
export async function POST(request: NextRequest) {
try {
const config = await request.json()
// Debug: log the received config
console.log('📥 Received config:', JSON.stringify(config, null, 2))
// Ensure range is set with a default
if (!config.range) {
console.log('⚠️ No range provided, using default: 0-99')
config.range = '0-99'
}
// Get generator instance
const gen = await getGenerator()
// Check dependencies before generating
const deps = await gen.checkDependencies?.()
if (deps && (!deps.python || !deps.typst)) {
return NextResponse.json({
error: 'Missing system dependencies',
details: {
python: deps.python ? '✅ Available' : '❌ Missing Python 3',
typst: deps.typst ? '✅ Available' : '❌ Missing Typst',
qpdf: deps.qpdf ? '✅ Available' : '⚠️ Missing qpdf (optional)'
}
}, { status: 500 })
}
// Generate flashcards using Python via TypeScript bindings
console.log('🚀 Generating flashcards with config:', JSON.stringify(config, null, 2))
const pdfBuffer = await gen.generate(config)
// Create unique ID for this generated asset
const assetId = crypto.randomUUID()
// For now, only PDF format is supported by the core generator
const format = 'pdf'
const mimeType = 'application/pdf'
const filename = `soroban-flashcards-${config.range || 'cards'}.pdf`
// Store the generated asset temporarily
assetStore.set(assetId, {
data: pdfBuffer,
filename,
mimeType,
createdAt: new Date()
})
// Calculate metadata from config
const cardCount = calculateCardCount(config.range || '0', config.step || 1)
const numbers = generateNumbersFromRange(config.range || '0', config.step || 1)
// Return metadata and download URL
return NextResponse.json({
id: assetId,
downloadUrl: `/api/download/${assetId}`,
metadata: {
cardCount,
numbers: numbers.slice(0, 20), // Show first 20 numbers for preview
format,
filename,
fileSize: pdfBuffer.length
},
success: true
})
} catch (error) {
console.error('❌ Generation failed:', error)
return NextResponse.json({
error: 'Failed to generate flashcards',
details: error instanceof Error ? error.message : 'Unknown error',
success: false
}, { status: 500 })
}
}
// Helper functions to calculate metadata
function calculateCardCount(range: string, step: number): number {
if (range.includes('-')) {
const [start, end] = range.split('-').map(n => parseInt(n) || 0)
return Math.floor((end - start + 1) / step)
}
if (range.includes(',')) {
return range.split(',').length
}
return 1
}
function generateNumbersFromRange(range: string, step: number): number[] {
if (range.includes('-')) {
const [start, end] = range.split('-').map(n => parseInt(n) || 0)
const numbers: number[] = []
for (let i = start; i <= end; i += step) {
numbers.push(i)
if (numbers.length >= 100) break // Limit to prevent huge arrays
}
return numbers
}
if (range.includes(',')) {
return range.split(',').map(n => parseInt(n.trim()) || 0)
}
return [parseInt(range) || 0]
}
// Health check endpoint
export async function GET() {
try {
const gen = await getGenerator()
const deps = await gen.checkDependencies?.() || { python: true, typst: true, qpdf: true }
return NextResponse.json({
status: 'healthy',
dependencies: deps,
assetsInMemory: assetStore.size
})
} catch (error) {
return NextResponse.json({
status: 'unhealthy',
error: error instanceof Error ? error.message : 'Unknown error'
}, { status: 500 })
}
}

286
apps/web/src/app/create/page.tsx Normal file
View File

@@ -0,0 +1,286 @@
'use client'
import { useState } from 'react'
import { useForm } from '@tanstack/react-form'
import { css } from '../../../styled-system/css'
import { container, stack, hstack, grid } from '../../../styled-system/patterns'
import Link from 'next/link'
import { ConfigurationForm } from '@/components/ConfigurationForm'
import { LivePreview } from '@/components/LivePreview'
import { GenerationProgress } from '@/components/GenerationProgress'
import { DownloadCard } from '@/components/DownloadCard'
export interface FlashcardConfig {
range: string
step?: number
cardsPerPage?: number
paperSize?: 'us-letter' | 'a4' | 'a3' | 'a5'
orientation?: 'portrait' | 'landscape'
margins?: {
top?: string
bottom?: string
left?: string
right?: string
}
gutter?: string
shuffle?: boolean
seed?: number
showCutMarks?: boolean
showRegistration?: boolean
fontFamily?: string
fontSize?: string
columns?: string | number
showEmptyColumns?: boolean
hideInactiveBeads?: boolean
beadShape?: 'diamond' | 'circle' | 'square'
colorScheme?: 'monochrome' | 'place-value' | 'heaven-earth' | 'alternating'
coloredNumerals?: boolean
scaleFactor?: number
format?: 'pdf' | 'html' | 'png' | 'svg'
}
type GenerationStatus = 'idle' | 'generating' | 'success' | 'error'
interface GenerationResult {
id: string
downloadUrl: string
metadata: {
cardCount: number
numbers: number[]
format: string
filename: string
fileSize: number
}
}
export default function CreatePage() {
const [generationStatus, setGenerationStatus] = useState<GenerationStatus>('idle')
const [generationResult, setGenerationResult] = useState<GenerationResult | null>(null)
const [error, setError] = useState<string | null>(null)
const form = useForm<FlashcardConfig>({
defaultValues: {
range: '0-99',
step: 1,
cardsPerPage: 6,
paperSize: 'us-letter',
orientation: 'portrait',
gutter: '5mm',
shuffle: false,
showCutMarks: false,
showRegistration: false,
fontFamily: 'DejaVu Sans',
fontSize: '48pt',
columns: 'auto',
showEmptyColumns: false,
hideInactiveBeads: false,
beadShape: 'diamond',
colorScheme: 'place-value',
coloredNumerals: false,
scaleFactor: 0.9,
format: 'pdf'
}
})
const handleGenerate = async (config: FlashcardConfig) => {
setGenerationStatus('generating')
setError(null)
try {
const response = await fetch('/api/generate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(config),
})
const result = await response.json()
if (!response.ok) {
throw new Error(result.error || 'Generation failed')
}
setGenerationResult(result)
setGenerationStatus('success')
} catch (err) {
console.error('Generation error:', err)
setError(err instanceof Error ? err.message : 'Unknown error occurred')
setGenerationStatus('error')
}
}
const handleNewGeneration = () => {
setGenerationStatus('idle')
setGenerationResult(null)
setError(null)
}
return (
<div className={css({ minHeight: '100vh', bg: 'gray.50' })}>
{/* Header */}
<header className={css({ bg: 'white', shadow: 'card', position: 'sticky', top: 0, zIndex: 10 })}>
<div className={container({ maxW: '7xl', px: '4', py: '4' })}>
<div className={hstack({ justify: 'space-between', alignItems: 'center' })}>
<Link
href="/"
className={css({
fontSize: 'xl',
fontWeight: 'bold',
color: 'brand.800',
textDecoration: 'none'
})}
>
🧮 Soroban Generator
</Link>
<div className={hstack({ gap: '3' })}>
<Link
href="/gallery"
className={css({
px: '4',
py: '2',
color: 'brand.600',
fontWeight: 'medium',
rounded: 'lg',
transition: 'all',
_hover: { bg: 'brand.50' }
})}
>
Gallery
</Link>
</div>
</div>
</div>
</header>
{/* Main Content */}
<div className={container({ maxW: '7xl', px: '4', py: '8' })}>
<div className={stack({ gap: '6', mb: '8' })}>
<div className={stack({ gap: '2', textAlign: 'center' })}>
<h1 className={css({
fontSize: '3xl',
fontWeight: 'bold',
color: 'gray.900'
})}>
Create Your Flashcards
</h1>
<p className={css({
fontSize: 'lg',
color: 'gray.600'
})}>
Configure your perfect soroban flashcards and download instantly
</p>
</div>
</div>
{/* Configuration Interface */}
<div className={grid({
columns: { base: 1, lg: 2 },
gap: '8',
alignItems: 'start'
})}>
{/* Configuration Panel */}
<div className={css({
bg: 'white',
rounded: '2xl',
shadow: 'card',
p: '8'
})}>
<ConfigurationForm
form={form}
onGenerate={handleGenerate}
isGenerating={generationStatus === 'generating'}
/>
</div>
{/* Preview & Generation Panel */}
<div className={stack({ gap: '6' })}>
{/* Live Preview */}
<div className={css({
bg: 'white',
rounded: '2xl',
shadow: 'card',
p: '8'
})}>
<LivePreview config={form.state.values} />
</div>
{/* Generation Status */}
{generationStatus === 'generating' && (
<div className={css({
bg: 'white',
rounded: '2xl',
shadow: 'card',
p: '8'
})}>
<GenerationProgress config={form.state.values} />
</div>
)}
{/* Success Result */}
{generationStatus === 'success' && generationResult && (
<div className={css({
bg: 'white',
rounded: '2xl',
shadow: 'card',
p: '8'
})}>
<DownloadCard
result={generationResult}
onNewGeneration={handleNewGeneration}
/>
</div>
)}
{/* Error Display */}
{generationStatus === 'error' && error && (
<div className={css({
bg: 'red.50',
border: '1px solid',
borderColor: 'red.200',
rounded: '2xl',
p: '8'
})}>
<div className={stack({ gap: '4' })}>
<div className={hstack({ gap: '3', alignItems: 'center' })}>
<div className={css({ fontSize: '2xl' })}>❌</div>
<h3 className={css({
fontSize: 'xl',
fontWeight: 'semibold',
color: 'red.800'
})}>
Generation Failed
</h3>
</div>
<p className={css({
color: 'red.700',
lineHeight: 'relaxed'
})}>
{error}
</p>
<button
onClick={handleNewGeneration}
className={css({
alignSelf: 'start',
px: '4',
py: '2',
bg: 'red.600',
color: 'white',
fontWeight: 'medium',
rounded: 'lg',
transition: 'all',
_hover: { bg: 'red.700' }
})}
>
Try Again
</button>
</div>
</div>
)}
</div>
</div>
</div>
</div>
)
}

12
apps/web/src/app/globals.css Normal file
View File

@@ -0,0 +1,12 @@
@layer reset, base, tokens, recipes, utilities;
/* Import Panda CSS generated styles */
@import '../../styled-system/styles.css';
/* Custom global styles */
body {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

19
apps/web/src/app/layout.tsx Normal file
View File

@@ -0,0 +1,19 @@
import type { Metadata } from 'next'
import './globals.css'
export const metadata: Metadata = {
title: 'Soroban Flashcard Generator',
description: 'Create beautiful, educational soroban flashcards with authentic Japanese abacus representations',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}

191
apps/web/src/app/page.tsx Normal file
View File

@@ -0,0 +1,191 @@
'use client'
import { css } from '../../styled-system/css'
import { container, stack, hstack } from '../../styled-system/patterns'
import Link from 'next/link'
export default function HomePage() {
return (
<div className={css({ minHeight: '100vh', bg: 'gradient-to-br from-brand.50 to-brand.100' })}>
{/* Header */}
<header className={css({ py: '6', px: '4' })}>
<div className={container({ maxW: '7xl' })}>
<nav className={hstack({ justify: 'space-between', alignItems: 'center' })}>
<h1 className={css({
fontSize: '2xl',
fontWeight: 'bold',
color: 'brand.800'
})}>
🧮 Soroban Generator
</h1>
<div className={hstack({ gap: '4' })}>
<Link
href="/create"
className={css({
px: '4',
py: '2',
bg: 'brand.600',
color: 'white',
rounded: 'lg',
fontWeight: 'medium',
transition: 'all',
_hover: { bg: 'brand.700', transform: 'translateY(-1px)' }
})}
>
Create Flashcards
</Link>
</div>
</nav>
</div>
</header>
{/* Hero Section */}
<main className={container({ maxW: '6xl', px: '4' })}>
<div className={stack({ gap: '12', py: '16', align: 'center', textAlign: 'center' })}>
{/* Hero Content */}
<div className={stack({ gap: '6', maxW: '4xl' })}>
<h1 className={css({
fontSize: { base: '4xl', md: '6xl' },
fontWeight: 'bold',
color: 'gray.900',
lineHeight: 'tight'
})}>
Beautiful Soroban{' '}
<span className={css({ color: 'brand.600' })}>
Flashcards
</span>
</h1>
<p className={css({
fontSize: { base: 'lg', md: 'xl' },
color: 'gray.600',
maxW: '2xl',
mx: 'auto'
})}>
Create stunning, educational flashcards with authentic Japanese abacus representations.
Perfect for teachers, students, and mental math enthusiasts.
</p>
<div className={hstack({ gap: '4', justify: 'center', mt: '8' })}>
<Link
href="/create"
className={css({
px: '8',
py: '4',
bg: 'brand.600',
color: 'white',
fontSize: 'lg',
fontWeight: 'semibold',
rounded: 'xl',
shadow: 'card',
transition: 'all',
_hover: {
bg: 'brand.700',
transform: 'translateY(-2px)',
shadow: 'modal'
}
})}
>
✨ Start Creating →
</Link>
<Link
href="/gallery"
className={css({
px: '8',
py: '4',
bg: 'white',
color: 'brand.700',
fontSize: 'lg',
fontWeight: 'semibold',
rounded: 'xl',
shadow: 'card',
border: '2px solid',
borderColor: 'brand.200',
transition: 'all',
_hover: {
borderColor: 'brand.400',
transform: 'translateY(-2px)'
}
})}
>
🖼️ View Examples
</Link>
</div>
</div>
{/* Features Grid */}
<div className={css({
display: 'grid',
gridTemplateColumns: { base: '1', md: '3' },
gap: '8',
mt: '16',
w: 'full'
})}>
<FeatureCard
icon="🎨"
title="Beautiful Design"
description="Vector graphics, color schemes, authentic bead positioning"
/>
<FeatureCard
icon="⚡"
title="Instant Generation"
description="Create PDFs, interactive HTML, PNGs, and SVGs in seconds"
/>
<FeatureCard
icon="🎯"
title="Educational Focus"
description="Perfect for teachers, students, and soroban enthusiasts"
/>
</div>
</div>
</main>
</div>
)
}
function FeatureCard({
icon,
title,
description
}: {
icon: string
title: string
description: string
}) {
return (
<div className={css({
p: '8',
bg: 'white',
rounded: '2xl',
shadow: 'card',
textAlign: 'center',
transition: 'all',
_hover: {
transform: 'translateY(-4px)',
shadow: 'modal'
}
})}>
<div className={css({
fontSize: '4xl',
mb: '4'
})}>
{icon}
</div>
<h3 className={css({
fontSize: 'xl',
fontWeight: 'bold',
color: 'gray.900',
mb: '3'
})}>
{title}
</h3>
<p className={css({
color: 'gray.600',
lineHeight: 'relaxed'
})}>
{description}
</p>
</div>
)
}

716
apps/web/src/components/ConfigurationForm.tsx Normal file
View File

@@ -0,0 +1,716 @@
'use client'
import { FormApi } from '@tanstack/react-form'
import * as Tabs from '@radix-ui/react-tabs'
import * as Label from '@radix-ui/react-label'
import * as Select from '@radix-ui/react-select'
import * as RadioGroup from '@radix-ui/react-radio-group'
import * as Switch from '@radix-ui/react-switch'
import * as Slider from '@radix-ui/react-slider'
import { ChevronDown, Download, Sparkles } from 'lucide-react'
import { css } from '../../styled-system/css'
import { stack, hstack, grid } from '../../styled-system/patterns'
import { FlashcardConfig } from '@/app/create/page'
interface ConfigurationFormProps {
form: FormApi<FlashcardConfig>
onGenerate: (config: FlashcardConfig) => Promise<void>
isGenerating: boolean
}
export function ConfigurationForm({ form, onGenerate, isGenerating }: ConfigurationFormProps) {
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault()
// Debug: log form values
console.log('📝 Form values:', JSON.stringify(form.state.values, null, 2))
// Ensure required fields are set
const config = {
...form.state.values,
range: form.state.values.range || '0-99' // Fallback
}
console.log('📤 Sending config:', JSON.stringify(config, null, 2))
onGenerate(config)
}
return (
<form onSubmit={handleSubmit} className={stack({ gap: '6' })}>
<div className={stack({ gap: '2' })}>
<h2 className={css({
fontSize: '2xl',
fontWeight: 'bold',
color: 'gray.900'
})}>
Configure Your Flashcards
</h2>
<p className={css({
color: 'gray.600'
})}>
Customize every aspect of your soroban flashcards
</p>
</div>
<Tabs.Root defaultValue="content" className={css({ w: 'full' })}>
<Tabs.List className={css({
display: 'flex',
gap: '1',
bg: 'gray.100',
p: '1',
rounded: 'xl'
})}>
{[
{ value: 'content', label: '📝 Content', icon: '🔢' },
{ value: 'appearance', label: '🎨 Style', icon: '🎨' },
{ value: 'layout', label: '📐 Layout', icon: '📐' },
{ value: 'output', label: '💾 Output', icon: '💾' }
].map((tab) => (
<Tabs.Trigger
key={tab.value}
value={tab.value}
className={css({
flex: 1,
px: '3',
py: '2',
fontSize: 'sm',
fontWeight: 'medium',
rounded: 'lg',
transition: 'all',
color: 'gray.600',
_hover: { color: 'gray.900' },
'&[data-state=active]': {
bg: 'white',
color: 'brand.600',
shadow: 'card'
}
})}
>
<span className={css({ mr: '2' })}>{tab.icon}</span>
{tab.label}
</Tabs.Trigger>
))}
</Tabs.List>
{/* Content Tab */}
<Tabs.Content value="content" className={css({ mt: '6' })}>
<div className={stack({ gap: '6' })}>
<FormField
label="Number Range"
description="Define which numbers to include (e.g., '0-99' or '1,2,5,10')"
>
<form.Field name="range">
{(field) => (
<input
value={field.state.value || ''}
onChange={(e) => field.handleChange(e.target.value)}
placeholder="0-99"
className={inputStyles}
/>
)}
</form.Field>
</FormField>
<div className={grid({ columns: 2, gap: '4' })}>
<FormField
label="Step Size"
description="For ranges, increment by this amount"
>
<form.Field name="step">
{(field) => (
<input
type="number"
min="1"
value={field.state.value || 1}
onChange={(e) => field.handleChange(parseInt(e.target.value))}
className={inputStyles}
/>
)}
</form.Field>
</FormField>
<FormField
label="Shuffle Cards"
description="Randomize the order"
>
<form.Field name="shuffle">
{(field) => (
<SwitchField
checked={field.state.value || false}
onCheckedChange={field.handleChange}
/>
)}
</form.Field>
</FormField>
</div>
</div>
</Tabs.Content>
{/* Appearance Tab */}
<Tabs.Content value="appearance" className={css({ mt: '6' })}>
<div className={stack({ gap: '6' })}>
<FormField
label="Color Scheme"
description="Choose how colors are applied to beads and numerals"
>
<form.Field name="colorScheme">
{(field) => (
<RadioGroupField
value={field.state.value || 'place-value'}
onValueChange={(value) => field.handleChange(value as any)}
options={[
{ value: 'monochrome', label: 'Monochrome', desc: 'Classic black and white' },
{ value: 'place-value', label: 'Place Value', desc: 'Colors by digit position' },
{ value: 'heaven-earth', label: 'Heaven-Earth', desc: 'Different colors for 5s and 1s' },
{ value: 'alternating', label: 'Alternating', desc: 'Alternating column colors' }
]}
/>
)}
</form.Field>
</FormField>
<FormField
label="Bead Shape"
description="Choose the visual style of the beads"
>
<form.Field name="beadShape">
{(field) => (
<RadioGroupField
value={field.state.value || 'diamond'}
onValueChange={(value) => field.handleChange(value as any)}
options={[
{ value: 'diamond', label: '💎 Diamond', desc: 'Realistic 3D appearance' },
{ value: 'circle', label: '⭕ Circle', desc: 'Traditional round beads' },
{ value: 'square', label: '⬜ Square', desc: 'Modern geometric style' }
]}
/>
)}
</form.Field>
</FormField>
<div className={grid({ columns: 2, gap: '4' })}>
<FormField
label="Colored Numerals"
description="Match numeral colors to bead colors"
>
<form.Field name="coloredNumerals">
{(field) => (
<SwitchField
checked={field.state.value || false}
onCheckedChange={field.handleChange}
/>
)}
</form.Field>
</FormField>
<FormField
label="Hide Inactive Beads"
description="Show only active beads for clarity"
>
<form.Field name="hideInactiveBeads">
{(field) => (
<SwitchField
checked={field.state.value || false}
onCheckedChange={field.handleChange}
/>
)}
</form.Field>
</FormField>
</div>
</div>
</Tabs.Content>
{/* Layout Tab */}
<Tabs.Content value="layout" className={css({ mt: '6' })}>
<div className={stack({ gap: '6' })}>
<div className={grid({ columns: 2, gap: '4' })}>
<FormField
label="Cards Per Page"
description="Number of flashcards on each page"
>
<form.Field name="cardsPerPage">
{(field) => (
<SliderField
value={[field.state.value || 6]}
onValueChange={([value]) => field.handleChange(value)}
min={1}
max={12}
step={1}
formatValue={(value) => `${value} cards`}
/>
)}
</form.Field>
</FormField>
<FormField
label="Paper Size"
description="Output paper dimensions"
>
<form.Field name="paperSize">
{(field) => (
<SelectField
value={field.state.value || 'us-letter'}
onValueChange={(value) => field.handleChange(value as any)}
options={[
{ value: 'us-letter', label: 'US Letter (8.5×11")' },
{ value: 'a4', label: 'A4 (210×297mm)' },
{ value: 'a3', label: 'A3 (297×420mm)' },
{ value: 'a5', label: 'A5 (148×210mm)' }
]}
/>
)}
</form.Field>
</FormField>
</div>
<FormField
label="Orientation"
description="Page layout direction"
>
<form.Field name="orientation">
{(field) => (
<RadioGroupField
value={field.state.value || 'portrait'}
onValueChange={(value) => field.handleChange(value as any)}
options={[
{ value: 'portrait', label: '📄 Portrait', desc: 'Taller than wide' },
{ value: 'landscape', label: '📃 Landscape', desc: 'Wider than tall' }
]}
/>
)}
</form.Field>
</FormField>
<div className={grid({ columns: 2, gap: '4' })}>
<FormField
label="Show Cut Marks"
description="Add guides for cutting cards"
>
<form.Field name="showCutMarks">
{(field) => (
<SwitchField
checked={field.state.value || false}
onCheckedChange={field.handleChange}
/>
)}
</form.Field>
</FormField>
<FormField
label="Registration Marks"
description="Alignment guides for duplex printing"
>
<form.Field name="showRegistration">
{(field) => (
<SwitchField
checked={field.state.value || false}
onCheckedChange={field.handleChange}
/>
)}
</form.Field>
</FormField>
</div>
</div>
</Tabs.Content>
{/* Output Tab */}
<Tabs.Content value="output" className={css({ mt: '6' })}>
<div className={stack({ gap: '6' })}>
<FormField
label="Output Format"
description="Choose your preferred file format"
>
<form.Field name="format">
{(field) => (
<RadioGroupField
value={field.state.value || 'pdf'}
onValueChange={(value) => field.handleChange(value as any)}
options={[
{ value: 'pdf', label: '📄 PDF', desc: 'Print-ready vector document' },
{ value: 'html', label: '🌐 HTML', desc: 'Interactive web flashcards' },
{ value: 'svg', label: '🖼️ SVG', desc: 'Scalable vector images' },
{ value: 'png', label: '📷 PNG', desc: 'High-resolution images' }
]}
/>
)}
</form.Field>
</FormField>
<FormField
label="Scale Factor"
description="Adjust the overall size of flashcards"
>
<form.Field name="scaleFactor">
{(field) => (
<SliderField
value={[field.state.value || 0.9]}
onValueChange={([value]) => field.handleChange(value)}
min={0.5}
max={1.0}
step={0.05}
formatValue={(value) => `${Math.round(value * 100)}%`}
/>
)}
</form.Field>
</FormField>
</div>
</Tabs.Content>
</Tabs.Root>
{/* Generate Button */}
<div className={css({ pt: '6', borderTop: '1px solid', borderColor: 'gray.200' })}>
<button
type="submit"
disabled={isGenerating}
className={css({
w: 'full',
px: '6',
py: '4',
bg: 'brand.600',
color: 'white',
fontSize: 'lg',
fontWeight: 'semibold',
rounded: 'xl',
shadow: 'card',
transition: 'all',
cursor: isGenerating ? 'not-allowed' : 'pointer',
opacity: isGenerating ? '0.7' : '1',
_hover: isGenerating ? {} : {
bg: 'brand.700',
transform: 'translateY(-1px)',
shadow: 'modal'
}
})}
>
<span className={hstack({ gap: '3', justify: 'center' })}>
{isGenerating ? (
<>
<div className={css({
w: '5',
h: '5',
border: '2px solid',
borderColor: 'white',
borderTopColor: 'transparent',
rounded: 'full',
animation: 'spin 1s linear infinite'
})} />
Generating...
</>
) : (
<>
<Sparkles size={20} />
Generate Flashcards
</>
)}
</span>
</button>
</div>
</form>
)
}
// Helper Components
function FormField({
label,
description,
children
}: {
label: string
description?: string
children: React.ReactNode
}) {
return (
<div className={stack({ gap: '2' })}>
<Label.Root className={css({
fontSize: 'sm',
fontWeight: 'semibold',
color: 'gray.900'
})}>
{label}
</Label.Root>
{description && (
<p className={css({
fontSize: 'xs',
color: 'gray.600'
})}>
{description}
</p>
)}
{children}
</div>
)
}
function SwitchField({
checked,
onCheckedChange
}: {
checked: boolean
onCheckedChange: (checked: boolean) => void
}) {
return (
<Switch.Root
checked={checked}
onCheckedChange={onCheckedChange}
className={css({
w: '11',
h: '6',
bg: checked ? 'brand.600' : 'gray.300',
rounded: 'full',
position: 'relative',
transition: 'all',
cursor: 'pointer',
_hover: { bg: checked ? 'brand.700' : 'gray.400' }
})}
>
<Switch.Thumb
className={css({
display: 'block',
w: '5',
h: '5',
bg: 'white',
rounded: 'full',
shadow: 'card',
transition: 'transform 0.2s',
transform: checked ? 'translateX(20px)' : 'translateX(0px)',
willChange: 'transform'
})}
/>
</Switch.Root>
)
}
function RadioGroupField({
value,
onValueChange,
options
}: {
value: string
onValueChange: (value: string) => void
options: Array<{ value: string; label: string; desc?: string }>
}) {
return (
<RadioGroup.Root
value={value}
onValueChange={onValueChange}
className={stack({ gap: '3' })}
>
{options.map((option) => (
<div key={option.value} className={hstack({ gap: '3', alignItems: 'start' })}>
<RadioGroup.Item
value={option.value}
className={css({
w: '5',
h: '5',
rounded: 'full',
border: '2px solid',
borderColor: 'gray.300',
bg: 'white',
cursor: 'pointer',
transition: 'all',
_hover: { borderColor: 'brand.400' },
'&[data-state=checked]': { borderColor: 'brand.600' }
})}
>
<RadioGroup.Indicator
className={css({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
w: 'full',
h: 'full',
position: 'relative',
_after: {
content: '""',
display: 'block',
w: '2',
h: '2',
rounded: 'full',
bg: 'brand.600'
}
})}
/>
</RadioGroup.Item>
<div className={stack({ gap: '1', flex: 1 })}>
<label className={css({
fontSize: 'sm',
fontWeight: 'medium',
color: 'gray.900',
cursor: 'pointer'
})}>
{option.label}
</label>
{option.desc && (
<p className={css({
fontSize: 'xs',
color: 'gray.600'
})}>
{option.desc}
</p>
)}
</div>
</div>
))}
</RadioGroup.Root>
)
}
function SelectField({
value,
onValueChange,
options,
placeholder = "Select..."
}: {
value: string
onValueChange: (value: string) => void
options: Array<{ value: string; label: string }>
placeholder?: string
}) {
return (
<Select.Root value={value} onValueChange={onValueChange}>
<Select.Trigger className={inputStyles}>
<Select.Value placeholder={placeholder} />
<Select.Icon>
<ChevronDown size={16} />
</Select.Icon>
</Select.Trigger>
<Select.Portal>
<Select.Content
className={css({
bg: 'white',
rounded: 'xl',
shadow: 'modal',
border: '1px solid',
borderColor: 'gray.200',
p: '2',
zIndex: 50
})}
>
<Select.Viewport>
{options.map((option) => (
<Select.Item
key={option.value}
value={option.value}
className={css({
px: '3',
py: '2',
fontSize: 'sm',
rounded: 'lg',
cursor: 'pointer',
transition: 'all',
_hover: { bg: 'brand.50' },
'&[data-state=checked]': { bg: 'brand.100', color: 'brand.800' }
})}
>
<Select.ItemText>{option.label}</Select.ItemText>
</Select.Item>
))}
</Select.Viewport>
</Select.Content>
</Select.Portal>
</Select.Root>
)
}
function SliderField({
value,
onValueChange,
min,
max,
step,
formatValue
}: {
value: number[]
onValueChange: (value: number[]) => void
min: number
max: number
step: number
formatValue: (value: number) => string
}) {
return (
<div className={stack({ gap: '3' })}>
<div className={hstack({ justify: 'space-between' })}>
<span className={css({ fontSize: 'sm', color: 'gray.600' })}>
{formatValue(min)}
</span>
<span className={css({ fontSize: 'sm', fontWeight: 'medium', color: 'brand.600' })}>
{formatValue(value[0])}
</span>
<span className={css({ fontSize: 'sm', color: 'gray.600' })}>
{formatValue(max)}
</span>
</div>
<Slider.Root
value={value}
onValueChange={onValueChange}
min={min}
max={max}
step={step}
className={css({
position: 'relative',
display: 'flex',
alignItems: 'center',
userSelect: 'none',
touchAction: 'none',
w: 'full',
h: '5'
})}
>
<Slider.Track
className={css({
bg: 'gray.200',
position: 'relative',
flexGrow: 1,
rounded: 'full',
h: '2'
})}
>
<Slider.Range
className={css({
position: 'absolute',
bg: 'brand.600',
rounded: 'full',
h: 'full'
})}
/>
</Slider.Track>
<Slider.Thumb
className={css({
display: 'block',
w: '5',
h: '5',
bg: 'white',
shadow: 'card',
rounded: 'full',
border: '2px solid',
borderColor: 'brand.600',
cursor: 'pointer',
transition: 'all',
_hover: { transform: 'scale(1.1)' },
_focus: { outline: 'none', boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.1)' }
})}
/>
</Slider.Root>
</div>
)
}
const inputStyles = css({
w: 'full',
px: '4',
py: '3',
bg: 'white',
border: '1px solid',
borderColor: 'gray.300',
rounded: 'lg',
fontSize: 'sm',
transition: 'all',
_hover: { borderColor: 'gray.400' },
_focus: {
outline: 'none',
borderColor: 'brand.500',
boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.1)'
}
})

347
apps/web/src/components/DownloadCard.tsx Normal file
View File

@@ -0,0 +1,347 @@
'use client'
import { useState } from 'react'
import { css } from '../../styled-system/css'
import { stack, hstack } from '../../styled-system/patterns'
import { Download, FileText, Globe, Image, Sparkles, ExternalLink } from 'lucide-react'
interface GenerationResult {
id: string
downloadUrl: string
metadata: {
cardCount: number
numbers: number[]
format: string
filename: string
fileSize: number
}
}
interface DownloadCardProps {
result: GenerationResult
onNewGeneration: () => void
}
export function DownloadCard({ result, onNewGeneration }: DownloadCardProps) {
const [isDownloading, setIsDownloading] = useState(false)
const handleDownload = async () => {
setIsDownloading(true)
try {
// Trigger download
const link = document.createElement('a')
link.href = result.downloadUrl
link.download = result.metadata.filename
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
// Optional: Track download success
console.log('📥 Download started:', result.metadata.filename)
} catch (error) {
console.error('Download failed:', error)
} finally {
setIsDownloading(false)
}
}
const handlePreview = () => {
window.open(result.downloadUrl, '_blank')
}
const formatFileSize = (bytes: number): string => {
if (bytes === 0) return '0 B'
const k = 1024
const sizes = ['B', 'KB', 'MB', 'GB']
const i = Math.floor(Math.log(bytes) / Math.log(k))
return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i]
}
const getFormatIcon = (format: string) => {
switch (format.toLowerCase()) {
case 'pdf': return <FileText size={20} />
case 'html': return <Globe size={20} />
case 'svg': case 'png': return <Image size={20} />
default: return <FileText size={20} />
}
}
const getFormatColor = (format: string) => {
switch (format.toLowerCase()) {
case 'pdf': return 'red'
case 'html': return 'blue'
case 'svg': return 'purple'
case 'png': return 'green'
default: return 'gray'
}
}
const formatColor = getFormatColor(result.metadata.format)
return (
<div className={css({
bg: 'gradient-to-r from-green.50 to-emerald.50',
border: '2px solid',
borderColor: 'green.200',
rounded: '2xl',
p: '8',
position: 'relative',
overflow: 'hidden'
})}>
{/* Success decoration */}
<div className={css({
position: 'absolute',
top: '-20px',
right: '-20px',
w: '40px',
h: '40px',
bg: 'green.100',
rounded: 'full',
opacity: 0.6
})} />
<div className={stack({ gap: '6' })}>
{/* Header */}
<div className={hstack({ gap: '4', alignItems: 'center' })}>
<div className={css({
w: '12',
h: '12',
bg: 'green.100',
rounded: 'full',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
})}>
<Sparkles
size={24}
className={css({ color: 'green.600' })}
/>
</div>
<div className={stack({ gap: '1', flex: 1 })}>
<h3 className={css({
fontSize: 'xl',
fontWeight: 'bold',
color: 'gray.900'
})}>
✨ Your Flashcards Are Ready!
</h3>
<p className={css({
color: 'gray.600'
})}>
Generated {result.metadata.cardCount} beautiful soroban flashcards
</p>
</div>
</div>
{/* File Details */}
<div className={css({
p: '4',
bg: 'white',
rounded: 'xl',
border: '1px solid',
borderColor: 'gray.200'
})}>
<div className={hstack({ gap: '3', alignItems: 'center', mb: '3' })}>
<div className={css({
p: '2',
bg: `${formatColor}.100`,
color: `${formatColor}.600`,
rounded: 'lg'
})}>
{getFormatIcon(result.metadata.format)}
</div>
<div className={stack({ gap: '0', flex: 1 })}>
<div className={css({
fontSize: 'sm',
fontWeight: 'semibold',
color: 'gray.900',
fontFamily: 'mono'
})}>
{result.metadata.filename}
</div>
<div className={css({
fontSize: 'xs',
color: 'gray.600'
})}>
{result.metadata.format.toUpperCase()} • {formatFileSize(result.metadata.fileSize)}
</div>
</div>
<div className={css({
px: '3',
py: '1',
bg: `${formatColor}.100`,
color: `${formatColor}.800`,
fontSize: 'xs',
fontWeight: 'medium',
rounded: 'full'
})}>
{result.metadata.cardCount} cards
</div>
</div>
{/* Sample Numbers */}
<div className={stack({ gap: '2' })}>
<div className={css({
fontSize: 'xs',
fontWeight: 'medium',
color: 'gray.700'
})}>
Sample numbers:
</div>
<div className={css({
display: 'flex',
flexWrap: 'wrap',
gap: '1'
})}>
{result.metadata.numbers.slice(0, 8).map((number, i) => (
<span
key={i}
className={css({
px: '2',
py: '1',
bg: 'gray.100',
color: 'gray.700',
fontSize: 'xs',
fontFamily: 'mono',
rounded: 'md'
})}
>
{number}
</span>
))}
{result.metadata.numbers.length > 8 && (
<span className={css({
px: '2',
py: '1',
color: 'gray.500',
fontSize: 'xs'
})}>
+{result.metadata.numbers.length - 8} more
</span>
)}
</div>
</div>
</div>
{/* Action Buttons */}
<div className={hstack({ gap: '3' })}>
<button
onClick={handleDownload}
disabled={isDownloading}
className={css({
flex: 1,
px: '6',
py: '4',
bg: 'green.600',
color: 'white',
fontSize: 'lg',
fontWeight: 'semibold',
rounded: 'xl',
shadow: 'card',
transition: 'all',
cursor: isDownloading ? 'not-allowed' : 'pointer',
opacity: isDownloading ? '0.7' : '1',
_hover: isDownloading ? {} : {
bg: 'green.700',
transform: 'translateY(-1px)',
shadow: 'modal'
}
})}
>
<span className={hstack({ gap: '3', justify: 'center' })}>
{isDownloading ? (
<>
<div className={css({
w: '5',
h: '5',
border: '2px solid',
borderColor: 'white',
borderTopColor: 'transparent',
rounded: 'full',
animation: 'spin 1s linear infinite'
})} />
Downloading...
</>
) : (
<>
<Download size={20} />
Download
</>
)}
</span>
</button>
{result.metadata.format === 'html' && (
<button
onClick={handlePreview}
className={css({
px: '4',
py: '4',
bg: 'white',
color: 'blue.600',
fontSize: 'lg',
fontWeight: 'semibold',
rounded: 'xl',
shadow: 'card',
border: '2px solid',
borderColor: 'blue.200',
transition: 'all',
_hover: {
borderColor: 'blue.400',
transform: 'translateY(-1px)'
}
})}
>
<ExternalLink size={20} />
</button>
)}
</div>
{/* New Generation Button */}
<div className={css({
pt: '4',
borderTop: '1px solid',
borderColor: 'green.200'
})}>
<button
onClick={onNewGeneration}
className={css({
w: 'full',
px: '4',
py: '3',
bg: 'transparent',
color: 'green.700',
fontSize: 'sm',
fontWeight: 'medium',
rounded: 'lg',
border: '1px solid',
borderColor: 'green.300',
transition: 'all',
_hover: {
bg: 'green.100',
borderColor: 'green.400'
}
})}
>
Create Another Set
</button>
</div>
</div>
{/* Success celebration effect */}
<div className={css({
position: 'absolute',
top: '4',
right: '4',
fontSize: '2xl',
opacity: 0.3
})}>
🎉
</div>
</div>
)
}

336
apps/web/src/components/GenerationProgress.tsx Normal file
View File

@@ -0,0 +1,336 @@
'use client'
import { useState, useEffect } from 'react'
import * as Progress from '@radix-ui/react-progress'
import { css } from '../../styled-system/css'
import { stack, hstack } from '../../styled-system/patterns'
import { FlashcardConfig } from '@/app/create/page'
import { Sparkles, Zap, CheckCircle } from 'lucide-react'
interface GenerationProgressProps {
config: FlashcardConfig
}
interface ProgressStep {
id: string
label: string
description: string
icon: React.ReactNode
status: 'pending' | 'active' | 'complete'
}
export function GenerationProgress({ config }: GenerationProgressProps) {
const [progress, setProgress] = useState(0)
const [currentStep, setCurrentStep] = useState(0)
const [steps, setSteps] = useState<ProgressStep[]>([])
useEffect(() => {
// Initialize steps based on config
const generationSteps: ProgressStep[] = [
{
id: 'validate',
label: 'Validating Configuration',
description: 'Checking parameters and dependencies',
icon: <CheckCircle size={20} />,
status: 'pending'
},
{
id: 'generate',
label: 'Generating Soroban Patterns',
description: `Creating ${getEstimatedCardCount(config)} flashcard patterns`,
icon: <Sparkles size={20} />,
status: 'pending'
},
{
id: 'render',
label: `Rendering ${config.format?.toUpperCase() || 'PDF'}`,
description: 'Converting to your chosen format',
icon: <Zap size={20} />,
status: 'pending'
},
{
id: 'finalize',
label: 'Finalizing Download',
description: 'Preparing your flashcards for download',
icon: <CheckCircle size={20} />,
status: 'pending'
}
]
setSteps(generationSteps)
// Simulate progress
const progressInterval = setInterval(() => {
setProgress(prev => {
const newProgress = Math.min(prev + Math.random() * 15, 95)
// Update current step based on progress
const stepIndex = Math.floor((newProgress / 100) * generationSteps.length)
setCurrentStep(stepIndex)
return newProgress
})
}, 500)
return () => clearInterval(progressInterval)
}, [config])
useEffect(() => {
// Update step statuses based on current step
setSteps(prevSteps =>
prevSteps.map((step, index) => ({
...step,
status: index < currentStep ? 'complete' : index === currentStep ? 'active' : 'pending'
}))
)
}, [currentStep])
const estimatedTime = getEstimatedTime(config)
const currentStepData = steps[currentStep]
return (
<div className={stack({ gap: '6' })}>
<div className={stack({ gap: '2' })}>
<div className={hstack({ justify: 'space-between', alignItems: 'center' })}>
<h3 className={css({
fontSize: 'xl',
fontWeight: 'bold',
color: 'gray.900'
})}>
Generating Your Flashcards
</h3>
<div className={css({
fontSize: 'sm',
color: 'brand.600',
fontWeight: 'medium'
})}>
~{estimatedTime} seconds
</div>
</div>
{/* Current Step Indicator */}
{currentStepData && (
<div className={hstack({ gap: '3', alignItems: 'center', py: '2' })}>
<div className={css({
color: 'brand.600',
display: 'flex',
alignItems: 'center'
})}>
{currentStepData.icon}
</div>
<div className={stack({ gap: '0' })}>
<div className={css({
fontSize: 'sm',
fontWeight: 'medium',
color: 'gray.900'
})}>
{currentStepData.label}
</div>
<div className={css({
fontSize: 'xs',
color: 'gray.600'
})}>
{currentStepData.description}
</div>
</div>
</div>
)}
</div>
{/* Progress Bar */}
<div className={stack({ gap: '3' })}>
<Progress.Root
value={progress}
max={100}
className={css({
position: 'relative',
overflow: 'hidden',
bg: 'gray.200',
rounded: 'full',
w: 'full',
h: '3',
transform: 'translateZ(0)'
})}
>
<Progress.Indicator
className={css({
bg: 'gradient-to-r from-brand.500 to-brand.600',
w: 'full',
h: 'full',
transition: 'transform 0.3s cubic-bezier(0.65, 0, 0.35, 1)',
transformOrigin: 'left'
})}
style={{ transform: `translateX(-${100 - progress}%)` }}
/>
</Progress.Root>
<div className={hstack({ justify: 'space-between' })}>
<span className={css({
fontSize: 'sm',
color: 'gray.600'
})}>
{Math.round(progress)}% complete
</span>
<span className={css({
fontSize: 'sm',
fontWeight: 'medium',
color: 'brand.600'
})}>
Step {currentStep + 1} of {steps.length}
</span>
</div>
</div>
{/* Steps List */}
<div className={stack({ gap: '3' })}>
{steps.map((step, index) => (
<div
key={step.id}
className={hstack({ gap: '3', alignItems: 'center', py: '2' })}
>
<div className={css({
w: '8',
h: '8',
rounded: 'full',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
border: '2px solid',
borderColor:
step.status === 'complete' ? 'green.500' :
step.status === 'active' ? 'brand.500' :
'gray.300',
bg:
step.status === 'complete' ? 'green.50' :
step.status === 'active' ? 'brand.50' :
'white',
color:
step.status === 'complete' ? 'green.600' :
step.status === 'active' ? 'brand.600' :
'gray.400',
transition: 'all'
})}>
{step.status === 'complete' ? (
<CheckCircle size={16} />
) : step.status === 'active' ? (
<div className={css({
w: '3',
h: '3',
bg: 'brand.600',
rounded: 'full',
animation: 'pulse'
})} />
) : (
<div className={css({
w: '2',
h: '2',
bg: 'gray.400',
rounded: 'full'
})} />
)}
</div>
<div className={stack({ gap: '0', flex: 1 })}>
<div className={css({
fontSize: 'sm',
fontWeight: 'medium',
color:
step.status === 'complete' ? 'green.800' :
step.status === 'active' ? 'gray.900' :
'gray.600'
})}>
{step.label}
</div>
<div className={css({
fontSize: 'xs',
color:
step.status === 'complete' ? 'green.600' :
step.status === 'active' ? 'gray.600' :
'gray.500'
})}>
{step.description}
</div>
</div>
{step.status === 'complete' && (
<CheckCircle
size={16}
className={css({ color: 'green.600' })}
/>
)}
</div>
))}
</div>
{/* Fun Facts */}
<div className={css({
p: '4',
bg: 'blue.50',
border: '1px solid',
borderColor: 'blue.200',
rounded: 'xl'
})}>
<h4 className={css({
fontSize: 'sm',
fontWeight: 'semibold',
color: 'blue.800',
mb: '2'
})}>
💡 Did you know?
</h4>
<p className={css({
fontSize: 'sm',
color: 'blue.700',
lineHeight: 'relaxed'
})}>
{getFunFact(config)}
</p>
</div>
</div>
)
}
// Helper functions
function getEstimatedCardCount(config: FlashcardConfig): number {
const range = config.range
if (range.includes('-')) {
const [start, end] = range.split('-').map(n => parseInt(n) || 0)
return Math.floor((end - start + 1) / (config.step || 1))
}
if (range.includes(',')) {
return range.split(',').length
}
return 1
}
function getEstimatedTime(config: FlashcardConfig): number {
const cardCount = getEstimatedCardCount(config)
const baseTime = 3 // Base generation time
const cardTime = Math.max(cardCount * 0.1, 1)
const formatMultiplier = {
'pdf': 1,
'html': 1.2,
'svg': 1.5,
'png': 2
}[config.format || 'pdf'] || 1
return Math.round((baseTime + cardTime) * formatMultiplier)
}
function getFunFact(config: FlashcardConfig): string {
const facts = [
'The soroban is a Japanese counting tool that dates back over 400 years!',
'Master soroban users can calculate faster than electronic calculators.',
'Each bead position on a soroban represents a specific numeric value.',
'The word "soroban" comes from ancient Chinese "suanpan" (counting board).',
'Soroban training improves mathematical intuition and mental calculation speed.',
'Modern soroban competitions feature lightning-fast calculations.',
'The soroban method strengthens both logical and creative thinking.',
'Japanese students often learn soroban alongside traditional mathematics.'
]
return facts[Math.floor(Math.random() * facts.length)]
}

360
apps/web/src/components/LivePreview.tsx Normal file
View File

@@ -0,0 +1,360 @@
'use client'
import { useState, useEffect, useMemo } from 'react'
import { css } from '../../styled-system/css'
import { stack, hstack, grid } from '../../styled-system/patterns'
import { FlashcardConfig } from '@/app/create/page'
import { Eye, RefreshCw } from 'lucide-react'
interface LivePreviewProps {
config: FlashcardConfig
}
interface PreviewData {
samples: Array<{
number: number
front: string // SVG content
back: string // Numeral
}>
count: number
}
export function LivePreview({ config }: LivePreviewProps) {
const [previewData, setPreviewData] = useState<PreviewData | null>(null)
const [isLoading, setIsLoading] = useState(false)
const [error, setError] = useState<string | null>(null)
// Debounced preview generation
const debouncedConfig = useDebounce(config, 1000)
useEffect(() => {
const generatePreview = async () => {
setIsLoading(true)
setError(null)
try {
// Create a simplified config for quick preview
const previewConfig = {
...debouncedConfig,
range: getPreviewRange(debouncedConfig.range),
format: 'svg' // Always use SVG for preview
}
const response = await fetch('/api/preview', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(previewConfig),
})
if (response.ok) {
const data = await response.json()
setPreviewData(data)
} else {
throw new Error('Preview generation failed')
}
} catch (err) {
console.error('Preview error:', err)
setError('Unable to generate preview')
// Set mock data for development
setPreviewData(getMockPreviewData(debouncedConfig))
} finally {
setIsLoading(false)
}
}
generatePreview()
}, [debouncedConfig])
return (
<div className={stack({ gap: '6' })}>
<div className={hstack({ justify: 'space-between', alignItems: 'center' })}>
<div className={stack({ gap: '1' })}>
<h3 className={css({
fontSize: 'xl',
fontWeight: 'bold',
color: 'gray.900'
})}>
Live Preview
</h3>
<p className={css({
fontSize: 'sm',
color: 'gray.600'
})}>
See how your flashcards will look
</p>
</div>
<div className={hstack({ gap: '2', alignItems: 'center' })}>
{isLoading && (
<RefreshCw
size={16}
className={css({ animation: 'spin 1s linear infinite', color: 'brand.600' })}
/>
)}
<div className={css({
px: '3',
py: '1',
bg: 'brand.100',
color: 'brand.800',
fontSize: 'xs',
fontWeight: 'medium',
rounded: 'full'
})}>
{previewData?.count || 0} cards • {config.format?.toUpperCase()}
</div>
</div>
</div>
{/* Preview Cards */}
{isLoading ? (
<PreviewSkeleton />
) : error ? (
<PreviewError error={error} />
) : previewData ? (
<div className={grid({
columns: { base: 1, md: 2, lg: 3 },
gap: '4'
})}>
{previewData.samples.map((card, i) => (
<FlashcardPreview
key={i}
number={card.number}
frontSvg={card.front}
backContent={card.back}
/>
))}
</div>
) : null}
{/* Configuration Summary */}
<div className={css({
p: '4',
bg: 'gray.50',
rounded: 'xl',
border: '1px solid',
borderColor: 'gray.200'
})}>
<h4 className={css({
fontSize: 'sm',
fontWeight: 'semibold',
color: 'gray.900',
mb: '3'
})}>
Configuration Summary
</h4>
<div className={grid({ columns: 2, gap: '3' })}>
<ConfigSummaryItem label="Range" value={config.range} />
<ConfigSummaryItem label="Cards per page" value={config.cardsPerPage?.toString() || '6'} />
<ConfigSummaryItem label="Color scheme" value={config.colorScheme || 'place-value'} />
<ConfigSummaryItem label="Bead shape" value={config.beadShape || 'diamond'} />
</div>
</div>
</div>
)
}
function FlashcardPreview({
number,
frontSvg,
backContent
}: {
number: number
frontSvg: string
backContent: string
}) {
const [showBack, setShowBack] = useState(false)
return (
<div
className={css({
position: 'relative',
aspectRatio: '3/4',
bg: 'white',
border: '2px solid',
borderColor: 'gray.200',
rounded: 'xl',
overflow: 'hidden',
cursor: 'pointer',
transition: 'all',
_hover: {
borderColor: 'brand.300',
transform: 'translateY(-2px)',
shadow: 'card'
}
})}
onClick={() => setShowBack(!showBack)}
>
{/* Flip indicator */}
<div className={css({
position: 'absolute',
top: '2',
right: '2',
p: '1',
bg: 'white',
rounded: 'full',
shadow: 'card',
zIndex: 10
})}>
<Eye size={12} className={css({ color: 'gray.600' })} />
</div>
{showBack ? (
// Back side - Numeral
<div className={css({
w: 'full',
h: 'full',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
bg: 'gray.50'
})}>
<div className={css({
fontSize: '4xl',
fontWeight: 'bold',
color: 'gray.900',
fontFamily: 'mono'
})}>
{number}
</div>
</div>
) : (
// Front side - Soroban
<div className={css({
w: 'full',
h: 'full',
p: '4',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
})}>
{frontSvg ? (
<div
dangerouslySetInnerHTML={{ __html: frontSvg }}
className={css({ maxW: 'full', maxH: 'full' })}
/>
) : (
<SorobanPlaceholder number={number} />
)}
</div>
)}
</div>
)
}
function SorobanPlaceholder({ number }: { number: number }) {
return (
<div className={css({
w: 'full',
h: 'full',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
gap: '2',
color: 'gray.400'
})}>
<div className={css({ fontSize: '3xl' })}>🧮</div>
<div className={css({ fontSize: 'sm', fontWeight: 'medium' })}>
Soroban for {number}
</div>
</div>
)
}
function PreviewSkeleton() {
return (
<div className={grid({
columns: { base: 1, md: 2, lg: 3 },
gap: '4'
})}>
{[1, 2, 3].map((i) => (
<div
key={i}
className={css({
aspectRatio: '3/4',
bg: 'gray.100',
rounded: 'xl',
animation: 'pulse'
})}
/>
))}
</div>
)
}
function PreviewError({ error }: { error: string }) {
return (
<div className={css({
p: '6',
bg: 'amber.50',
border: '1px solid',
borderColor: 'amber.200',
rounded: 'xl',
textAlign: 'center'
})}>
<div className={css({ fontSize: '2xl', mb: '2' })}>⚠️</div>
<p className={css({ color: 'amber.800', fontWeight: 'medium' })}>
{error}
</p>
<p className={css({ fontSize: 'sm', color: 'amber.700', mt: '1' })}>
Preview will be available when you generate the flashcards
</p>
</div>
)
}
function ConfigSummaryItem({ label, value }: { label: string; value: string }) {
return (
<div className={css({ fontSize: 'xs' })}>
<span className={css({ color: 'gray.600' })}>{label}:</span>{' '}
<span className={css({ fontWeight: 'medium', color: 'gray.900' })}>{value}</span>
</div>
)
}
// Utility functions
function useDebounce<T>(value: T, delay: number): T {
const [debouncedValue, setDebouncedValue] = useState<T>(value)
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value)
}, delay)
return () => {
clearTimeout(handler)
}
}, [value, delay])
return debouncedValue
}
function getPreviewRange(range: string): string {
// For preview, limit to a few sample numbers
if (range.includes('-')) {
const [start] = range.split('-')
const startNum = parseInt(start) || 0
return `${startNum}-${startNum + 2}`
}
if (range.includes(',')) {
const numbers = range.split(',').slice(0, 3)
return numbers.join(',')
}
return range
}
function getMockPreviewData(config: FlashcardConfig): PreviewData {
// Mock data for development/fallback
return {
count: 3,
samples: [
{ number: 7, front: '', back: '7' },
{ number: 23, front: '', back: '23' },
{ number: 156, front: '', back: '156' }
]
}
}

22
apps/web/src/lib/asset-store.ts Normal file
View File

@@ -0,0 +1,22 @@
// Shared asset store for generated files
// In production, this should be replaced with Redis or a database
export interface StoredAsset {
data: Buffer
filename: string
mimeType: string
createdAt: Date
}
export const assetStore = new Map<string, StoredAsset>()
// Clean up old assets every hour
setInterval(() => {
const cutoff = new Date(Date.now() - 60 * 60 * 1000) // 1 hour ago
const entries = Array.from(assetStore.entries())
entries.forEach(([id, asset]) => {
if (asset.createdAt < cutoff) {
assetStore.delete(id)
}
})
}, 60 * 60 * 1000)

28
apps/web/tsconfig.json Normal file
View File

@@ -0,0 +1,28 @@
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "es6"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"target": "es2015",
"downlevelIteration": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}