@parallelworks/ui 0.37.0 → 0.39.0

package/dist/graph/inputRefs.js

@@ -0,0 +1,388 @@
+import { FaPlus } from "../icons/fa/FaPlus.js";
+import { IconButton } from "../components/IconButton.js";
+import { Textarea, fieldBoxClasses } from "../components/Input.js";
+import { Toggle } from "../components/Toggle.js";
+import { useGraphEditorStrings, useInputsEditorStrings } from "./editorStrings.js";
+import { asRecord } from "./records.js";
+import { useFieldLint } from "./fieldProblems.js";
+import { SuggestionInput } from "./SuggestionInput.js";
+import { ExpressionToggle, FieldError, FieldLabel, GROWING_AREA, LabelledField, flagError, flagValue, text, useGrowingArea } from "./editorFields.js";
+import { useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/inputRefs.tsx
+/** Every input with a value, where a run reads it: groups nest unless flattened, lists hide their rows. */
+function inputRefs(editing, inputs) {
+	const root = asRecord(inputs);
+	const flatSteps = editing.wizardFlattens(root);
+	const out = [];
+	const walk = (map, prefix) => {
+		for (const [name, raw] of Object.entries(map)) {
+			if (name === "$meta") continue;
+			const definition = asRecord(raw);
+			const type = text(definition["type"]);
+			const childKey = editing.inputChildrenKey(type);
+			if (type === "group" || type === "step") {
+				const flat = type === "step" ? flatSteps : definition["flatten"] === true;
+				walk(asRecord(childKey ? definition[childKey] : void 0), flat ? prefix : [...prefix, name]);
+				continue;
+			}
+			if (type === "header") continue;
+			out.push({
+				path: [...prefix, name],
+				type,
+				label: text(definition["label"]) || name,
+				definition
+			});
+		}
+	};
+	walk(root, []);
+	return out;
+}
+var REF = /^\$\{\{\s*(!?)\s*inputs\.([A-Za-z0-9_.-]+?)\s*\}\}$/;
+function refExpression(path, suffix) {
+	return `\${{ inputs.${[...path, ...suffix ? [suffix] : []].join(".")} }}`;
+}
+/** The input `value` reads when it is exactly `${{ inputs.PATH[.suffix] }}`. */
+function readRef(value, suffix) {
+	const match = typeof value === "string" ? REF.exec(value.trim()) : null;
+	if (!match || match[1]) return null;
+	const parts = (match[2] ?? "").split(".");
+	if (suffix) return parts.at(-1) === suffix ? parts.slice(0, -1) : null;
+	return parts;
+}
+function flagExpression(path, negated) {
+	return `\${{ ${negated ? "!" : ""}inputs.${path.join(".")} }}`;
+}
+function equalsExpression(path, value, negated = false) {
+	const operator = negated ? "!=" : "==";
+	return `\${{ inputs.${path.join(".")} ${operator} '${value.replace(/'/g, "''")}' }}`;
+}
+var pathKey = (path) => path.join(".");
+/** The option values a dropdown input offers, for conditions on it. */
+function optionValues(definition) {
+	const options = definition["options"];
+	return Array.isArray(options) ? options.map((option) => typeof option === "object" && option !== null ? text(option["value"]) : text(option)) : [];
+}
+/** Picks an existing input of the given types, or asks for a new one. */
+function InputRefSelect({ refs, types, value, onChange, onNew, newLabel, label }) {
+	const t = useGraphEditorStrings();
+	const id = useId();
+	const matching = refs.filter((ref) => types.includes(ref.type));
+	const current = value ? pathKey(value) : "";
+	const known = matching.some((ref) => pathKey(ref.path) === current);
+	return /* @__PURE__ */ jsxs("select", {
+		id,
+		"aria-label": label,
+		value: known || !current ? current : `?${current}`,
+		onChange: (e) => {
+			const next = e.target.value;
+			if (next === "+") onNew?.();
+			else if (next && !next.startsWith("?")) onChange(next.split("."));
+		},
+		className: fieldBoxClasses,
+		children: [
+			/* @__PURE__ */ jsx("option", {
+				value: "",
+				disabled: true,
+				children: matching.length > 0 ? t.chooseInput : t.noMatchingInputs
+			}),
+			!known && current && /* @__PURE__ */ jsxs("option", {
+				value: `?${current}`,
+				children: ["inputs.", current]
+			}),
+			matching.map((ref) => /* @__PURE__ */ jsx("option", {
+				value: pathKey(ref.path),
+				children: ref.label === ref.path.at(-1) ? `inputs.${pathKey(ref.path)}` : `${ref.label} (inputs.${pathKey(ref.path)})`
+			}, pathKey(ref.path))),
+			onNew && /* @__PURE__ */ jsx("option", {
+				value: "+",
+				children: newLabel ?? t.newInput
+			})
+		]
+	});
+}
+/** Makes a new input of `type` for the field, when the host can; `onCreated` gets where it went. */
+function NewInputButton({ type, source, onCreated }) {
+	const t = useGraphEditorStrings();
+	const inputsEditor = useInputsEditorStrings();
+	const create = source?.create;
+	if (!create) return null;
+	const types = inputsEditor.types;
+	return /* @__PURE__ */ jsx(IconButton, {
+		icon: /* @__PURE__ */ jsx(FaPlus, { className: "h-4 w-4" }),
+		label: t.newInputOf(types[type] ?? type),
+		size: "sm",
+		variant: "ghost",
+		onClick: () => create(type, onCreated)
+	});
+}
+function insertAt(element, value, reference) {
+	const start = element?.selectionStart ?? value.length;
+	const end = element?.selectionEnd ?? value.length;
+	return value.slice(0, start) + reference + value.slice(end);
+}
+var ONE_OF = ["dropdown", "radio"];
+/** A text field that takes any value, expressions included, with suggestions to pick from. */
+function ExpressionInput({ id, label, value, onChange, suggestions = [], placeholder, error, describedBy, required }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SuggestionInput, {
+		id,
+		ariaLabel: label,
+		"aria-describedby": describedBy,
+		required,
+		value,
+		placeholder,
+		suggestions,
+		onChange
+	}), /* @__PURE__ */ jsx(FieldError, { message: error })] });
+}
+/** Conditions on the form's switches and choices, for fields that run on one. */
+function conditionSuggestions(source, t) {
+	return (source?.refs ?? []).flatMap((ref) => {
+		if (ref.type === "boolean") return [{
+			value: flagExpression(ref.path, false),
+			label: t.whenOn(ref.label)
+		}, {
+			value: flagExpression(ref.path, true),
+			label: t.whenOff(ref.label)
+		}];
+		return ONE_OF.includes(ref.type) ? optionValues(ref.definition).map((option) => ({
+			value: equalsExpression(ref.path, option),
+			label: t.whenIs(ref.label, option)
+		})) : [];
+	});
+}
+/** A switch, or an expression typed in its place, such as one that follows another input. */
+function FlagField({ label, yamlKey, description, value, original, fallback = false, onChange, source }) {
+	const t = useGraphEditorStrings();
+	const id = useId();
+	const [typed, setTyped] = useState(typeof value === "string");
+	const checked = typeof value === "boolean" ? value : fallback;
+	const setTypedValue = (next) => onChange(next.trim() ? next : void 0);
+	const lint = useFieldLint(yamlKey, id, typeof value === "string" ? value : "", setTypedValue);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsx(FieldLabel, {
+					label,
+					yamlKey,
+					description
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 items-center gap-1",
+					children: [!typed && /* @__PURE__ */ jsx(Toggle, {
+						checked,
+						onChange: (on) => onChange(flagValue(on, fallback, original)),
+						label
+					}), /* @__PURE__ */ jsx(ExpressionToggle, {
+						active: typed,
+						onChange: (on) => {
+							setTyped(on);
+							onChange(void 0);
+						}
+					})]
+				})]
+			}),
+			typed && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex-1",
+					children: /* @__PURE__ */ jsx(ExpressionInput, {
+						id,
+						label,
+						value: typeof value === "string" ? value : "",
+						suggestions: conditionSuggestions(source, t),
+						error: flagError(value, t) ?? lint.message,
+						onChange: setTypedValue
+					})
+				}), /* @__PURE__ */ jsx(NewInputButton, {
+					type: "boolean",
+					source,
+					onCreated: (path) => onChange(flagExpression(path, false))
+				})]
+			}),
+			typed && lint.fixes
+		]
+	});
+}
+var CONDITIONS = [
+	["always", "always"],
+	["failure()", "failure"],
+	["cancelled()", "cancelled"],
+	["success()", "success"]
+];
+/** When a job or step runs: any condition, typed, with the executor's status checks and the form's switches offered. */
+function ConditionField({ label, yamlKey, description, value, onChange, source, scope }) {
+	const t = useGraphEditorStrings();
+	const id = useId();
+	const texts = scope === "job" ? t.jobConditions : t.stepConditions;
+	const lint = useFieldLint(yamlKey, id, value, onChange);
+	const insert = (reference) => {
+		const element = document.getElementById(id);
+		onChange(insertAt(element instanceof HTMLInputElement && element.value === value ? element : null, value, reference));
+	};
+	return /* @__PURE__ */ jsxs(LabelledField, {
+		label,
+		yamlKey,
+		description,
+		htmlFor: id,
+		descriptionId: `${id}-help`,
+		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [allRefs(source).length > 0 && /* @__PURE__ */ jsx(InsertRefSelect, {
+			source,
+			label: t.insertValue,
+			onInsert: insert
+		}), /* @__PURE__ */ jsx(NewInputButton, {
+			type: "boolean",
+			source,
+			onCreated: (path) => onChange(flagExpression(path, false))
+		})] }),
+		children: [/* @__PURE__ */ jsx(ExpressionInput, {
+			id,
+			label,
+			describedBy: `${id}-help`,
+			value,
+			error: lint.message,
+			placeholder: texts.default,
+			suggestions: [
+				...CONDITIONS.map(([condition, key]) => ({
+					value: condition,
+					label: texts[key]
+				})),
+				{
+					value: "false",
+					label: t.conditionNever
+				},
+				...conditionSuggestions(source, t)
+			],
+			onChange
+		}), lint.fixes]
+	});
+}
+/** A value typed in, with the form's inputs of the given types offered, or a new one made for it. */
+function ValueOrInputField({ label, yamlKey, description, value, onChange, source, types, suffix, literal = true, required = false, error, suggestions = [], placeholder }) {
+	const t = useGraphEditorStrings();
+	const id = useId();
+	const lint = useFieldLint(yamlKey, id, value, onChange);
+	const firstType = types[0] ?? "string";
+	const offered = [...source.refs.filter((ref) => types.includes(ref.type)).map((ref) => ({
+		value: refExpression(ref.path, suffix),
+		label: ref.label
+	})), ...literal ? suggestions.map((suggestion) => ({ value: suggestion })) : []];
+	return /* @__PURE__ */ jsxs(LabelledField, {
+		label: required ? `${label} *` : label,
+		yamlKey,
+		description,
+		descriptionId: `${id}-help`,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex-1",
+					children: /* @__PURE__ */ jsx(ExpressionInput, {
+						id,
+						label,
+						describedBy: `${id}-help`,
+						required,
+						value,
+						placeholder: placeholder ?? (literal ? void 0 : t.chooseInput),
+						suggestions: offered,
+						onChange
+					})
+				}), /* @__PURE__ */ jsx(NewInputButton, {
+					type: firstType,
+					source,
+					onCreated: (path) => onChange(refExpression(path, suffix))
+				})]
+			}),
+			/* @__PURE__ */ jsx(FieldError, { message: error ?? lint.message }),
+			lint.fixes
+		]
+	});
+}
+/** A script field with a menu that drops an input's reference at the cursor. */
+function ScriptField({ label, yamlKey, description, value, onChange, source, rows, error, placeholder }) {
+	const t = useGraphEditorStrings();
+	const id = useId();
+	const growing = useGrowingArea(value);
+	const area = rows === void 0 ? growing : null;
+	const fixed = useRef(null);
+	const lint = useFieldLint(yamlKey, id, value, onChange);
+	const shownError = error ?? lint.message;
+	const insert = (reference) => onChange(insertAt((area ?? fixed).current, value, reference));
+	return /* @__PURE__ */ jsxs(LabelledField, {
+		label,
+		yamlKey,
+		description,
+		htmlFor: id,
+		descriptionId: `${id}-help`,
+		actions: allRefs(source).length > 0 && /* @__PURE__ */ jsx(InsertRefSelect, {
+			source,
+			label: t.insertValue,
+			onInsert: insert
+		}),
+		children: [/* @__PURE__ */ jsx(Textarea, {
+			ref: area ?? fixed,
+			id,
+			mono: true,
+			"aria-describedby": `${id}-help`,
+			rows: rows ?? 1,
+			value,
+			className: rows === void 0 ? GROWING_AREA : "",
+			...shownError ? { error: shownError } : {},
+			...placeholder ? { placeholder } : {},
+			onChange: (e) => onChange(e.target.value)
+		}), lint.fixes]
+	});
+}
+var GROUP_ORDER = [
+	"inputs",
+	"outputs",
+	"matrix",
+	"variables",
+	"sessions",
+	"env"
+];
+function InsertRefSelect({ source, label, onInsert }) {
+	const t = useGraphEditorStrings();
+	const all = allRefs(source);
+	return /* @__PURE__ */ jsxs("span", {
+		className: "relative inline-flex shrink-0 items-center",
+		children: [/* @__PURE__ */ jsx(FaPlus, {
+			"aria-hidden": "true",
+			className: "pointer-events-none absolute left-2 h-3 w-3 theme-muted-text"
+		}), /* @__PURE__ */ jsxs("select", {
+			"aria-label": label,
+			value: "",
+			onChange: (e) => {
+				if (e.target.value) onInsert(e.target.value);
+			},
+			className: "cursor-pointer appearance-none rounded-md border border-(--theme-border) bg-(--theme-panel-bg) py-1 pr-2 pl-6 text-xs text-(--theme-app) hover:bg-(--theme-muted-panel-bg)",
+			children: [/* @__PURE__ */ jsx("option", {
+				value: "",
+				children: label
+			}), GROUP_ORDER.map((group) => {
+				const refs = all.filter((item) => item.group === group);
+				return refs.length > 0 ? /* @__PURE__ */ jsx("optgroup", {
+					label: t.refGroups[group],
+					children: refs.map((item) => /* @__PURE__ */ jsx("option", {
+						value: item.expression,
+						children: item.label
+					}, item.label))
+				}, group) : null;
+			})]
+		})]
+	});
+}
+function allRefs(source) {
+	return [...source.refs.map((input) => ({
+		group: "inputs",
+		label: `inputs.${pathKey(input.path)}`,
+		expression: refExpression(input.path)
+	})), ...(source.extras ?? []).filter((extra) => extra.group !== "inputs")];
+}
+/** References offered as suggestions on free-text values. */
+function refSuggestions(source) {
+	return allRefs(source).map((item) => item.expression);
+}
+//#endregion
+export { ConditionField, ExpressionInput, FlagField, InputRefSelect, ScriptField, ValueOrInputField, equalsExpression, flagExpression, inputRefs, readRef, refExpression, refSuggestions };

