@liqvid/studio 1.0.0-alpha.0

package/dist/esm/providers/social/youtube.mjs

@@ -0,0 +1,7 @@
+import { z } from "zod";
+export const ProviderConfigYouTube = z.object({
+    username: z.string(),
+});
+export class YouTubeProvider {
+    async publish() { }
+}

package/dist/esm/providers/types.mjs

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

package/dist/esm/publish.mjs

@@ -0,0 +1,37 @@
+import { providersMap } from "./providers/index.mjs";
+import { LiqvidConfig } from "./schemas/liqvid-config.mjs";
+import { loadJson } from "./utils/fs.mjs";
+// Example Usage (Demonstration - NOT production ready)
+async function main() {
+    // load config file
+    const configFileName = "./liqvid.config.json";
+    const $config = await loadJson(LiqvidConfig, configFileName);
+    if (!$config.isOk) {
+        console.error("failed to parse config file", $config.unwrapErr());
+        process.exit(1);
+    }
+    const config = $config.unwrap();
+    // initialize providers
+    const contentProviderConfig = config.providers[config.backend.content];
+    if (!contentProviderConfig) {
+        throw new Error(`missing configuration for content provider "${config.backend.content}"`);
+    }
+    const contentProvider = new providersMap[config.backend.content](contentProviderConfig);
+    // const mediaProviderConfig = config.providers[config.backend.media];
+    // if (!mediaProviderConfig) {
+    //   throw new Error(
+    //     `missing configuration for media provider "${config.backend.media}"`,
+    //   );
+    // }
+    // const _mediaProvider = new providersMap[config.backend.media](
+    //   mediaProviderConfig as any,
+    // );
+    try {
+        await contentProvider.publishContent("./build/client");
+        console.log("Directory synchronization completed successfully!");
+    }
+    catch (error) {
+        console.error("Directory synchronization failed:", error);
+    }
+}
+main();

package/dist/esm/recording/RecordingControl.js

