@parallelworks/ui 0.50.0 → 0.52.0

package/dist/editor/Monaco.js

@@ -1,4 +1,5 @@
 import { cx } from "../cx.js";
+import { useStrings } from "../components/Provider.js";
 import { useCssIsDark } from "../components/useCssIsDark.js";
 import { HOST_MARKER_OWNER, LINT_OWNER } from "./lintOwner.js";
 import { lintContext, useLintEditing, useLintSources } from "./lintContext.js";
@@ -9,7 +10,7 @@ import { setupMonacoWorkers } from "./workers.js";
 import { holdListeners, modelFor } from "./editorModel.js";
 import { ensureYamlLanguage } from "./yamlLanguage.js";
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef } from "react";
+import { useEffect, useId, useLayoutEffect, useRef } from "react";
 import * as monaco from "monaco-editor";
 //#region src/editor/Monaco.tsx
 setupMonacoWorkers();
@@ -38,25 +39,166 @@ function editorText(value) {
 	return value.replace(/\r/g, "");
 }
 var noop = () => {};
-function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop, width = "100%", height = "100%", path = "file:///default", preserveUndo = false, lint = false, markers, nested, ...options }) {
+var DISABLED_BACKGROUNDS = [
+	"--vscode-editor-background",
+	"--vscode-editorGutter-background",
+	"--vscode-editorStickyScroll-background",
+	"--vscode-minimap-background",
+	"--vscode-editorOverviewRuler-background"
+];
+function minimalEdit(model, from, to) {
+	let start = 0;
+	const shortest = Math.min(from.length, to.length);
+	while (start < shortest && from[start] === to[start]) start++;
+	let end = 0;
+	while (end < shortest - start && from[from.length - 1 - end] === to[to.length - 1 - end]) end++;
+	const a = model.getPositionAt(start);
+	const b = model.getPositionAt(from.length - end);
+	return {
+		range: new monaco.Range(a.lineNumber, a.column, b.lineNumber, b.column),
+		text: to.slice(start, to.length - end)
+	};
+}
+function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop, width = "100%", height = "100%", path: pathProp, preserveUndo = false, lint = false, markers, nested, value, language, ...options }) {
+	const { common: t } = useStrings();
+	const ownPath = `file:///editor/${useId().replace(/[^\w-]/g, "")}`;
+	const path = useRef(pathProp ?? ownPath).current;
 	const isDark = useCssIsDark();
+	const isDarkRef = useRef(isDark);
+	isDarkRef.current = isDark;
 	const readOnly = Boolean(disabled || options.readOnly);
+	const containerRef = useRef(null);
 	const monacoRef = useRef(null);
 	const isSyncingValueRef = useRef(false);
 	const lintSources = useLintSources();
 	const lintSourcesRef = useRef(lintSources);
 	lintSourcesRef.current = lintSources;
 	const runLintRef = useRef(null);
-	const unregisterRevealRef = useRef(null);
-	const listenersRef = useRef([]);
 	const nestedRef = useRef(nested);
 	nestedRef.current = nested;
 	const isNested = nested !== void 0;
+	const onChangeRef = useRef(onChange);
+	onChangeRef.current = onChange;
+	const onValidateRef = useRef(onValidate);
+	onValidateRef.current = onValidate;
+	const markersRef = useRef(markers);
+	markersRef.current = markers;
+	const editorOptions = {
+		ariaLabel: t.codeEditor,
+		readOnlyMessage: { value: t.readOnlyText },
+		...options,
+		readOnly,
+		renderLineHighlight: disabled ? "none" : options.renderLineHighlight ?? "line"
+	};
+	const optionsKey = JSON.stringify(editorOptions);
+	const optionsRef = useRef(editorOptions);
+	optionsRef.current = editorOptions;
+	const initialRef = useRef({
+		value,
+		language
+	});
 	const lintEditing = useLintEditing(lint);
 	const lintEditingRef = useRef(lintEditing);
 	lintEditingRef.current = lintEditing;
 	const lintRef = useRef(lint);
 	lintRef.current = lint;
+	useLayoutEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		defineEditorThemes(monaco.editor);
+		monaco.editor.setTheme(getThemeName(isDarkRef.current));
+		const { value: initial, language: initialLanguage } = initialRef.current;
+		const model = modelFor(monaco.Uri.parse(path), initial ?? "", initialLanguage);
+		const editor = monaco.editor.create(container, {
+			automaticLayout: true,
+			model,
+			...optionsRef.current,
+			fixedOverflowWidgets: true,
+			suggest: {
+				preview: true,
+				showWords: false,
+				showInlineDetails: true
+			}
+		});
+		setMarkers(model, HOST_MARKER_OWNER, (markersRef.current ?? []).map((marker) => lintMarker(model, marker)));
+		setMarkers(model, LINT_OWNER, []);
+		const runLint = () => {
+			const editing = lintEditingRef.current;
+			if (!lintRef.current || !editing || model.isDisposed()) return;
+			const schema = monaco.editor.getModelMarkers({ resource: model.uri }).filter((marker) => marker.owner !== "workflowlint" && marker.owner !== "workflowmarkers" && String(marker.code ?? "") !== SCHEMA_UNREADABLE);
+			const source = model.getValue();
+			setMarkers(model, LINT_OWNER, schema.length > 0 ? [] : editing.lintWorkflow(source, lintContext(editing, source, lintSourcesRef.current, runLint)).map((problem) => lintMarker(model, problem)));
+		};
+		runLintRef.current = runLint;
+		let lintTimer;
+		const validate = () => {
+			runLint();
+			onValidateRef.current(monaco.editor.getModelMarkers({ resource: model.uri }));
+		};
+		const modelListeners = [
+			model.onDidChangeContent(() => {
+				if (lintRef.current) {
+					window.clearTimeout(lintTimer);
+					lintTimer = window.setTimeout(runLint, 300);
+				}
+				if (isSyncingValueRef.current) return;
+				onChangeRef.current(editorText(editor.getValue()));
+			}),
+			monaco.editor.onDidChangeMarkers((resources) => {
+				const uri = model.uri.toString();
+				if (resources.some((resource) => resource.toString() === uri)) validate();
+			}),
+			{ dispose: () => window.clearTimeout(lintTimer) }
+		];
+		holdListeners(model, modelListeners);
+		validate();
+		const unregisterReveal = registerRevealer(path, (start, end) => {
+			const last = Math.min(Math.max(start, end), model.getLineCount());
+			editor.revealLinesInCenterIfOutsideViewport(start, last);
+			editor.setPosition({
+				lineNumber: start,
+				column: model.getLineFirstNonWhitespaceColumn(start) || 1
+			});
+			const flash = editor.createDecorationsCollection([{
+				range: new monaco.Range(start, 1, last, 1),
+				options: {
+					isWholeLine: true,
+					className: "bg-(--theme-accent)/20"
+				}
+			}]);
+			window.setTimeout(() => flash.clear(), 1500);
+		});
+		const unfollow = followThemeTokens(monaco.editor, () => getThemeName(isDarkRef.current));
+		ensureYamlLanguage();
+		monacoRef.current = editor;
+		return () => {
+			unfollow();
+			unregisterReveal();
+			for (const listener of modelListeners) listener.dispose();
+			editor.dispose();
+			monacoRef.current = null;
+			runLintRef.current = null;
+			if (!model.isDisposed() && model.getLanguageId() !== "yaml") model.dispose();
+		};
+	}, [path]);
+	useEffect(() => {
+		if (monacoRef.current) {
+			defineEditorThemes(monaco.editor);
+			monaco.editor.setTheme(getThemeName(isDark));
+		}
+	}, [isDark]);
+	useEffect(() => {
+		const node = monacoRef.current?.getDomNode();
+		for (const name of DISABLED_BACKGROUNDS) if (disabled) node?.style.setProperty(name, "var(--theme-input-disabled-bg)");
+		else node?.style.removeProperty(name);
+	}, [disabled]);
+	useEffect(() => {
+		monacoRef.current?.updateOptions(optionsRef.current);
+	}, [optionsKey]);
+	useEffect(() => {
+		const model = monacoRef.current?.getModel();
+		if (model && language && model.getLanguageId() !== language) monaco.editor.setModelLanguage(model, language);
+	}, [language]);
 	useEffect(() => {
 		const model = monacoRef.current?.getModel();
 		if (!lint && model) setMarkers(model, LINT_OWNER, []);
@@ -70,126 +212,35 @@ function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop,
 		if (!isNested) return;
 		return publishNestedText(monaco.Uri.parse(path).toString(), nestedRef);
 	}, [path, isNested]);
