\n \n\n\n",[],[129,148],"d04dcf80-3a9b-11f1-8393-42b51c65c3df","App.tsx","16fb02d8-3a9a-11f1-94dc-42b51c65c3df",27,["D",1776457631404],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { Dashboard } from \"./components/Dashboard.tsx\";\nimport { ClipBoard } from \"./components/ClipBoard.tsx\";\nimport { AddClipModal } from \"./components/AddClipModal.tsx\";\nimport { YouTubeClipper } from \"./components/YouTubeClipper.tsx\";\n\ntype Tab = \"dashboard\" | \"clips\" | \"youtube\";\n\nexport function App() {\n const [tab, setTab] = useState(\"dashboard\");\n const [showAddClip, setShowAddClip] = useState(false);\n const [refreshKey, setRefreshKey] = useState(0);\n\n const refresh = useCallback(() => setRefreshKey((k) => k + 1), []);\n\n return (\n

\n {/* Header */}\n

\n 🎬\n

\n ClipFactory\n

\n setTab(\"dashboard\")}\n className={`px-4 py-2 rounded-lg text-sm font-medium transition ${\n tab === \"dashboard\" ? \"bg-red-600 text-white\" : \"text-gray-400 hover:text-white hover:bg-gray-800\"\n }`}\n >\n 📊 Dashboard\n \n setTab(\"clips\")}\n className={`px-4 py-2 rounded-lg text-sm font-medium transition ${\n tab === \"clips\" ? \"bg-red-600 text-white\" : \"text-gray-400 hover:text-white hover:bg-gray-800\"\n }`}\n >\n 🎞️ Clips\n \n setTab(\"youtube\")}\n className={`px-4 py-2 rounded-lg text-sm font-medium transition ${\n tab === \"youtube\" ? \"bg-red-600 text-white\" : \"text-gray-400 hover:text-white hover:bg-gray-800\"\n }`}\n >\n 📺 YouTube\n \n setShowAddClip(true)}\n className=\"ml-2 px-4 py-2 bg-red-600 hover:bg-red-700 rounded-lg text-sm font-bold transition\"\n >\n + New Clip\n \n

\n\n {/* Content */}\n

\n {tab === \"dashboard\" && }\n {tab === \"clips\" && }\n {tab === \"youtube\" && }\n

\n\n {/* Footer */}\n \n\n {/* Modal */}\n {showAddClip && (\n setShowAddClip(false)}\n onSaved={() => {\n setShowAddClip(false);\n refresh();\n setTab(\"clips\");\n }}\n />\n )}\n

\n );\n}\n",[],[129,156],"18a18c6a-3a9a-11f1-8ea3-42b51c65c3df","components","18a18d0a-3a9a-11f1-8ea3-42b51c65c3df",13,["D",1776456893773],[170,171,172,173,174],[129,164],{"_35":207,"_13":208,"_38":209,"_40":165,"_42":43,"_44":210,"_46":47,"_48":211,"_17":69,"_51":52,"_53":212,"_55":56,"_57":-5,"_85":213,"_18":214},{"_35":199,"_13":200,"_38":201,"_40":165,"_42":43,"_44":202,"_46":47,"_48":203,"_17":69,"_51":52,"_53":204,"_55":56,"_57":-5,"_85":205,"_18":206},{"_35":191,"_13":192,"_38":193,"_40":165,"_42":43,"_44":194,"_46":47,"_48":195,"_17":69,"_51":52,"_53":196,"_55":56,"_57":-5,"_85":197,"_18":198},{"_35":183,"_13":184,"_38":185,"_40":165,"_42":43,"_44":186,"_46":47,"_48":187,"_17":69,"_51":52,"_53":188,"_55":56,"_57":-5,"_85":189,"_18":190},{"_35":175,"_13":176,"_38":177,"_40":165,"_42":43,"_44":178,"_46":47,"_48":179,"_17":69,"_51":52,"_53":180,"_55":56,"_57":-5,"_85":181,"_18":182},"c7e5e4a4-3a9b-11f1-8554-42b51c65c3df","YouTubeClipper.tsx","c7e5e56c-3a9b-11f1-8554-42b51c65c3df",26,["D",1776457617312],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\nconst LINK_STATUSES = [\n { key: \"\", label: \"All\", emoji: \"📋\" },\n { key: \"queued\", label: \"Queued\", emoji: \"⏳\" },\n { key: \"clipping\", label: \"Clipping\", emoji: \"✂️\" },\n { key: \"clipped\", label: \"Clipped\", emoji: \"✅\" },\n { key: \"failed\", label: \"Failed\", emoji: \"❌\" },\n];\n\nfunction getStatusBadge(status: string) {\n switch (status) {\n case \"queued\": return { bg: \"bg-blue-900/50 border-blue-700\", text: \"text-blue-400\", label: \"⏳ Queued\" };\n case \"clipping\": return { bg: \"bg-yellow-900/50 border-yellow-700\", text: \"text-yellow-400\", label: \"✂️ Clipping\" };\n case \"clipped\": return { bg: \"bg-green-900/50 border-green-700\", text: \"text-green-400\", label: \"✅ Clipped\" };\n case \"failed\": return { bg: \"bg-red-900/50 border-red-700\", text: \"text-red-400\", label: \"❌ Failed\" };\n default: return { bg: \"bg-gray-800 border-gray-700\", text: \"text-gray-400\", label: status };\n }\n}\n\nexport function YouTubeClipper({ onRefresh }: { onRefresh: () => void }) {\n const [links, setLinks] = useState([]);\n const [creators, setCreators] = useState([]);\n const [filter, setFilter] = useState(\"\");\n const [loading, setLoading] = useState(true);\n\n // Add link form\n const [url, setUrl] = useState(\"\");\n const [videoTitle, setVideoTitle] = useState(\"\");\n const [channelName, setChannelName] = useState(\"\");\n const [notes, setNotes] = useState(\"\");\n const [adding, setAdding] = useState(false);\n const [preview, setPreview] = useState<{ videoId: string; thumbnail: string } | null>(null);\n\n const loadLinks = () => {\n setLoading(true);\n const endpoint = filter ? `/api/youtube-links?status=${filter}` : \"/api/youtube-links\";\n fetch(endpoint)\n .then((r) => r.json())\n .then((d) => { setLinks(d); setLoading(false); })\n .catch(() => setLoading(false));\n };\n\n useEffect(() => { loadLinks(); }, [filter]);\n useEffect(() => {\n fetch(\"/api/creators\").then((r) => r.json()).then(setCreators);\n }, []);\n\n // Auto-preview YouTube thumbnail when URL changes\n useEffect(() => {\n if (!url) { setPreview(null); return; }\n try {\n const u = new URL(url);\n let videoId = \"\";\n if (u.hostname.includes(\"youtu.be\")) {\n videoId = u.pathname.slice(1);\n } else if (u.hostname.includes(\"youtube.com\")) {\n videoId = u.searchParams.get(\"v\") || u.pathname.split(\"/\").pop() || \"\";\n }\n if (videoId) {\n setPreview({ videoId, thumbnail: `https://img.youtube.com/vi/${videoId}/hqdefault.jpg` });\n } else {\n setPreview(null);\n }\n } catch {\n setPreview(null);\n }\n }, [url]);\n\n const handleAddLink = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!url) return;\n setAdding(true);\n await fetch(\"/api/youtube-links\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ url, video_title: videoTitle, channel_name: channelName, notes }),\n });\n setUrl(\"\"); setVideoTitle(\"\"); setChannelName(\"\"); setNotes(\"\"); setPreview(null);\n setAdding(false);\n loadLinks();\n };\n\n const handleAutoClip = async (link: any) => {\n const creatorId = prompt(\"Enter creator ID to assign this clip to (check Clips tab for IDs), or leave blank for first creator:\");\n const cId = creatorId ? Number(creatorId) : (creators[0]?.id || 1);\n\n await fetch(`/api/youtube-links/${link.id}/status`, {\n method: \"PATCH\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ status: \"clipping\" }),\n });\n loadLinks();\n\n const res = await fetch(`/api/youtube-links/${link.id}/auto-clip`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n video_title: link.video_title || \"YouTube Clip\",\n channel_name: link.channel_name || \"\",\n creator_id: cId,\n }),\n });\n const data = await res.json();\n if (data.ok) {\n loadLinks();\n onRefresh();\n alert(data.ai ? `✅ Clip created with AI title:\\n\"${data.ai.title}\"` : \"✅ Clip created! Go to Clips tab to see it.\");\n }\n };\n\n const handleDelete = async (id: number) => {\n if (!confirm(\"Remove this YouTube link?\")) return;\n await fetch(`/api/youtube-links/${id}`, { method: \"DELETE\" });\n loadLinks();\n };\n\n return (\n

\n {/* Auto Clip Section */}\n

\n 🎥\n

Auto Clip from YouTube

Paste a YouTube link → auto-extract info → create clip instantly

\n\n

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

\n setUrl(e.target.value)}\n required\n placeholder=\"https://www.youtube.com/watch?v=... or https://youtu.be/...\"\n className=\"w-full bg-gray-900 border border-gray-700 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:border-red-500 focus:outline-none text-lg\"\n />\n {preview && (\n

\n ✓ Valid\n

\n )}\n

\n\n {/* Preview */}\n {preview && (\n

\n \n

\n setVideoTitle(e.target.value)}\n placeholder=\"Video title (optional — helps AI generate better clip titles)\"\n className=\"w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500\"\n />\n setChannelName(e.target.value)}\n placeholder=\"Channel name (optional)\"\n className=\"w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500\"\n />\n

\n )}\n\n {/* Notes */}\n setNotes(e.target.value)}\n placeholder=\"Clip notes — timestamps, ideas, section to clip (optional)\"\n rows={2}\n className=\"w-full bg-gray-900 border border-gray-700 rounded-xl px-4 py-3 text-white placeholder-gray-500 resize-none text-sm\"\n />\n\n {/* Submit */}\n \n {adding ? \"⏳ Adding...\" : \"🎬 Add to Clip Queue\"}\n \n \n

