[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_379":380,"_381":382},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_279":-5,"_20":280,"_22":281,"_282":283,"_284":285,"_26":286,"_24":287,"_288":289,"_290":291,"_292":51,"_293":294,"_295":76,"_296":-5,"_297":-5,"_298":299},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":-5,"_31":32,"_33":34,"_35":-5},"handle","Ttt","name","poseflow","branchName","main","version","path","frontend","project",{"_36":230,"_13":14,"_38":231,"_49":-5,"_232":51,"_52":53,"_233":53,"_234":235,"_236":237,"_238":239,"_240":120,"_241":76,"_242":-5,"_243":-5,"_244":78,"_56":245,"_246":247,"_248":249,"_250":251,"_252":-5,"_253":254,"_255":254,"_256":257,"_258":257,"_259":257,"_260":254,"_261":254,"_262":263,"_264":265,"_266":267,"_50":51},"tree",[115,116,117],"file",{"_36":112,"_71":72,"_67":70,"_13":19,"_81":-5,"_79":105,"_17":78,"_69":-5,"_38":113,"_73":74,"_84":-5,"_18":114},"contents",[60,61,62,63,64],"upstream",{"_36":37,"_38":39,"_40":41,"_13":16,"_42":43,"_17":44,"_45":-5,"_46":-5,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59},"pull","ahead",16,"behind",2,"envVars","id","961078ea-f528-11ef-aa68-569c3dd06744","createdAt",["D",1740674013689],"updatedAt",["D",1785420707976],"projectId","96102714-f528-11ef-aa68-569c3dd06744",91,"forkedBranchId","forkedBranchVersion","lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","deletedAt","isOwned",false,"privacy","public","userHandle","templates","orgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","react-hono-starter",{"_36":107,"_13":108,"_67":109,"_69":70,"_71":72,"_73":74,"_75":76,"_38":110,"_17":78,"_79":105,"_81":-5,"_83":51,"_84":-5,"_18":111},{"_36":100,"_13":101,"_67":102,"_69":70,"_71":72,"_73":103,"_75":76,"_38":104,"_17":78,"_79":105,"_81":-5,"_83":51,"_84":-5,"_18":106},{"_36":93,"_13":94,"_67":95,"_69":70,"_71":72,"_73":96,"_75":76,"_38":97,"_17":74,"_79":24,"_81":98,"_83":51,"_84":-5,"_18":99},{"_36":86,"_13":87,"_67":88,"_69":70,"_71":72,"_73":89,"_75":76,"_38":90,"_17":74,"_79":24,"_81":91,"_83":51,"_84":-5,"_18":92},{"_36":65,"_13":66,"_67":68,"_69":70,"_71":72,"_73":74,"_75":76,"_38":77,"_17":78,"_79":80,"_81":82,"_83":51,"_84":-5,"_18":85},"3ea4047a-186c-4f25-940d-30fa13157794","index.tsx","fileId","019f5eb8-09d1-74d3-a77a-9f6060ebef9f","parentId","019f5eb8-09d1-74d3-a77a-a105b91ba11d","branchId","a0587b01-7b95-46a7-a0c9-234544581fbf","branchVersion",1,"latest",true,["D",1784000547197],0,"fileType","script","content","/** @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();","deleted","label",[19,66],"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",[19,87],"788c06f8-62ee-4cdd-99c9-3be40a5f104b","favicon.svg","019f5eb8-09d1-74d3-a77a-94632cc8646e",5,["D",1784000699041],"\n",[19,94],"1ee5101c-b77e-40f5-8267-5488d22bf1df","lib","f61568cd-edc0-4116-ad1c-527ecdef0a5e",4,["D",1784000699036],"directory",[19,101],"e5359f66-a765-4ad8-b0ad-11a395576d98","components","019f5eb8-09d1-74d3-a77a-90aec962b616",["D",1784000547197],[19,108],"06efebb9-c716-4129-8f93-989fde614cf9",["D",1784000547197],[19],{"_36":112,"_13":19,"_67":70,"_69":-5,"_71":72,"_73":74,"_75":76,"_38":136,"_17":78,"_79":105,"_81":-5,"_83":51,"_84":-5,"_125":137,"_18":138},{"_36":128,"_13":129,"_67":130,"_69":-5,"_71":72,"_73":131,"_75":76,"_38":132,"_17":74,"_79":24,"_81":133,"_83":51,"_84":-5,"_125":134,"_18":135},{"_36":118,"_13":119,"_67":120,"_69":-5,"_71":72,"_73":121,"_75":76,"_38":122,"_17":34,"_79":123,"_81":124,"_83":51,"_84":-5,"_125":126,"_18":127},"ea2ff3b6-ee33-4b71-bc81-e8bad1b305a5","index.ts","019f5eb8-09d1-74d3-a77a-a913bc4a7434",12,["D",1784000971477],"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.includes(\"T\") ? r.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","children",[],[119],"e2139af8-0f4f-4420-9cab-3059a70a228e","README.md","019f5eb8-09d1-74d3-a77a-a69d6977bea0",17,["D",1784001088937],"# 🕺 PoseFlow — AI Dance Practice & Choreography Dashboard\n\nA full-stack, privacy-first AI dance practice platform with real-time pose tracking, community choreography discovery, and remote teacher analytics.\n\n**Live App:** [Open PoseFlow](https://www.val.town/x/Ttt/poseflow)\n\n## ✨ Features\n\n### View A — Choreography Discovery & Creator Hub\n- Grid of community dance loops with YouTube thumbnails, timestamps, and creator info\n- **Creator Studio** form to submit new loops (YouTube URL/ID, title, timestamps, choreographer)\n- **Generate Challenge Link** — B2B feature for dance instructors to create shareable challenge slugs with target sync scores\n\n### View B — Live Practice Arena (Privacy-First)\n- Split-screen workspace with YouTube player + live webcam pose tracking\n- **Interactive overlay controls:** Video Mirror, 8-Count Beat Marker, Pitch-Normalized Slow-Mo, Neon Skeleton Layer with angle detection\n- **Webcam activation** via `navigator.mediaDevices.getUserMedia` — all processing is 100% local\n- **Animated canvas skeleton** with color-coded joints (green = good form, orange/red = misalignment)\n- **Neon Skeleton Mode** & **Ghost Mode Overlap** (skeleton overlaid on YouTube video)\n- **Live Sync Score** ticker with real-time updates\n- **Finish & Log Session** — generates random score (75-95%), analytical breakdown (Timing, Posture, Stance), saves to database\n- **Export Flex Clip** mockup with watermarked video preview for TikTok/Reels\n\n### View C — Remote Teacher Dashboard & Analytics\n- Personal progress stats: Total Minutes, Average Sync Score, Daily Habit Streak\n- Session history table with score breakdowns\n- **Teacher Assignments Tracker** with anonymous student opens, pass rates, and leaderboard\n\n## 🏗️ Architecture\n\n```mermaid\ngraph TB\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|\"serves\"| HTML[\"index.html
(Twind + dark theme)\"]\n HTML -->|\"loads\"| Entry[\"index.tsx
(React entry)\"]\n Entry -->|renders| App[\"App.tsx
(3-view navigation)\"]\n App -->|View A| Discovery[\"DiscoveryHub.tsx\"]\n App -->|View B| Practice[\"PracticeArena.tsx\"]\n App -->|View C| Dashboard[\"TeacherDashboard.tsx\"]\n Discovery -->|CRUD| API[\"API Routes\"]\n Practice -->|POST session| API\n Dashboard -->|GET stats| API\n API -->|SQL| SQLite[(\"SQLite
loops · challenges
practice_sessions\")]\n Practice -->|getUserMedia| Webcam[\"Webcam
(100% local)\"]\n Practice -->|canvas| Skeleton[\"SkeletonCanvas.tsx
(animated pose)\"]\n```\n\n## 📁 File Structure\n\n```\nindex.ts ← Hono backend (API + static serving)\nfrontend/\n index.html ← HTML shell (Twind, dark theme, animations)\n index.tsx ← React entrypoint\n favicon.svg ← PoseFlow stick-figure logo\n lib/\n types.ts ← Shared TypeScript interfaces\n api.ts ← API helpers + utilities (formatTime, etc.)\n components/\n App.tsx ← Root: navigation, state, data fetching\n DiscoveryHub.tsx ← View A: loop grid + challenge modal\n CreatorStudio.tsx ← Loop submission form\n PracticeArena.tsx ← View B: split-screen practice workspace\n SkeletonCanvas.tsx ← Animated canvas skeleton overlay\n TeacherDashboard.tsx ← View C: stats, sessions, challenges\n```\n\n## 🗄️ Database Schema (SQLite)\n\n| Table | Columns |\n|-------|---------|\n| `loops` | id, youtube_video_id, title, start_time, end_time, description, creator_name, created_at |\n| `challenges` | id, loop_id, target_score, teacher_name, challenge_link_slug (unique), created_at |\n| `practice_sessions` | id, loop_id, date, duration_minutes, sync_score, breakdown_json |\n\n## 🔒 Privacy First\n\nAll webcam video feeds are processed entirely on the client side using `navigator.mediaDevices.getUserMedia` and canvas-based rendering. **Zero video data is uploaded to the server.** Only numerical practice results (sync scores, breakdowns, durations) are persisted to the database.\n\n## 🛠️ Tech Stack\n\n- **Backend:** Hono on Val Town (Deno runtime)\n- **Database:** Val Town built-in SQLite (Turso/libSQL)\n- **Frontend:** React 18 + Twind (Tailwind CSS at runtime)\n- **Icons:** Lucide React\n- **Video:** YouTube IFrame API\n",[],[129],["D",1784000547197],[139,140,141,142,143],[19],{"_36":107,"_13":108,"_67":109,"_69":70,"_71":72,"_73":74,"_75":76,"_38":173,"_17":78,"_79":105,"_81":-5,"_83":51,"_84":-5,"_125":174,"_18":175},{"_36":100,"_13":101,"_67":102,"_69":70,"_71":72,"_73":103,"_75":76,"_38":153,"_17":78,"_79":105,"_81":-5,"_83":51,"_84":-5,"_125":154,"_18":155},{"_36":93,"_13":94,"_67":95,"_69":70,"_71":72,"_73":96,"_75":76,"_38":150,"_17":74,"_79":24,"_81":98,"_83":51,"_84":-5,"_125":151,"_18":152},{"_36":86,"_13":87,"_67":88,"_69":70,"_71":72,"_73":89,"_75":76,"_38":147,"_17":74,"_79":24,"_81":91,"_83":51,"_84":-5,"_125":148,"_18":149},{"_36":65,"_13":66,"_67":68,"_69":70,"_71":72,"_73":74,"_75":76,"_38":144,"_17":78,"_79":80,"_81":82,"_83":51,"_84":-5,"_125":145,"_18":146},["D",1784000547197],[],[19,66],["D",1784000684010],[],[19,87],["D",1784000699041],[],[19,94],["D",1784000699036],[156,157],[19,101],{"_36":166,"_13":167,"_67":168,"_69":102,"_71":72,"_73":103,"_75":76,"_38":169,"_17":78,"_79":80,"_81":170,"_83":51,"_84":-5,"_125":171,"_18":172},{"_36":158,"_13":159,"_67":160,"_69":102,"_71":72,"_73":161,"_75":76,"_38":162,"_17":78,"_79":80,"_81":163,"_83":51,"_84":-5,"_125":164,"_18":165},"535a8a9d-98a8-463c-8778-15ca3ff7ccfb","types.ts","67f542da-7f36-11f1-9838-1607ee4eb77e",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",[],[19,101,159],"089657df-5f1f-4029-a8c9-05f0abebd684","api.ts","62f6ecca-7f36-11f1-bb1a-1607ee4eb77e",["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",[],[19,101,167],["D",1784000547197],[176,177,178,179,180,181],[19,108],{"_36":222,"_13":223,"_67":224,"_69":109,"_71":72,"_73":225,"_75":76,"_38":226,"_17":34,"_79":80,"_81":227,"_83":51,"_84":-5,"_125":228,"_18":229},{"_36":214,"_13":215,"_67":216,"_69":109,"_71":72,"_73":217,"_75":76,"_38":218,"_17":78,"_79":80,"_81":219,"_83":51,"_84":-5,"_125":220,"_18":221},{"_36":206,"_13":207,"_67":208,"_69":109,"_71":72,"_73":209,"_75":76,"_38":210,"_17":78,"_79":80,"_81":211,"_83":51,"_84":-5,"_125":212,"_18":213},{"_36":198,"_13":199,"_67":200,"_69":109,"_71":72,"_73":201,"_75":76,"_38":202,"_17":78,"_79":80,"_81":203,"_83":51,"_84":-5,"_125":204,"_18":205},{"_36":190,"_13":191,"_67":192,"_69":109,"_71":72,"_73":193,"_75":76,"_38":194,"_17":78,"_79":80,"_81":195,"_83":51,"_84":-5,"_125":196,"_18":197},{"_36":182,"_13":183,"_67":184,"_69":109,"_71":72,"_73":185,"_75":76,"_38":186,"_17":74,"_79":80,"_81":187,"_83":51,"_84":-5,"_125":188,"_18":189},"8e607260-edd0-4df6-8d7c-a768a2d541a4","TeacherDashboard.tsx","0561c660-7f37-11f1-98a0-1607ee4eb77e",14,["D",1784000991622],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n BarChart3, Clock, TrendingUp, Flame, Calendar, GraduationCap,\n Users, Trophy, Link2, ExternalLink, Award, Target,\n} from \"https://esm.sh/lucide-react@0.378.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport type { Stats, PracticeSession, Challenge, SessionBreakdown } from \"../lib/types.ts\";\nimport { formatDate } from \"../lib/api.ts\";\n\nfunction parseBreakdown(json: string): SessionBreakdown {\n try { return JSON.parse(json); } catch { return { timing: 0, posture: 0, stance: 0 }; }\n}\n\nfunction seededRand(seed: number) {\n let s = seed;\n return () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };\n}\n\nfunction mockChallengeData(slug: string, target: number) {\n const seed = slug.split(\"\").reduce((a, c) => a + c.charCodeAt(0), 0);\n const rand = seededRand(seed);\n const opens = Math.floor(8 + rand() * 30);\n const labels = [\"NeonFox\", \"PulseWave\", \"GhostStep\", \"RhythmX\", \"FlowState\", \"BeatDrop\", \"MoveZ\", \"GrooveQ\"];\n const students = Array.from({ length: Math.floor(4 + rand() * 6) }, () => {\n const score = Math.floor(62 + rand() * 36);\n return {\n name: `Anon_${labels[Math.floor(rand() * labels.length)]}${Math.floor(rand() * 99)}`,\n score,\n passed: score >= target,\n };\n }).sort((a, b) => b.score - a.score);\n const passRate = Math.round(students.filter(s => s.passed).length / students.length * 100);\n return { opens, students, passRate };\n}\n\nfunction scoreColor(s: number): string {\n if (s >= 90) return \"text-green-400\";\n if (s >= 80) return \"text-purple-400\";\n if (s >= 75) return \"text-orange-400\";\n return \"text-red-400\";\n}\n\nexport function TeacherDashboard({ stats, sessions, challenges }: {\n stats: Stats;\n sessions: PracticeSession[];\n challenges: Challenge[];\n}) {\n const statCards = [\n { label: \"Total Minutes Practiced\", value: `${stats.total_minutes}`, unit: \"min\", icon: Clock, color: \"from-purple-500 to-pink-500\" },\n { label: \"Average Sync Score\", value: stats.average_score.toFixed(1), unit: \"%\", icon: TrendingUp, color: \"from-blue-500 to-cyan-500\" },\n { label: \"Daily Habit Streak\", value: `${stats.streak}`, unit: stats.streak === 1 ? \"day\" : \"days\", icon: Flame, color: \"from-orange-500 to-red-500\" },\n ];\n\n return (\n

\n \n Teacher Dashboard\n

Personal analytics and remote student tracking

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

\n {statCards.map(({ label, value, unit, icon: Icon, color }) => (\n

\n \n

{label}

\n {value}{unit}\n

\n ))}\n

\n\n {/* Session History */}\n

