\n {/* Mobile hamburger */}\n setSidebarOpen(!sidebarOpen)}\n class=\"lg:hidden fixed top-4 left-4 z-50 bg-gray-800 p-2 rounded-lg border border-gray-700\"\n >\n \n \n\n {/* Overlay for mobile */}\n {sidebarOpen && (\n

setSidebarOpen(false)} />\n )}\n\n { setPage(p); setSidebarOpen(false); }} open={sidebarOpen} />\n\n

\n {loading ? (\n

🎬

Loading Clip Factory...

\n ) : (\n

{renderPage()}

\n )}\n

\n );\n}\n\ncreateRoot(document.getElementById(\"root\")!).render();\n",[],[96,105],"5fa67d56-3a9e-11f1-b888-42b51c65c3df","index.html","b63cdb34-3a9d-11f1-952a-42b51c65c3df",12,["D",1776458730884],"\n\n\n \n \n 🎬 Clip Factory — AI Video Clipper\n \n \n \n \n \n\n\n

\n \n\n\n",[],[96,113],"c422626e-3a9d-11f1-8a0a-42b51c65c3df","components","74496da2-cf10-4ad3-997c-58e1cb48e6ee",5,["D",1776458469988],[127,128,129,130,131,132,133,134,135],[96,121],{"_35":199,"_13":200,"_38":201,"_40":122,"_42":43,"_44":202,"_46":47,"_48":203,"_17":69,"_51":52,"_53":204,"_55":56,"_57":-5,"_84":205,"_18":206},{"_35":191,"_13":192,"_38":193,"_40":122,"_42":43,"_44":194,"_46":47,"_48":195,"_17":69,"_51":52,"_53":196,"_55":56,"_57":-5,"_84":197,"_18":198},{"_35":183,"_13":184,"_38":185,"_40":122,"_42":43,"_44":186,"_46":47,"_48":187,"_17":69,"_51":52,"_53":188,"_55":56,"_57":-5,"_84":189,"_18":190},{"_35":175,"_13":176,"_38":177,"_40":122,"_42":43,"_44":178,"_46":47,"_48":179,"_17":69,"_51":52,"_53":180,"_55":56,"_57":-5,"_84":181,"_18":182},{"_35":168,"_13":169,"_38":170,"_40":122,"_42":43,"_44":123,"_46":47,"_48":171,"_17":69,"_51":52,"_53":172,"_55":56,"_57":-5,"_84":173,"_18":174},{"_35":160,"_13":161,"_38":162,"_40":122,"_42":43,"_44":163,"_46":47,"_48":164,"_17":69,"_51":52,"_53":165,"_55":56,"_57":-5,"_84":166,"_18":167},{"_35":152,"_13":153,"_38":154,"_40":122,"_42":43,"_44":155,"_46":47,"_48":156,"_17":69,"_51":52,"_53":157,"_55":56,"_57":-5,"_84":158,"_18":159},{"_35":144,"_13":145,"_38":146,"_40":122,"_42":43,"_44":147,"_46":47,"_48":148,"_17":69,"_51":52,"_53":149,"_55":56,"_57":-5,"_84":150,"_18":151},{"_35":136,"_13":137,"_38":138,"_40":122,"_42":43,"_44":139,"_46":47,"_48":140,"_17":69,"_51":52,"_53":141,"_55":56,"_57":-5,"_84":142,"_18":143},"c971a2e8-3a9d-11f1-bfe6-42b51c65c3df","StatsBar.tsx","c971a400-3a9d-11f1-bfe6-42b51c65c3df",6,["D",1776458478898],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\nexport function StatsBar({ stats }) {\n const cards = [\n { label: \"Total Clips\", value: stats.total, icon: \"📋\", color: \"from-blue-600/20 to-blue-900/20 border-blue-800/50\" },\n { label: \"Ideas\", value: stats.ideas, icon: \"💡\", color: \"from-yellow-600/20 to-yellow-900/20 border-yellow-800/50\" },\n { label: \"In Editing\", value: stats.editing, icon: \"✂️\", color: \"from-orange-600/20 to-orange-900/20 border-orange-800/50\" },\n { label: \"Published\", value: stats.published, icon: \"🚀\", color: \"from-green-600/20 to-green-900/20 border-green-800/50\" },\n { label: \"Total Views\", value: formatViews(stats.totalViews), icon: \"👁️\", color: \"from-purple-600/20 to-purple-900/20 border-purple-800/50\" },\n ];\n\n return (\n

\n {cards.map(card => (\n \n

\n {card.icon}\n {card.label}\n

{card.value}

\n ))}\n

\n );\n}\n\nfunction formatViews(n: number): string {\n if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + \"M\";\n if (n >= 1_000) return (n / 1_000).toFixed(1) + \"K\";\n return String(n);\n}\n",[],[96,121,137],"6fc4de80-3a9e-11f1-9032-42b51c65c3df","Sidebar.tsx","6fc4df5c-3a9e-11f1-9032-42b51c65c3df",14,["D",1776458757946],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\nconst NAV = [\n { id: \"dashboard\", label: \"Dashboard\", icon: \"📊\" },\n { id: \"clipper\", label: \"Clip Video\", icon: \"✂️\" },\n { id: \"clips\", label: \"My Clips\", icon: \"🎬\" },\n { id: \"creators\", label: \"Creators\", icon: \"⭐\" },\n];\n\nexport function Sidebar({ page, setPage, open }) {\n return (\n

\n {/* Logo */}\n

\n 🎬\n

\n Clip Factory\n

Video Clipper

\n\n {/* Navigation */}\n

\n {NAV.map(item => {\n const active = page === item.id;\n return (\n setPage(item.id)}\n class={`w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium transition-all ${\n active\n ? \"bg-gradient-to-r from-purple-600/20 to-pink-600/20 text-white border border-purple-500/30 shadow-lg shadow-purple-900/10\"\n : \"text-gray-400 hover:text-white hover:bg-gray-800/50\"\n }`}\n >\n {item.icon}\n {item.label}\n {active &&

}\n \n );\n })}\n

\n\n {/* Footer */}\n

🚀 Pro Tip

Paste any YouTube URL and create viral-ready clips for TikTok, Reels & Shorts.

\n view source\n

\n );\n}\n",[],[96,121,145],"b1984a0e-3a9e-11f1-a3e4-42b51c65c3df","MyClipsPage.tsx","b1984aa4-3a9e-11f1-a3e4-42b51c65c3df",17,["D",1776458868389],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function MyClipsPage({ clips, refresh }) {\n const [filter, setFilter] = useState(\"all\");\n const [copiedId, setCopiedId] = useState(null);\n\n const filtered = filter === \"all\" ? clips : clips.filter(c => c.status === filter);\n\n async function handleDownload(clip) {\n // Track the download\n await fetch(`/api/clips/${clip.id}/download`, { method: \"POST\" });\n\n // Generate a downloadable text file with clip details + cobalt download link\n const info = [\n `🎬 CLIP: ${clip.title}`,\n `━━━━━━━━━━━━━━━━━━━━━━━━━━━`,\n `📺 Source: ${clip.video_title}`,\n `🎤 Channel: ${clip.channel_name}`,\n `⏱️ Timestamps: ${clip.start_time} → ${clip.end_time} (${clip.duration_sec}s)`,\n ``,\n `📱 DOWNLOAD THE VIDEO CLIP:`,\n `1. Go to https://cobalt.tools`,\n `2. Paste this URL: https://youtube.com/watch?v=${clip.video_id}`,\n `3. Download the video, then trim ${clip.start_time} to ${clip.end_time}`,\n ``,\n `✂️ QUICK TRIM (use any of these free tools):`,\n `• CapCut (Mobile/Desktop): https://www.capcut.com`,\n `• Canva Video Editor: https://www.canva.com/video-editor`,\n `• Kapwing: https://www.kapwing.com/tools/trim-video`,\n ``,\n clip.caption ? `📝 CAPTION:\\n${clip.caption}\\n` : \"\",\n clip.hashtags ? `# HASHTAGS:\\n${clip.hashtags}\\n` : \"\",\n `━━━━━━━━━━━━━━━━━━━━━━━━━━━`,\n `Generated by Clip Factory 🎬`,\n ].filter(Boolean).join(\"\\n\");\n\n const blob = new Blob([info], { type: \"text/plain\" });\n const a = document.createElement(\"a\");\n a.href = URL.createObjectURL(blob);\n a.download = `clip-${clip.title.replace(/[^a-zA-Z0-9]/g, \"-\").toLowerCase()}.txt`;\n a.click();\n URL.revokeObjectURL(a.href);\n refresh();\n }\n\n function copyCaption(clip) {\n const text = `${clip.caption || clip.title}\\n\\n${clip.hashtags || \"\"}`;\n navigator.clipboard.writeText(text);\n setCopiedId(clip.id);\n setTimeout(() => setCopiedId(null), 2000);\n }\n\n async function handleDelete(id) {\n if (!confirm(\"Delete this clip?\")) return;\n await fetch(`/api/clips/${id}`, { method: \"DELETE\" });\n refresh();\n }\n\n async function handleStatusChange(id, status) {\n await fetch(`/api/clips/${id}/status`, {\n method: \"PATCH\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ status }),\n });\n refresh();\n }\n\n const statusCfg = {\n ready: { label: \"Ready\", icon: \"✅\", color: \"text-green-400\", bg: \"bg-green-900/20\", border: \"border-green-800/40\" },\n posted: { label: \"Posted\", icon: \"🚀\", color: \"text-blue-400\", bg: \"bg-blue-900/20\", border: \"border-blue-800/40\" },\n viral: { label: \"Viral\", icon: \"🔥\", color: \"text-orange-400\", bg: \"bg-orange-900/20\", border: \"border-orange-800/40\" },\n };\n\n return (\n

