@parallelworks/ui 0.40.0 → 0.41.0

package/dist/graph/GraphNode.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from 'react';
+import { type JobHandlers } from './JobSummary.js';
+import type { WorkflowJob } from './types.js';
+export declare const dimClasses: (depth: number) => {
+    level: string;
+    node: string;
+    edge: string;
+};
+/** The rules dimming a level at `depth`, hoisted into the page once for every level that deep. */
+export declare function DimRules({ depth }: {
+    depth: number;
+}): import("react").JSX.Element;
+/** Dims what of a graph level isn't in the hovered job's lineage, while one is hovered. */
+export declare function setDimmed(wrapper: HTMLElement, depth: number, hovering: boolean): void;
+interface NodeShell {
+    id: string;
+    /** Empty rows of its column above this node. */
+    rowsAbove: number;
+    zBase: number;
+}
+/** One node of the graph: its jobs' box, raised above connectors while its lineage is shown. */
+export declare function GraphNode({ id, job, rowsAbove, zBase, children, }: NodeShell & {
+    /** The job hovering the node shows the lineage of. */
+    job: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** A node of jobs that share their needs and dependents. */
+export declare const JobNode: import("react").MemoExoticComponent<({ jobNames, jobs, handlers, preview, editable, ...shell }: NodeShell & {
+    jobNames: string[];
+    jobs: Record<string, WorkflowJob>;
+    handlers: JobHandlers;
+    preview: boolean;
+    editable: boolean;
+}) => import("react").JSX.Element>;
+export {};

package/dist/graph/GraphNode.js

@@ -0,0 +1,70 @@
+import { BoxGrip } from "./editorRows.js";
+import { emptyRowsStyle } from "./gridSpacing.js";
+import { Joblist } from "./JobSummary.js";
+import { useLineage, useLineageStore } from "./lineage.js";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/GraphNode.tsx
+var dimClasses = (depth) => ({
+	level: `dag-dim-${depth}`,
+	node: `dag-node-${depth}`,
+	edge: `dag-edge-${depth}`
+});
+/** The rules dimming a level at `depth`, hoisted into the page once for every level that deep. */
+function DimRules({ depth }) {
+	const { level, node, edge } = dimClasses(depth);
+	return /* @__PURE__ */ jsx("style", {
+		href: `dependency-graph-dim-${depth}`,
+		precedence: "default",
+		children: `.${level} .${node}{opacity:.5}.${level} .${edge}{opacity:.3}`
+	});
+}
+/** Dims what of a graph level isn't in the hovered job's lineage, while one is hovered. */
+function setDimmed(wrapper, depth, hovering) {
+	wrapper.classList.toggle(dimClasses(depth).level, hovering);
+}
+/** One node of the graph: its jobs' box, raised above connectors while its lineage is shown. */
+function GraphNode({ id, job, rowsAbove, zBase, children }) {
+	const lineage = useLineageStore();
+	const highlight = useLineage((l) => l.node(job), 0);
+	const enter = () => lineage?.hover(job);
+	const leave = () => lineage?.hover(null);
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		role: "none",
+		className: "relative m-24",
+		style: {
+			zIndex: (highlight > 0 ? 25 : 1) + zBase,
+			...emptyRowsStyle(rowsAbove)
+		},
+		onMouseEnter: enter,
+		onMouseLeave: leave,
+		onFocus: enter,
+		onBlur: leave,
+		children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-2xl bg-(--theme-panel-bg)" }), /* @__PURE__ */ jsx("div", {
+			className: `${dimClasses(lineage?.depth ?? 0).node} relative border-solid shadow py-4 px-8 rounded-xl border-4 whitespace-nowrap bg-(--theme-panel-bg) text-2xl`,
+			style: {
+				...highlight === 2 && { opacity: 1 },
+				...lineage?.fade && { transition: `opacity ${lineage.animT}s` }
+			},
+			children
+		})]
+	});
+}
+/** A node of jobs that share their needs and dependents. */
+var JobNode = memo(function JobNode({ jobNames, jobs, handlers, preview, editable, ...shell }) {
+	return /* @__PURE__ */ jsxs(GraphNode, {
+		...shell,
+		job: jobNames[0] ?? "",
+		children: [editable && jobNames.length > 1 && /* @__PURE__ */ jsx(BoxGrip, { jobs: jobNames }), /* @__PURE__ */ jsx(Joblist, {
+			jobs,
+			jobNames,
+			...handlers,
+			growWidth: true,
+			preview,
+			editable
+		})]
+	});
+});
+//#endregion
+export { DimRules, GraphNode, JobNode, dimClasses, setDimmed };

