PoseFlow — AI Dance Practice Dashboard

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_287":288,"_289":290},"routes/_app.x.$handle.$name",{"_110":109,"_37":50,"_118":96,"_32":119,"_13":14,"_120":-5,"_11":121,"_122":123,"_124":125,"_126":127,"_128":129,"_26":-5,"_130":131,"_132":133,"_134":30,"_135":136,"_137":65,"_138":-5,"_139":-5,"_140":141},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_37":50,"_43":51,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_59":60,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":89,"_90":91,"_92":93,"_94":30},"version",8,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","88086587-cef1-4083-8724-a6ecdbdd3138","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":14,"_46":47,"_29":30},"previous","deleted",false,"deletedHere","path","frontend/components/CreatorStudio.tsx","latestPath","fileId","a2b3eeee-7f36-11f1-8010-1607ee4eb77e","name","CreatorStudio.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { Plus, Video, Clock, User, Sparkles, Loader2 } from \"https://esm.sh/lucide-react@0.378.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { createLoop } from \"../lib/api.ts\";\n\nexport function CreatorStudio({ onCreated }: { onCreated: () => Promise }) {\n const [url, setUrl] = useState(\"\");\n const [title, setTitle] = useState(\"\");\n const [start, setStart] = useState(\"\");\n const [end, setEnd] = useState(\"\");\n const [desc, setDesc] = useState(\"\");\n const [creator, setCreator] = useState(\"\");\n const [submitting, setSubmitting] = useState(false);\n const [error, setError] = useState(\"\");\n\n async function handleSubmit(e: Event) {\n e.preventDefault();\n if (!url.trim() || !title.trim() || !start || !end || !creator.trim()) {\n setError(\"Please fill in all required fields.\");\n return;\n }\n setSubmitting(true);\n setError(\"\");\n try {\n await createLoop({\n youtube_video_id: url,\n title,\n start_time: parseFloat(start),\n end_time: parseFloat(end),\n description: desc,\n creator_name: creator,\n });\n setUrl(\"\"); setTitle(\"\"); setStart(\"\"); setEnd(\"\"); setDesc(\"\"); setCreator(\"\");\n await onCreated();\n } catch {\n setError(\"Failed to create loop. Please try again.\");\n }\n setSubmitting(false);\n }\n\n return (\n

\n \n

Creator Studio

\n — Submit a new dance loop\n

\n\n

\n YouTube Video URL or ID *\n

\n\n

\n Routine Title *\n setTitle((e.target as HTMLInputElement).value)}\n placeholder=\"e.g. Neon Pulse — Electronic Flow\"\n class=\"w-full rounded-lg border border-gray-700 bg-gray-900/80 px-3 py-2.5 text-sm text-gray-200 placeholder-gray-600 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none\"\n />\n

\n\n

\n Start Time (seconds) *\n

\n \n setStart((e.target as HTMLInputElement).value)}\n placeholder=\"45\"\n min=\"0\"\n class=\"w-full rounded-lg border border-gray-700 bg-gray-900/80 pl-10 pr-3 py-2.5 text-sm text-gray-200 placeholder-gray-600 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none\"\n />\n

\n\n

\n End Time (seconds) *\n

\n \n setEnd((e.target as HTMLInputElement).value)}\n placeholder=\"62\"\n min=\"0\"\n class=\"w-full rounded-lg border border-gray-700 bg-gray-900/80 pl-10 pr-3 py-2.5 text-sm text-gray-200 placeholder-gray-600 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none\"\n />\n

\n\n

\n Description\n setDesc((e.target as HTMLTextAreaElement).value)}\n placeholder=\"Brief description of the choreography…\"\n rows={2}\n class=\"w-full rounded-lg border border-gray-700 bg-gray-900/80 px-3 py-2.5 text-sm text-gray-200 placeholder-gray-600 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none resize-none\"\n />\n

\n\n

\n Choreographer Name *\n

\n \n setCreator((e.target as HTMLInputElement).value)}\n placeholder=\"Your name\"\n class=\"w-full rounded-lg border border-gray-700 bg-gray-900/80 pl-10 pr-3 py-2.5 text-sm text-gray-200 placeholder-gray-600 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none\"\n />\n

\n\n