🎬 My Clips

{clips.length} clips ready to dominate social media

\n\n {/* Filters */}\n

\n {[\n { value: \"all\", label: \"All\", icon: \"📋\" },\n { value: \"ready\", label: \"Ready\", icon: \"✅\" },\n { value: \"posted\", label: \"Posted\", icon: \"🚀\" },\n { value: \"viral\", label: \"Viral\", icon: \"🔥\" },\n ].map(f => (\n setFilter(f.value)}\n class={`px-4 py-2 rounded-xl text-sm font-medium transition-all flex items-center gap-1.5 ${\n filter === f.value\n ? \"bg-purple-600/20 text-purple-300 border border-purple-500/30\"\n : \"bg-gray-900 text-gray-400 border border-gray-800 hover:border-gray-700\"\n }`}\n >\n {f.icon} {f.label}\n \n ))}\n

\n\n {/* Clips */}\n {filtered.length === 0 ? (\n

✂️

No clips here yet

Go to \"Clip Video\" to import a YouTube video and start creating clips!

\n ) : (\n

\n {filtered.map(clip => {\n const st = statusCfg[clip.status] || statusCfg.ready;\n return (\n

\n {/* Thumbnail header */}\n

\n {clip.thumbnail ? (\n $\"\"$ \n ) : (\n

🎬

\n )}\n

\n \n {st.icon} {st.label}\n \n

\n ⏱ {clip.start_time} → {clip.end_time}\n

\n {clip.duration_sec}s\n

\n\n

{clip.title}

from {clip.video_title}

\n\n {clip.caption && (\n

\n 📝 {clip.caption}\n

\n )}\n\n {clip.hashtags && (\n

{clip.hashtags}

\n )}\n\n {/* Actions */}\n

\n handleDownload(clip)}\n class=\"flex-1 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white font-bold py-2 rounded-xl text-xs transition-all shadow-lg shadow-purple-900/20 flex items-center justify-center gap-1.5\"\n >\n 📥 Download\n \n copyCaption(clip)}\n class=\"px-3 py-2 bg-gray-800 hover:bg-gray-700 rounded-xl text-xs transition flex items-center gap-1\"\n title=\"Copy caption + hashtags\"\n >\n {copiedId === clip.id ? \"✅\" : \"📋\"}\n \n

\n \n \n

\n\n

\n 📥 {clip.download_count} downloads\n 📱 9:16 vertical\n

\n );\n })}\n

\n )}\n

\n );\n}\n",[],[96,121,153],"808a7554-3a9e-11f1-8290-42b51c65c3df","DashboardPage.tsx","808a75fe-3a9e-11f1-8290-42b51c65c3df",15,["D",1776458786089],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\nexport function DashboardPage({ stats, projects, clips }) {\n const recentClips = clips.slice(0, 6);\n const recentProjects = projects.slice(0, 4);\n\n const statCards = [\n { label: \"Videos Imported\", value: stats.totalProjects, icon: \"📥\", gradient: \"from-blue-600 to-cyan-600\", bg: \"from-blue-900/20 to-cyan-900/20\", border: \"border-blue-800/40\" },\n { label: \"Clips Created\", value: stats.totalClips, icon: \"✂️\", gradient: \"from-purple-600 to-pink-600\", bg: \"from-purple-900/20 to-pink-900/20\", border: \"border-purple-800/40\" },\n { label: \"Downloads\", value: stats.totalDownloads, icon: \"📤\", gradient: \"from-green-600 to-emerald-600\", bg: \"from-green-900/20 to-emerald-900/20\", border: \"border-green-800/40\" },\n { label: \"Tracked Creators\", value: stats.totalCreators, icon: \"⭐\", gradient: \"from-orange-600 to-red-600\", bg: \"from-orange-900/20 to-red-900/20\", border: \"border-orange-800/40\" },\n ];\n\n return (\n