package/dist/graph/MatrixGroup.d.ts

@@ -12,22 +12,18 @@ export declare function MatrixGroupSummaryItem({ matrixGroup, status, isExpanded
     preview: boolean;
 }): import("react").JSX.Element;
 /** Matrix group node in the DAG visualization. */
-export declare function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, onToggle, jobs, activeDists, onMouseEnter, onMouseLeave, hoveredRelated, animT, zBase, handlers, preview, editable, rowsAbove, }: {
+export declare const MatrixGroupNode: import("react").MemoExoticComponent<({ matrixGroup, jobNames, idPrefix, isExpanded, toggleMatrix, jobs, zBase, handlers, preview, editable, rowsAbove, }: {
     matrixGroup: MatrixGroup;
     jobNames: string[];
     idPrefix: string;
     isExpanded: boolean;
-    onToggle: () => void;
+    /** Opens or closes the matrix by its key, its path prefix and job. */
+    toggleMatrix: (key: string) => void;
     jobs: Record<string, WorkflowJob>;
-    activeDists: Map<string, number> | null;
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
-    hoveredRelated: Set<string> | null;
-    animT: number;
     zBase: number;
     handlers: JobHandlers;
     preview: boolean;
     editable?: boolean;
     /** Empty rows of its column above this node. */
     rowsAbove?: number;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element>;

package/dist/graph/MatrixGroup.js

@@ -1,9 +1,10 @@
 import { useStrings, useWorkflowEngine } from "../components/Provider.js";
 import { Indicator } from "../components/Indicator.js";
 import { EditableJobRow } from "./editorRows.js";
-import { emptyRowsStyle } from "./gridSpacing.js";
 import { Reveal } from "./Reveal.js";
 import { Joblist } from "./JobSummary.js";
+import { GraphNode } from "./GraphNode.js";
+import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/MatrixGroup.tsx
 /** Matrix group item in the summary sidebar. */
@@ -42,7 +43,7 @@ function MatrixGroupSummaryItem({ matrixGroup, status, isExpanded, onToggle, job
 	});
 }
 /** Matrix group node in the DAG visualization. */
-function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, onToggle, jobs, activeDists, onMouseEnter, onMouseLeave, hoveredRelated, animT, zBase, handlers, preview, editable = false, rowsAbove = 0 }) {
+var MatrixGroupNode = memo(function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, toggleMatrix, jobs, zBase, handlers, preview, editable = false, rowsAbove = 0 }) {
 	const { dag: t } = useStrings();
 	const matrixName = matrixGroup.originaljob;
 	const first = jobNames[0] ?? "";
@@ -52,7 +53,7 @@ function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, onToggle
 		type: "button",
 		"aria-expanded": isExpanded,
 		className: "cursor-pointer w-full text-left",
-		onClick: onToggle,
+		onClick: () => toggleMatrix(idPrefix + matrixName),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "font-semibold text-md p-0.5",
 			children: t.matrixOf(matrixName.length > 20 ? `${matrixName.slice(0, 20)}...` : matrixName)
@@ -61,46 +62,32 @@ function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, onToggle
 			children: [!preview && /* @__PURE__ */ jsx(Indicator, { status: aggStatus }), /* @__PURE__ */ jsx("span", { children: preview ? t.jobCount(matrixMembers.length) : statusLabel })]
 		})]
 	});
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(GraphNode, {
 		id: `node_${idPrefix}${first}`,
-		role: "none",
-		className: "relative m-24",
-		style: {
-			zIndex: (activeDists?.has(first) ? 25 : 1) + zBase,
-			...emptyRowsStyle(rowsAbove)
-		},
-		onMouseEnter,
-		onMouseLeave,
-		onFocus: onMouseEnter,
-		onBlur: onMouseLeave,
-		children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-2xl bg-(--theme-panel-bg)" }), /* @__PURE__ */ jsxs("div", {
-			className: "relative border-solid shadow py-4 px-8 rounded-xl border-4 whitespace-nowrap bg-(--theme-panel-bg) text-2xl",
-			style: {
-				opacity: hoveredRelated && !hoveredRelated.has(first) ? .5 : 1,
-				transition: `opacity ${animT}s`
-			},
-			children: [editable ? /* @__PURE__ */ jsx(EditableJobRow, {
-				job: matrixName,
-				label: t.matrixOf(matrixName),
-				badge: false,
-				children: header
-			}) : header, /* @__PURE__ */ jsx(Reveal, {
-				open: isExpanded,
-				growWidth: true,
-				children: /* @__PURE__ */ jsx("div", {
-					className: "mt-1 border-t border-(--theme-border) pt-1",
-					children: /* @__PURE__ */ jsx(Joblist, {
-						jobs,
-						jobNames: matrixMembers,
-						...handlers,
-						growWidth: true,
-						preview,
-						editableSteps: editable
-					})
+		job: first,
+		rowsAbove,
+		zBase,
+		children: [editable ? /* @__PURE__ */ jsx(EditableJobRow, {
+			job: matrixName,
+			label: t.matrixOf(matrixName),
+			badge: false,
+			children: header
+		}) : header, /* @__PURE__ */ jsx(Reveal, {
+			open: isExpanded,
+			growWidth: true,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "mt-1 border-t border-(--theme-border) pt-1",
+				children: /* @__PURE__ */ jsx(Joblist, {
+					jobs,
+					jobNames: matrixMembers,
+					...handlers,
+					growWidth: true,
+					preview,
+					editableSteps: editable
 				})
-			})]
+			})
 		})]
 	});