package/dist/graph/inputRows.d.ts

@@ -0,0 +1,43 @@
+import type { InputPath } from '../editing.js';
+/** One input's row as drawn, with its place among its list's inputs. */
+export interface DrawnRow {
+    path: InputPath;
+    /** Which copy of the input this is, when a list draws it in each of its rows. */
+    instance: string;
+    index: number;
+    rect: DOMRect;
+    el: HTMLElement;
+    hidden: boolean;
+    /** A hidden input a list with widths draws after the inputs the form shows. */
+    trailing: boolean;
+}
+/** Inputs drawn one under another: an input and those `anchor-below` it, top to bottom. */
+export interface Column {
+    rows: DrawnRow[];
+    /** The cell a list with widths draws the column in. */
+    cell: HTMLElement | null;
+}
+/** The columns of one list drawn side by side on one line of the form, left to right. */
+export interface Line {
+    parent: InputPath;
+    columns: Column[];
+}
+/** Where dragged inputs land: before `index` of `parent`, as a column beside one, or in one. */
+export interface Drop {
+    parent: InputPath;
+    index: number;
+    beside?: {
+        path: InputPath;
+        side: 'left' | 'right';
+    };
+    stack?: {
+        path: InputPath;
+        side: 'above' | 'below';
+    };
+}
+export declare const rowsOf: (line: Line) => DrawnRow[];
+export declare function inputCell(el: HTMLElement): HTMLElement | null;
+/** The form's lines: a column is the rows one cell draws, and columns at one height share a line. */
+export declare function linesIn(root: HTMLElement): Line[];
+/** Neighbours on one line, split at `pointer` (a percent of their list's width), in 5% steps. */
+export declare function snapSplit(total: number, pointer: number): [left: number, right: number];

