@parallelworks/ui 0.37.0 → 0.39.0

package/dist/graph/editorPrimitives.js

@@ -1,7 +1,61 @@
-import "classnames";
-import "react";
-import "react/jsx-runtime";
+import cx from "classnames";
+import { useEffect, useRef, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/graph/editorPrimitives.tsx
+/** A small store for an editor's view state, so a change redraws only what reads it. */
+function createStore(initial) {
+	let state = initial;
+	const listeners = /* @__PURE__ */ new Set();
+	return {
+		get: () => state,
+		set(patch) {
+			state = {
+				...state,
+				...patch
+			};
+			for (const listener of listeners) listener();
+		},
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		}
+	};
+}
+function useStore(store, select) {
+	return useSyncExternalStore(store.subscribe, () => select(store.get()));
+}
+/**
+* Gives `container` focus back once it has fallen to the page, as when the row, menu or dialog
+* holding it goes away, so the editor's shortcuts, Cmd+Z among them, keep reaching it.
+*/
+function reclaimFocus(container) {
+	window.setTimeout(() => {
+		const active = document.activeElement;
+		if (container?.isConnected && (!active || active === document.body)) container.focus({ preventScroll: true });
+	});
+}
+/** Reclaims focus for the editor's container each time its dialog closes. */
+function useFocusAfterDialog(store, container) {
+	const latest = useRef(container);
+	latest.current = container;
+	useEffect(() => {
+		let open = store.get().dialog !== null;
+		return store.subscribe(() => {
+			const now = store.get().dialog !== null;
+			if (open && !now) reclaimFocus(latest.current());
+			open = now;
+		});
+	}, [store]);
+}
+/** `openMenu` whose menus reclaim focus for the editor when they close. */
+function returningFocus(openMenu, container) {
+	return (x, y, items, onClose, search) => openMenu(x, y, items, () => {
+		onClose?.();
+		reclaimFocus(container());
+	}, search);
+}
 var DRAG_THRESHOLD = 4;
 function suppressNextClick() {
 	const swallow = (e) => {
@@ -55,5 +109,42 @@ function trackDrag(start, { onMove, onEnd, onCancel, escape: cancelOnEscape = fa
 	window.addEventListener("pointercancel", cancel);
 	if (cancelOnEscape) window.addEventListener("keydown", key, true);
 }
+function place(box) {
+	return {
+		left: box.left,
+		top: box.top,
+		width: box.right - box.left,
+		height: box.bottom - box.top
+	};
+}
+/** The box a shift + drag draws, in its layer's coordinates. */
+function MarqueeBox({ box, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("absolute rounded-md border-2 border-dashed border-(--theme-element) bg-(--theme-element)/10", className),
+		style: place(box)
+	});
+}
+var OPENED = "[role=\"menu\"], [role=\"dialog\"], [role=\"listbox\"]";
+/** Calls `clear` when a press lands outside the editor and everything it has open. */
+function usePressOutside(container, clear) {
+	const latest = useRef({
+		container,
+		clear
+	});
+	latest.current = {
+		container,
+		clear
+	};
+	useEffect(() => {
+		const onDown = (e) => {
+			const root = latest.current.container();
+			const target = e.target;
+			if (!root || !(target instanceof Element) || root.contains(target) || target.closest(OPENED) || target.querySelector(`:scope > :is(${OPENED})`)) return;
+			latest.current.clear();
+		};
+		document.addEventListener("pointerdown", onDown, true);
+		return () => document.removeEventListener("pointerdown", onDown, true);
+	}, []);
+}
 //#endregion
-export { trackDrag };
+export { MarqueeBox, createStore, place, reclaimFocus, returningFocus, trackDrag, useFocusAfterDialog, usePressOutside, useStore };

package/dist/graph/editorRows.d.ts

@@ -0,0 +1,58 @@
+import { type ReactNode } from 'react';
+import { type Point } from './editorPrimitives.js';
+import { type EdgeSelection } from './graphEditorState.js';
+/** Drop indicators, the connection line and the selection, drawn in the graph's own coordinates. */
+export declare function GraphEditorCanvas(): import("react").JSX.Element | null;
+/** A multi-job box's handle for moving all its jobs at once. */
+export declare function BoxGrip({ jobs }: {
+    jobs: string[];
+}): import("react").JSX.Element | null;
+/** A job row made draggable, with its menu and matrix badge; shift-click selects it. */
+export declare function EditableJobRow({ job, label, badge, children, }: {
+    job: string;
+    label: string;
+    badge?: boolean;
+    children: ReactNode;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+/**
+ * A node's connector circles, where the graph draws its connector dots. Drag from the
+ * right one to add jobs that depend on the node, from the left one to add what it needs.
+ */
+export declare function NodePorts({ jobs, left, right, drawLeft, drawRight, zIndex, }: {
+    jobs: string[];
+    left: Point;
+    right: Point;
+    drawLeft: boolean;
+    drawRight: boolean;
+    zIndex: number;
+}): import("react").JSX.Element | null;
+/** A step row made draggable within its job, with its menu. */
+export declare function EditableStepRow({ job, index, label, children, }: {
+    job: string;
+    index: number;
+    label: string;
+    children: ReactNode;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+export declare function AddStepButton({ job }: {
+    job: string;
+}): import("react").JSX.Element | null;
+/** Connector hit area: a click selects the dependency, shift adds it, a right-click opens its menu. */
+export declare function EdgeHitPath({ d, edge }: {
+    d: string;
+    edge: EdgeSelection;
+}): import("react").JSX.Element | null;
+/** A selected connector's two ends; dragging one onto another job or node moves that end there. */
+export declare function EdgeEnds({ edge, start, end, zIndex, }: {
+    edge: EdgeSelection;
+    start: Point;
+    end: Point;
+    zIndex: number;
+}): import("react").JSX.Element | null;
+/** Shown in place of the graph when the workflow has no jobs yet. */
+/** The canvas of a graph with no jobs, which takes the graph's keys, so undo and paste still work. */
+export declare function EmptyGraphEditor({ containerRef, overlays, height, removeBorder, }: {
+    containerRef: (el: HTMLDivElement | null) => void;
+    overlays: ReactNode;
+    height: string;
+    removeBorder?: boolean | undefined;
+}): import("react").JSX.Element;

package/dist/graph/editorRows.js

@@ -0,0 +1,460 @@
+import { BsThreeDots } from "../icons/bs/BsThreeDots.js";
+import { FaPlus } from "../icons/fa/FaPlus.js";
+import { MdDragHandle } from "../icons/md/MdDragHandle.js";
+import { TbAlertTriangle } from "../icons/tb/TbAlertTriangle.js";
+import { TOOLTIP_ID } from "../components/Tooltip.js";
+import { MarqueeBox, place } from "./editorPrimitives.js";
+import { EDITOR_HANDLE_CLASS, NO_SELECTION, labelsOf, problemsIn, sameEdge, sameStep, selectionBounds, useGraphEditor, useSelectedEdges, useUi } from "./graphEditorState.js";
+import cx from "classnames";
+import { useEffect, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/editorRows.tsx
+/** Drop indicators, the connection line and the selection, drawn in the graph's own coordinates. */
+function GraphEditorCanvas() {
+	const api = useGraphEditor();
+	const drag = useUi(api, (state) => state.drag, null);
+	const selection = useUi(api, (state) => state.selection, NO_SELECTION);
+	const marquee = useUi(api, (state) => state.marquee, null);
+	if (!api || !drag && !marquee && selection.length === 0) return null;
+	const target = drag?.target ?? null;
+	const indicator = target?.kind === "slot" || target?.kind === "steps" && !target.around ? target.indicator : null;
+	const outline = target?.kind === "steps" && target.around ? target.indicator : null;
+	const refused = target?.kind === "slot" && target.blocked || target?.kind === "steps" && !!target.problem;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "pointer-events-none absolute inset-0",
+		style: { zIndex: 60 },
+		children: [
+			marquee && /* @__PURE__ */ jsx(MarqueeBox, { box: marquee }),
+			!marquee && drag?.payload.kind !== "jobs" && /* @__PURE__ */ jsx(SelectionBox, { api }),
+			indicator && /* @__PURE__ */ jsx("div", {
+				className: cx("absolute rounded-full", refused ? "bg-(--theme-error)" : "bg-(--theme-element)"),
+				style: place(indicator)
+			}),
+			outline && /* @__PURE__ */ jsx("div", {
+				className: cx("absolute rounded-md border-4", refused ? "border-(--theme-error)" : "border-(--theme-element)"),
+				style: {
+					left: outline.left - 8,
+					top: outline.top - 4,
+					width: outline.right - outline.left + 16,
+					height: outline.bottom - outline.top + 8
+				}
+			}),
+			(target?.kind === "connect" || target?.kind === "merge") && /* @__PURE__ */ jsx("div", {
+				className: cx("absolute rounded-md border-4", (target.kind === "connect" ? target.edits : target.valid) ? "border-(--theme-element)" : "border-(--theme-error)"),
+				style: {
+					left: target.box.left - 8,
+					top: target.box.top - 4,
+					width: target.box.right - target.box.left + 16,
+					height: target.box.bottom - target.box.top + 8
+				}
+			}),
+			drag?.payload.kind === "connect" && drag.origin && drag.content && /* @__PURE__ */ jsx("svg", {
+				"aria-hidden": "true",
+				overflow: "visible",
+				className: "absolute left-0 top-0",
+				children: /* @__PURE__ */ jsx("line", {
+					x1: drag.origin.x,
+					y1: drag.origin.y,
+					x2: drag.content.x,
+					y2: drag.content.y,
+					stroke: target?.kind === "connect" && !target.edits ? "var(--theme-error)" : "var(--theme-element)",
+					strokeWidth: 6,
+					strokeDasharray: "16 10"
+				})
+			})
+		]
+	});
+}
+/** One outline around the selected jobs, with a grip to move them all and circles to connect them. */
+function SelectionBox({ api }) {
+	const t = api.t;
+	const grid = api.grid();
+	const jobs = api.selected();
+	const bounds = grid ? selectionBounds(grid.wrapper, jobs) : null;
+	if (!grid || !bounds) return null;
+	const anchor = grid.cols.flat(2).find((job) => jobs.includes(job));
+	const y = bounds.connectorY;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("div", {
+			className: "absolute rounded-xl border-2 border-dashed border-(--theme-element)",
+			style: place(bounds)
+		}),
+		/* @__PURE__ */ jsx(PortCircle, {
+			side: "in",
+			at: {
+				x: bounds.left,
+				y
+			},
+			draw: true,
+			jobs,
+			port: "selection",
+			hint: t.selectionInHint
+		}),
+		/* @__PURE__ */ jsx(PortCircle, {
+			side: "out",
+			at: {
+				x: bounds.right,
+				y
+			},
+			draw: true,
+			jobs,
+			port: "selection",
+			hint: t.selectionOutHint
+		}),
+		/* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": t.moveSelectionHint,
+			"data-tooltip-id": TOOLTIP_ID,
+			"data-tooltip-content": t.moveSelectionHint,
+			className: cx(EDITOR_HANDLE_CLASS, "pointer-events-auto absolute flex h-8 w-8 cursor-grab items-center justify-center rounded-full border-4 border-(--theme-element) bg-(--theme-panel-bg)"),
+			style: {
+				left: bounds.left - 16,
+				top: bounds.top - 16
+			},
+			onPointerDown: (e) => api.startDrag(e, {
+				kind: "jobs",
+				jobs,
+				label: labelsOf(jobs),
+				...anchor ? { anchor } : {}
+			}),
+			children: /* @__PURE__ */ jsx(MdDragHandle, { className: "h-5 w-5" })
+		})
+	] });
+}
+/** A multi-job box's handle for moving all its jobs at once. */
+function BoxGrip({ jobs }) {
+	const api = useGraphEditor();
+	if (!api) return null;
+	const t = api.t;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": t.moveBoxHint,
+		"data-tooltip-id": TOOLTIP_ID,
+		"data-tooltip-content": t.moveBoxHint,
+		className: cx(EDITOR_HANDLE_CLASS, "absolute -left-[18px] -top-[18px] flex h-8 w-8 cursor-grab items-center justify-center rounded-full border-4 theme-border bg-(--theme-panel-bg)"),
+		onPointerDown: (e) => api.startDrag(e, {
+			kind: "jobs",
+			jobs,
+			label: labelsOf(jobs)
+		}),
+		children: /* @__PURE__ */ jsx(MdDragHandle, { className: "h-5 w-5" })
+	});
+}
+var onBadge = (target) => target instanceof Element && !!target.closest("[data-problem-badge]");
+/** A step's problems, or a job's with its steps', listed on hover; a click shows the first one's line. */
+function ProblemBadge({ api, job, step }) {
+	const t = api.t;
+	const mine = (problems) => step === void 0 ? problems.filter((problem) => problem.job === job) : problemsIn(problems, job, step);
+	const messages = useUi(api, (state) => mine(state.problems).map((problem) => problem.message).join("\n"), "");
+	const line = useUi(api, (state) => mine(state.problems)[0]?.line ?? 0, 0);
+	if (!messages) return null;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-problem-badge": "",
+		"aria-label": t.problemCount(messages.split("\n").length),
+		"data-tooltip-id": TOOLTIP_ID,
+		"data-tooltip-content": messages,
+		className: "cursor-pointer rounded p-0.5 text-(--theme-error) hover:bg-(--theme-muted-panel-bg)",
+		onPointerDown: (e) => e.stopPropagation(),
+		onClick: (e) => {
+			e.stopPropagation();
+			api.reveal({ line });
+		},
+		children: /* @__PURE__ */ jsx(TbAlertTriangle, { className: "h-[0.9em] w-[0.9em]" })
+	});
+}
+/** What a job or step row does in the editor: drag, shift-click to select, a menu, its problems. */
+function EditableRow({ api, selected, flagged, data, className, drag, toggle, reveal, openMenu, menuLabel, menuClassName, iconClassName, badges, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		role: "none",
+		...data,
+		...selected ? { "data-selected": "" } : {},
+		className: cx(EDITOR_HANDLE_CLASS, "-mx-0.5 px-0.5", className, selected && "bg-(--theme-element)/15", flagged ? "ring-2 ring-(--theme-error)" : selected && "ring-2 ring-(--theme-element)"),
+		onPointerDown: (e) => {
+			if (e.shiftKey) e.preventDefault();
+			api.startDrag(e, drag());
+		},
+		onClickCapture: (e) => {
+			if (onBadge(e.target)) return;
+			if (e.shiftKey) {
+				e.preventDefault();
+				e.stopPropagation();
+				if (!toggle()) return;
+			}
+			reveal();
+		},
+		onContextMenu: (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			openMenu(e.clientX, e.clientY);
+		},
+		children: [
+			children,
+			badges,
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": menuLabel,
+				className: cx("cursor-pointer rounded theme-muted-text opacity-0 transition-opacity hover:bg-(--theme-muted-panel-bg) focus-visible:opacity-100", menuClassName),
+				onPointerDown: (e) => e.stopPropagation(),
+				onClick: (e) => {
+					e.stopPropagation();
+					const r = e.currentTarget.getBoundingClientRect();
+					openMenu(r.right, r.bottom);
+				},
+				children: /* @__PURE__ */ jsx(BsThreeDots, { className: iconClassName })
+			})
+		]
+	});
+}
+/** A job row made draggable, with its menu and matrix badge; shift-click selects it. */
+function EditableJobRow({ job, label, badge = true, children }) {
+	const api = useGraphEditor();
+	const selected = useUi(api, (state) => state.selection.includes(job), false);
+	const flagged = useUi(api, (state) => problemsIn(state.problems, job).length > 0, false);
+	if (!api) return children;
+	const t = api.t;
+	return /* @__PURE__ */ jsx(EditableRow, {
+		api,
+		selected,
+		flagged,
+		data: { "data-dag-job": job },
+		className: "group/row relative flex cursor-grab items-center gap-x-2 rounded-md [&>button:first-child]:w-auto [&>button:first-child]:flex-1",
+		drag: () => {
+			const selection = api.selected();
+			return selection.length > 1 && selection.includes(job) ? {
+				kind: "jobs",
+				jobs: selection,
+				anchor: job,
+				label: labelsOf(selection)
+			} : {
+				kind: "jobs",
+				jobs: [job],
+				label
+			};
+		},
+		toggle: () => {
+			api.toggleSelected(job);
+			return api.store.get().selection.includes(job);
+		},
+		reveal: () => api.reveal({ job }),
+		openMenu: (x, y) => api.openJobMenu(x, y, job),
+		menuLabel: t.jobActions,
+		menuClassName: "p-1 group-hover/row:opacity-100",
+		iconClassName: "h-[1em] w-[1em]",
+		badges: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ProblemBadge, {
+			api,
+			job
+		}), badge && api.isMatrixJob(job) && /* @__PURE__ */ jsx("span", {
+			className: "rounded-full border-2 theme-border px-2 text-[1rem] theme-muted-text",
+			children: t.matrixBadge
+		})] }),
+		children
+	});
+}
+/** One connector circle: dragging it connects `jobs`, dropping on it connects to them. */
+function PortCircle({ side, at, draw, jobs, port, hint, zIndex }) {
+	const api = useGraphEditor();
+	const drag = useUi(api, (state) => state.drag, null);
+	if (!api) return null;
+	const dragging = drag?.payload.kind === "connect" && drag.payload.port === port && drag.payload.side === side;
+	return /* @__PURE__ */ jsxs("span", {
+		role: "none",
+		"data-dag-port": side,
+		...port === "selection" ? { "data-dag-selection": "" } : { "data-dag-node": jobs[0] },
+		...drag ? {} : { "data-tooltip-id": TOOLTIP_ID },
+		"data-tooltip-content": hint,
+		className: cx(EDITOR_HANDLE_CLASS, "group/port pointer-events-auto absolute flex h-8 w-8 cursor-crosshair items-center justify-center"),
+		style: {
+			left: at.x - 16,
+			top: at.y - 16,
+			...zIndex === void 0 ? {} : { zIndex }
+		},
+		onPointerDown: (e) => api.startDrag(e, {
+			kind: "connect",
+			from: jobs,
+			side,
+			label: labelsOf(jobs),
+			port
+		}),
+		children: [draw && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 bg-(--theme-panel-bg)" }), /* @__PURE__ */ jsx("span", { className: cx("relative h-4 w-4 rounded-full group-hover/port:bg-(--theme-element)", dragging ? "bg-(--theme-element)" : draw && "bg-(--theme-border)") })]
+	});
+}
+/**
+* A node's connector circles, where the graph draws its connector dots. Drag from the
+* right one to add jobs that depend on the node, from the left one to add what it needs.
+*/
+function NodePorts({ jobs, left, right, drawLeft, drawRight, zIndex }) {
+	const api = useGraphEditor();
+	if (!api) return null;
+	const t = api.t;
+	const port = `node:${jobs[0]}`;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PortCircle, {
+		side: "in",
+		at: left,
+		draw: drawLeft,
+		jobs,
+		port,
+		hint: t.connectInHint,
+		zIndex
+	}), /* @__PURE__ */ jsx(PortCircle, {
+		side: "out",
+		at: right,
+		draw: drawRight,
+		jobs,
+		port,
+		hint: t.connectOutHint,
+		zIndex
+	})] });
+}
+/** A step row made draggable within its job, with its menu. */
+function EditableStepRow({ job, index, label, children }) {
+	const api = useGraphEditor();
+	const selected = useUi(api, (state) => state.steps.some((ref) => ref.job === job && ref.index === index), false);
+	const flagged = useUi(api, (state) => problemsIn(state.problems, job, index).length > 0, false);
+	if (!api) return children;
+	const t = api.t;
+	return /* @__PURE__ */ jsx(EditableRow, {
+		api,
+		selected,
+		flagged,
+		data: {
+			"data-dag-step-job": job,
+			"data-dag-step": index
+		},
+		className: "group/step flex cursor-grab items-center gap-x-1 rounded",
+		drag: () => {
+			const steps = api.selectedSteps();
+			return selected && steps.length > 1 ? {
+				kind: "steps",
+				steps,
+				label: t.stepCount(steps.length)
+			} : {
+				kind: "steps",
+				steps: [{
+					job,
+					index
+				}],
+				label
+			};
+		},
+		toggle: () => {
+			api.toggleStep({
+				job,
+				index
+			});
+			return api.store.get().steps.some((ref) => sameStep(ref, {
+				job,
+				index
+			}));
+		},
+		reveal: () => api.reveal({
+			job,
+			step: index
+		}),
+		openMenu: (x, y) => api.openStepMenu(x, y, job, index),
+		menuLabel: t.stepActions,
+		menuClassName: "p-0.5 group-hover/step:opacity-100",
+		iconClassName: "h-[0.9em] w-[0.9em]",
+		badges: /* @__PURE__ */ jsx(ProblemBadge, {
+			api,
+			job,
+			step: index
+		}),
+		children
+	});
+}
+function AddStepButton({ job }) {
+	const api = useGraphEditor();
+	if (!api) return null;
+	const t = api.t;
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: "ml-1.5 flex cursor-pointer items-center gap-x-1.5 text-left theme-muted-text hover:text-(--theme-link)",
+		onPointerDown: (e) => e.stopPropagation(),
+		onClick: (e) => {
+			e.stopPropagation();
+			api.addStep(job);
+		},
+		children: [/* @__PURE__ */ jsx(FaPlus, { className: "h-[0.8em] w-[0.8em]" }), t.addStep]
+	});
+}
+/** Connector hit area: a click selects the dependency, shift adds it, a right-click opens its menu. */
+function EdgeHitPath({ d, edge }) {
+	const api = useGraphEditor();
+	const selected = useSelectedEdges(api).some((other) => sameEdge(other, edge));
+	if (!api) return null;
+	const t = api.t;
+	return /* @__PURE__ */ jsx("path", {
+		role: "button",
+		tabIndex: 0,
+		"aria-label": t.dependencyOf(edge.from, edge.to),
+		"aria-pressed": selected,
+		"data-dag-edge-from": edge.from,
+		"data-dag-edge-to": edge.to,
+		d,
+		stroke: "transparent",
+		strokeWidth: 28,
+		fill: "none",
+		className: cx(EDITOR_HANDLE_CLASS, "outline-none focus-visible:[stroke:color-mix(in_srgb,var(--theme-element)_35%,transparent)]"),
+		style: {
+			pointerEvents: "stroke",
+			cursor: "pointer"
+		},
+		onClick: (e) => api.selectEdge(edge, e.shiftKey),
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				api.selectEdge(edge, e.shiftKey);
+			}
+		},
+		onContextMenu: (e) => {
+			e.preventDefault();
+			api.openEdgeMenu(e.clientX, e.clientY, edge);
+		}
+	});
+}
+/** A selected connector's two ends; dragging one onto another job or node moves that end there. */
+function EdgeEnds({ edge, start, end, zIndex }) {
+	const api = useGraphEditor();
+	const drag = useUi(api, (state) => state.drag, null);
+	if (!api) return null;
+	const t = api.t;
+	const inUse = api.edgeInUse(edge);
+	const handle = (side, at, fixed) => /* @__PURE__ */ jsx("span", {
+		role: "none",
+		"data-dag-edge-end": side,
+		...drag ? {} : { "data-tooltip-id": TOOLTIP_ID },
+		"data-tooltip-content": inUse ? t.dependencyInUse : t.moveDependencyEnd,
+		className: cx(EDITOR_HANDLE_CLASS, "pointer-events-auto absolute flex h-8 w-8 items-center justify-center", inUse ? "cursor-not-allowed" : "cursor-grab"),
+		style: {
+			left: at.x - 16,
+			top: at.y - 16,
+			zIndex
+		},
+		onPointerDown: (e) => {
+			if (!inUse) api.startEdgeEnd(e, edge, side, fixed);
+		},
+		children: /* @__PURE__ */ jsx("span", { className: "h-5 w-5 rounded-full border-4 border-(--theme-element) bg-(--theme-panel-bg)" })
+	}, side);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [handle("from", start, end), handle("to", end, start)] });
+}
+/** Shown in place of the graph when the workflow has no jobs yet. */
+/** The canvas of a graph with no jobs, which takes the graph's keys, so undo and paste still work. */
+function EmptyGraphEditor({ containerRef, overlays, height, removeBorder }) {
+	const own = useRef(null);
+	useEffect(() => {
+		if (document.activeElement === document.body) own.current?.focus({ preventScroll: true });
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		ref: (el) => {
+			own.current = el;
+			containerRef(el);
+		},
+		tabIndex: -1,
+		className: cx("panel relative w-full overflow-hidden outline-none", removeBorder ? "border-none" : "border"),
+		style: { height },
+		children: overlays
+	});
+}
+//#endregion
+export { AddStepButton, BoxGrip, EdgeEnds, EdgeHitPath, EditableJobRow, EditableStepRow, EmptyGraphEditor, GraphEditorCanvas, NodePorts };

