@parallelworks/ui 0.1.0 → 0.3.0

package/dist/chunks/SwitchToggleSmall-FcsaYSTs.js

@@ -0,0 +1,14 @@
+import cx from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/SwitchToggleSmall.tsx
+function SwitchToggleSmall({ value = false, disabled = false, className, ...buttonProps }) {
+	return /* @__PURE__ */ jsx("button", {
+		disabled,
+		...buttonProps,
+		role: "switch",
+		"aria-checked": value,
+		className: cx("relative w-11 h-6 rounded-full transition-colors duration-400 ease-in-out", "before:content-[\"\"] before:absolute before:w-4 before:h-4 before:top-1 before:left-1", "before:bg-white before:rounded-full before:transition-transform before:duration-400 before:ease-in-out", disabled ? "bg-(--theme-border) cursor-not-allowed" : "cursor-pointer", !disabled && value ? "bg-(--theme-element) before:translate-x-5" : "bg-(--theme-border)", className)
+	});
+}
+//#endregion
+export { SwitchToggleSmall as t };

package/dist/chunks/Table-C5z6qWjM.js

@@ -0,0 +1,91 @@
+import { t as Loader } from "./Loader-DQiZ75fa.js";
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+//#region src/components/Table.tsx
+function Item({ wrap = false, children, className, colspan = 1, ...tdProps }) {
+	const yPadding = className?.includes("py-") ? "" : "py-4";
+	const xPadding = className?.includes("px-") ? "" : "px-2";
+	return /* @__PURE__ */ jsx("td", {
+		...tdProps,
+		colSpan: colspan,
+		className: cx(yPadding, xPadding, wrap ? "" : "whitespace-nowrap", className),
+		children
+	});
+}
+function CompactItem({ wrap = false, children, className, colspan = 1, ...tdProps }) {
+	return /* @__PURE__ */ jsx("td", {
+		...tdProps,
+		colSpan: colspan,
+		className: cx("px-2 text-sm font-medium", !wrap && "whitespace-nowrap", className),
+		children
+	});
+}
+function Header({ children, className, style, colspan = 1, onClick, caps = true }) {
+	return /* @__PURE__ */ jsx("th", {
+		scope: "col",
+		colSpan: colspan,
+		style,
+		className: cx(className, className?.includes("py-") ? "" : "py-3", className?.includes("px-") ? "" : "px-3", className?.includes("text-") ? "" : "text-left", "text-xs font-medium", caps ? "uppercase tracking-wider" : "", onClick && "cursor-pointer hover:opacity-80 transition-opacity"),
+		onClick,
+		children
+	});
+}
+var isHeaderChild = (child) => {
+	if (!React.isValidElement(child)) return false;
+	return child.type === Header || typeof child.type === "function" && child.type.isTableHeader === true;
+};
+var getHeaders = (children) => children.filter(isHeaderChild);
+function Table({ borderless = false, panel = true, className = "", wrapperClassName = "", tbodyClassName = "divide-y", theadClassName = "theme-muted-panel", children, roundedTop = false, rounded = false, roundedBottom = false, isLoading = false, tableProps }) {
+	const ChildrenArr = React.Children.toArray(children);
+	const Headers = getHeaders(ChildrenArr);
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("flex flex-col w-full", !wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-")) && "overflow-hidden", wrapperClassName),
+		children: isLoading ? /* @__PURE__ */ jsx("div", {
+			className: "flex justify-center items-center h-32",
+			children: /* @__PURE__ */ jsx(Loader, {})
+		}) : /* @__PURE__ */ jsx("div", {
+			className: cx("align-middle inline-block min-w-full overflow-x-auto", panel && "theme-panel", !borderless && "border theme-border", rounded && "rounded-2xl", roundedBottom && "rounded-b-2xl", roundedTop && "rounded-t-2xl"),
+			children: /* @__PURE__ */ jsxs("table", {
+				className: cx(className, "min-w-full divide-y theme-border"),
+				...tableProps,
+				children: [/* @__PURE__ */ jsx("thead", {
+					className: theadClassName,
+					children: /* @__PURE__ */ jsx("tr", { children: Headers })
+				}), /* @__PURE__ */ jsx("tbody", {
+					className: tbodyClassName,
+					children: ChildrenArr.filter((c) => !isHeaderChild(c))
+				})]
+			})
+		})
+	});
+}
+function CompactTable({ wrapperClassName = "", className = "", tbodyClassName = "divide-y", children, roundedTop = false, rounded = false, roundedBottom = false }) {
+	const ChildrenArr = React.Children.toArray(children);
+	const Headers = getHeaders(ChildrenArr);
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("flex flex-col w-full", !wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-")) && "overflow-hidden", wrapperClassName),
+		children: /* @__PURE__ */ jsx("div", {
+			className: cx("theme-panel inline-block min-w-full align-middle overflow-x-auto", rounded && "rounded-2xl", roundedBottom && "rounded-b-2xl pb-1", roundedTop && "rounded-t-2xl"),
+			children: /* @__PURE__ */ jsxs("table", {
+				className: cx("min-w-full divide-y theme-border", className),
+				children: [/* @__PURE__ */ jsx("thead", {
+					className: "theme-muted-panel",
+					children: /* @__PURE__ */ jsx("tr", {
+						className: "divide-x",
+						children: Headers
+					})
+				}), /* @__PURE__ */ jsx("tbody", {
+					className: tbodyClassName,
+					children: ChildrenArr.filter((c) => !isHeaderChild(c))
+				})]
+			})
+		})
+	});
+}
+Table.Header = Header;
+Table.Item = Item;
+CompactTable.Header = Header;
+CompactTable.Item = CompactItem;
+//#endregion
+export { Table as n, CompactTable as t };

