@liqvid/studio 1.0.0-alpha.0

package/dist/esm/jobs/watch-project-files.mjs

@@ -0,0 +1,216 @@
+import * as fs from "node:fs";
+import * as fsp from "node:fs/promises";
+import * as path from "node:path";
+import { Duration } from "@liqvid/duration";
+import { ZodError } from "zod";
+import { PROJECT_FILE, PROJECT_META_FILE } from "../conventions.mjs";
+import { AutoGenProjectMeta, ProjectJson, } from "../schemas/project.mjs";
+import { getBiomePath, loadJson, walkDir } from "../utils/fs.mjs";
+import { ASSETS_DIRNAME } from "./watch-assets.mjs";
+const TARGET_DIR = path.join(process.cwd(), "app");
+export async function watchProjectFiles(projects) {
+    // initial check
+    await walkDir(TARGET_DIR, async ({ basename, dirname, filename }) => {
+        // initialize project metadata
+        if (basename === "project.json") {
+            await createProject({ basename, dirname, filename, projects });
+        }
+    }, ({ basename }) => {
+        if (basename === ".liqvid")
+            return false;
+        return true;
+    });
+    // set up watch
+    fs.watch(TARGET_DIR, { recursive: true }, async (_eventName, relPath) => {
+        if (!relPath)
+            return;
+        const filename = path.join(TARGET_DIR, relPath);
+        const basename = path.basename(filename);
+        const dirname = path.dirname(filename);
+        switch (basename) {
+            case PROJECT_FILE: {
+                await handleProjectJson({
+                    basename,
+                    dirname,
+                    filename,
+                    projects,
+                });
+                break;
+            }
+            case PROJECT_META_FILE: {
+                await handleProjectMeta({
+                    basename,
+                    dirname,
+                    filename,
+                    projects,
+                });
+                break;
+            }
+        }
+        // values
+    });
+}
+/**
+ * Handle new or deleted project.json files
+ */
+async function handleProjectJson({ dirname, filename, projects }) {
+    const entryFile = path.join(dirname, "page.tsx");
+    if (!fs.existsSync(entryFile)) {
+        return;
+    }
+    const biomePath = await getBiomePath(dirname);
+    // read project file
+    const $project = await loadJson(ProjectJson, filename);
+    if ($project.isErr) {
+        const error = $project.unwrapErr();
+        if (error instanceof SyntaxError) {
+            console.error(`JSON error in ${filename}`, error);
+        }
+        else {
+            console.error(`invalid ProjectJson format in ${filename}`, error);
+        }
+        return;
+    }
+    const project = $project.unwrap();
+    const meta = {
+        ...project,
+        aspectRatio: parseAspectRatio(project.aspectRatio),
+        duration: new Duration({ milliseconds: 1000 }),
+        openGraph: hasOpenGraphImage(dirname),
+        path: path.relative(TARGET_DIR, dirname),
+        twitter: hasTwitterImage(dirname),
+    };
+    projects[meta.path] = meta;
+    await generateProjectDir({ biomePath, dirname });
+}
+/**
+ * Handle new or deleted project.json files
+ */
+async function createProject({ dirname, filename, projects }) {
+    const entryFile = path.join(dirname, "page.tsx");
+    if (!fs.existsSync(entryFile)) {
+        return;
+    }
+    const biomePath = await getBiomePath(dirname);
+    // read project file
+    const $project = await loadJson(ProjectJson, filename);
+    if ($project.isErr) {
+        const error = $project.unwrapErr();
+        if (error instanceof SyntaxError) {
+            console.error(`JSON error in ${filename}`, error);
+        }
+        else {
+            console.error(`invalid ProjectJson format in ${filename}`, error);
+        }
+        return;
+    }
+    const project = $project.unwrap();
+    // read duration
+    const $autoGenMeta = await loadJson(AutoGenProjectMeta, path.join(dirname, ".liqvid", PROJECT_META_FILE));
+    if ($autoGenMeta.isErr) {
+        const error = $autoGenMeta.unwrapErr();
+        if (error instanceof SyntaxError) {
+            console.error(`JSON error in ${filename}`, error);
+            return;
+        }
+        else if (error instanceof ZodError) {
+            console.error(`invalid AutoGenProjectMeta format in ${filename}`, error);
+            return;
+        }
+    }
+    const duration = $autoGenMeta.match({
+        Err: () => new Duration({ minutes: 1 }),
+        Ok: ({ duration }) => new Duration(duration),
+    });
+    const meta = {
+        ...project,
+        aspectRatio: parseAspectRatio(project.aspectRatio),
+        duration,
+        openGraph: hasOpenGraphImage(dirname),
+        path: path.relative(TARGET_DIR, dirname),
+        twitter: hasTwitterImage(dirname),
+    };
+    projects[meta.path] = meta;
+    await generateProjectDir({ biomePath, dirname });
+}
+/**
+ * Handle auto-generated project-meta.json files
+ */
+async function handleProjectMeta({ dirname: dotLiqvidDir, filename, projects, }) {
+    const projectPath = path.relative(TARGET_DIR, path.dirname(dotLiqvidDir));
+    const $projectMeta = await loadJson(AutoGenProjectMeta, filename);
+    if ($projectMeta.isErr) {
+        const error = $projectMeta.unwrapErr();
+        if (error instanceof SyntaxError) {
+            console.error(`JSON error in ${filename}`, error);
+        }
+        else if ($projectMeta instanceof ZodError) {
+            console.error(`invalid ProjectMeta format in ${filename}`, error);
+        }
+        console.error(error);
+        return;
+    }
+    const projectMeta = $projectMeta.unwrap();
+    const project = projects[projectPath];
+    if (!project) {
+        console.error(`could not find project ${projectPath}`);
+        return;
+    }
+    project.duration = new Duration(projectMeta.duration);
+}
+/**
+ * Whether a project has an Open Graph image defined.
+ */
+function hasOpenGraphImage(dirname) {
+    const filenames = [
+        "opengraph-image.gif",
+        "opengraph-image.jpeg",
+        "opengraph-image.jpg",
+        "opengraph-image.png",
+    ];
+    return filenames.some((f) => fs.existsSync(path.join(dirname, f)));
+}
+/**
+ * Whether a project has a Twitter image defined.
+ */
+function hasTwitterImage(dirname) {
+    const filenames = [
+        "twitter-image.gif",
+        "twitter-image.jpeg",
+        "twitter-image.jpg",
+        "twitter-image.png",
+    ];
+    return filenames.some((f) => fs.existsSync(path.join(dirname, f)));
+}
+function parseAspectRatio(value) {
+    const defaultValue = { height: 9, width: 16 };
+    switch (typeof value) {
+        case "object": {
+            if (value === null)
+                return defaultValue;
+            if (Array.isArray(value)) {
+                const [width, height] = value;
+                if (typeof width === "number" && typeof height === "number") {
+                    return { height, width };
+                }
+            }
+            break;
+        }
+        case "string": {
+            const [width, height] = value.split(":").map(Number);
+            if (typeof width === "number" && typeof height === "number") {
+                return { height, width };
+            }
+            break;
+        }
+        case "undefined":
+            return defaultValue;
+    }
+    throw new Error(`Invalid aspect ratio: ${value}`);
+}
+async function generateProjectDir({ dirname, }) {
+    const assetsDir = path.join(dirname, ASSETS_DIRNAME);
+    if (!fs.existsSync(assetsDir)) {
+        await fsp.mkdir(assetsDir);
+    }
+}

