@parallelworks/ui 0.36.0 → 0.38.0

package/dist/graph/ProblemsButton.d.ts

@@ -0,0 +1,9 @@
+import type { EditorProblem } from './editorApi.js';
+/** A problem as a pane lists it; `pick` shows where it is, when an open pane can. */
+export interface ListedProblem extends EditorProblem {
+    pick?: (() => void) | undefined;
+}
+/** A toolbar's count of the problems it lists, which opens the list. */
+export declare function ProblemsButton({ problems }: {
+    problems: ListedProblem[];
+}): import("react").JSX.Element | null;

package/dist/graph/ProblemsButton.js

@@ -0,0 +1,61 @@
+import { TbAlertTriangle } from "../icons/tb/TbAlertTriangle.js";
+import { keyedByContent } from "../components/keys.js";
+import { TOOLTIP_ID } from "../components/Tooltip.js";
+import { useGraphEditorStrings } from "./editorStrings.js";
+import { ToolbarPopover } from "./ToolbarPopover.js";
+import { useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/ProblemsButton.tsx
+/** A toolbar's count of the problems it lists, which opens the list. */
+function ProblemsButton({ problems }) {
+	const t = useGraphEditorStrings();
+	const [open, setOpen] = useState(false);
+	const button = useRef(null);
+	if (problems.length === 0) return null;
+	const label = t.problemCount(problems.length);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
+		ref: button,
+		type: "button",
+		"aria-label": label,
+		"aria-expanded": open,
+		...open ? {} : { "data-tooltip-id": TOOLTIP_ID },
+		"data-tooltip-content": label,
+		className: "flex h-7 cursor-pointer items-center gap-1 rounded px-2 text-xs font-medium text-(--theme-error) theme-hover",
+		onClick: () => setOpen((current) => !current),
+		children: [/* @__PURE__ */ jsx(TbAlertTriangle, { className: "h-3.5 w-3.5" }), problems.length]
+	}), open && /* @__PURE__ */ jsxs(ToolbarPopover, {
+		anchor: button,
+		label,
+		onClose: () => setOpen(false),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "mb-2 text-[0.8125rem] font-semibold",
+			children: label
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-col gap-0.5",
+			children: keyedByContent(problems, (problem) => `${problem.line}:${problem.message}`).map(({ key, item: problem }) => {
+				const { pick } = problem;
+				const text = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+					className: "mr-1.5 theme-muted-text",
+					children: t.problemLine(problem.line)
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-(--theme-error)",
+					children: problem.message
+				})] });
+				return /* @__PURE__ */ jsx("li", { children: pick ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "w-full cursor-pointer rounded px-1.5 py-1 text-left theme-hover",
+					onClick: () => {
+						setOpen(false);
+						pick();
+					},
+					children: text
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "px-1.5 py-1",
+					children: text
+				}) }, key);
+			})
+		})]
+	})] });
+}
+//#endregion
+export { ProblemsButton };

package/dist/graph/ShortcutsButton.d.ts

@@ -0,0 +1,15 @@
+/** What a gesture or key does; each combo is a set of keys, and a second combo does the same. */
+export interface Shortcut {
+    combos: string[][];
+    does: string;
+}
+export interface ShortcutGroup {
+    title: string;
+    shortcuts: Shortcut[];
+}
+export declare const MOD_KEY: string;
+export declare const ALT_KEY: string;
+/** A toolbar button that opens the list of gestures and keys a pane takes. */
+export declare function ShortcutsButton({ groups }: {
+    groups: ShortcutGroup[];
+}): import("react").JSX.Element;

package/dist/graph/ShortcutsButton.js

