@parallelworks/ui 0.1.0 → 0.2.0

package/dist/chunks/Tooltip-WgbiC_nd.js

@@ -0,0 +1,71 @@
+import { TooltipIcon } from "../icons.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1 } from "react";
+import { Tooltip } from "react-tooltip";
+//#region src/components/Tooltip.tsx
+var TOOLTIP_ID = "global-tooltip";
+var linkRegex = /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g;
+function formatLine(line) {
+	const nodes = [];
+	let last = 0;
+	for (const match of line.matchAll(linkRegex)) {
+		if (match.index > last) nodes.push(line.slice(last, match.index));
+		nodes.push(/* @__PURE__ */ jsx("a", {
+			href: match[2],
+			target: "_blank",
+			rel: "noopener noreferrer",
+			className: "underline",
+			children: match[1]
+		}, match.index));
+		last = match.index + match[0].length;
+	}
+	if (last < line.length) nodes.push(line.slice(last));
+	return nodes;
+}
+/** Tooltip text can come from untrusted sources (workflow YAML), so all markup is literal text — only `[text](url)` links and newlines are parsed. */
+function formatTooltipContent(content) {
+	if (typeof content !== "string") return content || null;
+	if (!content) return null;
+	return content.split(/<br\s*\/?>|\n/i).map((line, idx) => /* @__PURE__ */ jsxs(Fragment$1, { children: [idx > 0 && /* @__PURE__ */ jsx("br", {}), formatLine(line)] }, idx));
+}
+function KbdShortcut({ keys }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "inline-flex items-center gap-1 align-middle",
+		children: keys.split("+").map((part) => part.trim()).filter(Boolean).map((part, idx) => /* @__PURE__ */ jsxs(Fragment$1, { children: [idx > 0 && /* @__PURE__ */ jsx("span", {
+			className: "opacity-60 text-[11px]",
+			children: "+"
+		}), /* @__PURE__ */ jsx("kbd", {
+			className: "inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded border border-white/30 bg-white/10 font-sans text-[11px] font-semibold leading-none",
+			children: part
+		})] }, `${part}-${idx}`))
+	});
+}
+/** Singleton rendered at layout root; anchors opt in via data-tooltip-id={TOOLTIP_ID}, data-tooltip-content, and data-tooltip-shortcut. */
+function GlobalTooltip() {
+	return /* @__PURE__ */ jsx(Tooltip, {
+		id: TOOLTIP_ID,
+		className: "max-w-lg break-words config-tips normal-case text-left z-[10000]",
+		place: "top",
+		render: ({ content, activeAnchor }) => {
+			const body = formatTooltipContent(content);
+			const shortcut = activeAnchor?.getAttribute("data-tooltip-shortcut");
+			if (!shortcut) return body;
+			return /* @__PURE__ */ jsxs("span", {
+				className: "inline-flex items-center gap-2",
+				children: [body, /* @__PURE__ */ jsx(KbdShortcut, { keys: shortcut })]
+			});
+		}
+	});
+}
+function TooltipInfo({ text, className = "", children, place = "top", tabIndex }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-tooltip-id": TOOLTIP_ID,
+		"data-tooltip-content": text,
+		"data-tooltip-place": place,
+		className,
+		tabIndex,
+		children: children || /* @__PURE__ */ jsx(TooltipIcon, { className: "tooltip" })
+	});
+}
+//#endregion
+export { formatTooltipContent as i, TOOLTIP_ID as n, TooltipInfo as r, GlobalTooltip as t };

package/dist/chunks/lib-DTgL8klR.js

