@parallelworks/ui 0.36.0 → 0.38.0

package/dist/editor/index.js

@@ -1,7 +1,11 @@
+import { INPUT_YAML_PATH, JOB_YAML_PATH, SETTINGS_YAML_PATH, STEP_YAML_PATH, settingsSchemas } from "./settingsYaml.js";
 import Editor from "./Editor.js";
 import EditorField from "./EditorField.js";
 import FormCodePanel from "./FormCodePanel.js";
+import { HOST_MARKER_OWNER, LINT_OWNER } from "./lintOwner.js";
+import { nestedWorkflowText } from "./nestedText.js";
+import { revealLines } from "./reveal.js";
 import { defineEditorThemes, getThemeName } from "./themes.js";
 import { setupMonacoWorkers } from "./workers.js";
 import { configureEditorYaml } from "./yaml.js";
-export { Editor, EditorField, FormCodePanel, configureEditorYaml, defineEditorThemes, getThemeName, setupMonacoWorkers };
+export { Editor, EditorField, FormCodePanel, HOST_MARKER_OWNER, INPUT_YAML_PATH, JOB_YAML_PATH, LINT_OWNER, SETTINGS_YAML_PATH, STEP_YAML_PATH, configureEditorYaml, defineEditorThemes, getThemeName, nestedWorkflowText, revealLines, settingsSchemas, setupMonacoWorkers };

package/dist/editor/lintContext.d.ts

@@ -0,0 +1,21 @@
+import type { WorkflowEditing, WorkflowLintContext } from '../editing.js';
+import { type UsesSources } from '../graph/usesInputs.js';
+export { HOST_MARKER_OWNER, LINT_OWNER } from './lintOwner.js';
+export interface LintSources extends UsesSources {
+    secrets?: (() => Promise<string[]>) | undefined;
+    /** `uses` values the host runs itself, which have no workflow to read inputs from. */
+    actions?: Record<string, unknown> | undefined;
+}
+/**
+ * What the linter can't read from `source`: the inputs of each workflow a step uses, and which
+ * of the user's variables are secret, as far as they have arrived. `onMore` runs when more does.
+ */
+export declare function lintContext(editing: WorkflowEditing, source: string, sources: LintSources, onMore: () => void): WorkflowLintContext;
+export declare function useLintSources(): LintSources;
+/** lintContext for a component, which renders again when more of it arrives. */
+export declare function useLintContext(source: string | undefined): WorkflowLintContext;
+/**
+ * The engine's editing once its checks have loaded, rendering again when they have; undefined
+ * before then, without an engine that edits, or with `load` false.
+ */
+export declare function useLintEditing(load?: boolean): WorkflowEditing | undefined;

package/dist/editor/lintContext.js