@@ -0,0 +1,56 @@
+import { LuKeyboard } from "../icons/lu/LuKeyboard.js";
+import { IconButton } from "../components/IconButton.js";
+import { useGraphEditorStrings } from "./editorStrings.js";
+import { ToolbarPopover } from "./ToolbarPopover.js";
+import { Fragment, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/ShortcutsButton.tsx
+var MOD_KEY = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform) ? "⌘" : "Ctrl";
+var ALT_KEY = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform) ? "⌥" : "Alt";
+/** A toolbar button that opens the list of gestures and keys a pane takes. */
+function ShortcutsButton({ groups }) {
+	const t = useGraphEditorStrings();
+	const [open, setOpen] = useState(false);
+	const button = useRef(null);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconButton, {
+		ref: button,
+		icon: /* @__PURE__ */ jsx(LuKeyboard, { className: "h-4 w-4" }),
+		label: t.shortcuts,
+		size: "sm",
+		variant: "ghost",
+		"aria-expanded": open,
+		showTooltip: !open,
+		onClick: () => setOpen((current) => !current)
+	}), open && /* @__PURE__ */ jsxs(ToolbarPopover, {
+		anchor: button,
+		label: t.shortcuts,
+		onClose: () => setOpen(false),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "text-[0.8125rem] font-semibold",
+			children: t.shortcuts
+		}), groups.map((group) => /* @__PURE__ */ jsxs("section", {
+			className: "mt-3",
+			children: [/* @__PURE__ */ jsx("h3", {
+				className: "mb-1.5 text-xs font-semibold theme-muted-text",
+				children: group.title
+			}), /* @__PURE__ */ jsx("dl", {
+				className: "grid grid-cols-[8.5rem_1fr] items-baseline gap-x-3 gap-y-1.5",
+				children: group.shortcuts.map((shortcut) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
+					className: "flex flex-wrap items-center gap-1",
+					children: shortcut.combos.map((keys, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && /* @__PURE__ */ jsx("span", {
+						className: "theme-muted-text",
+						children: "/"
+					}), keys.map((key) => /* @__PURE__ */ jsx("kbd", {
+						className: "rounded border theme-border px-1 py-px text-[11px]",
+						children: key
+					}, key))] }, keys.join("+")))
+				}), /* @__PURE__ */ jsx("dd", {
+					className: "theme-muted-text",
+					children: shortcut.does
+				})] }, shortcut.does))
+			})]
+		}, group.title))]
+	})] });
+}
+//#endregion
+export { ALT_KEY, MOD_KEY, ShortcutsButton };

package/dist/graph/SuggestionInput.d.ts

@@ -0,0 +1,18 @@
+import { type IProps as DropdownProps } from '../components/Dropdown.js';
+import type { IOptions } from '../components/dropdownUtils.js';
+/** A value a typed field offers, with what it means. */
+export interface Suggestion {
+    value: string;
+    label?: string | undefined;
+}
+export declare function suggestionOptions(suggestions: Suggestion[]): (IOptions | string)[];
+export declare const FIELD_TEXT_BOX = "py-3 pl-4 rounded-lg text-sm !bg-[var(--theme-muted-panel-bg)]";
+/**
+ * The dropdown for a field that takes any typed value as well as the ones it offers. Any of
+ * the dropdown's own props can still be passed, such as `allowCustomValue={false}`.
+ */
+export declare function SuggestionInput({ value, onChange, suggestions, allowCustomValue, ...props }: Omit<DropdownProps, 'options' | 'value' | 'onChange'> & {
+    value: string;
+    onChange: (value: string) => void;
+    suggestions: Suggestion[];
+}): import("react").JSX.Element;

package/dist/graph/SuggestionInput.js