\n\n {/* YouTube Link Queue */}\n

\n 📺 YouTube Link Queue\n ({links.length} links)\n

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

\n {LINK_STATUSES.map((s) => (\n setFilter(s.key)}\n className={`px-4 py-2 rounded-lg text-sm font-medium transition ${\n filter === s.key\n ? \"bg-red-600 text-white\"\n : \"bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white\"\n }`}\n >\n {s.emoji} {s.label}\n \n ))}\n

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

Loading links...

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

📺

No YouTube links yet

Paste a YouTube URL above to start building your clip queue!

\n ) : (\n

\n {links.map((link) => {\n const badge = getStatusBadge(link.status);\n return (\n

\n {/* Thumbnail */}\n {link.thumbnail_url && (\n \n \n \n )}\n\n

\n {/* Title & Channel */}\n

\n {link.video_title && (\n

{link.video_title}

\n )}\n {link.channel_name && (\n

📺 {link.channel_name}

\n )}\n {!link.video_title && !link.channel_name && (\n \n 🔗 {link.url}\n \n )}\n

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

📝 {link.notes}

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

\n {badge.label}\n {new Date(link.created_at).toLocaleDateString()}\n

\n\n

\n {link.status === \"queued\" && (\n handleAutoClip(link)}\n className=\"flex-1 py-2 bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 rounded-lg text-xs font-bold transition\"\n >\n ⚡ Auto Clip\n \n )}\n \n 🔗 Open\n \n handleDelete(link.id)}\n className=\"px-3 py-2 bg-white/5 hover:bg-red-900/50 rounded-lg text-xs text-gray-500 hover:text-red-400 transition\"\n >\n 🗑️\n \n

\n\n {link.status === \"clipped\" && link.clip_id && (\n

\n ✅ Clip #{link.clip_id} created — check the Clips tab!\n

\n )}\n

\n );\n })}\n

\n )}\n