@@ -0,0 +1,110 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEventListener } from "@liqvid/event-emitter/react";
+import { useKeyboardShortcut } from "@liqvid/keymap/react";
+import { useRecordingApi } from "@liqvid/recording";
+import { useForceUpdate } from "@liqvid/utils";
+import { useCallback, useRef, useState } from "react";
+import { saveRecording } from "../client.mjs";
+import { useProjectContext } from "../LiqvidDevToolsProvider";
+import { DockableDialog } from "../ui/DockableDialog";
+import { RecordingDialog } from "./RecordingDialog";
+/**
+ * Liqvid recording control.
+ */
+export function RecordingControl({ shortcuts }) {
+    const { manager, discard, pauseResume, startStop } = useRecordingApi();
+    const { projectPath } = useProjectContext();
+    const forceUpdate = useForceUpdate();
+    // Collect finalized data from all plugins
+    const finalizedDataRef = useRef([]);
+    // recording manager
+    useEventListener(manager, "finalize", useCallback((args) => {
+        if (args === undefined) {
+            // End signal - save all collected data to server
+            const recordingData = finalizedDataRef.current;
+            finalizedDataRef.current = [];
+            if (recordingData.length > 0) {
+                saveRecording({
+                    body: {
+                        durationMs: manager.duration.inMilliseconds(),
+                        plugins: recordingData,
+                    },
+                    search: { url: projectPath },
+                });
+            }
+        }
+        else {
+            // Individual plugin data - collect it
+            finalizedDataRef.current.push(args);
+        }
+        forceUpdate();
+    }, [forceUpdate, manager, projectPath]));
+    useEventListener(manager, "start", forceUpdate);
+    useEventListener(manager, "pause", forceUpdate);
+    useEventListener(manager, "resume", forceUpdate);
+    // warn before closing if recordings exist
+    useWarnBeforeClosingIfRecordingsExist();
+    // active plugins
+    const activePlugins = useRef(null);
+    if (activePlugins.current === null) {
+        activePlugins.current = {};
+        // for (const plugin of plugins) {
+        //   activePlugins.current[plugin.package] = false;
+        // }
+    }
+    // plugins dictionary
+    const [pluginsByKey] = useState(() => {
+        const dict = {};
+        // for (const plugin of plugins) {
+        //   dict[plugin.package] = plugin;
+        // }
+        return dict;
+    });
+    /* keyboard controls */
+    useKeyboardShortcut(shortcuts?.discard, discard);
+    useKeyboardShortcut(shortcuts?.pause, pauseResume);
+    useKeyboardShortcut(shortcuts?.startStop, startStop);
+    /* render */
+    return (_jsxs(DockableDialog.Root, { name: "recording", shortcut: shortcuts?.toggle, children: [_jsx(DockableDialog.Trigger, { asChild: true, children: _jsx(RecordingIndicatorIcon, {}) }), _jsx(RecordingDialog, { shortcuts: shortcuts })] }));
+}
+function useWarnBeforeClosingIfRecordingsExist() {
+    const { recordings } = useRecordingApi();
+    const warn = useRef(false);
+    warn.current = recordings.length > 0;
+    useEventListener(globalThis?.window, "beforeunload", useCallback((e) => {
+        if (warn.current)
+            e.returnValue = "You have recording data";
+    }, []));
+}
+const colors = {
+    active: "red",
+    inactive: "#666",
+    paused: "yellow",
+};
+const labels = {
+    active: "Recording in progress",
+    inactive: "No recording in progress",
+    paused: "Recording is paused",
+};
+/**
+ * Red when playback is active
+ */
+function RecordingIndicatorIcon(props) {
+    const state = useRecordingState();
+    return (_jsxs("svg", { height: "36", viewBox: "-50 -50 100 100", width: "36", ...props, children: [_jsx("title", { children: labels[state] }), _jsx("circle", { cx: "0", cy: "0", fill: colors[state], r: "35", stroke: "white", strokeWidth: "5" })] }));
+}
+function useRecordingState() {
+    const { manager } = useRecordingApi();
+    const forceUpdate = useForceUpdate();
+    // recording manager
+    useEventListener(manager, "cancel", forceUpdate);
+    useEventListener(manager, "finalize", forceUpdate);
+    useEventListener(manager, "pause", forceUpdate);
+    useEventListener(manager, "resume", forceUpdate);
+    useEventListener(manager, "start", forceUpdate);
+    if (manager?.active) {
+        return manager.paused ? "paused" : "active";
+    }
+    return "inactive";
+}