@@ -0,0 +1,191 @@
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/form/FieldWrapper.tsx
+function FieldWrapper({ label, tooltipComponent, description, labelPosition = "left", spaceCompact = false, optional = false, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("flex w-full", labelPosition === "left" ? "items-start" : "items-left flex-col"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx("relative", labelPosition === "left" ? "form-label" : "form-label-top", spaceCompact && "form-label-compact"),
+			children: [
+				label,
+				!optional && /* @__PURE__ */ jsx("span", { children: "*" }),
+				tooltipComponent
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "w-full",
+			children: [children, description && /* @__PURE__ */ jsx("div", {
+				className: "text-xs theme-muted-text mt-1 leading-relaxed",
+				children: description
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/form/utils/secondaryField.ts
+function findSecondaryOption(options, value) {
+	for (const candidate of options) {
+		if (!candidate || typeof candidate !== "object") continue;
+		const option = candidate;
+		if (option.value === value) return option;
+		if (Array.isArray(option.options)) {
+			const nestedOption = findSecondaryOption(option.options, value);
+			if (nestedOption) return nestedOption;
+		}
+	}
+}
+function applySecondaryField(secondaryField, secondaryValue, setFieldValue) {
+	if (secondaryField === void 0 || secondaryValue === void 0) return;
+	const fields = Array.isArray(secondaryField) ? secondaryField : [secondaryField];
+	const values = Array.isArray(secondaryValue) ? secondaryValue : [secondaryValue];
+	fields.forEach((field, index) => {
+		setFieldValue(field, values[index]);
+	});
+}
+//#endregion
+//#region src/form/lib.ts
+/**
+* Drops a schema flag the expression parser could not resolve. workflow.schema.json types
+* `optional`/`hidden`/`ignore` as ["string", "boolean"], so a flag whose expression depends
+* on something unavailable at form-render time (a list `[index]` outside a row, `needs.`,
+* `env.`, a secret `var.`) arrives as the raw `${{…}}` string. That string is truthy, which
+* inverts each flag's documented `false` default. Returning undefined lets the caller apply
+* that default instead of reading an expression it never evaluated as "yes".
+*/
+function resolvedFlag(value) {
+	return typeof value === "string" && value.includes("${{") ? void 0 : value;
+}
+function enforceOneMustBeTrue(items, options, promoteIndex) {
+	if (items.length === 0) return items;
+	const clampedIndex = Math.max(0, Math.min(promoteIndex, items.length - 1));
+	const oneMustBeTrueFields = Object.keys(options).filter((key) => typeof options[key] === "object" && options[key] !== null && "one_must_be_true" in options[key] && options[key].one_must_be_true);
+	for (const fieldKey of oneMustBeTrueFields) {
+		const fieldSchema = options[fieldKey];
+		if (typeof fieldSchema === "object" && fieldSchema && "options" in fieldSchema) {
+			const opts = fieldSchema.options;
+			const trueOption = typeof opts === "object" && opts && !Array.isArray(opts) && "onOption" in opts ? opts.onOption || true : true;
+			if (!items.some((item) => item[fieldKey] === trueOption)) items[clampedIndex][fieldKey] = trueOption;
+		}
+	}
+	return items;
+}
+function flattenGroups(schema) {
+	if (!schema) return {};
+	let flattenedFields = {};
+	Object.keys(schema).forEach((key) => {
+		if (schema[key].type === "group") {
+			const flattenedGroup = flattenGroups(schema[key].options);
+			flattenedFields = {
+				...flattenedFields,
+				...flattenedGroup
+			};
+		} else if (schema[key].type === "object") {
+			const flattenedGroup = flattenGroups(schema[key].options);
+			flattenedFields = {
+				...flattenedFields,
+				[key]: flattenedGroup
+			};
+		} else flattenedFields[key] = schema[key];
+	});
+	return flattenedFields;
+}
+/**Not a pure function. Edits 'obj' passed into function */
+function impureSetValueFromPath(obj, path, value) {
+	const pathArray = path.split(".");
+	if (pathArray.length === 1) {
+		obj[pathArray[0]] = value;
+		return;
+	}
+	let current = obj;
+	for (let i = 0; i < pathArray.length - 1; i++) {
+		const segment = pathArray[i];
+		const arrayMatch = segment.match(/^(.+)\[(\d+)\]$/);
+		if (arrayMatch) {
+			const key = arrayMatch[1];
+			const index = Number(arrayMatch[2]);
+			if (!current[key]) current[key] = [];
+			if (!current[key][index]) current[key][index] = {};
+			current = current[key][index];
+		} else {
+			if (!current[segment]) current[segment] = {};
+			current = current[segment];
+		}
+	}
+	current[pathArray[pathArray.length - 1]] = value;
+}
+function initializeValues(options, srcData = {}, ignoreDefaultStrings = false) {
+	if (!options) return;
+	const data = structuredClone(srcData);
+	return Object.keys(options).reduce((acc, field) => {
+		if (field.startsWith("$")) return acc;
+		if (options[field].type === "group") {
+			const values = initializeValues(options[field].options, data);
+			if (!values) return acc;
+			Object.keys(values).forEach((key) => {
+				acc[key] = data[key] ?? values[key];
+			});
+			return acc;
+		}
+		if (options[field].type === "step") {
+			if (options.$meta?.wizard?.flatten !== false) {
+				const values = initializeValues(options[field].options, data);
+				if (!values) return acc;
+				Object.keys(values).forEach((key) => {
+					acc[key] = data[key] ?? values[key];
+				});
+			} else acc[field] = initializeValues(options[field].options, data[field] || {});
+			return acc;
+		}
+		if (options[field].type === "object") {
+			acc[field] = initializeValues(options[field].options, data[field] || {});
+			return acc;
+		}
+		if (options[field].type === "list") {
+			if (options[field].options === "string") {
+				acc[field] = Array.isArray(data[field]) ? [...data[field]] : [];
+				return acc;
+			}
+			const arr = [];
+			if (data[field]) for (let i = 0; i < data[field].length; i++) arr.push(initializeValues(options[field].options, data[field][i] || {}));
+			acc[field] = arr;
+			return acc;
+		}
+		if (data[field] !== void 0) {
+			acc[field] = data[field];
+			if ((options[field].type === "dropdown" || options[field].type === "storage") && options[field].secondaryField && options[field].options && Array.isArray(options[field].options)) {
+				const option = findSecondaryOption(options[field].options, data[field]);
+				applySecondaryField(options[field].secondaryField, option?.secondaryValue, (secondaryField, secondaryValue) => {
+					if (!(options[field].type === "storage" && Object.prototype.hasOwnProperty.call(options, secondaryField) && srcData[secondaryField] !== void 0)) impureSetValueFromPath(acc, secondaryField, secondaryValue);
+				});
+			}
+			return acc;
+		}
+		if (options[field].type === "label") return acc;
+		if (options[field].optional && options[field].default === void 0) return acc;
+		acc[field] = "";
+		if (options[field].autoselect) acc[field] = void 0;
+		if (options[field].type === "boolean") if (options[field].options?.offOption && options[field].options?.onOption) acc[field] = options[field].options.offOption;
+		else acc[field] = false;
+		if (options[field].type === "dropdown") {
+			if (options[field].options && Array.isArray(options[field].options) && options[field].options.length > 0) acc[field] = options[field].options[0].value;
+			if (options[field].type === "dropdown" && options[field].secondaryField && options[field].options && Array.isArray(options[field].options)) {
+				const option = options[field].options.find((option) => option.value === data[field]);
+				const secondaryField = Array.isArray(options[field].secondaryField) ? options[field].secondaryField : [options[field].secondaryField];
+				const secondaryValue = Array.isArray(option?.secondaryValue) ? option?.secondaryValue : [option?.secondaryValue];
+				secondaryField.forEach((field, index) => {
+					impureSetValueFromPath(data, field, secondaryValue[index]);
+					impureSetValueFromPath(acc, field, secondaryValue[index]);
+				});
+			}
+		}
+		if (options[field].type === "multi-dropdown" || options[field].type === "checkbox-group") acc[field] = [];
+		if (options[field].default !== void 0) {
+			const dflt = options[field].default;
+			const isPwResource = typeof dflt === "string" && dflt.startsWith("pw://");
+			acc[field] = options[field].type === "string" || ignoreDefaultStrings && !isPwResource && (options[field].type === "textarea" || options[field].type === "compute-clusters" || options[field].type === "compute-resources") ? "" : dflt;
+		}
+		if (options[field].prefillDefault && options[field].default !== void 0) acc[field] = options[field].default;
+		return acc;
+	}, data);
+}
+//#endregion
+export { resolvedFlag as a, FieldWrapper as c, initializeValues as i, flattenGroups as n, applySecondaryField as o, impureSetValueFromPath as r, findSecondaryOption as s, enforceOneMustBeTrue as t };

package/dist/chunks/workers-Cjfjb8E7.js

@@ -0,0 +1,119 @@
+//#region src/editor/themes.ts
+function expandShorthandHex(color) {
+	return /^#([0-9a-fA-F]{3,4})$/.test(color) ? "#" + color.slice(1).split("").map((c) => c + c).join("") : color;
+}
+function normalizeThemeColors(colors) {
+	return Object.fromEntries(Object.entries(colors).map(([key, value]) => [key, expandShorthandHex(value)]));
+}
+function themeVar(name, fallback) {
+	if (typeof window === "undefined") return fallback;
+	return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+}
+function createEditorThemes() {
+	const dark = {
+		foreground: themeVar("--theme-app", "#e6edf3"),
+		background: themeVar("--theme-panel-bg", "#161b22"),
+		border: themeVar("--theme-border", "#30363d"),
+		lineHighlight: themeVar("--theme-muted-panel-bg", "#21262d"),
+		lineNumber: themeVar("--theme-muted-text-color", "#8b949e"),
+		selection: themeVar("--theme-element", "#2f81f7"),
+		selectionFg: themeVar("--theme-element-text", "#ffffff"),
+		disabledBg: themeVar("--theme-input-disabled-bg", "#1c2128"),
+		disabledFg: themeVar("--theme-muted-text-color", "#8b949e")
+	};
+	const light = {
+		disabledBg: themeVar("--theme-input-disabled-bg", "#f3f4f6"),
+		disabledFg: themeVar("--theme-muted-text-color", "#6c757d"),
+		border: themeVar("--theme-border", "#d1d5db"),
+		selection: themeVar("--theme-element", "#2f81f7"),
+		selectionFg: themeVar("--theme-element-text", "#ffffff")
+	};
+	return {
+		"app-dark": {
+			base: "vs-dark",
+			inherit: true,
+			rules: [],
+			colors: {
+				"editor.foreground": dark.foreground,
+				"editor.background": dark.background,
+				"editor.border": dark.border,
+				"editorCursor.foreground": dark.foreground,
+				"editor.lineHighlightBackground": dark.lineHighlight,
+				"editorLineNumber.foreground": dark.lineNumber,
+				"editor.selectionBackground": dark.selection,
+				"editor.selectionForeground": dark.selectionFg
+			}
+		},
+		"app-dark-disabled": {
+			base: "vs-dark",
+			inherit: true,
+			rules: [],
+			colors: {
+				"editor.foreground": dark.disabledFg,
+				"editor.background": dark.disabledBg,
+				"editor.border": dark.border,
+				"editorCursor.foreground": "transparent",
+				"editor.lineHighlightBackground": dark.disabledBg,
+				"editorLineNumber.foreground": dark.disabledFg,
+				"editor.selectionBackground": dark.selection,
+				"editor.selectionForeground": dark.selectionFg
+			}
+		},
+		"app-light-disabled": {
+			base: "vs",
+			inherit: true,
+			rules: [],
+			colors: {
+				"editor.foreground": light.disabledFg,
+				"editor.background": light.disabledBg,
+				"editor.border": light.border,
+				"editorCursor.foreground": "transparent",
+				"editor.lineHighlightBackground": light.disabledBg,
+				"editorLineNumber.foreground": light.disabledFg,
+				"editor.selectionBackground": light.selection,
+				"editor.selectionForeground": light.selectionFg
+			}
+		}
+	};
+}
+function defineEditorThemes(monacoEditor) {
+	const themes = createEditorThemes();
+	for (const [name, themeData] of Object.entries(themes)) monacoEditor.defineTheme(name, {
+		...themeData,
+		colors: normalizeThemeColors(themeData.colors)
+	});
+}
+function getThemeName(isDark, disabled) {
+	if (isDark) return disabled ? "app-dark-disabled" : "app-dark";
+	return disabled ? "app-light-disabled" : "vs";
+}
+//#endregion
+//#region src/editor/workers.ts
+var monacoEnvironment = { getWorker(_moduleId, label) {
+	if (label === "json") return new Worker(new URL(
+		/* @vite-ignore */
+		"/assets/json.worker-8ytS02vz.js",
+		"" + import.meta.url
+	), { type: "module" });
+	if (label === "yaml") return new Worker(new URL(
+		/* @vite-ignore */
+		"/assets/yaml.worker-DJC-VUcv.js",
+		"" + import.meta.url
+	), { type: "module" });
+	return new Worker(new URL(
+		/* @vite-ignore */
+		"/assets/editor.worker-CuBRIwi-.js",
+		"" + import.meta.url
+	), { type: "module" });
+} };
+/**
+* Points window.MonacoEnvironment at the bundled workers. Idempotent, and a
+* host that already configured its own MonacoEnvironment wins — the editor
+* calls this on first load only when nothing is configured.
+*/
+function setupMonacoWorkers() {
+	if (window.MonacoEnvironment) return;
+	window.MonacoEnvironment = monacoEnvironment;
+}
+//#endregion
+export { defineEditorThemes as n, getThemeName as r, setupMonacoWorkers as t };

package/dist/components/CollapsiblePanel.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+interface IControlledCollapsiblePanelProps {
+    title?: string | React.ReactNode | ((open: boolean, setOpen: React.Dispatch<React.SetStateAction<boolean>>) => React.ReactNode);
+    children: React.ReactNode;
+    open: boolean | undefined;
+    setOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+    onClick?: () => void;
+    wrapperElement?: React.ElementType;
+    shown?: boolean;
+    setShown?: (shown: boolean) => void;
+    customizedButton?: React.ReactNode;
+    className?: string;
+}
+export declare function ControlledCollapsiblePanel({ title, children, open, setOpen, onClick, wrapperElement, customizedButton, className, }: IControlledCollapsiblePanelProps): React.JSX.Element;
+export declare function UncontrolledCollapsiblePanel({ title, children, onClick, wrapperElement, initialState, className, customizedButton, }: Omit<IControlledCollapsiblePanelProps, 'setOpen' | 'open'> & {
+    initialState?: boolean;
+}): React.JSX.Element;
+type MaybeCollapsibleProps = {
+    className?: string;
+    initialState?: boolean;
+    children: React.ReactNode;
+    title?: React.ReactNode;
+    customizedButton?: React.ReactNode;
+    collapsible?: boolean;
+};
+export declare function MaybeCollapsible({ className, initialState, children, title, customizedButton, collapsible, }: MaybeCollapsibleProps): React.JSX.Element;
+export {};

package/dist/components/CopyToClipboard.d.ts

@@ -0,0 +1,17 @@
+interface ICopyToClipboardProps {
+    as?: 'div' | 'button';
+    text: string;
+    className?: string;
+    children?: React.ReactNode;
+    showIcon?: boolean;
+}
+export default function CopyToClipboard({ as, text, className, children, showIcon, }: ICopyToClipboardProps): import("react").JSX.Element;
+interface CopyCodeBlockProps {
+    textToCopy: string;
+    children: React.ReactNode;
+    secret?: boolean;
+    isRevealed?: boolean;
+    onRevealToggle?: () => void;
+}
+export declare function CopyCodeBlock({ textToCopy, children, secret, isRevealed, onRevealToggle, }: CopyCodeBlockProps): import("react").JSX.Element;
+export {};

package/dist/components/Dropdown.d.ts

@@ -0,0 +1,24 @@
+import { type SetStateAction } from 'react';
+import { type IOptions, type ICategory } from './dropdownUtils.js';
+export interface IProps {
+    options: (ICategory | IOptions | string)[];
+    onActiveChange?: (option: unknown) => void;
+    onChange: React.Dispatch<SetStateAction<unknown>>;
+    onRangeChange?: (range: {
+        min: number;
+        max: number;
+    }) => void;
+    value: IOptions | string | Record<string, unknown>;
+    id?: string;
+    ariaLabel?: string;
+    className?: string;
+    wrapperClassName?: string;
+    textBoxClassName?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    loading?: boolean;
+    allowCustomValue?: boolean;
+    customValueLabel?: string;
+    portalEl?: HTMLElement;
+}
+export default function Dropdown(props: IProps): import("react").JSX.Element;

package/dist/components/Indicator.d.ts

@@ -0,0 +1,4 @@
+import type { TStatus } from '@parallelworks/workflow-parser';
+export declare function Indicator({ status }: {
+    status: TStatus;
+}): import("react").JSX.Element;

package/dist/components/Listbox.d.ts

@@ -0,0 +1,18 @@
+interface ICustomListboxProps {
+    /** Only used visually to inform what you're selecting */
+    type: string;
+    options: {
+        label: string;
+        secondaryLabel?: string;
+        icon?: React.ReactNode;
+        value: any;
+        selected: boolean;
+    }[];
+    closeOnSelect?: boolean;
+    allowSearch?: boolean;
+    handleOptionSelected: (value: any) => void;
+    className?: string;
+    invalid?: boolean;
+}
+export default function CustomListbox({ options, handleOptionSelected, type, allowSearch, closeOnSelect, className, invalid, }: ICustomListboxProps): import("react").JSX.Element;
+export {};

package/dist/components/Markdown.d.ts

@@ -0,0 +1,7 @@
+import type { ControlsConfig } from 'streamdown';
+export interface MarkdownProps {
+    children: string;
+    isStreaming?: boolean;
+    controls?: ControlsConfig;
+}
+export default function Markdown(props: MarkdownProps): import("react").JSX.Element;

package/dist/components/MarkdownImpl.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdownProps } from './Markdown.js';
+export default function Markdown({ children, isStreaming, controls, }: MarkdownProps): import("react").JSX.Element;

package/dist/components/MultiSelect.d.ts

@@ -0,0 +1,19 @@
+import { type ICategory, type IOptions } from './dropdownUtils.js';
+type MultiSelectDropdownProps<T = string> = {
+    options: (ICategory<T> | IOptions<T> | string)[];
+    value: T[];
+    onChange: (next: T[]) => void;
+    id?: string;
+    className?: string;
+    wrapperClassName?: string;
+    textBoxClassName?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    loading?: boolean;
+    searchable?: boolean;
+    maxTagCount?: number;
+    /** Custom comparator for object values. Defaults to strict equality. */
+    compareBy?: (a: T, b: T) => boolean;
+};
+export default function MultiSelectDropdown<T = string>({ options, value, onChange, id, className, wrapperClassName, textBoxClassName, disabled, placeholder, loading, searchable, maxTagCount, compareBy, }: MultiSelectDropdownProps<T>): import("react").JSX.Element;
+export {};

package/dist/components/Overview.d.ts

@@ -0,0 +1,12 @@
+export declare function Overview({ Icon, name, type, children, right, className, loading, iconSize, }: {
+    Icon: React.ReactNode;
+    name: string | React.ReactNode;
+    type?: string | React.ReactNode;
+    children?: React.ReactNode;
+    /** Right-aligned content on the header row (e.g. a detail-page action bar),
+     * vertically centered against the name block. */
+    right?: React.ReactNode;
+    className?: string;
+    loading?: boolean;
+    iconSize?: number;
+}): import("react").JSX.Element;

package/dist/components/Provider.d.ts

@@ -0,0 +1,145 @@
+import type { ReactNode } from 'react';
+export interface UINotify {
+    info: (message: string) => void;
+    success: (message: string) => void;
+    error: (message: string) => void;
+}
+export interface UIStrings {
+    loading: string;
+    common: {
+        copy: string;
+        copied: string;
+        copyFailed: string;
+        showHiddenFields: string;
+        showHiddenFieldsHint: string;
+        jsonHasErrors: string;
+    };
+    dropdown: {
+        select: (type: string) => string;
+        noOptionsFound: string;
+    };
+    logviewer: {
+        error: string;
+        warning: string;
+        notice: string;
+        top: string;
+        clearSelection: string;
+        copyLines: (count: number) => string;
+        copyAll: string;
+        hideDebug: string;
+        showDebug: string;
+        filterLogs: string;
+        download: string;
+    };
+    dag: {
+        workflow: string;
+        run: string;
+        status: string;
+        runtime: string;
+        submitted: string;
+        expandAll: string;
+        collapseAll: string;
+        statusLabel: (status: string) => string;
+        statusReason: (reason: string | undefined | null) => string | undefined;
+    };
+    jobActions: {
+        openSubworkflowLogs: string;
+        openOriginalWorkflow: string;
+        openInNewGraph: string;
+    };
+    form: {
+        invalidDuration: string;
+        durationOutOfRange: (min: string, max: string) => string;
+        durationBelowMin: (min: string) => string;
+        readOnly: string;
+        readWrite: string;
+        readOnlyDescription: string;
+        readOnlyForced: string;
+    };
+}
+export interface UINavigation {
+    toWorkflow: (name: string) => void;
+    toMarketItem: (name: string) => void;
+    openExternal: (href: string) => void;
+}
+export type WorkflowJsonRef = {
+    kind: 'marketplace';
+    slug: string;
+    version: string;
+} | {
+    kind: 'workflow';
+    name: string;
+};
+export interface RunFileResult {
+    data: string | undefined;
+    isLoading: boolean;
+    error: unknown;
+}
+export interface UIData {
+    /**
+     * Host-bound hook resolving a file in a run's artifact tree (logs, scripts).
+     * A null path skips fetching; refreshInterval polls while set. Must be a
+     * stable function reference — components call it as a hook.
+     */
+    useRunFile: (slug: string, path: string | null, options?: {
+        refreshInterval?: number;
+    }) => RunFileResult;
+    /**
+     * Resolves a workflow reference to its parsed JSON definition, for the YAML
+     * editor's input completion. Absent, that completion silently no-ops.
+     */
+    resolveWorkflowJson?: (ref: WorkflowJsonRef) => Promise<unknown>;
+}
+import type { FieldComponent } from '../form/fieldRegistry.js';
+export interface UISlots {
+    /**
+     * Host-supplied form field components, merged over the form engine's core
+     * registry by field type. Lazy components are supported — the registry
+     * renders fields inside a Suspense boundary.
+     */
+    formFields?: Record<string, FieldComponent>;
+    /** Sessions block for a run's sidebar; absent hides the section. */
+    runSessions?: (args: {
+        runId: string;
+        runNumber: number;
+        runActive: boolean;
+    }) => ReactNode;
+    /** Rich read-only YAML viewer; absent falls back to a plain <pre>. */
+    yamlViewer?: (args: {
+        value: string;
+        height: number;
+        width: number;
+        contentKey: string;
+    }) => ReactNode;
+    /** Icon for a subworkflow step; absent hides icon-bound affordances. */
+    workflowIcon?: (args: {
+        image?: string;
+        type?: string;
+        className?: string;
+    }) => ReactNode;
+}
+export interface UIProviderValue {
+    notify: UINotify;
+    strings: UIStrings;
+    navigation: UINavigation;
+    data: UIData;
+    slots: UISlots;
+}
+export declare function useNotify(): UINotify;
+export declare function useStrings(): UIStrings;
+export declare function useNavigation(): UINavigation;
+export declare function useSlots(): UISlots;
+export declare function useWorkflowJsonResolver(): ((ref: WorkflowJsonRef) => Promise<unknown>) | undefined;
+export declare function useRunFile(slug: string, path: string | null, options?: {
+    refreshInterval?: number;
+}): RunFileResult;
+export declare function UIProvider({ notify, strings, navigation, data, slots, children, }: {
+    notify?: Partial<UINotify>;
+    strings?: {
+        [G in keyof UIStrings]?: UIStrings[G] extends object ? Partial<UIStrings[G]> : UIStrings[G];
+    };
+    navigation?: Partial<UINavigation>;
+    data?: Partial<UIData>;
+    slots?: UISlots;
+    children: React.ReactNode;
+}): import("react").JSX.Element;

package/dist/components/SectionHeader.d.ts

@@ -0,0 +1,6 @@
+interface ISectionHeaderProps {
+    className?: string;
+    children: React.ReactNode;
+}
+export default function SectionHeader({ children, className, }: ISectionHeaderProps): import("react").JSX.Element;
+export {};