-}
+});
 //#endregion
 export { MatrixGroupNode, MatrixGroupSummaryItem };

package/dist/graph/connectorGeometry.d.ts

@@ -0,0 +1,44 @@
+export interface Point {
+    x: number;
+    y: number;
+}
+/** A connector's path both ways, so its highlight can draw from either end. */
+export interface ConnectorPath {
+    d: string;
+    reversed: string;
+}
+/**
+ * The corner radius every connector of a graph shares: a quarter of the least rise any connector
+ * makes, and no more than half the narrowest gap between columns, so bends never overlap.
+ */
+export declare function arcRadius(minRise: number, colGap: number): number;
+/**
+ * A connector from a node's right side to a later node's left: straight when level, otherwise
+ * across, a bend, down or up, a bend and across. The bends sit in the gap before `end`'s column, so
+ * a connector spanning several columns runs level until it nears its target.
+ */
+export declare function connectorPath(start: Point, end: Point, r: number, colGap: number): ConnectorPath;
+/** A node's place in its graph level, as laid out. */
+export interface Box {
+    x: number;
+    y: number;
+    width: number;
+}
+/** Whether two layouts put every node in the same place. */
+export declare function sameBoxes(a: Map<string, Box>, b: Map<string, Box>): boolean;
+/** A connector as drawn, from a need's node to the node that needs it. */
+export interface DrawnEdge {
+    from: string;
+    to: string;
+    start: Point;
+    end: Point;
+    path: ConnectorPath;
+}
+/**
+ * Every connector of a graph level, from its nodes' boxes, keyed by each node's first job. A node's
+ * jobs share their needs, so its first job's needs are the node's; a need naming a node not laid out
+ * draws nothing. `connectorY` is how far below a node's top its connectors meet it.
+ */
+export declare function routeConnectors(cols: string[][][], 
+/** Whether columns are left empty between those drawn, so gaps between them differ. */
+spaced: boolean, deps: Record<string, string[]>, boxes: Map<string, Box>, connectorY: number): DrawnEdge[];

package/dist/graph/connectorGeometry.js

