@liqvid/studio 1.0.0-alpha.0

package/dist/esm/ui/DockableDialog.js

@@ -0,0 +1,131 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useColorScheme } from "@liqvid/color-scheme/react";
+import { useKeyboardShortcut } from "@liqvid/keymap/react";
+import { onClickReact, onDragReact } from "@liqvid/utils";
+import { Portal } from "@radix-ui/react-portal";
+import classNames from "classnames";
+import { Children, cloneElement, createContext, isValidElement, useContext, useEffect, useMemo, useRef, } from "react";
+import { z } from "zod";
+import { useToggle } from "../utils/react.mjs";
+import styles from "./DockableDialog.module.css";
+/**
+ * Merges props onto a single React child element.
+ * Similar to Radix's Slot component.
+ */
+function Slot({ children, className, ...props }) {
+    const child = Children.only(children);
+    if (!isValidElement(child)) {
+        return null;
+    }
+    const childProps = child.props;
+    return cloneElement(child, {
+        ...props,
+        className: classNames(className, childProps.className),
+    });
+}
+const dockableDialogContext = createContext({
+    open: false,
+    setOpen() { },
+    toggle() { },
+});
+dockableDialogContext.displayName = "DockableDialog";
+function useDockableDialogState() {
+    return useContext(dockableDialogContext);
+}
+const openKey = `lv-dockable-dialog-open.`;
+const positionKey = `lv-dockable-dialog-position.`;
+function Root({ children, name, shortcut, }) {
+    const { value: open, set: setOpen, toggle } = useToggle();
+    useKeyboardShortcut(shortcut, toggle);
+    // persist open state
+    useEffect(() => {
+        if (!name)
+            return;
+        const sessionValue = window.sessionStorage.getItem(openKey + name);
+        if (sessionValue === "true")
+            setOpen(true);
+    }, [name, setOpen]);
+    useEffect(() => {
+        if (!name)
+            return;
+        window.sessionStorage.setItem(openKey + name, String(open));
+    }, [open, name]);
+    // context value
+    const context = useMemo(() => ({ name, open, setOpen, toggle }), [name, open, toggle, setOpen]);
+    return (_jsx(dockableDialogContext.Provider, { value: context, children: children }));
+}
+function Trigger({ asChild = false, children, }) {
+    const { toggle } = useDockableDialogState();
+    const Component = asChild ? Slot : "button";
+    const events = useMemo(() => onClickReact(toggle), [toggle]);
+    return _jsx(Component, { ...events, children: children });
+}
+function Content({ asChild = false, className, ...props }) {
+    const Component = asChild ? Slot : "div";
+    return (_jsx(Component, { className: classNames(styles.DockableDialogContent, className), ...props }));
+}
+function Header({ asChild = false, className, ...props }) {
+    const { name } = useDockableDialogState();
+    const Component = asChild ? Slot : "header";
+    const ref = useRef(null);
+    const offset = useRef([0, 0]);
+    const events = useMemo(() => onDragReact((_e, { x, y }) => {
+        const parent = ref.current?.parentElement;
+        if (!parent)
+            return;
+        const [offsetX, offsetY] = offset.current;
+        Object.assign(parent.style, {
+            translate: `${x + offsetX}px ${y + offsetY}px`,
+        });
+    }, 
+    // down
+    (_e, { x, y }) => {
+        if (!ref.current)
+            return;
+        const rect = ref.current.getBoundingClientRect();
+        offset.current = [rect.x - x, rect.y - y];
+    }, 
+    // up
+    (_e, { x, y }) => {
+        if (!name)
+            return;
+        window.sessionStorage.setItem(positionKey + name, `${offset.current[0] + x} ${offset.current[1] + y}`);
+    }), [name]);
+    useEffect(() => {
+        if (!name)
+            return;
+        const parent = ref.current?.parentElement;
+        if (!parent)
+            return;
+        // get saved value
+        const SavedCoordinates = z
+            .templateLiteral([z.number(), " ", z.number()])
+            .transform((arg) => arg.split(" ").map((x) => parseFloat(x)));
+        const savedRaw = window.sessionStorage.getItem(positionKey + name);
+        const $saved = SavedCoordinates.safeParse(savedRaw);
+        if (!$saved.success)
+            return;
+        // restore saved value
+        const [savedX, savedY] = $saved.data;
+        Object.assign(parent.style, {
+            translate: `${savedX}px ${savedY}px`,
+        });
+    }, [name]);
+    return (_jsx(Component, { className: classNames(styles.DockableDialogHeader, className), ref: ref, ...events, ...props }));
+}
+function Dialog({ className, ...props }) {
+    const { open } = useDockableDialogState();
+    const { colorScheme } = useColorScheme();
+    return (_jsx(Portal, { children: _jsx("aside", { className: classNames(styles.DockableDialog, "shadow-lg", className), hidden: !open, style: {
+                colorScheme,
+            }, ...props }) }));
+}
+export const DockableDialog = {
+    Content,
+    Dialog,
+    Header,
+    Portal,
+    Root,
+    Trigger,
+};

