@parallelworks/ui 0.3.1 → 0.5.0

package/dist/chunks/Loader-BXoXTZGc.js

@@ -0,0 +1,47 @@
+import { LoaderIcon } from "../icons.js";
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Loader.tsx
+var RIPPLE_STAGGER_S = .22;
+var LOGO_RINGS = [
+	"M24.89,55V32.14a7.25,7.25,0,1,1,7.25,7.25h-6",
+	"M17.27,58.12v-26A14.88,14.88,0,1,1,32.14,47H24.89",
+	"M9.25,52.35V32.14A22.9,22.9,0,1,1,32.14,55H24.89",
+	"M62.68,32.14A30.54,30.54,0,1,1,1.6,32.14,30.54,30.54,0,1,1,62.68,32.14"
+];
+function Loader({ size = 48, text, textSize = 12, full = true, color = "", loaderStyle = {}, variant = "spinner" }) {
+	const loaderColor = color || "text-(--theme-element,#3b82f6)";
+	const dimension = typeof size === "number" ? `${size}px` : size;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		"aria-label": text || "Loading",
+		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: variant === "logo" ? /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 64.29 64.29",
+				width: dimension,
+				height: dimension,
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 3.2,
+				"aria-hidden": "true",
+				children: LOGO_RINGS.map((d, i) => /* @__PURE__ */ jsx("path", {
+					d,
+					className: "logo-loader-ring",
+					style: { animationDelay: `${(i * RIPPLE_STAGGER_S).toFixed(2)}s` }
+				}, d))
+			}) : /* @__PURE__ */ jsx(LoaderIcon, {
+				className: "animate-spin",
+				style: { fontSize: dimension }
+			})
+		}), text && /* @__PURE__ */ jsx("div", {
+			className: "text-center italic",
+			style: { fontSize: `${textSize}px` },
+			children: text
+		})]
+	});
+}
+//#endregion
+export { Loader as t };

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

@@ -1,5 +1,6 @@
-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 { l as useWorkflowJsonResolver } from "./Provider-jQCAN3NN.js";
+import { t as useCssIsDark } from "./useCssIsDark-DHr05dG2.js";
+import { n as defineEditorThemes, r as getThemeName, t as setupMonacoWorkers } from "./editor-CEXg6C8X.js";
 import cx from "classnames";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
