@parallelworks/ui 0.82.2 → 0.83.1

package/dist/components/CodeBlock.d.ts

@@ -31,10 +31,13 @@ export interface CodeBlockProps {
     /** The code is still arriving: highlighting is not cached, and the block
      *  keeps its end in view while it is scrolled there. */
     streaming?: boolean | undefined;
+    /** On a phone, reaches past the host's content padding (`p-4`) to the
+     *  container's edges, without corners, so long lines get the screen's width. */
+    bleed?: boolean | undefined;
     className?: string | undefined;
 }
 /** Code to read on a page, such as a workflow's YAML: highlighted in the
  *  theme's code colors, with numbered lines, a copy button and, given a
  *  `filename`, a download button. Markdown's fenced code renders as one, so
  *  both read the same. */
-export declare function CodeBlock({ code, language, title, label, filename, headerActions, copy, lineNumbers, startLine, wrap, fill, maxHeight, streaming, className, }: CodeBlockProps): import("react").JSX.Element;
+export declare function CodeBlock({ code, language, title, label, filename, headerActions, copy, lineNumbers, startLine, wrap, fill, maxHeight, streaming, bleed, className, }: CodeBlockProps): import("react").JSX.Element;

package/dist/components/CodeBlock.js

@@ -66,7 +66,7 @@ function downloadText(text, name) {
 *  theme's code colors, with numbered lines, a copy button and, given a
 *  `filename`, a download button. Markdown's fenced code renders as one, so
 *  both read the same. */
-function CodeBlock({ code, language = "", title, label, filename, headerActions, copy = true, lineNumbers, startLine = 1, wrap = false, fill = false, maxHeight, streaming = false, className }) {
+function CodeBlock({ code, language = "", title, label, filename, headerActions, copy = true, lineNumbers, startLine = 1, wrap = false, fill = false, maxHeight, streaming = false, bleed = false, className }) {
 	const { common: t } = useStrings();
 	const source = code.endsWith("\n") ? code.slice(0, -1) : code;
 	const lines = useMemo(() => source.split("\n"), [source]);
@@ -100,7 +100,7 @@ function CodeBlock({ code, language = "", title, label, filename, headerActions,
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		"data-code-block": "",
-		className: cx("not-prose flex flex-col overflow-hidden rounded-xl bg-(--theme-code-bg) text-(--theme-code-text) shadow-[0_0_0_1px_color-mix(in_oklab,var(--theme-app)_8%,transparent)]", fill && "h-full min-h-0", className),
+		className: cx("not-prose flex flex-col overflow-hidden rounded-xl bg-(--theme-code-bg) text-(--theme-code-text) shadow-[0_0_0_1px_color-mix(in_oklab,var(--theme-app)_8%,transparent)]", fill && "h-full min-h-0", bleed && "max-sm:-mx-4 max-sm:rounded-none", className),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex h-9 shrink-0 items-center gap-2 pr-1.5 pl-4",
 			children: [/* @__PURE__ */ jsx("div", {

package/dist/components/Meter.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 /** A bar's color: the theme's accent, a status, or muted for something stopped. */
 export type BarTone = 'accent' | 'info' | 'success' | 'warning' | 'error' | 'muted';
 declare const trackHeight: {
@@ -32,7 +32,7 @@ export declare function levelTone(value: number, warnAt: number, errorAt: number
 /** How full something is, such as storage used or a quota spent: a reading,
  *  not a task under way (that's `ProgressBar`). The bar is blue, then turns
  *  amber, then red, as it passes `warnAt` and `errorAt`; `tone` overrides that. */
-export declare function Meter({ value, min, max, warnAt, errorAt, tone, okTone, format, showValue, valueText, getAriaValueText, minFill, locale, label, 'aria-label': ariaLabel, detail, size, trackClassName, className, }: BarProps & {
+export declare function Meter({ value, min, max, warnAt, errorAt, tone, okTone, format, showValue, valueText, getAriaValueText, minFill, animate, locale, label, 'aria-label': ariaLabel, detail, size, trackClassName, className, }: BarProps & {
     value: number;
     min?: number;
     max?: number;
@@ -54,6 +54,10 @@ export declare function Meter({ value, min, max, warnAt, errorAt, tone, okTone,
     /** The narrowest the fill draws for a value above `min`, as a percent of the
      *  track, so a small reading still shows. */
     minFill?: number | undefined;
+    /** Grows the fill in from empty when the bar first shows, and eases it to each new value, for a
+     *  reading that arrives with the page, such as a dashboard's. Still for anyone who asks for
+     *  less motion. */
+    animate?: boolean | undefined;
 }): import("react").JSX.Element;
 /** A further stretch of a progress bar, drawn after its value, such as work
  *  started but not yet done. */

package/dist/components/Meter.js

@@ -1,6 +1,7 @@
 import { cx } from "../cx.js";
 import { toneFill } from "./tone.js";
 import { Tooltip } from "./Tooltip.js";
+import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Meter } from "@base-ui/react/meter";
 import { Progress } from "@base-ui/react/progress";
@@ -26,6 +27,21 @@ var trackBaseClassName = "w-full overflow-hidden rounded-full bg-(--theme-border
 function trackClasses(size, end, own) {
 	return cx(trackBaseClassName, trackHeight[size], end && (own ? "shrink-0" : "min-w-0 flex-1"), own);
 }
+function useGrown(grow) {
+	const [grown, setGrown] = useState(!grow);
+	useEffect(() => {
+		if (grown) return;
+		let inner = 0;
+		const outer = requestAnimationFrame(() => {
+			inner = requestAnimationFrame(() => setGrown(true));
+		});
+		return () => {
+			cancelAnimationFrame(outer);
+			cancelAnimationFrame(inner);
+		};
+	}, [grown]);
+	return grown;
+}
 /** The tone for `value` against a warning and an error level, for a measure
 *  that's worse the higher it reads; `okTone` below the warning. */
 function levelTone(value, warnAt, errorAt, okTone = "info") {
@@ -34,7 +50,8 @@ function levelTone(value, warnAt, errorAt, okTone = "info") {
 /** How full something is, such as storage used or a quota spent: a reading,
 *  not a task under way (that's `ProgressBar`). The bar is blue, then turns
 *  amber, then red, as it passes `warnAt` and `errorAt`; `tone` overrides that. */
-function Meter$1({ value, min = 0, max = 100, warnAt = 80, errorAt = 90, tone, okTone = "info", format, showValue = "beside", valueText, getAriaValueText, minFill = 0, locale, label, "aria-label": ariaLabel, detail, size = "md", trackClassName, className }) {
+function Meter$1({ value, min = 0, max = 100, warnAt = 80, errorAt = 90, tone, okTone = "info", format, showValue = "beside", valueText, getAriaValueText, minFill = 0, animate = false, locale, label, "aria-label": ariaLabel, detail, size = "md", trackClassName, className }) {
+	const grown = useGrown(animate);
 	const clamped = Math.min(Math.max(value, min), max);
 	const fill = fillClassName[tone ?? levelTone(clamped, warnAt, errorAt, okTone)];
 	const end = showValue === "end";
@@ -45,8 +62,9 @@ function Meter$1({ value, min = 0, max = 100, warnAt = 80, errorAt = 90, tone, o
 	const track = /* @__PURE__ */ jsx(Meter.Track, {
 		className: trackClasses(size, end, trackClassName),
 		children: /* @__PURE__ */ jsx(Meter.Indicator, {
-			className: cx("h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none", fill),
-			style: minFill > 0 && clamped > min ? { minWidth: `${minFill}%` } : void 0
+			"data-growing": grown ? void 0 : "",
+			className: cx("h-full rounded-full motion-reduce:transition-none", animate ? "transition-[width,min-width] delay-150 duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)]" : "transition-[width] duration-300", fill),
+			style: !grown ? { width: 0 } : minFill > 0 && clamped > min ? { minWidth: `${minFill}%` } : void 0
 		})
 	});
 	const share = formatShare(clamped, min, max, format, locale);

package/dist/components/Pagination.js

@@ -59,7 +59,7 @@ function Pagination({ page, pageSize, total, hasNext, onPageChange, pageHref, pa
 	const position = summary ?? (known ? t.pager(start, end, pastCap ? end : total, pastCap) : null);
 	return /* @__PURE__ */ jsxs("nav", {
 		"aria-label": t.pagination,
-		className: cx("flex h-10 shrink-0 items-center justify-between gap-3 px-2.5", className),
+		className: cx("flex h-8 shrink-0 items-center justify-between gap-3 px-2.5", className),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 flex-1 items-center gap-3 text-xs text-(--theme-muted-text-color)",
 			children: [position && /* @__PURE__ */ jsx("span", {
@@ -118,22 +118,27 @@ function Pagination({ page, pageSize, total, hasNext, onPageChange, pageHref, pa
 function PageStep({ to, enabled, label, icon, onPageChange, pageHref }) {
 	if (pageHref && enabled) return /* @__PURE__ */ jsx(IconButton, {
 		variant: "outline",
+		size: "xs",
+		className: STEP_TOUCH,
 		icon,
 		label,
 		href: pageHref(to)
 	});
 	return /* @__PURE__ */ jsx(IconButton, {
 		variant: "outline",
+		size: "xs",
+		className: STEP_TOUCH,
 		icon,
 		label,
 		disabled: !enabled,
 		onClick: () => onPageChange?.(to)
 	});
 }
+var STEP_TOUCH = "pointer-coarse:size-8";
 var numberClassName = cx(buttonClasses({
 	variant: "outline",
-	size: "sm"
-}), "min-w-7 px-1.5 tabular-nums aria-[current=page]:border-(--theme-link) aria-[current=page]:bg-(--theme-accent-subtle) aria-[current=page]:text-(--theme-app)");
+	size: "xs"
+}), "min-w-6 px-1 tabular-nums pointer-coarse:h-8 pointer-coarse:min-w-8 aria-[current=page]:border-(--theme-link) aria-[current=page]:bg-(--theme-accent-subtle) aria-[current=page]:text-(--theme-app)");
 function PageNumber({ to, current, label, onPageChange, pageHref }) {
 	const number = formatInteger(to + 1, useLocale());
 	const props = {

package/dist/components/Table.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 /** Which way a column sorts, as `aria-sort` names it. */
 export type SortDirection = 'ascending' | 'descending' | 'none';
-/** `comfortable` gives each row room; `compact` fits a short key and value
- *  list; `dense` sets small type in tight rows, for a table inside a card or
- *  a panel of figures. */
+/** `comfortable` gives each row room; `compact` fits many rows in little
+ *  height, such as a key and value list or a dashboard card's runs; `dense`
+ *  sets small type in tight rows, for a panel of figures. */
 export type TableDensity = 'comfortable' | 'compact' | 'dense';
 interface ItemProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
     /** Lets the text wrap; by default a cell keeps to one line. */

package/dist/components/Table.js

@@ -9,20 +9,25 @@ var DensityContext = createContext("comfortable");
 var CapsContext = createContext(true);
 var cellY = {
 	comfortable: "py-4",
-	compact: "py-1.5 text-sm",
+	compact: "h-8 py-0 text-sm",
 	dense: "py-1 text-xs"
 };
+var wrapY = {
+	comfortable: false,
+	compact: "py-1",
+	dense: false
+};
 var headerY = {
 	comfortable: "py-3",
-	compact: "py-2",
-	dense: "py-1.5"
+	compact: "py-1.5",
+	dense: "py-1"
 };
 var cellX = "px-3";
 function Item({ wrap = false, children, className, ...tdProps }) {
 	const density = useContext(DensityContext);
 	return /* @__PURE__ */ jsx("td", {
 		...tdProps,
-		className: cx(cellX, cellY[density], !wrap && "whitespace-nowrap", className),
+		className: cx(cellX, cellY[density], wrap ? wrapY[density] : "whitespace-nowrap", className),
 		children
 	});
 }

package/dist/components/ToggleGroup.js

@@ -61,10 +61,10 @@ function Chip({ value, label, icon, count, disabled, testId, size }) {
 		value,
 		disabled,
 		"data-testid": testId,
-		className: cx("group aria-pressed:bg-(--theme-accent-subtle)", buttonClasses({
+		className: cx(buttonClasses({
 			variant: "outline",
 			size
-		})),
+		}), "group focus-visible:-outline-offset-2 aria-pressed:bg-(--theme-accent-subtle)"),
 		children: [
 			icon && /* @__PURE__ */ jsx("span", {
 				className: "inline-flex shrink-0 transition-opacity group-not-aria-pressed:opacity-55",

package/dist/components/Tooltip.d.ts

@@ -28,4 +28,4 @@ export interface TooltipProps extends Omit<BaseTooltip.Trigger.Props, 'content'
 /** A visual hint for sighted pointer and keyboard users. The anchor still needs
  *  its own accessible name; `describesAnchor` also gives assistive technology the
  *  hint. Use InfoTip for content everyone must reach, such as on a touch screen. */
-export declare function Tooltip({ content, children, side, shortcut, disabled, overflowOnly, describesAnchor, ...anchorProps }: TooltipProps): import("react").JSX.Element;
+export declare function Tooltip({ content, children, side, shortcut, disabled, overflowOnly, describesAnchor, ref, ...anchorProps }: TooltipProps): import("react").JSX.Element;

package/dist/components/Tooltip.js

@@ -1,7 +1,7 @@
 import { positionerClassName, tipClassName } from "./floating.js";
 import { usePopupContainer } from "./popupContainer.js";
 import { Kbd } from "./Kbd.js";
-import { cloneElement, createContext, use, useEffect, useId, useState } from "react";
+import { cloneElement, createContext, use, useCallback, useEffect, useId, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip } from "@base-ui/react/tooltip";
 //#region src/components/Tooltip.tsx
@@ -82,13 +82,36 @@ function useRestAfterPopup(anchor) {
 	}, [anchor]);
 	return resting;
 }
+/** Sets a ref and returns how to unset it: a callback ref's own cleanup, or a call with null. */
+function assignRef(ref, node) {
+	if (typeof ref === "function") {
+		const cleanup = ref(node);
+		return typeof cleanup === "function" ? cleanup : () => ref(null);
+	}
+	if (ref) {
+		ref.current = node;
+		return () => {
+			ref.current = null;
+		};
+	}
+	return () => {};
+}
 /** A visual hint for sighted pointer and keyboard users. The anchor still needs
 *  its own accessible name; `describesAnchor` also gives assistive technology the
 *  hint. Use InfoTip for content everyone must reach, such as on a touch screen. */
-function Tooltip$1({ content, children, side = "top", shortcut, disabled = false, overflowOnly = false, describesAnchor = false, ...anchorProps }) {
+function Tooltip$1({ content, children, side = "top", shortcut, disabled = false, overflowOnly = false, describesAnchor = false, ref, ...anchorProps }) {
 	const handle = use(TooltipHandleContext);
 	const descriptionId = useId();
 	const [anchorElement, setAnchorElement] = useState(null);
+	const anchorRef = useCallback((node) => {
+		if (!node) return;
+		setAnchorElement(node);
+		const unset = assignRef(ref, node);
+		return () => {
+			setAnchorElement(null);
+			unset();
+		};
+	}, [ref]);
 	const resting = useRestAfterPopup(anchorElement);
 	const payload = {
 		content,
@@ -107,7 +130,7 @@ function Tooltip$1({ content, children, side = "top", shortcut, disabled = false
 		...!handle && anchorProps.delay === void 0 && { delay: OPEN_DELAY },
 		handle: handle ?? void 0,
 		payload,
-		ref: setAnchorElement,
+		ref: anchorRef,
 		disabled: disabled || !content || resting,
 		"data-overflow-only": overflowOnly || void 0,
 		render: described ? cloneElement(anchor, { "aria-describedby": describedBy }) : children

package/dist/components/buttonClasses.js

@@ -1,6 +1,6 @@
 import { cx } from "../cx.js";
 //#region src/components/buttonClasses.ts
-var base = "relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md font-medium no-underline transition-[color,background-color,border-color,box-shadow,translate] duration-150 hover:not-disabled:not-aria-disabled:-translate-y-px hover:not-disabled:not-aria-disabled:shadow-(--theme-shadow-sm) active:not-disabled:not-aria-disabled:translate-y-0 active:not-disabled:not-aria-disabled:shadow-none motion-reduce:hover:not-disabled:not-aria-disabled:translate-y-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-focus) disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
+var base = "relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md font-medium no-underline transition-[color,background-color,border-color,box-shadow,translate] duration-150 hover:not-disabled:not-aria-disabled:not-[[aria-pressed]]:-translate-y-px hover:not-disabled:not-aria-disabled:not-[[aria-pressed]]:shadow-(--theme-shadow-sm) active:not-disabled:not-aria-disabled:translate-y-0 active:not-disabled:not-aria-disabled:shadow-none motion-reduce:hover:not-disabled:not-aria-disabled:translate-y-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-focus) disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
 var variants = {
 	primary: "bg-(--theme-accent) text-(--theme-accent-text) hover:not-disabled:not-aria-disabled:bg-(--theme-accent-hover)",
 	secondary: "border border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-app) hover:not-disabled:not-aria-disabled:bg-(--theme-hover)",

package/dist/graph/DependencyGraph.d.ts

@@ -21,7 +21,7 @@ interface GraphRun {
      *  marked on each job and step they're about, which matters most for one skipped without a log. */
     warnings?: readonly RunWarning[] | null | undefined;
 }
-export default function DependencyGraph({ run, preview, removeBorder, viewMode, setViewMode, layout, editor, yamlJobs, inputs, workflow, fixedHeight, openStep, onCloseLog, stickySidebar, }: {
+export default function DependencyGraph({ run, preview, removeBorder, viewMode, setViewMode, layout, editor, yamlJobs, inputs, workflow, fixedHeight, openStep, onCloseLog, stickySidebar, bleed, }: {
     run: GraphRun;
     preview?: boolean;
     removeBorder?: boolean | undefined;
@@ -44,6 +44,9 @@ export default function DependencyGraph({ run, preview, removeBorder, viewMode,
     onCloseLog?: (() => void) | undefined;
     /** Pins the job list as the page scrolls, under whatever the page already pins at its top. */
     stickySidebar?: boolean | undefined;
+    /** On a phone, the jobs' panel, graph or list, reaches past the host's content padding (`p-4`) to
+     *  the container's edges, without side borders or corners, so a job's row has the screen's width. */
+    bleed?: boolean | undefined;
 }): import("react").JSX.Element | undefined;
 export declare function DependencyGraphPreview(inputs: {
     yml?: Record<string, unknown>;

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,