@parallelworks/ui 0.37.0 → 0.39.0

package/dist/graph/inputLayout.js

@@ -0,0 +1,337 @@
+import { inputWidth } from "../form/lib.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) => ({
+	type: "field",
+	field: name
+});
+var stack = (children) => ({
+	type: "stack",
+	children
+});
+var same = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+var legacyKeys = ["width", "anchor-below"];
+/** Whether a list of inputs is drawn as a wizard, one step at a time. */
+function isWizard(list) {
+	return asRecord(asRecord(asRecord(list)["$meta"])["wizard"])["mode"] === "wizard";
+}
+function layoutList(editing, inputs, path) {
+	let list = asRecord(inputs);
+	for (const name of path) {
+		const definition = asRecord(list[name]);
+		list = asRecord(definition[editing.inputChildrenKey(definition["type"]) ?? "options"]);
+	}
+	return list;
+}
+function inputLayout(list) {
+	const resolved = resolveFormLayout(asRecord(list["$meta"])["layout"], namesIn(list));
+	if (resolved.layout) {
+		const layout = structuredClone(resolved.layout);
+		return resolved.remaining.length ? stack([layout, ...resolved.remaining.map(field)]) : layout;
+	}
+	const columns = [];
+	const hidden = [];
+	for (const name of namesIn(list)) {
+		const definition = asRecord(list[name]);
+		if (definition["hidden"] === true || definition["ignore"] === true) {
+			hidden.push(field(name));
+			continue;
+		}
+		const width = inputWidth(definition["width"]);
+		const last = columns.at(-1);
+		if (definition["anchor-below"] === true && last) {
+			last.members.push(member(name, width, last.width));
+			continue;
+		}
+		columns.push({
+			head: name,
+			width,
+			members: []
+		});
+	}
+	const rows = [];
+	let row = [];
+	let shares = [];
+	const flush = () => {
+		if (row.length) rows.push(within(row.length === 1 ? row[0] ?? stack([]) : {
+			type: "grid",
+			columns: {
+				base: 1,
+				sm: shares
+			},
+			children: row
+		}, shares.reduce((a, b) => a + b, 0), false));
+		row = [];
+		shares = [];
+	};
+	for (const { head, width, members } of columns) {
+		const pixels = width?.endsWith("px") ? width : void 0;
+		const node = members.length ? stack([sized(field(head), pixels), ...members]) : sized(field(head), pixels);
+		if (pixels) {
+			flush();
+			rows.push(node);
+			continue;
+		}
+		const share = width ? Number.parseFloat(width) : 100;
+		if (shares.reduce((a, b) => a + b, 0) + share > 100 || row.length >= 12) flush();
+		row.push(node);
+		shares.push(share);
+	}
+	flush();
+	return stack([...rows, ...hidden]);
+}
+function within(node, share, wraps) {
+	if (share >= 99) return node;
+	const tracks = [Math.round(share * 100) / 100, Math.round((100 - share) * 100) / 100];
+	return {
+		type: "grid",
+		columns: wraps ? {
+			base: 1,
+			sm: tracks
+		} : tracks,
+		children: [node]
+	};
+}
+function member(name, own, column) {
+	if (column?.endsWith("px")) return sized(field(name), own?.endsWith("px") && Number.parseFloat(own) < Number.parseFloat(column) ? own : column);
+	if (!own || own.endsWith("px")) return sized(field(name), own);
+	const share = Number.parseFloat(own) / (column ? Number.parseFloat(column) : 100) * 100;
+	return within(field(name), share, true);
+}
+function sized(node, pixels) {
+	return pixels ? {
+		...node,
+		css: `width: ${Math.min(Number.parseFloat(pixels) / 16, 256)}rem;`
+	} : node;
+}
+function trail(node, name, parents = []) {
+	if (node.type === "field") return node.field === name ? [...parents, node] : void 0;
+	for (const child of node.children) {
+		const found = trail(child, name, [...parents, node]);
+		if (found) return found;
+	}
+}
+function retrack(columns, count, change, spare = false) {
+	const responsive = typeof columns === "object" && !Array.isArray(columns);
+	const resize = (tracks, key) => {
+		const weights = Array.isArray(tracks) ? tracks : Array.from({ length: tracks }, () => 1);
+		if (spare ? weights.length < count : weights.length !== count) return tracks;
+		if (tracks === 1 && key === "base" && responsive && Object.keys(columns).length > 1) return tracks;
+		const changed = change(weights);
+		return Array.isArray(tracks) || changed.some((weight) => weight !== changed[0]) ? changed : changed.length;
+	};
+	return responsive ? Object.fromEntries(Object.entries(columns).map(([key, tracks]) => [key, resize(tracks, key)])) : resize(columns);
+}
+function remove(node, names) {
+	if (node.type === "field") return names.has(node.field) ? void 0 : node;
+	const previous = node.children;
+	const retained = [];
+	node.children = node.children.flatMap((child, index) => {
+		const kept = remove(child, names);
+		if (kept) retained.push(index);
+		return kept ? [kept] : [];
+	});
+	if (node.type === "grid" && previous.length !== node.children.length && node.children.length) node.columns = retrack(node.columns, previous.length, (weights) => retained.map((index) => weights[index] ?? 1));
+	return node.children.length || node.type === "section" || node.css ? node : void 0;
+}
+function insert(root, nodes, anchor, side) {
+	const path = anchor ? trail(root, anchor) : void 0;
+	if (!path) return root.type === "stack" ? {
+		...root,
+		children: [...root.children, ...nodes]
+	} : stack([root, ...nodes]);
+	const beside = side === "left" || side === "right";
+	let target = path.at(-1);
+	if (!target) return stack(nodes);
+	let parent = path.at(-2);
+	if (beside) for (let i = path.length - 2; i >= 0; i--) {
+		const candidate = path[i];
+		if (!candidate) continue;
+		if (candidate.type === "grid" && candidate.align !== "rows" && candidate.children.length + nodes.length <= 12) {
+			parent = candidate;
+			target = path[i + 1] ?? target;
+			break;
+		}
+	}
+	const before = side === "above" || side === "left";
+	if (parent && (beside && parent.type === "grid" && parent.align !== "rows" && parent.children.length + nodes.length <= 12 || !beside && parent.type === "stack")) {
+		const index = parent.children.indexOf(target) + (before ? 0 : 1);
+		const count = parent.children.length;
+		if (parent.type === "grid") parent.columns = retrack(parent.columns, count, (weights) => {
+			const used = weights.slice(0, count);
+			const spare = weights.slice(count);
+			const room = spare.reduce((a, b) => a + b, 0);
+			const share = used.reduce((a, b) => a + b, 0) / used.length;
+			const fits = nodes.length <= spare.length;
+			const added = fits ? spare.slice(0, nodes.length) : nodes.map(() => spare.length ? room / nodes.length : share);
+			return [
+				...used.slice(0, index),
+				...added,
+				...used.slice(index),
+				...fits ? spare.slice(nodes.length) : []
+			];
+		}, true);
+		parent.children.splice(index, 0, ...nodes);
+		return root;
+	}
+	const children = before ? [...nodes, target] : [target, ...nodes];
+	const replacement = beside ? {
+		type: "grid",
+		columns: {
+			base: 1,
+			sm: Math.min(12, children.length)
+		},
+		children
+	} : stack(children);
+	if (!parent) return replacement;
+	parent.children[parent.children.indexOf(target)] = replacement;
+	return root;
+}
+function layoutEdit(editing, inputs, parent, layout) {
+	const list = layoutList(editing, inputs, parent);
+	const legacy = layout ? namesIn(list).filter((name) => legacyKeys.some((key) => key in asRecord(list[name]))) : [];
+	if (!parent.length) {
+		const meta = {
+			type: "updateWorkflow",
+			inputsMeta: layout ? { set: { layout } } : { unset: ["layout"] }
+		};
+		return legacy.length ? {
+			type: "batch",
+			edits: [meta, ...legacy.map((name) => ({
+				type: "updateInput",
+				path: [name],
+				unset: legacyKeys
+			}))]
+		} : meta;
+	}
+	const definition = asRecord(layoutList(editing, inputs, parent.slice(0, -1))[parent.at(-1) ?? ""]);
+	const { layout: _layout, ...meta } = asRecord(list["$meta"]);
+	const fields = { ...list };
+	for (const name of legacy) fields[name] = Object.fromEntries(Object.entries(asRecord(list[name])).filter(([key]) => !legacyKeys.includes(key)));
+	return {
+		type: "updateInput",
+		path: parent,
+		set: { [editing.inputChildrenKey(definition["type"]) ?? "options"]: {
+			...fields,
+			$meta: {
+				...meta,
+				...layout ? { layout } : {}
+			}
+		} }
+	};
+}
+function inputsAfter(editing, inputs, edit) {
+	const source = editing.dumpYaml({
+		on: { execute: { inputs } },
+		jobs: {}
+	});
+	const result = editing.applyGraphEdit({
+		yml: source,
+		layout: void 0
+	}, edit);
+	return asRecord(asRecord(asRecord(asRecord(editing.loadYaml(result.yml))["on"])["execute"])["inputs"]);
+}
+function dropLayoutEdits(editing, inputs, moving, drop, move) {
+	const after = inputsAfter(editing, inputs, move);
+	const destination = layoutList(editing, inputs, drop.parent);
+	const names = moving.map((path) => path.at(-1) ?? "");
+	const nodes = moving.map((path) => {
+		return trail(inputLayout(layoutList(editing, inputs, path.slice(0, -1))), path.at(-1) ?? "")?.at(-1) ?? field(path.at(-1) ?? "");
+	});
+	const parents = [...new Map(moving.map((path) => [JSON.stringify(path.slice(0, -1)), path.slice(0, -1)])).values()];
+	const edits = [];
+	for (const parent of parents.filter((parent) => !same(parent, drop.parent))) {
+		const list = layoutList(editing, inputs, parent);
+		if (asRecord(list["$meta"])["layout"] !== void 0) edits.push(layoutEdit(editing, after, parent, remove(inputLayout(list), new Set(moving.filter((path) => same(path.slice(0, -1), parent)).map((path) => path.at(-1) ?? ""))) ?? stack([])));
+	}
+	const root = remove(inputLayout(destination), new Set(names)) ?? stack([]);
+	const anchor = drop.beside?.path.at(-1) ?? drop.stack?.path.at(-1) ?? namesIn(destination).slice(drop.index).find((name) => !names.includes(name));
+	if (isWizard(destination)) return edits;
+	const layout = insert(root, nodes, anchor, drop.beside?.side ?? drop.stack?.side ?? "above");
+	edits.push(layoutEdit(editing, after, drop.parent, layout));
+	return edits;
+}
+function resizeLayout(editing, inputs, left, right, split) {
+	const parent = left.slice(0, -1);
+	const layout = inputLayout(layoutList(editing, inputs, parent));
+	const a = trail(layout, left.at(-1) ?? "");
+	const b = trail(layout, right.at(-1) ?? "");
+	if (!a || !b) return void 0;
+	const grid = [...a].reverse().find((node) => node.type === "grid" && b.includes(node));
+	if (grid?.type !== "grid") return void 0;
+	const i = grid.children.indexOf(a[a.indexOf(grid) + 1] ?? grid);
+	const j = grid.children.indexOf(b[b.indexOf(grid) + 1] ?? grid);
+	if (i === j || i < 0 || j < 0) return void 0;
+	const responsive = responsiveLayoutValues(grid.columns, 1);
+	grid.columns = Object.fromEntries(Object.entries(responsive).map(([breakpoint, tracks]) => {
+		const count = Array.isArray(tracks) ? tracks.length : tracks;
+		if (count !== grid.children.length) return [breakpoint, tracks];
+		const weights = Array.isArray(tracks) ? [...tracks] : Array.from({ length: count }, () => 1);
+		const total = (weights[i] ?? 1) + (weights[j] ?? 1);
+		const shares = split[0] + split[1];
+		weights[i] = total * split[0] / shares;
+		weights[j] = total * split[1] / shares;
+		return [breakpoint, weights];
+	}));
+	return layoutEdit(editing, inputs, parent, layout);
+}
+/** Keeps layouts valid even with hosts whose editing engine predates layout metadata. */
+function inputLayouts(editing, inputs, edit) {
+	if (edit.type === "batch") {
+		let current = inputs;
+		return {
+			type: "batch",
+			edits: edit.edits.map((item) => {
+				const next = withInputLayouts(editing, current, item);
+				current = inputsAfter(editing, current, next);
+				return next;
+			})
+		};
+	}
+	if (edit.type === "moveInputs") return [...edit.paths.map((path) => path.slice(0, -1)), edit.parent].some((parent) => asRecord(layoutList(editing, inputs, parent)["$meta"])["layout"] !== void 0) ? {
+		type: "batch",
+		edits: [edit, ...dropLayoutEdits(editing, inputs, edit.paths, {
+			parent: edit.parent,
+			index: edit.index
+		}, edit)]
+	} : edit;
+	if (edit.type !== "updateInput" && edit.type !== "deleteInput" && edit.type !== "duplicateInput") return edit;
+	if (edit.type === "updateInput" && (!edit.name || edit.name === edit.path.at(-1))) return edit;
+	const parent = edit.path.slice(0, -1);
+	const list = layoutList(editing, inputs, parent);
+	const layout = resolveFormLayout(asRecord(list["$meta"])["layout"], namesIn(list)).layout;
+	if (!layout) return edit;
+	const after = inputsAfter(editing, inputs, edit);
+	let updated = structuredClone(layout);
+	const name = edit.path.at(-1) ?? "";
+	if (edit.type === "deleteInput") updated = remove(updated, /* @__PURE__ */ new Set([name])) ?? stack([]);
+	else if (edit.type === "updateInput") {
+		const node = trail(updated, name)?.at(-1);
+		if (node?.type === "field") node.field = edit.name ?? name;
+	} else {
+		const added = namesIn(layoutList(editing, after, parent)).find((key) => !Object.hasOwn(list, key));
+		if (added) {
+			const original = trail(updated, name)?.at(-1);
+			updated = insert(updated, [{
+				...original?.type === "field" ? original : {},
+				type: "field",
+				field: added
+			}], name, "below");
+		}
+	}
+	return {
+		type: "batch",
+		edits: [edit, layoutEdit(editing, after, parent, updated)]
+	};
+}
+function withInputLayouts(editing, inputs, edit) {
+	try {
+		return inputLayouts(editing, inputs, edit);
+	} catch {
+		return edit;
+	}
+}
+//#endregion
+export { dropLayoutEdits, inputLayout, isWizard, layoutEdit, layoutList, resizeLayout, withInputLayouts };