@@ -0,0 +1,103 @@
+//#region src/graph/connectorGeometry.ts
+var MAX_ARC_R = 16;
+/**
+* The corner radius every connector of a graph shares: a quarter of the least rise any connector
+* makes, and no more than half the narrowest gap between columns, so bends never overlap.
+*/
+function arcRadius(minRise, colGap) {
+	return Math.min(Number.isFinite(minRise) ? minRise / 4 : MAX_ARC_R, colGap / 2, MAX_ARC_R);
+}
+/**
+* A connector from a node's right side to a later node's left: straight when level, otherwise
+* across, a bend, down or up, a bend and across. The bends sit in the gap before `end`'s column, so
+* a connector spanning several columns runs level until it nears its target.
+*/
+function connectorPath(start, end, r, colGap) {
+	const { x: x1, y: y1 } = start;
+	const { x: x2, y: y2 } = end;
+	const dy = y2 - y1;
+	if (dy === 0) return {
+		d: `M ${x1} ${y1} L ${x2} ${y2}`,
+		reversed: `M ${x2} ${y2} L ${x1} ${y1}`
+	};
+	const s = dy > 0 ? 1 : -1;
+	const ax2end = x2 - (colGap / 2 - r);
+	const ax = ax2end - 2 * r;
+	const sw1 = dy > 0 ? 1 : 0;
+	const sw2 = dy > 0 ? 0 : 1;
+	return {
+		d: [
+			`M ${x1} ${y1}`,
+			`L ${ax} ${y1}`,
+			`A ${r} ${r} 0 0 ${sw1} ${ax + r} ${y1 + s * r}`,
+			`L ${ax + r} ${y2 - s * r}`,
+			`A ${r} ${r} 0 0 ${sw2} ${ax2end} ${y2}`,
+			`L ${x2} ${y2}`
+		].join(" "),
+		reversed: [
+			`M ${x2} ${y2}`,
+			`L ${ax2end} ${y2}`,
+			`A ${r} ${r} 0 0 ${sw1} ${ax + r} ${y2 - s * r}`,
+			`L ${ax + r} ${y1 + s * r}`,
+			`A ${r} ${r} 0 0 ${sw2} ${ax} ${y1}`,
+			`L ${x1} ${y1}`
+		].join(" ")
+	};
+}
+/** Whether two layouts put every node in the same place. */
+function sameBoxes(a, b) {
+	if (a.size !== b.size) return false;
+	for (const [job, box] of a) {
+		const other = b.get(job);
+		if (!other || other.x !== box.x || other.y !== box.y || other.width !== box.width) return false;
+	}
+	return true;
+}
+/**
+* Every connector of a graph level, from its nodes' boxes, keyed by each node's first job. A node's
+* jobs share their needs, so its first job's needs are the node's; a need naming a node not laid out
+* draws nothing. `connectorY` is how far below a node's top its connectors meet it.
+*/
+function routeConnectors(cols, spaced, deps, boxes, connectorY) {
+	const heads = (c) => cols[c]?.[0]?.[0];
+	const gapAfter = (c) => {
+		const left = boxes.get(heads(c) ?? "");
+		const right = boxes.get(heads(c + 1) ?? "");
+		return left && right ? right.x - (left.x + left.width) : void 0;
+	};
+	let colGap = gapAfter(0) ?? 32;
+	if (spaced) for (let c = 1; c + 1 < cols.length; c++) colGap = Math.min(colGap, gapAfter(c) ?? colGap);
+	const ends = [];
+	let minRise = Number.POSITIVE_INFINITY;
+	for (const col of cols) for (const [to] of col) {
+		const target = to === void 0 ? void 0 : boxes.get(to);
+		if (to === void 0 || !target) continue;
+		for (const from of deps[to] ?? []) {
+			const source = boxes.get(from);
+			if (!source) continue;
+			const start = {
+				x: source.x + source.width - 2,
+				y: source.y + connectorY
+			};
+			const end = {
+				x: target.x + 2,
+				y: target.y + connectorY
+			};
+			const rise = Math.abs(end.y - start.y);
+			if (rise > 0) minRise = Math.min(minRise, rise);
+			ends.push({
+				from,
+				to,
+				start,
+				end
+			});
+		}
+	}
+	const r = arcRadius(minRise, colGap);
+	return ends.map((edge) => ({
+		...edge,
+		path: connectorPath(edge.start, edge.end, r, colGap)
+	}));
+}
+//#endregion
+export { arcRadius, connectorPath, routeConnectors, sameBoxes };

package/dist/graph/graphLayout.d.ts

