@parallelworks/ui 0.37.0 → 0.38.0

package/dist/graph/inputRefs.js

@@ -0,0 +1,196 @@
+import { FaPlus } from "../icons/fa/FaPlus.js";
+import { IconButton } from "../components/IconButton.js";
+import { Toggle } from "../components/Toggle.js";
+import { useGraphEditorStrings, useInputsEditorStrings } from "./editorStrings.js";
+import { useFieldLint } from "./fieldProblems.js";
+import { asRecord } from "./records.js";
+import { SuggestionInput } from "./SuggestionInput.js";
+import { ExpressionToggle, FieldError, FieldLabel, LabelledField, flagError, flagValue, text } from "./editorFields.js";
+import { useId, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/inputRefs.tsx
+/** Every input with a value, where a run reads it: groups nest unless flattened, lists hide their rows. */
+function inputRefs(editing, inputs) {
+	const root = asRecord(inputs);
+	const flatSteps = editing.wizardFlattens(root);
+	const out = [];
+	const walk = (map, prefix) => {
+		for (const [name, raw] of Object.entries(map)) {
+			if (name === "$meta") continue;
+			const definition = asRecord(raw);
+			const type = text(definition["type"]);
+			const childKey = editing.inputChildrenKey(type);
+			if (type === "group" || type === "step") {
+				const flat = type === "step" ? flatSteps : definition["flatten"] === true;
+				walk(asRecord(childKey ? definition[childKey] : void 0), flat ? prefix : [...prefix, name]);
+				continue;
+			}
+			if (type === "header") continue;
+			out.push({
+				path: [...prefix, name],
+				type,
+				label: text(definition["label"]) || name,
+				definition
+			});
+		}
+	};
+	walk(root, []);
+	return out;
+}
+function refExpression(path, suffix) {
+	return `\${{ inputs.${[...path, ...suffix ? [suffix] : []].join(".")} }}`;
+}
+function flagExpression(path, negated) {
+	return `\${{ ${negated ? "!" : ""}inputs.${path.join(".")} }}`;
+}
+function equalsExpression(path, value, negated = false) {
+	const operator = negated ? "!=" : "==";
+	return `\${{ inputs.${path.join(".")} ${operator} '${value.replace(/'/g, "''")}' }}`;
+}
+/** 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)) : [];
+}
+/** Makes a new input of `type` for the field, when the host can; `onCreated` gets where it went. */
+function NewInputButton({ type, source, onCreated }) {
+	const t = useGraphEditorStrings();
+	const inputsEditor = useInputsEditorStrings();
+	const create = source?.create;
+	if (!create) return null;
+	const types = inputsEditor.types;
+	return /* @__PURE__ */ jsx(IconButton, {
+		icon: /* @__PURE__ */ jsx(FaPlus, { className: "h-4 w-4" }),
+		label: t.newInputOf(types[type] ?? type),
+		size: "sm",
+		variant: "ghost",
+		onClick: () => create(type, onCreated)
+	});
+}
+var ONE_OF = ["dropdown", "radio"];
+/** A text field that takes any value, expressions included, with suggestions to pick from. */
+function ExpressionInput({ id, label, value, onChange, suggestions = [], placeholder, error, describedBy, required }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SuggestionInput, {
+		id,
+		ariaLabel: label,
+		"aria-describedby": describedBy,
+		required,
+		value,
+		placeholder,
+		suggestions,
+		onChange
+	}), /* @__PURE__ */ jsx(FieldError, { message: error })] });
+}
+/** Conditions on the form's switches and choices, for fields that run on one. */
+function conditionSuggestions(source, t) {
+	return (source?.refs ?? []).flatMap((ref) => {
+		if (ref.type === "boolean") return [{
+			value: flagExpression(ref.path, false),
+			label: t.whenOn(ref.label)
+		}, {
+			value: flagExpression(ref.path, true),
+			label: t.whenOff(ref.label)
+		}];
+		return ONE_OF.includes(ref.type) ? optionValues(ref.definition).map((option) => ({
+			value: equalsExpression(ref.path, option),
+			label: t.whenIs(ref.label, option)
+		})) : [];
+	});
+}
+/** A switch, or an expression typed in its place, such as one that follows another input. */
+function FlagField({ label, yamlKey, description, value, original, fallback = false, onChange, source }) {
+	const t = useGraphEditorStrings();
+	const id = useId();
+	const [typed, setTyped] = useState(typeof value === "string");
+	const checked = typeof value === "boolean" ? value : fallback;
+	const setTypedValue = (next) => onChange(next.trim() ? next : void 0);
+	const lint = useFieldLint(yamlKey, id, typeof value === "string" ? value : "", setTypedValue);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsx(FieldLabel, {
+					label,
+					yamlKey,
+					description
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 items-center gap-1",
+					children: [!typed && /* @__PURE__ */ jsx(Toggle, {
+						checked,
+						onChange: (on) => onChange(flagValue(on, fallback, original)),
+						label
+					}), /* @__PURE__ */ jsx(ExpressionToggle, {
+						active: typed,
+						onChange: (on) => {
+							setTyped(on);
+							onChange(void 0);
+						}
+					})]
+				})]
+			}),
+			typed && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex-1",
+					children: /* @__PURE__ */ jsx(ExpressionInput, {
+						id,
+						label,
+						value: typeof value === "string" ? value : "",
+						suggestions: conditionSuggestions(source, t),
+						error: flagError(value, t) ?? lint.message,
+						onChange: setTypedValue
+					})
+				}), /* @__PURE__ */ jsx(NewInputButton, {
+					type: "boolean",
+					source,
+					onCreated: (path) => onChange(flagExpression(path, false))
+				})]
+			}),
+			typed && lint.fixes
+		]
+	});
+}
+/** A value typed in, with the form's inputs of the given types offered, or a new one made for it. */
+function ValueOrInputField({ label, yamlKey, description, value, onChange, source, types, suffix, literal = true, required = false, error, suggestions = [], placeholder }) {
+	const t = useGraphEditorStrings();
+	const id = useId();
+	const lint = useFieldLint(yamlKey, id, value, onChange);
+	const firstType = types[0] ?? "string";
+	const offered = [...source.refs.filter((ref) => types.includes(ref.type)).map((ref) => ({
+		value: refExpression(ref.path, suffix),
+		label: ref.label
+	})), ...literal ? suggestions.map((suggestion) => ({ value: suggestion })) : []];
+	return /* @__PURE__ */ jsxs(LabelledField, {
+		label: required ? `${label} *` : label,
+		yamlKey,
+		description,
+		descriptionId: `${id}-help`,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex-1",
+					children: /* @__PURE__ */ jsx(ExpressionInput, {
+						id,
+						label,
+						describedBy: `${id}-help`,
+						required,
+						value,
+						placeholder: placeholder ?? (literal ? void 0 : t.chooseInput),
+						suggestions: offered,
+						onChange
+					})
+				}), /* @__PURE__ */ jsx(NewInputButton, {
+					type: firstType,
+					source,
+					onCreated: (path) => onChange(refExpression(path, suffix))
+				})]
+			}),
+			/* @__PURE__ */ jsx(FieldError, { message: error ?? lint.message }),
+			lint.fixes
+		]
+	});
+}
+//#endregion
+export { ExpressionInput, FlagField, ValueOrInputField, equalsExpression, flagExpression, inputRefs, refExpression };

package/dist/graph/inputRows.d.ts

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

package/dist/graph/inputRows.js

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

package/dist/graph/settingsViews.js

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