@parallelworks/ui 0.50.0 → 0.52.0

package/dist/graph/Reveal.js

@@ -1,3 +1,4 @@
+import { useReducedMotion } from "../reducedMotion.js";
 import { jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useRef, useState } from "react";
 //#region src/graph/Reveal.tsx
@@ -11,12 +12,26 @@ function Reveal({ open, children, growWidth = false, onSettled }) {
 	const [clipped, setClipped] = useState(!open);
 	const [toggling, setToggling] = useState(false);
 	const [renderChildren, setRenderChildren] = useState(open);
+	const still = useReducedMotion();
 	if (open && !renderChildren) setRenderChildren(true);
 	if (prevOpen !== open) {
 		setPrevOpen(open);
 		setToggling(true);
 		setClipped(true);
 	}
+	const settle = () => {
+		setToggling(false);
+		setClipped(!open);
+		if (!open) setRenderChildren(false);
+		onSettled?.();
+	};
+	useLayoutEffect(() => {
+		if (still && toggling) settle();
+	}, [
+		still,
+		toggling,
+		open
+	]);
 	useLayoutEffect(() => {
 		if (!growWidth || !renderChildren) return;
 		const el = contentRef.current;
@@ -32,18 +47,11 @@ function Reveal({ open, children, growWidth = false, onSettled }) {
 		style: {
 			gridTemplateRows: open ? "1fr" : "0fr",
 			overflow: clipped ? "hidden" : "visible",
-			...growWidth ? {
-				width: open ? width : 0,
-				transition: toggling ? FULL_TRANSITION : ROWS_TRANSITION
-			} : { transition: ROWS_TRANSITION }
+			...growWidth ? { width: open ? width : 0 } : {},
+			transition: still ? "none" : growWidth && toggling ? FULL_TRANSITION : ROWS_TRANSITION
 		},
 		onTransitionEnd: (e) => {
-			if (e.target === e.currentTarget && e.propertyName === "grid-template-rows") {
-				setToggling(false);
-				setClipped(!open);
-				if (!open) setRenderChildren(false);
-				onSettled?.();
-			}
+			if (e.target === e.currentTarget && e.propertyName === "grid-template-rows") settle();
 		},
 		children: /* @__PURE__ */ jsx("div", {
 			ref: contentRef,

package/dist/graph/ShortcutsButton.d.ts

@@ -7,8 +7,17 @@ export interface ShortcutGroup {
     title: string;
     shortcuts: Shortcut[];
 }
-export declare const MOD_KEY: string;
-export declare const ALT_KEY: string;
+/** Whether the keyboard is an Apple one, whose Command key does what Control does elsewhere. */
+export declare const IS_MAC: boolean;
+/** Copy, paste and undo take Command on a Mac and Control elsewhere, as the handlers do. A Mac
+ *  shows its symbols; elsewhere the keys go by the names their keycaps carry in the strings. */
+export declare function modifierKeys(key: {
+    ctrl: string;
+    alt: string;
+}): {
+    mod: string;
+    alt: string;
+};
 /** A toolbar button that opens the list of gestures and keys a pane takes. */
 export declare function ShortcutsButton({ groups }: {
     groups: ShortcutGroup[];

package/dist/graph/ShortcutsButton.js

@@ -1,13 +1,24 @@
 import { KeyboardIcon } from "../icons.js";
-import { Popover } from "../components/Popover.js";
 import { IconButton } from "../components/IconButton.js";
+import { Popover } from "../components/Popover.js";
 import { useGraphEditorStrings } from "./editorStrings.js";
 import { toolbarPanel } from "./toolbarPanel.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1 } from "react";
 //#region src/graph/ShortcutsButton.tsx
-var MOD_KEY = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform) ? "⌘" : "Ctrl";
-var ALT_KEY = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform) ? "⌥" : "Alt";
+/** Whether the keyboard is an Apple one, whose Command key does what Control does elsewhere. */
+var IS_MAC = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+/** Copy, paste and undo take Command on a Mac and Control elsewhere, as the handlers do. A Mac
+*  shows its symbols; elsewhere the keys go by the names their keycaps carry in the strings. */
+function modifierKeys(key) {
+	return IS_MAC ? {
+		mod: "⌘",
+		alt: "⌥"
+	} : {
+		mod: key.ctrl,
+		alt: key.alt
+	};
+}
 /** A toolbar button that opens the list of gestures and keys a pane takes. */
 function ShortcutsButton({ groups }) {
 	const t = useGraphEditorStrings();
@@ -45,4 +56,4 @@ function ShortcutsButton({ groups }) {
 	});
 }
 //#endregion
-export { ALT_KEY, MOD_KEY, ShortcutsButton };
+export { IS_MAC, ShortcutsButton, modifierKeys };

package/dist/graph/TreeView.js

@@ -1,8 +1,9 @@
 import { cx } from "../cx.js";
 import { ChevronRightIcon } from "../icons.js";
-import { EmptyState } from "../components/EmptyState.js";
 import { Loader } from "../components/Loader.js";
 import { useRunFile, useSlots, useStrings, useWorkflowEngine } from "../components/Provider.js";
+import { EmptyState } from "../components/EmptyState.js";
+import { Button } from "../components/Button.js";
 import { DisclosurePanel } from "../components/Disclosure.js";
 import { Elapsed } from "../components/relativeTime.js";
 import { RunStatusIcon } from "../components/RunStatusIcon.js";
@@ -13,13 +14,14 @@ import { useCallback, useId, useMemo, useState } from "react";
 //#region src/graph/TreeView.tsx
 function Chevron({ open, hidden = false }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cx("flex-shrink-0 transition-transform duration-150", open && "rotate-90", hidden ? "invisible" : "text-[var(--theme-muted-text-color)]"),
+		className: cx("flex-shrink-0 transition-transform duration-150 motion-reduce:transition-none", open && "rotate-90", hidden ? "invisible" : "text-[var(--theme-muted-text-color)]"),
 		children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: cx("w-4 h-4", open && "text-[var(--theme-accent)]") })
 	});
 }
-function StepLogs({ slug, prefix, jobName, stepIndex }) {
-	const logPath = useWorkflowEngine().stepLogPath(prefix, jobName, stepIndex);
-	const { data: logs, isLoading, error } = useRunFile(slug, logPath, { refreshInterval: 2e3 });
+function StepLogs({ slug, prefix, jobName, stepIndex, status }) {
+	const engine = useWorkflowEngine();
+	const logPath = engine.stepLogPath(prefix, jobName, stepIndex);
+	const { data: logs, isLoading, error } = useRunFile(slug, logPath, { refreshInterval: engine.isRunActive(status) ? 2e3 : 0 });
 	const { dag: t } = useStrings();
 	if (isLoading && !logs) return /* @__PURE__ */ jsx("div", {
 		className: "px-5 py-4",
@@ -50,13 +52,15 @@ function JobRow({ jobName, job, isExpanded, onToggle, prefix, state }) {
 	const dependencies = Array.isArray(job.needs) ? job.needs : [];
 	const panelId = useId();
 	const { dag: t } = useStrings();
+	const skipped = job.status === "skipped" || job.status === "skipped-failed";
 	return /* @__PURE__ */ jsxs("div", {
 		className: "border-b border-[var(--theme-border)] last:border-b-0",
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
-			"aria-expanded": isExpanded,
+			"aria-expanded": skipped ? void 0 : isExpanded,
 			"aria-controls": hasSteps ? panelId : void 0,
-			className: cx("flex items-center gap-3 px-5 py-3 transition-colors w-full text-left", job.status === "skipped" || job.status === "skipped-failed" ? "cursor-default" : "cursor-pointer", isExpanded && "bg-[var(--theme-panel-bg)]"),
+			"aria-disabled": skipped || void 0,
+			className: cx("flex items-center gap-3 px-5 py-3 transition-colors w-full text-left", skipped ? "cursor-default" : "cursor-pointer", isExpanded && "bg-[var(--theme-panel-bg)]"),
 			onClick: onToggle,
 			children: [
 				/* @__PURE__ */ jsx(Chevron, {
@@ -114,6 +118,7 @@ function StepRow({ step, index, isExpanded, onToggle, prefix, jobName, state })
 	const label = engine.stepLabel(step, index);
 	const subworkflow = step.subworkflow;
 	const panelId = useId();
+	const subworkflowPanelId = useId();
 	const { dag: t } = useStrings();
 	const subworkflowJobs = subworkflow?.jobs ?? {};
 	const subworkflowJobNames = Object.keys(subworkflowJobs).filter((name) => subworkflowJobs[name]?.if !== false);
@@ -122,7 +127,7 @@ function StepRow({ step, index, isExpanded, onToggle, prefix, jobName, state })
 		/* @__PURE__ */ jsxs("button", {
 			type: "button",
 			"aria-expanded": isExpanded,
-			"aria-controls": panelId,
+			"aria-controls": subworkflow ? subworkflowPanelId : panelId,
 			className: cx("flex items-center gap-3 px-5 py-2.5 cursor-pointer transition-colors w-full text-left", isExpanded ? "" : "hover:bg-[var(--theme-hover)]"),
 			onClick: onToggle,
 			children: [
@@ -154,12 +159,13 @@ function StepRow({ step, index, isExpanded, onToggle, prefix, jobName, state })
 				slug: state.slug,
 				prefix,
 				jobName,
-				stepIndex: index
+				stepIndex: index,
+				status: step.status
 			})
 		}),
 		/* @__PURE__ */ jsx(DisclosurePanel, {
 			open: isExpanded && !!subworkflow && subworkflowJobNames.length > 0,
-			id: panelId,
+			id: subworkflowPanelId,
 			children: /* @__PURE__ */ jsx("div", {
 				className: "ml-[38px] border-l-2 border-[var(--theme-border)]",
 				children: subworkflowJobNames.map((subJobName) => {
@@ -181,6 +187,7 @@ function StepRow({ step, index, isExpanded, onToggle, prefix, jobName, state })
 }
 function TreeView({ jobs, slug, expandedJobs, setExpandedJobs }) {
 	const engine = useWorkflowEngine();
+	const matrixPanelId = useId();
 	const { common, dag } = useStrings();
 	const visibleJobNames = useMemo(() => {
 		return Object.keys(jobs).filter((jobName) => jobs[jobName]?.if !== false);
@@ -208,23 +215,33 @@ function TreeView({ jobs, slug, expandedJobs, setExpandedJobs }) {
 		expandedSteps,
 		onStepToggle: (stepKey) => setExpandedSteps((prev) => toggled(prev, stepKey))
 	};
+	const expandable = useMemo(() => {
+		const keys = [];
+		for (const jobName of visibleJobNames) {
+			const job = jobs[jobName];
+			if (job?.status === "skipped" || job?.status === "skipped-failed") continue;
+			keys.push(jobName);
+			const origin = job?._matrix?.originaljob;
+			if (origin) keys.push(`matrix:${origin}`);
+		}
+		return [...new Set(keys)];
+	}, [visibleJobNames, jobs]);
 	const expandAll = useCallback(() => {
-		setExpandedJobs(new Set(visibleJobNames));
-	}, [visibleJobNames, setExpandedJobs]);
+		setExpandedJobs(new Set(expandable));
+	}, [expandable, setExpandedJobs]);
 	const collapseAll = useCallback(() => {
 		setExpandedJobs(/* @__PURE__ */ new Set());
 		setExpandedSteps(/* @__PURE__ */ new Set());
 		setExpandedSubworkflowJobs(/* @__PURE__ */ new Set());
 	}, [setExpandedJobs]);
-	const allExpanded = expandedJobs.size === visibleJobNames.length;
+	const allExpanded = expandable.length > 0 && expandable.every((key) => expandedJobs.has(key));
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col",
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "flex justify-end px-4 py-2 border-b border-[var(--theme-border)]",
-			children: /* @__PURE__ */ jsx("button", {
-				type: "button",
+			children: /* @__PURE__ */ jsx(Button, {
+				size: "sm",
 				onClick: allExpanded ? collapseAll : expandAll,
-				className: "text-xs font-mono text-[var(--theme-muted-text-color)] hover:text-[var(--theme-app)] transition-colors px-3 py-1.5 border border-[var(--theme-border)] rounded",
 				children: allExpanded ? common.collapseAll : common.expandAll
 			})
 		}), /* @__PURE__ */ jsx("div", { children: (() => {
@@ -262,7 +279,7 @@ function TreeView({ jobs, slug, expandedJobs, setExpandedJobs }) {
 						children: [/* @__PURE__ */ jsxs("button", {
 							type: "button",
 							"aria-expanded": isGroupExpanded,
-							"aria-controls": `matrix-panel-${matrixOrigin}`,
+							"aria-controls": `${matrixPanelId}-${matrixOrigin}`,
 							className: "flex items-center gap-3 px-5 py-3 cursor-pointer transition-colors w-full text-left",
 							onClick: () => toggleJob(`matrix:${matrixOrigin}`),
 							children: [
@@ -280,7 +297,7 @@ function TreeView({ jobs, slug, expandedJobs, setExpandedJobs }) {
 							]
 						}), /* @__PURE__ */ jsx(DisclosurePanel, {
 							open: isGroupExpanded,
-							id: `matrix-panel-${matrixOrigin}`,
+							id: `${matrixPanelId}-${matrixOrigin}`,
 							children: /* @__PURE__ */ jsx("div", {
 								className: "pl-4",
 								children: group.members.map((memberName) => {

package/dist/graph/WorkflowSettingsDialog.js

@@ -1,8 +1,8 @@
 import { RemoveIcon } from "../icons.js";
 import { useWorkflowEditing } from "../components/Provider.js";
+import { IconButton } from "../components/IconButton.js";
 import { ErrorText } from "../components/Field.js";
 import { Input } from "../components/Input.js";
-import { IconButton } from "../components/IconButton.js";
 import { useGraphEditorStrings, useInputsEditorStrings } from "./editorStrings.js";
 import { asRecord } from "./records.js";
 import { SETTINGS_YAML_PATH } from "../editor/settingsYaml.js";

package/dist/graph/editorChrome.js

@@ -10,7 +10,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 /** What a drag carries, beside the pointer at `at` in its layer's coordinates. */
 function DragLabel({ at, text, refused = false }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cx("pointer-events-none absolute z-30 rounded-md border bg-(--theme-panel-bg) px-2 py-1 text-xs shadow", refused ? "border-(--theme-error) text-(--theme-error)" : "theme-border"),
+		className: cx("pointer-events-none absolute z-30 rounded-md border bg-(--theme-panel-bg) px-2 py-1 text-xs shadow", refused ? "border-(--theme-error) text-(--theme-error-text)" : "theme-border"),
 		style: {
 			left: at.x + 12,
 			top: at.y + 12

package/dist/graph/editorFields.js

@@ -2,12 +2,12 @@ import { AddIcon, ExpressionIcon, RemoveIcon } from "../icons.js";
 import { withPositionKeys } from "../components/keys.js";
 import { Tooltip } from "../components/Tooltip.js";
 import { Button } from "../components/Button.js";
+import { IconButton } from "../components/IconButton.js";
 import { Checkbox } from "../components/Checkbox.js";
 import { ErrorText, Field } from "../components/Field.js";
 import { Input, Textarea } from "../components/Input.js";
 import { Modal, ModalTitle } from "../components/Modal.js";
 import { Switch } from "../components/Switch.js";
-import { IconButton } from "../components/IconButton.js";
 import { Section } from "../components/Section.js";
 import { SegmentedControl } from "../components/SegmentedControl.js";
 import { useGraphEditorStrings } from "./editorStrings.js";

package/dist/graph/editorRows.js

@@ -4,7 +4,7 @@ import { Tooltip } from "../components/Tooltip.js";
 import { MarqueeBox, place } from "./editorPrimitives.js";
 import { EDITOR_HANDLE_CLASS, NO_SELECTION, labelsOf, problemsIn, sameEdge, sameStep, selectionBounds, useGraphEditor, useSelectedEdges, useUi } from "./graphEditorState.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 //#region src/graph/editorRows.tsx
 /** Drop indicators, the connection line and the selection, drawn in the graph's own coordinates. */
 function GraphEditorCanvas() {
@@ -141,18 +141,24 @@ function BoxGrip({ jobs }) {
 }
 var onBadge = (target) => target instanceof Element && !!target.closest("[data-problem-badge]");
 /** A step's problems, or a job's with its steps', listed on hover; a click shows the first one's line. */
+var NO_PROBLEMS = [];
 function ProblemBadge({ api, job, step }) {
 	const t = api.t;
-	const mine = (problems) => step === void 0 ? problems.filter((problem) => problem.job === job) : problemsIn(problems, job, step);
-	const messages = useUi(api, (state) => mine(state.problems).map((problem) => problem.message).join("\n"), "");
-	const line = useUi(api, (state) => mine(state.problems)[0]?.line ?? 0, 0);
+	const problems = useUi(api, (state) => state.problems, NO_PROBLEMS);
+	const mine = useMemo(() => step === void 0 ? problems.filter((problem) => problem.job === job) : problemsIn(problems, job, step), [
+		problems,
+		job,
+		step
+	]);
+	const messages = mine.map((problem) => problem.message).join("\n");
+	const line = mine[0]?.line ?? 0;
 	if (!messages) return null;
 	return /* @__PURE__ */ jsx(Tooltip, {
 		content: messages,
 		children: /* @__PURE__ */ jsx("button", {
 			type: "button",
 			"data-problem-badge": "",
-			"aria-label": t.problemCount(messages.split("\n").length),
+			"aria-label": t.problemCount(mine.length),
 			className: "cursor-pointer rounded p-0.5 text-(--theme-error) hover:bg-(--theme-muted-panel-bg)",
 			onPointerDown: (e) => e.stopPropagation(),
 			onClick: (e) => {
@@ -253,12 +259,12 @@ function EditableJobRow({ job, label, badge = true, children }) {
 /** One connector circle: dragging it connects `jobs`, dropping on it connects to them. */
 function PortCircle({ side, at, draw, jobs, port, hint, zIndex }) {
 	const api = useGraphEditor();
-	const drag = useUi(api, (state) => state.drag, null);
+	const anyDrag = useUi(api, (state) => state.drag !== null, false);
+	const dragging = useUi(api, ({ drag }) => drag?.payload.kind === "connect" && drag.payload.port === port && drag.payload.side === side, false);
 	if (!api) return null;
-	const dragging = drag?.payload.kind === "connect" && drag.payload.port === port && drag.payload.side === side;
 	return /* @__PURE__ */ jsx(Tooltip, {
 		content: hint,
-		disabled: Boolean(drag),
+		disabled: anyDrag,
 		children: /* @__PURE__ */ jsxs("span", {
 			role: "none",
 			"data-dag-port": side,
@@ -417,13 +423,13 @@ function EdgeHitPath({ d, edge }) {
 /** A selected connector's two ends; dragging one onto another job or node moves that end there. */
 function EdgeEnds({ edge, start, end, zIndex }) {
 	const api = useGraphEditor();
-	const drag = useUi(api, (state) => state.drag, null);
+	const anyDrag = useUi(api, (state) => state.drag !== null, false);
 	if (!api) return null;
 	const t = api.t;
 	const inUse = api.edgeInUse(edge);
 	const handle = (side, at, fixed) => /* @__PURE__ */ jsx(Tooltip, {
 		content: inUse ? t.dependencyInUse : t.moveDependencyEnd,
-		disabled: Boolean(drag),
+		disabled: anyDrag,
 		children: /* @__PURE__ */ jsx("span", {
 			role: "none",
 			"data-dag-edge-end": side,

package/dist/graph/editorStrings.d.ts

@@ -51,6 +51,11 @@ export declare const GRAPH_EDITOR_STRINGS: {
         shift: string;
         enter: string;
         delete: string;
+        tab: string;
+        escape: string;
+        /** Control and Alt off a Mac; a Mac shows ⌘ and ⌥. */
+        ctrl: string;
+        alt: string;
     };
     shortcutDoes: {
         select: string;
@@ -396,6 +401,8 @@ export declare const INPUTS_EDITOR_STRINGS: {
     addPage: string;
     page: string;
     pageNumber: string;
+    /** After the page number field: how many pages there are. */
+    pageTotal: (count: number) => string;
     /** The title of a wizard's `count`th page when the editor adds it. */
     stepTitle: (count: number) => string;
     /** The submit button label of a form the editor splits into pages. */

package/dist/graph/editorStrings.js

@@ -51,7 +51,12 @@ var GRAPH_EDITOR_STRINGS = {
 		scroll: "Scroll",
 		shift: "Shift",
 		enter: "Enter",
-		delete: "Delete"
+		delete: "Delete",
+		tab: "Tab",
+		escape: "Esc",
+		/** Control and Alt off a Mac; a Mac shows ⌘ and ⌥. */
+		ctrl: "Ctrl",
+		alt: "Alt"
 	},
 	shortcutDoes: {
 		select: "Add a job, step or dependency to the selection, one kind at a time",
@@ -391,6 +396,8 @@ var INPUTS_EDITOR_STRINGS = {
 	addPage: "Add a page after the last",
 	page: "Page",
 	pageNumber: "Page shown",
+	/** After the page number field: how many pages there are. */
+	pageTotal: (count) => `/ ${count}`,
 	/** The title of a wizard's `count`th page when the editor adds it. */
 	stepTitle: (count) => `Step ${count}`,
 	/** The submit button label of a form the editor splits into pages. */

package/dist/graph/fieldProblems.js

@@ -92,7 +92,7 @@ function ProblemList({ problems }) {
 	if (problems.length === 0) return null;
 	const fieldOf = (problem) => [...fields ?? []].filter(([key]) => within(problem, key)).sort(([a], [b]) => b.length - a.length)[0]?.[1];
 	return /* @__PURE__ */ jsx("ul", {
-		className: "flex flex-col gap-1 text-sm text-(--theme-error)",
+		className: "flex flex-col gap-1 text-sm text-(--theme-error-text)",
 		children: keyedByContent(problems, (problem) => `${problem.at.join(".")}:${problem.message}`).map(({ key, item: problem }) => {
 			const field = fieldOf(problem);
 			return /* @__PURE__ */ jsxs("li", {

package/dist/graph/inputRefs.js

@@ -1,9 +1,9 @@
 import { AddIcon } from "../icons.js";
 import { useStrings } from "../components/Provider.js";
 import { ActionMenu } from "../components/ActionMenu.js";
+import { IconButton } from "../components/IconButton.js";
 import { Textarea } from "../components/Input.js";
 import { Switch } from "../components/Switch.js";
-import { IconButton } from "../components/IconButton.js";
 import { Select } from "../components/Select.js";
 import { useGraphEditorStrings, useInputsEditorStrings } from "./editorStrings.js";
 import { asRecord } from "./records.js";

package/dist/graph/settingsViews.js

@@ -1,13 +1,11 @@
-import { Loader } from "../components/Loader.js";
 import { Tooltip } from "../components/Tooltip.js";
 import { ErrorText } from "../components/Field.js";
 import { useGraphEditorStrings } from "./editorStrings.js";
 import { ProblemList } from "./fieldProblems.js";
 import { ChoiceButtons } from "./editorFields.js";
+import { Editor } from "../editor/Editor.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Suspense, lazy } from "react";
 //#region src/graph/settingsViews.tsx
-var MonacoEditor = lazy(() => import("../editor/Monaco.js"));
 function yamlProblem(yaml, t, editing) {
 	const problem = editing.settingsYamlProblem(yaml);
 	return !problem ? void 0 : problem.kind === "syntax" ? t.yamlSyntax(problem.message) : t.yamlNotMap;
@@ -38,21 +36,16 @@ function YamlPane({ path, value, onChange, problem, scoped, nested }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-1.5",
 		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: "h-[50vh] overflow-hidden rounded-md border theme-border",
-				children: /* @__PURE__ */ jsx(Suspense, {
-					fallback: /* @__PURE__ */ jsx(Loader, {}),
-					children: /* @__PURE__ */ jsx(MonacoEditor, {
-						path,
-						language: "yaml",
-						value,
-						height: "100%",
-						scrollBeyondLastLine: false,
-						onChange,
-						markers: scoped.markers,
-						...nested ? { nested } : {}
-					})
-				})
+			/* @__PURE__ */ jsx(Editor, {
+				path,
+				language: "yaml",
+				value,
+				height: "50vh",
+				className: "overflow-hidden rounded-md",
+				scrollBeyondLastLine: false,
+				onChange,
+				markers: scoped.markers,
+				...nested ? { nested } : {}
 			}),
 			/* @__PURE__ */ jsx(ErrorText, { children: problem }),
 			/* @__PURE__ */ jsx(ProblemList, { problems: scoped.problems })

package/dist/graph/stepWith.js

@@ -1,8 +1,8 @@
 import { RemoveIcon } from "../icons.js";
 import { useRepoSuggestions, useWorkflowActions, useWorkflowEditing, useWorkflowJsonResolver } from "../components/Provider.js";
+import { IconButton } from "../components/IconButton.js";
 import { ErrorText } from "../components/Field.js";
 import { Input, Textarea } from "../components/Input.js";
-import { IconButton } from "../components/IconButton.js";
 import { useGraphEditorStrings, useInputsEditorStrings } from "./editorStrings.js";
 import { asRecord } from "./records.js";
 import { loadUsesInputs, splitAtRef } from "./usesInputs.js";
@@ -515,7 +515,7 @@ function ExtraKey({ name, uses, draft, original, onChange }) {
 					children: name
 				}),
 				/* @__PURE__ */ jsx("span", {
-					className: "text-xs text-(--theme-error)",
+					className: "text-xs text-(--theme-error-text)",
 					children: t.notActionInput
 				}),
 				/* @__PURE__ */ jsx(IconButton, {

package/dist/icons.d.ts

@@ -128,6 +128,7 @@ export declare const KeyIcon: IconType;
 export declare const KubernetesNamespaceIcon: IconType;
 export declare const LanguageIcon: IconType;
 export declare const LegalIcon: IconType;
+export declare const LibraryIcon: IconType;
 export declare const LicenseIcon: IconType;
 export declare const LinkIcon: IconType;
 export declare const ListViewIcon: IconType;
@@ -173,6 +174,7 @@ export declare const PowerIcon: IconType;
 export declare const PowershellIcon: IconType;
 export declare const PreviewIcon: IconType;
 export declare const PrintIcon: IconType;
+export declare const ProjectIcon: IconType;
 export declare const PublishIcon: IconType;
 export declare const PullRequestIcon: IconType;
 export declare const QRCodeIcon: IconType;

package/dist/icons.js

@@ -1,5 +1,5 @@
 import { ErrorCheckmark, SuccessCheckmark } from "./components/StatusIcons.js";
-import { Activity, Archive, ArrowDown, ArrowDownWideNarrow, ArrowLeft, ArrowLeftRight, ArrowRight, ArrowUp, ArrowUpDown, ArrowUpNarrowWide, AtSign, BadgeCheck, Ban, BanknoteX, Bell, BellOff, BellRing, BookUser, Bot, Boxes, Braces, Brain, BrainCircuit, Briefcase, Building2, Calendar, CalendarClock, CalendarSync, CalendarX, Camera, ChartLine, ChartPie, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsDown, ChevronsDownUp, ChevronsUp, ChevronsUpDown, Circle, CircleAlert, CircleCheck, CircleDollarSign, CircleDot, CircleHelp, CircleMinus, CirclePlay, CircleSlash, CircleX, ClipboardCheck, ClipboardPen, Clock, Cloud, CloudCog, CloudOff, Code, CodeXml, Cog, Columns3, Copy, CopyPlus, CornerUpRight, Cpu, CreditCard, Database, DatabaseSearch, DatabaseZap, Disc3, DollarSign, Download, Earth, Ellipsis, EthernetPort, ExternalLink, Eye, EyeOff, File, FileArchive, FileCode, FileImage, FileJson, FileKey, FilePenLine, FileText, FileType, Files, Fingerprint, Flag, FlaskConical, Folder, FolderOpen, FolderPlus, FolderTree, Folders, Funnel, FunnelX, Gauge, GitCommitHorizontal, GitFork, GitPullRequest, Globe, GraduationCap, Grid3x3, GripHorizontal, Group, Handshake, HardDrive, HatGlasses, Headset, Heart, HeartOff, History, Hourglass, House, IdCard, Inbox, Info, Key, KeyRound, Keyboard, Landmark, Languages, Layers, LayoutGrid, Link, List, ListOrdered, ListTodo, ListVideo, LoaderCircle, Lock, LogIn, LogOut, Logs, Mail, MailCheck, MailX, MapPin, MapPinned, Maximize, Megaphone, MemoryStick, Menu, MessageSquare, MessageSquareWarning, MessagesSquare, Minimize, Minimize2, Minus, Monitor, MonitorDown, MonitorPlay, MonitorSmartphone, Moon, Music, Network, NotebookText, PaintBucket, PanelLeft, PanelLeftClose, PanelLeftOpen, Paperclip, PartyPopper, Pause, PcCase, Pencil, PencilLine, Phone, Pin, Play, PlugZap, Plus, Power, Printer, QrCode, Redo2, RefreshCw, Rocket, RotateCcw, RotateCcwSquare, Route, Save, Scale, ScanEye, Search, Send, Server, Settings, Settings2, Share2, Sheet, Shield, ShieldOff, ShieldUser, Smartphone, Sparkles, Square, SquareChevronRight, SquareCode, SquareDashed, SquarePen, SquareSplitHorizontal, SquareTerminal, Star, Store, Sun, Tag, Terminal, TextCursorInput, Trash2, TriangleAlert, Undo2, UndoDot, Unlink, Unplug, Upload, User, UserCheck, UserLock, UserMinus, UserPlus, UserX, Users, Video, Wallet, WandSparkles, Waypoints, Webhook, Wrench, X, Zap, ZoomIn, ZoomOut } from "lucide-react";
+import { Activity, Archive, ArrowDown, ArrowDownWideNarrow, ArrowLeft, ArrowLeftRight, ArrowRight, ArrowUp, ArrowUpDown, ArrowUpNarrowWide, AtSign, BadgeCheck, Ban, BanknoteX, Bell, BellOff, BellRing, BookUser, Bot, Boxes, Braces, Brain, BrainCircuit, Briefcase, Building2, Calendar, CalendarClock, CalendarSync, CalendarX, Camera, ChartLine, ChartPie, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsDown, ChevronsDownUp, ChevronsUp, ChevronsUpDown, Circle, CircleAlert, CircleCheck, CircleDollarSign, CircleDot, CircleHelp, CircleMinus, CirclePlay, CircleSlash, CircleX, ClipboardCheck, ClipboardPen, Clock, Cloud, CloudCog, CloudOff, Code, CodeXml, Cog, Columns3, Copy, CopyPlus, CornerUpRight, Cpu, CreditCard, Database, DatabaseSearch, DatabaseZap, Disc3, DollarSign, Download, Earth, Ellipsis, EthernetPort, ExternalLink, Eye, EyeOff, File, FileArchive, FileCode, FileImage, FileJson, FileKey, FilePenLine, FileText, FileType, Files, Fingerprint, Flag, FlaskConical, Folder, FolderKanban, FolderOpen, FolderPlus, FolderTree, Folders, Funnel, FunnelX, Gauge, GitCommitHorizontal, GitFork, GitPullRequest, Globe, GraduationCap, Grid3x3, GripHorizontal, Group, Handshake, HardDrive, HatGlasses, Headset, Heart, HeartOff, History, Hourglass, House, IdCard, Inbox, Info, Key, KeyRound, Keyboard, Landmark, Languages, Layers, LayoutGrid, LibraryBig, Link, List, ListOrdered, ListTodo, ListVideo, LoaderCircle, Lock, LogIn, LogOut, Logs, Mail, MailCheck, MailX, MapPin, MapPinned, Maximize, Megaphone, MemoryStick, Menu, MessageSquare, MessageSquareWarning, MessagesSquare, Minimize, Minimize2, Minus, Monitor, MonitorDown, MonitorPlay, MonitorSmartphone, Moon, Music, Network, NotebookText, PaintBucket, PanelLeft, PanelLeftClose, PanelLeftOpen, Paperclip, PartyPopper, Pause, PcCase, Pencil, PencilLine, Phone, Pin, Play, PlugZap, Plus, Power, Printer, QrCode, Redo2, RefreshCw, Rocket, RotateCcw, RotateCcwSquare, Route, Save, Scale, ScanEye, Search, Send, Server, Settings, Settings2, Share2, Sheet, Shield, ShieldOff, ShieldUser, Smartphone, Sparkles, Square, SquareChevronRight, SquareCode, SquareDashed, SquarePen, SquareSplitHorizontal, SquareTerminal, Star, Store, Sun, Tag, Terminal, TextCursorInput, Trash2, TriangleAlert, Undo2, UndoDot, Unlink, Unplug, Upload, User, UserCheck, UserLock, UserMinus, UserPlus, UserX, Users, Video, Wallet, WandSparkles, Waypoints, Webhook, Wrench, X, Zap, ZoomIn, ZoomOut } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/icons.tsx
 var STROKE_WIDTH = 2;
@@ -142,6 +142,7 @@ var KeyIcon = /* @__PURE__ */ icon(Key);
 var KubernetesNamespaceIcon = /* @__PURE__ */ icon(SquareDashed);
 var LanguageIcon = /* @__PURE__ */ icon(Languages);
 var LegalIcon = /* @__PURE__ */ icon(Scale);
+var LibraryIcon = /* @__PURE__ */ icon(LibraryBig);
 var LicenseIcon = /* @__PURE__ */ icon(BadgeCheck);
 var LinkIcon = /* @__PURE__ */ icon(Link);
 var ListViewIcon = /* @__PURE__ */ icon(List);
@@ -187,6 +188,7 @@ var PowerIcon = /* @__PURE__ */ icon(Power);
 var PowershellIcon = /* @__PURE__ */ icon(SquareChevronRight);
 var PreviewIcon = /* @__PURE__ */ icon(ScanEye);
 var PrintIcon = /* @__PURE__ */ icon(Printer);
+var ProjectIcon = /* @__PURE__ */ icon(FolderKanban);
 var PublishIcon = /* @__PURE__ */ icon(Rocket);
 var PullRequestIcon = /* @__PURE__ */ icon(GitPullRequest);
 var QRCodeIcon = /* @__PURE__ */ icon(QrCode);
@@ -262,4 +264,4 @@ var ZipIcon = /* @__PURE__ */ icon(FileArchive);
 var ZoomInIcon = /* @__PURE__ */ icon(ZoomIn);
 var ZoomOutIcon = /* @__PURE__ */ icon(ZoomOut);
 //#endregion
-export { APIIcon, AccessIcon, AddIcon, AddProjectIcon, AddUserIcon, AgentIcon, AllocationIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, AttachmentIcon, AuthenticationIcon, BillingIcon, BriefcaseIcon, BucketIcon, BuildWorkflowIcon, CalendarIcon, CancelIcon, CelebrateIcon, CertificateIcon, ChangesRequestedIcon, ChartIcon, ChatIcon, CheckIcon, ChevronDoubleDownIcon, ChevronDoubleUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClipboardCheckIcon, ClockIcon, CloseIcon, CloudIcon, ClusterIcon, CodeIcon, CollapseIcon, ColumnsIcon, CommentIcon, CommitIcon, ComputeIcon, ConnectIcon, ContractIcon, CopyIcon, CustomizeIcon, DesktopIcon, DestroyIcon, DeviceIcon, DirectoryIcon, DisableCostIcon, DisableUserIcon, DisconnectIcon, DiskIcon, DisplayIcon, DownloadIcon, DragHandleIcon, DuplicateIcon, EditIcon, EditorIcon, EducationIcon, EnableCostIcon, EnableUserIcon, EndpointIcon, ErrorCheckmark, ErrorIcon, EventsIcon, ExpandIcon, ExpandVerticalIcon, ExpiredIcon, ExpiringIcon, ExpressionIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FailIcon, FavoriteIcon, FavoriteOutlineIcon, FeaturedIcon, FileIcon, FileTextIcon, FilesIcon, FilesystemIcon, FilterClearIcon, FilterIcon, FlaggedIcon, FlaskIcon, FolderIcon, FolderOpenIcon, FolderTreeIcon, ForbiddenIcon, ForkIcon, GearsIcon, GlobeIcon, GovernmentIcon, GraphIcon, GridIcon, HealthMonitoringIcon, HelpIcon, HistoryIcon, HomeIcon, IdCardIcon, ImageIcon, ImpersonateIcon, InboxIcon, IndexIcon, InfoIcon, InfrastructureLayersIcon, InputFormIcon, InstallIcon, InstanceIcon, InstanceTypeIcon, IpAddressIcon, IssueIcon, JobIcon, JsonIcon, KeyIcon, KeyboardIcon, KubernetesNamespaceIcon, LanguageIcon, LegalIcon, LicenseIcon, LinkIcon, ListViewIcon, LockIcon, MFAIcon, MachineImageIcon, MailFailedIcon, MailIcon, MailVerifiedIcon, MapPinIcon, MarketplaceIcon, MatrixIcon, MegaphoneIcon, MigrationIcon, MinimizeIcon, MinusIcon, MlIcon, MoneyIcon, MoonIcon, MoreIcon, MusicIcon, MuteIcon, NavigationIcon, NetworkInterfaceIcon, NewChatIcon, NodeIcon, NotRunningIcon, NotebookIcon, NotificationIcon, OnboardingIcon, OpenInNewGraphIcon, OrganizationIcon, PartnerIcon, PasswordIcon, PauseIcon, PdfIcon, PendingIcon, PhoneIcon, PieChartIcon, PinFilledIcon, PinIcon, PowerIcon, PowershellIcon, PreviewIcon, PrintIcon, PublishIcon, PullRequestIcon, QRCodeIcon, QueueIcon, QuotaIcon, RedoIcon, RefreshIcon, RemoveIcon, RemoveUserIcon, RenameIcon, RenewIcon, ResetLayoutIcon, ResourceGroupIcon, ResourceIcon, RetryIcon, RoleIcon, RollbackIcon, RunWorkflowIcon, RunningIcon, RunsIcon, SaveIcon, SchedulerIcon, ScriptIcon, SearchIcon, SendIcon, ServiceIcon, SessionIcon, SettingsIcon, ShareIcon, ShieldIcon, ShieldOffIcon, ShrinkIcon, SidebarCloseIcon, SidebarIcon, SidebarOpenIcon, SignInIcon, SignOutIcon, SkipIcon, SnapshotIcon, SortDownIcon, SortUnsortedIcon, SortUpIcon, SparklesIcon, SplitIcon, SpreadsheetIcon, StartIcon, StopIcon, StorageIcon, SubdomainIcon, SuccessCheckmark, SuccessIcon, SunIcon, SupportIcon, SwapIcon, TagIcon, TerminalIcon, ThinkingIcon, TodoIcon, TrashIcon, TunnelIcon, UndoIcon, UnfavoriteIcon, UnlinkIcon, UnmuteIcon, UploadIcon, UserIcon, UserWorkspaceIcon, UsersIcon, VideoIcon, WarningIcon, WebhookIcon, ZapIcon, ZipIcon, ZoomInIcon, ZoomOutIcon };
+export { APIIcon, AccessIcon, AddIcon, AddProjectIcon, AddUserIcon, AgentIcon, AllocationIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, AttachmentIcon, AuthenticationIcon, BillingIcon, BriefcaseIcon, BucketIcon, BuildWorkflowIcon, CalendarIcon, CancelIcon, CelebrateIcon, CertificateIcon, ChangesRequestedIcon, ChartIcon, ChatIcon, CheckIcon, ChevronDoubleDownIcon, ChevronDoubleUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClipboardCheckIcon, ClockIcon, CloseIcon, CloudIcon, ClusterIcon, CodeIcon, CollapseIcon, ColumnsIcon, CommentIcon, CommitIcon, ComputeIcon, ConnectIcon, ContractIcon, CopyIcon, CustomizeIcon, DesktopIcon, DestroyIcon, DeviceIcon, DirectoryIcon, DisableCostIcon, DisableUserIcon, DisconnectIcon, DiskIcon, DisplayIcon, DownloadIcon, DragHandleIcon, DuplicateIcon, EditIcon, EditorIcon, EducationIcon, EnableCostIcon, EnableUserIcon, EndpointIcon, ErrorCheckmark, ErrorIcon, EventsIcon, ExpandIcon, ExpandVerticalIcon, ExpiredIcon, ExpiringIcon, ExpressionIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FailIcon, FavoriteIcon, FavoriteOutlineIcon, FeaturedIcon, FileIcon, FileTextIcon, FilesIcon, FilesystemIcon, FilterClearIcon, FilterIcon, FlaggedIcon, FlaskIcon, FolderIcon, FolderOpenIcon, FolderTreeIcon, ForbiddenIcon, ForkIcon, GearsIcon, GlobeIcon, GovernmentIcon, GraphIcon, GridIcon, HealthMonitoringIcon, HelpIcon, HistoryIcon, HomeIcon, IdCardIcon, ImageIcon, ImpersonateIcon, InboxIcon, IndexIcon, InfoIcon, InfrastructureLayersIcon, InputFormIcon, InstallIcon, InstanceIcon, InstanceTypeIcon, IpAddressIcon, IssueIcon, JobIcon, JsonIcon, KeyIcon, KeyboardIcon, KubernetesNamespaceIcon, LanguageIcon, LegalIcon, LibraryIcon, LicenseIcon, LinkIcon, ListViewIcon, LockIcon, MFAIcon, MachineImageIcon, MailFailedIcon, MailIcon, MailVerifiedIcon, MapPinIcon, MarketplaceIcon, MatrixIcon, MegaphoneIcon, MigrationIcon, MinimizeIcon, MinusIcon, MlIcon, MoneyIcon, MoonIcon, MoreIcon, MusicIcon, MuteIcon, NavigationIcon, NetworkInterfaceIcon, NewChatIcon, NodeIcon, NotRunningIcon, NotebookIcon, NotificationIcon, OnboardingIcon, OpenInNewGraphIcon, OrganizationIcon, PartnerIcon, PasswordIcon, PauseIcon, PdfIcon, PendingIcon, PhoneIcon, PieChartIcon, PinFilledIcon, PinIcon, PowerIcon, PowershellIcon, PreviewIcon, PrintIcon, ProjectIcon, PublishIcon, PullRequestIcon, QRCodeIcon, QueueIcon, QuotaIcon, RedoIcon, RefreshIcon, RemoveIcon, RemoveUserIcon, RenameIcon, RenewIcon, ResetLayoutIcon, ResourceGroupIcon, ResourceIcon, RetryIcon, RoleIcon, RollbackIcon, RunWorkflowIcon, RunningIcon, RunsIcon, SaveIcon, SchedulerIcon, ScriptIcon, SearchIcon, SendIcon, ServiceIcon, SessionIcon, SettingsIcon, ShareIcon, ShieldIcon, ShieldOffIcon, ShrinkIcon, SidebarCloseIcon, SidebarIcon, SidebarOpenIcon, SignInIcon, SignOutIcon, SkipIcon, SnapshotIcon, SortDownIcon, SortUnsortedIcon, SortUpIcon, SparklesIcon, SplitIcon, SpreadsheetIcon, StartIcon, StopIcon, StorageIcon, SubdomainIcon, SuccessCheckmark, SuccessIcon, SunIcon, SupportIcon, SwapIcon, TagIcon, TerminalIcon, ThinkingIcon, TodoIcon, TrashIcon, TunnelIcon, UndoIcon, UnfavoriteIcon, UnlinkIcon, UnmuteIcon, UploadIcon, UserIcon, UserWorkspaceIcon, UsersIcon, VideoIcon, WarningIcon, WebhookIcon, ZapIcon, ZipIcon, ZoomInIcon, ZoomOutIcon };

package/dist/index.d.ts

@@ -1,19 +1,19 @@
 export { ActionMenu } from './components/ActionMenu.js';
+export { AppLink, type AppLinkProps, isPlainClick, type LinkTarget, } from './components/AppLink.js';
 export { Avatar, type AvatarProps, type AvatarSize, type AvatarStatus, avatarInitials, } from './components/Avatar.js';
-export { BreadcrumbProvider, type IBreadcrumbItem, useBreadcrumb, useClearBreadcrumbs, useHideBreadcrumbs, useSetBreadcrumbs, useSetDefaultBreadcrumbs, } from './components/Breadcrumbs.js';
 export { Button, type ButtonProps, MethodButton } from './components/Button.js';
 export { type ButtonSize, type ButtonStyle, type ButtonVariant, buttonClasses, } from './components/buttonClasses.js';
-export { default as Callout } from './components/Callout.js';
-export { Card, CardHeader, type CardProps } from './components/Card.js';
+export { Callout, type CalloutProps, type CalloutTone } from './components/Callout.js';
+export { Card, CardHeader, type CardHeaderProps, type CardProps } from './components/Card.js';
 export { Checkbox, CheckboxGroup, type CheckboxProps } from './components/Checkbox.js';
 export { ColorInput, type ColorInputProps } from './components/ColorInput.js';
 export { Autocomplete, type AutocompleteProps, Combobox, type ComboboxGroup, type ComboboxItem, type ComboboxItems, type ComboboxProps, } from './components/Combobox.js';
-export { ConfirmModal } from './components/ConfirmModal.js';
+export { ConfirmModal, type ConfirmModalProps } from './components/ConfirmModal.js';
 export { type OpenMenu, type OpenMenuOptions, useContextMenu, } from './components/ContextMenu.js';
-export { CopyCodeBlock, default as CopyToClipboard } from './components/CopyToClipboard.js';
+export { CopyButton, type CopyButtonProps, CopyCodeBlock, type CopyCodeBlockProps, } from './components/CopyButton.js';
 export { CreateModal, CreateModalSelect, CreateModalSwitch, } from './components/CreateModal.js';
 export { DatePicker, type DatePickerProps } from './components/DatePicker.js';
-export { DescriptionListItem, default as DescriptionList } from './components/DescriptionList.js';
+export { DescriptionListGroup, DescriptionListItem, type DescriptionListItemProps, type DescriptionListProps, type DescriptionListVariant, default as DescriptionList, } from './components/DescriptionList.js';
 export { Disclosure, DisclosurePanel, type DisclosureProps } from './components/Disclosure.js';
 export { Drawer, type DrawerProps } from './components/Drawer.js';
 export { EmptyState, type EmptyStateProps } from './components/EmptyState.js';
@@ -32,14 +32,15 @@ export { default as Markdown } from './components/Markdown.js';
 export { MenuCheckboxItem, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, type MenuPopupProps, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger, } from './components/Menu.js';
 export { type MenuAction, type MenuDivider, MenuEntries, type MenuEntry, MenuFilter, type MenuSearch, type MenuSubmenu, menuDivider, } from './components/MenuEntries.js';
 export { type BarSize, type BarTone, levelTone, Meter, ProgressBar, } from './components/Meter.js';
-export { Modal, ModalDescription, type ModalProps, ModalTitle, modalPanelClassName, } from './components/Modal.js';
+export { Modal, ModalDescription, type ModalProps, type ModalSize, ModalTitle, modalPanelClassName, } from './components/Modal.js';
 export { NumberInput, type NumberInputProps } from './components/NumberInput.js';
 export { OneTimeCodeInput, type OneTimeCodeInputProps } from './components/OneTimeCodeInput.js';
-export { Overview } from './components/Overview.js';
-export { BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction, HeaderActionMenu, HeaderAddButton, HeaderEditButton, PageHeader, type PageHeaderBreadcrumb, type PageHeaderCrumb, } from './components/PageHeader.js';
+export { Overview, type OverviewProps } from './components/Overview.js';
+export { type Breadcrumb, PageHeader, PageHeaderBar, type PageHeaderBarProps, type PageHeaderProps, PageHeaderProvider, } from './components/PageHeader.js';
+export { PageHeaderAction, type PageHeaderActionProps, PageHeaderAddButton, type PageHeaderAddButtonProps, PageHeaderMenu, } from './components/PageHeaderAction.js';
 export { PAGE_SIZES, Pagination, type PaginationProps } from './components/Pagination.js';
 export { Popover, PopoverClose, type PopoverProps, useClosePopover, } from './components/Popover.js';
-export { type PersistedStateHook, type RunFileResult, type UIData, type UILinkComponent, type UINavigation, UIProvider, type UISlots, type UIStrings, useNavigation, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRunFile, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader, type WorkflowEngineSource, type WorkflowJsonRef, } from './components/Provider.js';
+export { type PersistedStateHook, type RunFileResult, type UIData, type UILinkComponent, type UINavigation, UIProvider, type UIProviderProps, type UISlots, type UIStringOverrides, type UIStrings, useNavigation, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRunFile, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader, type WorkflowEngineSource, type WorkflowJsonRef, } from './components/Provider.js';
 export { Radio, RadioGroup, type RadioProps } from './components/Radio.js';
 export { RefreshButton, type RefreshButtonProps } from './components/RefreshButton.js';
 export { RequiredMark } from './components/RequiredMark.js';
@@ -53,11 +54,10 @@ export { SettingModeOption } from './components/SettingModeOption.js';
 export { SettingRow, SettingsCard, type SettingsCardProps, SettingsHeading, } from './components/SettingsCard.js';
 export { LoadingRegion, Skeleton, type SkeletonProps } from './components/Skeleton.js';
 export { Slider, type SliderProps } from './components/Slider.js';
-export { default as Sort, type TDirection } from './components/Sort.js';
 export { type BadgeVariant, StatusBadge, StatusDot, statusTextClass, } from './components/StatusBadge.js';
 export { Switch, type SwitchProps } from './components/Switch.js';
 export { isTextEntryContext, useShortcutKey } from './components/shortcutKey.js';
-export { CompactTable, Table } from './components/Table.js';
+export { type SortDirection, Table, type TableDensity } from './components/Table.js';
 export { type TabItem, TabPanel, Tabs, type TabsProps } from './components/Tabs.js';
 export { ThemeEditor, type ThemeEditorProps, ThemePreview } from './components/ThemeEditor.js';
 export { type ToastAction, type Toaster, type ToastOptions, type ToastTone, type ToastUpdate, toast, } from './components/Toast.js';