@parallelworks/ui 0.36.0 → 0.38.0

package/README.md

@@ -99,6 +99,22 @@ const engine = { ...createWorkflowEngine(), editing: workflowPackage }
 
 Without `editing`, the graph lays its jobs out by their needs alone.
 
+The editor checks YAML against the schemas a host registers with `configureEditorYaml` from
+`@parallelworks/ui/editor`. The job, step, input and settings dialogs edit their YAML at their own
+paths (`JOB_YAML_PATH`, `STEP_YAML_PATH`, `INPUT_YAML_PATH`, `SETTINGS_YAML_PATH`); `settingsSchemas`
+cuts the part of a workflow schema each one edits, for the host to register at that path under a URI
+of its own (the YAML service reads a `#fragment` as an anchor and stops validating):
+
+```ts
+const { job, step, input, settings } = settingsSchemas(workflowSchema)
+configureEditorYaml([
+  { fileMatch: [JOB_YAML_PATH], uri: `${origin}/workflow-job.schema.json`, schema: job },
+  // ...and the same for step, input and settings
+])
+```
+
+Without them, those views still edit, but check nothing against the schema.
+
 ## AI chat
 
 `@parallelworks/ui/ai` is a chat interface (thread, composer, streaming,

package/dist/ai/agent/permissions.d.ts

@@ -1,5 +1,5 @@
-declare const REQUESTABLE_PERMISSION_MODES: readonly ['read-only', 'accept-edits', 'bypass-permissions'];
-export declare const NAMED_PERMISSION_MODES: readonly ["read-only", "accept-edits", "bypass-permissions", "plan"];
+declare const REQUESTABLE_PERMISSION_MODES: readonly ['read-only', 'accept-edits', 'auto', 'bypass-permissions'];
+export declare const NAMED_PERMISSION_MODES: readonly ["read-only", "accept-edits", "auto", "bypass-permissions", "plan"];
 export type PermissionMode = (typeof REQUESTABLE_PERMISSION_MODES)[number];
 export type NamedPermissionMode = (typeof NAMED_PERMISSION_MODES)[number];
 export declare const DEFAULT_PERMISSION_MODE: PermissionMode;

package/dist/ai/agent/permissions.js

@@ -2,6 +2,7 @@
 var REQUESTABLE_PERMISSION_MODES = [
 	"read-only",
 	"accept-edits",
+	"auto",
 	"bypass-permissions"
 ];
 var NAMED_PERMISSION_MODES = [...REQUESTABLE_PERMISSION_MODES, "plan"];
@@ -10,7 +11,8 @@ var PERMISSION_RANK = {
 	"read-only": 0,
 	plan: 1,
 	"accept-edits": 2,
-	"bypass-permissions": 3
+	auto: 3,
+	"bypass-permissions": 4
 };
 function isNamedPermissionMode(mode) {
 	return NAMED_PERMISSION_MODES.some((m) => m === mode);

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/agent/PermissionPicker.js

@@ -6,6 +6,7 @@ import { jsx } from "react/jsx-runtime";
 var LABEL_KEY = {
 	"read-only": "readOnly",
 	"accept-edits": "acceptEdits",
+	auto: "auto",
 	"bypass-permissions": "bypassPermissions",
 	plan: "plan"
 };

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

@@ -163,10 +163,12 @@ export interface ChatStrings {
         choose: string;
         readOnly: string;
         acceptEdits: string;
+        auto: string;
         bypassPermissions: string;
         plan: string;
         readOnlyHint: string;
         acceptEditsHint: string;
+        autoHint: string;
         bypassPermissionsHint: string;
         planHint: string;
     };

package/dist/ai/strings.js

@@ -163,10 +163,12 @@ var defaultChatStrings = {
 		choose: "Choose what the agent may do",
 		readOnly: "Read only",
 		acceptEdits: "Accept edits",
+		auto: "Auto",
 		bypassPermissions: "Bypass permissions",
 		plan: "Plan",
 		readOnlyHint: "The workspace can be read but not changed.",
 		acceptEditsHint: "File edits are applied without asking. The workspace can be changed without your review.",
+		autoHint: "File edits are applied without asking. An automatic reviewer approves or denies most actions that would ask you.",
 		bypassPermissionsHint: "Every action is taken without asking, including commands that change the system.",
 		planHint: "The workspace is left unchanged while a plan is drafted."
 	},

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

@@ -22,5 +22,7 @@ export interface IProps {
     portalEl?: HTMLElement;
     /** Smaller option rows and text, for dense toolbars. */
     compact?: boolean | undefined;
+    /** False hides the caret, for a field that has nothing to pick from yet. */
+    showCaret?: boolean | undefined;
 }
 export default function Dropdown(props: IProps): import("react").JSX.Element;

package/dist/components/Dropdown.js

@@ -129,7 +129,7 @@ function ToggleOption({ option, category, expanded, onToggle, ...virtualRowProps
 		})
 	});
 }
