@parallelworks/ui 0.37.0 → 0.39.0

package/README.md

@@ -10,7 +10,7 @@ so an application ships only what it imports:
 | `./icons` | the icon barrel |
 | `./list` | list pages, tables, row menus and list controls |
 | `./form` | `DynamicForm` and its field registry |
-| `./graph` | job dependency graph and tree view |
+| `./graph` | job dependency graph and tree view, and the visual workflow editor: the graph, the run form as an inputs editor, and their dialogs |
 | `./editor` | Monaco editor (`monaco-editor` is an optional peer); YAML validation, completion and hover run in a bundled worker |
 | `./logviewer` | log viewer with ANSI color and search |
 | `./file-explorer` | object storage explorer over a host-supplied provider |

package/dist/ai/components/ChatInput.js

@@ -6,6 +6,7 @@ import { useChat } from "../core/ChatProvider.js";
 import AttachmentUpload from "./AttachmentUpload.js";
 import useDragDrop from "../core/useDragDrop.js";
 import { ComposerContext, ComposerControls, ComposerSettings } from "./ComposerChrome.js";
+import { clearDraft, readDraft, storeDraft, sweepDrafts } from "./chatDraft.js";
 import DragOverlay from "./DragOverlay.js";
 import { PasteFileCard } from "./PastedText.js";
 import { SlashMenu, useSlashMenu } from "./SlashMenu.js";
@@ -14,29 +15,6 @@ import cx from "classnames";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ChatInput.tsx
-var DRAFT_STORAGE_PREFIX = "aiChatDraft:";
-var DRAFT_MAX_LENGTH = 1e4;
-function draftKey(conversationId) {
-	return `${DRAFT_STORAGE_PREFIX}${conversationId ?? "new"}`;
-}
-function readDraft(conversationId) {
-	try {
-		return window.localStorage.getItem(draftKey(conversationId)) ?? "";
-	} catch {
-		return "";
-	}
-}
-function storeDraft(conversationId, text) {
-	try {
-		if (!text || text.length > DRAFT_MAX_LENGTH) window.localStorage.removeItem(draftKey(conversationId));
-		else window.localStorage.setItem(draftKey(conversationId), text);
-	} catch {}
-}
-function clearDraft(conversationId) {
-	try {
-		window.localStorage.removeItem(draftKey(conversationId));
-	} catch {}
-}
 /** An optional box that is still empty should not wear the filled look of
 *  one waiting to send something. */
 function sendability({ hasText, canFlushQueue, allowEmpty, disabled, modelReady, pendingCount }) {
@@ -88,8 +66,15 @@ function streamControls(chat, turn) {
 		queuedCount: chat.queuedMessages.length
 	};
 }
