@parallelworks/ui 0.38.0 → 0.40.0

package/dist/graph/graphEditorState.d.ts

@@ -0,0 +1,191 @@
+import { type PointerEvent as ReactPointerEvent } from 'react';
+import type { GraphEdit, GraphSlot, NeedRef, NudgeDirection, StepRef } from '../editing.js';
+import type { EditorProblem, RevealTarget } from './editorApi.js';
+import type { Box, Point, Store } from './editorPrimitives.js';
+import type { GraphEditorStrings } from './editorStrings.js';
+/** Pointer-downs on this class drag editor items instead of panning the graph. */
+export declare const EDITOR_HANDLE_CLASS = "dag-editor-handle";
+/** A node's left circle takes dependencies; its right circle gives them. */
+export type PortSide = 'in' | 'out';
+export type ConnectPayload = {
+    kind: 'connect';
+    from: string[];
+    side: PortSide;
+    label: string;
+    /** The circle dragged from: `node:<head job>`, or `selection`. */
+    port: string;
+    /** An end of a connector being moved: its needs go on the drop, and the line starts at its other end. */
+    replaces?: NeedRef[];
+    origin?: Point;
+};
+export type DragPayload = 
+/** `anchor` lands where the drag drops; the other jobs keep their offsets from it. */
+{
+    kind: 'jobs';
+    jobs: string[];
+    label: string;
+    anchor?: string;
+} | {
+    kind: 'new';
+    matrix: boolean;
+    label: string;
+} | ConnectPayload | {
+    kind: 'steps';
+    steps: StepRef[];
+    label: string;
+};
+export type DropTarget = 
+/** `blocked` when the move would cut a need an expression of a moved job reads. */
+{
+    kind: 'slot';
+    slot: GraphSlot;
+    indicator: Box;
+    blocked?: boolean;
+} | {
+    kind: 'trash';
+}
+/** `edits` is null when the drop can't connect. */
+ | {
+    kind: 'connect';
+    edits: GraphEdit[] | null;
+    box: Box;
+}
+/** Dragged jobs join `into`'s node, taking its needs; `valid` is false when that would loop. */
+ | {
+    kind: 'merge';
+    into: string;
+    jobs: string[];
+    valid: boolean;
+    box: Box;
+}
+/** Steps land at `index` of `job`; `around` outlines a job whose steps aren't shown, `problem` refuses the drop. */
+ | {
+    kind: 'steps';
+    job: string;
+    index: number;
+    indicator: Box;
+    around?: boolean;
+    problem?: string;
+};
+export interface DragView {
+    payload: DragPayload;
+    client: Point;
+    content: Point | null;
+    origin: Point | null;
+    target: DropTarget | null;
+}
+/** A job or step being added: `yml` is the workflow as if `edit` were applied, which the dialog's first save does. */
+export interface Addition {
+    edit: GraphEdit;
+    yml: string;
+}
+export type Dialog = {
+    kind: 'job';
+    job: string;
+    addition?: Addition;
+} | {
+    kind: 'step';
+    job: string;
+    index: number;
+    addition?: Addition;
+};
+export declare const labelsOf: (jobs: string[]) => string;
+/** A drawn connector, named by the head jobs of the boxes it joins. */
+export interface EdgeSelection {
+    from: string;
+    to: string;
+}
+export interface UiState {
+    drag: DragView | null;
+    /** Selected connectors. Jobs, steps and connectors are never selected together. */
+    edges: EdgeSelection[];
+    dialog: Dialog | null;
+    selection: string[];
+    steps: StepRef[];
+    problems: EditorProblem[];
+    /** The box being dragged out on empty space, in content coordinates. */
+    marquee: Box | null;
+}
+export declare const NO_SELECTION: string[];
+export declare const NO_STEPS: StepRef[];
+export declare const NO_EDGES: EdgeSelection[];
+export declare const NO_PROBLEMS: EditorProblem[];
+export declare const problemsIn: (problems: EditorProblem[], job: string, step?: number) => EditorProblem[];
+export declare const sameStep: (a: StepRef, b: StepRef) => boolean;
+export type UiStore = Store<UiState>;
+/** The drawn grid of the level being edited; `rows` holds each box's row, `columns` each column's number. */
+export interface GraphGrid {
+    wrapper: HTMLDivElement;
+    cols: string[][][];
+    rows: number[][];
+    columns: number[];
+}
+/** What the editor asks of the graph's view. */
+export interface GraphView {
+    /** Keeps `job` where it is on screen through the next layout change, rather than refitting. */
+    hold: (job: string) => void;
+}
+export interface GraphEditorApi {
+    store: UiStore;
+    /** The editor's strings, so what the graph draws for it needn't load them itself. */
+    t: GraphEditorStrings;
+    isMatrixJob: (job: string) => boolean;
+    startDrag: (e: ReactPointerEvent, payload: DragPayload) => void;
+    openJobMenu: (x: number, y: number, job: string) => void;
+    openStepMenu: (x: number, y: number, job: string, index: number) => void;
+    openEdgeMenu: (x: number, y: number, edge: EdgeSelection) => void;
+    /**
+     * Selects a connector alone, or with `add` adds it to the selected connectors or takes it out;
+     * selected jobs or steps give way to it.
+     */
+    selectEdge: (edge: EdgeSelection, add: boolean) => void;
+    /** Whether an expression reads one of a connector's needs, so it can't be removed or moved. */
+    edgeInUse: (edge: EdgeSelection) => boolean;
+    /** Starts moving one end of a connector; `fixed` is its other end, in the graph's own pixels. */
+    startEdgeEnd: (e: ReactPointerEvent, edge: EdgeSelection, end: 'from' | 'to', fixed: Point) => void;
+    /** Removes the selected jobs, steps and connectors; false when nothing is selected. */
+    deleteSelection: () => boolean;
+    /** Opens the dialog of the one selected job or step, reporting whether there was one. */
+    editSelection: () => boolean;
+    addJob: (matrix: boolean) => void;
+    addStep: (job: string) => void;
+    editJob: (job: string) => void;
+    editStep: (job: string, index: number) => void;
+    registerGrid: (grid: GraphGrid | null) => void;
+    grid: () => GraphGrid | null;
+    registerView: (view: GraphView | null) => void;
+    /** The selected jobs that still exist. */
+    selected: () => string[];
+    /** Adds a job to the selected jobs or takes it out; selected steps or connectors give way to it. */
+    toggleSelected: (job: string) => void;
+    /** The selected steps that still exist. */
+    selectedSteps: () => StepRef[];
+    /** Adds a step to the selected steps or takes it out; selected jobs or connectors give way to it. */
+    toggleStep: (step: StepRef) => void;
+    /** Puts the selected jobs or steps on the clipboard, as YAML; null when nothing is selected. */
+    copySelection: () => string | null;
+    /** Adds the jobs or steps in `text` near `pointer`; false when `text` holds neither. */
+    paste: (text: string, pointer: Point | null) => boolean;
+    /** Moves the selected jobs one slot; false when no jobs are selected. */
+    nudge: (direction: NudgeDirection) => boolean;
+    reveal: (target: RevealTarget) => void;
+    /** Selects a job, or one of its steps, alone. */
+    focus: (target: {
+        job: string;
+        step?: number;
+    }) => void;
+}
+export declare const GraphEditorProvider: import("react").Provider<GraphEditorApi | null>;
+export declare function useGraphEditor(): GraphEditorApi | null;
+export declare function useUi<T>(api: GraphEditorApi | null, select: (state: UiState) => T, fallback: T): T;
+export declare function useSelectedEdges(api: GraphEditorApi | null): EdgeSelection[];
+export declare const sameEdge: (a: EdgeSelection, b: EdgeSelection) => boolean;
+export declare function toContent(wrapper: HTMLElement, client: Point): Point;
+export declare function contentBox(wrapper: HTMLElement, el: Element): Box;
+/**
+ * The outline around the selected jobs, in content coordinates: as tall as their rows and
+ * as wide as their nodes, so its circles sit clear of the nodes' own.
+ */
+export declare function selectionBounds(wrapper: HTMLElement, jobs: string[]): (Box & {
+    connectorY: number;
+}) | null;