package/dist/esm/recording/RecordingDialog.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+import { Keymap } from "@liqvid/keymap";
+import { useRecordingApi } from "@liqvid/recording";
+import { usePluginApi } from "@liqvid/studio-plugin-api";
+import { formatTime, formatTimeDuration } from "@liqvid/utils";
+import { Fragment, useCallback, useEffect, useState } from "react";
+import { listRecordings } from "../client.mjs";
+import { useProjectContext } from "../LiqvidDevToolsProvider";
+import { DockableDialog } from "../ui/DockableDialog";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/Tabs";
+import { useToggle } from "../utils/react.mjs";
+import styles from "./RecordingDialog.module.css";
+export function RecordingDialog({ shortcuts, onShortcutChange, }) {
+    const { projectPath } = useProjectContext();
+    const { enabledPlugins, togglePlugin } = useRecordingApi();
+    const { plugins } = usePluginApi();
+    const [recordings, setRecordings] = useState([]);
+    useEffect(() => {
+        listRecordings({ search: { url: projectPath } }).then(($res) => {
+            if ($res.isErr) {
+                console.error($res.unwrapErr());
+                return;
+            }
+            setRecordings($res.unwrap());
+        });
+    }, [projectPath]);
+    return (_jsxs(DockableDialog.Dialog, { children: [_jsx(DockableDialog.Header, { children: "Recording" }), _jsx(DockableDialog.Content, { children: _jsx("div", { id: "lv-recording-dialog", children: _jsxs(Tabs, { defaultValue: "configuration", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { className: "lv-recording-tabs", value: "configuration", children: "Configuration" }), _jsx(TabsTrigger, { className: "lv-recording-tabs", value: "saved", children: "Recordings" }), _jsx(TabsTrigger, { className: "lv-recording-tabs", value: "shortcuts", children: "Shortcuts" })] }), _jsx(TabsContent, { asChild: true, value: "configuration", children: _jsxs("section", { children: [_jsx("h3", { children: "Plugins" }), _jsx("div", { className: styles.togglePlugins, children: Object.values(plugins).map((plugin) => {
+                                                if (!("recorder" in plugin))
+                                                    return null;
+                                                const studioPlugin = plugins[plugin.package];
+                                                if (!studioPlugin)
+                                                    return null;
+                                                return (_jsx("button", { "aria-checked": enabledPlugins[plugin.package], className: styles.recordingToggle, onClick: () => togglePlugin(plugin.package), role: "switch", type: "button", children: plugin.icon({ height: 24, width: 24 }) }, plugin.package));
+                                            }) }), _jsx("table", { className: styles.configurationTable, children: _jsx("tbody", { children: Object.values(plugins).map((plugin) => {
+                                                    if (!("recorder" in plugin))
+                                                        return null;
+                                                    if (!enabledPlugins[plugin.package])
+                                                        return null;
+                                                    const ConfigurationComponent = plugin.configurationComponent;
+                                                    if (!ConfigurationComponent)
+                                                        return null;
+                                                    return (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: plugin.icon({ height: 36, width: 36 }) }), _jsx("td", { children: _jsx(ConfigurationComponent, {}) })] }, plugin.package));
+                                                }) }) })] }) }), _jsx(TabsContent, { asChild: true, value: "saved", children: _jsxs("section", { children: [_jsx("h3", { children: "Saved" }), _jsx("div", { className: styles.Recordings, children: recordings.map((r) => (_jsx(RecordingRow, { recording: r }, r.name))) })] }) }), _jsx(TabsContent, { asChild: true, value: "shortcuts", children: _jsxs("section", { children: [_jsx("h3", { children: "Shortcuts" }), _jsx(ShortcutsTable, { onShortcutChange: onShortcutChange, shortcuts: shortcuts })] }) })] }) }) })] }));
+}
+export function RecordingRow({ recording: r }) {
+    const { value: expanded, set: setExpanded } = useToggle();
+    const { plugins } = usePluginApi();
+    // console.log({ plugins });
+    return (_jsxs(Collapsible.Root, { className: styles.RecordingRow, onOpenChange: setExpanded, open: expanded, children: [_jsxs(Collapsible.Trigger, { className: styles.RecordingRowTrigger, children: [_jsx("span", { className: styles.recordingName, children: r.name }), _jsx("span", { className: styles.pluginIcons, children: r.plugins.map((p) => p in plugins ? (_jsx(Fragment, { children: plugins[p].icon() }, p)) : null) }), _jsx("time", { className: styles.recordingDuration, dateTime: formatTimeDuration(r.duration), children: formatTime(r.duration) })] }), _jsx(Collapsible.Panel, { className: styles.RecordingRowExpand, children: r.plugins.map((p) => {
+                    const plugin = plugins[p];
+                    if (!plugin)
+                        return null;
+                    const Component = plugin.recordingComponent;
+                    if (!Component)
+                        return null;
+                    return _jsx(Component, { name: r.name }, plugin.package);
+                }) })] }));
+}
+const shortcutCommands = [
+    ["Toggle panel", "toggle"],
+    ["Start/Stop recording", "startStop"],
+    ["Pause recording", "pause"],
+    ["Discard recording", "discard"],
+];
+function ShortcutsTable({ shortcuts, onShortcutChange, }) {
+    return (_jsxs("table", { className: styles.shortcutsTable, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Command" }), _jsx("th", { children: "Shortcut" })] }) }), _jsx("tbody", { children: shortcutCommands.map(([label, key]) => (_jsx(ShortcutRow, { label: label, onChange: onShortcutChange
+                        ? (value) => onShortcutChange(key, value)
+                        : undefined, shortcut: shortcuts?.[key] }, key))) })] }));
+}
+function ShortcutRow({ label, shortcut, onChange, }) {
+    const [isRecording, setIsRecording] = useState(false);
+    const [localValue, setLocalValue] = useState(undefined);
+    const displayValue = localValue ?? shortcut;
+    const identifyKey = useCallback((e) => {
+        e.preventDefault();
+        const seq = Keymap.identify(e);
+        setLocalValue(seq);
+        onChange?.(seq);
+        setIsRecording(false);
+    }, [onChange]);
+    const handleFocus = useCallback(() => {
+        setIsRecording(true);
+    }, []);
+    const handleBlur = useCallback(() => {
+        setIsRecording(false);
+    }, []);
+    return (_jsxs("tr", { children: [_jsx("td", { children: label }), _jsx("td", { children: _jsx("input", { className: styles.shortcutInput, "data-recording": isRecording || undefined, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: identifyKey, placeholder: isRecording ? "Press a key..." : "Click to record", readOnly: true, type: "text", value: displayValue ? fmtSeq(displayValue) : "" }) })] }));
+}
+/** Format key sequences with special characters on Mac */
+function fmtSeq(str) {
+    if (!isMac())
+        return str;
+    if (str === undefined)
+        return str;
+    return str
+        .split("+")
+        .map((k) => {
+        if (k === "Ctrl")
+            return "^";
+        else if (k === "Alt")
+            return "\u2325";
+        if (k === "Shift")
+            return "\u21E7";
+        if (k === "Meta")
+            return "\u2318";
+        return k;
+    })
+        .join("");
+}
+function isMac() {
+    return (typeof globalThis.navigator !== "undefined" &&
+        navigator.platform === "MacIntel");
+}