package/dist/esm/next/api.mjs

@@ -0,0 +1,48 @@
+import * as url from "node:url";
+import { StatusCodes } from "http-status-codes";
+import { listRecordingsOperation, saveRecordingOperation, setProjectMetaOperation, staticFileOperation, } from "../api/contract.mjs";
+import { setProjectMeta } from "../api/project-meta.mjs";
+import { listRecordings, saveRecording } from "../api/recording.mjs";
+import { getRoot } from "../api/root.mjs";
+import { serveStaticFile } from "../api/static-file.mjs";
+import { initializeServer } from "../initialize.mjs";
+/**
+ * Liqvid server GET handler
+ */
+export async function GET(req, { params }) {
+    const paramsObject = await params;
+    const keys = Object.keys(paramsObject);
+    const routeParams = keys.length === 1 ? paramsObject[keys[0]] : [];
+    const route = "/" + routeParams.join("/");
+    const { search } = url.parse(req.url, true);
+    const searchParams = new URLSearchParams(search ?? "");
+    await initializeServer();
+    switch (route) {
+        case "/":
+            return getRoot();
+        case listRecordingsOperation.endpoint:
+            return listRecordings(searchParams);
+        case staticFileOperation.endpoint:
+            return serveStaticFile(searchParams);
+    }
+    return Response.json({ error: "not_found" }, { status: StatusCodes.NOT_FOUND });
+}
+/**
+ * Liqvid server POST handler
+ */
+export async function POST(req, { params }) {
+    const paramsObject = await params;
+    const keys = Object.keys(paramsObject);
+    const routeParams = keys.length === 1 ? paramsObject[keys[0]] : [];
+    const route = "/" + routeParams.join("/");
+    const { search } = url.parse(req.url, true);
+    const searchParams = new URLSearchParams(search ?? "");
+    await initializeServer();
+    switch (route) {
+        case setProjectMetaOperation.endpoint:
+            return setProjectMeta(searchParams, await req.json());
+        case saveRecordingOperation.endpoint:
+            return saveRecording(searchParams, await req.formData());
+    }
+    return Response.json({ error: "not_found" }, { status: StatusCodes.NOT_FOUND });
+}

