@parallelworks/ui 0.2.0 → 0.3.1

package/README.md

@@ -34,6 +34,11 @@ stylesheet instead:
 import '@parallelworks/ui/styles.css'
 ```
 
+The prebuilt stylesheet nests all of its rules in the `pw-ui` cascade layer,
+so loading it alongside other Parallel Works package stylesheets (for example
+`@parallelworks/ai-chat/styles.css`, which uses the `pw-ai-chat` layer) is
+order-independent.
+
 ## Icons
 
 ```tsx

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/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/{Indicator-fF8AVbjQ.js → Modal-sOUEwebV.js}

@@ -1,4 +1,3 @@
-import { CancelIcon, FailIcon, NotRunningIcon, RunningIcon, SkipIcon, SuccessIcon } from "../icons.js";
 import cx from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useId, useRef, useState } from "react";
@@ -119,40 +118,4 @@ function Modal({ isOpen, close, cancelAction = noop, children, title = "", text
 	}), document.body);
 }
 //#endregion
-//#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 { Modal as n, Indicator as t };
+export { Modal as t };

package/dist/chunks/{Monaco-CP_cL9gp.js → Monaco-CC4ak1JG.js}

@@ -1,8 +1,8 @@
-import { s as useWorkflowJsonResolver } from "./Provider-C2VtPnh5.js";
-import { n as defineEditorThemes, r as getThemeName, t as setupMonacoWorkers } from "./workers-Cjfjb8E7.js";
+import { l as useWorkflowJsonResolver } from "./Provider-DvVvScTQ.js";
+import { i as getThemeName, n as setupMonacoWorkers, r as defineEditorThemes, t as useCssIsDark } from "./editor-D55tumuZ.js";
 import cx from "classnames";
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { dumpYaml } from "@parallelworks/workflow-parser";
 import yaml from "js-yaml";
 import * as monaco from "monaco-editor";
@@ -10,34 +10,6 @@ import { configureMonacoYaml } from "monaco-yaml";
 //#region src/editor/Monaco.tsx
 setupMonacoWorkers();
 var activeWorkflowJsonResolver;
-function readIsDark() {
-	const scheme = getComputedStyle(document.documentElement).colorScheme;
-	const dark = scheme.includes("dark");
-	if (dark !== scheme.includes("light")) return dark;
-	return window.matchMedia("(prefers-color-scheme: dark)").matches;
-}
-function useCssIsDark() {
-	const [isDark, setIsDark] = useState(readIsDark);
-	useEffect(() => {
-		const update = () => setIsDark(readIsDark());
-		const media = window.matchMedia("(prefers-color-scheme: dark)");
-		media.addEventListener("change", update);
-		const observer = new MutationObserver(update);
-		observer.observe(document.documentElement, {
-			attributes: true,
-			attributeFilter: [
-				"style",
-				"class",
-				"data-theme"
-			]
-		});
-		return () => {
-			media.removeEventListener("change", update);
-			observer.disconnect();
-		};
-	}, []);
-	return isDark;
-}
 var monacoWithWorkerBridge = {
 	...monaco,
 	editor: {