-	const themeName = useRef(getThemeName(isDark, disabled));
-	themeName.current = getThemeName(isDark, disabled);
-	useEffect(() => {
-		if (!monacoRef.current) return;
-		defineEditorThemes(monaco.editor);
-		monaco.editor.setTheme(getThemeName(isDark, disabled));
-		monacoRef.current.updateOptions({ readOnly });
-	}, [
-		disabled,
-		isDark,
-		readOnly
-	]);
-	useEffect(() => followThemeTokens(monaco.editor, () => themeName.current), []);
 	useLayoutEffect(() => {
-		const model = monacoRef.current?.getModel();
-		if (!model || options.value === void 0 || editorText(model.getValue()) === editorText(options.value)) return;
+		const editor = monacoRef.current;
+		const model = editor?.getModel();
+		if (!editor || !model || value === void 0) return;
+		const current = model.getValue();
+		if (editorText(current) === editorText(value)) return;
 		isSyncingValueRef.current = true;
 		try {
 			if (preserveUndo) {
-				const editor = monacoRef.current;
-				editor?.pushUndoStop();
-				model.pushEditOperations([], [{
-					range: model.getFullModelRange(),
-					text: options.value
-				}], () => null);
-				editor?.pushUndoStop();
-			} else model.setValue(options.value);
+				editor.pushUndoStop();
+				model.pushEditOperations([], [minimalEdit(model, current, value)], () => null);
+				editor.pushUndoStop();
+			} else {
+				const view = editor.saveViewState();
+				model.setValue(value);
+				if (view) editor.restoreViewState(view);
+			}
 		} finally {
 			isSyncingValueRef.current = false;
 		}
-	}, [options.value, preserveUndo]);
-	useEffect(() => {
-		return () => {
-			unregisterRevealRef.current?.();
-			for (const listener of listenersRef.current) listener.dispose();
-			monacoRef.current?.dispose();
-			monacoRef.current = null;
-		};
-	}, []);
-	/** Strips CR (\r) — Windows line endings break bash scripts. */
-	const onChangeWrapper = (value) => {
-		value = editorText(value);
-		onChange(value);
-	};
+	}, [value, preserveUndo]);
 	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
 		style: {
 			width,
 			height
 		},
