diff --git a/packages/studio/CLAUDE.md b/packages/studio/CLAUDE.md
deleted file mode 100644
index 81151375..00000000
--- a/packages/studio/CLAUDE.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# Studio
-
-## Architecture
-
-The **frontend** is fully isolated from `core/` and `core_v2/`. It does NOT import, read, or depend on any code from those packages. Keep it that way.
-
-The **backend** depends on `@hyperframes/core` for shared utilities:
-- **Timing compilation** (`compileTimingAttrs`, `injectDurations`) — resolves `data-duration="auto"` etc.
-- **Hyperframe runtime source** (`loadHyperframeRuntimeSource`) — bundled runtime injected into served HTML
-
-The hyperframe runtime (modular sources under `core/src/runtime/`) handles:
-1. Intercepting `gsap.timeline()` to capture the master timeline
-2. Exposing `window.__player` (play/pause/seek/getTime/getDuration/isPlaying)
-3. RAF-based media sync (video/audio playback tied to timeline position)
-4. Visibility bookends from `data-start` + `data-duration`
-
-If you need new playback features, add them to `core/src/runtime/` — do NOT pull in the core gsapInterceptor (that's for the deprecated editor).
-
-## Data Attributes (core_v2 convention)
-
-- `data-start` — start time in seconds
-- `data-duration` — duration in seconds
-- `data-track-index` — timeline track number
-- `data-media-start` — media offset (optional)
-- `data-volume` — audio/video volume 0-1 (optional)
-
-## Ports
-
-- Backend: 3002
-- Frontend: 5175
diff --git a/packages/studio/backend/package.json b/packages/studio/backend/package.json
deleted file mode 100644
index 0eec9fa3..00000000
--- a/packages/studio/backend/package.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "name": "@hyperframes/studio-backend",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "exports": {
-    "./embedded": "./src/embedded.ts",
-    "./routes/projects": "./src/routes/projects.ts",
-    "./routes/render": "./src/routes/render.ts"
-  },
-  "scripts": {
-    "dev": "tsx watch src/index.ts",
-    "start": "tsx src/index.ts"
-  },
-  "dependencies": {
-    "@hyperframes/core": "workspace:*",
-    "@hono/node-server": "^1.8.0",
-    "adm-zip": "^0.5.16",
-    "cheerio": "^1.2.0",
-    "hono": "^4.0.0",
-    "mime-types": "^3.0.2"
-  },
-  "devDependencies": {
-    "@types/adm-zip": "^0.5.7",
-    "@types/mime-types": "^3.0.1",
-    "@types/node": "^20.0.0",
-    "tsx": "^4.0.0",
-    "typescript": "^5.0.0"
-  }
-}
diff --git a/packages/studio/backend/src/embedded.ts b/packages/studio/backend/src/embedded.ts
deleted file mode 100644
index b2089e49..00000000
--- a/packages/studio/backend/src/embedded.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Embedded studio server factory.
- *
- * Creates a Hono app with all studio backend routes mounted, suitable for
- * embedding in the CLI bundle. Uses the same Hono import as the route modules
- * to avoid class duplication when bundled by tsup.
- */
-import { Hono } from "hono";
-import { cors } from "hono/cors";
-import { projects } from "./routes/projects";
-import { projectRender, renderJobs } from "./routes/render";
-
-export interface EmbeddedAppOptions {
-  /** CORS origin (default: "*") */
-  corsOrigin?: string;
-}
-
-/**
- * Create a fully configured Hono app with studio backend routes.
- * All imports use the same module scope, avoiding Hono class mismatches in bundles.
- */
-export function createEmbeddedApp(options: EmbeddedAppOptions = {}): InstanceType<typeof Hono> {
-  const app = new Hono();
-
-  app.use(
-    "/*",
-    cors({
-      origin: options.corsOrigin ?? "*",
-      allowMethods: ["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"],
-      allowHeaders: ["Content-Type"],
-    }),
-  );
-
-  app.get("/api/health", (ctx) => ctx.json({ status: "ok", service: "studio-embedded" }));
-
-  app.route("/api/projects", projects);
-  app.route("/api/projects", projectRender);
-  app.route("/api/render", renderJobs);
-
-  return app;
-}
diff --git a/packages/studio/backend/src/index.ts b/packages/studio/backend/src/index.ts
deleted file mode 100644
index 49ee32c7..00000000
--- a/packages/studio/backend/src/index.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Hono } from "hono";
-import { cors } from "hono/cors";
-import { serve } from "@hono/node-server";
-import { projects } from "./routes/projects";
-import { projectRender, renderJobs } from "./routes/render";
-
-const app = new Hono();
-
-app.use(
-  "/*",
-  cors({
-    origin: ["http://localhost:5175"],
-    allowMethods: ["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"],
-    allowHeaders: ["Content-Type"],
-  })
-);
-
-app.get("/", (c) => c.json({ status: "ok", service: "studio" }));
-
-app.route("/api/projects", projects);
-app.route("/api/projects", projectRender);
-app.route("/api/render", renderJobs);
-
-const port = 3002;
-
-console.log(`Studio backend running on http://localhost:${port}`);
-
-serve({
-  fetch: app.fetch,
-  port,
-});
diff --git a/packages/studio/backend/src/routes/projects.ts b/packages/studio/backend/src/routes/projects.ts
deleted file mode 100644
index b579d5f0..00000000
--- a/packages/studio/backend/src/routes/projects.ts
+++ /dev/null
@@ -1,604 +0,0 @@
-import { Hono } from "hono";
-import {
-  readFileSync,
-  writeFileSync,
-  existsSync,
-  readdirSync,
-  rmSync,
-  statSync,
-  mkdirSync,
-} from "fs";
-import { join, resolve, extname, basename, dirname } from "path";
-import { randomUUID } from "crypto";
-import mime from "mime-types";
-import * as cheerio from "cheerio";
-import { extractZip } from "../utils/zip";
-import { loadHyperframeRuntimeSource } from "@hyperframes/core";
-import { compileHtml } from "../utils/htmlCompiler";
-
-const DATA_DIR = process.env.STUDIO_DATA_DIR
-  ? resolve(process.env.STUDIO_DATA_DIR)
-  : resolve(import.meta.dirname, "../../data/projects");
-let _interceptorScript: string | undefined;
-function getInterceptorScript(): string {
-  if (_interceptorScript === undefined) {
-    // Try pre-built runtime file first (exists in CLI bundle), fall back to esbuild
-    try {
-      const prebuiltPath = resolve(import.meta.dirname, "hyperframe-runtime.js");
-      if (existsSync(prebuiltPath)) {
-        _interceptorScript = readFileSync(prebuiltPath, "utf-8");
-      } else {
-        _interceptorScript = loadHyperframeRuntimeSource();
-      }
-    } catch {
-      _interceptorScript = loadHyperframeRuntimeSource();
-    }
-  }
-  return _interceptorScript;
-}
-const RENDER_MODE_SCRIPT = `(function() {
-  function waitForPlayer() {
-    if (window.__player && typeof window.__player.renderSeek === "function") {
-      window.__renderReady = true;
-      return;
-    }
-    if (window.__player) {
-      window.__player.renderSeek = function(time) {
-        var tl = window.__player._timeline;
-        if (!tl) return;
-        tl.pause();
-        tl.seek(time, false);
-      };
-      window.__renderReady = true;
-      return;
-    }
-    setTimeout(waitForPlayer, 50);
-  }
-  waitForPlayer();
-})();`;
-
-interface ProjectMeta {
-  id: string;
-  name: string;
-  createdAt: string;
-}
-
-interface PresenceHeartbeatBody {
-  sessionId: string;
-  filePath?: string;
-  line?: number;
-  column?: number;
-  color?: string;
-}
-
-interface PresenceSession {
-  sessionId: string;
-  filePath?: string;
-  line?: number;
-  column?: number;
-  color?: string;
-  lastSeen: number;
-}
-
-const PRESENCE_ENABLED = process.env.PRESENCE_ENABLED !== "false";
-const PRESENCE_TTL_MS = Number(process.env.PRESENCE_TTL_MS ?? "30000");
-const PRESENCE_HEARTBEAT_MAX_AGE_MS = Math.max(1_000, PRESENCE_TTL_MS);
-const presenceByProject = new Map<string, Map<string, PresenceSession>>();
-
-function getProjectDir(id: string) {
-  return join(DATA_DIR, id);
-}
-
-function readMeta(id: string): ProjectMeta | null {
-  const metaPath = join(getProjectDir(id), "meta.json");
-  if (!existsSync(metaPath)) return null;
-  return JSON.parse(readFileSync(metaPath, "utf-8"));
-}
-
-function sanitizePresenceSession(
-  session: PresenceSession,
-  now: number
-): PresenceSession | null {
-  if (now - session.lastSeen > PRESENCE_HEARTBEAT_MAX_AGE_MS) {
-    return null;
-  }
-
-  return session;
-}
-
-function getActivePresenceSessions(projectId: string): PresenceSession[] {
-  const now = Date.now();
-  const projectPresence = presenceByProject.get(projectId);
-  if (!projectPresence) return [];
-
-  const active: PresenceSession[] = [];
-  for (const [sessionId, session] of projectPresence.entries()) {
-    const sanitized = sanitizePresenceSession(session, now);
-    if (!sanitized) {
-      projectPresence.delete(sessionId);
-      continue;
-    }
-    active.push(sanitized);
-  }
-
-  if (projectPresence.size === 0) {
-    presenceByProject.delete(projectId);
-  }
-
-  return active;
-}
-
-setInterval(() => {
-  const projectIds = Array.from(presenceByProject.keys());
-  for (const projectId of projectIds) {
-    getActivePresenceSessions(projectId);
-  }
-}, Math.max(1_000, Math.floor(PRESENCE_HEARTBEAT_MAX_AGE_MS / 2))).unref();
-
-/** Inject the sandbox interceptor script before </head> */
-function injectInterceptor(html: string): string {
-  const interceptorTag = `<script>${getInterceptorScript()}</script>`;
-  const renderTag = `<script>${RENDER_MODE_SCRIPT}</script>`;
-
-  if (html.includes("</head>")) {
-    html = html.replace("</head>", () => `${interceptorTag}\n</head>`);
-  } else {
-    const doctypeIdx = html.toLowerCase().indexOf("<!doctype");
-    if (doctypeIdx >= 0) {
-      const insertPos = html.indexOf(">", doctypeIdx) + 1;
-      html = html.slice(0, insertPos) + interceptorTag + html.slice(insertPos);
-    } else {
-      html = interceptorTag + html;
-    }
-  }
-
-  if (html.includes("</body>")) {
-    return html.replace("</body>", () => `${renderTag}\n</body>`);
-  }
-  return html + renderTag;
-}
-
-export const projects = new Hono();
-
-// List all projects
-projects.get("/", (c) => {
-  if (!existsSync(DATA_DIR)) return c.json([]);
-
-  const dirs = readdirSync(DATA_DIR, { withFileTypes: true }).filter((d) =>
-    d.isDirectory() || d.isSymbolicLink()
-  );
-
-  const projectList: ProjectMeta[] = [];
-  for (const dir of dirs) {
-    const meta = readMeta(dir.name);
-    if (meta) projectList.push(meta);
-  }
-
-  // Sort newest first
-  projectList.sort(
-    (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
-  );
-
-  return c.json(projectList);
-});
-
-// Upload ZIP
-projects.post("/upload", async (c) => {
-  const formData = await c.req.formData();
-  const file = formData.get("file") as File | null;
-  const name = (formData.get("name") as string) || "Untitled Project";
-
-  if (!file) {
-    return c.json({ error: "No file provided" }, 400);
-  }
-
-  if (!file.name.endsWith(".zip")) {
-    return c.json({ error: "File must be a .zip" }, 400);
-  }
-
-  const id = randomUUID();
-  const projectDir = getProjectDir(id);
-
-  const buffer = Buffer.from(await file.arrayBuffer());
-  const result = extractZip(buffer, projectDir);
-
-  if (!result.success) {
-    // Clean up on failure
-    if (existsSync(projectDir)) {
-      rmSync(projectDir, { recursive: true, force: true });
-    }
-    return c.json({ error: result.error }, 400);
-  }
-
-  // Write metadata
-  const meta: ProjectMeta = {
-    id,
-    name,
-    createdAt: new Date().toISOString(),
-  };
-  writeFileSync(join(projectDir, "meta.json"), JSON.stringify(meta, null, 2));
-
-  return c.json(meta, 201);
-});
-
-// Get project metadata (with composition dimensions)
-projects.get("/:id", (c) => {
-  const id = c.req.param("id");
-  const meta = readMeta(id);
-  if (!meta) return c.json({ error: "Project not found" }, 404);
-
-  // Try to extract composition dimensions from index.html
-  const indexPath = join(getProjectDir(id), "index.html");
-  let width: number | null = null;
-  let height: number | null = null;
-
-  if (existsSync(indexPath)) {
-    try {
-      const html = readFileSync(indexPath, "utf-8");
-      const $ = cheerio.load(html);
-      // Look for root composition element with data-width/data-height
-      const rootComp = $(
-        "[data-composition-id][data-width][data-height]"
-      ).first();
-      if (rootComp.length) {
-        width = parseInt(rootComp.attr("data-width") || "", 10) || null;
-        height = parseInt(rootComp.attr("data-height") || "", 10) || null;
-      }
-    } catch {
-      // Ignore parse errors
-    }
-  }
-
-  return c.json({ ...meta, width, height });
-});
-
-// Delete project
-projects.delete("/:id", (c) => {
-  const id = c.req.param("id");
-  const projectDir = getProjectDir(id);
-
-  if (!existsSync(projectDir)) {
-    return c.json({ error: "Project not found" }, 404);
-  }
-
-  rmSync(projectDir, { recursive: true, force: true });
-  presenceByProject.delete(id);
-  return c.json({ success: true });
-});
-
-projects.post("/:id/presence/heartbeat", async (c) => {
-  if (!PRESENCE_ENABLED) {
-    return c.json({ enabled: false }, 200);
-  }
-
-  const id = c.req.param("id");
-  const projectDir = getProjectDir(id);
-  if (!existsSync(projectDir)) {
-    return c.json({ error: "Project not found" }, 404);
-  }
-
-  const body = await c.req.json<PresenceHeartbeatBody>();
-  const sessionId = body.sessionId?.trim();
-  if (!sessionId) {
-    return c.json({ error: "sessionId is required" }, 400);
-  }
-
-  const line =
-    typeof body.line === "number" && Number.isFinite(body.line)
-      ? Math.max(1, Math.floor(body.line))
-      : undefined;
-  const column =
-    typeof body.column === "number" && Number.isFinite(body.column)
-      ? Math.max(1, Math.floor(body.column))
-      : undefined;
-
-  let projectPresence = presenceByProject.get(id);
-  if (!projectPresence) {
-    projectPresence = new Map<string, PresenceSession>();
-    presenceByProject.set(id, projectPresence);
-  }
-
-  projectPresence.set(sessionId, {
-    sessionId,
-    filePath: typeof body.filePath === "string" ? body.filePath : undefined,
-    line,
-    column,
-    color: typeof body.color === "string" ? body.color : undefined,
-    lastSeen: Date.now(),
-  });
-
-  return c.json({ enabled: true });
-});
-
-projects.get("/:id/presence", (c) => {
-  if (!PRESENCE_ENABLED) {
-    return c.json({ enabled: false, ttlMs: PRESENCE_HEARTBEAT_MAX_AGE_MS, sessions: [] });
-  }
-
-  const id = c.req.param("id");
-  const projectDir = getProjectDir(id);
-  if (!existsSync(projectDir)) {
-    return c.json({ error: "Project not found" }, 404);
-  }
-
-  const sessions = getActivePresenceSessions(id);
-  return c.json({ enabled: true, ttlMs: PRESENCE_HEARTBEAT_MAX_AGE_MS, sessions });
-});
-
-// Update an element's data-start attribute in index.html
-projects.patch("/:id/elements/:elementId", async (c) => {
-  const id = c.req.param("id");
-  const elementId = c.req.param("elementId");
-  const projectDir = getProjectDir(id);
-  const indexPath = join(projectDir, "index.html");
-
-  if (!existsSync(indexPath)) {
-    return c.json({ error: "Project or index.html not found" }, 404);
-  }
-
-  const body = await c.req.json<{ start: number }>();
-  if (typeof body.start !== "number" || isNaN(body.start)) {
-    return c.json({ error: "start must be a valid number" }, 400);
-  }
-
-  const html = readFileSync(indexPath, "utf-8");
-  const $ = cheerio.load(html, null, false);
-  const el = $(`[id="${elementId}"]`);
-
-  if (!el.length) {
-    return c.json({ error: `Element #${elementId} not found` }, 404);
-  }
-
-  const newStart = Math.max(0, body.start);
-  el.attr("data-start", String(newStart));
-  writeFileSync(indexPath, $.html(), "utf-8");
-
-  console.log(`[MoveClip] Updated #${elementId} data-start to ${newStart}`);
-  return c.json({ elementId, start: newStart });
-});
-
-// Preview the final injected HTML as plain text (for debugging)
-projects.get("/:id/preview", async (c) => {
-  const id = c.req.param("id");
-  const projectDir = getProjectDir(id);
-  const indexPath = join(projectDir, "index.html");
-
-  if (!existsSync(indexPath)) {
-    return c.json({ error: "Project or index.html not found" }, 404);
-  }
-
-  const rawHtml = readFileSync(indexPath, "utf-8");
-  const compiled = await compileHtml(rawHtml, projectDir);
-  const html = injectInterceptor(compiled);
-
-  return new Response(html, {
-    headers: {
-      "Content-Type": "text/plain; charset=utf-8",
-      "Cache-Control": "no-cache",
-    },
-  });
-});
-
-// Preview the original HTML before injection (for comparison)
-projects.get("/:id/preview-raw", (c) => {
-  const id = c.req.param("id");
-  const indexPath = join(getProjectDir(id), "index.html");
-
-  if (!existsSync(indexPath)) {
-    return c.json({ error: "Project or index.html not found" }, 404);
-  }
-
-  const rawHtml = readFileSync(indexPath, "utf-8");
-
-  return new Response(rawHtml, {
-    headers: {
-      "Content-Type": "text/plain; charset=utf-8",
-      "Cache-Control": "no-cache",
-    },
-  });
-});
-
-// Serve extracted static files
-projects.get("/:id/serve/*", async (c) => {
-  const id = c.req.param("id");
-  const projectDir = getProjectDir(id);
-
-  if (!existsSync(projectDir)) {
-    return c.json({ error: "Project not found" }, 404);
-  }
-
-  // Get the file path after /serve/
-  const url = new URL(c.req.url);
-  const servePrefix = `/api/projects/${id}/serve/`;
-  let filePath = decodeURIComponent(
-    url.pathname.slice(url.pathname.indexOf(servePrefix) + servePrefix.length)
-  );
-
-  if (!filePath) filePath = "index.html";
-
-  // Directory traversal protection
-  const resolvedPath = resolve(projectDir, filePath);
-  if (!resolvedPath.startsWith(projectDir)) {
-    return c.json({ error: "Forbidden" }, 403);
-  }
-
-  if (!existsSync(resolvedPath) || statSync(resolvedPath).isDirectory()) {
-    return c.json({ error: "File not found" }, 404);
-  }
-
-  const ext = extname(resolvedPath);
-  const contentType = mime.lookup(ext) || "application/octet-stream";
-
-  // For HTML files: compile timing attrs (+ ffprobe unresolved media), then inject interceptor for index.html
-  if (ext === ".html") {
-    const rawHtml = readFileSync(resolvedPath, "utf-8");
-    const compiled = await compileHtml(rawHtml, projectDir);
-    const html =
-      filePath === "index.html" ? injectInterceptor(compiled) : compiled;
-
-    return new Response(html, {
-      headers: {
-        "Content-Type": "text/html; charset=utf-8",
-        "Cache-Control": "no-cache",
-      },
-    });
-  }
-
-  const content = readFileSync(resolvedPath);
-
-  return new Response(content, {
-    headers: {
-      "Content-Type": contentType,
-      "Cache-Control": "no-cache",
-    },
-  });
-});
-
-// --- File CRUD for CodeSandbox editor ---
-
-const EDITABLE_EXTENSIONS = new Set([
-  ".html",
-  ".css",
-  ".js",
-  ".json",
-  ".svg",
-  ".txt",
-  ".ts",
-  ".jsx",
-  ".tsx",
-]);
-
-function extToLanguage(ext: string): string {
-  const map: Record<string, string> = {
-    ".html": "html",
-    ".css": "css",
-    ".js": "javascript",
-    ".jsx": "javascript",
-    ".ts": "typescript",
-    ".tsx": "typescript",
-    ".json": "json",
-    ".svg": "xml",
-    ".txt": "plaintext",
-  };
-  return map[ext] || "plaintext";
-}
-
-// Recursively collect editable files from a directory
-function collectEditableFiles(
-  dir: string,
-  baseDir: string,
-  results: { filename: string; language: string; size: number }[] = []
-): { filename: string; language: string; size: number }[] {
-  const entries = readdirSync(dir, { withFileTypes: true });
-
-  for (const entry of entries) {
-    const fullPath = join(dir, entry.name);
-    const relativePath = fullPath.slice(baseDir.length + 1); // +1 for trailing slash
-
-    if (entry.isDirectory()) {
-      collectEditableFiles(fullPath, baseDir, results);
-    } else if (entry.isFile()) {
-      if (entry.name === "meta.json") continue;
-      const ext = extname(entry.name).toLowerCase();
-      if (!EDITABLE_EXTENSIONS.has(ext)) continue;
-
-      const stat = statSync(fullPath);
-      results.push({
-        filename: relativePath,
-        language: extToLanguage(ext),
-        size: stat.size,
-      });
-    }
-  }
-
-  return results;
-}
-
-// List editable text files (including subfolders)
-projects.get("/:id/files", (c) => {
-  const id = c.req.param("id");
-  const projectDir = getProjectDir(id);
-
-  if (!existsSync(projectDir)) {
-    return c.json({ error: "Project not found" }, 404);
-  }
-
-  const files = collectEditableFiles(projectDir, projectDir);
-
-  // Sort: index.html first, then by path (folders grouped)
-  files.sort((a, b) => {
-    if (a.filename === "index.html") return -1;
-    if (b.filename === "index.html") return 1;
-    return a.filename.localeCompare(b.filename);
-  });
-
-  return c.json({ files });
-});
-
-// Read file content
-projects.get("/:id/files/:filename", async (c) => {
-  const id = c.req.param("id");
-  const filename = c.req.param("filename");
-  const projectDir = getProjectDir(id);
-
-  const resolvedPath = resolve(projectDir, filename);
-  if (!resolvedPath.startsWith(projectDir)) {
-    return c.json({ error: "Forbidden" }, 403);
-  }
-
-  if (!existsSync(resolvedPath) || statSync(resolvedPath).isDirectory()) {
-    return c.json({ error: "File not found" }, 404);
-  }
-
-  const ext = extname(filename).toLowerCase();
-  const raw = readFileSync(resolvedPath, "utf-8");
-  const isCompiled = c.req.query("compiled") === "true";
-  const content =
-    isCompiled && ext === ".html" ? await compileHtml(raw, projectDir) : raw;
-
-  return c.json({
-    filename,
-    language: extToLanguage(ext),
-    content,
-  });
-});
-
-// Write file content
-projects.put("/:id/files/:filename", async (c) => {
-  const id = c.req.param("id");
-  const filename = c.req.param("filename");
-  const projectDir = getProjectDir(id);
-
-  if (!existsSync(projectDir)) {
-    return c.json({ error: "Project not found" }, 404);
-  }
-
-  const resolvedPath = resolve(projectDir, filename);
-  if (!resolvedPath.startsWith(projectDir)) {
-    return c.json({ error: "Forbidden" }, 403);
-  }
-
-  const ext = extname(filename).toLowerCase();
-  if (!EDITABLE_EXTENSIONS.has(ext)) {
-    return c.json({ error: `File type ${ext} is not editable` }, 400);
-  }
-
-  const body = await c.req.json<{ content: string }>();
-  if (typeof body.content !== "string") {
-    return c.json({ error: "content must be a string" }, 400);
-  }
-
-  // Create parent directories if they don't exist
-  const parentDir = dirname(resolvedPath);
-  if (!existsSync(parentDir)) {
-    mkdirSync(parentDir, { recursive: true });
-  }
-
-  writeFileSync(resolvedPath, body.content, "utf-8");
-
-  return c.json({
-    filename,
-    language: extToLanguage(ext),
-    size: Buffer.byteLength(body.content, "utf-8"),
-  });
-});
diff --git a/packages/studio/backend/src/routes/render.ts b/packages/studio/backend/src/routes/render.ts
deleted file mode 100644
index 895c5195..00000000
--- a/packages/studio/backend/src/routes/render.ts
+++ /dev/null
@@ -1,261 +0,0 @@
-/**
- * Render Routes
- *
- * Endpoints for rendering sandbox-studio compositions to MP4.
- * Runs the producer pipeline directly (no Docker needed for local dev).
- * Docker mode can be re-enabled later for production.
- */
-
-import { Hono } from "hono";
-import { streamSSE } from "hono/streaming";
-import { spawn, type ChildProcess } from "child_process";
-import { existsSync, mkdirSync, statSync, createReadStream } from "fs";
-import { join, resolve } from "path";
-import { randomUUID } from "crypto";
-import { Readable } from "stream";
-
-const DATA_DIR = process.env.STUDIO_DATA_DIR
-  ? resolve(process.env.STUDIO_DATA_DIR)
-  : resolve(import.meta.dirname, "../../data/projects");
-const RENDERS_DIR = process.env.STUDIO_RENDERS_DIR
-  ? resolve(process.env.STUDIO_RENDERS_DIR)
-  : resolve(import.meta.dirname, "../../data/renders");
-const PRODUCER_CLI = resolve(import.meta.dirname, "../../../../producer/src/internal-render.ts");
-
-interface RenderJobState {
-  id: string;
-  projectId: string;
-  status: "queued" | "rendering" | "complete" | "failed";
-  progress: number;
-  stage: string;
-  error?: string;
-  outputPath?: string;
-  startedAt: number;
-  completedAt?: number;
-  logs: string[];
-  proc?: ChildProcess;
-}
-
-const jobs = new Map<string, RenderJobState>();
-
-function getProjectDir(id: string) {
-  return join(DATA_DIR, id);
-}
-
-function parseProgressFromLog(line: string): { progress?: number; stage?: string } {
-  const progressMatch = line.match(/\[Producer\]\s+([\d.]+)%\s*-\s*(.*)/);
-  if (progressMatch) {
-    return {
-      progress: parseFloat(progressMatch[1] ?? ""),
-      stage: (progressMatch[2] ?? "").trim(),
-    };
-  }
-
-  const stageMatch = line.match(/\[Orchestrator\]\s+Stage\s+(\d+\/\d+):\s+(.*)/);
-  if (stageMatch) {
-    return { stage: `${stageMatch[1] ?? ""}: ${stageMatch[2] ?? ""}` };
-  }
-
-  return {};
-}
-
-export const renderJobs = new Hono();
-export const projectRender = new Hono();
-
-// POST /api/projects/:id/render -- Start a render job
-projectRender.post("/:id/render", async (c) => {
-  const projectId = c.req.param("id");
-  const projectDir = getProjectDir(projectId);
-
-  if (!existsSync(projectDir)) {
-    return c.json({ error: "Project not found" }, 404);
-  }
-
-  if (!existsSync(join(projectDir, "index.html"))) {
-    return c.json({ error: "Project has no index.html" }, 400);
-  }
-
-  const body = await c.req.json<{ debug?: boolean; sequential?: boolean }>().catch(() => ({} as { debug?: boolean; sequential?: boolean }));
-  const debug = body.debug ?? false;
-  const sequential = body.sequential ?? false;
-
-  if (!existsSync(RENDERS_DIR)) mkdirSync(RENDERS_DIR, { recursive: true });
-
-  const jobId = randomUUID();
-  const outputFilename = `${projectId}-${jobId.slice(0, 8)}.mp4`;
-  const outputPath = join(RENDERS_DIR, outputFilename);
-
-  const job: RenderJobState = {
-    id: jobId,
-    projectId,
-    status: "rendering",
-    progress: 0,
-    stage: "Starting",
-    outputPath,
-    startedAt: Date.now(),
-    logs: [],
-  };
-
-  jobs.set(jobId, job);
-
-  // Run the producer directly via tsx (no Docker needed for local dev)
-  const indexHtml = join(projectDir, "index.html");
-  const args = [
-    PRODUCER_CLI,
-    indexHtml,
-    "-o", outputPath,
-    "-f", "30",
-    "-q", "standard",
-    ...(debug ? ["--debug"] : []),
-    ...(sequential ? ["-w", "1"] : []),
-  ];
-
-  console.log(`[Render] Starting job ${jobId} for project ${projectId}`);
-  console.log(`[Render] Command: tsx ${args.join(" ")}`);
-
-  const proc = spawn("npx", ["tsx", ...args], {
-    stdio: ["pipe", "pipe", "pipe"],
-    cwd: resolve(import.meta.dirname, "../../../.."),
-  });
-  job.proc = proc;
-
-  const handleOutput = (data: Buffer) => {
-    const lines = data.toString().split("\n").filter(Boolean);
-    for (const line of lines) {
-      job.logs.push(line);
-      if (job.logs.length > 1000) job.logs.shift();
-
-      const { progress, stage } = parseProgressFromLog(line);
-      if (progress !== undefined) job.progress = progress;
-      if (stage) job.stage = stage;
-
-      // Log to backend console for visibility
-      console.log(`[Render:${jobId.slice(0, 8)}] ${line}`);
-    }
-  };
-
-  proc.stdout?.on("data", handleOutput);
-  proc.stderr?.on("data", handleOutput);
-
-  proc.on("close", (code) => {
-    job.completedAt = Date.now();
-    delete job.proc;
-
-    if (code === 0 && job.outputPath && existsSync(job.outputPath)) {
-      job.status = "complete";
-      job.progress = 100;
-      job.stage = "Complete";
-      console.log(`[Render] Job ${jobId} complete: ${job.outputPath}`);
-    } else {
-      job.status = "failed";
-      job.error = `Process exited with code ${code}`;
-      console.error(`[Render] Job ${jobId} failed (exit ${code})`);
-    }
-  });
-
-  proc.on("error", (err) => {
-    job.status = "failed";
-    job.error = err.message;
-    job.completedAt = Date.now();
-    delete job.proc;
-    console.error(`[Render] Job ${jobId} error: ${err.message}`);
-  });
-
-  return c.json({ jobId, status: "rendering" });
-});
-
-// GET /api/render/:id/status -- Job status
-renderJobs.get("/:id/status", (c) => {
-  const jobId = c.req.param("id");
-  const job = jobs.get(jobId);
-
-  if (!job) return c.json({ error: "Job not found" }, 404);
-
-  return c.json({
-    id: job.id,
-    projectId: job.projectId,
-    status: job.status,
-    progress: job.progress,
-    stage: job.stage,
-    error: job.error,
-    elapsed: job.completedAt
-      ? job.completedAt - job.startedAt
-      : Date.now() - job.startedAt,
-  });
-});
-
-// GET /api/render/:id/progress -- SSE progress stream
-renderJobs.get("/:id/progress", (c) => {
-  const jobId = c.req.param("id");
-  const job = jobs.get(jobId);
-
-  if (!job) return c.json({ error: "Job not found" }, 404);
-
-  return streamSSE(c, async (stream) => {
-    let lastProgress = -1;
-    let lastStage = "";
-
-    const sendUpdate = async () => {
-      const elapsed = job.completedAt
-        ? job.completedAt - job.startedAt
-        : Date.now() - job.startedAt;
-
-      await stream.writeSSE({
-        event: "progress",
-        data: JSON.stringify({
-          status: job.status,
-          progress: job.progress,
-          stage: job.stage,
-          error: job.error,
-          elapsed,
-        }),
-      });
-    };
-
-    await sendUpdate();
-
-    while (job.status === "rendering" || job.status === "queued") {
-      await new Promise((resolve) => setTimeout(resolve, 500));
-
-      if (job.progress !== lastProgress || job.stage !== lastStage) {
-        lastProgress = job.progress;
-        lastStage = job.stage;
-        await sendUpdate();
-      }
-    }
-
-    await sendUpdate();
-  });
-});
-
-// GET /api/render/:id/download -- Download the rendered MP4
-renderJobs.get("/:id/download", (c) => {
-  const jobId = c.req.param("id");
-  const job = jobs.get(jobId);
-
-  if (!job) return c.json({ error: "Job not found" }, 404);
-  if (job.status !== "complete") return c.json({ error: "Render not complete" }, 400);
-  if (!job.outputPath || !existsSync(job.outputPath)) {
-    return c.json({ error: "Output file not found" }, 404);
-  }
-
-  const stats = statSync(job.outputPath);
-  const filename = `${job.projectId}.mp4`;
-
-  c.header("Content-Type", "video/mp4");
-  c.header("Content-Length", String(stats.size));
-  c.header("Content-Disposition", `attachment; filename="${filename}"`);
-
-  const stream = createReadStream(job.outputPath);
-  return c.body(Readable.toWeb(stream) as ReadableStream);
-});
-
-// GET /api/render/:id/logs -- Get render logs
-renderJobs.get("/:id/logs", (c) => {
-  const jobId = c.req.param("id");
-  const job = jobs.get(jobId);
-
-  if (!job) return c.json({ error: "Job not found" }, 404);
-
-  return c.json({ logs: job.logs });
-});
diff --git a/packages/studio/backend/src/utils/ffprobe.ts b/packages/studio/backend/src/utils/ffprobe.ts
deleted file mode 100644
index 8f8d9510..00000000
--- a/packages/studio/backend/src/utils/ffprobe.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { spawn } from "child_process";
-
-const durationCache = new Map<string, number>();
-
-export async function probeMediaDuration(src: string): Promise<number> {
-  const cached = durationCache.get(src);
-  if (cached !== undefined) return cached;
-
-  const duration = await runFFprobe(src);
-  durationCache.set(src, duration);
-  return duration;
-}
-
-function runFFprobe(src: string): Promise<number> {
-  return new Promise((resolve, reject) => {
-    const args = [
-      "-v", "quiet",
-      "-print_format", "json",
-      "-show_format",
-      src,
-    ];
-
-    const proc = spawn("ffprobe", args);
-    let stdout = "";
-    let stderr = "";
-
-    proc.stdout.on("data", (d) => { stdout += d.toString(); });
-    proc.stderr.on("data", (d) => { stderr += d.toString(); });
-
-    proc.on("close", (code) => {
-      if (code !== 0) {
-        console.warn(`[FFprobe] Failed for ${src}: exit ${code}`);
-        resolve(0);
-        return;
-      }
-      try {
-        const output = JSON.parse(stdout);
-        const duration = parseFloat(output?.format?.duration ?? "0");
-        console.log(`[FFprobe] ${src.slice(-40)}: ${duration}s`);
-        resolve(duration);
-      } catch {
-        console.warn(`[FFprobe] Parse error for ${src}`);
-        resolve(0);
-      }
-    });
-
-    proc.on("error", (err) => {
-      if ((err as NodeJS.ErrnoException).code === "ENOENT") {
-        console.warn("[FFprobe] ffprobe not found, skipping duration resolution");
-      }
-      resolve(0);
-    });
-  });
-}
diff --git a/packages/studio/backend/src/utils/htmlCompiler.ts b/packages/studio/backend/src/utils/htmlCompiler.ts
deleted file mode 100644
index a6f375e1..00000000
--- a/packages/studio/backend/src/utils/htmlCompiler.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { resolve } from "path";
-import { compileTimingAttrs, injectDurations, type ResolvedDuration } from "@hyperframes/core";
-import { probeMediaDuration } from "./ffprobe";
-
-/**
- * Compile HTML with full duration resolution.
- *
- * 1. Static pass: compileTimingAttrs() adds data-end where data-duration exists
- * 2. For unresolved video/audio (no data-duration): probe via ffprobe, inject durations
- */
-export async function compileHtml(rawHtml: string, projectDir: string): Promise<string> {
-  const { html: staticCompiled, unresolved } = compileTimingAttrs(rawHtml);
-
-  const mediaUnresolved = unresolved.filter(
-    (el) => el.tagName === "video" || el.tagName === "audio"
-  );
-
-  if (mediaUnresolved.length === 0) return staticCompiled;
-
-  const resolutions: ResolvedDuration[] = [];
-
-  for (const el of mediaUnresolved) {
-    if (!el.src) continue;
-
-    const src = el.src.startsWith("http://") || el.src.startsWith("https://")
-      ? el.src
-      : resolve(projectDir, el.src);
-
-    const fileDuration = await probeMediaDuration(src);
-    if (fileDuration <= 0) continue;
-
-    const effectiveDuration = fileDuration - el.mediaStart;
-    resolutions.push({
-      id: el.id,
-      duration: effectiveDuration > 0 ? effectiveDuration : fileDuration,
-    });
-  }
-
-  if (resolutions.length === 0) return staticCompiled;
-
-  return injectDurations(staticCompiled, resolutions);
-}
diff --git a/packages/studio/backend/src/utils/zip.ts b/packages/studio/backend/src/utils/zip.ts
deleted file mode 100644
index 1eb6b37c..00000000
--- a/packages/studio/backend/src/utils/zip.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-import AdmZip from "adm-zip";
-import { join } from "path";
-import { mkdirSync, writeFileSync } from "fs";
-
-export interface ExtractResult {
-  success: boolean;
-  error?: string;
-}
-
-/**
- * Extract a ZIP buffer into the target directory.
- * Validates that index.html exists at root or inside a single wrapper directory.
- * If there's a single wrapper dir, flattens it so index.html ends up at the project root.
- */
-/** Returns true if the entry is OS junk or a hidden file */
-function isHiddenEntry(entryName: string): boolean {
-  if (entryName.startsWith("__MACOSX")) return true;
-  return entryName.split("/").some((seg) => seg.startsWith("."));
-}
-
-export function extractZip(
-  buffer: Buffer,
-  targetDir: string,
-): ExtractResult {
-  const zip = new AdmZip(buffer);
-  const entries = zip.getEntries().filter((e) => !isHiddenEntry(e.entryName));
-
-  if (entries.length === 0) {
-    return { success: false, error: "ZIP file is empty" };
-  }
-
-  // Check if index.html exists at root
-  const hasRootIndex = entries.some(
-    (e) => e.entryName === "index.html" && !e.isDirectory,
-  );
-
-  // If no index.html, check if there's a single .html file at root we can use
-  let renameToIndex: string | null = null;
-  if (!hasRootIndex) {
-    const rootHtmlFiles = entries.filter(
-      (e) =>
-        !e.isDirectory &&
-        !e.entryName.includes("/") &&
-        e.entryName.endsWith(".html"),
-    );
-    if (rootHtmlFiles.length === 1) {
-      renameToIndex = rootHtmlFiles[0]?.entryName ?? null;
-    }
-  }
-
-  // Check for single wrapper directory pattern (e.g., "project/index.html")
-  let stripPrefix = "";
-  if (!hasRootIndex && !renameToIndex) {
-    const topLevelDirs = new Set<string>();
-    for (const entry of entries) {
-      const firstSlash = entry.entryName.indexOf("/");
-      if (firstSlash > 0) {
-        topLevelDirs.add(entry.entryName.slice(0, firstSlash));
-      }
-    }
-
-    if (topLevelDirs.size === 1) {
-      const wrapperDir = [...topLevelDirs][0] ?? "";
-      const hasNestedIndex = entries.some(
-        (e) =>
-          e.entryName === `${wrapperDir}/index.html` && !e.isDirectory,
-      );
-      if (hasNestedIndex) {
-        stripPrefix = `${wrapperDir}/`;
-      } else {
-        // Check for single .html in wrapper dir
-        const nestedHtmlFiles = entries.filter(
-          (e) =>
-            !e.isDirectory &&
-            e.entryName.startsWith(`${wrapperDir}/`) &&
-            !e.entryName.slice(wrapperDir.length + 1).includes("/") &&
-            e.entryName.endsWith(".html"),
-        );
-        if (nestedHtmlFiles.length === 1) {
-          stripPrefix = `${wrapperDir}/`;
-          renameToIndex = nestedHtmlFiles[0]?.entryName.slice(stripPrefix.length) ?? null;
-        } else {
-          const found = entries
-            .filter((e) => !e.isDirectory)
-            .map((e) => e.entryName)
-            .join(", ");
-          return {
-            success: false,
-            error: `ZIP must contain index.html (or a single .html file). Found: ${found}`,
-          };
-        }
-      }
-    } else {
-      const found = entries
-        .filter((e) => !e.isDirectory)
-        .map((e) => e.entryName)
-        .join(", ");
-      return {
-        success: false,
-        error: `ZIP must contain index.html (or a single .html file). Found: ${found}`,
-      };
-    }
-  }
-
-  // Extract files
-  for (const entry of entries) {
-    let relativePath = entry.entryName;
-
-    // Strip wrapper directory prefix if needed
-    if (stripPrefix && relativePath.startsWith(stripPrefix)) {
-      relativePath = relativePath.slice(stripPrefix.length);
-    } else if (stripPrefix) {
-      continue; // Skip files outside the wrapper (e.g., __MACOSX)
-    }
-
-    if (!relativePath || relativePath === "/") continue;
-
-    // Directory traversal protection
-    if (relativePath.includes("..")) continue;
-
-    // Rename single .html file to index.html
-    if (renameToIndex && relativePath === renameToIndex) {
-      relativePath = "index.html";
-    }
-
-    const fullPath = join(targetDir, relativePath);
-
-    if (entry.isDirectory) {
-      mkdirSync(fullPath, { recursive: true });
-    } else {
-      const dir = fullPath.substring(0, fullPath.lastIndexOf("/"));
-      mkdirSync(dir, { recursive: true });
-      writeFileSync(fullPath, entry.getData());
-    }
-  }
-
-  return { success: true };
-}
diff --git a/packages/studio/backend/tsconfig.json b/packages/studio/backend/tsconfig.json
deleted file mode 100644
index 205abe67..00000000
--- a/packages/studio/backend/tsconfig.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "esModuleInterop": true,
-    "strict": true,
-    "noUncheckedIndexedAccess": true,
-    "skipLibCheck": true,
-    "outDir": "dist",
-    "rootDir": "src"
-  },
-  "include": ["src"]
-}
diff --git a/packages/studio/frontend/index.html b/packages/studio/frontend/index.html
deleted file mode 100644
index 0fa1458a..00000000
--- a/packages/studio/frontend/index.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Sandbox Studio</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
diff --git a/packages/studio/frontend/package.json b/packages/studio/frontend/package.json
deleted file mode 100644
index 8f46c7e5..00000000
--- a/packages/studio/frontend/package.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "name": "@hyperframes/studio-frontend",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@monaco-editor/react": "^4.7.0",
-    "lucide-react": "^0.563.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "zustand": "^4.5.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
-    "@vitejs/plugin-react": "^4.0.0",
-    "autoprefixer": "^10.4.0",
-    "postcss": "^8.4.0",
-    "tailwindcss": "^3.4.0",
-    "typescript": "^5.0.0",
-    "vite": "^5.0.0"
-  }
-}
diff --git a/packages/studio/frontend/src/App.tsx b/packages/studio/frontend/src/App.tsx
deleted file mode 100644
index bc38a7df..00000000
--- a/packages/studio/frontend/src/App.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useState, useEffect } from "react";
-import { HomePage } from "./components/HomePage";
-import { ProjectPage } from "./components/ProjectPage";
-
-function parseHash(): { page: "home" | "project"; projectId?: string } {
-  const hash = window.location.hash || "#/";
-  const match = hash.match(/^#\/project\/(.+)$/);
-  if (match) return { page: "project", projectId: match[1] };
-  return { page: "home" };
-}
-
-export default function App() {
-  const [route, setRoute] = useState(parseHash);
-
-  useEffect(() => {
-    const onHashChange = () => setRoute(parseHash());
-    window.addEventListener("hashchange", onHashChange);
-    return () => window.removeEventListener("hashchange", onHashChange);
-  }, []);
-
-  if (route.page === "project" && route.projectId) {
-    return <ProjectPage projectId={route.projectId} />;
-  }
-
-  return <HomePage />;
-}
diff --git a/packages/studio/frontend/src/api/client.ts b/packages/studio/frontend/src/api/client.ts
deleted file mode 100644
index 0243bae2..00000000
--- a/packages/studio/frontend/src/api/client.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { Schema } from "./validate";
-
-const BASE_URL = "/api";
-
-export async function apiFetch<T>(
-  path: string,
-  options?: RequestInit,
-): Promise<T> {
-  const res = await fetch(`${BASE_URL}${path}`, options);
-  if (!res.ok) {
-    const body = await res.json().catch(() => ({}));
-    throw new Error(body.error || `Request failed: ${res.status}`);
-  }
-  return res.json();
-}
-
-export function validatedApiFetch<T>(schema: Schema<T>) {
-  return async (path: string, options?: RequestInit): Promise<T> => {
-    const res = await fetch(`${BASE_URL}${path}`, options);
-    if (!res.ok) {
-      const body = await res.json().catch(() => ({}));
-      throw new Error(body.error || `Request failed: ${res.status}`);
-    }
-    const json: unknown = await res.json();
-    return schema.parse(json);
-  };
-}
diff --git a/packages/studio/frontend/src/api/files.ts b/packages/studio/frontend/src/api/files.ts
deleted file mode 100644
index c5fa4f4d..00000000
--- a/packages/studio/frontend/src/api/files.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { apiFetch, validatedApiFetch } from "./client";
-import { FileContentSchema, FileListResponseSchema } from "./schemas";
-import type { Infer } from "./validate";
-
-export type ProjectFile = Infer<typeof FileListResponseSchema>["files"][number];
-
-export type FileContent = Infer<typeof FileContentSchema>;
-
-const fetchFileList = validatedApiFetch(FileListResponseSchema);
-const fetchFileContent = validatedApiFetch(FileContentSchema);
-
-export async function listProjectFiles(projectId: string): Promise<ProjectFile[]> {
-  const data = await fetchFileList(`/projects/${projectId}/files`);
-  return data.files;
-}
-
-export async function getFileContent(projectId: string, filename: string, compiled?: boolean): Promise<FileContent> {
-  const qs = compiled ? "?compiled=true" : "";
-  return fetchFileContent(`/projects/${projectId}/files/${encodeURIComponent(filename)}${qs}`);
-}
-
-export async function saveFileContent(projectId: string, filename: string, content: string): Promise<void> {
-  await apiFetch(`/projects/${projectId}/files/${encodeURIComponent(filename)}`, {
-    method: "PUT",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ content }),
-  });
-}
diff --git a/packages/studio/frontend/src/api/projects.ts b/packages/studio/frontend/src/api/projects.ts
deleted file mode 100644
index 06e41157..00000000
--- a/packages/studio/frontend/src/api/projects.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import { apiFetch, validatedApiFetch } from "./client";
-import {
-  ProjectMetaSchema,
-  ProjectPresenceResponseSchema,
-  HeartbeatResponseSchema,
-} from "./schemas";
-import { v } from "./validate";
-import type { Infer } from "./validate";
-
-export type ProjectMeta = Infer<typeof ProjectMetaSchema>;
-
-export interface PresenceSession {
-  sessionId: string;
-  filePath?: string;
-  line?: number;
-  column?: number;
-  color?: string;
-  lastSeen: number;
-}
-
-export interface PresenceHeartbeatBody {
-  sessionId: string;
-  filePath?: string;
-  line?: number;
-  column?: number;
-  color?: string;
-}
-
-export type ProjectPresenceResponse = Infer<typeof ProjectPresenceResponseSchema>;
-
-export const COLLAB_CURSOR_ENABLED = Boolean(
-  (globalThis as { __HF_COLLAB_CURSOR_ENABLED?: boolean }).__HF_COLLAB_CURSOR_ENABLED
-);
-
-const fetchProjects = validatedApiFetch(v.array(ProjectMetaSchema));
-const fetchProject = validatedApiFetch(ProjectMetaSchema);
-const fetchPresence = validatedApiFetch(ProjectPresenceResponseSchema);
-const fetchHeartbeat = validatedApiFetch(HeartbeatResponseSchema);
-
-export async function listProjects(): Promise<ProjectMeta[]> {
-  return fetchProjects("/projects");
-}
-
-export async function getProject(id: string): Promise<ProjectMeta> {
-  return fetchProject(`/projects/${id}`);
-}
-
-export async function uploadProject(
-  file: File,
-  name: string
-): Promise<ProjectMeta> {
-  const formData = new FormData();
-  formData.append("file", file);
-  formData.append("name", name);
-
-  return fetchProject("/projects/upload", {
-    method: "POST",
-    body: formData,
-  });
-}
-
-export async function deleteProject(id: string): Promise<void> {
-  await apiFetch(`/projects/${id}`, { method: "DELETE" });
-}
-
-export async function updateElementStart(
-  projectId: string,
-  elementId: string,
-  start: number
-): Promise<void> {
-  await apiFetch(
-    `/projects/${projectId}/elements/${encodeURIComponent(elementId)}`,
-    {
-      method: "PATCH",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ start }),
-    }
-  );
-}
-
-export async function heartbeatProjectPresence(
-  projectId: string,
-  body: PresenceHeartbeatBody
-): Promise<{ enabled: boolean }> {
-  return fetchHeartbeat(`/projects/${projectId}/presence/heartbeat`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(body),
-  });
-}
-
-export async function getProjectPresence(
-  projectId: string
-): Promise<ProjectPresenceResponse> {
-  return fetchPresence(`/projects/${projectId}/presence`);
-}
diff --git a/packages/studio/frontend/src/api/render.ts b/packages/studio/frontend/src/api/render.ts
deleted file mode 100644
index 6c465d59..00000000
--- a/packages/studio/frontend/src/api/render.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { validatedApiFetch } from "./client";
-import { StartRenderResponseSchema, RenderProgressSchema } from "./schemas";
-import type { Infer } from "./validate";
-
-export type RenderProgress = Infer<typeof RenderProgressSchema>;
-
-const fetchStartRender = validatedApiFetch(StartRenderResponseSchema);
-
-export async function startRender(projectId: string, options?: { debug?: boolean; sequential?: boolean }): Promise<string> {
-  const res = await fetchStartRender(
-    `/projects/${projectId}/render`,
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        debug: options?.debug ?? false,
-        sequential: options?.sequential ?? false,
-      }),
-    }
-  );
-  return res.jobId;
-}
-
-export function subscribeProgress(
-  jobId: string,
-  onProgress: (data: RenderProgress) => void,
-  onError?: (error: Event) => void
-): () => void {
-  const eventSource = new EventSource(`/api/render/${jobId}/progress`);
-
-  eventSource.addEventListener("progress", (event) => {
-    try {
-      const result = RenderProgressSchema.safeParse(JSON.parse(event.data));
-      if (result.success) {
-        onProgress(result.data);
-      }
-    } catch (err: unknown) {
-      // Malformed JSON — ignore
-    }
-  });
-
-  if (onError) {
-    eventSource.onerror = onError;
-  }
-
-  return () => eventSource.close();
-}
-
-export function getDownloadUrl(jobId: string): string {
-  return `/api/render/${jobId}/download`;
-}
diff --git a/packages/studio/frontend/src/api/schemas.ts b/packages/studio/frontend/src/api/schemas.ts
deleted file mode 100644
index f5035b41..00000000
--- a/packages/studio/frontend/src/api/schemas.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { v } from "./validate";
-
-// ── Project schemas ─────────────────────────────────────────────────────────
-
-export const ProjectMetaSchema = v.object({
-  id: v.string(),
-  name: v.string(),
-  createdAt: v.string(),
-  width: v.number().nullable().optional(),
-  height: v.number().nullable().optional(),
-});
-
-export const PresenceSessionSchema = v.object({
-  sessionId: v.string(),
-  filePath: v.string().optional(),
-  line: v.number().optional(),
-  column: v.number().optional(),
-  color: v.string().optional(),
-  lastSeen: v.number(),
-});
-
-export const ProjectPresenceResponseSchema = v.object({
-  enabled: v.boolean(),
-  ttlMs: v.number(),
-  sessions: v.array(PresenceSessionSchema),
-});
-
-export const HeartbeatResponseSchema = v.object({
-  enabled: v.boolean(),
-});
-
-// ── File schemas ────────────────────────────────────────────────────────────
-
-export const ProjectFileSchema = v.object({
-  filename: v.string(),
-  language: v.string(),
-  size: v.number(),
-});
-
-export const FileContentSchema = v.object({
-  filename: v.string(),
-  language: v.string(),
-  content: v.string(),
-});
-
-export const FileListResponseSchema = v.object({
-  files: v.array(ProjectFileSchema),
-});
-
-// ── Render schemas ──────────────────────────────────────────────────────────
-
-export const StartRenderResponseSchema = v.object({
-  jobId: v.string(),
-  status: v.string(),
-});
-
-export const RenderProgressSchema = v.object({
-  status: v.enum(["queued", "rendering", "complete", "failed"]),
-  progress: v.number(),
-  stage: v.string(),
-  error: v.string().optional(),
-  elapsed: v.number(),
-});
diff --git a/packages/studio/frontend/src/api/validate.ts b/packages/studio/frontend/src/api/validate.ts
deleted file mode 100644
index a99e7105..00000000
--- a/packages/studio/frontend/src/api/validate.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * Lightweight Zod-like schema validation — zero dependencies.
- * Supports: string, number, boolean, enum, array, object, optional, nullable.
- * Usage mirrors Zod: v.object({ id: v.string() }).parse(data)
- */
-
-export interface Schema<T> {
-  parse(d: unknown): T;
-  safeParse(d: unknown): { success: true; data: T } | { success: false; error: Error };
-  optional(): Schema<T | undefined>;
-  nullable(): Schema<T | null>;
-}
-
-function schema<T>(parse: (d: unknown) => T): Schema<T> {
-  return {
-    parse,
-    safeParse(d: unknown) {
-      try {
-        return { success: true, data: parse(d) };
-      } catch (e) {
-        return { success: false, error: e instanceof Error ? e : new Error(String(e)) };
-      }
-    },
-    optional(): Schema<T | undefined> {
-      return schema((d) => (d === undefined ? undefined : parse(d)));
-    },
-    nullable(): Schema<T | null> {
-      return schema((d) => (d === null ? null : parse(d)));
-    },
-  };
-}
-
-function string(): Schema<string> {
-  return schema((d) => {
-    if (typeof d !== "string") throw new Error(`expected string, got ${typeof d}`);
-    return d;
-  });
-}
-
-function number(): Schema<number> {
-  return schema((d) => {
-    if (typeof d !== "number") throw new Error(`expected number, got ${typeof d}`);
-    return d;
-  });
-}
-
-function boolean(): Schema<boolean> {
-  return schema((d) => {
-    if (typeof d !== "boolean") throw new Error(`expected boolean, got ${typeof d}`);
-    return d;
-  });
-}
-
-function enumType<T extends string>(values: readonly [T, ...T[]]): Schema<T> {
-  const set = new Set<string>(values);
-  return schema((d) => {
-    if (typeof d !== "string" || !set.has(d)) {
-      throw new Error(`expected one of [${values.join(", ")}], got ${JSON.stringify(d)}`);
-    }
-    return d as T;
-  });
-}
-
-function array<T>(itemSchema: Schema<T>): Schema<T[]> {
-  return schema((d) => {
-    if (!Array.isArray(d)) throw new Error(`expected array, got ${typeof d}`);
-    return d.map((item, i) => {
-      try {
-        return itemSchema.parse(item);
-      } catch (e) {
-        throw new Error(`[${i}]: ${e instanceof Error ? e.message : e}`);
-      }
-    });
-  });
-}
-
-type ObjectShape = Record<string, Schema<unknown>>;
-type Infer<S> = S extends Schema<infer T> ? T : never;
-type InferShape<S extends ObjectShape> = { [K in keyof S]: Infer<S[K]> };
-
-function object<S extends ObjectShape>(shape: S): Schema<InferShape<S>> {
-  return schema((d) => {
-    if (typeof d !== "object" || d === null || Array.isArray(d)) {
-      throw new Error(`expected object, got ${typeof d}`);
-    }
-    const obj = d as Record<string, unknown>;
-    const result: Record<string, unknown> = {};
-    for (const key of Object.keys(shape)) {
-      const field = shape[key];
-      if (!field) continue;
-      try {
-        result[key] = field.parse(obj[key]);
-      } catch (e) {
-        throw new Error(`${key}: ${e instanceof Error ? e.message : e}`);
-      }
-    }
-    return result as InferShape<S>;
-  });
-}
-
-export type { Infer };
-
-export const v = {
-  string,
-  number,
-  boolean,
-  enum: enumType,
-  array,
-  object,
-};
diff --git a/packages/studio/frontend/src/components/CodeSandbox.tsx b/packages/studio/frontend/src/components/CodeSandbox.tsx
deleted file mode 100644
index ae5a27a9..00000000
--- a/packages/studio/frontend/src/components/CodeSandbox.tsx
+++ /dev/null
@@ -1,607 +0,0 @@
-import { useState, useEffect, useRef, useCallback } from "react";
-import { ArrowLeft, Monitor, Smartphone } from "lucide-react";
-import Editor from "@monaco-editor/react";
-import {
-  listProjectFiles,
-  getFileContent,
-  saveFileContent,
-  type ProjectFile,
-} from "../api/files";
-import {
-  COLLAB_CURSOR_ENABLED,
-  getProjectPresence,
-  heartbeatProjectPresence,
-  type PresenceSession,
-} from "../api/projects";
-import { usePlayerStore } from "../store/playerStore";
-import { useTimelinePlayer } from "../hooks/useTimelinePlayer";
-import { Player } from "./Player";
-import { PlayerControls } from "./PlayerControls";
-import { Timeline } from "./Timeline";
-import { FileTree } from "./FileTree";
-import { FileTabs } from "./FileTabs";
-
-const SESSION_STORAGE_KEY = "hf.browserSessionId";
-const PRESENCE_POLL_MS = 4000;
-
-type CursorPosition = {
-  lineNumber: number;
-  column: number;
-};
-
-type EditorLike = {
-  getPosition: () => CursorPosition | null;
-  onDidChangeCursorPosition: (
-    listener: (event: { position: CursorPosition }) => void
-  ) => { dispose: () => void };
-  deltaDecorations: (
-    oldDecorations: string[],
-    newDecorations: unknown[]
-  ) => string[];
-  getModel: () => {
-    getLineCount: () => number;
-    getLineMaxColumn: (lineNumber: number) => number;
-  } | null;
-};
-
-type MonacoLike = {
-  Range: new (
-    startLineNumber: number,
-    startColumn: number,
-    endLineNumber: number,
-    endColumn: number
-  ) => unknown;
-  editor: {
-    TrackedRangeStickiness: {
-      NeverGrowsWhenTypingAtEdges: number;
-    };
-  };
-};
-
-function getOrCreateBrowserSessionId(): string {
-  if (typeof window === "undefined") return "server-session";
-  const existing = window.sessionStorage.getItem(SESSION_STORAGE_KEY);
-  if (existing) return existing;
-
-  const id =
-    typeof window.crypto?.randomUUID === "function"
-      ? window.crypto.randomUUID()
-      : `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
-  window.sessionStorage.setItem(SESSION_STORAGE_KEY, id);
-  return id;
-}
-
-interface CodeSandboxProps {
-  projectId: string;
-  projectName: string;
-  initialPortrait?: boolean;
-  onExit: () => void;
-}
-
-export function CodeSandbox({
-  projectId,
-  projectName,
-  initialPortrait = true,
-  onExit,
-}: CodeSandboxProps) {
-  const [files, setFiles] = useState<ProjectFile[]>([]);
-  const [openFiles, setOpenFiles] = useState<string[]>([]);
-  const [activeFile, setActiveFile] = useState<string | null>(null);
-  const [fileContents, setFileContents] = useState<Map<string, string>>(
-    new Map()
-  );
-  const [dirtyFiles, setDirtyFiles] = useState<Set<string>>(new Set());
-  const [fileLanguages, setFileLanguages] = useState<Map<string, string>>(
-    new Map()
-  );
-  const [portrait, setPortrait] = useState(initialPortrait);
-  const [showCompiled, setShowCompiled] = useState(false);
-  const [compiledContents, setCompiledContents] = useState<Map<string, string>>(
-    new Map()
-  );
-
-  const { isPlaying, currentTime, duration, timelineReady } = usePlayerStore();
-  const { iframeRef, togglePlay, seek, onIframeLoad } = useTimelinePlayer();
-
-  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const dirtyRef = useRef<Set<string>>(dirtyFiles);
-  const contentsRef = useRef<Map<string, string>>(fileContents);
-  const restoreTimeRef = useRef<number | null>(null);
-  const sessionIdRef = useRef<string>(getOrCreateBrowserSessionId());
-  const remoteCursorRef = useRef<{
-    filePath?: string;
-    line?: number;
-    column?: number;
-  } | null>(null);
-  const activeFileRef = useRef<string | null>(activeFile);
-  const editorRef = useRef<EditorLike | null>(null);
-  const monacoRef = useRef<MonacoLike | null>(null);
-  const cursorListenerRef = useRef<{ dispose: () => void } | null>(null);
-  const decorationIdsRef = useRef<string[]>([]);
-  const [remotePresence, setRemotePresence] = useState<PresenceSession[]>([]);
-
-  // Keep refs in sync
-  dirtyRef.current = dirtyFiles;
-  contentsRef.current = fileContents;
-  activeFileRef.current = activeFile;
-
-  // Load file list on mount
-  useEffect(() => {
-    listProjectFiles(projectId).then((projectFiles) => {
-      setFiles(projectFiles);
-      const langs = new Map<string, string>();
-      for (const f of projectFiles) langs.set(f.filename, f.language);
-      setFileLanguages(langs);
-
-      // Auto-open index.html
-      const indexFile = projectFiles.find((f) => f.filename === "index.html");
-      if (indexFile) {
-        setOpenFiles(["index.html"]);
-        setActiveFile("index.html");
-        loadFileContent("index.html");
-      } else if (projectFiles.length > 0) {
-        const first = projectFiles[0]?.filename;
-        if (!first) return;
-        setOpenFiles([first]);
-        setActiveFile(first);
-        loadFileContent(first);
-      }
-    });
-  }, [projectId]);
-
-  // After a reload, restore playback position once the timeline is ready again
-  useEffect(() => {
-    if (timelineReady && restoreTimeRef.current !== null) {
-      const t = restoreTimeRef.current;
-      restoreTimeRef.current = null;
-      // Small delay to ensure the player is fully initialized
-      setTimeout(() => seek(t), 50);
-    }
-  }, [timelineReady, seek]);
-
-  async function loadFileContent(filename: string) {
-    if (contentsRef.current.has(filename)) return;
-    const data = await getFileContent(projectId, filename);
-    setFileContents((prev) => new Map(prev).set(filename, data.content));
-  }
-
-  async function loadCompiledContent(filename: string) {
-    const data = await getFileContent(projectId, filename, true);
-    setCompiledContents((prev) => new Map(prev).set(filename, data.content));
-  }
-
-  useEffect(() => {
-    if (
-      showCompiled &&
-      activeFile?.endsWith(".html") &&
-      !compiledContents.has(activeFile)
-    ) {
-      loadCompiledContent(activeFile);
-    }
-  }, [showCompiled, activeFile, compiledContents]);
-
-  function handleFileClick(filename: string) {
-    if (!openFiles.includes(filename)) {
-      setOpenFiles((prev) => [...prev, filename]);
-    }
-    setActiveFile(filename);
-    loadFileContent(filename);
-  }
-
-  function handleTabClose(filename: string) {
-    setOpenFiles((prev) => {
-      const next = prev.filter((f) => f !== filename);
-      if (activeFile === filename) {
-        setActiveFile(next.length > 0 ? next[next.length - 1] ?? null : null);
-      }
-      return next;
-    });
-  }
-
-  async function handleNewFile(filename: string) {
-    if (files.some((f) => f.filename === filename)) return;
-    await saveFileContent(projectId, filename, "");
-    const ext = filename.includes(".")
-      ? filename.slice(filename.lastIndexOf("."))
-      : "";
-    const langMap: Record<string, string> = {
-      ".html": "html",
-      ".css": "css",
-      ".js": "javascript",
-      ".jsx": "javascript",
-      ".ts": "typescript",
-      ".tsx": "typescript",
-      ".json": "json",
-      ".svg": "xml",
-      ".txt": "plaintext",
-    };
-    const lang = langMap[ext] || "plaintext";
-    const newFile: ProjectFile = { filename, language: lang, size: 0 };
-    setFiles((prev) => [...prev, newFile]);
-    setFileLanguages((prev) => new Map(prev).set(filename, lang));
-    setFileContents((prev) => new Map(prev).set(filename, ""));
-    setOpenFiles((prev) => [...prev, filename]);
-    setActiveFile(filename);
-  }
-
-  const flushDirtyFiles = useCallback(async () => {
-    const dirty = new Set(dirtyRef.current);
-    if (dirty.size === 0) return;
-
-    const contents = contentsRef.current;
-    const saves = Array.from(dirty).map((f) =>
-      saveFileContent(projectId, f, contents.get(f) ?? "")
-    );
-    await Promise.all(saves);
-
-    setDirtyFiles((prev) => {
-      const next = new Set(prev);
-      for (const f of dirty) next.delete(f);
-      return next;
-    });
-
-    // Invalidate compiled cache for saved HTML files
-    setCompiledContents((prev) => {
-      const next = new Map(prev);
-      for (const f of dirty) {
-        if (f.endsWith(".html")) next.delete(f);
-      }
-      return next;
-    });
-
-    // Reload preview, preserving playback position
-    const iframe = iframeRef.current;
-    if (iframe) {
-      restoreTimeRef.current = usePlayerStore.getState().currentTime;
-      // Reset timelineReady so the restore effect fires on next ready
-      usePlayerStore.getState().setTimelineReady(false);
-      iframe.src = iframe.src;
-    }
-  }, [projectId, iframeRef]);
-
-  function handleEditorChange(value: string | undefined) {
-    if (!activeFile || value === undefined) return;
-
-    setFileContents((prev) => new Map(prev).set(activeFile, value));
-    setDirtyFiles((prev) => new Set(prev).add(activeFile));
-
-    // Debounced save
-    if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
-    saveTimerRef.current = setTimeout(flushDirtyFiles, 800);
-  }
-
-  // Cleanup timer on unmount
-  useEffect(() => {
-    return () => {
-      if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!COLLAB_CURSOR_ENABLED) return;
-    if (!activeFile) {
-      remoteCursorRef.current = null;
-      return;
-    }
-
-    const position = editorRef.current?.getPosition();
-    remoteCursorRef.current = {
-      filePath: activeFile,
-      line: position?.lineNumber ?? 1,
-      column: position?.column ?? 1,
-    };
-  }, [activeFile]);
-
-  useEffect(() => {
-    if (!COLLAB_CURSOR_ENABLED) {
-      setRemotePresence([]);
-      return;
-    }
-
-    let cancelled = false;
-
-    const syncPresence = async () => {
-      try {
-        const cursor = remoteCursorRef.current;
-        await heartbeatProjectPresence(projectId, {
-          sessionId: sessionIdRef.current,
-          filePath: cursor?.filePath ?? activeFileRef.current ?? undefined,
-          line: cursor?.line,
-          column: cursor?.column,
-        });
-
-        const response = await getProjectPresence(projectId);
-        if (cancelled || !response.enabled) return;
-        setRemotePresence(
-          response.sessions.filter(
-            (session) => session.sessionId !== sessionIdRef.current
-          )
-        );
-      } catch {
-        if (!cancelled) {
-          setRemotePresence([]);
-        }
-      }
-    };
-
-    void syncPresence();
-    const intervalId = window.setInterval(() => {
-      void syncPresence();
-    }, PRESENCE_POLL_MS);
-
-    return () => {
-      cancelled = true;
-      window.clearInterval(intervalId);
-      setRemotePresence([]);
-    };
-  }, [projectId]);
-
-  useEffect(() => {
-    const editor = editorRef.current;
-    const monaco = monacoRef.current;
-    if (!editor) return;
-
-    if (!COLLAB_CURSOR_ENABLED || !activeFile || !monaco) {
-      decorationIdsRef.current = editor.deltaDecorations(
-        decorationIdsRef.current,
-        []
-      );
-      return;
-    }
-
-    const model = editor.getModel();
-    if (!model) return;
-
-    const decorations = remotePresence
-      .filter(
-        (session) =>
-          session.filePath === activeFile &&
-          typeof session.line === "number" &&
-          typeof session.column === "number"
-      )
-      .map((session) => {
-        const line = Math.min(
-          Math.max(1, Math.floor(session.line ?? 1)),
-          model.getLineCount()
-        );
-        const maxColumn = model.getLineMaxColumn(line);
-        const column = Math.min(
-          Math.max(1, Math.floor(session.column ?? 1)),
-          maxColumn
-        );
-        const endColumn = Math.min(column + 1, maxColumn);
-
-        return {
-          range: new monaco.Range(
-            line,
-            column,
-            line,
-            Math.max(column, endColumn)
-          ),
-          options: {
-            className: "hf-remote-cursor-blink",
-            stickiness:
-              monaco.editor.TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges,
-            hoverMessage: {
-              value: `Session ${session.sessionId.slice(0, 8)}`,
-            },
-          },
-        };
-      });
-
-    decorationIdsRef.current = editor.deltaDecorations(
-      decorationIdsRef.current,
-      decorations
-    );
-  }, [activeFile, remotePresence]);
-
-  const handleEditorMount = useCallback((editor: unknown, monaco: unknown) => {
-    editorRef.current = editor as EditorLike;
-    monacoRef.current = monaco as MonacoLike;
-
-    cursorListenerRef.current?.dispose();
-    cursorListenerRef.current = editorRef.current.onDidChangeCursorPosition(
-      (event) => {
-        if (!COLLAB_CURSOR_ENABLED || !activeFileRef.current) return;
-        remoteCursorRef.current = {
-          filePath: activeFileRef.current,
-          line: event.position.lineNumber,
-          column: event.position.column,
-        };
-      }
-    );
-  }, []);
-
-  useEffect(() => {
-    return () => {
-      cursorListenerRef.current?.dispose();
-      const editor = editorRef.current;
-      if (editor) {
-        decorationIdsRef.current = editor.deltaDecorations(
-          decorationIdsRef.current,
-          []
-        );
-      }
-    };
-  }, []);
-
-  const isHtmlFile = activeFile?.endsWith(".html") ?? false;
-  const isCompiledView = showCompiled && isHtmlFile;
-  const currentContent = activeFile
-    ? isCompiledView
-      ? compiledContents.get(activeFile)
-      : fileContents.get(activeFile)
-    : undefined;
-  const currentLanguage = activeFile
-    ? fileLanguages.get(activeFile) ?? "plaintext"
-    : "plaintext";
-
-  return (
-    <div className="w-full h-screen flex flex-col bg-white">
-      <style>{`
-        @keyframes hfCursorBlink {
-          0%, 49% { border-left-color: rgba(37, 99, 235, 1); }
-          50%, 100% { border-left-color: rgba(37, 99, 235, 0.2); }
-        }
-        .hf-remote-cursor-blink {
-          border-left: 2px solid rgba(37, 99, 235, 1);
-          background: rgba(37, 99, 235, 0.16);
-          animation: hfCursorBlink 1s step-end infinite;
-        }
-      `}</style>
-      {/* Minimal header */}
-      <div className="flex items-center gap-3 px-4 py-2 bg-white border-b border-neutral-200">
-        <button
-          onClick={onExit}
-          className="text-neutral-400 hover:text-neutral-700 transition-colors p-1 rounded hover:bg-neutral-100"
-        >
-          <ArrowLeft className="w-4 h-4" />
-        </button>
-        <span className="text-neutral-800 text-sm font-medium truncate">
-          {projectName}
-        </span>
-        <button
-          onClick={onExit}
-          className="ml-auto text-xs text-neutral-500 hover:text-neutral-800 px-3 py-1 rounded border border-neutral-300 hover:border-neutral-400 transition-colors"
-        >
-          Exit Edit
-        </button>
-      </div>
-
-      {/* Three-panel layout */}
-      <div className="flex-1 min-h-0 flex">
-        {/* File tree */}
-        <FileTree
-          files={files}
-          activeFile={activeFile}
-          onFileClick={handleFileClick}
-          onNewFile={handleNewFile}
-        />
-
-        {/* Editor area */}
-        <div className="flex-1 min-w-0 flex flex-col">
-          <FileTabs
-            openFiles={openFiles}
-            activeFile={activeFile}
-            dirtyFiles={dirtyFiles}
-            onTabClick={(f) => {
-              setActiveFile(f);
-              loadFileContent(f);
-            }}
-            onTabClose={handleTabClose}
-          />
-          {/* Source/Compiled toggle hidden for now
-          {isHtmlFile && (
-            <div className="flex items-center px-3 py-1 bg-neutral-50 border-b border-neutral-200">
-              <div className="flex items-center bg-neutral-100 rounded-lg p-0.5">
-                <button
-                  onClick={() => setShowCompiled(false)}
-                  className={`px-2.5 py-0.5 text-xs rounded-md transition-colors ${
-                    !showCompiled
-                      ? "bg-white text-neutral-800 shadow-sm"
-                      : "text-neutral-400 hover:text-neutral-600"
-                  }`}
-                >
-                  Source
-                </button>
-                <button
-                  onClick={() => setShowCompiled(true)}
-                  className={`px-2.5 py-0.5 text-xs rounded-md transition-colors ${
-                    showCompiled
-                      ? "bg-white text-neutral-800 shadow-sm"
-                      : "text-neutral-400 hover:text-neutral-600"
-                  }`}
-                >
-                  Compiled
-                </button>
-              </div>
-              {isCompiledView && (
-                <span className="ml-2 text-[10px] text-neutral-400 uppercase tracking-wider">
-                  Read-only
-                </span>
-              )}
-            </div>
-          )}
-          */}
-          <div className="flex-1 min-h-0">
-            {activeFile && currentContent !== undefined ? (
-              <Editor
-                theme="light"
-                language={currentLanguage}
-                value={currentContent}
-                onChange={isCompiledView ? undefined : handleEditorChange}
-                onMount={handleEditorMount}
-                path={isCompiledView ? `compiled:${activeFile}` : activeFile}
-                options={{
-                  minimap: { enabled: false },
-                  wordWrap: "on",
-                  fontSize: 13,
-                  tabSize: 2,
-                  automaticLayout: true,
-                  scrollBeyondLastLine: false,
-                  readOnly: isCompiledView,
-                }}
-              />
-            ) : (
-              <div className="flex items-center justify-center h-full text-neutral-500 text-sm">
-                {activeFile ? "Loading..." : "Select a file to edit"}
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Preview pane with player + controls + timeline */}
-        <div className="w-[45%] flex-shrink-0 border-l border-neutral-200 flex flex-col">
-          <div className="flex items-center px-3 py-1 bg-neutral-50 border-b border-neutral-200">
-            <span className="text-[11px] text-neutral-400 uppercase tracking-wider font-semibold">
-              Preview
-            </span>
-            <div className="ml-auto flex items-center bg-neutral-100 rounded-lg p-0.5">
-              <button
-                onClick={() => setPortrait(false)}
-                className={`p-1 rounded-md transition-colors ${
-                  !portrait
-                    ? "bg-white text-neutral-800 shadow-sm"
-                    : "text-neutral-400 hover:text-neutral-600"
-                }`}
-                title="Landscape (16:9)"
-              >
-                <Monitor className="w-3 h-3" />
-              </button>
-              <button
-                onClick={() => setPortrait(true)}
-                className={`p-1 rounded-md transition-colors ${
-                  portrait
-                    ? "bg-white text-neutral-800 shadow-sm"
-                    : "text-neutral-400 hover:text-neutral-600"
-                }`}
-                title="Portrait (9:16)"
-              >
-                <Smartphone className="w-3 h-3" />
-              </button>
-            </div>
-          </div>
-          <div className="flex-1 min-h-0 flex items-center justify-center p-3 bg-neutral-100">
-            <Player
-              ref={iframeRef}
-              projectId={projectId}
-              onLoad={onIframeLoad}
-              portrait={portrait}
-            />
-          </div>
-          <div className="flex-shrink-0 bg-white">
-            <PlayerControls
-              isPlaying={isPlaying}
-              currentTime={currentTime}
-              duration={duration}
-              timelineReady={timelineReady}
-              onTogglePlay={togglePlay}
-              onSeek={seek}
-            />
-            <Timeline />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/packages/studio/frontend/src/components/FileTabs.tsx b/packages/studio/frontend/src/components/FileTabs.tsx
deleted file mode 100644
index e823997c..00000000
--- a/packages/studio/frontend/src/components/FileTabs.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { X } from "lucide-react";
-
-interface FileTabsProps {
-  openFiles: string[];
-  activeFile: string | null;
-  dirtyFiles: Set<string>;
-  onTabClick: (filename: string) => void;
-  onTabClose: (filename: string) => void;
-}
-
-function getDisplayName(path: string, allPaths: string[]): string {
-  const name = path.includes("/") ? path.slice(path.lastIndexOf("/") + 1) : path;
-  // Check if there are duplicate filenames - if so, show parent folder
-  const duplicates = allPaths.filter((p) => {
-    const n = p.includes("/") ? p.slice(p.lastIndexOf("/") + 1) : p;
-    return n === name;
-  });
-  if (duplicates.length > 1 && path.includes("/")) {
-    const parts = path.split("/");
-    return parts.slice(-2).join("/");
-  }
-  return name;
-}
-
-export function FileTabs({ openFiles, activeFile, dirtyFiles, onTabClick, onTabClose }: FileTabsProps) {
-  return (
-    <div className="flex items-center bg-neutral-100 border-b border-neutral-200 overflow-x-auto">
-      {openFiles.map((filename) => (
-        <div
-          key={filename}
-          onClick={() => onTabClick(filename)}
-          title={filename}
-          className={`flex items-center gap-1.5 px-3 py-1.5 text-sm cursor-pointer border-r border-neutral-200 min-w-0 ${
-            activeFile === filename
-              ? "bg-white text-neutral-800"
-              : "text-neutral-500 hover:text-neutral-700 hover:bg-neutral-50"
-          }`}
-        >
-          <span className="truncate">{getDisplayName(filename, openFiles)}</span>
-          {dirtyFiles.has(filename) && (
-            <span className="w-2 h-2 rounded-full bg-neutral-400 flex-shrink-0" />
-          )}
-          {openFiles.length > 1 && (
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                onTabClose(filename);
-              }}
-              className="ml-1 p-0.5 rounded hover:bg-neutral-200 flex-shrink-0 text-neutral-400 hover:text-neutral-600"
-            >
-              <X className="w-3 h-3" />
-            </button>
-          )}
-        </div>
-      ))}
-    </div>
-  );
-}
diff --git a/packages/studio/frontend/src/components/FileTree.tsx b/packages/studio/frontend/src/components/FileTree.tsx
deleted file mode 100644
index 8dab842b..00000000
--- a/packages/studio/frontend/src/components/FileTree.tsx
+++ /dev/null
@@ -1,214 +0,0 @@
-import { Plus, ChevronRight, ChevronDown, Folder } from "lucide-react";
-import { useState, useMemo } from "react";
-import type { ProjectFile } from "../api/files";
-
-interface FileTreeProps {
-  files: ProjectFile[];
-  activeFile: string | null;
-  onFileClick: (filename: string) => void;
-  onNewFile: (filename: string) => void;
-}
-
-const FILE_COLORS: Record<string, string> = {
-  html: "bg-orange-400",
-  css: "bg-blue-400",
-  javascript: "bg-yellow-400",
-  typescript: "bg-blue-500",
-  json: "bg-green-400",
-  xml: "bg-purple-400",
-  plaintext: "bg-neutral-400",
-};
-
-interface TreeNode {
-  name: string;
-  path: string;
-  isFolder: boolean;
-  language?: string;
-  children: TreeNode[];
-}
-
-function buildTree(files: ProjectFile[]): TreeNode[] {
-  const root: TreeNode[] = [];
-
-  for (const file of files) {
-    const parts = file.filename.split("/");
-    let currentLevel = root;
-
-    for (let i = 0; i < parts.length; i++) {
-      const part = parts[i];
-      if (!part) continue;
-      const isFile = i === parts.length - 1;
-      const path = parts.slice(0, i + 1).join("/");
-
-      let existing = currentLevel.find((n) => n.name === part);
-      if (!existing) {
-        existing = {
-          name: part,
-          path,
-          isFolder: !isFile,
-          language: isFile ? file.language : undefined,
-          children: [],
-        };
-        currentLevel.push(existing);
-      }
-      currentLevel = existing.children;
-    }
-  }
-
-  // Sort: folders first, then files, alphabetically
-  function sortNodes(nodes: TreeNode[]) {
-    nodes.sort((a, b) => {
-      // index.html at root always first
-      if (a.path === "index.html") return -1;
-      if (b.path === "index.html") return 1;
-      if (a.isFolder !== b.isFolder) return a.isFolder ? -1 : 1;
-      return a.name.localeCompare(b.name);
-    });
-    for (const node of nodes) {
-      if (node.children.length > 0) sortNodes(node.children);
-    }
-  }
-  sortNodes(root);
-
-  return root;
-}
-
-interface TreeItemProps {
-  node: TreeNode;
-  depth: number;
-  activeFile: string | null;
-  expandedFolders: Set<string>;
-  onFileClick: (path: string) => void;
-  onToggleFolder: (path: string) => void;
-}
-
-function TreeItem({ node, depth, activeFile, expandedFolders, onFileClick, onToggleFolder }: TreeItemProps) {
-  const isExpanded = expandedFolders.has(node.path);
-  const paddingLeft = 12 + depth * 12;
-
-  if (node.isFolder) {
-    return (
-      <>
-        <button
-          onClick={() => onToggleFolder(node.path)}
-          className="w-full text-left py-1.5 text-sm flex items-center gap-1.5 text-neutral-500 hover:bg-neutral-100 transition-colors"
-          style={{ paddingLeft }}
-        >
-          {isExpanded ? (
-            <ChevronDown className="w-3 h-3 flex-shrink-0" />
-          ) : (
-            <ChevronRight className="w-3 h-3 flex-shrink-0" />
-          )}
-          <Folder className="w-3.5 h-3.5 flex-shrink-0 text-neutral-400" />
-          <span className="truncate">{node.name}</span>
-        </button>
-        {isExpanded &&
-          node.children.map((child) => (
-            <TreeItem
-              key={child.path}
-              node={child}
-              depth={depth + 1}
-              activeFile={activeFile}
-              expandedFolders={expandedFolders}
-              onFileClick={onFileClick}
-              onToggleFolder={onToggleFolder}
-            />
-          ))}
-      </>
-    );
-  }
-
-  return (
-    <button
-      onClick={() => onFileClick(node.path)}
-      className={`w-full text-left py-1.5 text-sm flex items-center gap-2 transition-colors ${
-        activeFile === node.path
-          ? "bg-blue-50 text-blue-700"
-          : "text-neutral-600 hover:bg-neutral-100"
-      }`}
-      style={{ paddingLeft: paddingLeft + 16 }}
-    >
-      <span
-        className={`w-2 h-2 rounded-full flex-shrink-0 ${FILE_COLORS[node.language || ""] || FILE_COLORS.plaintext}`}
-      />
-      <span className="truncate">{node.name}</span>
-    </button>
-  );
-}
-
-export function FileTree({ files, activeFile, onFileClick, onNewFile }: FileTreeProps) {
-  const [isCreating, setIsCreating] = useState(false);
-  const [newFileName, setNewFileName] = useState("");
-  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
-
-  const tree = useMemo(() => buildTree(files), [files]);
-
-  function handleCreate() {
-    const name = newFileName.trim();
-    if (!name) {
-      setIsCreating(false);
-      return;
-    }
-    onNewFile(name);
-    setNewFileName("");
-    setIsCreating(false);
-  }
-
-  function handleToggleFolder(path: string) {
-    setExpandedFolders((prev) => {
-      const next = new Set(prev);
-      if (next.has(path)) {
-        next.delete(path);
-      } else {
-        next.add(path);
-      }
-      return next;
-    });
-  }
-
-  return (
-    <div className="w-52 flex-shrink-0 border-r border-neutral-200 bg-neutral-50 flex flex-col">
-      <div className="px-3 py-2 text-[11px] font-semibold text-neutral-400 uppercase tracking-wider">
-        Files
-      </div>
-      <div className="flex-1 overflow-y-auto">
-        {tree.map((node) => (
-          <TreeItem
-            key={node.path}
-            node={node}
-            depth={0}
-            activeFile={activeFile}
-            expandedFolders={expandedFolders}
-            onFileClick={onFileClick}
-            onToggleFolder={handleToggleFolder}
-          />
-        ))}
-      </div>
-
-      <div className="border-t border-neutral-200 p-2">
-        {isCreating ? (
-          <input
-            autoFocus
-            value={newFileName}
-            onChange={(e) => setNewFileName(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") handleCreate();
-              if (e.key === "Escape") { setIsCreating(false); setNewFileName(""); }
-            }}
-            onBlur={handleCreate}
-            placeholder="path/to/file.ext"
-            className="w-full bg-white border border-neutral-300 rounded px-2 py-1 text-sm text-neutral-800 placeholder-neutral-400 outline-none focus:border-blue-500"
-          />
-        ) : (
-          <button
-            onClick={() => setIsCreating(true)}
-            className="w-full flex items-center gap-1.5 px-2 py-1 text-sm text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 rounded transition-colors"
-          >
-            <Plus className="w-3.5 h-3.5" />
-            New File
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/packages/studio/frontend/src/components/HomePage.tsx b/packages/studio/frontend/src/components/HomePage.tsx
deleted file mode 100644
index c95659c0..00000000
--- a/packages/studio/frontend/src/components/HomePage.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-import { UploadZone } from "./UploadZone";
-import { ProjectList } from "./ProjectList";
-import {
-  listProjects,
-  deleteProject,
-  type ProjectMeta,
-} from "../api/projects";
-
-export function HomePage() {
-  const [projects, setProjects] = useState<ProjectMeta[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  const fetchProjects = useCallback(async () => {
-    try {
-      const data = await listProjects();
-      setProjects(data);
-    } catch (err) {
-      console.error("Failed to load projects:", err);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    fetchProjects();
-  }, [fetchProjects]);
-
-  const handleDelete = async (id: string) => {
-    try {
-      await deleteProject(id);
-      setProjects((prev) => prev.filter((p) => p.id !== id));
-    } catch (err) {
-      console.error("Failed to delete project:", err);
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-neutral-50">
-      <div className="max-w-5xl mx-auto px-6 py-12">
-        <h1 className="text-2xl font-bold text-neutral-900 mb-1">
-          Sandbox Studio
-        </h1>
-        <p className="text-neutral-500 text-sm mb-8">
-          Upload a GSAP project ZIP and play it back with video controls.
-        </p>
-
-        <div className="mb-10">
-          <UploadZone
-            onUploadComplete={(projectId) => {
-              window.location.hash = `#/project/${projectId}`;
-            }}
-          />
-        </div>
-
-        <h2 className="text-sm font-semibold text-neutral-500 uppercase tracking-wider mb-4">
-          Projects
-        </h2>
-        {loading ? (
-          <p className="text-neutral-400 text-center py-8">Loading...</p>
-        ) : (
-          <ProjectList projects={projects} onDelete={handleDelete} />
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/packages/studio/frontend/src/components/HtmlPreview.tsx b/packages/studio/frontend/src/components/HtmlPreview.tsx
deleted file mode 100644
index 7973f2f8..00000000
--- a/packages/studio/frontend/src/components/HtmlPreview.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { useState, useEffect, useMemo } from "react";
-import { Copy, Check } from "lucide-react";
-
-interface HtmlPreviewProps {
-  projectId: string;
-  version: number;
-}
-
-function formatElement(el: Element): string {
-  const tag = el.tagName.toLowerCase();
-  const attrs: string[] = [];
-
-  for (const attr of el.attributes) {
-    attrs.push(`${attr.name}="${attr.value}"`);
-  }
-
-  if (attrs.length === 0) return `<${tag} />`;
-
-  // One attribute per line, indented
-  return `<${tag}\n${attrs.map((a) => `  ${a}`).join("\n")}\n/>`;
-}
-
-function extractTimelineElements(html: string): string {
-  const doc = new DOMParser().parseFromString(html, "text/html");
-  const els = doc.querySelectorAll("[data-start]");
-  if (els.length === 0) return "<!-- No elements with data-start found -->";
-
-  return Array.from(els).map(formatElement).join("\n\n");
-}
-
-export function HtmlPreview({ projectId, version }: HtmlPreviewProps) {
-  const [rawHtml, setRawHtml] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [copied, setCopied] = useState(false);
-
-  useEffect(() => {
-    let cancelled = false;
-    setLoading(true);
-    fetch(`/api/projects/${projectId}/preview-raw`)
-      .then((res) => {
-        if (!res.ok) throw new Error("Failed to fetch");
-        return res.text();
-      })
-      .then((text) => {
-        if (!cancelled) setRawHtml(text);
-      })
-      .catch(() => {
-        if (!cancelled) setRawHtml(null);
-      })
-      .finally(() => {
-        if (!cancelled) setLoading(false);
-      });
-    return () => { cancelled = true; };
-  }, [projectId, version]);
-
-  const filtered = useMemo(
-    () => (rawHtml ? extractTimelineElements(rawHtml) : null),
-    [rawHtml]
-  );
-
-  const handleCopy = async () => {
-    if (!filtered) return;
-    await navigator.clipboard.writeText(filtered);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  return (
-    <div className="flex-1 flex flex-col min-w-0 border-l border-neutral-200/80 bg-neutral-900">
-      {/* Header */}
-      <div className="flex items-center justify-between px-3 py-1.5 border-b border-neutral-700/50">
-        <span className="text-neutral-400 text-[10px] font-medium tracking-wide uppercase">
-          Timeline Elements
-        </span>
-        <button
-          onClick={handleCopy}
-          className="p-1 rounded text-neutral-500 hover:text-neutral-300 hover:bg-neutral-700/50 transition-colors"
-          title="Copy HTML"
-        >
-          {copied ? (
-            <Check className="w-3 h-3 text-green-400" />
-          ) : (
-            <Copy className="w-3 h-3" />
-          )}
-        </button>
-      </div>
-
-      {/* Content */}
-      <div className="flex-1 overflow-auto p-3">
-        {loading ? (
-          <div className="flex items-center justify-center h-full">
-            <div className="text-neutral-500 text-xs">Loading...</div>
-          </div>
-        ) : (
-          <pre className="text-[11px] leading-relaxed font-mono text-neutral-300 whitespace-pre-wrap break-words">
-            {filtered ?? "<!-- Failed to load HTML -->"}
-          </pre>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/packages/studio/frontend/src/components/Player.tsx b/packages/studio/frontend/src/components/Player.tsx
deleted file mode 100644
index a9b21aa3..00000000
--- a/packages/studio/frontend/src/components/Player.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { forwardRef, useRef, useState, useEffect, useCallback } from "react";
-
-const NATIVE_W = 1920;
-const NATIVE_H = 1080;
-
-interface PlayerProps {
-  projectId: string;
-  onLoad: () => void;
-  portrait?: boolean;
-}
-
-export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
-  ({ projectId, onLoad, portrait }, ref) => {
-    const containerRef = useRef<HTMLDivElement>(null);
-    const [scale, setScale] = useState(1);
-
-    const w = portrait ? NATIVE_H : NATIVE_W;
-    const h = portrait ? NATIVE_W : NATIVE_H;
-
-    const updateScale = useCallback(() => {
-      const el = containerRef.current;
-      if (!el) return;
-      const rect = el.getBoundingClientRect();
-      setScale(Math.min(rect.width / w, rect.height / h));
-    }, [w, h]);
-
-    useEffect(() => {
-      updateScale();
-      const ro = new ResizeObserver(updateScale);
-      if (containerRef.current) ro.observe(containerRef.current);
-      return () => ro.disconnect();
-    }, [updateScale]);
-
-    return (
-      <div
-        ref={containerRef}
-        className="max-w-full max-h-full overflow-hidden shadow-sm border border-neutral-200/60 bg-neutral-900 flex items-center justify-center"
-        style={{ aspectRatio: `${w}/${h}`, height: "100%" }}
-      >
-        <iframe
-          ref={ref}
-          src={`/api/projects/${projectId}/serve/index.html?parity=1`}
-          onLoad={onLoad}
-          sandbox="allow-scripts allow-same-origin"
-          title="Project Preview"
-          style={{
-            width: w,
-            height: h,
-            border: "none",
-            transform: `scale(${scale})`,
-            transformOrigin: "center center",
-            flexShrink: 0,
-          }}
-        />
-      </div>
-    );
-  }
-);
-
-Player.displayName = "Player";
diff --git a/packages/studio/frontend/src/components/PlayerControls.tsx b/packages/studio/frontend/src/components/PlayerControls.tsx
deleted file mode 100644
index 02e7abc4..00000000
--- a/packages/studio/frontend/src/components/PlayerControls.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { useRef, useCallback } from "react";
-import { formatTime } from "../utils/time";
-
-interface PlayerControlsProps {
-  isPlaying: boolean;
-  currentTime: number;
-  duration: number;
-  timelineReady: boolean;
-  onTogglePlay: () => void;
-  onSeek: (time: number) => void;
-}
-
-export function PlayerControls({
-  isPlaying,
-  currentTime,
-  duration,
-  timelineReady,
-  onTogglePlay,
-  onSeek,
-}: PlayerControlsProps) {
-  const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
-  const seekBarRef = useRef<HTMLDivElement>(null);
-  const isDraggingRef = useRef(false);
-
-  const seekFromClientX = useCallback(
-    (clientX: number) => {
-      const bar = seekBarRef.current;
-      if (!bar || duration <= 0) return;
-      const rect = bar.getBoundingClientRect();
-      const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
-      onSeek(percent * duration);
-    },
-    [duration, onSeek],
-  );
-
-  const handleMouseDown = useCallback(
-    (e: React.MouseEvent) => {
-      e.preventDefault();
-      isDraggingRef.current = true;
-      seekFromClientX(e.clientX);
-
-      const onMouseMove = (me: MouseEvent) => {
-        if (isDraggingRef.current) seekFromClientX(me.clientX);
-      };
-      const onMouseUp = () => {
-        isDraggingRef.current = false;
-        window.removeEventListener("mousemove", onMouseMove);
-        window.removeEventListener("mouseup", onMouseUp);
-      };
-
-      window.addEventListener("mousemove", onMouseMove);
-      window.addEventListener("mouseup", onMouseUp);
-    },
-    [seekFromClientX],
-  );
-
-  return (
-    <div className="px-4 pt-3 pb-2 flex items-center gap-3">
-      {/* Play/Pause */}
-      <button
-        onClick={onTogglePlay}
-        disabled={!timelineReady}
-        className={`w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 ${
-          !timelineReady
-            ? "text-neutral-300 cursor-not-allowed"
-            : "text-neutral-600 hover:text-neutral-900 hover:bg-neutral-200/60"
-        }`}
-      >
-        {isPlaying ? (
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-            <rect x="6" y="4" width="4" height="16" rx="1" />
-            <rect x="14" y="4" width="4" height="16" rx="1" />
-          </svg>
-        ) : (
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M8 5v14l11-7z" />
-          </svg>
-        )}
-      </button>
-
-      {/* Time */}
-      <span className="text-neutral-400 font-mono text-[11px] tabular-nums flex-shrink-0 min-w-[90px]">
-        {formatTime(currentTime)}
-        <span className="text-neutral-300 mx-1">/</span>
-        {formatTime(duration)}
-      </span>
-
-      {/* Seek bar */}
-      <div
-        ref={seekBarRef}
-        className="flex-1 h-5 flex items-center cursor-pointer group"
-        onMouseDown={handleMouseDown}
-      >
-        <div className="w-full h-1 bg-neutral-200 rounded-full relative">
-          <div
-            className="absolute inset-y-0 left-0 bg-neutral-800 rounded-full transition-[width] duration-75"
-            style={{ width: `${progress}%` }}
-          />
-          <div
-            className="absolute top-1/2 -translate-y-1/2 w-2.5 h-2.5 bg-neutral-800 rounded-full shadow-sm opacity-0 group-hover:opacity-100 transition-opacity"
-            style={{ left: `calc(${progress}% - 5px)` }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/packages/studio/frontend/src/components/ProjectList.tsx b/packages/studio/frontend/src/components/ProjectList.tsx
deleted file mode 100644
index 1dee5082..00000000
--- a/packages/studio/frontend/src/components/ProjectList.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Trash2, Play } from "lucide-react";
-import type { ProjectMeta } from "../api/projects";
-
-interface ProjectListProps {
-  projects: ProjectMeta[];
-  onDelete: (id: string) => void;
-}
-
-export function ProjectList({ projects, onDelete }: ProjectListProps) {
-  if (projects.length === 0) {
-    return (
-      <p className="text-neutral-400 text-center py-8">
-        No projects yet. Upload a ZIP to get started.
-      </p>
-    );
-  }
-
-  return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-      {projects.map((project) => (
-        <div
-          key={project.id}
-          className="bg-white border border-neutral-200 rounded-xl overflow-hidden group hover:shadow-md transition-shadow"
-        >
-          {/* Thumbnail area */}
-          <a
-            href={`#/project/${project.id}`}
-            className="block aspect-video bg-neutral-900 relative no-underline"
-          >
-            <div className="absolute inset-0 flex items-center justify-center">
-              <div className="w-12 h-12 rounded-full bg-black/60 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
-                <Play className="w-5 h-5 text-white ml-0.5" fill="white" />
-              </div>
-            </div>
-          </a>
-          {/* Info */}
-          <div className="p-3 flex items-start gap-2">
-            <a
-              href={`#/project/${project.id}`}
-              className="flex-1 no-underline min-w-0"
-            >
-              <h3 className="text-neutral-900 text-sm font-medium truncate">
-                {project.name}
-              </h3>
-              <p className="text-neutral-400 text-xs mt-0.5">
-                {new Date(project.createdAt).toLocaleDateString(undefined, {
-                  month: "short",
-                  day: "numeric",
-                  year: "numeric",
-                })}
-              </p>
-            </a>
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                onDelete(project.id);
-              }}
-              className="text-neutral-300 hover:text-red-500 transition-colors p-1 flex-shrink-0"
-              title="Delete project"
-            >
-              <Trash2 className="w-4 h-4" />
-            </button>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
diff --git a/packages/studio/frontend/src/components/ProjectPage.tsx b/packages/studio/frontend/src/components/ProjectPage.tsx
deleted file mode 100644
index 0783d5a0..00000000
--- a/packages/studio/frontend/src/components/ProjectPage.tsx
+++ /dev/null
@@ -1,385 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from "react";
-import {
-  ArrowLeft,
-  Monitor,
-  Smartphone,
-  Code,
-  FileCode,
-  Undo2,
-  Redo2,
-  Download,
-  Loader2,
-  Check,
-  AlertCircle,
-} from "lucide-react";
-import {
-  getProject,
-  updateElementStart,
-  type ProjectMeta,
-} from "../api/projects";
-import { usePlayerStore } from "../store/playerStore";
-import { useTimelinePlayer } from "../hooks/useTimelinePlayer";
-import { useUndoRedo } from "../hooks/useUndoRedo";
-import { Player } from "./Player";
-import { PlayerControls } from "./PlayerControls";
-import { Timeline } from "./Timeline";
-import { CodeSandbox } from "./CodeSandbox";
-import { HtmlPreview } from "./HtmlPreview";
-import { useRender } from "../hooks/useRender";
-
-interface ProjectPageProps {
-  projectId: string;
-}
-
-export function ProjectPage({ projectId }: ProjectPageProps) {
-  const [project, setProject] = useState<ProjectMeta | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [portrait, setPortrait] = useState(true);
-  const [isEditMode, setIsEditMode] = useState(false);
-  const [showHtmlPreview, setShowHtmlPreview] = useState(false);
-  const [htmlVersion, setHtmlVersion] = useState(0);
-
-  const {
-    isPlaying,
-    currentTime,
-    duration,
-    timelineReady,
-    updateElementStart: optimisticUpdateStart,
-  } = usePlayerStore();
-  const { iframeRef, togglePlay, seek, onIframeLoad, refreshPlayer } =
-    useTimelinePlayer();
-  const { pushUndo, popUndo, popRedo, canUndo, canRedo } = useUndoRedo();
-  const {
-    state: renderState,
-    progress: renderProgress,
-    error: renderError,
-    start: startRender,
-  } = useRender(projectId);
-  const [showRenderPopup, setShowRenderPopup] = useState(false);
-  const [debugMode, setDebugMode] = useState(true);
-  const [sequentialMode, setSequentialMode] = useState(false);
-  const renderPopupRef = useRef<HTMLDivElement>(null);
-
-  const applyStart = useCallback(
-    async (elementId: string, start: number) => {
-      optimisticUpdateStart(elementId, start);
-      try {
-        await updateElementStart(projectId, elementId, start);
-        refreshPlayer();
-        setHtmlVersion((v) => v + 1);
-      } catch (err) {
-        console.error("[MoveClip] Failed to update element:", err);
-      }
-    },
-    [projectId, refreshPlayer, optimisticUpdateStart]
-  );
-
-  const handleMoveElement = useCallback(
-    async (elementId: string, newStart: number) => {
-      const el = usePlayerStore
-        .getState()
-        .elements.find((e) => e.id === elementId);
-      const oldStart = el?.start ?? 0;
-      pushUndo({ elementId, oldStart, newStart });
-      applyStart(elementId, newStart);
-    },
-    [pushUndo, applyStart]
-  );
-
-  const handleUndo = useCallback(() => {
-    const entry = popUndo();
-    if (entry) applyStart(entry.elementId, entry.oldStart);
-  }, [popUndo, applyStart]);
-
-  const handleRedo = useCallback(() => {
-    const entry = popRedo();
-    if (entry) applyStart(entry.elementId, entry.newStart);
-  }, [popRedo, applyStart]);
-
-  useEffect(() => {
-    const onKeyDown = (e: KeyboardEvent) => {
-      const mod = e.metaKey || e.ctrlKey;
-      if (mod && e.key === "z" && !e.shiftKey) {
-        e.preventDefault();
-        handleUndo();
-      } else if (
-        (mod && e.key === "z" && e.shiftKey) ||
-        (mod && e.key === "y")
-      ) {
-        e.preventDefault();
-        handleRedo();
-      }
-    };
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [handleUndo, handleRedo]);
-
-  useEffect(() => {
-    getProject(projectId)
-      .then((p) => {
-        setProject(p);
-        // Auto-detect portrait/landscape from composition dimensions
-        if (p.width && p.height) {
-          setPortrait(p.height > p.width);
-        }
-      })
-      .catch(() => setError("Project not found"));
-  }, [projectId]);
-
-  useEffect(() => {
-    if (!showRenderPopup) return;
-    const handleClickOutside = (e: MouseEvent) => {
-      if (
-        renderPopupRef.current &&
-        !renderPopupRef.current.contains(e.target as Node)
-      ) {
-        setShowRenderPopup(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [showRenderPopup]);
-
-  if (error) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-neutral-50">
-        <div className="text-center">
-          <p className="text-red-500 mb-4">{error}</p>
-          <a href="#/" className="text-blue-600 hover:underline text-sm">
-            Back to Home
-          </a>
-        </div>
-      </div>
-    );
-  }
-
-  if (isEditMode) {
-    return (
-      <CodeSandbox
-        projectId={projectId}
-        projectName={project?.name ?? "Untitled"}
-        initialPortrait={portrait}
-        onExit={() => setIsEditMode(false)}
-      />
-    );
-  }
-
-  return (
-    <div className="w-full h-screen flex flex-col bg-neutral-50">
-      {/* Header */}
-      <div className="flex items-center gap-3 px-5 py-2.5 bg-white border-b border-neutral-200/80">
-        <a
-          href="#/"
-          className="text-neutral-400 hover:text-neutral-700 transition-colors p-1.5 rounded-lg hover:bg-neutral-100"
-        >
-          <ArrowLeft className="w-4 h-4" />
-        </a>
-        <h1 className="text-neutral-800 font-semibold text-sm truncate">
-          {project?.name ?? "Loading..."}
-        </h1>
-
-        <div className="ml-auto flex items-center gap-2">
-          {!timelineReady && project && (
-            <div className="flex items-center gap-2 mr-2">
-              <div className="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse" />
-              <span className="text-neutral-400 text-xs">Initializing...</span>
-            </div>
-          )}
-
-          {/* Undo / Redo */}
-          <button
-            onClick={handleUndo}
-            disabled={!canUndo}
-            className="p-1.5 rounded-md transition-colors text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 disabled:opacity-30 disabled:pointer-events-none"
-            title="Undo (⌘Z)"
-          >
-            <Undo2 className="w-4 h-4" />
-          </button>
-          <button
-            onClick={handleRedo}
-            disabled={!canRedo}
-            className="p-1.5 rounded-md transition-colors text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 disabled:opacity-30 disabled:pointer-events-none"
-            title="Redo (⌘⇧Z)"
-          >
-            <Redo2 className="w-4 h-4" />
-          </button>
-
-          {/* HTML preview toggle - hidden for now
-          <button
-            onClick={() => setShowHtmlPreview((v) => !v)}
-            className={`p-1.5 rounded-md transition-colors ${
-              showHtmlPreview
-                ? "bg-neutral-200 text-neutral-800"
-                : "text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100"
-            }`}
-            title="Preview HTML"
-          >
-            <FileCode className="w-4 h-4" />
-          </button>
-          */}
-
-          {/* Code editor toggle */}
-          <button
-            onClick={() => setIsEditMode(true)}
-            className="p-1.5 rounded-md text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors"
-            title="Edit Code"
-          >
-            <Code className="w-4 h-4" />
-          </button>
-
-          {/* Orientation toggle */}
-          <div className="flex items-center bg-neutral-100 rounded-lg p-0.5">
-            <button
-              onClick={() => setPortrait(false)}
-              className={`p-1.5 rounded-md transition-colors ${
-                !portrait
-                  ? "bg-white text-neutral-800 shadow-sm"
-                  : "text-neutral-400 hover:text-neutral-600"
-              }`}
-              title="Landscape (16:9)"
-            >
-              <Monitor className="w-3.5 h-3.5" />
-            </button>
-            <button
-              onClick={() => setPortrait(true)}
-              className={`p-1.5 rounded-md transition-colors ${
-                portrait
-                  ? "bg-white text-neutral-800 shadow-sm"
-                  : "text-neutral-400 hover:text-neutral-600"
-              }`}
-              title="Portrait (9:16)"
-            >
-              <Smartphone className="w-3.5 h-3.5" />
-            </button>
-          </div>
-
-          {/* Render / Download button */}
-          <div className="relative" ref={renderPopupRef}>
-            <button
-              onClick={() => {
-                if (renderState === "rendering") return;
-                setShowRenderPopup((v) => !v);
-              }}
-              disabled={renderState === "rendering"}
-              className={`p-1.5 rounded-md transition-colors flex items-center gap-1.5 ${
-                renderState === "error"
-                  ? "text-red-500 hover:text-red-700 hover:bg-red-50"
-                  : renderState === "complete"
-                  ? "text-green-600 hover:bg-green-50"
-                  : renderState === "rendering"
-                  ? "text-blue-500 bg-blue-50 cursor-wait"
-                  : "text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100"
-              }`}
-              title={
-                renderState === "rendering"
-                  ? `Rendering... ${Math.round(renderProgress)}%`
-                  : renderState === "error"
-                  ? renderError || "Render failed"
-                  : renderState === "complete"
-                  ? "Render complete!"
-                  : "Download as MP4"
-              }
-            >
-              {renderState === "rendering" ? (
-                <>
-                  <Loader2 className="w-4 h-4 animate-spin" />
-                  <span className="text-xs font-medium">
-                    {Math.round(renderProgress)}%
-                  </span>
-                </>
-              ) : renderState === "complete" ? (
-                <Check className="w-4 h-4" />
-              ) : renderState === "error" ? (
-                <AlertCircle className="w-4 h-4" />
-              ) : (
-                <Download className="w-4 h-4" />
-              )}
-            </button>
-
-            {showRenderPopup && renderState !== "rendering" && (
-              <div className="absolute right-0 top-full mt-1.5 w-56 bg-white rounded-lg shadow-lg border border-neutral-200 p-3 z-50">
-                <div className="text-xs font-semibold text-neutral-700 mb-2.5">
-                  Render Settings
-                </div>
-
-                <label className="flex items-center gap-2 cursor-pointer mb-3">
-                  <input
-                    type="checkbox"
-                    checked={debugMode}
-                    onChange={(e) => setDebugMode(e.target.checked)}
-                    className="rounded border-neutral-300 text-blue-600 focus:ring-blue-500"
-                  />
-                  <div>
-                    <span className="text-xs text-neutral-700">Debug Mode</span>
-                    <p className="text-[10px] text-neutral-400 leading-tight mt-0.5">
-                      Preserve work folder, verbose logs
-                    </p>
-                  </div>
-                </label>
-
-                <label className="flex items-center gap-2 cursor-pointer mb-3">
-                  <input
-                    type="checkbox"
-                    checked={sequentialMode}
-                    onChange={(e) => setSequentialMode(e.target.checked)}
-                    className="rounded border-neutral-300 text-blue-600 focus:ring-blue-500"
-                  />
-                  <div>
-                    <span className="text-xs text-neutral-700">
-                      Sequential rendering
-                    </span>
-                    <p className="text-[10px] text-neutral-400 leading-tight mt-0.5">
-                      Use single worker (slower, less memory)
-                    </p>
-                  </div>
-                </label>
-
-                <button
-                  onClick={() => {
-                    setShowRenderPopup(false);
-                    startRender({
-                      debug: debugMode,
-                      sequential: sequentialMode,
-                    });
-                  }}
-                  className="w-full flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-neutral-800 hover:bg-neutral-700 rounded-md transition-colors"
-                >
-                  <Download className="w-3 h-3" />
-                  Render MP4
-                </button>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Player area */}
-      <div className="flex-1 min-h-0 flex">
-        <div className="flex-1 flex items-center justify-center p-4 pb-0">
-          <Player
-            ref={iframeRef}
-            projectId={projectId}
-            onLoad={onIframeLoad}
-            portrait={portrait}
-          />
-        </div>
-        {showHtmlPreview && (
-          <HtmlPreview projectId={projectId} version={htmlVersion} />
-        )}
-      </div>
-
-      {/* Controls + Timeline stacked at bottom */}
-      <div className="flex-shrink-0">
-        <PlayerControls
-          isPlaying={isPlaying}
-          currentTime={currentTime}
-          duration={duration}
-          timelineReady={timelineReady}
-          onTogglePlay={togglePlay}
-          onSeek={seek}
-        />
-        <Timeline onMoveElement={handleMoveElement} />
-      </div>
-    </div>
-  );
-}
diff --git a/packages/studio/frontend/src/components/PropertiesPanel.tsx b/packages/studio/frontend/src/components/PropertiesPanel.tsx
deleted file mode 100644
index 33345f23..00000000
--- a/packages/studio/frontend/src/components/PropertiesPanel.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { X } from "lucide-react";
-import type { TimelineElement } from "../store/playerStore";
-
-const TAG_COLORS: Record<string, { bg: string; text: string }> = {
-  video: { bg: "bg-blue-100", text: "text-blue-700" },
-  audio: { bg: "bg-emerald-100", text: "text-emerald-700" },
-  img: { bg: "bg-violet-100", text: "text-violet-700" },
-  div: { bg: "bg-amber-100", text: "text-amber-700" },
-};
-const DEFAULT_COLOR = { bg: "bg-neutral-100", text: "text-neutral-600" };
-
-function formatTime(seconds: number): string {
-  const m = Math.floor(seconds / 60);
-  const s = (seconds % 60).toFixed(1);
-  return `${m}:${s.padStart(4, "0")}`;
-}
-
-interface PropertiesPanelProps {
-  element: TimelineElement;
-  projectId: string;
-  onClose: () => void;
-}
-
-export function PropertiesPanel({ element, projectId, onClose }: PropertiesPanelProps) {
-  const color = TAG_COLORS[element.tag] ?? DEFAULT_COLOR;
-  const hasMedia = element.src && (element.tag === "video" || element.tag === "audio" || element.tag === "img");
-  const mediaSrc = element.src ? `/api/projects/${projectId}/serve/${element.src}` : null;
-
-  return (
-    <div className="w-72 flex-shrink-0 border-l border-neutral-200/80 bg-white flex flex-col overflow-hidden">
-      {/* Header */}
-      <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-100">
-        <h3 className="text-sm font-semibold text-neutral-800 truncate">
-          {element.id || element.tag}
-        </h3>
-        <button
-          onClick={onClose}
-          className="text-neutral-400 hover:text-neutral-600 transition-colors p-1 rounded hover:bg-neutral-100"
-        >
-          <X className="w-4 h-4" />
-        </button>
-      </div>
-
-      {/* Scrollable content */}
-      <div className="flex-1 overflow-y-auto">
-        {/* Media preview */}
-        {hasMedia && mediaSrc && (
-          <div className="px-4 py-3 border-b border-neutral-100">
-            {element.tag === "video" && (
-              <video
-                src={mediaSrc}
-                controls
-                className="w-full rounded bg-black"
-                preload="metadata"
-              />
-            )}
-            {element.tag === "audio" && (
-              <audio
-                src={mediaSrc}
-                controls
-                className="w-full"
-                preload="metadata"
-              />
-            )}
-            {element.tag === "img" && (
-              <img
-                src={mediaSrc}
-                alt={element.id}
-                className="w-full rounded object-contain bg-neutral-50 max-h-40"
-              />
-            )}
-          </div>
-        )}
-
-        {/* Properties list */}
-        <div className="px-4 py-3 space-y-2.5">
-          <Row label="Type">
-            <span className={`inline-block px-1.5 py-0.5 rounded text-[11px] font-medium ${color.bg} ${color.text}`}>
-              {element.tag}
-            </span>
-          </Row>
-          <Row label="ID">
-            <span className="text-sm text-neutral-800 font-mono">{element.id}</span>
-          </Row>
-          <Row label="Start">
-            <span className="text-sm text-neutral-800 font-mono">{formatTime(element.start)}</span>
-          </Row>
-          <Row label="Duration">
-            <span className="text-sm text-neutral-800 font-mono">{formatTime(element.duration)}</span>
-          </Row>
-          <Row label="End">
-            <span className="text-sm text-neutral-800 font-mono">{formatTime(element.start + element.duration)}</span>
-          </Row>
-          <Row label="Track">
-            <span className="text-sm text-neutral-800">{element.track}</span>
-          </Row>
-          {element.volume != null && (
-            <Row label="Volume">
-              <span className="text-sm text-neutral-800">{Math.round(element.volume * 100)}%</span>
-            </Row>
-          )}
-          {element.mediaStart != null && (
-            <Row label="Playback offset">
-              <span className="text-sm text-neutral-800 font-mono">{formatTime(element.mediaStart)}</span>
-            </Row>
-          )}
-          {element.src && (
-            <Row label="Source">
-              <span className="text-sm text-neutral-800 font-mono truncate block max-w-[160px]" title={element.src}>
-                {element.src}
-              </span>
-            </Row>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function Row({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <div className="flex items-start justify-between gap-2">
-      <span className="text-xs text-neutral-500 flex-shrink-0 pt-0.5">{label}</span>
-      {children}
-    </div>
-  );
-}
diff --git a/packages/studio/frontend/src/components/Timeline.tsx b/packages/studio/frontend/src/components/Timeline.tsx
deleted file mode 100644
index dce1632a..00000000
--- a/packages/studio/frontend/src/components/Timeline.tsx
+++ /dev/null
@@ -1,281 +0,0 @@
-import { useMemo, useRef, useState, useCallback, useEffect } from "react";
-import { usePlayerStore } from "../store/playerStore";
-
-const GUTTER = 36;
-
-const TAG_STYLES: Record<string, { bg: string; border: string; text: string }> =
-  {
-    video: {
-      bg: "bg-blue-100",
-      border: "border-blue-300/60",
-      text: "text-blue-700",
-    },
-    audio: {
-      bg: "bg-emerald-100",
-      border: "border-emerald-300/60",
-      text: "text-emerald-700",
-    },
-    img: {
-      bg: "bg-violet-100",
-      border: "border-violet-300/60",
-      text: "text-violet-700",
-    },
-    div: {
-      bg: "bg-amber-100",
-      border: "border-amber-300/60",
-      text: "text-amber-700",
-    },
-  };
-const DEFAULT_STYLE = {
-  bg: "bg-neutral-100",
-  border: "border-neutral-300/60",
-  text: "text-neutral-600",
-};
-
-function getStyle(tag: string) {
-  return TAG_STYLES[tag] ?? DEFAULT_STYLE;
-}
-
-function generateTicks(duration: number): number[] {
-  if (duration <= 0) return [];
-  const intervals = [0.5, 1, 2, 5, 10, 15, 30, 60];
-  const target = duration / 8;
-  const interval = intervals.find((i) => i >= target) ?? 60;
-  const ticks: number[] = [];
-  for (let t = 0; t <= duration; t += interval) {
-    ticks.push(t);
-  }
-  return ticks;
-}
-
-function formatTick(seconds: number): string {
-  const m = Math.floor(seconds / 60);
-  const s = Math.floor(seconds % 60);
-  return `${m}:${s.toString().padStart(2, "0")}`;
-}
-
-interface DragState {
-  elementId: string;
-  originalStart: number;
-  startX: number;
-  trackWidth: number;
-}
-
-interface TimelineProps {
-  onMoveElement?: (elementId: string, newStart: number) => void;
-}
-
-export function Timeline({ onMoveElement }: TimelineProps) {
-  const {
-    elements,
-    currentTime,
-    duration,
-    timelineReady,
-    selectedElementId,
-    setSelectedElementId,
-  } = usePlayerStore();
-
-  const dragRef = useRef<DragState | null>(null);
-  const [dragPreview, setDragPreview] = useState<{
-    elementId: string;
-    newStart: number;
-  } | null>(null);
-
-  const tracks = useMemo(() => {
-    const map = new Map<number, typeof elements>();
-    for (const el of elements) {
-      const list = map.get(el.track) ?? [];
-      list.push(el);
-      map.set(el.track, list);
-    }
-    return Array.from(map.entries()).sort(([a], [b]) => a - b);
-  }, [elements]);
-
-  const ticks = useMemo(() => generateTicks(duration), [duration]);
-
-  const handleMouseDown = useCallback(
-    (e: React.MouseEvent, elementId: string, originalStart: number) => {
-      e.stopPropagation();
-      e.preventDefault();
-
-      const trackContentEl = (e.currentTarget as HTMLElement).parentElement;
-      if (!trackContentEl) return;
-
-      dragRef.current = {
-        elementId,
-        originalStart,
-        startX: e.clientX,
-        trackWidth: trackContentEl.getBoundingClientRect().width,
-      };
-      setDragPreview({ elementId, newStart: originalStart });
-      setSelectedElementId(elementId);
-    },
-    [setSelectedElementId]
-  );
-
-  useEffect(() => {
-    const handleMouseMove = (e: MouseEvent) => {
-      const drag = dragRef.current;
-      if (!drag) return;
-
-      const deltaX = e.clientX - drag.startX;
-      const deltaTime = (deltaX / drag.trackWidth) * duration;
-      const newStart = Math.max(0, drag.originalStart + deltaTime);
-      setDragPreview({ elementId: drag.elementId, newStart });
-    };
-
-    const handleMouseUp = () => {
-      const drag = dragRef.current;
-      const preview = dragPreview;
-      if (!drag || !preview) {
-        dragRef.current = null;
-        setDragPreview(null);
-        return;
-      }
-
-      const newStart = Math.round(preview.newStart * 1000) / 1000;
-      dragRef.current = null;
-      setDragPreview(null);
-
-      if (Math.abs(newStart - drag.originalStart) > 0.01 && onMoveElement) {
-        onMoveElement(drag.elementId, newStart);
-      }
-    };
-
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mouseup", handleMouseUp);
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [duration, dragPreview, onMoveElement]);
-
-  if (!timelineReady || elements.length === 0) return null;
-
-  const playheadPct = duration > 0 ? (currentTime / duration) * 100 : 0;
-  const trackH = 32;
-  const rulerH = 22;
-
-  return (
-    <div className="border-t border-neutral-200/80 bg-white select-none overflow-x-hidden overflow-y-auto max-h-[200px]">
-      <div
-        className="relative"
-        style={{ height: rulerH + tracks.length * trackH }}
-      >
-        {/* ── Ruler ── */}
-        <div
-          className="relative border-b border-neutral-100"
-          style={{ height: rulerH, marginLeft: GUTTER }}
-        >
-          {ticks.map((t) => {
-            const pct = (t / duration) * 100;
-            return (
-              <div
-                key={t}
-                className="absolute bottom-0 flex flex-col items-center"
-                style={{ left: `${pct}%` }}
-              >
-                <span className="text-[10px] text-neutral-400 font-mono leading-none mb-1">
-                  {formatTick(t)}
-                </span>
-                <div className="w-px h-1.5 bg-neutral-200" />
-              </div>
-            );
-          })}
-        </div>
-
-        {/* ── Tracks ── */}
-        {tracks.map(([trackNum, els], idx) => (
-          <div
-            key={trackNum}
-            className={`relative flex ${
-              idx % 2 === 0 ? "bg-neutral-50/50" : "bg-white"
-            }`}
-            style={{ height: trackH }}
-          >
-            {/* Gutter label */}
-            <div
-              className="flex-shrink-0 flex items-center justify-end pr-2 border-r border-neutral-100"
-              style={{ width: GUTTER }}
-            >
-              <span className="text-[10px] text-neutral-400 font-mono">
-                {trackNum}
-              </span>
-            </div>
-
-            {/* Track content */}
-            <div
-              className="flex-1 relative"
-              onClick={() => setSelectedElementId(null)}
-            >
-              {els.map((el, i) => {
-                const isDragging = dragPreview?.elementId === el.id;
-                const displayStart = isDragging
-                  ? dragPreview.newStart
-                  : el.start;
-                const leftPct = (displayStart / duration) * 100;
-                const widthPct = (el.duration / duration) * 100;
-                const style = getStyle(el.tag);
-                const isSelected = selectedElementId === el.id;
-                return (
-                  <div
-                    key={`${el.id}-${i}`}
-                    className={`absolute top-1 bottom-1 rounded ${style.bg} ${
-                      style.border
-                    } border flex items-center overflow-hidden ${
-                      isSelected ? "ring-2 ring-blue-500 ring-offset-1" : ""
-                    } ${
-                      isDragging
-                        ? "opacity-80 shadow-md z-20 cursor-grabbing"
-                        : "cursor-grab"
-                    } ${
-                      onMoveElement ? "hover:brightness-95" : "cursor-pointer"
-                    }`}
-                    style={{
-                      left: `${leftPct}%`,
-                      width: `${Math.max(widthPct, 0.5)}%`,
-                      transition: isDragging ? "none" : "left 0.15s ease-out",
-                    }}
-                    title={`${el.id} (${el.tag}) ${displayStart.toFixed(
-                      1
-                    )}s – ${(displayStart + el.duration).toFixed(1)}s`}
-                    onMouseDown={(e) => {
-                      if (onMoveElement) {
-                        handleMouseDown(e, el.id, el.start);
-                      }
-                    }}
-                    onClick={(e) => {
-                      if (!onMoveElement) {
-                        e.stopPropagation();
-                        setSelectedElementId(el.id);
-                      }
-                    }}
-                  >
-                    <span
-                      className={`text-[10px] ${style.text} font-medium truncate px-1.5 leading-none`}
-                    >
-                      {el.id || el.tag}
-                    </span>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        ))}
-
-        {/* ── Playhead ── */}
-        <div
-          className="absolute top-0 bottom-0 pointer-events-none z-10"
-          style={{
-            left: `calc(${GUTTER}px + (100% - ${GUTTER}px) * ${
-              playheadPct / 100
-            })`,
-          }}
-        >
-          <div className="w-px h-full bg-red-500/80" />
-          <div className="absolute -top-px left-1/2 -translate-x-1/2 w-0 h-0 border-l-[4px] border-r-[4px] border-t-[5px] border-l-transparent border-r-transparent border-t-red-500" />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/packages/studio/frontend/src/components/UploadZone.tsx b/packages/studio/frontend/src/components/UploadZone.tsx
deleted file mode 100644
index 0a3e081b..00000000
--- a/packages/studio/frontend/src/components/UploadZone.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { useState, useRef, useCallback } from "react";
-import { Upload } from "lucide-react";
-import { uploadProject } from "../api/projects";
-
-interface UploadZoneProps {
-  onUploadComplete: (projectId: string) => void;
-}
-
-export function UploadZone({ onUploadComplete }: UploadZoneProps) {
-  const [isDragging, setIsDragging] = useState(false);
-  const [isUploading, setIsUploading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const handleFile = useCallback(
-    async (file: File) => {
-      if (!file.name.endsWith(".zip")) {
-        setError("Please upload a .zip file");
-        return;
-      }
-
-      setIsUploading(true);
-      setError(null);
-
-      try {
-        const name = file.name.replace(/\.zip$/i, "");
-        const project = await uploadProject(file, name);
-        onUploadComplete(project.id);
-      } catch (err) {
-        setError(err instanceof Error ? err.message : "Upload failed");
-      } finally {
-        setIsUploading(false);
-      }
-    },
-    [onUploadComplete],
-  );
-
-  const handleDrop = useCallback(
-    (e: React.DragEvent) => {
-      e.preventDefault();
-      setIsDragging(false);
-      const file = e.dataTransfer.files[0];
-      if (file) handleFile(file);
-    },
-    [handleFile],
-  );
-
-  const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragging(true);
-  }, []);
-
-  const handleDragLeave = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragging(false);
-  }, []);
-
-  const handleClick = () => inputRef.current?.click();
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) handleFile(file);
-    e.target.value = "";
-  };
-
-  return (
-    <div
-      onDrop={handleDrop}
-      onDragOver={handleDragOver}
-      onDragLeave={handleDragLeave}
-      onClick={handleClick}
-      className={`
-        border-2 border-dashed rounded-xl p-12 text-center cursor-pointer
-        transition-all duration-200
-        ${
-          isDragging
-            ? "border-blue-400 bg-blue-50"
-            : "border-neutral-300 hover:border-neutral-400 bg-white"
-        }
-        ${isUploading ? "pointer-events-none opacity-60" : ""}
-      `}
-    >
-      <input
-        ref={inputRef}
-        type="file"
-        accept=".zip"
-        onChange={handleInputChange}
-        className="hidden"
-      />
-      <Upload className="w-10 h-10 mx-auto mb-4 text-neutral-400" />
-      {isUploading ? (
-        <p className="text-neutral-600">Uploading...</p>
-      ) : (
-        <>
-          <p className="text-neutral-700 mb-1">
-            Drop a ZIP file here, or click to browse
-          </p>
-          <p className="text-neutral-400 text-sm">
-            ZIP must contain an index.html with a GSAP timeline
-          </p>
-        </>
-      )}
-      {error && <p className="text-red-500 text-sm mt-3">{error}</p>}
-    </div>
-  );
-}
diff --git a/packages/studio/frontend/src/hooks/useRender.ts b/packages/studio/frontend/src/hooks/useRender.ts
deleted file mode 100644
index cf1e658e..00000000
--- a/packages/studio/frontend/src/hooks/useRender.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import { useState, useCallback, useRef, useEffect } from "react";
-import {
-  startRender,
-  subscribeProgress,
-  getDownloadUrl,
-  type RenderProgress,
-} from "../api/render";
-
-type RenderState = "idle" | "rendering" | "complete" | "error";
-
-interface RenderOptions {
-  debug?: boolean;
-  sequential?: boolean;
-}
-
-interface UseRenderReturn {
-  state: RenderState;
-  progress: number;
-  stage: string;
-  error: string | null;
-  start: (options?: RenderOptions) => void;
-}
-
-export function useRender(projectId: string): UseRenderReturn {
-  const [state, setState] = useState<RenderState>("idle");
-  const [progress, setProgress] = useState(0);
-  const [stage, setStage] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const unsubscribeRef = useRef<(() => void) | null>(null);
-
-  useEffect(() => {
-    return () => {
-      if (unsubscribeRef.current) unsubscribeRef.current();
-    };
-  }, []);
-
-  const start = useCallback(async (options?: RenderOptions) => {
-    if (state === "rendering") return;
-
-    setState("rendering");
-    setProgress(0);
-    setStage("Starting...");
-    setError(null);
-
-    try {
-      const jobId = await startRender(projectId, { debug: options?.debug, sequential: options?.sequential });
-
-      unsubscribeRef.current = subscribeProgress(
-        jobId,
-        (data: RenderProgress) => {
-          setProgress(data.progress);
-          setStage(data.stage);
-
-          if (data.status === "complete") {
-            setState("complete");
-            if (unsubscribeRef.current) {
-              unsubscribeRef.current();
-              unsubscribeRef.current = null;
-            }
-
-            // Trigger download
-            const url = getDownloadUrl(jobId);
-            const a = document.createElement("a");
-            a.href = url;
-            a.download = `${projectId}.mp4`;
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-
-            // Reset to idle after a brief display
-            setTimeout(() => setState("idle"), 3000);
-          } else if (data.status === "failed") {
-            setState("error");
-            setError(data.error || "Render failed");
-            if (unsubscribeRef.current) {
-              unsubscribeRef.current();
-              unsubscribeRef.current = null;
-            }
-          }
-        },
-        () => {
-          setState("error");
-          setError("Connection lost");
-        }
-      );
-    } catch (err) {
-      setState("error");
-      setError(err instanceof Error ? err.message : "Failed to start render");
-    }
-  }, [projectId, state]);
-
-  return { state, progress, stage, error, start };
-}
diff --git a/packages/studio/frontend/src/hooks/useTimelinePlayer.ts b/packages/studio/frontend/src/hooks/useTimelinePlayer.ts
deleted file mode 100644
index 471db1cd..00000000
--- a/packages/studio/frontend/src/hooks/useTimelinePlayer.ts
+++ /dev/null
@@ -1,409 +0,0 @@
-import { useRef, useCallback, useEffect } from "react";
-import { usePlayerStore, type TimelineElement } from "../store/playerStore";
-
-/**
- * Sandbox player API (window.__player from sandbox interceptor)
- */
-interface PlayerAPI {
-  play: () => void;
-  pause: () => void;
-  seek: (time: number) => void;
-  renderSeek?: (time: number) => void;
-  getTime: () => number;
-  getDuration: () => number;
-  isPlaying: () => boolean;
-}
-
-/**
- * Legacy raw GSAP timeline (window.__timeline or window.__timelines[key])
- */
-interface TimelineLike {
-  play: () => void;
-  pause: () => void;
-  seek: (time: number) => void;
-  time: () => number;
-  duration: () => number;
-  isActive: () => boolean;
-}
-
-type IframeWindow = Window & {
-  __player?: PlayerAPI;
-  __timeline?: TimelineLike;
-  __timelines?: Record<string, TimelineLike>;
-};
-
-/**
- * Unified adapter that wraps either __player or raw GSAP timeline
- * into a common interface.
- */
-interface PlaybackAdapter {
-  play: () => void;
-  pause: () => void;
-  seek: (time: number) => void;
-  renderSeek?: (time: number) => void;
-  getTime: () => number;
-  getDuration: () => number;
-  isPlaying: () => boolean;
-}
-
-const PREVIEW_CANONICAL_FPS = 30;
-
-function quantizeTimeToFrame(time: number, fps: number = PREVIEW_CANONICAL_FPS): number {
-  const safe = Number.isFinite(time) ? Math.max(0, time) : 0;
-  const frame = Math.floor(safe * fps + 1e-9);
-  return frame / fps;
-}
-
-function wrapPlayer(p: PlayerAPI): PlaybackAdapter {
-  return {
-    play: () => p.play(),
-    pause: () => p.pause(),
-    seek: (t) => p.seek(t),
-    renderSeek: typeof p.renderSeek === "function" ? (t) => p.renderSeek?.(t) : undefined,
-    getTime: () => p.getTime(),
-    getDuration: () => p.getDuration(),
-    isPlaying: () => p.isPlaying(),
-  };
-}
-
-function wrapTimeline(tl: TimelineLike): PlaybackAdapter {
-  return {
-    play: () => tl.play(),
-    pause: () => tl.pause(),
-    seek: (t) => {
-      tl.pause();
-      tl.seek(t);
-    },
-    getTime: () => tl.time(),
-    getDuration: () => tl.duration(),
-    isPlaying: () => tl.isActive(),
-  };
-}
-
-export function useTimelinePlayer() {
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const rafRef = useRef<number>(0);
-  const probeIntervalRef = useRef<ReturnType<typeof setInterval>>();
-  const pendingSeekRef = useRef<number | null>(null);
-  const isRefreshingRef = useRef(false);
-
-  const {
-    isPlaying,
-    currentTime,
-    setIsPlaying,
-    setCurrentTime,
-    setDuration,
-    setTimelineReady,
-    setElements,
-    reset,
-  } = usePlayerStore();
-
-  const getAdapter = useCallback((): PlaybackAdapter | null => {
-    try {
-      const win = iframeRef.current?.contentWindow as IframeWindow | null;
-      if (!win) return null;
-
-      // Prefer __player (sandbox interceptor runtime)
-      if (win.__player && typeof win.__player.play === "function") {
-        return wrapPlayer(win.__player);
-      }
-
-      // Legacy: single __timeline
-      if (win.__timeline) return wrapTimeline(win.__timeline);
-
-      // Legacy: __timelines map — last registered = master
-      if (win.__timelines) {
-        const keys = Object.keys(win.__timelines);
-        if (keys.length > 0)
-        {
-          const lastKey = keys[keys.length - 1];
-          const lastTimeline = lastKey ? win.__timelines[lastKey] : undefined;
-          if (lastTimeline) return wrapTimeline(lastTimeline);
-        }
-      }
-
-      return null;
-    } catch {
-      return null;
-    }
-  }, []);
-
-  const startRAFLoop = useCallback(() => {
-    const tick = () => {
-      const adapter = getAdapter();
-      if (adapter) {
-        const time = adapter.getTime();
-        const dur = adapter.getDuration();
-        setCurrentTime(time);
-        // Check if playback reached the end
-        if (time >= dur && !adapter.isPlaying()) {
-          setIsPlaying(false);
-          cancelAnimationFrame(rafRef.current);
-          return;
-        }
-      }
-      rafRef.current = requestAnimationFrame(tick);
-    };
-    rafRef.current = requestAnimationFrame(tick);
-  }, [getAdapter, setCurrentTime, setIsPlaying]);
-
-  const stopRAFLoop = useCallback(() => {
-    cancelAnimationFrame(rafRef.current);
-  }, []);
-
-  const play = useCallback(() => {
-    const adapter = getAdapter();
-    if (!adapter) return;
-    // If at the end, restart from beginning
-    if (adapter.getTime() >= adapter.getDuration()) {
-      adapter.seek(0);
-    }
-    adapter.play();
-    setIsPlaying(true);
-    startRAFLoop();
-  }, [getAdapter, setIsPlaying, startRAFLoop]);
-
-  const pause = useCallback(() => {
-    const adapter = getAdapter();
-    if (!adapter) return;
-    adapter.pause();
-    setIsPlaying(false);
-    stopRAFLoop();
-  }, [getAdapter, setIsPlaying, stopRAFLoop]);
-
-  const togglePlay = useCallback(() => {
-    if (isPlaying) {
-      pause();
-    } else {
-      play();
-    }
-  }, [isPlaying, play, pause]);
-
-  const seek = useCallback(
-    (time: number) => {
-      const adapter = getAdapter();
-      if (!adapter) return;
-      const quantized = quantizeTimeToFrame(time);
-      if (typeof adapter.renderSeek === "function") {
-        adapter.renderSeek(quantized);
-      } else {
-        adapter.seek(quantized);
-      }
-      try {
-        const win = iframeRef.current?.contentWindow as
-          | (Window & { gsap?: { ticker?: { tick: () => void } } })
-          | undefined;
-        win?.gsap?.ticker?.tick?.();
-      } catch {
-        // noop
-      }
-      setCurrentTime(quantized);
-      setIsPlaying(false);
-      stopRAFLoop();
-    },
-    [getAdapter, setCurrentTime, setIsPlaying, stopRAFLoop]
-  );
-
-  const onIframeLoad = useCallback(() => {
-    let attempts = 0;
-    const maxAttempts = 25; // 5 seconds total
-
-    if (probeIntervalRef.current) clearInterval(probeIntervalRef.current);
-
-    probeIntervalRef.current = setInterval(() => {
-      attempts++;
-      const win = iframeRef.current?.contentWindow as
-        | (Window & { __playerReady?: boolean; __renderReady?: boolean })
-        | null;
-      const adapter = getAdapter();
-      const readyForParity = Boolean(win?.__playerReady && win?.__renderReady);
-      if (adapter && adapter.getDuration() > 0 && readyForParity) {
-        clearInterval(probeIntervalRef.current);
-        adapter.pause();
-
-        const seekTo = pendingSeekRef.current;
-        pendingSeekRef.current = null;
-        const startTime =
-          seekTo != null ? Math.min(seekTo, adapter.getDuration()) : 0;
-
-        const quantizedStart = quantizeTimeToFrame(startTime);
-        if (typeof adapter.renderSeek === "function") {
-          adapter.renderSeek(quantizedStart);
-        } else {
-          adapter.seek(quantizedStart);
-        }
-        setDuration(adapter.getDuration());
-        setCurrentTime(quantizedStart);
-        if (!isRefreshingRef.current) {
-          setTimelineReady(true);
-        }
-        isRefreshingRef.current = false;
-        setIsPlaying(false);
-
-        // Extract timeline elements from iframe DOM
-        try {
-          const doc = iframeRef.current?.contentDocument;
-          if (doc) {
-            // Identify root composition so we can skip it on the timeline
-            const rootComposition = doc.querySelector("[data-composition-id]");
-
-            const nodes = doc.querySelectorAll("[data-start]");
-            const els: TimelineElement[] = [];
-            let trackCounter = 0;
-            nodes.forEach((node) => {
-              // Skip root composition — only show its children
-              if (node === rootComposition) return;
-              const el = node as HTMLElement;
-              const startStr = el.getAttribute("data-start");
-              if (startStr == null) return;
-              const start = parseFloat(startStr);
-              if (isNaN(start)) return;
-
-              const tagLower = el.tagName.toLowerCase();
-
-              let dur = 0;
-              const durStr = el.getAttribute("data-duration");
-              const endStr = el.getAttribute("data-end");
-              if (durStr != null) {
-                dur = parseFloat(durStr);
-              } else if (endStr != null) {
-                dur = parseFloat(endStr) - start;
-              }
-
-              // Infer duration from media's actual duration for video/audio
-              if (
-                (isNaN(dur) || dur <= 0) &&
-                (tagLower === "video" || tagLower === "audio")
-              ) {
-                const mediaEl = el as unknown as HTMLMediaElement;
-                if (
-                  mediaEl.duration &&
-                  isFinite(mediaEl.duration) &&
-                  mediaEl.duration > 0
-                ) {
-                  const mediaStart =
-                    parseFloat(el.getAttribute("data-media-start") || "0") ||
-                    0;
-                  dur = mediaEl.duration - mediaStart;
-                }
-              }
-
-              // Infer duration from GSAP timeline for compositions
-              const compositionId = el.getAttribute("data-composition-id");
-              if ((isNaN(dur) || dur <= 0) && compositionId) {
-                const win = iframeRef.current
-                  ?.contentWindow as IframeWindow | null;
-                const compTl = win?.__timelines?.[compositionId];
-                if (compTl) {
-                  const compDur = compTl.duration();
-                  if (compDur > 0) dur = compDur;
-                }
-              }
-
-              if (isNaN(dur) || dur <= 0) dur = adapter.getDuration() - start;
-              // TODO: Remove data-track after migration
-              const trackStr = el.getAttribute("data-track-index") ?? el.getAttribute("data-track");
-              const track =
-                trackStr != null ? parseInt(trackStr, 10) : trackCounter++;
-              const entry: TimelineElement = {
-                id: el.id || tagLower,
-                tag: tagLower,
-                start,
-                duration: dur,
-                track: isNaN(track) ? 0 : track,
-              };
-
-              // Extract media attributes
-              if (
-                tagLower === "video" ||
-                tagLower === "audio" ||
-                tagLower === "img"
-              ) {
-                const src = el.getAttribute("src");
-                if (src) entry.src = src;
-              }
-              const mediaStartAttr = el.getAttribute("data-media-start");
-              if (mediaStartAttr != null) {
-                const parsed = parseFloat(mediaStartAttr);
-                if (!isNaN(parsed)) entry.mediaStart = parsed;
-              }
-              const vol = el.getAttribute("data-volume");
-              if (vol != null) {
-                const parsed = parseFloat(vol);
-                if (!isNaN(parsed)) entry.volume = parsed;
-              }
-
-              els.push(entry);
-            });
-            setElements(els);
-          }
-        } catch {
-          // Cross-origin or DOM access error — ignore
-        }
-
-        return;
-      }
-      if (attempts >= maxAttempts) {
-        clearInterval(probeIntervalRef.current);
-        console.warn(
-          "Could not find parity-ready runtime (__playerReady + __renderReady) after 5s"
-        );
-      }
-    }, 200);
-  }, [
-    getAdapter,
-    setDuration,
-    setCurrentTime,
-    setTimelineReady,
-    setIsPlaying,
-    setElements,
-  ]);
-
-  const refreshPlayer = useCallback(() => {
-    const iframe = iframeRef.current;
-    if (!iframe) return;
-
-    const adapter = getAdapter();
-    pendingSeekRef.current = adapter ? adapter.getTime() : currentTime;
-    isRefreshingRef.current = true;
-
-    stopRAFLoop();
-    setIsPlaying(false);
-
-    const src = iframe.src;
-    const url = new URL(src, window.location.origin);
-    url.searchParams.set("_t", String(Date.now()));
-    iframe.src = url.toString();
-  }, [getAdapter, currentTime, stopRAFLoop, setIsPlaying]);
-
-  // Spacebar shortcut
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.code === "Space" && e.target === document.body) {
-        e.preventDefault();
-        togglePlay();
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [togglePlay]);
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      stopRAFLoop();
-      if (probeIntervalRef.current) clearInterval(probeIntervalRef.current);
-      reset();
-    };
-  }, [stopRAFLoop, reset]);
-
-  return {
-    iframeRef,
-    play,
-    pause,
-    togglePlay,
-    seek,
-    onIframeLoad,
-    refreshPlayer,
-  };
-}
diff --git a/packages/studio/frontend/src/hooks/useUndoRedo.ts b/packages/studio/frontend/src/hooks/useUndoRedo.ts
deleted file mode 100644
index 3d8a195d..00000000
--- a/packages/studio/frontend/src/hooks/useUndoRedo.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { useRef, useState, useCallback } from "react";
-
-export interface UndoEntry {
-  elementId: string;
-  oldStart: number;
-  newStart: number;
-}
-
-const MAX_STACK = 50;
-
-export function useUndoRedo() {
-  const undoRef = useRef<UndoEntry[]>([]);
-  const redoRef = useRef<UndoEntry[]>([]);
-  const [version, setVersion] = useState(0);
-
-  const bump = () => setVersion((v) => v + 1);
-
-  const pushUndo = useCallback((entry: UndoEntry) => {
-    undoRef.current.push(entry);
-    if (undoRef.current.length > MAX_STACK) {
-      undoRef.current.shift();
-    }
-    redoRef.current = [];
-    bump();
-  }, []);
-
-  const popUndo = useCallback((): UndoEntry | null => {
-    const entry = undoRef.current.pop();
-    if (!entry) return null;
-    redoRef.current.push(entry);
-    bump();
-    return entry;
-  }, []);
-
-  const popRedo = useCallback((): UndoEntry | null => {
-    const entry = redoRef.current.pop();
-    if (!entry) return null;
-    undoRef.current.push(entry);
-    bump();
-    return entry;
-  }, []);
-
-  // version is read so React tracks re-renders
-  void version;
-  const canUndo = undoRef.current.length > 0;
-  const canRedo = redoRef.current.length > 0;
-
-  return { pushUndo, popUndo, popRedo, canUndo, canRedo };
-}
diff --git a/packages/studio/frontend/src/index.css b/packages/studio/frontend/src/index.css
deleted file mode 100644
index 58d39005..00000000
--- a/packages/studio/frontend/src/index.css
+++ /dev/null
@@ -1,10 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-body {
-  margin: 0;
-  font-family: "Inter", sans-serif;
-  background: #f1f1f1;
-  color: #0f0f0f;
-}
diff --git a/packages/studio/frontend/src/store/playerStore.ts b/packages/studio/frontend/src/store/playerStore.ts
deleted file mode 100644
index 661c90de..00000000
--- a/packages/studio/frontend/src/store/playerStore.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { create } from "zustand";
-
-export interface TimelineElement {
-  id: string;
-  tag: string;
-  start: number;
-  duration: number;
-  track: number;
-  src?: string;
-  mediaStart?: number;
-  volume?: number;
-}
-
-interface PlayerState {
-  isPlaying: boolean;
-  currentTime: number;
-  duration: number;
-  timelineReady: boolean;
-  elements: TimelineElement[];
-  selectedElementId: string | null;
-
-  setIsPlaying: (playing: boolean) => void;
-  setCurrentTime: (time: number) => void;
-  setDuration: (duration: number) => void;
-  setTimelineReady: (ready: boolean) => void;
-  setElements: (elements: TimelineElement[]) => void;
-  setSelectedElementId: (id: string | null) => void;
-  updateElementStart: (elementId: string, newStart: number) => void;
-  reset: () => void;
-}
-
-export const usePlayerStore = create<PlayerState>((set) => ({
-  isPlaying: false,
-  currentTime: 0,
-  duration: 0,
-  timelineReady: false,
-  elements: [],
-  selectedElementId: null,
-
-  setIsPlaying: (playing) => set({ isPlaying: playing }),
-  setCurrentTime: (time) => set({ currentTime: time }),
-  setDuration: (duration) => set({ duration }),
-  setTimelineReady: (ready) => set({ timelineReady: ready }),
-  setElements: (elements) => set({ elements }),
-  setSelectedElementId: (id) => set({ selectedElementId: id }),
-  updateElementStart: (elementId, newStart) =>
-    set((state) => ({
-      elements: state.elements.map((el) =>
-        el.id === elementId ? { ...el, start: newStart } : el
-      ),
-    })),
-  reset: () =>
-    set({
-      isPlaying: false,
-      currentTime: 0,
-      duration: 0,
-      timelineReady: false,
-      elements: [],
-      selectedElementId: null,
-    }),
-}));
diff --git a/packages/studio/frontend/tailwind.config.js b/packages/studio/frontend/tailwind.config.js
deleted file mode 100644
index 614c86b4..00000000
--- a/packages/studio/frontend/tailwind.config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};
diff --git a/packages/studio/frontend/tsconfig.json b/packages/studio/frontend/tsconfig.json
deleted file mode 100644
index 256192d8..00000000
--- a/packages/studio/frontend/tsconfig.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-    "strict": true,
-    "noUncheckedIndexedAccess": true,
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"]
-}
diff --git a/packages/studio/frontend/vite.config.ts b/packages/studio/frontend/vite.config.ts
deleted file mode 100644
index 22ebe3d0..00000000
--- a/packages/studio/frontend/vite.config.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-
-export default defineConfig({
-  plugins: [react()],
-  server: {
-    host: true,
-    port: 5175,
-    allowedHosts: [
-      "localhost",
-      ".ngrok-free.app",
-      ".ngrok.dev",
-    ],
-    proxy: {
-      "/api": {
-        target: "http://localhost:3002",
-        changeOrigin: true,
-      },
-    },
-  },
-});
diff --git a/packages/studio/index.html b/packages/studio/index.html
new file mode 100644
index 00000000..3496b68a
--- /dev/null
+++ b/packages/studio/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>HyperFrames Studio</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>
diff --git a/packages/studio/package.json b/packages/studio/package.json
new file mode 100644
index 00000000..5e23b0cf
--- /dev/null
+++ b/packages/studio/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "@hyperframes/studio",
+  "version": "0.1.0",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./tailwind-preset": "./src/styles/tailwind-preset.ts"
+  },
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@hyperframes/core": "workspace:*",
+    "@codemirror/autocomplete": "^6.20.1",
+    "@codemirror/commands": "^6.10.3",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/language": "^6.12.2",
+    "@codemirror/search": "^6.6.0",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/theme-one-dark": "^6.1.2",
+    "@codemirror/view": "^6.40.0",
+    "@phosphor-icons/react": "^2.1.10",
+    "codemirror": "^6.0.1"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "zustand": "^4.0.0 || ^5.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0"
+  }
+}
diff --git a/packages/studio/frontend/postcss.config.js b/packages/studio/postcss.config.js
similarity index 100%
rename from packages/studio/frontend/postcss.config.js
rename to packages/studio/postcss.config.js
diff --git a/packages/studio/public/icons/timeline/audio.svg b/packages/studio/public/icons/timeline/audio.svg
new file mode 100644
index 00000000..0a5ce98a
--- /dev/null
+++ b/packages/studio/public/icons/timeline/audio.svg
@@ -0,0 +1,7 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.875 2.5C6.875 2.15482 7.15482 1.875 7.5 1.875C7.84518 1.875 8.125 2.15482 8.125 2.5V12.5C8.125 12.8452 7.84518 13.125 7.5 13.125C7.15482 13.125 6.875 12.8452 6.875 12.5V2.5Z" fill="#512000"/>
+<path d="M4.0625 3.75C4.0625 3.40482 4.34232 3.125 4.6875 3.125C5.03268 3.125 5.3125 3.40482 5.3125 3.75V10C5.3125 10.3452 5.03268 10.625 4.6875 10.625C4.34232 10.625 4.0625 10.3452 4.0625 10V3.75Z" fill="#512000"/>
+<path d="M1.875 4.375C1.52982 4.375 1.25 4.65482 1.25 5V7.5C1.25 7.84518 1.52982 8.125 1.875 8.125C2.22018 8.125 2.5 7.84518 2.5 7.5V5C2.5 4.65482 2.22018 4.375 1.875 4.375Z" fill="#512000"/>
+<path d="M10.9375 11.25C10.9375 11.5952 10.6577 11.875 10.3125 11.875C9.96732 11.875 9.6875 11.5952 9.6875 11.25L9.6875 5C9.6875 4.65482 9.96732 4.375 10.3125 4.375C10.6577 4.375 10.9375 4.65482 10.9375 5L10.9375 11.25Z" fill="#512000"/>
+<path d="M13.125 10.625C13.4702 10.625 13.75 10.3452 13.75 10V7.5C13.75 7.15482 13.4702 6.875 13.125 6.875C12.7798 6.875 12.5 7.15482 12.5 7.5V10C12.5 10.3452 12.7798 10.625 13.125 10.625Z" fill="#512000"/>
+</svg>
diff --git a/packages/studio/public/icons/timeline/captions.svg b/packages/studio/public/icons/timeline/captions.svg
new file mode 100644
index 00000000..978923a2
--- /dev/null
+++ b/packages/studio/public/icons/timeline/captions.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.86328 11.9695C6.86328 11.5153 6.96513 11.1112 7.16883 10.7574C7.37253 10.3993 7.65545 10.1219 8.01758 9.9254C8.38424 9.72448 8.79843 9.62402 9.26014 9.62402C9.82597 9.62402 10.3104 9.76816 10.7132 10.0564C11.0567 10.3022 11.3031 10.6241 11.4524 11.0222C11.4923 11.1285 11.4066 11.2357 11.2894 11.2357H10.3574C10.2886 11.2357 10.2269 11.1969 10.1916 11.1398C10.1013 10.9942 9.98321 10.8798 9.83729 10.7968C9.66528 10.6963 9.46837 10.6461 9.24656 10.6461C8.88896 10.6461 8.59925 10.7662 8.37745 11.0064C8.15564 11.2466 8.04474 11.5677 8.04474 11.9695C8.04474 12.3714 8.15564 12.6924 8.37745 12.9326C8.59925 13.1728 8.88896 13.293 9.24656 13.293C9.46837 13.293 9.66528 13.2427 9.83729 13.1423C9.98321 13.0592 10.1013 12.9449 10.1916 12.7992C10.2269 12.7422 10.2886 12.7033 10.3574 12.7033H11.2894C11.4066 12.7033 11.4923 12.8105 11.4524 12.9168C11.3031 13.3149 11.0567 13.6369 10.7132 13.8826C10.3104 14.1665 9.82597 14.3085 9.26014 14.3085C8.79843 14.3085 8.38424 14.2102 8.01758 14.0137C7.65545 13.8127 7.37253 13.5354 7.16883 13.1816C6.96513 12.8278 6.86328 12.4238 6.86328 11.9695Z" fill="black"/>
+<path d="M12.0352 11.9695C12.0352 11.5153 12.137 11.1112 12.3407 10.7574C12.5444 10.3993 12.8273 10.1219 13.1895 9.9254C13.5561 9.72448 13.9703 9.62402 14.432 9.62402C14.9979 9.62402 15.4822 9.76816 15.8851 10.0564C16.2285 10.3022 16.4749 10.6241 16.6243 11.0222C16.6641 11.1285 16.5784 11.2357 16.4613 11.2357H15.5293C15.4604 11.2357 15.3987 11.1969 15.3634 11.1398C15.2732 10.9942 15.1551 10.8798 15.0092 10.7968C14.8372 10.6963 14.6402 10.6461 14.4184 10.6461C14.0608 10.6461 13.7711 10.7662 13.5493 11.0064C13.3275 11.2466 13.2166 11.5677 13.2166 11.9695C13.2166 12.3714 13.3275 12.6924 13.5493 12.9326C13.7711 13.1728 14.0608 13.293 14.4184 13.293C14.6402 13.293 14.8372 13.2427 15.0092 13.1423C15.1551 13.0592 15.2732 12.9449 15.3634 12.7992C15.3987 12.7422 15.4604 12.7033 15.5293 12.7033H16.4613C16.5784 12.7033 16.6641 12.8105 16.6243 12.9168C16.4749 13.3149 16.2285 13.6369 15.8851 13.8826C15.4822 14.1665 14.9979 14.3085 14.432 14.3085C13.9703 14.3085 13.5561 14.2102 13.1895 14.0137C12.8273 13.8127 12.5444 13.5354 12.3407 13.1816C12.137 12.8278 12.0352 12.4238 12.0352 11.9695Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.1377 9.10331C4.1377 7.94458 4.1377 7.36522 4.3714 6.92264C4.57697 6.53334 4.90499 6.21683 5.30845 6.01847C5.76712 5.79297 6.36755 5.79297 7.56842 5.79297H16.4311C17.632 5.79297 18.2324 5.79297 18.6911 6.01847C19.0945 6.21683 19.4226 6.53334 19.6281 6.92264C19.8618 7.36522 19.8618 7.94458 19.8618 9.10331V14.8964C19.8618 16.0551 19.8618 16.6345 19.6281 17.0771C19.4226 17.4664 19.0945 17.7829 18.6911 17.9813C18.2324 18.2068 17.632 18.2068 16.4311 18.2068H7.56842C6.36755 18.2068 5.76712 18.2068 5.30845 17.9813C4.90499 17.7829 4.57697 17.4664 4.3714 17.0771C4.1377 16.6345 4.1377 16.0551 4.1377 14.8964V9.10331ZM7.56842 7.17228H16.4311C17.0551 7.17228 17.4372 7.17335 17.723 7.19589C17.8562 7.20638 17.9367 7.21957 17.9857 7.23069C18.0089 7.23598 18.0232 7.24041 18.031 7.24307C18.0384 7.24563 18.0421 7.24745 18.0421 7.24745C18.1766 7.31357 18.2859 7.41907 18.3545 7.54884C18.3545 7.54884 18.3563 7.5524 18.359 7.55957C18.3618 7.56704 18.3664 7.58086 18.3718 7.60331C18.3834 7.65052 18.397 7.72826 18.4079 7.85674C18.4313 8.13255 18.4324 8.50119 18.4324 9.10331V14.8964C18.4324 15.4985 18.4313 15.8672 18.4079 16.143C18.397 16.2715 18.3834 16.3492 18.3718 16.3964C18.3664 16.4189 18.3618 16.4327 18.359 16.4402C18.3563 16.4473 18.3545 16.4509 18.3545 16.4509C18.2859 16.5807 18.1766 16.6862 18.0421 16.7523L18.0396 16.7534C18.0396 16.7534 18.035 16.7553 18.031 16.7567C18.0232 16.7593 18.0089 16.7638 17.9857 16.769C17.9367 16.7802 17.8562 16.7933 17.723 16.8038C17.4372 16.8264 17.0551 16.8275 16.4311 16.8275H7.56842C6.9444 16.8275 6.56234 16.8264 6.2765 16.8038C6.14335 16.7933 6.06279 16.7802 6.01386 16.769C5.99059 16.7638 5.97628 16.7593 5.96854 16.7567C5.96111 16.7541 5.95741 16.7523 5.95741 16.7523C5.82293 16.6862 5.71359 16.5807 5.64506 16.4509C5.64506 16.4509 5.64318 16.4473 5.64053 16.4402C5.63777 16.4327 5.63317 16.4189 5.62769 16.3964C5.61617 16.3492 5.60251 16.2715 5.59163 16.143C5.56827 15.8672 5.56716 15.4985 5.56716 14.8964V9.10331C5.56716 8.50119 5.56827 8.13255 5.59163 7.85674C5.60251 7.72826 5.61617 7.65052 5.62769 7.60331C5.63317 7.58086 5.63777 7.56704 5.64053 7.55957C5.64318 7.5524 5.64506 7.54884 5.64506 7.54884C5.71359 7.41907 5.82293 7.31357 5.95741 7.24745C5.95741 7.24745 5.96111 7.24563 5.96854 7.24307C5.97628 7.24041 5.99059 7.23598 6.01386 7.23069C6.06279 7.21957 6.14335 7.20638 6.2765 7.19589C6.56234 7.17335 6.9444 7.17228 7.56842 7.17228Z" fill="black"/>
+</svg>
diff --git a/packages/studio/public/icons/timeline/composition.svg b/packages/studio/public/icons/timeline/composition.svg
new file mode 100644
index 00000000..bdb54dc8
--- /dev/null
+++ b/packages/studio/public/icons/timeline/composition.svg
@@ -0,0 +1,12 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.39176 5.03406C1.45724 5 1.54296 5 1.71441 5H1.9593C2.13075 5 2.21647 5 2.28195 5.03406C2.33955 5.06402 2.38638 5.11183 2.41573 5.17063C2.4491 5.23748 2.4491 5.32498 2.4491 5.5V6.375C2.4491 6.55002 2.4491 6.63752 2.41573 6.70437C2.38638 6.76317 2.33955 6.81098 2.28195 6.84094C2.21647 6.875 2.13075 6.875 1.9593 6.875H1.71441C1.54296 6.875 1.45724 6.875 1.39176 6.84094C1.33415 6.81098 1.28732 6.76317 1.25797 6.70437C1.22461 6.63752 1.22461 6.55002 1.22461 6.375V5.5C1.22461 5.32498 1.22461 5.23748 1.25797 5.17063C1.28732 5.11183 1.33415 5.06402 1.39176 5.03406Z" fill="#1A2B03"/>
+<path d="M2.28055 3.71808C2.21679 3.75 2.13249 3.75 1.96389 3.75H1.71886C1.54551 3.75 1.45884 3.75 1.39194 3.71408C1.33446 3.68323 1.28533 3.63086 1.2576 3.57091C1.22533 3.50114 1.22892 3.41627 1.23608 3.24653C1.25437 2.81345 1.3018 2.52021 1.4248 2.27377C1.6009 1.92096 1.88188 1.63413 2.22748 1.45436C2.46889 1.32879 2.75615 1.28038 3.18039 1.26171C3.34666 1.2544 3.4298 1.25074 3.49816 1.28368C3.55688 1.31198 3.60818 1.36214 3.63841 1.42081C3.67359 1.48911 3.67359 1.57759 3.67359 1.75454V2.00468C3.67359 2.1768 3.67359 2.26285 3.64232 2.32794C3.61399 2.38692 3.57237 2.43164 3.51612 2.46354C3.45404 2.49874 3.36517 2.50339 3.18743 2.51268C3.14116 2.51509 3.09778 2.51797 3.05673 2.52139C2.94267 2.53091 2.87366 2.54286 2.83175 2.55293C2.81182 2.55772 2.79955 2.56174 2.79292 2.56416C2.78655 2.56648 2.78339 2.56812 2.78339 2.56812C2.66819 2.62804 2.57453 2.72365 2.51583 2.84126C2.51583 2.84126 2.51422 2.84449 2.51195 2.85099C2.50958 2.85775 2.50565 2.87027 2.50095 2.89062C2.49108 2.93341 2.47938 3.00385 2.47006 3.12029C2.4667 3.16219 2.46388 3.20646 2.46152 3.25369C2.45242 3.43514 2.44787 3.52587 2.41339 3.58925C2.38214 3.64667 2.33833 3.68916 2.28055 3.71808Z" fill="#1A2B03"/>
+<path d="M5.06522 1.28406C5.13071 1.25 5.21643 1.25 5.38788 1.25H5.63277C5.80422 1.25 5.88994 1.25 5.95542 1.28406C6.01302 1.31402 6.05985 1.36183 6.0892 1.42063C6.12257 1.48748 6.12257 1.57498 6.12257 1.75L6.12257 2C6.12257 2.17502 6.12257 2.26252 6.0892 2.32937C6.05985 2.38817 6.01302 2.43598 5.95542 2.46594C5.88994 2.5 5.80422 2.5 5.63277 2.5L5.38788 2.5C5.21643 2.5 5.13071 2.5 5.06522 2.46594C5.00762 2.43598 4.96079 2.38817 4.93144 2.32937C4.89808 2.26252 4.89808 2.17502 4.89808 2L4.89808 1.75C4.89808 1.57498 4.89808 1.48748 4.93144 1.42063C4.96079 1.36183 5.00762 1.31402 5.06522 1.28406Z" fill="#1A2B03"/>
+<path d="M13.4361 8.92063C13.4695 8.98747 13.4695 9.07498 13.4695 9.25V9.5C13.4695 9.67502 13.4695 9.76252 13.4361 9.82937C13.4068 9.88817 13.36 9.93598 13.3024 9.96594C13.2369 10 13.1512 10 12.9797 10H12.7348C12.5634 10 12.4776 10 12.4122 9.96594C12.3546 9.93598 12.3077 9.88817 12.2784 9.82937C12.245 9.76252 12.245 9.67502 12.245 9.5V9.25C12.245 9.07498 12.245 8.98747 12.2784 8.92063C12.3077 8.86183 12.3546 8.81402 12.4122 8.78406C12.4776 8.75 12.5634 8.75 12.7348 8.75H12.9797C13.1512 8.75 13.2369 8.75 13.3024 8.78406C13.36 8.81402 13.4068 8.86183 13.4361 8.92063Z" fill="#1A2B03"/>
+<path d="M13.4365 11.4291C13.4688 11.4989 13.4652 11.5837 13.458 11.7535C13.4397 12.1866 13.3923 12.4798 13.2693 12.7262C13.0932 13.079 12.8122 13.3659 12.4666 13.5456C12.2252 13.6712 11.938 13.7196 11.5137 13.7383C11.3475 13.7456 11.2643 13.7493 11.196 13.7163C11.1372 13.688 11.0859 13.6379 11.0557 13.5792C11.0205 13.5109 11.0205 13.4224 11.0205 13.2455V12.9953C11.0205 12.8232 11.0205 12.7371 11.0518 12.6721C11.0801 12.6131 11.1217 12.5684 11.178 12.5365C11.2401 12.5013 11.329 12.4966 11.5067 12.4873C11.553 12.4849 11.5963 12.482 11.6374 12.4786C11.7514 12.4691 11.8205 12.4571 11.8624 12.4471C11.8823 12.4423 11.8946 12.4383 11.9012 12.4358C11.9076 12.4335 11.9107 12.4319 11.9107 12.4319C12.0259 12.372 12.1196 12.2763 12.1783 12.1587C12.1783 12.1587 12.1787 12.1579 12.1792 12.1568C12.1798 12.1553 12.1808 12.1528 12.1822 12.149C12.1845 12.1422 12.1885 12.1297 12.1932 12.1094C12.203 12.0666 12.2147 11.9961 12.2241 11.8797C12.2274 11.8378 12.2302 11.7935 12.2326 11.7463C12.2417 11.5649 12.2462 11.4741 12.2807 11.4108C12.312 11.3533 12.3558 11.3108 12.4136 11.2819C12.4773 11.25 12.5616 11.25 12.7302 11.25H12.9753C13.1486 11.25 13.2353 11.25 13.3022 11.2859C13.3597 11.3168 13.4088 11.3691 13.4365 11.4291Z" fill="#1A2B03"/>
+<path d="M9.62889 13.7159C9.56341 13.75 9.47769 13.75 9.30624 13.75H8.4491C8.27766 13.75 8.19193 13.75 8.12645 13.7159C8.06885 13.686 8.02202 13.6382 7.99267 13.5794C7.9593 13.5125 7.9593 13.425 7.9593 13.25V13C7.9593 12.825 7.9593 12.7375 7.99267 12.6706C8.02202 12.6118 8.06885 12.564 8.12645 12.5341C8.19193 12.5 8.27766 12.5 8.4491 12.5H9.30624C9.47769 12.5 9.56341 12.5 9.62889 12.5341C9.68649 12.564 9.73333 12.6118 9.76267 12.6706C9.79604 12.7375 9.79604 12.825 9.79604 13V13.25C9.79604 13.425 9.79604 13.5125 9.76267 13.5794C9.73333 13.6382 9.68649 13.686 9.62889 13.7159Z" fill="#1A2B03"/>
+<path d="M6.56767 13.7159C6.50219 13.75 6.41646 13.75 6.24502 13.75H5.38788C5.21643 13.75 5.13071 13.75 5.06523 13.7159C5.00762 13.686 4.96079 13.6382 4.93144 13.5794C4.89808 13.5125 4.89808 13.425 4.89808 13.25V13C4.89808 12.825 4.89808 12.7375 4.93144 12.6706C4.96079 12.6118 5.00762 12.564 5.06523 12.5341C5.13071 12.5 5.21643 12.5 5.38788 12.5H6.24502C6.41646 12.5 6.50219 12.5 6.56767 12.5341C6.62527 12.564 6.6721 12.6118 6.70145 12.6706C6.73481 12.7375 6.73481 12.825 6.73481 13V13.25C6.73481 13.425 6.73481 13.5125 6.70145 13.5794C6.6721 13.6382 6.62527 13.686 6.56767 13.7159Z" fill="#1A2B03"/>
+<path d="M3.49816 13.7163C3.4298 13.7493 3.34667 13.7456 3.18039 13.7383C2.75615 13.7196 2.46889 13.6712 2.22748 13.5456C1.88188 13.3659 1.6009 13.079 1.4248 12.7262C1.3018 12.4798 1.25437 12.1866 1.23608 11.7535C1.22892 11.5837 1.22533 11.4989 1.2576 11.4291C1.28533 11.3691 1.33446 11.3168 1.39194 11.2859C1.45884 11.25 1.54551 11.25 1.71886 11.25H1.96389C2.13249 11.25 2.21679 11.25 2.28055 11.2819C2.33833 11.3108 2.38214 11.3533 2.41339 11.4108C2.44787 11.4741 2.45242 11.5649 2.46152 11.7463C2.46389 11.7935 2.4667 11.8378 2.47006 11.8797C2.47938 11.9961 2.49108 12.0666 2.50095 12.1094C2.50565 12.1297 2.50958 12.1422 2.51195 12.149C2.51422 12.1555 2.51583 12.1587 2.51583 12.1587C2.57453 12.2763 2.66819 12.372 2.78339 12.4319C2.78339 12.4319 2.78655 12.4335 2.79292 12.4358C2.79955 12.4383 2.81182 12.4423 2.83175 12.4471C2.87366 12.4571 2.94267 12.4691 3.05673 12.4786C3.09778 12.482 3.14114 12.4849 3.18741 12.4873C3.36516 12.4966 3.45404 12.5013 3.51612 12.5365C3.57237 12.5684 3.61399 12.6131 3.64232 12.6721C3.67359 12.7371 3.67359 12.8232 3.67359 12.9953V13.2455C3.67359 13.4224 3.67359 13.5109 3.63841 13.5792C3.60818 13.6379 3.55688 13.688 3.49816 13.7163Z" fill="#1A2B03"/>
+<path d="M1.25797 9.82937C1.22461 9.76252 1.22461 9.67502 1.22461 9.5V8.625C1.22461 8.44998 1.22461 8.36248 1.25797 8.29563C1.28732 8.23683 1.33415 8.18902 1.39176 8.15906C1.45724 8.125 1.54296 8.125 1.71441 8.125H1.9593C2.13075 8.125 2.21647 8.125 2.28195 8.15906C2.33955 8.18902 2.38639 8.23683 2.41573 8.29563C2.4491 8.36248 2.4491 8.44998 2.4491 8.625V9.5C2.4491 9.67502 2.4491 9.76252 2.41573 9.82937C2.38639 9.88817 2.33955 9.93598 2.28195 9.96594C2.21647 10 2.13075 10 1.9593 10H1.71441C1.54296 10 1.45724 10 1.39176 9.96594C1.33415 9.93598 1.28732 9.88817 1.25797 9.82937Z" fill="#1A2B03"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.67359 8.125C8.64492 8.125 8.13059 8.125 7.73769 7.92064C7.39209 7.74087 7.1111 7.45404 6.93501 7.10123C6.73481 6.70015 6.73481 6.1751 6.73481 5.125V4.25C6.73481 3.1999 6.73481 2.67485 6.93501 2.27377C7.1111 1.92096 7.39209 1.63413 7.73769 1.45436C8.13059 1.25 8.64492 1.25 9.67359 1.25H10.5307C11.5594 1.25 12.0737 1.25 12.4666 1.45436C12.8122 1.63412 13.0932 1.92096 13.2693 2.27377C13.4695 2.67485 13.4695 3.1999 13.4695 4.25V5.125C13.4695 6.1751 13.4695 6.70015 13.2693 7.10123C13.0932 7.45404 12.8122 7.74087 12.4666 7.92064C12.0737 8.125 11.5594 8.125 10.5307 8.125H9.67359ZM7.9593 5.125V4.25C7.9593 3.70432 7.96026 3.37024 7.98026 3.12029C7.98958 3.00385 8.00129 2.93341 8.01116 2.89062C8.01585 2.87027 8.01979 2.85775 8.02215 2.85098C8.02443 2.84449 8.02604 2.84126 8.02604 2.84126C8.08473 2.72365 8.17839 2.62804 8.2936 2.56812C8.2936 2.56812 8.29676 2.56648 8.30313 2.56416C8.30976 2.56174 8.32202 2.55772 8.34196 2.55293C8.38387 2.54286 8.45288 2.53091 8.56694 2.52139C8.81179 2.50097 9.13905 2.5 9.67359 2.5H10.5307C11.0653 2.5 11.3925 2.50097 11.6374 2.52139C11.7514 2.53091 11.8205 2.54286 11.8624 2.55293C11.8823 2.55772 11.8946 2.56174 11.9012 2.56416C11.9076 2.56648 11.9107 2.56812 11.9107 2.56812C12.0259 2.62804 12.1196 2.72365 12.1783 2.84126C12.1783 2.84126 12.1799 2.84449 12.1822 2.85098C12.1845 2.85775 12.1885 2.87027 12.1932 2.89062C12.203 2.93341 12.2147 3.00385 12.2241 3.12029C12.2441 3.37024 12.245 3.70432 12.245 4.25V5.125C12.245 5.67068 12.2441 6.00475 12.2241 6.25471C12.2147 6.37115 12.203 6.44159 12.1932 6.48438C12.1885 6.50473 12.1845 6.51725 12.1822 6.52401C12.1799 6.53051 12.1783 6.53374 12.1783 6.53374C12.1196 6.65134 12.0259 6.74696 11.9107 6.80688C11.9107 6.80688 11.9076 6.80852 11.9012 6.81084C11.8946 6.81326 11.8823 6.81728 11.8624 6.82207C11.8205 6.83214 11.7514 6.84409 11.6374 6.85361C11.3925 6.87403 11.0653 6.875 10.5307 6.875H9.67359C9.13905 6.875 8.81179 6.87403 8.56694 6.85361C8.45288 6.84409 8.38387 6.83214 8.34196 6.82207C8.32202 6.81728 8.30976 6.81326 8.30313 6.81084C8.29676 6.80852 8.2936 6.80688 8.2936 6.80688C8.17839 6.74696 8.08473 6.65135 8.02604 6.53374C8.02604 6.53374 8.02443 6.53051 8.02215 6.52401C8.01979 6.51725 8.01585 6.50473 8.01116 6.48438C8.00129 6.44159 7.98958 6.37115 7.98026 6.25471C7.96026 6.00475 7.9593 5.67068 7.9593 5.125Z" fill="#1A2B03"/>
+</svg>
diff --git a/packages/studio/public/icons/timeline/image.svg b/packages/studio/public/icons/timeline/image.svg
new file mode 100644
index 00000000..38393b5e
--- /dev/null
+++ b/packages/studio/public/icons/timeline/image.svg
@@ -0,0 +1,18 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1632_277)">
+<path d="M4.2665 5.75742C4.2665 6.30648 3.82178 6.75121 3.27271 6.75121C2.72365 6.75121 2.27893 6.30648 2.27893 5.75742C2.27893 5.20835 2.72365 4.76363 3.27271 4.76363C3.82178 4.76363 4.2665 5.20835 4.2665 5.75742Z" fill="black"/>
+<path d="M0.788398 11.3182C1.06294 11.3182 1.28529 11.0958 1.28529 10.8213V9.33061C1.28529 9.05607 1.06294 8.83372 0.788398 8.83372C0.513858 8.83372 0.291504 9.05607 0.291504 9.33061V10.8213C0.291504 11.0958 0.513858 11.3182 0.788398 11.3182Z" fill="black"/>
+<path d="M0.788398 8.33681C1.06294 8.33681 1.28529 8.11446 1.28529 7.83992V6.34924C1.28529 6.0747 1.06294 5.85234 0.788398 5.85234C0.513858 5.85234 0.291504 6.0747 0.291504 6.34924V7.83992C0.291504 8.11446 0.513858 8.33681 0.788398 8.33681Z" fill="black"/>
+<path d="M0.788401 5.35545C1.06294 5.35545 1.28529 5.1331 1.28529 4.85856V4.30328C1.28529 4.08961 1.34989 3.88527 1.47225 3.71197C1.63002 3.48712 1.57598 3.1778 1.35176 3.01941C1.12753 2.86165 0.817593 2.91569 0.659827 3.13991C0.418837 3.48214 0.292125 3.88401 0.292125 4.30326V4.85854C0.292125 5.13308 0.514479 5.35544 0.789019 5.35544L0.788401 5.35545Z" fill="black"/>
+<path d="M5.3231 3.27279H6.81378C7.08832 3.27279 7.31068 3.05044 7.31068 2.7759C7.31068 2.50136 7.08832 2.279 6.81378 2.279H5.3231C5.04856 2.279 4.82621 2.50136 4.82621 2.7759C4.82621 3.05044 5.04856 3.27279 5.3231 3.27279Z" fill="black"/>
+<path d="M2.34174 3.27279H3.83242C4.10696 3.27279 4.32931 3.05044 4.32931 2.7759C4.32931 2.50136 4.10696 2.279 3.83242 2.279H2.34174C2.0672 2.279 1.84484 2.50136 1.84484 2.7759C1.84484 3.05044 2.0672 3.27279 2.34174 3.27279Z" fill="black"/>
+<path d="M11.223 6.34113C10.9485 6.34113 10.7261 6.56349 10.7261 6.83803V8.32871C10.7261 8.60325 10.9485 8.8256 11.223 8.8256C11.4976 8.8256 11.7199 8.60325 11.7199 8.32871V6.83803C11.7199 6.56349 11.4976 6.34113 11.223 6.34113Z" fill="black"/>
+<path d="M11.223 9.32249C11.0963 9.32249 10.982 9.37094 10.8944 9.4492L9.02549 7.58024C8.25095 6.80571 6.99068 6.80571 6.21553 7.58024L1.49257 12.3032C1.44475 12.2398 1.40313 12.1703 1.37083 12.0957C1.26151 11.8442 0.967719 11.7293 0.716791 11.8392C0.465244 11.9492 0.35033 12.2417 0.460267 12.4933C0.62735 12.8759 0.906231 13.1889 1.25034 13.4019C1.25096 13.4026 1.25158 13.4032 1.2522 13.4032C1.25344 13.4038 1.25468 13.4044 1.25593 13.4051C1.33357 13.4529 1.41369 13.497 1.49754 13.5342C1.75344 13.6485 2.0317 13.7082 2.31616 13.7082H9.695C10.8118 13.7082 11.7198 12.8001 11.7198 11.6834V9.81999C11.7198 9.54545 11.4974 9.3231 11.2229 9.3231L11.223 9.32249Z" fill="black"/>
+<path d="M13.5063 2.63565C12.0492 2.23254 11.769 1.95242 11.366 0.493362C11.333 0.374108 11.225 0.291504 11.1014 0.291504C10.9777 0.291504 10.8697 0.374112 10.8368 0.493362C10.4343 1.95237 10.1541 2.23257 8.69701 2.63565C8.57775 2.66857 8.49577 2.77727 8.49577 2.90025C8.49577 3.02386 8.57838 3.13255 8.69701 3.16486C10.1542 3.56733 10.4343 3.84809 10.8368 5.30651C10.8697 5.42576 10.9777 5.50837 11.1014 5.50837C11.225 5.50837 11.333 5.42576 11.366 5.30651C11.7684 3.8475 12.0486 3.5673 13.5063 3.16486C13.6256 3.13194 13.7076 3.02324 13.7076 2.90025C13.7076 2.77665 13.625 2.66796 13.5063 2.63565Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_1632_277">
+<rect width="14" height="14" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/studio/public/icons/timeline/music.svg b/packages/studio/public/icons/timeline/music.svg
new file mode 100644
index 00000000..ccb3afd9
--- /dev/null
+++ b/packages/studio/public/icons/timeline/music.svg
@@ -0,0 +1,10 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1264_9865)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.76273 0.617647C4.59359 0.588283 4.42061 0.637924 4.28978 0.753378C4.15894 0.868831 4.0835 1.0384 4.0835 1.21702V4.70069C4.08337 4.70802 4.08337 4.71534 4.0835 4.72263V8.22621C3.74029 8.01941 3.34183 7.90105 2.91683 7.90105C1.62817 7.90105 0.583496 8.98924 0.583496 10.3316C0.583496 11.674 1.62817 12.7622 2.91683 12.7622C4.15198 12.7622 5.16298 11.7625 5.24482 10.4975C5.24834 10.4704 5.25016 10.4429 5.25016 10.4148V5.43278L11.9585 6.64222V9.44149C11.6153 9.23469 11.2168 9.11633 10.7918 9.11633C9.50317 9.11633 8.4585 10.2045 8.4585 11.5469C8.4585 12.8892 9.50317 13.9774 10.7918 13.9774C12.0805 13.9774 13.1252 12.8892 13.1252 11.5469V2.58421C13.1252 2.28717 12.919 2.03367 12.6377 1.98483L4.76273 0.617647ZM11.9585 11.5469C11.9585 10.8757 11.4362 10.3316 10.7918 10.3316C10.1475 10.3316 9.62516 10.8757 9.62516 11.5469C9.62516 12.2181 10.1475 12.7622 10.7918 12.7622C11.4362 12.7622 11.9585 12.2181 11.9585 11.5469ZM11.9585 5.40887L5.25016 4.19944V1.93431L11.9585 3.09895V5.40887ZM4.0835 10.3316C4.0835 9.66042 3.56116 9.11633 2.91683 9.11633C2.2725 9.11633 1.75016 9.66042 1.75016 10.3316C1.75016 11.0028 2.2725 11.5469 2.91683 11.5469C3.56116 11.5469 4.0835 11.0028 4.0835 10.3316Z" fill="#013A4B"/>
+</g>
+<defs>
+<clipPath id="clip0_1264_9865">
+<rect width="14" height="14.5833" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/studio/public/icons/timeline/text.svg b/packages/studio/public/icons/timeline/text.svg
new file mode 100644
index 00000000..f43cd0ae
--- /dev/null
+++ b/packages/studio/public/icons/timeline/text.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 3.5V2H10V3.5M4.5 10H7.5M6 2V10" stroke="#024A03" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/studio/src/App.tsx b/packages/studio/src/App.tsx
new file mode 100644
index 00000000..4aa2a393
--- /dev/null
+++ b/packages/studio/src/App.tsx
@@ -0,0 +1,557 @@
+import { useState, useCallback, useRef, useEffect } from "react";
+import { NLELayout } from "./components/nle/NLELayout";
+import { SourceEditor } from "./components/editor/SourceEditor";
+import { FileTree } from "./components/editor/FileTree";
+import {
+  XIcon,
+  CodeIcon,
+  WarningIcon,
+  CheckCircleIcon,
+  CaretRightIcon,
+} from "@phosphor-icons/react";
+
+interface EditingFile {
+  path: string;
+  content: string;
+}
+
+interface ProjectEntry {
+  id: string;
+  title?: string;
+  sessionId?: string;
+}
+
+interface LintFinding {
+  severity: "error" | "warning";
+  message: string;
+  file?: string;
+  fixHint?: string;
+}
+
+// ── Project Picker ──
+
+function ProjectPicker({ onSelect }: { onSelect: (id: string) => void }) {
+  const [projects, setProjects] = useState<ProjectEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch("/api/projects")
+      .then((r) => r.json())
+      .then((data: { projects?: ProjectEntry[] }) => {
+        setProjects(data.projects ?? []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  return (
+    <div className="h-screen w-screen bg-neutral-950 overflow-y-auto">
+      <div className="max-w-lg w-full mx-auto px-4 py-12">
+        <h1 className="text-xl font-semibold text-neutral-200 mb-1">HyperFrames Studio</h1>
+        <p className="text-sm text-neutral-500 mb-6">Select a project to open</p>
+        {loading ? (
+          <div className="text-sm text-neutral-600">Loading projects...</div>
+        ) : projects.length === 0 ? (
+          <div className="text-sm text-neutral-600">No projects found.</div>
+        ) : (
+          <div className="flex flex-col gap-1.5">
+            {projects.map((p) => (
+              <button
+                key={p.id}
+                onClick={() => onSelect(p.id)}
+                className="text-left px-4 py-3 rounded-lg bg-neutral-900 border border-neutral-800 hover:border-neutral-600 hover:bg-neutral-800/80 transition-all group"
+              >
+                <div className="text-sm text-neutral-200 truncate">{p.title ?? p.id}</div>
+                <div className="text-[11px] text-neutral-600 font-mono truncate mt-0.5 group-hover:text-neutral-500">
+                  {p.id}
+                </div>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ── Lint Modal ──
+
+function LintModal({ findings, onClose }: { findings: LintFinding[]; onClose: () => void }) {
+  const errors = findings.filter((f) => f.severity === "error");
+  const warnings = findings.filter((f) => f.severity === "warning");
+  const hasIssues = findings.length > 0;
+
+  return (
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="bg-neutral-950 border border-neutral-800 rounded-xl shadow-2xl w-full max-w-xl max-h-[80vh] flex flex-col overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-4 border-b border-neutral-800">
+          <div className="flex items-center gap-3">
+            {hasIssues ? (
+              <div className="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center">
+                <WarningIcon size={18} className="text-red-400" weight="fill" />
+              </div>
+            ) : (
+              <div className="w-8 h-8 rounded-full bg-green-500/10 flex items-center justify-center">
+                <CheckCircleIcon size={18} className="text-green-400" weight="fill" />
+              </div>
+            )}
+            <div>
+              <h2 className="text-sm font-semibold text-neutral-200">
+                {hasIssues
+                  ? `${errors.length} error${errors.length !== 1 ? "s" : ""}, ${warnings.length} warning${warnings.length !== 1 ? "s" : ""}`
+                  : "All checks passed"}
+              </h2>
+              <p className="text-xs text-neutral-500">HyperFrame Lint Results</p>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-1.5 rounded-lg text-neutral-500 hover:text-neutral-200 hover:bg-neutral-800 transition-colors"
+          >
+            <XIcon size={16} />
+          </button>
+        </div>
+
+        {/* Findings */}
+        <div className="flex-1 overflow-y-auto px-5 py-3">
+          {!hasIssues && (
+            <div className="py-8 text-center text-neutral-500 text-sm">
+              No errors or warnings found. Your composition looks good!
+            </div>
+          )}
+          {errors.map((f, i) => (
+            <div key={`e-${i}`} className="py-3 border-b border-neutral-800/50 last:border-0">
+              <div className="flex items-start gap-2">
+                <WarningIcon
+                  size={14}
+                  className="text-red-400 flex-shrink-0 mt-0.5"
+                  weight="fill"
+                />
+                <div className="min-w-0">
+                  <p className="text-sm text-neutral-200">{f.message}</p>
+                  {f.file && <p className="text-xs text-neutral-600 font-mono mt-0.5">{f.file}</p>}
+                  {f.fixHint && (
+                    <div className="flex items-start gap-1 mt-1.5">
+                      <CaretRightIcon size={10} className="text-blue-400 flex-shrink-0 mt-0.5" />
+                      <p className="text-xs text-blue-400">{f.fixHint}</p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+          {warnings.map((f, i) => (
+            <div key={`w-${i}`} className="py-3 border-b border-neutral-800/50 last:border-0">
+              <div className="flex items-start gap-2">
+                <WarningIcon size={14} className="text-amber-400 flex-shrink-0 mt-0.5" />
+                <div className="min-w-0">
+                  <p className="text-sm text-neutral-300">{f.message}</p>
+                  {f.file && <p className="text-xs text-neutral-600 font-mono mt-0.5">{f.file}</p>}
+                  {f.fixHint && (
+                    <div className="flex items-start gap-1 mt-1.5">
+                      <CaretRightIcon size={10} className="text-blue-400 flex-shrink-0 mt-0.5" />
+                      <p className="text-xs text-blue-400">{f.fixHint}</p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── Main App ──
+
+export function StudioApp() {
+  const [projectId, setProjectId] = useState<string | null>(null);
+  const [resolving, setResolving] = useState(true);
+
+  useEffect(() => {
+    const hash = window.location.hash;
+    const projectMatch = hash.match(/project\/([^/]+)/);
+    const sessionMatch = hash.match(/session\/([^/]+)/);
+    if (projectMatch) {
+      setProjectId(projectMatch[1]);
+      setResolving(false);
+    } else if (sessionMatch) {
+      fetch(`/api/resolve-session/${sessionMatch[1]}`)
+        .then((r) => r.json())
+        .then((data: { projectId?: string }) => {
+          if (data.projectId) {
+            window.location.hash = `#project/${data.projectId}`;
+            setProjectId(data.projectId);
+          }
+          setResolving(false);
+        })
+        .catch(() => setResolving(false));
+    } else {
+      setResolving(false);
+    }
+  }, []);
+
+  const [editingFile, setEditingFile] = useState<EditingFile | null>(null);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [fileTree, setFileTree] = useState<string[]>([]);
+  const [lintModal, setLintModal] = useState<LintFinding[] | null>(null);
+  const [linting, setLinting] = useState(false);
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [renderState, setRenderState] = useState<"idle" | "rendering" | "complete" | "error">(
+    "idle",
+  );
+  const [renderProgress, setRenderProgress] = useState(0);
+  const [renderError, setRenderError] = useState<string | null>(null);
+  const refreshTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const projectIdRef = useRef(projectId);
+
+  // Listen for external file changes (user editing HTML outside the editor)
+  useEffect(() => {
+    if (!import.meta.hot) return;
+    const handler = () => {
+      if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+      refreshTimerRef.current = setTimeout(() => setRefreshKey((k) => k + 1), 400);
+    };
+    import.meta.hot.on("hf:file-change", handler);
+    return () => import.meta.hot?.off?.("hf:file-change", handler);
+  }, []);
+  projectIdRef.current = projectId;
+
+  // Load file tree when projectId changes
+  const prevProjectIdRef = useRef<string | null>(null);
+  if (projectId && projectId !== prevProjectIdRef.current) {
+    prevProjectIdRef.current = projectId;
+    fetch(`/api/projects/${projectId}`)
+      .then((r) => r.json())
+      .then((data: { files?: string[] }) => {
+        if (data.files) setFileTree(data.files);
+      })
+      .catch(() => {});
+  }
+
+  const handleSelectProject = useCallback((id: string) => {
+    window.location.hash = `#project/${id}`;
+    setProjectId(id);
+  }, []);
+
+  const handleFileSelect = useCallback((path: string) => {
+    const pid = projectIdRef.current;
+    if (!pid) return;
+    fetch(`/api/projects/${pid}/files/${encodeURIComponent(path)}`)
+      .then((r) => r.json())
+      .then((data: { content?: string }) => {
+        if (data.content != null) {
+          setEditingFile({ path, content: data.content });
+          setSidebarOpen(true);
+        }
+      })
+      .catch(() => {});
+  }, []);
+
+  const editingPathRef = useRef(editingFile?.path);
+  editingPathRef.current = editingFile?.path;
+
+  const handleContentChange = useCallback((content: string) => {
+    const pid = projectIdRef.current;
+    const path = editingPathRef.current;
+    if (!pid || !path) return;
+    // Don't update editingFile state — the editor manages its own content.
+    // Only save to disk and refresh the preview.
+    fetch(`/api/projects/${pid}/files/${encodeURIComponent(path)}`, {
+      method: "PUT",
+      headers: { "Content-Type": "text/plain" },
+      body: content,
+    })
+      .then(() => {
+        if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+        refreshTimerRef.current = setTimeout(() => setRefreshKey((k) => k + 1), 600);
+      })
+      .catch(() => {});
+  }, []);
+
+  const handleLint = useCallback(async () => {
+    const pid = projectIdRef.current;
+    if (!pid) return;
+    setLinting(true);
+    try {
+      // Fetch all HTML files and lint them client-side using the core linter
+      const res = await fetch(`/api/projects/${pid}`);
+      const data = await res.json();
+      const files: string[] = data.files?.filter((f: string) => f.endsWith(".html")) ?? [];
+
+      const findings: LintFinding[] = [];
+      for (const file of files) {
+        const fileRes = await fetch(`/api/projects/${pid}/files/${encodeURIComponent(file)}`);
+        const fileData = await fileRes.json();
+        if (!fileData.content) continue;
+
+        // Basic lint checks (subset of the full linter)
+        const html = fileData.content as string;
+
+        if (file === "index.html") {
+          // Check for root composition
+          if (!html.includes("data-composition-id")) {
+            findings.push({
+              severity: "error",
+              message: "No element with `data-composition-id` found.",
+              file,
+              fixHint: "Add `data-composition-id` to the root composition wrapper.",
+            });
+          }
+          // Check for timeline registration
+          if (!html.includes("__timelines")) {
+            findings.push({
+              severity: "error",
+              message: "Missing `window.__timelines` registration.",
+              file,
+              fixHint: 'Add: window.__timelines["compositionId"] = tl;',
+            });
+          }
+          // Check for TARGET_DURATION
+          if (
+            html.includes("gsap.timeline") &&
+            !html.includes("TARGET_DURATION") &&
+            !html.includes("tl.set({}, {},")
+          ) {
+            findings.push({
+              severity: "warning",
+              message: "No TARGET_DURATION spacer found. Video may be shorter than intended.",
+              file,
+              fixHint:
+                "Add: const TARGET_DURATION = 30; if (tl.duration() < TARGET_DURATION) { tl.set({}, {}, TARGET_DURATION); }",
+            });
+          }
+        }
+
+        // Check for composition hosts missing dimensions
+        const hostRe = /data-composition-src=["']([^"']+)["']/g;
+        let hostMatch;
+        while ((hostMatch = hostRe.exec(html)) !== null) {
+          const surrounding = html.slice(
+            Math.max(0, hostMatch.index - 300),
+            hostMatch.index + hostMatch[0].length + 50,
+          );
+          const hasDataDims =
+            /data-width\s*=/i.test(surrounding) && /data-height\s*=/i.test(surrounding);
+          const hasStyleDims = /style\s*=.*width:\s*\d+px.*height:\s*\d+px/i.test(surrounding);
+          if (!hasDataDims && !hasStyleDims) {
+            findings.push({
+              severity: "warning",
+              message: `Composition host for "${hostMatch[1]}" missing data-width/data-height. May render with zero dimensions.`,
+              file,
+              fixHint:
+                'Add data-width="1920" data-height="1080" style="position:relative;width:1920px;height:1080px"',
+            });
+          }
+        }
+
+        // Check for repeat: -1
+        if (/repeat\s*:\s*-\s*1/.test(html)) {
+          findings.push({
+            severity: "error",
+            message: "GSAP `repeat: -1` found — infinite loop breaks timeline duration.",
+            file,
+            fixHint: "Use a finite repeat count or CSS animation.",
+          });
+        }
+
+        // Check script syntax
+        const scriptRe = /<script\b(?![^>]*\bsrc\s*=)[^>]*>([\s\S]*?)<\/script>/gi;
+        let scriptMatch;
+        while ((scriptMatch = scriptRe.exec(html)) !== null) {
+          const js = scriptMatch[1]?.trim();
+          if (!js) continue;
+          try {
+            new Function(js);
+          } catch (e) {
+            findings.push({
+              severity: "error",
+              message: `Script syntax error: ${e instanceof Error ? e.message : String(e)}`,
+              file,
+            });
+          }
+        }
+      }
+
+      setLintModal(findings);
+    } catch {
+      setLintModal([{ severity: "error", message: "Failed to run lint." }]);
+    } finally {
+      setLinting(false);
+    }
+  }, []);
+
+  const handleRender = useCallback(async () => {
+    const pid = projectIdRef.current;
+    if (!pid || renderState === "rendering") return;
+    setRenderState("rendering");
+    setRenderProgress(0);
+    setRenderError(null);
+    try {
+      // Start render via archive backend (proxied through studio dev server)
+      const res = await fetch(`/api/projects/${pid}/render`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({}),
+      });
+      if (!res.ok) throw new Error(`Render failed: ${res.status}`);
+      const { jobId } = await res.json();
+
+      // Subscribe to progress via SSE
+      const eventSource = new EventSource(`/api/render/${jobId}/progress`);
+      eventSource.addEventListener("progress", (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          setRenderProgress(data.progress ?? 0);
+          if (data.status === "complete") {
+            setRenderState("complete");
+            eventSource.close();
+            // Auto-download
+            window.open(`/api/render/${jobId}/download`, "_blank");
+          } else if (data.status === "failed") {
+            setRenderState("error");
+            setRenderError(data.error || "Render failed");
+            eventSource.close();
+          }
+        } catch {
+          /* ignore */
+        }
+      });
+      eventSource.onerror = () => {
+        setRenderState("error");
+        setRenderError("Lost connection to render server");
+        eventSource.close();
+      };
+    } catch (err) {
+      setRenderState("error");
+      setRenderError(err instanceof Error ? err.message : "Render failed");
+    }
+  }, [renderState]);
+
+  if (resolving) {
+    return (
+      <div className="h-screen w-screen bg-neutral-950 flex items-center justify-center">
+        <div className="text-sm text-neutral-500">Loading...</div>
+      </div>
+    );
+  }
+
+  if (!projectId) {
+    return <ProjectPicker onSelect={handleSelectProject} />;
+  }
+
+  return (
+    <div className="flex h-screen w-screen bg-neutral-950">
+      {/* NLE: Preview + Timeline */}
+      <div className="flex-1 relative min-w-0">
+        <NLELayout
+          projectId={projectId}
+          refreshKey={refreshKey}
+          activeCompositionPath={
+            editingFile?.path?.startsWith("compositions/") ? editingFile.path : null
+          }
+        />
+      </div>
+
+      {/* Action buttons — positioned based on sidebar state */}
+      {!sidebarOpen && (
+        <div className="absolute top-3 right-3 z-50 flex items-center gap-1.5">
+          <button
+            onClick={() => setSidebarOpen(true)}
+            className="h-8 px-3 rounded-lg bg-neutral-900 border border-neutral-800 text-neutral-500 hover:text-neutral-200 transition-colors flex items-center justify-center"
+            title="Source editor"
+          >
+            <CodeIcon size={16} />
+          </button>
+          <button
+            onClick={handleLint}
+            disabled={linting}
+            className="h-8 px-3 rounded-lg bg-neutral-900 border border-neutral-800 text-xs font-medium text-neutral-400 hover:text-amber-300 hover:border-amber-800/50 transition-colors disabled:opacity-40"
+          >
+            {linting ? "Linting..." : "Lint"}
+          </button>
+          <button
+            onClick={handleRender}
+            disabled={renderState === "rendering"}
+            className="h-8 px-3 rounded-lg bg-blue-600 border border-blue-500 text-xs font-semibold text-white hover:bg-blue-500 transition-colors disabled:opacity-60 tabular-nums"
+          >
+            {renderState === "rendering"
+              ? `${Math.round(renderProgress)}%`
+              : renderState === "complete"
+                ? "Done!"
+                : "Export MP4"}
+          </button>
+        </div>
+      )}
+
+      {/* Source editor sidebar */}
+      {sidebarOpen && (
+        <div className="w-[420px] flex flex-col border-l border-neutral-800 bg-neutral-900">
+          <div className="flex items-center justify-between px-3 py-2 border-b border-neutral-800 gap-2">
+            <span className="text-xs font-medium text-neutral-500 truncate min-w-0 flex-1">
+              {editingFile?.path ?? "Source"}
+            </span>
+            <div className="flex items-center gap-1.5 flex-shrink-0">
+              <button
+                onClick={handleLint}
+                disabled={linting}
+                className="px-2 py-1 rounded text-[11px] font-medium text-neutral-500 hover:text-amber-300 transition-colors disabled:opacity-40"
+              >
+                {linting ? "..." : "Lint"}
+              </button>
+              <button
+                onClick={handleRender}
+                disabled={renderState === "rendering"}
+                className="px-2 py-1 rounded text-[11px] font-semibold text-blue-400 hover:text-blue-300 transition-colors disabled:opacity-60 tabular-nums"
+              >
+                {renderState === "rendering" ? `${Math.round(renderProgress)}%` : "Export MP4"}
+              </button>
+              <button
+                onClick={() => setSidebarOpen(false)}
+                className="p-1 rounded text-neutral-600 hover:text-neutral-200 hover:bg-neutral-800 transition-colors"
+                title="Close source panel"
+              >
+                <XIcon size={14} />
+              </button>
+            </div>
+          </div>
+
+          {fileTree.length > 0 && (
+            <div className="border-b border-neutral-800 max-h-40 overflow-y-auto">
+              <FileTree
+                files={fileTree}
+                activeFile={editingFile?.path ?? null}
+                onSelectFile={handleFileSelect}
+              />
+            </div>
+          )}
+
+          <div className="flex-1 overflow-hidden">
+            {editingFile ? (
+              <SourceEditor
+                content={editingFile.content}
+                filePath={editingFile.path}
+                onChange={handleContentChange}
+              />
+            ) : (
+              <div className="flex items-center justify-center h-full text-neutral-600 text-sm">
+                Select a file to edit
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Lint modal */}
+      {lintModal !== null && <LintModal findings={lintModal} onClose={() => setLintModal(null)} />}
+    </div>
+  );
+}
diff --git a/packages/studio/src/components/editor/FileTree.tsx b/packages/studio/src/components/editor/FileTree.tsx
new file mode 100644
index 00000000..31d3f8aa
--- /dev/null
+++ b/packages/studio/src/components/editor/FileTree.tsx
@@ -0,0 +1,70 @@
+import { memo } from "react";
+import { FileCode, Image, Film, Music, File } from "../../icons/SystemIcons";
+
+interface FileTreeProps {
+  files: string[];
+  activeFile: string | null;
+  onSelectFile: (path: string) => void;
+}
+
+const FILE_ICONS: Record<string, { icon: typeof File; color: string }> = {
+  html: { icon: FileCode, color: "#3B82F6" },
+  css: { icon: FileCode, color: "#A855F7" },
+  js: { icon: FileCode, color: "#F59E0B" },
+  ts: { icon: FileCode, color: "#3B82F6" },
+  json: { icon: File, color: "#22C55E" },
+  png: { icon: Image, color: "#22C55E" },
+  jpg: { icon: Image, color: "#22C55E" },
+  svg: { icon: Image, color: "#F97316" },
+  mp4: { icon: Film, color: "#A855F7" },
+  mp3: { icon: Music, color: "#F59E0B" },
+  wav: { icon: Music, color: "#F59E0B" },
+};
+
+function getFileIcon(path: string) {
+  const ext = path.split(".").pop()?.toLowerCase() ?? "";
+  return FILE_ICONS[ext] ?? { icon: File, color: "#737373" };
+}
+
+export const FileTree = memo(function FileTree({ files, activeFile, onSelectFile }: FileTreeProps) {
+  const sorted = [...files].sort((a, b) => {
+    // index.html first, then alphabetical
+    if (a === "index.html") return -1;
+    if (b === "index.html") return 1;
+    return a.localeCompare(b);
+  });
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      <div className="px-2.5 py-1.5 border-b border-neutral-800 flex-shrink-0">
+        <span className="text-2xs font-medium text-neutral-500 uppercase tracking-caps">Files</span>
+      </div>
+      <div className="flex-1 overflow-y-auto py-1">
+        {sorted.map((path) => {
+          const { icon: Icon, color } = getFileIcon(path);
+          const isActive = path === activeFile;
+          const name = path.split("/").pop() ?? path;
+          const dir = path.includes("/") ? path.split("/").slice(0, -1).join("/") + "/" : "";
+
+          return (
+            <button
+              key={path}
+              onClick={() => onSelectFile(path)}
+              className={`w-full flex items-center gap-2 px-2.5 py-1 min-h-7 text-left transition-all duration-press text-xs ${
+                isActive
+                  ? "bg-neutral-800/60 text-neutral-200"
+                  : "text-neutral-500 hover:bg-neutral-800/30 hover:text-neutral-300 active:scale-[0.98]"
+              }`}
+            >
+              <Icon size={12} style={{ color }} className="flex-shrink-0" />
+              <span className="truncate">
+                {dir && <span className="text-neutral-600">{dir}</span>}
+                {name}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+});
diff --git a/packages/studio/src/components/editor/PropertyPanel.tsx b/packages/studio/src/components/editor/PropertyPanel.tsx
new file mode 100644
index 00000000..7ab4cadb
--- /dev/null
+++ b/packages/studio/src/components/editor/PropertyPanel.tsx
@@ -0,0 +1,209 @@
+import { memo } from "react";
+import { X, MousePointer, Move, Type, Palette, Clock, Eye } from "../../icons/SystemIcons";
+import { Button, IconButton } from "../ui";
+import type { PickedElement } from "../../hooks/useElementPicker";
+
+interface PropertyPanelProps {
+  element: PickedElement | null;
+  isPickMode: boolean;
+  onEnablePick: () => void;
+  onDisablePick: () => void;
+  onClearPick: () => void;
+  onSetStyle: (prop: string, value: string) => void;
+  onSetDataAttr: (attr: string, value: string) => void;
+  onSetText?: (text: string) => void;
+}
+
+function PropertyRow({ label, value, onChange }: { label: string; value: string; onChange: (v: string) => void }) {
+  return (
+    <div className="flex items-center gap-2">
+      <span className="text-2xs text-neutral-600 w-16 flex-shrink-0 text-right">{label}</span>
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="flex-1 bg-neutral-900 border border-neutral-800 rounded px-1.5 py-0.5 text-2xs text-neutral-200 font-mono outline-none focus:border-neutral-600 min-w-0"
+      />
+    </div>
+  );
+}
+
+function ColorRow({ label, value, onChange }: { label: string; value: string; onChange: (v: string) => void }) {
+  return (
+    <div className="flex items-center gap-2">
+      <span className="text-2xs text-neutral-600 w-16 flex-shrink-0 text-right">{label}</span>
+      <div className="flex items-center gap-1 flex-1">
+        <div className="w-5 h-5 rounded border border-neutral-700 flex-shrink-0" style={{ backgroundColor: value }} />
+        <input
+          type="text"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          className="flex-1 bg-neutral-900 border border-neutral-800 rounded px-1.5 py-0.5 text-2xs text-neutral-200 font-mono outline-none focus:border-neutral-600 min-w-0"
+        />
+      </div>
+    </div>
+  );
+}
+
+function SectionHeader({ icon: Icon, label }: { icon: typeof Move; label: string }) {
+  return (
+    <div className="flex items-center gap-1.5 mt-2 mb-1">
+      <Icon size={10} className="text-neutral-600" />
+      <span className="text-2xs font-medium text-neutral-500 uppercase tracking-wider">{label}</span>
+    </div>
+  );
+}
+
+export const PropertyPanel = memo(function PropertyPanel({
+  element,
+  isPickMode,
+  onEnablePick,
+  onDisablePick,
+  onClearPick,
+  onSetStyle,
+  onSetDataAttr,
+  onSetText,
+}: PropertyPanelProps) {
+  if (!element) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full px-4 text-center">
+        <MousePointer size={20} className="text-neutral-700 mb-2" />
+        <p className="text-xs text-neutral-500">Click an element in the preview to inspect it</p>
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={isPickMode ? onDisablePick : onEnablePick}
+          className={`mt-3 ${isPickMode ? "bg-blue-500/20 text-blue-400 border-blue-500/30" : ""}`}
+        >
+          {isPickMode ? "Pick mode active..." : "Enable Pick Mode"}
+        </Button>
+      </div>
+    );
+  }
+
+  const s = element.computedStyles;
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 py-2 border-b border-neutral-800 flex-shrink-0">
+        <div className="flex items-center gap-1.5 min-w-0">
+          <span className="text-2xs font-mono text-blue-400 truncate">{element.selector}</span>
+        </div>
+        <div className="flex items-center gap-1">
+          <IconButton
+            icon={<MousePointer size={11} />}
+            aria-label={isPickMode ? "Disable pick mode" : "Enable pick mode"}
+            size="sm"
+            onClick={isPickMode ? onDisablePick : onEnablePick}
+            className={isPickMode ? "text-blue-400 bg-blue-500/10" : ""}
+          />
+          <IconButton icon={<X size={11} />} aria-label="Clear selection" size="sm" onClick={onClearPick} />
+        </div>
+      </div>
+
+      {/* Properties */}
+      <div className="flex-1 overflow-y-auto px-3 py-2 space-y-1">
+        {/* Element info */}
+        <div className="flex items-center gap-2 mb-2">
+          <span className="text-2xs text-neutral-300 font-medium">{element.label}</span>
+          <span className="text-2xs text-neutral-600 font-mono">&lt;{element.tagName}&gt;</span>
+        </div>
+
+        {/* Position & Size */}
+        <SectionHeader icon={Move} label="Position & Size" />
+        <div className="grid grid-cols-2 gap-1">
+          <PropertyRow label="X" value={s["left"] ?? "auto"} onChange={(v) => onSetStyle("left", v)} />
+          <PropertyRow label="Y" value={s["top"] ?? "auto"} onChange={(v) => onSetStyle("top", v)} />
+          <PropertyRow label="W" value={s["width"] ?? "auto"} onChange={(v) => onSetStyle("width", v)} />
+          <PropertyRow label="H" value={s["height"] ?? "auto"} onChange={(v) => onSetStyle("height", v)} />
+        </div>
+
+        {/* Typography */}
+        {(element.tagName === "div" ||
+          element.tagName === "span" ||
+          element.tagName === "p" ||
+          element.tagName === "h1" ||
+          element.tagName === "h2") && (
+          <>
+            <SectionHeader icon={Type} label="Typography" />
+            <PropertyRow label="Size" value={s["font-size"] ?? ""} onChange={(v) => onSetStyle("font-size", v)} />
+            <PropertyRow label="Weight" value={s["font-weight"] ?? ""} onChange={(v) => onSetStyle("font-weight", v)} />
+            <PropertyRow
+              label="Family"
+              value={s["font-family"]?.split(",")[0] ?? ""}
+              onChange={(v) => onSetStyle("font-family", v)}
+            />
+          </>
+        )}
+
+        {/* Colors */}
+        <SectionHeader icon={Palette} label="Colors" />
+        <ColorRow label="Color" value={s["color"] ?? "#fff"} onChange={(v) => onSetStyle("color", v)} />
+        <ColorRow
+          label="Background"
+          value={s["background-color"] ?? "transparent"}
+          onChange={(v) => onSetStyle("background-color", v)}
+        />
+
+        {/* Appearance */}
+        <SectionHeader icon={Eye} label="Appearance" />
+        <PropertyRow label="Opacity" value={s["opacity"] ?? "1"} onChange={(v) => onSetStyle("opacity", v)} />
+        <PropertyRow
+          label="Radius"
+          value={s["border-radius"] ?? "0"}
+          onChange={(v) => onSetStyle("border-radius", v)}
+        />
+        <PropertyRow label="Z-index" value={s["z-index"] ?? "auto"} onChange={(v) => onSetStyle("z-index", v)} />
+        <PropertyRow label="Transform" value={s["transform"] ?? "none"} onChange={(v) => onSetStyle("transform", v)} />
+
+        {/* Timing */}
+        {(element.dataAttributes["start"] || element.dataAttributes["duration"]) && (
+          <>
+            <SectionHeader icon={Clock} label="Timing" />
+            {element.dataAttributes["start"] != null && (
+              <PropertyRow
+                label="Start"
+                value={element.dataAttributes["start"]}
+                onChange={(v) => onSetDataAttr("start", v)}
+              />
+            )}
+            {element.dataAttributes["duration"] != null && (
+              <PropertyRow
+                label="Duration"
+                value={element.dataAttributes["duration"]}
+                onChange={(v) => onSetDataAttr("duration", v)}
+              />
+            )}
+            {element.dataAttributes["track-index"] != null && (
+              <PropertyRow
+                label="Track"
+                value={element.dataAttributes["track-index"]}
+                onChange={(v) => onSetDataAttr("track-index", v)}
+              />
+            )}
+          </>
+        )}
+
+        {/* Editable text content */}
+        {element.textContent && (
+          <>
+            <SectionHeader icon={Type} label="Text Content" />
+            <textarea
+              defaultValue={element.textContent}
+              onBlur={(e) => onSetText?.(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && e.metaKey) {
+                  (e.target as HTMLTextAreaElement).blur();
+                }
+              }}
+              rows={3}
+              className="w-full bg-neutral-900 border border-neutral-800 rounded px-2 py-1.5 text-xs text-neutral-200 outline-none focus:border-neutral-600 resize-y leading-relaxed"
+              placeholder="Edit text..."
+            />
+          </>
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/packages/studio/src/components/editor/SourceEditor.tsx b/packages/studio/src/components/editor/SourceEditor.tsx
new file mode 100644
index 00000000..97b204ac
--- /dev/null
+++ b/packages/studio/src/components/editor/SourceEditor.tsx
@@ -0,0 +1,116 @@
+import { useRef, useCallback, memo } from "react";
+import { EditorView, keymap, lineNumbers, highlightActiveLine, highlightActiveLineGutter } from "@codemirror/view";
+import { EditorState } from "@codemirror/state";
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import { bracketMatching, foldGutter, indentOnInput } from "@codemirror/language";
+import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
+import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
+import { oneDark } from "@codemirror/theme-one-dark";
+import { html } from "@codemirror/lang-html";
+import { css } from "@codemirror/lang-css";
+import { javascript } from "@codemirror/lang-javascript";
+
+function getLanguageExtension(language: string) {
+  switch (language) {
+    case "html":
+      return html();
+    case "css":
+      return css();
+    case "javascript":
+    case "js":
+    case "typescript":
+    case "ts":
+      return javascript({ typescript: language === "typescript" || language === "ts" });
+    default:
+      return html();
+  }
+}
+
+function detectLanguage(filePath: string): string {
+  const ext = filePath.split(".").pop()?.toLowerCase() ?? "";
+  const map: Record<string, string> = {
+    html: "html",
+    htm: "html",
+    css: "css",
+    js: "javascript",
+    ts: "typescript",
+    jsx: "javascript",
+    tsx: "typescript",
+    json: "javascript",
+  };
+  return map[ext] ?? "html";
+}
+
+interface SourceEditorProps {
+  content: string;
+  filePath?: string;
+  language?: string;
+  onChange?: (content: string) => void;
+  readOnly?: boolean;
+}
+
+export const SourceEditor = memo(function SourceEditor({
+  content,
+  filePath,
+  language,
+  onChange,
+  readOnly = false,
+}: SourceEditorProps) {
+  const editorRef = useRef<EditorView | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  const mountEditor = useCallback(
+    (node: HTMLDivElement | null) => {
+      if (editorRef.current) {
+        editorRef.current.destroy();
+        editorRef.current = null;
+      }
+      if (!node) return;
+      containerRef.current = node;
+
+      const lang = language ?? (filePath ? detectLanguage(filePath) : "html");
+
+      const updateListener = EditorView.updateListener.of((update) => {
+        if (update.docChanged && onChangeRef.current) {
+          onChangeRef.current(update.state.doc.toString());
+        }
+      });
+
+      const state = EditorState.create({
+        doc: content,
+        extensions: [
+          lineNumbers(),
+          highlightActiveLine(),
+          highlightActiveLineGutter(),
+          history(),
+          foldGutter(),
+          indentOnInput(),
+          bracketMatching(),
+          closeBrackets(),
+          highlightSelectionMatches(),
+          keymap.of([
+            ...closeBracketsKeymap,
+            ...defaultKeymap,
+            ...searchKeymap,
+            ...historyKeymap,
+          ]),
+          getLanguageExtension(lang),
+          oneDark,
+          updateListener,
+          EditorState.readOnly.of(readOnly),
+          EditorView.theme({
+            "&": { height: "100%" },
+            ".cm-scroller": { overflow: "auto" },
+          }),
+        ],
+      });
+
+      editorRef.current = new EditorView({ state, parent: node });
+    },
+    [content, filePath, language, readOnly],
+  );
+
+  return <div ref={mountEditor} className="h-full w-full overflow-hidden" />;
+});
diff --git a/packages/studio/src/components/nle/CompositionBreadcrumb.tsx b/packages/studio/src/components/nle/CompositionBreadcrumb.tsx
new file mode 100644
index 00000000..7165042a
--- /dev/null
+++ b/packages/studio/src/components/nle/CompositionBreadcrumb.tsx
@@ -0,0 +1,57 @@
+import { ArrowLeft, CaretRight } from "@phosphor-icons/react";
+
+export interface CompositionLevel {
+  /** Unique id — "master" or composition file path */
+  id: string;
+  /** Display label — "Master" or filename without extension */
+  label: string;
+  /** Preview URL for this composition level */
+  previewUrl: string;
+}
+
+interface CompositionBreadcrumbProps {
+  stack: CompositionLevel[];
+  onNavigate: (index: number) => void;
+}
+
+export function CompositionBreadcrumb({ stack, onNavigate }: CompositionBreadcrumbProps) {
+  if (stack.length <= 1) return null;
+
+  return (
+    <nav
+      aria-label="Composition navigation"
+      className="flex items-center gap-1 px-2 h-8 border-b border-neutral-800/50 bg-neutral-900/50 flex-shrink-0"
+    >
+      {/* Back button — always goes to parent */}
+      <button
+        type="button"
+        onClick={() => onNavigate(stack.length - 2)}
+        className="flex items-center gap-1 px-1.5 py-0.5 rounded text-xs text-neutral-400 hover:text-white hover:bg-neutral-800 transition-colors"
+        title="Back (Esc)"
+      >
+        <ArrowLeft size={12} weight="bold" />
+      </button>
+
+      {/* Breadcrumb path */}
+      {stack.map((level, i) => {
+        const isLast = i === stack.length - 1;
+        return (
+          <span key={level.id} className="flex items-center gap-1">
+            {i > 0 && <CaretRight size={10} className="text-neutral-600 flex-shrink-0" />}
+            {isLast ? (
+              <span className="text-xs text-neutral-200 font-medium">{level.label}</span>
+            ) : (
+              <button
+                type="button"
+                onClick={() => onNavigate(i)}
+                className="text-xs text-neutral-500 hover:text-neutral-200 transition-colors"
+              >
+                {level.label}
+              </button>
+            )}
+          </span>
+        );
+      })}
+    </nav>
+  );
+}
diff --git a/packages/studio/src/components/nle/NLELayout.tsx b/packages/studio/src/components/nle/NLELayout.tsx
new file mode 100644
index 00000000..6fc5720e
--- /dev/null
+++ b/packages/studio/src/components/nle/NLELayout.tsx
@@ -0,0 +1,252 @@
+import { useState, useEffect, useCallback, useRef, memo, type ReactNode } from "react";
+import { useTimelinePlayer, PlayerControls, Timeline, usePlayerStore } from "../../player";
+import type { TimelineElement } from "../../player";
+import { NLEPreview } from "./NLEPreview";
+import { CompositionBreadcrumb, type CompositionLevel } from "./CompositionBreadcrumb";
+
+interface NLELayoutProps {
+  projectId: string;
+  portrait?: boolean;
+  /** Slot for overlays rendered on top of the preview (cursors, highlights, etc.) */
+  previewOverlay?: ReactNode;
+  /** Slot rendered below the timeline tracks (e.g., agent activity swim lanes) */
+  timelineFooter?: ReactNode;
+  /** Increment to force the preview to reload (e.g., after file writes) */
+  refreshKey?: number;
+  /** Navigate to a specific composition path (e.g., "compositions/intro.html") */
+  activeCompositionPath?: string | null;
+  /** Callback to expose the iframe ref (for element picker, etc.) */
+  onIframeRef?: (iframe: HTMLIFrameElement | null) => void;
+}
+
+const MIN_TIMELINE_H = 100;
+const DEFAULT_TIMELINE_H = 220;
+const MIN_PREVIEW_H = 120;
+
+export const NLELayout = memo(function NLELayout({
+  projectId,
+  portrait,
+  previewOverlay,
+  timelineFooter,
+  refreshKey,
+  activeCompositionPath,
+  onIframeRef,
+}: NLELayoutProps) {
+  const { iframeRef, togglePlay, seek, onIframeLoad: baseOnIframeLoad, saveSeekPosition } = useTimelinePlayer();
+
+  // Preserve seek position when refreshKey changes (iframe will remount via key prop).
+  const prevRefreshKeyRef = useRef(refreshKey);
+  if (refreshKey !== prevRefreshKeyRef.current) {
+    prevRefreshKeyRef.current = refreshKey;
+    saveSeekPosition();
+  }
+
+  // Wrap onIframeLoad to also notify parent of iframe ref
+  const onIframeLoad = useCallback(() => {
+    baseOnIframeLoad();
+    onIframeRef?.(iframeRef.current);
+  }, [baseOnIframeLoad, iframeRef, onIframeRef]);
+
+  // Composition ID → actual file path mapping, built from the raw index.html
+  const [compIdToSrc, setCompIdToSrc] = useState<Map<string, string>>(new Map());
+  useEffect(() => {
+    fetch(`/api/projects/${projectId}/files/index.html`)
+      .then((r) => r.json())
+      .then((data: { content?: string }) => {
+        const html = data.content || "";
+        const map = new Map<string, string>();
+        const re = /data-composition-id=["']([^"']+)["'][^>]*data-composition-src=["']([^"']+)["']|data-composition-src=["']([^"']+)["'][^>]*data-composition-id=["']([^"']+)["']/g;
+        let match;
+        while ((match = re.exec(html)) !== null) {
+          const id = match[1] || match[4];
+          const src = match[2] || match[3];
+          if (id && src) map.set(id, src);
+        }
+        setCompIdToSrc(map);
+      })
+      .catch(() => {});
+  }, [projectId]);
+
+  // Composition drill-down stack
+  const [compositionStack, setCompositionStack] = useState<CompositionLevel[]>([
+    { id: "master", label: "Master", previewUrl: `/api/projects/${projectId}/preview` },
+  ]);
+
+  // Resizable timeline height
+  const [timelineH, setTimelineH] = useState(DEFAULT_TIMELINE_H);
+  const isDragging = useRef(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Current preview URL — derived from composition stack
+  const currentLevel = compositionStack[compositionStack.length - 1];
+  const directUrl = compositionStack.length > 1 ? currentLevel.previewUrl : undefined;
+
+  // Drill-down: push a sub-composition onto the stack
+  const iframeRef_ = iframeRef; // stable ref for the callback
+  const handleDrillDown = useCallback(
+    (element: TimelineElement) => {
+      if (!element.compositionSrc) return;
+      // compositionSrc may be a full URL (from runtime manifest) or a relative path
+      // Extract the element's composition ID from its timeline ID
+      const compId = element.id;
+
+      // 1. Check compIdToSrc map (from index.html)
+      // 2. Scan the current iframe DOM for data-composition-src attribute
+      // 3. Fall back to stripping the compositionSrc to a relative path
+      let resolvedPath = compIdToSrc.get(compId);
+      if (!resolvedPath) {
+        try {
+          const doc = iframeRef_.current?.contentDocument;
+          if (doc) {
+            const host = doc.querySelector(`[data-composition-id="${compId}"][data-composition-src]`);
+            if (host) {
+              resolvedPath = host.getAttribute("data-composition-src") || undefined;
+            }
+          }
+        } catch { /* cross-origin */ }
+      }
+      if (!resolvedPath) {
+        // Strip full URL to relative path if needed
+        const src = element.compositionSrc;
+        const compMatch = src.match(/compositions\/.*\.html/);
+        resolvedPath = compMatch ? compMatch[0] : src;
+      }
+
+      usePlayerStore.getState().setElements([]);
+
+      // Toggle: if already viewing this composition, go back to parent (like Premiere)
+      setCompositionStack((prev) => {
+        const currentId = prev[prev.length - 1].id;
+        if (currentId === resolvedPath && prev.length > 1) {
+          return prev.slice(0, -1);
+        }
+        // Extract a clean label from the path (strip directories and extension)
+        const label = resolvedPath.split("/").pop()?.replace(/\.html$/, "") || resolvedPath;
+        const previewUrl = `/api/projects/${projectId}/preview/comp/${resolvedPath}`;
+        return [...prev, { id: resolvedPath, label, previewUrl }];
+      });
+    },
+    [projectId, compIdToSrc],
+  );
+
+  // Navigate back to a specific breadcrumb level
+  const handleNavigateComposition = useCallback(
+    (index: number) => {
+      usePlayerStore.getState().setElements([]);
+      setCompositionStack((prev) => prev.slice(0, index + 1));
+    },
+    [],
+  );
+
+  // Navigate to a composition when activeCompositionPath changes
+  const prevActiveCompRef = useRef<string | null>(null);
+  if (activeCompositionPath && activeCompositionPath !== prevActiveCompRef.current) {
+    prevActiveCompRef.current = activeCompositionPath;
+    queueMicrotask(() => usePlayerStore.getState().setElements([]));
+    if (activeCompositionPath === "index.html") {
+      setCompositionStack((prev) => prev.length > 1 ? [prev[0]] : prev);
+    } else if (activeCompositionPath.startsWith("compositions/")) {
+      const label = activeCompositionPath.replace(/^compositions\//, "").replace(/\.html$/, "");
+      const previewUrl = `/api/projects/${projectId}/preview/comp/${activeCompositionPath}`;
+      setCompositionStack((prev) => {
+        if (prev[prev.length - 1].id === activeCompositionPath) return prev;
+        return [
+          { id: "master", label: "Master", previewUrl: `/api/projects/${projectId}/preview` },
+          { id: activeCompositionPath, label, previewUrl },
+        ];
+      });
+    }
+  } else if (!activeCompositionPath && prevActiveCompRef.current) {
+    prevActiveCompRef.current = null;
+    queueMicrotask(() => usePlayerStore.getState().setElements([]));
+  }
+
+  // Resize divider handlers
+  const handleDividerPointerDown = useCallback((e: React.PointerEvent) => {
+    e.preventDefault();
+    isDragging.current = true;
+    (e.target as HTMLElement).setPointerCapture(e.pointerId);
+  }, []);
+
+  const handleDividerPointerMove = useCallback((e: React.PointerEvent) => {
+    if (!isDragging.current || !containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const mouseY = e.clientY - rect.top;
+    const containerH = rect.height;
+    const newTimelineH = Math.max(
+      MIN_TIMELINE_H,
+      Math.min(containerH - MIN_PREVIEW_H, containerH - mouseY),
+    );
+    setTimelineH(newTimelineH);
+  }, []);
+
+  const handleDividerPointerUp = useCallback(() => {
+    isDragging.current = false;
+  }, []);
+
+  // Keyboard: Escape to pop composition level
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape" && compositionStack.length > 1) {
+        setCompositionStack((prev) => prev.slice(0, -1));
+      }
+    },
+    [compositionStack.length],
+  );
+
+  return (
+    <div
+      ref={containerRef}
+      className="flex flex-col h-full min-h-0 bg-neutral-950"
+      onKeyDown={handleKeyDown}
+      tabIndex={-1}
+    >
+      {/* Preview — takes remaining space above timeline */}
+      <div className="flex-1 min-h-0 relative">
+        <NLEPreview
+          projectId={projectId}
+          iframeRef={iframeRef}
+          onIframeLoad={onIframeLoad}
+          portrait={portrait}
+          directUrl={directUrl}
+          refreshKey={refreshKey}
+        />
+        {previewOverlay}
+      </div>
+
+      {/* Resize divider */}
+      <div
+        className="h-1 flex-shrink-0 bg-neutral-800 hover:bg-blue-500 cursor-row-resize transition-colors active:bg-blue-400 z-10"
+        style={{ touchAction: "none" }}
+        onPointerDown={handleDividerPointerDown}
+        onPointerMove={handleDividerPointerMove}
+        onPointerUp={handleDividerPointerUp}
+      />
+
+      {/* Timeline section — fixed height, resizable */}
+      <div className="flex flex-col flex-shrink-0" style={{ height: timelineH }}>
+        {/* Breadcrumb + Player controls */}
+        <div className="bg-neutral-950 border-t border-neutral-800/50 flex-shrink-0">
+          {compositionStack.length > 1 && (
+            <CompositionBreadcrumb stack={compositionStack} onNavigate={handleNavigateComposition} />
+          )}
+          <PlayerControls onTogglePlay={togglePlay} onSeek={seek} />
+        </div>
+
+        {/* Timeline tracks */}
+        <div
+          className="flex-1 min-h-0 overflow-y-auto bg-neutral-950"
+          onDoubleClick={(e) => {
+            if ((e.target as HTMLElement).closest("[data-clip]")) return;
+            if (compositionStack.length > 1) {
+              setCompositionStack((prev) => prev.slice(0, -1));
+            }
+          }}
+        >
+          <Timeline onSeek={seek} onDrillDown={handleDrillDown} />
+          {timelineFooter}
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/packages/studio/src/components/nle/NLEPreview.tsx b/packages/studio/src/components/nle/NLEPreview.tsx
new file mode 100644
index 00000000..c0722909
--- /dev/null
+++ b/packages/studio/src/components/nle/NLEPreview.tsx
@@ -0,0 +1,37 @@
+import { memo, type Ref } from "react";
+import { Player } from "../../player";
+
+interface NLEPreviewProps {
+  projectId: string;
+  iframeRef: Ref<HTMLIFrameElement>;
+  onIframeLoad: () => void;
+  portrait?: boolean;
+  directUrl?: string;
+  refreshKey?: number;
+}
+
+export const NLEPreview = memo(function NLEPreview({
+  projectId,
+  iframeRef,
+  onIframeLoad,
+  portrait,
+  directUrl,
+  refreshKey,
+}: NLEPreviewProps) {
+  const playerKey = `${directUrl ?? projectId}_${refreshKey ?? 0}`;
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      <div className="flex-1 flex items-center justify-center p-2 overflow-hidden min-h-0">
+        <Player
+          key={playerKey}
+          ref={iframeRef}
+          projectId={directUrl ? undefined : projectId}
+          directUrl={directUrl}
+          onLoad={onIframeLoad}
+          portrait={portrait}
+        />
+      </div>
+    </div>
+  );
+});
diff --git a/packages/studio/src/components/ui/Button.tsx b/packages/studio/src/components/ui/Button.tsx
new file mode 100644
index 00000000..f0a24ac4
--- /dev/null
+++ b/packages/studio/src/components/ui/Button.tsx
@@ -0,0 +1,123 @@
+/**
+ * Button & IconButton — The most important primitive.
+ *
+ * Absorbs: active state (scale 0.98), hit target (min 32px),
+ * shadow anatomy (primary), focus ring, disabled state,
+ * loading state, reduced motion, proper timing tokens.
+ *
+ * Rules applied:
+ * - physics-active-state: scale(0.98) on :active
+ * - ux-fitts-target-size: min 32px hit target
+ * - visual-button-shadow-anatomy: 6-layer shadow on primary
+ * - duration-press-hover: 120ms press, 150ms hover
+ */
+
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
+
+// -- Button --
+
+type ButtonVariant = "primary" | "secondary" | "danger" | "ghost";
+type ButtonSize = "sm" | "md" | "lg";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+  icon?: ReactNode;
+}
+
+const variantStyles: Record<ButtonVariant, string> = {
+  primary: [
+    "bg-white text-neutral-950 font-medium",
+    "shadow-btn-primary",
+    "hover:bg-neutral-200",
+    "active:scale-[0.97]",
+  ].join(" "),
+  secondary: [
+    "bg-transparent text-neutral-300 font-medium",
+    "border border-border",
+    "hover:bg-surface-hover hover:text-white hover:border-border-strong",
+    "active:scale-[0.98]",
+  ].join(" "),
+  danger: ["bg-accent-red text-white font-medium", "hover:bg-red-600", "active:scale-[0.97]"].join(" "),
+  ghost: ["bg-transparent text-neutral-400", "hover:bg-surface-hover hover:text-white", "active:scale-[0.98]"].join(
+    " ",
+  ),
+};
+
+const sizeStyles: Record<ButtonSize, string> = {
+  sm: "h-7 px-2.5 text-xs gap-1.5 rounded-button",
+  md: "h-8 px-3 text-sm gap-1.5 rounded-button",
+  lg: "h-9 px-4 text-base gap-2 rounded-button",
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = "secondary", size = "md", loading, icon, children, className = "", disabled, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        disabled={disabled || loading}
+        className={[
+          "inline-flex items-center justify-center",
+          "transition-all duration-press ease-standard",
+          "disabled:opacity-40 disabled:pointer-events-none",
+          "select-none cursor-pointer",
+          variantStyles[variant],
+          sizeStyles[size],
+          className,
+        ].join(" ")}
+        {...props}
+      >
+        {loading ? (
+          <svg className="animate-spin h-3.5 w-3.5" viewBox="0 0 24 24" fill="none">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+          </svg>
+        ) : icon ? (
+          <span className="flex-shrink-0">{icon}</span>
+        ) : null}
+        {children && <span>{children}</span>}
+      </button>
+    );
+  },
+);
+Button.displayName = "Button";
+
+// -- IconButton --
+// For icon-only buttons. Enforces min 32px hit target.
+
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  icon: ReactNode;
+  size?: ButtonSize;
+  variant?: ButtonVariant;
+  "aria-label": string; // REQUIRED for accessibility
+}
+
+const iconSizeStyles: Record<ButtonSize, string> = {
+  sm: "min-w-7 min-h-7 rounded-button", // 28px
+  md: "min-w-8 min-h-8 rounded-button", // 32px — minimum recommended
+  lg: "min-w-9 min-h-9 rounded-button", // 36px
+};
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ icon, size = "md", variant = "ghost", className = "", ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={[
+          "inline-flex items-center justify-center",
+          "transition-all duration-press ease-standard",
+          "disabled:opacity-40 disabled:pointer-events-none",
+          "select-none cursor-pointer",
+          variantStyles[variant],
+          iconSizeStyles[size],
+          className,
+        ].join(" ")}
+        {...props}
+      >
+        {icon}
+      </button>
+    );
+  },
+);
+IconButton.displayName = "IconButton";
diff --git a/packages/studio/src/components/ui/index.ts b/packages/studio/src/components/ui/index.ts
new file mode 100644
index 00000000..3f5812e0
--- /dev/null
+++ b/packages/studio/src/components/ui/index.ts
@@ -0,0 +1,2 @@
+// Minimal UI primitives for studio canvas components
+export { Button, IconButton } from "./Button";
diff --git a/packages/studio/src/hooks/useCodeEditor.ts b/packages/studio/src/hooks/useCodeEditor.ts
new file mode 100644
index 00000000..d9c552e8
--- /dev/null
+++ b/packages/studio/src/hooks/useCodeEditor.ts
@@ -0,0 +1,82 @@
+import { useState, useCallback } from "react";
+
+export interface OpenFile {
+  path: string;
+  content: string;
+  savedContent: string;
+  isDirty: boolean;
+}
+
+export interface UseCodeEditorReturn {
+  openFiles: OpenFile[];
+  activeFilePath: string | null;
+  activeFile: OpenFile | null;
+  openFile: (path: string, content: string) => void;
+  closeFile: (path: string) => void;
+  setActiveFile: (path: string) => void;
+  updateContent: (content: string) => void;
+  markSaved: (path: string) => void;
+  /** External update from agent — updates saved content, shows reload indicator */
+  externalUpdate: (path: string, content: string) => void;
+}
+
+export function useCodeEditor(): UseCodeEditorReturn {
+  const [openFiles, setOpenFiles] = useState<OpenFile[]>([]);
+  const [activeFilePath, setActiveFilePath] = useState<string | null>(null);
+
+  const activeFile = openFiles.find((f) => f.path === activeFilePath) ?? null;
+
+  const openFile = useCallback((path: string, content: string) => {
+    setOpenFiles((prev) => {
+      const existing = prev.find((f) => f.path === path);
+      if (existing) return prev;
+      return [...prev, { path, content, savedContent: content, isDirty: false }];
+    });
+    setActiveFilePath(path);
+  }, []);
+
+  const closeFile = useCallback(
+    (path: string) => {
+      setOpenFiles((prev) => prev.filter((f) => f.path !== path));
+      setActiveFilePath((prev) => {
+        if (prev === path) {
+          const remaining = openFiles.filter((f) => f.path !== path);
+          return remaining.length > 0 ? remaining[remaining.length - 1].path : null;
+        }
+        return prev;
+      });
+    },
+    [openFiles],
+  );
+
+  const updateContent = useCallback(
+    (content: string) => {
+      setOpenFiles((prev) =>
+        prev.map((f) => (f.path === activeFilePath ? { ...f, content, isDirty: content !== f.savedContent } : f)),
+      );
+    },
+    [activeFilePath],
+  );
+
+  const markSaved = useCallback((path: string) => {
+    setOpenFiles((prev) => prev.map((f) => (f.path === path ? { ...f, savedContent: f.content, isDirty: false } : f)));
+  }, []);
+
+  const externalUpdate = useCallback((path: string, content: string) => {
+    setOpenFiles((prev) =>
+      prev.map((f) => (f.path === path ? { ...f, savedContent: content, content, isDirty: false } : f)),
+    );
+  }, []);
+
+  return {
+    openFiles,
+    activeFilePath,
+    activeFile,
+    openFile,
+    closeFile,
+    setActiveFile: setActiveFilePath,
+    updateContent,
+    markSaved,
+    externalUpdate,
+  };
+}
diff --git a/packages/studio/src/hooks/useElementPicker.ts b/packages/studio/src/hooks/useElementPicker.ts
new file mode 100644
index 00000000..5060f415
--- /dev/null
+++ b/packages/studio/src/hooks/useElementPicker.ts
@@ -0,0 +1,338 @@
+import { useState, useCallback, useRef } from "react";
+import { useMountEffect } from "./useMountEffect";
+import { resolveSourceFile, applyPatch } from "../utils/sourcePatcher";
+
+export interface PickedElement {
+  id: string | null;
+  tagName: string;
+  selector: string;
+  label: string;
+  boundingBox: { x: number; y: number; width: number; height: number };
+  textContent: string | null;
+  src: string | null;
+  dataAttributes: Record<string, string>;
+  computedStyles: Record<string, string>;
+}
+
+interface UseElementPickerReturn {
+  isPickMode: boolean;
+  pickedElement: PickedElement | null;
+  enablePick: () => void;
+  disablePick: () => void;
+  clearPick: () => void;
+  /** Update a CSS property on the picked element live + persist to source */
+  setStyle: (prop: string, value: string) => void;
+  /** Update a data attribute on the picked element + persist to source */
+  setDataAttr: (attr: string, value: string) => void;
+  /** Update the text content of the picked element + persist to source */
+  setTextContent: (text: string) => void;
+  /** Override the active iframe (for zoomed canvas view). Pass null to restore primary. */
+  setActiveIframe: (el: HTMLIFrameElement | null) => void;
+  /** Ref that always points to the active iframe (focused canvas frame or preview panel) */
+  activeIframeRef: React.RefObject<HTMLIFrameElement | null>;
+}
+
+interface PickerOptions {
+  /** Workspace files for source patching */
+  workspaceFiles?: Record<string, string>;
+  /** Callback to sync patched files to the project */
+  onSyncFiles?: (files: Record<string, string>) => void;
+}
+
+/**
+ * Hook for element picking via the HyperFrame runtime's picker API.
+ * Communicates with the iframe via postMessage.
+ */
+export function useElementPicker(
+  iframeRef: React.RefObject<HTMLIFrameElement | null>,
+  options?: PickerOptions,
+): UseElementPickerReturn {
+  const [isPickMode, setIsPickMode] = useState(false);
+  const [pickedElement, setPickedElement] = useState<PickedElement | null>(null);
+
+  // Secondary/override iframe ref — set when a zoomed frame is active.
+  // When set, all postMessage sends and DOM reads go to this ref instead.
+  const activeOverrideRef = useRef<HTMLIFrameElement | null>(null);
+
+  const getActiveIframe = useCallback((): HTMLIFrameElement | null => {
+    return activeOverrideRef.current ?? iframeRef.current;
+  }, [iframeRef]);
+
+  // Exposed so the host page can wire the focused view's iframe into the picker
+  const setActiveIframe = useCallback((el: HTMLIFrameElement | null) => {
+    activeOverrideRef.current = el;
+  }, []);
+
+  const enablePick = useCallback(() => {
+    try {
+      getActiveIframe()?.contentWindow?.postMessage(
+        { source: "hf-parent", type: "control", action: "enable-pick-mode" },
+        "*",
+      );
+      setIsPickMode(true);
+    } catch {
+      /* cross-origin */
+    }
+  }, [getActiveIframe]);
+
+  const disablePick = useCallback(() => {
+    try {
+      getActiveIframe()?.contentWindow?.postMessage(
+        { source: "hf-parent", type: "control", action: "disable-pick-mode" },
+        "*",
+      );
+    } catch {
+      /* cross-origin */
+    }
+    setIsPickMode(false);
+  }, [getActiveIframe]);
+
+  const clearPick = useCallback(() => {
+    setPickedElement(null);
+  }, []);
+
+  // Listen for picker messages from the iframe
+  useMountEffect(() => {
+    const handleMessage = (e: MessageEvent) => {
+      const data = e.data;
+      if (data?.source !== "hf-preview") return;
+      // Accept events from either the primary iframe or the active override
+      const activeIframe = getActiveIframe();
+      if (!activeIframe) return;
+      if (e.source !== activeIframe.contentWindow && e.source !== iframeRef.current?.contentWindow) return;
+
+      if (data.type === "element-picked") {
+        const el = data.elementInfo;
+        if (el) {
+          const styles = readComputedStyles(activeIframe, el.selector);
+          setPickedElement({
+            id: el.id ?? null,
+            tagName: el.tagName ?? "div",
+            selector: el.selector ?? "",
+            label: el.label ?? el.tagName ?? "Element",
+            boundingBox: el.boundingBox ?? { x: 0, y: 0, width: 0, height: 0 },
+            textContent: el.textContent ?? null,
+            src: el.src ?? null,
+            dataAttributes: el.dataAttributes ?? {},
+            computedStyles: styles,
+          });
+          setIsPickMode(false);
+        }
+      } else if (data.type === "element-pick-candidates") {
+        // Multiple candidates at click point — pick the first one
+        const el = data.candidates?.[data.selectedIndex ?? 0];
+        if (el) {
+          const styles = readComputedStyles(activeIframe, el.selector);
+          setPickedElement({
+            id: el.id ?? null,
+            tagName: el.tagName ?? "div",
+            selector: el.selector ?? "",
+            label: el.label ?? el.tagName ?? "Element",
+            boundingBox: el.boundingBox ?? { x: 0, y: 0, width: 0, height: 0 },
+            textContent: el.textContent ?? null,
+            src: el.src ?? null,
+            dataAttributes: el.dataAttributes ?? {},
+            computedStyles: styles,
+          });
+        }
+      }
+
+      if (data.type === "pick-mode-cancelled") {
+        setIsPickMode(false);
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  });
+
+  // Ref for options to avoid stale closures in debounced callback
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+
+  // Sync immediately (not debounced) — save on every change for reliability
+  const syncToSource = useCallback(
+    (
+      elementId: string,
+      selector: string,
+      op: { type: "inline-style" | "attribute" | "text-content"; property: string; value: string },
+    ) => {
+      const opts = optionsRef.current;
+      if (!opts?.workspaceFiles || !opts.onSyncFiles || !elementId) return;
+      const files = opts.workspaceFiles;
+      const sourceFile = resolveSourceFile(elementId, selector, files);
+      if (!sourceFile || !files[sourceFile]) {
+        return;
+      }
+      const patched = applyPatch(files[sourceFile], elementId, op);
+      if (patched !== files[sourceFile]) {
+        opts.onSyncFiles({ [sourceFile]: patched });
+      }
+    },
+    [],
+  );
+
+  const setStyle = useCallback(
+    (prop: string, value: string) => {
+      const activeIframe = getActiveIframe();
+      if (!pickedElement?.selector || !activeIframe) return;
+      try {
+        const doc = activeIframe.contentDocument;
+        const el = doc?.querySelector(pickedElement.selector) as HTMLElement | null;
+        if (el) {
+          el.style.setProperty(prop, value);
+          setPickedElement((prev) =>
+            prev
+              ? {
+                  ...prev,
+                  computedStyles: { ...prev.computedStyles, [prop]: value },
+                }
+              : null,
+          );
+          // Persist to source file
+          if (pickedElement.id) {
+            // ID-based patching — surgical edit of just the element's style
+            syncToSource(pickedElement.id, pickedElement.selector, { type: "inline-style", property: prop, value });
+          } else {
+            // No ID — save the full composition HTML from the iframe
+            // This captures ALL inline style changes, not just the targeted one
+            try {
+              const fullHtml = activeIframe.contentDocument?.documentElement.outerHTML;
+              if (fullHtml && optionsRef.current?.onSyncFiles) {
+                // Determine which file this iframe represents
+                const src = activeIframe.getAttribute("src") ?? "";
+                const compMatch = src.match(/\/comp\/(.+?)(?:\?|$)/);
+                const filePath = compMatch ? compMatch[1] : "index.html";
+                optionsRef.current.onSyncFiles({ [filePath]: `<!DOCTYPE html>\n<html>${fullHtml.replace(/<html[^>]*>/, "")}`  });
+              }
+            } catch { /* cross-origin */ }
+          }
+        }
+      } catch {
+        /* cross-origin */
+      }
+    },
+    [pickedElement, getActiveIframe, syncToSource],
+  );
+
+  const setDataAttr = useCallback(
+    (attr: string, value: string) => {
+      const activeIframe = getActiveIframe();
+      if (!pickedElement?.selector || !activeIframe) return;
+      try {
+        const doc = activeIframe.contentDocument;
+        const el = doc?.querySelector(pickedElement.selector);
+        if (el) {
+          el.setAttribute(`data-${attr}`, value);
+          setPickedElement((prev) =>
+            prev
+              ? {
+                  ...prev,
+                  dataAttributes: { ...prev.dataAttributes, [attr]: value },
+                }
+              : null,
+          );
+          // Persist to source file immediately
+          if (pickedElement.id) {
+            syncToSource(pickedElement.id, pickedElement.selector, { type: "attribute", property: attr, value });
+          }
+        }
+      } catch {
+        /* cross-origin */
+      }
+    },
+    [pickedElement, getActiveIframe, syncToSource],
+  );
+
+  const setTextContent = useCallback(
+    (text: string) => {
+      const activeIframe = getActiveIframe();
+      if (!pickedElement?.selector || !activeIframe) return;
+      try {
+        const doc = activeIframe.contentDocument;
+        const el = doc?.querySelector(pickedElement.selector);
+        if (el) {
+          el.textContent = text;
+          setPickedElement((prev) => (prev ? { ...prev, textContent: text } : null));
+          // Persist to source file
+          if (pickedElement.id) {
+            syncToSource(pickedElement.id, pickedElement.selector, {
+              type: "text-content",
+              property: "textContent",
+              value: text,
+            });
+          }
+        }
+      } catch {
+        /* cross-origin */
+      }
+    },
+    [pickedElement, getActiveIframe, syncToSource],
+  );
+
+  // Ref-like object that always points to the active iframe (override or primary)
+  const activeIframeRef = useRef<HTMLIFrameElement | null>(null);
+  activeIframeRef.current = getActiveIframe();
+
+  return {
+    isPickMode,
+    pickedElement,
+    enablePick,
+    disablePick,
+    clearPick,
+    setStyle,
+    setDataAttr,
+    setTextContent,
+    setActiveIframe,
+    /** Ref that always points to the active iframe (focused canvas frame or preview panel) */
+    activeIframeRef,
+  };
+}
+
+/** Read a subset of computed styles from an element in the iframe */
+function readComputedStyles(iframe: HTMLIFrameElement, selector: string): Record<string, string> {
+  const styles: Record<string, string> = {};
+  try {
+    const doc = iframe.contentDocument;
+    const el = doc?.querySelector(selector);
+    if (!el) return styles;
+    const computed = iframe.contentWindow?.getComputedStyle(el);
+    if (!computed) return styles;
+
+    const props = [
+      "position",
+      "top",
+      "left",
+      "right",
+      "bottom",
+      "width",
+      "height",
+      "margin-top",
+      "margin-right",
+      "margin-bottom",
+      "margin-left",
+      "padding-top",
+      "padding-right",
+      "padding-bottom",
+      "padding-left",
+      "font-size",
+      "font-weight",
+      "font-family",
+      "color",
+      "background-color",
+      "background",
+      "opacity",
+      "border-radius",
+      "transform",
+      "z-index",
+    ];
+
+    for (const prop of props) {
+      const val = computed.getPropertyValue(prop);
+      if (val) styles[prop] = val;
+    }
+  } catch {
+    /* cross-origin */
+  }
+  return styles;
+}
diff --git a/packages/studio/src/hooks/useMountEffect.ts b/packages/studio/src/hooks/useMountEffect.ts
new file mode 100644
index 00000000..28e12612
--- /dev/null
+++ b/packages/studio/src/hooks/useMountEffect.ts
@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+
+/**
+ * Run an effect exactly once on mount (and optional cleanup on unmount).
+ * This is the ONLY sanctioned way to call useEffect in this codebase.
+ *
+ * If you need to react to prop/state changes, use one of:
+ * - Derived state (compute inline, no hook needed)
+ * - Event handlers (onClick, onChange, etc.)
+ * - `key` prop to force remount
+ * - Data-fetching library (useQuery, useSWR)
+ *
+ * @see https://react.dev/learn/you-might-not-need-an-effect
+ */
+export function useMountEffect(effect: () => void | (() => void)) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(effect, []);
+}
diff --git a/packages/studio/src/icons/SystemIcons.tsx b/packages/studio/src/icons/SystemIcons.tsx
new file mode 100644
index 00000000..e3df7dc8
--- /dev/null
+++ b/packages/studio/src/icons/SystemIcons.tsx
@@ -0,0 +1,130 @@
+import {
+  WarningCircle,
+  Warning,
+  ArrowLeft as PhArrowLeft,
+  Check as PhCheck,
+  CheckCircle as PhCheckCircle,
+  Circle as PhCircle,
+  Clock as PhClock,
+  Code as PhCode,
+  DownloadSimple,
+  Pencil as PhPencil,
+  ArrowSquareOut,
+  Eye as PhEye,
+  EyeClosed,
+  File as PhFile,
+  FileCode as PhFileCode,
+  FileText as PhFileText,
+  FilmStrip,
+  Heart as PhHeart,
+  Image as PhImage,
+  Info as PhInfo,
+  Stack,
+  SpinnerGap,
+  ArrowsOut,
+  CornersOut,
+  ChatCircle,
+  ChatCenteredText,
+  Cursor,
+  ArrowsOutCardinal,
+  MusicNote,
+  Palette as PhPalette,
+  Paperclip as PhPaperclip,
+  Pause as PhPause,
+  Play as PhPlay,
+  Plus as PhPlus,
+  MagnifyingGlass,
+  PaperPlaneRight,
+  SkipBack as PhSkipBack,
+  SkipForward as PhSkipForward,
+  Square as PhSquare,
+  Trash,
+  TextT,
+  UploadSimple,
+  User as PhUser,
+  UsersThree,
+  VideoCamera,
+  X as PhX,
+  Lightning,
+  MagnifyingGlassPlus,
+  MagnifyingGlassMinus,
+  Terminal as PhTerminal,
+  CaretDown,
+  CaretRight,
+  ClipboardText,
+  ArrowCounterClockwise,
+  Gear,
+} from "@phosphor-icons/react";
+import type { Icon as PhosphorIcon, IconProps as PhosphorIconProps } from "@phosphor-icons/react";
+
+type IconProps = PhosphorIconProps & { title?: string };
+
+const makeIcon = (Icon: PhosphorIcon) => {
+  const Wrapped = ({ title, ...props }: IconProps) => (
+    <Icon alt={title} aria-label={title} aria-hidden={title ? undefined : true} {...props} />
+  );
+  return Wrapped;
+};
+
+// Lucide name → Phosphor equivalent
+export const AlertCircle = makeIcon(WarningCircle);
+export const AlertTriangle = makeIcon(Warning);
+export const ArrowLeft = makeIcon(PhArrowLeft);
+export const Check = makeIcon(PhCheck);
+export const CheckCircle = makeIcon(PhCheckCircle);
+/** CheckCircle2 in lucide is visually identical to CheckCircle */
+export const CheckCircle2 = makeIcon(PhCheckCircle);
+export const Circle = makeIcon(PhCircle);
+export const Clock = makeIcon(PhClock);
+export const Code = makeIcon(PhCode);
+export const Download = makeIcon(DownloadSimple);
+export const Edit2 = makeIcon(PhPencil);
+export const ExternalLink = makeIcon(ArrowSquareOut);
+export const Eye = makeIcon(PhEye);
+export const EyeOff = makeIcon(EyeClosed);
+export const File = makeIcon(PhFile);
+export const FileCode = makeIcon(PhFileCode);
+// FileIcon alias (lucide exports both `File` and `FileIcon`)
+export const FileIcon = makeIcon(PhFile);
+export const FileText = makeIcon(PhFileText);
+export const Film = makeIcon(FilmStrip);
+export const Heart = makeIcon(PhHeart);
+export const Image = makeIcon(PhImage);
+export const Info = makeIcon(PhInfo);
+export const Layers = makeIcon(Stack);
+export const Loader2 = makeIcon(SpinnerGap);
+export const Maximize = makeIcon(ArrowsOut);
+export const Maximize2 = makeIcon(CornersOut);
+export const MessageCircle = makeIcon(ChatCircle);
+export const MessageSquare = makeIcon(ChatCenteredText);
+export const MousePointer = makeIcon(Cursor);
+export const Move = makeIcon(ArrowsOutCardinal);
+export const Music = makeIcon(MusicNote);
+export const Palette = makeIcon(PhPalette);
+export const Paperclip = makeIcon(PhPaperclip);
+export const Pause = makeIcon(PhPause);
+export const Pencil = makeIcon(PhPencil);
+export const Play = makeIcon(PhPlay);
+export const Plus = makeIcon(PhPlus);
+export const Search = makeIcon(MagnifyingGlass);
+export const Send = makeIcon(PaperPlaneRight);
+export const SkipBack = makeIcon(PhSkipBack);
+export const SkipForward = makeIcon(PhSkipForward);
+export const Square = makeIcon(PhSquare);
+export const Trash2 = makeIcon(Trash);
+export const Type = makeIcon(TextT);
+export const Upload = makeIcon(UploadSimple);
+export const User = makeIcon(PhUser);
+export const Users = makeIcon(UsersThree);
+export const Video = makeIcon(VideoCamera);
+export const X = makeIcon(PhX);
+export const Zap = makeIcon(Lightning);
+export const ZoomIn = makeIcon(MagnifyingGlassPlus);
+export const ZoomOut = makeIcon(MagnifyingGlassMinus);
+// Extra icons used in this project (not in lucide's default mapping above)
+export const Terminal = makeIcon(PhTerminal);
+export const ChevronDown = makeIcon(CaretDown);
+export const ChevronRight = makeIcon(CaretRight);
+export const ClipboardList = makeIcon(ClipboardText);
+export const RotateCcw = makeIcon(ArrowCounterClockwise);
+export const Settings = makeIcon(Gear);
diff --git a/packages/studio/src/index.ts b/packages/studio/src/index.ts
new file mode 100644
index 00000000..5ead3f48
--- /dev/null
+++ b/packages/studio/src/index.ts
@@ -0,0 +1,31 @@
+// NLE Layout
+export { NLELayout } from "./components/nle/NLELayout";
+export { NLEPreview } from "./components/nle/NLEPreview";
+export { CompositionBreadcrumb } from "./components/nle/CompositionBreadcrumb";
+export type { CompositionLevel } from "./components/nle/CompositionBreadcrumb";
+
+// Player (preview, timeline, playback controls)
+export {
+  Player,
+  PlayerControls,
+  Timeline,
+  PreviewPanel,
+  AgentActivityTrack,
+  useTimelinePlayer,
+  usePlayerStore,
+  liveTime,
+  formatTime,
+} from "./player";
+export type { AgentActivity, TimelineElement, ActiveEdits } from "./player";
+
+// Editor
+export { SourceEditor } from "./components/editor/SourceEditor";
+export { PropertyPanel } from "./components/editor/PropertyPanel";
+export { FileTree } from "./components/editor/FileTree";
+
+// App
+export { StudioApp } from "./App";
+
+// Hooks
+export { useCodeEditor } from "./hooks/useCodeEditor";
+export { useElementPicker } from "./hooks/useElementPicker";
diff --git a/packages/studio/frontend/src/main.tsx b/packages/studio/src/main.tsx
similarity index 67%
rename from packages/studio/frontend/src/main.tsx
rename to packages/studio/src/main.tsx
index 15753afa..12e93ed2 100644
--- a/packages/studio/frontend/src/main.tsx
+++ b/packages/studio/src/main.tsx
@@ -1,10 +1,10 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import "./index.css";
-import App from "./App";
+import { StudioApp } from "./App";
+import "./styles/studio.css";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
+    <StudioApp />
   </StrictMode>,
 );
diff --git a/packages/studio/src/player/components/AgentActivityTrack.tsx b/packages/studio/src/player/components/AgentActivityTrack.tsx
new file mode 100644
index 00000000..cef10e8e
--- /dev/null
+++ b/packages/studio/src/player/components/AgentActivityTrack.tsx
@@ -0,0 +1,98 @@
+import { memo } from "react";
+
+const TRACK_H = 20;
+const GUTTER = 32;
+
+export interface AgentActivity {
+  agentId: string;
+  name: string;
+  color: string;
+  /** Active work periods mapped to VIDEO time (not wall clock) */
+  periods: Array<{ start: number; end: number }>;
+  /** Element creation events at specific video times */
+  events: Array<{ time: number; type: "create" | "modify" }>;
+}
+
+interface AgentActivityTrackProps {
+  agents: AgentActivity[];
+  duration: number;
+}
+
+export const AgentActivityTrack = memo(function AgentActivityTrack({ agents, duration }: AgentActivityTrackProps) {
+  if (agents.length === 0 || duration <= 0) return null;
+
+  return (
+    <div className="border-t border-neutral-800/30">
+      {/* Section header */}
+      <div className="flex items-center gap-1.5 px-2 py-1 text-[9px] text-neutral-600 font-medium uppercase tracking-wider">
+        <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="4" /></svg>
+        Agent Activity
+      </div>
+
+      {agents.map((agent) => (
+        <div
+          key={agent.agentId}
+          className="relative flex"
+          style={{ height: TRACK_H }}
+        >
+          {/* Gutter: agent name */}
+          <div
+            className="flex-shrink-0 flex items-center justify-center"
+            style={{ width: GUTTER }}
+            title={agent.name}
+          >
+            <div
+              className="w-2 h-2 rounded-full"
+              style={{ backgroundColor: agent.color }}
+            />
+          </div>
+
+          {/* Lane */}
+          <div className="flex-1 relative" style={{ backgroundColor: `${agent.color}06` }}>
+            {/* Active work periods */}
+            {agent.periods.map((period, i) => {
+              const leftPct = (period.start / duration) * 100;
+              const widthPct = ((period.end - period.start) / duration) * 100;
+              return (
+                <div
+                  key={`period-${i}`}
+                  className="absolute top-1 bottom-1 rounded-sm"
+                  style={{
+                    left: `${leftPct}%`,
+                    width: `${Math.max(widthPct, 0.5)}%`,
+                    backgroundColor: `${agent.color}30`,
+                    border: `1px solid ${agent.color}20`,
+                  }}
+                />
+              );
+            })}
+
+            {/* Events: diamonds for create, circles for modify */}
+            {agent.events.map((event, i) => {
+              const leftPct = (event.time / duration) * 100;
+              return (
+                <div
+                  key={`event-${i}`}
+                  className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2"
+                  style={{ left: `${leftPct}%` }}
+                >
+                  {event.type === "create" ? (
+                    <div
+                      className="w-2 h-2 rotate-45"
+                      style={{ backgroundColor: agent.color }}
+                    />
+                  ) : (
+                    <div
+                      className="w-1.5 h-1.5 rounded-full"
+                      style={{ backgroundColor: agent.color }}
+                    />
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+});
diff --git a/packages/ui-player/src/components/Player.tsx b/packages/studio/src/player/components/Player.tsx
similarity index 50%
rename from packages/ui-player/src/components/Player.tsx
rename to packages/studio/src/player/components/Player.tsx
index 93033c18..2e6de49c 100644
--- a/packages/ui-player/src/components/Player.tsx
+++ b/packages/studio/src/player/components/Player.tsx
@@ -14,28 +14,70 @@ interface PlayerProps {
 export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(({ projectId, directUrl, onLoad, portrait }, ref) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [scale, setScale] = useState(1);
+  const dimsRef = useRef({ w: portrait ? NATIVE_H : NATIVE_W, h: portrait ? NATIVE_W : NATIVE_H });
+  const [dims, setDims] = useState(dimsRef.current);
   const loadCountRef = useRef(0);
 
-  const w = portrait ? NATIVE_H : NATIVE_W;
-  const h = portrait ? NATIVE_W : NATIVE_H;
-
   const updateScale = useCallback(() => {
     const el = containerRef.current;
     if (!el) return;
     const rect = el.getBoundingClientRect();
-    setScale(Math.min(rect.width / w, rect.height / h));
-  }, [w, h]);
+    const d = dimsRef.current;
+    setScale(Math.min(rect.width / d.w, rect.height / d.h));
+  }, []);
 
   useMountEffect(() => {
     updateScale();
     const ro = new ResizeObserver(updateScale);
     if (containerRef.current) ro.observe(containerRef.current);
-    return () => ro.disconnect();
+
+    // Listen for stage-size messages from the runtime
+    const handleMessage = (e: MessageEvent) => {
+      const data = e.data;
+      if ((data?.source === "hf-preview" || data?.source === "magic-edit-preview") && data?.type === "stage-size" && data.width > 0 && data.height > 0) {
+        if (dimsRef.current.w !== data.width || dimsRef.current.h !== data.height) {
+          dimsRef.current = { w: data.width, h: data.height };
+          setDims(dimsRef.current);
+          updateScale();
+        }
+      }
+    };
+    window.addEventListener("message", handleMessage);
+
+    return () => {
+      ro.disconnect();
+      window.removeEventListener("message", handleMessage);
+    };
   });
 
-  // Trigger reveal animation on iframe reload (skip the initial load)
   const handleLoad = useCallback(() => {
     loadCountRef.current++;
+
+    // Auto-detect dimensions from the composition's data-width/data-height
+    try {
+      const iframeEl = typeof ref === "function" ? null : ref?.current;
+      const doc = iframeEl?.contentDocument;
+      if (doc) {
+        const root = doc.querySelector("[data-composition-id]");
+        if (root) {
+          const dw = parseInt(root.getAttribute("data-width") || "0", 10);
+          const dh = parseInt(root.getAttribute("data-height") || "0", 10);
+          if (dw > 0 && dh > 0 && (dw !== dimsRef.current.w || dh !== dimsRef.current.h)) {
+            dimsRef.current = { w: dw, h: dh };
+            setDims(dimsRef.current);
+            // Recalc scale with new dims
+            const el = containerRef.current;
+            if (el) {
+              const rect = el.getBoundingClientRect();
+              setScale(Math.min(rect.width / dw, rect.height / dh));
+            }
+          }
+        }
+      }
+    } catch {
+      // Cross-origin
+    }
+
     if (loadCountRef.current > 1) {
       const el = containerRef.current;
       if (el) {
@@ -47,7 +89,7 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(({ projectId, d
       }
     }
     onLoad();
-  }, [onLoad]);
+  }, [onLoad, ref]);
 
   return (
     <div
@@ -63,8 +105,8 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(({ projectId, d
         referrerPolicy="no-referrer"
         title="Project Preview"
         style={{
-          width: w,
-          height: h,
+          width: dims.w,
+          height: dims.h,
           border: "none",
           transform: `scale(${scale})`,
           transformOrigin: "center center",
diff --git a/packages/ui-player/src/components/PlayerControls.tsx b/packages/studio/src/player/components/PlayerControls.tsx
similarity index 61%
rename from packages/ui-player/src/components/PlayerControls.tsx
rename to packages/studio/src/player/components/PlayerControls.tsx
index 3f10a9eb..0bf9cb51 100644
--- a/packages/ui-player/src/components/PlayerControls.tsx
+++ b/packages/studio/src/player/components/PlayerControls.tsx
@@ -1,30 +1,46 @@
-import { useRef, useCallback } from "react";
+import { useRef, useState, useCallback, memo } from "react";
 import { formatTime } from "../lib/time";
 import { usePlayerStore, liveTime } from "../store/playerStore";
 import { useMountEffect } from "../lib/useMountEffect";
 
+const SPEED_OPTIONS = [0.25, 0.5, 1, 1.5, 2] as const;
+
 interface PlayerControlsProps {
-  isPlaying: boolean;
-  duration: number;
-  timelineReady: boolean;
+  /** @deprecated Pass via store — kept for backwards compat */
+  isPlaying?: boolean;
+  /** @deprecated Pass via store — kept for backwards compat */
+  duration?: number;
+  /** @deprecated Pass via store — kept for backwards compat */
+  timelineReady?: boolean;
   onTogglePlay: () => void;
   onSeek: (time: number) => void;
 }
 
-export function PlayerControls({ isPlaying, duration, timelineReady, onTogglePlay, onSeek }: PlayerControlsProps) {
-  const { currentTime } = usePlayerStore();
+export const PlayerControls = memo(function PlayerControls({ onTogglePlay, onSeek, ...overrides }: PlayerControlsProps) {
+  // Subscribe to only the fields we render — each selector prevents cascading re-renders
+  const storeIsPlaying = usePlayerStore((s) => s.isPlaying);
+  const storeDuration = usePlayerStore((s) => s.duration);
+  const storeTimelineReady = usePlayerStore((s) => s.timelineReady);
+  const playbackRate = usePlayerStore((s) => s.playbackRate);
+  const setPlaybackRate = usePlayerStore.getState().setPlaybackRate;
+  const [showSpeedMenu, setShowSpeedMenu] = useState(false);
+
+  const isPlaying = overrides.isPlaying ?? storeIsPlaying;
+  const duration = overrides.duration ?? storeDuration;
+  const timelineReady = overrides.timelineReady ?? storeTimelineReady;
 
   const progressFillRef = useRef<HTMLDivElement>(null);
   const progressThumbRef = useRef<HTMLDivElement>(null);
   const timeDisplayRef = useRef<HTMLSpanElement>(null);
   const seekBarRef = useRef<HTMLDivElement>(null);
   const isDraggingRef = useRef(false);
+  const currentTimeRef = useRef(0);
 
-  // Direct DOM updates for playback position — bypasses React for performance
   const durationRef = useRef(duration);
   durationRef.current = duration;
   useMountEffect(() => {
     const unsub = liveTime.subscribe((t) => {
+      currentTimeRef.current = t;
       const dur = durationRef.current;
       const pct = dur > 0 ? (t / dur) * 100 : 0;
       if (progressFillRef.current) progressFillRef.current.style.width = `${pct}%`;
@@ -66,27 +82,23 @@ export function PlayerControls({ isPlaying, duration, timelineReady, onTogglePla
     [seekFromClientX],
   );
 
-  // Keyboard seek: left/right arrows
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
       if (!timelineReady || duration <= 0) return;
       const step = e.shiftKey ? 5 : 1;
       if (e.key === "ArrowLeft") {
         e.preventDefault();
-        onSeek(Math.max(0, currentTime - step));
+        onSeek(Math.max(0, currentTimeRef.current - step));
       } else if (e.key === "ArrowRight") {
         e.preventDefault();
-        onSeek(Math.min(duration, currentTime + step));
+        onSeek(Math.min(duration, currentTimeRef.current + step));
       }
     },
-    [timelineReady, duration, currentTime, onSeek],
+    [timelineReady, duration, onSeek],
   );
 
-  const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
-
   return (
     <div className="px-3 py-2 flex items-center gap-3">
-      {/* Play / Pause */}
       <button
         type="button"
         aria-label={isPlaying ? "Pause" : "Play"}
@@ -106,14 +118,12 @@ export function PlayerControls({ isPlaying, duration, timelineReady, onTogglePla
         )}
       </button>
 
-      {/* Time display — direct DOM updates via ref for RAF performance */}
       <span className="text-neutral-500 font-mono text-xs tabular-nums flex-shrink-0 min-w-[80px]">
-        <span ref={timeDisplayRef}>{formatTime(currentTime)}</span>
+        <span ref={timeDisplayRef}>{formatTime(0)}</span>
         <span className="text-neutral-700 mx-0.5">/</span>
         <span className="text-neutral-600">{formatTime(duration)}</span>
       </span>
 
-      {/* Seek bar */}
       <div
         ref={seekBarRef}
         role="slider"
@@ -121,28 +131,51 @@ export function PlayerControls({ isPlaying, duration, timelineReady, onTogglePla
         aria-label="Seek"
         aria-valuemin={0}
         aria-valuemax={Math.round(duration)}
-        aria-valuenow={Math.round(currentTime)}
-        aria-valuetext={formatTime(currentTime)}
+        aria-valuenow={0}
         className="flex-1 h-6 flex items-center cursor-pointer group"
         style={{ touchAction: "manipulation" }}
         onMouseDown={handleMouseDown}
         onKeyDown={handleKeyDown}
       >
         <div className="w-full h-[3px] bg-neutral-800 rounded-full relative">
-          {/* Progress fill */}
           <div
             ref={progressFillRef}
             className="absolute inset-y-0 left-0 bg-white/80 rounded-full"
-            style={{ width: `${progress}%` }}
+            style={{ width: 0 }}
           />
-          {/* Thumb */}
           <div
             ref={progressThumbRef}
             className="absolute top-1/2 w-2 h-2 bg-white rounded-full -translate-y-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity"
-            style={{ left: `${progress}%` }}
+            style={{ left: 0 }}
           />
         </div>
       </div>
+
+      {/* Speed control */}
+      <div className="relative flex-shrink-0">
+        <button
+          type="button"
+          onClick={() => setShowSpeedMenu((v) => !v)}
+          className="px-1.5 py-0.5 rounded text-[11px] font-mono tabular-nums text-neutral-500 hover:text-neutral-200 hover:bg-neutral-800 transition-colors"
+        >
+          {playbackRate === 1 ? "1x" : `${playbackRate}x`}
+        </button>
+        {showSpeedMenu && (
+          <div className="absolute bottom-full right-0 mb-1 py-1 bg-neutral-900 border border-neutral-700 rounded-lg shadow-xl z-50 min-w-[60px]">
+            {SPEED_OPTIONS.map((rate) => (
+              <button
+                key={rate}
+                onClick={() => { setPlaybackRate(rate); setShowSpeedMenu(false); }}
+                className={`block w-full px-3 py-1 text-xs text-left font-mono tabular-nums transition-colors ${
+                  rate === playbackRate ? "text-white bg-neutral-800" : "text-neutral-400 hover:text-white hover:bg-neutral-800"
+                }`}
+              >
+                {rate}x
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
     </div>
   );
-}
+});
diff --git a/packages/ui-player/src/components/PreviewPanel.tsx b/packages/studio/src/player/components/PreviewPanel.tsx
similarity index 96%
rename from packages/ui-player/src/components/PreviewPanel.tsx
rename to packages/studio/src/player/components/PreviewPanel.tsx
index e4f50758..c1762866 100644
--- a/packages/ui-player/src/components/PreviewPanel.tsx
+++ b/packages/studio/src/player/components/PreviewPanel.tsx
@@ -2,7 +2,6 @@ import type { ReactNode, Ref } from "react";
 import { Player } from "./Player";
 import { PlayerControls } from "./PlayerControls";
 import { Timeline } from "./Timeline";
-import { usePlayerStore } from "../store/playerStore";
 
 interface RenderStatus {
   state: "idle" | "rendering" | "complete" | "error";
@@ -37,7 +36,6 @@ export function PreviewPanel({
   renderStatus,
   children,
 }: PreviewPanelProps) {
-  const { isPlaying, duration, timelineReady } = usePlayerStore();
 
   const renderState = renderStatus?.state ?? "idle";
 
@@ -61,9 +59,6 @@ export function PreviewPanel({
           {/* Controls — fixed height */}
           <div className="bg-neutral-950 border-t border-neutral-800 flex-shrink-0">
             <PlayerControls
-              isPlaying={isPlaying}
-              duration={duration}
-              timelineReady={timelineReady}
               onTogglePlay={onTogglePlay}
               onSeek={onSeek}
             />
diff --git a/packages/ui-player/src/components/Timeline.tsx b/packages/studio/src/player/components/Timeline.tsx
similarity index 76%
rename from packages/ui-player/src/components/Timeline.tsx
rename to packages/studio/src/player/components/Timeline.tsx
index c9fdf51c..6c80860f 100644
--- a/packages/ui-player/src/components/Timeline.tsx
+++ b/packages/studio/src/player/components/Timeline.tsx
@@ -1,4 +1,4 @@
-import { useRef, useMemo, useCallback, useState, type ReactNode } from "react";
+import { useRef, useMemo, useCallback, useState, memo, type ReactNode } from "react";
 import { usePlayerStore, liveTime } from "../store/playerStore";
 import { useMountEffect } from "../lib/useMountEffect";
 
@@ -23,7 +23,6 @@ interface TrackStyle {
 }
 
 /* ── Icons from Figma Motion Cut design system ── */
-/* SVGs live at /icons/timeline/*.svg — loaded as <img> with CSS invert for white-on-color */
 const ICON_BASE = "/icons/timeline";
 function TimelineIcon({ src }: { src: string }) {
   return <img src={src} alt="" width={12} height={12} style={{ filter: "brightness(0) invert(1)" }} draggable={false} />;
@@ -143,10 +142,17 @@ function formatTick(s: number): string {
 interface TimelineProps {
   /** Called when user seeks via ruler/track click or playhead drag */
   onSeek?: (time: number) => void;
+  /** Called when user double-clicks a composition clip to drill into it */
+  onDrillDown?: (element: import("../store/playerStore").TimelineElement) => void;
 }
 
-export function Timeline({ onSeek }: TimelineProps = {}) {
-  const { elements, duration, timelineReady, selectedElementId, setSelectedElementId } = usePlayerStore();
+export const Timeline = memo(function Timeline({ onSeek, onDrillDown }: TimelineProps = {}) {
+  const elements = usePlayerStore((s) => s.elements);
+  const duration = usePlayerStore((s) => s.duration);
+  const timelineReady = usePlayerStore((s) => s.timelineReady);
+  const selectedElementId = usePlayerStore((s) => s.selectedElementId);
+  const setSelectedElementId = usePlayerStore((s) => s.setSelectedElementId);
+  const activeEdits = usePlayerStore((s) => s.activeEdits);
   const playheadRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const [hoveredClip, setHoveredClip] = useState<string | null>(null);
@@ -287,8 +293,11 @@ export function Timeline({ onSeek }: TimelineProps = {}) {
                   const widthPct = (el.duration / duration) * 100;
                   const style = getStyle(el.tag);
                   const isSelected = selectedElementId === el.id;
+                  const isComposition = !!el.compositionSrc;
                   const clipKey = `${el.id}-${i}`;
                   const isHovered = hoveredClip === clipKey;
+                  const activeEdit = activeEdits[el.id];
+                  const isBeingEdited = !!activeEdit;
 
                   return (
                     <div
@@ -302,18 +311,25 @@ export function Timeline({ onSeek }: TimelineProps = {}) {
                         bottom: CLIP_Y,
                         borderRadius: 5,
                         backgroundColor: style.clip,
+                        backgroundImage: isComposition
+                          ? `repeating-linear-gradient(135deg, transparent, transparent 3px, rgba(255,255,255,0.08) 3px, rgba(255,255,255,0.08) 6px)`
+                          : undefined,
                         border: isSelected ? `2px solid rgba(255,255,255,0.9)` : `1px solid rgba(255,255,255,${isHovered ? 0.3 : 0.15})`,
                         boxShadow: isSelected
                           ? `0 0 0 1px ${style.clip}, 0 2px 8px rgba(0,0,0,0.4)`
-                          : isHovered
-                            ? "0 1px 4px rgba(0,0,0,0.3)"
-                            : "none",
+                          : isBeingEdited
+                            ? `0 0 0 1px ${activeEdit.agentColor}80, 0 0 8px ${activeEdit.agentColor}40`
+                            : isHovered
+                              ? "0 1px 4px rgba(0,0,0,0.3)"
+                              : "none",
                         cursor: "pointer",
                         transition: "border-color 120ms, box-shadow 120ms, transform 80ms",
                         transform: isHovered && !isSelected ? "scaleY(1.04)" : "scaleY(1)",
                         zIndex: isSelected ? 10 : isHovered ? 5 : 1,
                       }}
-                      title={`${el.id || el.tag} \u2022 ${el.start.toFixed(1)}s \u2013 ${(el.start + el.duration).toFixed(1)}s`}
+                      title={isComposition
+                        ? `${el.compositionSrc} \u2022 Double-click to open`
+                        : `${el.id || el.tag} \u2022 ${el.start.toFixed(1)}s \u2013 ${(el.start + el.duration).toFixed(1)}s`}
                       onPointerEnter={() => setHoveredClip(clipKey)}
                       onPointerLeave={() => setHoveredClip(null)}
                       onPointerDown={(e) => e.stopPropagation()}
@@ -321,7 +337,55 @@ export function Timeline({ onSeek }: TimelineProps = {}) {
                         e.stopPropagation();
                         setSelectedElementId(isSelected ? null : el.id);
                       }}
+                      onDoubleClick={(e) => {
+                        e.stopPropagation();
+                        if (isComposition && onDrillDown) {
+                          onDrillDown(el);
+                        }
+                      }}
                     >
+                      {/* Agent ownership dot */}
+                      {el.agentColor && (
+                        <div
+                          className="flex-shrink-0 w-1.5 h-1.5 rounded-full ml-1"
+                          style={{ backgroundColor: el.agentColor }}
+                          title={el.agentId ? `Agent: ${el.agentId}` : undefined}
+                        />
+                      )}
+                      {/* Editing glow pulse */}
+                      {/* Agent editing indicator — cursor on the clip */}
+                      {isBeingEdited && (
+                        <>
+                          <div
+                            className="absolute inset-0 rounded-[5px] animate-pulse pointer-events-none"
+                            style={{ boxShadow: `inset 0 0 0 1px ${activeEdit.agentColor}60` }}
+                          />
+                          {/* Agent name badge above clip */}
+                          <div
+                            className="absolute pointer-events-none flex items-center gap-1"
+                            style={{
+                              top: -16,
+                              left: 2,
+                              zIndex: 30,
+                            }}
+                          >
+                            {/* Mini cursor arrow */}
+                            <svg width="8" height="10" viewBox="0 0 12 16" fill="none" style={{ flexShrink: 0 }}>
+                              <path d="M1 1L11 7L6 8L4 14L1 1Z" fill={activeEdit.agentColor} stroke="white" strokeWidth="0.8" />
+                            </svg>
+                            <span
+                              className="text-[8px] font-semibold px-1 py-px rounded whitespace-nowrap"
+                              style={{
+                                backgroundColor: activeEdit.agentColor,
+                                color: "white",
+                                boxShadow: `0 1px 4px ${activeEdit.agentColor}40`,
+                              }}
+                            >
+                              {activeEdit.agentId}
+                            </span>
+                          </div>
+                        </>
+                      )}
                       <span
                         className="text-[10px] font-semibold truncate px-1.5 leading-none"
                         style={{ color: style.label }}
@@ -364,4 +428,4 @@ export function Timeline({ onSeek }: TimelineProps = {}) {
       </div>
     </div>
   );
-}
+});
diff --git a/packages/ui-player/src/hooks/useTimelinePlayer.ts b/packages/studio/src/player/hooks/useTimelinePlayer.ts
similarity index 58%
rename from packages/ui-player/src/hooks/useTimelinePlayer.ts
rename to packages/studio/src/player/hooks/useTimelinePlayer.ts
index 7f3ca99e..df2af4bc 100644
--- a/packages/ui-player/src/hooks/useTimelinePlayer.ts
+++ b/packages/studio/src/player/hooks/useTimelinePlayer.ts
@@ -20,10 +20,31 @@ interface TimelineLike {
   isActive: () => boolean;
 }
 
+interface ClipManifestClip {
+  id: string | null;
+  label: string;
+  start: number;
+  duration: number;
+  track: number;
+  kind: "video" | "audio" | "image" | "element" | "composition";
+  tagName: string | null;
+  compositionId: string | null;
+  parentCompositionId: string | null;
+  compositionSrc: string | null;
+  assetUrl: string | null;
+}
+
+interface ClipManifest {
+  clips: ClipManifestClip[];
+  scenes: Array<{ id: string; label: string; start: number; duration: number }>;
+  durationInFrames: number;
+}
+
 type IframeWindow = Window & {
   __player?: PlayerAPI;
   __timeline?: TimelineLike;
   __timelines?: Record<string, TimelineLike>;
+  __clipManifest?: ClipManifest;
 };
 
 interface PlaybackAdapter {
@@ -113,6 +134,11 @@ function unmutePreviewMedia(iframe: HTMLIFrameElement | null): void {
       { source: "hf-parent", type: "control", action: "set-muted", muted: false },
       "*",
     );
+    // Fallback for CDN runtime that still uses the old source name
+    iframe.contentWindow?.postMessage(
+      { source: "magic-edit-parent", type: "control", action: "set-muted", muted: false },
+      "*",
+    );
   } catch {
     /* ignore */
   }
@@ -125,8 +151,10 @@ export function useTimelinePlayer() {
   const pendingSeekRef = useRef<number | null>(null);
   const isRefreshingRef = useRef(false);
 
-  const { isPlaying, setIsPlaying, setCurrentTime, setDuration, setTimelineReady, setElements, reset } =
-    usePlayerStore();
+  // ZERO store subscriptions — this hook never causes re-renders.
+  // All reads use getState() (point-in-time), all writes use the stable setters.
+  const { setIsPlaying, setCurrentTime, setDuration, setTimelineReady, setElements, reset } =
+    usePlayerStore.getState();
 
   const getAdapter = useCallback((): PlaybackAdapter | null => {
     try {
@@ -173,6 +201,25 @@ export function useTimelinePlayer() {
     cancelAnimationFrame(rafRef.current);
   }, []);
 
+  const applyPlaybackRate = useCallback((rate: number) => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    // Send to runtime via bridge (works with both new and CDN runtime)
+    iframe.contentWindow?.postMessage({ source: "hf-parent", type: "control", action: "set-playback-rate", playbackRate: rate }, "*");
+    iframe.contentWindow?.postMessage({ source: "magic-edit-parent", type: "control", action: "set-playback-rate", playbackRate: rate }, "*");
+    // Also set directly on GSAP timeline if accessible
+    try {
+      const win = iframe.contentWindow as IframeWindow | null;
+      if (win?.__timelines) {
+        for (const tl of Object.values(win.__timelines)) {
+          if (tl && typeof (tl as unknown as { timeScale?: (v: number) => void }).timeScale === "function") {
+            (tl as unknown as { timeScale: (v: number) => void }).timeScale(rate);
+          }
+        }
+      }
+    } catch { /* cross-origin */ }
+  }, []);
+
   const play = useCallback(() => {
     const adapter = getAdapter();
     if (!adapter) return;
@@ -180,10 +227,11 @@ export function useTimelinePlayer() {
       adapter.seek(0);
     }
     unmutePreviewMedia(iframeRef.current);
+    applyPlaybackRate(usePlayerStore.getState().playbackRate);
     adapter.play();
     setIsPlaying(true);
     startRAFLoop();
-  }, [getAdapter, setIsPlaying, startRAFLoop]);
+  }, [getAdapter, setIsPlaying, startRAFLoop, applyPlaybackRate]);
 
   const pause = useCallback(() => {
     const adapter = getAdapter();
@@ -194,27 +242,55 @@ export function useTimelinePlayer() {
   }, [getAdapter, setIsPlaying, stopRAFLoop]);
 
   const togglePlay = useCallback(() => {
-    if (isPlaying) {
+    if (usePlayerStore.getState().isPlaying) {
       pause();
     } else {
       play();
     }
-  }, [isPlaying, play, pause]);
+  }, [play, pause]);
 
   const seek = useCallback(
     (time: number) => {
       const adapter = getAdapter();
       if (!adapter) return;
       adapter.seek(time);
-      setCurrentTime(time);
-      setIsPlaying(false);
+      liveTime.notify(time); // Direct DOM updates (playhead, timecode, progress) — no re-render
       stopRAFLoop();
+      // Only update store if state actually changes (avoids unnecessary re-renders)
+      if (usePlayerStore.getState().isPlaying) setIsPlaying(false);
+    },
+    [getAdapter, setIsPlaying, stopRAFLoop],
+  );
+
+  // Convert a runtime timeline message (from iframe postMessage) into TimelineElements
+  const processTimelineMessage = useCallback(
+    (data: { clips: ClipManifestClip[]; durationInFrames: number }) => {
+      if (!data.clips || data.clips.length === 0) return;
+
+      // Show only root-level clips: those with no parentCompositionId (direct children of root).
+      // Sub-composition children (parentCompositionId !== null) belong to the drill-down view.
+      const els: TimelineElement[] = data.clips
+        .filter((clip) => !clip.parentCompositionId)
+        .map((clip) => {
+          const entry: TimelineElement = {
+            id: clip.id || clip.label || clip.tagName || "element",
+            tag: clip.tagName || clip.kind,
+            start: clip.start,
+            duration: clip.duration,
+            track: clip.track,
+          };
+          if (clip.assetUrl) entry.src = clip.assetUrl;
+          if (clip.kind === "composition" && clip.compositionId) {
+            entry.compositionSrc = clip.compositionSrc || `compositions/${clip.compositionId}.html`;
+          }
+          return entry;
+        });
+      setElements(els);
     },
-    [getAdapter, setCurrentTime, setIsPlaying, stopRAFLoop],
+    [setElements],
   );
 
   const onIframeLoad = useCallback(() => {
-    // Unmute immediately on load so audio is ready when user hits play
     unmutePreviewMedia(iframeRef.current);
 
     let attempts = 0;
@@ -244,19 +320,25 @@ export function useTimelinePlayer() {
 
         try {
           const doc = iframeRef.current?.contentDocument;
-          if (doc) {
-            const win = iframeRef.current?.contentWindow;
-            if (win) {
-              normalizePreviewViewport(doc, win);
-              autoHealMissingCompositionIds(doc);
-            }
-            const rootComposition = doc.querySelector("[data-composition-id]");
+          const iframeWin = iframeRef.current?.contentWindow as IframeWindow | null;
+          if (doc && iframeWin) {
+            normalizePreviewViewport(doc, iframeWin);
+            autoHealMissingCompositionIds(doc);
+          }
+
+          // Try reading __clipManifest if already available (fast path)
+          const manifest = iframeWin?.__clipManifest;
+          if (manifest && manifest.clips.length > 0) {
+            processTimelineMessage(manifest);
+          } else if (doc) {
+            // Fallback: parse data-start elements directly from DOM (raw HTML without runtime)
+            const rootComp = doc.querySelector("[data-composition-id]");
             const nodes = doc.querySelectorAll("[data-start]");
             const els: TimelineElement[] = [];
             let trackCounter = 0;
             const rootDuration = adapter.getDuration();
             nodes.forEach((node) => {
-              if (node === rootComposition) return;
+              if (node === rootComp) return;
               const el = node as HTMLElement;
               const startStr = el.getAttribute("data-start");
               if (startStr == null) return;
@@ -264,70 +346,37 @@ export function useTimelinePlayer() {
               if (isNaN(start)) return;
 
               const tagLower = el.tagName.toLowerCase();
-
               let dur = 0;
               const durStr = el.getAttribute("data-duration");
-              const endStr = el.getAttribute("data-end");
-              if (durStr != null) {
-                dur = parseFloat(durStr);
-              } else if (endStr != null) {
-                dur = parseFloat(endStr) - start;
-              }
-
-              if ((isNaN(dur) || dur <= 0) && (tagLower === "video" || tagLower === "audio")) {
-                const mediaEl = el as unknown as HTMLMediaElement;
-                if (mediaEl.duration && isFinite(mediaEl.duration) && mediaEl.duration > 0) {
-                  const pbStart = parseFloat(el.getAttribute("data-playback-start") || "0") || 0;
-                  dur = mediaEl.duration - pbStart;
-                }
-              }
-
-              const compositionId = el.getAttribute("data-composition-id");
-              if ((isNaN(dur) || dur <= 0) && compositionId) {
-                const win = iframeRef.current?.contentWindow as IframeWindow | null;
-                const compTl = win?.__timelines?.[compositionId];
-                if (compTl) {
-                  const compDur = compTl.duration();
-                  if (compDur > 0) dur = compDur;
-                }
-              }
-
-              const maxVisibleDuration = Math.max(0, rootDuration - start);
-              if (isNaN(dur) || dur <= 0) {
-                dur = maxVisibleDuration;
-              } else if (maxVisibleDuration > 0) {
-                dur = Math.min(dur, maxVisibleDuration);
-              }
+              if (durStr != null) dur = parseFloat(durStr);
+              if (isNaN(dur) || dur <= 0) dur = Math.max(0, rootDuration - start);
 
               const trackStr = el.getAttribute("data-track-index");
               const track = trackStr != null ? parseInt(trackStr, 10) : trackCounter++;
               const entry: TimelineElement = {
-                id: el.id || tagLower,
+                id: el.id || el.className?.split(" ")[0] || tagLower,
                 tag: tagLower,
                 start,
                 duration: dur,
                 track: isNaN(track) ? 0 : track,
               };
-
               if (tagLower === "video" || tagLower === "audio" || tagLower === "img") {
                 const src = el.getAttribute("src");
                 if (src) entry.src = src;
               }
-              const pbStart = el.getAttribute("data-playback-start");
-              if (pbStart != null) {
-                const parsed = parseFloat(pbStart);
-                if (!isNaN(parsed)) entry.playbackStart = parsed;
+              // Detect sub-compositions
+              const compSrc = el.getAttribute("data-composition-src");
+              const compId = el.getAttribute("data-composition-id");
+              if (compSrc || (compId && compId !== rootComp?.getAttribute("data-composition-id"))) {
+                entry.compositionSrc = compSrc || `compositions/${compId}.html`;
               }
-              const vol = el.getAttribute("data-volume");
-              if (vol != null) {
-                const parsed = parseFloat(vol);
-                if (!isNaN(parsed)) entry.volume = parsed;
-              }
-
               els.push(entry);
             });
-            setElements(els);
+            if (els.length > 0) setElements(els);
           }
+          // The runtime will also postMessage the full timeline after all compositions load.
+          // That message is handled by the window listener below, which will update elements
+          // with the complete data (including async-loaded compositions).
         } catch {
           // Cross-origin or DOM access error
         }
@@ -339,26 +388,34 @@ export function useTimelinePlayer() {
         console.warn("Could not find __player, __timeline, or __timelines on iframe after 5s");
       }
     }, 200);
-  }, [getAdapter, setDuration, setCurrentTime, setTimelineReady, setIsPlaying, setElements]);
+  }, [getAdapter, setDuration, setCurrentTime, setTimelineReady, setIsPlaying, processTimelineMessage]);
+
+  /** Save the current playback time so the next onIframeLoad restores it. */
+  const saveSeekPosition = useCallback(() => {
+    const adapter = getAdapter();
+    pendingSeekRef.current = adapter ? adapter.getTime() : (usePlayerStore.getState().currentTime ?? 0);
+    isRefreshingRef.current = true;
+    stopRAFLoop();
+    setIsPlaying(false);
+  }, [getAdapter, stopRAFLoop, setIsPlaying]);
 
   const refreshPlayer = useCallback(() => {
     const iframe = iframeRef.current;
     if (!iframe) return;
 
-    pendingSeekRef.current = 0;
-    isRefreshingRef.current = true;
-
-    stopRAFLoop();
-    setIsPlaying(false);
+    saveSeekPosition();
 
     const src = iframe.src;
     const url = new URL(src, window.location.origin);
     url.searchParams.set("_t", String(Date.now()));
     iframe.src = url.toString();
-  }, [stopRAFLoop, setIsPlaying]);
+  }, [saveSeekPosition]);
 
   const togglePlayRef = useRef(togglePlay);
   togglePlayRef.current = togglePlay;
+  const processTimelineMessageRef = useRef(processTimelineMessage);
+  processTimelineMessageRef.current = processTimelineMessage;
+
   useMountEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.code === "Space" && e.target === document.body) {
@@ -366,9 +423,29 @@ export function useTimelinePlayer() {
         togglePlayRef.current();
       }
     };
+
+    // Listen for timeline messages from the iframe runtime.
+    // The runtime sends this AFTER all external compositions load,
+    // so we get the complete clip list (not just the first few).
+    const handleMessage = (e: MessageEvent) => {
+      const data = e.data;
+      if ((data?.source === "hf-preview" || data?.source === "magic-edit-preview") && data?.type === "timeline" && Array.isArray(data.clips)) {
+        processTimelineMessageRef.current(data);
+        // Update duration only if the new value is longer (don't downgrade during generation)
+        if (data.durationInFrames > 0) {
+          const fps = 30;
+          const dur = data.durationInFrames / fps;
+          const currentDur = usePlayerStore.getState().duration;
+          if (dur > currentDur) usePlayerStore.getState().setDuration(dur);
+        }
+      }
+    };
+
     window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("message", handleMessage);
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("message", handleMessage);
       stopRAFLoop();
       if (probeIntervalRef.current) clearInterval(probeIntervalRef.current);
       reset();
@@ -383,5 +460,6 @@ export function useTimelinePlayer() {
     seek,
     onIframeLoad,
     refreshPlayer,
+    saveSeekPosition,
   };
 }
diff --git a/packages/ui-player/src/index.ts b/packages/studio/src/player/index.ts
similarity index 66%
rename from packages/ui-player/src/index.ts
rename to packages/studio/src/player/index.ts
index bf1ece5e..f1792856 100644
--- a/packages/ui-player/src/index.ts
+++ b/packages/studio/src/player/index.ts
@@ -3,13 +3,15 @@ export { Player } from "./components/Player";
 export { PlayerControls } from "./components/PlayerControls";
 export { Timeline } from "./components/Timeline";
 export { PreviewPanel } from "./components/PreviewPanel";
+export { AgentActivityTrack } from "./components/AgentActivityTrack";
+export type { AgentActivity } from "./components/AgentActivityTrack";
 
 // Hooks
 export { useTimelinePlayer } from "./hooks/useTimelinePlayer";
 
 // Store
 export { usePlayerStore, liveTime } from "./store/playerStore";
-export type { TimelineElement } from "./store/playerStore";
+export type { TimelineElement, ActiveEdits } from "./store/playerStore";
 
 // Utils
 export { formatTime } from "./lib/time";
diff --git a/packages/studio/frontend/src/utils/time.ts b/packages/studio/src/player/lib/time.ts
similarity index 100%
rename from packages/studio/frontend/src/utils/time.ts
rename to packages/studio/src/player/lib/time.ts
diff --git a/packages/ui-player/src/lib/useMountEffect.ts b/packages/studio/src/player/lib/useMountEffect.ts
similarity index 100%
rename from packages/ui-player/src/lib/useMountEffect.ts
rename to packages/studio/src/player/lib/useMountEffect.ts
diff --git a/packages/ui-player/src/store/playerStore.ts b/packages/studio/src/player/store/playerStore.ts
similarity index 72%
rename from packages/ui-player/src/store/playerStore.ts
rename to packages/studio/src/player/store/playerStore.ts
index 004d7edc..811cea55 100644
--- a/packages/ui-player/src/store/playerStore.ts
+++ b/packages/studio/src/player/store/playerStore.ts
@@ -9,6 +9,17 @@ export interface TimelineElement {
   src?: string;
   playbackStart?: number;
   volume?: number;
+  /** Path from data-composition-src — identifies sub-composition elements */
+  compositionSrc?: string;
+  /** Agent that created/last edited this element */
+  agentId?: string;
+  /** Agent's color for ownership visualization */
+  agentColor?: string;
+}
+
+/** Map of elementId → agentColor for clips currently being edited */
+export interface ActiveEdits {
+  [elementId: string]: { agentId: string; agentColor: string };
 }
 
 interface PlayerState {
@@ -18,13 +29,18 @@ interface PlayerState {
   timelineReady: boolean;
   elements: TimelineElement[];
   selectedElementId: string | null;
+  /** Clips currently being edited by agents — for glow animation */
+  activeEdits: ActiveEdits;
+  playbackRate: number;
 
   setIsPlaying: (playing: boolean) => void;
   setCurrentTime: (time: number) => void;
   setDuration: (duration: number) => void;
+  setPlaybackRate: (rate: number) => void;
   setTimelineReady: (ready: boolean) => void;
   setElements: (elements: TimelineElement[]) => void;
   setSelectedElementId: (id: string | null) => void;
+  setActiveEdits: (edits: ActiveEdits) => void;
   updateElementStart: (elementId: string, newStart: number) => void;
   reset: () => void;
 }
@@ -49,13 +65,17 @@ export const usePlayerStore = create<PlayerState>((set) => ({
   timelineReady: false,
   elements: [],
   selectedElementId: null,
+  activeEdits: {},
+  playbackRate: 1,
 
   setIsPlaying: (playing) => set({ isPlaying: playing }),
+  setPlaybackRate: (rate) => set({ playbackRate: rate }),
   setCurrentTime: (time) => set({ currentTime: time }),
   setDuration: (duration) => set({ duration }),
   setTimelineReady: (ready) => set({ timelineReady: ready }),
   setElements: (elements) => set({ elements }),
   setSelectedElementId: (id) => set({ selectedElementId: id }),
+  setActiveEdits: (edits) => set({ activeEdits: edits }),
   updateElementStart: (elementId, newStart) =>
     set((state) => ({
       elements: state.elements.map((el) => (el.id === elementId ? { ...el, start: newStart } : el)),
@@ -68,5 +88,6 @@ export const usePlayerStore = create<PlayerState>((set) => ({
       timelineReady: false,
       elements: [],
       selectedElementId: null,
+      activeEdits: {},
     }),
 }));
diff --git a/packages/studio/src/styles/studio.css b/packages/studio/src/styles/studio.css
new file mode 100644
index 00000000..9d060733
--- /dev/null
+++ b/packages/studio/src/styles/studio.css
@@ -0,0 +1,31 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  margin: 0;
+  padding: 0;
+  background: #0a0a0a;
+  color: #e5e5e5;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  overflow: hidden;
+}
+
+#root {
+  width: 100vw;
+  height: 100vh;
+}
+
+/* CodeMirror overrides */
+.cm-editor {
+  height: 100%;
+  font-size: 13px;
+}
+
+.cm-editor .cm-scroller {
+  font-family: "JetBrains Mono", "Fira Code", "SF Mono", monospace;
+}
+
+.cm-editor.cm-focused {
+  outline: none;
+}
diff --git a/packages/studio/src/utils/sourcePatcher.ts b/packages/studio/src/utils/sourcePatcher.ts
new file mode 100644
index 00000000..1b2c22e2
--- /dev/null
+++ b/packages/studio/src/utils/sourcePatcher.ts
@@ -0,0 +1,149 @@
+/**
+ * Source Patcher — Maps visual property edits back to source HTML files.
+ * Handles inline style updates, attribute changes, and text content.
+ */
+
+function escapeRegex(s: string): string {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+export interface PatchOperation {
+  type: "inline-style" | "attribute" | "text-content";
+  property: string;
+  value: string;
+}
+
+/**
+ * Find which source file contains an element by its ID.
+ */
+export function resolveSourceFile(
+  elementId: string | null,
+  selector: string,
+  files: Record<string, string>,
+): string | null {
+  if (!elementId && !selector) return null;
+
+  // Strategy 1: Search by id attribute
+  if (elementId) {
+    for (const [path, content] of Object.entries(files)) {
+      if (content.includes(`id="${elementId}"`) || content.includes(`id='${elementId}'`)) {
+        return path;
+      }
+    }
+  }
+
+  // Strategy 2: Search by data-composition-id from the selector
+  const compIdMatch = selector.match(/data-composition-id="([^"]+)"/);
+  if (compIdMatch) {
+    const compId = compIdMatch[1];
+    for (const [path, content] of Object.entries(files)) {
+      if (content.includes(`data-composition-id="${compId}"`)) {
+        return path;
+      }
+    }
+  }
+
+  // Strategy 3: Search by class from the selector
+  const classMatch = selector.match(/^\.([a-zA-Z0-9_-]+)/);
+  if (classMatch) {
+    const cls = classMatch[1];
+    for (const [path, content] of Object.entries(files)) {
+      if (content.includes(`class="${cls}"`) || content.includes(`class="${cls} `) || content.includes(` ${cls}"`)) {
+        return path;
+      }
+    }
+  }
+
+  // Fallback: index.html
+  if ("index.html" in files) return "index.html";
+  return null;
+}
+
+/**
+ * Apply a style property change to an element's inline style in the HTML source.
+ */
+function patchInlineStyle(html: string, elementId: string, prop: string, value: string): string {
+  // Find the element tag with this id
+  const idPattern = new RegExp(`(<[^>]*\\bid="${escapeRegex(elementId)}"[^>]*)>`, "i");
+  const match = idPattern.exec(html);
+  if (!match) return html;
+
+  const tag = match[1];
+
+  // Check if there's an existing style attribute
+  const styleMatch = /\bstyle="([^"]*)"/.exec(tag);
+  if (styleMatch) {
+    const existingStyle = styleMatch[1];
+    // Parse existing properties
+    const props = new Map<string, string>();
+    for (const part of existingStyle.split(";")) {
+      const colon = part.indexOf(":");
+      if (colon < 0) continue;
+      const key = part.slice(0, colon).trim();
+      const val = part.slice(colon + 1).trim();
+      if (key) props.set(key, val);
+    }
+    // Update/add the property
+    props.set(prop, value);
+    // Rebuild style string
+    const newStyle = Array.from(props.entries())
+      .map(([k, v]) => `${k}: ${v}`)
+      .join("; ");
+    const newTag = tag.replace(/\bstyle="[^"]*"/, `style="${newStyle}"`);
+    return html.replace(tag, newTag);
+  } else {
+    // No existing style — add one
+    const newTag = tag.replace(/>$/, "") + ` style="${prop}: ${value}"`;
+    return html.replace(tag, newTag);
+  }
+}
+
+/**
+ * Apply an attribute change to an element in the HTML source.
+ */
+function patchAttribute(html: string, elementId: string, attr: string, value: string): string {
+  const idPattern = new RegExp(`(<[^>]*\\bid="${escapeRegex(elementId)}"[^>]*)>`, "i");
+  const match = idPattern.exec(html);
+  if (!match) return html;
+
+  const tag = match[1];
+  const fullAttr = attr.startsWith("data-") ? attr : `data-${attr}`;
+  const attrPattern = new RegExp(`\\b${fullAttr}="[^"]*"`);
+
+  if (attrPattern.test(tag)) {
+    // Update existing attribute
+    const newTag = tag.replace(attrPattern, `${fullAttr}="${value}"`);
+    return html.replace(tag, newTag);
+  } else {
+    // Add new attribute
+    const newTag = tag + ` ${fullAttr}="${value}"`;
+    return html.replace(tag, newTag);
+  }
+}
+
+/**
+ * Apply a text content change to an element.
+ */
+function patchTextContent(html: string, elementId: string, value: string): string {
+  // Match the element and its content: <tagname id="elementId"...>content</tagname>
+  const pattern = new RegExp(`(<[^>]*\\bid="${elementId}"[^>]*>)([\\s\\S]*?)(<\\/[a-z]+>)`, "i");
+  const match = pattern.exec(html);
+  if (!match) return html;
+  return html.replace(pattern, `${match[1]}${value}${match[3]}`);
+}
+
+/**
+ * Apply a patch operation to an HTML source file.
+ */
+export function applyPatch(html: string, elementId: string, op: PatchOperation): string {
+  switch (op.type) {
+    case "inline-style":
+      return patchInlineStyle(html, elementId, op.property, op.value);
+    case "attribute":
+      return patchAttribute(html, elementId, op.property, op.value);
+    case "text-content":
+      return patchTextContent(html, elementId, op.value);
+    default:
+      return html;
+  }
+}
diff --git a/packages/studio/tailwind.config.js b/packages/studio/tailwind.config.js
new file mode 100644
index 00000000..a0a18919
--- /dev/null
+++ b/packages/studio/tailwind.config.js
@@ -0,0 +1,27 @@
+import { resolve, dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    resolve(__dirname, "./src/**/*.{ts,tsx}"),
+    resolve(__dirname, "./index.html"),
+  ],
+  theme: {
+    extend: {
+      colors: {
+        studio: {
+          bg: "#0a0a0a",
+          surface: "#141414",
+          border: "#262626",
+          text: "#e5e5e5",
+          muted: "#737373",
+          accent: "#00E3FF",
+        },
+      },
+    },
+  },
+  plugins: [],
+};
diff --git a/packages/ui-player/tsconfig.json b/packages/studio/tsconfig.json
similarity index 68%
rename from packages/ui-player/tsconfig.json
rename to packages/studio/tsconfig.json
index 9f65b953..81fdba5a 100644
--- a/packages/ui-player/tsconfig.json
+++ b/packages/studio/tsconfig.json
@@ -7,12 +7,14 @@
     "strict": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
     "declaration": true,
     "declarationMap": true,
     "sourceMap": true,
     "outDir": "dist",
     "rootDir": "src",
-    "noEmit": true
+    "types": ["vite/client"]
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["dist", "node_modules", "src/dev-server.ts"]
 }
diff --git a/packages/studio/vite.config.ts b/packages/studio/vite.config.ts
new file mode 100644
index 00000000..2397e712
--- /dev/null
+++ b/packages/studio/vite.config.ts
@@ -0,0 +1,322 @@
+import { defineConfig, type Plugin } from "vite";
+import react from "@vitejs/plugin-react";
+import { readFileSync, readdirSync, existsSync, statSync, writeFileSync, lstatSync, realpathSync } from "node:fs";
+import { join, resolve, sep } from "node:path";
+
+/** Reject paths that escape the project directory. */
+function isSafePath(base: string, resolved: string): boolean {
+  const norm = resolve(base) + sep;
+  return resolved.startsWith(norm) || resolved === resolve(base);
+}
+
+// Lazy-load the bundler via Vite's SSR module loader (resolves .ts imports correctly)
+let _bundler: ((dir: string) => Promise<string>) | null = null;
+
+/** Minimal project API for standalone dev mode */
+function devProjectApi(): Plugin {
+  // Project data directory — defaults to studio/data/projects
+  const dataDir = resolve(__dirname, "data/projects");
+
+  return {
+    name: "studio-dev-api",
+    configureServer(server): void {
+      // Load the bundler via Vite's SSR module loader (resolves .ts imports)
+      const getBundler = async () => {
+        if (!_bundler) {
+          try {
+            const mod = await server.ssrLoadModule("@hyperframes/core/compiler");
+            _bundler = (dir: string) => mod.bundleToSingleHtml(dir);
+          } catch (err) {
+            console.warn("[Studio] Failed to load compiler, previews will use raw HTML:", err);
+            _bundler = null as never;
+          }
+        }
+        return _bundler;
+      };
+
+      server.middlewares.use(async (req, res, next) => {
+        if (!req.url?.startsWith("/api/")) return next();
+
+        // Proxy render endpoints to archive backend
+        if (req.url.startsWith("/api/render/") || (req.method === "POST" && req.url.match(/\/api\/projects\/[^/]+\/render/))) {
+          const archiveUrl = `http://localhost:5180${req.url}`;
+          try {
+            if (req.method === "POST") {
+              let body = "";
+              req.on("data", (chunk: Buffer) => { body += chunk.toString(); });
+              await new Promise<void>((resolve) => req.on("end", resolve));
+              const archiveRes = await fetch(archiveUrl, { method: "POST", headers: { "Content-Type": "application/json" }, body });
+              const data = await archiveRes.text();
+              res.writeHead(archiveRes.status, { "Content-Type": "application/json" });
+              res.end(data);
+            } else {
+              // SSE proxy for progress
+              const archiveRes = await fetch(archiveUrl);
+              res.writeHead(archiveRes.status, Object.fromEntries(archiveRes.headers.entries()));
+              const reader = archiveRes.body?.getReader();
+              if (reader) {
+                const pump = async () => {
+                  while (true) {
+                    const { done, value } = await reader.read();
+                    if (done) { res.end(); break; }
+                    res.write(value);
+                  }
+                };
+                pump().catch(() => res.end());
+              } else {
+                res.end(await archiveRes.text());
+              }
+            }
+          } catch {
+            res.writeHead(502, { "Content-Type": "application/json" });
+            res.end(JSON.stringify({ error: "Archive backend not running. Start it with: pnpm dev" }));
+          }
+          return;
+        }
+
+        // GET /api/projects — list all projects with session metadata
+        if (req.method === "GET" && (req.url === "/api/projects" || req.url === "/api/projects/")) {
+          // Build session → project mapping for titles
+          const sessionsDir = resolve(dataDir, "../sessions");
+          const sessionMap = new Map<string, { sessionId: string; title: string }>();
+          if (existsSync(sessionsDir)) {
+            for (const file of readdirSync(sessionsDir).filter((f) => f.endsWith(".json"))) {
+              try {
+                const raw = JSON.parse(readFileSync(join(sessionsDir, file), "utf-8"));
+                if (raw.projectId) {
+                  sessionMap.set(raw.projectId, { sessionId: file.replace(".json", ""), title: raw.title || "Untitled" });
+                }
+              } catch { /* skip corrupt */ }
+            }
+          }
+
+          const projects = readdirSync(dataDir, { withFileTypes: true })
+            .filter((d) => (d.isDirectory() || d.isSymbolicLink()) && existsSync(join(dataDir, d.name, "index.html")))
+            .map((d) => {
+              const session = sessionMap.get(d.name);
+              return { id: d.name, title: session?.title ?? d.name, sessionId: session?.sessionId };
+            })
+            .sort((a, b) => a.title.localeCompare(b.title));
+          res.writeHead(200, { "Content-Type": "application/json" });
+          res.end(JSON.stringify({ projects }));
+          return;
+        }
+
+        // GET /api/resolve-session/:sessionId — resolve session ID to project ID
+        const sessionMatch = req.url.match(/^\/api\/resolve-session\/([^/]+)/);
+        if (req.method === "GET" && sessionMatch) {
+          const sessionsDir = resolve(dataDir, "../sessions");
+          const sessionFile = join(sessionsDir, `${sessionMatch[1]}.json`);
+          if (existsSync(sessionFile)) {
+            try {
+              const raw = JSON.parse(readFileSync(sessionFile, "utf-8"));
+              if (raw.projectId) {
+                res.writeHead(200, { "Content-Type": "application/json" });
+                res.end(JSON.stringify({ projectId: raw.projectId, title: raw.title }));
+                return;
+              }
+            } catch { /* ignore */ }
+          }
+          res.writeHead(404, { "Content-Type": "application/json" });
+          res.end(JSON.stringify({ error: "Session not found" }));
+          return;
+        }
+
+        const match = req.url.match(/^\/api\/projects\/([^/]+)(.*)/);
+        if (!match) return next();
+
+        let [, projectId, rest] = match;
+        let projectDir = join(dataDir, projectId);
+
+        // If project ID not found, try resolving it as a session ID
+        if (!existsSync(projectDir)) {
+          const sessionsDir = resolve(dataDir, "../sessions");
+          const sessionFile = join(sessionsDir, `${projectId}.json`);
+          if (existsSync(sessionFile)) {
+            try {
+              const session = JSON.parse(readFileSync(sessionFile, "utf-8"));
+              if (session.projectId) {
+                projectId = session.projectId;
+                projectDir = join(dataDir, projectId);
+              }
+            } catch { /* ignore */ }
+          }
+        }
+
+        if (!existsSync(projectDir)) {
+          res.writeHead(404, { "Content-Type": "application/json" });
+          res.end(JSON.stringify({ error: "not found" }));
+          return;
+        }
+
+        // GET /api/projects/:id
+        if (req.method === "GET" && !rest) {
+          const files: string[] = [];
+          function walk(d: string, prefix: string) {
+            for (const entry of readdirSync(d, { withFileTypes: true })) {
+              const rel = prefix ? `${prefix}/${entry.name}` : entry.name;
+              if (entry.isDirectory()) walk(join(d, entry.name), rel);
+              else files.push(rel);
+            }
+          }
+          walk(projectDir, "");
+          res.writeHead(200, { "Content-Type": "application/json" });
+          res.end(JSON.stringify({ id: projectId, files }));
+          return;
+        }
+
+        // GET /api/projects/:id/preview — bundle and serve the full composition
+        if (req.method === "GET" && rest === "/preview") {
+          try {
+            const bundler = await getBundler();
+            const bundled = bundler ? await bundler(projectDir) : readFileSync(join(projectDir, "index.html"), "utf-8");
+            res.writeHead(200, { "Content-Type": "text/html; charset=utf-8", "Cache-Control": "no-store" });
+            res.end(bundled);
+          } catch (err) {
+            // Fallback to raw HTML if bundling fails
+            const file = join(projectDir, "index.html");
+            if (existsSync(file)) {
+              res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+              res.end(readFileSync(file, "utf-8"));
+            } else {
+              res.writeHead(404); res.end("not found");
+            }
+          }
+          return;
+        }
+
+        // GET /api/projects/:id/preview/comp/* — serve sub-composition as standalone playable page
+        if (req.method === "GET" && rest.startsWith("/preview/comp/")) {
+          const compPath = decodeURIComponent(rest.replace("/preview/comp/", "").split("?")[0]);
+          const compFile = resolve(projectDir, compPath);
+          if (!isSafePath(projectDir, compFile) || !existsSync(compFile) || !statSync(compFile).isFile()) { res.writeHead(404); res.end("not found"); return; }
+
+          let rawComp = readFileSync(compFile, "utf-8");
+
+          // Extract content from <template> if present
+          const templateMatch = rawComp.match(/<template>([\s\S]*)<\/template>/i);
+          let content = templateMatch ? templateMatch[1] : rawComp;
+
+          // Inline nested data-composition-src references (keep the attr for drill-down navigation)
+          content = content.replace(
+            /(<[^>]*?)(data-composition-src=["']([^"']+)["'])([^>]*>)/g,
+            (_match, before, srcAttr, src, after) => {
+              const nestedFile = join(projectDir, src);
+              if (!existsSync(nestedFile)) return before + srcAttr + after;
+              const nestedRaw = readFileSync(nestedFile, "utf-8");
+              const nestedTemplate = nestedRaw.match(/<template>([\s\S]*)<\/template>/i);
+              const nestedContent = nestedTemplate ? nestedTemplate[1] : nestedRaw;
+              // Extract styles, scripts, and body from nested content
+              const styles: string[] = [];
+              const scripts: string[] = [];
+              let body = nestedContent
+                .replace(/<style[^>]*>([\s\S]*?)<\/style>/gi, (_, css) => { styles.push(css); return ""; })
+                .replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, (_, js) => { scripts.push(js); return ""; });
+              // Find the inner root with data-composition-id and use its children
+              const innerRootMatch = body.match(/<([a-z][a-z0-9]*)\b[^>]*data-composition-id[^>]*>([\s\S]*)<\/\1>/i);
+              const innerHTML = innerRootMatch ? innerRootMatch[2] : body;
+              // Keep data-composition-src on the host for drill-down URL resolution
+              return before + srcAttr + after.replace(/>$/, ">") + innerHTML +
+                (styles.length ? `<style>${styles.join("\n")}</style>` : "") +
+                (scripts.length ? `<script>${scripts.map(s => `(function(){try{${s}}catch(e){}})();`).join("\n")}</script>` : "");
+            }
+          );
+
+          // Build a standalone HTML page with GSAP + runtime
+          const runtimeUrl = (process.env.HYPERFRAME_RUNTIME_URL || "").trim() || "https://unpkg.com/@hyperframes/core/dist/hyperframe.runtime.iife.js";
+          const standalone = `<!DOCTYPE html>
+<html>
+<head>
+<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
+<script data-hyperframes-preview-runtime="1" src="${runtimeUrl}"></script>
+</head>
+<body>
+${content}
+</body>
+</html>`;
+          res.writeHead(200, { "Content-Type": "text/html; charset=utf-8", "Cache-Control": "no-store" });
+          res.end(standalone);
+          return;
+        }
+
+        // GET /api/projects/:id/preview/* — serve static assets (images, audio, etc.)
+        if (req.method === "GET" && rest.startsWith("/preview/")) {
+          const subPath = decodeURIComponent(rest.replace("/preview/", "").split("?")[0]);
+          const file = resolve(projectDir, subPath);
+          if (!isSafePath(projectDir, file) || !existsSync(file) || !statSync(file).isFile()) { res.writeHead(404); res.end("not found"); return; }
+          const isText = /\.(html|css|js|json|svg|txt)$/i.test(subPath);
+          const contentType = subPath.endsWith(".html") ? "text/html" : subPath.endsWith(".js") ? "text/javascript" : subPath.endsWith(".css") ? "text/css" : "application/octet-stream";
+          res.writeHead(200, { "Content-Type": contentType });
+          res.end(readFileSync(file, isText ? "utf-8" : undefined));
+          return;
+        }
+
+        // GET /api/projects/:id/files/:path — returns JSON { filename, content }
+        if (req.method === "GET" && rest.startsWith("/files/")) {
+          const filePath = decodeURIComponent(rest.replace("/files/", ""));
+          const file = resolve(projectDir, filePath);
+          if (!isSafePath(projectDir, file) || !existsSync(file)) { res.writeHead(404); res.end("not found"); return; }
+          const content = readFileSync(file, "utf-8");
+          res.writeHead(200, { "Content-Type": "application/json" });
+          res.end(JSON.stringify({ filename: filePath, content }));
+          return;
+        }
+
+        // PUT /api/projects/:id/files/:path
+        if (req.method === "PUT" && rest.startsWith("/files/")) {
+          const filePath = decodeURIComponent(rest.replace("/files/", ""));
+          const file = resolve(projectDir, filePath);
+          if (!isSafePath(projectDir, file)) {
+            res.writeHead(403, { "Content-Type": "application/json" });
+            res.end(JSON.stringify({ error: "forbidden" }));
+            return;
+          }
+          let body = "";
+          req.on("data", (chunk: Buffer) => { body += chunk.toString(); });
+          req.on("end", () => {
+            writeFileSync(file, body, "utf-8");
+            res.writeHead(200, { "Content-Type": "application/json" });
+            res.end(JSON.stringify({ ok: true }));
+          });
+          return;
+        }
+
+        next();
+      });
+
+      // Watch project directories for external file changes (user editing HTML outside the editor).
+      // Resolve symlinks so the watcher sees the real file paths.
+      const realProjectPaths: string[] = [];
+      try {
+        for (const entry of readdirSync(dataDir, { withFileTypes: true })) {
+          const full = join(dataDir, entry.name);
+          try {
+            const real = lstatSync(full).isSymbolicLink() ? realpathSync(full) : full;
+            realProjectPaths.push(real);
+            server.watcher.add(real);
+          } catch { /* skip broken symlinks */ }
+        }
+      } catch { /* dataDir doesn't exist yet */ }
+
+      // When a project file changes, send HMR event to refresh the preview
+      server.watcher.on("change", (filePath: string) => {
+        const isProjectFile = realProjectPaths.some((p) => filePath.startsWith(p));
+        if (isProjectFile && (filePath.endsWith(".html") || filePath.endsWith(".css") || filePath.endsWith(".js"))) {
+          console.log(`[Studio] File changed: ${filePath}`);
+          server.ws.send({ type: "custom", event: "hf:file-change", data: {} });
+        }
+      });
+    },
+  };
+}
+
+export default defineConfig({
+  plugins: [react(), devProjectApi()],
+  build: {
+    outDir: "dist",
+    emptyOutDir: true,
+  },
+  server: {
+    port: 5190,
+  },
+});
diff --git a/packages/ui-player/package.json b/packages/ui-player/package.json
deleted file mode 100644
index 863c6ac2..00000000
--- a/packages/ui-player/package.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "name": "@hyperframes/ui-player",
-  "version": "0.1.0",
-  "type": "module",
-  "exports": {
-    ".": "./src/index.ts",
-    "./components": "./src/components/index.ts",
-    "./hooks": "./src/hooks/index.ts",
-    "./store": "./src/store/index.ts",
-    "./tailwind-preset": "./src/tailwind-preset.ts"
-  },
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
-  "files": ["src", "dist"],
-  "scripts": {
-    "typecheck": "tsc --noEmit"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "zustand": "^4.0.0 || ^5.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "typescript": "^5.0.0"
-  }
-}
diff --git a/packages/ui-player/src/components/index.ts b/packages/ui-player/src/components/index.ts
deleted file mode 100644
index 72fc2bd5..00000000
--- a/packages/ui-player/src/components/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { Player } from "./Player";
-export { PlayerControls } from "./PlayerControls";
-export { Timeline } from "./Timeline";
-export { PreviewPanel } from "./PreviewPanel";
diff --git a/packages/ui-player/src/hooks/index.ts b/packages/ui-player/src/hooks/index.ts
deleted file mode 100644
index b1e30170..00000000
--- a/packages/ui-player/src/hooks/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { useTimelinePlayer } from "./useTimelinePlayer";
diff --git a/packages/ui-player/src/lib/index.ts b/packages/ui-player/src/lib/index.ts
deleted file mode 100644
index b0d5dff2..00000000
--- a/packages/ui-player/src/lib/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { formatTime } from "./time";
diff --git a/packages/ui-player/src/lib/time.ts b/packages/ui-player/src/lib/time.ts
deleted file mode 100644
index e41594ab..00000000
--- a/packages/ui-player/src/lib/time.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export function formatTime(time: number): string {
-  const mins = Math.floor(time / 60);
-  const secs = Math.floor(time % 60);
-  return `${mins}:${secs.toString().padStart(2, "0")}`;
-}
diff --git a/packages/ui-player/src/store/index.ts b/packages/ui-player/src/store/index.ts
deleted file mode 100644
index 9f65d055..00000000
--- a/packages/ui-player/src/store/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { usePlayerStore, liveTime } from "./playerStore";
-export type { TimelineElement } from "./playerStore";
diff --git a/packages/ui-player/src/tailwind-preset.ts b/packages/ui-player/src/tailwind-preset.ts
deleted file mode 100644
index baad8c51..00000000
--- a/packages/ui-player/src/tailwind-preset.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/** Tailwind CSS preset for @hyperframes/ui-player components. */
-export const hyperframesPlayerPreset = {
-  theme: {
-    extend: {
-      fontSize: {
-        "2xs": ["0.625rem", { lineHeight: "0.875rem" }],
-      },
-      borderRadius: {
-        card: "12px",
-        "card-inner": "8px",
-      },
-      boxShadow: {
-        float: "0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2)",
-      },
-    },
-  },
-};
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index cd73a2a3..dee51e92 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,4 +1,2 @@
 packages:
   - "packages/*"
-  - "packages/studio/frontend"
-  - "packages/studio/backend"