@liqvid/studio 1.0.0-alpha.0

package/dist/templates/projects/code/page.tsx.hbs

@@ -0,0 +1,23 @@
+import "@/styles/liqvid-theme.css";
+import "@/styles/input.css";
+
+import { splitCode } from "liqvid";
+import type { Metadata } from "next";
+
+import { ClientContent } from "./src/client";
+
+import project from "./project.json";
+
+const projectPath = splitCode(
+  () => import.meta.url,
+  () => "",
+);
+
+export default function Project() {
+  return <ClientContent projectPath={projectPath} />;
+}
+
+export const metadata: Metadata = {
+  description: project.description,
+  title: project.name,
+};

package/dist/templates/projects/code/src/assets.ts.hbs

@@ -0,0 +1,9 @@
+import { DirectoryHelper } from "@liqvid/assets";
+
+import type { ProjectAssetsDir } from "../.liqvid/types";
+
+/** @package */
+export const assets = new DirectoryHelper<ProjectAssetsDir>();
+
+/** @package */
+export const recordings = assets.dir("recordings");

package/dist/templates/projects/code/src/client.tsx.hbs

@@ -0,0 +1,22 @@
+"use client";
+
+import { LiqvidPlayer } from "@/components/LiqvidPlayer";
+import { LiveCodeAmbi } from "@/components/liqvid/livecode/editor";
+import {
+  usePersistMute,
+  usePersistVolume,
+} from "@/components/liqvid/persistence";
+import { persistMute, persistVolume } from "@/lib/persistence";
+
+import { script } from "./project";
+
+export function ClientContent({ projectPath }: { projectPath: string }) {
+  usePersistMute(persistMute, script.playback);
+  usePersistVolume(persistVolume, script.playback);
+
+  return (
+    <LiqvidPlayer projectPath={projectPath} script={script}>
+      <LiveCodeAmbi />
+    </LiqvidPlayer>
+  );
+}

package/dist/templates/projects/code/src/helpers.ts.hbs

@@ -0,0 +1,21 @@
+/**
+ * @file This file contains various helpers with type safety
+ * for the markers for this particular project.
+ */
+"use client";
+
+import { UniversalHelper } from "liqvid";
+
+import type { M } from "./project";
+
+/* -------------------- helpers -------------------- */
+
+/**
+ * @package
+ * General-purpose helper component for:
+ * - creating `<Segment>`s, when passed `during`, `from`, or `to`
+ * - positioning, when passed `b`ottom, `r`ight `x` (= left), or `y` (= top)
+ * - sizing, when passed `h`eight or `w`idth
+ */
+export const $ = UniversalHelper<M>;
+

package/dist/templates/projects/code/src/highlights.ts.hbs

@@ -0,0 +1,3 @@
+import type { Controls } from "liqvid";
+
+export const highlights = [] satisfies Controls.VideoHighlight[];

package/dist/templates/projects/code/src/markers.ts.hbs

@@ -0,0 +1,13 @@
+import { withTimings } from "liqvid";
+
+export const markerNames = [
+  "intro/"
+] as const;
+
+const timings = {};
+
+/** @package */
+export const markers = withTimings(markerNames, timings);
+
+/** Marker name */
+export type MarkerName = (typeof markerNames)[number];

package/dist/templates/projects/code/src/project.ts.hbs

@@ -0,0 +1,23 @@
+/**
+ * @file This file contains various helpers with type safety
+ * for the markers for this particular project.
+ */
+
+import { Script } from "liqvid";
+
+import { markers } from "./markers";
+
+/** @package */
+export type { MarkerName as M } from "./markers";
+
+/** @package */
+export const script = new Script(markers);
+
+/** @package */
+export const playback = script.playback;
+
+/**
+* @package
+* Get marker by name
+*/
+export const $m = script.markers.get.bind(script.markers.get);

package/dist/templates/projects/code/template.json

@@ -0,0 +1,3 @@
+{
+  "name": "Coding"
+}

package/dist/templates/projects/default/page.tsx.hbs

@@ -0,0 +1,23 @@
+import "@/styles/liqvid-theme.css";
+import "@/styles/input.css";
+
+import { splitCode } from "liqvid";
+import type { Metadata } from "next";
+
+import { ClientContent } from "./src/client";
+
+import project from "./project.json";
+
+const projectPath = splitCode(
+  () => import.meta.url,
+  () => "",
+);
+
+export default function Project() {
+  return <ClientContent projectPath={projectPath} />;
+}
+
+export const metadata: Metadata = {
+  description: project.description,
+  title: project.name,
+};