-		className: cx("relative border rounded", className),
-		ref: (ref) => {
-			if (ref && !monacoRef.current) {
-				defineEditorThemes(monaco.editor);
-				monaco.editor.setTheme(getThemeName(isDark, disabled));
-				const model = modelFor(monaco.Uri.parse(path), options.value ?? "", options.language);
-				const editor = monaco.editor.create(ref, {
-					automaticLayout: true,
-					model,
-					...options,
-					readOnly,
-					fixedOverflowWidgets: true,
-					suggest: {
-						preview: true,
-						showWords: false,
-						showInlineDetails: true
-					}
-				});
-				setMarkers(model, HOST_MARKER_OWNER, (markers ?? []).map((marker) => lintMarker(model, marker)));
-				setMarkers(model, LINT_OWNER, []);
-				const runLint = () => {
-					const editing = lintEditingRef.current;
-					if (!lintRef.current || !editing || model.isDisposed()) return;
-					const schema = monaco.editor.getModelMarkers({ resource: model.uri }).filter((marker) => marker.owner !== "workflowlint" && marker.owner !== "workflowmarkers" && String(marker.code ?? "") !== SCHEMA_UNREADABLE);
-					const source = model.getValue();
-					setMarkers(model, LINT_OWNER, schema.length > 0 ? [] : editing.lintWorkflow(source, lintContext(editing, source, lintSourcesRef.current, runLint)).map((problem) => lintMarker(model, problem)));
-				};
-				runLintRef.current = runLint;
-				let lintTimer;
-				const validate = () => {
-					runLint();
-					onValidate(monaco.editor.getModelMarkers({ resource: model.uri }));
-				};
-				const modelListeners = [
-					model.onDidChangeContent(() => {
-						if (lintRef.current) {
-							window.clearTimeout(lintTimer);
-							lintTimer = window.setTimeout(runLint, 300);
-						}
-						if (isSyncingValueRef.current) return;
-						onChangeWrapper(editor.getValue());
-					}),
-					monaco.editor.onDidChangeMarkers((resources) => {
-						const uri = model.uri.toString();
-						if (resources.some((resource) => resource.toString() === uri)) validate();
-					}),
-					{ dispose: () => window.clearTimeout(lintTimer) }
-				];
-				holdListeners(model, modelListeners);
-				listenersRef.current = modelListeners;
-				validate();
-				unregisterRevealRef.current = registerRevealer(path, (start, end) => {
-					const last = Math.min(Math.max(start, end), model.getLineCount());
-					editor.revealLinesInCenterIfOutsideViewport(start, last);
-					editor.setPosition({
-						lineNumber: start,
-						column: model.getLineFirstNonWhitespaceColumn(start) || 1
-					});
-					const flash = editor.createDecorationsCollection([{
-						range: new monaco.Range(start, 1, last, 1),
-						options: {
-							isWholeLine: true,
-							className: "bg-(--theme-accent)/20"
-						}
-					}]);
-					window.setTimeout(() => flash.clear(), 1500);
-				});
-				ensureYamlLanguage();
-				monacoRef.current = editor;
-			}
-		}
+		"data-disabled": disabled ? "" : void 0,
+		className: cx("relative rounded border border-(--theme-border)", "focus-within:border-(--theme-accent) focus-within:ring-1 focus-within:ring-(--theme-accent)", "data-disabled:[&_.cursors-layer]:hidden data-disabled:[&_.view-lines]:opacity-60", className)
 	});
 }
 //#endregion