\n {/* Header */}\n

Dashboard

Your clip factory at a glance

\n\n {/* Stats Grid */}\n

\n {statCards.map(s => (\n

\n {s.icon}\n

{s.value}

{s.label}

\n ))}\n

\n\n {/* How it works banner */}\n

⚡ How Clip Factory Works

\n {[\n { step: \"1\", icon: \"🔗\", title: \"Paste URL\", desc: \"Drop any YouTube video link\" },\n { step: \"2\", icon: \"✂️\", title: \"Create Clips\", desc: \"Define start/end times for each clip\" },\n { step: \"3\", icon: \"📱\", title: \"Optimize\", desc: \"Add captions & hashtags for platforms\" },\n { step: \"4\", icon: \"📥\", title: \"Download\", desc: \"Export and post to TikTok, Reels, Shorts\" },\n ].map(s => (\n

\n {s.step}\n

{s.icon} {s.title}

{s.desc}

\n ))}\n

\n\n

\n {/* Recent Projects */}\n

📥 Recent Videos

\n {recentProjects.length === 0 ? (\n

📭

No videos imported yet. Go to \"Clip Video\" to start!

\n ) : (\n

\n {recentProjects.map(p => (\n

\n {p.thumbnail ? (\n $\"\"$ \n ) : (\n

🎥

\n )}\n

{p.title || \"Untitled\"}

{p.channel_name || \"Unknown\"} • {p.duration || \"?\"}

\n {p.status}\n

\n ))}\n

\n )}\n

\n\n {/* Recent Clips */}\n

🎬 Recent Clips

\n {recentClips.length === 0 ? (\n

✂️

No clips created yet. Import a video and start clipping!

\n ) : (\n

\n {recentClips.map(c => (\n

🎬

{c.title}

{c.start_time} → {c.end_time} • {c.duration_sec}s

\n 📥 {c.download_count}\n

\n ))}\n

\n )}\n

\n\n {/* Platform badges */}\n

\n Optimized for:\n 📱 TikTok\n 📸 Instagram Reels\n 🎬 YouTube Shorts\n 🐦 Twitter/X\n

\n );\n}\n",[],[96,121,161],"c42223ee-3a9d-11f1-8a0a-42b51c65c3df","Dashboard.tsx","c42224d4-3a9d-11f1-8a0a-42b51c65c3df",["D",1776458469988],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { StatsBar } from \"./StatsBar.tsx\";\nimport { ClipCard } from \"./ClipCard.tsx\";\nimport { AddClipModal } from \"./AddClipModal.tsx\";\n\nexport function Dashboard({ creators, clips, stats, filterStatus, setFilterStatus, filterCreator, setFilterCreator, loading, refresh }) {\n const [showAdd, setShowAdd] = useState(false);\n\n const statuses = [\n { value: \"\", label: \"All Clips\", icon: \"📋\" },\n { value: \"idea\", label: \"Ideas\", icon: \"💡\" },\n { value: \"editing\", label: \"Editing\", icon: \"✂️\" },\n { value: \"ready\", label: \"Ready\", icon: \"✅\" },\n { value: \"published\", label: \"Published\", icon: \"🚀\" },\n ];\n\n return (\n