package/dist/esm/next/page.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { notFound } from "next/navigation";
+import { Homepage } from "../pages/root";
+export default async function Pages({ params: asyncParams, searchParams: asyncSearchParams, }) {
+    const params = await asyncParams;
+    const paramsKeys = Object.keys(params);
+    const searchParams = await asyncSearchParams;
+    const route = "/" + (paramsKeys.length === 1 ? params[paramsKeys[0]].join("/") : "");
+    switch (route) {
+        case "/":
+            return _jsx(Homepage, {});
+    }
+    notFound();
+    return (_jsx("pre", { children: JSON.stringify({ params, paramsKeys, route, searchParams }) }));
+}

package/dist/esm/pages/NewProjectButton.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+import { Select } from "@base-ui/react/select";
+import { CaretDownIcon, CheckIcon } from "@phosphor-icons/react";
+import { useCallback, useEffect, useState } from "react";
+import { createProjectAction, loadTemplatesAction, } from "./root-actions";
+import styles from "./root.module.css";
+export function NewProjectButton() {
+    const [open, setOpen] = useState(false);
+    const [name, setName] = useState("");
+    const [projectPath, setProjectPath] = useState("");
+    const [templateId, setTemplateId] = useState("");
+    const [templates, setTemplates] = useState([]);
+    const [isCreating, setIsCreating] = useState(false);
+    const [error, setError] = useState(null);
+    // Load templates when dialog opens
+    useEffect(() => {
+        if (open) {
+            loadTemplatesAction().then((loadedTemplates) => {
+                setTemplates(loadedTemplates);
+                // Select the default template, or the first one if none is marked as default
+                // (templates are sorted with default first)
+                if (loadedTemplates.length > 0) {
+                    const defaultTemplate = loadedTemplates.find((t) => t.default);
+                    setTemplateId(defaultTemplate?.id ?? loadedTemplates[0].id);
+                }
+            });
+        }
+    }, [open]);
+    const closeDialog = useCallback(() => {
+        setOpen(false);
+        setName("");
+        setProjectPath("");
+        setTemplateId("");
+        setError(null);
+    }, []);
+    const handleSubmit = useCallback(async (e) => {
+        e.preventDefault();
+        setIsCreating(true);
+        setError(null);
+        try {
+            const result = await createProjectAction({
+                name,
+                projectPath,
+                templateId,
+            });
+            if (result.success) {
+                closeDialog();
+                // Refresh the page to show the new project
+                window.location.reload();
+            }
+            else {
+                setError(result.error ?? "Failed to create project");
+            }
+        }
+        finally {
+            setIsCreating(false);
+        }
+    }, [name, projectPath, templateId, closeDialog]);
+    return (_jsxs(Dialog.Root, { onOpenChange: setOpen, open: open, children: [_jsx(Dialog.Trigger, { className: styles.newProjectButton, render: _jsx("button", { title: "Create a new project", type: "button" }), children: "+ New Project" }), _jsxs(Dialog.Portal, { children: [_jsx(Dialog.Backdrop, { className: styles.dialogOverlay }), _jsxs(Dialog.Popup, { className: styles.dialog, children: [_jsx(Dialog.Title, { className: styles.dialogTitle, children: "Create New Project" }), _jsxs("form", { className: styles.dialogForm, onSubmit: handleSubmit, children: [_jsxs("div", { className: styles.formField, children: [_jsx("label", { htmlFor: "project-name", children: "Project Name" }), _jsx("input", { autoComplete: "off", disabled: isCreating, id: "project-name", onChange: (e) => setName(e.target.value), placeholder: "My Project", required: true, type: "text", value: name })] }), _jsxs("div", { className: styles.formField, children: [_jsx("label", { htmlFor: "project-path", children: "Project Path" }), _jsx("input", { autoComplete: "off", disabled: isCreating, id: "project-path", onChange: (e) => setProjectPath(e.target.value), placeholder: "category/project-slug", required: true, type: "text", value: projectPath }), _jsx("span", { className: styles.fieldHint, children: "Path under app/" })] }), _jsxs("div", { className: styles.formField, children: [_jsx("label", { htmlFor: "project-template", children: "Template" }), _jsxs(Select.Root, { disabled: isCreating || templates.length === 0, onValueChange: (value) => value && setTemplateId(value), value: templateId, children: [_jsxs(Select.Trigger, { className: styles.selectTrigger, id: "project-template", children: [_jsx(Select.Value, { placeholder: "Select a template" }), _jsx(Select.Icon, { className: styles.selectIcon, children: _jsx(CaretDownIcon, {}) })] }), _jsx(Select.Portal, { children: _jsx(Select.Positioner, { sideOffset: 4, children: _jsx(Select.Popup, { className: styles.selectContent, children: _jsx(Select.List, { className: styles.selectViewport, children: templates.map((template) => (_jsxs(Select.Item, { className: styles.selectItem, value: template.id, children: [_jsx(Select.ItemText, { children: template.name }), _jsx(Select.ItemIndicator, { className: styles.selectItemIndicator, children: _jsx(CheckIcon, {}) })] }, template.id))) }) }) }) })] })] }), error && _jsx("div", { className: styles.error, children: error }), _jsxs("div", { className: styles.dialogActions, children: [_jsx(Dialog.Close, { className: styles.cancelButton, disabled: isCreating, render: _jsx("button", { type: "button" }), children: "Cancel" }), _jsx("button", { className: styles.submitButton, disabled: isCreating || !name || !projectPath || !templateId, type: "submit", children: isCreating ? "Creating..." : "Create Project" })] })] })] })] })] }));
+}

