@parallelworks/ui 0.1.0 → 0.3.0

package/dist/chunks/CodePreviewEditor-CSPRILMp.js

@@ -0,0 +1,61 @@
+import { i as getThemeName, n as setupMonacoWorkers, r as defineEditorThemes, t as useCssIsDark } from "./editor-D55tumuZ.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import * as monaco from "monaco-editor";
+//#region src/file-explorer/FilePreview/CodePreviewEditor.tsx
+var OPTIONS = {
+	readOnly: true,
+	domReadOnly: true,
+	automaticLayout: true,
+	minimap: { enabled: false },
+	scrollBeyondLastLine: false,
+	renderLineHighlight: "none",
+	overviewRulerLanes: 0,
+	hideCursorInOverviewRuler: true,
+	lineNumbers: "on",
+	wordWrap: "off",
+	fontSize: 12,
+	scrollbar: { alwaysConsumeMouseWheel: false }
+};
+setupMonacoWorkers();
+function CodePreviewEditor({ value, language }) {
+	const isDark = useCssIsDark();
+	const editorRef = useRef(null);
+	useEffect(() => {
+		return () => {
+			editorRef.current?.getModel()?.dispose();
+			editorRef.current?.dispose();
+			editorRef.current = null;
+		};
+	}, []);
+	useEffect(() => {
+		const model = editorRef.current?.getModel();
+		if (model && model.getValue() !== value) model.setValue(value);
+	}, [value]);
+	useEffect(() => {
+		const model = editorRef.current?.getModel();
+		if (model) monaco.editor.setModelLanguage(model, language);
+	}, [language]);
+	useEffect(() => {
+		if (editorRef.current) {
+			defineEditorThemes(monaco.editor);
+			monaco.editor.setTheme(getThemeName(isDark));
+		}
+	}, [isDark]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "h-full w-full",
+		ref: (container) => {
+			if (container && !editorRef.current) {
+				defineEditorThemes(monaco.editor);
+				const model = monaco.editor.createModel(value, language);
+				editorRef.current = monaco.editor.create(container, {
+					...OPTIONS,
+					model
+				});
+				monaco.editor.setTheme(getThemeName(isDark));
+			}
+		}
+	});
+}
+//#endregion
+export { CodePreviewEditor as default };

package/dist/chunks/Indicator-hBSIxOPK.js

@@ -0,0 +1,39 @@
+import { CancelIcon, FailIcon, NotRunningIcon, RunningIcon, SkipIcon, SuccessIcon } from "../icons.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Indicator.tsx
+function Indicator({ status }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "h-2 flex items-center text-(--theme-panel-bg)",
+		children: status === "started" || status === "running" ? /* @__PURE__ */ jsx(RunningIcon, {
+			className: "rounded-full text-[#FFCF00] animate-spin",
+			"data-testid": "running-indicator"
+		}) : status === "completed" ? /* @__PURE__ */ jsx(SuccessIcon, {
+			className: "text-[#6FBF5A]",
+			style: { transform: "scale(1.25)" },
+			"data-testid": "completed-indicator"
+		}) : status === "failed" || status === "error" ? /* @__PURE__ */ jsx(FailIcon, {
+			className: "text-red-500",
+			style: { transform: "scale(1.25)" },
+			"data-testid": "failed-indicator"
+		}) : status === "skipped" || status === "skipped-failed" ? /* @__PURE__ */ jsx(SkipIcon, {
+			className: "text-gray-400",
+			style: { transform: "scale(1.25)" },
+			"data-testid": "skipped-indicator"
+		}) : status === "canceled" ? /* @__PURE__ */ jsx(CancelIcon, {
+			className: "text-[#3B82F6]",
+			style: { transform: "scale(1.5)" },
+			"data-testid": "canceled-indicator"
+		}) : status === "faulted" ? /* @__PURE__ */ jsx(RunningIcon, {
+			className: "rounded-full text-[#EF4444] animate-spin",
+			"data-testid": "faulted-indicator"
+		}) : status === "canceling" ? /* @__PURE__ */ jsx(RunningIcon, {
+			className: "rounded-full text-[#3B82F6] animate-spin",
+			"data-testid": "canceling-indicator"
+		}) : /* @__PURE__ */ jsx(NotRunningIcon, {
+			className: "rounded-full text-[#AAAAAA]",
+			"data-testid": "not-running-indicator"
+		})
+	});
+}
+//#endregion
+export { Indicator as t };

