@parallelworks/ui 0.34.0 → 0.35.0

package/dist/form/index.js

@@ -1,6 +1,6 @@
-import { FieldProvider, useFieldControlProps, useFieldLabelledByProps, useFieldRequired } from "./fieldContext.js";
 import { applySecondaryField, findSecondaryOption } from "./utils/secondaryField.js";
 import { enforceOneMustBeTrue, flattenGroups, impureSetValueFromPath, initializeValues, resolvedFlag } from "./lib.js";
+import { FieldProvider, useFieldControlProps, useFieldLabelledByProps, useFieldRequired } from "./fieldContext.js";
 import { FieldWrapper } from "./FieldWrapper.js";
 import { getInvalidDurationPaths, setDurationValidity } from "./Fields/durationValidity.js";
 import FormikCustomDropdown_default from "./SpecialTypes/FormikCustomDropdown.js";
@@ -9,10 +9,12 @@ import FormikNumericInput from "./SpecialTypes/FormikNumericInput.js";
 import { getPlaceholder } from "./utils/getPlaceholder.js";
 import NumberField from "./Fields/NumberField.js";
 import { ResourceOptionIcon } from "./Fields/ResourceOptionIcon.js";
+import { resolveFormLayout } from "./layout.js";
+import { resolveLayoutCSS } from "./layoutCSS.js";
 import { FLEX_MAX_DURATION_RANGE, FLEX_WAIT_TIME_RANGE, STANDARD_MAX_DURATION_RANGE, collectPartitionDurationIssues, formatDuration, parseDuration } from "./utils/duration.js";
 import { FieldRegistryContext, Registry } from "./fieldRegistry.js";
 import { useParsedOpts } from "./useParsedOpts.js";
 import { DynamicDefaultsSync, DynamicForm, FieldsFromOptions, GroupHeader, MultiSelectionDropdown, collectFieldsWithDefaults, findSelfReferencingFieldNames, resolveMetaOverrides, useDynamicDefaultsSync } from "./Form.js";
 import DropdownWrapper from "./SpecialTypes/DropdownWrapper.js";
 import FormikMultiSelectDropdown from "./SpecialTypes/FormikMultiSelectDropdown.js";
-export { DropdownWrapper, DynamicDefaultsSync, DynamicForm, FLEX_MAX_DURATION_RANGE, FLEX_WAIT_TIME_RANGE, FieldProvider, FieldRegistryContext, FieldWrapper, FieldsFromOptions, FormikCustomDropdown_default as FormikCustomDropdown, FormikCustomInput, FormikMultiSelectDropdown, FormikNumericInput, GroupHeader, MultiSelectionDropdown, NumberField, Registry, ResourceOptionIcon, STANDARD_MAX_DURATION_RANGE, applySecondaryField, collectFieldsWithDefaults, collectPartitionDurationIssues, enforceOneMustBeTrue, findSecondaryOption, findSelfReferencingFieldNames, flattenGroups, formatDuration, getInvalidDurationPaths, getPlaceholder, impureSetValueFromPath, initializeValues, parseDuration, resolveMetaOverrides, resolvedFlag, setDurationValidity, useDynamicDefaultsSync, useFieldControlProps, useFieldLabelledByProps, useFieldRequired, useParsedOpts };
+export { DropdownWrapper, DynamicDefaultsSync, DynamicForm, FLEX_MAX_DURATION_RANGE, FLEX_WAIT_TIME_RANGE, FieldProvider, FieldRegistryContext, FieldWrapper, FieldsFromOptions, FormikCustomDropdown_default as FormikCustomDropdown, FormikCustomInput, FormikMultiSelectDropdown, FormikNumericInput, GroupHeader, MultiSelectionDropdown, NumberField, Registry, ResourceOptionIcon, STANDARD_MAX_DURATION_RANGE, applySecondaryField, collectFieldsWithDefaults, collectPartitionDurationIssues, enforceOneMustBeTrue, findSecondaryOption, findSelfReferencingFieldNames, flattenGroups, formatDuration, getInvalidDurationPaths, getPlaceholder, impureSetValueFromPath, initializeValues, parseDuration, resolveFormLayout, resolveLayoutCSS, resolveMetaOverrides, resolvedFlag, setDurationValidity, useDynamicDefaultsSync, useFieldControlProps, useFieldLabelledByProps, useFieldRequired, useParsedOpts };