package/dist/graph/inputRows.js

@@ -0,0 +1,65 @@
+//#region src/graph/inputRows.ts
+var key = (path) => JSON.stringify(path);
+var samePath = (a, b) => a.length === b.length && a.every((name, i) => b[i] === name);
+var rowsOf = (line) => line.columns.flatMap((column) => column.rows);
+var topOf = (column) => Math.min(...column.rows.map((row) => row.rect.top));
+var leftOf = (column) => Math.min(...column.rows.map((row) => row.rect.left));
+function inputCell(el) {
+	let child = el;
+	for (let parent = el.parentElement; parent; parent = parent.parentElement) {
+		if (parent.hasAttribute("data-input-path")) return null;
+		if (parent.hasAttribute("data-input-cell")) return parent;
+		if (parent.parentElement?.hasAttribute("data-layout-grid")) return child;
+		if (parent.hasAttribute("data-layout-boundary")) return null;
+		child = parent;
+	}
+	return null;
+}
+/** The form's lines: a column is the rows one cell draws, and columns at one height share a line. */
+function linesIn(root) {
+	const columns = /* @__PURE__ */ new Map();
+	for (const el of root.querySelectorAll("[data-input-path]")) {
+		const path = JSON.parse(el.dataset["inputPath"] ?? "[]");
+		const cell = inputCell(el);
+		const owner = cell ?? el;
+		const entry = columns.get(owner) ?? {
+			parent: path.slice(0, -1),
+			column: {
+				rows: [],
+				cell
+			}
+		};
+		columns.set(owner, entry);
+		entry.column.rows.push({
+			path,
+			instance: el.dataset["inputInstance"] ?? key(path),
+			index: Number(el.dataset["inputIndex"] ?? 0),
+			rect: el.getBoundingClientRect(),
+			el,
+			hidden: el.dataset["inputHidden"] !== void 0,
+			trailing: false
+		});
+	}
+	const lines = [];
+	for (const { parent, column } of columns.values()) {
+		column.rows.sort((a, b) => a.rect.top - b.rect.top);
+		if (column.cell && column.rows.every((row) => row.hidden)) for (const row of column.rows) row.trailing = true;
+		const top = topOf(column);
+		const line = lines.find((other) => samePath(other.parent, parent) && Math.abs(topOf(other.columns[0]) - top) < 1);
+		if (line) line.columns.push(column);
+		else lines.push({
+			parent,
+			columns: [column]
+		});
+	}
+	for (const line of lines) line.columns.sort((a, b) => leftOf(a) - leftOf(b));
+	return lines;
+}
+/** Neighbours on one line, split at `pointer` (a percent of their list's width), in 5% steps. */
+function snapSplit(total, pointer) {
+	const floor = Math.min(10, total / 2);
+	const left = Math.min(Math.max(Math.round(pointer / 5) * 5, floor), total - floor);
+	return [left, total - left];
+}
+//#endregion
+export { inputCell, linesIn, rowsOf, snapSplit };