@@ -0,0 +1,29 @@
+import Dropdown from "../components/Dropdown.js";
+import cx from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/graph/SuggestionInput.tsx
+function suggestionOptions(suggestions) {
+	return suggestions.map(({ value, label }) => label ? {
+		label,
+		value,
+		description: value
+	} : value);
+}
+var FIELD_TEXT_BOX = "py-3 pl-4 rounded-lg text-sm !bg-[var(--theme-muted-panel-bg)]";
+/**
+* The dropdown for a field that takes any typed value as well as the ones it offers. Any of
+* the dropdown's own props can still be passed, such as `allowCustomValue={false}`.
+*/
+function SuggestionInput({ value, onChange, suggestions, allowCustomValue = true, ...props }) {
+	return /* @__PURE__ */ jsx(Dropdown, {
+		showCaret: suggestions.length > 0,
+		...props,
+		textBoxClassName: cx(FIELD_TEXT_BOX, props.textBoxClassName),
+		allowCustomValue,
+		value,
+		options: suggestionOptions(suggestions),
+		onChange: (next) => onChange(next === void 0 ? "" : String(next))
+	});
+}
+//#endregion
+export { FIELD_TEXT_BOX, SuggestionInput, suggestionOptions };

package/dist/graph/ToolbarPopover.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode, type RefObject } from 'react';
+/** A toolbar button's panel, drawn over the page so the pane it sits in can't clip it. */
+export declare function ToolbarPopover({ anchor, label, onClose, children, }: {
+    anchor: RefObject<HTMLElement | null>;
+    label: string;
+    onClose: () => void;
+    children: ReactNode;
+}): import("react").ReactPortal;

package/dist/graph/ToolbarPopover.js

@@ -0,0 +1,71 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/graph/ToolbarPopover.tsx
+var GAP = 8;
+var PANEL_WIDTH = 384;
+function placeBy(anchor, width) {
+	const rect = anchor.getBoundingClientRect();
+	const above = rect.top - 16;
+	const below = window.innerHeight - rect.bottom - 16;
+	const right = Math.max(GAP, Math.min(window.innerWidth - rect.right, window.innerWidth - GAP - width));
+	return above >= below ? {
+		right,
+		bottom: window.innerHeight - rect.top + GAP,
+		maxHeight: above
+	} : {
+		right,
+		top: rect.bottom + GAP,
+		maxHeight: below
+	};
+}
+/** A toolbar button's panel, drawn over the page so the pane it sits in can't clip it. */
+function ToolbarPopover({ anchor, label, onClose, children }) {
+	const panel = useRef(null);
+	const [place, setPlace] = useState(null);
+	const close = useRef(onClose);
+	close.current = onClose;
+	useLayoutEffect(() => {
+		const update = () => {
+			if (anchor.current) setPlace(placeBy(anchor.current, panel.current?.offsetWidth || PANEL_WIDTH));
+		};
+		update();
+		window.addEventListener("resize", update);
+		window.addEventListener("scroll", update, true);
+		return () => {
+			window.removeEventListener("resize", update);
+			window.removeEventListener("scroll", update, true);
+		};
+	}, [anchor]);
+	useEffect(() => {
+		panel.current?.focus({ preventScroll: true });
+		const away = (e) => {
+			const target = e.target;
+			if (!panel.current?.contains(target) && !anchor.current?.contains(target)) close.current();
+		};
+		const onEscape = (e) => {
+			if (e.key === "Escape") {
+				e.stopPropagation();
+				close.current();
+				anchor.current?.focus({ preventScroll: true });
+			}
+		};
+		window.addEventListener("pointerdown", away, true);
+		window.addEventListener("keydown", onEscape, true);
+		return () => {
+			window.removeEventListener("pointerdown", away, true);
+			window.removeEventListener("keydown", onEscape, true);
+		};
+	}, [anchor]);
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		ref: panel,
+		role: "dialog",
+		"aria-label": label,
+		tabIndex: -1,
+		className: "fixed z-50 w-96 max-w-[calc(100vw-16px)] overflow-y-auto rounded-md border theme-border bg-(--theme-panel-bg) p-3 text-xs text-(--theme-app) shadow-lg outline-none",
+		style: place ?? { visibility: "hidden" },
+		children
+	}), document.body);
+}
+//#endregion
+export { ToolbarPopover };

package/dist/graph/editorApi.d.ts