\n {/* Header */}\n

\n 🎬\n \n Clip Factory\n \n

Your faceless YouTube clips command center

\n view source\n setShowAdd(true)}\n class=\"bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white font-bold px-5 py-2.5 rounded-xl transition-all shadow-lg shadow-purple-900/30 flex items-center gap-2\"\n >\n + New Clip\n \n

\n\n

\n {/* Stats */}\n \n\n {/* Filters */}\n

\n {statuses.map(s => (\n setFilterStatus(s.value)}\n class={`px-3 py-1.5 rounded-lg text-sm font-medium transition-all flex items-center gap-1.5 ${\n filterStatus === s.value\n ? \"bg-gray-700 text-white shadow\"\n : \"text-gray-400 hover:text-gray-200\"\n }`}\n >\n {s.icon} {s.label}\n \n ))}\n

\n\n setFilterCreator(e.target.value)}\n class=\"bg-gray-900 border border-gray-800 rounded-xl px-4 py-2 text-sm text-gray-300 focus:outline-none focus:border-purple-500\"\n >\n \n {creators.map(c => (\n \n ))}\n \n

\n\n {/* Clips Grid */}\n {loading ? (\n

🎬 Loading...

\n ) : clips.length === 0 ? (\n

📭

No clips yet

Hit \"+ New Clip\" to start building your content pipeline!

\n ) : (\n

\n {clips.map(clip => (\n \n ))}\n

\n )}\n

\n\n {/* Add Modal */}\n {showAdd && (\n setShowAdd(false)} refresh={refresh} />\n )}\n

\n );\n}\n",[],[96,121,169],"bf4e7b64-3a9e-11f1-80f8-42b51c65c3df","CreatorsPage.tsx","bf4e7c40-3a9e-11f1-80f8-42b51c65c3df",18,["D",1776458891394],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function CreatorsPage({ creators, refresh }) {\n const [showAdd, setShowAdd] = useState(false);\n const [name, setName] = useState(\"\");\n const [emoji, setEmoji] = useState(\"🎮\");\n const [color, setColor] = useState(\"#6366f1\");\n const [channelUrl, setChannelUrl] = useState(\"\");\n const [saving, setSaving] = useState(false);\n\n async function handleAdd(e) {\n e.preventDefault();\n if (!name.trim()) return;\n setSaving(true);\n await fetch(\"/api/creators\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ name, emoji, color, channelUrl }),\n });\n setName(\"\"); setEmoji(\"🎮\"); setColor(\"#6366f1\"); setChannelUrl(\"\");\n setShowAdd(false); setSaving(false);\n refresh();\n }\n\n const popularEmojis = [\"🎮\", \"⚡\", \"🎤\", \"🏀\", \"🎰\", \"🎯\", \"😂\", \"🔥\", \"💀\", \"👑\", \"🎬\", \"🎵\", \"💪\", \"🐐\", \"🦁\"];\n\n return (\n

⭐ Creators

Track your favorite creators to clip from

\n setShowAdd(!showAdd)}\n class=\"bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white font-bold px-5 py-2.5 rounded-xl transition-all shadow-lg shadow-purple-900/30 text-sm\"\n >\n + Add Creator\n \n

\n\n {/* Add Form */}\n {showAdd && (\n

➕ Add New Creator

\n Name\n setName(e.target.value)}\n placeholder=\"e.g. IShowSpeed\"\n class=\"w-full bg-gray-800 border border-gray-700 rounded-xl px-4 py-2.5 text-white placeholder-gray-600 focus:outline-none focus:border-purple-500 text-sm\"\n required\n />\n

\n Channel URL\n setChannelUrl(e.target.value)}\n placeholder=\"https://youtube.com/@...\"\n class=\"w-full bg-gray-800 border border-gray-700 rounded-xl px-4 py-2.5 text-white placeholder-gray-600 focus:outline-none focus:border-purple-500 text-sm\"\n />\n

\n Color\n setColor(e.target.value)}\n class=\"w-full h-10 bg-gray-800 border border-gray-700 rounded-xl cursor-pointer\"\n />\n

\n Emoji Avatar\n

\n {popularEmojis.map(e => (\n setEmoji(e)}\n class={`w-10 h-10 rounded-xl text-xl flex items-center justify-center transition ${\n emoji === e ? \"bg-purple-600/30 border-2 border-purple-500 scale-110\" : \"bg-gray-800 border border-gray-700 hover:bg-gray-700\"\n }`}\n >{e}\n ))}\n

\n \n {saving ? \"Adding...\" : \"✅ Add Creator\"}\n \n \n

\n )}\n\n {/* Creators Grid */}\n