@@ -0,0 +1,136 @@
+import { useLoadedWorkflowEngine, useRepoSuggestions, useSecretVariablesResolver, useWorkflowActions, useWorkflowJsonResolver } from "../components/Provider.js";
+import { asRecord } from "../graph/records.js";
+import { HOST_MARKER_OWNER, LINT_OWNER } from "./lintOwner.js";
+import { DEFAULT_GITLAB_HOST, DEFAULT_REPO_YAML, loadUsesInputs } from "../graph/usesInputs.js";
+import { useEffect, useMemo, useState } from "react";
+//#region src/editor/lintContext.ts
+var KEEP_MS = 6e4;
+var KEEP_FAILED_MS = 1e4;
+var stale = (kept) => !kept || Date.now() - kept.at > (kept.value === null ? KEEP_FAILED_MS : KEEP_MS);
+function failed(kept) {
+	return kept?.value ? {
+		value: kept.value,
+		at: Date.now() - KEEP_MS + KEEP_FAILED_MS
+	} : {
+		value: null,
+		at: Date.now()
+	};
+}
+var targets = /* @__PURE__ */ new Map();
+var secretNames;
+var waiting = /* @__PURE__ */ new Map();
+var SECRETS = "\0secrets";
+function fetchOnce(key, onMore, load) {
+	const waiters = waiting.get(key);
+	if (waiters) {
+		waiters.add(onMore);
+		return;
+	}
+	const told = /* @__PURE__ */ new Set([onMore]);
+	waiting.set(key, told);
+	load().finally(() => {
+		waiting.delete(key);
+		for (const tell of told) tell();
+	});
+}
+var text = (value, fallback) => typeof value === "string" && value ? value : fallback;
+/**
+* What the linter can't read from `source`: the inputs of each workflow a step uses, and which
+* of the user's variables are secret, as far as they have arrived. `onMore` runs when more does.
+*/
+function lintContext(editing, source, sources, onMore) {
+	let doc;
+	try {
+		doc = editing.loadYaml(source);
+	} catch {
+		doc = void 0;
+	}
+	const wanted = /* @__PURE__ */ new Map();
+	for (const job of Object.values(asRecord(asRecord(doc)["jobs"]))) {
+		const steps = asRecord(job)["steps"];
+		for (const step of Array.isArray(steps) ? steps : []) {
+			const uses = asRecord(step)["uses"];
+			if (typeof uses !== "string" || uses.includes("${{") || Object.hasOwn(sources.actions ?? {}, uses.trim())) continue;
+			const withBlock = asRecord(asRecord(step)["with"]);
+			const key = [
+				uses.trim(),
+				text(withBlock["$yaml"], DEFAULT_REPO_YAML),
+				text(withBlock["$host"], DEFAULT_GITLAB_HOST)
+			].join("\n");
+			wanted.set(uses.trim(), (wanted.get(uses.trim()) ?? /* @__PURE__ */ new Set()).add(key));
+		}
+	}
+	const usesInputs = {};
+	for (const [uses, keys] of wanted) {
+		const key = keys.size === 1 ? [...keys][0] : void 0;
+		if (key === void 0) continue;
+		const kept = targets.get(key);
+		if (kept?.value) usesInputs[uses] = kept.value;
+		if (stale(kept)) {
+			const [, yamlPath = DEFAULT_REPO_YAML, host = DEFAULT_GITLAB_HOST] = key.split("\n");
+			fetchOnce(key, onMore, () => loadUsesInputs(editing, uses, {
+				yamlPath,
+				host
+			}, sources).then((inputs) => {
+				targets.set(key, {
+					value: inputs,
+					at: Date.now()
+				});
+			}, () => {
+				targets.set(key, failed(targets.get(key)));
+			}));
+		}
+	}
+	const secrets = sources.secrets;
+	if (secrets && stale(secretNames)) fetchOnce(SECRETS, onMore, () => secrets().then((names) => {
+		secretNames = {
+			value: names,
+			at: Date.now()
+		};
+	}, () => {
+		secretNames = failed(secretNames);
+	}));
+	return {
+		usesInputs,
+		...secretNames?.value ? { secretVars: secretNames.value } : {}
+	};
+}
+function useLintSources() {
+	const resolve = useWorkflowJsonResolver();
+	const repos = useRepoSuggestions();
+	const secrets = useSecretVariablesResolver();
+	const actions = useWorkflowActions();
+	return useMemo(() => ({
+		resolve,
+		repos,
+		secrets,
+		actions
+	}), [
+		resolve,
+		repos,
+		secrets,
+		actions
+	]);
+}
+/**
+* The engine's editing once its checks have loaded, rendering again when they have; undefined
+* before then, without an engine that edits, or with `load` false.
+*/
+function useLintEditing(load = true) {
+	const engine = useLoadedWorkflowEngine();
+	const [ready, setReady] = useState(() => !!engine?.isReady());
+	useEffect(() => {
+		if (!load || !engine?.editing) return;
+		if (engine.isReady()) {
+			setReady(true);
+			return;
+		}
+		engine.init();
+		return engine.onReady((loaded) => {
+			if (loaded) setReady(true);
+		});
+	}, [load, engine]);
+	return load && ready ? engine?.editing : void 0;
+}
+//#endregion
+export { HOST_MARKER_OWNER, LINT_OWNER, lintContext, useLintEditing, useLintSources };

package/dist/editor/lintOwner.d.ts

@@ -0,0 +1,2 @@
+export declare const LINT_OWNER = "workflowlint";
+export declare const HOST_MARKER_OWNER = "workflowmarkers";

package/dist/editor/lintOwner.js

@@ -0,0 +1,5 @@
+//#region src/editor/lintOwner.ts
+var LINT_OWNER = "workflowlint";
+var HOST_MARKER_OWNER = "workflowmarkers";
+//#endregion
+export { HOST_MARKER_OWNER, LINT_OWNER };

package/dist/editor/nestedText.d.ts

