[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_372":373,"_374":375},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_278":-5,"_20":279,"_22":280,"_281":282,"_283":284,"_26":285,"_24":286,"_287":-5,"_288":-5,"_289":57,"_290":291,"_292":48,"_293":-5,"_294":-5,"_295":296},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","horlumosey01","name","clip-factory","branchName","main","version","path","frontend","project",{"_36":221,"_13":14,"_49":222,"_223":-5,"_224":57,"_225":226,"_227":226,"_228":229,"_230":-5,"_231":232,"_233":85,"_234":48,"_235":-5,"_236":-5,"_237":72,"_238":239,"_240":241,"_242":243,"_244":245,"_246":-5,"_247":248,"_249":248,"_250":251,"_252":251,"_253":251,"_254":248,"_255":248,"_256":257,"_258":259,"_260":261,"_262":57},"tree",[79,80,81,82],"file",{"_36":75,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":76,"_47":48,"_49":77,"_17":72,"_52":73,"_54":-5,"_56":57,"_58":-5,"_18":78},"contents",[33,34,35],"upstream","pull","ahead","behind","envVars",{"_36":67,"_13":68,"_39":69,"_41":42,"_43":44,"_45":70,"_47":48,"_49":71,"_17":72,"_52":73,"_54":-5,"_56":57,"_58":-5,"_18":74},{"_36":60,"_13":61,"_39":62,"_41":42,"_43":44,"_45":63,"_47":48,"_49":64,"_17":51,"_52":24,"_54":65,"_56":57,"_58":-5,"_18":66},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_18":59},"id","67ab99be-3a9e-11f1-ba14-42b51c65c3df","index.tsx","fileId","ba70d67e-3a9d-11f1-8405-42b51c65c3df","parentId","12bc483d-c436-4c15-8995-3838080f9b04","branchId","a5fb7b72-3a9d-11f1-ade9-42b51c65c3df","branchVersion",13,"latest",true,"createdAt",["D",1776458744352],1,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { Sidebar } from \"./components/Sidebar.tsx\";\nimport { DashboardPage } from \"./components/DashboardPage.tsx\";\nimport { ClipperPage } from \"./components/ClipperPage.tsx\";\nimport { MyClipsPage } from \"./components/MyClipsPage.tsx\";\nimport { CreatorsPage } from \"./components/CreatorsPage.tsx\";\n\nfunction App() {\n const [page, setPage] = useState(\"dashboard\");\n const [stats, setStats] = useState({ totalProjects: 0, totalClips: 0, totalDownloads: 0, totalCreators: 0 });\n const [projects, setProjects] = useState([]);\n const [clips, setClips] = useState([]);\n const [creators, setCreators] = useState([]);\n const [loading, setLoading] = useState(true);\n const [sidebarOpen, setSidebarOpen] = useState(false);\n\n const fetchAll = useCallback(async () => {\n try {\n const [s, p, cl, cr] = await Promise.all([\n fetch(\"/api/stats\").then(r => r.json()),\n fetch(\"/api/projects\").then(r => r.json()),\n fetch(\"/api/clips\").then(r => r.json()),\n fetch(\"/api/creators\").then(r => r.json()),\n ]);\n setStats(s); setProjects(p); setClips(cl); setCreators(cr);\n } catch (e) { console.error(e); }\n setLoading(false);\n }, []);\n\n useEffect(() => { fetchAll(); }, [fetchAll]);\n\n const renderPage = () => {\n switch (page) {\n case \"dashboard\": return ;\n case \"clipper\": return ;\n case \"clips\": return ;\n case \"creators\": return ;\n default: return ;\n }\n };\n\n return (\n