\n );\n}\n",[],[129,164,176],"24cfcf1a-3a9a-11f1-ad7f-42b51c65c3df","Dashboard.tsx","24cfcfec-3a9a-11f1-ad7f-42b51c65c3df",14,["D",1776456914208],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\nexport function Dashboard() {\n const [stats, setStats] = useState(null);\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n fetch(\"/api/stats\")\n .then((r) => r.json())\n .then((d) => { setStats(d); setLoading(false); })\n .catch(() => setLoading(false));\n }, []);\n\n if (loading) {\n return

Loading dashboard...

;\n }\n\n const statusMap: Record = {};\n (stats?.byStatus || []).forEach((s: any) => { statusMap[s.status] = s.count; });\n\n const statCards = [\n { label: \"Total Clips\", value: stats?.totalClips ?? 0, emoji: \"🎬\", color: \"from-blue-600 to-blue-800\" },\n { label: \"Found\", value: statusMap[\"found\"] ?? 0, emoji: \"🔍\", color: \"from-cyan-600 to-cyan-800\" },\n { label: \"Editing\", value: statusMap[\"editing\"] ?? 0, emoji: \"✂️\", color: \"from-yellow-600 to-yellow-800\" },\n { label: \"Uploaded\", value: statusMap[\"uploaded\"] ?? 0, emoji: \"📤\", color: \"from-purple-600 to-purple-800\" },\n { label: \"Published\", value: statusMap[\"published\"] ?? 0, emoji: \"🚀\", color: \"from-green-600 to-green-800\" },\n ];\n\n const totals = stats?.totals || {};\n\n return (\n

\n {/* Welcome */}\n

Welcome to ClipFactory 🎬

Your faceless YouTube clip empire starts here. Track, edit, and publish viral clips.

\n\n {/* Stat Cards */}\n

\n {statCards.map((card) => (\n

{card.emoji}

{card.value}

{card.label}

\n ))}\n

\n\n {/* Revenue Stats */}\n

\n 👀\n Total Views\n

{Number(totals.total_views || 0).toLocaleString()}

\n 👍\n Total Likes\n

{Number(totals.total_likes || 0).toLocaleString()}

\n 💰\n Total Revenue\n

${Number(totals.total_revenue || 0).toFixed(2)}

\n\n {/* Top Clips */}\n

🏆 Top Performing Clips

\n {(stats?.topClips || []).length === 0 ? (\n

No clips yet. Add your first clip to get started!

\n ) : (\n

\n {(stats?.topClips || []).map((clip: any, i: number) => (\n

\n #{i + 1}\n {clip.avatar_emoji}\n

{clip.ai_title || clip.title}

{clip.creator_name}

{Number(clip.views).toLocaleString()} views

${Number(clip.revenue).toFixed(2)}

\n ))}\n

\n )}\n

\n );\n}\n",[],[129,164,184],"3a095fea-3a9a-11f1-a019-42b51c65c3df","ClipCard.tsx","3a0960d0-3a9a-11f1-a019-42b51c65c3df",16,["D",1776456949817],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\nconst STATUS_OPTIONS = [\n { value: \"found\", label: \"🔍 Found\", bg: \"bg-blue-900/50 border-blue-700\" },\n { value: \"editing\", label: \"✂️ Editing\", bg: \"bg-yellow-900/50 border-yellow-700\" },\n { value: \"uploaded\", label: \"📤 Uploaded\", bg: \"bg-purple-900/50 border-purple-700\" },\n { value: \"published\", label: \"🚀 Published\", bg: \"bg-green-900/50 border-green-700\" },\n];\n\nfunction getStatusStyle(status: string) {\n return STATUS_OPTIONS.find((s) => s.value === status) || STATUS_OPTIONS[0];\n}\n\nexport function ClipCard({\n clip,\n onStatusChange,\n onDelete,\n onGenerate,\n onUpdateStats,\n}: {\n clip: any;\n onStatusChange: (id: number, status: string) => void;\n onDelete: (id: number) => void;\n onGenerate: (id: number, title: string, creatorName: string) => void;\n onUpdateStats: (id: number, views: number, likes: number, revenue: number) => void;\n}) {\n const [showStats, setShowStats] = useState(false);\n const [views, setViews] = useState(String(clip.views || 0));\n const [likes, setLikes] = useState(String(clip.likes || 0));\n const [revenue, setRevenue] = useState(String(clip.revenue || 0));\n const [generating, setGenerating] = useState(false);\n\n const statusStyle = getStatusStyle(clip.status);\n\n const handleGenerate = async () => {\n setGenerating(true);\n await onGenerate(clip.id, clip.title, clip.creator_name);\n setGenerating(false);\n };\n\n const handleSaveStats = () => {\n onUpdateStats(clip.id, Number(views), Number(likes), Number(revenue));\n setShowStats(false);\n };\n\n const nextStatus = () => {\n const order = [\"found\", \"editing\", \"uploaded\", \"published\"];\n const idx = order.indexOf(clip.status);\n if (idx < order.length - 1) {\n onStatusChange(clip.id, order[idx + 1]);\n }\n };\n\n return (\n