package/dist/esm/ui/DockableDialog.module.css

@@ -0,0 +1,63 @@
+@layer base {
+  html {
+    color-scheme: light dark;
+  }
+}
+
+#lv-recording {
+  position: relative;
+}
+
+/* #lv-recording-dialog { */
+/*   background-color: #2a2a2a; */
+/*   border-radius: 2px 2px 0 0; */
+/*   box-shadow: 2px -2px 2px 2px rgba(0, 0, 0, 0.3); */
+/*   box-sizing: border-box; */
+/*   color: #fff; */
+/*   font-family: sans-serif; */
+/*   line-height: 1; */
+/*   position: absolute; */
+/*   bottom: calc(var(--lv-controls-height) - 2px); */
+/*   right: 0; */
+/*   z-index: 3; */
+/*   max-height: 20rem; */
+/*   overflow-y: auto; */
+/*   padding: 0.5em; */
+/*   width: 23rem; */
+/*   > h3 { */
+/*     color: #1a69b5; */
+/*     margin: 0.5em 0 0.2em; */
+/*   } */
+/* } */
+
+.DockableDialog {
+  --border-radius: 4px;
+
+  display: flex;
+  flex-direction: column;
+  width: 500px;
+  position: absolute;
+
+  * {
+    transition-property: background-color, color;
+    transition-timing-function: var(--default-transition-timing-function);
+    transition-duration: 150ms;
+  }
+}
+
+.DockableDialogHeader {
+  background-color: var(--accent-solid);
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+  color: #fff;
+  font-size: 14px;
+  font-weight: bold;
+  padding: 4px 8px;
+  user-select: none;
+}
+
+.DockableDialogContent {
+  background-color: light-dark(#e0e0e0, #333);
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
+  color: light-dark(#000, #fff);
+  padding: 8px 16px;
+}

package/dist/esm/ui/RadioTabs.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+import classNames from "classnames";
+import styles from "./RadioTabs.module.css";
+function RadioTabs({ className, value, onValueChange, ...props }) {
+    return (_jsx(RadioGroup, { className: classNames(styles.RadioTabs, className), onValueChange: onValueChange, value: value, ...props }));
+}
+function RadioTabsItem({ className, icon: IconComponent, iconSize = 18, title, value, ...props }) {
+    return (_jsxs(Radio.Root, { className: classNames(styles.RadioTabsItem, className), title: title, value: value, ...props, children: [_jsx(IconComponent, { className: styles.iconRegular, size: iconSize }), _jsx(IconComponent, { className: styles.iconFill, size: iconSize, weight: "fill" })] }));
+}
+export { RadioTabs, RadioTabsItem };

package/dist/esm/ui/RadioTabs.module.css

@@ -0,0 +1,54 @@
+.RadioTabs {
+  display: inline-flex;
+  background-color: var(--gray-ui);
+  border-radius: 6px;
+  padding: 3px;
+  gap: 2px;
+  width: max-content;
+}
+
+.RadioTabsItem {
+  align-items: center;
+  background-color: transparent;
+  border: none;
+  border-radius: 4px;
+  color: var(--gray-solid);
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  padding: 6px 10px;
+  transition:
+    background-color 0.15s,
+    color 0.15s;
+
+  &:hover {
+    background-color: var(--gray-hover);
+    color: var(--gray-normal);
+  }
+
+  &[data-checked] {
+    background-color: var(--accent-solid);
+    color: var(--accent-contrast);
+
+    .iconRegular {
+      display: none;
+    }
+
+    .iconFill {
+      display: block;
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--accent-focus);
+    outline-offset: 1px;
+  }
+}
+
+.iconRegular {
+  display: block;
+}
+
+.iconFill {
+  display: none;
+}

package/dist/esm/ui/Tabs.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import classNames from "classnames";
+import { Children, cloneElement, isValidElement } from "react";
+import styles from "./Tabs.module.css";
+function Tabs({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Root, { className: classNames("flex flex-col gap-2", className), "data-slot": "tabs", ...props }));
+}
+function TabsList({ className, ...props }) {
+    return (_jsx(TabsPrimitive.List, { className: classNames(styles.TabsList, "inline-flex w-fit items-center justify-center rounded-lg bg-muted p-[3px]", className), "data-slot": "tabs-list", ...props }));
+}
+function TabsTrigger({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Tab, { className: classNames(styles.TabsTrigger, "inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap border border-transparent font-medium text-sm transition-[color,box-shadow] focus-visible:border-ring focus-visible:outline-1 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", className), "data-slot": "tabs-trigger", ...props }));
+}
+function TabsContent({ asChild, children, className, ...props }) {
+    const combinedClassName = classNames("flex-1 outline-none", className);
+    if (asChild && isValidElement(children)) {
+        return (_jsx(TabsPrimitive.Panel, { ...props, render: (renderProps) => {
+                const child = Children.only(children);
+                return cloneElement(child, {
+                    ...renderProps,
+                    className: classNames(combinedClassName, child.props.className),
+                });
+            } }));
+    }
+    return (_jsx(TabsPrimitive.Panel, { className: combinedClassName, "data-slot": "tabs-content", ...props, children: children }));
+}
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/esm/ui/Tabs.module.css