\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","deleted",false,"label",[19,38],"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",[19,61],"c422626e-3a9d-11f1-8a0a-42b51c65c3df","components","74496da2-cf10-4ad3-997c-58e1cb48e6ee",5,["D",1776458469988],0,"directory",[19,68],"b63d0212-3a9d-11f1-952a-42b51c65c3df",3,["D",1776458446670],[19],{"_36":197,"_13":198,"_39":199,"_41":-5,"_43":44,"_45":51,"_47":48,"_49":200,"_17":72,"_52":73,"_54":-5,"_56":57,"_58":-5,"_91":201,"_18":202},{"_36":75,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":76,"_47":48,"_49":102,"_17":72,"_52":73,"_54":-5,"_56":57,"_58":-5,"_91":103,"_18":104},{"_36":94,"_13":95,"_39":96,"_41":-5,"_43":44,"_45":97,"_47":48,"_49":98,"_17":72,"_52":24,"_54":99,"_56":57,"_58":-5,"_91":100,"_18":101},{"_36":83,"_13":84,"_39":85,"_41":-5,"_43":44,"_45":86,"_47":48,"_49":87,"_17":88,"_52":89,"_54":90,"_56":57,"_58":-5,"_91":92,"_18":93},"dcd32e46-3a9e-11f1-80f8-42b51c65c3df","main.ts","e78529da-3a9d-11f1-9157-42b51c65c3df",21,["D",1776458940904],2,"http","import { Hono } from \"npm:hono@4\";\nimport { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { parseVal } from \"https://esm.town/v/std/utils/index.ts\";\nimport { runMigrations, seedDefaults } from \"./database/migrations.ts\";\nimport * as db from \"./database/queries.ts\";\n\nconst app = new Hono();\n\n// Ensure DB is ready (v2 schema)\nlet dbReady = false;\napp.use(\"*\", async (c, next) => {\n if (!dbReady) {\n await runMigrations();\n await seedDefaults();\n dbReady = true;\n }\n await next();\n});\n\napp.onError((err) => Promise.reject(err));\n\n// --- API: Stats ---\napp.get(\"/api/stats\", async (c) => c.json(await db.getStats()));\n\n// --- API: Projects ---\napp.get(\"/api/projects\", async (c) => c.json(await db.getProjects()));\n\napp.post(\"/api/projects\", async (c) => {\n const { url, videoId } = await c.req.json();\n if (!videoId) return c.json({ error: \"Invalid video ID\" }, 400);\n\n // Fetch video info from YouTube oEmbed (no API key needed)\n let title = \"Untitled Video\";\n let thumbnail = `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`;\n let channelName = \"Unknown\";\n let duration = \"Unknown\";\n\n try {\n const oembedRes = await fetch(`https://www.youtube.com/oembed?url=https://youtube.com/watch?v=${videoId}&format=json`);\n if (oembedRes.ok) {\n const data = await oembedRes.json();\n title = data.title || title;\n channelName = data.author_name || channelName;\n thumbnail = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;\n }\n } catch (e) { /* fallback to defaults */ }\n\n const id = await db.addProject(url, videoId, title, thumbnail, channelName, duration);\n return c.json({ id: Number(id), youtube_url: url, video_id: videoId, title, thumbnail, channel_name: channelName, duration });\n});\n\napp.delete(\"/api/projects/:id\", async (c) => {\n await db.deleteProject(Number(c.req.param(\"id\")));\n return c.json({ ok: true });\n});\n\n// --- API: Clips ---\napp.get(\"/api/clips\", async (c) => {\n const projectId = c.req.query(\"projectId\") ? Number(c.req.query(\"projectId\")) : undefined;\n return c.json(await db.getClips(projectId));\n});\n\napp.post(\"/api/clips\", async (c) => {\n const { projectId, title, startTime, endTime, durationSec, caption, hashtags } = await c.req.json();\n await db.addClip(Number(projectId), title, startTime, endTime, durationSec || 0, caption, hashtags);\n return c.json({ ok: true });\n});\n\napp.patch(\"/api/clips/:id/status\", async (c) => {\n const { status } = await c.req.json();\n await db.updateClipStatus(Number(c.req.param(\"id\")), status);\n return c.json({ ok: true });\n});\n\napp.post(\"/api/clips/:id/download\", async (c) => {\n await db.incrementDownload(Number(c.req.param(\"id\")));\n return c.json({ ok: true });\n});\n\napp.delete(\"/api/clips/:id\", async (c) => {\n await db.deleteClip(Number(c.req.param(\"id\")));\n return c.json({ ok: true });\n});\n\n// --- API: Creators ---\napp.get(\"/api/creators\", async (c) => c.json(await db.getCreators()));\n\napp.post(\"/api/creators\", async (c) => {\n const { name, emoji, color, channelUrl } = await c.req.json();\n await db.addCreator(name, emoji || \"🎮\", color || \"#6366f1\", channelUrl);\n return c.json({ ok: true });\n});\n\n// --- View Source ---\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// --- Static files ---\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path));\napp.get(\"/\", (c) => serveFile(\"/frontend/index.html\"));\n\nexport default app.fetch;\n","children",[],[84],"ede835dc-3a9e-11f1-9aab-42b51c65c3df","README.md","ede836cc-3a9e-11f1-9aab-42b51c65c3df",23,["D",1776458969570],"# 🎬 Clip Factory\n\n**Your command center for running a faceless YouTube clips channel.** Import long-form YouTube videos, define clip timestamps, and download everything you need to post viral clips to TikTok, Instagram Reels, YouTube Shorts, and Twitter/X.\n\n## How It Works\n\n```mermaid\nflowchart LR\n A[🔗 Paste YouTube URL] --> B[📥 Auto-Import Video Info]\n B --> C[🎥 Watch & Find Moments]\n C --> D[✂️ Define Clip Timestamps]\n D --> E[📝 Add Captions & Hashtags]\n E --> F[📥 Download Clip Package]\n F --> G[📱 Post to Social Media]\n```\n\n## Features\n\n- **📥 Video Import** — Paste any YouTube URL, auto-fetches title, thumbnail & channel info\n- **🎥 Embedded Player** — Watch the video right in the dashboard to find clip-worthy moments \n- **✂️ Clip Creator** — Define start/end timestamps with duration validation\n- **📝 Captions & Hashtags** — Pre-write your social media captions per clip\n- **📥 Download Package** — Each clip exports with timestamps, source link, captions, and recommended editing tools\n- **⭐ Creator Tracking** — Pre-loaded with IShowSpeed, Kai Cenat, Duke Dennis, Adin Ross, xQc, Sketch\n- **📊 Dashboard** — Track total videos, clips created, downloads, and creators\n\n## Pages\n\n| Page | Description |\n|------|-------------|\n| 📊 Dashboard | Overview stats, recent videos & clips |\n| ✂️ Clip Video | Import YouTube URLs and create clips |\n| 🎬 My Clips | Browse, filter, download & manage all clips |\n| ⭐ Creators | Track favorite creators to clip from |\n\n## Tech Stack\n\n- **Frontend:** React 18 + Twind (Tailwind)\n- **Backend:** Hono (TypeScript)\n- **Database:** Val Town SQLite\n- **Runtime:** Deno (Val Town)\n",[],[95],["D",1776458446670],[105,106,107],[19],{"_36":67,"_13":68,"_39":69,"_41":42,"_43":44,"_45":70,"_47":48,"_49":114,"_17":72,"_52":73,"_54":-5,"_56":57,"_58":-5,"_91":115,"_18":116},{"_36":60,"_13":61,"_39":62,"_41":42,"_43":44,"_45":63,"_47":48,"_49":111,"_17":51,"_52":24,"_54":65,"_56":57,"_58":-5,"_91":112,"_18":113},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":108,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_91":109,"_18":110},["D",1776458744352],[],[19,38],["D",1776458730884],[],[19,61],["D",1776458469988],[117,118,119,120,121,122,123,124,125],[19,68],{"_36":189,"_13":190,"_39":191,"_41":69,"_43":44,"_45":192,"_47":48,"_49":193,"_17":72,"_52":53,"_54":194,"_56":57,"_58":-5,"_91":195,"_18":196},{"_36":181,"_13":182,"_39":183,"_41":69,"_43":44,"_45":184,"_47":48,"_49":185,"_17":72,"_52":53,"_54":186,"_56":57,"_58":-5,"_91":187,"_18":188},{"_36":173,"_13":174,"_39":175,"_41":69,"_43":44,"_45":176,"_47":48,"_49":177,"_17":72,"_52":53,"_54":178,"_56":57,"_58":-5,"_91":179,"_18":180},{"_36":165,"_13":166,"_39":167,"_41":69,"_43":44,"_45":168,"_47":48,"_49":169,"_17":72,"_52":53,"_54":170,"_56":57,"_58":-5,"_91":171,"_18":172},{"_36":158,"_13":159,"_39":160,"_41":69,"_43":44,"_45":70,"_47":48,"_49":161,"_17":72,"_52":53,"_54":162,"_56":57,"_58":-5,"_91":163,"_18":164},{"_36":150,"_13":151,"_39":152,"_41":69,"_43":44,"_45":153,"_47":48,"_49":154,"_17":72,"_52":53,"_54":155,"_56":57,"_58":-5,"_91":156,"_18":157},{"_36":142,"_13":143,"_39":144,"_41":69,"_43":44,"_45":145,"_47":48,"_49":146,"_17":72,"_52":53,"_54":147,"_56":57,"_58":-5,"_91":148,"_18":149},{"_36":134,"_13":135,"_39":136,"_41":69,"_43":44,"_45":137,"_47":48,"_49":138,"_17":72,"_52":53,"_54":139,"_56":57,"_58":-5,"_91":140,"_18":141},{"_36":126,"_13":127,"_39":128,"_41":69,"_43":44,"_45":129,"_47":48,"_49":130,"_17":72,"_52":53,"_54":131,"_56":57,"_58":-5,"_91":132,"_18":133},"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",[],[19,68,127],"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",[],[19,68,135],"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",[],[19,68,143],"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",[],[19,68,151],"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",[],[19,68,159],"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",[],[19,68,166],"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",[],[19,68,174],"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",[],[19,68,182],"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",[],[19,68,190],"ac9f999a-3a9d-11f1-ade9-42b51c65c3df","database","a239e3a6-adb5-40dd-a7a4-63accf410df5",["D",1776458430544],[203,204],[198],{"_36":213,"_13":214,"_39":215,"_41":199,"_43":44,"_45":216,"_47":48,"_49":217,"_17":76,"_52":53,"_54":218,"_56":57,"_58":-5,"_91":219,"_18":220},{"_36":205,"_13":206,"_39":207,"_41":199,"_43":44,"_45":208,"_47":48,"_49":209,"_17":51,"_52":53,"_54":210,"_56":57,"_58":-5,"_91":211,"_18":212},"5a25803e-3a9e-11f1-8cae-42b51c65c3df","queries.ts","b2fa50dc-3a9d-11f1-884c-42b51c65c3df",11,["D",1776458721665],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\n// --- Projects ---\nexport async function getProjects() {\n const result = await sqlite.execute(\"SELECT * FROM projects ORDER BY created_at DESC\");\n return result.rows;\n}\n\nexport async function addProject(youtubeUrl: string, videoId: string, title: string, thumbnail: string, channelName: string, duration: string) {\n const result = await sqlite.execute({\n sql: \"INSERT INTO projects (youtube_url, video_id, title, thumbnail, channel_name, duration, status) VALUES (?, ?, ?, ?, ?, ?, 'ready')\",\n args: [youtubeUrl, videoId, title, thumbnail, channelName, duration],\n });\n return result.lastInsertRowid;\n}\n\nexport async function deleteProject(id: number) {\n await sqlite.batch([\n { sql: \"DELETE FROM clips WHERE project_id = ?\", args: [id] },\n { sql: \"DELETE FROM projects WHERE id = ?\", args: [id] },\n ]);\n}\n\n// --- Clips ---\nexport async function getClips(projectId?: number) {\n let sql = `SELECT clips.*, projects.title as video_title, projects.thumbnail, projects.video_id, projects.channel_name\n FROM clips JOIN projects ON clips.project_id = projects.id`;\n const args: any[] = [];\n if (projectId) { sql += \" WHERE clips.project_id = ?\"; args.push(projectId); }\n sql += \" ORDER BY clips.created_at DESC\";\n return (await sqlite.execute({ sql, args })).rows;\n}\n\nexport async function addClip(projectId: number, title: string, startTime: string, endTime: string, durationSec: number, caption?: string, hashtags?: string) {\n await sqlite.execute({\n sql: \"INSERT INTO clips (project_id, title, start_time, end_time, duration_sec, caption, hashtags) VALUES (?, ?, ?, ?, ?, ?, ?)\",\n args: [projectId, title, startTime, endTime, durationSec, caption || null, hashtags || null],\n });\n}\n\nexport async function updateClipStatus(id: number, status: string) {\n await sqlite.execute({ sql: \"UPDATE clips SET status = ? WHERE id = ?\", args: [status, id] });\n}\n\nexport async function incrementDownload(id: number) {\n await sqlite.execute({ sql: \"UPDATE clips SET download_count = download_count + 1 WHERE id = ?\", args: [id] });\n}\n\nexport async function deleteClip(id: number) {\n await sqlite.execute({ sql: \"DELETE FROM clips WHERE id = ?\", args: [id] });\n}\n\n// --- Creators ---\nexport async function getCreators() {\n return (await sqlite.execute(\"SELECT * FROM creators ORDER BY name\")).rows;\n}\n\nexport async function addCreator(name: string, emoji: string, color: string, channelUrl?: string) {\n await sqlite.execute({\n sql: \"INSERT INTO creators (name, avatar_emoji, color, channel_url) VALUES (?, ?, ?, ?)\",\n args: [name, emoji, color, channelUrl || null],\n });\n}\n\n// --- Stats ---\nexport async function getStats() {\n const [projects, clips, downloads, creators] = await Promise.all([\n sqlite.execute(\"SELECT COUNT(*) as c FROM projects\"),\n sqlite.execute(\"SELECT COUNT(*) as c FROM clips\"),\n sqlite.execute(\"SELECT COALESCE(SUM(download_count), 0) as c FROM clips\"),\n sqlite.execute(\"SELECT COUNT(*) as c FROM creators\"),\n ]);\n return {\n totalProjects: projects.rows[0].c,\n totalClips: clips.rows[0].c,\n totalDownloads: downloads.rows[0].c,\n totalCreators: creators.rows[0].c,\n };\n}\n",[],[198,206],"e228cf0e-3a9e-11f1-a2e6-42b51c65c3df","migrations.ts","ac9f61aa-3a9d-11f1-ade9-42b51c65c3df",22,["D",1776458949847],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport async function runMigrations() {\n await sqlite.batch([\n {\n sql: `CREATE TABLE IF NOT EXISTS projects (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n youtube_url TEXT NOT NULL,\n video_id TEXT,\n title TEXT,\n thumbnail TEXT,\n channel_name TEXT,\n duration TEXT,\n status TEXT DEFAULT 'processing',\n created_at TEXT DEFAULT (datetime('now'))\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS clips (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n project_id INTEGER NOT NULL,\n title TEXT NOT NULL,\n start_time TEXT NOT NULL,\n end_time TEXT NOT NULL,\n duration_sec INTEGER DEFAULT 0,\n aspect_ratio TEXT DEFAULT '9:16',\n platform TEXT DEFAULT 'all',\n status TEXT DEFAULT 'ready',\n download_count INTEGER DEFAULT 0,\n caption TEXT,\n hashtags TEXT,\n created_at TEXT DEFAULT (datetime('now')),\n FOREIGN KEY (project_id) REFERENCES projects(id)\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS creators (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n channel_url TEXT,\n avatar_emoji TEXT DEFAULT '🎮',\n color TEXT DEFAULT '#6366f1',\n clips_made INTEGER DEFAULT 0,\n created_at TEXT DEFAULT (datetime('now'))\n )`,\n },\n ]);\n}\n\nexport async function seedDefaults() {\n const existing = await sqlite.execute(\"SELECT COUNT(*) as count FROM creators\");\n if (existing.rows[0].count > 0) return;\n\n await sqlite.batch([\n { sql: \"INSERT INTO creators (name, avatar_emoji, color, channel_url) VALUES (?, ?, ?, ?)\", args: [\"IShowSpeed\", \"⚡\", \"#ef4444\", \"https://youtube.com/@IShowSpeed\"] },\n { sql: \"INSERT INTO creators (name, avatar_emoji, color, channel_url) VALUES (?, ?, ?, ?)\", args: [\"Kai Cenat\", \"🎤\", \"#8b5cf6\", \"https://youtube.com/@KaiCenat\"] },\n { sql: \"INSERT INTO creators (name, avatar_emoji, color, channel_url) VALUES (?, ?, ?, ?)\", args: [\"Duke Dennis\", \"🏀\", \"#f97316\", \"https://youtube.com/@DukeDennis\"] },\n { sql: \"INSERT INTO creators (name, avatar_emoji, color, channel_url) VALUES (?, ?, ?, ?)\", args: [\"Adin Ross\", \"🎰\", \"#ec4899\", \"https://youtube.com/@AdinRoss\"] },\n { sql: \"INSERT INTO creators (name, avatar_emoji, color, channel_url) VALUES (?, ?, ?, ?)\", args: [\"xQc\", \"🎯\", \"#3b82f6\", \"https://youtube.com/@xQc\"] },\n { sql: \"INSERT INTO creators (name, avatar_emoji, color, channel_url) VALUES (?, ?, ?, ?)\", args: [\"Sketch\", \"😂\", \"#10b981\", \"https://youtube.com/@Sketch\"] },\n ]);\n}\n",[],[198,214],"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,"_277":273},"org",{"_11":12,"_271":-5,"_272":273,"_231":232,"_274":275,"_276":57},"branch",{"_17":97,"_13":16,"_36":44,"_263":221,"_264":-5,"_265":-5,"_266":-5,"_267":-5,"_268":-5,"_269":14,"_270":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":221,"_13":14,"_49":367,"_223":-5,"_224":57,"_225":226,"_227":226,"_228":229,"_230":-5,"_231":232,"_233":85,"_234":48,"_235":-5,"_236":-5,"_237":72,"_238":239,"_240":241,"_242":243,"_244":368,"_246":-5,"_247":248,"_249":248,"_250":251,"_252":251,"_253":251,"_254":248,"_255":248,"_256":369,"_258":370,"_260":371,"_262":57},[313,316,329,330],"files",[313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330],"counts",{"_304":72,"_305":51,"_306":72,"_32":307,"_308":309},[298,299,300],{"_36":75,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":76,"_47":48,"_49":77,"_17":72,"_52":73,"_54":-5,"_56":57,"_58":-5,"_18":297},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],{"_36":67,"_13":68,"_39":69,"_41":42,"_43":44,"_45":70,"_47":48,"_49":71,"_17":72,"_52":73,"_54":-5,"_56":57,"_58":-5,"_18":303},{"_36":60,"_13":61,"_39":62,"_41":42,"_43":44,"_45":63,"_47":48,"_49":64,"_17":51,"_52":24,"_54":65,"_56":57,"_58":-5,"_18":302},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_18":301},[19,38],[19,61],[19,68],"pulls","branches","forks",{"_310":72,"_312":72},"connections",{"_310":72,"_311":72},"count","unfilledCount","emptyCount",{"_36":197,"_13":198,"_39":199,"_41":-5,"_43":44,"_45":51,"_47":48,"_49":200,"_17":72,"_52":73,"_54":-5,"_56":57,"_58":-5,"_91":365,"_18":366},{"_36":213,"_13":214,"_39":215,"_41":199,"_43":44,"_45":216,"_47":48,"_49":217,"_17":76,"_52":53,"_54":218,"_56":57,"_58":-5,"_91":363,"_18":364},{"_36":205,"_13":206,"_39":207,"_41":199,"_43":44,"_45":208,"_47":48,"_49":209,"_17":51,"_52":53,"_54":210,"_56":57,"_58":-5,"_91":361,"_18":362},{"_36":75,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":76,"_47":48,"_49":102,"_17":72,"_52":73,"_54":-5,"_56":57,"_58":-5,"_91":359,"_18":360},{"_36":67,"_13":68,"_39":69,"_41":42,"_43":44,"_45":70,"_47":48,"_49":114,"_17":72,"_52":73,"_54":-5,"_56":57,"_58":-5,"_91":357,"_18":358},{"_36":189,"_13":190,"_39":191,"_41":69,"_43":44,"_45":192,"_47":48,"_49":193,"_17":72,"_52":53,"_54":194,"_56":57,"_58":-5,"_91":355,"_18":356},{"_36":181,"_13":182,"_39":183,"_41":69,"_43":44,"_45":184,"_47":48,"_49":185,"_17":72,"_52":53,"_54":186,"_56":57,"_58":-5,"_91":353,"_18":354},{"_36":173,"_13":174,"_39":175,"_41":69,"_43":44,"_45":176,"_47":48,"_49":177,"_17":72,"_52":53,"_54":178,"_56":57,"_58":-5,"_91":351,"_18":352},{"_36":165,"_13":166,"_39":167,"_41":69,"_43":44,"_45":168,"_47":48,"_49":169,"_17":72,"_52":53,"_54":170,"_56":57,"_58":-5,"_91":349,"_18":350},{"_36":158,"_13":159,"_39":160,"_41":69,"_43":44,"_45":70,"_47":48,"_49":161,"_17":72,"_52":53,"_54":162,"_56":57,"_58":-5,"_91":347,"_18":348},{"_36":150,"_13":151,"_39":152,"_41":69,"_43":44,"_45":153,"_47":48,"_49":154,"_17":72,"_52":53,"_54":155,"_56":57,"_58":-5,"_91":345,"_18":346},{"_36":142,"_13":143,"_39":144,"_41":69,"_43":44,"_45":145,"_47":48,"_49":146,"_17":72,"_52":53,"_54":147,"_56":57,"_58":-5,"_91":343,"_18":344},{"_36":134,"_13":135,"_39":136,"_41":69,"_43":44,"_45":137,"_47":48,"_49":138,"_17":72,"_52":53,"_54":139,"_56":57,"_58":-5,"_91":341,"_18":342},{"_36":126,"_13":127,"_39":128,"_41":69,"_43":44,"_45":129,"_47":48,"_49":130,"_17":72,"_52":53,"_54":131,"_56":57,"_58":-5,"_91":339,"_18":340},{"_36":60,"_13":61,"_39":62,"_41":42,"_43":44,"_45":63,"_47":48,"_49":111,"_17":51,"_52":24,"_54":65,"_56":57,"_58":-5,"_91":337,"_18":338},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":108,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_91":335,"_18":336},{"_36":94,"_13":95,"_39":96,"_41":-5,"_43":44,"_45":97,"_47":48,"_49":98,"_17":72,"_52":24,"_54":99,"_56":57,"_58":-5,"_91":333,"_18":334},{"_36":83,"_13":84,"_39":85,"_41":-5,"_43":44,"_45":86,"_47":48,"_49":87,"_17":88,"_52":89,"_54":90,"_56":57,"_58":-5,"_91":331,"_18":332},[],[84],[],[95],[],[19,38],[],[19,61],[],[19,68,127],[],[19,68,135],[],[19,68,143],[],[19,68,151],[],[19,68,159],[],[19,68,166],[],[19,68,174],[],[19,68,182],[],[19,68,190],[318,319,320,321,322,323,324,325,326],[19,68],[317,327,328],[19],[],[198,206],[],[198,214],[314,315],[198],["D",1776458419406],["D",1789512647429],{"_11":12,"_277":273},{"_11":12,"_271":-5,"_272":273,"_231":232,"_274":275,"_276":57},{"_17":97,"_13":16,"_36":44,"_263":221,"_264":-5,"_265":-5,"_266":-5,"_267":-5,"_268":-5,"_269":14,"_270":12},"ctx",{"_256":-5,"_294":405,"_406":407,"_408":409,"_410":57,"_411":57,"_412":57,"_413":48,"_414":-5,"_415":-7,"_416":-7,"_417":72,"_418":57,"_419":57,"_420":-5,"_421":57,"_422":57,"_423":57,"_424":-5},"ENV",{"_376":377,"_378":379,"_380":16,"_381":382,"_383":384,"_385":386,"_387":388,"_389":390,"_391":392,"_393":394,"_395":396,"_397":398,"_399":400,"_401":402,"_403":404},"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"]