package/dist/graph/refusalText.js

@@ -0,0 +1,13 @@
+import { GRAPH_EDITOR_STRINGS } from "./editorStrings.js";
+//#region src/graph/refusalText.ts
+/** A refusal in the host's words, or the engine's English when the host gives none. */
+function refusalText(t, editing, reason) {
+	return t.refusal === GRAPH_EDITOR_STRINGS.refusal ? editing.refusalMessage(reason) : t.refusal(reason);
+}
+/** What to tell the person when an edit throws: why it was refused, or the error itself. */
+function editErrorText(t, editing, error) {
+	if (error instanceof editing.EditRefusal) return refusalText(t, editing, error.reason);
+	return error instanceof Error ? error.message : String(error);
+}
+//#endregion
+export { editErrorText, refusalText };

package/dist/graph/settingsViews.js

@@ -0,0 +1,62 @@
+import { TOOLTIP_ID } from "../components/Tooltip.js";
+import Loader from "../components/Loader.js";
+import { useGraphEditorStrings } from "./editorStrings.js";
+import { ProblemList } from "./fieldProblems.js";
+import { ChoiceButtons, FieldError } from "./editorFields.js";
+import { Suspense, lazy } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/settingsViews.tsx
+var MonacoEditor = lazy(() => import("../editor/Monaco.js"));
+function yamlProblem(yaml, t, editing) {
+	const problem = editing.settingsYamlProblem(yaml);
+	return !problem ? void 0 : problem.kind === "syntax" ? t.yamlSyntax(problem.message) : t.yamlNotMap;
+}
+function ViewSwitch({ yaml, onForm, onYaml }) {
+	const t = useGraphEditorStrings();
+	return /* @__PURE__ */ jsx("div", {
+		"data-tooltip-id": TOOLTIP_ID,
+		"data-tooltip-content": t.help.view,
+		children: /* @__PURE__ */ jsx(ChoiceButtons, {
+			options: [{
+				value: "yaml",
+				label: t.viewYaml
+			}, {
+				value: "form",
+				label: t.viewForm
+			}],
+			value: yaml ? "yaml" : "form",
+			onChange: (view) => view === "yaml" ? onYaml() : onForm()
+		})
+	});
+}
+var NO_SCOPED = {
+	markers: [],
+	problems: []
+};
+function YamlPane({ path, value, onChange, problem, scoped, nested }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "h-[50vh] overflow-hidden rounded-md border theme-border",
+				children: /* @__PURE__ */ jsx(Suspense, {
+					fallback: /* @__PURE__ */ jsx(Loader, {}),
+					children: /* @__PURE__ */ jsx(MonacoEditor, {
+						path,
+						language: "yaml",
+						value,
+						height: "100%",
+						scrollBeyondLastLine: false,
+						onChange,
+						markers: scoped.markers,
+						...nested ? { nested } : {}
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx(FieldError, { message: problem }),
+			/* @__PURE__ */ jsx(ProblemList, { problems: scoped.problems })
+		]
+	});
+}
+//#endregion
+export { NO_SCOPED, ViewSwitch, YamlPane, yamlProblem };

package/dist/graph/stepWith.d.ts

@@ -0,0 +1,38 @@
+import type { WorkflowAction } from '../editing.js';
+import { type Row, type Strings } from './editorFields.js';
+import { type InputSource } from './inputRefs.js';
+/** The built-in actions a step can use, by `uses` value, as the host lists them. */
+export type WorkflowActions = Record<string, WorkflowAction>;
+/** Every `with` key the step dialog writes for `actions`, for a schema coverage test. */
+export declare function withFields(actions: WorkflowActions): string[];
+type UsesKind = 'action' | 'github' | 'gitlab' | 'subworkflow' | 'other';
+export declare function usesKind(uses: string, actions: WorkflowActions): UsesKind;
+export interface WithDraft {
+    values: Record<string, unknown>;
+    rows: Row[];
+    removed: string[];
+}
+export declare function withDraftFrom(value: unknown, actions: WorkflowActions): WithDraft;
+/** The step's `with` for `uses`, or its original when nothing changed. */
+export declare function withValue(uses: string, actions: WorkflowActions, draft: WithDraft, initial: WithDraft, originalUses: string, original: unknown): unknown;
+export declare function withError(uses: string, actions: WorkflowActions, draft: WithDraft, original: unknown, t: Strings): string | undefined;
+/** What a step uses: a built-in action, a workflow of yours, one from the marketplace, or one in a repository. */
+export declare function UsesPicker({ uses, onUses, choices, draft, onDraft, error, }: {
+    uses: string;
+    onUses: (uses: string) => void;
+    /** `workflow/NAME` and `marketplace/SLUG` values to offer. */
+    choices: string[];
+    draft: WithDraft;
+    onDraft: (draft: WithDraft) => void;
+    error: string | undefined;
+}): import("react").JSX.Element;
+/** The step's `with`: an action's own inputs, or a subworkflow's by name. */
+export declare function WithEditor({ uses, draft, original, onChange, error, source, }: {
+    uses: string;
+    draft: WithDraft;
+    original: unknown;
+    onChange: (draft: WithDraft) => void;
+    error: string | undefined;
+    source: InputSource;
+}): import("react").JSX.Element;
+export {};