@parallelworks/ui 0.1.0 → 0.2.0

package/dist/form/index.js

@@ -0,0 +1,2317 @@
+import { AngleRightIcon, EyeIcon, EyeOffIcon, SuccessCheckmark, TrashIcon } from "../icons.js";
+import { a as useSlots, o as useStrings } from "../chunks/Provider-C2VtPnh5.js";
+import { n as TOOLTIP_ID, r as TooltipInfo } from "../chunks/Tooltip-WgbiC_nd.js";
+import { a as StatusDot, d as CustomListbox, f as Dropdown, g as isCategory, l as UncontrolledCollapsiblePanel, n as Table, o as SectionHeader, r as SwitchToggle, s as ControlledCollapsiblePanel, u as MultiSelectDropdown } from "../chunks/Table-DWuRINhu.js";
+import { t as Loader } from "../chunks/Loader-DQiZ75fa.js";
+import { a as resolvedFlag, c as FieldWrapper, i as initializeValues, n as flattenGroups, o as applySecondaryField, r as impureSetValueFromPath, s as findSecondaryOption, t as enforceOneMustBeTrue } from "../chunks/lib-DTgL8klR.js";
+import cx from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { Suspense, createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import deepEqual from "fast-deep-equal";
+import { callWhenParserInitialized, convertToDynamicForm, extractInputDeps, initializeParseStringsOfObj, parseStringsOfObj, parseStringsOfObjReady } from "@parallelworks/workflow-parser";
+import { Duration } from "luxon";
+import { Field, Form, Formik, getIn, useField, useFormikContext } from "formik";
+import { NumericFormat } from "react-number-format";
+//#region src/form/utils/getValueUsingPath.ts
+function getValueUsingPath(obj, path) {
+	if (typeof path !== "string" || !path) return;
+	const keys = path.split(".");
+	let current = obj;
+	for (const key of keys) {
+		if (!current || typeof current !== "object") return;
+		if (key.includes("[")) {
+			const [arrayKey, indexStr] = key.split("[");
+			const index = parseInt(indexStr.slice(0, -1), 10);
+			if (!Array.isArray(current[arrayKey]) || isNaN(index)) return;
+			current = current[arrayKey][index];
+		} else {
+			if (!(key in current)) return;
+			current = current[key];
+		}
+	}
+	return current;
+}
+//#endregion
+//#region src/form/utils/checkShowIfObject.ts
+function checkShowIfObject(showIfObject, formValues, index) {
+	const valueList = [];
+	for (let [key, value] of Object.entries(showIfObject)) {
+		if (index !== void 0) key = key.replace("[index]", `[${index}]`);
+		const dependsOnValue = getValueUsingPath(formValues, key);
+		if (typeof value === "boolean" || typeof value === "string" || typeof value === "number") valueList.push(dependsOnValue?.toString() === value.toString());
+		else if (Array.isArray(value)) valueList.push(value.includes(dependsOnValue));
+	}
+	return valueList;
+}
+//#endregion
+//#region src/form/utils/getParentValue.ts
+function getParentValue(index, targetField, values, dependentPath, field) {
+	let parentValue;
+	if (typeof targetField === "object" && !Array.isArray(targetField)) parentValue = !checkShowIfObject(targetField, values, index).includes(false);
+	else if (field.depends_on) {
+		dependentPath = field.depends_on;
+		if (index !== void 0) dependentPath = field.depends_on.replace("[index]", `[${index}]`);
+		const dependsOnValue = getValueUsingPath(values, dependentPath);
+		parentValue = targetField.includes(dependsOnValue) || targetField.includes(dependsOnValue?.toString());
+	} else {
+		dependentPath = targetField;
+		if (index !== void 0) dependentPath = targetField.replace("[index]", `[${index}]`);
+		parentValue = getValueUsingPath(values, dependentPath);
+	}
+	return parentValue;
+}
+//#endregion
+//#region src/form/useParsedOpts.ts
+var EMPTY_VARS = {};
+var EMPTY_KEYS = [];
+/**
+* useMemo won't work here — Formik values changes on every keystroke, so this hook extracts which inputs.* keys the schema references and re-parses only when those change. Defaults `userVars`/`secretKeys` to empty — callers in React scope should pass them from `useUserVars()` so the parser leaves `${{ var.SECRET }}` literal during template eval (otherwise the recursive substitution turns `"https://${{ var.PAT }}@host/"` into `"https://@host/"`).
+*/
+function useParsedOpts(rawOptions, values, organizationVariables, userVars = EMPTY_VARS, secretKeys = EMPTY_KEYS) {
+	const c = useRef({
+		rawOptions: null,
+		orgVars: void 0,
+		userVars: null,
+		secretKeys: null,
+		converted: null,
+		inputDeps: /* @__PURE__ */ new Set(),
+		hasExpressions: false,
+		relevantSnapshot: {},
+		result: null
+	}).current;
+	if (rawOptions !== c.rawOptions) {
+		c.rawOptions = rawOptions;
+		c.converted = convertToDynamicForm(rawOptions);
+		const { inputDeps, hasExpressions } = extractInputDeps(c.converted);
+		c.inputDeps = inputDeps;
+		c.hasExpressions = hasExpressions;
+		c.result = null;
+	}
+	if (organizationVariables !== c.orgVars) {
+		c.orgVars = organizationVariables;
+		c.result = null;
+	}
+	if (userVars !== c.userVars || secretKeys !== c.secretKeys) {
+		c.userVars = userVars;
+		c.secretKeys = secretKeys;
+		c.result = null;
+	}
+	if (c.result !== null) {
+		if (c.inputDeps.size === 0) return c.result;
+		let inputsChanged = false;
+		for (const key of c.inputDeps) if (!deepEqual(values[key], c.relevantSnapshot[key])) {
+			inputsChanged = true;
+			break;
+		}
+		if (!inputsChanged) return c.result;
+	}
+	c.result = parseStringsOfObj({
+		inputs: values,
+		obj: c.converted,
+		orgVars: organizationVariables,
+		userVars,
+		secretKeys
+	});
+	c.relevantSnapshot = {};
+	for (const key of c.inputDeps) c.relevantSnapshot[key] = values[key];
+	return c.result;
+}
+//#endregion
+//#region src/form/usePrevious.ts
+function usePrevious(value) {
+	const ref = useRef(void 0);
+	useEffect(() => {
+		ref.current = value;
+	});
+	return ref.current;
+}
+//#endregion
+//#region src/form/Wizard/WizardNavigation.tsx
+function WizardNavigation({ currentStep, stepOrder, canGoToNext, canGoBack, isCurrentStepValid, nextLabel, prevLabel, submitLabel = "Submit", onNext, onPrevious, onSubmit }) {
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState(null);
+	const isLastStep = stepOrder.indexOf(currentStep) === stepOrder.length - 1;
+	const handleNext = async () => {
+		setIsLoading(true);
+		setError(null);
+		try {
+			if (!await onNext()) setError("Please fix errors before proceeding");
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "An error occurred");
+		} finally {
+			setIsLoading(false);
+		}
+	};
+	const handleSubmit = async () => {
+		setIsLoading(true);
+		setError(null);
+		try {
+			await onSubmit();
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "An error occurred");
+		} finally {
+			setIsLoading(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", { children: [error && /* @__PURE__ */ jsx("div", {
+		className: "mb-4 p-3 bg-red-50 border border-red-200 rounded text-sm text-red-700",
+		children: error
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "flex gap-3 justify-between pt-4",
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: onPrevious,
+			disabled: !canGoBack || isLoading,
+			className: "px-6 py-3 rounded-lg font-medium transition-all duration-200 border flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed",
+			style: {
+				color: "var(--theme-app)",
+				borderColor: "var(--theme-border)",
+				backgroundColor: "var(--theme-app-bg)"
+			},
+			onMouseEnter: (e) => {
+				if (!(!canGoBack || isLoading)) e.currentTarget.style.backgroundColor = "var(--theme-hover)";
+			},
+			onMouseLeave: (e) => {
+				e.currentTarget.style.backgroundColor = "var(--theme-app-bg)";
+			},
+			"aria-label": "Go to previous step",
+			children: prevLabel || "← Previous"
+		}), isLastStep ? /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: handleSubmit,
+			disabled: !isCurrentStepValid || isLoading,
+			className: "px-8 py-3 rounded-lg font-medium transition-all duration-200 text-white flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed shadow-md hover:shadow-lg",
+			style: { backgroundColor: "var(--theme-element)" },
+			onMouseEnter: (e) => {
+				if (!(!isCurrentStepValid || isLoading)) e.currentTarget.style.filter = "brightness(0.9)";
+			},
+			onMouseLeave: (e) => {
+				e.currentTarget.style.filter = "brightness(1)";
+			},
+			"aria-label": submitLabel,
+			children: [isLoading && /* @__PURE__ */ jsx(Loader, {
+				size: 16,
+				full: false
+			}), submitLabel]
+		}) : /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: handleNext,
+			disabled: !canGoToNext || isLoading,
+			className: "px-8 py-3 rounded-lg font-medium transition-all duration-200 text-white flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed shadow-md hover:shadow-lg",
+			style: { backgroundColor: "var(--theme-element)" },
+			onMouseEnter: (e) => {
+				if (!(!canGoToNext || isLoading)) e.currentTarget.style.filter = "brightness(0.9)";
+			},
+			onMouseLeave: (e) => {
+				e.currentTarget.style.filter = "brightness(1)";
+			},
+			"aria-label": "Go to next step",
+			children: [isLoading && /* @__PURE__ */ jsx(Loader, {
+				size: 16,
+				full: false
+			}), nextLabel || "Next →"]
+		})]
+	})] });
+}
+//#endregion
+//#region src/form/Wizard/WizardStepContent.tsx
+function WizardStepContent({ currentStep, stepConfig, flatten = true, values, onValuesChange, setFormDirty, setFieldValue, setFieldTouched, ...fieldsProps }) {
+	if (!stepConfig?.options) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mb-4 w-full",
+		children: [
+			stepConfig.title && /* @__PURE__ */ jsx("h2", {
+				className: "text-2xl font-bold mb-2",
+				style: { color: "var(--theme-app)" },
+				children: stepConfig.title
+			}),
+			stepConfig.description && /* @__PURE__ */ jsx("p", {
+				className: "mb-4 leading-relaxed",
+				style: { color: "var(--theme-muted-text-color)" },
+				children: stepConfig.description
+			}),
+			/* @__PURE__ */ jsx(FieldsFromOptions, {
+				options: stepConfig.options,
+				values,
+				setFormDirty,
+				setFieldValue,
+				setFieldTouched,
+				...flatten === false ? { parentInfo: {
+					parentName: currentStep,
+					fieldNamePrefix: `${currentStep}.`
+				} } : {},
+				...fieldsProps
+			}, currentStep)
+		]
+	});
+}
+//#endregion
+//#region src/form/Wizard/WizardStepIndicator.tsx
+function WizardStepIndicator({ stepOrder, currentStep, steps, visitedSteps, invalidSteps, onStepClick, allowJump = false, hideStepNumbers = false }) {
+	const currentIndex = useMemo(() => stepOrder.indexOf(currentStep), [stepOrder, currentStep]);
+	const getStepStatus = (stepKey, index) => {
+		if (stepKey === currentStep) return "active";
+		if (index < currentIndex) return "completed";
+		return "upcoming";
+	};
+	const handleStepClick = (stepKey) => {
+		if (!allowJump || !visitedSteps.has(stepKey)) return;
+		onStepClick?.(stepKey);
+	};
+	const isClickable = (stepKey) => {
+		return allowJump && visitedSteps.has(stepKey) && stepKey !== currentStep;
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex items-start justify-between w-full mb-2 gap-4 py-2",
+		children: stepOrder.map((stepKey, index) => {
+			const stepConfig = steps[stepKey];
+			const status = getStepStatus(stepKey, index);
+			const isInvalid = invalidSteps.has(stepKey);
+			const isClickable_ = isClickable(stepKey);
+			const isDotActive = status === "active";
+			const isDotCompleted = status === "completed";
+			const isDotUpcoming = status === "upcoming";
+			return /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-center flex-1 relative",
+				children: [
+					/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: () => handleStepClick(stepKey),
+						disabled: !isClickable_,
+						className: cx("w-12 h-12 rounded-full border-3 flex items-center justify-center font-bold text-base transition-all duration-300 flex-shrink-0 relative", {
+							"cursor-pointer": isClickable_,
+							"cursor-not-allowed": !isClickable_
+						}, {
+							"text-white": isDotActive,
+							"bg-green-500 border-green-600 text-white shadow-md": isDotCompleted && !isInvalid,
+							"bg-(--theme-border) theme-border theme-muted-text shadow-sm": isDotUpcoming && !isInvalid,
+							"bg-(--theme-muted-panel-bg) theme-border theme-muted-text shadow-sm": !isDotActive && !isDotCompleted && !isDotUpcoming && !isInvalid,
+							"bg-red-50 border-red-500 text-red-600 shadow-sm": isInvalid && status !== "active"
+						}),
+						style: isDotActive ? {
+							backgroundColor: "var(--theme-element)",
+							borderColor: "var(--theme-element)",
+							color: "var(--theme-element-text)",
+							boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+							zIndex: 10
+						} : { zIndex: 10 },
+						"aria-label": `Step ${index + 1}: ${stepConfig?.title}`,
+						title: stepConfig?.title,
+						children: [!hideStepNumbers && /* @__PURE__ */ jsx("span", {
+							className: cx({ hidden: status === "completed" }),
+							children: index + 1
+						}), status === "completed" && /* @__PURE__ */ jsx("svg", {
+							className: "w-4 h-4",
+							fill: "none",
+							stroke: "currentColor",
+							viewBox: "0 0 24 24",
+							children: /* @__PURE__ */ jsx("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 3,
+								d: "M5 13l4 4L19 7"
+							})
+						})]
+					}),
+					index < stepOrder.length - 1 && /* @__PURE__ */ jsx("div", {
+						className: cx("absolute h-1 transition-all duration-300", {
+							"bg-green-500": index < currentIndex,
+							"bg-(--theme-border)": index >= currentIndex,
+							"opacity-25": index >= currentIndex
+						}),
+						style: {
+							top: "24px",
+							left: "calc(50% + 24px)",
+							right: "-50%",
+							boxShadow: index < currentIndex ? "0 1px 2px rgba(34, 197, 94, 0.2)" : "none"
+						},
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "mt-2 text-center",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: cx("text-sm text-center transition-colors duration-300 max-w-30", {
+								"font-bold text-green-600": isDotCompleted && !isInvalid,
+								"font-bold text-red-600": isInvalid && status !== "active",
+								"font-semibold theme-muted-text": !isDotActive && !isDotCompleted && !isInvalid,
+								"font-bold text-white": isDotActive
+							}),
+							style: isDotActive ? { color: "var(--theme-element)" } : {},
+							children: stepConfig?.title
+						}), stepConfig?.description && /* @__PURE__ */ jsx("div", {
+							className: "text-xs theme-muted-text mt-1 text-center max-w-30",
+							children: stepConfig.description
+						})]
+					})
+				]
+			}, stepKey);
+		})
+	});
+}
+//#endregion
+//#region src/form/Wizard/useWizardState.ts
+function useWizardState({ stepOrder, steps, validateStep, initialStep }) {
+	const firstStep = initialStep || stepOrder[0];
+	const [currentStep, setCurrentStep] = useState(firstStep);
+	const [visitedSteps, setVisitedSteps] = useState(new Set([firstStep]));
+	const [invalidSteps, setInvalidSteps] = useState(/* @__PURE__ */ new Set());
+	const currentStepIndex = stepOrder.indexOf(currentStep);
+	const isLastStep = currentStepIndex === stepOrder.length - 1;
+	const canGoBack = currentStepIndex > 0;
+	/**
+	* Mark step as visited
+	*/
+	const markStepVisited = useCallback((stepKey) => {
+		setVisitedSteps((prev) => new Set([...prev, stepKey]));
+	}, []);
+	/**
+	* Mark step as invalid
+	*/
+	const markStepInvalid = useCallback((stepKey, invalid) => {
+		setInvalidSteps((prev) => {
+			const next = new Set(prev);
+			if (invalid) next.add(stepKey);
+			else next.delete(stepKey);
+			return next;
+		});
+	}, []);
+	const goToNext = useCallback(async () => {
+		if (isLastStep) return false;
+		if (steps[currentStep]?.validateOnNext !== false) {
+			if (!await validateStep(currentStep)) {
+				markStepInvalid(currentStep, true);
+				return false;
+			}
+		}
+		markStepInvalid(currentStep, false);
+		const nextStepKey = stepOrder[currentStepIndex + 1];
+		setCurrentStep(nextStepKey);
+		markStepVisited(nextStepKey);
+		return true;
+	}, [
+		currentStep,
+		currentStepIndex,
+		isLastStep,
+		steps,
+		stepOrder,
+		validateStep,
+		markStepInvalid,
+		markStepVisited
+	]);
+	const goToPrevious = useCallback(() => {
+		if (!canGoBack) return;
+		const prevStepKey = stepOrder[currentStepIndex - 1];
+		setCurrentStep(prevStepKey);
+	}, [
+		canGoBack,
+		currentStepIndex,
+		stepOrder
+	]);
+	const jumpToStep = useCallback((stepKey) => {
+		if (!stepOrder.includes(stepKey)) return false;
+		if (!visitedSteps.has(stepKey) && stepKey !== currentStep) return false;
+		setCurrentStep(stepKey);
+		return true;
+	}, [
+		stepOrder,
+		visitedSteps,
+		currentStep
+	]);
+	/**
+	* Reset wizard to initial state
+	*/
+	const reset = useCallback(() => {
+		setCurrentStep(firstStep);
+		setVisitedSteps(new Set([firstStep]));
+		setInvalidSteps(/* @__PURE__ */ new Set());
+	}, [firstStep]);
+	/**
+	* Get current wizard state
+	*/
+	const getState = useCallback(() => {
+		return {
+			currentStep,
+			visitedSteps,
+			invalidSteps,
+			stepOrder,
+			totalSteps: stepOrder.length,
+			isLastStep,
+			canProceedToNext: !isLastStep,
+			canGoBack
+		};
+	}, [
+		currentStep,
+		visitedSteps,
+		invalidSteps,
+		stepOrder,
+		isLastStep,
+		canGoBack
+	]);
+	return {
+		currentStep,
+		visitedSteps,
+		invalidSteps,
+		isLastStep,
+		canGoBack,
+		currentStepIndex,
+		totalSteps: stepOrder.length,
+		goToNext,
+		goToPrevious,
+		jumpToStep,
+		reset,
+		markStepVisited,
+		markStepInvalid,
+		getState
+	};
+}
+//#endregion
+//#region src/form/Wizard/WizardContainer.tsx
+function WizardContainer({ wizardConfig, values, onChange, onSubmit, className = "", labelPosition = "left", missingFields = [], spaceCompact = false, workflowForm = false, setFieldValue, setFieldTouched }) {
+	const { validateForm, setTouched, touched } = useFormikContext();
+	const { config, steps, stepOrder } = wizardConfig;
+	const { currentStep, visitedSteps, invalidSteps, isLastStep, canGoBack, goToNext, goToPrevious, jumpToStep } = useWizardState({
+		stepOrder,
+		steps,
+		validateStep: useCallback(async (stepKey) => {
+			const stepConfig = steps[stepKey];
+			if (!stepConfig?.options) return true;
+			const stepFieldNames = Object.keys(stepConfig.options);
+			const shouldFlatten = config.flatten !== false;
+			const errors = await validateForm();
+			const hasStepErrors = shouldFlatten ? stepFieldNames.some((fieldName) => errors[fieldName]) : stepFieldNames.some((fieldName) => errors[stepKey]?.[fieldName]);
+			if (hasStepErrors) {
+				const touchedFields = stepFieldNames.reduce((acc, fieldName) => {
+					acc[fieldName] = true;
+					return acc;
+				}, {});
+				if (shouldFlatten) setTouched({
+					...touched,
+					...touchedFields
+				}, false);
+				else setTouched({
+					...touched,
+					[stepKey]: touchedFields
+				}, false);
+			}
+			return !hasStepErrors;
+		}, [
+			steps,
+			validateForm,
+			setTouched,
+			touched
+		])
+	});
+	const currentStepConfig = steps[currentStep];
+	const config_ = config.navigation || {};
+	const handleGoToNext = useCallback(async () => {
+		const success = await goToNext();
+		if (success) onChange?.(values);
+		return success;
+	}, [
+		goToNext,
+		values,
+		onChange
+	]);
+	const handleJumpToStep = useCallback((stepKey) => {
+		if (!config_.allowJump || !visitedSteps.has(stepKey)) return false;
+		return jumpToStep(stepKey);
+	}, [
+		jumpToStep,
+		config_.allowJump,
+		visitedSteps
+	]);
+	const handleSubmit = useCallback(async () => {
+		if (!isLastStep) return;
+		const errors = await validateForm();
+		if (Object.keys(errors).length > 0) {
+			const touchedFields = Object.keys(values).reduce((acc, fieldName) => {
+				acc[fieldName] = true;
+				return acc;
+			}, {});
+			setTouched({
+				...touched,
+				...touchedFields
+			}, false);
+			throw new Error("Please fix errors before submitting");
+		}
+		await onSubmit?.(values);
+	}, [
+		isLastStep,
+		validateForm,
+		values,
+		setTouched,
+		touched,
+		onSubmit
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [
+			config_.showSteps !== false && /* @__PURE__ */ jsx(WizardStepIndicator, {
+				stepOrder,
+				currentStep,
+				steps,
+				visitedSteps,
+				invalidSteps,
+				onStepClick: handleJumpToStep,
+				allowJump: config_.allowJump,
+				hideStepNumbers: config_.hideStepNumbers
+			}),
+			currentStepConfig && /* @__PURE__ */ jsx("div", {
+				className: "mb-4",
+				children: /* @__PURE__ */ jsx(WizardStepContent, {
+					currentStep,
+					stepConfig: currentStepConfig,
+					flatten: config.flatten,
+					values,
+					onValuesChange: onChange,
+					labelPosition,
+					missingFields,
+					spaceCompact,
+					setFormDirty: () => onChange?.(values),
+					workflowForm,
+					setFieldValue,
+					setFieldTouched
+				})
+			}),
+			/* @__PURE__ */ jsx(WizardNavigation, {
+				currentStep,
+				stepOrder,
+				canGoToNext: !isLastStep,
+				canGoBack,
+				isCurrentStepValid: !invalidSteps.has(currentStep),
+				nextLabel: currentStepConfig?.nextLabel,
+				prevLabel: currentStepConfig?.prevLabel,
+				submitLabel: config.submitLabel || "Execute",
+				onNext: handleGoToNext,
+				onPrevious: goToPrevious,
+				onSubmit: handleSubmit
+			})
+		]
+	});
+}
+//#endregion
+//#region src/form/Wizard/utils.ts
+function parseWizardConfig(options) {
+	const wizardConfig = options.$meta?.wizard;
+	if (!wizardConfig || wizardConfig.mode !== "wizard") return null;
+	const steps = {};
+	const stepOrder = [];
+	const otherFields = {};
+	Object.entries(options).forEach(([key, field]) => {
+		if (key === "$meta") return;
+		const fieldConfig = field;
+		if (fieldConfig?.type === "step") {
+			steps[key] = fieldConfig;
+			stepOrder.push(key);
+		} else otherFields[key] = field;
+	});
+	if (stepOrder.length === 0) {
+		console.warn("Wizard mode enabled but no steps found");
+		return null;
+	}
+	return {
+		config: wizardConfig,
+		steps,
+		stepOrder,
+		otherFields
+	};
+}
+//#endregion
+//#region src/form/SpecialTypes/FormikCustomDropdown.tsx
+function toComparableOptions(options) {
+	return options?.map((option) => {
+		if (typeof option === "string") return option;
+		if (isCategory(option)) return {
+			category: option.category,
+			options: option.options.map((o) => {
+				const base = {
+					label: o.label,
+					value: o.value,
+					disabled: o.disabled
+				};
+				return o.description !== void 0 ? {
+					...base,
+					description: o.description
+				} : base;
+			})
+		};
+		const base = {
+			label: option.label,
+			value: option.value,
+			disabled: option.disabled
+		};
+		return option.description !== void 0 ? {
+			...base,
+			description: option.description
+		} : base;
+	});
+}
+function arePropsEqual(prev, next) {
+	for (const key of Object.keys(next)) if (key === "options") {
+		if (!deepEqual(toComparableOptions(prev.options), toComparableOptions(next.options))) return false;
+	} else if (prev[key] !== next[key]) return false;
+	return true;
+}
+var FormikCustomDropdown_default = memo(function FormikCustomDropdown({ name, ariaLabel, options, setFormDirty, onChange, parentValue, className, secondaryField, disabled = false, loading = false, invalid = false, autoselect, value, allowCustomValue = false, customValueLabel, placeholder, currentValue, setFieldValue, setFieldTouched }) {
+	const prevParentRef = useRef(parentValue);
+	const handleChange = (val) => {
+		if (secondaryField && typeof options[0] !== "string") {
+			const option = findSecondaryOption(options, val);
+			if (option) applySecondaryField(secondaryField, option.secondaryValue, setFieldValue);
+		}
+		if (onChange) onChange(val);
+		setFieldValue(name, val);
+		setFieldTouched(name, true);
+		setFormDirty(true);
+	};
+	useEffect(() => {
+		prevParentRef.current = parentValue;
+	});
+	const prevOptions = useRef(null);
+	useEffect(() => {
+		if (deepEqual(prevOptions.current, toComparableOptions(options))) return;
+		if (prevOptions.current === null && currentValue !== void 0 && currentValue !== null) {
+			prevOptions.current = toComparableOptions(options);
+			return;
+		}
+		prevOptions.current = toComparableOptions(options);
+		if (autoselect === false || !options?.length) return;
+		if (autoselect === void 0) {
+			if (options.length && isCategory(options[0])) {
+				let optionCount = 0;
+				for (const category of options) {
+					if (isCategory(category)) optionCount += category.options.length;
+					if (optionCount > 1) return;
+				}
+			} else if (options.length !== 1) return;
+		}
+		if (!options?.find((option) => {
+			if (typeof option === "string") return option === currentValue;
+			else if (isCategory(option)) return option.options.some((subOption) => {
+				return subOption.value === currentValue;
+			});
+			return option.value === currentValue;
+		}) || autoselect) {
+			let val;
+			for (const option of options) if (typeof option === "string") {
+				val = option;
+				break;
+			} else if (isCategory(option)) {
+				const enabled = option.options.find((o) => !o.disabled);
+				if (enabled) {
+					val = enabled.value;
+					break;
+				}
+			} else if (!option.disabled) {
+				val = option.value;
+				break;
+			}
+			if (val !== void 0) handleChange(val);
+		}
+	}, [
+		parentValue,
+		options,
+		autoselect
+	]);
+	return /* @__PURE__ */ jsx(Dropdown, {
+		textBoxClassName: cx(className, invalid && "invalid"),
+		ariaLabel,
+		onChange: (val) => handleChange(val),
+		value: options?.length === 0 && !allowCustomValue ? value : currentValue,
+		options,
+		placeholder,
+		disabled,
+		loading,
+		allowCustomValue,
+		customValueLabel
+	});
+}, arePropsEqual);
+//#endregion
+//#region src/form/SpecialTypes/FormikCustomInput.tsx
+var DEBOUNCE_MS$2 = 500;
+function FormikCustomInput({ name, type, step, placeholder, onChange, disabled, min, max, sanitize, invalid = false, lowercase = false, minLength, maxLength, defaultValue = "", value }) {
+	const [field] = useField(name);
+	const { setFieldValue, setFieldTouched } = useFormikContext();
+	const [showPassword, setShowPassword] = useState(false);
+	const isPassword = type === "password";
+	const [localValue, setLocalValue] = useState(value ?? field.value);
+	const isFocused = useRef(false);
+	const debounceRef = useRef(null);
+	useEffect(() => {
+		if (!isFocused.current) setLocalValue(value ?? field.value);
+	}, [field.value, value]);
+	const sanitizeName = useCallback((val) => {
+		if (sanitize === void 0) return lowercase ? val.toLowerCase() : val;
+		try {
+			const regexp = new RegExp(sanitize);
+			if (lowercase) val = val.toLowerCase();
+			return val.replace(regexp, "");
+		} catch {
+			console.error("Invalid regex for sanitization:", sanitize);
+		}
+		return val;
+	}, [sanitize, lowercase]);
+	const flushToFormik = useCallback((val) => {
+		if (onChange) onChange(val);
+		setFieldTouched(name, true);
+		setFieldValue(name, val);
+	}, [
+		name,
+		onChange,
+		setFieldTouched,
+		setFieldValue
+	]);
+	const handleChange = (e) => {
+		let val = e.target.value;
+		if (sanitize) val = sanitizeName(val);
+		if (type === "number") {
+			const parsed = parseFloat(val);
+			val = isNaN(parsed) ? void 0 : parsed;
+		}
+		if (type === "password" && val === "") val = defaultValue;
+		setLocalValue(val);
+		clearTimeout(debounceRef.current ?? void 0);
+		debounceRef.current = setTimeout(() => flushToFormik(val), DEBOUNCE_MS$2);
+	};
+	const handleFocus = () => {
+		isFocused.current = true;
+	};
+	const handleBlur = () => {
+		isFocused.current = false;
+		clearTimeout(debounceRef.current ?? void 0);
+		const current = localValue;
+		if (current === void 0 || current === null) return;
+		let val = current.toString();
+		if (type === "number") {
+			const parsed = parseFloat(val);
+			if (Number.isNaN(parsed)) val = void 0;
+			else if (min !== void 0 && parsed < min) val = min;
+			else if (max !== void 0 && parsed > max) val = max;
+			else val = parsed;
+		}
+		setLocalValue(val);
+		flushToFormik(val);
+	};
+	const displayValue = isPassword && localValue === defaultValue ? "" : localValue ?? "";
+	const resolvedType = isPassword ? showPassword ? "text" : "password" : type === "string" ? "text" : type;
+	const input = /* @__PURE__ */ jsx("input", {
+		"data-1p-ignore": true,
+		className: cx("w-full", disabled && "disabled", invalid && "invalid", isPassword && "pr-8"),
+		name,
+		value: displayValue,
+		type: resolvedType,
+		disabled,
+		placeholder,
+		minLength,
+		maxLength,
+		onChange: handleChange,
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		min,
+		max,
+		step
+	});
+	if (!isPassword) return input;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative w-full",
+		children: [input, /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "absolute right-2 top-1/2 -translate-y-1/2 theme-muted-text",
+			onClick: () => setShowPassword((prev) => !prev),
+			disabled,
+			tabIndex: -1,
+			"aria-label": showPassword ? "Hide value" : "Show value",
+			children: showPassword ? /* @__PURE__ */ jsx(EyeOffIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(EyeIcon, { className: "h-4 w-4" })
+		})]
+	});
+}
+//#endregion
+//#region src/form/SpecialTypes/FormikNumericInput.tsx
+var DEBOUNCE_MS$1 = 500;
+function FormikNumericInput({ name, placeholder, onChange, disabled, min, max, invalid = false }) {
+	const [field] = useField(name);
+	const { setFieldValue, setFieldTouched } = useFormikContext();
+	const [localValue, setLocalValue] = useState(field.value);
+	const isFocused = useRef(false);
+	const debounceRef = useRef(null);
+	useEffect(() => {
+		if (!isFocused.current) setLocalValue(field.value);
+	}, [field.value]);
+	const flush = (val) => {
+		onChange?.(val);
+		setFieldTouched(name, true);
+		setFieldValue(name, val);
+	};
+	const handleBlur = () => {
+		isFocused.current = false;
+		clearTimeout(debounceRef.current ?? void 0);
+		let val = localValue;
+		if (val !== void 0) {
+			if (min !== void 0 && val < min) val = min;
+			if (max !== void 0 && val > max) val = max;
+		}
+		setLocalValue(val);
+		flush(val);
+	};
+	return /* @__PURE__ */ jsx(NumericFormat, {
+		"data-1p-ignore": true,
+		className: cx("w-full", disabled && "disabled", invalid && "invalid"),
+		name,
+		value: localValue,
+		thousandSeparator: ",",
+		decimalScale: 20,
+		allowNegative: true,
+		disabled,
+		placeholder,
+		onValueChange: (v) => {
+			setLocalValue(v.floatValue);
+			clearTimeout(debounceRef.current ?? void 0);
+			debounceRef.current = setTimeout(() => flush(v.floatValue), DEBOUNCE_MS$1);
+		},
+		onFocus: () => {
+			isFocused.current = true;
+		},
+		onBlur: handleBlur
+	});
+}
+//#endregion
+//#region src/form/utils/getPlaceholder.ts
+/** `placeholder=""` (empty string) intentionally overrides the default; undefined does not. */
+function getPlaceholder(placeholder, defaultValue) {
+	if (placeholder !== void 0) return placeholder;
+	if (defaultValue && (typeof defaultValue === "string" || typeof defaultValue === "number")) return defaultValue.toString();
+	return "";
+}
+//#endregion
+//#region src/form/Fields/StringField.tsx
+var StringField_default = memo(function StringField(props) {
+	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, currentValue } = props;
+	const value = field.prefillDefault ? currentValue : void 0;
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		optional: field.optional,
+		label,
+		tooltipComponent,
+		description: field.description,
+		labelPosition,
+		spaceCompact,
+		children: /* @__PURE__ */ jsx(FormikCustomInput, {
+			invalid: missing,
+			name: field.name,
+			type: field.type,
+			lowercase: field.lowercase,
+			placeholder: field.type === "password" && field.placeholder === void 0 ? "•".repeat((field.default ?? "").toString().length > 0 ? 16 : 0) : getPlaceholder(field.placeholder, field.default),
+			disabled,
+			step: field.step,
+			min: field.min,
+			max: field.max,
+			minLength: field.minLength,
+			maxLength: field.maxLength,
+			sanitize: field.sanitize,
+			defaultValue: field.default,
+			value,
+			...onChange && { onChange }
+		}, field.name)
+	});
+});
+//#endregion
+//#region src/form/Fields/NumberField.tsx
+function NumberField(props) {
+	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact } = props;
+	const [fieldState] = useField(field.name);
+	const { setFieldValue } = useFormikContext();
+	useEffect(() => {
+		if (field.prefillDefault && field.default !== void 0 && (fieldState.value === void 0 || fieldState.value === null || fieldState.value === "")) setFieldValue(field.name, field.default);
+	}, [
+		field.prefillDefault,
+		field.default,
+		field.name,
+		fieldState.value,
+		setFieldValue
+	]);
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		optional: field.optional,
+		label,
+		tooltipComponent,
+		labelPosition,
+		spaceCompact,
+		children: field.thousandsSeparator ? /* @__PURE__ */ jsx(FormikNumericInput, {
+			invalid: missing,
+			name: field.name,
+			placeholder: getPlaceholder(field.placeholder, field.default),
+			disabled,
+			min: field.min,
+			max: field.max,
+			...onChange && { onChange }
+		}, field.name) : /* @__PURE__ */ jsx(FormikCustomInput, {
+			invalid: missing,
+			name: field.name,
+			type: "number",
+			placeholder: getPlaceholder(field.placeholder, field.default),
+			disabled,
+			step: field.step,
+			min: field.min,
+			max: field.max,
+			defaultValue: field.default,
+			...onChange && { onChange }
+		}, field.name)
+	});
+}
+//#endregion
+//#region src/form/Fields/BooleanField.tsx
+function BooleanField(props) {
+	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty } = props;
+	const [fieldState] = useField(field.name);
+	const { setFieldValue, setFieldTouched } = useFormikContext();
+	const handleChange = (val) => {
+		if (disabled) return;
+		if (onChange) onChange(val);
+		setFieldTouched(field.name, true);
+		setFieldValue(field.name, val);
+		setFormDirty(true);
+	};
+	const value = fieldState.value;
+	const options = field.options ? {
+		onOption: String(field.options.onOption ?? true),
+		offOption: String(field.options.offOption ?? false)
+	} : void 0;
+	const displayLabel = (option) => option.charAt(0).toUpperCase() + option.slice(1).toLowerCase();
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		optional: true,
+		label,
+		tooltipComponent: /* @__PURE__ */ jsx("div", { children: tooltipComponent }),
+		description: field.description,
+		labelPosition,
+		spaceCompact,
+		children: options ? /* @__PURE__ */ jsx(SwitchToggle, {
+			onChange: (on) => handleChange(on ? options.onOption : options.offOption),
+			value: value === true || value === options.onOption,
+			yesLabel: displayLabel(options.onOption),
+			noLabel: displayLabel(options.offOption),
+			disabled,
+			invalid: missing
+		}) : /* @__PURE__ */ jsx(SwitchToggle, {
+			datatip: field.disabled_message,
+			onChange: handleChange,
+			value: value === true || value === "true",
+			disabled,
+			invalid: missing
+		})
+	});
+}
+//#endregion
+//#region src/form/Fields/DropdownField.tsx
+function DropdownField(props) {
+	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, setFieldValue, setFieldTouched, currentValue } = props;
+	let parentValue = field.parentValue;
+	let options = Array.isArray(field.options) && field.options || [];
+	if (field.depends_on) {
+		parentValue = field.depends_on;
+		if (!Array.isArray(field.options)) options = field.options[parentValue];
+	}
+	const secondaryField = Array.isArray(field.secondaryField) ? field.secondaryField[0] : field.secondaryField;
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		optional: field.optional,
+		label,
+		tooltipComponent,
+		description: field.description,
+		labelPosition,
+		spaceCompact,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "grow min-w-0",
+			children: /* @__PURE__ */ jsx(FormikCustomDropdown_default, {
+				invalid: missing,
+				className: "w-full",
+				name: field.name,
+				ariaLabel: label,
+				options,
+				setFormDirty: props.setFormDirty,
+				parentValue,
+				onChange,
+				secondaryField,
+				disabled,
+				resetOnChange: field.resetOnChange ? field.name : "",
+				loading: false,
+				autoselect: field.autoselect,
+				allowCustomValue: field.allowCustomValue,
+				customValueLabel: field.customValueLabel,
+				placeholder: getPlaceholder(field.placeholder, typeof field.default === "string" ? field.default : void 0),
+				currentValue,
+				setFieldValue,
+				setFieldTouched
+			}, field.name)
+		})
+	});
+}
+//#endregion
+//#region src/form/Fields/TextAreaField.tsx
+function TextAreaField(props) {
+	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact } = props;
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		optional: field.optional,
+		label,
+		tooltipComponent,
+		description: field.description,
+		labelPosition,
+		spaceCompact,
+		children: /* @__PURE__ */ jsx(Field, {
+			className: cx("theme-input h-[82px] w-full rounded leading-4 overflow-y-scroll", disabled && "disabled", missing && "border-red-600 focus:border-red-600 focus:ring-red-500"),
+			as: "textarea",
+			name: field.name,
+			type: "search",
+			placeholder: getPlaceholder(field.placeholder, field.default),
+			disabled,
+			...onChange && { onChange }
+		}, field.name)
+	});
+}
+//#endregion
+//#region src/form/Fields/RangeField.tsx
+function RangeField(props) {
+	const { field, label, labelPosition, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty } = props;
+	const [fieldState] = useField(field.name);
+	const { setFieldValue, setFieldTouched } = useFormikContext();
+	const handleChange = (e) => {
+		let val = e.target.valueAsNumber;
+		if (!isNaN(val)) {
+			val = Math.max(field.min, Math.min(field.max, val));
+			setFieldValue(field.name, val);
+			if (onChange) onChange(val);
+			setFieldTouched(field.name, true);
+			setFormDirty(true);
+		}
+	};
+	const seedValue = field.default ?? field.min;
+	if ((fieldState.value === void 0 || fieldState.value === null) && seedValue !== void 0) setFieldValue(field.name, seedValue);
+	const currentValue = fieldState.value !== void 0 ? fieldState.value : seedValue;
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		optional: field.optional,
+		label,
+		tooltipComponent,
+		labelPosition,
+		spaceCompact,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center",
+			children: [/* @__PURE__ */ jsx(Field, {
+				className: cx("theme-input h-7 w-1/3 mr-5 text-center rounded border text-[14px]", disabled && "disabled"),
+				type: "number",
+				value: currentValue,
+				min: field.min,
+				max: field.max,
+				step: field.step || 1,
+				disabled,
+				onChange: handleChange
+			}), /* @__PURE__ */ jsx(Field, {
+				className: cx("rounded w-full", disabled && "disabled"),
+				name: field.name,
+				value: currentValue,
+				type: "range",
+				min: field.min,
+				max: field.max,
+				step: field.step || 1,
+				disabled,
+				onChange: handleChange
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/form/utils/slurmDuration.ts
+var WITH_DAYS = /^(\d+)-(\d{1,2})(?::(\d{1,2})(?::(\d{1,2}))?)?$/;
+var WITHOUT_DAYS = /^(\d+):(\d{1,2}):(\d{1,2})$/;
+function parseSlurmDuration(text) {
+	const trimmed = text.trim();
+	let days = 0;
+	let hours;
+	let minutes;
+	let seconds;
+	const withDays = trimmed.match(WITH_DAYS);
+	if (withDays) {
+		days = Number(withDays[1]);
+		hours = Number(withDays[2]);
+		minutes = Number(withDays[3] ?? 0);
+		seconds = Number(withDays[4] ?? 0);
+		if (hours > 23) return null;
+	} else {
+		const withoutDays = trimmed.match(WITHOUT_DAYS);
+		if (!withoutDays) return null;
+		hours = Number(withoutDays[1]);
+		minutes = Number(withoutDays[2]);
+		seconds = Number(withoutDays[3]);
+	}
+	if (minutes > 59 || seconds > 59) return null;
+	return days * 86400 + hours * 3600 + minutes * 60 + seconds;
+}
+function formatSecondsAsSlurmDuration(totalSeconds) {
+	if (!Number.isFinite(totalSeconds) || totalSeconds < 0) return "";
+	const parts = Duration.fromObject({ seconds: Math.floor(totalSeconds) }).shiftTo("days", "hours", "minutes", "seconds");
+	const pad = (n) => String(n).padStart(2, "0");
+	const time = `${pad(parts.hours)}:${pad(parts.minutes)}:${pad(parts.seconds)}`;
+	return parts.days > 0 ? `${parts.days}-${time}` : time;
+}
+var FLEX_MAX_DURATION_RANGE = {
+	min: 600,
+	max: 604800
+};
+var FLEX_WAIT_TIME_RANGE = {
+	min: 30,
+	max: 604800
+};
+var STANDARD_MAX_DURATION_RANGE = {
+	min: 30,
+	max: 10368e3
+};
+var DURATION_PATH = /^partitions\[\d+\]\.(maxDuration|flexStartWaitTime|suspendTime)$/;
+function collectPartitionDurationIssues(partitions, invalidDurationPaths) {
+	const issues = new Set(invalidDurationPaths.filter((path) => DURATION_PATH.test(path)));
+	(partitions ?? []).forEach((partition, i) => {
+		const p = partition;
+		const check = (fieldName, range, required) => {
+			const raw = p?.[fieldName];
+			if (raw === void 0 || raw === null || raw === "") {
+				if (required) issues.add(`partitions[${i}].${fieldName}`);
+				return;
+			}
+			const value = Number(raw);
+			if (!Number.isFinite(value) || value < range.min || value > range.max) issues.add(`partitions[${i}].${fieldName}`);
+		};
+		if (p?.provisioningMode === "flex") {
+			check("maxDuration", FLEX_MAX_DURATION_RANGE, true);
+			check("flexStartWaitTime", FLEX_WAIT_TIME_RANGE, true);
+		} else check("maxDuration", STANDARD_MAX_DURATION_RANGE, false);
+	});
+	return [...issues];
+}
+//#endregion
+//#region src/form/Fields/durationValidity.ts
+var invalidPaths = /* @__PURE__ */ new Set();
+function setDurationValidity(path, valid) {
+	if (valid) invalidPaths.delete(path);
+	else invalidPaths.add(path);
+}
+function getInvalidDurationPaths() {
+	return [...invalidPaths];
+}
+//#endregion
+//#region src/form/Fields/DurationField.tsx
+var DEBOUNCE_MS = 500;
+var isNumericString = (value) => typeof value === "string" && /^\d+$/.test(value.trim());
+var toDisplay = (value) => {
+	if (typeof value === "number") return formatSecondsAsSlurmDuration(value);
+	if (isNumericString(value)) return formatSecondsAsSlurmDuration(Number(value));
+	return "";
+};
+var DurationField_default = memo(function DurationField({ field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty, currentValue, setFieldValue, setFieldTouched }) {
+	const { form: t } = useStrings();
+	const name = field.name;
+	const min = field.min !== void 0 ? Number(field.min) : Number.NEGATIVE_INFINITY;
+	const max = field.max !== void 0 ? Number(field.max) : Number.POSITIVE_INFINITY;
+	const disableValue = field.disableValue;
+	const hasDisableCheckbox = disableValue !== void 0 && field.disableLabel !== void 0;
+	const isSentinel = hasDisableCheckbox && currentValue !== "" && Number(currentValue) === disableValue;
+	const [text, setText] = useState(() => toDisplay(currentValue));
+	const focusedRef = useRef(false);
+	const debounceRef = useRef(null);
+	useEffect(() => {
+		if (isSentinel) {
+			if (typeof currentValue !== "number") setFieldValue?.(name, disableValue);
+		} else if (isNumericString(currentValue)) setFieldValue?.(name, Number(currentValue));
+		else if ((currentValue === void 0 || currentValue === null || currentValue === "") && typeof field.default === "number") setFieldValue?.(name, field.default);
+	}, []);
+	useEffect(() => {
+		if (!focusedRef.current) setText(toDisplay(currentValue));
+	}, [currentValue]);
+	const trimmed = text.trim();
+	const parsed = trimmed === "" ? null : parseSlurmDuration(trimmed);
+	let error = null;
+	if (!isSentinel && trimmed !== "") {
+		if (parsed === null) error = t.invalidDuration;
+		else if (parsed < min || parsed > max) error = Number.isFinite(max) ? t.durationOutOfRange(formatSecondsAsSlurmDuration(Math.max(min, 0)), formatSecondsAsSlurmDuration(max)) : t.durationBelowMin(formatSecondsAsSlurmDuration(Math.max(min, 0)));
+	}
+	useEffect(() => {
+		setDurationValidity(name, error === null);
+	}, [name, error]);
+	useEffect(() => () => {
+		setDurationValidity(name, true);
+		clearTimeout(debounceRef.current ?? void 0);
+	}, [name]);
+	const flushToFormik = (val) => {
+		setFieldValue?.(name, val);
+		onChange?.(val);
+		setFieldTouched?.(name, true);
+	};
+	const handleDisableToggle = (checked) => {
+		clearTimeout(debounceRef.current ?? void 0);
+		setFormDirty(true);
+		if (checked) {
+			setText("");
+			flushToFormik(disableValue);
+		} else flushToFormik(typeof field.default === "number" ? field.default : "");
+	};
+	const handleChange = (e) => {
+		const raw = e.target.value;
+		setText(raw);
+		setFormDirty(true);
+		clearTimeout(debounceRef.current ?? void 0);
+		const rawTrimmed = raw.trim();
+		const value = rawTrimmed === "" ? "" : parseSlurmDuration(rawTrimmed);
+		if (value === "" || typeof value === "number" && value >= min && value <= max) debounceRef.current = setTimeout(() => flushToFormik(value), DEBOUNCE_MS);
+	};
+	const handleFocus = () => {
+		focusedRef.current = true;
+	};
+	const handleBlur = () => {
+		focusedRef.current = false;
+		clearTimeout(debounceRef.current ?? void 0);
+		if (trimmed === "") {
+			setText("");
+			flushToFormik("");
+		} else if (parsed !== null && parsed >= min && parsed <= max) {
+			setText(formatSecondsAsSlurmDuration(parsed));
+			flushToFormik(parsed);
+		}
+	};
+	return /* @__PURE__ */ jsxs(FieldWrapper, {
+		optional: field.optional ?? false,
+		label,
+		tooltipComponent,
+		labelPosition,
+		spaceCompact: spaceCompact ?? false,
+		...field.description !== void 0 && { description: field.description },
+		children: [
+			!isSentinel && /* @__PURE__ */ jsx("input", {
+				"data-1p-ignore": true,
+				className: cx("w-full", disabled && "disabled", (missing || error !== null) && "invalid"),
+				name,
+				value: text,
+				type: "text",
+				disabled,
+				placeholder: field.placeholder ?? "DD-HH:MM:SS",
+				onChange: handleChange,
+				onFocus: handleFocus,
+				onBlur: handleBlur
+			}),
+			error && /* @__PURE__ */ jsx("div", {
+				className: "text-xs text-red-500 mt-1",
+				children: error
+			}),
+			hasDisableCheckbox && /* @__PURE__ */ jsxs("label", {
+				className: cx("flex items-center gap-2 mt-1", disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"),
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					checked: isSentinel,
+					disabled,
+					onChange: (e) => handleDisableToggle(e.target.checked),
+					className: cx("h-4 w-4 accent-(--theme-link)", disabled ? "cursor-not-allowed" : "cursor-pointer")
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-sm theme-text",
+					children: field.disableLabel
+				})]
+			})
+		]
+	});
+});
+//#endregion
+//#region src/form/Fields/RadioField.tsx
+function RadioField(props) {
+	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty } = props;
+	const { setFieldValue, setFieldTouched } = useFormikContext();
+	const handleChange = (val) => {
+		if (disabled) return;
+		if (onChange) onChange(val);
+		setFieldTouched(field.name, true);
+		setFieldValue(field.name, val);
+		setFormDirty(true);
+	};
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		optional: field.optional,
+		label,
+		tooltipComponent,
+		labelPosition,
+		spaceCompact,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cx("flex", field.optionLabelPosition === "top" ? "flex-col" : "flex-row"),
+			children: field.options?.map((option) => /* @__PURE__ */ jsxs("label", {
+				className: "capitalize",
+				children: [/* @__PURE__ */ jsx(Field, {
+					className: cx("theme-input mr-1", disabled && "disabled", missing && "invalid"),
+					name: field.name,
+					type: "radio",
+					value: option,
+					disabled,
+					onChange: (e) => {
+						handleChange(e.target.value);
+					}
+				}), option]
+			}, field.name + option))
+		})
+	});
+}
+//#endregion
+//#region src/form/Fields/LabelField.tsx
+function LabelField(props) {
+	const { field, label } = props;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center w-full",
+		children: /* @__PURE__ */ jsx("h3", {
+			style: field.size ? {
+				fontSize: field.size.toString() + "px",
+				whiteSpace: "pre-wrap"
+			} : { whiteSpace: "pre-wrap" },
+			className: cx("relative", "text-md", field.bold !== false ? "font-bold" : ""),
+			children: field.text && field.text.toString().replace(/(\r)/g, "").replace(/(\\n)/g, "\n") || label
+		})
+	});
+}
+//#endregion
+//#region src/form/Fields/ColorField.tsx
+function ColorField(props) {
+	const { field, label, labelPosition, onChange, tooltipComponent, spaceCompact } = props;
+	const [fieldState] = useField(field.name);
+	const { setFieldValue, setFieldTouched } = useFormikContext();
+	const handleChange = (e) => {
+		const val = e.target.value;
+		if (onChange) onChange(val);
+		setFieldTouched(field.name, true);
+		setFieldValue(field.name, val);
+	};
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		optional: field.optional,
+		label,
+		tooltipComponent,
+		labelPosition,
+		spaceCompact,
+		children: /* @__PURE__ */ jsx(Field, {
+			className: "theme-input h-8 w-18 rounded border border-neutral-400 text-[14px] placeholder:text-xs",
+			name: field.name,
+			value: fieldState.value || "#fbbf24",
+			type: "color",
+			onChange: handleChange
+		})
+	});
+}
+//#endregion
+//#region src/form/Fields/MultiDropdownField.tsx
+function MultiDropdownField({ field, label, tooltipComponent, labelPosition, spaceCompact, disabled, missing, setFormDirty, onChange }) {
+	let parentValue = field.parentValue;
+	let options = field.options;
+	if (field.depends_on) {
+		parentValue = field.depends_on;
+		if (!Array.isArray(field.options)) options = field.options[parentValue] || [];
+	}
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		optional: field.optional,
+		label,
+		tooltipComponent,
+		labelPosition,
+		spaceCompact,
+		children: disabled ? /* @__PURE__ */ jsx(Field, {
+			className: "theme-input h-7 w-full rounded border text-[14px] placeholder:text-xs",
+			type: "search",
+			name: field.name,
+			disabled: true,
+			onChange
+		}, field.name) : /* @__PURE__ */ jsx(MultiSelectionDropdown, {
+			className: "themee-input h-7 w-full rounded border text-[14px] flex items-center px-3 py-2",
+			name: field.name,
+			label: field.label || label,
+			options: Array.isArray(options) ? options : [],
+			setFormDirty,
+			parentValue,
+			onChange,
+			secondaryField: typeof field.secondaryField === "string" ? field.secondaryField : void 0,
+			invalid: missing
+		}, field.name)
+	});
+}
+//#endregion
+//#region src/form/Fields/CheckboxGroupField.tsx
+function impliedFrom(values, implies = {}) {
+	const result = /* @__PURE__ */ new Set();
+	for (const value of values) for (const target of implies[value] ?? []) result.add(target);
+	return result;
+}
+function union(manual, forced) {
+	return [...manual, ...[...forced].filter((v) => !manual.includes(v))];
+}
+function CheckboxGroupField({ field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty }) {
+	const [fieldState] = useField(field.name);
+	const { setFieldValue, setFieldTouched } = useFormikContext();
+	const implies = field.implies;
+	const [manual, setManual] = useState(() => {
+		const saved = fieldState.value || [];
+		const impliedBySaved = impliedFrom(saved, implies);
+		return saved.filter((v) => !impliedBySaved.has(v));
+	});
+	const forced = impliedFrom(manual, implies);
+	const handleToggle = (value) => {
+		if (disabled) return;
+		const nextManual = manual.includes(value) ? manual.filter((v) => v !== value) : [...manual, value];
+		const next = union(nextManual, impliedFrom(nextManual, implies));
+		setManual(nextManual);
+		setFieldTouched(field.name, true);
+		setFieldValue(field.name, next);
+		if (onChange) onChange(next);
+		setFormDirty(true);
+	};
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		optional: field.optional,
+		label,
+		tooltipComponent,
+		labelPosition,
+		spaceCompact,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex max-w-lg flex-col gap-1",
+			children: field.options?.map((option) => {
+				const locked = forced.has(option.value);
+				const optionDisabled = disabled || locked;
+				return /* @__PURE__ */ jsxs("label", {
+					className: cx("flex items-start gap-2 rounded px-2 py-1 transition-colors", optionDisabled ? "cursor-not-allowed opacity-60" : "cursor-pointer hover:bg-(--theme-hover) has-[:focus-visible]:bg-(--theme-hover)"),
+					children: [/* @__PURE__ */ jsx("input", {
+						type: "checkbox",
+						checked: manual.includes(option.value) || locked,
+						disabled: optionDisabled,
+						onChange: () => handleToggle(option.value),
+						className: cx("mt-0.5 h-4 w-4 accent-(--theme-link)", optionDisabled ? "cursor-not-allowed" : "cursor-pointer", missing && "invalid")
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "font-medium theme-text",
+							children: option.label
+						}), option.description && /* @__PURE__ */ jsx("span", {
+							className: "text-xs theme-muted-text leading-relaxed",
+							children: option.description
+						})]
+					})]
+				}, field.name + option.value);
+			})
+		})
+	});
+}
+//#endregion
+//#region src/form/Fields/ObjectField.tsx
+function ObjectField({ field, label, tooltipComponent, missingFields, setFormDirty, workflowForm, labelPosition, spaceCompact }) {
+	const [open, setOpen] = useState(field.collapsed !== void 0 ? !field.collapsed : true);
+	const { values, setFieldValue, setFieldTouched } = useFormikContext();
+	const meta = resolveMetaOverrides(field.options, labelPosition, spaceCompact ?? false);
+	const HeaderElement = field.noCollapse ? React.Fragment : ControlledCollapsiblePanel;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col w-full",
+		children: [field.noCollapse && /* @__PURE__ */ jsx("div", {
+			className: "flex items-center w-full mb-[15px]",
+			children: /* @__PURE__ */ jsxs("h3", {
+				className: "flex items-center gap-1 text-md font-bold",
+				children: [
+					label,
+					" ",
+					tooltipComponent
+				]
+			})
+		}), /* @__PURE__ */ jsx(HeaderElement, {
+			open,
+			setOpen,
+			title: /* @__PURE__ */ jsx(GroupHeader, {
+				open,
+				setOpen,
+				title: field.label || label
+			}),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "w-full",
+				children: /* @__PURE__ */ jsx(FieldsFromOptions, {
+					options: field.options,
+					values,
+					setFormDirty,
+					setFieldValue,
+					setFieldTouched,
+					missingFields,
+					workflowForm,
+					labelPosition: meta.labelPosition,
+					spaceCompact: meta.spaceCompact,
+					parentInfo: {
+						parentName: field.name,
+						fieldNamePrefix: `${field.name}.`
+					}
+				})
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/form/Fields/StepField.tsx
+function StepField(_props) {
+	return null;
+}
+//#endregion
+//#region src/form/Fields/BucketReadOnlyField.tsx
+function BucketReadOnlyField({ field, disabled, missing, labelPosition, setFormDirty }) {
+	const { form: t } = useStrings();
+	const [fieldState] = useField(field.name);
+	const { setFieldTouched, setFieldValue, values } = useFormikContext();
+	const accessFieldName = field.name?.replace(/readOnly$/, "bucketAccessWritable");
+	const forced = fieldState.value === true && !!accessFieldName && getIn(values, accessFieldName) === false;
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		optional: true,
+		label: t.readOnly,
+		description: t.readOnlyDescription,
+		labelPosition,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2",
+			children: [/* @__PURE__ */ jsx(SwitchToggle, {
+				onChange: (value) => {
+					if (disabled) return;
+					setFieldTouched(field.name, true);
+					setFieldValue(field.name, value);
+					setFormDirty(true);
+				},
+				value: fieldState.value === true,
+				disabled,
+				invalid: missing,
+				yesLabel: t.readOnly,
+				noLabel: t.readWrite
+			}), /* @__PURE__ */ jsx("p", {
+				className: cx("text-sm theme-muted-text max-w-[65ch]", !forced && "hidden"),
+				children: t.readOnlyForced
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/form/fieldRegistry.tsx
+var CORE_FIELD_COMPONENTS = {
+	string: StringField_default,
+	password: StringField_default,
+	number: NumberField,
+	boolean: BooleanField,
+	dropdown: DropdownField,
+	textarea: TextAreaField,
+	range: RangeField,
+	duration: DurationField_default,
+	radio: RadioField,
+	label: LabelField,
+	color: ColorField,
+	"multi-dropdown": MultiDropdownField,
+	"checkbox-group": CheckboxGroupField,
+	object: ObjectField,
+	step: StepField,
+	"bucket-read-only": BucketReadOnlyField
+};
+var FieldRegistryContext = createContext({});
+/** Returns null for field types no registry knows. Per-form `fields` win over
+* the provider's `slots.formFields`, which win over the core registry. */
+function Registry(props) {
+	const injected = useContext(FieldRegistryContext);
+	const { formFields } = useSlots();
+	const Component = injected[props.field.type] ?? formFields?.[props.field.type] ?? CORE_FIELD_COMPONENTS[props.field.type];
+	if (!Component) return null;
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: null,
+		children: /* @__PURE__ */ jsx(Component, { ...props })
+	});
+}
+//#endregion
+//#region src/form/Form.tsx
+/** Applies `$meta` overrides for `labelPosition` / `spaceCompact`. */
+function resolveMetaOverrides(options, labelPosition, spaceCompact) {
+	return {
+		labelPosition: options?.$meta?.labelPosition ?? labelPosition,
+		spaceCompact: options?.$meta?.spaceCompact ?? spaceCompact
+	};
+}
+/** Cheap signature of every list's length; gates the expensive collect walk. */
+function listLengthsSignature(options, values = {}, prefix = "") {
+	if (!options || typeof options !== "object") return "";
+	const parts = [];
+	for (const [fieldName, field] of Object.entries(options)) {
+		if (fieldName === "$meta" || !field || typeof field !== "object") continue;
+		const fullName = prefix ? `${prefix}${fieldName}` : fieldName;
+		if (field.type === "list") {
+			const items = values?.[fieldName];
+			const len = Array.isArray(items) ? items.length : 0;
+			parts.push(`${fullName}:${len}`);
+			const template = field.template || field.options;
+			if (template && Array.isArray(items)) for (let i = 0; i < items.length; i++) parts.push(listLengthsSignature(template, items[i] || {}, `${fullName}[${i}].`));
+		} else if (field.type === "group" || field.type === "object") {
+			const groupItems = field.items || field.options;
+			if (groupItems) {
+				const nestedValues = values?.[fieldName] || {};
+				parts.push(listLengthsSignature(groupItems, nestedValues, `${fullName}.`));
+			}
+		}
+	}
+	return parts.join("|");
+}
+/** Collects every field with a `default` for the form-level sync to track. */
+function collectFieldsWithDefaults(options, values = {}, prefix = "") {
+	const result = [];
+	if (!options || typeof options !== "object") return result;
+	for (const [fieldName, field] of Object.entries(options)) {
+		if (!field || typeof field !== "object") continue;
+		if (fieldName === "$meta") continue;
+		const fullName = prefix ? `${prefix}${fieldName}` : fieldName;
+		if (field.type === "group" || field.type === "object") {
+			const groupItems = field.items || field.options;
+			if (groupItems) {
+				const nestedValues = values?.[fieldName] || {};
+				result.push(...collectFieldsWithDefaults(groupItems, nestedValues, `${fullName}.`));
+			}
+			continue;
+		}
+		if (field.type === "list") {
+			const listTemplate = field.template || field.options;
+			const listValues = values?.[fieldName];
+			if (listTemplate && Array.isArray(listValues)) for (let i = 0; i < listValues.length; i++) {
+				const itemValues = listValues[i] || {};
+				result.push(...collectFieldsWithDefaults(listTemplate, itemValues, `${fullName}[${i}].`));
+			}
+			continue;
+		}
+		if (field.default !== void 0) result.push({
+			name: fullName,
+			defaultValue: field.default
+		});
+	}
+	return result;
+}
+function defaultReferencesField(defaultValue, fieldPath) {
+	if (typeof defaultValue !== "string" || !defaultValue.includes("${{")) return false;
+	const escaped = fieldPath.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+	return new RegExp(`\\binputs\\.${escaped}(?![\\w.[-])`).test(defaultValue);
+}
+function findSelfReferencingFieldNames(schema, values = {}) {
+	return collectFieldsWithDefaults(schema, values).filter(({ name, defaultValue }) => defaultReferencesField(defaultValue, name)).map(({ name }) => name);
+}
+/**
+* Re-syncs each field's value when its resolved default changes between
+* renders, unless `meta.touched` (this session) or a synth-touched marker
+* (cross-session, set on first-seen when saved ≠ default) is set. Must be
+* remounted via `key` when the run/config context changes.
+*/
+function DynamicDefaultsSync({ options }) {
+	const { setFieldValue, getFieldMeta, values } = useFormikContext();
+	const fieldsWithDefaults = useMemo(() => collectFieldsWithDefaults(options, values), [options, useMemo(() => listLengthsSignature(options, values), [options, values])]);
+	const prevDefaultsRef = useRef(/* @__PURE__ */ new Map());
+	const synthTouchedRef = useRef(/* @__PURE__ */ new Set());
+	const fieldsWithDefaultsRef = useRef(null);
+	if (!deepEqual(fieldsWithDefaultsRef.current, fieldsWithDefaults)) {
+		fieldsWithDefaultsRef.current = fieldsWithDefaults;
+		const currentNames = new Set(fieldsWithDefaults.map((f) => f.name));
+		for (const name of prevDefaultsRef.current.keys()) if (!currentNames.has(name)) {
+			prevDefaultsRef.current.delete(name);
+			synthTouchedRef.current.delete(name);
+		}
+		for (const { name, defaultValue } of fieldsWithDefaults) {
+			if (synthTouchedRef.current.has(name)) continue;
+			if (getFieldMeta(name).touched) continue;
+			const wasSeen = prevDefaultsRef.current.has(name);
+			const serializedDefault = JSON.stringify(defaultValue ?? null);
+			const prevDefault = prevDefaultsRef.current.get(name);
+			prevDefaultsRef.current.set(name, serializedDefault);
+			if (!wasSeen) {
+				const currVal = JSON.stringify(getValueUsingPath(values, name));
+				if (currVal !== void 0 && currVal !== serializedDefault) synthTouchedRef.current.add(name);
+				continue;
+			}
+			if (prevDefault === serializedDefault) continue;
+			if (defaultValue === null || defaultValue === void 0) continue;
+			if (JSON.stringify(getValueUsingPath(values, name)) !== serializedDefault) setFieldValue(name, defaultValue);
+		}
+	}
+	return null;
+}
+function GroupHeader({ children, open, setOpen, title }) {
+	return /* @__PURE__ */ jsxs(SectionHeader, {
+		className: "flex items-center justify-between pb-1 mb-2 border-b",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx("w-full flex items-center transform ease-in transition cursor-pointer"),
+			onClick: () => setOpen((open) => !open),
+			children: [/* @__PURE__ */ jsx(AngleRightIcon, { className: cx(open && "transform rotate-90 ", "px-1 text-[1.25rem]  transition ease-in ") }), /* @__PURE__ */ jsx("span", { children: title })]
+		}), children]
+	});
+}
+function deleteFieldByPath(obj, path) {
+	if (!path) return;
+	const parts = path.replaceAll("[", ".").replaceAll("]", "").split(".");
+	const fieldToRemove = parts.pop();
+	if (!fieldToRemove) {
+		console.error("Invalid path");
+		return;
+	}
+	const parent = parts.reduce((acc, curr) => {
+		if (acc && typeof acc === "object") return acc[curr];
+		return {};
+	}, obj);
+	if (parent && typeof parent === "object" && Object.prototype.hasOwnProperty.call(parent, fieldToRemove)) delete parent[fieldToRemove];
+}
+function getClosestParentIndex(parentPath) {
+	for (let i = parentPath.length - 1; i >= 0; i--) if (parentPath[i] === "]") {
+		let j = i - 1;
+		while (j >= 0 && parentPath[j] !== "[") j--;
+		return parseInt(parentPath.slice(j + 1, i));
+	}
+}
+function getInstanceTypesForForm(instances) {
+	return Object.keys(instances).reduce((acc, key) => {
+		const validInstances = [];
+		Object.keys(instances[key]).forEach((item) => {
+			const instance = instances[key][item];
+			const secondaryValue = [
+				instances[key][item].Arch,
+				!!instance.AcceleratedNetworking,
+				!!instance.AcceleratedNetworking,
+				!!instance.LocalDiskSizeGb,
+				!!instance.isFlex
+			];
+			const flexLabel = instance.isFlex ? ", Flex" : "";
+			if (instance.LocalDiskSizeGb) validInstances.push({
+				value: item,
+				label: `${item} (${instance.vCPUs} vCPUs, ${instance["Mem (GB)"]} GB Memory, ${instance.Arch} , ${instance.LocalDiskSizeGb} GB Local Disk${flexLabel})`,
+				secondaryValue
+			});
+			else validInstances.push({
+				value: item,
+				label: `${item} (${instance.vCPUs} vCPUs, ${instance["Mem (GB)"]} GB Memory, ${instance.Arch}${flexLabel})`,
+				secondaryValue
+			});
+		});
+		return {
+			...acc,
+			[key]: validInstances
+		};
+	}, {});
+}
+function StatusBlock({ status }) {
+	return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", {
+		"data-tooltip-id": TOOLTIP_ID,
+		"data-tooltip-content": status ? "Storage has been attached." : "Attaching the storage to cluster...",
+		children: status ? /* @__PURE__ */ jsx(SuccessCheckmark, {}) : /* @__PURE__ */ jsx(Loader, {
+			size: 13,
+			full: false
+		})
+	}) });
+}
+function MultiSelectionDropdown({ name, label = "", invalid = false, options: initialOptions = [], setFormDirty, onChange, parentValue }) {
+	const [field] = useField(name);
+	const { setFieldValue } = useFormikContext();
+	const options = useMemo(() => {
+		return initialOptions.map((option) => {
+			const op = typeof option === "string" ? {
+				label: option,
+				value: option,
+				selected: false
+			} : { ...option };
+			if (field.value?.includes(op.value)) op.selected = true;
+			return op;
+		});
+	}, [initialOptions, field.value]);
+	const handleOptionSelected = (selectedValue) => {
+		let selected = [];
+		if (field.value) selected = [...field.value];
+		selected.push(selectedValue);
+		setFieldValue(name, selected);
+		if (onChange) onChange(options);
+		setFormDirty(true);
+	};
+	const handleRemoveOption = (key) => {
+		setFieldValue(name, [...field.value.filter((item) => item !== key)]);
+		if (onChange) onChange(options);
+		setFormDirty(true);
+	};
+	const prevParent = usePrevious(parentValue);
+	useEffect(() => {
+		if (prevParent && parentValue && prevParent !== parentValue) setFieldValue(name, []);
+	}, [parentValue]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CustomListbox, {
+		options,
+		type: label.toLowerCase(),
+		handleOptionSelected,
+		className: "mb-3",
+		invalid,
+		closeOnSelect: false
+	}), /* @__PURE__ */ jsx(Table, { children: field.value && field.value.length > 0 ? options.filter((option) => option.selected).map((option, index) => {
+		return /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx(Table.Item, {
+			className: "w-full",
+			children: option?.label
+		}), /* @__PURE__ */ jsx(Table.Item, { children: /* @__PURE__ */ jsx(TrashIcon, {
+			className: "link mr-4",
+			onClick: () => handleRemoveOption(option.value)
+		}) })] }, index);
+	}) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs(Table.Item, { children: [
+		"No ",
+		label !== "" ? label.toLowerCase() : "options",
+		" selected"
+	] }) }) })] });
+}
+var InputField = React.memo(function InputField({ label, field, setFormDirty, onChange, disabled = false, labelPosition = "left", missingFields = [], computeOn, spaceCompact = false, workflowForm = false, setFieldValue, setFieldTouched, values, currentValue }) {
+	const prevField = useRef(field);
+	const fieldObj = useMemo(() => {
+		if (deepEqual(prevField.current, field)) return prevField.current;
+		prevField.current = field;
+		return { ...field };
+	}, [field]);
+	const tooltipComponent = useMemo(() => {
+		if (!fieldObj.tooltip) return null;
+		return /* @__PURE__ */ jsx(TooltipInfo, {
+			className: "pr-2",
+			place: "top",
+			text: typeof fieldObj.tooltip === "string" ? fieldObj.tooltip.replace(/\r/g, "") : fieldObj.tooltip.join("\n")
+		});
+	}, [fieldObj.tooltip]);
+	return /* @__PURE__ */ jsx(Registry, {
+		field: fieldObj,
+		label,
+		labelPosition,
+		missing: missingFields.includes(fieldObj.name),
+		missingFields,
+		values,
+		setFormDirty,
+		onChange,
+		disabled,
+		computeOn,
+		spaceCompact,
+		tooltipComponent,
+		workflowForm,
+		setFieldTouched,
+		setFieldValue,
+		currentValue
+	});
+}, (prev, next) => {
+	if (!deepEqual(prev.field, next.field)) return false;
+	for (const key of Object.keys(prev)) {
+		if (key === "field" || key === "values") continue;
+		if (prev[key] !== next[key]) return false;
+	}
+	return true;
+});
+function FormikStateBridge({ onChange }) {
+	const { values } = useFormikContext();
+	const prevEmitted = useRef(null);
+	useEffect(() => {
+		const { editorKeyPostfix: _, ...next } = values;
+		if (prevEmitted.current !== null && prevEmitted.current !== void 0 && deepEqual(prevEmitted.current, next)) return;
+		prevEmitted.current = next;
+		onChange(next);
+	}, [values, onChange]);
+	return null;
+}
+function DirtyStateBridge({ setFormDirty }) {
+	const { dirty } = useFormikContext();
+	useEffect(() => {
+		setFormDirty(dirty);
+	}, [dirty, setFormDirty]);
+	return null;
+}
+/** Three-tier cache: no expressions → raw pass-through; input-dep expressions → re-parse on dep change; org-var/path expressions → parse once. */
+function useFieldParse(optionsField, values, arrayIndex) {
+	const c = useRef({
+		lastOptField: null,
+		convertedField: null,
+		inputDeps: /* @__PURE__ */ new Set(),
+		hasExpressions: false,
+		lastRelevant: {},
+		lastIndex: void 0,
+		result: null
+	}).current;
+	if (optionsField !== c.lastOptField) {
+		c.lastOptField = optionsField;
+		c.convertedField = convertToDynamicForm(optionsField);
+		const { inputDeps, hasExpressions } = extractInputDeps(c.convertedField);
+		c.inputDeps = inputDeps;
+		c.hasExpressions = hasExpressions;
+		c.result = null;
+	}
+	if (!c.hasExpressions) return optionsField;
+	if (c.inputDeps.size === 0) {
+		if (c.result !== null) return c.result;
+	}
+	if (c.result !== null) {
+		let changed = arrayIndex !== c.lastIndex;
+		if (!changed) {
+			for (const key of c.inputDeps) if (!deepEqual(values[key], c.lastRelevant[key])) {
+				changed = true;
+				break;
+			}
+		}
+		if (!changed) return c.result;
+	}
+	c.result = parseStringsOfObj({
+		inputs: values,
+		obj: c.convertedField,
+		orgVars: {},
+		index: arrayIndex
+	});
+	c.lastIndex = arrayIndex;
+	c.lastRelevant = {};
+	for (const key of c.inputDeps) c.lastRelevant[key] = values[key];
+	return c.result;
+}
+var FormField = React.memo(function FormField({ id, optionsField, fieldName, values, setFormDirty, setFieldValue, setFieldTouched, parentInfo, labelPosition = "left", missingFields = [], spaceCompact = false, workflowForm = false }) {
+	const parsedField = useFieldParse(optionsField, values, parentInfo?.arrayIndex);
+	const field = parentInfo ? parsedField : optionsField;
+	if (field === null || field === void 0) return field;
+	const fieldNamePrefix = parentInfo?.fieldNamePrefix || "";
+	const fieldObj = {
+		...field,
+		label: field.label || fieldName.charAt(0).toUpperCase() + fieldName.slice(1),
+		name: fieldNamePrefix + fieldName,
+		optional: resolvedFlag(field.optional) ?? field.default !== void 0
+	};
+	if (!fieldObj.name || fieldName === "v3") return null;
+	if (field.hidden === true || !field.type) {
+		if (resolvedFlag(field.ignore) && !workflowForm) deleteFieldByPath(values, fieldObj.name);
+		return null;
+	}
+	if (!field.type && field.options) fieldObj.type = "dropdown";
+	let onChange;
+	if (field.one_must_be_true && parentInfo?.onChange) {
+		const parentOnChange = parentInfo.onChange;
+		const parentArrayIndex = parentInfo.arrayIndex ?? 0;
+		onChange = (val) => parentOnChange(fieldName, parentArrayIndex, fieldObj.options?.offOption || false, fieldObj.options?.onOption || true, val);
+	}
+	if (field.show_if !== void 0 || field.show_if_not !== void 0) {
+		let index;
+		if (parentInfo) if (!parentInfo?.arrayIndex) index = getClosestParentIndex(parentInfo.fieldNamePrefix);
+		else index = parentInfo.arrayIndex;
+		let shouldShowField = true;
+		if (field.show_if !== void 0) shouldShowField = !!getParentValue(index, field.show_if, values, "", field);
+		if (shouldShowField && field.show_if_not !== void 0) shouldShowField = !getParentValue(index, field.show_if_not, values, "", field);
+		if (!shouldShowField) {
+			if (!workflowForm) deleteFieldByPath(values, fieldObj.name);
+			return null;
+		}
+	}
+	if (field.depends_on) {
+		if (parentInfo?.arrayIndex !== void 0) fieldObj.depends_on = field.depends_on.replace("[index]", `[${parentInfo.arrayIndex}]`);
+	}
+	if (field.enable_if && field.disabled === false) {
+		if (typeof field.enable_if === "string") {
+			let path = field.enable_if;
+			if (parentInfo?.arrayIndex !== void 0) path = field.enable_if.replace("[index]", `[${parentInfo.arrayIndex}]`);
+			if (getValueUsingPath(values, path) === false) fieldObj.disabled = true;
+		}
+	}
+	if (field.type === "group") {
+		const hideHeader = field.noCollapse;
+		const HeaderElement = hideHeader ? React.Fragment : UncontrolledCollapsiblePanel;
+		const meta = resolveMetaOverrides(field.options, labelPosition, spaceCompact);
+		return /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col w-full",
+			children: /* @__PURE__ */ jsx(HeaderElement, {
+				...!hideHeader && {
+					title: (open, setOpen) => /* @__PURE__ */ jsx(GroupHeader, {
+						open,
+						setOpen,
+						title: field.label
+					}),
+					initialState: field.collapsed !== void 0 ? !field.collapsed : true
+				},
+				children: /* @__PURE__ */ jsx("div", {
+					className: "w-full",
+					children: /* @__PURE__ */ jsx(FieldsFromOptions, {
+						options: field.options,
+						setFormDirty,
+						setFieldValue,
+						setFieldTouched,
+						values,
+						parentInfo,
+						workflowForm,
+						labelPosition: meta.labelPosition,
+						spaceCompact: meta.spaceCompact,
+						missingFields
+					})
+				})
+			})
+		}, fieldObj.name);
+	}
+	if (typeof field.type === "object" && field.depends_on) {
+		const parentValue = getValueUsingPath(values, field.depends_on);
+		if (!field.type[parentValue]) return null;
+		fieldObj.type = field.type[parentValue];
+	}
+	if (field.type === "range" && field.depends_on) {
+		const parentValue = getValueUsingPath(values, field.depends_on);
+		if (typeof field?.min === "object" && typeof field?.max === "object") {
+			fieldObj.min = field.min[parentValue];
+			fieldObj.max = field.max[parentValue];
+		}
+	}
+	if (field.resetOnChange) {
+		const parentValue = getValueUsingPath(values, field.resetOnChange);
+		const prevParentValue = field.prevParentValue;
+		if (prevParentValue !== void 0 && prevParentValue !== parentValue) deleteFieldByPath(values, fieldObj.name);
+		field.prevParentValue = parentValue;
+	}
+	if (field.secondaryField) if (Array.isArray(field.secondaryField)) fieldObj.secondaryField = field.secondaryField.map((secondaryField) => fieldNamePrefix + secondaryField);
+	else fieldObj.secondaryField = fieldNamePrefix + field.secondaryField;
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("flex w-full", labelPosition === "left" ? "mb-[15px]" : "mb-[5px]"),
+		children: /* @__PURE__ */ jsx(InputField, {
+			field: fieldObj,
+			label: fieldObj.label,
+			setFormDirty,
+			setFieldValue,
+			setFieldTouched,
+			values,
+			currentValue: getValueUsingPath(values, fieldObj.name),
+			onChange,
+			disabled: fieldObj.disabled,
+			computeOn: parentInfo?.computeOn || fieldObj.computeOn,
+			labelPosition,
+			missingFields,
+			spaceCompact,
+			workflowForm
+		})
+	}, `field-${id}`);
+}, (prev, next) => {
+	if (!deepEqual(prev.optionsField, next.optionsField)) return false;
+	if (prev.values !== next.values) return false;
+	if (!deepEqual(prev.parentInfo, next.parentInfo)) return false;
+	if (!deepEqual(prev.missingFields, next.missingFields)) return false;
+	if (prev.labelPosition !== next.labelPosition) return false;
+	if (prev.spaceCompact !== next.spaceCompact) return false;
+	if (prev.workflowForm !== next.workflowForm) return false;
+	return true;
+});
+function FieldsFromOptions({ options = {}, values, setFormDirty, setFieldValue, setFieldTouched, parentInfo, labelPosition = "left", missingFields = [], spaceCompact = false, workflowForm = false }) {
+	return Object.keys(options).map((fieldName, idx) => /* @__PURE__ */ jsx(FormField, {
+		id: idx,
+		optionsField: options[fieldName],
+		fieldName,
+		values,
+		setFormDirty,
+		setFieldValue,
+		setFieldTouched,
+		parentInfo,
+		labelPosition,
+		missingFields,
+		spaceCompact,
+		workflowForm
+	}, idx));
+}
+var noop = () => {};
+function DynamicFormContent({ options, setValues, setFormDirty, labelPosition, missingFields, spaceCompact, organizationVariables, workflowForm, onSubmit, submitLabel, values, contextKey }) {
+	const { setFieldValue, setFieldTouched } = useFormikContext();
+	const opts = useParsedOpts(options, values, organizationVariables);
+	const handleChange = useCallback((state) => {
+		if (setValues) setValues(state);
+	}, [setValues]);
+	const wizardConfig = parseWizardConfig(opts);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(DirtyStateBridge, { setFormDirty }),
+		/* @__PURE__ */ jsx(FormikStateBridge, { onChange: handleChange }),
+		workflowForm && /* @__PURE__ */ jsx(DynamicDefaultsSync, { options: opts }, contextKey ?? ""),
+		wizardConfig !== null && wizardConfig ? /* @__PURE__ */ jsx(WizardContainer, {
+			wizardConfig,
+			values,
+			onChange: handleChange,
+			onSubmit,
+			className: "w-full",
+			...resolveMetaOverrides(options, labelPosition, spaceCompact),
+			missingFields,
+			workflowForm,
+			setFieldValue,
+			setFieldTouched
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FieldsFromOptions, {
+			...resolveMetaOverrides(options, labelPosition, spaceCompact),
+			options: opts,
+			values,
+			setFormDirty,
+			setFieldValue,
+			setFieldTouched,
+			missingFields,
+			workflowForm
+		}), onSubmit !== void 0 && !workflowForm && /* @__PURE__ */ jsx("div", {
+			className: "mt-4",
+			children: /* @__PURE__ */ jsx("input", {
+				type: "submit",
+				className: "btn btn-info",
+				value: submitLabel
+			})
+		})] })
+	] });
+}
+var NO_FIELDS = {};
+function DynamicForm({ formJSONs: options = {}, reinitialize = false, initialValues, setValues, setFormDirty = noop, formikRef, labelPosition = "left", missingFields = [], spaceCompact = false, organizationVariables, needsOrganizationVariables = false, onSubmit = void 0, submitLabel = "Submit", className = "w-full", workflowForm = false, contextKey, skipValueParse = false, fields = NO_FIELDS }) {
+	const [parseReady, setParseReady] = useState(parseStringsOfObjReady);
+	useEffect(() => {
+		initializeParseStringsOfObj();
+		return callWhenParserInitialized(setParseReady);
+	}, []);
+	if (!parseReady) return /* @__PURE__ */ jsx(Loader, {});
+	const parsedInitVals = skipValueParse ? initialValues : initialValues && parseStringsOfObj({
+		inputs: initialValues,
+		obj: initialValues,
+		orgVars: organizationVariables
+	});
+	return /* @__PURE__ */ jsx(FieldRegistryContext.Provider, {
+		value: fields,
+		children: /* @__PURE__ */ jsx("div", {
+			className,
+			children: (!needsOrganizationVariables || organizationVariables) && initialValues && /* @__PURE__ */ jsx(Formik, {
+				enableReinitialize: reinitialize,
+				initialValues: parsedInitVals,
+				onSubmit: onSubmit ?? (() => {}),
+				onReset: () => {
+					setFormDirty(false);
+				},
+				innerRef: formikRef,
+				children: ({ values }) => /* @__PURE__ */ jsx(Form, {
+					className: "w-full text-sm",
+					children: /* @__PURE__ */ jsx(DynamicFormContent, {
+						values,
+						options,
+						setValues,
+						setFormDirty,
+						labelPosition,
+						missingFields,
+						spaceCompact,
+						organizationVariables,
+						workflowForm,
+						onSubmit,
+						submitLabel,
+						contextKey
+					})
+				})
+			})
+		})
+	});
+}
+//#endregion
+//#region src/form/SpecialTypes/DropdownWrapper.tsx
+function DropdownWrapper({ options, onChange, fieldObj, setFormDirty, invalid = false, loading = false, disabled = void 0, allowCustomValue = void 0, currentValue, setFieldValue, setFieldTouched }) {
+	return /* @__PURE__ */ jsx(FormikCustomDropdown_default, {
+		invalid,
+		className: "w-full",
+		onChange,
+		loading,
+		setFormDirty,
+		options,
+		disabled: disabled ?? fieldObj.disabled ?? false,
+		placeholder: getPlaceholder(fieldObj.placeholder, typeof fieldObj.default === "string" ? fieldObj.default : void 0),
+		name: fieldObj.name,
+		ariaLabel: fieldObj.label,
+		parentValue: fieldObj.parentValue,
+		secondaryField: fieldObj.secondaryField,
+		resetOnChange: fieldObj.resetOnChange,
+		value: fieldObj.value,
+		autoselect: fieldObj.autoselect,
+		allowCustomValue: allowCustomValue ?? fieldObj.allowCustomValue,
+		customValueLabel: fieldObj.customValueLabel,
+		currentValue,
+		setFieldValue,
+		setFieldTouched
+	});
+}
+//#endregion
+//#region src/form/SpecialTypes/FormikMultiSelectDropdown.tsx
+function FormikMultiSelectDropdown({ name, options, setFormDirty, onChange, disabled = false, loading = false, invalid = false, placeholder, compareBy }) {
+	const [field] = useField(name);
+	const { setFieldValue, setFieldTouched } = useFormikContext();
+	const handleChange = (next) => {
+		setFieldValue(name, next);
+		setFieldTouched(name, true);
+		setFormDirty(true);
+		onChange?.(next);
+	};
+	return /* @__PURE__ */ jsx(MultiSelectDropdown, {
+		textBoxClassName: invalid ? "invalid" : void 0,
+		options,
+		value: Array.isArray(field.value) ? field.value : [],
+		onChange: handleChange,
+		disabled,
+		loading,
+		placeholder,
+		compareBy
+	});
+}
+//#endregion
+//#region src/form/utils/pwResolver.ts
+function resolvePwString(raw, options, fallbackUsername, opts) {
+	let inputForm = null;
+	let owner;
+	let name;
+	if (typeof raw === "string" && raw.startsWith("pw://")) {
+		const parts = raw.slice(5).split("/");
+		if (parts.length === 1 && parts[0]) {
+			inputForm = "shorthand";
+			name = parts[0];
+			owner = fallbackUsername;
+		} else if (parts.length === 2 && parts[0] && parts[1]) {
+			inputForm = "full";
+			owner = parts[0];
+			name = parts[1];
+		}
+	} else if (raw !== null && typeof raw === "object" && !Array.isArray(raw)) {
+		const obj = raw;
+		if (typeof obj.uri === "string" && obj.uri.startsWith("pw://")) {
+			const parts = obj.uri.slice(5).split("/");
+			if (parts.length === 1 && parts[0]) {
+				inputForm = "shorthand";
+				name = parts[0];
+				owner = fallbackUsername;
+			} else if (parts.length === 2 && parts[0] && parts[1]) {
+				inputForm = "full";
+				owner = parts[0];
+				name = parts[1];
+			}
+		} else if (typeof obj.name === "string") {
+			name = obj.name;
+			const ownerVal = typeof obj.user === "string" ? obj.user : typeof obj.namespace === "string" ? obj.namespace : void 0;
+			if (obj.type === "managed-cluster" || !ownerVal) {
+				inputForm = "shorthand";
+				owner = fallbackUsername;
+			} else {
+				inputForm = "full";
+				owner = ownerVal;
+			}
+		} else if (typeof obj.id === "string" && obj.id) {
+			inputForm = "shorthand";
+			name = obj.id;
+			owner = fallbackUsername;
+		}
+	}
+	if (!inputForm || !name || !owner) return raw;
+	const special = opts.specialCase?.(name, owner);
+	if (special !== void 0) return special;
+	const find = (pred) => {
+		for (const category of options) for (const opt of category.options) if (opt.value && pred(opt.value)) return opt.value;
+	};
+	if (inputForm === "full") return find((v) => v.name === name && v[opts.ownerKey] === owner) ?? raw;
+	const managed = find((v) => v.name === name && v.type === "managed-cluster");
+	if (managed) return managed;
+	const ownedByCaller = find((v) => v.name === name && v[opts.ownerKey] === fallbackUsername);
+	if (ownedByCaller) return ownedByCaller;
+	const sharedWithCaller = find((v) => v.name === name && typeof v[opts.ownerKey] === "string" && v[opts.ownerKey] !== fallbackUsername);
+	if (sharedWithCaller) return sharedWithCaller;
+	return raw;
+}
+function resolvePwValue(currentValue, options, fallbackUsername, opts) {
+	if (Array.isArray(currentValue)) {
+		let changed = false;
+		const next = currentValue.map((v) => {
+			const resolved = resolvePwString(v, options, fallbackUsername, opts);
+			if (resolved !== v) changed = true;
+			return resolved;
+		});
+		return changed ? next : currentValue;
+	}
+	return resolvePwString(currentValue, options, fallbackUsername, opts);
+}
+//#endregion
+//#region src/form/Fields/ResourceOptionIcon.tsx
+function ResourceOptionIcon({ imageUrl, fallbackIcon, alt, variant = "success", dotSize = 6 }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex items-center gap-1.5 shrink-0",
+		children: [/* @__PURE__ */ jsx(StatusDot, {
+			variant,
+			size: dotSize
+		}), /* @__PURE__ */ jsx("img", {
+			src: imageUrl || fallbackIcon,
+			alt,
+			className: "h-4 w-4 object-contain",
+			onError: (e) => {
+				e.currentTarget.src = fallbackIcon;
+			}
+		})]
+	});
+}
+//#endregion
+export { DropdownWrapper, DynamicDefaultsSync, DynamicForm, FLEX_MAX_DURATION_RANGE, FLEX_WAIT_TIME_RANGE, FieldRegistryContext, FieldWrapper, FieldsFromOptions, FormikCustomDropdown_default as FormikCustomDropdown, FormikCustomInput, FormikMultiSelectDropdown, FormikNumericInput, GroupHeader, MultiSelectionDropdown, NumberField, Registry, ResourceOptionIcon, STANDARD_MAX_DURATION_RANGE, StatusBlock, applySecondaryField, collectFieldsWithDefaults, collectPartitionDurationIssues, enforceOneMustBeTrue, findSelfReferencingFieldNames, flattenGroups, formatSecondsAsSlurmDuration, getInstanceTypesForForm, getInvalidDurationPaths, impureSetValueFromPath, initializeValues, parseSlurmDuration, resolveMetaOverrides, resolvePwString, resolvePwValue, resolvedFlag, setDurationValidity, useParsedOpts };