@@ -0,0 +1,31 @@
+.TabsList {
+  height: min-content;
+  margin: 0 auto;
+}
+
+.TabsTrigger {
+  background-color: light-dark(#0002, #fff2);
+  color: #fff;
+  font-family: "Inter Variable", sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  padding: 1px 8px;
+
+  &[disabled] {
+    pointer-events: none;
+    opacity: 50%;
+  }
+
+  &[data-active] {
+    background-color: var(--accent-solid);
+  }
+
+  &:first-child {
+    border-radius: 4px 0 0 4px;
+  }
+
+  &:last-child {
+    border-radius: 0 4px 4px 0;
+  }
+  /*  data-[state=active]:bg-background data-[state=active]:shadow-sm dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground */
+}

package/dist/esm/ui/Toast.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircleIcon, IconContext, InfoIcon, XCircleIcon, } from "@phosphor-icons/react";
+import classNames from "classnames";
+import { useEffect, useRef } from "react";
+import styles from "./Toast.module.css";
+const icons = {
+    info: _jsx(XCircleIcon, { color: "red", weight: "fill" }),
+    negative: _jsx(InfoIcon, { color: "slateblue", weight: "fill" }),
+    success: _jsx(CheckCircleIcon, { color: "green", weight: "fill" }),
+};
+export function Toast({ className, message, ref, title, type: toastType = "info", }) {
+    // hide animation
+    const elt = useRef(null);
+    // Add appear animation on mount
+    useEffect(() => {
+        if (!elt.current)
+            return;
+        elt.current.animate(appearToast.keyframes, appearToast.options);
+    }, []);
+    // useImperativeHandle(ref, () => ({
+    //   hide(opts = {}) {
+    //     return new Promise<void>((resolve) => {
+    //       if (!elt.current) return;
+    //
+    //       const anim = elt.current.animate(hideToast.keyframes, {
+    //         ...hideToast.options,
+    //         ...opts,
+    //       });
+    //       anim.addEventListener("finish", () => resolve());
+    //     });
+    //   },
+    // }));
+    const icon = icons[toastType];
+    return (_jsxs("aside", { className: classNames(styles.Toast, className), onClick: (e) => e.stopPropagation(), ref: elt, children: [_jsx("div", { className: styles.icon, children: _jsx(IconContext.Provider, { value: { height: "100%", width: "100%" }, children: icon }) }), _jsx("header", { children: title }), message && _jsx("div", { className: styles.message, children: message })] }));
+}
+/**
+ * Animation for hiding a toast notification.
+ * @see {@link https://www.figma.com/file/zdML9fFY9V0Oah28S0Msd3?node-id=3384:30299#314140994 Figma discussion}
+ */
+export const hideToast = {
+    keyframes: [
+        { opacity: "1", transform: "translateY(0%)" },
+        { opacity: "0", transform: "translateY(calc(100% + 1em))" },
+    ],
+    options: {
+        duration: 200,
+        easing: "ease-out",
+        fill: "forwards",
+    },
+};
+/**
+ * Animation for showing a toast notification.
+ */
+export const appearToast = {
+    keyframes: [
+        { opacity: "0", transform: "translateY(calc(100% + 1em))" },
+        { opacity: "1", transform: "translateY(0%)" },
+    ],
+    options: {
+        duration: 200,
+        easing: "ease-out",
+        fill: "forwards",
+    },
+};