package/dist/graph/graphEditorState.js

@@ -0,0 +1,74 @@
+import { jobLabel } from "./util.js";
+import { createContext, useContext, useSyncExternalStore } from "react";
+//#region src/graph/graphEditorState.ts
+/** Pointer-downs on this class drag editor items instead of panning the graph. */
+var EDITOR_HANDLE_CLASS = "dag-editor-handle";
+var labelsOf = (jobs) => jobs.map((job) => jobLabel(job)).join(", ");
+var NO_SELECTION = [];
+var NO_STEPS = [];
+var NO_EDGES = [];
+var NO_PROBLEMS = [];
+var problemsIn = (problems, job, step) => problems.filter((problem) => problem.job === job && problem.step === step);
+var sameStep = (a, b) => a.job === b.job && a.index === b.index;
+var EditorContext = createContext(null);
+var GraphEditorProvider = EditorContext.Provider;
+function useGraphEditor() {
+	return useContext(EditorContext);
+}
+var noopSubscribe = () => () => {};
+function useUi(api, select, fallback) {
+	const snapshot = () => api ? select(api.store.get()) : fallback;
+	return useSyncExternalStore(api ? api.store.subscribe : noopSubscribe, snapshot, snapshot);
+}
+function useSelectedEdges(api) {
+	return useUi(api, (state) => state.edges, NO_EDGES);
+}
+var sameEdge = (a, b) => a.from === b.from && a.to === b.to;
+function toContent(wrapper, client) {
+	const rect = wrapper.getBoundingClientRect();
+	const scale = wrapper.offsetWidth > 0 ? rect.width / wrapper.offsetWidth : 1;
+	return {
+		x: (client.x - rect.left) / scale,
+		y: (client.y - rect.top) / scale
+	};
+}
+function contentBox(wrapper, el) {
+	const rect = wrapper.getBoundingClientRect();
+	const scale = wrapper.offsetWidth > 0 ? rect.width / wrapper.offsetWidth : 1;
+	const r = el.getBoundingClientRect();
+	return {
+		left: (r.left - rect.left) / scale,
+		top: (r.top - rect.top) / scale,
+		right: (r.right - rect.left) / scale,
+		bottom: (r.bottom - rect.top) / scale
+	};
+}
+var SELECTION_PAD = 12;
+var SELECTION_SIDE_PAD = 36;
+/**
+* The outline around the selected jobs, in content coordinates: as tall as their rows and
+* as wide as their nodes, so its circles sit clear of the nodes' own.
+*/
+function selectionBounds(wrapper, jobs) {
+	const found = jobs.flatMap((job) => {
+		const row = wrapper.querySelector(`[data-dag-job="${CSS.escape(job)}"]`);
+		const node = row?.closest("[id^=\"node_\"]");
+		const first = node?.querySelector("[data-dag-job]");
+		return row && node && first ? [{
+			row: contentBox(wrapper, row),
+			node: contentBox(wrapper, node),
+			first: contentBox(wrapper, first)
+		}] : [];
+	});
+	if (found.length === 0) return null;
+	const connectors = found.map((f) => f.node.top + 37 + f.row.top - f.first.top);
+	return {
+		left: Math.min(...found.map((f) => f.node.left)) - SELECTION_SIDE_PAD,
+		top: Math.min(...found.map((f) => f.row.top)) - SELECTION_PAD,
+		right: Math.max(...found.map((f) => f.node.right)) + SELECTION_SIDE_PAD,
+		bottom: Math.max(...found.map((f) => f.row.bottom)) + SELECTION_PAD,
+		connectorY: (Math.min(...connectors) + Math.max(...connectors)) / 2
+	};
+}
+//#endregion
+export { EDITOR_HANDLE_CLASS, GraphEditorProvider, NO_EDGES, NO_PROBLEMS, NO_SELECTION, NO_STEPS, contentBox, labelsOf, problemsIn, sameEdge, sameStep, selectionBounds, toContent, useGraphEditor, useSelectedEdges, useUi };