package/dist/templates/projects/default/src/assets.ts.hbs

@@ -0,0 +1,9 @@
+import { DirectoryHelper } from "@liqvid/assets";
+
+import type { ProjectAssetsDir } from "../.liqvid/types";
+
+/** @package */
+export const assets = new DirectoryHelper<ProjectAssetsDir>();
+
+/** @package */
+export const recordings = assets.dir("recordings");

package/dist/templates/projects/default/src/client.tsx.hbs

@@ -0,0 +1,22 @@
+"use client";
+
+import { LiqvidPlayer } from "@/components/LiqvidPlayer";
+import {
+  usePersistMute,
+  usePersistVolume,
+} from "@/components/liqvid/persistence";
+import { persistMute, persistVolume } from "@/lib/persistence";
+
+import { script } from "./project";
+
+
+export function ClientContent({ projectPath }: { projectPath: string }) {
+  usePersistMute(persistMute, script.playback);
+  usePersistVolume(persistVolume, script.playback);
+
+  return (
+    <LiqvidPlayer projectPath={projectPath} script={script}>
+      {/* content */}
+    </LiqvidPlayer>
+  );
+}

package/dist/templates/projects/default/src/helpers.ts.hbs

@@ -0,0 +1,21 @@
+/**
+ * @file This file contains various helpers with type safety
+ * for the markers for this particular project.
+ */
+"use client";
+
+import { UniversalHelper } from "liqvid";
+
+import type { M } from "./project";
+
+/* -------------------- helpers -------------------- */
+
+/**
+ * @package
+ * General-purpose helper component for:
+ * - creating `<Segment>`s, when passed `during`, `from`, or `to`
+ * - positioning, when passed `b`ottom, `r`ight `x` (= left), or `y` (= top)
+ * - sizing, when passed `h`eight or `w`idth
+ */
+export const $ = UniversalHelper<M>;
+

package/dist/templates/projects/default/src/highlights.ts.hbs

@@ -0,0 +1,3 @@
+import type { Controls } from "liqvid";
+
+export const highlights = [] satisfies Controls.VideoHighlight[];

package/dist/templates/projects/default/src/markers.ts.hbs

@@ -0,0 +1,13 @@
+import { withTimings } from "liqvid";
+
+export const markerNames = [
+  "intro/"
+] as const;
+
+const timings = {};
+
+/** @package */
+export const markers = withTimings(markerNames, timings);
+
+/** Marker name */
+export type MarkerName = (typeof markerNames)[number];

package/dist/templates/projects/default/src/project.ts.hbs

@@ -0,0 +1,23 @@
+/**
+ * @file This file contains various helpers with type safety
+ * for the markers for this particular project.
+ */
+
+import { Script } from "liqvid";
+
+import { markers } from "./markers";
+
+/** @package */
+export type { MarkerName as M } from "./markers";
+
+/** @package */
+export const script = new Script(markers);
+
+/** @package */
+export const playback = script.playback;
+
+/**
+* @package
+* Get marker by name
+*/
+export const $m = script.markers.get.bind(script.markers.get);

package/dist/templates/projects/default/template.json

@@ -0,0 +1,4 @@
+{
+  "default": true,
+  "name": "Default"
+}

package/dist/templates/types.ts.hbs

