@parallelworks/ui 0.35.0 → 0.37.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/agent/AgentMessageParts.js

@@ -291,6 +291,12 @@ function ConfirmApproval({ part, onAnswer }) {
 	const t = strings.agentTranscript;
 	const [feedback, setFeedback] = useState(null);
 	const answer = (a) => onAnswer?.(part.id, a);
+	const [allowLabel, denyLabel] = {
+		command: [t.allowOnce, t.deny],
+		code: [t.allowCode, t.denyCode],
+		path: [t.allowPath, t.denyPath],
+		call: [t.allowCall, t.denyCall]
+	}[part.subject ?? "command"];
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		part.command && /* @__PURE__ */ jsx("pre", {
 			className: "overflow-x-auto rounded-md bg-(--theme-muted-panel-bg) p-2 font-mono text-xs whitespace-pre-wrap",
@@ -313,7 +319,7 @@ function ConfirmApproval({ part, onAnswer }) {
 						allowed: true
 					}),
 					className: "px-3 py-1 text-xs font-medium rounded-full bg-(--theme-element) text-(--theme-element-text)",
-					children: t.allowOnce
+					children: allowLabel
 				}),
 				part.canAllowDirectory !== false && /* @__PURE__ */ jsx("button", {
 					type: "button",
@@ -332,7 +338,7 @@ function ConfirmApproval({ part, onAnswer }) {
 						allowed: false
 					}),
 					className: "px-3 py-1 text-xs font-medium rounded-full border theme-border hover:theme-hover text-red-600",
-					children: t.deny
+					children: denyLabel
 				}),
 				/* @__PURE__ */ jsx("button", {
 					type: "button",

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/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;
     };
@@ -183,6 +185,12 @@ export interface ChatStrings {
         allowOnce: string;
         allowDirectory: string;
         deny: string;
+        allowCode: string;
+        denyCode: string;
+        allowPath: string;
+        denyPath: string;
+        allowCall: string;
+        denyCall: string;
         denyWithFeedback: string;
         feedbackPlaceholder: string;
         send: 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."
 	},
@@ -183,6 +185,12 @@ var defaultChatStrings = {
 		allowOnce: "Yes, allow this command",
 		allowDirectory: "Yes, and allow this directory for the session",
 		deny: "No, deny this command",
+		allowCode: "Yes, run this code",
+		denyCode: "No, don't run this code",
+		allowPath: "Yes, allow this once",
+		denyPath: "No, deny",
+		allowCall: "Yes, allow this call",
+		denyCall: "No, deny this call",
 		denyWithFeedback: "No, and provide feedback to the agent",
 		feedbackPlaceholder: "Tell the agent what to do instead…",
 		send: "Send",

package/dist/ai/types.d.ts

@@ -84,11 +84,13 @@ export type ApprovalAnswerValue = {
     text: string;
     chat?: boolean;
 };
+export type ApprovalSubject = 'command' | 'code' | 'path' | 'call';
 export interface ApprovalPart {
     kind: 'approval';
     id: string;
     approvalKind: 'confirm' | 'ask' | 'plan';
     toolName?: string;
+    subject?: ApprovalSubject;
     command?: string;
     reason?: string;
     agent?: string;

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 };