\n {/* Header */}\n

\n {clip.avatar_emoji}\n

{clip.title}

{clip.creator_name}

\n \n

\n\n {/* AI Generated Title */}\n {clip.ai_title && (\n

🤖 AI Title

{clip.ai_title}

\n {clip.ai_description && (\n

{clip.ai_description}

\n )}\n

\n )}\n\n {/* Source Link */}\n {clip.source_url && (\n \n 🔗 {clip.source_url}\n \n )}\n\n {/* Stats Row */}\n {clip.status === \"published\" && (\n

\n 👀 {Number(clip.views).toLocaleString()}\n 👍 {Number(clip.likes).toLocaleString()}\n 💰 ${Number(clip.revenue).toFixed(2)}\n

\n )}\n\n {/* Stats Editor */}\n {showStats && (\n

\n Views\n setViews(e.target.value)}\n className=\"w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-sm\" />\n

\n Likes\n setLikes(e.target.value)}\n className=\"w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-sm\" />\n

\n Revenue $\n setRevenue(e.target.value)}\n className=\"w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-sm\" />\n

\n \n

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

\n {clip.status !== \"published\" && (\n \n )}\n \n {generating ? \"⏳ Generating...\" : \"🤖 AI Title\"}\n \n setShowStats(!showStats)}\n className=\"px-3 py-1.5 bg-white/10 hover:bg-white/20 rounded-lg text-xs font-medium transition\"\n >\n 📊 Stats\n \n

\n\n {/* Date & Status Badge */}\n

\n {new Date(clip.created_at).toLocaleDateString()}\n onStatusChange(clip.id, e.target.value)}\n className=\"text-xs bg-transparent border border-white/10 rounded px-2 py-1 text-gray-300\"\n >\n {STATUS_OPTIONS.map((s) => (\n \n ))}\n \n

