chore: import upstream snapshot with attribution

packages/studio/vite.config.ts

@@ -0,0 +1,206 @@
+import { defineConfig, type Plugin } from "vite";
+import react from "@vitejs/plugin-react";
+import { readFileSync, readdirSync, existsSync, lstatSync, realpathSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { readNodeRequestBody } from "./vite.request-body.js";
+import { createViteAdapter, isPathWithin } from "./vite.adapter";
+
+async function loadRuntimeSourceForDev(
+  server: import("vite").ViteDevServer,
+): Promise<string | null> {
+  try {
+    const mod = await server.ssrLoadModule(
+      resolve(__dirname, "../core/src/inline-scripts/hyperframe.ts"),
+    );
+    if (typeof mod.loadHyperframeRuntimeSource === "function") {
+      return mod.loadHyperframeRuntimeSource();
+    }
+  } catch (err) {
+    console.warn("[Studio] Failed to load runtime source from core:", err);
+  }
+  return null;
+}
+
+const studioPkg = JSON.parse(readFileSync(resolve(__dirname, "package.json"), "utf-8"));
+
+// ── Bridge Hono fetch → Node http response ───────────────────────────────────
+
+async function bridgeHonoResponse(
+  honoResponse: Response,
+  res: import("node:http").ServerResponse,
+): Promise<void> {
+  const headers: Record<string, string> = {};
+  honoResponse.headers.forEach((v, k) => {
+    headers[k] = v;
+  });
+  res.writeHead(honoResponse.status, headers);
+
+  if (!honoResponse.body) {
+    res.end();
+    return;
+  }
+
+  const reader = honoResponse.body.getReader();
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      res.write(value);
+    }
+  } catch {
+    /* client disconnected */
+  }
+  res.end();
+}
+
+// ── Vite plugin ──────────────────────────────────────────────────────────────
+
+function devProjectApi(): Plugin {
+  const dataDir = resolve(__dirname, "data/projects");
+  const runtimePath = resolve(__dirname, "../core/dist/hyperframe.runtime.iife.js");
+
+  return {
+    name: "studio-dev-api",
+    configureServer(server): void {
+      let _api: { fetch: (req: Request) => Promise<Response> } | null = null;
+      const getApi = async () => {
+        if (!_api) {
+          const mod = await server.ssrLoadModule("@hyperframes/studio-server");
+          const adapter = createViteAdapter(dataDir, server);
+          _api = mod.createStudioApi(adapter);
+        }
+        return _api;
+      };
+
+      // Runtime endpoint — prefer source build over dist artifact
+      server.middlewares.use((req, res, next) => {
+        if (req.url !== "/api/runtime.js") return next();
+        const serve = async () => {
+          let runtimeSource = await loadRuntimeSourceForDev(server);
+          if (!runtimeSource && existsSync(runtimePath)) {
+            runtimeSource = readFileSync(runtimePath, "utf-8");
+          }
+          if (!runtimeSource) {
+            res.writeHead(404);
+            res.end("runtime not available — build packages/core or load runtime source");
+            return;
+          }
+          res.writeHead(200, {
+            "Content-Type": "text/javascript",
+            "Cache-Control": "no-store",
+          });
+          res.end(runtimeSource);
+        };
+        void serve().catch((err) => {
+          console.error("[Studio runtime] Failed to serve runtime", err);
+          if (!res.headersSent) {
+            res.writeHead(500);
+            res.end("failed to serve runtime");
+          }
+        });
+      });
+
+      // API middleware
+      server.middlewares.use(async (req, res, next) => {
+        if (!req.url?.startsWith("/api/")) return next();
+        try {
+          const api = await getApi();
+          const url = new URL(req.url, `http://${req.headers.host}`);
+          url.pathname = url.pathname.slice(4);
+          let body: Buffer | undefined;
+          if (req.method !== "GET" && req.method !== "HEAD") {
+            const bytes = await readNodeRequestBody(req);
+            body = bytes.byteLength > 0 ? bytes : undefined;
+          }
+          const headers: Record<string, string> = {};
+          for (const [key, value] of Object.entries(req.headers)) {
+            if (value != null) headers[key] = Array.isArray(value) ? value.join(", ") : value;
+          }
+          const fetchReq = new Request(url.toString(), {
+            method: req.method,
+            headers,
+            body,
+          });
+          const response = await api.fetch(fetchReq);
+          await bridgeHonoResponse(response, res);
+        } catch (err) {
+          console.error("[Studio API] Error:", err);
+          if (!res.headersSent) {
+            res.writeHead(500, { "Content-Type": "application/json" });
+            res.end(JSON.stringify({ error: "Internal server error" }));
+          }
+        }
+      });
+
+      // Watch project directories for file changes → HMR
+      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 */
+      }
+
+      server.watcher.on("change", (filePath: string) => {
+        const isProjectFile = realProjectPaths.some((p) => isPathWithin(p, filePath));
+        if (
+          isProjectFile &&
+          (filePath.endsWith(".html") ||
+            filePath.endsWith(".css") ||
+            filePath.endsWith(".js") ||
+            filePath.endsWith(".json"))
+        ) {
+          console.log(`[Studio] File changed: ${filePath}`);
+          server.ws.send({ type: "custom", event: "hf:file-change", data: { path: filePath } });
+        }
+      });
+    },
+  };
+}
+
+export default defineConfig({
+  plugins: [react(), devProjectApi()],
+  define: {
+    __STUDIO_VERSION__: JSON.stringify(studioPkg.version),
+  },
+  resolve: {
+    alias: {
+      "@hyperframes/player": resolve(__dirname, "../player/src/hyperframes-player.ts"),
+      "@hyperframes/studio-server/source-mutation": resolve(
+        __dirname,
+        "../studio-server/src/helpers/sourceMutation.ts",
+      ),
+    },
+  },
+  build: {
+    outDir: "dist",
+    emptyOutDir: true,
+  },
+  optimizeDeps: {
+    include: ["bpm-detective"],
+  },
+  server: {
+    port: 5190,
+  },
+  ssr: {
+    // recast / @babel/parser are CommonJS and call `require("fs")`. They are
+    // reachable only server-side via the Node-only `@hyperframes/parsers/gsap-parser`
+    // subpath (studio-api GSAP mutations + the linter), which the dev server loads
+    // through Vite SSR. Externalizing them makes SSR load the native Node modules
+    // instead of esbuild-transforming the `require` into a shim that throws
+    // "Dynamic require of fs is not supported". Browser bundles never reach them.
+    external: ["recast", "@babel/parser", "ast-types"],
+  },
+  test: {
+    exclude: ["data/**", "node_modules/**"],
+    setupFiles: ["src/test-setup.ts"],
+  },
+});