@@ -0,0 +1,51 @@
+import type { GraphEdit, GraphEditResult } from '../editing.js';
+import type { Box } from './editorPrimitives.js';
+import type { ListedProblem } from './ProblemsButton.js';
+import type { SettingsView } from './settingsViews.js';
+export type { Box };
+export interface EditorProblem {
+    message: string;
+    line: number;
+    job?: string;
+    step?: number;
+    input?: string[];
+    /** In a workflow-level setting the settings dialog edits. */
+    setting?: boolean;
+}
+/** What to show in the YAML beside the graph: a job, one of its steps, or a line. */
+export type RevealTarget = {
+    job: string;
+    step?: number;
+} | {
+    line: number;
+};
+/** Build-page callbacks that turn the dependency graph into an editor. */
+export interface DependencyGraphEditor {
+    onEdit: (edit: GraphEdit) => GraphEditResult | undefined;
+    canUndo: boolean;
+    canRedo: boolean;
+    onUndo: () => void;
+    onRedo: () => void;
+    /** `uses` values offered in the step editor, such as the user's own workflows. */
+    usesSuggestions?: string[];
+    /** Opens the workflow-level settings: env, permissions, sessions and more. */
+    onOpenSettings?: () => void;
+    /** The YAML the edits apply to, for editing a job or step as text. */
+    readSource?: () => string;
+    /** The view the job, step and input dialogs open in; YAML when not given. */
+    settingsView?: SettingsView;
+    onSettingsViewChange?: (view: SettingsView) => void;
+    /** False adds a new job, step or input with its defaults, without opening its dialog. */
+    openOnAdd?: boolean;
+    onOpenOnAddChange?: (open: boolean) => void;
+    /** Problems in the workflow, marked on the jobs, steps and inputs they're in. */
+    problems?: EditorProblem[];
+    /** The problems this pane's toolbar counts and lists. */
+    listedProblems?: ListedProblem[];
+    /** Hands the page this pane's way to bring a problem into view, false where it can't; returns its undo. */
+    registerShow?: (show: (problem: EditorProblem) => boolean) => () => void;
+    /** Shows a job's, step's or line's YAML, when the YAML editor is beside the graph. */
+    onReveal?: (target: RevealTarget) => void;
+}
+export declare const typing: (target: EventTarget | null) => boolean;
+export declare function overlaps(rect: DOMRect, box: Box): boolean;

package/dist/graph/editorApi.js

@@ -0,0 +1,8 @@
+//#region src/graph/editorApi.ts
+var TEXT_INPUT = "input, textarea, select, [contenteditable=\"true\"]";
+var typing = (target) => target instanceof Element && !!target.closest(TEXT_INPUT);
+function overlaps(rect, box) {
+	return rect.left <= box.right && rect.right >= box.left && rect.top <= box.bottom && rect.bottom >= box.top;
+}
+//#endregion
+export { overlaps, typing };