@@ -39,6 +40,7 @@ var workflowCompletionProvidersRegistered = false;
 var noop = () => {};
 function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop, width = "100%", height = "100%", path = "file:///default", marketplaceItems = [], workflows = [], ...options }) {
 	const isDark = useCssIsDark();
+	const readOnly = disabled || options.readOnly;
 	const resolveWorkflowJson = useWorkflowJsonResolver();
 	const monacoRef = useRef(null);
 	const isSyncingValueRef = useRef(false);
@@ -49,8 +51,12 @@ function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop,
 		if (!monacoRef.current) return;
 		defineEditorThemes(monaco.editor);
 		monaco.editor.setTheme(getThemeName(isDark, disabled));
-		monacoRef.current.updateOptions({ readOnly: disabled });
-	}, [disabled, isDark]);
+		monacoRef.current.updateOptions({ readOnly });
+	}, [
+		disabled,
+		isDark,
+		readOnly
+	]);
 	useEffect(() => {
 		if (!monacoRef.current) return;
 		const model = monacoRef.current.getModel();
@@ -102,7 +108,7 @@ function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop,
 					automaticLayout: true,
 					model,
 					...options,
-					readOnly: disabled || options.readOnly,
+					readOnly,
 					fixedOverflowWidgets: true,
 					suggest: {
 						preview: true,

package/dist/chunks/{Provider-DvVvScTQ.js → Provider-jQCAN3NN.js}

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useMemo } from "react";
 //#region src/components/Provider.tsx
 var DefaultLink = ({ to, onClick, className, children }) => /* @__PURE__ */ jsx("a", {
@@ -28,6 +28,20 @@ var DEFAULTS = {
 	},
 	strings: {
 		loading: "Loading…",
+		modal: {
+			cancel: "Cancel",
+			close: "Close",
+			create: "Create",
+			creating: "Creating…",
+			addDescription: "Add description…",
+			advanced: "Advanced",
+			favorite: "Favorite",
+			favorited: "Favorited",
+			favoriteHintOn: "Your item will be favorited when it's created",
+			favoriteHintOff: "Favorite your item when it's created",
+			filter: "Filter",
+			noOptions: "No options available"
+		},
 		common: {
 			copy: "Copy",
 			copied: "Copied!",
@@ -291,7 +305,60 @@ var DEFAULTS = {
 			labelUid: "UID",
 			labelId: "ID",
 			labelUrl: "URL",
-			couldNotLoad: (noun) => `Couldn't load ${noun}`
+			couldNotLoad: (noun) => `Couldn't load ${noun}`,
+			displayOptions: "Display options",
+			grouping: "Grouping",
+			ordering: "Ordering",
+			orderDefault: "Default",
+			orderFavorites: "Favorites",
+			ascending: "Ascending",
+			descending: "Descending",
+			columnHeaders: "Column headers",
+			showColumnHeaders: "Show column headers",
+			showActions: "Show actions",
+			showRowActions: "Show row actions",
+			alwaysShowActions: "Always show actions",
+			alwaysShowRowActions: "Always show row actions",
+			displayProperties: "Display properties",
+			pinnedActions: "Pinned actions",
+			pinnedActionsHelp: "Pinned actions show as quick buttons on the right of each row (on hover), alongside the ⋯ menu. Each only appears on rows where that action is available, so a row's buttons vary by its type and status.",
+			reset: "Reset",
+			none: "None",
+			filter: "Filter",
+			clear: "Clear",
+			pager: (start, end, total) => `${start}–${end} of ${total}`,
+			paginationPrevious: "Previous",
+			paginationNext: "Next",
+			paginationShowing: (name, start, end) => /* @__PURE__ */ jsxs(Fragment, { children: [
+				"Showing ",
+				name,
+				" ",
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium",
+					children: start
+				}),
+				" to",
+				" ",
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium",
+					children: end
+				})
+			] }),
+			paginationShowingTimeRange: (name, startTime, endTime) => /* @__PURE__ */ jsxs(Fragment, { children: [
+				"Showing ",
+				name,
+				" from ",
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium",
+					children: startTime
+				}),
+				" ",
+				"to ",
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium",
+					children: endTime
+				})
+			] })
 		}
 	},
 	navigation: {
@@ -333,6 +400,10 @@ function UIProvider({ notify, strings, navigation, data, slots, children }) {
 		},
 		strings: {
 			loading: strings?.loading ?? DEFAULTS.strings.loading,
+			modal: {
+				...DEFAULTS.strings.modal,
+				...strings?.modal
+			},
 			common: {
 				...DEFAULTS.strings.common,
 				...strings?.common

package/dist/chunks/{SwitchToggle-2uRw8ZeJ.js → SwitchToggle-D0ud8cd5.js}

@@ -1,5 +1,5 @@
 import { AngleDownIcon, AngleRightIcon, CaretDownIcon } from "../icons.js";
-import { c as useStrings } from "./Provider-DvVvScTQ.js";
+import { c as useStrings } from "./Provider-jQCAN3NN.js";
 import { n as TOOLTIP_ID } from "./Tooltip-WgbiC_nd.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -46,6 +46,34 @@ function filterOption(option, query) {
 	const secondary = option.secondaryValue !== void 0 ? String(option.secondaryValue).toLowerCase().replace(/(-)/gm, "") : "";
 	return label.includes(q) || secondary.includes(q);
 }
+function flattenFilteredOptions({ options, query, selectedValue, allowCustomValue, customValueLabel }) {
+	const flatOptions = options.flatMap((option) => {
+		if (isCategory(option)) {
+			const filteredOptions = option.options.filter((opt) => filterOption(opt, query));
+			if (filteredOptions.length === 0) return [];
+			return [{
+				label: option.category || "",
+				value: option.category || "",
+				disabled: true,
+				category: true
+			}, ...filteredOptions];
+		}
+		if (filterOption(option, query)) return option;
+		return [];
+	});
+	if (allowCustomValue) {
+		const customValue = query || selectedValue || "";
+		flatOptions.unshift({
+			label: `${customValueLabel} "${customValue}"`,
+			value: customValue
+		});
+	} else if (flatOptions.length === 0) return [{
+		label: "No options found",
+		value: "",
+		disabled: true
+	}];
+	return flatOptions;
+}
 function DropdownCaret() {
 	return /* @__PURE__ */ jsx(CaretDownIcon, { className: "text-neutral-400 absolute top-1/2 -translate-y-1/2 right-0 mr-3 inset-y-0 flex items-center rounded-r-md focus:outline-hidden" });
 }
@@ -213,34 +241,13 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 		}
 		onChange(val);
 	};
