@parallelworks/ui 0.41.0 → 0.43.0

package/dist/form/useFieldValue.js

@@ -0,0 +1,20 @@
+import { useCallback } from "react";
+import { useController, useFormContext } from "react-hook-form";
+//#region src/form/useFieldValue.ts
+/**
+* A field's value in the form, and how the person changes it. The field renders again when its own
+* value changes, not when another field's does. A change marks the field touched as well as dirty: the
+* form stops writing a computed default into a field once the person has set it, and a pick from a list
+* sets a value without the blur that would otherwise mark it.
+*/
+function useFieldValue(name) {
+	const { field } = useController({ name });
+	const { setValue } = useFormContext();
+	const change = useCallback((value) => setValue(name, value, {
+		shouldDirty: true,
+		shouldTouch: true
+	}), [name, setValue]);
+	return [field.value, change];
+}
+//#endregion
+export { useFieldValue };

package/dist/form/useParsedOpts.d.ts

@@ -1,5 +1,7 @@
 import type { WorkflowVariables } from '../engine.js';
 /**
- * useMemo won't work here — Formik values changes on every keystroke, so this hook extracts which inputs.* keys the schema references and re-parses only when those change. Defaults `userVars`/`secretKeys` to empty — callers in React scope should pass them from `useUserVars()` so the parser leaves `${{ var.SECRET }}` literal during template eval (otherwise the recursive substitution turns `"https://${{ var.PAT }}@host/"` into `"https://@host/"`).
+ * Parses a schema against the form's values, again only when an input it reads changes: a keystroke
+ * elsewhere in the form gets the last parse back. A parse keeps each part of the last one it equals, so
+ * a field whose schema the change left alone keeps its identity. Defaults `userVars`/`secretKeys` to empty — callers in React scope should pass them from `useUserVars()` so the parser leaves `${{ var.SECRET }}` literal during template eval (otherwise the recursive substitution turns `"https://${{ var.PAT }}@host/"` into `"https://@host/"`).
  */
 export declare function useParsedOpts<T extends object = Record<string, unknown>>(rawOptions: T, values: Record<string, unknown>, organizationVariables: WorkflowVariables | undefined, userVars?: Record<string, string>, secretKeys?: string[], remoteVars?: Record<string, string | undefined>): T;

package/dist/form/useParsedOpts.js

@@ -1,11 +1,13 @@
 import { useWorkflowEngine } from "../components/Provider.js";
+import { shareEqual } from "./utils/shareEqual.js";
 import { useRef } from "react";
