@parallelworks/ui 0.37.0 → 0.38.0

package/dist/ai/components/ChatSidebar.js

@@ -2,18 +2,19 @@ import { FaRegFileImage } from "../../icons/fa/FaRegFileImage.js";
 import { FaSearch } from "../../icons/fa/FaSearch.js";
 import { FaUsers } from "../../icons/fa/FaUsers.js";
 import { TbEdit } from "../../icons/tb/TbEdit.js";
+import { useRelativeTime } from "../../components/relativeTime.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
 import { ManageProvidersLink } from "./ComposerChrome.js";
 import { FOCUS_SIDEBAR_SEARCH_EVENT } from "../core/events.js";
-import { SidebarPlaceholder, SidebarRow } from "../ui/sidebar.js";
+import { SidebarPlaceholder, SidebarRow, SidebarRowTitle } from "../ui/sidebar.js";
 import { ConversationSidebar } from "../ui/ConversationSidebar.js";
 import { groupConversationsByDate, useConversationActions } from "./conversationActions.js";
 import cx from "classnames";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ChatSidebar.tsx
-function ConversationRow({ conv, isCurrent, menuItems, openMenu, onOpen }) {
+function ConversationRow({ conv, isCurrent, updated, menuItems, openMenu, onOpen }) {
 	const { LinkComponent, strings } = useChatConfig();
 	const t = strings.sidebar;
 	return /* @__PURE__ */ jsx(SidebarRow, {
@@ -30,8 +31,8 @@ function ConversationRow({ conv, isCurrent, menuItems, openMenu, onOpen }) {
 			children: [conv.isOwner === false && /* @__PURE__ */ jsx(FaUsers, {
 				className: "h-3 w-3 shrink-0 theme-muted-text",
 				title: t.sharedWithYou
-			}), /* @__PURE__ */ jsx("span", {
-				className: "min-w-0 flex-1 truncate text-sm theme-text",
+			}), /* @__PURE__ */ jsx(SidebarRowTitle, {
+				time: updated,
 				children: conv.title || t.untitled
 			})]
 		})
@@ -43,6 +44,7 @@ function ChatSidebar({ actions = true, top }) {
 	const { adapter, navigation, activeConversationId, conversations, sidebar, sidebarPresentation, drawerOpen, setSidebar, setDrawerOpen, toggleSidebar, isLoading, loadConversations, clearCurrentConversation } = useChat();
 	const attachmentsAvailable = !!adapter.attachments;
 	const { menuItems, openMenu, overlays } = useConversationActions();
+	const { compact } = useRelativeTime();
 	const drawer = sidebarPresentation === "drawer";
 	const sidebarCollapsed = !drawer && sidebar !== "expanded";
 	const closeDrawer = () => setDrawerOpen(false);
@@ -106,6 +108,7 @@ function ChatSidebar({ actions = true, top }) {
 		renderRow: (conv) => /* @__PURE__ */ jsx(ConversationRow, {
 			conv,
 			isCurrent: activeConversationId === conv.id,
+			updated: compact(conv.updatedAt ?? conv.createdAt),
 			menuItems: menuItems(conv),
 			openMenu,
 			onOpen: closeDrawer

package/dist/ai/index.d.ts

@@ -43,5 +43,5 @@ export * from './types.js';
 export { ConversationSidebar, type ConversationSidebarGroup, useResizableSidebarWidth, } from './ui/ConversationSidebar.js';
 export { type DropdownOption, default as Dropdown } from './ui/Dropdown.js';
 export { NoticeBar, NoticeCard, type NoticeTone, OutputCard } from './ui/Notice.js';
-export { RenameDialog, type RowDialogStrings, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarPlaceholder, SidebarRailItem, SidebarRow, SidebarToggle, useRowDialogs, } from './ui/sidebar.js';
+export { RenameDialog, type RowDialogStrings, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarPlaceholder, SidebarRailItem, SidebarRow, SidebarRowTitle, SidebarToggle, useRowDialogs, } from './ui/sidebar.js';
 export { formatFileSize, isMac, isOrgModel } from './utils.js';

package/dist/ai/index.js

@@ -37,7 +37,7 @@ import ChatEmptyState from "./components/ChatEmptyState.js";
 import { FOCUS_SIDEBAR_SEARCH_EVENT } from "./core/events.js";
 import { useKeyboardShortcuts } from "./core/useKeyboardShortcuts.js";
 import { KeyboardShortcutsProvider } from "./core/KeyboardShortcutsProvider.js";
-import { RenameDialog, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarPlaceholder, SidebarRailItem, SidebarRow, SidebarToggle, useRowDialogs } from "./ui/sidebar.js";
+import { RenameDialog, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarPlaceholder, SidebarRailItem, SidebarRow, SidebarRowTitle, SidebarToggle, useRowDialogs } from "./ui/sidebar.js";
 import { ConversationSidebar, useResizableSidebarWidth } from "./ui/ConversationSidebar.js";
 import ShareDialog, { ShareButton } from "./components/ShareDialog.js";
 import { groupConversationsByDate, useConversationActions } from "./components/conversationActions.js";
@@ -46,4 +46,4 @@ import ChatLayout, { CHAT_COLUMN_SCOPE, ConversationLayout, DRAWER_BELOW_PX } fr
 import ChatMessage_default from "./components/ChatMessage.js";
 import ChatMessageList from "./components/ChatMessageList.js";
 import ChatThread from "./components/ChatThread.js";
-export { AGENT_COLOR_NAMES, ActivityLine, AgentMessageParts, AllocationSelector, ApprovalBlock, AttachmentManager, AttachmentUpload, BlockedGroupBanner, BranchNavigator, CHAT_COLUMN_SCOPE, ChatAdapterError, ChatEmptyState, ChatInput, ChatLayout, ChatMessageList, ChatMessage_default as ChatMessageView, ChatProvider, ChatSidebar, ChatStage, ChatThread, ComposerContext, ComposerControls, ComposerSettings, ComposerUsage, ConnectToolsLink, ConversationLayout, ConversationSidebar, DEFAULT_PERMISSION_MODE, DRAWER_BELOW_PX, DragOverlay, Dropdown, FOCUS_SIDEBAR_SEARCH_EVENT, INTERRUPTED_NOTICE, KeyboardShortcutsProvider, MAX_EDIT_DIFF_LINES, MAX_WRITE_DIFF_LINES, ManageProvidersLink, ModelSelector, NAMED_PERMISSION_MODES, NoticeBar, NoticeCard, OutputCard, PermissionPicker, ProviderIssueBanner, RenameDialog, ShareButton, ShareDialog, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarPlaceholder, SidebarRailItem, SidebarRow, SidebarToggle, agentColorHex, agentTypeLabel, applyPartDelta, askQuestionFromArgs, bashExitCode, chatReducer, clampPermissionMode, classifyPseudoUserMessage, clip, compactCount, computeEditDiff, computeWriteRows, defaultChatStrings, durationToAbsHumanDuration, editSummary, finalizeParts, firstNonEmptyLine, formatElapsed, formatFileSize, fullToolArgs, getGreeting, getProviderKeyFromModelId, groupConversationsByDate, hiddenTranscriptTool, initialState, interruptionNotice, isEditDiffTool, isGroupableTool, isMac, isNamedPermissionMode, isOrgModel, languageForPath, lineDelta, parseEditArgs, parseSubagentNotice, pasteInlineMaxBytes, permissionModesUpTo, planFromArgs, plural, providerIssueFor, resolveChatConfig, resultFailed, rollupSentence, sanitizeLabel, sanitizePanelText, slashMatches, subagentDeliveryLine, summarizeToolArgs, taskCallFromArgs, thinkingHeading, tokenizeDiffLines, toolHeaderFor, toolSummary, useChat, useChatConfig, useConversationActions, useDragDrop, useKeyboardShortcuts, useResizableSidebarWidth, useRowDialogs, wordEmphasisRanges };
+export { AGENT_COLOR_NAMES, ActivityLine, AgentMessageParts, AllocationSelector, ApprovalBlock, AttachmentManager, AttachmentUpload, BlockedGroupBanner, BranchNavigator, CHAT_COLUMN_SCOPE, ChatAdapterError, ChatEmptyState, ChatInput, ChatLayout, ChatMessageList, ChatMessage_default as ChatMessageView, ChatProvider, ChatSidebar, ChatStage, ChatThread, ComposerContext, ComposerControls, ComposerSettings, ComposerUsage, ConnectToolsLink, ConversationLayout, ConversationSidebar, DEFAULT_PERMISSION_MODE, DRAWER_BELOW_PX, DragOverlay, Dropdown, FOCUS_SIDEBAR_SEARCH_EVENT, INTERRUPTED_NOTICE, KeyboardShortcutsProvider, MAX_EDIT_DIFF_LINES, MAX_WRITE_DIFF_LINES, ManageProvidersLink, ModelSelector, NAMED_PERMISSION_MODES, NoticeBar, NoticeCard, OutputCard, PermissionPicker, ProviderIssueBanner, RenameDialog, ShareButton, ShareDialog, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarPlaceholder, SidebarRailItem, SidebarRow, SidebarRowTitle, SidebarToggle, agentColorHex, agentTypeLabel, applyPartDelta, askQuestionFromArgs, bashExitCode, chatReducer, clampPermissionMode, classifyPseudoUserMessage, clip, compactCount, computeEditDiff, computeWriteRows, defaultChatStrings, durationToAbsHumanDuration, editSummary, finalizeParts, firstNonEmptyLine, formatElapsed, formatFileSize, fullToolArgs, getGreeting, getProviderKeyFromModelId, groupConversationsByDate, hiddenTranscriptTool, initialState, interruptionNotice, isEditDiffTool, isGroupableTool, isMac, isNamedPermissionMode, isOrgModel, languageForPath, lineDelta, parseEditArgs, parseSubagentNotice, pasteInlineMaxBytes, permissionModesUpTo, planFromArgs, plural, providerIssueFor, resolveChatConfig, resultFailed, rollupSentence, sanitizeLabel, sanitizePanelText, slashMatches, subagentDeliveryLine, summarizeToolArgs, taskCallFromArgs, thinkingHeading, tokenizeDiffLines, toolHeaderFor, toolSummary, useChat, useChatConfig, useConversationActions, useDragDrop, useKeyboardShortcuts, useResizableSidebarWidth, useRowDialogs, wordEmphasisRanges };

package/dist/ai/ui/sidebar.d.ts

@@ -43,6 +43,12 @@ export declare function SidebarPlaceholder({ children, testId, }: {
     children: ReactNode;
     testId?: string | undefined;
 }): import("react").JSX.Element;
+/** A row's first line, the same in every list: what it is, and when it last
+ *  moved, abbreviated, on the right. */
+export declare function SidebarRowTitle({ children, time, }: {
+    children: ReactNode;
+    time?: string | undefined;
+}): import("react").JSX.Element;
 /** One entry in the list: the row highlights while it is the open one or
  *  while its menu is up, and the menu opens from its button or a right-click. */
 export declare function SidebarRow({ selected, menuItems, openMenu, className, children, }: {

package/dist/ai/ui/sidebar.js

@@ -85,6 +85,20 @@ function SidebarPlaceholder({ children, testId }) {
 		children
 	});
 }
+/** A row's first line, the same in every list: what it is, and when it last
+*  moved, abbreviated, on the right. */
+function SidebarRowTitle({ children, time }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex min-w-0 flex-1 items-baseline gap-2",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "min-w-0 flex-1 truncate text-sm theme-text",
+			children
+		}), time && /* @__PURE__ */ jsx("span", {
+			className: "min-w-8 shrink-0 text-[11px] tabular-nums theme-muted-text",
+			children: time
+		})]
+	});
+}
 /** One entry in the list: the row highlights while it is the open one or
 *  while its menu is up, and the menu opens from its button or a right-click. */
 function SidebarRow({ selected, menuItems, openMenu, className, children }) {
@@ -191,4 +205,4 @@ function useRowDialogs({ strings, nameOf, onDelete, onRename }) {
 	};
 }
 //#endregion
-export { RenameDialog, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarPlaceholder, SidebarRailItem, SidebarRow, SidebarToggle, useRowDialogs };
+export { RenameDialog, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarPlaceholder, SidebarRailItem, SidebarRow, SidebarRowTitle, SidebarToggle, useRowDialogs };

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/Form.js

@@ -14,6 +14,7 @@ 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: [

package/dist/form/Wizard/WizardStepContent.js

@@ -1,9 +1,12 @@
 import { stepText } from "./utils.js";
+import { EditingScope, useFormEditing } from "../formEditing.js";
 import { FieldsFromOptions } from "../Form.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/form/Wizard/WizardStepContent.tsx
 function WizardStepContent({ currentStep, stepConfig, flatten = true, values, setFormDirty, setFieldValue, setFieldTouched, fieldNamePrefix = "", copy, ...fieldsProps }) {
+	const editing = useFormEditing();
 	if (!stepConfig.options) return null;
+	const path = editing ? [...editing.parent, currentStep] : null;
 	const parentInfo = copy !== void 0 ? {
 		parentName: currentStep,
 		fieldNamePrefix: `${fieldNamePrefix}${currentStep}[${copy}].`,
@@ -15,7 +18,7 @@ function WizardStepContent({ currentStep, stepConfig, flatten = true, values, se
 		parentName: fieldNamePrefix.slice(0, -1),
 		fieldNamePrefix
 	} : void 0;
-	return /* @__PURE__ */ jsxs("div", {
+	const content = /* @__PURE__ */ jsxs("div", {
 		className: "mb-4 w-full",
 		children: [
 			stepText(stepConfig.title) && /* @__PURE__ */ jsx("h2", {
@@ -28,17 +31,27 @@ function WizardStepContent({ currentStep, stepConfig, flatten = true, values, se
 				style: { color: "var(--theme-muted-text-color)" },
 				children: stepText(stepConfig.description)
 			}),
-			/* @__PURE__ */ jsx(FieldsFromOptions, {
-				options: stepConfig.options,
-				values,
-				setFormDirty,
-				setFieldValue,
-				setFieldTouched,
-				...parentInfo ? { parentInfo } : {},
-				...fieldsProps
-			}, copy === void 0 ? currentStep : `${currentStep}[${copy}]`)
+			/* @__PURE__ */ jsx(EditingScope, {
+				editing,
+				path,
+				children: /* @__PURE__ */ jsx(FieldsFromOptions, {
+					options: stepConfig.options,
+					values,
+					setFormDirty,
+					setFieldValue,
+					setFieldTouched,
+					...parentInfo ? { parentInfo } : {},
+					...fieldsProps
+				}, copy === void 0 ? currentStep : `${currentStep}[${copy}]`)
+			})
 		]
 	});
+	const instance = `${fieldNamePrefix}${currentStep}${copy === void 0 ? "" : `[${copy}]`}`;
+	return editing && path ? /* @__PURE__ */ jsx(editing.Row, {
+		path,
+		instance,
+		children: content
+	}) : content;
 }
 //#endregion
 export { WizardStepContent };

package/dist/form/Wizard/wizardPages.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The page each wizard of a form being edited shows, keyed by its list's path as JSON (`[]` for the
+ * form's own), so the editor can turn its pages as well as the wizard's own controls.
+ */
+export interface WizardPages {
+    page: (wizard: string) => number;
+    setPage: (wizard: string, index: number) => void;
+    /** How many pages the wizard draws, a repeated page's copies included, once it has drawn. */
+    count: (wizard: string) => number | undefined;
+    setCount: (wizard: string, count: number) => void;
+}
+export declare const WizardPagesContext: import("react").Context<WizardPages | null>;

package/dist/form/Wizard/wizardPages.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+//#region src/form/Wizard/wizardPages.ts
+var WizardPagesContext = createContext(null);
+//#endregion
+export { WizardPagesContext };

package/dist/form/formEditing.d.ts

@@ -0,0 +1,25 @@
+import { type ComponentType, type ReactNode } from 'react';
+/** Editing controls a form builder wraps around rendered fields. */
+export interface FormEditing {
+    /** Input path of the fields being rendered; empty at the top level. */
+    parent: string[];
+    Row: ComponentType<{
+        path: string[];
+        /** The field isn't drawn, such as one marked hidden. */
+        hidden?: boolean;
+        /** The field's name in the form's values, which tells one input's copies in a list's rows apart. */
+        instance?: string;
+        children?: ReactNode;
+    }>;
+    Add: ComponentType<{
+        parent: string[];
+    }>;
+}
+export declare const FormEditingContext: import("react").Context<FormEditing | null>;
+export declare function useFormEditing(): FormEditing | null;
+/** Fields rendered inside `children` belong to the input at `path`. */
+export declare function EditingScope({ editing, path, children, }: {
+    editing: FormEditing | null;
+    path: string[] | null;
+    children: ReactNode;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;

package/dist/form/formEditing.js

@@ -0,0 +1,20 @@
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/form/formEditing.tsx
+var FormEditingContext = createContext(null);
+function useFormEditing() {
+	return useContext(FormEditingContext);
+}
+/** Fields rendered inside `children` belong to the input at `path`. */
+function EditingScope({ editing, path, children }) {
+	if (!editing) return children;
+	return /* @__PURE__ */ jsx(FormEditingContext.Provider, {
+		value: path ? {
+			...editing,
+			parent: path
+		} : null,
+		children
+	});
+}
+//#endregion
+export { EditingScope, FormEditingContext, useFormEditing };