@parallelworks/ui 0.2.0 → 0.3.0

package/dist/chunks/StatusBadge-DXp4zkSd.js

@@ -0,0 +1,46 @@
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/StatusBadge.tsx
+var variantStyles = {
+	default: "bg-(--theme-muted-panel-bg) text-(--theme-app) border-(--theme-border)",
+	success: "bg-emerald-500/10 text-emerald-500 border-emerald-500/20",
+	warning: "bg-amber-500/10 text-amber-500 border-amber-500/20",
+	error: "bg-red-500/10 text-red-500 border-red-500/20",
+	info: "bg-blue-500/10 text-blue-500 border-blue-500/20",
+	muted: "bg-(--theme-muted-panel-bg)/50 text-(--theme-muted-text-color) border-(--theme-border)"
+};
+var pulseColors = {
+	default: "bg-(--theme-app)",
+	success: "bg-emerald-500",
+	warning: "bg-amber-500",
+	error: "bg-red-500",
+	info: "bg-blue-500",
+	muted: "bg-(--theme-muted-text-color)"
+};
+function StatusBadge({ children, variant = "default", pulse = false, size = "sm", className }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cx("inline-flex items-center gap-1.5 rounded-full border font-medium", size === "sm" && "px-2 py-0.5 text-[10px]", size === "md" && "px-2.5 py-1 text-xs", variantStyles[variant], className),
+		children: [pulse && /* @__PURE__ */ jsxs("span", {
+			className: "relative flex h-2 w-2",
+			children: [/* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", pulseColors[variant]) }), /* @__PURE__ */ jsx("span", { className: cx("relative inline-flex h-2 w-2 rounded-full", pulseColors[variant]) })]
+		}), children]
+	});
+}
+function StatusDot({ variant = "default", pulse = false, size = 8, className }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cx("relative inline-flex", className),
+		style: {
+			width: size,
+			height: size
+		},
+		children: [pulse && /* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", pulseColors[variant]) }), /* @__PURE__ */ jsx("span", {
+			className: cx("relative inline-flex rounded-full", pulseColors[variant]),
+			style: {
+				width: size,
+				height: size
+			}
+		})]
+	});
+}
+//#endregion
+export { StatusDot as n, StatusBadge as t };

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

@@ -1,7 +1,6 @@
 import { AngleDownIcon, AngleRightIcon, CaretDownIcon } from "../icons.js";
-import { o as useStrings } from "./Provider-C2VtPnh5.js";
+import { c as useStrings } from "./Provider-DvVvScTQ.js";
 import { n as TOOLTIP_ID } from "./Tooltip-WgbiC_nd.js";
-import { t as Loader } from "./Loader-DQiZ75fa.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -674,49 +673,6 @@ function SectionHeader({ children, className = "" }) {
 	});
 }
 //#endregion
-//#region src/components/StatusBadge.tsx
-var variantStyles = {
-	default: "bg-(--theme-muted-panel-bg) text-(--theme-app) border-(--theme-border)",
-	success: "bg-emerald-500/10 text-emerald-500 border-emerald-500/20",
-	warning: "bg-amber-500/10 text-amber-500 border-amber-500/20",
-	error: "bg-red-500/10 text-red-500 border-red-500/20",
-	info: "bg-blue-500/10 text-blue-500 border-blue-500/20",
-	muted: "bg-(--theme-muted-panel-bg)/50 text-(--theme-muted-text-color) border-(--theme-border)"
-};
-var pulseColors = {
-	default: "bg-(--theme-app)",
-	success: "bg-emerald-500",
-	warning: "bg-amber-500",
-	error: "bg-red-500",
-	info: "bg-blue-500",
-	muted: "bg-(--theme-muted-text-color)"
-};
-function StatusBadge({ children, variant = "default", pulse = false, size = "sm", className }) {
-	return /* @__PURE__ */ jsxs("span", {
-		className: cx("inline-flex items-center gap-1.5 rounded-full border font-medium", size === "sm" && "px-2 py-0.5 text-[10px]", size === "md" && "px-2.5 py-1 text-xs", variantStyles[variant], className),
-		children: [pulse && /* @__PURE__ */ jsxs("span", {
-			className: "relative flex h-2 w-2",
-			children: [/* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", pulseColors[variant]) }), /* @__PURE__ */ jsx("span", { className: cx("relative inline-flex h-2 w-2 rounded-full", pulseColors[variant]) })]
-		}), children]
-	});
-}
-function StatusDot({ variant = "default", pulse = false, size = 8, className }) {
-	return /* @__PURE__ */ jsxs("span", {
-		className: cx("relative inline-flex", className),
-		style: {
-			width: size,
-			height: size
-		},
-		children: [pulse && /* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", pulseColors[variant]) }), /* @__PURE__ */ jsx("span", {
-			className: cx("relative inline-flex rounded-full", pulseColors[variant]),
-			style: {
-				width: size,
-				height: size
-			}
-		})]
-	});
-}
-//#endregion
 //#region src/components/SwitchToggle.tsx
 function SwitchToggle({ onChange, value = void 0, yesLabel = "Yes", noLabel = "No", disabled = false, datatip = "", invalid = false }) {
 	const [enabled, setEnabled] = useState(value ?? false);
@@ -766,90 +722,4 @@ function SwitchToggle({ onChange, value = void 0, yesLabel = "Yes", noLabel = "N
 	});
 }
 //#endregion