+var draftsSwept = false;
 var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeholder, conversationId, onEditLastMessage, allowEmpty = false, attachments: attachmentsWanted = true, requireModel = true, inputLabel, sendLabel, sendTestId, slash, notices, activity, context, reserveContext = false, settingsLeft, settingsRight = /* @__PURE__ */ jsx(ComposerControls, {}), hint, turn, pastes }, ref) {
 	const [input, setInput] = useState(() => readDraft(conversationId));
+	useEffect(() => {
+		if (!draftsSwept) {
+			draftsSwept = true;
+			sweepDrafts();
+		}
+	}, []);
 	const { cards, handleTextPaste, removeCard, takeCards, blocking: pastesBlocking } = usePasteCards(pastes, input, (value) => {
 		setInput(value);
 		storeDraft(conversationId, value);

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/components/chatDraft.d.ts

@@ -0,0 +1,7 @@
+export declare const DRAFT_MAX_LENGTH = 10000;
+export declare const DRAFT_TTL_MS: number;
+export declare function readDraft(conversationId?: string): string;
+export declare function storeDraft(conversationId: string | undefined, text: string): void;
+export declare function clearDraft(conversationId?: string): void;
+/** Removes expired drafts, and starts the clock on ones stored without an age. */
+export declare function sweepDrafts(now?: number): void;

package/dist/ai/components/chatDraft.js

@@ -0,0 +1,66 @@
+//#region src/ai/components/chatDraft.ts
+var DRAFT_STORAGE_PREFIX = "aiChatDraft:";
+var DRAFT_MAX_LENGTH = 1e4;
+var DRAFT_TTL_MS = 2592e6;
+function draftKey(conversationId) {
+	return `${DRAFT_STORAGE_PREFIX}${conversationId ?? "new"}`;
+}
+/** Older versions stored the bare text, which has no age. */
+function parseDraft(raw) {
+	try {
+		const parsed = JSON.parse(raw);
+		if (typeof parsed === "object" && parsed !== null && typeof parsed.text === "string" && typeof parsed.savedAt === "number") return parsed;
+	} catch {}
+	return { text: raw };
+}
+var expired = (savedAt, now) => now - savedAt > DRAFT_TTL_MS;
+function readDraft(conversationId) {
+	try {
+		const raw = window.localStorage.getItem(draftKey(conversationId));
+		if (raw === null) return "";
+		const draft = parseDraft(raw);
+		return draft.savedAt !== void 0 && expired(draft.savedAt, Date.now()) ? "" : draft.text;
+	} catch {
+		return "";
+	}
+}
+function storeDraft(conversationId, text) {
+	try {
+		if (!text || text.length > 1e4) window.localStorage.removeItem(draftKey(conversationId));
+		else {
+			const draft = {
+				text,
+				savedAt: Date.now()
+			};
+			window.localStorage.setItem(draftKey(conversationId), JSON.stringify(draft));
+		}
+	} catch {}
+}
+function clearDraft(conversationId) {
+	try {
+		window.localStorage.removeItem(draftKey(conversationId));
+	} catch {}
+}
+/** Removes expired drafts, and starts the clock on ones stored without an age. */
+function sweepDrafts(now = Date.now()) {
+	try {
+		const storage = window.localStorage;
+		const keys = [];
+		for (let i = 0; i < storage.length; i++) {
+			const key = storage.key(i);
+			if (key?.startsWith(DRAFT_STORAGE_PREFIX)) keys.push(key);
+		}
+		for (const key of keys) {
+			const raw = storage.getItem(key);
+			if (raw === null) continue;
+			const draft = parseDraft(raw);
+			if (draft.savedAt === void 0) storage.setItem(key, JSON.stringify({
+				text: draft.text,
+				savedAt: now
+			}));
+			else if (expired(draft.savedAt, now)) storage.removeItem(key);
+		}
+	} catch {}
+}
+//#endregion
+export { DRAFT_MAX_LENGTH, DRAFT_TTL_MS, clearDraft, readDraft, storeDraft, sweepDrafts };

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/editing.d.ts

@@ -406,6 +406,8 @@ export interface WorkflowEditing {
     inputChildrenKey: (type: unknown) => string | undefined;
     isValidInputName: (name: string) => boolean;
     newInputName: (existing: Iterable<string>) => string;
+    /** The name an `addJob` edit gives the job it adds. */
+    newJobName: (existing: Iterable<string>) => string;
     /** `base`, or `base_2`, `base_3`… when it's taken. */
     nextName: (taken: Iterable<string>, base: string) => string;
     /** The first of `candidate(1)`, `candidate(2)`… that `taken` doesn't hold. */

package/dist/editor/Monaco.js

@@ -1,11 +1,11 @@
 import { useCssIsDark } from "../components/useCssIsDark.js";
 import { HOST_MARKER_OWNER, LINT_OWNER } from "./lintOwner.js";
+import { lintContext, useLintEditing, useLintSources } from "./lintContext.js";
 import { publishNestedText } from "./nestedText.js";
 import { registerRevealer } from "./reveal.js";
 import { defineEditorThemes, getThemeName } from "./themes.js";
 import { setupMonacoWorkers } from "./workers.js";
 import { holdListeners, modelFor } from "./editorModel.js";
-import { lintContext, useLintEditing, useLintSources } from "./lintContext.js";
 import { ensureYamlLanguage } from "./yamlLanguage.js";
 import cx from "classnames";
 import { useEffect, useLayoutEffect, useRef } from "react";

package/dist/editor/index.js

@@ -1,8 +1,8 @@
+import { HOST_MARKER_OWNER, LINT_OWNER } from "./lintOwner.js";
 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";

package/dist/editor/lintContext.js

@@ -1,7 +1,7 @@
-import { useLoadedWorkflowEngine, useRepoSuggestions, useSecretVariablesResolver, useWorkflowActions, useWorkflowJsonResolver } from "../components/Provider.js";
+import { useLoadedWorkflowEngine, useRepoSuggestions, useSecretVariablesResolver, useWorkflowActions, useWorkflowEditing, 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 { HOST_MARKER_OWNER, LINT_OWNER } from "./lintOwner.js";
 import { useEffect, useMemo, useState } from "react";
 //#region src/editor/lintContext.ts
 var KEEP_MS = 6e4;
@@ -112,6 +112,18 @@ function useLintSources() {
 		actions
 	]);
 }
+/** lintContext for a component, which renders again when more of it arrives. */
+function useLintContext(source) {
+	const editing = useWorkflowEditing();
+	const sources = useLintSources();
+	const [arrivals, setArrivals] = useState(0);
+	return useMemo(() => source === void 0 ? {} : lintContext(editing, source, sources, () => setArrivals((n) => n + 1)), [
+		editing,
+		source,
+		sources,
+		arrivals
+	]);
+}
 /**
 * 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.
@@ -133,4 +145,4 @@ function useLintEditing(load = true) {
 	return load && ready ? engine?.editing : void 0;
 }
 //#endregion
-export { HOST_MARKER_OWNER, LINT_OWNER, lintContext, useLintEditing, useLintSources };
+export { HOST_MARKER_OWNER, LINT_OWNER, lintContext, useLintContext, useLintEditing, useLintSources };

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: [