package/dist/chunks/Tooltip-WgbiC_nd.js

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

package/dist/chunks/editor-D55tumuZ.js

@@ -0,0 +1,372 @@
+import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "../icons.js";
+import { c as useStrings, i as useNotify } from "./Provider-DvVvScTQ.js";
+import { t as Loader } from "./Loader-DQiZ75fa.js";
+import { t as SwitchToggleSmall } from "./SwitchToggleSmall-FcsaYSTs.js";
+import { c as FieldWrapper, n as flattenGroups, r as impureSetValueFromPath } from "./lib-DTgL8klR.js";
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Suspense, lazy, useEffect, useMemo, useRef, useState } from "react";
+import { convertToDynamicForm, parseStringsOfObj, parseStringsOfObjReady } from "@parallelworks/workflow-parser";
+import { useField, useFormikContext } from "formik";
+//#region src/editor/Editor.tsx
+var MonacoEditor = lazy(() => import("./Monaco-CC4ak1JG.js"));
+function Editor({ ...props }) {
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx(Loader, { text: "Loading editor..." }),
+		children: /* @__PURE__ */ jsx(MonacoEditor, { ...props })
+	});
+}
+//#endregion
+//#region src/editor/EditorField.tsx
+function hasResetKeys(obj) {
+	return obj.editorKeyPostfix !== void 0;
+}
+function EditorField(props) {
+	const { field, label, labelPosition, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty } = props;
+	const [fieldState] = useField(field.name);
+	const { setFieldValue, setFieldTouched, values } = useFormikContext();
+	const debounceRef = useRef(null);
+	const touchedRef = useRef(false);
+	const handleChange = (val) => {
+		touchedRef.current = true;
+		if (debounceRef.current) clearTimeout(debounceRef.current);
+		debounceRef.current = setTimeout(() => {
+			if (onChange) onChange(val);
+			setFieldTouched(field.name, true);
+			setFieldValue(field.name, val);
+			setFormDirty(true);
+		}, 500);
+	};
+	let editorKeyPostfix = "";
+	if (hasResetKeys(values)) editorKeyPostfix = values.editorKeyPostfix;
+	const postfixKey = useMemo(() => {
+		const randomKey = Math.random().toString(36).substring(7);
+		return editorKeyPostfix || randomKey;
+	}, [editorKeyPostfix]);
+	const value = fieldState.value;
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		optional: field.optional,
+		label,
+		tooltipComponent,
+		labelPosition,
+		spaceCompact,
+		children: /* @__PURE__ */ jsx(Editor, {
+			height: "200px",
+			path: field.name,
+			value: touchedRef.current ? 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,
+			language: field.options?.language || "shell"
+		}, field.name + postfixKey)
+	});
+}
+//#endregion
+//#region src/editor/FormCodePanel.tsx
+var shouldIgnoreField = (fieldSchema, inputs, arrayIndex) => {
+	if (!fieldSchema?.ignore || !fieldSchema?.hidden) return false;
+	if (!parseStringsOfObjReady) return false;
+	return parseStringsOfObj({
+		inputs,
+		obj: convertToDynamicForm(fieldSchema),
+		index: arrayIndex ?? -1
+	}).hidden === true;
+};
+var filterFields = (formJSON, data, prefix, rootData, arrayIndex) => {
+	const filteredFields = [];
+	return {
+		filteredFields,
+		filtered: Object.keys(data).reduce((acc, key) => {
+			if (data[key] !== null && Array.isArray(data[key])) {
+				acc[key] = [];
+				if (!formJSON[key]) return acc;
+				for (let i = 0; i < data[key].length; i++) {
+					let filteredFieldsNested = [];
+					let filteredNested = {};
+					if (typeof data[key][i] === "object") {
+						const result = filterFields(formJSON[key].options, data[key][i], key + `[${i}].`, rootData || data, i);
+						filteredNested = result.filtered;
+						filteredFieldsNested = result.filteredFields;
+					} else filteredNested = data[key][i];
+					filteredFields.push(...filteredFieldsNested);
+					acc[key][i] = filteredNested;
+				}
+				return acc;
+			}
+			if (data[key] !== null && formJSON && formJSON[key] && typeof data[key] === "object") {
+				const { filteredFields: filteredFieldsNested, filtered: filteredNested } = filterFields(formJSON[key], data[key], key + ".", rootData || data, arrayIndex);
+				filteredFields.push(...filteredFieldsNested);
+				acc[key] = filteredNested;
+				return acc;
+			}
+			if (formJSON?.[key]?.sensitive) {
+				const name = prefix ? prefix + key : key;
+				filteredFields.push({
+					key: name,
+					value: data[key]
+				});
+				return acc;
+			}
+			const contextData = rootData || data;
+			if (formJSON && shouldIgnoreField(formJSON[key], contextData, arrayIndex)) return acc;
+			acc[key] = data[key];
+			return acc;
+		}, {})
+	};
+};
+var populateFiltered = (filteredFields, data) => {
+	filteredFields.forEach((element) => {
+		impureSetValueFromPath(data, element.key, element.value);
+	});
+	return data;
+};
+function FormCodePanel({ formJSON, data, mutate, height = "600px", disabled = false }) {
+	const notify = useNotify();
+	const { common: t } = useStrings();
+	const [jsonHasErrors, setJsonHasErrors] = useState(false);
+	const [showHidden, setShowHidden] = useState(false);
+	const [copied, setCopied] = useState(false);
+	const copyResetRef = useRef(void 0);
+	const isValidJson = (errors) => {
+		setJsonHasErrors(errors.length > 0);
+	};
+	const { filteredFields, filtered } = filterFields(flattenGroups(formJSON), data || {});
+	const hasHiddenFields = filteredFields.length > 0;
+	const displayObj = showHidden && hasHiddenFields ? populateFiltered(filteredFields, structuredClone(filtered)) : filtered;
+	const showHiddenRef = useRef(showHidden);
+	showHiddenRef.current = showHidden;
+	const filteredFieldsRef = useRef(filteredFields);
+	filteredFieldsRef.current = filteredFields;
+	const json = JSON.stringify(displayObj, null, 2);
+	const handleCopy = async () => {
+		try {
+			await navigator.clipboard.writeText(json);
+			setCopied(true);
+			clearTimeout(copyResetRef.current);
+			copyResetRef.current = setTimeout(() => setCopied(false), 2e3);
+		} catch {
+			notify.error(t.copyFailed);
+		}
+	};
+	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)"),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "bg-(--theme-muted-panel-bg) text-(--theme-muted-panel-color) flex shrink-0 items-center gap-3 border-b border-(--theme-border) px-3 py-2",
+				children: [hasHiddenFields && /* @__PURE__ */ jsxs("label", {
+					title: t.showHiddenFieldsHint,
+					className: "flex cursor-pointer select-none items-center gap-2 text-sm text-(--theme-app)",
+					children: [/* @__PURE__ */ jsx(SwitchToggleSmall, {
+						value: showHidden,
+						"aria-label": t.showHiddenFields,
+						onClick: () => setShowHidden((prev) => !prev)
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-1.5",
+						children: [showHidden ? /* @__PURE__ */ jsx(EyeIcon, {}) : /* @__PURE__ */ jsx(EyeOffIcon, {}), t.showHiddenFields]
+					})]
+				}), /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					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]
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "min-h-0 flex-1",
+				children: /* @__PURE__ */ jsx(Editor, {
+					height: "100%",
+					value: json,
+					onValidate: isValidJson,
+					className: "!rounded-none !border-0",
+					minimap: { enabled: false },
+					scrollBeyondLastLine: false,
+					overviewRulerLanes: 0,
+					overviewRulerBorder: false,
+					lineNumbersMinChars: 3,
+					lineDecorationsWidth: 8,
+					renderLineHighlight: "none",
+					padding: {
+						top: 12,
+						bottom: 12
+					},
+					fontSize: 13,
+					scrollbar: {
+						verticalScrollbarSize: 10,
+						horizontalScrollbarSize: 10
+					},
+					onChange: (e) => {
+						try {
+							const parsed = JSON.parse(e);
+							mutate(showHiddenRef.current ? parsed : populateFiltered(filteredFieldsRef.current, parsed));
+						} catch {
+							console.log("JSON.parse error in slurm editor");
+						}
+					},
+					language: "json",
+					disabled
+				})
+			})]
+		}), jsonHasErrors && /* @__PURE__ */ jsx("p", {
+			className: "shrink-0 text-sm text-red-500",
+			children: t.jsonHasErrors
+		})]
+	});
+}
+//#endregion
+//#region src/editor/themes.ts
+function expandShorthandHex(color) {
+	return /^#([0-9a-fA-F]{3,4})$/.test(color) ? "#" + color.slice(1).split("").map((c) => c + c).join("") : color;
+}
+function normalizeThemeColors(colors) {
+	return Object.fromEntries(Object.entries(colors).map(([key, value]) => [key, expandShorthandHex(value)]));
+}
+function themeVar(name, fallback) {
+	if (typeof window === "undefined") return fallback;
+	return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+}
+function createEditorThemes() {
+	const dark = {
+		foreground: themeVar("--theme-app", "#e6edf3"),
+		background: themeVar("--theme-panel-bg", "#161b22"),
+		border: themeVar("--theme-border", "#30363d"),
+		lineHighlight: themeVar("--theme-muted-panel-bg", "#21262d"),
+		lineNumber: themeVar("--theme-muted-text-color", "#8b949e"),
+		selection: themeVar("--theme-element", "#2f81f7"),
+		selectionFg: themeVar("--theme-element-text", "#ffffff"),
+		disabledBg: themeVar("--theme-input-disabled-bg", "#1c2128"),
+		disabledFg: themeVar("--theme-muted-text-color", "#8b949e")
+	};
+	const light = {
+		disabledBg: themeVar("--theme-input-disabled-bg", "#f3f4f6"),
+		disabledFg: themeVar("--theme-muted-text-color", "#6c757d"),
+		border: themeVar("--theme-border", "#d1d5db"),
+		selection: themeVar("--theme-element", "#2f81f7"),
+		selectionFg: themeVar("--theme-element-text", "#ffffff")
+	};
+	return {
+		"app-dark": {
+			base: "vs-dark",
+			inherit: true,
+			rules: [],
+			colors: {
+				"editor.foreground": dark.foreground,
+				"editor.background": dark.background,
+				"editor.border": dark.border,
+				"editorCursor.foreground": dark.foreground,
+				"editor.lineHighlightBackground": dark.lineHighlight,
+				"editorLineNumber.foreground": dark.lineNumber,
+				"editor.selectionBackground": dark.selection,
+				"editor.selectionForeground": dark.selectionFg
+			}
+		},
+		"app-dark-disabled": {
+			base: "vs-dark",
+			inherit: true,
+			rules: [],
+			colors: {
+				"editor.foreground": dark.disabledFg,
+				"editor.background": dark.disabledBg,
+				"editor.border": dark.border,
+				"editorCursor.foreground": "transparent",
+				"editor.lineHighlightBackground": dark.disabledBg,
+				"editorLineNumber.foreground": dark.disabledFg,
+				"editor.selectionBackground": dark.selection,
+				"editor.selectionForeground": dark.selectionFg
+			}
+		},
+		"app-light-disabled": {
+			base: "vs",
+			inherit: true,
+			rules: [],
+			colors: {
+				"editor.foreground": light.disabledFg,
+				"editor.background": light.disabledBg,
+				"editor.border": light.border,
+				"editorCursor.foreground": "transparent",
+				"editor.lineHighlightBackground": light.disabledBg,
+				"editorLineNumber.foreground": light.disabledFg,
+				"editor.selectionBackground": light.selection,
+				"editor.selectionForeground": light.selectionFg
+			}
+		}
+	};
+}
+function defineEditorThemes(monacoEditor) {
+	const themes = createEditorThemes();
+	for (const [name, themeData] of Object.entries(themes)) monacoEditor.defineTheme(name, {
+		...themeData,
+		colors: normalizeThemeColors(themeData.colors)
+	});
+}
+function getThemeName(isDark, disabled) {
+	if (isDark) return disabled ? "app-dark-disabled" : "app-dark";
+	return disabled ? "app-light-disabled" : "vs";
+}
+//#endregion
+//#region src/editor/workers.ts
+var monacoEnvironment = { getWorker(_moduleId, label) {
+	if (label === "json") return new Worker(new URL(
+		/* @vite-ignore */
+		"/assets/json.worker-8ytS02vz.js",
+		"" + import.meta.url
+	), { type: "module" });
+	if (label === "yaml") return new Worker(new URL(
+		/* @vite-ignore */
+		"/assets/yaml.worker-DJC-VUcv.js",
+		"" + import.meta.url
+	), { type: "module" });
+	return new Worker(new URL(
+		/* @vite-ignore */
+		"/assets/editor.worker-CuBRIwi-.js",
+		"" + import.meta.url
+	), { type: "module" });
+} };
+/**
+* Points window.MonacoEnvironment at the bundled workers. Idempotent, and a
+* host that already configured its own MonacoEnvironment wins — the editor
+* calls this on first load only when nothing is configured.
+*/
+function setupMonacoWorkers() {
+	if (window.MonacoEnvironment) return;
+	window.MonacoEnvironment = monacoEnvironment;
+}
+//#endregion
+//#region src/editor/useCssIsDark.ts
+function readIsDark() {
+	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;
+}
+/**
+* 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);
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: [
+				"style",
+				"class",
+				"data-theme"
+			]
+		});
+		return () => {
+			media?.removeEventListener("change", update);
+			observer.disconnect();
+		};
+	}, []);
+	return isDark;
+}
+//#endregion
+export { FormCodePanel as a, getThemeName as i, setupMonacoWorkers as n, EditorField as o, defineEditorThemes as r, Editor as s, useCssIsDark as t };