feat(studio): add animation inspector alpha

Author: miguel-heygen

bun.lock

@@ -68,7 +68,7 @@ async function main() {
     copyDir(join(CLI_ROOT, "src", "templates", tmpl), join(DIST, "templates", tmpl));
   }
 
-  for (const skill of ["hyperframes", "hyperframes-cli", "gsap"]) {
+  for (const skill of ["hyperframes", "hyperframes-cli", "gsap", "hf-motion"]) {
     copyDir(join(REPO_ROOT, "skills", skill), join(DIST, "skills", skill));
   }
 

packages/cli/scripts/build-copy.mjs

@@ -9,6 +9,13 @@ export interface ProjectWatcher {
 }
 
 const WATCHED_EXTENSIONS = new Set([".html", ".css", ".js", ".json"]);
+const IGNORED_SEGMENTS = new Set([
+  ".git",
+  ".hyperframes",
+  ".thumbnails",
+  "node_modules",
+  "renders",
+]);
 const DEBOUNCE_MS = 300;
 
 export function createProjectWatcher(projectDir: string): ProjectWatcher {
@@ -19,6 +26,8 @@ export function createProjectWatcher(projectDir: string): ProjectWatcher {
   try {
     watcher = watch(projectDir, { recursive: true }, (_event, filename) => {
       if (!filename) return;
+      const segments = filename.split(/[\\/]/).filter(Boolean);
+      if (segments.some((segment) => IGNORED_SEGMENTS.has(segment))) return;
       const ext = "." + filename.split(".").pop()?.toLowerCase();
       if (!WATCHED_EXTENSIONS.has(ext)) return;
 

packages/cli/src/server/fileWatcher.ts

@@ -341,6 +341,30 @@ export function createStudioServer(options: StudioServerOptions): StudioServer {
     return serve();
   });
 
+  const api = createStudioApi(adapter);
+  let recentApiWriteAt = 0;
+
+  watcher.addListener((relativePath) => {
+    if (Date.now() - recentApiWriteAt < 3000) return;
+    void api
+      .fetch(
+        new Request(
+          `http://studio/projects/${encodeURIComponent(project.id)}/history/adopt-external`,
+          {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              paths: [relativePath],
+              actor: { type: "external" },
+            }),
+          },
+        ),
+      )
+      .catch((error) => {
+        console.warn("[studio] Failed to adopt external file edit:", error);
+      });
+  });
+
   app.get("/api/events", (c) => {
     return streamSSE(c, async (stream) => {
       const listener = () => {
@@ -356,10 +380,12 @@ export function createStudioServer(options: StudioServerOptions): StudioServer {
   // Mount the shared studio API at /api.
   // Use fetch() forwarding (not .route()) so the sub-app sees paths without
   // the /api prefix — the shared module's path extraction uses c.req.path.
-  const api = createStudioApi(adapter);
   app.all("/api/*", async (c) => {
     const url = new URL(c.req.url);
     url.pathname = url.pathname.slice(4); // Strip "/api" prefix
+    if (/^\/projects\/[^/]+\/(?:edits|history\/(?:undo|redo|record-applied))/.test(url.pathname)) {
+      recentApiWriteAt = Date.now();
+    }
     const forwardReq = new Request(url.toString(), {
       method: c.req.method,
       headers: c.req.raw.headers,

packages/cli/src/server/studioServer.ts

@@ -30,10 +30,18 @@
       "types": "./src/compiler/index.ts"
     },
     "./runtime": "./dist/hyperframe.runtime.iife.js",
+    "./runtime/lottie-readiness": {
+      "import": "./src/runtime/adapters/lottieReadiness.ts",
+      "types": "./src/runtime/adapters/lottieReadiness.ts"
+    },
     "./studio-api": {
       "import": "./src/studio-api/index.ts",
       "types": "./src/studio-api/index.ts"
     },
+    "./studio-history": {
+      "import": "./src/studio-api/history/editHistory.ts",
+      "types": "./src/studio-api/history/editHistory.ts"
+    },
     "./text": {
       "import": "./src/text/index.ts",
       "types": "./src/text/index.ts"
@@ -61,10 +69,18 @@
         "types": "./dist/compiler/index.d.ts"
       },
       "./runtime": "./dist/hyperframe.runtime.iife.js",
+      "./runtime/lottie-readiness": {
+        "import": "./dist/runtime/adapters/lottieReadiness.js",
+        "types": "./dist/runtime/adapters/lottieReadiness.d.ts"
+      },
       "./studio-api": {
         "import": "./dist/studio-api/index.js",
         "types": "./dist/studio-api/index.d.ts"
       },
+      "./studio-history": {
+        "import": "./dist/studio-api/history/editHistory.js",
+        "types": "./dist/studio-api/history/editHistory.d.ts"
+      },
       "./text": {
         "import": "./dist/text/index.js",
         "types": "./dist/text/index.d.ts"