package/dist/editor/index.d.ts

@@ -1,11 +1,11 @@
-export { default as Editor } from './Editor.js';
-export { default as EditorField, type IEditorField } from './EditorField.js';
-export { default as FormCodePanel } from './FormCodePanel.js';
+export { Editor } from './Editor.js';
+export { EditorField, type IEditorField } from './EditorField.js';
+export { FormCodePanel, type FormCodePanelProps } from './FormCodePanel.js';
 export { HOST_MARKER_OWNER, LINT_OWNER } from './lintOwner.js';
-export type { IEditorProps, ISchemaError } from './Monaco.js';
+export type { EditorMarker, EditorProps, ValidationMarker } from './Monaco.js';
 export { type NestedWorkflowText, nestedWorkflowText } from './nestedText.js';
 export { revealLines } from './reveal.js';
 export { INPUT_YAML_PATH, JOB_YAML_PATH, type JsonSchema, SETTINGS_YAML_PATH, STEP_YAML_PATH, settingsSchemas, } from './settingsYaml.js';
 export { defineEditorThemes, followThemeTokens, getThemeName } from './themes.js';
 export { setupMonacoWorkers } from './workers.js';
-export { configureEditorYaml } from './yaml.js';
+export { configureEditorYaml, type SchemasSettings } from './yaml.js';

package/dist/editor/index.js

@@ -1,8 +1,8 @@
 import { HOST_MARKER_OWNER, LINT_OWNER } from "./lintOwner.js";
 import { INPUT_YAML_PATH, JOB_YAML_PATH, SETTINGS_YAML_PATH, STEP_YAML_PATH, settingsSchemas } from "./settingsYaml.js";
-import Editor from "./Editor.js";
-import EditorField from "./EditorField.js";
-import FormCodePanel from "./FormCodePanel.js";
+import { Editor } from "./Editor.js";
+import { EditorField } from "./EditorField.js";
+import { FormCodePanel } from "./FormCodePanel.js";
 import { nestedWorkflowText } from "./nestedText.js";
 import { revealLines } from "./reveal.js";
 import { defineEditorThemes, followThemeTokens, getThemeName } from "./themes.js";

package/dist/editor/themes.d.ts

@@ -1,8 +1,11 @@
 import type * as monaco from 'monaco-editor';
 export declare function expandShorthandHex(color: string): string;
