feat: Add comprehensive timeline editor with frame editing and regeneration capabilities

2026-01-05 14:48:43 +08:00
parent 7d78dcd078
commit ca018a9b1f
68 changed files with 14904 additions and 57 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
--- a/frontend/components.json
+++ b/frontend/components.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}
--- a/frontend/eslint.config.mjs
+++ b/frontend/eslint.config.mjs
@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;
--- a/frontend/next.config.ts
+++ b/frontend/next.config.ts
@@ -0,0 +1,15 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  async rewrites() {
+    return [
+      {
+        source: '/api/:path*',
+        destination: 'http://localhost:8000/api/:path*',
+      },
+    ]
+  },
+};
+
+export default nextConfig;
+
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.562.0",
+    "next": "16.1.1",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "tailwind-merge": "^3.4.0",
+    "zustand": "^5.0.9"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.1",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5"
+  }
+}
--- a/frontend/postcss.config.mjs
+++ b/frontend/postcss.config.mjs
@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;
--- a/frontend/public/file.svg
+++ b/frontend/public/file.svg
@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
--- a/frontend/public/globe.svg
+++ b/frontend/public/globe.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
--- a/frontend/public/next.svg
+++ b/frontend/public/next.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
--- a/frontend/public/vercel.svg
+++ b/frontend/public/vercel.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
--- a/frontend/public/window.svg
+++ b/frontend/public/window.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
--- a/frontend/src/app/editor/page.tsx
+++ b/frontend/src/app/editor/page.tsx
@@ -0,0 +1,409 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useSearchParams } from 'next/navigation'
+import { Separator } from '@/components/ui/separator'
+import { Button } from '@/components/ui/button'
+import { Save, Download, Settings, ArrowLeft, Loader2 } from 'lucide-react'
+import { Timeline } from '@/components/timeline'
+import { PreviewPlayer } from '@/components/preview'
+import { useEditorStore, Storyboard } from '@/stores/editor-store'
+import { editorApi } from '@/services/editor-api'
+
+// Mock data for demo (fallback)
+const mockStoryboard: Storyboard = {
+    id: 'demo-1',
+    title: '演示视频',
+    totalDuration: 15.5,
+    frames: [
+        {
+            id: 'frame-1',
+            index: 0,
+            order: 0,
+            narration: '在一个宁静的早晨，阳光洒满了整个城市',
+            imagePrompt: 'A peaceful morning cityscape with golden sunlight',
+            duration: 3.2,
+        },
+        {
+            id: 'frame-2',
+            index: 1,
+            order: 1,
+            narration: '小明决定出门去探索这个美丽的世界',
+            imagePrompt: 'A young man stepping out of his house',
+            duration: 2.8,
+        },
+        {
+            id: 'frame-3',
+            index: 2,
+            order: 2,
+            narration: '他走过熟悉的街道，感受着微风的吹拂',
+            imagePrompt: 'Walking through familiar streets with gentle breeze',
+            duration: 3.5,
+        },
+        {
+            id: 'frame-4',
+            index: 3,
+            order: 3,
+            narration: '公园里的花朵正在盛开，散发着迷人的芬芳',
+            imagePrompt: 'Blooming flowers in a park with beautiful fragrance',
+            duration: 3.0,
+        },
+        {
+            id: 'frame-5',
+            index: 4,
+            order: 4,
+            narration: '这是新的一天的开始，充满了无限可能',
+            imagePrompt: 'A new day begins with endless possibilities',
+            duration: 3.0,
+        },
+    ],
+}
+
+export default function EditorPage() {
+    const searchParams = useSearchParams()
+    const { storyboard, setStoryboard } = useEditorStore()
+    const [loading, setLoading] = useState(true)
+    const [error, setError] = useState<string | null>(null)
+
+    useEffect(() => {
+        async function loadStoryboard() {
+            // Get storyboard_id from URL, default to demo-1
+            const storyboardId = searchParams.get('storyboard_id') || 'demo-1'
+
+            try {
+                setLoading(true)
+                setError(null)
+
+                // Try to load from API
+                const data = await editorApi.getStoryboard(storyboardId)
+
+                // Convert API response to store format
+                const storyboardData: Storyboard = {
+                    id: data.id,
+                    title: data.title,
+                    totalDuration: data.total_duration,
+                    frames: data.frames.map((f: any) => ({
+                        id: f.id,
+                        index: f.index,
+                        order: f.order,
+                        narration: f.narration,
+                        imagePrompt: f.image_prompt,
+                        imagePath: f.image_path,
+                        audioPath: f.audio_path,
+                        duration: f.duration,
+                    })),
+                }
+
+                setStoryboard(storyboardData)
+            } catch (err: any) {
+                console.error('Failed to load storyboard:', err)
+
+                // Fallback to mock data for demo
+                if (storyboardId === 'demo-1') {
+                    setStoryboard(mockStoryboard)
+                } else {
+                    setError(`无法加载分镜板: ${err.message || storyboardId}`)
+                }
+            } finally {
+                setLoading(false)
+            }
+        }
+
+        loadStoryboard()
+    }, [searchParams, setStoryboard])
+
+    // Loading state
+    if (loading) {
+        return (
+            <div className="h-screen flex items-center justify-center bg-background">
+                <div className="flex flex-col items-center gap-4">
+                    <Loader2 className="h-8 w-8 animate-spin text-primary" />
+                    <p className="text-muted-foreground">加载分镜板...</p>
+                </div>
+            </div>
+        )
+    }
+
+    // Error state
+    if (error) {
+        return (
+            <div className="h-screen flex items-center justify-center bg-background">
+                <div className="flex flex-col items-center gap-4 max-w-md text-center">
+                    <p className="text-destructive text-lg">{error}</p>
+                    <Button onClick={() => window.location.href = '/editor?storyboard_id=demo-1'}>
+                        加载演示数据
+                    </Button>
+                </div>
+            </div>
+        )
+    }
+
+    return (
+        <div className="h-screen flex flex-col bg-background">
+            {/* Header */}
+            <header className="h-14 border-b flex items-center justify-between px-4">
+                <div className="flex items-center gap-4">
+                    <Button variant="ghost" size="icon" onClick={() => window.history.back()}>
+                        <ArrowLeft className="h-4 w-4" />
+                    </Button>
+                    <Separator orientation="vertical" className="h-6" />
+                    <h1 className="font-semibold">{storyboard?.title || '加载中...'}</h1>
+                </div>
+
+                <div className="flex items-center gap-2">
+                    <Button variant="ghost" size="sm">
+                        <Settings className="h-4 w-4 mr-2" />
+                        设置
+                    </Button>
+                    <Button variant="ghost" size="sm">
+                        <Save className="h-4 w-4 mr-2" />
+                        保存
+                    </Button>
+                    <Button size="sm">
+                        <Download className="h-4 w-4 mr-2" />
+                        导出视频
+                    </Button>
+                </div>
+            </header>
+
+            {/* Main content */}
+            <div className="flex-1 flex overflow-hidden">
+                {/* Preview panel */}
+                <div className="flex-1 min-w-0">
+                    <PreviewPlayer />
+                </div>
+
+                {/* Right sidebar (optional, for frame details) */}
+                <div className="w-80 border-l bg-muted/30 p-4 hidden lg:block">
+                    <h3 className="font-semibold mb-4">分镜详情</h3>
+                    <SelectedFrameDetails />
+                </div>
+            </div>
+
+            {/* Timeline */}
+            <Timeline />
+        </div>
+    )
+}
+
+function SelectedFrameDetails() {
+    const { storyboard, selectedFrameId, updateFrame } = useEditorStore()
+    const selectedFrame = storyboard?.frames.find((f) => f.id === selectedFrameId)
+
+    const [isEditing, setIsEditing] = useState(false)
+    const [narration, setNarration] = useState('')
+    const [imagePrompt, setImagePrompt] = useState('')
+    const [isSaving, setIsSaving] = useState(false)
+    const [isRegeneratingImage, setIsRegeneratingImage] = useState(false)
+    const [isRegeneratingAudio, setIsRegeneratingAudio] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+
+    // Update local state when frame changes
+    useEffect(() => {
+        if (selectedFrame) {
+            setNarration(selectedFrame.narration || '')
+            setImagePrompt(selectedFrame.imagePrompt || '')
+            setIsEditing(false)
+            setError(null)
+        }
+    }, [selectedFrame?.id])
+
+    if (!selectedFrame) {
+        return (
+            <p className="text-sm text-muted-foreground">选择一个分镜查看详情</p>
+        )
+    }
+
+    const handleSave = async () => {
+        if (!storyboard || !selectedFrame) return
+
+        setIsSaving(true)
+        setError(null)
+
+        try {
+            await editorApi.updateFrame(storyboard.id, selectedFrame.id, {
+                narration,
+                image_prompt: imagePrompt,
+            })
+
+            // Update local store
+            updateFrame(selectedFrame.id, {
+                narration,
+                imagePrompt,
+            })
+
+            setIsEditing(false)
+        } catch (err: any) {
+            setError(err.message || '保存失败')
+        } finally {
+            setIsSaving(false)
+        }
+    }
+
+    const handleRegenerateImage = async () => {
+        if (!storyboard || !selectedFrame) return
+
+        setIsRegeneratingImage(true)
+        setError(null)
+
+        try {
+            const result = await editorApi.regenerateImage(
+                storyboard.id,
+                selectedFrame.id,
+                imagePrompt
+            )
+
+            // Update local store with new image path
+            updateFrame(selectedFrame.id, {
+                imagePath: result.image_path,
+            })
+        } catch (err: any) {
+            setError(err.message || '重新生成图片失败')
+        } finally {
+            setIsRegeneratingImage(false)
+        }
+    }
+
+    const handleRegenerateAudio = async () => {
+        if (!storyboard || !selectedFrame) return
+
+        setIsRegeneratingAudio(true)
+        setError(null)
+
+        try {
+            const result = await editorApi.regenerateAudio(
+                storyboard.id,
+                selectedFrame.id,
+                narration
+            )
+
+            // Update local store with new audio path and duration
+            updateFrame(selectedFrame.id, {
+                audioPath: result.audio_path,
+                duration: result.duration,
+            })
+        } catch (err: any) {
+            setError(err.message || '重新生成音频失败')
+        } finally {
+            setIsRegeneratingAudio(false)
+        }
+    }
+
+    return (
+        <div className="space-y-4">
+            {error && (
+                <div className="text-sm text-destructive bg-destructive/10 p-2 rounded">
+                    {error}
+                </div>
+            )}
+
+            {/* Edit/Save buttons */}
+            <div className="flex gap-2">
+                {isEditing ? (
+                    <>
+                        <Button
+                            size="sm"
+                            onClick={handleSave}
+                            disabled={isSaving}
+                        >
+                            {isSaving ? (
+                                <Loader2 className="h-4 w-4 animate-spin mr-1" />
+                            ) : (
+                                <Save className="h-4 w-4 mr-1" />
+                            )}
+                            保存
+                        </Button>
+                        <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => {
+                                setNarration(selectedFrame.narration || '')
+                                setImagePrompt(selectedFrame.imagePrompt || '')
+                                setIsEditing(false)
+                            }}
+                        >
+                            取消
+                        </Button>
+                    </>
+                ) : (
+                    <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => setIsEditing(true)}
+                    >
+                        编辑
+                    </Button>
+                )}
+            </div>
+
+            {/* Narration */}
+            <div>
+                <label className="text-xs text-muted-foreground">旁白</label>
+                {isEditing ? (
+                    <textarea
+                        value={narration}
+                        onChange={(e) => setNarration(e.target.value)}
+                        className="w-full mt-1 p-2 text-sm border rounded bg-background resize-none"
+                        rows={3}
+                    />
+                ) : (
+                    <p className="text-sm mt-1">{selectedFrame.narration}</p>
+                )}
+            </div>
+
+            {/* Image Prompt */}
+            <div>
+                <label className="text-xs text-muted-foreground">图像提示词</label>
+                {isEditing ? (
+                    <textarea
+                        value={imagePrompt}
+                        onChange={(e) => setImagePrompt(e.target.value)}
+                        className="w-full mt-1 p-2 text-sm border rounded bg-background resize-none"
+                        rows={3}
+                    />
+                ) : (
+                    <p className="text-sm mt-1 text-muted-foreground">
+                        {selectedFrame.imagePrompt}
+                    </p>
+                )}
+            </div>
+
+            {/* Duration */}
+            <div>
+                <label className="text-xs text-muted-foreground">时长</label>
+                <p className="text-sm mt-1">{selectedFrame.duration.toFixed(1)} 秒</p>
+            </div>
+
+            {/* Regenerate buttons */}
+            {!isEditing && (
+                <div className="pt-4 border-t space-y-2">
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        className="w-full"
+                        onClick={handleRegenerateImage}
+                        disabled={isRegeneratingImage}
+                    >
+                        {isRegeneratingImage ? (
+                            <Loader2 className="h-4 w-4 animate-spin mr-2" />
+                        ) : null}
+                        重新生成图片
+                    </Button>
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        className="w-full"
+                        onClick={handleRegenerateAudio}
+                        disabled={isRegeneratingAudio}
+                    >
+                        {isRegeneratingAudio ? (
+                            <Loader2 className="h-4 w-4 animate-spin mr-2" />
+                        ) : null}
+                        重新生成音频
+                    </Button>
+                </div>
+            )}
+        </div>
+    )
+}
+
--- a/frontend/src/app/favicon.ico
+++ b/frontend/src/app/favicon.ico
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -0,0 +1,125 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        suppressHydrationWarning
+      >
+        {children}
+      </body>
+    </html>
+  );
+}
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -0,0 +1,65 @@
+import Image from "next/image";
+
+export default function Home() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+        <Image
+          className="dark:invert"
+          src="/next.svg"
+          alt="Next.js logo"
+          width={100}
+          height={20}
+          priority
+        />
+        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
+            To get started, edit the page.tsx file.
+          </h1>
+          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
+            Looking for a starting point or more instructions? Head over to{" "}
+            <a
+              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+              className="font-medium text-zinc-950 dark:text-zinc-50"
+            >
+              Templates
+            </a>{" "}
+            or the{" "}
+            <a
+              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+              className="font-medium text-zinc-950 dark:text-zinc-50"
+            >
+              Learning
+            </a>{" "}
+            center.
+          </p>
+        </div>
+        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
+          <a
+            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
+            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              className="dark:invert"
+              src="/vercel.svg"
+              alt="Vercel logomark"
+              width={16}
+              height={16}
+            />
+            Deploy Now
+          </a>
+          <a
+            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
+            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Documentation
+          </a>
+        </div>
+      </main>
+    </div>
+  );
+}
--- a/frontend/src/components/preview/index.ts
+++ b/frontend/src/components/preview/index.ts
@@ -0,0 +1 @@
+export { PreviewPlayer } from './preview-player'
--- a/frontend/src/components/preview/preview-player.tsx
+++ b/frontend/src/components/preview/preview-player.tsx
@@ -0,0 +1,176 @@
+'use client'
+
+import { useEffect, useRef, useCallback } from 'react'
+import { Play, Pause, SkipBack, SkipForward, Maximize } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Slider } from '@/components/ui/slider'
+import { useEditorStore } from '@/stores/editor-store'
+
+export function PreviewPlayer() {
+    const {
+        storyboard,
+        isPlaying,
+        currentTime,
+        setPlaying,
+        setCurrentTime,
+        selectedFrameId,
+        setSelectedFrameId
+    } = useEditorStore()
+
+    const timerRef = useRef<NodeJS.Timeout | null>(null)
+
+    // Get current frame based on currentTime
+    const getCurrentFrameIndex = useCallback(() => {
+        if (!storyboard?.frames.length) return 0
+        let elapsed = 0
+        for (let i = 0; i < storyboard.frames.length; i++) {
+            elapsed += storyboard.frames[i].duration
+            if (currentTime < elapsed) return i
+        }
+        return storyboard.frames.length - 1
+    }, [storyboard, currentTime])
+
+    // Update selected frame when time changes during playback
+    useEffect(() => {
+        if (isPlaying && storyboard?.frames.length) {
+            const frameIndex = getCurrentFrameIndex()
+            const frame = storyboard.frames[frameIndex]
+            if (frame && frame.id !== selectedFrameId) {
+                setSelectedFrameId(frame.id)
+            }
+        }
+    }, [currentTime, isPlaying, storyboard, selectedFrameId, setSelectedFrameId, getCurrentFrameIndex])
+
+    // Playback timer
+    useEffect(() => {
+        if (isPlaying) {
+            timerRef.current = setInterval(() => {
+                setCurrentTime((prev: number) => {
+                    const totalDuration = storyboard?.totalDuration || 0
+                    if (prev >= totalDuration) {
+                        setPlaying(false)
+                        return 0
+                    }
+                    return prev + 0.1
+                })
+            }, 100)
+        } else {
+            if (timerRef.current) {
+                clearInterval(timerRef.current)
+                timerRef.current = null
+            }
+        }
+        return () => {
+            if (timerRef.current) {
+                clearInterval(timerRef.current)
+            }
+        }
+    }, [isPlaying, storyboard, setCurrentTime, setPlaying])
+
+    const selectedFrame = storyboard?.frames.find((f) => f.id === selectedFrameId)
+
+    const formatTime = (seconds: number) => {
+        const mins = Math.floor(seconds / 60)
+        const secs = Math.floor(seconds % 60)
+        return `${mins}:${secs.toString().padStart(2, '0')}`
+    }
+
+    // Navigate to previous/next frame
+    const goToPrevFrame = () => {
+        if (!storyboard?.frames.length) return
+        const currentIndex = storyboard.frames.findIndex(f => f.id === selectedFrameId)
+        if (currentIndex > 0) {
+            const prevFrame = storyboard.frames[currentIndex - 1]
+            setSelectedFrameId(prevFrame.id)
+            // Calculate time for this frame
+            let time = 0
+            for (let i = 0; i < currentIndex - 1; i++) {
+                time += storyboard.frames[i].duration
+            }
+            setCurrentTime(time)
+        }
+    }
+
+    const goToNextFrame = () => {
+        if (!storyboard?.frames.length) return
+        const currentIndex = storyboard.frames.findIndex(f => f.id === selectedFrameId)
+        if (currentIndex < storyboard.frames.length - 1) {
+            const nextFrame = storyboard.frames[currentIndex + 1]
+            setSelectedFrameId(nextFrame.id)
+            // Calculate time for this frame
+            let time = 0
+            for (let i = 0; i <= currentIndex; i++) {
+                time += storyboard.frames[i].duration
+            }
+            setCurrentTime(time)
+        }
+    }
+
+    return (
+        <div className="flex flex-col h-full">
+            {/* Video/Image Preview Area - Fixed height */}
+            <div className="flex-1 min-h-0 flex items-center justify-center bg-black">
+                {selectedFrame?.imagePath ? (
+                    <img
+                        src={selectedFrame.imagePath}
+                        alt="Preview"
+                        className="max-h-full max-w-full object-contain"
+                    />
+                ) : (
+                    <div className="text-muted-foreground text-center">
+                        <p className="text-lg mb-2">预览区域</p>
+                        <p className="text-sm">选择分镜查看预览</p>
+                    </div>
+                )}
+            </div>
+
+            {/* Playback Controls - Fixed at bottom */}
+            <div className="flex-shrink-0 bg-background/90 backdrop-blur p-4 space-y-3 border-t">
+                {/* Progress bar */}
+                <div className="flex items-center gap-3">
+                    <span className="text-xs text-muted-foreground w-12">
+                        {formatTime(currentTime)}
+                    </span>
+                    <Slider
+                        value={[currentTime]}
+                        min={0}
+                        max={storyboard?.totalDuration || 100}
+                        step={0.1}
+                        onValueChange={([value]) => setCurrentTime(value)}
+                        className="flex-1"
+                    />
+                    <span className="text-xs text-muted-foreground w-12 text-right">
+                        {formatTime(storyboard?.totalDuration || 0)}
+                    </span>
+                </div>
+
+                {/* Control buttons */}
+                <div className="flex items-center justify-center gap-2">
+                    <Button variant="ghost" size="icon" onClick={goToPrevFrame}>
+                        <SkipBack className="h-4 w-4" />
+                    </Button>
+                    <Button
+                        variant="outline"
+                        size="icon"
+                        className="h-10 w-10"
+                        onClick={() => setPlaying(!isPlaying)}
+                    >
+                        {isPlaying ? (
+                            <Pause className="h-5 w-5" />
+                        ) : (
+                            <Play className="h-5 w-5 ml-0.5" />
+                        )}
+                    </Button>
+                    <Button variant="ghost" size="icon" onClick={goToNextFrame}>
+                        <SkipForward className="h-4 w-4" />
+                    </Button>
+                    <div className="flex-1" />
+                    <Button variant="ghost" size="icon">
+                        <Maximize className="h-4 w-4" />
+                    </Button>
+                </div>
+            </div>
+        </div>
+    )
+}
+
--- a/frontend/src/components/timeline/frame-card.tsx
+++ b/frontend/src/components/timeline/frame-card.tsx
@@ -0,0 +1,95 @@
+'use client'
+
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { GripVertical, Clock, Image as ImageIcon } from 'lucide-react'
+import { Card, CardContent, CardHeader } from '@/components/ui/card'
+import { Slider } from '@/components/ui/slider'
+import { cn } from '@/lib/utils'
+import { StoryboardFrame, useEditorStore } from '@/stores/editor-store'
+
+interface FrameCardProps {
+    frame: StoryboardFrame
+    isSelected: boolean
+}
+
+export function FrameCard({ frame, isSelected }: FrameCardProps) {
+    const { selectFrame, updateFrameDuration } = useEditorStore()
+
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+        isDragging,
+    } = useSortable({ id: frame.id })
+
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    }
+
+    return (
+        <Card
+            ref={setNodeRef}
+            style={style}
+            className={cn(
+                'cursor-pointer transition-all',
+                isSelected && 'ring-2 ring-primary',
+                isDragging && 'opacity-50 shadow-lg'
+            )}
+            onClick={() => selectFrame(frame.id)}
+        >
+            <CardHeader className="p-3 pb-2 flex flex-row items-center gap-2">
+                <button
+                    {...attributes}
+                    {...listeners}
+                    className="cursor-grab active:cursor-grabbing p-1 hover:bg-muted rounded"
+                >
+                    <GripVertical className="h-4 w-4 text-muted-foreground" />
+                </button>
+                <span className="text-sm font-medium">分镜 {frame.order + 1}</span>
+            </CardHeader>
+
+            <CardContent className="p-3 pt-0 space-y-3">
+                {/* Thumbnail */}
+                <div className="aspect-video bg-muted rounded-md flex items-center justify-center overflow-hidden">
+                    {frame.imagePath ? (
+                        <img
+                            src={frame.imagePath}
+                            alt={`Frame ${frame.order + 1}`}
+                            className="object-cover w-full h-full"
+                        />
+                    ) : (
+                        <ImageIcon className="h-8 w-8 text-muted-foreground" />
+                    )}
+                </div>
+
+                {/* Narration */}
+                <p className="text-sm text-muted-foreground line-clamp-2">
+                    {frame.narration}
+                </p>
+
+                {/* Duration slider */}
+                <div className="space-y-1">
+                    <div className="flex items-center justify-between text-xs text-muted-foreground">
+                        <span className="flex items-center gap-1">
+                            <Clock className="h-3 w-3" />
+                            时长
+                        </span>
+                        <span>{frame.duration.toFixed(1)}s</span>
+                    </div>
+                    <Slider
+                        value={[frame.duration]}
+                        min={0.5}
+                        max={10}
+                        step={0.1}
+                        onValueChange={([value]) => updateFrameDuration(frame.id, value)}
+                        onClick={(e) => e.stopPropagation()}
+                    />
+                </div>
+            </CardContent>
+        </Card>
+    )
+}
--- a/frontend/src/components/timeline/index.ts
+++ b/frontend/src/components/timeline/index.ts
@@ -0,0 +1,2 @@
+export { Timeline } from './timeline'
+export { FrameCard } from './frame-card'
--- a/frontend/src/components/timeline/timeline.tsx
+++ b/frontend/src/components/timeline/timeline.tsx
@@ -0,0 +1,94 @@
+'use client'
+
+import {
+    DndContext,
+    closestCenter,
+    KeyboardSensor,
+    PointerSensor,
+    useSensor,
+    useSensors,
+    DragEndEvent,
+} from '@dnd-kit/core'
+import {
+    SortableContext,
+    sortableKeyboardCoordinates,
+    horizontalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
+import { useEditorStore } from '@/stores/editor-store'
+import { FrameCard } from './frame-card'
+
+export function Timeline() {
+    const { storyboard, selectedFrameId, reorderFrames } = useEditorStore()
+
+    const sensors = useSensors(
+        useSensor(PointerSensor, {
+            activationConstraint: {
+                distance: 8,
+            },
+        }),
+        useSensor(KeyboardSensor, {
+            coordinateGetter: sortableKeyboardCoordinates,
+        })
+    )
+
+    const handleDragEnd = (event: DragEndEvent) => {
+        const { active, over } = event
+
+        if (over && active.id !== over.id) {
+            const frames = storyboard?.frames || []
+            const oldIndex = frames.findIndex((f) => f.id === active.id)
+            const newIndex = frames.findIndex((f) => f.id === over.id)
+
+            if (oldIndex !== -1 && newIndex !== -1) {
+                reorderFrames(oldIndex, newIndex)
+            }
+        }
+    }
+
+    if (!storyboard || storyboard.frames.length === 0) {
+        return (
+            <div className="h-64 flex items-center justify-center text-muted-foreground border-t">
+                <p>暂无分镜，请先生成视频</p>
+            </div>
+        )
+    }
+
+    const sortedFrames = [...storyboard.frames].sort((a, b) => a.order - b.order)
+
+    return (
+        <div className="border-t bg-muted/30">
+            <div className="p-4 border-b flex items-center justify-between">
+                <h3 className="font-semibold">时间轴</h3>
+                <span className="text-sm text-muted-foreground">
+                    {storyboard.frames.length} 个分镜 · 总时长 {storyboard.totalDuration.toFixed(1)}s
+                </span>
+            </div>
+
+            <ScrollArea className="w-full">
+                <DndContext
+                    sensors={sensors}
+                    collisionDetection={closestCenter}
+                    onDragEnd={handleDragEnd}
+                >
+                    <SortableContext
+                        items={sortedFrames.map((f) => f.id)}
+                        strategy={horizontalListSortingStrategy}
+                    >
+                        <div className="flex gap-4 p-4">
+                            {sortedFrames.map((frame) => (
+                                <div key={frame.id} className="w-64 flex-shrink-0">
+                                    <FrameCard
+                                        frame={frame}
+                                        isSelected={frame.id === selectedFrameId}
+                                    />
+                                </div>
+                            ))}
+                        </div>
+                    </SortableContext>
+                </DndContext>
+                <ScrollBar orientation="horizontal" />
+            </ScrollArea>
+        </div>
+    )
+}
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -0,0 +1,62 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
--- a/frontend/src/components/ui/card.tsx
+++ b/frontend/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
--- a/frontend/src/components/ui/scroll-area.tsx
+++ b/frontend/src/components/ui/scroll-area.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }
--- a/frontend/src/components/ui/separator.tsx
+++ b/frontend/src/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
--- a/frontend/src/components/ui/slider.tsx
+++ b/frontend/src/components/ui/slider.tsx
@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }
--- a/frontend/src/services/editor-api.ts
+++ b/frontend/src/services/editor-api.ts
@@ -0,0 +1,198 @@
+/**
+ * Editor API client for connecting to FastAPI backend
+ */
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api'
+
+export interface StoryboardFrame {
+    id: string
+    index: number
+    order: number
+    narration: string
+    image_prompt?: string
+    image_path?: string
+    audio_path?: string
+    video_segment_path?: string
+    duration: number
+}
+
+export interface Storyboard {
+    id: string
+    title: string
+    frames: StoryboardFrame[]
+    total_duration: number
+    final_video_path?: string
+    created_at?: string
+}
+
+export interface PreviewResponse {
+    preview_path: string
+    duration: number
+    frames_count: number
+}
+
+class EditorApiClient {
+    private baseUrl: string
+
+    constructor(baseUrl: string = API_BASE) {
+        this.baseUrl = baseUrl
+    }
+
+    /**
+     * Fetch storyboard by ID
+     */
+    async getStoryboard(storyboardId: string): Promise<Storyboard> {
+        const response = await fetch(`${this.baseUrl}/editor/storyboard/${storyboardId}`)
+
+        if (!response.ok) {
+            throw new Error(`Failed to fetch storyboard: ${response.statusText}`)
+        }
+
+        return response.json()
+    }
+
+    /**
+     * Reorder frames in storyboard
+     */
+    async reorderFrames(storyboardId: string, order: string[]): Promise<Storyboard> {
+        const response = await fetch(`${this.baseUrl}/editor/storyboard/${storyboardId}/reorder`, {
+            method: 'PATCH',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ order }),
+        })
+
+        if (!response.ok) {
+            throw new Error(`Failed to reorder frames: ${response.statusText}`)
+        }
+
+        return response.json()
+    }
+
+    /**
+     * Update frame duration
+     */
+    async updateFrameDuration(
+        storyboardId: string,
+        frameId: string,
+        duration: number
+    ): Promise<StoryboardFrame> {
+        const response = await fetch(
+            `${this.baseUrl}/editor/storyboard/${storyboardId}/frames/${frameId}/duration`,
+            {
+                method: 'PATCH',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ duration }),
+            }
+        )
+
+        if (!response.ok) {
+            throw new Error(`Failed to update duration: ${response.statusText}`)
+        }
+
+        return response.json()
+    }
+
+    /**
+     * Generate preview video
+     */
+    async generatePreview(
+        storyboardId: string,
+        startFrame?: number,
+        endFrame?: number
+    ): Promise<PreviewResponse> {
+        const response = await fetch(`${this.baseUrl}/editor/storyboard/${storyboardId}/preview`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                start_frame: startFrame ?? 0,
+                end_frame: endFrame,
+            }),
+        })
+
+        if (!response.ok) {
+            throw new Error(`Failed to generate preview: ${response.statusText}`)
+        }
+
+        return response.json()
+    }
+
+    /**
+     * Update frame content (narration and/or image prompt)
+     */
+    async updateFrame(
+        storyboardId: string,
+        frameId: string,
+        data: { narration?: string; image_prompt?: string }
+    ): Promise<{ id: string; narration: string; image_prompt?: string; updated: boolean }> {
+        const response = await fetch(
+            `${this.baseUrl}/editor/storyboard/${storyboardId}/frames/${frameId}`,
+            {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(data),
+            }
+        )
+
+        if (!response.ok) {
+            const error = await response.json().catch(() => ({ detail: response.statusText }))
+            throw new Error(error.detail || `Failed to update frame: ${response.statusText}`)
+        }
+
+        return response.json()
+    }
+
+    /**
+     * Regenerate image for a frame
+     */
+    async regenerateImage(
+        storyboardId: string,
+        frameId: string,
+        imagePrompt?: string
+    ): Promise<{ image_path: string; success: boolean }> {
+        const response = await fetch(
+            `${this.baseUrl}/editor/storyboard/${storyboardId}/frames/${frameId}/regenerate-image`,
+            {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ image_prompt: imagePrompt }),
+            }
+        )
+
+        if (!response.ok) {
+            const error = await response.json().catch(() => ({ detail: response.statusText }))
+            throw new Error(error.detail || `Failed to regenerate image: ${response.statusText}`)
+        }
+
+        return response.json()
+    }
+
+    /**
+     * Regenerate audio for a frame
+     */
+    async regenerateAudio(
+        storyboardId: string,
+        frameId: string,
+        narration?: string,
+        voice?: string
+    ): Promise<{ audio_path: string; duration: number; success: boolean }> {
+        const response = await fetch(
+            `${this.baseUrl}/editor/storyboard/${storyboardId}/frames/${frameId}/regenerate-audio`,
+            {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ narration, voice }),
+            }
+        )
+
+        if (!response.ok) {
+            const error = await response.json().catch(() => ({ detail: response.statusText }))
+            throw new Error(error.detail || `Failed to regenerate audio: ${response.statusText}`)
+        }
+
+        return response.json()
+    }
+}
+
+// Export singleton instance
+export const editorApi = new EditorApiClient()
+
--- a/frontend/src/stores/editor-store.ts
+++ b/frontend/src/stores/editor-store.ts
@@ -0,0 +1,122 @@
+import { create } from 'zustand'
+
+export interface StoryboardFrame {
+  id: string
+  index: number
+  narration: string
+  imagePrompt: string
+  imagePath?: string
+  audioPath?: string
+  duration: number
+  order: number
+}
+
+export interface Storyboard {
+  id: string
+  title: string
+  frames: StoryboardFrame[]
+  totalDuration: number
+}
+
+interface EditorState {
+  storyboard: Storyboard | null
+  selectedFrameId: string | null
+  isPlaying: boolean
+  currentTime: number
+
+  // Actions
+  setStoryboard: (storyboard: Storyboard) => void
+  selectFrame: (frameId: string | null) => void
+  setSelectedFrameId: (frameId: string | null) => void // Alias for selectFrame
+  reorderFrames: (fromIndex: number, toIndex: number) => void
+  updateFrameDuration: (frameId: string, duration: number) => void
+  updateFrame: (frameId: string, updates: Partial<StoryboardFrame>) => void
+  setPlaying: (playing: boolean) => void
+  setCurrentTime: (time: number | ((prev: number) => number)) => void
+}
+
+export const useEditorStore = create<EditorState>((set, get) => ({
+  storyboard: null,
+  selectedFrameId: null,
+  isPlaying: false,
+  currentTime: 0,
+
+  setStoryboard: (storyboard) => set({ storyboard }),
+
+  selectFrame: (frameId) => set({ selectedFrameId: frameId }),
+
+  setSelectedFrameId: (frameId) => set({ selectedFrameId: frameId }),
+
+  reorderFrames: (fromIndex, toIndex) => {
+    const { storyboard } = get()
+    if (!storyboard) return
+
+    const frames = [...storyboard.frames]
+    const [removed] = frames.splice(fromIndex, 1)
+    frames.splice(toIndex, 0, removed)
+
+    // Update order values
+    const reorderedFrames = frames.map((frame, idx) => ({
+      ...frame,
+      order: idx,
+    }))
+
+    set({
+      storyboard: {
+        ...storyboard,
+        frames: reorderedFrames,
+      },
+    })
+  },
+
+  updateFrameDuration: (frameId, duration) => {
+    const { storyboard } = get()
+    if (!storyboard) return
+
+    const frames = storyboard.frames.map((frame) =>
+      frame.id === frameId ? { ...frame, duration } : frame
+    )
+
+    const totalDuration = frames.reduce((sum, f) => sum + f.duration, 0)
+
+    set({
+      storyboard: {
+        ...storyboard,
+        frames,
+        totalDuration,
+      },
+    })
+  },
+
+  updateFrame: (frameId, updates) => {
+    const { storyboard } = get()
+    if (!storyboard) return
+
+    const frames = storyboard.frames.map((frame) =>
+      frame.id === frameId ? { ...frame, ...updates } : frame
+    )
+
+    const totalDuration = frames.reduce((sum, f) => sum + f.duration, 0)
+
+    set({
+      storyboard: {
+        ...storyboard,
+        frames,
+        totalDuration,
+      },
+    })
+  },
+
+  setPlaying: (playing) => set({ isPlaying: playing }),
+
+  setCurrentTime: (time) => {
+    if (typeof time === 'function') {
+      const { currentTime } = get()
+      set({ currentTime: time(currentTime) })
+    } else {
+      set({ currentTime: time })
+    }
+  },
+}))
+
+
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}
				`@@ -0,0 +1 @@`
				`<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>`
				`@@ -0,0 +1 @@`
				<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
				`@@ -0,0 +1 @@`
				`<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>`
				`@@ -0,0 +1 @@`
				`export { PreviewPlayer } from './preview-player'`