@parallelworks/ui 0.82.1 → 0.83.0

package/dist/graph/DependencyGraph.js

@@ -26,7 +26,7 @@ import { WarningMarks, WarningMarksContext, locateWarnings, rowKey } from "./run
 import { Joblist } from "./JobSummary.js";
 import { Store, useStore } from "./store.js";
 import { Lineage, LineageContext } from "./lineage.js";
-import { DimRules, JobNode, setDimmed } from "./GraphNode.js";
+import { DimRules, GraphDirectionContext, JobNode, setDimmed } from "./GraphNode.js";
 import { ConnectorLayers } from "./Connectors.js";
 import { routeConnectors, sameBoxes } from "./connectorGeometry.js";
 import { isJobRecord } from "./types.js";
@@ -35,7 +35,7 @@ import { MatrixGroupNode, MatrixGroupSummaryItem } from "./MatrixGroup.js";
 import { StepSummaries } from "./StepSummaries.js";
 import { StepSummary } from "./StepSummary.js";
 import TreeView from "./TreeView.js";
-import { FIT_MAX_SCALE, MIN_SCALE, ZOOM_STEP, enclosing, fitMargin, fitView, intoView, viewShowing, wheelFactor, zoomAround, zoomLimit } from "./viewport.js";
+import { FIT_MAX_SCALE, MIN_SCALE, ZOOM_STEP, enclosing, fitMargin, fitView, intoReach, intoView, reachKept, viewShowing, wheelFactor, zoomAround, zoomLimit } from "./viewport.js";
 import { Fragment, Suspense, createContext, lazy, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { flushSync } from "react-dom";
@@ -294,14 +294,20 @@ function sizingTransitions(el) {
 }
 var HOLD_MS = 2e3;
 var skippedBefore = (slots, i) => (slots?.[i] ?? i) - (i === 0 ? 0 : (slots?.[i - 1] ?? i - 1) + 1);
-function measureBoxes(cols, pathPrefix, wrapper) {
+function measureBoxes(cols, pathPrefix, wrapper, down) {
 	const boxes = /* @__PURE__ */ new Map();
 	for (const col of cols) for (const [head] of col) {
 		const el = head === void 0 ? null : document.getElementById(`node_${pathPrefix}${head}`);
-		if (head !== void 0 && el) boxes.set(head, {
-			...offsetWithin(el, wrapper),
-			width: el.offsetWidth
-		});
+		if (head !== void 0 && el) {
+			const box = {
+				...offsetWithin(el, wrapper),
+				width: el.offsetWidth
+			};
+			boxes.set(head, down ? {
+				...box,
+				height: el.offsetHeight
+			} : box);
+		}
 	}
 	return boxes;
 }
@@ -313,6 +319,7 @@ var Subgraph = memo(function Subgraph({ jobs, pathPrefix, depth, preview, animT,
 	const editorApi = useGraphEditor();
 	const selectedEdges = useSelectedEdges(editable ? editorApi : null);
 	const zBase = depth * SUBGRAPH_Z_STEP;
+	const down = useContext(GraphDirectionContext) === "down";
 	const placed = useMemo(() => layout ?? (depth > 0 ? positionsOf(jobs) : void 0), [
 		layout,
 		depth,
@@ -459,9 +466,10 @@ var Subgraph = memo(function Subgraph({ jobs, pathPrefix, depth, preview, animT,
 		toggleMatrix
 	]);
 	const nodes = useMemo(() => /* @__PURE__ */ jsx("div", {
-		className: "flex relative",
+		className: down ? "flex flex-col items-center relative" : "flex relative",
 		children: dependencyCols.map((col, c) => /* @__PURE__ */ jsx("div", {
-			style: emptyColumnsStyle(skippedBefore(colSlots, c)),
+			className: down ? "flex items-start justify-center" : void 0,
+			style: down ? void 0 : emptyColumnsStyle(skippedBefore(colSlots, c)),
 			children: col.map((jobNames, i) => {
 				const first = jobNames[0];
 				if (first === void 0) return null;
@@ -504,16 +512,17 @@ var Subgraph = memo(function Subgraph({ jobs, pathPrefix, depth, preview, animT,
 		pathPrefix,
 		toggleMatrix,
 		handlers,
-		editable
+		editable,
+		down
 	]);
 	if (!dependencyCols[0]?.length) return null;
 	const wrapper = wrapperRef.current;
-	const measured = wrapper ? measureBoxes(dependencyCols, pathPrefix, wrapper) : /* @__PURE__ */ new Map();
+	const measured = wrapper ? measureBoxes(dependencyCols, pathPrefix, wrapper, down) : /* @__PURE__ */ new Map();
 	const last = routedRef.current;
 	const routed = last && last.directDeps === directDeps && sameBoxes(last.boxes, measured) ? last : {
 		boxes: measured,
 		directDeps,
-		edges: routeConnectors(dependencyCols, colSlots.some((column, c) => column !== c), directDeps, measured, 37)
+		edges: routeConnectors(dependencyCols, colSlots.some((column, c) => column !== c), directDeps, measured, 37, down ? "down" : "right")
 	};
 	routedRef.current = routed;
 	const { boxes, edges } = routed;
@@ -704,6 +713,8 @@ function graphBounds(content) {
 	}
 	return bounds;
 }
+var NARROW_PANEL_PX = 640;
+var BLEED_CLASSES = "max-sm:-mx-4 max-sm:w-auto max-sm:rounded-none max-sm:border-x-0";
 var READABLE_SCALE = .5;
 /** Where a job or step a warning took the graph to shows: the panel below its view bar, which sits
 *  over the graph. */
@@ -741,7 +752,7 @@ function flash(row) {
 		easing: "ease-in"
 	});
 }
-function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag", setViewMode, layout, editor, yamlJobs, inputs, workflow, fixedHeight, openStep, onCloseLog, stickySidebar }) {
+function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag", setViewMode, layout, editor, yamlJobs, inputs, workflow, fixedHeight, openStep, onCloseLog, stickySidebar, bleed = false }) {
 	const engine = useWorkflowEngine();
 	const animT = .125;
 	const rootJobs = isJobRecord(run.executedJobs) ? run.executedJobs : {};
@@ -800,6 +811,7 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 		}
 	}, [preview]);
 	const containerHeight = topOffset !== null ? Math.max(windowSize.h - topOffset - 16, 160) : null;
+	const runsDown = !preview && !editor && windowSize.w < NARROW_PANEL_PX;
 	const [fitHeight, setFitHeight] = useState(null);
 	const fitViewRef = useRef(null);
 	useEffect(() => {
@@ -1012,7 +1024,12 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 			if (dx !== 0 || dy !== 0) requestAnimationFrame(() => transform.setTransform(x + dx, y + dy, scale, FIT_ANIMATION_MS, "easeOut"));
 			return;
 		}
-		const view = fitView(bounds, panel);
+		const narrow = !preview && !editor && panel.width < NARROW_PANEL_PX;
+		const view = fitView(bounds, panel, narrow || runsDown ? {
+			minScale: READABLE_SCALE,
+			top: viewBarRef.current?.offsetHeight ?? 0,
+			width: runsDown
+		} : void 0);
 		if (!view) return;
 		if (animationMs > 0) {
 			transform.setTransform(view.x, view.y, view.scale, animationMs, "easeOut");
@@ -1024,7 +1041,9 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 	}, [
 		nodeOf,
 		editor,
-		runRowOf
+		runRowOf,
+		preview,
+		runsDown
 	]);
 	const fitWhenSettled = useCallback(async () => {
 		const container = containerRef.current;
@@ -1135,6 +1154,27 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 	const moved = useCallback(() => {
 		viewed.current = true;
 	}, []);
+	const keepInReach = useCallback(() => {
+		const container = containerRef.current;
+		const content = graphContentRef.current;
+		const transform = transformRef.current;
+		const bounds = content ? graphBounds(content) : null;
+		if (!container || !transform || !bounds) return;
+		const { positionX, positionY, scale } = transform.instance.state;
+		const panel = {
+			left: 0,
+			top: 0,
+			width: container.clientWidth,
+			height: container.clientHeight
+		};
+		const { dx, dy } = intoReach({
+			left: positionX + bounds.minX * scale,
+			top: positionY + bounds.minY * scale,
+			width: (bounds.maxX - bounds.minX) * scale,
+			height: (bounds.maxY - bounds.minY) * scale
+		}, panel, reachKept(panel));
+		if (dx !== 0 || dy !== 0) transform.setTransform(positionX + dx, positionY + dy, scale, FIT_ANIMATION_MS, "easeOut");
+	}, []);
 	const zoomTo = useCallback((view, animationMs) => {
 		viewed.current = true;
 		transformRef.current?.setTransform(view.x, view.y, view.scale, animationMs, "easeOut");
@@ -1484,7 +1524,7 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 					}),
 					!preview && /* @__PURE__ */ jsx(AnnotationBanner, { executedJobs: jobs }),
 					viewMode === "tree" && !preview ? /* @__PURE__ */ jsx("div", {
-						className: "panel w-full border",
+						className: cx("panel w-full border", bleed && BLEED_CLASSES),
 						children: /* @__PURE__ */ jsx(TreeView, {
 							jobs,
 							slug: runSlug,
@@ -1494,9 +1534,9 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 					}) : /* @__PURE__ */ jsxs("div", {
 						ref: setContainerElement,
 						tabIndex: editor ? -1 : void 0,
-						className: cx("panel w-full overflow-hidden relative", removeBorder ? "border-none" : "border", editor && "outline-none"),
+						className: cx("panel w-full overflow-hidden relative", removeBorder ? "border-none" : "border", bleed && BLEED_CLASSES, editor && "outline-none"),
 						style: {
-							height: fixedHeight ?? (fitHeight !== null ? `${Math.min(fitHeight, containerHeight ?? windowSize.h * .62)}px` : containerHeight !== null ? `${containerHeight}px` : "62vh"),
+							height: fixedHeight ?? (fitHeight !== null ? `${Math.min(fitHeight, runsDown ? Math.max(containerHeight ?? 0, windowSize.h * .75) : containerHeight ?? windowSize.h * .62)}px` : containerHeight !== null ? `${containerHeight}px` : "62vh"),
 							minHeight: preview && fitHeight !== null && !fixedHeight ? 0 : 160
 						},
 						children: [/* @__PURE__ */ jsx(TransformWrapper, {
@@ -1511,8 +1551,11 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 							onInit: () => {
 								setTimeout(invalidateConnectors, 0);
 							},
+							velocityAnimation: { sensitivityTouch: 0 },
 							onPanning: moved,
+							onPanningStop: keepInReach,
 							onPinch: moved,
+							onPinchStop: keepInReach,
 							onTransform,
 							children: () => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 								ref: viewBarRef,
@@ -1542,27 +1585,30 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 									ref: graphContentRef,
 									className: "flex relative mr-[8000px]",
 									style: { minHeight: 4e3 },
-									children: /* @__PURE__ */ jsx(Subgraph, {
-										jobs,
-										pathPrefix: pathAppend,
-										depth: 0,
-										preview,
-										animT,
-										expandedSubworkflows,
-										toggleSubworkflow,
-										openInNewGraph,
-										setSublogOpen,
-										invalidateConnectors,
-										requestFit: fitWhenSettled,
-										stepsOpen,
-										toggleSteps,
-										matrixOpen,
-										toggleMatrix,
-										onReady: fitGraph,
-										layout: placed,
-										graph: rootGraph,
-										editable: !!editorApi && currentPath.length === 0
-									}, `sg-${executedJobsPathIdx}-${pathAppend}`)
+									children: /* @__PURE__ */ jsx(GraphDirectionContext, {
+										value: runsDown ? "down" : "right",
+										children: /* @__PURE__ */ jsx(Subgraph, {
+											jobs,
+											pathPrefix: pathAppend,
+											depth: 0,
+											preview,
+											animT,
+											expandedSubworkflows,
+											toggleSubworkflow,
+											openInNewGraph,
+											setSublogOpen,
+											invalidateConnectors,
+											requestFit: fitWhenSettled,
+											stepsOpen,
+											toggleSteps,
+											matrixOpen,
+											toggleMatrix,
+											onReady: fitGraph,
+											layout: placed,
+											graph: rootGraph,
+											editable: !!editorApi && currentPath.length === 0
+										}, `sg-${executedJobsPathIdx}-${pathAppend}`)
+									})
 								})
 							}) })] })
 						}), editorOverlays]

package/dist/graph/GraphNode.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+import type { GraphDirection } from './connectorGeometry.js';
 import { type JobHandlers } from './JobSummary.js';
 import type { WorkflowJob } from './types.js';
 export declare const dimClasses: (depth: number) => {
@@ -10,6 +11,8 @@ export declare const dimClasses: (depth: number) => {
 export declare function DimRules({ depth }: {
     depth: number;
 }): import("react").JSX.Element;
+/** Which way the graph around a node runs; a run's graph on a phone runs down. */
+export declare const GraphDirectionContext: import("react").Context<GraphDirection>;
 /** 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 {

package/dist/graph/GraphNode.js

@@ -2,7 +2,7 @@ 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 { createContext, memo, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/GraphNode.tsx
 var dimClasses = (depth) => ({
@@ -19,6 +19,8 @@ function DimRules({ depth }) {
 		children: [`.${level} .${node}{opacity:.5}.${level} .${edge}{opacity:.3}`, "@media (prefers-reduced-motion:reduce){.dag-fade{transition:none!important}}"]
 	});
 }
+/** Which way the graph around a node runs; a run's graph on a phone runs down. */
+var GraphDirectionContext = createContext("right");
 /** 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);
@@ -26,6 +28,7 @@ function setDimmed(wrapper, depth, 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 down = useContext(GraphDirectionContext) === "down";
 	const highlight = useLineage((l) => l.node(job), 0);
 	const enter = () => lineage?.hover(job);
 	const leave = () => lineage?.hover(null);
@@ -35,10 +38,10 @@ function GraphNode({ id, job, rowsAbove, zBase, children }) {
 	return /* @__PURE__ */ jsxs("div", {
 		id,
 		role: "none",
-		className: "relative m-24",
+		className: down ? "relative mx-8 my-16" : "relative m-24",
 		style: {
 			zIndex: (highlight > 0 ? 25 : 1) + zBase,
-			...emptyRowsStyle(rowsAbove)
+			...down ? {} : emptyRowsStyle(rowsAbove)
 		},
 		onMouseEnter: enter,
 		onMouseLeave: leave,
@@ -70,4 +73,4 @@ var JobNode = memo(function JobNode({ jobNames, jobs, handlers, preview, editabl
 	});
 });
 //#endregion
-export { DimRules, GraphNode, JobNode, dimClasses, setDimmed };
+export { DimRules, GraphDirectionContext, GraphNode, JobNode, dimClasses, setDimmed };

package/dist/graph/TreeView.js

@@ -77,20 +77,20 @@ function JobRow({ jobName, job, isExpanded, onToggle, prefix, state }) {
 						className: "flex min-w-0 items-center gap-1.5",
 						children: [/* @__PURE__ */ jsx("span", {
 							className: "font-mono text-sm text-[var(--theme-app)] truncate",
+							title: jobLabel(jobName, job),
 							children: jobLabel(jobName, job)
 						}), /* @__PURE__ */ jsx(WarningMark, { warnings: marks.under(rowKey(prefix, jobName)) })]
 					}), dependencies.length > 0 && /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-1.5",
+						className: "flex flex-wrap items-center gap-x-1.5 gap-y-1",
 						children: [/* @__PURE__ */ jsx("span", {
-							className: "text-[10px] text-[var(--theme-muted-text-color)]",
+							className: "whitespace-nowrap text-xs text-[var(--theme-muted-text-color)]",
 							children: t.dependsOn
 						}), dependencies.map((dep) => /* @__PURE__ */ jsx("span", {
-							className: "text-[10px] px-1.5 py-0.5 rounded bg-[var(--theme-muted-panel-bg)] text-[var(--theme-muted-text-color)]",
+							className: "whitespace-nowrap text-xs px-1.5 py-0.5 rounded bg-[var(--theme-muted-panel-bg)] text-[var(--theme-muted-text-color)]",
 							children: jobLabel(dep)
 						}, dep))]
 					})]
 				}),
-				/* @__PURE__ */ jsx("div", { className: "flex-1" }),
 				/* @__PURE__ */ jsx(Elapsed, {
 					start: job.startedAt,
 					end: job.completedAt,

package/dist/graph/connectorGeometry.d.ts

@@ -18,11 +18,18 @@ export declare function arcRadius(minRise: number, colGap: number): number;
  * 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;
+/** Which way a graph runs: ranks as columns, left to right, or as rows, top to bottom. */
+export type GraphDirection = 'right' | 'down';
+/** A connector from a node's bottom to a later row's node's top: `connectorPath` turned a quarter,
+ *  with the bends in the gap above `end`'s row. */
+export declare function connectorPathDown(start: Point, end: Point, r: number, rowGap: number): ConnectorPath;
 /** A node's place in its graph level, as laid out. */
 export interface Box {
     x: number;
     y: number;
     width: number;
+    /** Where a graph runs down, its height, which places the connectors leaving its bottom. */
+    height?: number | undefined;
 }
 /** Whether two layouts put every node in the same place. */
 export declare function sameBoxes(a: Map<string, Box>, b: Map<string, Box>): boolean;
@@ -41,4 +48,6 @@ export interface DrawnEdge {
  */
 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[];
+spaced: boolean, deps: Record<string, string[]>, boxes: Map<string, Box>, connectorY: number, 
+/** `down` joins a node's bottom to the top of one in a later row, at their middles. */
+direction?: GraphDirection): DrawnEdge[];

package/dist/graph/connectorGeometry.js

@@ -44,12 +44,44 @@ function connectorPath(start, end, r, colGap) {
 		].join(" ")
 	};
 }
+/** A connector from a node's bottom to a later row's node's top: `connectorPath` turned a quarter,
+*  with the bends in the gap above `end`'s row. */
+function connectorPathDown(start, end, r, rowGap) {
+	const across = connectorPath({
+		x: start.y,
+		y: start.x
+	}, {
+		x: end.y,
+		y: end.x
+	}, r, rowGap);
+	return {
+		d: transposed(across.d),
+		reversed: transposed(across.reversed)
+	};
+}
+function transposed(d) {
+	const parts = d.split(" ");
+	const out = [];
+	for (let i = 0; i < parts.length;) {
+		const op = parts[i++] ?? "";
+		if (op === "A") {
+			const [rx, ry, rot, large, sweep, x, y] = parts.slice(i, i + 7);
+			out.push("A", ry ?? "", rx ?? "", rot ?? "", large ?? "", sweep === "1" ? "0" : "1", y ?? "", x ?? "");
+			i += 7;
+		} else {
+			const [x, y] = parts.slice(i, i + 2);
+			out.push(op, y ?? "", x ?? "");
+			i += 2;
+		}
+	}
+	return out.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;
+		if (!other || other.x !== box.x || other.y !== box.y || other.width !== box.width || other.height !== box.height) return false;
 	}
 	return true;
 }
@@ -58,7 +90,8 @@ function sameBoxes(a, b) {
 * 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) {
+function routeConnectors(cols, spaced, deps, boxes, connectorY, direction = "right") {
+	if (direction === "down") return routeDown(cols, deps, boxes);
 	const heads = (c) => cols[c]?.[0]?.[0];
 	const gapAfter = (c) => {
 		const left = boxes.get(heads(c) ?? "");
@@ -99,5 +132,50 @@ function routeConnectors(cols, spaced, deps, boxes, connectorY) {
 		path: connectorPath(edge.start, edge.end, r, colGap)
 	}));
 }
+function routeDown(rows, deps, boxes) {
+	const top = (row) => Math.min(...row.map(([head]) => boxes.get(head ?? "")?.y ?? Number.POSITIVE_INFINITY));
+	const bottom = (row) => Math.max(...row.map(([head]) => {
+		const box = boxes.get(head ?? "");
+		return box ? box.y + (box.height ?? 0) : Number.NEGATIVE_INFINITY;
+	}));
+	let rowGap = Number.POSITIVE_INFINITY;
+	for (let r = 0; r + 1 < rows.length; r++) {
+		const gap = top(rows[r + 1] ?? []) - bottom(rows[r] ?? []);
+		if (Number.isFinite(gap)) rowGap = Math.min(rowGap, gap);
+	}
+	if (!Number.isFinite(rowGap)) rowGap = 32;
+	const ends = [];
+	let minShift = Number.POSITIVE_INFINITY;
+	for (const row of rows) for (const [to] of row) {
+		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: Math.round(source.x + source.width / 2),
+				y: source.y + (source.height ?? 0) - 2
+			};
+			const middle = Math.round(target.x + target.width / 2);
+			const end = {
+				x: Math.abs(middle - start.x) <= 8 ? start.x : middle,
+				y: target.y + 2
+			};
+			const shift = Math.abs(end.x - start.x);
+			if (shift > 0) minShift = Math.min(minShift, shift);
+			ends.push({
+				from,
+				to,
+				start,
+				end
+			});
+		}
+	}
+	const r = arcRadius(minShift, rowGap);
+	return ends.map((edge) => ({
+		...edge,
+		path: connectorPathDown(edge.start, edge.end, r, rowGap)
+	}));
+}
 //#endregion
-export { arcRadius, connectorPath, routeConnectors, sameBoxes };
+export { arcRadius, connectorPath, connectorPathDown, routeConnectors, sameBoxes };

package/dist/graph/viewport.d.ts

@@ -31,13 +31,37 @@ export declare function fitMargin(panel: {
     width: number;
     height: number;
 }): number;
+/** How a fit may differ from showing everything. */
+export interface FitOptions {
+    /** The farthest out it goes: a graph too big to read at this scale shows from its start,
+     *  its top left, for the rest to be panned to. */
+    minScale?: number | undefined;
+    /** Room kept clear at the panel's top, such as under a bar over it, when the fit stops at
+     *  `minScale`. */
+    top?: number | undefined;
+    /** Fits the graph's width alone, for one that runs down the panel to be panned along: centered
+     *  across the panel, from its top below `top`. */
+    width?: boolean | undefined;
+}
 /** The view that shows all of `bounds` in a panel from its top left, no closer than a fit comes. */
 export declare function fitView(bounds: Bounds, panel: {
     width: number;
     height: number;
-}): View | null;
+}, { minScale, top, width: byWidth }?: FitOptions): View | null;
 /** The least shift that brings [start, end] inside [low, high]; none when it can't all fit, so the view stays. */
 export declare function intoView(start: number, end: number, low: number, high: number): number;
