@parallelworks/ui 0.50.0 → 0.52.0

package/dist/components/shortcutKey.js

@@ -1,11 +1,27 @@
 import { useEffect, useRef } from "react";
 //#region src/components/shortcutKey.ts
-/** Guards page shortcuts from firing inside inputs, terminals, editors, and dialogs. */
+var KEYS_ARE_INPUT = [
+	".xterm",
+	".monaco-editor",
+	".cm-editor",
+	"select",
+	"[role=\"dialog\"]",
+	"[role=\"alertdialog\"]",
+	"[role=\"textbox\"]",
+	"[role=\"combobox\"]",
+	"[role=\"listbox\"]",
+	"[role=\"menu\"]",
+	"[role=\"menubar\"]",
+	"[role=\"tree\"]",
+	"[role=\"grid\"]"
+].join(", ");
+/** Guards page shortcuts from firing inside text fields, editors, dialogs, and
+*  widgets with typeahead such as menus, lists and trees. */
 function isTextEntryContext(target) {
 	const el = target;
 	if (!el) return false;
 	if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.isContentEditable) return true;
-	return Boolean(el.closest?.(".xterm, .monaco-editor, .cm-editor, [role=\"dialog\"]"));
+	return Boolean(el.closest?.(KEYS_ARE_INPUT));
 }
 /** Calls `onPress` on a single key, such as F to filter, unless the key goes to a text field. */
 function useShortcutKey(key, onPress) {
@@ -14,6 +30,7 @@ function useShortcutKey(key, onPress) {
 	useEffect(() => {
 		if (!key) return;
 		const onKey = (e) => {
+			if (e.defaultPrevented || e.repeat || e.isComposing) return;
 			if (e.metaKey || e.ctrlKey || e.altKey || e.key.toLowerCase() !== key.toLowerCase()) return;
 			if (isTextEntryContext(e.target)) return;
 			e.preventDefault();

package/dist/components/splitter.js

@@ -67,7 +67,7 @@ function useSplitter({ width, onWidthChange, min, max, side, defaultWidth, label
 			onPointerCancel: onPointerUp,
 			onKeyDown,
 			...defaultWidth === void 0 ? {} : { onDoubleClick: () => onWidthChange(defaultWidth) },
-			className: cx("absolute inset-y-0 z-10 w-1.5 cursor-col-resize touch-none transition-colors focus-visible:bg-(--theme-link) focus-visible:outline-none", side === "left" ? "-left-0.75" : "-right-0.75", live === null ? "hover:bg-(--theme-border)" : "bg-(--theme-accent)")
+			className: cx("absolute inset-y-0 z-10 w-1.5 cursor-col-resize touch-none transition-colors focus-visible:bg-(--theme-focus) focus-visible:outline-none", side === "left" ? "-left-0.75" : "-right-0.75", live === null ? "hover:bg-(--theme-border)" : "bg-(--theme-accent)")
 		}
 	};
 }

package/dist/components/tone.d.ts

@@ -1,9 +1,12 @@
 /** How a status reads: its colors come from the theme's tone tokens, so every
- *  theme, dark ones included, sets them once. */
+ *  theme, dark ones included, sets them once. Words take a status's text shade,
+ *  and icons and dots its vivid one, which only graphics' 3:1 holds. */
 export type Tone = 'default' | 'success' | 'warning' | 'error' | 'info' | 'muted';
 /** Text in the tone, for a status line beside a dot or icon. */
 export declare const toneText: Record<Tone, string>;
+/** An icon in the tone, through `currentColor`. */
+export declare const toneIcon: Record<Tone, string>;
 /** A tinted surface with a border and text in the tone, for a badge or a callout. */
 export declare const toneSurface: Record<Tone, string>;
-/** A solid fill in the tone, for a dot. */
+/** A solid fill in the tone, for a dot or a bar. */
 export declare const toneFill: Record<Tone, string>;

package/dist/components/tone.js

@@ -1,6 +1,15 @@
 //#region src/components/tone.ts
 /** Text in the tone, for a status line beside a dot or icon. */
 var toneText = {
+	default: "text-(--theme-app)",
+	success: "text-(--theme-success-text)",
+	warning: "text-(--theme-warning-text)",
+	error: "text-(--theme-error-text)",
+	info: "text-(--theme-info-text)",
+	muted: "text-(--theme-muted-text-color)"
+};
+/** An icon in the tone, through `currentColor`. */
+var toneIcon = {
 	default: "text-(--theme-app)",
 	success: "text-(--theme-success)",
 	warning: "text-(--theme-warning)",
@@ -11,13 +20,13 @@ var toneText = {
 /** A tinted surface with a border and text in the tone, for a badge or a callout. */
 var toneSurface = {
 	default: "bg-(--theme-muted-panel-bg) text-(--theme-app) border-(--theme-border)",
-	success: "bg-(--theme-success-muted) text-(--theme-success) border-(--theme-success)/25",
-	warning: "bg-(--theme-warning-muted) text-(--theme-warning) border-(--theme-warning)/25",
-	error: "bg-(--theme-error-muted) text-(--theme-error) border-(--theme-error)/25",
-	info: "bg-(--theme-info-muted) text-(--theme-info) border-(--theme-info)/25",
+	success: "bg-(--theme-success-muted) text-(--theme-success-text) border-(--theme-success)/25",
+	warning: "bg-(--theme-warning-muted) text-(--theme-warning-text) border-(--theme-warning)/25",
+	error: "bg-(--theme-error-muted) text-(--theme-error-text) border-(--theme-error)/25",
+	info: "bg-(--theme-info-muted) text-(--theme-info-text) border-(--theme-info)/25",
 	muted: "bg-(--theme-muted-panel-bg)/50 text-(--theme-muted-text-color) border-(--theme-border)"
 };
-/** A solid fill in the tone, for a dot. */
+/** A solid fill in the tone, for a dot or a bar. */
 var toneFill = {
 	default: "bg-(--theme-app)",
 	success: "bg-(--theme-success)",
@@ -27,4 +36,4 @@ var toneFill = {
 	muted: "bg-(--theme-muted-text-color)"
 };
 //#endregion
-export { toneFill, toneSurface, toneText };
+export { toneFill, toneIcon, toneSurface, toneText };

package/dist/components/useCssIsDark.js

@@ -1,25 +1,32 @@
-import { useEffect, useState } from "react";
+import { useSyncExternalStore } from "react";
 //#region src/components/useCssIsDark.ts
+var DARK = "(prefers-color-scheme: dark)";
 /** Whether the host's CSS color-scheme reads dark, falling back to the system preference. */
 function readIsDark() {
+	if (typeof document === "undefined") return false;
 	const scheme = getComputedStyle(document.documentElement).colorScheme;
 	const dark = scheme.includes("dark");
 	if (dark !== scheme.includes("light")) return dark;
 	if (typeof window.matchMedia !== "function") return false;
-	return window.matchMedia("(prefers-color-scheme: dark)").matches;
+	return window.matchMedia(DARK).matches;
 }
-/**
-* Follows the host's CSS color-scheme, the same signal the log viewer's
-* light-dark() palette uses — no provider API involved. For the rare concrete
-* pick (editor themes, image variants) the tokens cannot express.
-*/
-function useCssIsDark() {
-	const [isDark, setIsDark] = useState(readIsDark);
-	useEffect(() => {
-		const update = () => setIsDark(readIsDark());
-		const media = typeof window.matchMedia === "function" ? window.matchMedia("(prefers-color-scheme: dark)") : void 0;
-		media?.addEventListener("change", update);
-		const observer = new MutationObserver(update);
+var listeners = /* @__PURE__ */ new Set();
+var current = false;
+var stop;
+function refresh() {
+	const next = readIsDark();
+	if (next !== current) {
+		current = next;
+		for (const listener of listeners) listener();
+	}
+}
+function subscribe(listener) {
+	listeners.add(listener);
+	if (!stop) {
+		current = readIsDark();
+		const media = typeof window.matchMedia === "function" ? window.matchMedia(DARK) : void 0;
+		media?.addEventListener("change", refresh);
+		const observer = new MutationObserver(refresh);
 		observer.observe(document.documentElement, {
 			attributes: true,
 			attributeFilter: [
@@ -28,12 +35,27 @@ function useCssIsDark() {
 				"data-theme"
 			]
 		});
-		return () => {
-			media?.removeEventListener("change", update);
+		stop = () => {
+			media?.removeEventListener("change", refresh);
 			observer.disconnect();
 		};
-	}, []);
-	return isDark;
+	}
+	return () => {
+		listeners.delete(listener);
+		if (listeners.size === 0) {
+			stop?.();
+			stop = void 0;
+		}
+	};
+}
+var snapshot = () => stop ? current : readIsDark();
+/**
+* Follows the host's CSS color-scheme, the same signal the log viewer's
+* light-dark() palette uses — no provider API involved. For the rare concrete
+* pick (editor themes, image variants) the tokens cannot express.
+*/
+function useCssIsDark() {
+	return useSyncExternalStore(subscribe, snapshot, () => false);
 }
 //#endregion
 export { readIsDark, useCssIsDark };

package/dist/components/useTheme.js

@@ -1,21 +1,20 @@
 import { modeOf, resolveMode, schemeFor } from "../theme/model.js";
 import { generateTheme } from "../theme/derive.js";
 import { applyTheme } from "../theme/index.js";
-import { useEffect, useLayoutEffect, useState } from "react";
+import { useLayoutEffect, useSyncExternalStore } from "react";
 //#region src/components/useTheme.ts
 var DARK = "(prefers-color-scheme: dark)";
 var prefersDark = () => typeof matchMedia === "function" && matchMedia(DARK).matches;
+function subscribeToScheme(onChange) {
+	if (typeof matchMedia !== "function") return () => {};
+	const media = matchMedia(DARK);
+	media.addEventListener("change", onChange);
+	return () => media.removeEventListener("change", onChange);
+}
+var ignore = () => () => {};
 /** The mode a preference shows now, following the device while it's `system`. */
 function useColorMode(preference) {
-	const [dark, setDark] = useState(prefersDark);
-	useEffect(() => {
-		if (preference !== "system" || typeof matchMedia !== "function") return;
-		const media = matchMedia(DARK);
-		const update = () => setDark(media.matches);
-		update();
-		media.addEventListener("change", update);
-		return () => media.removeEventListener("change", update);
-	}, [preference]);
+	const dark = useSyncExternalStore(preference === "system" ? subscribeToScheme : ignore, prefersDark, () => false);
 	return resolveMode(preference, dark);
 }
 /**

package/dist/dev.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Whether the host runs a development build, for checks that warn about misuse and cost too much
+ * to run in production.
+ *
+ * It reads `process.env.NODE_ENV`, which the host's bundler replaces, so a production build drops
+ * the checks and a development build keeps them. Vite's `DEV` flag would not do: this
+ * package's own library build replaces it with `false`, so no host would ever see the warning.
+ */
+export declare function isDev(): boolean;

package/dist/dev.js

@@ -0,0 +1,14 @@
+//#region src/dev.ts
+/**
+* Whether the host runs a development build, for checks that warn about misuse and cost too much
+* to run in production.
+*
+* It reads `process.env.NODE_ENV`, which the host's bundler replaces, so a production build drops
+* the checks and a development build keeps them. Vite's `DEV` flag would not do: this
+* package's own library build replaces it with `false`, so no host would ever see the warning.
+*/
+function isDev() {
+	return process.env.NODE_ENV !== "production";
+}
+//#endregion
+export { isDev };

package/dist/editor/Editor.d.ts

@@ -1,2 +1,3 @@
-import type { IEditorProps } from './Monaco.js';
-export default function Editor(props: IEditorProps): import("react").JSX.Element;
+import type { EditorProps } from './Monaco.js';
+/** A Monaco code editor, loaded on first render so Monaco stays out of the host's first bundle. */
+export declare function Editor(props: EditorProps): import("react").JSX.Element;

package/dist/editor/Editor.js

@@ -3,11 +3,20 @@ import { jsx } from "react/jsx-runtime";
 import { Suspense, lazy } from "react";
 //#region src/editor/Editor.tsx
 var MonacoEditor = lazy(() => import("./Monaco.js"));
+/** A Monaco code editor, loaded on first render so Monaco stays out of the host's first bundle. */
 function Editor(props) {
+	const { width = "100%", height = "100%" } = props;
 	return /* @__PURE__ */ jsx(Suspense, {
-		fallback: /* @__PURE__ */ jsx(Loader, {}),
+		fallback: /* @__PURE__ */ jsx("div", {
+			style: {
+				width,
+				height
+			},
+			className: "flex items-center justify-center",
+			children: /* @__PURE__ */ jsx(Loader, {})
+		}),
 		children: /* @__PURE__ */ jsx(MonacoEditor, { ...props })
 	});
 }
 //#endregion
-export { Editor as default };
+export { Editor };

package/dist/editor/EditorField.d.ts

@@ -7,4 +7,5 @@ export interface IEditorField extends BaseField {
         language?: string;
     };
 }
-export default function EditorField(props: FieldComponentProps<IEditorField>): import("react").JSX.Element;
+/** A form field that edits its value as code, in the language its `options` name (shell by default). */
+export declare function EditorField(props: FieldComponentProps<IEditorField>): import("react").JSX.Element;

package/dist/editor/EditorField.js

@@ -1,45 +1,27 @@
-import { cx } from "../cx.js";
 import { Field } from "../components/Field.js";
 import { fieldFrame } from "../form/fieldFrame.js";
 import { useFieldValue } from "../form/useFieldValue.js";
-import Editor from "./Editor.js";
+import { Editor } from "./Editor.js";
 import { jsx } from "react/jsx-runtime";
-import { useMemo, useRef } from "react";
-import { useFormContext, useWatch } from "react-hook-form";
 //#region src/editor/EditorField.tsx
+/** A form field that edits its value as code, in the language its `options` name (shell by default). */
 function EditorField(props) {
 	const { field, label, disabled, onChange } = props;
-	const fieldName = field.name ?? "";
-	const [value, change] = useFieldValue(fieldName);
-	const touchedRef = useRef(false);
-	const handleChange = (val) => {
-		touchedRef.current = true;
-		onChange?.(val);
-		change(val);
-	};
-	const { control } = useFormContext();
-	const resetKey = useWatch({
-		control,
-		name: "editorKeyPostfix"
-	});
-	const editorKeyPostfix = typeof resetKey === "string" ? resetKey : "";
-	const postfixKey = useMemo(() => {
-		const randomKey = Math.random().toString(36).substring(7);
-		return editorKeyPostfix || randomKey;
-	}, [editorKeyPostfix]);
+	const [value, change] = useFieldValue(field.name ?? "");
 	return /* @__PURE__ */ jsx(Field, {
 		...fieldFrame(props),
 		children: /* @__PURE__ */ jsx(Editor, {
 			ariaLabel: label,
 			height: "200px",
-			path: fieldName,
-			...touchedRef.current || value === void 0 ? {} : { value },
-			className: cx("bg-(--theme-input-bg) w-11 border focus:border rounded text-[10px] leading-4 pl-[6px]", disabled && "opacity-75"),
-			readOnly: disabled,
-			onChange: handleChange,
+			value: value ?? "",
+			disabled,
+			onChange: (text) => {
+				onChange?.(text);
+				change(text);
+			},
 			language: field.options?.language || "shell"
-		}, fieldName + postfixKey)
+		})
 	});
 }
 //#endregion
-export { EditorField as default };
+export { EditorField };

package/dist/editor/FormCodePanel.d.ts

@@ -1,8 +1,12 @@
-declare function FormCodePanel({ formJSON, data, mutate, height, disabled, }: {
+export interface FormCodePanelProps {
+    /** The form's input definitions, which say which values are sensitive or hidden. */
     formJSON: Record<string, unknown>;
+    /** The form's values, shown as JSON. */
     data: Record<string, unknown>;
+    /** Called with the values each time the JSON parses as an object. */
     mutate: (values: Record<string, unknown>) => void;
     height?: string;
     disabled?: boolean;
-}): import("react").JSX.Element;
-export default FormCodePanel;
+}
+/** A form's values as editable JSON, with sensitive and hidden fields left out unless asked for. */
+export declare function FormCodePanel({ formJSON, data, mutate, height, disabled, }: FormCodePanelProps): import("react").JSX.Element;

package/dist/editor/FormCodePanel.js

@@ -5,7 +5,7 @@ import { useStrings, useWorkflowEngine } from "../components/Provider.js";
 import { useCopy } from "../components/useCopy.js";
 import { Switch } from "../components/Switch.js";
 import { flattenGroups, impureSetValueFromPath } from "../form/lib.js";
-import Editor from "./Editor.js";
+import { Editor } from "./Editor.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 //#region src/editor/FormCodePanel.tsx
@@ -68,6 +68,7 @@ var populateFiltered = (filteredFields, data) => {
 	});
 	return data;
 };
+/** A form's values as editable JSON, with sensitive and hidden fields left out unless asked for. */
 function FormCodePanel({ formJSON, data, mutate, height = "600px", disabled = false }) {
 	const engine = useWorkflowEngine();
 	const { common: t } = useStrings();
@@ -85,12 +86,14 @@ function FormCodePanel({ formJSON, data, mutate, height = "600px", disabled = fa
 	const filteredFieldsRef = useRef(filteredFields);
 	filteredFieldsRef.current = filteredFields;
 	const json = JSON.stringify(displayObj, null, 2);
+	const typedRef = useRef(null);
+	const shown = typedRef.current?.json === json ? typedRef.current.text : json;
 	const handleCopy = () => void copy(json, { quiet: true });
 	return /* @__PURE__ */ jsxs("div", {
 		style: { height },
 		className: "flex w-full flex-col gap-2",
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: cx("flex min-h-0 flex-1 flex-col overflow-hidden rounded-md border", jsonHasErrors ? "border-red-500" : "border-(--theme-border)"),
+			className: cx("flex min-h-0 flex-1 flex-col overflow-hidden rounded-md border", jsonHasErrors ? "border-(--theme-error)" : "border-(--theme-border)"),
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "bg-(--theme-muted-panel-bg) text-(--theme-muted-text-color) flex shrink-0 items-center gap-3 border-b border-(--theme-border) px-3 py-2",
 				children: [hasHiddenFields && /* @__PURE__ */ jsx(Tooltip, {
@@ -111,13 +114,13 @@ function FormCodePanel({ formJSON, data, mutate, height = "600px", disabled = fa
 					onClick: handleCopy,
 					"aria-label": copied ? t.copied : t.copy,
 					className: "ml-auto flex shrink-0 items-center gap-1.5 rounded-md border border-(--theme-border) px-2.5 py-1.5 text-sm text-(--theme-app) transition-colors duration-150 hover:bg-(--theme-hover) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--theme-link)",
-					children: [copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-green-500" }) : /* @__PURE__ */ jsx(CopyIcon, { className: "text-(--theme-muted-text-color)" }), copied ? t.copied : t.copy]
+					children: [copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-(--theme-success)" }) : /* @__PURE__ */ jsx(CopyIcon, { className: "text-(--theme-muted-text-color)" }), copied ? t.copied : t.copy]
 				})]
 			}), /* @__PURE__ */ jsx("div", {
 				className: "min-h-0 flex-1",
 				children: /* @__PURE__ */ jsx(Editor, {
 					height: "100%",
-					value: json,
+					value: shown,
 					onValidate: isValidJson,
 					className: "!rounded-none !border-0",
 					minimap: { enabled: false },
@@ -140,7 +143,11 @@ function FormCodePanel({ formJSON, data, mutate, height = "600px", disabled = fa
 						try {
 							const parsed = JSON.parse(e);
 							if (!isObject(parsed)) return;
-							mutate(showHiddenRef.current ? parsed : populateFiltered(filteredFieldsRef.current, parsed));
+							typedRef.current = {
+								text: e,
+								json: JSON.stringify(parsed, null, 2)
+							};
+							mutate(showHiddenRef.current ? parsed : populateFiltered(filteredFieldsRef.current, structuredClone(parsed)));
 						} catch {}
 					},
 					language: "json",
@@ -148,10 +155,10 @@ function FormCodePanel({ formJSON, data, mutate, height = "600px", disabled = fa
 				})
 			})]
 		}), jsonHasErrors && /* @__PURE__ */ jsx("p", {
-			className: "shrink-0 text-sm text-red-500",
+			className: "shrink-0 text-sm text-(--theme-error-text)",
 			children: t.jsonHasErrors
 		})]
 	});
 }
 //#endregion
-export { FormCodePanel as default };
+export { FormCodePanel };

package/dist/editor/Monaco.d.ts

@@ -1,19 +1,28 @@
 import * as monaco from 'monaco-editor';
 import { type NestedWorkflowText } from './nestedText.js';
-export type ISchemaError = monaco.editor.IMarker;
+/** A problem Monaco or the YAML service found in the text, as `onValidate` reports it. */
+export type ValidationMarker = monaco.editor.IMarker;
 /** A problem to mark on one line of the editor. */
 export interface EditorMarker {
     line: number;
     message: string;
 }
-export interface IEditorProps extends monaco.editor.IStandaloneEditorConstructionOptions {
+export interface EditorProps extends monaco.editor.IStandaloneEditorConstructionOptions {
     className?: string;
+    /** Shows the text greyed out and read-only, as a disabled field does. */
     disabled?: boolean | undefined;
+    /** The text as the person edits it, with carriage returns removed. */
     onChange?: (value: string) => void;
-    onValidate?: (errors: ISchemaError[]) => void;
+    /** Every marker on the text, each time they change: the schema's, the lint's and the host's. */
+    onValidate?: (markers: ValidationMarker[]) => void;
     width?: string | number;
     height?: string | number;
-    path?: 'file:///workflow.yaml' | string;
+    /**
+     * The model's URI. A YAML schema registered with `configureEditorYaml` applies where its
+     * `fileMatch` matches this path, and `revealLines` finds the editor by it. Each editor gets one
+     * of its own when left out. It is read once: give the editor a `key` to edit another path.
+     */
+    path?: string;
     /** Apply outside `value` changes as undoable edits instead of resetting the undo history. */
     preserveUndo?: boolean;
     /** Checks a whole workflow for what the schema can't, such as needs read but never listed. */
@@ -23,4 +32,4 @@ export interface IEditorProps extends monaco.editor.IStandaloneEditorConstructio
     /** Set when the text is one job or step, for completions that touch the rest of the workflow. */
     nested?: NestedWorkflowText;
 }
-export default function MonacoEditor({ className, disabled, onChange, onValidate, width, height, path, preserveUndo, lint, markers, nested, ...options }: IEditorProps): import("react").JSX.Element;
+export default function MonacoEditor({ className, disabled, onChange, onValidate, width, height, path: pathProp, preserveUndo, lint, markers, nested, value, language, ...options }: EditorProps): import("react").JSX.Element;