\n {creators.map(c => (\n \n

\n \n {c.avatar_emoji}\n

{c.name}

\n Creator\n

\n {c.channel_url && (\n \n 📺 View Channel →\n \n )}\n

\n {c.clips_made} clips made\n Added {new Date(c.created_at).toLocaleDateString()}\n

\n ))}\n

\n );\n}\n",[],[96,121,176],"9b7248ec-3a9e-11f1-ba14-42b51c65c3df","ClipperPage.tsx","9b7249aa-3a9e-11f1-ba14-42b51c65c3df",16,["D",1776458831228],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\nfunction extractVideoId(url: string): string | null {\n const patterns = [\n /(?:youtube\\.com\\/watch\\?v=|youtu\\.be\\/|youtube\\.com\\/embed\\/|youtube\\.com\\/shorts\\/)([a-zA-Z0-9_-]{11})/,\n ];\n for (const p of patterns) {\n const match = url.match(p);\n if (match) return match[1];\n }\n return null;\n}\n\nfunction parseTime(t: string): number {\n const parts = t.split(\":\").map(Number);\n if (parts.length === 3) return parts[0] * 3600 + parts[1] * 60 + parts[2];\n if (parts.length === 2) return parts[0] * 60 + parts[1];\n return parts[0] || 0;\n}\n\nexport function ClipperPage({ projects, refresh }) {\n const [url, setUrl] = useState(\"\");\n const [importing, setImporting] = useState(false);\n const [videoInfo, setVideoInfo] = useState(null);\n const [error, setError] = useState(\"\");\n\n // Clip creation\n const [clipTitle, setClipTitle] = useState(\"\");\n const [startTime, setStartTime] = useState(\"\");\n const [endTime, setEndTime] = useState(\"\");\n const [caption, setCaption] = useState(\"\");\n const [hashtags, setHashtags] = useState(\"#viral #fyp #clips\");\n const [addingClip, setAddingClip] = useState(false);\n const [clipAdded, setClipAdded] = useState(false);\n\n async function handleImport() {\n setError(\"\"); setVideoInfo(null);\n const videoId = extractVideoId(url);\n if (!videoId) { setError(\"Invalid YouTube URL. Please paste a valid link.\"); return; }\n\n setImporting(true);\n try {\n const res = await fetch(\"/api/projects\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ url, videoId }),\n });\n const data = await res.json();\n if (data.error) { setError(data.error); }\n else { setVideoInfo(data); await refresh(); }\n } catch (e) { setError(\"Failed to import video.\"); }\n setImporting(false);\n }\n\n async function handleAddClip() {\n if (!videoInfo || !clipTitle || !startTime || !endTime) return;\n setAddingClip(true);\n const durSec = parseTime(endTime) - parseTime(startTime);\n await fetch(\"/api/clips\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n projectId: videoInfo.id, title: clipTitle,\n startTime, endTime, durationSec: Math.max(0, durSec),\n caption, hashtags,\n }),\n });\n setClipTitle(\"\"); setStartTime(\"\"); setEndTime(\"\"); setCaption(\"\");\n setClipAdded(true);\n setTimeout(() => setClipAdded(false), 2000);\n setAddingClip(false);\n refresh();\n }\n\n return (\n

✂️ Clip Video

Import a YouTube video and create short-form clips

\n\n {/* URL Input */}\n

\n 🔗 YouTube Video URL\n

\n setUrl(e.target.value)}\n onKeyDown={e => e.key === \"Enter\" && handleImport()}\n placeholder=\"https://youtube.com/watch?v=... or https://youtu.be/...\"\n class=\"flex-1 bg-gray-800 border border-gray-700 rounded-xl px-5 py-3.5 text-white placeholder-gray-600 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 transition text-sm\"\n />\n \n {importing ? (\n \n ⏳ Importing...\n \n ) : \"📥 Import Video\"}\n \n

\n {error &&

⚠️ {error}

}\n

\n\n {/* Video Preview + Clip Creator */}\n {videoInfo && (\n

\n {/* Video Info Card */}\n

\n {videoInfo.thumbnail ? (\n $\"\"$ \n ) : (\n

🎥

\n )}\n

\n ✅ Imported\n

{videoInfo.title}

\n 📺 {videoInfo.channel_name}\n ⏱️ {videoInfo.duration}\n

\n ID: {videoInfo.video_id}\n

\n\n {/* Create Clip Form */}\n

\n ✂️ Create a Clip\n {clipAdded && ✅ Clip added!}\n

\n\n

\n Clip Title\n setClipTitle(e.target.value)}\n placeholder=\"e.g. Speed goes crazy on stream\"\n class=\"w-full bg-gray-800 border border-gray-700 rounded-xl px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:border-purple-500 text-sm\"\n />\n

\n ⏱ Start Time\n setStartTime(e.target.value)}\n placeholder=\"0:30 or 1:02:30\"\n class=\"w-full bg-gray-800 border border-gray-700 rounded-xl px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:border-purple-500 text-sm font-mono\"\n />\n

\n ⏱ End Time\n setEndTime(e.target.value)}\n placeholder=\"1:00 or 1:03:00\"\n class=\"w-full bg-gray-800 border border-gray-700 rounded-xl px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:border-purple-500 text-sm font-mono\"\n />\n

\n\n

\n 📝 Caption (for posting)\n setCaption(e.target.value)}\n placeholder=\"Write the caption you'll use when posting this clip...\"\n rows={2}\n class=\"w-full bg-gray-800 border border-gray-700 rounded-xl px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:border-purple-500 text-sm resize-none\"\n />\n