-//#region src/components/Table.tsx
-function Item({ wrap = false, children, className, colspan = 1, ...tdProps }) {
-	const yPadding = className?.includes("py-") ? "" : "py-4";
-	const xPadding = className?.includes("px-") ? "" : "px-2";
-	return /* @__PURE__ */ jsx("td", {
-		...tdProps,
-		colSpan: colspan,
-		className: cx(yPadding, xPadding, wrap ? "" : "whitespace-nowrap", className),
-		children
-	});
-}
-function CompactItem({ wrap = false, children, className, colspan = 1, ...tdProps }) {
-	return /* @__PURE__ */ jsx("td", {
-		...tdProps,
-		colSpan: colspan,
-		className: cx("px-2 text-sm font-medium", !wrap && "whitespace-nowrap", className),
-		children
-	});
-}
-function Header({ children, className, style, colspan = 1, onClick, caps = true }) {
-	return /* @__PURE__ */ jsx("th", {
-		scope: "col",
-		colSpan: colspan,
-		style,
-		className: cx(className, className?.includes("py-") ? "" : "py-3", className?.includes("px-") ? "" : "px-3", className?.includes("text-") ? "" : "text-left", "text-xs font-medium", caps ? "uppercase tracking-wider" : "", onClick && "cursor-pointer hover:opacity-80 transition-opacity"),
-		onClick,
-		children
-	});
-}
-var isHeaderChild = (child) => {
-	if (!React.isValidElement(child)) return false;
-	return child.type === Header || typeof child.type === "function" && child.type.isTableHeader === true;
-};
-var getHeaders = (children) => children.filter(isHeaderChild);
-function Table({ borderless = false, panel = true, className = "", wrapperClassName = "", tbodyClassName = "divide-y", theadClassName = "theme-muted-panel", children, roundedTop = false, rounded = false, roundedBottom = false, isLoading = false, tableProps }) {
-	const ChildrenArr = React.Children.toArray(children);
-	const Headers = getHeaders(ChildrenArr);
-	return /* @__PURE__ */ jsx("div", {
-		className: cx("flex flex-col w-full", !wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-")) && "overflow-hidden", wrapperClassName),
-		children: isLoading ? /* @__PURE__ */ jsx("div", {
-			className: "flex justify-center items-center h-32",
-			children: /* @__PURE__ */ jsx(Loader, {})
-		}) : /* @__PURE__ */ jsx("div", {
-			className: cx("align-middle inline-block min-w-full overflow-x-auto", panel && "theme-panel", !borderless && "border theme-border", rounded && "rounded-2xl", roundedBottom && "rounded-b-2xl", roundedTop && "rounded-t-2xl"),
-			children: /* @__PURE__ */ jsxs("table", {
-				className: cx(className, "min-w-full divide-y theme-border"),
-				...tableProps,
-				children: [/* @__PURE__ */ jsx("thead", {
-					className: theadClassName,
-					children: /* @__PURE__ */ jsx("tr", { children: Headers })
-				}), /* @__PURE__ */ jsx("tbody", {
-					className: tbodyClassName,
-					children: ChildrenArr.filter((c) => !isHeaderChild(c))
-				})]
-			})
-		})
-	});
-}
-function CompactTable({ wrapperClassName = "", className = "", tbodyClassName = "divide-y", children, roundedTop = false, rounded = false, roundedBottom = false }) {
-	const ChildrenArr = React.Children.toArray(children);
-	const Headers = getHeaders(ChildrenArr);
-	return /* @__PURE__ */ jsx("div", {
-		className: cx("flex flex-col w-full", !wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-")) && "overflow-hidden", wrapperClassName),
-		children: /* @__PURE__ */ jsx("div", {
-			className: cx("theme-panel inline-block min-w-full align-middle overflow-x-auto", rounded && "rounded-2xl", roundedBottom && "rounded-b-2xl pb-1", roundedTop && "rounded-t-2xl"),
-			children: /* @__PURE__ */ jsxs("table", {
-				className: cx("min-w-full divide-y theme-border", className),
-				children: [/* @__PURE__ */ jsx("thead", {
-					className: "theme-muted-panel",
-					children: /* @__PURE__ */ jsx("tr", {
-						className: "divide-x",
-						children: Headers
-					})
-				}), /* @__PURE__ */ jsx("tbody", {
-					className: tbodyClassName,
-					children: ChildrenArr.filter((c) => !isHeaderChild(c))
-				})]
-			})
-		})
-	});
-}
-Table.Header = Header;
-Table.Item = Item;
-CompactTable.Header = Header;
-CompactTable.Item = CompactItem;
-//#endregion
-export { isOption as _, StatusDot as a, MaybeCollapsible as c, CustomListbox as d, Dropdown as f, isCategory as g, flattenOptions as h, StatusBadge as i, UncontrolledCollapsiblePanel as l, filterOption as m, Table as n, SectionHeader as o, DropdownCaret as p, SwitchToggle as r, ControlledCollapsiblePanel as s, CompactTable as t, MultiSelectDropdown as u };
+export { UncontrolledCollapsiblePanel as a, Dropdown as c, flattenOptions as d, isCategory as f, MaybeCollapsible as i, DropdownCaret as l, SectionHeader as n, MultiSelectDropdown as o, isOption as p, ControlledCollapsiblePanel as r, CustomListbox as s, SwitchToggle as t, filterOption as u };

package/dist/chunks/Table-C5z6qWjM.js

@@ -0,0 +1,91 @@
+import { t as Loader } from "./Loader-DQiZ75fa.js";
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+//#region src/components/Table.tsx
+function Item({ wrap = false, children, className, colspan = 1, ...tdProps }) {
+	const yPadding = className?.includes("py-") ? "" : "py-4";
+	const xPadding = className?.includes("px-") ? "" : "px-2";
+	return /* @__PURE__ */ jsx("td", {
+		...tdProps,
+		colSpan: colspan,
+		className: cx(yPadding, xPadding, wrap ? "" : "whitespace-nowrap", className),
+		children
+	});
+}
+function CompactItem({ wrap = false, children, className, colspan = 1, ...tdProps }) {
+	return /* @__PURE__ */ jsx("td", {
+		...tdProps,
+		colSpan: colspan,
+		className: cx("px-2 text-sm font-medium", !wrap && "whitespace-nowrap", className),
+		children
+	});
+}
+function Header({ children, className, style, colspan = 1, onClick, caps = true }) {
+	return /* @__PURE__ */ jsx("th", {
+		scope: "col",
+		colSpan: colspan,
+		style,
+		className: cx(className, className?.includes("py-") ? "" : "py-3", className?.includes("px-") ? "" : "px-3", className?.includes("text-") ? "" : "text-left", "text-xs font-medium", caps ? "uppercase tracking-wider" : "", onClick && "cursor-pointer hover:opacity-80 transition-opacity"),
+		onClick,
+		children
+	});
+}
+var isHeaderChild = (child) => {
+	if (!React.isValidElement(child)) return false;
+	return child.type === Header || typeof child.type === "function" && child.type.isTableHeader === true;
+};
+var getHeaders = (children) => children.filter(isHeaderChild);
+function Table({ borderless = false, panel = true, className = "", wrapperClassName = "", tbodyClassName = "divide-y", theadClassName = "theme-muted-panel", children, roundedTop = false, rounded = false, roundedBottom = false, isLoading = false, tableProps }) {
+	const ChildrenArr = React.Children.toArray(children);
+	const Headers = getHeaders(ChildrenArr);
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("flex flex-col w-full", !wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-")) && "overflow-hidden", wrapperClassName),
+		children: isLoading ? /* @__PURE__ */ jsx("div", {
+			className: "flex justify-center items-center h-32",
+			children: /* @__PURE__ */ jsx(Loader, {})
+		}) : /* @__PURE__ */ jsx("div", {
+			className: cx("align-middle inline-block min-w-full overflow-x-auto", panel && "theme-panel", !borderless && "border theme-border", rounded && "rounded-2xl", roundedBottom && "rounded-b-2xl", roundedTop && "rounded-t-2xl"),
+			children: /* @__PURE__ */ jsxs("table", {
+				className: cx(className, "min-w-full divide-y theme-border"),
+				...tableProps,
+				children: [/* @__PURE__ */ jsx("thead", {
+					className: theadClassName,
+					children: /* @__PURE__ */ jsx("tr", { children: Headers })
+				}), /* @__PURE__ */ jsx("tbody", {
+					className: tbodyClassName,
+					children: ChildrenArr.filter((c) => !isHeaderChild(c))
+				})]
+			})
+		})
+	});
+}
+function CompactTable({ wrapperClassName = "", className = "", tbodyClassName = "divide-y", children, roundedTop = false, rounded = false, roundedBottom = false }) {
+	const ChildrenArr = React.Children.toArray(children);
+	const Headers = getHeaders(ChildrenArr);
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("flex flex-col w-full", !wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-")) && "overflow-hidden", wrapperClassName),
+		children: /* @__PURE__ */ jsx("div", {
+			className: cx("theme-panel inline-block min-w-full align-middle overflow-x-auto", rounded && "rounded-2xl", roundedBottom && "rounded-b-2xl pb-1", roundedTop && "rounded-t-2xl"),
+			children: /* @__PURE__ */ jsxs("table", {
+				className: cx("min-w-full divide-y theme-border", className),
+				children: [/* @__PURE__ */ jsx("thead", {
+					className: "theme-muted-panel",
+					children: /* @__PURE__ */ jsx("tr", {
+						className: "divide-x",
+						children: Headers
+					})
+				}), /* @__PURE__ */ jsx("tbody", {
+					className: tbodyClassName,
+					children: ChildrenArr.filter((c) => !isHeaderChild(c))
+				})]
+			})
+		})
+	});
+}
+Table.Header = Header;
+Table.Item = Item;
+CompactTable.Header = Header;
+CompactTable.Item = CompactItem;
+//#endregion
+export { Table as n, CompactTable as t };