-/** Monaco themes read from the document's tokens: call again after the host applies another theme. */
-export declare function defineEditorThemes(monacoEditor: typeof monaco.editor): void;
-/** Redefines the editor themes when the host applies other tokens to the document,
- *  and sets `current()` again, so an open editor follows a theme being edited. */
+/**
+ * Defines the light and dark Monaco themes from the document's tokens. Call it again after the
+ * host applies other tokens; it returns whether anything changed.
+ */
+export declare function defineEditorThemes(monacoEditor: typeof monaco.editor): boolean;
+/** Redefines the editor themes when the host applies other tokens or another scheme to the
+ *  document, and sets `current()` again, so an open editor follows a theme being edited. */
 export declare function followThemeTokens(monacoEditor: typeof monaco.editor, current: () => string): () => void;
-export declare function getThemeName(isDark: boolean, disabled?: boolean): string;
+export declare function getThemeName(isDark: boolean): string;

package/dist/editor/themes.js

@@ -9,9 +9,8 @@ var fallbacks = {};
 /** A token as Monaco takes it: a 6-digit hex. Monaco can't read display-p3, so
 *  a wide-gamut value is mapped back into sRGB; the default theme fills in for
 *  a host that sets no tokens. */
-function token(name, mode) {
-	const set = typeof window === "undefined" ? "" : getComputedStyle(document.documentElement).getPropertyValue(name).trim();
-	const color = parseColor(expandShorthandHex(set));
+function token(style, name, mode) {
+	const color = parseColor(expandShorthandHex(style?.getPropertyValue(name).trim() ?? ""));
 	if (color) return toHex(color);
 	fallbacks[mode] ??= deriveTheme(schemeFor(DEFAULT_THEME, mode));
 	return fallbacks[mode][name];
@@ -37,27 +36,22 @@ var RULES = [
 	["delimiter", "--theme-code-text"],
 	["operators", "--theme-code-text"]
 ];
-function editorTheme(mode, disabled) {
-	const c = (name) => token(name, mode);
-	const foreground = disabled ? c("--theme-muted-text-color") : c("--theme-code-text");
-	const background = disabled ? c("--theme-input-disabled-bg") : c("--theme-panel-bg");
+function editorTheme(style, mode) {
+	const c = (name) => token(style, name, mode);
 	return {
 		base: mode === "dark" ? "vs-dark" : "vs",
 		inherit: true,
-		rules: disabled ? [{
-			token: "",
-			foreground: foreground.slice(1)
-		}] : RULES.map(([name, t, fontStyle]) => ({
+		rules: RULES.map(([name, t, fontStyle]) => ({
 			token: name,
 			foreground: c(t).slice(1),
 			...fontStyle ? { fontStyle } : {}
 		})),
 		colors: {
-			"editor.foreground": foreground,
-			"editor.background": background,
+			"editor.foreground": c("--theme-code-text"),
+			"editor.background": c("--theme-panel-bg"),
 			"editor.border": c("--theme-border"),
-			"editorCursor.foreground": disabled ? background : c("--theme-app"),
-			"editor.lineHighlightBackground": disabled ? background : c("--theme-hover"),
+			"editorCursor.foreground": c("--theme-app"),
+			"editor.lineHighlightBackground": c("--theme-hover"),
 			"editorLineNumber.foreground": c("--theme-placeholder"),
 			"editorLineNumber.activeForeground": c("--theme-muted-text-color"),
 			"editor.selectionBackground": c("--theme-accent-subtle"),
@@ -65,26 +59,60 @@ function editorTheme(mode, disabled) {
 		}
 	};
 }
-/** Monaco themes read from the document's tokens: call again after the host applies another theme. */
+var definedFor = /* @__PURE__ */ new WeakMap();
+/**
+* Defines the light and dark Monaco themes from the document's tokens. Call it again after the
+* host applies other tokens; it returns whether anything changed.
+*/
 function defineEditorThemes(monacoEditor) {
-	for (const mode of ["light", "dark"]) for (const disabled of [false, true]) monacoEditor.defineTheme(getThemeName(mode === "dark", disabled), editorTheme(mode, disabled));
+	const style = typeof window === "undefined" ? void 0 : getComputedStyle(document.documentElement);
+	const themes = ["light", "dark"].map((mode) => [mode, editorTheme(style, mode)]);
+	const snapshot = JSON.stringify(themes);
+	if (definedFor.get(monacoEditor) === snapshot) return false;
+	definedFor.set(monacoEditor, snapshot);
+	for (const [mode, data] of themes) monacoEditor.defineTheme(getThemeName(mode === "dark"), data);
+	return true;
 }
-/** Redefines the editor themes when the host applies other tokens to the document,
-*  and sets `current()` again, so an open editor follows a theme being edited. */
+var followers = /* @__PURE__ */ new Set();
+var observer;
+var frame = 0;
+function flush() {
+	frame = 0;
+	for (const follow of followers) follow();
+}
+/** Redefines the editor themes when the host applies other tokens or another scheme to the
+*  document, and sets `current()` again, so an open editor follows a theme being edited. */
 function followThemeTokens(monacoEditor, current) {
 	if (typeof MutationObserver === "undefined") return () => {};
-	const observer = new MutationObserver(() => {
-		defineEditorThemes(monacoEditor);
-		monacoEditor.setTheme(current());
-	});
-	observer.observe(document.documentElement, {
-		attributes: true,
-		attributeFilter: ["style"]
-	});
-	return () => observer.disconnect();
+	const follow = () => {
+		if (defineEditorThemes(monacoEditor)) monacoEditor.setTheme(current());
+	};
+	followers.add(follow);
+	if (!observer) {
+		observer = new MutationObserver(() => {
+			frame ||= requestAnimationFrame(flush);
+		});
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: [
+				"style",
+				"class",
+				"data-theme"
+			]
+		});
+	}
+	return () => {
+		followers.delete(follow);
+		if (followers.size === 0) {
+			observer?.disconnect();
+			observer = void 0;
+			cancelAnimationFrame(frame);
+			frame = 0;
+		}
+	};
 }
-function getThemeName(isDark, disabled) {
-	return `app-${isDark ? "dark" : "light"}${disabled ? "-disabled" : ""}`;
+function getThemeName(isDark) {
+	return `app-${isDark ? "dark" : "light"}`;
 }
 //#endregion
 export { defineEditorThemes, expandShorthandHex, followThemeTokens, getThemeName };

package/dist/editor/yaml.d.ts

@@ -7,7 +7,11 @@ export interface SchemasSettings {
     /** The schema itself, used instead of fetching `uri`. */
     schema?: object;
 }
-/** Adds JSON schemas that validate and complete YAML models whose URI matches. */
-export declare function configureEditorYaml(added: SchemasSettings[]): void;
+/**
+ * Adds JSON schemas that validate and complete YAML models whose URI matches. A schema with the
+ * `uri` of one already added replaces it, so calling this again, as a reload or a second mount
+ * does, adds nothing twice. Returns a function that removes these schemas.
+ */
+export declare function configureEditorYaml(added: SchemasSettings[]): () => void;
 /** Lets the loaded editor pick up schemas added before or after it loads. */
 export declare function onYamlSchemas(listener: (schemas: SchemasSettings[]) => void): void;

package/dist/editor/yaml.js

@@ -1,10 +1,19 @@
 //#region src/editor/yaml.ts
 var schemas = [];
 var apply;
-/** Adds JSON schemas that validate and complete YAML models whose URI matches. */
+/**
+* Adds JSON schemas that validate and complete YAML models whose URI matches. A schema with the
+* `uri` of one already added replaces it, so calling this again, as a reload or a second mount
+* does, adds nothing twice. Returns a function that removes these schemas.
+*/
 function configureEditorYaml(added) {
-	schemas = [...schemas, ...added];
+	const uris = new Set(added.map((schema) => schema.uri));
+	schemas = [...schemas.filter((schema) => !uris.has(schema.uri)), ...added];
 	apply?.(schemas);
+	return () => {
+		schemas = schemas.filter((schema) => !added.includes(schema));
+		apply?.(schemas);
+	};
 }
 /** Lets the loaded editor pick up schemas added before or after it loads. */
 function onYamlSchemas(listener) {