package/dist/form/layout.d.ts

@@ -0,0 +1,50 @@
+export type LayoutBreakpoint = 'base' | 'sm' | 'md' | 'lg';
+export type ResponsiveLayout<T> = T | Partial<Record<LayoutBreakpoint, T>>;
+export type LayoutTracks = number | number[];
+export type LayoutGap = 'none' | 'sm' | 'md' | 'lg';
+interface LayoutPlacement {
+    span?: ResponsiveLayout<number>;
+    css?: string;
+}
+export type FormLayoutNode = (LayoutPlacement & {
+    type: 'field';
+    field: string;
+}) | (LayoutPlacement & {
+    type: 'stack';
+    gap?: LayoutGap;
+    children: FormLayoutNode[];
+}) | (LayoutPlacement & {
+    type: 'grid';
+    columns: ResponsiveLayout<LayoutTracks>;
+    align?: 'independent' | 'rows';
+    gap?: LayoutGap;
+    children: FormLayoutNode[];
+}) | (LayoutPlacement & {
+    type: 'section';
+    label: string;
+    description?: string;
+    gap?: LayoutGap;
+    children: FormLayoutNode[];
+});
+export interface FormLayoutIssue {
+    path: (string | number)[];
+    code: 'invalid_node' | 'unknown_field' | 'duplicate_field';
+}
+export declare const layoutLimits: {
+    readonly depth: 64;
+    readonly nodes: 1024;
+    readonly children: 128;
+    readonly css: 65536;
+    readonly label: 256;
+    readonly description: 4096;
+    readonly field: 256;
+};
+export declare const layoutBreakpoints: readonly ['base', 'sm', 'md', 'lg'];
+export declare function responsiveLayoutValues<T>(value: ResponsiveLayout<T> | undefined, fallback: T): Record<LayoutBreakpoint, T>;
+/** Invalid layouts fall back as a whole, so a typo cannot hide an input or render it twice. */
+export declare function resolveFormLayout(value: unknown, fieldNames: readonly string[]): {
+    layout: FormLayoutNode | undefined;
+    remaining: string[];
+    issues: FormLayoutIssue[];
+};
+export {};

package/dist/form/layout.js