-import deepEqual from "fast-deep-equal";
 //#region src/form/useParsedOpts.ts
 var EMPTY_VARS = {};
 var EMPTY_KEYS = [];
 /**
-* useMemo won't work here — Formik values changes on every keystroke, so this hook extracts which inputs.* keys the schema references and re-parses only when those change. Defaults `userVars`/`secretKeys` to empty — callers in React scope should pass them from `useUserVars()` so the parser leaves `${{ var.SECRET }}` literal during template eval (otherwise the recursive substitution turns `"https://${{ var.PAT }}@host/"` into `"https://@host/"`).
+* Parses a schema against the form's values, again only when an input it reads changes: a keystroke
+* elsewhere in the form gets the last parse back. A parse keeps each part of the last one it equals, so
+* a field whose schema the change left alone keeps its identity. Defaults `userVars`/`secretKeys` to empty — callers in React scope should pass them from `useUserVars()` so the parser leaves `${{ var.SECRET }}` literal during template eval (otherwise the recursive substitution turns `"https://${{ var.PAT }}@host/"` into `"https://@host/"`).
 */
 function useParsedOpts(rawOptions, values, organizationVariables, userVars = EMPTY_VARS, secretKeys = EMPTY_KEYS, remoteVars = EMPTY_VARS) {
 	const engine = useWorkflowEngine();
@@ -18,8 +20,9 @@ function useParsedOpts(rawOptions, values, organizationVariables, userVars = EMP
 		converted: {},
 		inputDeps: /* @__PURE__ */ new Set(),
 		hasExpressions: false,
-		relevantSnapshot: {},
-		result: null
+		relevant: "",
+		result: null,
+		shared: null
 	}).current;
 	if (rawOptions !== c.rawOptions) {
 		c.rawOptions = rawOptions;
@@ -36,15 +39,8 @@ function useParsedOpts(rawOptions, values, organizationVariables, userVars = EMP
 		c.remoteVars = remoteVars;
 		c.result = null;
 	}
-	if (c.result !== null) {
-		if (c.inputDeps.size === 0) return c.result;
-		let inputsChanged = false;
-		for (const key of c.inputDeps) if (!deepEqual(values[key], c.relevantSnapshot[key])) {
-			inputsChanged = true;
-			break;
-		}
-		if (!inputsChanged) return c.result;
-	}
+	const relevant = JSON.stringify([...c.inputDeps].map((key) => values[key]));
+	if (c.result !== null && relevant === c.relevant) return c.result;
 	const parsed = engine.evaluate({
 		inputs: values,
 		obj: c.converted,
@@ -53,10 +49,9 @@ function useParsedOpts(rawOptions, values, organizationVariables, userVars = EMP
 		secretKeys,
 		remoteVars
 	});
-	c.result = parsed;
-	c.relevantSnapshot = {};
-	for (const key of c.inputDeps) c.relevantSnapshot[key] = values[key];
-	return parsed;
+	c.result = c.shared = shareEqual(c.shared, parsed);
+	c.relevant = relevant;
+	return c.result;
 }
 //#endregion
 export { useParsedOpts };

package/dist/form/utils/dependentOptions.d.ts

@@ -1,6 +1,10 @@
-/** Options for a field whose list is keyed by another field's value: with
- * depends_on, the list follows whatever is currently chosen at that path. */
-export declare function dependentOptions<T>(options: T[] | Record<string, T[]>, dependsOn: string | undefined, values: Record<string, unknown>): {
-    options: T[];
+/** Options for a field whose list is keyed by another field's value: the list follows whatever is
+ * chosen there. A plain list is its own options; a keyed one offers nothing until that field is set. */
+export declare function dependentOptions<T>(options: readonly T[] | Record<string, T[]>, parentValue: unknown): readonly T[];
+/** The value of the field at `path`, rendering again only when it changes; undefined without a path. */
+export declare function useFieldAt(path: string | undefined): unknown;
+/** A field's options and the value of the field its `depends_on` names, which keys them. */
+export declare function useDependentOptions<T>(options: readonly T[] | Record<string, T[]>, dependsOn: string | undefined): {
+    options: readonly T[];
     parentValue: unknown;
 };

package/dist/form/utils/dependentOptions.js

@@ -1,21 +1,29 @@
-import { getValueUsingPath } from "./getValueUsingPath.js";
+import { useMemo } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
 //#region src/form/utils/dependentOptions.ts
-/** Options for a field whose list is keyed by another field's value: with
-* depends_on, the list follows whatever is currently chosen at that path. */
-function dependentOptions(options, dependsOn, values) {
-	if (Array.isArray(options)) return {
-		options,
-		parentValue: void 0
-	};
-	const parentValue = dependsOn ? getValueUsingPath(values, dependsOn) : void 0;
-	if (parentValue === void 0 || parentValue === null) return {
-		options: [],
-		parentValue
-	};
-	return {
-		options: options[String(parentValue)] ?? [],
+/** Options for a field whose list is keyed by another field's value: the list follows whatever is
+* chosen there. A plain list is its own options; a keyed one offers nothing until that field is set. */
+function dependentOptions(options, parentValue) {
+	if (Array.isArray(options)) return options;
+	if (parentValue === void 0 || parentValue === null) return [];
+	return options[String(parentValue)] ?? [];
+}
+/** The value of the field at `path`, rendering again only when it changes; undefined without a path. */
+function useFieldAt(path) {
+	const { control } = useFormContext();
+	return useWatch({
+		control,
+		name: path ?? "",
+		disabled: !path
+	});
+}
+/** A field's options and the value of the field its `depends_on` names, which keys them. */
+function useDependentOptions(options, dependsOn) {
+	const parentValue = useFieldAt(dependsOn);
+	return useMemo(() => ({
+		options: dependentOptions(options, parentValue),
 		parentValue
-	};
+	}), [options, parentValue]);
 }
 //#endregion
-export { dependentOptions };
+export { dependentOptions, useDependentOptions, useFieldAt };

package/dist/form/utils/fieldItems.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+import { type ComboboxItem, type ComboboxItems } from '../../components/comboboxItems.js';
+/** A choice as workflow YAML writes it, or as a host's option hook builds one. */
+export interface FieldOptionItem<Value = string> {
+    label: string;
+    value: Value;
+    description?: string | undefined;
+    /** The older key for description. */
+    secondaryLabel?: string | undefined;
+    /** What choosing this sets the field's `secondaryField` to. */
+    secondaryValue?: unknown;
+    disabled?: boolean | undefined;
+    icon?: ReactNode;
+}
+/** Choices under a heading. */
+export interface FieldOptionGroup<Value = string> {
+    category?: string | undefined;
+    options: readonly (FieldOptionItem<Value> | string)[];
+}
+/** A dropdown option: a bare string is a choice labelled by its value. */
+export type FieldOption<Value = string> = string | FieldOptionItem<Value> | FieldOptionGroup<Value>;
+/** A picker item that also sets other fields when chosen, through `secondaryField`. */
+export type ChoiceItem<Value = unknown> = ComboboxItem<Value> & {
+    secondaryValue?: unknown;
+};
+/** Options as picker items, groups kept where they sit. */
+export declare function toFieldItems<Value>(options: readonly FieldOption<Value>[]): ComboboxItems<Value>;
+/** Every item, groups flattened. */
+export declare const leaves: (items: ComboboxItems<unknown>) => (ChoiceItem | string)[];
+export declare const itemValue: (item: ChoiceItem | string) => unknown;
+/** The item among `items` holding `value`, with what it sets through `secondaryField`. */
+export declare function findChoice(items: ComboboxItems<unknown>, value: unknown): ChoiceItem | undefined;

package/dist/form/utils/fieldItems.js

@@ -0,0 +1,32 @@
+import { comboboxLeaves } from "../../components/comboboxItems.js";
+import { dequal } from "dequal";
+//#region src/form/utils/fieldItems.ts
+var isGroup = (option) => typeof option === "object" && "options" in option;
+function toItem(option) {
+	if (typeof option === "string") return option;
+	const { label, value, description, secondaryLabel, secondaryValue, disabled, icon } = option;
+	return {
+		label,
+		value,
+		description: description ?? secondaryLabel,
+		disabled,
+		icon,
+		...secondaryValue === void 0 ? {} : { secondaryValue }
+	};
+}
+/** Options as picker items, groups kept where they sit. */
+function toFieldItems(options) {
+	return options.map((option) => isGroup(option) ? {
+		label: option.category ?? "",
+		items: option.options.map(toItem)
+	} : toItem(option));
+}
+/** Every item, groups flattened. */
+var leaves = (items) => comboboxLeaves(items);
+var itemValue = (item) => typeof item === "string" ? item : item.value;
+/** The item among `items` holding `value`, with what it sets through `secondaryField`. */
+function findChoice(items, value) {
+	return leaves(items).find((item) => typeof item === "object" && dequal(item.value, value));
+}
+//#endregion
+export { findChoice, itemValue, leaves, toFieldItems };

package/dist/form/utils/fieldPath.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A field's path as the form store names it: `hosts[0].cpus` becomes `hosts.0.cpus`. A workflow writes
+ * rows with brackets, but the store tells a field of a change by a path it starts, so a row's fields
+ * hear a change to their list only when both name it with dots.
+ */
+export declare function fieldPath(path: string): string;
+/** The index of the innermost row a path is in, or undefined outside every list. */
+export declare function rowIndexOf(path: string): number | undefined;
+/** A list's `[index]` placeholder in a path, filled with the row a field is in. */
+export declare function atIndex(path: string, index: number | undefined): string;

package/dist/form/utils/fieldPath.js

@@ -0,0 +1,20 @@
+//#region src/form/utils/fieldPath.ts
+/**
+* A field's path as the form store names it: `hosts[0].cpus` becomes `hosts.0.cpus`. A workflow writes
+* rows with brackets, but the store tells a field of a change by a path it starts, so a row's fields
+* hear a change to their list only when both name it with dots.
+*/
+function fieldPath(path) {
+	return path.replace(/\[(\d+)\]/g, ".$1");
+}
+/** The index of the innermost row a path is in, or undefined outside every list. */
+function rowIndexOf(path) {
+	const index = fieldPath(path).split(".").findLast((segment) => /^\d+$/.test(segment));
+	return index === void 0 ? void 0 : Number(index);
+}
+/** A list's `[index]` placeholder in a path, filled with the row a field is in. */
+function atIndex(path, index) {
+	return index === void 0 ? path : path.replace("[index]", `[${index}]`);
+}
+//#endregion
+export { atIndex, fieldPath, rowIndexOf };

package/dist/form/utils/shareEqual.d.ts

@@ -0,0 +1,6 @@
+/**
+ * `next`, reusing every part of `prev` it equals, so whatever didn't change keeps its identity: a
+ * schema parsed again because one input changed hands each field that input left alone back as it
+ * was, and a field that renders from it can skip the render.
+ */
+export declare function shareEqual<T>(prev: unknown, next: T): T;

package/dist/form/utils/shareEqual.js

@@ -0,0 +1,38 @@
+//#region src/form/utils/shareEqual.ts
+function isPlain(value) {
+	if (value === null || typeof value !== "object") return false;
+	const proto = Object.getPrototypeOf(value);
+	return proto === Object.prototype || proto === null;
+}
+/**
+* `next`, reusing every part of `prev` it equals, so whatever didn't change keeps its identity: a
+* schema parsed again because one input changed hands each field that input left alone back as it
+* was, and a field that renders from it can skip the render.
+*/
+function shareEqual(prev, next) {
+	if (Object.is(prev, next)) return prev;
+	if (Array.isArray(prev) && Array.isArray(next)) {
+		let same = prev.length === next.length;
+		const shared = next.map((item, i) => {
+			const kept = shareEqual(prev[i], item);
+			same &&= kept === prev[i];
+			return kept;
+		});
+		return same ? prev : shared;
+	}
+	if (isPlain(prev) && isPlain(next)) {
+		const keys = Object.keys(next);
+		const before = Object.keys(prev);
+		let same = keys.length === before.length;
+		const shared = {};
+		keys.forEach((key, i) => {
+			const kept = shareEqual(prev[key], next[key]);
+			same &&= before[i] === key && kept === prev[key];
+			shared[key] = kept;
+		});
+		return same ? prev : shared;
+	}
+	return next;
+}
+//#endregion
+export { shareEqual };

package/dist/graph/AnnotationBanner.js

@@ -4,9 +4,9 @@ import { FaInfoCircle } from "../icons/fa/FaInfoCircle.js";
 import { IoWarningOutline } from "../icons/io5/IoWarningOutline.js";
 import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
 import { keyedByContent } from "../components/keys.js";
-import cx from "classnames";
-import { useState } from "react";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 //#region src/graph/AnnotationBanner.tsx
 var typeOrder = {
 	error: 0,
@@ -77,11 +77,11 @@ function AnnotationBanner({ executedJobs }) {
 	for (const a of annotations) counts[a.type]++;
 	const ChevronIcon = expanded ? FaChevronDown : LuChevronRight;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx("rounded-lg border border-[var(--theme-border)] overflow-hidden", "bg-[var(--theme-panel-bg)]"),
+		className: clsx("rounded-lg border border-[var(--theme-border)] overflow-hidden", "bg-[var(--theme-panel-bg)]"),
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick: () => setExpanded((prev) => !prev),
-			className: cx("w-full flex items-center gap-3 px-4 py-2.5 text-left", "hover:bg-[var(--theme-hover)] transition-colors", expanded && "border-b border-[var(--theme-border)]"),
+			className: clsx("w-full flex items-center gap-3 px-4 py-2.5 text-left", "hover:bg-[var(--theme-hover)] transition-colors", expanded && "border-b border-[var(--theme-border)]"),
 			children: [
 				/* @__PURE__ */ jsx(ChevronIcon, { className: "w-3.5 h-3.5 text-[var(--theme-muted-text-color)] shrink-0" }),
 				/* @__PURE__ */ jsx("span", {
@@ -99,7 +99,7 @@ function AnnotationBanner({ executedJobs }) {
 						const config = typeConfig[type];
 						const Icon = config.icon;
 						return /* @__PURE__ */ jsxs("span", {
-							className: cx("inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium", config.countBg),
+							className: clsx("inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium", config.countBg),
 							children: [/* @__PURE__ */ jsx(Icon, { className: "w-3 h-3" }), counts[type]]
 						}, type);
 					})
@@ -111,12 +111,12 @@ function AnnotationBanner({ executedJobs }) {
 				const config = typeConfig[annotation.type] || typeConfig.notice;
 				const Icon = config.icon;
 				return /* @__PURE__ */ jsxs("div", {
-					className: cx("flex items-start gap-2.5 px-4 py-2 text-sm", config.bgClass),
-					children: [/* @__PURE__ */ jsx(Icon, { className: cx("w-4 h-4 mt-0.5 shrink-0", config.accentClass) }), /* @__PURE__ */ jsxs("div", {
+					className: clsx("flex items-start gap-2.5 px-4 py-2 text-sm", config.bgClass),
+					children: [/* @__PURE__ */ jsx(Icon, { className: clsx("w-4 h-4 mt-0.5 shrink-0", config.accentClass) }), /* @__PURE__ */ jsxs("div", {
 						className: "flex-1 min-w-0",
 						children: [
 							/* @__PURE__ */ jsxs("span", {
-								className: cx("font-medium", config.accentClass),
+								className: clsx("font-medium", config.accentClass),
 								children: [annotation.title || config.label, ":"]
 							}),
 							" ",

package/dist/graph/Collapse.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 export declare function Collapse({ expanded, id, children, }: {
     expanded: boolean;
+    /** The external toggle's aria-controls target. */
     id?: string;
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/graph/Collapse.js

@@ -1,35 +1,14 @@
 import { jsx } from "react/jsx-runtime";
-import { AnimatePresence, motion } from "framer-motion";
+import { Collapsible } from "@base-ui/react/collapsible";
 //#region src/graph/Collapse.tsx
 function Collapse({ expanded, id, children }) {
-	return /* @__PURE__ */ jsx(AnimatePresence, {
-		initial: false,
-		children: expanded && /* @__PURE__ */ jsx(motion.div, {
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		open: expanded,
+		children: /* @__PURE__ */ jsx(Collapsible.Panel, {
 			id,
-			initial: {
-				height: 0,
-				opacity: 0
-			},
-			animate: {
-				height: "auto",
-				opacity: 1
-			},
-			exit: {
-				height: 0,
-				opacity: 0
-			},
-			transition: {
-				duration: .2,
-				ease: [
-					.25,
-					.1,
-					.25,
-					1
-				]
-			},
-			className: "overflow-hidden",
+			className: "h-(--collapsible-panel-height) overflow-hidden transition-[height,opacity] duration-200 ease-[cubic-bezier(0.25,0.1,0.25,1)] data-starting-style:h-0 data-starting-style:opacity-0 data-ending-style:h-0 data-ending-style:opacity-0",
 			children
-		}, "collapse")
+		})
 	});
 }
 //#endregion

package/dist/graph/Connectors.js

@@ -1,7 +1,7 @@
 import { highlightOf, useLineage, useLineageStore } from "./lineage.js";
 import { dimClasses } from "./GraphNode.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/Connectors.tsx
 var CONNECTOR_COLOR = "var(--theme-border)";
 var HIGHLIGHT_COLOR = "var(--theme-element)";
@@ -57,7 +57,7 @@ function LitEdges({ edges }) {
 			}, `${from}→${to}`));
 		}
 	}
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [lines.length > 0 && /* @__PURE__ */ jsx("path", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [lines.length > 0 && /* @__PURE__ */ jsx("path", {
 		d: lines.join(" "),
 		stroke: CONNECTOR_COLOR,
 		strokeWidth: STROKE,
@@ -82,7 +82,7 @@ function LitDots({ ports }) {
 			}, key));
 		}
 	}
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [at.length > 0 && /* @__PURE__ */ jsx("path", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [at.length > 0 && /* @__PURE__ */ jsx("path", {
 		d: squaresAt(at),
 		fill: PANEL_COLOR
 	}), lit] });
@@ -130,7 +130,7 @@ var ConnectorLayers = memo(function ConnectorLayers({ edges, zBase }) {
 		style: { zIndex: z + zBase },
 		children
 	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		keyframes,
 		layer(-1, /* @__PURE__ */ jsx("path", {
 			d: lines,
@@ -140,7 +140,7 @@ var ConnectorLayers = memo(function ConnectorLayers({ edges, zBase }) {
 			className: fade
 		})),
 		layer(20, /* @__PURE__ */ jsx(LitEdges, { edges })),
-		layer(30, /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		layer(30, /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx("path", {
 				d: squares,
 				fill: PANEL_COLOR

package/dist/graph/DependencyGraph.js

@@ -1,4 +1,3 @@
-import { useRunFile, useSlots, useStrings, useWorkflowEngine } from "../components/Provider.js";
 import { FaArrowLeft } from "../icons/fa/FaArrowLeft.js";
 import { FaArrowRight } from "../icons/fa/FaArrowRight.js";
 import { IoDocumentTextOutline } from "../icons/io5/IoDocumentTextOutline.js";
@@ -6,8 +5,9 @@ import { LuChevronLeft } from "../icons/lu/LuChevronLeft.js";
 import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
 import { LuZoomIn } from "../icons/lu/LuZoomIn.js";
 import { LuZoomOut } from "../icons/lu/LuZoomOut.js";
-import { TooltipInfo } from "../components/Tooltip.js";
-import { BareModal, modalPanelClasses } from "../components/BareModal.js";
+import { useRunFile, useSlots, useStrings, useWorkflowEngine } from "../components/Provider.js";
+import { Modal } from "../components/Modal.js";
+import { InfoTip } from "../components/InfoTip.js";
 import { IconButton } from "../components/IconButton.js";
 import { Indicator } from "../components/Indicator.js";
 import Loader from "../components/Loader.js";
@@ -32,9 +32,9 @@ import { computeGraphLayout, displayJobsOf, hopDistances, positionsOf } from "./
 import { MatrixGroupNode, MatrixGroupSummaryItem } from "./MatrixGroup.js";
 import TreeView from "./TreeView.js";
 import { FIT_MAX_SCALE, MIN_SCALE, ZOOM_STEP, fitMargin, fitView, intoView, wheelFactor, zoomAround, zoomLimit } from "./viewport.js";
-import cx from "classnames";
-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 { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, Suspense, createContext, lazy, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { flushSync } from "react-dom";
 import { DateTime } from "luxon";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
@@ -45,12 +45,12 @@ function ViewToggle({ viewMode, setViewMode }) {
 		children: [/* @__PURE__ */ jsx("button", {
 			type: "button",
 			onClick: () => setViewMode("dag"),
-			className: cx("px-3 py-1.5 text-xs font-mono transition-colors", viewMode === "dag" ? "bg-[var(--theme-element)] text-[var(--theme-element-text)]" : "text-[var(--theme-muted-text-color)] hover:text-[var(--theme-app)] hover:bg-[var(--theme-hover)]"),
+			className: clsx("px-3 py-1.5 text-xs font-mono transition-colors", viewMode === "dag" ? "bg-[var(--theme-element)] text-[var(--theme-element-text)]" : "text-[var(--theme-muted-text-color)] hover:text-[var(--theme-app)] hover:bg-[var(--theme-hover)]"),
 			children: "DAG"
 		}), /* @__PURE__ */ jsx("button", {
 			type: "button",
 			onClick: () => setViewMode("tree"),
-			className: cx("px-3 py-1.5 text-xs font-mono transition-colors", viewMode === "tree" ? "bg-[var(--theme-element)] text-[var(--theme-element-text)]" : "text-[var(--theme-muted-text-color)] hover:text-[var(--theme-app)] hover:bg-[var(--theme-hover)]"),
+			className: clsx("px-3 py-1.5 text-xs font-mono transition-colors", viewMode === "tree" ? "bg-[var(--theme-element)] text-[var(--theme-element-text)]" : "text-[var(--theme-muted-text-color)] hover:text-[var(--theme-app)] hover:bg-[var(--theme-hover)]"),
 			children: "Tree"
 		})]
 	});
@@ -63,7 +63,7 @@ function GraphViewControls({ history, expand, onReset, onZoom, zoomedAll }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: VIEW_BAR,
 		children: [
-			history && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			history && /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsx(IconButton, {
 					icon: /* @__PURE__ */ jsx(LuChevronLeft, { className: "h-4 w-4" }),
 					label: dag.previousGraph,
@@ -531,7 +531,7 @@ function EditorEdges({ edges, cols, boxes, selected, zBase, size }) {
 	const wiredIn = new Set(edges.map((edge) => edge.to));
 	const wiredOut = new Set(edges.map((edge) => edge.from));
 	const chosen = new Set(selected.map((edge) => `${edge.from}→${edge.to}`));
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		cols.flatMap((col) => col.map((jobNames) => {
 			const [head] = jobNames;
 			const box = head === void 0 ? void 0 : boxes.get(head);
@@ -568,7 +568,7 @@ function EditorEdges({ edges, cols, boxes, selected, zBase, size }) {
 			width: size?.width,
 			height: size?.height,
 			style: { zIndex: 1 + zBase },
-			children: edges.map(({ from, to, path }) => /* @__PURE__ */ jsxs(Fragment, { children: [chosen.has(`${from}→${to}`) && /* @__PURE__ */ jsx("path", {
+			children: edges.map(({ from, to, path }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [chosen.has(`${from}→${to}`) && /* @__PURE__ */ jsx("path", {
 				d: path.d,
 				stroke: "var(--theme-element)",
 				strokeWidth: "10",
@@ -625,7 +625,7 @@ function SidebarJobs({ jobs, pathPrefix, preview, stepsOpen, toggleSteps, expand
 		seenMatrixGroups.add(originaljob);
 		return [originaljob];
 	});
-	return /* @__PURE__ */ jsx(Fragment$1, { children: orderedKeys.map((jobName) => {
+	return /* @__PURE__ */ jsx(Fragment, { children: orderedKeys.map((jobName) => {
 		const mg = displayJobs[jobName]?._matrixGroup;
 		if (mg) return /* @__PURE__ */ jsx(MatrixGroupSummaryItem, {
 			matrixGroup: mg,
@@ -1142,7 +1142,7 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 		})
 	}) : void 0;
 	const startDt = run.createdAt ? DateTime.fromISO(run.createdAt) : shownAt;
-	const additionalBottomLeftBarComponents = sublogIsStep ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	const additionalBottomLeftBarComponents = sublogIsStep ? /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsxs("button", {
 			type: "button",
 			className: "btn btn-neutral",
@@ -1203,7 +1203,7 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 				]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: cx(preview ? "w-full" : "flex-1 min-w-0 mt-2", "h-full flex flex-col gap-y-2"),
+				className: clsx(preview ? "w-full" : "flex-1 min-w-0 mt-2", "h-full flex flex-col gap-y-2"),
 				children: [
 					!preview && /* @__PURE__ */ jsxs("div", {
 						className: "panel w-full border rounded-lg px-4 py-2 flex flex-wrap items-center gap-x-16 gap-y-2",
@@ -1235,7 +1235,7 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 									children: dagStrings.status
 								}), /* @__PURE__ */ jsx("div", {
 									className: "text-sm font-semibold flex items-center gap-x-1",
-									children: /* @__PURE__ */ jsxs(TooltipInfo, {
+									children: /* @__PURE__ */ jsxs(InfoTip, {
 										className: "flex items-center gap-x-1",
 										text: dagStrings.statusReason(run.statusReason) ?? "",
 										children: [/* @__PURE__ */ jsx(Indicator, { status: runStatus }), dagStrings.statusLabel(runStatus)]
@@ -1291,7 +1291,7 @@ 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: clsx("panel w-full overflow-hidden relative", removeBorder ? "border-none" : "border", editor && "outline-none"),
 						style: {
 							height: fixedHeight ?? (containerHeight !== null ? `${containerHeight}px` : previewHeight !== null ? `${Math.min(previewHeight, windowSize.h * .62)}px` : "62vh"),
 							minHeight: previewHeight !== null && !fixedHeight ? 0 : 160
@@ -1311,7 +1311,7 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 							onPanning: moved,
 							onPinch: moved,
 							onTransform,
-							children: () => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+							children: () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 								className: "absolute z-10 top-2 right-2 flex max-w-[calc(100%-1rem)] flex-col items-end gap-y-1",
 								children: /* @__PURE__ */ jsx(GraphViewControls, {
 									history: executedJobsPath.length > 1 ? {
@@ -1365,11 +1365,12 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 					})
 				]
 			}),
-			/* @__PURE__ */ jsx(BareModal, {
+			/* @__PURE__ */ jsx(Modal, {
 				open: sublogOpen !== "",
 				onClose: () => setSublogOpen(""),
+				"aria-label": logName.replace(/\s+/g, " ") || sublogOpen.slice(sublogFileStart),
 				align: "center",
-				className: cx(modalPanelClasses, "max-h-full overflow-y-auto p-4 sm:p-6"),
+				className: "max-h-full overflow-y-auto p-4 sm:p-6",
 				children: /* @__PURE__ */ jsx("div", {
 					className: "flex w-full",
 					children: sublogsLoading && (!sublogs || !runNumber) ? /* @__PURE__ */ jsx(Loader, {