package/dist/graph/index.d.ts

@@ -2,8 +2,11 @@ export { DependencyGraphPreview, default as DependencyGraph, type ViewMode, } fr
 export type { DependencyGraphEditor, EditorProblem, RevealTarget, } from './editorApi.js';
 export { trackDrag } from './editorPrimitives.js';
 export { GRAPH_EDITOR_STRINGS, INPUTS_EDITOR_STRINGS } from './editorStrings.js';
+export { JOB_FIELDS, RETRY_FIELDS, RUNS_ON_FIELDS, SSH_KEYS, STEP_FIELDS, STRATEGY_FIELDS, } from './GraphEditorDialogs.js';
 export { inputTypes, offeredInputKeys } from './InputDialog.js';
 export { InputsFormEditor } from './InputsEditor.js';
 export { type ListedProblem, ProblemsButton } from './ProblemsButton.js';
 export type { SettingsView } from './settingsViews.js';
+export { type WorkflowActions, withFields } from './stepWith.js';
 export type { RunLink } from './types.js';
+export { INPUT_FORM_FIELDS, LINK_FIELDS, NEEDS_FIELDS, SESSION_FIELDS, WORKFLOW_FIELDS, WorkflowSettingsDialog, } from './WorkflowSettingsDialog.js';

package/dist/graph/index.js

