-
- )
-}
-```
-
-**ファイル2**: `app/(editor)/layout.tsx`
-
-```typescript
-import { ReactNode } from 'react'
-import { redirect } from 'next/navigation'
-import { createClient } from '@/lib/supabase/server'
-
-export default async function EditorLayout({ children }: { children: ReactNode }) {
- const supabase = await createClient()
- const { data: { user } } = await supabase.auth.getUser()
-
- if (!user) {
- redirect('/login')
- }
-
- return (
-
- {children}
-
-
- {children}
-
- )
-}
-```
-
-**ファイル3**: `app/(auth)/login/page.tsx`（サンプル認証ページ）
-
-```typescript
-'use client'
-
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { createClient } from '@/lib/supabase/client'
-
-export default function LoginPage() {
- const supabase = createClient()
-
- const handleGoogleLogin = async () => {
- await supabase.auth.signInWithOAuth({
- provider: 'google',
- options: {
- redirectTo: `${window.location.origin}/auth/callback`,
- },
- })
- }
-
- return (
-
-
- エラーが発生しました
-
- {error.message || '予期しないエラーが発生しました。'}
-
-
-
-
- )
-}
-```
-
-**ファイル2**: `app/loading.tsx`
-
-```typescript
-import { Skeleton } from '@/components/ui/skeleton'
-
-export default function Loading() {
- return (
-
-
- )
-}
-```
-
-**ファイル3**: `app/not-found.tsx`
-
-```typescript
-import Link from 'next/link'
-import { Button } from '@/components/ui/button'
-
-export default function NotFound() {
- return (
-
-
-
-
- )
-}
-```
-
----
-
-### T021: Adobe Premiere Pro風テーマ適用
-
-**ファイル**: `app/globals.css` の更新
-
-既存のファイルに以下を**追加**:
-
-```css
-/* Adobe Premiere Pro風ダークテーマ */
-:root {
- /* Premiere Pro カラーパレット */
- --premiere-bg-darkest: #1a1a1a;
- --premiere-bg-dark: #232323;
- --premiere-bg-medium: #2e2e2e;
- --premiere-bg-light: #3a3a3a;
-
- --premiere-accent-blue: #2196f3;
- --premiere-accent-teal: #1ee3cf;
-
- --premiere-text-primary: #d9d9d9;
- --premiere-text-secondary: #a8a8a8;
- --premiere-text-disabled: #666666;
-
- --premiere-border: #3e3e3e;
- --premiere-hover: #404040;
-
- /* Timeline colors */
- --timeline-video: #6366f1;
- --timeline-audio: #10b981;
- --timeline-ruler: #525252;
-
- /* シャドウ */
- --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
- --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.6);
- --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.7);
-}
-
-.dark {
- --background: var(--premiere-bg-dark);
- --foreground: var(--premiere-text-primary);
-
- --card: var(--premiere-bg-medium);
- --card-foreground: var(--premiere-text-primary);
-
- --primary: var(--premiere-accent-blue);
- --primary-foreground: #ffffff;
-
- --secondary: var(--premiere-bg-light);
- --secondary-foreground: var(--premiere-text-primary);
-
- --muted: var(--premiere-bg-light);
- --muted-foreground: var(--premiere-text-secondary);
-
- --accent: var(--premiere-accent-teal);
- --accent-foreground: var(--premiere-bg-darkest);
-
- --border: var(--premiere-border);
- --input: var(--premiere-bg-light);
- --ring: var(--premiere-accent-blue);
-}
-
-/* カスタムスクロールバー */
-::-webkit-scrollbar {
- width: 12px;
- height: 12px;
-}
-
-::-webkit-scrollbar-track {
- background: var(--premiere-bg-darkest);
-}
-
-::-webkit-scrollbar-thumb {
- background: var(--premiere-bg-light);
- border-radius: 6px;
-}
-
-::-webkit-scrollbar-thumb:hover {
- background: var(--premiere-hover);
-}
-
-/* タイムラインスタイル */
-.timeline-track {
- background: var(--premiere-bg-medium);
- border: 1px solid var(--premiere-border);
- border-radius: 4px;
-}
-
-.timeline-clip-video {
- background: var(--timeline-video);
- border-left: 2px solid rgba(255, 255, 255, 0.2);
-}
-
-.timeline-clip-audio {
- background: var(--timeline-audio);
- border-left: 2px solid rgba(255, 255, 255, 0.2);
-}
-
-/* プロパティパネル */
-.property-panel {
- background: var(--premiere-bg-medium);
- border-left: 1px solid var(--premiere-border);
-}
-
-.property-group {
- border-bottom: 1px solid var(--premiere-border);
- padding: 12px;
-}
-
-/* ツールバー */
-.toolbar {
- background: var(--premiere-bg-darkest);
- border-bottom: 1px solid var(--premiere-border);
- height: 48px;
- display: flex;
- align-items: center;
- padding: 0 16px;
- gap: 8px;
-}
-
-.toolbar-button {
- background: transparent;
- border: 1px solid transparent;
- color: var(--premiere-text-secondary);
- padding: 6px 12px;
- border-radius: 4px;
- transition: all 0.2s;
-}
-
-.toolbar-button:hover {
- background: var(--premiere-hover);
- color: var(--premiere-text-primary);
-}
-
-.toolbar-button.active {
- background: var(--premiere-accent-blue);
- color: white;
- border-color: var(--premiere-accent-blue);
-}
-
-/* メディアブラウザ */
-.media-browser {
- background: var(--premiere-bg-medium);
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
- gap: 8px;
- padding: 12px;
-}
-
-.media-item {
- aspect-ratio: 16/9;
- background: var(--premiere-bg-darkest);
- border: 1px solid var(--premiere-border);
- border-radius: 4px;
- overflow: hidden;
- cursor: pointer;
- transition: all 0.2s;
-}
-
-.media-item:hover {
- border-color: var(--premiere-accent-blue);
- transform: scale(1.05);
-}
-
-.media-item.selected {
- border-color: var(--premiere-accent-teal);
- border-width: 2px;
-}
-```
-
----
-
-## 📦 必要な依存関係の一括インストール
-
-Phase 2で必要な全パッケージを一括インストール:
-
-```bash
-cd /Users/teradakousuke/Developer/ProEdit
-
-npm install --legacy-peer-deps \
- @supabase/ssr \
- @supabase/supabase-js \
- zustand \
- pixi.js \
- @ffmpeg/ffmpeg \
- @ffmpeg/util
-
-npm install --legacy-peer-deps --save-dev \
- supabase
-```
-
----
-
-## ✅ Phase 2 完了チェックリスト
-
-Phase 2完了時に以下をすべて確認:
-
-### Supabase設定
-```bash
-[ ] lib/supabase/client.ts 作成済み
-[ ] lib/supabase/server.ts 作成済み
-[ ] lib/supabase/utils.ts 作成済み
-[ ] Supabaseダッシュボードで全テーブル作成確認
-[ ] RLSポリシーすべて適用確認
-[ ] media-filesバケット作成確認
-[ ] Google OAuth設定完了
-[ ] app/auth/callback/route.ts 作成済み
-```
-
-### コアライブラリ
-```bash
-[ ] stores/index.ts 作成済み（Zustand）
-[ ] lib/pixi/setup.ts 作成済み
-[ ] lib/ffmpeg/loader.ts 作成済み
-```
-
-### 型定義
-```bash
-[ ] types/effects.ts 作成済み
-[ ] types/project.ts 作成済み
-[ ] types/media.ts 作成済み
-[ ] types/supabase.ts 作成済み
-```
-
-### UI構造
-```bash
-[ ] app/(auth)/layout.tsx 作成済み
-[ ] app/(auth)/login/page.tsx 作成済み
-[ ] app/(editor)/layout.tsx 作成済み
-[ ] app/error.tsx 作成済み
-[ ] app/loading.tsx 作成済み
-[ ] app/not-found.tsx 作成済み
-[ ] app/globals.css にPremiere Pro風テーマ追加
-```
-
-### 動作確認
-```bash
-[ ] npm run dev 起動成功
-[ ] npm run lint エラーなし
-[ ] npm run type-check エラーなし
-[ ] http://localhost:3000/login にアクセス可能
-[ ] Googleログインボタン表示
-```
-
----
-
-## 🎬 次のチャットで最初に言うこと
-
-```markdown
-ProEdit MVP Phase 2の実装を開始します。
-
-HANDOVER_PHASE2.mdの内容に従って、Phase 2: Foundation（T007-T021）を実装してください。
-
-【実装手順】
-1. 依存関係の一括インストール
-2. Supabase設定（client, server, utils）
-3. データベースマイグレーション + RLSポリシー
-4. Storage設定 + Google OAuth
-5. コアライブラリ（Zustand, PIXI.js, FFmpeg）
-6. 型定義（effects, project, media, supabase）
-7. UIレイアウト + エラーハンドリング
-8. テーマ適用
-
-完了後、Phase 2完了チェックリストですべて確認してください。
-```
-
----
-
-## 🔧 トラブルシューティング
-
-### 問題1: npm installでpeer dependencyエラー
-
-**解決策**: 常に`--legacy-peer-deps`フラグを使用
-```bash
-npm install --legacy-peer-deps
-
- 404
-- ページが見つかりませんでした -
- -
- {/* ヘッダー */}
-
-```
-
----
-
-#### T026: プロジェクトServer Actions
-**ファイル**: `app/actions/projects.ts`
-
-**要件**:
-- `createProject(formData)`: 新規作成
-- `updateProject(projectId, formData)`: 更新
-- `deleteProject(projectId)`: 削除
-
-**実装ポイント**:
-```typescript
-'use server'
-
-const DEFAULT_PROJECT_SETTINGS = {
- width: 1920,
- height: 1080,
- fps: 30,
- aspectRatio: '16:9',
- bitrate: 9000,
- standard: '1080p',
-}
-
-export async function createProject(formData: FormData) {
- 1. name取得とバリデーション
- 2. ユーザー認証チェック
- 3. supabase.from('projects').insert({ user_id, name, settings: DEFAULT_PROJECT_SETTINGS })
- 4. revalidatePath('/editor')
- 5. redirect(`/editor/${project.id}`) ← 作成後すぐエディタへ
-}
-
-export async function updateProject(projectId: string, formData: FormData) {
- 1. name取得とバリデーション
- 2. ユーザー認証チェック
- 3. supabase.from('projects').update({ name, updated_at }).eq('id', projectId).eq('user_id', user.id)
- 4. revalidatePath('/editor')
- 5. { success: true } を返す
-}
-
-export async function deleteProject(projectId: string) {
- 1. ユーザー認証チェック
- 2. supabase.from('projects').delete().eq('id', projectId).eq('user_id', user.id)
- 3. revalidatePath('/editor')
- 4. { success: true } を返す
-}
-```
-
-**エラーハンドリング**:
-- 各関数で `{ error: string }` を返す
-- RLSにより自動的にuser_idチェック
-
----
-
-#### T027: 新規プロジェクトダイアログ
-**ファイル**: `components/projects/NewProjectDialog.tsx`
-
-**要件**:
-- shadcn/ui Dialog使用
-- プロジェクト名入力フォーム
-- 作成/キャンセルボタン
-- ローディング状態
-- sonner toast通知
-
-**実装ポイント**:
-```typescript
-'use client'
-
-export function NewProjectDialog({ children }: { children: React.ReactNode }) {
- const [open, setOpen] = useState(false)
- const [loading, setLoading] = useState(false)
-
- const handleSubmit = async (e) => {
- e.preventDefault()
- setLoading(true)
-
- const formData = new FormData(e.currentTarget)
- const result = await createProject(formData)
-
- if (result?.error) {
- toast.error('エラー', { description: result.error })
- setLoading(false)
- } else {
- setOpen(false)
- toast.success('成功', { description: 'プロジェクトを作成しました' })
- // redirect は createProject 内で実行される
- }
- }
-
- return (
-
- )
-}
-```
-
----
-
-#### T028: プロジェクトカード
-**ファイル**: `components/projects/ProjectCard.tsx`
-
-**要件**:
-- shadcn/ui Card使用
-- サムネイル表示（プレースホルダー）
-- プロジェクト名と更新日
-- DropdownMenu（編集・削除）
-- 削除確認AlertDialog
-- toast通知
-
-**実装ポイント**:
-```typescript
-'use client'
-
-interface Project {
- id: string
- name: string
- created_at: string
- updated_at: string
- settings: any
-}
-
-export function ProjectCard({ project }: { project: Project }) {
- const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
- const [deleting, setDeleting] = useState(false)
-
- const handleDelete = async () => {
- setDeleting(true)
- const result = await deleteProject(project.id)
-
- if (result?.error) {
- toast.error('エラー', { description: result.error })
- setDeleting(false)
- } else {
- toast.success('成功', { description: 'プロジェクトを削除しました' })
- }
- }
-
- const formatDate = (dateString: string) => {
- return new Date(dateString).toLocaleDateString('ja-JP', {
- year: 'numeric', month: 'short', day: 'numeric'
- })
- }
-
- return (
- <>
-
-
-
- {/* プロジェクト一覧 */}
- プロジェクト
-{projects.length} 個のプロジェクト
-
- {projects.length > 0 ? (
-
-
- {projects.map(project =>
- ) : (
- ...
- )}
-
-
- ▶
-
-
- {project.name}
-{formatDate(project.updated_at)}
-
- {/* ツールバー */}
-
- )
-}
-```
-
-**レイアウト寸法**:
-- ツールバー: `h-auto` (toolbar class)
-- プロパティパネル: `w-80` (320px)
-- タイムライン: `h-64` (256px)
-- プレビュー: `flex-1` (残り全て)
-
----
-
-#### T031: ローディングスケルトン
-**ファイル**: `app/(editor)/loading.tsx`（既存ファイルを更新）
-
-**要件**:
-- shadcn/ui Skeleton使用
-- エディタレイアウトに合わせたスケルトン
-- Suspense境界で自動表示
-
-**実装ポイント**:
-```typescript
-import { Skeleton } from '@/components/ui/skeleton'
-
-export default function EditorLoading() {
- return (
-
-
-
- {/* メインエリア */}
- {project.name}
-
- {/* プレビュー */}
-
-
- {/* タイムライン */}
-
-
-
- {/* プロパティパネル */}
-
-
- ▶
- メディアを追加してプレビューを開始
-
-
-
-
- プロジェクト設定
-
-
-
- 解像度:
- {settings.width || 1920} × {settings.height || 1080}
-
-
- FPS:
- {settings.fps || 30}
-
-
- アスペクト比:
- {settings.aspectRatio || '16:9'}
-
-
-
-
-
- タイムライン（Phase 4で実装）
-
- {/* ツールバースケルトン */}
-
- )
-}
-```
-
----
-
-#### T032: エディタレイアウト更新（Toast + ログアウト）
-**ファイル**: `app/(editor)/layout.tsx`（既存ファイルを更新）
-
-**要件**:
-- Toaster コンポーネント追加
-- トップバーにユーザー情報とログアウトボタン
-- 認証チェック
-
-**実装ポイント**:
-```typescript
-import { ReactNode } from 'react'
-import { redirect } from 'next/navigation'
-import { createClient } from '@/lib/supabase/server'
-import { Toaster } from 'sonner'
-import { signOut } from '@/app/actions/auth'
-import { Button } from '@/components/ui/button'
-import { LogOut } from 'lucide-react'
-
-export default async function EditorLayout({ children }: { children: ReactNode }) {
- const supabase = await createClient()
- const { data: { user } } = await supabase.auth.getUser()
-
- if (!user) {
- redirect('/login')
- }
-
- return (
-
-
-
- {/* メインエリア */}
-
- {/* プレビュー */}
-
-
- {/* タイムライン */}
-
-
-
- {/* プロパティパネル */}
-
-
-
-
-
-
-
- {/* トップバー */}
-
- )
-}
-```
-
-**注意点**:
-- Toaster は sonner から import
-- ログアウトボタンは form action として Server Action を使用
-- トップバーは h-12 固定
-
----
-
-## 🔧 追加設定
-
-### Sonner Toast設定
-**必要なインポート**:
-```typescript
-import { toast } from 'sonner'
-import { Toaster } from 'sonner'
-```
-
-**使用方法**:
-```typescript
-// 成功
-toast.success('成功', { description: 'メッセージ' })
-
-// エラー
-toast.error('エラー', { description: 'エラーメッセージ' })
-
-// 情報
-toast.info('情報', { description: 'メッセージ' })
-```
-
----
-
-## ✅ Phase 3 完了チェックリスト
-
-実装完了後、以下をすべて確認してください：
-
-### 型チェックとLint
-```bash
-[ ] npm run type-check - エラーなし
-[ ] npm run lint - エラーなし
-[ ] npm run dev - 起動成功
-```
-
-### 機能テスト
-```bash
-[ ] http://localhost:3000/login にアクセス可能
-[ ] Googleログインボタン表示
-[ ] Googleログインボタンクリック → OAuth フロー開始
-[ ] OAuth完了後 /editor にリダイレクト
-[ ] ダッシュボードで「プロジェクトがありません」表示（初回）
-[ ] 「新規プロジェクト」ボタンクリック → ダイアログ表示
-[ ] プロジェクト名入力 → 作成成功
-[ ] Toast通知「プロジェクトを作成しました」表示
-[ ] /editor/[projectId] にリダイレクト
-[ ] エディタページで3パネルレイアウト表示
-[ ] プロジェクト設定パネルに解像度・FPS表示
-[ ] ブラウザバック → ダッシュボードに戻る
-[ ] プロジェクトカード表示
-[ ] プロジェクトカードの「・・・」メニュー → 削除クリック
-[ ] 削除確認ダイアログ表示
-[ ] 削除実行 → Toast通知「プロジェクトを削除しました」
-[ ] プロジェクトがダッシュボードから消える
-[ ] トップバーのログアウトボタンクリック
-[ ] /login にリダイレクト
-```
-
-### データベース確認
-```sql
--- Supabase Dashboard > SQL Editor で実行
-
--- プロジェクトが正しく作成されているか
-SELECT id, name, user_id, created_at, updated_at
-FROM projects
-ORDER BY created_at DESC
-LIMIT 5;
-
--- RLSが正しく動作しているか（自分のプロジェクトのみ表示）
--- → ダッシュボードで他のユーザーのプロジェクトが見えないことを確認
-```
-
----
-
-## 🐛 トラブルシューティング
-
-### 問題1: Google OAuth が動作しない
-
-**確認事項**:
-```bash
-1. Supabase Dashboard > Authentication > Providers
- - Google が有効化されているか
- - Client ID と Client Secret が設定されているか
-
-2. Google Cloud Console
- - 承認済みリダイレクトURI に以下が含まれているか:
- https://blvcuxxwiykgcbsduhbc.supabase.co/auth/v1/callback
- http://localhost:3000/auth/callback
-
-3. エラーログ確認:
- - ブラウザコンソール
- - ターミナル（Next.jsサーバーログ）
-```
-
-### 問題2: プロジェクトが作成できない
-
-**確認事項**:
-```bash
-1. データベーステーブル確認:
- SELECT * FROM projects LIMIT 1;
-
-2. RLS確認:
- SELECT auth.uid(); -- 現在のユーザーID
-
-3. エラーログ:
- - ブラウザコンソール
- - ターミナル
- - Supabase Dashboard > Logs
-```
-
-### 問題3: Toast通知が表示されない
-
-**確認事項**:
-```typescript
-1. app/(editor)/layout.tsx に
-
-
- {/* メインコンテンツ */}
- ProEdit
-
-
- {user.email}
-
-
-
-
- {children}
-
-
- {/* Toast通知 */}
-
+
+ )
+}
+```
+
+3. **app/editor/[projectId]/EditorClient.tsx** - TextEditor統合
+```typescript
+// TextEditorコンポーネントを追加
+import { TextEditor } from '@/features/effects/components/TextEditor'
+
+// Stateに追加
+const [textEditorOpen, setTextEditorOpen] = useState(false)
+const [selectedTextEffect, setSelectedTextEffect] = useState
+
+ )
+}
+```
+
+##### T079: Canvas統合（60-90分）
+
+**ファイル**: `features/compositor/utils/Compositor.ts`
+
+```typescript
+import { TextManager } from '../managers/TextManager'
+
+export class Compositor {
+ private textManager: TextManager
+
+ constructor(...) {
+ // ...existing code...
+ this.textManager = new TextManager(app, this.updateTextEffect.bind(this))
+ }
+
+ async composeEffects(effects: Effect[], timecode: number): Promise
+ {/* Preview Area - ✅ Phase 5実装 */}
+ {
+ setTextEditorOpen(false)
+ setSelectedTextEffect(null)
+ }}
+ />
+
+ {/* Phase 9: Auto-save UI */}
+ {
+ if (syncManagerRef.current) {
+ void syncManagerRef.current.handleConflictResolution(strategy)
+ }
+ setShowConflictDialog(false)
+ setConflict(null)
+ }}
+ onClose={() => {
+ setShowConflictDialog(false)
+ setConflict(null)
+ }}
+ />
+
+ {/* Phase 9: Recovery Modal */}
+ {
+ console.log('[Editor] Recovering unsaved changes')
+ localStorage.removeItem(`proedit_recovery_${project.id}`)
+ setShowRecoveryModal(false)
+ toast.success('Changes recovered successfully')
+ }}
+ onDiscard={() => {
+ console.log('[Editor] Discarding unsaved changes')
+ localStorage.removeItem(`proedit_recovery_${project.id}`)
+ setShowRecoveryModal(false)
+ }}
+ />
+
+ )
+}
diff --git a/app/editor/[projectId]/page.tsx b/app/editor/[projectId]/page.tsx
index 535ce1f..8e9d433 100644
--- a/app/editor/[projectId]/page.tsx
+++ b/app/editor/[projectId]/page.tsx
@@ -1,6 +1,7 @@
import { redirect } from "next/navigation";
import { getUser } from "@/app/actions/auth";
import { getProject } from "@/app/actions/projects";
+import { EditorClient } from "./EditorClient";
interface EditorPageProps {
params: Promise<{
@@ -22,49 +23,6 @@ export default async function EditorPage({ params }: EditorPageProps) {
redirect("/");
}
- return (
-
+
+
+
+
+ {/* Playback Controls */}
+
+
+
+ {/* Media Library Panel */}
+
+
+
+ {/* Phase 9: Conflict Resolution Dialog */}
+
- {/* Preview Area */}
-
- );
+ // Server Component delegates to Client Component for UI
+ return
-
-
- {/* Timeline Area */}
-
-
-
-
-
-
-
- {project.name}
-- {project.settings.width}x{project.settings.height} • {project.settings.fps}fps -
-- Start by adding media files to your timeline -
-
-
-
-
-
-
- Timeline
-- Media panel and timeline controls coming soon -
-+ This project was modified in another tab or device. Choose which + version to keep: +
+ +
+ {/* Local changes */}
+
+
+
+
+
+ {/* Remote changes */}
+
+
+
+ Your changes
+
+
+ Modified at {formatTime(conflict.localTimestamp)}
+
+
+ Changes made in this tab
+
+
+
+
+
+
+ Other changes
+
+
+ Modified at {formatTime(conflict.remoteTimestamp)}
+
+
+ Changes from another tab or device
+
+ + Warning: The version you don't choose will be lost. +
+
+ Unsaved Changes Detected
+
+
+
+
+ + We found unsaved changes from your previous editing session. Would + you like to recover them? +
+ + {lastSavedDate && ( +
+
+ )}
+
+
+
+ Last auto-save
+
+ {formatDate(lastSavedDate)}
+
+ + This might happen if your browser crashed or you accidentally + closed the tab. Your work is protected by auto-save every 5 + seconds. +
+
+
+ );
+}
+
+/**
+ * Format relative time (e.g., "2 minutes ago")
+ */
+function formatRelativeTime(date: Date): string {
+ const now = new Date();
+ const diffMs = now.getTime() - date.getTime();
+ const diffSec = Math.floor(diffMs / 1000);
+
+ if (diffSec < 10) return "just now";
+ if (diffSec < 60) return `${diffSec} seconds ago`;
+
+ const diffMin = Math.floor(diffSec / 60);
+ if (diffMin < 60) return `${diffMin} minute${diffMin > 1 ? "s" : ""} ago`;
+
+ const diffHour = Math.floor(diffMin / 60);
+ if (diffHour < 24)
+ return `${diffHour} hour${diffHour > 1 ? "s" : ""} ago`;
+
+ const diffDay = Math.floor(diffHour / 24);
+ return `${diffDay} day${diffDay > 1 ? "s" : ""} ago`;
+}
+
+/**
+ * Compact version for toolbar
+ */
+export function SaveIndicatorCompact({
+ status,
+ className,
+}: {
+ status: SaveStatus;
+ className?: string;
+}) {
+ const getIcon = () => {
+ switch (status) {
+ case "saved":
+ return
+ {display.icon}
+
+ {display.text}
+
+
+
+ {display.subtext && (
+ {display.subtext}
+ )}
+
+ {getIcon()}
+
+ );
+}
+
+function getStatusTitle(status: SaveStatus): string {
+ switch (status) {
+ case "saved":
+ return "All changes saved";
+ case "saving":
+ return "Saving changes...";
+ case "error":
+ return "Save failed - click to retry";
+ case "offline":
+ return "Offline - changes will sync when connection is restored";
+ }
+}
diff --git a/CLAUDE.md b/docs/CLAUDE.md
similarity index 100%
rename from CLAUDE.md
rename to docs/CLAUDE.md
diff --git a/docs/DEVELOPMENT_GUIDE.md b/docs/DEVELOPMENT_GUIDE.md
new file mode 100644
index 0000000..7b7abf2
--- /dev/null
+++ b/docs/DEVELOPMENT_GUIDE.md
@@ -0,0 +1,391 @@
+# ProEdit 開発ガイド
+
+> **対象**: 開発チームメンバー
+> **最終更新**: 2025-10-14
+
+---
+
+## 🚀 開発開始手順
+
+### **1. プロジェクトセットアップ**
+
+```bash
+# リポジトリクローン
+git clone ${content}
`
+
+ // ProEdit (React)
+ return {content}
// ✅ JSX
+ ```
+
+---
+
+## 🧪 テスト戦略
+
+### **テストの種類**
+
+1. **ユニットテスト** (`tests/unit/`)
+ - ビジネスロジックのテスト
+ - 例: placement logic, hash calculation
+
+2. **統合テスト** (`tests/integration/`)
+ - コンポーネント間の連携テスト
+ - 例: MediaCard → Timeline追加フロー
+
+3. **E2Eテスト** (`tests/e2e/`)
+ - エンドツーエンドシナリオ
+ - 例: ログイン → アップロード → 編集 → エクスポート
+
+### **テスト作成ガイドライン**
+
+```typescript
+// tests/unit/example.test.ts
+import { describe, it, expect } from 'vitest'
+import { functionToTest } from '@/features/module/utils/function'
+
+describe('FunctionName', () => {
+ it('should do something when condition', () => {
+ // Arrange
+ const input = { /* ... */ }
+
+ // Act
+ const result = functionToTest(input)
+
+ // Assert
+ expect(result).toBe(expectedValue)
+ })
+})
+```
+
+**カバレッジ目標**: 70%以上（Constitution要件）
+
+---
+
+## 🔧 便利なコマンド
+
+### **開発中**
+
+```bash
+# 型チェック（リアルタイム）
+npm run type-check
+
+# テスト（ウォッチモード）
+npm run test:watch
+
+# Lint修正
+npm run lint -- --fix
+
+# フォーマット
+npm run format
+```
+
+### **デバッグ**
+
+```bash
+# Supabaseローカル起動
+supabase start
+
+# データベースリセット
+supabase db reset
+
+# マイグレーション生成
+supabase migration new
+ {!isReady && (
+
+ )
+}
diff --git a/features/compositor/components/FPSCounter.tsx b/features/compositor/components/FPSCounter.tsx
new file mode 100644
index 0000000..0fa0147
--- /dev/null
+++ b/features/compositor/components/FPSCounter.tsx
@@ -0,0 +1,20 @@
+'use client'
+
+import { useCompositorStore } from '@/stores/compositor'
+
+export function FPSCounter() {
+ const { actualFps, fps } = useCompositorStore()
+
+ const getFpsColor = () => {
+ if (actualFps >= fps * 0.9) return 'text-green-500'
+ if (actualFps >= fps * 0.7) return 'text-yellow-500'
+ return 'text-red-500'
+ }
+
+ return (
+
+
+ )}
+ Initializing canvas...
+
+ {actualFps.toFixed(1)} fps
+ / {fps} fps target
+
+ )
+}
diff --git a/features/compositor/components/PlaybackControls.tsx b/features/compositor/components/PlaybackControls.tsx
new file mode 100644
index 0000000..5b2acbf
--- /dev/null
+++ b/features/compositor/components/PlaybackControls.tsx
@@ -0,0 +1,101 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { Play, Pause, SkipBack, SkipForward } from 'lucide-react'
+import { useCompositorStore } from '@/stores/compositor'
+
+interface PlaybackControlsProps {
+ onPlay?: () => void
+ onPause?: () => void
+ onStop?: () => void
+ onSeekBackward?: () => void
+ onSeekForward?: () => void
+}
+
+export function PlaybackControls({
+ onPlay,
+ onPause,
+ onStop,
+ onSeekBackward,
+ onSeekForward,
+}: PlaybackControlsProps) {
+ const { isPlaying, timecode, duration, togglePlayPause, stop } = useCompositorStore()
+
+ // Format timecode to MM:SS.mmm
+ const formatTimecode = (ms: number): string => {
+ const totalSeconds = Math.floor(ms / 1000)
+ const minutes = Math.floor(totalSeconds / 60)
+ const seconds = totalSeconds % 60
+ const milliseconds = Math.floor((ms % 1000) / 10)
+ return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(2, '0')}`
+ }
+
+ const handlePlayPause = () => {
+ togglePlayPause()
+ if (isPlaying) {
+ onPause?.()
+ } else {
+ onPlay?.()
+ }
+ }
+
+ const handleStop = () => {
+ stop()
+ onStop?.()
+ }
+
+ const handleSeekBackward = () => {
+ onSeekBackward?.()
+ }
+
+ const handleSeekForward = () => {
+ onSeekForward?.()
+ }
+
+ return (
+
+ {/* Transport controls */}
+
+ )
+}
diff --git a/features/compositor/managers/AudioManager.ts b/features/compositor/managers/AudioManager.ts
new file mode 100644
index 0000000..9f20632
--- /dev/null
+++ b/features/compositor/managers/AudioManager.ts
@@ -0,0 +1,116 @@
+import { AudioEffect } from '@/types/effects'
+
+/**
+ * AudioManager - Manages audio effects playback
+ * Ported from omniclip: /s/context/controllers/compositor/parts/audio-manager.ts
+ */
+export class AudioManager {
+ private audios = new Map
+
+
+
+
+
+
+
+ {/* Timecode display */}
+
+
+
+ {formatTimecode(timecode)}
+
+ /
+
+ {formatTimecode(duration)}
+
+
+
+
+
+ onChange(e.target.value)}
+ className="mt-1"
+ />
+
+
+
+
+
+
+ {PRESET_COLORS.map((color) => (
+
+
+
+
+
+ setContent(e.target.value)}
+ />
+
+
+
+
+
+
+
+
+ setFontSize(Number(e.target.value))}
+ min="8"
+ max="200"
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ setX(Number(e.target.value))}
+ />
+
+
+
+ setY(Number(e.target.value))}
+ />
+
+ + Select a text element to edit its properties +
+
+
+ onStyleChange({ text: e.target.value })}
+ placeholder="Enter text..."
+ />
+
+
+
+
+ onStyleChange({ fontFamily })}
+ />
+
+
+
+
+ onStyleChange({ fontSize })}
+ min={12}
+ max={200}
+ step={1}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ onStyleChange({ fill: [color, ...props.fill.slice(1)] })}
+ />
+ {props.fill.length > 1 && (
+
+
+ + Gradient: {props.fill.length} colors +
+ )} +
+
+ onStyleChange({ stroke })}
+ />
+
+
+
+
+ onStyleChange({ strokeThickness })}
+ min={0}
+ max={20}
+ step={1}
+ />
+
+
+
+
+ onStyleChange({ letterSpacing })}
+ min={-10}
+ max={50}
+ step={1}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+ onStyleChange({ dropShadow })}
+ />
+
+
+ {props.dropShadow && (
+ <>
+
+
+ onStyleChange({ dropShadowColor })}
+ />
+
+
+
+
+
+ onStyleChange({ dropShadowDistance })
+ }
+ min={0}
+ max={50}
+ step={1}
+ />
+
+
+
+
+ onStyleChange({ dropShadowBlur })}
+ min={0}
+ max={50}
+ step={1}
+ />
+
+
+
+
+ onStyleChange({ dropShadowAlpha: alpha / 100 })}
+ min={0}
+ max={100}
+ step={1}
+ />
+
+
+
+
+ onStyleChange({ dropShadowAngle })}
+ min={0}
+ max={Math.PI * 2}
+ step={0.1}
+ />
+
+
+ )}
+
+
+
+
+
+ onStyleChange({ wordWrap })}
+ />
+
+
+ {props.wordWrap && (
+
+
+ onStyleChange({ wordWrapWidth })}
+ min={50}
+ max={1000}
+ step={10}
+ />
+
+ )}
+
+
+
+ onStyleChange({ breakWords })}
+ />
+
+
+
+ )
+}
diff --git a/features/export/components/QualitySelector.tsx b/features/export/components/QualitySelector.tsx
new file mode 100644
index 0000000..a9230aa
--- /dev/null
+++ b/features/export/components/QualitySelector.tsx
@@ -0,0 +1,46 @@
+'use client'
+
+// T081: Quality Selector Component
+
+import { ExportQuality, EXPORT_PRESETS } from '../types'
+import { Label } from '@/components/ui/label'
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
+
+export interface QualitySelectorProps {
+ value: ExportQuality
+ onValueChange: (quality: ExportQuality) => void
+ disabled?: boolean
+}
+
+export function QualitySelector({
+ value,
+ onValueChange,
+ disabled = false,
+}: QualitySelectorProps) {
+ return (
+
+
+
+
+
+ {totalFrames > 0 && (
+
+ {status !== 'complete' && status !== 'error' && status !== 'idle' && (
+
+
+ {Math.round(percentage)}%
+
+
+ Frame {currentFrame} / {totalFrames}
+ {progress.estimatedTimeRemaining && (
+
+ (~{Math.ceil(progress.estimatedTimeRemaining)}s remaining)
+
+ )}
+
+ )}
+
+
+ onValueChange(v as ExportQuality)}
+ disabled={disabled}
+ className="gap-3"
+ >
+ {Object.entries(EXPORT_PRESETS).map(([key, preset]) => (
+
+
+ )
+}
diff --git a/features/export/ffmpeg/FFmpegHelper.ts b/features/export/ffmpeg/FFmpegHelper.ts
new file mode 100644
index 0000000..684704d
--- /dev/null
+++ b/features/export/ffmpeg/FFmpegHelper.ts
@@ -0,0 +1,228 @@
+// Ported from omniclip: vendor/omniclip/s/context/controllers/video-export/helpers/FFmpegHelper/helper.ts (Line 12-96)
+
+import { FFmpeg } from '@ffmpeg/ffmpeg'
+import { toBlobURL, fetchFile } from '@ffmpeg/util'
+import { Effect, AudioEffect, VideoEffect } from '@/types/effects'
+
+export type ProgressCallback = (progress: number) => void
+
+/**
+ * FFmpegHelper - Wrapper for @ffmpeg/ffmpeg operations
+ * Ported from omniclip FFmpegHelper
+ */
+export class FFmpegHelper {
+ private ffmpeg: FFmpeg
+ private isLoaded = false
+ private progressCallbacks: Set
+
+ ))}
+
+ {/* Thumbnail or Icon */}
+
+
+ {isVideoMetadata(media.metadata) && media.metadata.thumbnail ? (
+ 
+ ) : (
+ getIcon()
+ )}
+
+
+ {/* File info */}
+
+
+
+ {/* Actions */}
+ + {media.filename} +
+
+ {formatFileSize(media.file_size)}
+ {getDuration() && {getDuration()}}
+
+ {getDimensions() && (
+ {getDimensions()}
+ )} +
+
+
+
+
+
+ {/* Upload zone */}
+
+
+
+ ) : mediaFiles.length === 0 ? (
+
+
+ ) : (
+ No media files yet
+Drag and drop files to upload
+
+ {mediaFiles.map(media => (
+
+ )}
+
+
+
+ {isUploading ? (
+
+ )
+}
diff --git a/features/media/hooks/useMediaUpload.ts b/features/media/hooks/useMediaUpload.ts
new file mode 100644
index 0000000..6188824
--- /dev/null
+++ b/features/media/hooks/useMediaUpload.ts
@@ -0,0 +1,101 @@
+import { useState, useCallback } from 'react'
+import { uploadMedia } from '@/app/actions/media'
+import { calculateFileHash } from '../utils/hash'
+import { extractMetadata } from '../utils/metadata'
+import { useMediaStore } from '@/stores/media'
+import { MediaFile } from '@/types/media'
+
+/**
+ * Custom hook for media file uploads
+ * Handles file hashing, metadata extraction, and upload to server
+ * @param projectId Project ID for storage organization
+ * @returns Upload utilities and state
+ */
+export function useMediaUpload(projectId: string) {
+ const [isUploading, setIsUploading] = useState(false)
+ const [progress, setProgress] = useState(0)
+ const { addMediaFile, setUploadProgress } = useMediaStore()
+
+ /**
+ * Upload multiple files with deduplication
+ * @param files Array of files to upload
+ * @returns Promise
+
+ ) : (
+ Uploading...
+ +{Math.round(progress)}%
+
+
+ )}
+
+
+ + {isDragActive ? 'Drop files here' : 'Drag and drop files'} +
++ or click to select files +
++ Supports video, audio, and images up to 500MB +
+
+ {getIcon()}
+
+ {getLabel()}
+
+
+ {/* Phase 6: Trim handles */}
+
+ )
+}
diff --git a/features/timeline/components/PlayheadIndicator.tsx b/features/timeline/components/PlayheadIndicator.tsx
new file mode 100644
index 0000000..915b2ff
--- /dev/null
+++ b/features/timeline/components/PlayheadIndicator.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import { useCompositorStore } from '@/stores/compositor'
+import { useTimelineStore } from '@/stores/timeline'
+
+export function PlayheadIndicator() {
+ const { timecode } = useCompositorStore()
+ const { zoom } = useTimelineStore()
+
+ // Calculate position based on timecode and zoom
+ const position = (timecode / 1000) * zoom
+
+ return (
+ <>
+ {/* Playhead line */}
+
+
+ {/* Playhead handle */}
+
+
+ )
+}
diff --git a/features/timeline/components/SelectionBox.tsx b/features/timeline/components/SelectionBox.tsx
new file mode 100644
index 0000000..63f44af
--- /dev/null
+++ b/features/timeline/components/SelectionBox.tsx
@@ -0,0 +1,162 @@
+'use client'
+
+// T069: Selection Box Component for multi-selection on timeline
+
+import { useState, useEffect, useRef } from 'react'
+import { useTimelineStore } from '@/stores/timeline'
+import { Effect } from '@/types/effects'
+
+/**
+ * SelectionBox - Multi-selection box for timeline effects
+ *
+ * Features:
+ * - Drag to create selection rectangle
+ * - Detects overlapping effect blocks
+ * - Shift+click for additive selection
+ * - Esc to clear selection
+ */
+export function SelectionBox() {
+ const { effects, selectedEffectIds, clearSelection, zoom } = useTimelineStore()
+ const [isSelecting, setIsSelecting] = useState(false)
+ const [selectionBox, setSelectionBox] = useState({
+ startX: 0,
+ startY: 0,
+ endX: 0,
+ endY: 0,
+ })
+ const containerRef = useRef
+ {isSelecting && boxStyles && (
+
+ )}
+
+ )
+}
+
+/**
+ * Calculate which effects are within the selection box
+ */
+function getEffectsInBox(
+ box: { startX: number; startY: number; endX: number; endY: number },
+ effects: Effect[],
+ zoom: number
+): string[] {
+ const TRACK_HEIGHT = 80 // From CSS timeline-track
+ const TRACK_HEADER_WIDTH = 0 // No header in overlay calculation
+
+ const boxLeft = Math.min(box.startX, box.endX)
+ const boxRight = Math.max(box.startX, box.endX)
+ const boxTop = Math.min(box.startY, box.endY)
+ const boxBottom = Math.max(box.startY, box.endY)
+
+ return effects
+ .filter((effect) => {
+ // Calculate effect block position
+ const effectLeft = (effect.start_at_position / 1000) * zoom
+ const effectRight = ((effect.start_at_position + effect.duration) / 1000) * zoom
+ const effectTop = effect.track * TRACK_HEIGHT
+ const effectBottom = effectTop + TRACK_HEIGHT
+
+ // Check if effect overlaps with selection box
+ const overlapsX = effectLeft < boxRight && effectRight > boxLeft
+ const overlapsY = effectTop < boxBottom && effectBottom > boxTop
+
+ return overlapsX && overlapsY
+ })
+ .map((effect) => effect.id)
+}
diff --git a/features/timeline/components/SplitButton.tsx b/features/timeline/components/SplitButton.tsx
new file mode 100644
index 0000000..e9e52d0
--- /dev/null
+++ b/features/timeline/components/SplitButton.tsx
@@ -0,0 +1,95 @@
+/**
+ * SplitButton component
+ * Allows splitting selected effects at the playhead position
+ */
+
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { Scissors } from 'lucide-react'
+import { useTimelineStore } from '@/stores/timeline'
+import { useCompositorStore } from '@/stores/compositor'
+import { useHistoryStore } from '@/stores/history'
+import { splitEffect } from '../utils/split'
+import { updateEffect, createEffect } from '@/app/actions/effects'
+import { toast } from 'sonner'
+
+export function SplitButton() {
+ const { effects, selectedEffectIds, updateEffect: updateStoreEffect, addEffect } = useTimelineStore()
+ const { timecode } = useCompositorStore()
+ const { recordSnapshot } = useHistoryStore()
+
+ const handleSplit = async () => {
+ // Get selected effects
+ const selectedEffects = effects.filter(e => selectedEffectIds.includes(e.id))
+
+ if (selectedEffects.length === 0) {
+ toast.error('No effect selected')
+ return
+ }
+
+ // Use current playhead position
+ const splitTimecode = timecode
+
+ // Record snapshot before split
+ recordSnapshot(effects, `Split ${selectedEffects.length} effect(s)`)
+
+ let splitCount = 0
+ const errors: string[] = []
+
+ for (const effect of selectedEffects) {
+ try {
+ const result = splitEffect(effect, splitTimecode)
+
+ if (!result) {
+ errors.push(`Cannot split ${effect.kind} at this position`)
+ continue
+ }
+
+ const [leftEffect, rightEffect] = result
+
+ // Update left effect (keeps original ID)
+ await updateEffect(leftEffect.id, {
+ duration: leftEffect.duration,
+ end: leftEffect.end,
+ })
+ updateStoreEffect(leftEffect.id, leftEffect)
+
+ // Create right effect (new)
+ const { id, created_at, updated_at, ...rightData } = rightEffect
+ const createdEffect = await createEffect(effect.project_id, rightData as any)
+ addEffect(createdEffect)
+
+ splitCount++
+ } catch (error) {
+ console.error('Failed to split effect:', error)
+ errors.push(`Failed to split ${effect.kind}`)
+ }
+ }
+
+ // Show results
+ if (splitCount > 0) {
+ toast.success(`Split ${splitCount} effect(s)`)
+ }
+ if (errors.length > 0) {
+ errors.forEach(err => toast.error(err))
+ }
+ }
+
+ const isDisabled = selectedEffectIds.length === 0
+
+ return (
+
+ )
+}
diff --git a/features/timeline/components/Timeline.tsx b/features/timeline/components/Timeline.tsx
new file mode 100644
index 0000000..a8f8b1b
--- /dev/null
+++ b/features/timeline/components/Timeline.tsx
@@ -0,0 +1,76 @@
+'use client'
+
+import { useTimelineStore } from '@/stores/timeline'
+import { TimelineTrack } from './TimelineTrack'
+import { TimelineRuler } from './TimelineRuler' // ✅ Phase 5追加
+import { PlayheadIndicator } from './PlayheadIndicator' // ✅ Phase 5追加
+import { SplitButton } from './SplitButton' // ✅ Phase 6追加
+import { SelectionBox } from './SelectionBox' // ✅ Phase 6追加 (T069)
+import { useEffect } from 'react'
+import { getEffects } from '@/app/actions/effects'
+import { ScrollArea } from '@/components/ui/scroll-area'
+
+interface TimelineProps {
+ projectId: string
+}
+
+export function Timeline({ projectId }: TimelineProps) {
+ const { effects, trackCount, zoom, setEffects } = useTimelineStore()
+
+ // Load effects when component mounts
+ useEffect(() => {
+ loadEffects()
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [projectId])
+
+ const loadEffects = async () => {
+ try {
+ const loadedEffects = await getEffects(projectId)
+ setEffects(loadedEffects)
+ } catch (error) {
+ console.error('Failed to load effects:', error)
+ }
+ }
+
+ // Calculate timeline width based on longest effect
+ const timelineWidth = Math.max(
+ ...effects.map((e) => ((e.start_at_position + e.duration) / 1000) * zoom),
+ 5000 // Minimum 5000px
+ )
+
+ return (
+
+ {/* Timeline header */}
+
+
+
+ {/* Timeline footer - Phase 6: Added controls */}
+
+ )
+}
diff --git a/features/timeline/components/TimelineRuler.tsx b/features/timeline/components/TimelineRuler.tsx
new file mode 100644
index 0000000..5d863df
--- /dev/null
+++ b/features/timeline/components/TimelineRuler.tsx
@@ -0,0 +1,79 @@
+'use client'
+
+import { useTimelineStore } from '@/stores/timeline'
+import { useCompositorStore } from '@/stores/compositor'
+
+interface TimelineRulerProps {
+ projectId: string
+}
+
+export function TimelineRuler({ projectId }: TimelineRulerProps) {
+ const { zoom } = useTimelineStore()
+ const { seek } = useCompositorStore()
+
+ // Calculate ruler ticks
+ const generateTicks = () => {
+ const ticks: { position: number; label: string; major: boolean }[] = []
+ const pixelsPerSecond = zoom
+ const secondInterval = pixelsPerSecond < 50 ? 10 : pixelsPerSecond < 100 ? 5 : 1
+
+ for (let second = 0; second < 3600; second += secondInterval) {
+ const position = second * pixelsPerSecond
+ const isMajor = second % (secondInterval * 5) === 0
+
+ ticks.push({
+ position,
+ label: isMajor ? formatTime(second * 1000) : '',
+ major: isMajor,
+ })
+ }
+
+ return ticks
+ }
+
+ const formatTime = (ms: number): string => {
+ const totalSeconds = Math.floor(ms / 1000)
+ const minutes = Math.floor(totalSeconds / 60)
+ const seconds = totalSeconds % 60
+ return `${minutes}:${seconds.toString().padStart(2, '0')}`
+ }
+
+ const handleClick = (e: React.MouseEvent
+
+
+ {/* Timeline ruler - ✅ Phase 5追加 */}
+ Timeline
+
+ {/* Playhead - ✅ Phase 5追加 */}
+
+
+
+
+
+ {effects.length} effect(s)
+ Zoom: {zoom}px/s
+
+ {/* Ticks */}
+ {ticks.map((tick, index) => (
+
+ )
+}
diff --git a/features/timeline/components/TimelineTrack.tsx b/features/timeline/components/TimelineTrack.tsx
new file mode 100644
index 0000000..6a0fc41
--- /dev/null
+++ b/features/timeline/components/TimelineTrack.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { Effect } from '@/types/effects'
+import { EffectBlock } from './EffectBlock'
+
+interface TimelineTrackProps {
+ trackIndex: number
+ effects: Effect[]
+}
+
+export function TimelineTrack({ trackIndex, effects }: TimelineTrackProps) {
+ // Filter effects for this track
+ const trackEffects = effects.filter(e => e.track === trackIndex)
+
+ return (
+
+ {/* Tick mark */}
+
+ {/* Label */}
+ {tick.label && (
+
+ ))}
+
+ {tick.label}
+
+ )}
+
+ {/* Track label */}
+
+ )
+}
diff --git a/features/timeline/components/TrimHandles.tsx b/features/timeline/components/TrimHandles.tsx
new file mode 100644
index 0000000..f8a1241
--- /dev/null
+++ b/features/timeline/components/TrimHandles.tsx
@@ -0,0 +1,126 @@
+/**
+ * TrimHandles component
+ * Provides visual handles for trimming effect start/end points
+ */
+
+'use client'
+
+import { useState, useRef } from 'react'
+import { Effect } from '@/types/effects'
+import { useTrimHandler } from '../hooks/useTrimHandler'
+import { useTimelineStore } from '@/stores/timeline'
+import { useHistoryStore } from '@/stores/history'
+
+interface TrimHandlesProps {
+ effect: Effect
+ isSelected: boolean
+}
+
+export function TrimHandles({ effect, isSelected }: TrimHandlesProps) {
+ const { startTrim, onTrimMove, endTrim, cancelTrim } = useTrimHandler()
+ const { effects, updateEffect: updateStoreEffect } = useTimelineStore()
+ const { recordSnapshot } = useHistoryStore()
+ const [isDragging, setIsDragging] = useState(false)
+ const [trimSide, setTrimSide] = useState<'start' | 'end' | null>(null)
+ const finalUpdatesRef = useRef
+ Track {trackIndex + 1}
+
+
+ {/* Track content area */}
+
+ {trackEffects.map(effect => (
+
+ handleMouseDown(e, 'start')}
+ title="Trim start point"
+ >
+
+
+
+ {/* Right trim handle (end) */}
+ handleMouseDown(e, 'end')}
+ title="Trim end point"
+ >
+
+
+
+ {/* Visual feedback during trim */}
+ {isDragging && (
+
+ )}
+
+ )
+}
diff --git a/features/timeline/handlers/DragHandler.ts b/features/timeline/handlers/DragHandler.ts
new file mode 100644
index 0000000..5d72621
--- /dev/null
+++ b/features/timeline/handlers/DragHandler.ts
@@ -0,0 +1,142 @@
+/**
+ * DragHandler - Effect drag and drop functionality
+ * Ported from omniclip: /s/context/controllers/timeline/parts/drag-related/effect-drag.ts
+ *
+ * Handles dragging effects horizontally (time) and vertically (tracks)
+ */
+
+import { Effect } from '@/types/effects'
+import { calculateProposedTimecode } from '../utils/placement'
+
+export class DragHandler {
+ private effect: Effect | null = null
+ private initialMouseX = 0
+ private initialMouseY = 0
+ private initialStartPosition = 0
+ private initialTrack = 0
+
+ constructor(
+ private zoom: number, // pixels per second
+ private trackHeight: number, // pixels per track
+ private trackCount: number,
+ private existingEffects: Effect[],
+ private onUpdate: (effectId: string, updates: Partial