@@ -0,0 +1,24 @@
+import type { GraphLayout } from '../editing.js';
+import type { MatrixGroup, WorkflowEngine } from '../engine.js';
+import { type WorkflowJob } from './types.js';
+/** The jobs a level shows: those an `if` doesn't rule out, with each matrix collapsed into one job. */
+export declare function displayJobsOf(engine: WorkflowEngine, jobs: Record<string, WorkflowJob>, matrixGroups: Record<string, MatrixGroup>): Record<string, WorkflowJob>;
+export interface ComputedGraphLayout {
+    /** Columns of boxes, each box the jobs drawn as one node. */
+    dependencyCols: string[][][];
+    /** Each box's row; above a box, rows the layout leaves empty stay as space. */
+    rowSlots: number[][];
+    /** Each column's number; between two drawn columns, numbers skipped stay as space. */
+    colSlots: number[];
+    /** Each job's needs that draw a connector, sorted. */
+    directDeps: Record<string, string[]>;
+    /** The jobs that need each job directly, sorted. */
+    dependents: Record<string, string[]>;
+    displayJobs: Record<string, WorkflowJob>;
+}
+/** Levels `jobs` into columns of boxes, by their needs or by a stored layout. */
+export declare function computeGraphLayout(engine: WorkflowEngine, jobs: Record<string, WorkflowJob>, matrixGroups: Record<string, MatrixGroup>, layout?: GraphLayout): ComputedGraphLayout;
+/** Hops from `job` to each job it leads to or follows from, by breadth-first walks both ways. */
+export declare function hopDistances(job: string, directDeps: Record<string, string[]>, dependents: Record<string, string[]>): Map<string, number>;
+/** Each job's place on the graph from its `position`; none when no job has one. */
+export declare function positionsOf(jobs: Record<string, unknown>): GraphLayout | undefined;

package/dist/graph/graphLayout.js