\n \n {submitting ? : }\n {submitting ? \"Publishing…\" : \"Publish Loop\"}\n \n

\n\n {error &&

{error}

}\n

\n );\n}\n","createdAt",["D",1784000805974],"branchVersion","branchId","a0587b01-7b95-46a7-a0c9-234544581fbf","id","de393d39-968c-4e43-9fe9-9420128c7134","poseflow",["D",1784000547197],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","AI Dance Practice Dashboard with privacy-first pose tracking","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789585199&sig=1baafecf11cec877edc88f123efd7f687a508ecc290c26f9eecfc4b3e272df79","ccf0a870-98bc-4921-b9c4-8841c73ca629","pinnedFileId","019f5eb8-09d1-74d3-a77a-a913bc4a7434","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","0eeb7c2f-edaa-406d-8328-ae307617cd73","tursoName","de393d39968c4e439fe99420128c7134","tursoHostname","de393d39968c4e439fe99420128c7134-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789525843977],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_110":109,"_117":113},"org",{"_110":109,"_111":-5,"_112":113,"_19":61,"_114":115,"_116":30},"branch",{"_13":95,"_37":96,"_48":47,"_97":49,"_98":99,"_100":101,"_102":55,"_103":104,"_105":106,"_107":50,"_108":109},"isOwned",17,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",89,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","Ttt","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJuWTg0T1gzZkxReGpuQ0VpOHRvOHRoOFBVciJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_37":50,"_43":282,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_59":60,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":283,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":284,"_90":285,"_92":286,"_94":30},"tree",[189,200,201],"files",[189,190,191,192,193,194,195,196,197,198,199,200,201],"counts",{"_179":69,"_180":162,"_181":69,"_182":183,"_184":185},"contents",[153,154,155],"upstreamProject",{"_48":104,"_37":149,"_57":150,"_59":60,"_54":55,"_88":151},"upstreamBranch",{"_48":99,"_43":142,"_143":144,"_37":96,"_97":104,"_13":145,"_98":-5,"_100":-5,"_146":147,"_52":-5,"_94":30,"_54":55,"_108":148,"_70":106,"_107":149},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","Starter template with client-side React & Hono server",{"_110":148,"_117":152},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789585199&sig=e0ad9b96a0e58967744de3785adb3e9a68085da5b0c135b58439da2ef923cdc0",{"_48":173,"_37":174,"_35":175,"_158":-5,"_46":47,"_45":162,"_160":65,"_43":176,"_13":69,"_39":177,"_41":-5,"_29":30,"_165":-5,"_32":178},{"_48":167,"_37":168,"_35":169,"_158":-5,"_46":47,"_45":162,"_160":30,"_43":170,"_13":69,"_39":26,"_41":171,"_29":30,"_165":-5,"_32":172},{"_48":156,"_37":157,"_35":63,"_158":-5,"_46":47,"_45":159,"_160":30,"_43":161,"_13":162,"_39":163,"_41":164,"_29":30,"_165":-5,"_32":166},"5a63f358-deaa-4dac-9f69-8f27fe62feb6","index.ts","parentId",2,"latest",["D",1784000684009],1,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// ─── Helpers ───────────────────────────────────────────────\nfunction generateSlug(): string {\n const chars = \"abcdefghijklmnopqrstuvwxyz0123456789\";\n let slug = \"\";\n for (let i = 0; i < 8; i++) {\n slug += chars[Math.floor(Math.random() * chars.length)];\n }\n return slug;\n}\n\nfunction extractYouTubeId(input: string): string {\n const match = input.match(/(?:youtube\\.com\\/watch\\?v=|youtu\\.be\\/|youtube\\.com\\/embed\\/)([\\w-]{11})/);\n return match ? match[1] : input.trim();\n}\n\n// ─── Database Initialization ───────────────────────────────\nasync function initDB() {\n await sqlite.batch([\n {\n sql: `CREATE TABLE IF NOT EXISTS loops (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n youtube_video_id TEXT NOT NULL,\n title TEXT NOT NULL,\n start_time REAL NOT NULL,\n end_time REAL NOT NULL,\n description TEXT DEFAULT '',\n creator_name TEXT NOT NULL,\n created_at TEXT DEFAULT (datetime('now'))\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS challenges (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n loop_id INTEGER NOT NULL,\n target_score REAL NOT NULL DEFAULT 85,\n teacher_name TEXT NOT NULL,\n challenge_link_slug TEXT UNIQUE NOT NULL,\n created_at TEXT DEFAULT (datetime('now')),\n FOREIGN KEY (loop_id) REFERENCES loops(id)\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS practice_sessions (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n loop_id INTEGER NOT NULL,\n date TEXT DEFAULT (datetime('now')),\n duration_minutes REAL NOT NULL,\n sync_score REAL NOT NULL,\n breakdown_json TEXT NOT NULL,\n FOREIGN KEY (loop_id) REFERENCES loops(id)\n )`,\n },\n ]);\n\n // Seed data if empty\n const { rows: loopRows } = await sqlite.execute(\"SELECT COUNT(*) as count FROM loops\");\n if (Number(loopRows[0].count) === 0) {\n const seedLoops: [string, string, number, number, string, string][] = [\n [\"dQw4w9WgXcQ\", \"Neon Pulse — Electronic Flow\", 45, 62, \"High-energy electronic dance routine with fluid arm waves and body rolls\", \"Maya Chen\"],\n [\"9bZkp7q19f0\", \"Hip Hop Fundamentals Vol.3\", 30, 55, \"Classic hip-hop grooves with bounce, isolation work, and footwork patterns\", \"Marcus Rivera\"],\n [\"kJQP7kiw5Fk\", \"Contemporary Lyrical Suite\", 78, 105, \"Emotive contemporary flow blending ballet lines with floor work transitions\", \"Aisha Johnson\"],\n [\"JGwWNGJdvx8\", \"K-Pop Signature Moves\", 12, 35, \"Sharp, synchronized K-pop choreography with formation changes and point gestures\", \"Yuki Tanaka\"],\n [\"CevxZvSJLk8\", \"Latin Rhythm Basics & Turns\", 20, 48, \"Partner-free salsa fundamentals — basic step, cross-body lead, and spot turns\", \"Carlos Mendez\"],\n ];\n for (const [ytId, title, start, end, desc, creator] of seedLoops) {\n await sqlite.execute({\n sql: \"INSERT INTO loops (youtube_video_id, title, start_time, end_time, description, creator_name) VALUES (?, ?, ?, ?, ?, ?)\",\n args: [ytId, title, start, end, desc, creator],\n });\n }\n\n // Seed challenges\n const challengeSeeds: [number, number, string, string][] = [\n [1, 85, \"Maya Chen\", \"neon-pulse\"],\n [3, 80, \"Aisha Johnson\", \"lyrical-v1\"],\n ];\n for (const [loopId, target, teacher, slug] of challengeSeeds) {\n await sqlite.execute({\n sql: \"INSERT INTO challenges (loop_id, target_score, teacher_name, challenge_link_slug) VALUES (?, ?, ?, ?)\",\n args: [loopId, target, teacher, slug],\n });\n }\n\n // Seed practice sessions across multiple days for streak\n const now = Date.now();\n const day = 24 * 60 * 60 * 1000;\n const sessionSeeds: [number, string, number, number, string][] = [\n [1, new Date(now).toISOString(), 12, 88.5, '{\"timing\":90,\"posture\":86,\"stance\":89}'],\n [2, new Date(now - day).toISOString(), 8, 82.3, '{\"timing\":85,\"posture\":78,\"stance\":84}'],\n [3, new Date(now - day).toISOString(), 15, 91.2, '{\"timing\":93,\"posture\":90,\"stance\":91}'],\n [1, new Date(now - 2 * day).toISOString(), 10, 79.8, '{\"timing\":75,\"posture\":82,\"stance\":82}'],\n [4, new Date(now - 2 * day).toISOString(), 7, 86.0, '{\"timing\":88,\"posture\":84,\"stance\":86}'],\n [2, new Date(now - 5 * day).toISOString(), 20, 76.5, '{\"timing\":72,\"posture\":78,\"stance\":79}'],\n [5, new Date(now - 7 * day).toISOString(), 14, 83.7, '{\"timing\":85,\"posture\":80,\"stance\":86}'],\n ];\n for (const [loopId, date, dur, score, breakdown] of sessionSeeds) {\n await sqlite.execute({\n sql: \"INSERT INTO practice_sessions (loop_id, date, duration_minutes, sync_score, breakdown_json) VALUES (?, ?, ?, ?, ?)\",\n args: [loopId, date, dur, score, breakdown],\n });\n }\n }\n}\n\nconst dbReady = initDB();\n\n// ─── API: Loops ────────────────────────────────────────────\napp.get(\"/api/loops\", async (c) => {\n await dbReady;\n const { rows } = await sqlite.execute(\"SELECT * FROM loops ORDER BY created_at DESC\");\n return c.json(rows);\n});\n\napp.post(\"/api/loops\", async (c) => {\n await dbReady;\n const body = await c.req.json();\n const videoId = extractYouTubeId(body.youtube_video_id);\n const result = await sqlite.execute({\n sql: \"INSERT INTO loops (youtube_video_id, title, start_time, end_time, description, creator_name) VALUES (?, ?, ?, ?, ?, ?)\",\n args: [videoId, body.title, Number(body.start_time), Number(body.end_time), body.description || \"\", body.creator_name],\n });\n const { rows } = await sqlite.execute({ sql: \"SELECT * FROM loops WHERE id = ?\", args: [Number(result.lastInsertRowid)] });\n return c.json(rows[0], 201);\n});\n\n// ─── API: Challenges ───────────────────────────────────────\napp.get(\"/api/challenges\", async (c) => {\n await dbReady;\n const { rows } = await sqlite.execute(\n `SELECT c.*, l.title as loop_title, l.youtube_video_id FROM challenges c JOIN loops l ON c.loop_id = l.id ORDER BY c.created_at DESC`\n );\n return c.json(rows);\n});\n\napp.post(\"/api/challenges\", async (c) => {\n await dbReady;\n const body = await c.req.json();\n const slug = generateSlug();\n const result = await sqlite.execute({\n sql: \"INSERT INTO challenges (loop_id, target_score, teacher_name, challenge_link_slug) VALUES (?, ?, ?, ?)\",\n args: [Number(body.loop_id), Number(body.target_score) || 85, body.teacher_name, slug],\n });\n const { rows } = await sqlite.execute({\n sql: `SELECT c.*, l.title as loop_title, l.youtube_video_id FROM challenges c JOIN loops l ON c.loop_id = l.id WHERE c.id = ?`,\n args: [Number(result.lastInsertRowid)],\n });\n return c.json(rows[0], 201);\n});\n\n// ─── API: Practice Sessions ────────────────────────────────\napp.get(\"/api/sessions\", async (c) => {\n await dbReady;\n const { rows } = await sqlite.execute(\n `SELECT ps.*, l.title as loop_title FROM practice_sessions ps JOIN loops l ON ps.loop_id = l.id ORDER BY ps.date DESC`\n );\n return c.json(rows);\n});\n\napp.post(\"/api/sessions\", async (c) => {\n await dbReady;\n const body = await c.req.json();\n const result = await sqlite.execute({\n sql: \"INSERT INTO practice_sessions (loop_id, duration_minutes, sync_score, breakdown_json) VALUES (?, ?, ?, ?)\",\n args: [Number(body.loop_id), Number(body.duration_minutes), Number(body.sync_score), body.breakdown_json],\n });\n const { rows } = await sqlite.execute({\n sql: `SELECT ps.*, l.title as loop_title FROM practice_sessions ps JOIN loops l ON ps.loop_id = l.id WHERE ps.id = ?`,\n args: [Number(result.lastInsertRowid)],\n });\n return c.json(rows[0], 201);\n});\n\n// ─── API: Stats ────────────────────────────────────────────\napp.get(\"/api/stats\", async (c) => {\n await dbReady;\n const { rows: sessionRows } = await sqlite.execute(\n \"SELECT date, duration_minutes, sync_score FROM practice_sessions ORDER BY date DESC\"\n );\n const totalMinutes = sessionRows.reduce((s, r) => s + Number(r.duration_minutes), 0);\n const avgScore = sessionRows.length > 0\n ? sessionRows.reduce((s, r) => s + Number(r.sync_score), 0) / sessionRows.length\n : 0;\n\n // Calculate daily streak\n const today = new Date();\n today.setHours(0, 0, 0, 0);\n const dateSet = new Set(sessionRows.map((r) => {\n const d = new Date(r.date + \"Z\");\n d.setHours(0, 0, 0, 0);\n return d.getTime();\n }));\n let streak = 0;\n let checkDate = today;\n while (dateSet.has(checkDate.getTime())) {\n streak++;\n checkDate = new Date(checkDate.getTime() - 24 * 60 * 60 * 1000);\n }\n\n return c.json({\n total_minutes: totalMinutes,\n average_score: Math.round(avgScore * 10) / 10,\n streak,\n session_count: sessionRows.length,\n });\n});\n\n// ─── Frontend ──────────────────────────────────────────────\napp.get(\"/\", (c) => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\napp.onError((err) => Promise.reject(err));\nexport default app.fetch;\n","label",[157],"b904632c-2565-4ae2-8222-ba22b5339027","README.md","019f5eb8-09d1-74d3-a77a-a69d6977bea0",["D",1784000547197],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/index.html`** loads Twind and the React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n",[168],"06efebb9-c716-4129-8f93-989fde614cf9","frontend","019f5eb8-09d1-74d3-a77a-a105b91ba11d",["D",1784000547197],"directory",[174],"pulls","branches","forks","envVars",{"_186":69,"_188":69},"connections",{"_186":69,"_187":69},"count","unfilledCount","emptyCount",{"_48":173,"_37":174,"_35":175,"_158":-5,"_46":47,"_45":162,"_160":65,"_43":279,"_13":69,"_39":177,"_41":-5,"_29":30,"_165":-5,"_203":280,"_32":281},{"_48":275,"_37":259,"_35":255,"_158":175,"_46":47,"_45":162,"_160":65,"_43":276,"_13":69,"_39":177,"_41":-5,"_29":30,"_165":-5,"_203":277,"_32":278},{"_48":267,"_37":268,"_35":269,"_158":255,"_46":47,"_45":270,"_160":30,"_43":271,"_13":162,"_39":40,"_41":272,"_29":30,"_165":-5,"_203":273,"_32":274},{"_48":260,"_37":261,"_35":262,"_158":255,"_46":47,"_45":162,"_160":30,"_43":263,"_13":69,"_39":40,"_41":264,"_29":30,"_165":-5,"_203":265,"_32":266},{"_48":254,"_37":38,"_35":36,"_158":255,"_46":47,"_45":14,"_160":65,"_43":256,"_13":69,"_39":40,"_41":42,"_29":30,"_165":-5,"_203":257,"_32":258},{"_48":250,"_37":241,"_35":235,"_158":175,"_46":47,"_45":245,"_160":65,"_43":251,"_13":69,"_39":177,"_41":-5,"_29":30,"_165":-5,"_203":252,"_32":253},{"_48":242,"_37":243,"_35":244,"_158":235,"_46":47,"_45":245,"_160":65,"_43":246,"_13":69,"_39":40,"_41":247,"_29":30,"_165":-5,"_203":248,"_32":249},{"_48":232,"_37":233,"_35":234,"_158":235,"_46":47,"_45":236,"_160":65,"_43":237,"_13":69,"_39":40,"_41":238,"_29":30,"_165":-5,"_203":239,"_32":240},{"_48":224,"_37":225,"_35":226,"_158":175,"_46":47,"_45":227,"_160":65,"_43":228,"_13":162,"_39":26,"_41":229,"_29":30,"_165":-5,"_203":230,"_32":231},{"_48":216,"_37":217,"_35":218,"_158":175,"_46":47,"_45":219,"_160":65,"_43":220,"_13":162,"_39":26,"_41":221,"_29":30,"_165":-5,"_203":222,"_32":223},{"_48":209,"_37":210,"_35":211,"_158":175,"_46":47,"_45":162,"_160":65,"_43":212,"_13":69,"_39":40,"_41":213,"_29":30,"_165":-5,"_203":214,"_32":215},{"_48":167,"_37":168,"_35":169,"_158":-5,"_46":47,"_45":162,"_160":30,"_43":206,"_13":69,"_39":26,"_41":171,"_29":30,"_165":-5,"_203":207,"_32":208},{"_48":156,"_37":157,"_35":63,"_158":-5,"_46":47,"_45":159,"_160":30,"_43":202,"_13":162,"_39":163,"_41":164,"_29":30,"_165":-5,"_203":204,"_32":205},["D",1784000684009],"children",[],[157],["D",1784000547197],[],[168],"3ea4047a-186c-4f25-940d-30fa13157794","index.tsx","019f5eb8-09d1-74d3-a77a-9f6060ebef9f",["D",1784000547197],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[174,210],"b955a54a-fac4-4000-aaa7-42b6c40b7380","index.html","019f5eb8-09d1-74d3-a77a-9836dd4c97d9",3,["D",1784000684010],"\n\n \n \n \n PoseFlow — AI Dance Practice Dashboard\n \n \n \n \n \n

\n \n \n \n\n",[],[174,217],"788c06f8-62ee-4cdd-99c9-3be40a5f104b","favicon.svg","019f5eb8-09d1-74d3-a77a-94632cc8646e",5,["D",1784000699041],"\n",[],[174,225],"535a8a9d-98a8-463c-8778-15ca3ff7ccfb","types.ts","67f542da-7f36-11f1-9838-1607ee4eb77e","f61568cd-edc0-4116-ad1c-527ecdef0a5e",6,["D",1784000707418],"export interface Loop {\n id: number;\n youtube_video_id: string;\n title: string;\n start_time: number;\n end_time: number;\n description: string;\n creator_name: string;\n created_at: string;\n}\n\nexport interface Challenge {\n id: number;\n loop_id: number;\n target_score: number;\n teacher_name: string;\n challenge_link_slug: string;\n created_at: string;\n loop_title?: string;\n youtube_video_id?: string;\n}\n\nexport interface PracticeSession {\n id: number;\n loop_id: number;\n date: string;\n duration_minutes: number;\n sync_score: number;\n breakdown_json: string;\n loop_title?: string;\n}\n\nexport interface SessionBreakdown {\n timing: number;\n posture: number;\n stance: number;\n}\n\nexport interface Stats {\n total_minutes: number;\n average_score: number;\n streak: number;\n session_count: number;\n}\n\nexport type ViewName = \"discovery\" | \"practice\" | \"dashboard\";\n",[],[174,241,233],"lib","089657df-5f1f-4029-a8c9-05f0abebd684","api.ts","62f6ecca-7f36-11f1-bb1a-1607ee4eb77e",4,["D",1784000699036],"import type { Loop, Challenge, PracticeSession, Stats, SessionBreakdown } from \"./types.ts\";\n\nexport async function fetchLoops(): Promise {\n const res = await fetch(\"/api/loops\");\n return res.json();\n}\n\nexport async function createLoop(data: {\n youtube_video_id: string;\n title: string;\n start_time: number;\n end_time: number;\n description: string;\n creator_name: string;\n}): Promise {\n const res = await fetch(\"/api/loops\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(data),\n });\n return res.json();\n}\n\nexport async function fetchChallenges(): Promise {\n const res = await fetch(\"/api/challenges\");\n return res.json();\n}\n\nexport async function createChallenge(data: {\n loop_id: number;\n target_score: number;\n teacher_name: string;\n}): Promise {\n const res = await fetch(\"/api/challenges\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(data),\n });\n return res.json();\n}\n\nexport async function fetchSessions(): Promise {\n const res = await fetch(\"/api/sessions\");\n return res.json();\n}\n\nexport async function createSession(data: {\n loop_id: number;\n duration_minutes: number;\n sync_score: number;\n breakdown_json: string;\n}): Promise {\n const res = await fetch(\"/api/sessions\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(data),\n });\n return res.json();\n}\n\nexport async function fetchStats(): Promise {\n const res = await fetch(\"/api/stats\");\n return res.json();\n}\n\nexport function formatTime(seconds: number): string {\n const mins = Math.floor(seconds / 60);\n const secs = Math.floor(seconds % 60);\n return `${mins}:${secs.toString().padStart(2, \"0\")}`;\n}\n\nexport function formatDate(dateStr: string): string {\n const d = new Date(dateStr.includes(\"T\") ? dateStr : dateStr + \"Z\");\n return d.toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\", year: \"numeric\" });\n}\n\nexport function youtubeThumbnail(videoId: string): string {\n return `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`;\n}\n\nexport function youtubeEmbed(videoId: string, start: number, end: number): string {\n return `https://www.youtube.com/embed/${videoId}?start=${Math.floor(start)}&end=${Math.floor(end)}&loop=1&playlist=${videoId}&autoplay=0`;\n}\n\nexport function randomBreakdown(score: number): SessionBreakdown {\n const variance = 8;\n return {\n timing: Math.min(100, Math.max(60, score + Math.round((Math.random() - 0.5) * variance * 2))),\n posture: Math.min(100, Math.max(60, score + Math.round((Math.random() - 0.5) * variance * 2))),\n stance: Math.min(100, Math.max(60, score + Math.round((Math.random() - 0.5) * variance * 2))),\n };\n}\n",[],[174,241,243],"1ee5101c-b77e-40f5-8267-5488d22bf1df",["D",1784000699036],[195,196],[174,241],"640981d9-8a58-496c-ab85-5746fc4ddec5","019f5eb8-09d1-74d3-a77a-90aec962b616",["D",1784000805974],[],[174,259,38],"components","576aaf93-2e1e-43e4-af87-9551dfdc8d48","Counter.tsx","019f5eb8-09d1-74d3-a77a-8d39cd1671f2",["D",1784000547197],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n",[],[174,259,261],"59f45482-f16c-4299-b222-7a958c120a15","App.tsx","019f5eb8-09d1-74d3-a77a-8a3a5b87f648",7,["D",1784000733737],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { Music2, Compass, MonitorPlay, BarChart3, Sparkles } from \"https://esm.sh/lucide-react@0.378.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport type { Loop, Challenge, PracticeSession, Stats, ViewName } from \"../lib/types.ts\";\nimport { fetchLoops, fetchChallenges, fetchSessions, fetchStats } from \"../lib/api.ts\";\nimport { DiscoveryHub } from \"./DiscoveryHub.tsx\";\nimport { PracticeArena } from \"./PracticeArena.tsx\";\nimport { TeacherDashboard } from \"./TeacherDashboard.tsx\";\n\nexport function App() {\n const [view, setView] = useState(\"discovery\");\n const [loops, setLoops] = useState([]);\n const [challenges, setChallenges] = useState([]);\n const [sessions, setSessions] = useState([]);\n const [stats, setStats] = useState({ total_minutes: 0, average_score: 0, streak: 0, session_count: 0 });\n const [selectedLoop, setSelectedLoop] = useState(null);\n const [loading, setLoading] = useState(true);\n\n const refreshAll = useCallback(async () => {\n const [l, c, s, st] = await Promise.all([fetchLoops(), fetchChallenges(), fetchSessions(), fetchStats()]);\n setLoops(l);\n setChallenges(c);\n setSessions(s);\n setStats(st);\n setLoading(false);\n }, []);\n\n useEffect(() => { refreshAll(); }, [refreshAll]);\n\n function practiceLoop(loop: Loop) {\n setSelectedLoop(loop);\n setView(\"practice\");\n }\n\n const tabs: { id: ViewName; label: string; icon: typeof Compass }[] = [\n { id: \"discovery\", label: \"Discovery Hub\", icon: Compass },\n { id: \"practice\", label: \"Practice Arena\", icon: MonitorPlay },\n { id: \"dashboard\", label: \"Teacher Dashboard\", icon: BarChart3 },\n ];\n\n return (\n

\n {/* ─── Top Navigation ─── */}\n

\n {/* Logo */}\n

\n \n

\n \n PoseFlow\n \n \n

\n\n {/* Tabs */}\n

\n {tabs.map(({ id, label, icon: Icon }) => (\n setView(id)}\n class={`flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium transition-all ${\n view === id\n ? \"bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-lg shadow-purple-500/20\"\n : \"text-gray-400 hover:text-gray-200 hover:bg-gray-800/60\"\n }`}\n >\n \n {label}\n \n ))}\n

\n\n {/* Source link */}\n \n \n View Source\n \n

\n\n {/* ─── Main Content ─── */}\n

\n {loading ? (\n

Loading PoseFlow…

\n ) : view === \"discovery\" ? (\n \n ) : view === \"practice\" ? (\n \n ) : (\n \n )}\n

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

\n );\n}\n",[],[174,259,268],"e5359f66-a765-4ad8-b0ad-11a395576d98",["D",1784000547197],[191,192,193],[174,259],["D",1784000547197],[190,194,197,198,199],[174],["D",1784000547197],["D",1789525843977],{"_110":109,"_117":113},{"_110":109,"_111":-5,"_112":113,"_19":61,"_114":115,"_116":30},{"_13":95,"_37":96,"_48":47,"_97":49,"_98":99,"_100":101,"_102":55,"_103":104,"_105":106,"_107":50,"_108":109},"ctx",{"_88":-5,"_139":320,"_321":322,"_323":324,"_325":30,"_326":30,"_327":30,"_328":65,"_329":-5,"_330":-7,"_331":-7,"_332":69,"_333":30,"_334":30,"_335":-5,"_336":30,"_337":30,"_338":30,"_339":-5},"ENV",{"_291":292,"_293":294,"_295":96,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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"]

Diff · v8