@parallelworks/ui 0.38.0 → 0.40.0

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: {

package/dist/graph/expressionRefs.js

@@ -0,0 +1,39 @@
+import { asRecord } from "./records.js";
+import { inputRefs, refExpression } from "./inputRefs.js";
+//#region src/graph/expressionRefs.ts
+var ref = (group, label) => ({
+	group,
+	label,
+	expression: `\${{ ${label} }}`
+});
+function names(value) {
+	if (Array.isArray(value)) return value.filter((item) => typeof item === "string");
+	return Object.keys(asRecord(value));
+}
+/** Everything an expression in `job` can read; without a job, only what the whole workflow has. */
+function expressionRefs(editing, workflow, job) {
+	const root = asRecord(workflow);
+	const jobs = asRecord(root["jobs"]);
+	const own = job === void 0 ? {} : asRecord(jobs[job]);
+	const out = inputRefs(editing, editing.workflowInputsSchema(root)).map((input) => ({
+		group: "inputs",
+		label: `inputs.${input.path.join(".")}`,
+		expression: refExpression(input.path)
+	}));
+	const needs = Array.isArray(own["needs"]) ? own["needs"] : [];
+	for (const need of needs) {
+		if (typeof need !== "string") continue;
+		const target = editing.needTarget(need);
+		for (const output of Object.keys(asRecord(asRecord(jobs[target])["outputs"]))) out.push(ref("outputs", `needs.${target}.outputs.${output}`));
+	}
+	for (const variable of editing.matrixNames(own) ?? []) out.push(ref("matrix", `matrix.${variable}`));
+	const declared = asRecord(root["needs"]);
+	for (const name of names(declared["organizationVariables"])) out.push(ref("variables", `org.${name}`));
+	for (const name of names(declared["userVariables"])) out.push(ref("variables", `var.${name}`));
+	for (const name of Object.keys(asRecord(root["sessions"]))) out.push(ref("sessions", `sessions.${name}`));
+	const env = /* @__PURE__ */ new Set([...Object.keys(asRecord(root["env"])), ...Object.keys(asRecord(own["env"]))]);
+	for (const key of env) out.push(ref("env", `env.${key}`));
+	return out;
+}
+//#endregion
+export { expressionRefs };

package/dist/graph/fieldProblems.js

@@ -2,13 +2,47 @@ import { useWorkflowEditing } from "../components/Provider.js";
 import { TbAlertTriangle } from "../icons/tb/TbAlertTriangle.js";
 import { keyedByContent } from "../components/keys.js";
 import { useGraphEditorStrings } from "./editorStrings.js";
-import { createContext, useContext, useEffect } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/fieldProblems.tsx
 var FieldProblemsContext = createContext(null);
 var keyOf = (at) => at.join(".");
 var within = (problem, key) => keyOf(problem.at) === key || keyOf(problem.at).startsWith(`${key}.`);
+/** Hands a form's fields the problems at the keys they set. */
+function FieldProblems({ problems, children }) {
+	const [fields, setFields] = useState(/* @__PURE__ */ new Map());
+	const register = useCallback((key, id) => {
+		setFields((current) => current.get(key) === id ? current : new Map(current).set(key, id));
+		return () => setFields((current) => {
+			if (current.get(key) !== id) return current;
+			const next = new Map(current);
+			next.delete(key);
+			return next;
+		});
+	}, []);
+	const value = useMemo(() => ({
+		problems,
+		fields,
+		register
+	}), [
+		problems,
+		fields,
+		register
+	]);
+	return /* @__PURE__ */ jsx(FieldProblemsContext.Provider, {
+		value,
+		children
+	});
+}
 var LintScopeContext = createContext("");
+/** Where the fields inside sit, such as `ssh` for a remote host's fields. */
+function LintScope({ at, children }) {
+	const outer = useContext(LintScopeContext);
+	return /* @__PURE__ */ jsx(LintScopeContext.Provider, {
+		value: outer ? `${outer}.${at}` : at,
+		children
+	});
+}
 /** The problems at the field with id `id`, which sets `key`; the dialog's list then leads to it. */
 function useFieldProblems(key, id) {
 	const context = useContext(FieldProblemsContext);
@@ -74,4 +108,4 @@ function ProblemList({ problems }) {
 	});
 }
 //#endregion
-export { FixButtons, ProblemList, useFieldLint, useFieldProblems };
+export { FieldProblems, FixButtons, LintScope, ProblemList, useFieldLint, useFieldProblems };