@@ -0,0 +1,20 @@
+{{#*inline "directory"}}
+  {
+  {{#each this}}
+    "{{ @key }}":
+      {{#if this}}
+        {{> directory this}}
+      {{else}}
+        null
+      {{/if}},
+  {{/each}}
+  }
+{{/inline}}
+/** This file is automatically @generated. */
+import type { Directory, FileNames } from "@liqvid/assets";
+
+export const PROJECT_DIRECTORY_STRUCTURE = ({{~> directory directoryStructure~}}) as const satisfies Directory;
+
+export type ProjectDirectoryStructure = typeof PROJECT_DIRECTORY_STRUCTURE;
+
+export type ProjectAssetsDir = FileNames<ProjectDirectoryStructure>;

package/dist/types/LiqvidDevToolsProvider.d.ts

@@ -0,0 +1,12 @@
+import { type LiqvidStudioPlugin } from "@liqvid/studio-plugin-api";
+import "./palette.css";
+export interface ProjectContextShape {
+    projectPath: string;
+}
+export declare const ProjectContext: import("react").Context<ProjectContextShape>;
+export declare function useProjectContext(): ProjectContextShape;
+export declare function LiqvidDevToolsProvider({ children, plugins, projectPath, }: {
+    children?: React.ReactNode;
+    plugins?: LiqvidStudioPlugin[];
+    projectPath: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/types/api/contract.d.mts

@@ -0,0 +1,66 @@
+import { z } from "zod";
+export type Operation<BodyModel extends z.ZodType, ErrorModel extends z.ZodType, ResponseModel extends z.ZodType, SearchModel extends z.ZodType> = {
+    endpoint: string;
+    error?: ErrorModel;
+    response?: ResponseModel;
+    search?: SearchModel;
+} & ({
+    body?: undefined;
+    method?: "GET";
+} | {
+    body?: BodyModel;
+    method: "POST";
+});
+export declare const listRecordingsOperation: {
+    endpoint: "/recordings";
+    response: z.ZodArray<z.ZodObject<{
+        created: z.ZodISODateTime;
+        duration: z.ZodObject<{
+            milliseconds: z.ZodNumber;
+        }, z.core.$strip>;
+        name: z.ZodString;
+        plugins: z.ZodArray<z.ZodString>;
+    }, z.core.$strip>>;
+    search: z.ZodObject<{
+        url: z.ZodString;
+    }, z.core.$strip>;
+};
+export declare const setProjectMetaOperation: {
+    body: z.ZodObject<{
+        durationMs: z.ZodNumber;
+    }, z.core.$strip>;
+    endpoint: "/project-meta";
+    method: "POST";
+    search: z.ZodObject<{
+        url: z.ZodString;
+    }, z.core.$strip>;
+};
+/**
+ * Schema for plugin recording data.
+ * Data can be a Blob (for media) which requires a filename,
+ * or any JSON-serializable data.
+ */
+export declare const PluginRecordingData: z.ZodObject<{
+    data: z.ZodUnknown;
+    filename: z.ZodOptional<z.ZodString>;
+    key: z.ZodString;
+}, z.core.$strip>;
+export type PluginRecordingData = z.infer<typeof PluginRecordingData>;
+export declare const saveRecordingOperation: {
+    endpoint: "/recordings";
+    method: "POST";
+    search: z.ZodObject<{
+        url: z.ZodString;
+    }, z.core.$strip>;
+};
+/**
+ * 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 declare const staticFileOperation: {
+    endpoint: "/static";
+    search: z.ZodObject<{
+        url: z.ZodString;
+    }, z.core.$strip>;
+};

package/dist/types/api/project-meta.d.mts

@@ -0,0 +1 @@
+export declare function setProjectMeta(searchParams: URLSearchParams, rawBody: unknown): Promise<Response>;

package/dist/types/api/recording.d.mts

@@ -0,0 +1,5 @@
+export declare function listRecordings(searchParams: URLSearchParams): Promise<Response>;
+/**
+ * Save a new recording to disk.
+ */
+export declare function saveRecording(searchParams: URLSearchParams, formData: FormData): Promise<Response>;

package/dist/types/api/root.d.mts

@@ -0,0 +1 @@
+export declare function getRoot(): Promise<Response>;

package/dist/types/api/static-file.d.mts

@@ -0,0 +1,6 @@
+/**
+ * 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 declare function serveStaticFile(searchParams: URLSearchParams): Promise<Response>;

package/dist/types/api/types.d.mts

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

package/dist/types/client.d.mts

@@ -0,0 +1,43 @@
+/** biome-ignore-all lint/complexity/noBannedTypes: intersection types */
+/** biome-ignore-all lint/suspicious/noExplicitAny: heavy type magic here */
+import { type Result } from "have-fun";
+import type { z } from "zod";
+export declare const listRecordings: (opts: {
+    search: {
+        url: string;
+    };
+}) => Promise<Result<{
+    created: string;
+    duration: {
+        milliseconds: number;
+    };
+    name: string;
+    plugins: string[];
+}[], SyntaxError | TypeError | z.ZodError<unknown>>>;
+export declare const setProjectMeta: (opts: {
+    search: {
+        url: string;
+    };
+} & {
+    body: {
+        durationMs: number;
+    };
+}) => Promise<Result<undefined, SyntaxError | TypeError | z.ZodError<unknown>>>;
+interface SaveRecordingOpts {
+    search: {
+        url: string;
+    };
+    body: {
+        durationMs: number;
+        plugins: Array<{
+            key: string;
+            data: unknown;
+        }>;
+    };
+}
+/**
+ * Save recording data to the server.
+ * Handles both JSON data and Blob data (for media recordings).
+ */
+export declare function saveRecording(opts: SaveRecordingOpts): Promise<Result<undefined, TypeError>>;
+export {};

package/dist/types/conventions.d.mts

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

package/dist/types/index.d.mts

@@ -0,0 +1,19 @@
+export { DockableDialog } from "./ui/DockableDialog";
+export * from "./ui/Tabs";
+export type { LiqvidStudioPlugin, LiqvidStudioRecordingPlugin, } from "@liqvid/studio-plugin-api";
+export { LiqvidDevToolsProvider as LiqvidDevToolsProviderProd, useProjectContext, } from "./LiqvidDevToolsProvider";
+export { RecordingControl as RecordingControlProd, type RecordingControlProps, } from "./recording/RecordingControl";
+/**
+ * Liqvid dev tools provider.
+ *
+ * Only operates in development. If you want this in production,
+ * use {@link LiqvidDevToolsProviderProd} instead.
+ */
+export declare const LiqvidDevToolsProvider: import("react").LazyExoticComponent<typeof import("./LiqvidDevToolsProvider").LiqvidDevToolsProvider>;
+/**
+ * Liqvid recording control.
+ *
+ * Only renders in development. If you want this in production,
+ * use {@link RecordingControlProd} instead.
+ */
+export declare const RecordingControl: import("react").LazyExoticComponent<typeof import("./recording/RecordingControl").RecordingControl>;

package/dist/types/initialize.d.mts

@@ -0,0 +1,14 @@
+import { runNextBuild } from "@liqvid/cli/build";
+import type { ProjectMeta } from "./schemas/project.mts";
+export { runNextBuild };
+export interface LiqvidServerState {
+    jobs: {
+        productionServer: null | Promise<void>;
+        watchAssets: null | Promise<void>;
+        watchProjectFiles: null | Promise<void>;
+    };
+    productionServerPort: number;
+    projects: Record<string, ProjectMeta>;
+}
+export declare function initializeServer(): Promise<void>;
+export declare function getServerState(): LiqvidServerState;

package/dist/types/jobs/watch-assets.d.mts

@@ -0,0 +1,18 @@
+import type { Maybe } from "have-fun";
+import type { Directory } from "../types/assets.mts";
+export declare const ASSETS_DIRNAME = ".liqvid";
+export declare function watchAssets(): Promise<void>;
+/**
+ * Generate a file from a Handlebars template, and format the result with Biome (if available).
+ */
+export declare function runTemplate({ biomePath, data, out, template, }: {
+    /** Path to the Biome executable. */
+    biomePath: Maybe<string>;
+    /** Data to pass to the template */
+    data: unknown;
+    /** Path to the output file */
+    out: string;
+    /** Path to the template file */
+    template: string;
+}): Promise<void>;
+export declare function listDir(dirname: string): Promise<Directory>;

package/dist/types/jobs/watch-project-files.d.mts

@@ -0,0 +1,4 @@
+import { type ProjectMeta } from "../schemas/project.mts";
+type Projects = Record<string, ProjectMeta>;
+export declare function watchProjectFiles(projects: Projects): Promise<void>;
+export {};

package/dist/types/next/api.d.mts

@@ -0,0 +1,14 @@
+interface RequestContext {
+    params: Promise<{
+        [key: string]: string[];
+    }>;
+}
+/**
+ * Liqvid server GET handler
+ */
+export declare function GET(req: Request, { params }: RequestContext): Promise<Response>;
+/**
+ * Liqvid server POST handler
+ */
+export declare function POST(req: Request, { params }: RequestContext): Promise<Response>;
+export {};

package/dist/types/next/page.d.ts

@@ -0,0 +1,4 @@
+export default function Pages({ params: asyncParams, searchParams: asyncSearchParams, }: {
+    params: Promise<Record<string, string[]>>;
+    searchParams: Promise<Record<string, string | string[] | undefined>>;
+}): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/types/pages/NewProjectButton.d.ts

@@ -0,0 +1 @@
+export declare function NewProjectButton(): import("react/jsx-runtime").JSX.Element;

package/dist/types/pages/RebuildButton.d.ts

@@ -0,0 +1 @@
+export declare function RebuildButton(): import("react/jsx-runtime").JSX.Element;

package/dist/types/pages/root-actions.d.ts

@@ -0,0 +1,29 @@
+export declare function rebuildAction(): Promise<{
+    success: boolean;
+}>;
+export interface TemplateInfo {
+    /** Unique identifier (directory name) */
+    id: string;
+    /** Display name from template.json */
+    name: string;
+    /** Whether this is the default template */
+    default?: boolean;
+    /** Full path to the template directory */
+    path: string;
+}
+interface CreateProjectInput {
+    name: string;
+    projectPath: string;
+    templateId: string;
+}
+interface CreateProjectResult {
+    success: boolean;
+    error?: string;
+}
+/**
+ * Load all available project templates.
+ * Templates are sorted with default first, then alphabetically by name.
+ */
+export declare function loadTemplatesAction(): Promise<TemplateInfo[]>;
+export declare function createProjectAction(input: CreateProjectInput): Promise<CreateProjectResult>;
+export {};

package/dist/types/pages/root.d.ts

@@ -0,0 +1 @@
+export declare function Homepage(): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/types/providers/hosting/github-pages.d.mts

@@ -0,0 +1,11 @@
+import { z } from "zod";
+import type { HostingProvider } from "../types.mts";
+export declare const ProviderConfigGitHubPages: z.ZodObject<{
+    repository: z.ZodString;
+    root: z.ZodOptional<z.ZodBoolean>;
+    username: z.ZodString;
+}, z.core.$strip>;
+export type ProviderConfigGitHubPages = z.infer<typeof ProviderConfigGitHubPages>;
+export declare class GitHubPagesProvider implements HostingProvider {
+    publishContent(): Promise<void>;
+}

package/dist/types/providers/hosting/liqvid-studio.d.mts

@@ -0,0 +1,10 @@
+import { z } from "zod";
+export declare const ProviderConfigLiqvidStudio: z.ZodObject<{
+    username: z.ZodString;
+}, z.core.$strip>;
+export type ProviderConfigLiqvidStudio = z.infer<typeof ProviderConfigLiqvidStudio>;
+import type { MediaHostingProvider } from "../types.mts";
+export declare class LiqvidStudioProvider implements MediaHostingProvider {
+    publishContent(): Promise<void>;
+    publishMedia(): Promise<void>;
+}

package/dist/types/providers/hosting/s3.d.mts

@@ -0,0 +1,11 @@
+import { z } from "zod";
+import type { MediaHostingProvider } from "../types.mts";
+export declare const ProviderConfigS3: z.ZodObject<{
+    bucket: z.ZodString;
+    prefix: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>;
+export type ProviderConfigS3 = z.infer<typeof ProviderConfigS3>;
+export declare class S3Provider implements MediaHostingProvider {
+    publishContent(): Promise<void>;
+    publishMedia(): Promise<void>;
+}

package/dist/types/providers/hosting/sftp.d.mts

@@ -0,0 +1,13 @@
+import { z } from "zod";
+import type { MediaHostingProvider } from "../types.mts";
+export declare const ProviderConfigSFTP: z.ZodObject<{
+    host: z.ZodString;
+    path: z.ZodString;
+}, z.core.$strip>;
+export type ProviderConfigSFTP = z.infer<typeof ProviderConfigSFTP>;
+export declare class SFTPProvider implements MediaHostingProvider {
+    #private;
+    constructor(options: ProviderConfigSFTP);
+    publishContent(localDir: string): Promise<void>;
+    publishMedia(_localDir: string): Promise<void>;
+}

package/dist/types/providers/index.d.mts

@@ -0,0 +1,10 @@
+import { GitHubPagesProvider } from "./hosting/github-pages.mts";
+import { LiqvidStudioProvider } from "./hosting/liqvid-studio.mts";
+import { S3Provider } from "./hosting/s3.mts";
+import { SFTPProvider } from "./hosting/sftp.mts";
+export declare const providersMap: {
+    githubPages: typeof GitHubPagesProvider;
+    liqvidStudio: typeof LiqvidStudioProvider;
+    s3: typeof S3Provider;
+    sftp: typeof SFTPProvider;
+};

package/dist/types/providers/social/bluesky.d.mts

@@ -0,0 +1,10 @@
+import { z } from "zod";
+import type { SocialProvider } from "../types.mts";
+export declare const ProviderConfigBlueSky: z.ZodObject<{
+    username: z.ZodString;
+}, z.core.$strip>;
+export type ProviderConfigBlueSky = z.infer<typeof ProviderConfigBlueSky>;
+export declare class BlueSkyProvider implements SocialProvider {
+    constructor(_options: ProviderConfigBlueSky);
+    publish(): Promise<void>;
+}

package/dist/types/providers/social/facebook.d.mts

@@ -0,0 +1,10 @@
+import { z } from "zod";
+import type { SocialProvider } from "../types.mts";
+export declare const ProviderConfigFacebook: z.ZodObject<{
+    username: z.ZodString;
+}, z.core.$strip>;
+export type ProviderConfigFacebook = z.infer<typeof ProviderConfigFacebook>;
+export declare class FacebookProvider implements SocialProvider {
+    constructor(_options: ProviderConfigFacebook);
+    publish(): Promise<void>;
+}