\n );\n}\n",[],[129,164,192],"2b73e6da-3a9a-11f1-8ea3-42b51c65c3df","ClipBoard.tsx","2b73e798-3a9a-11f1-8ea3-42b51c65c3df",15,["D",1776456925350],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { ClipCard } from \"./ClipCard.tsx\";\n\nconst STATUSES = [\n { key: \"\", label: \"All\", emoji: \"📋\" },\n { key: \"found\", label: \"Found\", emoji: \"🔍\" },\n { key: \"editing\", label: \"Editing\", emoji: \"✂️\" },\n { key: \"uploaded\", label: \"Uploaded\", emoji: \"📤\" },\n { key: \"published\", label: \"Published\", emoji: \"🚀\" },\n];\n\nexport function ClipBoard({ onRefresh }: { onRefresh: () => void }) {\n const [clips, setClips] = useState([]);\n const [filter, setFilter] = useState(\"\");\n const [loading, setLoading] = useState(true);\n\n const loadClips = () => {\n setLoading(true);\n const url = filter ? `/api/clips?status=${filter}` : \"/api/clips\";\n fetch(url)\n .then((r) => r.json())\n .then((d) => { setClips(d); setLoading(false); })\n .catch(() => setLoading(false));\n };\n\n useEffect(() => { loadClips(); }, [filter]);\n\n const handleStatusChange = async (id: number, status: string) => {\n await fetch(`/api/clips/${id}/status`, {\n method: \"PATCH\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ status }),\n });\n loadClips();\n onRefresh();\n };\n\n const handleDelete = async (id: number) => {\n if (!confirm(\"Delete this clip?\")) return;\n await fetch(`/api/clips/${id}`, { method: \"DELETE\" });\n loadClips();\n onRefresh();\n };\n\n const handleGenerate = async (id: number, title: string, creatorName: string) => {\n const res = await fetch(`/api/clips/${id}/generate`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ title, creator_name: creatorName }),\n });\n const data = await res.json();\n if (data.error) {\n alert(data.error);\n return;\n }\n loadClips();\n };\n\n const handleUpdateStats = async (id: number, views: number, likes: number, revenue: number) => {\n await fetch(`/api/clips/${id}/stats`, {\n method: \"PATCH\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ views, likes, revenue }),\n });\n loadClips();\n onRefresh();\n };\n\n return (\n