@@ -0,0 +1,125 @@
+//#region src/form/layout.ts
+var layoutLimits = {
+	depth: 64,
+	nodes: 1024,
+	children: 128,
+	css: 65536,
+	label: 256,
+	description: 4096,
+	field: 256
+};
+var layoutBreakpoints = [
+	"base",
+	"sm",
+	"md",
+	"lg"
+];
+function responsiveLayoutValues(value, fallback) {
+	const responsive = isRecord(value) ? value : void 0;
+	let current = responsive ? fallback : value ?? fallback;
+	return Object.fromEntries(layoutBreakpoints.map((key) => {
+		current = responsive?.[key] ?? current;
+		return [key, current];
+	}));
+}
+function isRecord(value) {
+	return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+var count = (value) => typeof value === "number" && Number.isInteger(value) && value >= 1 && value <= 12;
+function tracks(value) {
+	return count(value) || Array.isArray(value) && value.length >= 1 && value.length <= 12 && value.every((n) => typeof n === "number" && Number.isFinite(n) && n > 0);
+}
+function responsive(value, valid) {
+	return valid(value) || isRecord(value) && Object.keys(value).length > 0 && Object.entries(value).every(([key, entry]) => layoutBreakpoints.some((breakpoint) => breakpoint === key) && valid(entry));
+}
+/** Invalid layouts fall back as a whole, so a typo cannot hide an input or render it twice. */
+function resolveFormLayout(value, fieldNames) {
+	const issues = [];
+	const used = /* @__PURE__ */ new Set();
+	const available = new Set(fieldNames);
+	const ancestors = /* @__PURE__ */ new Set();
+	let visited = 0;
+	let cssLength = 0;
+	let exhausted = false;
+	const visit = (node, path, depth) => {
+		const invalid = () => {
+			issues.push({
+				path,
+				code: "invalid_node"
+			});
+			return false;
+		};
+		if (++visited > layoutLimits.nodes) {
+			exhausted = true;
+			return invalid();
+		}
+		if (!isRecord(node) || depth > layoutLimits.depth || ancestors.has(node)) return invalid();
+		const type = node["type"];
+		const allowed = [
+			"type",
+			"span",
+			"css"
+		];
+		if (node["css"] !== void 0 && (typeof node["css"] !== "string" || node["css"].length > 4096)) return invalid();
+		cssLength += typeof node["css"] === "string" ? node["css"].length : 0;
+		if (cssLength > layoutLimits.css) {
+			exhausted = true;
+			return invalid();
+		}
+		if (node["span"] !== void 0 && !responsive(node["span"], count)) return invalid();
+		if (type === "field") {
+			allowed.push("field");
+			if (Object.keys(node).some((key) => !allowed.includes(key))) return invalid();
+			const name = node["field"];
+			if (typeof name !== "string" || name.length > layoutLimits.field || !/^[a-zA-Z0-9_-]+$/.test(name)) return invalid();
+			if (!available.has(name)) issues.push({
+				path,
+				code: "unknown_field"
+			});
+			else if (used.has(name)) issues.push({
+				path,
+				code: "duplicate_field"
+			});
+			used.add(name);
+			return true;
+		}
+		if (type !== "stack" && type !== "grid" && type !== "section") return invalid();
+		if (!Array.isArray(node["children"]) || node["children"].length > layoutLimits.children) return invalid();
+		allowed.push("children", "gap");
+		if (type === "grid") {
+			allowed.push("columns", "align");
+			if (!responsive(node["columns"], tracks)) return invalid();
+			if (node["align"] !== void 0 && node["align"] !== "independent" && node["align"] !== "rows") return invalid();
+			if (node["align"] === "rows" && (!Array.isArray(node["children"]) || node["children"].some((child) => !isRecord(child) || child["type"] !== "section"))) return invalid();
+		}
+		if (type === "section") {
+			allowed.push("label", "description");
+			if (typeof node["label"] !== "string" || !node["label"] || node["label"].length > layoutLimits.label) return invalid();
+			if (node["description"] !== void 0 && (typeof node["description"] !== "string" || node["description"].length > layoutLimits.description)) return invalid();
+		}
+		if (Object.keys(node).some((key) => !allowed.includes(key))) return invalid();
+		if (node["gap"] !== void 0 && (typeof node["gap"] !== "string" || ![
+			"none",
+			"sm",
+			"md",
+			"lg"
+		].includes(node["gap"]))) return invalid();
+		ancestors.add(node);
+		for (let index = 0; index < node["children"].length && !exhausted; index++) visit(node["children"][index], [
+			...path,
+			"children",
+			index
+		], depth + 1);
+		ancestors.delete(node);
+		return true;
+	};
+	if (value !== void 0) visit(value, [], 0);
+	const layout = value !== void 0 && issues.length === 0 ? value : void 0;
+	return {
+		layout,
+		remaining: fieldNames.filter((name) => !layout || !used.has(name)),
+		issues
+	};
+}
+//#endregion
+export { layoutBreakpoints, layoutLimits, resolveFormLayout, responsiveLayoutValues };

package/dist/form/layoutCSS.d.ts

@@ -0,0 +1,10 @@
+import type { CSSProperties } from 'react';
+export interface LayoutCSSIssue {
+    code: 'invalid_css' | 'unsupported_property' | 'unsupported_value';
+    property?: string;
+}
+/** Only generated declaration values reach React; authored CSS is never inserted into a stylesheet. */
+export declare function resolveLayoutCSS(css: unknown): {
+    style: CSSProperties;
+    issues: LayoutCSSIssue[];
+};

package/dist/form/layoutCSS.js

@@ -0,0 +1,234 @@
+import { deriveTheme, isDarkColor } from "../theme/index.js";
+import { generate, lexer, parse, walk } from "css-tree";
+//#region src/form/layoutCSS.ts
+var properties = /* @__PURE__ */ new Set([
+	"gap",
+	"row-gap",
+	"column-gap",
+	"padding",
+	"padding-inline",
+	"padding-block",
+	"padding-top",
+	"padding-right",
+	"padding-bottom",
+	"padding-left",
+	"max-width",
+	"width",
+	"align-items",
+	"justify-items",
+	"align-self",
+	"justify-self",
+	"background-color",
+	"color",
+	"border",
+	"border-top",
+	"border-bottom",
+	"border-left",
+	"border-right",
+	"border-color",
+	"border-width",
+	"border-style",
+	"border-radius",
+	"font-family",
+	"font-size",
+	"font-weight",
+	"font-style",
+	"line-height",
+	"letter-spacing",
+	"text-align"
+]);
+var alignmentKeywords = [
+	"auto",
+	"normal",
+	"start",
+	"end",
+	"center",
+	"stretch",
+	"baseline"
+];
+var borderKeywords = [
+	"solid",
+	"dashed",
+	"dotted",
+	"double",
+	"none"
+];
+var keywords = {
+	gap: ["normal"],
+	"row-gap": ["normal"],
+	"column-gap": ["normal"],
+	width: ["auto"],
+	"max-width": ["none"],
+	"align-items": alignmentKeywords,
+	"justify-items": alignmentKeywords,
+	"align-self": alignmentKeywords,
+	"justify-self": alignmentKeywords,
+	border: borderKeywords,
+	"border-top": borderKeywords,
+	"border-bottom": borderKeywords,
+	"border-left": borderKeywords,
+	"border-right": borderKeywords,
+	"border-style": borderKeywords,
+	"font-family": [
+		"serif",
+		"sans-serif",
+		"monospace"
+	],
+	"font-style": ["normal", "italic"],
+	"line-height": ["normal"],
+	"letter-spacing": ["normal"],
+	"text-align": [
+		"start",
+		"end",
+		"left",
+		"right",
+		"center"
+	]
+};
+var proportionalLengths = /* @__PURE__ */ new Set([
+	"gap",
+	"row-gap",
+	"column-gap",
+	"width",
+	"max-width",
+	"padding",
+	"padding-inline",
+	"padding-block",
+	"padding-top",
+	"padding-right",
+	"padding-bottom",
+	"padding-left"
+]);
+var functions = /* @__PURE__ */ new Set([
+	"min",
+	"max",
+	"clamp"
+]);
+var units = /* @__PURE__ */ new Set([
+	"px",
+	"rem",
+	"em",
+	"ch"
+]);
+var themeProperties = /* @__PURE__ */ new Set(["--form-surface", "--form-accent"]);
+var opaqueHex = /^(?:[a-f\d]{3}|[a-f\d]{6})$/i;
+var expandHex = (hex) => hex.length === 4 ? `#${[...hex.slice(1)].map((c) => c + c).join("")}` : hex;
+function validToken(node, property) {
+	const color = property === "color" || property === "background-color" || themeProperties.has(property);
+	const border = property.startsWith("border");
+	switch (node.type) {
+		case "Value": return true;
+		case "Hash": return (color || border) && opaqueHex.test(node.value);
+		case "Identifier": return keywords[property]?.includes(node.name.toLowerCase()) ?? false;
+		case "String": return property === "font-family" && ["Geist Sans", "Geist Mono"].includes(node.value);
+		case "Function": return !color && !border && functions.has(node.name.toLowerCase());
+		case "Operator": return !color && node.value === ",";
+		case "Number": {
+			const n = Number(node.value);
+			if (color) return false;
+			if (property === "font-weight") return Number.isInteger(n) && n >= 100 && n <= 900;
+			if (property === "line-height") return n >= 1 && n <= 2;
+			if (property === "font-size") return false;
+			return n >= 0 && n <= (border || property === "letter-spacing" ? 0 : 12);
+		}
+		case "Percentage": return proportionalLengths.has(property) && Number(node.value) >= 0 && Number(node.value) <= 100;
+		case "Dimension": {
+			const n = Number(node.value);
+			const unit = node.unit.toLowerCase();
+			if (color || !units.has(unit)) return false;
+			if (property === "font-size") return unit === "px" && n >= 12 && n <= 96 || unit === "rem" && n >= .75 && n <= 6;
+			if (property === "letter-spacing") return unit === "px" && n >= 0 && n <= 2 || unit === "em" && n >= 0 && n <= .1;
+			if (property === "line-height") return false;
+			if (border) {
+				const cap = property === "border-radius" ? 32 : 8;
+				return unit === "px" && n >= 0 && n <= cap || unit === "rem" && n >= 0 && n <= cap / 16;
+			}
+			return n >= 0 && n <= 256;
+		}
+		default: return false;
+	}
+}
+/** Only generated declaration values reach React; authored CSS is never inserted into a stylesheet. */
+function resolveLayoutCSS(css) {
+	if (css === void 0 || css === "") return {
+		style: {},
+		issues: []
+	};
+	const issues = [];
+	const style = {};
+	if (typeof css !== "string" || css.length > 4096) return {
+		style,
+		issues: [{ code: "invalid_css" }]
+	};
+	try {
+		const ast = parse(css, {
+			context: "declarationList",
+			parseCustomProperty: true,
+			onParseError: () => {
+				throw new Error("Invalid CSS");
+			}
+		});
+		if (ast.type !== "DeclarationList" || ast.children.size > 32) throw new Error("Invalid CSS");
+		ast.children.forEach((declaration) => {
+			if (declaration.type !== "Declaration") throw new Error("Invalid CSS");
+			const property = declaration.property.startsWith("--") ? declaration.property : declaration.property.toLowerCase();
+			if (!properties.has(property) && !themeProperties.has(property)) {
+				issues.push({
+					code: "unsupported_property",
+					property
+				});
+				return;
+			}
+			let valid = !declaration.important;
+			let tokens = 0;
+			walk(declaration.value, (node) => {
+				if (++tokens > 128) valid = false;
+				valid &&= validToken(node, property);
+			});
+			if (!valid || lexer.matchProperty(themeProperties.has(property) ? "color" : property, declaration.value).error) {
+				issues.push({
+					code: "unsupported_value",
+					property
+				});
+				return;
+			}
+			style[themeProperties.has(property) ? property : property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())] = generate(declaration.value);
+		});
+	} catch {
+		issues.push({ code: "invalid_css" });
+	}
+	const surface = style["--form-surface"];
+	const accent = style["--form-accent"];
+	if (Boolean(surface) !== Boolean(accent)) issues.push({
+		code: "unsupported_value",
+		property: surface ? "--form-accent" : "--form-surface"
+	});
+	if (issues.length) return {
+		style: {},
+		issues
+	};
+	if (surface && accent) {
+		const background = expandHex(surface);
+		delete style["--form-surface"];
+		delete style["--form-accent"];
+		return {
+			style: {
+				...deriveTheme({
+					background,
+					accent: expandHex(accent)
+				}),
+				backgroundColor: background,
+				color: "var(--theme-app)",
+				colorScheme: isDarkColor(background) ? "dark" : "light",
+				...style
+			},
+			issues
+		};
+	}
+	return {
+		style,
+		issues
+	};
+}
+//#endregion
+export { resolveLayoutCSS };

