@liqvid/studio 1.0.0-alpha.0

package/LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) Yuri Sulyma
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/esm/LiqvidDevToolsProvider.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Duration } from "@liqvid/duration";
+import { RecordingProvider } from "@liqvid/recording";
+import { LiqvidStudioPluginApiProvider, } from "@liqvid/studio-plugin-api";
+import { createContext, useContext, useMemo, useState } from "react";
+import { setProjectMeta } from "./client.mjs";
+import { Toaster } from "./ui/Toaster";
+import "./palette.css";
+export const ProjectContext = createContext({
+    projectPath: "",
+});
+export function useProjectContext() {
+    return useContext(ProjectContext);
+}
+export function LiqvidDevToolsProvider({ children, plugins, projectPath, }) {
+    const projectContext = useMemo(() => ({ projectPath }), [projectPath]);
+    const [toasts, setToasts] = useState([]);
+    const api = useMemo(() => ({
+        makeToast(toast) {
+            setToasts((prev) => [...prev, { ...toast, time: Date.now() }]);
+        },
+        setDuration: (duration) => {
+            setProjectMeta({
+                body: {
+                    durationMs: Duration.from(duration).inMilliseconds(),
+                },
+                search: {
+                    url: projectPath,
+                },
+            });
+        },
+    }), [projectPath]);
+    const recordingPlugins = useMemo(() => (plugins ?? []).reduce((acc, plugin) => {
+        if ("recorder" in plugin) {
+            acc.push(plugin);
+        }
+        return acc;
+    }, []), [plugins]);
+    return (_jsx(LiqvidStudioPluginApiProvider, { plugins: plugins, value: api, children: _jsxs(RecordingProvider, { plugins: recordingPlugins, children: [_jsxs(ProjectContext.Provider, { value: projectContext, children: [plugins?.map((plugin) => {
+                            if (!plugin.useConfigurePlugin)
+                                return null;
+                            return (_jsx(CallHook, { usePlugin: plugin.useConfigurePlugin }, plugin.package));
+                        }), children] }), _jsx(Toaster, { toasts })] }) }));
+}
+function CallHook({ usePlugin }) {
+    usePlugin();
+    return null;
+}

package/dist/esm/api/contract.mjs

@@ -0,0 +1,48 @@
+import { z } from "zod";
+import { RecordingMeta } from "../schemas/recording-meta.mjs";
+export const listRecordingsOperation = {
+    endpoint: "/recordings",
+    response: z.array(RecordingMeta),
+    search: z.object({
+        url: z.string(),
+    }),
+};
+export const setProjectMetaOperation = {
+    body: z.object({
+        durationMs: z.number(),
+    }),
+    endpoint: "/project-meta",
+    method: "POST",
+    search: z.object({
+        url: z.string(),
+    }),
+};
+/**
+ * Schema for plugin recording data.
+ * Data can be a Blob (for media) which requires a filename,
+ * or any JSON-serializable data.
+ */
+export const PluginRecordingData = z.object({
+    data: z.unknown(),
+    /** For Blob data, the filename to save as */
+    filename: z.string().optional(),
+    key: z.string(),
+});
+export const saveRecordingOperation = {
+    endpoint: "/recordings",
+    method: "POST",
+    search: z.object({
+        url: z.string(),
+    }),
+};
+/**
+ * Serve static files from the app directory.
+ * The `url` param is the path relative to the app directory.
+ * Example: /api/liqvid/static?url=/projects/my-video/.liqvid/recordings/test/@liqvid.media/audio.webm
+ */
+export const staticFileOperation = {
+    endpoint: "/static",
+    search: z.object({
+        url: z.string(),
+    }),
+};

package/dist/esm/api/project-meta.mjs