\n {/* Filters */}\n

\n {STATUSES.map((s) => (\n setFilter(s.key)}\n className={`px-4 py-2 rounded-lg text-sm font-medium transition ${\n filter === s.key\n ? \"bg-red-600 text-white\"\n : \"bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white\"\n }`}\n >\n {s.emoji} {s.label}\n \n ))}\n

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

Loading clips...

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

🎬

No clips yet

Click \"+ New Clip\" to add your first clip!

\n ) : (\n

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

\n )}\n

\n );\n}\n",[],[129,164,200],"40f6be60-3a9a-11f1-981e-42b51c65c3df","AddClipModal.tsx","40f6bf14-3a9a-11f1-981e-42b51c65c3df",17,["D",1776456961434],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\nexport function AddClipModal({ onClose, onSaved }: { onClose: () => void; onSaved: () => void }) {\n const [creators, setCreators] = useState([]);\n const [creatorId, setCreatorId] = useState(\"\");\n const [title, setTitle] = useState(\"\");\n const [sourceUrl, setSourceUrl] = useState(\"\");\n const [notes, setNotes] = useState(\"\");\n const [saving, setSaving] = useState(false);\n\n useEffect(() => {\n fetch(\"/api/creators\").then((r) => r.json()).then(setCreators);\n }, []);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!creatorId || !title) return;\n setSaving(true);\n await fetch(\"/api/clips\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n creator_id: Number(creatorId),\n title,\n source_url: sourceUrl || undefined,\n notes: notes || undefined,\n }),\n });\n onSaved();\n };\n\n return (\n

e.stopPropagation()}>\n

🎬 Add New Clip

\n \n

\n\n

\n {/* Creator */}\n

\n Creator\n setCreatorId(e.target.value)}\n required\n className=\"w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white\"\n >\n \n {creators.map((c: any) => (\n \n ))}\n \n

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

\n Clip Title / Description\n setTitle(e.target.value)}\n required\n placeholder=\"e.g. Speed rages at Minecraft...\"\n className=\"w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white placeholder-gray-500\"\n />\n

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

\n Source URL (optional)\n setSourceUrl(e.target.value)}\n placeholder=\"https://twitch.tv/clip/...\"\n className=\"w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white placeholder-gray-500\"\n />\n

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

\n Notes (optional)\n setNotes(e.target.value)}\n placeholder=\"Timestamp, ideas, etc.\"\n rows={2}\n className=\"w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white placeholder-gray-500 resize-none\"\n />\n

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