+/** How much of a graph a pan or pinch leaves in its panel, at the least: half the panel's shorter
+ *  side, or all of a graph smaller than that. */
+export declare function reachKept(panel: {
+    width: number;
+    height: number;
+}): number;
+/** The least shift that brings at least `keep` of `graph` back inside `panel` on each axis, so a
+ *  pan or a fling never leaves the graph out of reach; none while that much already shows. */
+export declare function intoReach(graph: Rect, panel: Rect, keep: number): {
+    dx: number;
+    dy: number;
+};
 /** A box on screen, as `getBoundingClientRect` gives it. */
 export interface Rect {
     left: number;

package/dist/graph/viewport.js

@@ -34,15 +34,18 @@ function fitMargin(panel) {
 	return Math.min(panel.width, panel.height) * .05;
 }
 /** The view that shows all of `bounds` in a panel from its top left, no closer than a fit comes. */
-function fitView(bounds, panel) {
+function fitView(bounds, panel, { minScale = MIN_SCALE, top = 0, width: byWidth = false } = {}) {
 	const width = bounds.maxX - bounds.minX;
 	const height = bounds.maxY - bounds.minY;
 	if (width <= 0 || height <= 0) return null;
 	const margin = fitMargin(panel);
-	const scale = Math.max(MIN_SCALE, Math.min((panel.width - margin * 2) / width, (panel.height - margin * 2) / height, FIT_MAX_SCALE));
+	const fit = Math.min((panel.width - margin * 2) / width, byWidth ? FIT_MAX_SCALE : (panel.height - margin * 2) / height, FIT_MAX_SCALE);
+	const floor = Math.min(Math.max(MIN_SCALE, minScale), FIT_MAX_SCALE);
+	const scale = Math.max(floor, fit);
+	const y = fit < floor || byWidth ? Math.max(margin, top + margin) : margin;
 	return {
-		x: margin - bounds.minX * scale,
-		y: margin - bounds.minY * scale,
+		x: (byWidth ? (panel.width - width * scale) / 2 : margin) - bounds.minX * scale,
+		y: y - bounds.minY * scale,
 		scale
 	};
 }
@@ -52,6 +55,25 @@ function intoView(start, end, low, high) {
 	if (start < low) return low - start;
 	return end > high ? high - end : 0;
 }
+/** How much of a graph a pan or pinch leaves in its panel, at the least: half the panel's shorter
+*  side, or all of a graph smaller than that. */
+function reachKept(panel) {
+	return Math.min(panel.width, panel.height) / 2;
+}
+/** The least shift that brings at least `keep` of `graph` back inside `panel` on each axis, so a
+*  pan or a fling never leaves the graph out of reach; none while that much already shows. */
+function intoReach(graph, panel, keep) {
+	const axis = (start, size, low, span) => {
+		if (size <= 0) return 0;
+		const least = Math.min(keep, size, span);
+		if (start + size < low + least) return low + least - (start + size);
+		return start > low + span - least ? low + span - least - start : 0;
+	};
+	return {
+		dx: axis(graph.left, graph.width, panel.left, panel.width),
+		dy: axis(graph.top, graph.height, panel.top, panel.height)
+	};
+}
 /** The smallest box around all of `rects`, which must not be empty. */
 function enclosing(rects) {
 	const left = Math.min(...rects.map((r) => r.left));
@@ -114,4 +136,4 @@ function viewShowing(region, target, visible, origin, view, readable) {
 	};
 }
 //#endregion
-export { FIT_MAX_SCALE, MIN_SCALE, ZOOM_STEP, enclosing, fitMargin, fitView, intoView, viewShowing, wheelFactor, zoomAround, zoomLimit };
+export { FIT_MAX_SCALE, MIN_SCALE, ZOOM_STEP, enclosing, fitMargin, fitView, intoReach, intoView, reachKept, viewShowing, wheelFactor, zoomAround, zoomLimit };

package/dist/list/ListTable.d.ts

@@ -36,7 +36,10 @@ export declare const STRETCHED_LINK_ROW = "relative [&_:is(a,button,input,label,
 export declare function NameCell({ icon, iconTile, name, subtitle, href, badge, title, children, }: {
     icon: ReactNode;
     /** Sets the icon in a small bordered tile, so rows whose icons differ in
-     *  weight, such as kinds of token or runner, still line up. */
+     *  weight, such as kinds of token or runner, still line up. The 28px tile
+     *  sits beside a name and its subtitle; a row with no subtitle keeps its
+     *  icon bare, centered where the tile would be, so a one-line row stays
+     *  as short as its text and its name still lines up with tiled rows. */
     iconTile?: boolean | undefined;
     name: string;
     subtitle?: string | undefined;

package/dist/list/ListTable.js

@@ -45,9 +45,12 @@ function NameCell({ icon, iconTile = false, name, subtitle, href, badge, title,
 	const stretch = useContext(StretchRowLinkContext);
 	const hasIcon = icon !== null && icon !== void 0 && icon !== false;
 	const columns = hasIcon ? "col-span-2 grid grid-cols-subgrid items-center" : "flex items-center";
-	const inner = /* @__PURE__ */ jsxs(Fragment$1, { children: [hasIcon && (iconTile ? /* @__PURE__ */ jsx("span", {
+	const inner = /* @__PURE__ */ jsxs(Fragment$1, { children: [hasIcon && (iconTile && subtitle ? /* @__PURE__ */ jsx("span", {
 		className: "flex size-7 shrink-0 items-center justify-center rounded-md border border-(--theme-border) text-(--theme-muted-text-color) [&>svg]:size-3.5",
 		children: icon
+	}) : iconTile ? /* @__PURE__ */ jsx("span", {
+		className: "flex w-7 shrink-0 items-center justify-center text-(--theme-muted-text-color) [&>svg]:size-3.5",
+		children: icon
 	}) : icon), /* @__PURE__ */ jsxs("div", {
 		className: "min-w-0",
 		children: [/* @__PURE__ */ jsxs("div", {