\n # Hashtags\n setHashtags(e.target.value)}\n placeholder=\"#viral #fyp #clips\"\n rows={2}\n class=\"w-full bg-gray-800 border border-gray-700 rounded-xl px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:border-purple-500 text-sm resize-none\"\n />\n

\n\n {startTime && endTime && (\n

\n Preview:\n {startTime} → {endTime}\n ({Math.max(0, parseTime(endTime) - parseTime(startTime))}s clip)\n {parseTime(endTime) - parseTime(startTime) > 60 && (\n ⚠️ Over 60s — consider shorter for Shorts/Reels\n )}\n

\n )}\n\n \n {addingClip ? \"Adding...\" : \"✂️ Create Clip\"}\n \n

\n\n {/* YouTube Embed */}\n

🎥 Video Reference

\n \n

Use this to find timestamps for your clips. Pause at the right moment and note the time!

\n )}\n\n {/* Recent Projects */}\n {!videoInfo && projects.length > 0 && (\n

📁 Your Imported Videos

\n {projects.map(p => (\n

setVideoInfo(p)}>\n {p.thumbnail ? (\n $\"\"$ \n ) : (\n

🎥

\n )}\n

{p.title || \"Untitled\"}

{p.channel_name} • {p.duration}

\n ))}\n

\n )}\n

\n );\n}\n",[],[96,121,184],"d4b21958-3a9d-11f1-a95c-42b51c65c3df","ClipCard.tsx","d4b21a20-3a9d-11f1-a95c-42b51c65c3df",7,["D",1776458497779],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\nconst STATUS_CONFIG = {\n idea: { label: \"Idea\", icon: \"💡\", bg: \"bg-yellow-900/30\", text: \"text-yellow-300\", border: \"border-yellow-700/50\" },\n editing: { label: \"Editing\", icon: \"✂️\", bg: \"bg-orange-900/30\", text: \"text-orange-300\", border: \"border-orange-700/50\" },\n ready: { label: \"Ready\", icon: \"✅\", bg: \"bg-blue-900/30\", text: \"text-blue-300\", border: \"border-blue-700/50\" },\n published: { label: \"Published\", icon: \"🚀\", bg: \"bg-green-900/30\", text: \"text-green-300\", border: \"border-green-700/50\" },\n};\n\nconst PRIORITY_CONFIG = {\n low: { label: \"Low\", color: \"text-gray-400\" },\n medium: { label: \"Med\", color: \"text-yellow-400\" },\n high: { label: \"High\", color: \"text-red-400\" },\n};\n\nexport function ClipCard({ clip, refresh }) {\n const [editingViews, setEditingViews] = useState(false);\n const [views, setViews] = useState(clip.views);\n const status = STATUS_CONFIG[clip.status] || STATUS_CONFIG.idea;\n const priority = PRIORITY_CONFIG[clip.priority] || PRIORITY_CONFIG.medium;\n const nextStatuses = [\"idea\", \"editing\", \"ready\", \"published\"].filter(s => s !== clip.status);\n\n async function changeStatus(newStatus: string) {\n await fetch(`/api/clips/${clip.id}/status`, {\n method: \"PATCH\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ status: newStatus }),\n });\n refresh();\n }\n\n async function saveViews() {\n await fetch(`/api/clips/${clip.id}/views`, {\n method: \"PATCH\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ views: Number(views) }),\n });\n setEditingViews(false);\n refresh();\n }\n\n async function handleDelete() {\n if (!confirm(\"Delete this clip?\")) return;\n await fetch(`/api/clips/${clip.id}`, { method: \"DELETE\" });\n refresh();\n }\n\n return (\n

\n {/* Header */}\n

\n \n {clip.avatar_emoji}\n \n {clip.creator_name}\n

\n \n {status.icon} {status.label}\n \n

\n\n {/* Title */}\n

{clip.title}

\n\n {/* Notes */}\n {clip.notes && (\n

{clip.notes}

\n )}\n\n {/* Meta row */}\n

\n ● {priority.label} priority\n {clip.source_url && (\n \n 🔗 Source\n \n )}\n

\n\n {/* Views (published only) */}\n {clip.status === \"published\" && (\n

\n 👁️\n {editingViews ? (\n

\n setViews(e.target.value)}\n class=\"bg-gray-800 border border-gray-700 rounded px-2 py-0.5 text-xs w-24 text-white\"\n />\n \n

\n ) : (\n setEditingViews(true)}\n class=\"text-xs text-gray-400 hover:text-white\"\n >\n {Number(clip.views).toLocaleString()} views\n \n )}\n

\n )}\n\n {/* Actions */}\n

\n {nextStatuses.map(s => {\n const cfg = STATUS_CONFIG[s];\n return (\n changeStatus(s)}\n class={`text-xs px-2 py-1 rounded-lg ${cfg.bg} ${cfg.text} hover:opacity-80 transition`}\n title={`Move to ${cfg.label}`}\n >\n {cfg.icon}\n \n );\n })}\n

\n \n 🗑️\n \n