\n );\n}\n",[],[129,164,208],["D",1776456824834],[218,219],[19],{"_35":59,"_13":60,"_38":61,"_40":41,"_42":43,"_44":62,"_46":47,"_48":223,"_17":50,"_51":52,"_53":64,"_55":56,"_57":-5,"_85":224,"_18":225},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":220,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_85":221,"_18":222},["D",1776457548685],[],[19,37],["D",1776457541357],[],[19,60],"51514902-3a99-11f1-9f63-42b51c65c3df",["D",1776456559388],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","🎬 Faceless YouTube clip dashboard - track, manage & grow","imageUrl","userId","16f00450-ecbc-11ef-8139-5783405cc753","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","b08ba258-802d-4f4d-aaab-98927562aed8","tursoName","515149023a9911f19f6342b51c65c3df","tursoHostname","515149023a9911f19f6342b51c65c3df-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789511441255],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_282":278},"org",{"_11":12,"_276":-5,"_277":278,"_236":237,"_279":280,"_281":56},"branch",{"_17":101,"_13":16,"_35":43,"_268":226,"_269":-5,"_270":-5,"_271":-5,"_272":-5,"_273":-5,"_274":14,"_275":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ0OHhwbVplVDNmRjJ3elVHUzRTZzdkanlTSiJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":226,"_13":14,"_48":373,"_228":-5,"_229":56,"_230":231,"_232":231,"_233":234,"_235":-5,"_236":237,"_238":-5,"_239":56,"_240":-5,"_241":-5,"_242":69,"_243":244,"_245":246,"_247":248,"_249":374,"_251":-5,"_252":253,"_254":253,"_255":256,"_257":256,"_258":256,"_259":253,"_260":253,"_261":375,"_263":376,"_265":377,"_267":56},[316,319,329,331,332,333,334],"files",[316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334],"counts",{"_307":69,"_308":50,"_309":69,"_32":310,"_311":312},[303,304],{"_35":66,"_13":19,"_38":41,"_40":-5,"_42":43,"_44":67,"_46":47,"_48":68,"_17":69,"_51":70,"_53":-5,"_55":56,"_57":-5,"_18":302},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],{"_35":59,"_13":60,"_38":61,"_40":41,"_42":43,"_44":62,"_46":47,"_48":63,"_17":50,"_51":52,"_53":64,"_55":56,"_57":-5,"_18":306},{"_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":305},[19,37],[19,60],"pulls","branches","forks",{"_313":69,"_315":69},"connections",{"_313":69,"_314":69},"count","unfilledCount","emptyCount",{"_35":66,"_13":19,"_38":41,"_40":-5,"_42":43,"_44":67,"_46":47,"_48":215,"_17":69,"_51":70,"_53":-5,"_55":56,"_57":-5,"_85":371,"_18":372},{"_35":59,"_13":60,"_38":61,"_40":41,"_42":43,"_44":62,"_46":47,"_48":223,"_17":50,"_51":52,"_53":64,"_55":56,"_57":-5,"_85":369,"_18":370},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":220,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_85":367,"_18":368},{"_35":128,"_13":129,"_38":130,"_40":-5,"_42":43,"_44":131,"_46":47,"_48":132,"_17":69,"_51":70,"_53":-5,"_55":56,"_57":-5,"_85":365,"_18":366},{"_35":163,"_13":164,"_38":165,"_40":130,"_42":43,"_44":166,"_46":47,"_48":167,"_17":69,"_51":70,"_53":-5,"_55":56,"_57":-5,"_85":363,"_18":364},{"_35":207,"_13":208,"_38":209,"_40":165,"_42":43,"_44":210,"_46":47,"_48":211,"_17":69,"_51":52,"_53":212,"_55":56,"_57":-5,"_85":361,"_18":362},{"_35":199,"_13":200,"_38":201,"_40":165,"_42":43,"_44":202,"_46":47,"_48":203,"_17":69,"_51":52,"_53":204,"_55":56,"_57":-5,"_85":359,"_18":360},{"_35":191,"_13":192,"_38":193,"_40":165,"_42":43,"_44":194,"_46":47,"_48":195,"_17":69,"_51":52,"_53":196,"_55":56,"_57":-5,"_85":357,"_18":358},{"_35":183,"_13":184,"_38":185,"_40":165,"_42":43,"_44":186,"_46":47,"_48":187,"_17":69,"_51":52,"_53":188,"_55":56,"_57":-5,"_85":355,"_18":356},{"_35":175,"_13":176,"_38":177,"_40":165,"_42":43,"_44":178,"_46":47,"_48":179,"_17":69,"_51":52,"_53":180,"_55":56,"_57":-5,"_85":353,"_18":354},{"_35":155,"_13":156,"_38":157,"_40":130,"_42":43,"_44":158,"_46":47,"_48":159,"_17":50,"_51":52,"_53":160,"_55":56,"_57":-5,"_85":351,"_18":352},{"_35":147,"_13":148,"_38":149,"_40":130,"_42":43,"_44":150,"_46":47,"_48":151,"_17":69,"_51":24,"_53":152,"_55":56,"_57":-5,"_85":349,"_18":350},{"_35":139,"_13":140,"_38":141,"_40":130,"_42":43,"_44":142,"_46":47,"_48":143,"_17":69,"_51":52,"_53":144,"_55":56,"_57":-5,"_85":347,"_18":348},{"_35":113,"_13":114,"_38":115,"_40":-5,"_42":43,"_44":93,"_46":47,"_48":116,"_17":69,"_51":70,"_53":-5,"_55":56,"_57":-5,"_85":345,"_18":346},{"_35":120,"_13":121,"_38":122,"_40":115,"_42":43,"_44":123,"_46":47,"_48":124,"_17":69,"_51":52,"_53":125,"_55":56,"_57":-5,"_85":343,"_18":344},{"_35":106,"_13":107,"_38":108,"_40":-5,"_42":43,"_44":109,"_46":47,"_48":110,"_17":50,"_51":70,"_53":-5,"_55":56,"_57":-5,"_85":341,"_18":342},{"_35":98,"_13":99,"_38":100,"_40":-5,"_42":43,"_44":101,"_46":47,"_48":102,"_17":50,"_51":24,"_53":103,"_55":56,"_57":-5,"_85":339,"_18":340},{"_35":88,"_13":89,"_38":90,"_40":-5,"_42":43,"_44":91,"_46":47,"_48":92,"_17":93,"_51":94,"_53":95,"_55":56,"_57":-5,"_85":337,"_18":338},{"_35":79,"_13":80,"_38":81,"_40":-5,"_42":43,"_44":82,"_46":47,"_48":83,"_17":69,"_51":52,"_53":84,"_55":56,"_57":-5,"_85":335,"_18":336},[],[80],[],[89],[],[99],[],[107],[],[114,121],[330],[114],[],[129,140],[],[129,148],[],[129,156],[],[129,164,176],[],[129,164,184],[],[129,164,192],[],[129,164,200],[],[129,164,208],[321,322,323,324,325],[129,164],[320,326,327,328],[129],[],[19,37],[],[19,60],[317,318],[19],["D",1776456559388],["D",1789511441255],{"_11":12,"_282":278},{"_11":12,"_276":-5,"_277":278,"_236":237,"_279":280,"_281":56},{"_17":101,"_13":16,"_35":43,"_268":226,"_269":-5,"_270":-5,"_271":-5,"_272":-5,"_273":-5,"_274":14,"_275":12},"ctx",{"_261":-5,"_299":411,"_412":413,"_414":415,"_416":56,"_417":56,"_418":56,"_419":47,"_420":-5,"_421":-7,"_422":-7,"_423":69,"_424":56,"_425":56,"_426":-5,"_427":56,"_428":56,"_429":56,"_430":-5},"ENV",{"_382":383,"_384":385,"_386":16,"_387":388,"_389":390,"_391":392,"_393":394,"_395":396,"_397":398,"_399":400,"_401":402,"_403":404,"_405":406,"_407":408,"_409":410},"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"]