package/dist/chunks/Loader-DQiZ75fa.js

@@ -0,0 +1,25 @@
+import { LoaderIcon } from "../icons.js";
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Loader.tsx
+function Loader({ size = 48, text, textSize = 12, full = true, color = "", loaderStyle = {} }) {
+	const loaderColor = color || "text-(--theme-element,#3b82f6)";
+	const fontSize = typeof size === "number" ? `${size}px` : size;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(full && "w-full", "flex flex-col flex-wrap justify-center items-center gap-y-1"),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cx("w-full flex justify-center items-center", loaderColor),
+			style: loaderStyle,
+			children: /* @__PURE__ */ jsx(LoaderIcon, {
+				className: "animate-spin",
+				style: { fontSize }
+			})
+		}), text && /* @__PURE__ */ jsx("div", {
+			className: "text-center italic",
+			style: { fontSize: `${textSize}px` },
+			children: text
+		})]
+	});
+}
+//#endregion
+export { Loader as t };

package/dist/chunks/Markdown-C5Re2ezs.js

@@ -0,0 +1,101 @@
+import { AlertIcon, CheckIcon, ClipboardIcon, CopyIcon, HiddenFalseIcon, HiddenTrueIcon, InfoIcon } from "../icons.js";
+import { i as useNotify } from "./Provider-DvVvScTQ.js";
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Suspense, lazy, useState } from "react";
+//#region src/components/Callout.tsx
+function CalloutIcon({ type }) {
+	if (type === "warning" || type === "error") return /* @__PURE__ */ jsx(AlertIcon, { className: "h-6 w-6 mr-4 text-lg" });
+	else return /* @__PURE__ */ jsx(InfoIcon, { className: "h-6 w-6 mr-4 text-lg" });
+}
+function Callout({ type, className = "", children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(className, type === "warning" && "bg-orange-100 border-orange-500 text-orange-700", type === "error" && "bg-red-100 border-red-500 text-red-700", type === "info" && "bg-blue-100 border-blue-500 text-blue-700", "border-t-4 rounded-b px-4 py-3 shadow-md my-4"),
+		role: "alert",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "py-1",
+				children: /* @__PURE__ */ jsx(CalloutIcon, { type })
+			}), /* @__PURE__ */ jsx("div", { children })]
+		})
+	});
+}
+//#endregion
+//#region src/components/CopyToClipboard.tsx
+function CopyToClipboard({ as = "div", text, className, children, showIcon = true }) {
+	const notify = useNotify();
+	const handleCopy = async () => {
+		try {
+			await navigator.clipboard.writeText(text);
+			notify.info("Copied to clipboard");
+		} catch {
+			notify.error("Failed to copy to clipboard");
+		}
+	};
+	return /* @__PURE__ */ jsxs(as, {
+		className,
+		onClick: handleCopy,
+		...as === "button" ? { type: "button" } : {},
+		children: [showIcon && /* @__PURE__ */ jsx(ClipboardIcon, {}), children]
+	});
+}
+function CopyCodeBlock({ textToCopy, children, secret = false, isRevealed = false, onRevealToggle }) {
+	const notify = useNotify();
+	const [copied, setCopied] = useState(false);
+	const handleCopy = async () => {
+		if (copied) return;
+		try {
+			await navigator.clipboard.writeText(textToCopy);
+			setCopied(true);
+			notify.info("Copied to clipboard");
+			setTimeout(() => setCopied(false), 2e3);
+		} catch {
+			notify.error("Failed to copy to clipboard");
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "group relative",
+		onClick: handleCopy,
+		children: [/* @__PURE__ */ jsx("pre", {
+			className: `p-4 theme-hover border rounded-lg text-left font-mono text-sm overflow-x-auto ${secret ? "pr-24" : "pr-12"}`,
+			children
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "absolute top-0 right-0 bottom-0 flex items-center gap-1 pl-8 pr-2 bg-gradient-to-l from-[var(--color-panel)] from-70% to-transparent rounded-r-lg",
+			children: [secret && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: (e) => {
+					e.stopPropagation();
+					onRevealToggle?.();
+				},
+				className: "p-2 rounded-md opacity-0 group-hover:opacity-100 transition-all duration-150",
+				"aria-label": isRevealed ? "Hide secret" : "Reveal secret",
+				title: isRevealed ? "Hide secret" : "Reveal secret",
+				children: isRevealed ? /* @__PURE__ */ jsx(HiddenFalseIcon, {}) : /* @__PURE__ */ jsx(HiddenTrueIcon, {})
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: (e) => {
+					e.stopPropagation();
+					handleCopy();
+				},
+				className: "p-2 rounded-md opacity-0 group-hover:opacity-100 transition-all duration-150",
+				"aria-label": copied ? "Copied" : "Copy to clipboard",
+				children: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-green-400" }) : /* @__PURE__ */ jsx(CopyIcon, {})
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/components/Markdown.tsx
+var MarkdownImpl = lazy(() => import("./MarkdownImpl-Bq4QhrtA.js"));
+function Markdown(props) {
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx("div", {
+			className: "markdown whitespace-pre-wrap text-start w-full",
+			children: props.children
+		}),
+		children: /* @__PURE__ */ jsx(MarkdownImpl, { ...props })
+	});
+}
+//#endregion
+export { Callout as i, CopyCodeBlock as n, CopyToClipboard as r, Markdown as t };

package/dist/chunks/MarkdownImpl-Bq4QhrtA.js

@@ -0,0 +1,33 @@
+import cx from "classnames";
+import { jsx } from "react/jsx-runtime";
+import { Streamdown } from "streamdown";
+import { code } from "@streamdown/code";
+import { math } from "@streamdown/math";
+//#region src/components/MarkdownImpl.tsx
+var plugins = {
+	code,
+	math
+};
+var shikiTheme = ["github-light", "github-dark"];
+function Markdown({ children, isStreaming, controls }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "markdown whitespace-normal text-start w-full",
+		children: /* @__PURE__ */ jsx(Streamdown, {
+			mode: isStreaming ? "streaming" : "static",
+			isAnimating: isStreaming ?? false,
+			...isStreaming ? { caret: "block" } : {},
+			...controls ? { controls } : {},
+			plugins,
+			shikiTheme,
+			components: { a: ({ node, ...props }) => /* @__PURE__ */ jsx("a", {
+				...props,
+				className: cx("link wrap-break-word", props.className),
+				target: "_blank",
+				rel: "noopener noreferrer"
+			}) },
+			children: children || ""
+		})
+	});
+}
+//#endregion
+export { Markdown as default };

package/dist/chunks/Modal-sOUEwebV.js

@@ -0,0 +1,121 @@
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+//#region src/components/Modal.tsx
+var FOCUSABLE = "a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex=\"-1\"])";
+var noop = () => {};
+var actionClasses = {
+	destructive: "bg-red-600 text-white hover:bg-red-700",
+	warning: "bg-yellow-500 text-white hover:bg-yellow-700",
+	info: "bg-(--theme-element,#06354f) text-(--theme-element-text,#ffffff) hover:opacity-90"
+};
+function Modal({ isOpen, close, cancelAction = noop, children, title = "", text = "", actionLabel = "", cancelLabel = "Cancel", action, closeAfterAction = true, type = "destructive", className = "", showButtons = true, disableAction = false, loading = false, padding = true, fitWidth = false, dimScreen = true, ignoreOutsideClickClose = false }) {
+	const [pending, setPending] = useState(false);
+	const actionFiredRef = useRef(false);
+	const panelRef = useRef(null);
+	const titleId = useId();
+	const inFlight = loading || pending;
+	const inFlightRef = useRef(inFlight);
+	inFlightRef.current = inFlight;
+	useEffect(() => {
+		if (isOpen) actionFiredRef.current = false;
+	}, [isOpen]);
+	useEffect(() => {
+		if (!isOpen) return;
+		const previouslyFocused = document.activeElement;
+		const previousOverflow = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		panelRef.current?.focus();
+		return () => {
+			document.body.style.overflow = previousOverflow;
+			previouslyFocused?.focus?.();
+		};
+	}, [isOpen]);
+	const trapFocus = useCallback((e) => {
+		if (e.key !== "Tab" || !panelRef.current) return;
+		const focusable = panelRef.current.querySelectorAll(FOCUSABLE);
+		if (focusable.length === 0) {
+			e.preventDefault();
+			return;
+		}
+		const first = focusable[0];
+		const last = focusable[focusable.length - 1];
+		if (e.shiftKey && document.activeElement === first) {
+			e.preventDefault();
+			last.focus();
+		} else if (!e.shiftKey && document.activeElement === last) {
+			e.preventDefault();
+			first.focus();
+		}
+	}, []);
+	const closeRef = useRef(close);
+	closeRef.current = close;
+	useEffect(() => {
+		if (!isOpen) return;
+		const onKey = (e) => {
+			if (e.key === "Escape" && !inFlightRef.current) closeRef.current();
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [isOpen]);
+	const runAction = useCallback(async () => {
+		if (actionFiredRef.current) return;
+		actionFiredRef.current = true;
+		setPending(true);
+		try {
+			await action?.();
+			if (closeAfterAction) closeRef.current();
+			else actionFiredRef.current = false;
+		} finally {
+			setPending(false);
+		}
+	}, [action, closeAfterAction]);
+	if (!isOpen) return null;
+	return createPortal(/* @__PURE__ */ jsxs("div", {
+		className: "fixed z-250 inset-0 flex w-screen items-center justify-center p-4",
+		role: "dialog",
+		"aria-modal": "true",
+		...title ? { "aria-labelledby": titleId } : {},
+		onKeyDown: trapFocus,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cx("fixed inset-0", dimScreen && "bg-gray-500/75"),
+			onClick: inFlight || ignoreOutsideClickClose ? void 0 : close
+		}), /* @__PURE__ */ jsxs("div", {
+			ref: panelRef,
+			tabIndex: -1,
+			className: cx(className, "relative inline-block align-bottom rounded-lg text-left shadow-xl z-50 sm:my-8 sm:align-middle max-h-full overflow-y-auto", "bg-(--theme-panel-bg,#ffffff) text-(--theme-panel,#000000)", padding && "px-4 pt-5 pb-4 sm:p-6", fitWidth ? "sm:w-min-[32rem]" : "sm:max-w-lg sm:w-full"),
+			children: [/* @__PURE__ */ jsxs("div", { children: [title && /* @__PURE__ */ jsx("h3", {
+				id: titleId,
+				className: "text-center text-xl leading-6 font-semibold",
+				children: title
+			}), /* @__PURE__ */ jsxs("div", {
+				className: cx(title.length !== 0 && "mt-2"),
+				children: [text && /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-center",
+					children: text
+				}), children]
+			})] }), showButtons && /* @__PURE__ */ jsxs("div", {
+				className: "mt-5 sm:mt-6 grid grid-cols-2 gap-3 grid-flow-row-dense",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: cx("self-center cursor-pointer px-3 py-1.5 rounded-md text-xs font-medium whitespace-nowrap flex items-center justify-center", "border border-(--theme-border,#d1d5db) hover:bg-(--theme-hover,#f3f4f6)", inFlight && "cursor-wait"),
+					onClick: () => {
+						cancelAction();
+						close();
+					},
+					disabled: inFlight,
+					children: cancelLabel
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: cx("self-center cursor-pointer px-3 py-1.5 rounded-md text-xs font-medium whitespace-nowrap flex items-center justify-center", "disabled:opacity-50 disabled:cursor-not-allowed", actionClasses[type], loading && "cursor-wait"),
+					onClick: runAction,
+					disabled: disableAction || inFlight,
+					children: actionLabel
+				})]
+			})]
+		})]
+	}), document.body);
+}
+//#endregion
+export { Modal as t };