package/dist/graph/editorStrings.d.ts

@@ -241,6 +241,7 @@ export declare const GRAPH_EDITOR_STRINGS: {
     otherInputs: string;
     viewForm: string;
     viewYaml: string;
+    fixFieldsFirst: string;
     yamlSyntax: (message: string) => string;
     yamlNotMap: string;
     fields: {

package/dist/graph/editorStrings.js

@@ -243,6 +243,7 @@ var GRAPH_EDITOR_STRINGS = {
 	otherInputs: "Other inputs",
 	viewForm: "Form",
 	viewYaml: "YAML",
+	fixFieldsFirst: "Fix the fields with errors first, so the YAML shows everything you entered.",
 	yamlSyntax: (message) => `The YAML doesn’t parse: ${message}`,
 	yamlNotMap: "Write the settings as keys and values, such as run: make.",
 	fields: {
@@ -695,5 +696,13 @@ function useGraphEditorStrings() {
 		...overrides
 	}), [overrides]);
 }
+/** The input form editor's strings: the host's translations over the English defaults. */
+function useInputsEditorStrings() {
+	const overrides = useStrings().inputsEditor;
+	return useMemo(() => ({
+		...INPUTS_EDITOR_STRINGS,
+		...overrides
+	}), [overrides]);
+}
 //#endregion
-export { GRAPH_EDITOR_STRINGS, INPUTS_EDITOR_STRINGS, useGraphEditorStrings };
+export { GRAPH_EDITOR_STRINGS, INPUTS_EDITOR_STRINGS, useGraphEditorStrings, useInputsEditorStrings };