\n \n

Practice Session History

\n {sessions.length} sessions\n

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

No sessions logged yet. Start practicing to see your history!

\n ) : (\n

\n \n \n \n \n \n \n \n \n \n \n \n {sessions.map((s) => {\n const b = parseBreakdown(s.breakdown_json);\n return (\n \n \n \n \n \n \n \n );\n })}\n \n

Routine	Date	Duration	Sync Score	Breakdown
{s.loop_title}	{formatDate(s.date)}	{s.duration_minutes} min	\n {s.sync_score}%\n	\n \n T:{b.timing}\n P:{b.posture}\n S:{b.stance}\n \n

\n )}\n

\n\n {/* Teacher Assignments Tracker */}\n

\n \n

Teacher Assignments Tracker

\n {challenges.length} active\n

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

\n No challenge links yet. Generate one from the Discovery Hub to start tracking students.\n

\n ) : (\n

\n {challenges.map((ch) => {\n const mock = mockChallengeData(ch.challenge_link_slug, ch.target_score);\n const link = `${location.origin}/c/${ch.challenge_link_slug}`;\n return (\n

{ch.loop_title}

\n \n Target: {ch.target_score}%\n \n \n {mock.opens} opens\n \n \n Pass rate: = 50 ? \"text-green-400\" : \"text-orange-400\"}`}>{mock.passRate}%\n \n

\n \n {link}\n \n \n \n

\n \n Anonymous Leaderboard\n

\n {mock.students.slice(0, 5).map((st, i) => (\n

\n {i + 1}\n {st.name}\n {st.score}%\n {st.passed ? \"PASS\" : \"FAIL\"}\n

\n ))}\n

\n );\n })}\n

\n )}\n