\n );\n}\n",[],[96,121,192],"df5d23fc-3a9d-11f1-a715-42b51c65c3df","AddClipModal.tsx","df5d24e2-3a9d-11f1-a715-42b51c65c3df",8,["D",1776458515674],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function AddClipModal({ creators, onClose, refresh }) {\n const [creatorId, setCreatorId] = useState(creators[0]?.id || \"\");\n const [title, setTitle] = useState(\"\");\n const [sourceUrl, setSourceUrl] = useState(\"\");\n const [priority, setPriority] = useState(\"medium\");\n const [notes, setNotes] = useState(\"\");\n const [saving, setSaving] = useState(false);\n\n async function handleSubmit(e: React.FormEvent) {\n e.preventDefault();\n if (!title.trim() || !creatorId) return;\n setSaving(true);\n await fetch(\"/api/clips\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ creatorId, title, sourceUrl, priority, notes }),\n });\n refresh();\n onClose();\n }\n\n return (\n

\n e.stopPropagation()}\n >\n

\n 🎬 New Clip Idea\n

\n \n

\n\n

\n {/* Creator */}\n

\n Creator\n setCreatorId(e.target.value)}\n class=\"w-full bg-gray-800 border border-gray-700 rounded-xl px-4 py-2.5 text-white focus:outline-none focus:border-purple-500\"\n required\n >\n {creators.map(c => (\n \n ))}\n \n

\n\n {/* Title */}\n

\n Clip Title\n setTitle(e.target.value)}\n placeholder=\"e.g. Speed reacts to getting banned\"\n class=\"w-full bg-gray-800 border border-gray-700 rounded-xl px-4 py-2.5 text-white placeholder-gray-600 focus:outline-none focus:border-purple-500\"\n required\n />\n

\n\n {/* Source URL */}\n

\n Source URL (optional)\n setSourceUrl(e.target.value)}\n placeholder=\"https://youtube.com/watch?v=...\"\n class=\"w-full bg-gray-800 border border-gray-700 rounded-xl px-4 py-2.5 text-white placeholder-gray-600 focus:outline-none focus:border-purple-500\"\n />\n

\n\n {/* Priority */}\n

\n Priority\n