@@ -0,0 +1,13 @@
+/** An editor holding one job or step of a workflow, whose inputs live outside its text. */
+export interface NestedWorkflowText {
+    /** The workflow's inputs, so a new group is named clear of them. */
+    inputs: () => Record<string, unknown>;
+    /** Adds the group of inputs a `with:` completion's expressions read. */
+    addInputs: (name: string, definition: Record<string, unknown>) => void;
+}
+/** Lets completions reach the workflow around the editor of model `uri`; returns the undo. */
+export declare function publishNestedText(uri: string, text: {
+    current: NestedWorkflowText | undefined;
+}): () => void;
+/** The workflow around the editor of model `uri`, or undefined when its text is a whole workflow. */
+export declare function nestedWorkflowText(uri: string): NestedWorkflowText | undefined;

package/dist/editor/nestedText.js

@@ -0,0 +1,15 @@
+//#region src/editor/nestedText.ts
+var published = /* @__PURE__ */ new Map();
+/** Lets completions reach the workflow around the editor of model `uri`; returns the undo. */
+function publishNestedText(uri, text) {
+	published.set(uri, text);
+	return () => {
+		if (published.get(uri) === text) published.delete(uri);
+	};
+}
+/** The workflow around the editor of model `uri`, or undefined when its text is a whole workflow. */
+function nestedWorkflowText(uri) {
+	return published.get(uri)?.current;
+}
+//#endregion
+export { nestedWorkflowText, publishNestedText };

package/dist/editor/reveal.d.ts

@@ -0,0 +1,4 @@
+/** Lets revealLines reach the editor showing `path`; returns the function that undoes it. */
+export declare function registerRevealer(path: string, reveal: (start: number, end: number) => void): () => void;
+/** Scrolls the editor showing `path` to 1-based lines `start`–`end` and flashes them. */
+export declare function revealLines(path: string, start: number, end: number): void;

package/dist/editor/reveal.js

@@ -0,0 +1,15 @@
+//#region src/editor/reveal.ts
+var revealers = /* @__PURE__ */ new Map();
+/** Lets revealLines reach the editor showing `path`; returns the function that undoes it. */
+function registerRevealer(path, reveal) {
+	revealers.set(path, reveal);
+	return () => {
+		if (revealers.get(path) === reveal) revealers.delete(path);
+	};
+}
+/** Scrolls the editor showing `path` to 1-based lines `start`–`end` and flashes them. */
+function revealLines(path, start, end) {
+	revealers.get(path)?.(start, end);
+}
+//#endregion
+export { registerRevealer, revealLines };

package/dist/editor/settingsYaml.d.ts

@@ -0,0 +1,12 @@
+/** Editors holding one job's, step's or input's settings, each checked against that part of the workflow schema. */
+export declare const JOB_YAML_PATH = "file:///workflow-job.yaml";
+export declare const STEP_YAML_PATH = "file:///workflow-step.yaml";
+export declare const INPUT_YAML_PATH = "file:///workflow-input.yaml";
+export declare const SETTINGS_YAML_PATH = "file:///workflow-settings.yaml";
+export type JsonSchema = Record<string, unknown>;
+export declare function settingsSchemas(workflow: JsonSchema): {
+    job: JsonSchema;
+    step: JsonSchema;
+    input: JsonSchema;
+    settings: JsonSchema;
+};

package/dist/editor/settingsYaml.js

@@ -0,0 +1,41 @@
+//#region src/editor/settingsYaml.ts
+/** Editors holding one job's, step's or input's settings, each checked against that part of the workflow schema. */
+var JOB_YAML_PATH = "file:///workflow-job.yaml";
+var STEP_YAML_PATH = "file:///workflow-step.yaml";
+var INPUT_YAML_PATH = "file:///workflow-input.yaml";
+var SETTINGS_YAML_PATH = "file:///workflow-settings.yaml";
+var record = (value) => typeof value === "object" && value !== null ? value : {};
+function settingsSchemas(workflow) {
+	const patterns = record(record(record(workflow["properties"])["jobs"])["patternProperties"]);
+	const job = record(Object.values(patterns)[0]);
+	const step = record(record(record(job["properties"])["steps"])["items"]);
+	const inputs = record(record(record(workflow["$defs"])["inputs"])["patternProperties"]);
+	const input = record(Object.values(inputs)[0]);
+	const shared = {
+		$schema: workflow["$schema"],
+		$defs: workflow["$defs"]
+	};
+	const { jobs: _jobs, on: _on, ...settings } = record(workflow["properties"]);
+	return {
+		job: {
+			...job,
+			...shared
+		},
+		step: {
+			...step,
+			...shared
+		},
+		input: {
+			...input,
+			...shared
+		},
+		settings: {
+			type: "object",
+			properties: settings,
+			additionalProperties: false,
+			...shared
+		}
+	};
+}
+//#endregion
+export { INPUT_YAML_PATH, JOB_YAML_PATH, SETTINGS_YAML_PATH, STEP_YAML_PATH, settingsSchemas };