package/dist/graph/editorChrome.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode, PointerEvent as ReactPointerEvent } from 'react';
+import type { DependencyGraphEditor } from './editorApi.js';
+import type { Point } from './editorPrimitives.js';
+import { type ShortcutGroup } from './ShortcutsButton.js';
+/** What a drag carries, beside the pointer at `at` in its layer's coordinates. */
+export declare function DragLabel({ at, text, refused, }: {
+    at: Point;
+    text: string;
+    refused?: boolean;
+}): import("react").JSX.Element;
+export declare function BarDivider(): import("react").JSX.Element;
+/** A toolbar chip that adds something: click to add it, or, given `onPointerDown`, drag it to where it goes. */
+export declare function AddChip({ icon, label, hint, className, onPointerDown, onClick, }: {
+    icon: ReactNode;
+    label: string;
+    hint: string;
+    className?: string;
+    onPointerDown?: (e: ReactPointerEvent<HTMLButtonElement>) => void;
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}): import("react").JSX.Element;
+/** The bar both editors draw: problems, undo and redo, the editor's own controls, settings, shortcuts. */
+export declare function EditorBar({ editor, groups, className, children, }: {
+    editor: DependencyGraphEditor;
+    groups: ShortcutGroup[];
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/graph/editorChrome.js

@@ -0,0 +1,75 @@
+import { BiRedo } from "../icons/bi/BiRedo.js";
+import { BiUndo } from "../icons/bi/BiUndo.js";
+import { IoSettingsOutline } from "../icons/io5/IoSettingsOutline.js";
+import { TOOLTIP_ID } from "../components/Tooltip.js";
+import { IconButton } from "../components/IconButton.js";
+import { useGraphEditorStrings } from "./editorStrings.js";
+import { ProblemsButton } from "./ProblemsButton.js";
+import { ShortcutsButton } from "./ShortcutsButton.js";
+import cx from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/editorChrome.tsx
+/** What a drag carries, beside the pointer at `at` in its layer's coordinates. */
+function DragLabel({ at, text, refused = false }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("pointer-events-none absolute z-30 rounded-md border bg-(--theme-panel-bg) px-2 py-1 text-xs shadow", refused ? "border-(--theme-error) text-(--theme-error)" : "theme-border"),
+		style: {
+			left: at.x + 12,
+			top: at.y + 12
+		},
+		children: text
+	});
+}
+function BarDivider() {
+	return /* @__PURE__ */ jsx("div", { className: "mx-0.5 h-5 w-px bg-(--theme-border)" });
+}
+/** A toolbar chip that adds something: click to add it, or, given `onPointerDown`, drag it to where it goes. */
+function AddChip({ icon, label, hint, className, onPointerDown, onClick }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: cx("flex h-7 items-center gap-1 whitespace-nowrap rounded px-2 text-xs theme-hover", onPointerDown ? "cursor-grab" : "cursor-pointer", className),
+		"data-tooltip-id": TOOLTIP_ID,
+		"data-tooltip-content": hint,
+		onPointerDown,
+		onClick,
+		children: [icon, label]
+	});
+}
+/** The bar both editors draw: problems, undo and redo, the editor's own controls, settings, shortcuts. */
+function EditorBar({ editor, groups, className, children }) {
+	const t = useGraphEditorStrings();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("flex max-w-full flex-wrap items-center justify-end gap-0.5 rounded-md border theme-border bg-(--theme-panel-bg) p-0.5", className),
+		children: [
+			!!editor.listedProblems?.length && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ProblemsButton, { problems: editor.listedProblems }), /* @__PURE__ */ jsx(BarDivider, {})] }),
+			/* @__PURE__ */ jsx(IconButton, {
+				icon: /* @__PURE__ */ jsx(BiUndo, { className: "h-4 w-4" }),
+				label: t.undo,
+				size: "sm",
+				variant: "ghost",
+				disabled: !editor.canUndo,
+				onClick: editor.onUndo
+			}),
+			/* @__PURE__ */ jsx(IconButton, {
+				icon: /* @__PURE__ */ jsx(BiRedo, { className: "h-4 w-4" }),
+				label: t.redo,
+				size: "sm",
+				variant: "ghost",
+				disabled: !editor.canRedo,
+				onClick: editor.onRedo
+			}),
+			/* @__PURE__ */ jsx(BarDivider, {}),
+			children,
+			editor.onOpenSettings && /* @__PURE__ */ jsx(IconButton, {
+				icon: /* @__PURE__ */ jsx(IoSettingsOutline, { className: "h-4 w-4" }),
+				label: t.workflowSettings,
+				size: "sm",
+				variant: "ghost",
+				onClick: editor.onOpenSettings
+			}),
+			/* @__PURE__ */ jsx(ShortcutsButton, { groups })
+		]
+	});
+}
+//#endregion
+export { AddChip, BarDivider, DragLabel, EditorBar };

package/dist/graph/editorFields.d.ts