package/dist/esm/pages/RebuildButton.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { rebuildAction } from "./root-actions";
+import styles from "./root.module.css";
+export function RebuildButton() {
+    const [isBuilding, setIsBuilding] = useState(false);
+    const handleRebuild = useCallback(async () => {
+        setIsBuilding(true);
+        try {
+            const result = await rebuildAction();
+            if (result.success) {
+                // Optionally show success feedback
+            }
+            else {
+                console.error("Build failed");
+            }
+        }
+        finally {
+            setIsBuilding(false);
+        }
+    }, []);
+    return (_jsx("button", { className: styles.rebuildButton, disabled: isBuilding, onClick: handleRebuild, title: "Rebuild projects for production", type: "button", children: isBuilding ? "🔨 Building..." : "📦 Rebuild" }));
+}

package/dist/esm/pages/root-actions.js

@@ -0,0 +1,151 @@
+"use server";
+import * as fsp from "node:fs/promises";
+import * as path from "node:path";
+import { fileURLToPath } from "node:url";
+import Handlebars from "handlebars";
+import { runNextBuild } from "../initialize.mjs";
+export async function rebuildAction() {
+    try {
+        await runNextBuild();
+        return { success: true };
+    }
+    catch (e) {
+        console.error("Failed to run next build:", e);
+        return { success: false };
+    }
+}
+const TEMPLATES_DIR = path.join(path.dirname(fileURLToPath(import.meta.url)), "..", "..", "templates");
+const PROJECT_TEMPLATES_DIR = path.join(TEMPLATES_DIR, "projects");
+const APP_DIR = path.join(process.cwd(), "app");
+/**
+ * Load all available project templates.
+ * Templates are sorted with default first, then alphabetically by name.
+ */
+export async function loadTemplatesAction() {
+    const templates = [];
+    try {
+        const entries = await fsp.readdir(PROJECT_TEMPLATES_DIR, {
+            withFileTypes: true,
+        });
+        for (const entry of entries) {
+            if (!entry.isDirectory())
+                continue;
+            const templateDir = path.join(PROJECT_TEMPLATES_DIR, entry.name);
+            const templateJsonPath = path.join(templateDir, "template.json");
+            try {
+                const content = await fsp.readFile(templateJsonPath, "utf8");
+                const templateJson = JSON.parse(content);
+                templates.push({
+                    default: templateJson.default === true,
+                    id: entry.name,
+                    name: templateJson.name,
+                    path: templateDir,
+                });
+            }
+            catch {
+                // Skip directories without valid template.json
+            }
+        }
+    }
+    catch {
+        // If templates directory doesn't exist, return empty array
+    }
+    // Sort: default first, then alphabetically by name
+    templates.sort((a, b) => {
+        if (a.default && !b.default)
+            return -1;
+        if (!a.default && b.default)
+            return 1;
+        return a.name.localeCompare(b.name);
+    });
+    return templates;
+}
+/**
+ * Compile a Handlebars template and write it to the output path.
+ */
+async function compileTemplate(templatePath, outputPath, data) {
+    const templateContent = await fsp.readFile(templatePath, "utf8");
+    const template = Handlebars.compile(templateContent);
+    const result = template(data);
+    await fsp.writeFile(outputPath, result);
+}
+/**
+ * Recursively copy and compile template files from source to destination.
+ * Files ending in .hbs are compiled with Handlebars and have the .hbs extension removed.
+ * Other files are copied as-is. template.json is skipped.
+ */
+async function copyTemplateDir(srcDir, destDir, data) {
+    await fsp.mkdir(destDir, { recursive: true });
+    const entries = await fsp.readdir(srcDir, { withFileTypes: true });
+    for (const entry of entries) {
+        const srcPath = path.join(srcDir, entry.name);
+        const destName = entry.name.endsWith(".hbs")
+            ? entry.name.slice(0, -4)
+            : entry.name;
+        const destPath = path.join(destDir, destName);
+        if (entry.name === "template.json") {
+            // Skip template.json
+            continue;
+        }
+        if (entry.isDirectory()) {
+            await copyTemplateDir(srcPath, destPath, data);
+        }
+        else if (entry.name.endsWith(".hbs")) {
+            await compileTemplate(srcPath, destPath, data);
+        }
+        else {
+            await fsp.copyFile(srcPath, destPath);
+        }
+    }
+}
+export async function createProjectAction(input) {
+    try {
+        const { name, projectPath, templateId } = input;
+        // Validate project path
+        if (!projectPath || projectPath.includes("..")) {
+            return { error: "Invalid project path", success: false };
+        }
+        // Validate and load template
+        const templates = await loadTemplatesAction();
+        const template = templates.find((t) => t.id === templateId);
+        if (!template) {
+            return { error: "Template not found", success: false };
+        }
+        const fullProjectPath = path.join(APP_DIR, projectPath);
+        // Check if directory already exists
+        try {
+            await fsp.access(fullProjectPath);
+            return { error: "Project already exists at this path", success: false };
+        }
+        catch {
+            // Directory doesn't exist, which is what we want
+        }
+        // Create base directory structure
+        await fsp.mkdir(fullProjectPath, { recursive: true });
+        await fsp.mkdir(path.join(fullProjectPath, ".liqvid", "recordings"), {
+            recursive: true,
+        });
+        const templateData = { name };
+        // Copy and compile template files
+        await copyTemplateDir(template.path, fullProjectPath, templateData);
+        // Create shared files (project.json and .liqvid files)
+        await compileTemplate(path.join(TEMPLATES_DIR, "project.json.hbs"), path.join(fullProjectPath, "project.json"), templateData);
+        // Generate .liqvid/project-meta.json (initial empty duration)
+        await fsp.writeFile(path.join(fullProjectPath, ".liqvid", "project-meta.json"), JSON.stringify({ duration: { milliseconds: 0 } }, null, 2));
+        // Generate .liqvid/types.ts (initial structure)
+        await compileTemplate(path.join(TEMPLATES_DIR, "types.ts.hbs"), path.join(fullProjectPath, ".liqvid", "types.ts"), {
+            directoryStructure: {
+                "project-meta.json": null,
+                recordings: {},
+            },
+        });
+        return { success: true };
+    }
+    catch (e) {
+        console.error("Failed to create project:", e);
+        return {
+            error: e instanceof Error ? e.message : "Unknown error",
+            success: false,
+        };
+    }
+}