package/dist/form/lib.d.ts

@@ -8,6 +8,8 @@ import type { DynamicFormSchema } from './types/fieldTypes.js';
  * that default instead of reading an expression it never evaluated as "yes".
  */
 export declare function resolvedFlag<T>(value: T): T | undefined;
+/** An input's `width` as CSS: a number of pixels or a percentage; undefined for anything else. */
+export declare function inputWidth(value: unknown): string | undefined;
 export declare function enforceOneMustBeTrue(items: Array<Record<string, unknown>>, options: DynamicFormSchema, promoteIndex: number): Array<Record<string, unknown>>;
 export declare function flattenGroups(schema: unknown): Record<string, unknown>;
 /**Not a pure function. Edits 'obj' passed into function */

package/dist/form/lib.js

@@ -1,4 +1,5 @@
 import { applySecondaryField, findSecondaryOption } from "./utils/secondaryField.js";
+import { copyBounds } from "./Wizard/utils.js";
 //#region src/form/lib.ts
 var EMPTY_ENTRY = {};
 function asRecord(value) {
@@ -15,6 +16,12 @@ function asRecord(value) {
 function resolvedFlag(value) {
 	return typeof value === "string" && value.includes("${{") ? void 0 : value;
 }
+var PERCENT_WIDTH = /^(100|[1-9]\d?(\.\d+)?)%$/;
+/** An input's `width` as CSS: a number of pixels or a percentage; undefined for anything else. */
+function inputWidth(value) {
+	if (typeof value === "number") return Number.isFinite(value) && value > 0 ? `${value}px` : void 0;
+	return typeof value === "string" && PERCENT_WIDTH.test(value) ? value : void 0;
+}
 function enforceOneMustBeTrue(items, options, promoteIndex) {
 	if (items.length === 0) return items;
 	const clampedIndex = Math.max(0, Math.min(promoteIndex, items.length - 1));
@@ -70,6 +77,14 @@ function initializeValues(options, srcData = {}, blankDefault) {
 	return Object.keys(schema).reduce((acc, field) => {
 		if (field.startsWith("$")) return acc;
 		const fieldSchema = schema[field] ?? EMPTY_ENTRY;
+		if (fieldSchema.type === "step" && fieldSchema.multi === true) {
+			const saved = data[field];
+			const rows = Array.isArray(saved) ? saved : [];
+			const { lo, hi } = copyBounds(fieldSchema.min, fieldSchema.max);
+			const length = Math.min(Math.max(rows.length, lo), hi ?? Number.POSITIVE_INFINITY);
+			acc[field] = Array.from({ length }, (_, i) => rows[i] ?? {}).map((row) => initializeValues(fieldSchema.options, asRecord(row)));
+			return acc;
+		}
 		const flattenStep = fieldSchema.type === "step" && schema["$meta"]?.wizard?.flatten !== false;
 		if (fieldSchema.type === "group" || flattenStep) {
 			const values = initializeValues(fieldSchema.options, data);
@@ -81,7 +96,7 @@ function initializeValues(options, srcData = {}, blankDefault) {
 			return acc;
 		}
 		if (fieldSchema.type === "list") {
-			const listData = data[field];
+			const listData = data[field] !== void 0 ? data[field] : fieldSchema.default;
 			if (fieldSchema.options === "string") {
 				acc[field] = Array.isArray(listData) ? [...listData] : [];
 				return acc;
@@ -127,4 +142,4 @@ function initializeValues(options, srcData = {}, blankDefault) {
 	}, data);
 }
 //#endregion
-export { enforceOneMustBeTrue, flattenGroups, impureSetValueFromPath, initializeValues, resolvedFlag };
+export { enforceOneMustBeTrue, flattenGroups, impureSetValueFromPath, initializeValues, inputWidth, resolvedFlag };

package/dist/form/types/fieldTypes.d.ts

@@ -1,3 +1,5 @@
+import type { FormLayoutNode } from '../layout.js';
+import type { StepFieldConfig, WizardConfig } from '../Wizard/types.js';
 export type LabelPosition = 'left' | 'top';
 /** A flag a field may set literally or as an expression the engine resolves. */
 export type FieldFlag = string | boolean;
@@ -29,36 +31,19 @@ export interface BaseField extends RuntimeFieldExtensions {
     collapsed?: boolean;
     disabled?: boolean;
     default?: unknown;
+    /** Pixels, or a share of the row such as '50%'; inputs whose widths fit share a row. */
+    width?: number | string;
+    /** Under the input before it, in that input's column. */
+    'anchor-below'?: boolean;
 }
 type AnyField = BaseField;
-interface WizardConfig {
-    /** Must be 'wizard' to activate wizard mode */
-    mode: 'wizard';
-    /** Navigation UI options */
-    navigation?: {
-        showSteps?: boolean;
-        allowJump?: boolean;
-        hideStepNumbers?: boolean;
-    };
-    /** Label for the final submit button */
-    submitLabel?: string;
-    /** Flatten step fields into top-level inputs (default: true). Set false to keep each step's fields under its key. */
-    flatten?: boolean;
-}
-interface StepField extends BaseField {
-    type: 'step';
-    title: string;
-    description?: string;
-    options: Record<string, AnyField>;
-    validateOnNext?: boolean;
-    nextLabel?: string;
-    prevLabel?: string;
-}
+type StepField = Omit<BaseField, 'type' | 'description'> & StepFieldConfig;
 export interface DynamicFormSchema {
     $meta?: {
         labelPosition?: LabelPosition;
         spaceCompact?: boolean;
         wizard?: WizardConfig;
+        layout?: FormLayoutNode;
     };
     [fieldName: string]: AnyField | StepField | DynamicFormSchema['$meta'] | undefined;
 }

package/dist/graph/DependencyGraph.d.ts

@@ -1,9 +1,22 @@
 import React from 'react';
+import type { GraphLayout } from '../editing.js';
+import type { MatrixGroup, WorkflowEngine } from '../engine.js';
 import { type RunLink, type WorkflowJob } from './types.js';
 export type ViewMode = 'dag' | 'tree';
 export declare const addCleanupSteps: ({ jobs }: {
     jobs: Record<string, WorkflowJob>;
 }) => Record<string, WorkflowJob>;
+export declare function computeGraphLayout(engine: WorkflowEngine, jobs: Record<string, WorkflowJob>, matrixGroups: Record<string, MatrixGroup>, layout?: GraphLayout): {
+    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[];
+    directDeps: Record<string, string[]>;
+    displayJobs: Record<string, WorkflowJob>;
+    ancestorDists: Record<string, Map<string, number>>;
+    descendantDists: Record<string, Map<string, number>>;
+};
 interface GraphRun {
     id?: string | undefined;
     number?: number | undefined;
@@ -16,15 +29,21 @@ interface GraphRun {
     executedJobs?: Record<string, unknown> | undefined;
     links?: Record<string, RunLink> | undefined;
 }
-export default function DependencyGraph({ run, preview, removeBorder, viewMode, setViewMode, }: {
+export default function DependencyGraph({ run, preview, removeBorder, viewMode, setViewMode, layout, yamlJobs, fixedHeight, }: {
     run: GraphRun;
     preview?: boolean;
     removeBorder?: boolean | undefined;
     viewMode?: ViewMode;
     setViewMode?: (mode: ViewMode) => void;
+    layout?: GraphLayout | undefined;
+    yamlJobs?: Record<string, unknown> | undefined;
+    fixedHeight?: string | undefined;
 }): React.JSX.Element | undefined;
 export declare function DependencyGraphPreview(inputs: {
     yml?: Record<string, unknown>;
     removeBorder?: boolean;
+    layout?: GraphLayout | undefined;
+    /** A fixed panel height; without one the panel is only as tall as the graph. */
+    height?: string | undefined;
 }): React.JSX.Element;
 export {};