package/dist/esm/ui/Toast.module.css

@@ -0,0 +1,50 @@
+.Toast {
+  background-color: var(--gray-app);
+  border-color: var(--gray-sep);
+  border-radius: 8px;
+  box-shadow:
+    0px 1px 2px 0px light-dark(#00000026, #33333326),
+    0px 3px 7px 0px light-dark(#00000040, #33333340);
+  color: light-dark(#000, #fff);
+  font-size: 14px;
+  padding: 8px;
+
+  transition-property: background-color, color;
+  /* transition-timing-function: var(--default-transition-timing-function); */
+  transition-duration: 150ms;
+
+  --icon-size: 24px;
+  --icon-offset: 8px;
+
+  /* layout */
+  display: grid;
+  grid:
+    "icon header"
+    "icon message" / calc(var(--icon-size) + var(--icon-offset)) auto auto;
+  position: relative;
+  width: 300px;
+
+  /* title */
+  > header {
+    color: var(--gray-normal);
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: var(--icon-size);
+
+    grid-area: header;
+  }
+}
+
+.message {
+  color: var(--gray-dim);
+
+  grid-area: message;
+}
+
+.icon {
+  height: var(--icon-size);
+  width: var(--icon-size);
+
+  grid-area: icon;
+}

package/dist/esm/ui/Toaster.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useColorScheme } from "@liqvid/color-scheme/react";
+import { HydrateElement } from "@liqvid/hydration";
+import { Toast } from "./Toast.js";
+import styles from "./Toaster.module.css";
+export function Toaster({ toasts, }) {
+    const { colorScheme, persistence } = useColorScheme();
+    const inner = (_jsx("div", { className: styles.Toaster, style: { colorScheme }, children: toasts.map((t) => (_jsx(Toast, { ...t }, t.time))) }));
+    return persistence ? (_jsx(HydrateElement, { from: [persistence], hydrationFn: (node, colorScheme) => {
+            // node.style.
+            node.setAttribute("style", `color-scheme:${colorScheme}`);
+        }, children: inner })) : (inner);
+}

package/dist/esm/ui/Toaster.module.css

@@ -0,0 +1,9 @@
+.Toaster {
+  bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  right: 36px;
+  row-gap: 8px;
+  z-index: 50;
+}

package/dist/esm/ui/test.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+const DialogContext = createContext({
+    min: 0,
+});
+export function useDialog() {
+    return useContext(DialogContext);
+}
+export function DialogProvider({ children }) {
+    const context = useMemo(() => ({
+        min: 0,
+    }), []);
+    return (_jsx(DialogContext.Provider, { value: context, children: children }));
+}

package/dist/esm/utils/dom.mjs

@@ -0,0 +1,6 @@
+import { fromZod } from "have-fun/zod";
+export async function fetchJson(Model, input, init) {
+    const res = await fetch(input, init);
+    const json = await res.json();
+    return fromZod(Model.safeParse(json));
+}

package/dist/esm/utils/fs.mjs

@@ -0,0 +1,94 @@
+import { readdirSync, statSync } from "node:fs";
+import * as fsp from "node:fs/promises";
+import { readdir } from "node:fs/promises";
+import * as path from "node:path";
+import { Err, Maybe, safeJsonParse } from "have-fun";
+import { fromZod } from "have-fun/zod";
+export async function loadJson(Model, filename) {
+    try {
+        const file = await fsp.readFile(filename, "utf8");
+        return safeJsonParse(file).flatMap((json) => fromZod(Model.safeParse(json)));
+    }
+    catch (err) {
+        return Err(err);
+    }
+}
+export function findUpwards(dirname, callback) {
+    return new Promise((resolve, reject) => {
+        const checkDirectory = async (dir) => {
+            try {
+                // Check if current directory matches callback
+                const result = await Promise.resolve(callback(dir));
+                if (result) {
+                    return dir;
+                }
+                // Get parent directory
+                const parentDir = path.dirname(dir);
+                // If we've reached the root directory, stop searching
+                if (parentDir === dir) {
+                    return null;
+                }
+                // Continue searching upwards
+                return await checkDirectory(parentDir);
+            }
+            catch (error) {
+                reject(error);
+                return null;
+            }
+        };
+        checkDirectory(dirname).then(resolve).catch(reject);
+    });
+}
+/** Walk a directory recursively */
+export async function walkDir(
+/** Directory to walk */
+dir, 
+/** Callback to run for each file */
+callback, 
+/** Callback to decide whether to descend into a directory */
+shouldProcessDir = () => true) {
+    const files = await readdir(dir, { withFileTypes: true });
+    await Promise.all(files.map(async (dirent) => {
+        const qualified = path.join(dirent.parentPath, dirent.name);
+        if (dirent.isDirectory()) {
+            if (shouldProcessDir({ basename: dirent.name, dirname: qualified })) {
+                await walkDir(qualified, callback, shouldProcessDir);
+            }
+        }
+        else if (dirent.isFile()) {
+            await callback({
+                basename: dirent.name,
+                dirname: dirent.parentPath,
+                filename: qualified,
+            });
+        }
+    }));
+}
+/** Synchronously walk a directory recursively */
+export function walkDirSync(
+/** Directory to walk */
+dir, 
+/** Callback to call for each file */
+callback) {
+    const files = readdirSync(dir);
+    for (const file of files) {
+        const qualified = path.join(dir, file);
+        const stats = statSync(qualified);
+        if (stats.isDirectory()) {
+            walkDirSync(qualified, callback);
+        }
+        else if (stats.isFile()) {
+            callback(qualified);
+        }
+    }
+}
+/**
+ * Get the path to the Biome executable, if available
+ */
+export async function getBiomePath(dirname) {
+    const packageDir = await findUpwards(dirname, async (dir) => {
+        const files = await fsp.readdir(dir);
+        return files.includes("package.json");
+    });
+    return Maybe.nullish(packageDir).map((dir) => path.join(dir, "node_modules", ".bin", "biome"));
+}

package/dist/esm/utils/misc.mjs

@@ -0,0 +1,15 @@
+/** Pending debounced calls to generateProjectTypes, keyed by assetsDir */
+const pendingCalls = new Map();
+/**
+ * Debounce function calls, grouped by a key.
+ */
+export function debounce(callback, key, debounceMs = 100) {
+    const pendingTimeout = pendingCalls.get(key);
+    if (pendingTimeout) {
+        clearTimeout(pendingTimeout);
+    }
+    pendingCalls.set(key, setTimeout(() => {
+        pendingCalls.delete(key);
+        callback();
+    }, debounceMs));
+}

package/dist/esm/utils/react.mjs

@@ -0,0 +1,8 @@
+import { useCallback, useState } from "react";
+export function useToggle(defaultValue) {
+    const [value, set] = useState(!!defaultValue);
+    const toggle = useCallback(() => {
+        set((x) => !x);
+    }, []);
+    return { set, toggle, value };
+}

package/dist/esm/utils/rsync.mjs

@@ -0,0 +1,57 @@
+import * as child_process from "node:child_process";
+import * as fsp from "node:fs/promises";
+import chalk from "chalk";
+export async function rsyncRemoteDirectory(options) {
+    const { localDir, remoteDir, host, username, password, port, recursive = true, } = options;
+    // Build SSH command with port if specified
+    const sshOptions = [];
+    if (port) {
+        sshOptions.push(`-p ${port}`);
+    }
+    const sshRsh = sshOptions.length > 0 ? `ssh ${sshOptions.join(" ")}` : "ssh";
+    // Construct the rsync command with expanded flags
+    const rsyncCommand = [
+        "rsync",
+        "--archive", // -a: archive mode (recursive, preserves permissions, etc.)
+        "--verbose", // -v: verbose mode
+        "--compress", // -z: compress data during transfer
+        "--progress",
+        `--rsh=${sshRsh}`, // Use SSH as the transport with optional port
+        `"${localDir}"/`, // Source directory (note the trailing slash!)
+        `"${username ? `${username}@` : ""}${host}:${remoteDir}"`, // Destination directory
+    ];
+    // Check if username and password are provided
+    if (username && password) {
+        // Display warning for password usage
+        console.warn(chalk.red("⚠️  WARNING: Using SSH password authentication is not secure!"));
+        console.warn(chalk.red("   Consider using SSH keys instead for better security."));
+        const portOption = port ? `-p ${port}` : "";
+        const sshCommand = `ssh ${username}@${host} ${portOption} -tt 'rsync --archive --verbose --compress --progress "${localDir}/" "${host}:${remoteDir}" && echo "rsync completed successfully"'`;
+        return new Promise((resolve, reject) => {
+            child_process.exec(sshCommand, (error, stdout, stderr) => {
+                if (error) {
+                    console.error("Error executing rsync command:", error);
+                    reject(error);
+                }
+                else {
+                    resolve();
+                }
+            });
+        });
+    }
+    else {
+        return new Promise((resolve, reject) => {
+            const command = rsyncCommand.join(" ");
+            child_process.exec(command, (error, stdout, stderr) => {
+                if (error) {
+                    console.error("Error executing rsync command:", error);
+                    reject(error);
+                }
+                else {
+                    // console.log(stdout);
+                    resolve();
+                }
+            });
+        });
+    }
+}

package/dist/templates/project.json.hbs

@@ -0,0 +1,5 @@
+{
+  "aspectRatio": "16:9",
+  "description": "",
+  "name": "{{name}}"
+}