@@ -0,0 +1,33 @@
+import * as fs from "node:fs";
+import * as fsp from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { safeGet } from "have-fun";
+import { StatusCodes } from "http-status-codes";
+import { PROJECT_META_FILE } from "../conventions.mjs";
+import { setProjectMetaOperation } from "./contract.mjs";
+export async function setProjectMeta(searchParams, rawBody) {
+    const $url = safeGet(searchParams, "url");
+    if ($url.isNone) {
+        return Response.json({ error: "invalid" }, { status: StatusCodes.BAD_REQUEST });
+    }
+    const $body = setProjectMetaOperation.body.safeParse(rawBody);
+    if (!$body.success) {
+        return Response.json({ error: "invalid" }, { status: StatusCodes.BAD_REQUEST });
+    }
+    const body = $body.data;
+    let projectPath = fileURLToPath($url.unwrap());
+    if (projectPath.endsWith("page.tsx")) {
+        projectPath = path.dirname(projectPath);
+    }
+    const assetsDir = path.join(projectPath, ".liqvid");
+    const projectMetaFile = path.join(assetsDir, PROJECT_META_FILE);
+    // error if assets dir doesn't exist
+    if (!fs.existsSync(assetsDir)) {
+        return Response.json(null, { status: StatusCodes.INTERNAL_SERVER_ERROR });
+    }
+    await fsp.writeFile(projectMetaFile, JSON.stringify({ duration: { milliseconds: body.durationMs } }, null, 2));
+    return new Response(null, {
+        status: StatusCodes.NO_CONTENT,
+    });
+}

package/dist/esm/api/recording.mjs