\n );\n}\n",[],[19,108,183],"5563fbb3-2bb6-455f-91e8-61306a26fafa","SkeletonCanvas.tsx","c6360a14-7f36-11f1-8054-1607ee4eb77e",10,["D",1784000865548],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useRef, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ninterface JointDef {\n name: string;\n x: number; y: number;\n phase: number;\n ampX: number; ampY: number;\n}\n\nconst BASE_JOINTS: JointDef[] = [\n { name: \"head\", x: 0.5, y: 0.10, phase: 0.0, ampX: 0.02, ampY: 0.01 },\n { name: \"neck\", x: 0.5, y: 0.20, phase: 0.2, ampX: 0.015, ampY: 0.008 },\n { name: \"lShoulder\", x: 0.38, y: 0.24, phase: 0.4, ampX: 0.025, ampY: 0.012 },\n { name: \"rShoulder\", x: 0.62, y: 0.24, phase: 0.6, ampX: 0.025, ampY: 0.012 },\n { name: \"lElbow\", x: 0.30, y: 0.38, phase: 0.8, ampX: 0.05, ampY: 0.03 },\n { name: \"rElbow\", x: 0.70, y: 0.38, phase: 1.0, ampX: 0.05, ampY: 0.03 },\n { name: \"lWrist\", x: 0.24, y: 0.50, phase: 1.2, ampX: 0.07, ampY: 0.04 },\n { name: \"rWrist\", x: 0.76, y: 0.50, phase: 1.4, ampX: 0.07, ampY: 0.04 },\n { name: \"torso\", x: 0.50, y: 0.45, phase: 0.3, ampX: 0.01, ampY: 0.005 },\n { name: \"lHip\", x: 0.44, y: 0.58, phase: 0.5, ampX: 0.02, ampY: 0.01 },\n { name: \"rHip\", x: 0.56, y: 0.58, phase: 0.7, ampX: 0.02, ampY: 0.01 },\n { name: \"lKnee\", x: 0.42, y: 0.75, phase: 0.9, ampX: 0.035, ampY: 0.02 },\n { name: \"rKnee\", x: 0.58, y: 0.75, phase: 1.1, ampX: 0.035, ampY: 0.02 },\n { name: \"lAnkle\", x: 0.40, y: 0.92, phase: 1.3, ampX: 0.04, ampY: 0.01 },\n { name: \"rAnkle\", x: 0.60, y: 0.92, phase: 1.5, ampX: 0.04, ampY: 0.01 },\n];\n\nconst CONNECTIONS: [string, string][] = [\n [\"head\", \"neck\"],\n [\"neck\", \"lShoulder\"], [\"neck\", \"rShoulder\"],\n [\"lShoulder\", \"lElbow\"], [\"lElbow\", \"lWrist\"],\n [\"rShoulder\", \"rElbow\"], [\"rElbow\", \"rWrist\"],\n [\"neck\", \"torso\"],\n [\"torso\", \"lHip\"], [\"torso\", \"rHip\"],\n [\"lHip\", \"lKnee\"], [\"lKnee\", \"lAnkle\"],\n [\"rHip\", \"rKnee\"], [\"rKnee\", \"rAnkle\"],\n];\n\nfunction getColor(s: number): string {\n if (s > 85) return \"#22c55e\";\n if (s > 70) return \"#f97316\";\n return \"#ef4444\";\n}\n\nexport function SkeletonCanvas({ active, mode, score, showAngles }: {\n active: boolean;\n mode: \"neon\" | \"ghost\";\n score: number;\n showAngles: boolean;\n}) {\n const canvasRef = useRef(null);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas || !active) return;\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) return;\n\n let rafId = 0;\n const t0 = performance.now();\n\n function resize() {\n const rect = canvas!.getBoundingClientRect();\n const dpr = window.devicePixelRatio || 1;\n canvas!.width = rect.width * dpr;\n canvas!.height = rect.height * dpr;\n ctx!.setTransform(dpr, 0, 0, dpr, 0, 0);\n }\n resize();\n const ro = new ResizeObserver(resize);\n ro.observe(canvas);\n\n function draw() {\n const rect = canvas!.getBoundingClientRect();\n const w = rect.width, h = rect.height;\n ctx!.clearRect(0, 0, w, h);\n\n const t = (performance.now() - t0) / 1000;\n const pos: Record = {};\n for (const j of BASE_JOINTS) {\n pos[j.name] = {\n x: j.x + Math.sin(t * 2 + j.phase) * j.ampX,\n y: j.y + Math.cos(t * 2.5 + j.phase) * j.ampY,\n };\n }\n\n const isGhost = mode === \"ghost\";\n const lineCol = isGhost ? \"rgba(56,189,248,0.5)\" : \"rgba(168,85,247,0.85)\";\n const glowCol = isGhost ? \"rgba(56,189,248,0.2)\" : \"rgba(168,85,247,0.4)\";\n\n ctx!.lineWidth = 3;\n ctx!.lineCap = \"round\";\n for (const [a, b] of CONNECTIONS) {\n const pa = pos[a], pb = pos[b];\n ctx!.shadowBlur = 14;\n ctx!.shadowColor = glowCol;\n ctx!.strokeStyle = lineCol;\n ctx!.beginPath();\n ctx!.moveTo(pa.x * w, pa.y * h);\n ctx!.lineTo(pb.x * w, pb.y * h);\n ctx!.stroke();\n }\n ctx!.shadowBlur = 0;\n\n for (const j of BASE_JOINTS) {\n const p = pos[j.name];\n const js = score + Math.sin(t * 1.5 + j.phase) * 12 + (Math.random() - 0.5) * 4;\n const col = getColor(js);\n ctx!.shadowBlur = 12;\n ctx!.shadowColor = col;\n ctx!.fillStyle = col;\n ctx!.beginPath();\n ctx!.arc(p.x * w, p.y * h, j.name === \"head\" ? 7 : 5, 0, Math.PI * 2);\n ctx!.fill();\n }\n ctx!.shadowBlur = 0;\n\n if (showAngles) {\n ctx!.font = \"bold 10px sans-serif\";\n ctx!.fillStyle = \"rgba(168,85,247,0.95)\";\n const angles = [\n { j: \"lElbow\", a: 115 + Math.sin(t * 1.2) * 20 },\n { j: \"rElbow\", a: 92 + Math.cos(t * 1.4) * 18 },\n { j: \"lKnee\", a: 168 + Math.sin(t * 1.6) * 12 },\n { j: \"rKnee\", a: 155 + Math.cos(t * 1.5) * 15 },\n ];\n for (const an of angles) {\n const p = pos[an.j];\n ctx!.fillText(`${Math.round(an.a)}°`, p.x * w + 10, p.y * h - 4);\n }\n }\n\n rafId = requestAnimationFrame(draw);\n }\n draw();\n\n return () => { cancelAnimationFrame(rafId); ro.disconnect(); };\n }, [active, mode, score, showAngles]);\n\n return

\n \n Teacher Dashboard\n

Practice Session History

Teacher Assignments Tracker

{ch.loop_title}

\n \n Live Practice Arena\n

\n \n Session Complete!\n

\n \n Choreography Discovery\n

{loop.title}

Generate Challenge Link

Creator Studio