package/dist/form/FieldWrapper.js

@@ -27,6 +27,7 @@ function FieldWrapper({ label, tooltipComponent, description, labelPosition = "l
 		children: [/* @__PURE__ */ jsxs("label", {
 			htmlFor: id,
 			id: labelId,
+			"data-field-label": true,
 			className: cx("relative", labelPosition === "left" ? "form-label" : "form-label-top", spaceCompact && "form-label-compact"),
 			children: [
 				label,

package/dist/form/Fields/DropdownField.js

@@ -1,7 +1,7 @@
 import { FieldWrapper } from "../FieldWrapper.js";
 import FormikCustomDropdown_default from "../SpecialTypes/FormikCustomDropdown.js";
-import { getPlaceholder } from "../utils/getPlaceholder.js";
 import { dependentOptions } from "../utils/dependentOptions.js";
+import { getPlaceholder } from "../utils/getPlaceholder.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/form/Fields/DropdownField.tsx
 var missingSetter = () => {

package/dist/form/Fields/DurationField.js

@@ -1,7 +1,7 @@
 import { useStrings } from "../../components/Provider.js";
 import { FieldWrapper } from "../FieldWrapper.js";
-import { setDurationValidity } from "./durationValidity.js";
 import { formatDuration, parseDuration } from "../utils/duration.js";
+import { setDurationValidity } from "./durationValidity.js";
 import cx from "classnames";
 import { memo, useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/form/Form.js

@@ -9,11 +9,12 @@ import SectionHeader from "../components/SectionHeader.js";
 import { Table } from "../components/Table.js";
 import { parseWizardConfig } from "./Wizard/utils.js";
 import { inputWidth, resolvedFlag } from "./lib.js";
-import { useFieldControlProps, useFieldRequired } from "./fieldContext.js";
 import { resolveFormLayout } from "./layout.js";
 import { FormLayout, LayoutCSSContext } from "./FormLayout.js";
+import { useFieldControlProps, useFieldRequired } from "./fieldContext.js";
 import { getValueUsingPath } from "./utils/getValueUsingPath.js";
 import { FieldRegistryContext, Registry } from "./fieldRegistry.js";
+import { EditingScope, useFormEditing } from "./formEditing.js";
 import { useParsedOpts } from "./useParsedOpts.js";
 import { usePrevious } from "./usePrevious.js";
 import { getParentValue } from "./utils/getParentValue.js";
@@ -209,6 +210,7 @@ function GroupHeader({ children, open, setOpen, title }) {
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
 			"aria-expanded": open,
+			"data-field-label": true,
 			className: "w-full flex items-center text-left transform ease-in transition cursor-pointer",
 			onClick: () => setOpen((open) => !open),
 			children: [/* @__PURE__ */ jsx(FaAngleRight, { className: cx(open && "transform rotate-90 ", "px-1 text-[1.25rem]  transition ease-in ") }), /* @__PURE__ */ jsx("span", { children: title })]
@@ -393,6 +395,8 @@ function useFieldParse(optionsField, values, arrayIndex) {
 }
 var FormField = React.memo(function FormField({ optionsField, fieldName, values, setFormDirty, setFieldValue, setFieldTouched, parentInfo, labelPosition = "left", missingFields = [], spaceCompact = false, workflowForm = false }) {
 	const parsedField = useFieldParse(optionsField, values, parentInfo?.arrayIndex);
+	const editing = useFormEditing();
+	const path = editing ? [...editing.parent, fieldName] : null;
 	const field = asSchemaField(parentInfo ? parsedField : optionsField);
 	if (field === null) return null;
 	const fieldNamePrefix = parentInfo?.fieldNamePrefix || "";
@@ -405,7 +409,11 @@ var FormField = React.memo(function FormField({ optionsField, fieldName, values,
 	if (!fieldObj.name || fieldName === "v3") return null;
 	if (field.hidden === true || !field.type) {
 		if (resolvedFlag(field.ignore) && !workflowForm) deleteFieldByPath(values, fieldObj.name);
-		return null;
+		return editing && path && fieldName !== "$meta" ? /* @__PURE__ */ jsx(editing.Row, {
+			path,
+			instance: fieldObj.name,
+			hidden: true
+		}) : null;
 	}
 	let onChange;
 	if (field.one_must_be_true && parentInfo?.onChange) {
@@ -421,7 +429,11 @@ var FormField = React.memo(function FormField({ optionsField, fieldName, values,
 		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;
+			return editing && path ? /* @__PURE__ */ jsx(editing.Row, {
+				path,
+				instance: fieldObj.name,
+				hidden: true
+			}) : null;
 		}
 	}
 	if (field.depends_on && parentInfo?.arrayIndex !== void 0) fieldObj.depends_on = field.depends_on.replace("[index]", `[${parentInfo.arrayIndex}]`);
@@ -436,7 +448,7 @@ var FormField = React.memo(function FormField({ optionsField, fieldName, values,
 		const hideHeader = field.noCollapse;
 		const HeaderElement = hideHeader ? React.Fragment : UncontrolledCollapsiblePanel;
 		const meta = resolveMetaOverrides(field.options, labelPosition, spaceCompact);
-		return /* @__PURE__ */ jsx("div", {
+		const group = /* @__PURE__ */ jsx("div", {
 			className: "flex flex-col w-full",
 			children: /* @__PURE__ */ jsx(HeaderElement, {
 				...!hideHeader && {
@@ -449,21 +461,30 @@ var FormField = React.memo(function FormField({ optionsField, fieldName, values,
 				},
 				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
+					children: /* @__PURE__ */ jsx(EditingScope, {
+						editing,
+						path,
+						children: /* @__PURE__ */ jsx(FieldsFromOptions, {
+							options: field.options ?? {},
+							setFormDirty,
+							setFieldValue,
+							setFieldTouched,
+							values,
+							parentInfo,
+							workflowForm,
+							labelPosition: meta.labelPosition,
+							spaceCompact: meta.spaceCompact,
+							missingFields
+						})
 					})
 				})
 			})
 		});
+		return editing && path ? /* @__PURE__ */ jsx(editing.Row, {
+			path,
+			instance: fieldObj.name,
+			children: group
+		}) : group;
 	}
 	if (typeof field.type === "object" && field.depends_on) {
 		const parentValue = getValueUsingPath(values, field.depends_on);
@@ -489,7 +510,7 @@ var FormField = React.memo(function FormField({ optionsField, fieldName, values,
 		if (Array.isArray(field.secondaryField)) fieldObj.secondaryField = field.secondaryField.map((secondaryField) => fieldNamePrefix + secondaryField);
 		else fieldObj.secondaryField = fieldNamePrefix + field.secondaryField;
 	}
-	return /* @__PURE__ */ jsx("div", {
+	const input = /* @__PURE__ */ jsx("div", {
 		className: cx("flex w-full", labelPosition === "left" ? "mb-[15px]" : "mb-[5px]"),
 		children: /* @__PURE__ */ jsx(InputField, {
 			field: fieldObj,
@@ -508,6 +529,17 @@ var FormField = React.memo(function FormField({ optionsField, fieldName, values,
 			workflowForm
 		})
 	});
+	if (!editing || !path) return input;
+	const holds = fieldObj.type === "object" || fieldObj.type === "list";
+	return /* @__PURE__ */ jsx(editing.Row, {
+		path,
+		instance: fieldObj.name,
+		children: /* @__PURE__ */ jsx(EditingScope, {
+			editing,
+			path: holds ? path : null,
+			children: input
+		})
+	});
 }, (prev, next) => {
 	if (!deepEqual(prev.optionsField, next.optionsField)) return false;
 	if (prev.values !== next.values) return false;
@@ -519,6 +551,7 @@ var FormField = React.memo(function FormField({ optionsField, fieldName, values,
 	return true;
 });
 function FieldsFromOptions({ options = {}, values, setFormDirty, setFieldValue, setFieldTouched, parentInfo, labelPosition = "left", missingFields = [], spaceCompact = false, workflowForm = false }) {
+	const editing = useFormEditing();
 	const chosen = useChosenLabelPosition(options);
 	const wizard = parseWizardConfig(options);
 	if (wizard) return /* @__PURE__ */ jsx(ChosenLabelPosition.Provider, {
@@ -556,22 +589,27 @@ function FieldsFromOptions({ options = {}, values, setFormDirty, setFieldValue,
 		spaceCompact,
 		workflowForm
 	}, fieldName);
+	const add = editing ? /* @__PURE__ */ jsx(editing.Add, { parent: editing.parent }) : null;
 	const layout = resolveFormLayout(asRecord(options["$meta"])["layout"], names.filter((name) => !name.startsWith("$") && asSchemaField(options[name])));
 	if (layout.layout) return /* @__PURE__ */ jsx(ChosenLabelPosition.Provider, {
 		value: chosen,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 flex-col gap-4",
-			children: [/* @__PURE__ */ jsx(FormLayout, {
-				layout: layout.layout,
-				renderField: (name) => fieldOf(name, true)
-			}), layout.remaining.map((name) => fieldOf(name, true))]
+			children: [
+				/* @__PURE__ */ jsx(FormLayout, {
+					layout: layout.layout,
+					renderField: (name) => fieldOf(name, true)
+				}),
+				layout.remaining.map((name) => fieldOf(name, true)),
+				add
+			]
 		})
 	});
 	return /* @__PURE__ */ jsx(ChosenLabelPosition.Provider, {
 		value: chosen,
-		children: flows ? /* @__PURE__ */ jsx("div", {
+		children: flows ? /* @__PURE__ */ jsxs("div", {
 			className: "@container/inputs -mx-2 flex flex-wrap items-start",
-			children: columns.map((column) => {
+			children: [columns.map((column) => {
 				const width = inputWidth(asRecord(options[column.head])["width"]);
 				return /* @__PURE__ */ jsx("div", {
 					"data-input-cell": true,
@@ -587,8 +625,11 @@ function FieldsFromOptions({ options = {}, values, setFormDirty, setFieldValue,
 						}, name);
 					})
 				}, column.head);
-			})
-		}) : names.map((name) => fieldOf(name))
+			}), add && /* @__PURE__ */ jsx("div", {
+				className: "order-2 w-full px-2",
+				children: add
+			})]
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [names.map((name) => fieldOf(name, void 0)), add] })
 	});
 }
 var noop = () => {};

package/dist/form/Wizard/WizardContainer.js

@@ -2,16 +2,21 @@ import { useStrings, useWorkflowEngine } from "../../components/Provider.js";
 import { copyBounds, stepText } from "./utils.js";
 import { initializeValues } from "../lib.js";
 import { getValueUsingPath } from "../utils/getValueUsingPath.js";
+import { useFormEditing } from "../formEditing.js";
 import { useWizardState } from "./useWizardState.js";
 import { WizardNavigation } from "./WizardNavigation.js";
 import { WizardStepContent } from "./WizardStepContent.js";
 import { WizardStepIndicator } from "./WizardStepIndicator.js";
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { WizardPagesContext } from "./wizardPages.js";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useFormikContext } from "formik";
 //#region src/form/Wizard/WizardContainer.tsx
 function WizardContainer({ wizardConfig, values, onChange, onSubmit, className = "", labelPosition = "left", missingFields = [], spaceCompact = false, workflowForm = false, nested = false, fieldNamePrefix = "", setFieldValue, setFieldTouched }) {
 	const { validateForm, setTouched, touched, initialValues } = useFormikContext();
+	const editing = useFormEditing();
+	const pages = useContext(WizardPagesContext);
+	const [ownPage, setOwnPage] = useState(0);
 	const { form: strings } = useStrings();
 	const engine = useWorkflowEngine();
 	const { config, steps, stepOrder } = wizardConfig;
@@ -197,19 +202,39 @@ function WizardContainer({ wizardConfig, values, onChange, onSubmit, className =
 		touched,
 		onSubmit
 	]);
+	const last = Math.max(shown.order.length - 1, 0);
+	const wizardKey = editing ? JSON.stringify(editing.parent) : "";
+	const editIndex = Math.min(Math.max(pages ? pages.page(wizardKey) : ownPage, 0), last);
+	const turn = (to) => {
+		const next = Math.max(to, 0);
+		if (pages) pages.setPage(wizardKey, next);
+		else setOwnPage(next);
+	};
+	const drawn = shown.order.length;
+	const setCount = pages?.setCount;
+	useEffect(() => {
+		setCount?.(wizardKey, drawn);
+	}, [
+		setCount,
+		wizardKey,
+		drawn
+	]);
 	const shownBefore = useRef(shown.order);
 	useEffect(() => {
 		shownBefore.current = shown.order;
 	});
-	const pageKey = shown.byKey[currentStep] ? currentStep : nearestPage(currentStep, shown.order, shownBefore.current);
+	const runKey = shown.byKey[currentStep] ? currentStep : nearestPage(currentStep, shown.order, shownBefore.current);
 	useEffect(() => {
-		if (pageKey && pageKey !== currentStep) showStep(pageKey);
+		if (!editing && runKey && runKey !== currentStep) showStep(runKey);
 	}, [
-		pageKey,
+		editing,
+		runKey,
 		currentStep,
 		showStep
 	]);
+	const pageKey = editing ? shown.order[editIndex] ?? "" : runKey;
 	const page = shown.byKey[pageKey];
+	const show = (key, index) => editing ? turn(index) : showStep(key);
 	const copiesOf = (step) => {
 		const rows = getValueUsingPath(values, `${fieldNamePrefix}${step}`);
 		return Array.isArray(rows) ? rows : [];
@@ -220,13 +245,15 @@ function WizardContainer({ wizardConfig, values, onChange, onSubmit, className =
 		const kept = Array.from({ length: shownPage.count ?? rows.length }, (_, i) => rows[i] ?? initializeValues(options, {}) ?? {});
 		const aside = setAside.current[`${fieldNamePrefix}${shownPage.step}`] ?? [];
 		setFieldValue(`${fieldNamePrefix}${shownPage.step}`, [...kept, takeAside(aside, kept.length) ?? initializeValues(options, {}) ?? {}]);
-		showStep(`${shownPage.step}[${kept.length}]`);
+		const at = shown.order.indexOf(pageKey) + (shownPage.copy === void 0 ? 0 : 1);
+		show(`${shownPage.step}[${kept.length}]`, at);
 	};
 	const removeCopy = (shownPage) => {
 		const copy = shownPage.copy ?? 0;
 		const rows = copiesOf(shownPage.step).filter((_, i) => i !== copy);
 		setFieldValue(`${fieldNamePrefix}${shownPage.step}`, rows);
-		showStep(rows.length > 0 ? `${shownPage.step}[${Math.max(copy - 1, 0)}]` : shownPage.step);
+		const at = shown.order.indexOf(pageKey) - (copy > 0 ? 1 : 0);
+		show(rows.length > 0 ? `${shownPage.step}[${Math.max(copy - 1, 0)}]` : shownPage.step, at);
 	};
 	const rawTitle = page ? steps[page.step]?.title : void 0;
 	const titledPerCopy = Array.isArray(rawTitle) || typeof rawTitle === "string" && rawTitle.includes("${{");
@@ -264,6 +291,39 @@ function WizardContainer({ wizardConfig, values, onChange, onSubmit, className =
 			setFieldTouched
 		}), copies]
 	}) : null;
+	if (editing) return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [
+			navigation.showSteps !== false && /* @__PURE__ */ jsx(WizardStepIndicator, {
+				stepOrder: shown.order,
+				currentStep: pageKey,
+				steps: configs,
+				visitedSteps: new Set(shown.order),
+				invalidSteps: /* @__PURE__ */ new Set(),
+				onStepClick: (key) => {
+					turn(shown.order.indexOf(key));
+					return true;
+				},
+				allowJump: true,
+				hideStepNumbers: navigation.hideStepNumbers
+			}),
+			content,
+			/* @__PURE__ */ jsx(WizardNavigation, {
+				isLastStep: editIndex === last,
+				canGoBack: editIndex > 0,
+				isCurrentStepValid: true,
+				nextLabel: page?.config.nextLabel,
+				prevLabel: page?.config.prevLabel,
+				submitLabel: config.submitLabel || "Execute",
+				onNext: async () => {
+					turn(editIndex + 1);
+					return true;
+				},
+				onPrevious: () => turn(editIndex - 1),
+				onSubmit: nested ? void 0 : async () => {}
+			})
+		]
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className,
 		children: [