@parallelworks/ui 0.17.0 → 0.19.0

package/dist/chunks/{CodePreviewEditor-UAtnpmOV.js → CodePreviewEditor-YqQBz1YL.js}

@@ -1,7 +1,7 @@
 import { t as useCssIsDark } from "./useCssIsDark-DHr05dG2.js";
-import { n as defineEditorThemes, r as getThemeName, t as setupMonacoWorkers } from "./editor-mNznodJN.js";
-import { jsx } from "react/jsx-runtime";
+import { a as getThemeName, i as defineEditorThemes, r as setupMonacoWorkers } from "./editor-Dk1rbV75.js";
 import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
 import * as monaco from "monaco-editor";
 //#region src/file-explorer/FilePreview/CodePreviewEditor.tsx
 var OPTIONS = {

package/dist/chunks/ConfirmModal-aOR4O1QE.js

@@ -0,0 +1,79 @@
+import { u as useStrings } from "./Provider-CDYurraE.js";
+import { n as modalPanelClasses, t as BareModal } from "./BareModal-BtRiQezg.js";
+import cx from "classnames";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ghostButton.ts
+var ghostButtonClasses = "inline-flex cursor-pointer items-center gap-1.5 h-8 px-3 rounded-md text-sm text-(--theme-muted-text-color) hover:text-(--theme-app) hover:bg-(--theme-muted-panel-bg) transition-colors";
+var primaryButtonClasses = "inline-flex cursor-pointer items-center gap-1.5 h-7 px-2.5 rounded-md text-[12.5px] font-medium bg-(--theme-element) text-(--theme-element-text) hover:opacity-90 transition-opacity";
+/** Filled destructive button for confirming irreversible actions in ds modals. */
+var dangerButtonClasses = "inline-flex cursor-pointer items-center gap-1.5 h-7 px-2.5 rounded-md text-[12.5px] font-medium bg-red-600 text-white hover:bg-red-700 transition-colors";
+//#endregion
+//#region src/components/ConfirmModal.tsx
+function ConfirmModal({ open, onClose, title, description, children, confirmLabel, onConfirm, confirmDisabled = false, destructive = false, align = "top", cancelLabel, closeOnConfirm = true }) {
+	const strings = useStrings();
+	const [pending, setPending] = useState(false);
+	const firedRef = useRef(false);
+	useEffect(() => {
+		if (open) firedRef.current = false;
+	}, [open]);
+	const onCloseRef = useRef(onClose);
+	onCloseRef.current = onClose;
+	const runConfirm = useCallback(async () => {
+		if (firedRef.current) return;
+		firedRef.current = true;
+		setPending(true);
+		try {
+			await onConfirm();
+			if (closeOnConfirm) onCloseRef.current();
+			else firedRef.current = false;
+		} catch (error) {
+			firedRef.current = false;
+			throw error;
+		} finally {
+			setPending(false);
+		}
+	}, [onConfirm, closeOnConfirm]);
+	return /* @__PURE__ */ jsxs(BareModal, {
+		open,
+		onClose,
+		ariaLabel: title,
+		align,
+		preventClose: pending,
+		className: cx(modalPanelClasses, "w-[480px] max-w-full"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "px-5 pt-5",
+			children: [
+				/* @__PURE__ */ jsx("h2", {
+					className: "text-lg font-semibold text-(--theme-app)",
+					children: title
+				}),
+				description !== null && description !== void 0 && /* @__PURE__ */ jsx("p", {
+					className: "mt-1.5 text-sm text-(--theme-muted-text-color)",
+					children: description
+				}),
+				children !== null && children !== void 0 && /* @__PURE__ */ jsx("div", {
+					className: "mt-4",
+					children
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mt-5 flex items-center justify-end gap-2 border-t border-(--theme-border) px-5 py-3",
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onClose,
+				disabled: pending,
+				className: cx(ghostButtonClasses, pending && "cursor-wait"),
+				children: cancelLabel ?? strings.modal.cancel
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: runConfirm,
+				disabled: confirmDisabled || pending,
+				className: cx(destructive ? dangerButtonClasses : primaryButtonClasses, "disabled:cursor-not-allowed disabled:opacity-50", pending && "cursor-wait"),
+				children: confirmLabel
+			})]
+		})]
+	});
+}
+//#endregion
+export { primaryButtonClasses as i, dangerButtonClasses as n, ghostButtonClasses as r, ConfirmModal as t };