package/dist/graph/inputPages.d.ts

@@ -0,0 +1,33 @@
+import type { GraphEdit, InputPath, WorkflowEditing } from '../editing.js';
+type Json = Record<string, unknown>;
+/**
+ * The wizard settings a list split into pages gets: what it had, and otherwise pages that can be
+ * jumped between and, for the form itself, a Submit button.
+ */
+export declare function wizardSettings(list: unknown, submitLabel?: string): Json;
+/**
+ * What splitting the form into pages adds besides its `$meta`: a wizard draws only its pages, so the
+ * inputs outside one go into a first page, and a form with no pages gets one to show.
+ */
+export declare function firstPageEdits(editing: WorkflowEditing, inputs: unknown, title: string): GraphEdit[];
+/**
+ * The edits that split a list of inputs into pages: the form's (`parent` is `[]`), or those the group
+ * or list at `parent` holds under `childKey`. Only the form's `$meta` is edited on its own, so a group's
+ * or list's inputs are written whole.
+ */
+export declare function splitIntoPagesEdits(editing: WorkflowEditing, list: unknown, parent: InputPath, childKey: string | undefined, title: string, submitLabel?: string): GraphEdit[];
+/** A page added after a wizard's last, titled by how many it then has. */
+export declare function addPageEdit(editing: WorkflowEditing, list: unknown, parent: InputPath, title: (count: number) => string): GraphEdit;
+/**
+ * What undoing pages adds besides dropping the wizard from `$meta`: each page's inputs go back where
+ * the page was, in order, and the pages go. Moving them one by one refuses a name two pages share.
+ */
+export declare function pagesBackEdits(list: unknown, parent: InputPath): GraphEdit[];
+/** The edits that turn a wizard back into a list of inputs drawn all at once. */
+export declare function unsplitPagesEdits(list: unknown, parent: InputPath, childKey: string | undefined): GraphEdit[];
+/**
+ * A wizard step added where the inputs aren't a wizard comes as a wizard of its own: a group whose
+ * fields are read as the form's own, holding the step.
+ */
+export declare function wizardGroupDefinition(label: string, title: string): Json;
+export {};