@@ -0,0 +1,180 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { Textarea } from '../components/Input.js';
+import type { FieldPatch } from '../editing.js';
+import { type GraphEditorStrings } from './editorStrings.js';
+import { type Json } from './records.js';
+export { asRecord, type Json } from './records.js';
+export type Strings = GraphEditorStrings;
+export declare const EXPRESSION: RegExp;
+export declare const ENV_KEY: RegExp;
+export declare const DURATION: RegExp;
+export declare function withoutUndefined(value: Json): Json;
+export declare function text(value: unknown): string;
+export declare function isScalar(value: unknown): boolean;
+export declare function parseScalar(value: string): unknown;
+export declare function sameValue(a: unknown, b: unknown): boolean;
+/** Keys whose value changed: undefined removes a key, anything else writes it. */
+export declare function diffPatch(original: Json, next: Json): Required<FieldPatch>;
+export declare function isEmptyPatch(patch: Required<FieldPatch>): boolean;
+export declare function conditionText(value: unknown): string;
+export declare function parseCondition(value: string): unknown;
+export declare function durationError(value: string, t: Strings, pattern?: RegExp): string | undefined;
+export declare function expressionError(value: string, t: Strings): string | undefined;
+export declare function orUndefined(value: string): string | undefined;
+export declare function countError(value: string, min: number, message: string): string | undefined;
+export declare function parseCount(value: string): unknown;
+export declare function parseJson(value: string): {
+    ok: boolean;
+    value?: unknown;
+};
+/** A key/value row; nested values are edited as JSON. */
+export interface Row {
+    key: string;
+    value: string;
+    nested?: boolean;
+    /** What the row was read from; while its text is unchanged a save writes this back as it was. */
+    original?: unknown;
+}
+export declare function unchangedValue(text: string, original: unknown, nested?: boolean): boolean;
+/** Rows for a map; with `nested` false a non-scalar is shown as its JSON text and saved as a string. */
+export declare function rowsFrom(value: unknown, nested?: boolean): Row[];
+export declare function rowsTo(rows: Row[], parse: (value: string) => unknown): Json | undefined;
+export declare function rowsError(rows: Row[], keyPattern: RegExp, keyMessage: string, t: Strings, valueError?: (value: string) => string | undefined): string | undefined;
+/** A switch that may instead hold a `${{ }}` expression. */
+export type Flag = boolean | string | undefined;
+export declare function flagOf(value: unknown): Flag;
+export declare function flagError(value: Flag, t: Strings): string | undefined;
+export declare function flagValue(checked: boolean, fallback: boolean, original: unknown): Flag;
+/** Whether each section of a dialog is open, kept while the dialog is up so switching views keeps it. */
+export declare const SectionMemory: import("react").Context<Map<string, boolean> | null>;
+export declare function useSectionMemory(): Map<string, boolean>;
+export declare function Section({ title, description, open, alert, children, }: {
+    title: string;
+    description?: string;
+    /** Whether it starts open; read once, when its dialog first shows it. */
+    open?: boolean;
+    /** A problem inside, which opens it so a folded section can't hide why Save is off. */
+    alert?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function FieldError({ message }: {
+    message: string | undefined;
+}): import("react").JSX.Element | null;
+/** The YAML key a field sets, beside its name; left out where the name already says it. */
+export declare function KeyHint({ label, yamlKey }: {
+    label: string;
+    yamlKey: string;
+}): import("react").JSX.Element | null;
+/** Label props for an Input or Textarea that sets `yamlKey`. */
+export declare function labelled(label: string, yamlKey: string): {
+    label: string;
+    labelHint: import("react").JSX.Element;
+};
+/** A field's name and help text, for controls without their own label; `actions` sit at its right. */
+export declare function FieldLabel({ label, yamlKey, description, htmlFor, descriptionId, actions, }: {
+    label: string;
+    yamlKey?: string | undefined;
+    description: string;
+    htmlFor?: string;
+    descriptionId?: string;
+    actions?: ReactNode;
+}): import("react").JSX.Element;
+/** A field's label and description above the editor that sets it. */
+export declare function LabelledField({ children, ...label }: ComponentProps<typeof FieldLabel> & {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Switches a field between its own control and a typed expression, where the schema takes one. Its
+ * name says what pressing it does, so it isn't also announced as pressed.
+ */
+export declare function ExpressionToggle({ active, onChange, }: {
+    active: boolean;
+    onChange: (active: boolean) => void;
+}): import("react").JSX.Element;
+export declare function ToggleField({ label, yamlKey, description, checked, onChange, disabled, }: {
+    label: string;
+    yamlKey?: string;
+    description: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+export declare function ChoiceButtons<T extends string>({ options, value, onChange, }: {
+    options: {
+        value: T;
+        label: string;
+    }[];
+    value: T;
+    onChange: (value: T) => void;
+}): import("react").JSX.Element;
+export declare function AddRowButton({ label, onClick }: {
+    label: string;
+    onClick: () => void;
+}): import("react").JSX.Element;
+export declare function KeyValueEditor({ rows, onChange, error, valuePlaceholder, keyPlaceholder, addLabel, valueSuggestions, lint, }: {
+    rows: Row[];
+    onChange: (rows: Row[]) => void;
+    error: string | undefined;
+    valuePlaceholder?: string;
+    keyPlaceholder?: string;
+    addLabel?: string;
+    /** Offered on each value, such as references to the workflow's inputs. */
+    valueSuggestions?: string[];
+    /** Whether each row shows the problems at its key, inside the caller's LintScope. */
+    lint?: boolean;
+}): import("react").JSX.Element;
+export declare function updateAt<T>(items: T[], index: number, item: T): T[];
+export declare function removeAt<T>(items: T[], index: number): T[];
+/** A list of single values, such as permissions or variable names. */
+export declare function StringListEditor({ label, values, onChange, addLabel, placeholder, error, suggestions, }: {
+    /** The list's name, which names each of its rows. */
+    label: string;
+    values: string[];
+    onChange: (values: string[]) => void;
+    addLabel: string;
+    placeholder?: string;
+    error?: string | undefined;
+    /** Offered on each row; any other value can still be typed. */
+    suggestions?: string[];
+}): import("react").JSX.Element;
+export declare function SuggestedInput({ label, yamlKey, description, value, onChange, suggestions, error, placeholder, }: {
+    label: string;
+    yamlKey?: string;
+    description?: string;
+    value: string;
+    onChange: (value: string) => void;
+    suggestions: string[];
+    error?: string | undefined;
+    placeholder?: string;
+}): import("react").JSX.Element;
+/** A text area that starts one line tall and grows with its text. */
+export declare function useGrowingArea(value: string): import("react").RefObject<HTMLTextAreaElement | null>;
+export declare const GROWING_AREA = "!min-h-0 !resize-none overflow-hidden";
+export declare function GrowingTextarea(props: Omit<ComponentProps<typeof Textarea>, 'rows'> & {
+    value: string;
+}): import("react").JSX.Element;
+/** Whether adding a job, step or input opens its dialog first; any of those dialogs sets it. */
+export interface OpenOnAdd {
+    open: boolean;
+    onChange: (open: boolean) => void;
+}
+/** The dialogs' "open when adding" switch, when the host keeps the setting. */
+export declare function openOnAddOf(editor: {
+    openOnAdd?: boolean;
+    onOpenOnAddChange?: (open: boolean) => void;
+} | undefined): OpenOnAdd | undefined;
+export interface DialogShellProps {
+    title: string;
+    onClose: () => void;
+    onSubmit: () => void;
+    saveDisabled: boolean;
+    dirty: boolean;
+    /** A dialog opened on top of this one owns Escape and outside clicks. */
+    locked?: boolean;
+    footerStart?: ReactNode;
+    /** Controls beside the title, such as a switch between views. */
+    headerEnd?: ReactNode;
+    openOnAdd?: OpenOnAdd | undefined;
+    children: ReactNode;
+}
+export declare function DialogShell({ title, onClose, onSubmit, saveDisabled, dirty, locked, footerStart, headerEnd, openOnAdd, children, }: DialogShellProps): import("react").JSX.Element;