package/dist/esm/recording/RecordingDialog.module.css

@@ -0,0 +1,194 @@
+.Recordings {
+  --radius: 4px;
+
+  background-color: var(--gray-ui);
+  border: 1px solid var(--gray-sep);
+  border-radius: var(--radius);
+
+  margin: 4px 0;
+
+  * {
+    transition-property: background-color, border-color, color;
+    transition-duration: 150ms;
+  }
+}
+
+.RecordingRow {
+  &:first-child {
+    &,
+    & > .RecordingRowTrigger {
+      border-radius: var(--radius) var(--radius) 0 0;
+    }
+  }
+
+  &:last-child {
+    &,
+    & > .RecordingRowTrigger {
+      border-radius: 0 0 var(--radius) var(--radius);
+    }
+  }
+}
+
+.RecordingRowTrigger {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  padding: 4px 8px;
+  width: 100%;
+
+  &:hover {
+    background-color: var(--gray-hover);
+  }
+
+  &[data-panel-open] {
+    background-color: var(--gray-active);
+  }
+}
+
+.recordingName {
+  font-family: monospace;
+}
+
+.pluginIcons {
+  margin-left: auto;
+
+  svg {
+    height: 24px;
+    width: 24px;
+  }
+}
+
+.recordingDuration {
+  font-family: monospace;
+  font-size: 16px;
+  text-align: right;
+  width: 4em;
+}
+
+.RecordingRowExpand {
+  background-color: var(--gray-subtle);
+  overflow: hidden;
+
+  &[data-open] {
+    animation: slideDown 150ms ease-out;
+  }
+
+  &[data-closed] {
+    animation: slideUp 150ms ease-out;
+  }
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--collapsible-panel-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--collapsible-panel-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+.details {
+  padding: 4px 4px 4px 16px;
+}
+
+.togglePlugins {
+  display: flex;
+  gap: 0.5em;
+}
+
+.recordingToggle {
+  background-color: var(--gray-ui);
+  border-radius: 4px;
+  cursor: pointer;
+  height: 36px;
+  width: 36px;
+
+  transition: unset;
+
+  &[aria-checked="true"] {
+    background-color: red;
+  }
+
+  > svg {
+    height: 36px;
+    width: 36px;
+  }
+}
+
+.configurationTable {
+  border: 1px solid #000;
+  margin: 1em auto;
+  width: 100%;
+
+  > tbody > tr > th {
+    text-align: right;
+    padding: 4px;
+    width: calc(36px + 8px);
+  }
+
+  > tbody > tr > td {
+    padding: 4px;
+    text-align: left;
+  }
+}
+
+.shortcutsTable {
+  border: 1px solid var(--gray-sep);
+  border-collapse: collapse;
+  margin: 0.5em 0;
+  width: 100%;
+
+  th,
+  td {
+    border: 1px solid var(--gray-sep);
+    padding: 6px 8px;
+    text-align: left;
+  }
+
+  thead th {
+    background-color: var(--gray-ui);
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+
+  tbody tr:hover {
+    background-color: var(--gray-hover);
+  }
+}
+
+.shortcutInput {
+  background-color: var(--gray-subtle);
+  border: 1px solid var(--gray-sep);
+  border-radius: 4px;
+  cursor: pointer;
+  font-family: monospace;
+  font-size: 13px;
+  padding: 4px 8px;
+  text-align: center;
+  width: 100%;
+
+  &:focus {
+    border-color: var(--blue-focus, #0066cc);
+    outline: none;
+  }
+
+  &[data-recording] {
+    background-color: var(--yellow-subtle, #fffbe6);
+    border-color: var(--yellow-border, #d9a600);
+  }
+
+  &::placeholder {
+    color: var(--gray-text-muted, #888);
+    font-style: italic;
+  }
+}

package/dist/esm/schemas/liqvid-config.mjs

@@ -0,0 +1,32 @@
+import { z } from "zod";
+import { ProviderConfigGitHubPages } from "../providers/hosting/github-pages.mjs";
+import { ProviderConfigLiqvidStudio } from "../providers/hosting/liqvid-studio.mjs";
+import { ProviderConfigS3 } from "../providers/hosting/s3.mjs";
+import { ProviderConfigSFTP } from "../providers/hosting/sftp.mjs";
+import { ProviderConfigBlueSky } from "../providers/social/bluesky.mjs";
+import { ProviderConfigFacebook } from "../providers/social/facebook.mjs";
+import { ProviderConfigInstagram } from "../providers/social/instagram.mjs";
+import { ProviderConfigTwitter } from "../providers/social/twitter.mjs";
+import { ProviderConfigYouTube } from "../providers/social/youtube.mjs";
+export const LiqvidConfig = z.object({
+    $schema: z.string(),
+    backend: z.object({
+        content: z.enum(["githubPages", "liqvidStudio", "s3", "sftp"]),
+        media: z.enum(["liqvidStudio", "s3", "sftp"]),
+    }),
+    providers: z.object({
+        // hosting
+        githubPages: ProviderConfigGitHubPages.optional(),
+        liqvidStudio: ProviderConfigLiqvidStudio.optional(),
+        s3: ProviderConfigS3.optional(),
+        sftp: ProviderConfigSFTP.optional(),
+        // social
+        ...{
+            bluesky: ProviderConfigBlueSky.optional(),
+            facebook: ProviderConfigFacebook.optional(),
+            instagram: ProviderConfigInstagram.optional(),
+            twitter: ProviderConfigTwitter.optional(),
+            youtube: ProviderConfigYouTube.optional(),
+        },
+    }),
+});

package/dist/esm/schemas/project.mjs

@@ -0,0 +1,27 @@
+import { DurationOptions } from "@liqvid/duration/zod";
+import { z } from "zod";
+export const AspectRatio = z.object({
+    height: z.number(),
+    width: z.number(),
+});
+export const AspectRatioSpecifier = z.union([
+    z.templateLiteral([z.number(), ":", z.number()]),
+    z.tuple([z.number(), z.number()]),
+    AspectRatio,
+]);
+/**
+ * project.json files
+ */
+export const ProjectJson = z.object({
+    aspectRatio: AspectRatioSpecifier.optional().default({
+        height: 9,
+        width: 16,
+    }),
+    name: z.string(),
+});
+/**
+ * auto-generated project-meta.json files
+ */
+export const AutoGenProjectMeta = z.object({
+    duration: DurationOptions,
+});

package/dist/esm/schemas/recording-meta.mjs

@@ -0,0 +1,11 @@
+import { z } from "zod";
+export const RecordingMetaFile = z.object({
+    created: z.iso.datetime(),
+    duration: z.object({
+        milliseconds: z.number(),
+    }),
+});
+export const RecordingMeta = RecordingMetaFile.extend({
+    name: z.string(),
+    plugins: z.array(z.string()),
+});

package/dist/esm/types/assets.mjs

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

package/dist/esm/types.mjs

@@ -0,0 +1,12 @@
+export class DirectoryHelper {
+    dirname;
+    constructor(dirname = "") {
+        this.dirname = dirname;
+    }
+    dir(dirname) {
+        return new DirectoryHelper(`${this.dirname}/${dirname}`);
+    }
+    file(filename, version) {
+        return `${this.dirname}/${filename}`;
+    }
+}

package/dist/esm/ui/Dialog.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+import classNames from "classnames";
+import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useMemo, useState, } from "react";
+import styles from "./Dialog.module.css";
+const DialogApiContext = createContext({
+    close() { },
+    isDialog: false,
+    isOpen: false,
+});
+DialogApiContext.displayName = "DialogApi";
+export function useDialogApi() {
+    return useContext(DialogApiContext);
+}
+export function DialogRoot({ children, defaultOpen = false, onOpenChange, open: controlledOpen, }) {
+    // open state
+    const [open, setOpen] = useState(defaultOpen);
+    /** setOpen() wrapper which updates ancestor dropdown */
+    const wrappedOnOpenChange = useCallback((newOpen) => {
+        (onOpenChange ?? setOpen)(newOpen);
+    }, [onOpenChange]);
+    // api
+    const dialogApi = useMemo(() => ({
+        close() {
+            setOpen(false);
+        },
+        isDialog: true,
+        get isOpen() {
+            return controlledOpen ?? open;
+        },
+    }), [controlledOpen, open]);
+    return (_jsx(Dialog.Root, { modal: true, onOpenChange: wrappedOnOpenChange, open: controlledOpen ?? open, children: _jsx(DialogApiContext.Provider, { value: dialogApi, children: children }) }));
+}
+export function DialogClose({ asChild, children, className, ...props }) {
+    const combinedClassName = classNames(styles.Close, className);
+    if (asChild && isValidElement(children)) {
+        return (_jsx(Dialog.Close, { ...props, render: (renderProps) => {
+                const child = Children.only(children);
+                return cloneElement(child, {
+                    ...renderProps,
+                    className: classNames(combinedClassName, child.props.className),
+                });
+            } }));
+    }
+    return (_jsx(Dialog.Close, { className: combinedClassName, ...props, children: children }));
+}
+export function DialogContent({ className, ...props }) {
+    return (_jsx(Dialog.Popup, { className: classNames(styles.Content, className), ...props }));
+}
+export function DialogPortal(props) {
+    return _jsx(Dialog.Portal, { ...props });
+}
+export function DialogOverlay({ className, ...props }) {
+    return (_jsx(Dialog.Backdrop, { className: classNames(styles.Overlay, className), ...props }));
+}
+export function DialogTitle({ className, ...props }) {
+    return (_jsx(Dialog.Title, { className: classNames(styles.Title, className), ...props }));
+}
+export function DialogTrigger({ asChild, children, className, ...props }) {
+    const combinedClassName = classNames(styles.Trigger, className);
+    if (asChild && isValidElement(children)) {
+        return (_jsx(Dialog.Trigger, { ...props, render: (renderProps) => {
+                const child = Children.only(children);
+                return cloneElement(child, {
+                    ...renderProps,
+                    className: classNames(combinedClassName, child.props.className),
+                });
+            } }));
+    }
+    return (_jsx(Dialog.Trigger, { className: combinedClassName, ...props, children: children }));
+}