package/dist/chunks/{lib-CUTRDpa6.js → FieldWrapper-Cszwg-4B.js}

@@ -1,7 +1,7 @@
 import { t as RequiredMark } from "./RequiredMark-DfLdYbYZ.js";
 import cx from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useId, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/form/fieldContext.tsx
 var FieldContext = createContext({ required: false });
 var FieldProvider = FieldContext.Provider;
@@ -26,52 +26,6 @@ function useFieldLabelledByProps() {
 	};
 }
 //#endregion
-//#region src/form/FieldWrapper.tsx
-function FieldWrapper({ label, tooltipComponent, description, labelPosition = "left", spaceCompact = false, optional = false, children }) {
-	const uid = useId();
-	const id = `${uid}control`;
-	const labelId = `${uid}label`;
-	const descriptionId = description ? `${uid}description` : void 0;
-	const field = useMemo(() => ({
-		required: !optional,
-		id,
-		labelId,
-		descriptionId
-	}), [
-		optional,
-		id,
-		labelId,
-		descriptionId
-	]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: cx("flex w-full", labelPosition === "left" ? "items-start" : "items-left flex-col"),
-		children: [/* @__PURE__ */ jsxs("label", {
-			htmlFor: id,
-			id: labelId,
-			className: cx("relative", labelPosition === "left" ? "form-label" : "form-label-top", spaceCompact && "form-label-compact"),
-			children: [
-				label,
-				!optional && /* @__PURE__ */ jsx(RequiredMark, {}),
-				tooltipComponent
-			]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "w-full",
-			children: [/* @__PURE__ */ jsx(FieldProvider, {
-				value: field,
-				children: typeof children === "function" ? children({
-					id,
-					labelId,
-					describedBy: descriptionId
-				}) : children
-			}), description && /* @__PURE__ */ jsx("div", {
-				id: descriptionId,
-				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) {
@@ -168,7 +122,7 @@ function impureSetValueFromPath(obj, path, value) {
 	}
 	current[pathArray[pathArray.length - 1]] = value;
 }
-function initializeValues(options, srcData = {}, ignoreDefaultStrings = false) {
+function initializeValues(options, srcData = {}, blankDefault) {
 	if (!options || typeof options !== "object") return;
 	const schema = options;
 	const source = srcData;
@@ -214,7 +168,7 @@ function initializeValues(options, srcData = {}, ignoreDefaultStrings = false) {
 			if ((fieldSchema.type === "dropdown" || fieldSchema.type === "storage") && fieldSchema.secondaryField && fieldSchema.options && Array.isArray(fieldSchema.options)) {
 				const option = findSecondaryOption(fieldSchema.options, data[field]);
 				applySecondaryField(fieldSchema.secondaryField, option?.secondaryValue, (secondaryField, secondaryValue) => {
-					if (!(fieldSchema.type === "storage" && Object.prototype.hasOwnProperty.call(options, secondaryField) && source[secondaryField] !== void 0)) impureSetValueFromPath(acc, secondaryField, secondaryValue);
+					if (!(fieldSchema.type === "storage" && Object.hasOwn(options, secondaryField) && source[secondaryField] !== void 0)) impureSetValueFromPath(acc, secondaryField, secondaryValue);
 				});
 			}
 			return acc;
@@ -241,14 +195,57 @@ function initializeValues(options, srcData = {}, ignoreDefaultStrings = false) {
 			}
 		}
 		if (fieldSchema.type === "multi-dropdown" || fieldSchema.type === "checkbox-group") acc[field] = [];
-		if (fieldSchema.default !== void 0) {
-			const dflt = fieldSchema.default;
-			const isPwResource = typeof dflt === "string" && dflt.startsWith("pw://");
-			acc[field] = fieldSchema.type === "string" || ignoreDefaultStrings && !isPwResource && (fieldSchema.type === "textarea" || fieldSchema.type === "compute-clusters" || fieldSchema.type === "compute-resources") ? "" : dflt;
-		}
+		if (fieldSchema.default !== void 0) acc[field] = fieldSchema.type === "string" || blankDefault?.(fieldSchema) ? "" : fieldSchema.default;
 		if (fieldSchema.prefillDefault && fieldSchema.default !== void 0) acc[field] = fieldSchema.default;
 		return acc;
 	}, data);
 }
 //#endregion
-export { resolvedFlag as a, FieldWrapper as c, useFieldLabelledByProps as d, useFieldRequired as f, initializeValues as i, FieldProvider as l, flattenGroups as n, applySecondaryField as o, impureSetValueFromPath as r, findSecondaryOption as s, enforceOneMustBeTrue as t, useFieldControlProps as u };
+//#region src/form/FieldWrapper.tsx
+function FieldWrapper({ label, tooltipComponent, description, labelPosition = "left", spaceCompact = false, optional = false, children }) {
+	const isOptional = Boolean(resolvedFlag(optional));
+	const uid = useId();
+	const id = `${uid}control`;
+	const labelId = `${uid}label`;
+	const descriptionId = description ? `${uid}description` : void 0;
+	const field = useMemo(() => ({
+		required: !isOptional,
+		id,
+		labelId,
+		descriptionId
+	}), [
+		isOptional,
+		id,
+		labelId,
+		descriptionId
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("flex w-full", labelPosition === "left" ? "items-start" : "items-left flex-col"),
+		children: [/* @__PURE__ */ jsxs("label", {
+			htmlFor: id,
+			id: labelId,
+			className: cx("relative", labelPosition === "left" ? "form-label" : "form-label-top", spaceCompact && "form-label-compact"),
+			children: [
+				label,
+				!isOptional && /* @__PURE__ */ jsx(RequiredMark, {}),
+				tooltipComponent
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "w-full",
+			children: [/* @__PURE__ */ jsx(FieldProvider, {
+				value: field,
+				children: typeof children === "function" ? children({
+					id,
+					labelId,
+					describedBy: descriptionId
+				}) : children
+			}), description && /* @__PURE__ */ jsx("div", {
+				id: descriptionId,
+				className: "text-xs theme-muted-text mt-1 leading-relaxed",
+				children: description
+			})]
+		})]
+	});
+}
+//#endregion
+export { initializeValues as a, findSecondaryOption as c, useFieldLabelledByProps as d, useFieldRequired as f, impureSetValueFromPath as i, FieldProvider as l, enforceOneMustBeTrue as n, resolvedFlag as o, flattenGroups as r, applySecondaryField as s, FieldWrapper as t, useFieldControlProps as u };

package/dist/chunks/{CreateModal-BbV5cTj7.js → Markdown-CM-FenNE.js}

@@ -1,13 +1,14 @@
+import { i as useNotify, u as useStrings } from "./Provider-CDYurraE.js";
 import { AlertIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, ClipboardIcon, CopyIcon, FavoriteIcon, FavoriteOutlineIcon, HiddenFalseIcon, HiddenTrueIcon, InfoIcon, TooltipIcon } from "../icons.js";
-import { i as useNotify, u as useStrings } from "./Provider-DHmZ3v9i.js";
-import { n as TOOLTIP_ID } from "./Tooltip-n9w7Tkt1.js";
+import { n as TOOLTIP_ID } from "./Tooltip-K5HJr4_p.js";
+import { E as AddMenu } from "./PageHeader-0kG_iypP.js";
+import { n as modalPanelClasses, t as BareModal } from "./BareModal-BtRiQezg.js";
+import { r as ghostButtonClasses } from "./ConfirmModal-aOR4O1QE.js";
 import { a as filterOption, u as toggleSetMember } from "./StatusBadge-C1Blx_cW.js";
-import { n as modalPanelClasses, t as BareModal } from "./BareModal-BqroLbZ5.js";
-import { w as AddMenu } from "./PageHeader-MxuOs9cH.js";
+import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions, Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 import cx from "classnames";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Suspense, lazy, useCallback, useEffect, useRef, useState } from "react";
-import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions, Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Callout.tsx
 function CalloutIcon({ type }) {
 	if (type === "warning" || type === "error") return /* @__PURE__ */ jsx(AlertIcon, { className: "h-6 w-6 mr-4 text-lg" });
@@ -103,91 +104,6 @@ function CopyCodeBlock({ textToCopy, children, secret = false, isRevealed = fals
 	});
 }
 //#endregion
-//#region src/components/Markdown.tsx
-var MarkdownImpl = lazy(() => import("./MarkdownImpl-Bq4QhrtA.js"));
-function Markdown(props) {
-	return /* @__PURE__ */ jsx(Suspense, {
-		fallback: /* @__PURE__ */ jsx("div", {
-			className: "markdown whitespace-pre-wrap text-start w-full",
-			children: props.children
-		}),
-		children: /* @__PURE__ */ jsx(MarkdownImpl, { ...props })
-	});
-}
-//#endregion
-//#region src/components/ghostButton.ts
-var ghostButtonClasses = "inline-flex cursor-pointer items-center gap-1.5 h-8 px-3 rounded-md text-sm text-(--theme-muted-text-color) hover:text-(--theme-app) hover:bg-(--theme-muted-panel-bg) transition-colors";
-var primaryButtonClasses = "inline-flex cursor-pointer items-center gap-1.5 h-7 px-2.5 rounded-md text-[12.5px] font-medium bg-(--theme-element) text-(--theme-element-text) hover:opacity-90 transition-opacity";
-/** Filled destructive button for confirming irreversible actions in ds modals. */
-var dangerButtonClasses = "inline-flex cursor-pointer items-center gap-1.5 h-7 px-2.5 rounded-md text-[12.5px] font-medium bg-red-600 text-white hover:bg-red-700 transition-colors";
-//#endregion
-//#region src/components/ConfirmModal.tsx
-function ConfirmModal({ open, onClose, title, description, children, confirmLabel, onConfirm, confirmDisabled = false, destructive = false, align = "top", cancelLabel, closeOnConfirm = true }) {
-	const strings = useStrings();
-	const [pending, setPending] = useState(false);
-	const firedRef = useRef(false);
-	useEffect(() => {
-		if (open) firedRef.current = false;
-	}, [open]);
-	const onCloseRef = useRef(onClose);
-	onCloseRef.current = onClose;
-	const runConfirm = useCallback(async () => {
-		if (firedRef.current) return;
-		firedRef.current = true;
-		setPending(true);
-		try {
-			await onConfirm();
-			if (closeOnConfirm) onCloseRef.current();
-			else firedRef.current = false;
-		} catch (error) {
-			firedRef.current = false;
-			throw error;
-		} finally {
-			setPending(false);
-		}
-	}, [onConfirm, closeOnConfirm]);
-	return /* @__PURE__ */ jsxs(BareModal, {
-		open,
-		onClose,
-		ariaLabel: title,
-		align,
-		preventClose: pending,
-		className: cx(modalPanelClasses, "w-[480px] max-w-full"),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "px-5 pt-5",
-			children: [
-				/* @__PURE__ */ jsx("h2", {
-					className: "text-lg font-semibold text-(--theme-app)",
-					children: title
-				}),
-				description !== null && description !== void 0 && /* @__PURE__ */ jsx("p", {
-					className: "mt-1.5 text-sm text-(--theme-muted-text-color)",
-					children: description
-				}),
-				children !== null && children !== void 0 && /* @__PURE__ */ jsx("div", {
-					className: "mt-4",
-					children
-				})
-			]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "mt-5 flex items-center justify-end gap-2 border-t border-(--theme-border) px-5 py-3",
-			children: [/* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: onClose,
-				disabled: pending,
-				className: cx(ghostButtonClasses, pending && "cursor-wait"),
-				children: cancelLabel ?? strings.modal.cancel
-			}), /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: runConfirm,
-				disabled: confirmDisabled || pending,
-				className: cx(destructive ? dangerButtonClasses : primaryButtonClasses, "disabled:cursor-not-allowed disabled:opacity-50", pending && "cursor-wait"),
-				children: confirmLabel
-			})]
-		})]
-	});
-}
-//#endregion
 //#region src/components/CreateModal.tsx
 /** Small info icon that surfaces field help via the global tooltip. */
 function FieldHelp({ tooltip }) {
@@ -303,7 +219,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 							className: "inline-flex items-center gap-1.5 px-1.5 py-1 rounded-md bg-(--theme-muted-panel-bg) text-xs font-medium text-(--theme-muted-text-color)",
 							children: [typeIcon, typeLabel]
 						}),
-						hideName ? /* @__PURE__ */ jsx("div", { className: "mt-3" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+						hideName ? /* @__PURE__ */ jsx("div", { className: "mt-3" }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 							/* @__PURE__ */ jsx("input", {
 								ref: nameRef,
 								type: "text",
@@ -587,7 +503,7 @@ function CreateModalSelectPanel({ open, options, label, value, collapsedLabel, o
 	} : void 0);
 	return /* @__PURE__ */ jsxs(MenuItems, {
 		anchor: "bottom start",
-		className: "z-[9999] mt-1 flex min-w-44 max-h-64 flex-col [--anchor-max-height:16rem] overflow-hidden rounded-lg border border-(--theme-border) bg-(--theme-app-bg) shadow-lg focus:outline-none",
+		className: "z-[9999] mt-1 flex min-w-44 max-w-[min(28rem,calc(100vw-2rem))] max-h-64 flex-col [--anchor-max-height:16rem] overflow-hidden rounded-lg border border-(--theme-border) bg-(--theme-app-bg) shadow-lg focus:outline-none",
 		children: [showFilter && /* @__PURE__ */ jsx("div", {
 			className: "shrink-0 bg-(--theme-app-bg) px-1.5 pt-1 pb-1.5 border-b border-(--theme-border)",
 			children: /* @__PURE__ */ jsx("input", {
@@ -618,9 +534,9 @@ function CreateModalSelectPanel({ open, options, label, value, collapsedLabel, o
 function CreateModalSelect({ label, icon, value, options, onChange, disabled = false, disabledHint, tooltip, collapsedLabel }) {
 	const selected = options.find((o) => o.value === value);
 	const selectedLabel = selected?.label ?? (value || void 0);
-	const pillContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+	const pillContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		selected?.icon ?? icon,
-		selectedLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		selectedLabel ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 			className: "font-normal text-(--theme-muted-text-color)",
 			children: label
 		}), selectedLabel] }) : label,
@@ -637,7 +553,7 @@ function CreateModalSelect({ label, icon, value, options, onChange, disabled = f
 			children: pillContent
 		})
 	});
-	return /* @__PURE__ */ jsx(Menu, { children: ({ open }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuButton, {
+	return /* @__PURE__ */ jsx(Menu, { children: ({ open }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MenuButton, {
 		"aria-label": label,
 		className: cx("inline-flex h-7 rounded-md border border-(--theme-border) text-xs font-medium transition-colors hover:bg-(--theme-muted-panel-bg)", selectedLabel ? "text-(--theme-app)" : "text-(--theme-muted-text-color)"),
 		children: /* @__PURE__ */ jsx(PillTooltip, {
@@ -655,4 +571,16 @@ function CreateModalSelect({ label, icon, value, options, onChange, disabled = f
 	})] }) });
 }
 //#endregion
-export { CreateModalSelect as a, ConfirmModal as c, primaryButtonClasses as d, Markdown as f, Callout as h, CreateModalField as i, dangerButtonClasses as l, CopyToClipboard as m, CreateModal as n, CreateModalSwitch as o, CopyCodeBlock as p, CreateModalAutocompleteField as r, CreateModalTextarea as s, CREATE_MODAL_SELECT_FILTER_THRESHOLD as t, ghostButtonClasses as u };
+//#region src/components/Markdown.tsx
+var MarkdownImpl = lazy(() => import("./MarkdownImpl-CyeTVvSt.js"));
+function Markdown(props) {
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx("div", {
+			className: "markdown whitespace-pre-wrap text-start w-full",
+			children: props.children
+		}),
+		children: /* @__PURE__ */ jsx(MarkdownImpl, { ...props })
+	});
+}
+//#endregion
+export { CreateModalField as a, CreateModalTextarea as c, Callout as d, CreateModalAutocompleteField as i, CopyCodeBlock as l, CREATE_MODAL_SELECT_FILTER_THRESHOLD as n, CreateModalSelect as o, CreateModal as r, CreateModalSwitch as s, Markdown as t, CopyToClipboard as u };

package/dist/chunks/Monaco-DJ8MW-Dq.js

@@ -0,0 +1,110 @@
+import { t as useCssIsDark } from "./useCssIsDark-DHr05dG2.js";
+import { a as getThemeName, i as defineEditorThemes, n as onYamlSchemas, r as setupMonacoWorkers } from "./editor-Dk1rbV75.js";
+import cx from "classnames";
+import { useEffect, useLayoutEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as monaco from "monaco-editor";
+import { configureMonacoYaml } from "monaco-yaml";
+//#region src/editor/Monaco.tsx
+setupMonacoWorkers();
+var monacoWithWorkerBridge = {
+	...monaco,
+	editor: {
+		...monaco.editor,
+		createWebWorker: (opts) => "worker" in opts ? monaco.editor.createWebWorker(opts) : monaco.createWebWorker(opts)
+	}
+};
+var monacoYamlConfigured = false;
+function ensureMonacoYamlConfigured() {
+	if (monacoYamlConfigured) return;
+	monacoYamlConfigured = true;
+	const options = (schemas) => ({
+		enableSchemaRequest: true,
+		completion: true,
+		validate: true,
+		hover: true,
+		format: { enable: true },
+		schemas
+	});
+	const monacoYaml = configureMonacoYaml(monacoWithWorkerBridge, options([]));
+	onYamlSchemas((schemas) => monacoYaml.update(options(schemas)));
+}
+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", ...options }) {
+	const isDark = useCssIsDark();
+	const readOnly = disabled || options.readOnly;
+	const monacoRef = useRef(null);
+	const isSyncingValueRef = useRef(false);
+	useEffect(() => {
+		if (!monacoRef.current) return;
+		defineEditorThemes(monaco.editor);
+		monaco.editor.setTheme(getThemeName(isDark, disabled));
+		monacoRef.current.updateOptions(readOnly === void 0 ? {} : { readOnly });
+	}, [
+		disabled,
+		isDark,
+		readOnly
+	]);
+	useLayoutEffect(() => {
+		const model = monacoRef.current?.getModel();
+		if (!model || options.value === void 0 || editorText(model.getValue()) === editorText(options.value)) return;
+		isSyncingValueRef.current = true;
+		try {
+			model.setValue(options.value);
+		} finally {
+			isSyncingValueRef.current = false;
+		}
+	}, [options.value]);
+	useEffect(() => {
+		return () => {
+			monacoRef.current?.dispose();
+			monacoRef.current = null;
+		};
+	}, []);
+	/** Strips CR (\r) — Windows line endings break bash scripts. */
+	const onChangeWrapper = (value) => {
+		value = editorText(value);
+		onChange(value);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			width,
+			height
+		},
+		className: cx("relative border rounded", className),
+		ref: (ref) => {
+			if (ref && !monacoRef.current) {
+				monaco.editor.getModel(monaco.Uri.parse(path))?.dispose();
+				defineEditorThemes(monaco.editor);
+				monaco.editor.setTheme(getThemeName(isDark, disabled));
+				const model = monaco.editor.createModel(options.value ?? "", options.language, monaco.Uri.parse(path));
+				const editor = monaco.editor.create(ref, {
+					automaticLayout: true,
+					model,
+					...options,
+					...readOnly === void 0 ? {} : { readOnly },
+					fixedOverflowWidgets: true,
+					suggest: {
+						preview: true,
+						showWords: false,
+						showInlineDetails: true
+					}
+				});
+				model.onDidChangeContent(() => {
+					if (isSyncingValueRef.current) return;
+					onChangeWrapper(editor.getValue());
+				});
+				model.onDidChangeDecorations(() => {
+					onValidate(monaco.editor.getModelMarkers({ resource: model.uri }));
+				});
+				ensureMonacoYamlConfigured();
+				monacoRef.current = editor;
+			}
+		}
+	});
+}
+//#endregion
+export { MonacoEditor as default };