@@ -0,0 +1,205 @@
+import { isJobRecord } from "./types.js";
+//#region src/graph/graphLayout.ts
+/** The jobs a level shows: those an `if` doesn't rule out, with each matrix collapsed into one job. */
+function displayJobsOf(engine, jobs, matrixGroups) {
+	const visibleJobs = {};
+	for (const [name, job] of Object.entries(jobs)) if (job.if !== false) visibleJobs[name] = { ...job };
+	engine.collapseMatrixGroups(matrixGroups, visibleJobs);
+	return visibleJobs;
+}
+function namedNeeds(engine, needs) {
+	return Array.isArray(needs) ? [...new Set(needs.map((need) => typeof need === "string" && engine.editing ? engine.editing.needTarget(need) : need))] : [];
+}
+function leadsTo(from, target, needs, column) {
+	const floor = column.get(target) ?? -1;
+	const seen = /* @__PURE__ */ new Set([from]);
+	const stack = [from];
+	for (let job = stack.pop(); job !== void 0; job = stack.pop()) for (const need of needs[job] ?? []) {
+		if (need === target) return true;
+		if (!seen.has(need) && (column.get(need) ?? -1) > floor) {
+			seen.add(need);
+			stack.push(need);
+		}
+	}
+	return false;
+}
+function directNeeds(named, needs, column) {
+	if (named.length < 2) return named;
+	const at = (job) => column.get(job) ?? -1;
+	return named.filter((dep) => !named.some((other) => other !== dep && at(other) > at(dep) && leadsTo(other, dep, needs, column))).sort();
+}
+function columnsOf(names, deps) {
+	const visible = new Set(names);
+	const column = /* @__PURE__ */ new Map();
+	const seen = /* @__PURE__ */ new Set();
+	for (const start of names) {
+		if (seen.has(start)) continue;
+		seen.add(start);
+		const stack = [[start, 0]];
+		while (stack.length > 0) {
+			const top = stack[stack.length - 1];
+			const [job, next] = top;
+			const needs = deps[job] ?? [];
+			const dep = needs[next];
+			if (dep !== void 0) {
+				top[1] += 1;
+				if (visible.has(dep) && !seen.has(dep)) {
+					seen.add(dep);
+					stack.push([dep, 0]);
+				}
+				continue;
+			}
+			stack.pop();
+			let at = needs.length === 0 ? 0 : 1;
+			let placed = true;
+			for (const need of needs) {
+				if (!visible.has(need)) continue;
+				const needAt = column.get(need);
+				if (needAt === void 0) {
+					placed = false;
+					break;
+				}
+				at = Math.max(at, needAt + 1);
+			}
+			if (placed) column.set(job, at);
+		}
+	}
+	return column;
+}
+function unitsOnly(columns, unitOf) {
+	return columns.map((col) => {
+		const boxes = [];
+		const rows = [];
+		let last = -1;
+		col.boxes.forEach((box, i) => {
+			const groups = [...groupBy(box, unitOf).values()];
+			const main = groups.reduce((a, b) => b.length > a.length ? b : a);
+			let row = Math.max(col.rows[i] ?? i, last + 1);
+			for (const group of [main, ...groups.filter((g) => g !== main)]) {
+				boxes.push(group);
+				rows.push(row);
+				last = row;
+				row += 1;
+			}
+		});
+		return {
+			...col,
+			boxes,
+			rows
+		};
+	});
+}
+function groupBy(jobs, keyOf) {
+	const groups = /* @__PURE__ */ new Map();
+	for (const job of jobs) {
+		const key = keyOf(job);
+		const group = groups.get(key);
+		if (group) group.push(job);
+		else groups.set(key, [job]);
+	}
+	return groups;
+}
+function withLoneMatrixSlots({ layoutPosition, mapLayout }, layout, jobs, matrixGroups) {
+	const lone = Object.entries(jobs).flatMap(([name, job]) => {
+		const original = job._matrix?.originaljob;
+		const slot = original && !matrixGroups[original] ? layoutPosition(layout, original) : void 0;
+		return slot && !layoutPosition(layout, name) ? [{
+			name,
+			slot
+		}] : [];
+	});
+	if (lone.length === 0) return layout;
+	const next = mapLayout(layout, (position) => position);
+	for (const { name, slot } of lone) next[name] = slot;
+	return next;
+}
+/** Levels `jobs` into columns of boxes, by their needs or by a stored layout. */
+function computeGraphLayout(engine, jobs, matrixGroups, layout) {
+	const visibleJobs = displayJobsOf(engine, jobs, matrixGroups);
+	const names = Object.keys(visibleJobs);
+	const needs = {};
+	for (const name of names) needs[name] = namedNeeds(engine, visibleJobs[name]?.needs);
+	const column = columnsOf(names, needs);
+	const directDeps = {};
+	for (const name of names) directDeps[name] = directNeeds(needs[name] ?? [], needs, column);
+	const dependents = {};
+	for (const name of names) for (const dep of directDeps[name] ?? []) {
+		dependents[dep] ??= [];
+		dependents[dep].push(name);
+	}
+	for (const list of Object.values(dependents)) list.sort();
+	const units = /* @__PURE__ */ new Map();
+	const unitOf = (job) => {
+		let unit = units.get(job);
+		if (unit === void 0) {
+			unit = `${(directDeps[job] ?? []).join("\0")}\u0001${(dependents[job] ?? []).join("\0")}`;
+			units.set(job, unit);
+		}
+		return unit;
+	};
+	const alone = (job) => !!visibleJobs[job]?._matrixGroup;
+	const editing = engine.editing;
+	const laidOut = layout && editing?.hasLayout(layout) ? unitsOnly(editing.boxesFromLayout(names, directDeps, withLoneMatrixSlots(editing, layout, visibleJobs, matrixGroups), {
+		together: (a, b) => unitOf(a) === unitOf(b),
+		alone
+	}), unitOf) : null;
+	let dependencyCols;
+	if (laidOut) dependencyCols = laidOut.map((col) => col.boxes);
+	else {
+		const levels = [];
+		for (const [job, at] of column) {
+			levels[at] ??= [];
+			levels[at].push(job);
+		}
+		const order = new Map(names.map((name, i) => [name, i]));
+		const boxOf = (job) => alone(job) ? `\u0002${job}` : unitOf(job);
+		dependencyCols = levels.map((level) => [...groupBy(level.sort((a, b) => (order.get(a) ?? 0) - (order.get(b) ?? 0)), boxOf).values()]);
+		if (dependencyCols[0] === void 0) dependencyCols.shift();
+	}
+	return {
+		dependencyCols,
+		rowSlots: laidOut ? laidOut.map((col) => col.rows) : dependencyCols.map((col) => col.map((_, i) => i)),
+		colSlots: laidOut ? laidOut.map((col) => col.column) : dependencyCols.map((_, i) => i),
+		directDeps,
+		dependents,
+		displayJobs: visibleJobs
+	};
+}
+/** Hops from `job` to each job it leads to or follows from, by breadth-first walks both ways. */
+function hopDistances(job, directDeps, dependents) {
+	const dist = /* @__PURE__ */ new Map([[job, 0]]);
+	for (const edges of [directDeps, dependents]) {
+		const queue = [job];
+		for (let i = 0; i < queue.length; i++) {
+			const at = queue[i];
+			const d = (dist.get(at) ?? 0) + 1;
+			for (const next of edges[at] ?? []) if (!dist.has(next)) {
+				dist.set(next, d);
+				queue.push(next);
+			}
+		}
+	}
+	return dist;
+}
+var isSlot = (value) => typeof value === "number" && Number.isInteger(value) && value >= 0;
+/** Each job's place on the graph from its `position`; none when no job has one. */
+function positionsOf(jobs) {
+	const layout = Object.create(null);
+	let any = false;
+	for (const [name, job] of Object.entries(jobs)) {
+		const { position, _matrix } = isJobRecord(job) ? job : {};
+		const { column, row } = isJobRecord(position) ? position : {};
+		const original = isJobRecord(_matrix) ? _matrix["originaljob"] : void 0;
+		const key = typeof original === "string" && original ? original : name;
+		if (isSlot(column) && isSlot(row) && !(key in layout)) {
+			layout[key] = {
+				column,
+				row
+			};
+			any = true;
+		}
+	}
+	return any ? layout : void 0;
+}
+//#endregion
+export { computeGraphLayout, displayJobsOf, hopDistances, positionsOf };