@@ -0,0 +1,156 @@
+import * as fs from "node:fs";
+import * as fsp from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { compare } from "@liqvid/utils";
+import { safeGet } from "have-fun";
+import { StatusCodes } from "http-status-codes";
+import { RECORDING_META_FILE } from "../conventions.mjs";
+import { RecordingMetaFile as RecordingMetaFileSchema } from "../schemas/recording-meta.mjs";
+import { loadJson } from "../utils/fs.mjs";
+export async function listRecordings(searchParams) {
+    const $url = safeGet(searchParams, "url");
+    if ($url.isNone) {
+        return Response.json({ error: "invalid" }, { status: StatusCodes.BAD_REQUEST });
+    }
+    let projectDir = fileURLToPath($url.unwrap());
+    if (projectDir.endsWith("page.tsx")) {
+        projectDir = path.dirname(projectDir);
+    }
+    const assetsDir = path.join(projectDir, ".liqvid");
+    // error if assets dir doesn't exist
+    if (!fs.existsSync(assetsDir)) {
+        return Response.json(null, { status: StatusCodes.INTERNAL_SERVER_ERROR });
+    }
+    const recordingsDir = path.join(assetsDir, "recordings");
+    if (!fs.existsSync(recordingsDir)) {
+        return Response.json([]);
+    }
+    const recordingNames = await fsp.readdir(recordingsDir);
+    const $recordings = await Promise.all(recordingNames.map(async (name) => {
+        const dir = path.join(recordingsDir, name);
+        const recordingMeta = await loadJson(RecordingMetaFileSchema, path.join(dir, RECORDING_META_FILE));
+        const children = await fsp.readdir(dir);
+        return recordingMeta.map((file) => ({
+            ...file,
+            name,
+            plugins: children.filter((x) => x !== RECORDING_META_FILE),
+        }));
+    }));
+    const recordings = $recordings.reduce((acc, $curr) => {
+        if ($curr.isErr)
+            return acc;
+        acc.push($curr.unwrap());
+        return acc;
+    }, []);
+    recordings.sort((a, b) => compare(a.created, b.created));
+    return Response.json(recordings);
+}
+/**
+ * Convert package name to directory name (replace / with .)
+ */
+function packageToDir(packageName) {
+    return packageName.replace(/\//g, ".");
+}
+/**
+ * Save a new recording to disk.
+ */
+export async function saveRecording(searchParams, formData) {
+    const $url = safeGet(searchParams, "url");
+    if ($url.isNone) {
+        return Response.json({ error: "invalid" }, { status: StatusCodes.BAD_REQUEST });
+    }
+    // Parse metadata
+    const metadataStr = formData.get("metadata");
+    if (typeof metadataStr !== "string") {
+        return Response.json({ error: "missing metadata" }, { status: StatusCodes.BAD_REQUEST });
+    }
+    let metadata;
+    try {
+        metadata = JSON.parse(metadataStr);
+    }
+    catch {
+        return Response.json({ error: "invalid metadata" }, { status: StatusCodes.BAD_REQUEST });
+    }
+    let projectDir = fileURLToPath($url.unwrap());
+    if (projectDir.endsWith("page.tsx")) {
+        projectDir = path.dirname(projectDir);
+    }
+    const assetsDir = path.join(projectDir, ".liqvid");
+    // Create assets dir if it doesn't exist
+    if (!fs.existsSync(assetsDir)) {
+        await fsp.mkdir(assetsDir, { recursive: true });
+    }
+    const recordingsDir = path.join(assetsDir, "recordings");
+    if (!fs.existsSync(recordingsDir)) {
+        await fsp.mkdir(recordingsDir, { recursive: true });
+    }
+    // Create recording directory with ISO datetime name
+    const recordingName = new Date().toISOString().replace(/[:.]/g, "-");
+    const recordingDir = path.join(recordingsDir, recordingName);
+    await fsp.mkdir(recordingDir, { recursive: true });
+    // Write recording-meta.json
+    const recordingMeta = {
+        created: new Date().toISOString(),
+        duration: {
+            milliseconds: metadata.durationMs,
+        },
+    };
+    await fsp.writeFile(path.join(recordingDir, RECORDING_META_FILE), JSON.stringify(recordingMeta, null, "\t"));
+    // Write plugin data
+    for (const pluginInfo of metadata.plugins) {
+        const pluginDir = path.join(recordingDir, packageToDir(pluginInfo.key));
+        await fsp.mkdir(pluginDir, { recursive: true });
+        const data = formData.get(pluginInfo.key);
+        if (data === null)
+            continue;
+        if (pluginInfo.isBlob) {
+            // Write blob data with specified filename
+            // In Node.js/Next.js, the data comes as a File/Blob-like object with arrayBuffer() method
+            const filename = pluginInfo.filename ?? "data.bin";
+            const blobData = data;
+            const buffer = Buffer.from(await blobData.arrayBuffer());
+            await fsp.writeFile(path.join(pluginDir, filename), buffer);
+        }
+        else if (typeof data === "string") {
+            // Write JSON data as raw.json
+            await fsp.writeFile(path.join(pluginDir, "raw.json"), data);
+        }
+    }
+    // Run post-processing plugins
+    await runPostProcessing(recordingDir, metadata.plugins);
+    return new Response(null, { status: StatusCodes.CREATED });
+}
+/**
+ * Attempt to discover and run post-processing plugins.
+ */
+async function runPostProcessing(recordingDir, plugins) {
+    // @ts-expect-error this file is provided by the client
+    const dynamicImports = (await import("@/.dynamic-imports")).default;
+    for (const pluginInfo of plugins) {
+        const pluginDir = path.join(recordingDir, packageToDir(pluginInfo.key));
+        const dynamicImporter = dynamicImports[`${pluginInfo.key}/liqvid-studio-server-plugin`];
+        // no server plugin
+        if (!dynamicImporter) {
+            continue;
+        }
+        let serverPlugin;
+        try {
+            // Try to import the server plugin
+            serverPlugin = await dynamicImporter();
+        }
+        catch (e) {
+            console.error(`error loading server plugin for ${pluginInfo.key}`, e);
+            continue;
+        }
+        const plugin = serverPlugin.default ?? serverPlugin;
+        if (!plugin.postProcessRecording)
+            continue;
+        try {
+            await plugin.postProcessRecording({ dirname: pluginDir });
+        }
+        catch (e) {
+            console.error(`error in ${pluginInfo.key}`, e);
+        }
+    }
+}

package/dist/esm/api/root.mjs

@@ -0,0 +1,4 @@
+import { getServerState } from "../initialize.mjs";
+export async function getRoot() {
+    return Response.json({ serverState: getServerState() });
+}

package/dist/esm/api/static-file.mjs

@@ -0,0 +1,82 @@
+import * as fs from "node:fs";
+import * as fsp from "node:fs/promises";
+import * as path from "node:path";
+import { safeGet } from "have-fun";
+import { StatusCodes } from "http-status-codes";
+/**
+ * MIME type mappings for common file extensions
+ */
+const MIME_TYPES = {
+    ".css": "text/css",
+    ".gif": "image/gif",
+    ".html": "text/html",
+    ".jpeg": "image/jpeg",
+    ".jpg": "image/jpeg",
+    ".js": "application/javascript",
+    ".json": "application/json",
+    ".mjs": "application/javascript",
+    ".mp3": "audio/mpeg",
+    ".mp4": "video/mp4",
+    ".ogg": "audio/ogg",
+    ".pdf": "application/pdf",
+    ".png": "image/png",
+    ".svg": "image/svg+xml",
+    ".ts": "text/typescript",
+    ".tsx": "text/typescript",
+    ".txt": "text/plain",
+    ".wav": "audio/wav",
+    ".webm": "audio/webm",
+    ".webp": "image/webp",
+    ".woff": "font/woff",
+    ".woff2": "font/woff2",
+};
+/**
+ * Get MIME type from file extension
+ */
+function getMimeType(filePath) {
+    const ext = path.extname(filePath).toLowerCase();
+    return MIME_TYPES[ext] ?? "application/octet-stream";
+}
+/**
+ * Serve static files from the app directory.
+ * The `url` param is the path relative to the app directory.
+ * Example: /api/liqvid/static?url=/projects/my-video/.liqvid/recordings/test/@liqvid.media/audio.webm
+ */
+export async function serveStaticFile(searchParams) {
+    const $url = safeGet(searchParams, "url");
+    if ($url.isNone) {
+        return Response.json({ error: "missing url parameter" }, { status: StatusCodes.BAD_REQUEST });
+    }
+    const requestedPath = $url.unwrap();
+    // Security: Prevent directory traversal attacks
+    const normalizedPath = path.normalize(requestedPath);
+    if (normalizedPath.includes("..")) {
+        return Response.json({ error: "invalid path" }, { status: StatusCodes.BAD_REQUEST });
+    }
+    // Resolve relative to the app directory
+    const appDir = path.join(process.cwd(), "app");
+    const absolutePath = path.join(appDir, normalizedPath);
+    // Security: Ensure the resolved path is within the app directory
+    if (!absolutePath.startsWith(appDir + path.sep)) {
+        return Response.json({ error: "invalid path" }, { status: StatusCodes.BAD_REQUEST });
+    }
+    // Check if file exists
+    if (!fs.existsSync(absolutePath)) {
+        return Response.json({ error: "file not found" }, { status: StatusCodes.NOT_FOUND });
+    }
+    // Check if it's a file (not a directory)
+    const stat = await fsp.stat(absolutePath);
+    if (!stat.isFile()) {
+        return Response.json({ error: "not a file" }, { status: StatusCodes.BAD_REQUEST });
+    }
+    // Read and serve the file
+    const content = await fsp.readFile(absolutePath);
+    const mimeType = getMimeType(absolutePath);
+    return new Response(content, {
+        headers: {
+            "Content-Length": String(content.length),
+            "Content-Type": mimeType,
+        },
+        status: StatusCodes.OK,
+    });
+}

package/dist/esm/api/types.mjs

@@ -0,0 +1 @@
+export {};

package/dist/esm/client.mjs

@@ -0,0 +1,98 @@
+/** biome-ignore-all lint/complexity/noBannedTypes: intersection types */
+/** biome-ignore-all lint/suspicious/noExplicitAny: heavy type magic here */
+import { Err, Ok } from "have-fun";
+import { listRecordingsOperation, saveRecordingOperation, setProjectMetaOperation, } from "./api/contract.mjs";
+import { fetchJson } from "./utils/dom.mjs";
+const apiRoot = "/api/liqvid";
+function makeFetcher(config) {
+    const { endpoint, method = "GET", response: responseModel, search: searchModel, } = config;
+    const init = { method };
+    if (responseModel) {
+        return async (opts) => {
+            const queryString = searchModel
+                ? "?" + new URLSearchParams(opts.search)
+                : "";
+            const url = apiRoot + endpoint + queryString;
+            if (method === "POST" && opts.body) {
+                init.body = JSON.stringify(opts.body);
+            }
+            const $res = await fetchJson(responseModel, url, init);
+            return $res;
+        };
+    }
+    return async (opts) => {
+        const queryString = searchModel
+            ? "?" + new URLSearchParams(opts.search)
+            : "";
+        const url = apiRoot + endpoint + queryString;
+        if (method === "POST" && opts.body) {
+            init.body = JSON.stringify(opts.body);
+        }
+        try {
+            const res = await fetch(url, init);
+            if (res.ok) {
+                return Ok(undefined);
+            }
+            return Err(res.json());
+        }
+        catch (e) {
+            return Err(e);
+        }
+    };
+}
+export const listRecordings = makeFetcher(listRecordingsOperation);
+export const setProjectMeta = makeFetcher(setProjectMetaOperation);
+/**
+ * Determine filename for a Blob based on its MIME type.
+ */
+function getBlobFilename(blob) {
+    if (blob.type.startsWith("video/")) {
+        return "video.webm";
+    }
+    if (blob.type.startsWith("audio/")) {
+        return "audio.webm";
+    }
+    return "data.bin";
+}
+/**
+ * Save recording data to the server.
+ * Handles both JSON data and Blob data (for media recordings).
+ */
+export async function saveRecording(opts) {
+    const { search, body } = opts;
+    const queryString = "?" + new URLSearchParams(search);
+    const url = apiRoot + saveRecordingOperation.endpoint + queryString;
+    const formData = new FormData();
+    // Add metadata
+    const metadata = {
+        durationMs: body.durationMs,
+        plugins: body.plugins.map(({ key, data }) => ({
+            filename: data instanceof Blob ? getBlobFilename(data) : undefined,
+            isBlob: data instanceof Blob,
+            key,
+        })),
+    };
+    formData.append("metadata", JSON.stringify(metadata));
+    // Add plugin data
+    for (const { key, data } of body.plugins) {
+        if (data instanceof Blob) {
+            formData.append(key, data, getBlobFilename(data));
+        }
+        else {
+            formData.append(key, JSON.stringify(data));
+        }
+    }
+    try {
+        const res = await fetch(url, {
+            body: formData,
+            method: "POST",
+        });
+        if (res.ok) {
+            return Ok(undefined);
+        }
+        return Err(new TypeError(await res.text()));
+    }
+    catch (e) {
+        return Err(e);
+    }
+}

package/dist/esm/conventions.mjs

@@ -0,0 +1,3 @@
+export const PROJECT_FILE = "project.json";
+export const PROJECT_META_FILE = "project-meta.json";
+export const RECORDING_META_FILE = "recording-meta.json";

package/dist/esm/index.mjs

@@ -0,0 +1,20 @@
+export { DockableDialog } from "./ui/DockableDialog";
+export * from "./ui/Tabs";
+import { devComponent, devProvider } from "@liqvid/ssr/react";
+export { LiqvidDevToolsProvider as LiqvidDevToolsProviderProd, useProjectContext, } from "./LiqvidDevToolsProvider";
+export { RecordingControl as RecordingControlProd, } from "./recording/RecordingControl";
+/* ------------------------- dev-only exports ------------------------- */
+/**
+ * Liqvid dev tools provider.
+ *
+ * Only operates in development. If you want this in production,
+ * use {@link LiqvidDevToolsProviderProd} instead.
+ */
+export const LiqvidDevToolsProvider = devProvider(() => import("./LiqvidDevToolsProvider").then((imports) => imports.LiqvidDevToolsProvider));
+/**
+ * Liqvid recording control.
+ *
+ * Only renders in development. If you want this in production,
+ * use {@link RecordingControlProd} instead.
+ */
+export const RecordingControl = devComponent(() => import("./recording/RecordingControl").then((imports) => imports.RecordingControl));

package/dist/esm/initialize.mjs

@@ -0,0 +1,50 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import { runNextBuild } from "@liqvid/cli/build";
+import { execa } from "execa";
+import { watchAssets } from "./jobs/watch-assets.mjs";
+import { watchProjectFiles } from "./jobs/watch-project-files.mjs";
+export { runNextBuild };
+const symbol = Symbol.for("@liqvid/server");
+const DEFAULT_PRODUCTION_SERVER_PORT = 4000;
+export async function initializeServer() {
+    const state = getServerState();
+    const { jobs, projects } = state;
+    jobs.watchAssets ??= watchAssets();
+    jobs.watchProjectFiles ??= jobs.watchAssets.then(() => watchProjectFiles(projects));
+    jobs.productionServer ??= startProductionServer(state);
+    await jobs.watchProjectFiles;
+}
+async function startProductionServer(state) {
+    const outDir = path.join(process.cwd(), "out");
+    // Check if 'out' directory exists, if not run 'next build'
+    if (!fs.existsSync(outDir)) {
+        console.log("'out' directory not found, running 'next build'...");
+        await runNextBuild();
+    }
+    // Start the production server
+    const port = Number(process.env.LIQVID_PRODUCTION_SERVER_PORT) ||
+        DEFAULT_PRODUCTION_SERVER_PORT;
+    state.productionServerPort = port;
+    console.log(`Starting production server on port ${port}...`);
+    execa("npx", ["serve", "out", "-p", String(port)], {
+        cwd: process.cwd(),
+        env: { ...process.env, NODE_ENV: "production" },
+        stderr: "inherit",
+        stdout: "inherit",
+    });
+}
+export function getServerState() {
+    if (!(symbol in globalThis)) {
+        globalThis[symbol] = {
+            jobs: {
+                productionServer: null,
+                watchAssets: null,
+                watchProjectFiles: null,
+            },
+            productionServerPort: DEFAULT_PRODUCTION_SERVER_PORT,
+            projects: {},
+        };
+    }
+    return globalThis[symbol];
+}

package/dist/esm/jobs/watch-assets.mjs

@@ -0,0 +1,99 @@
+import * as fs from "node:fs";
+import * as fsp from "node:fs/promises";
+import * as path from "node:path";
+import { fileURLToPath } from "node:url";
+import { execa } from "execa";
+import Handlebars from "handlebars";
+import { PROJECT_META_FILE } from "../conventions.mjs";
+import { getBiomePath } from "../utils/fs.mjs";
+import { debounce } from "../utils/misc.mjs";
+export const ASSETS_DIRNAME = ".liqvid";
+/** whether a file should be omitted from the directory listing */
+function isForbidden(_filename, basename) {
+    if (basename === ".DS_Store")
+        return true;
+    if (basename === "types.ts")
+        return true;
+    return false;
+}
+function shouldIgnore({ basename, filename, }) {
+    if (filename.endsWith("~"))
+        return true;
+    if (basename === ".DS_Store")
+        return true;
+    return false;
+}
+const TARGET_DIR = path.join(process.cwd(), "app");
+const TEMPLATES_DIR = path.join(path.dirname(fileURLToPath(import.meta.url)), "..", "..", "templates");
+export async function watchAssets() {
+    Handlebars.registerHelper("json", (obj) => {
+        return new Handlebars.SafeString(JSON.stringify(obj, null, 2));
+    });
+    fs.watch(TARGET_DIR, { recursive: true }, async (_eventName, relPath) => {
+        if (!relPath)
+            return;
+        const filename = path.join(TARGET_DIR, relPath);
+        const dirname = path.dirname(filename);
+        const basename = path.basename(filename);
+        if (shouldIgnore({ basename, filename }))
+            return;
+        // assets
+        const $_ = filename.match(/^.*\/\.liqvid(?=\/)/);
+        if (!$_)
+            return null;
+        if (basename === "types.ts" || basename === PROJECT_META_FILE)
+            return;
+        const assetsDir = $_[0];
+        const biomePath = await getBiomePath(dirname);
+        debounce(() => generateProjectTypes({ assetsDir, biomePath }), assetsDir);
+    });
+}
+/**
+ * Generate the types.ts file inside the assets dir.
+ */
+async function generateProjectTypes({ assetsDir, biomePath, }) {
+    const directoryStructure = await listDir(assetsDir);
+    runTemplate({
+        biomePath,
+        data: {
+            directoryStructure,
+        },
+        out: path.join(assetsDir, "types.ts"),
+        template: "types.ts.hbs",
+    });
+}
+/**
+ * Generate a file from a Handlebars template, and format the result with Biome (if available).
+ */
+export async function runTemplate({ biomePath, data, out, template, }) {
+    console.debug(`compiling ${template} -> ${out}`);
+    const templateHbs = await fsp.readFile(path.join(TEMPLATES_DIR, template), "utf8");
+    try {
+        const template = Handlebars.compile(templateHbs);
+        const result = template(data);
+        await fsp.writeFile(out, result);
+        // invoke biome
+        if (biomePath.isSome) {
+            await execa(biomePath.unwrap(), ["check", "--fix", out]);
+        }
+    }
+    catch (e) {
+        console.error(e);
+    }
+}
+export async function listDir(dirname) {
+    const dir = await fsp.readdir(dirname);
+    return Object.fromEntries(await Promise.all(dir.reduce((acc, basename) => {
+        const filename = path.join(dirname, basename);
+        if (isForbidden(filename, basename))
+            return acc;
+        const stats = fs.statSync(filename);
+        if (stats.isDirectory()) {
+            acc.push(listDir(filename).then((result) => [basename, result]));
+        }
+        else {
+            acc.push(Promise.resolve([basename, null]));
+        }
+        return acc;
+    }, [])));
+}