@parallelworks/ui 0.51.0 → 0.53.0

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

@@ -1,13 +1,32 @@
 import { Loader } from "../components/Loader.js";
+import { editorLanguagesLoading } from "./languages.js";
 import { jsx } from "react/jsx-runtime";
-import { Suspense, lazy } from "react";
+import { Suspense, lazy, use } from "react";
 //#region src/editor/Editor.tsx
-var MonacoEditor = lazy(() => import("./Monaco.js"));
+var loadMonaco = () => import("./Monaco.js");
+var MonacoEditor = lazy(loadMonaco);
+function LoadedEditor(props) {
+	const languages = editorLanguagesLoading();
+	if (languages) {
+		loadMonaco();
+		use(languages);
+	}
+	return /* @__PURE__ */ jsx(MonacoEditor, { ...props });
+}
+/** 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, {}),
-		children: /* @__PURE__ */ jsx(MonacoEditor, { ...props })
+		fallback: /* @__PURE__ */ jsx("div", {
+			style: {
+				width,
+				height
+			},
+			className: "flex items-center justify-center",
+			children: /* @__PURE__ */ jsx(Loader, {})
+		}),
+		children: /* @__PURE__ */ jsx(LoadedEditor, { ...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,35 @@
-import * as monaco from 'monaco-editor';
+import * as monaco from 'monaco-editor/editor/editor.api';
 import { type NestedWorkflowText } from './nestedText.js';
-export type ISchemaError = monaco.editor.IMarker;
+import './monacoFeatures.js';
+/** 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;
+    /**
+     * Shows the text to read rather than edit: it stays selectable, copyable and reachable by
+     * keyboard, announces itself read-only, and shows no cursor, current line or quick fixes. The
+     * view ends at the last line, and the wheel scrolls the page once the text has none left.
+     */
+    readOnly?: boolean;
+    /** 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 +39,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;

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";
@@ -7,10 +8,11 @@ import { registerRevealer } from "./reveal.js";
 import { defineEditorThemes, followThemeTokens, getThemeName } from "./themes.js";
 import { setupMonacoWorkers } from "./workers.js";
 import { holdListeners, modelFor } from "./editorModel.js";
+import "./monacoFeatures.js";
 import { ensureYamlLanguage } from "./yamlLanguage.js";
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef } from "react";
-import * as monaco from "monaco-editor";
+import { useEffect, useId, useLayoutEffect, useRef } from "react";
+import * as monaco from "monaco-editor/editor/editor.api";
 //#region src/editor/Monaco.tsx
 setupMonacoWorkers();
 var SCHEMA_UNREADABLE = "768";
@@ -38,25 +40,177 @@ 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 },
+		domReadOnly: readOnly,
+		hideCursorInOverviewRuler: readOnly,
+		lightbulb: { enabled: readOnly ? monaco.editor.ShowLightbulbIconMode.Off : monaco.editor.ShowLightbulbIconMode.OnCode },
+		scrollBeyondLastLine: !readOnly,
+		...options,
+		scrollbar: {
+			alwaysConsumeMouseWheel: !readOnly,
+			...options.scrollbar
+		},
+		readOnly,
+		renderLineHighlight: disabled ? "none" : options.renderLineHighlight ?? (readOnly ? "none" : "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?.getDomNode()?.querySelector("textarea.inputarea, .native-edit-context")?.setAttribute("aria-readonly", String(readOnly));
+	}, [readOnly, path]);
+	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 +224,36 @@ 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,
+		"data-read-only": readOnly ? "" : 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-read-only:[&_.cursors-layer]:hidden data-disabled:[&_.view-lines]:opacity-60", className)
 	});
 }
 //#endregion

package/dist/editor/editorModel.d.ts

@@ -1,4 +1,4 @@
-import * as monaco from 'monaco-editor';
+import * as monaco from 'monaco-editor/editor/editor.api';
 /** The model a new editor on `uri` edits, holding `value`. */
 export declare function modelFor(uri: monaco.Uri, value: string, language: string | undefined): monaco.editor.ITextModel;
 /** An editor's listeners on its model, dropped when the next editor takes the model over. */

package/dist/editor/editorModel.js

@@ -1,4 +1,4 @@
-import * as monaco from "monaco-editor";
+import * as monaco from "monaco-editor/editor/editor.api";
 //#region src/editor/editorModel.ts
 var listeners = /* @__PURE__ */ new WeakMap();
 /** The model a new editor on `uri` edits, holding `value`. */