package/dist/graph/lineage.d.ts

@@ -0,0 +1,51 @@
+import { Store } from './store.js';
+/**
+ * The hovered job's lineage on one graph level: the jobs it leads to or follows from, by hops. Each
+ * node, connector and dot reads only its own part of it, so hovering re-renders those whose highlight
+ * changes and nothing else, however large the graph.
+ */
+export declare class Lineage extends Store {
+    /** Hops from the hovered job, or none while no job is. */
+    private hovered;
+    /** The lineage shown, kept after unhover while its highlight draws back out. */
+    private shown;
+    private furthest;
+    private timer;
+    private readonly walk;
+    /** Seconds each hop of the highlight takes. */
+    readonly animT: number;
+    /** How deeply the level nests, which names the classes that dim it. */
+    readonly depth: number;
+    /** Whether its nodes fade as they dim, rather than dim at once. */
+    readonly fade: boolean;
+    constructor(walk: (job: string) => Map<string, number>, { animT, depth, fade }: {
+        animT: number;
+        depth?: number;
+        fade?: boolean;
+    });
+    get hovering(): boolean;
+    /** Whether a lineage shows, hovered or drawing out. */
+    get showing(): boolean;
+    hover: (job: string | null) => void;
+    /** Stops a draw-out still to finish, as the level goes. */
+    dispose(): void;
+    /** A node's highlight: 2 in the hovered lineage, 1 drawing out of it, 0 neither. */
+    node(job: string): number;
+    /**
+     * A dot's or connector's highlight between `from` and `to` (a dot's both the same job), as one
+     * value React compares: none, or lit or drawing out, its delay, and whether it draws from `to`.
+     */
+    between(from: string, to: string): string;
+}
+/** A highlight `between` describes, read back. */
+export declare function highlightOf(value: string): {
+    lit: boolean;
+    out: boolean;
+    delay: number;
+    back: boolean;
+};
+export declare const LineageContext: import("react").Context<Lineage | null>;
+/** Part of the enclosing level's lineage, re-rendering only when that part changes. */
+export declare function useLineage<T extends string | number>(read: (lineage: Lineage) => T, none: T): T;
+/** The enclosing level's lineage, for what hovers it. */
+export declare function useLineageStore(): Lineage | null;