package/dist/esm/pages/root.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatTime, formatTimeDuration } from "@liqvid/utils";
+import { EyeIcon } from "@phosphor-icons/react/dist/ssr";
+import { getServerState, initializeServer } from "../initialize.mjs";
+import { NewProjectButton } from "./NewProjectButton";
+import { RebuildButton } from "./RebuildButton";
+import styles from "./root.module.css";
+export async function Homepage() {
+    await initializeServer();
+    const { productionServerPort, projects } = getServerState();
+    return (_jsxs("main", { className: styles.main, children: [_jsxs("div", { className: styles.headerRow, children: [_jsx("h1", { className: styles.header, children: "Projects" }), _jsx(NewProjectButton, {}), _jsx(RebuildButton, {})] }), _jsx("ul", { className: styles.projectList, children: Object.entries(projects)
+                    .sort(([, a], [, b]) => a.path.localeCompare(b.path))
+                    .map(([key, project]) => (_jsxs("li", { children: [_jsxs("a", { href: project.path, children: [_jsx(Thumbnail, { ...project }), _jsxs("div", { className: "flex flex-col", children: [project.name, _jsx("pre", { className: "text-sm", children: project.path })] })] }), _jsx("div", { className: styles.actions, children: _jsx("a", { className: styles.productionLink, href: `http://localhost:${productionServerPort}/${project.path}`, rel: "noopener noreferrer", target: "_blank", title: "Preview", children: _jsx(EyeIcon, { size: 24 }) }) })] }, key))) })] }));
+}
+function Thumbnail({ aspectRatio, duration, path, openGraph }) {
+    return (_jsx("div", { className: styles.thumbnail, style: {
+            aspectRatio: `${aspectRatio.width} / ${aspectRatio.height}`,
+            backgroundSize: "100% 100%",
+            ...(openGraph
+                ? {
+                    backgroundImage: `url("/${path}/opengraph-image.png")`,
+                }
+                : {}),
+        }, children: duration && (_jsx("time", { className: styles.duration, dateTime: formatTimeDuration(duration), children: formatTime(duration) })) }));
+}