\n {[\n { value: \"low\", label: \"Low\", color: \"border-gray-600 text-gray-400 hover:border-gray-500\" },\n { value: \"medium\", label: \"Medium\", color: \"border-yellow-700 text-yellow-400 hover:border-yellow-600\" },\n { value: \"high\", label: \"High 🔥\", color: \"border-red-700 text-red-400 hover:border-red-600\" },\n ].map(p => (\n setPriority(p.value)}\n class={`flex-1 py-2 rounded-xl text-sm font-semibold border transition-all ${\n priority === p.value\n ? p.color + \" bg-gray-800 ring-1 ring-white/10\"\n : \"border-gray-800 text-gray-600\"\n }`}\n >\n {p.label}\n \n ))}\n

\n\n {/* Notes */}\n

\n Notes (optional)\n setNotes(e.target.value)}\n placeholder=\"Timestamp, edit ideas, caption notes...\"\n rows={2}\n class=\"w-full bg-gray-800 border border-gray-700 rounded-xl px-4 py-2.5 text-white placeholder-gray-600 focus:outline-none focus:border-purple-500 resize-none\"\n />\n

\n\n {/* Submit */}\n \n {saving ? \"Adding...\" : \"Add Clip 🎬\"}\n \n \n

\n );\n}\n",[],[96,121,200],["D",1776458430544],[210,211],[19],{"_35":59,"_13":60,"_38":61,"_40":41,"_42":43,"_44":62,"_46":47,"_48":215,"_17":64,"_51":52,"_53":65,"_55":56,"_57":-5,"_84":216,"_18":217},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":212,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_84":213,"_18":214},["D",1776458721665],[],[19,37],["D",1776458949847],[],[19,60],"a5fac5a6-3a9d-11f1-ade9-42b51c65c3df",["D",1776458419406],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Command center for running a faceless YouTube clips channel","imageUrl","userId","5d482c19-d265-400f-820b-cacb8280a289","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","019d9d2b-507d-725a-b994-0565f5edf9b3","tursoName","a5fac5a63a9d11f1ade942b51c65c3df","tursoHostname","a5fac5a63a9d11f1ade942b51c65c3df-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789512647429],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_274":270},"org",{"_11":12,"_268":-5,"_269":270,"_228":229,"_271":272,"_273":56},"branch",{"_17":90,"_13":16,"_35":43,"_260":218,"_261":-5,"_262":-5,"_263":-5,"_264":-5,"_265":-5,"_266":14,"_267":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":218,"_13":14,"_48":363,"_220":-5,"_221":56,"_222":223,"_224":223,"_225":226,"_227":-5,"_228":229,"_230":78,"_231":47,"_232":-5,"_233":-5,"_234":69,"_235":236,"_237":238,"_239":240,"_241":364,"_243":-5,"_244":245,"_246":245,"_247":248,"_249":248,"_250":248,"_251":245,"_252":245,"_253":365,"_255":366,"_257":367,"_259":56},[309,312,325,326],"files",[309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326],"counts",{"_300":69,"_301":50,"_302":69,"_32":303,"_304":305},[296,297],{"_35":67,"_42":43,"_38":41,"_13":19,"_53":-5,"_51":70,"_17":69,"_40":-5,"_48":294,"_44":50,"_57":-5,"_18":295},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1776458430544],[19],{"_35":59,"_13":60,"_38":61,"_40":41,"_42":43,"_44":62,"_46":47,"_48":63,"_17":64,"_51":52,"_53":65,"_55":56,"_57":-5,"_18":299},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_18":298},[19,37],[19,60],"pulls","branches","forks",{"_306":69,"_308":69},"connections",{"_306":69,"_307":69},"count","unfilledCount","emptyCount",{"_35":67,"_13":19,"_38":41,"_40":-5,"_42":43,"_44":50,"_46":47,"_48":207,"_17":69,"_51":70,"_53":-5,"_55":56,"_57":-5,"_84":361,"_18":362},{"_35":59,"_13":60,"_38":61,"_40":41,"_42":43,"_44":62,"_46":47,"_48":215,"_17":64,"_51":52,"_53":65,"_55":56,"_57":-5,"_84":359,"_18":360},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":212,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_84":357,"_18":358},{"_35":95,"_13":96,"_38":97,"_40":-5,"_42":43,"_44":64,"_46":47,"_48":98,"_17":69,"_51":70,"_53":-5,"_55":56,"_57":-5,"_84":355,"_18":356},{"_35":120,"_13":121,"_38":122,"_40":97,"_42":43,"_44":123,"_46":47,"_48":124,"_17":69,"_51":70,"_53":-5,"_55":56,"_57":-5,"_84":353,"_18":354},{"_35":199,"_13":200,"_38":201,"_40":122,"_42":43,"_44":202,"_46":47,"_48":203,"_17":69,"_51":52,"_53":204,"_55":56,"_57":-5,"_84":351,"_18":352},{"_35":191,"_13":192,"_38":193,"_40":122,"_42":43,"_44":194,"_46":47,"_48":195,"_17":69,"_51":52,"_53":196,"_55":56,"_57":-5,"_84":349,"_18":350},{"_35":183,"_13":184,"_38":185,"_40":122,"_42":43,"_44":186,"_46":47,"_48":187,"_17":69,"_51":52,"_53":188,"_55":56,"_57":-5,"_84":347,"_18":348},{"_35":175,"_13":176,"_38":177,"_40":122,"_42":43,"_44":178,"_46":47,"_48":179,"_17":69,"_51":52,"_53":180,"_55":56,"_57":-5,"_84":345,"_18":346},{"_35":168,"_13":169,"_38":170,"_40":122,"_42":43,"_44":123,"_46":47,"_48":171,"_17":69,"_51":52,"_53":172,"_55":56,"_57":-5,"_84":343,"_18":344},{"_35":160,"_13":161,"_38":162,"_40":122,"_42":43,"_44":163,"_46":47,"_48":164,"_17":69,"_51":52,"_53":165,"_55":56,"_57":-5,"_84":341,"_18":342},{"_35":152,"_13":153,"_38":154,"_40":122,"_42":43,"_44":155,"_46":47,"_48":156,"_17":69,"_51":52,"_53":157,"_55":56,"_57":-5,"_84":339,"_18":340},{"_35":144,"_13":145,"_38":146,"_40":122,"_42":43,"_44":147,"_46":47,"_48":148,"_17":69,"_51":52,"_53":149,"_55":56,"_57":-5,"_84":337,"_18":338},{"_35":136,"_13":137,"_38":138,"_40":122,"_42":43,"_44":139,"_46":47,"_48":140,"_17":69,"_51":52,"_53":141,"_55":56,"_57":-5,"_84":335,"_18":336},{"_35":112,"_13":113,"_38":114,"_40":97,"_42":43,"_44":115,"_46":47,"_48":116,"_17":50,"_51":24,"_53":117,"_55":56,"_57":-5,"_84":333,"_18":334},{"_35":104,"_13":105,"_38":106,"_40":97,"_42":43,"_44":107,"_46":47,"_48":108,"_17":50,"_51":52,"_53":109,"_55":56,"_57":-5,"_84":331,"_18":332},{"_35":87,"_13":88,"_38":89,"_40":-5,"_42":43,"_44":90,"_46":47,"_48":91,"_17":69,"_51":24,"_53":92,"_55":56,"_57":-5,"_84":329,"_18":330},{"_35":76,"_13":77,"_38":78,"_40":-5,"_42":43,"_44":79,"_46":47,"_48":80,"_17":81,"_51":82,"_53":83,"_55":56,"_57":-5,"_84":327,"_18":328},[],[77],[],[88],[],[96,105],[],[96,113],[],[96,121,137],[],[96,121,145],[],[96,121,153],[],[96,121,161],[],[96,121,169],[],[96,121,176],[],[96,121,184],[],[96,121,192],[],[96,121,200],[314,315,316,317,318,319,320,321,322],[96,121],[313,323,324],[96],[],[19,37],[],[19,60],[310,311],[19],["D",1776458419406],["D",1789512647429],{"_11":12,"_274":270},{"_11":12,"_268":-5,"_269":270,"_228":229,"_271":272,"_273":56},{"_17":90,"_13":16,"_35":43,"_260":218,"_261":-5,"_262":-5,"_263":-5,"_264":-5,"_265":-5,"_266":14,"_267":12},"ctx",{"_253":-5,"_291":401,"_402":403,"_404":405,"_406":56,"_407":56,"_408":56,"_409":47,"_410":-5,"_411":-7,"_412":-7,"_413":69,"_414":56,"_415":56,"_416":-5,"_417":56,"_418":56,"_419":56,"_420":-5},"ENV",{"_372":373,"_374":375,"_376":16,"_377":378,"_379":380,"_381":382,"_383":384,"_385":386,"_387":388,"_389":390,"_391":392,"_393":394,"_395":396,"_397":398,"_399":400},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]