-	const flattenedOptions = useMemo(() => {
-		const flatOptions = options.flatMap((option) => {
-			if (isCategory(option)) {
-				const filteredOptions = option.options.filter((opt) => filterOption(opt, query));
-				if (filteredOptions.length === 0) return [];
-				return [{
-					label: option.category || "",
-					value: option.category || "",
-					disabled: true,
-					category: true
-				}, ...filteredOptions];
-			}
-			if (filterOption(option, query)) return option;
-			return [];
-		});
-		if (allowCustomValue) {
-			const customValue = query || value?.value || "";
-			flatOptions.unshift({
-				label: `${customValueLabel} "${customValue}"`,
-				value: customValue
-			});
-		} else if (flatOptions.length === 0) return [{
-			label: "No options found",
-			value: "",
-			disabled: true
-		}];
-		return flatOptions;
-	}, [
+	const flattenedOptions = useMemo(() => flattenFilteredOptions({
+		options,
+		query,
+		selectedValue: value?.value,
+		allowCustomValue,
+		customValueLabel
+	}), [
 		options,
 		query,
 		value,

package/dist/chunks/{Table-C5z6qWjM.js → Table-ByziK93x.js}

@@ -1,4 +1,4 @@
-import { t as Loader } from "./Loader-DQiZ75fa.js";
+import { t as Loader } from "./Loader-BXoXTZGc.js";
 import cx from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";

package/dist/chunks/{editor-D55tumuZ.js → editor-CEXg6C8X.js}

@@ -1,15 +1,15 @@
 import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "../icons.js";
-import { c as useStrings, i as useNotify } from "./Provider-DvVvScTQ.js";
-import { t as Loader } from "./Loader-DQiZ75fa.js";
+import { c as useStrings, i as useNotify } from "./Provider-jQCAN3NN.js";
+import { t as Loader } from "./Loader-BXoXTZGc.js";
 import { t as SwitchToggleSmall } from "./SwitchToggleSmall-FcsaYSTs.js";
 import { c as FieldWrapper, n as flattenGroups, r as impureSetValueFromPath } from "./lib-DTgL8klR.js";
 import cx from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Suspense, lazy, useEffect, useMemo, useRef, useState } from "react";
+import { Suspense, lazy, useMemo, useRef, useState } from "react";
 import { convertToDynamicForm, parseStringsOfObj, parseStringsOfObjReady } from "@parallelworks/workflow-parser";
 import { useField, useFormikContext } from "formik";
 //#region src/editor/Editor.tsx
-var MonacoEditor = lazy(() => import("./Monaco-CC4ak1JG.js"));
+var MonacoEditor = lazy(() => import("./Monaco-CvFXoW3r.js"));
 function Editor({ ...props }) {
 	return /* @__PURE__ */ jsx(Suspense, {
 		fallback: /* @__PURE__ */ jsx(Loader, { text: "Loading editor..." }),
@@ -333,40 +333,4 @@ function setupMonacoWorkers() {
 	window.MonacoEnvironment = monacoEnvironment;
 }
 //#endregion
-//#region src/editor/useCssIsDark.ts
-function readIsDark() {
-	const scheme = getComputedStyle(document.documentElement).colorScheme;
-	const dark = scheme.includes("dark");
-	if (dark !== scheme.includes("light")) return dark;
-	if (typeof window.matchMedia !== "function") return false;
-	return window.matchMedia("(prefers-color-scheme: dark)").matches;
-}
-/**
-* Follows the host's CSS color-scheme, the same signal the log viewer's
-* light-dark() palette uses — no provider API involved. For the rare concrete
-* pick (editor themes, image variants) the tokens cannot express.
-*/
-function useCssIsDark() {
-	const [isDark, setIsDark] = useState(readIsDark);
-	useEffect(() => {
-		const update = () => setIsDark(readIsDark());
-		const media = typeof window.matchMedia === "function" ? window.matchMedia("(prefers-color-scheme: dark)") : void 0;
-		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;
-}
-//#endregion
-export { FormCodePanel as a, getThemeName as i, setupMonacoWorkers as n, EditorField as o, defineEditorThemes as r, Editor as s, useCssIsDark as t };
+export { EditorField as a, FormCodePanel as i, defineEditorThemes as n, Editor as o, getThemeName as r, setupMonacoWorkers as t };