package/dist/graph/inputPages.js

@@ -0,0 +1,186 @@
+import { inputLayout } from "./inputLayout.js";
+//#region src/graph/inputPages.ts
+var asRecord = (value) => value && typeof value === "object" && !Array.isArray(value) ? value : {};
+var isStep = (definition) => asRecord(definition)["type"] === "step";
+var inputNames = (list) => Object.keys(list).filter((name) => !name.startsWith("$"));
+/**
+* The wizard settings a list split into pages gets: what it had, and otherwise pages that can be
+* jumped between and, for the form itself, a Submit button.
+*/
+function wizardSettings(list, submitLabel) {
+	const wizard = asRecord(asRecord(asRecord(list)["$meta"])["wizard"]);
+	return {
+		...wizard,
+		mode: "wizard",
+		navigation: {
+			allowJump: true,
+			...asRecord(wizard["navigation"])
+		},
+		...submitLabel && wizard["submitLabel"] === void 0 ? { submitLabel } : {}
+	};
+}
+/**
+* What splitting the form into pages adds besides its `$meta`: a wizard draws only its pages, so the
+* inputs outside one go into a first page, and a form with no pages gets one to show.
+*/
+function firstPageEdits(editing, inputs, title) {
+	const names = inputNames(asRecord(inputs));
+	const loose = names.filter((name) => !isStep(asRecord(inputs)[name]));
+	if (loose.length === 0 && names.length > 0) return [];
+	const page = editing.nextName(names, "step_1");
+	const layout = asRecord(asRecord(inputs)["$meta"])["layout"];
+	return [
+		{
+			type: "addInput",
+			parent: [],
+			index: 0,
+			name: page,
+			definition: newStep(title)
+		},
+		...loose.length > 0 ? [{
+			type: "moveInputs",
+			paths: loose.map((name) => [name]),
+			parent: [page],
+			index: 0
+		}] : [],
+		...layout !== void 0 ? [{
+			type: "updateInput",
+			path: [page],
+			set: { options: {
+				...Object.fromEntries(loose.map((name) => [name, asRecord(inputs)[name]])),
+				$meta: { layout }
+			} }
+		}] : []
+	];
+}
+/**
+* The edits that split a list of inputs into pages: the form's (`parent` is `[]`), or those the group
+* or list at `parent` holds under `childKey`. Only the form's `$meta` is edited on its own, so a group's
+* or list's inputs are written whole.
+*/
+function splitIntoPagesEdits(editing, list, parent, childKey, title, submitLabel) {
+	if (parent.length === 0) return [{
+		type: "updateWorkflow",
+		inputsMeta: {
+			set: { wizard: wizardSettings(list, submitLabel) },
+			unset: ["layout"]
+		}
+	}, ...firstPageEdits(editing, list, title)];
+	const record = asRecord(list);
+	const names = inputNames(record);
+	const loose = names.filter((name) => !isStep(record[name]));
+	const pages = Object.fromEntries(names.filter((name) => isStep(record[name])).map((name) => [name, record[name]]));
+	const first = loose.length > 0 || names.length === 0 ? { [editing.nextName(names, "step_1")]: {
+		...newStep(title),
+		options: {
+			...Object.fromEntries(loose.map((name) => [name, record[name]])),
+			...asRecord(record["$meta"])["layout"] !== void 0 ? { $meta: { layout: asRecord(record["$meta"])["layout"] } } : {}
+		}
+	} } : {};
+	const { layout: _layout, ...previousMeta } = asRecord(record["$meta"]);
+	const meta = {
+		...previousMeta,
+		wizard: wizardSettings(record)
+	};
+	return [{
+		type: "updateInput",
+		path: parent,
+		set: { [childKey ?? "items"]: {
+			$meta: meta,
+			...first,
+			...pages
+		} }
+	}];
+}
+/** A page added after a wizard's last, titled by how many it then has. */
+function addPageEdit(editing, list, parent, title) {
+	const names = inputNames(asRecord(list));
+	const count = names.filter((name) => isStep(asRecord(list)[name])).length + 1;
+	return {
+		type: "addInput",
+		parent,
+		name: editing.nextName(names, `step_${count}`),
+		definition: newStep(title(count))
+	};
+}
+/**
+* What undoing pages adds besides dropping the wizard from `$meta`: each page's inputs go back where
+* the page was, in order, and the pages go. Moving them one by one refuses a name two pages share.
+*/
+function pagesBackEdits(list, parent) {
+	const record = asRecord(list);
+	const order = inputNames(record);
+	const edits = [];
+	for (const page of order.filter((name) => isStep(record[name]))) {
+		const fields = inputNames(asRecord(asRecord(record[page])["options"]));
+		const at = order.indexOf(page);
+		if (fields.length > 0) edits.push({
+			type: "moveInputs",
+			paths: fields.map((name) => [
+				...parent,
+				page,
+				name
+			]),
+			parent,
+			index: at
+		});
+		order.splice(at, 1, ...fields);
+		edits.push({
+			type: "deleteInput",
+			path: [...parent, page]
+		});
+	}
+	return edits;
+}
+/** The edits that turn a wizard back into a list of inputs drawn all at once. */
+function unsplitPagesEdits(list, parent, childKey) {
+	const record = asRecord(list);
+	const pageLayouts = inputNames(record).filter((name) => isStep(record[name])).map((name) => asRecord(asRecord(record[name])["options"]));
+	const layout = pageLayouts.some((options) => asRecord(options["$meta"])["layout"] !== void 0) ? {
+		type: "stack",
+		children: pageLayouts.map(inputLayout)
+	} : void 0;
+	if (parent.length === 0) return [...pagesBackEdits(list, []), {
+		type: "updateWorkflow",
+		inputsMeta: {
+			unset: ["wizard"],
+			...layout ? { set: { layout } } : {}
+		}
+	}];
+	const { wizard: _wizard, ...meta } = asRecord(record["$meta"]);
+	if (layout) meta["layout"] = layout;
+	const unpaged = Object.keys(meta).length > 0 ? { $meta: meta } : {};
+	for (const name of inputNames(record)) if (isStep(record[name])) {
+		const options = asRecord(asRecord(record[name])["options"]);
+		for (const field of inputNames(options)) unpaged[field] = options[field];
+	} else unpaged[name] = record[name];
+	return [...pagesBackEdits(list, parent), {
+		type: "updateInput",
+		path: parent,
+		set: { [childKey ?? "items"]: unpaged }
+	}];
+}
+/**
+* A wizard step added where the inputs aren't a wizard comes as a wizard of its own: a group whose
+* fields are read as the form's own, holding the step.
+*/
+function wizardGroupDefinition(label, title) {
+	return {
+		type: "group",
+		label,
+		flatten: true,
+		items: {
+			$meta: { wizard: wizardSettings(void 0) },
+			step_1: newStep(title)
+		}
+	};
+}
+function newStep(title) {
+	return {
+		type: "step",
+		title,
+		options: {}
+	};
+}
+//#endregion
+export { addPageEdit, firstPageEdits, pagesBackEdits, splitIntoPagesEdits, unsplitPagesEdits, wizardGroupDefinition, wizardSettings };