-function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassName = "w-full", options = [], onChange, onActiveChange, value, id, ariaLabel, "aria-describedby": describedBy, required, disabled = false, placeholder = "", loading = false, allowCustomValue = false, customValueLabel = "Use", collapsedLabel = defaultCollapsedLabel, portalEl, compact = false }) {
+function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassName = "w-full", options = [], onChange, onActiveChange, value, id, ariaLabel, "aria-describedby": describedBy, required, disabled = false, placeholder = "", loading = false, allowCustomValue = false, customValueLabel = "Use", collapsedLabel = defaultCollapsedLabel, portalEl, compact = false, showCaret = true }) {
 	const DEBOUNCE_MS = 500;
 	const t = useStrings().dropdown;
 	const [query, setQuery] = useState("");
@@ -164,6 +164,11 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 		}
 		setBoundaryEl(dialog);
 	}, [referenceElement]);
+	useEffect(() => {
+		if (!referenceElement) return;
+		if (describedBy) referenceElement.setAttribute("aria-describedby", describedBy);
+		else referenceElement.removeAttribute("aria-describedby");
+	}, [referenceElement, describedBy]);
 	const sameWidthModifier = useMemo(() => ({
 		name: "sameWidth",
 		enabled: true,
@@ -336,7 +341,7 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 				/* @__PURE__ */ jsx(ComboboxButton, {
 					ref: buttonRef,
 					"aria-label": t.showOptions,
-					className: "absolute inset-y-0 right-0 flex items-center pr-3 disabled:cursor-not-allowed",
+					className: cx("absolute inset-y-0 right-0 flex items-center pr-3 disabled:cursor-not-allowed", !showCaret && "hidden"),
 					"data-testid": "combobox-button",
 					disabled,
 					children: /* @__PURE__ */ jsx(DropdownCaret, {})

package/dist/components/Input.d.ts

@@ -1,14 +1,19 @@
 import type { InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react';
-interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+interface FieldProps {
     label?: ReactNode;
+    /** Shown beside the label, outside it, so it stays out of the field's name. */
+    labelHint?: ReactNode;
+    /** Help text shown under the label. */
+    description?: ReactNode;
     error?: string | undefined;
     mono?: boolean;
 }
-export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
-interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-    label?: string;
-    error?: string;
-    mono?: boolean;
+interface InputProps extends InputHTMLAttributes<HTMLInputElement>, FieldProps {
 }
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, FieldProps {
+}
+/** The box a text field draws, for other controls that should look like one. */
+export declare const fieldBoxClasses: string;
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
 export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export {};

package/dist/components/Input.js

@@ -6,85 +6,104 @@ import cx from "classnames";
 import { forwardRef, useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Input.tsx
-var Input = forwardRef(({ label, error, className = "", mono, type, required, ...props }, ref) => {
-	const [showPassword, setShowPassword] = useState(false);
-	const isPassword = type === "password";
-	const inputType = isPassword && showPassword ? "text" : type;
+/** The box a text field draws, for other controls that should look like one. */
+var fieldBoxClasses = cx("w-full py-3 px-4 bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-lg text-[var(--theme-app)] text-sm transition-all duration-200 box-border", "focus:outline-none focus:border-[var(--theme-element)] focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--theme-element)_25%,transparent)]", "placeholder:text-[var(--theme-muted-text-color)]");
+function LabelRow({ id, label, hint, required }) {
+	const element = /* @__PURE__ */ jsxs("label", {
+		className: "text-[0.8125rem] font-medium text-[var(--theme-app)]",
+		htmlFor: id,
+		children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+	});
+	return hint ? /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-wrap items-baseline gap-x-1.5",
+		children: [element, hint]
+	}) : element;
+}
+function useFieldFrame({ label, labelHint, description, error }, ownId, describedBy, required) {
 	const generatedId = useId();
-	const id = props.id ?? generatedId;
+	const id = ownId ?? generatedId;
 	const errorId = `${id}-error`;
-	const describedBy = [props["aria-describedby"], error ? errorId : void 0].filter(Boolean).join(" ") || void 0;
-	const inputClasses = cx("w-full py-3 px-4 bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-lg text-[var(--theme-app)] text-sm transition-all duration-200 box-border", "focus:outline-none focus:border-[var(--theme-element)] focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--theme-element)_25%,transparent)]", "placeholder:text-[var(--theme-muted-text-color)]", "disabled:bg-[var(--theme-muted-panel-bg)] disabled:text-[var(--theme-muted-text-color)] disabled:cursor-not-allowed disabled:opacity-70", mono && "font-mono text-[0.8125rem]", error && "border-[#ef4444]", isPassword && "pr-11", className);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col gap-1.5",
-		children: [
-			label && /* @__PURE__ */ jsxs("label", {
-				className: "text-[0.8125rem] font-medium text-[var(--theme-app)]",
-				htmlFor: id,
-				children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: isPassword ? "relative w-full" : "",
-				children: [/* @__PURE__ */ jsx("input", {
-					ref,
-					type: inputType,
-					className: inputClasses,
-					...props,
+	const descriptionId = `${id}-description`;
+	return {
+		id,
+		describedBy: [
+			describedBy,
+			description ? descriptionId : void 0,
+			error ? errorId : void 0
+		].filter(Boolean).join(" ") || void 0,
+		frame: (control) => /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1.5",
+			children: [
+				label && /* @__PURE__ */ jsx(LabelRow, {
 					id,
-					required,
-					"aria-invalid": error ? true : props["aria-invalid"],
-					"aria-describedby": describedBy
-				}), isPassword && /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: "absolute right-3 top-1/2 -translate-y-1/2 bg-transparent border-none text-[var(--theme-muted-text-color)] cursor-pointer p-1 transition-colors duration-200 flex items-center justify-center hover:text-[var(--theme-app)]",
-					onClick: () => setShowPassword(!showPassword),
-					tabIndex: -1,
-					"aria-label": showPassword ? "Hide password" : "Show password",
-					children: showPassword ? /* @__PURE__ */ jsx(LuEyeOff, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx(LuEye, { className: "w-5 h-5" })
-				})]
-			}),
-			error && /* @__PURE__ */ jsxs("span", {
-				id: errorId,
-				role: "alert",
-				className: "text-[0.8125rem] text-[#ef4444] flex items-center gap-1.5",
-				children: [/* @__PURE__ */ jsx(TbAlertTriangle, { className: "w-4 h-4" }), error]
-			})
-		]
-	});
+					label,
+					hint: labelHint,
+					required
+				}),
+				description && /* @__PURE__ */ jsx("span", {
+					id: descriptionId,
+					className: "-mt-1 text-xs text-(--theme-muted-text-color)",
+					children: description
+				}),
+				control,
+				error && /* @__PURE__ */ jsxs("span", {
+					id: errorId,
+					role: "alert",
+					className: "text-[0.8125rem] text-[#ef4444] flex items-center gap-1.5",
+					children: [/* @__PURE__ */ jsx(TbAlertTriangle, { className: "w-4 h-4" }), error]
+				})
+			]
+		})
+	};
+}
+var Input = forwardRef(({ label, labelHint, description, error, className = "", mono, type, required, ...props }, ref) => {
+	const [showPassword, setShowPassword] = useState(false);
+	const isPassword = type === "password";
+	const field = useFieldFrame({
+		label,
+		labelHint,
+		description,
+		error
+	}, props.id, props["aria-describedby"], required);
+	return field.frame(/* @__PURE__ */ jsxs("div", {
+		className: isPassword ? "relative w-full" : "",
+		children: [/* @__PURE__ */ jsx("input", {
+			ref,
+			type: isPassword && showPassword ? "text" : type,
+			className: cx(fieldBoxClasses, "disabled:bg-[var(--theme-muted-panel-bg)] disabled:text-[var(--theme-muted-text-color)] disabled:cursor-not-allowed disabled:opacity-70", mono && "font-mono text-[0.8125rem]", error && "!border-[#ef4444]", isPassword && "pr-11", className),
+			...props,
+			id: field.id,
+			required,
+			"aria-invalid": error ? true : props["aria-invalid"],
+			"aria-describedby": field.describedBy
+		}), isPassword && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "absolute right-3 top-1/2 -translate-y-1/2 bg-transparent border-none text-[var(--theme-muted-text-color)] cursor-pointer p-1 transition-colors duration-200 flex items-center justify-center hover:text-[var(--theme-app)]",
+			onClick: () => setShowPassword(!showPassword),
+			tabIndex: -1,
+			"aria-label": showPassword ? "Hide password" : "Show password",
+			children: showPassword ? /* @__PURE__ */ jsx(LuEyeOff, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx(LuEye, { className: "w-5 h-5" })
+		})]
+	}));
 });
 Input.displayName = "Input";
-var Textarea = forwardRef(({ label, error, className = "", mono, required, ...props }, ref) => {
-	const generatedId = useId();
-	const id = props.id ?? generatedId;
-	const errorId = `${id}-error`;
-	const describedBy = [props["aria-describedby"], error ? errorId : void 0].filter(Boolean).join(" ") || void 0;
-	const textareaClasses = cx("w-full py-3 px-4 bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-lg text-[var(--theme-app)] text-sm transition-all duration-200 box-border min-h-[140px] resize-y", "focus:outline-none focus:border-[var(--theme-element)] focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--theme-element)_25%,transparent)]", "placeholder:text-[var(--theme-muted-text-color)]", mono && "font-mono text-[0.8125rem]", error && "border-[#ef4444]", className);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col gap-1.5",
-		children: [
-			label && /* @__PURE__ */ jsxs("label", {
-				className: "text-[0.8125rem] font-medium text-[var(--theme-app)]",
-				htmlFor: id,
-				children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
-			}),
-			/* @__PURE__ */ jsx("textarea", {
-				ref,
-				className: textareaClasses,
-				...props,
-				id,
-				required,
-				"aria-invalid": error ? true : props["aria-invalid"],
-				"aria-describedby": describedBy
-			}),
-			error && /* @__PURE__ */ jsxs("span", {
-				id: errorId,
-				role: "alert",
-				className: "text-[0.8125rem] text-[#ef4444] flex items-center gap-1.5",
-				children: [/* @__PURE__ */ jsx(TbAlertTriangle, { className: "w-4 h-4" }), error]
-			})
-		]
-	});
+var Textarea = forwardRef(({ label, labelHint, description, error, className = "", mono, required, ...props }, ref) => {
+	const field = useFieldFrame({
+		label,
+		labelHint,
+		description,
+		error
+	}, props.id, props["aria-describedby"], required);
+	return field.frame(/* @__PURE__ */ jsx("textarea", {
+		ref,
+		className: cx(fieldBoxClasses, "min-h-[140px] resize-y", mono && "font-mono text-[0.8125rem]", error && "!border-[#ef4444]", className),
+		...props,
+		id: field.id,
+		required,
+		"aria-invalid": error ? true : props["aria-invalid"],
+		"aria-describedby": field.describedBy
+	}));
 });
 Textarea.displayName = "Textarea";
 //#endregion
-export { Input, Textarea };
+export { Input, Textarea, fieldBoxClasses };

package/dist/components/Provider.d.ts

@@ -1,5 +1,7 @@
 import type { Dispatch, ReactNode, SetStateAction } from 'react';
+import type { WorkflowAction, WorkflowEditing } from '../editing.js';
 import type { WorkflowEngine } from '../engine.js';
+import type { GraphEditorStrings, InputsEditorStrings } from '../graph/editorStrings.js';
 import type { RunLink } from '../graph/types.js';
 export type UIToastId = string | number;
 export interface UIToastOptions {
@@ -118,6 +120,9 @@ export interface UIStrings {
         openOriginalWorkflow: string;
         openInNewGraph: string;
     };
+    /** The visual editor's text a host translates; the editor fills in the rest in English. */
+    graphEditor: Partial<GraphEditorStrings>;
+    inputsEditor: Partial<InputsEditorStrings>;
     fileExplorer: {
         preview: {
             shareFile: string;
@@ -348,6 +353,8 @@ export interface UIStrings {
         copied: (label: string) => string;
         couldntCopy: (label: string) => string;
         moreActions: string;
+        /** A toolbar toggle's name in the overflow menu, where a row can't be pressed. */
+        toggleState: (label: string, on: boolean) => string;
         labelName: string;
         labelEmail: string;
         labelUsername: string;
@@ -392,6 +399,14 @@ export interface UINavigation {
     openStepSource: (uses: string, sourceUrl?: string) => void;
     openExternal: (href: string) => void;
 }
+export type WorkflowJsonRef = {
+    kind: 'marketplace';
+    slug: string;
+    version: string;
+} | {
+    kind: 'workflow';
+    name: string;
+};
 export interface RunFileResult {
     data: string | undefined;
     isLoading: boolean;
@@ -407,6 +422,14 @@ export interface UIData {
     useRunFile: (slug: string, path: string | null, options?: {
         refreshInterval?: number;
     }) => RunFileResult;
+    resolveWorkflowJson?: (ref: WorkflowJsonRef) => Promise<unknown>;
+    /** The built-in actions a workflow step can use, for the editor's step form. */
+    workflowActions?: Record<string, WorkflowAction>;
+    resolveSecretVariables?: () => Promise<string[]>;
+    /** Repository files, so the editor can read the workflow a step's repository `uses` names. */
+    repoSuggestions?: {
+        file: (repo: string, ref: string, path: string) => Promise<string>;
+    };
     /**
      * Provisions browser-access CORS rules on a storage. Absent, the storage
      * explorer hides its "add CORS rules" affordance.
@@ -496,10 +519,18 @@ export type WorkflowEngineSource = WorkflowEngine | (() => Promise<WorkflowEngin
 export declare function useNotify(): UINotify;
 export declare function useStrings(): UIStrings;
 export declare function useNavigation(): UINavigation;
+export declare function useWorkflowJsonResolver(): UIData['resolveWorkflowJson'];
+export declare function useRepoSuggestions(): UIData['repoSuggestions'];
+export declare function useWorkflowActions(): Record<string, WorkflowAction>;
+export declare function useSecretVariablesResolver(): UIData['resolveSecretVariables'];
 export declare function useSlots(): UISlots;
 /** The engine when one is provided and `enabled`; suspends while a loader resolves. */
 export declare function useOptionalWorkflowEngine(enabled?: boolean): WorkflowEngine | undefined;
 export declare function useWorkflowEngine(): WorkflowEngine;
+/** The engine once it has loaded, without suspending; renders again when a loader resolves. */
+export declare function useLoadedWorkflowEngine(): WorkflowEngine | undefined;
+/** The engine's workflow editing, which the visual editor can't work without. */
+export declare function useWorkflowEditing(): WorkflowEditing;
 /** Resolves the engine without suspending, for async callers such as editor completions. */
 export declare function useWorkflowEngineLoader(): () => Promise<WorkflowEngine | undefined>;
 export declare function useProvisionCorsRules(): UIData['provisionCorsRules'];

package/dist/components/Provider.js

@@ -1,5 +1,5 @@
 import { safeUrl } from "../safeUrl.js";
-import { createContext, use, useCallback, useContext, useEffect, useMemo } from "react";
+import { createContext, use, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { useLocalStorage } from "usehooks-ts";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Provider.tsx
@@ -122,6 +122,8 @@ var DEFAULTS = {
 			openOriginalWorkflow: "Open original workflow",
 			openInNewGraph: "Open in new graph"
 		},
+		graphEditor: {},
+		inputsEditor: {},
 		fileExplorer: {
 			preview: {
 				shareFile: "Share file",
@@ -348,6 +350,7 @@ var DEFAULTS = {
 			copied: (label) => `Copied ${label}`,
 			couldntCopy: (label) => `Couldn't copy ${label}`,
 			moreActions: "More actions",
+			toggleState: (label, on) => `${label}, ${on ? "on" : "off"}`,
 			labelName: "name",
 			labelEmail: "email",
 			labelUsername: "username",
@@ -442,6 +445,19 @@ function useStrings() {
 function useNavigation() {
 	return useContext(UIContext).navigation;
 }
+function useWorkflowJsonResolver() {
+	return useContext(UIContext).data.resolveWorkflowJson;
+}
+function useRepoSuggestions() {
+	return useContext(UIContext).data.repoSuggestions;
+}
+var NO_ACTIONS = {};
+function useWorkflowActions() {
+	return useContext(UIContext).data.workflowActions ?? NO_ACTIONS;
+}
+function useSecretVariablesResolver() {
+	return useContext(UIContext).data.resolveSecretVariables;
+}
 function useSlots() {
 	return useContext(UIContext).slots;
 }
@@ -474,6 +490,30 @@ function useWorkflowEngine() {
 	if (!source) throw new Error("Workflow forms and graphs need a UIProvider with an engine.");
 	return resolveEngine(source);
 }
+/** The engine once it has loaded, without suspending; renders again when a loader resolves. */
+function useLoadedWorkflowEngine() {
+	const source = useContext(UIContext).engine;
+	const [, setLoaded] = useState(0);
+	const entry = typeof source === "function" ? loadEngine(source) : void 0;
+	const engine = typeof source === "function" ? entry?.engine : source;
+	useEffect(() => {
+		if (!entry || entry.engine) return;
+		let live = true;
+		entry.promise.then(() => {
+			if (live) setLoaded((n) => n + 1);
+		});
+		return () => {
+			live = false;
+		};
+	}, [entry]);
+	return engine;
+}
+/** The engine's workflow editing, which the visual editor can't work without. */
+function useWorkflowEditing() {
+	const { editing } = useWorkflowEngine();
+	if (!editing) throw new Error("The workflow editor needs a UIProvider engine with editing.");
+	return editing;
+}
 /** Resolves the engine without suspending, for async callers such as editor completions. */
 function useWorkflowEngineLoader() {
 	const source = useContext(UIContext).engine;
@@ -528,6 +568,14 @@ function UIProvider({ notify, strings, navigation, data, slots, engine, children
 				...DEFAULTS.strings.jobActions,
 				...strings?.jobActions
 			},
+			graphEditor: {
+				...DEFAULTS.strings.graphEditor,
+				...strings?.graphEditor
+			},
+			inputsEditor: {
+				...DEFAULTS.strings.inputsEditor,
+				...strings?.inputsEditor
+			},
 			fileExplorer: {
 				...DEFAULTS.strings.fileExplorer,
 				...strings?.fileExplorer
@@ -569,4 +617,4 @@ function UIProvider({ notify, strings, navigation, data, slots, engine, children
 	});
 }
 //#endregion
-export { UIProvider, useLink, useNavigation, useNotify, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRunFile, useSlots, useStrings, useWorkflowEngine, useWorkflowEngineLoader };
+export { UIProvider, useLink, useLoadedWorkflowEngine, useNavigation, useNotify, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRepoSuggestions, useRunFile, useSecretVariablesResolver, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader, useWorkflowJsonResolver };