@@ -1,7 +1,10 @@
-import DependencyGraph, { DependencyGraphPreview } from "./DependencyGraph.js";
 import { trackDrag } from "./editorPrimitives.js";
+import DependencyGraph, { DependencyGraphPreview } from "./DependencyGraph.js";
 import { GRAPH_EDITOR_STRINGS, INPUTS_EDITOR_STRINGS } from "./editorStrings.js";
 import { inputTypes, offeredInputKeys } from "./InputDialog.js";
+import { withFields } from "./stepWith.js";
+import { JOB_FIELDS, RETRY_FIELDS, RUNS_ON_FIELDS, SSH_KEYS, STEP_FIELDS, STRATEGY_FIELDS } from "./GraphEditorDialogs.js";
 import { ProblemsButton } from "./ProblemsButton.js";
 import { InputsFormEditor } from "./InputsEditor.js";
-export { DependencyGraph, DependencyGraphPreview, GRAPH_EDITOR_STRINGS, INPUTS_EDITOR_STRINGS, InputsFormEditor, ProblemsButton, inputTypes, offeredInputKeys, trackDrag };
+import { INPUT_FORM_FIELDS, LINK_FIELDS, NEEDS_FIELDS, SESSION_FIELDS, WORKFLOW_FIELDS, WorkflowSettingsDialog } from "./WorkflowSettingsDialog.js";
+export { DependencyGraph, DependencyGraphPreview, GRAPH_EDITOR_STRINGS, INPUTS_EDITOR_STRINGS, INPUT_FORM_FIELDS, InputsFormEditor, JOB_FIELDS, LINK_FIELDS, NEEDS_FIELDS, ProblemsButton, RETRY_FIELDS, RUNS_ON_FIELDS, SESSION_FIELDS, SSH_KEYS, STEP_FIELDS, STRATEGY_FIELDS, WORKFLOW_FIELDS, WorkflowSettingsDialog, inputTypes, offeredInputKeys, trackDrag, withFields };

package/dist/graph/inputLayout.js

@@ -1,6 +1,6 @@
 import { inputWidth } from "../form/lib.js";
-import { resolveFormLayout, responsiveLayoutValues } from "../form/layout.js";
 import { asRecord } from "./records.js";
+import { resolveFormLayout, responsiveLayoutValues } from "../form/layout.js";
 //#region src/graph/inputLayout.ts
 var namesIn = (list) => Object.keys(list).filter((name) => !name.startsWith("$"));
 var field = (name) => ({

package/dist/graph/inputRefs.js

@@ -1,12 +1,13 @@
 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 { useFieldLint } from "./fieldProblems.js";
 import { asRecord } from "./records.js";
+import { useFieldLint } from "./fieldProblems.js";
 import { SuggestionInput } from "./SuggestionInput.js";
-import { ExpressionToggle, FieldError, FieldLabel, LabelledField, flagError, flagValue, text } from "./editorFields.js";
-import { useId, useState } from "react";
+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. */
@@ -37,9 +38,18 @@ function inputRefs(editing, inputs) {
 	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(".")} }}`;
 }
@@ -47,11 +57,50 @@ 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();
@@ -67,6 +116,11 @@ function NewInputButton({ type, source, onCreated }) {
 		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 }) {
@@ -151,6 +205,59 @@ function FlagField({ label, yamlKey, description, value, original, fallback = fa
 		]
 	});
 }
+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();
@@ -192,5 +299,90 @@ function ValueOrInputField({ label, yamlKey, description, value, onChange, sourc
 		]
 	});
 }
+/** 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 { ExpressionInput, FlagField, ValueOrInputField, equalsExpression, flagExpression, inputRefs, refExpression };
+export { ConditionField, ExpressionInput, FlagField, InputRefSelect, ScriptField, ValueOrInputField, equalsExpression, flagExpression, inputRefs, readRef, refExpression, refSuggestions };

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