package/dist/chunks/editor-D55tumuZ.js

@@ -0,0 +1,372 @@
+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 { 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 { convertToDynamicForm, parseStringsOfObj, parseStringsOfObjReady } from "@parallelworks/workflow-parser";
+import { useField, useFormikContext } from "formik";
+//#region src/editor/Editor.tsx
+var MonacoEditor = lazy(() => import("./Monaco-CC4ak1JG.js"));
+function Editor({ ...props }) {
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx(Loader, { text: "Loading editor..." }),
+		children: /* @__PURE__ */ jsx(MonacoEditor, { ...props })
+	});
+}
+//#endregion
+//#region src/editor/EditorField.tsx
+function hasResetKeys(obj) {
+	return obj.editorKeyPostfix !== void 0;
+}
+function EditorField(props) {
+	const { field, label, labelPosition, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty } = props;
+	const [fieldState] = useField(field.name);
+	const { setFieldValue, setFieldTouched, values } = useFormikContext();
+	const debounceRef = useRef(null);
+	const touchedRef = useRef(false);
+	const handleChange = (val) => {
+		touchedRef.current = true;
+		if (debounceRef.current) clearTimeout(debounceRef.current);
+		debounceRef.current = setTimeout(() => {
+			if (onChange) onChange(val);
+			setFieldTouched(field.name, true);
+			setFieldValue(field.name, val);
+			setFormDirty(true);
+		}, 500);
+	};
+	let editorKeyPostfix = "";
+	if (hasResetKeys(values)) editorKeyPostfix = values.editorKeyPostfix;
+	const postfixKey = useMemo(() => {
+		const randomKey = Math.random().toString(36).substring(7);
+		return editorKeyPostfix || randomKey;
+	}, [editorKeyPostfix]);
+	const value = fieldState.value;
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		optional: field.optional,
+		label,
+		tooltipComponent,
+		labelPosition,
+		spaceCompact,
+		children: /* @__PURE__ */ jsx(Editor, {
+			height: "200px",
+			path: field.name,
+			value: touchedRef.current ? void 0 : value,
+			className: cx("bg-(--theme-input-bg) w-11 border focus:border rounded text-[10px] leading-4 pl-[6px]", disabled && "opacity-75"),
+			readOnly: disabled,
+			onChange: handleChange,
+			language: field.options?.language || "shell"
+		}, field.name + postfixKey)
+	});
+}
+//#endregion
+//#region src/editor/FormCodePanel.tsx
+var shouldIgnoreField = (fieldSchema, inputs, arrayIndex) => {
+	if (!fieldSchema?.ignore || !fieldSchema?.hidden) return false;
+	if (!parseStringsOfObjReady) return false;
+	return parseStringsOfObj({
+		inputs,
+		obj: convertToDynamicForm(fieldSchema),
+		index: arrayIndex ?? -1
+	}).hidden === true;
+};
+var filterFields = (formJSON, data, prefix, rootData, arrayIndex) => {
+	const filteredFields = [];
+	return {
+		filteredFields,
+		filtered: Object.keys(data).reduce((acc, key) => {
+			if (data[key] !== null && Array.isArray(data[key])) {
+				acc[key] = [];
+				if (!formJSON[key]) return acc;
+				for (let i = 0; i < data[key].length; i++) {
+					let filteredFieldsNested = [];
+					let filteredNested = {};
+					if (typeof data[key][i] === "object") {
+						const result = filterFields(formJSON[key].options, data[key][i], key + `[${i}].`, rootData || data, i);
+						filteredNested = result.filtered;
+						filteredFieldsNested = result.filteredFields;
+					} else filteredNested = data[key][i];
+					filteredFields.push(...filteredFieldsNested);
+					acc[key][i] = filteredNested;
+				}
+				return acc;
+			}
+			if (data[key] !== null && formJSON && formJSON[key] && typeof data[key] === "object") {
+				const { filteredFields: filteredFieldsNested, filtered: filteredNested } = filterFields(formJSON[key], data[key], key + ".", rootData || data, arrayIndex);
+				filteredFields.push(...filteredFieldsNested);
+				acc[key] = filteredNested;
+				return acc;
+			}
+			if (formJSON?.[key]?.sensitive) {
+				const name = prefix ? prefix + key : key;
+				filteredFields.push({
+					key: name,
+					value: data[key]
+				});
+				return acc;
+			}
+			const contextData = rootData || data;
+			if (formJSON && shouldIgnoreField(formJSON[key], contextData, arrayIndex)) return acc;
+			acc[key] = data[key];
+			return acc;
+		}, {})
+	};
+};
+var populateFiltered = (filteredFields, data) => {
+	filteredFields.forEach((element) => {
+		impureSetValueFromPath(data, element.key, element.value);
+	});
+	return data;
+};
+function FormCodePanel({ formJSON, data, mutate, height = "600px", disabled = false }) {
+	const notify = useNotify();
+	const { common: t } = useStrings();
+	const [jsonHasErrors, setJsonHasErrors] = useState(false);
+	const [showHidden, setShowHidden] = useState(false);
+	const [copied, setCopied] = useState(false);
+	const copyResetRef = useRef(void 0);
+	const isValidJson = (errors) => {
+		setJsonHasErrors(errors.length > 0);
+	};
+	const { filteredFields, filtered } = filterFields(flattenGroups(formJSON), data || {});
+	const hasHiddenFields = filteredFields.length > 0;
+	const displayObj = showHidden && hasHiddenFields ? populateFiltered(filteredFields, structuredClone(filtered)) : filtered;
+	const showHiddenRef = useRef(showHidden);
+	showHiddenRef.current = showHidden;
+	const filteredFieldsRef = useRef(filteredFields);
+	filteredFieldsRef.current = filteredFields;
+	const json = JSON.stringify(displayObj, null, 2);
+	const handleCopy = async () => {
+		try {
+			await navigator.clipboard.writeText(json);
+			setCopied(true);
+			clearTimeout(copyResetRef.current);
+			copyResetRef.current = setTimeout(() => setCopied(false), 2e3);
+		} catch {
+			notify.error(t.copyFailed);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		style: { height },
+		className: "flex w-full flex-col gap-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx("flex min-h-0 flex-1 flex-col overflow-hidden rounded-md border", jsonHasErrors ? "border-red-500" : "border-(--theme-border)"),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "bg-(--theme-muted-panel-bg) text-(--theme-muted-panel-color) flex shrink-0 items-center gap-3 border-b border-(--theme-border) px-3 py-2",
+				children: [hasHiddenFields && /* @__PURE__ */ jsxs("label", {
+					title: t.showHiddenFieldsHint,
+					className: "flex cursor-pointer select-none items-center gap-2 text-sm text-(--theme-app)",
+					children: [/* @__PURE__ */ jsx(SwitchToggleSmall, {
+						value: showHidden,
+						"aria-label": t.showHiddenFields,
+						onClick: () => setShowHidden((prev) => !prev)
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-1.5",
+						children: [showHidden ? /* @__PURE__ */ jsx(EyeIcon, {}) : /* @__PURE__ */ jsx(EyeOffIcon, {}), t.showHiddenFields]
+					})]
+				}), /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: handleCopy,
+					"aria-label": copied ? t.copied : t.copy,
+					className: "ml-auto flex shrink-0 items-center gap-1.5 rounded-md border border-(--theme-border) px-2.5 py-1.5 text-sm text-(--theme-app) transition-colors duration-150 hover:bg-(--theme-hover) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--theme-link)",
+					children: [copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-green-500" }) : /* @__PURE__ */ jsx(CopyIcon, { className: "text-(--theme-muted-text-color)" }), copied ? t.copied : t.copy]
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "min-h-0 flex-1",
+				children: /* @__PURE__ */ jsx(Editor, {
+					height: "100%",
+					value: json,
+					onValidate: isValidJson,
+					className: "!rounded-none !border-0",
+					minimap: { enabled: false },
+					scrollBeyondLastLine: false,
+					overviewRulerLanes: 0,
+					overviewRulerBorder: false,
+					lineNumbersMinChars: 3,
+					lineDecorationsWidth: 8,
+					renderLineHighlight: "none",
+					padding: {
+						top: 12,
+						bottom: 12
+					},
+					fontSize: 13,
+					scrollbar: {
+						verticalScrollbarSize: 10,
+						horizontalScrollbarSize: 10
+					},
+					onChange: (e) => {
+						try {
+							const parsed = JSON.parse(e);
+							mutate(showHiddenRef.current ? parsed : populateFiltered(filteredFieldsRef.current, parsed));
+						} catch {
+							console.log("JSON.parse error in slurm editor");
+						}
+					},
+					language: "json",
+					disabled
+				})
+			})]
+		}), jsonHasErrors && /* @__PURE__ */ jsx("p", {
+			className: "shrink-0 text-sm text-red-500",
+			children: t.jsonHasErrors
+		})]
+	});
+}
+//#endregion
+//#region src/editor/themes.ts
+function expandShorthandHex(color) {
+	return /^#([0-9a-fA-F]{3,4})$/.test(color) ? "#" + color.slice(1).split("").map((c) => c + c).join("") : color;
+}
+function normalizeThemeColors(colors) {
+	return Object.fromEntries(Object.entries(colors).map(([key, value]) => [key, expandShorthandHex(value)]));
+}
+function themeVar(name, fallback) {
+	if (typeof window === "undefined") return fallback;
+	return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+}
+function createEditorThemes() {
+	const dark = {
+		foreground: themeVar("--theme-app", "#e6edf3"),
+		background: themeVar("--theme-panel-bg", "#161b22"),
+		border: themeVar("--theme-border", "#30363d"),
+		lineHighlight: themeVar("--theme-muted-panel-bg", "#21262d"),
+		lineNumber: themeVar("--theme-muted-text-color", "#8b949e"),
+		selection: themeVar("--theme-element", "#2f81f7"),
+		selectionFg: themeVar("--theme-element-text", "#ffffff"),
+		disabledBg: themeVar("--theme-input-disabled-bg", "#1c2128"),
+		disabledFg: themeVar("--theme-muted-text-color", "#8b949e")
+	};
+	const light = {
+		disabledBg: themeVar("--theme-input-disabled-bg", "#f3f4f6"),
+		disabledFg: themeVar("--theme-muted-text-color", "#6c757d"),
+		border: themeVar("--theme-border", "#d1d5db"),
+		selection: themeVar("--theme-element", "#2f81f7"),
+		selectionFg: themeVar("--theme-element-text", "#ffffff")
+	};
+	return {
+		"app-dark": {
+			base: "vs-dark",
+			inherit: true,
+			rules: [],
+			colors: {
+				"editor.foreground": dark.foreground,
+				"editor.background": dark.background,
+				"editor.border": dark.border,
+				"editorCursor.foreground": dark.foreground,
+				"editor.lineHighlightBackground": dark.lineHighlight,
+				"editorLineNumber.foreground": dark.lineNumber,
+				"editor.selectionBackground": dark.selection,
+				"editor.selectionForeground": dark.selectionFg
+			}
+		},
+		"app-dark-disabled": {
+			base: "vs-dark",
+			inherit: true,
+			rules: [],
+			colors: {
+				"editor.foreground": dark.disabledFg,
+				"editor.background": dark.disabledBg,
+				"editor.border": dark.border,
+				"editorCursor.foreground": "transparent",
+				"editor.lineHighlightBackground": dark.disabledBg,
+				"editorLineNumber.foreground": dark.disabledFg,
+				"editor.selectionBackground": dark.selection,
+				"editor.selectionForeground": dark.selectionFg
+			}
+		},
+		"app-light-disabled": {
+			base: "vs",
+			inherit: true,
+			rules: [],
+			colors: {
+				"editor.foreground": light.disabledFg,
+				"editor.background": light.disabledBg,
+				"editor.border": light.border,
+				"editorCursor.foreground": "transparent",
+				"editor.lineHighlightBackground": light.disabledBg,
+				"editorLineNumber.foreground": light.disabledFg,
+				"editor.selectionBackground": light.selection,
+				"editor.selectionForeground": light.selectionFg
+			}
+		}
+	};
+}
+function defineEditorThemes(monacoEditor) {
+	const themes = createEditorThemes();
+	for (const [name, themeData] of Object.entries(themes)) monacoEditor.defineTheme(name, {
+		...themeData,
+		colors: normalizeThemeColors(themeData.colors)
+	});
+}
+function getThemeName(isDark, disabled) {
+	if (isDark) return disabled ? "app-dark-disabled" : "app-dark";
+	return disabled ? "app-light-disabled" : "vs";
+}
+//#endregion
+//#region src/editor/workers.ts
+var monacoEnvironment = { getWorker(_moduleId, label) {
+	if (label === "json") return new Worker(new URL(
+		/* @vite-ignore */
+		"/assets/json.worker-8ytS02vz.js",
+		"" + import.meta.url
+	), { type: "module" });
+	if (label === "yaml") return new Worker(new URL(
+		/* @vite-ignore */
+		"/assets/yaml.worker-DJC-VUcv.js",
+		"" + import.meta.url
+	), { type: "module" });
+	return new Worker(new URL(
+		/* @vite-ignore */
+		"/assets/editor.worker-CuBRIwi-.js",
+		"" + import.meta.url
+	), { type: "module" });
+} };
+/**
+* Points window.MonacoEnvironment at the bundled workers. Idempotent, and a
+* host that already configured its own MonacoEnvironment wins — the editor
+* calls this on first load only when nothing is configured.
+*/
+function setupMonacoWorkers() {
+	if (window.MonacoEnvironment) return;
+	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 };