@parallelworks/ui 0.44.0 → 0.46.0

package/dist/components/shortcutKey.d.ts

@@ -0,0 +1,4 @@
+/** Guards page shortcuts from firing inside inputs, terminals, editors, and dialogs. */
+export declare function isTextEntryContext(target: EventTarget | null): boolean;
+/** Calls `onPress` on a single key, such as F to filter, unless the key goes to a text field. */
+export declare function useShortcutKey(key: string | undefined, onPress: () => void): void;

package/dist/components/shortcutKey.js

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from "react";
+//#region src/components/shortcutKey.ts
+/** Guards page shortcuts from firing inside inputs, terminals, editors, and dialogs. */
+function isTextEntryContext(target) {
+	const el = target;
+	if (!el) return false;
+	if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.isContentEditable) return true;
+	return Boolean(el.closest?.(".xterm, .monaco-editor, .cm-editor, [role=\"dialog\"]"));
+}
+/** Calls `onPress` on a single key, such as F to filter, unless the key goes to a text field. */
+function useShortcutKey(key, onPress) {
+	const press = useRef(onPress);
+	press.current = onPress;
+	useEffect(() => {
+		if (!key) return;
+		const onKey = (e) => {
+			if (e.metaKey || e.ctrlKey || e.altKey || e.key.toLowerCase() !== key.toLowerCase()) return;
+			if (isTextEntryContext(e.target)) return;
+			e.preventDefault();
+			press.current();
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [key]);
+}
+//#endregion
+export { isTextEntryContext, useShortcutKey };

package/dist/components/splitter.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes } from 'react';
+export interface SplitterOptions {
+    /** The committed width. Keep it in `useState`, or in `usePersistedState` to remember it. */
+    width: number;
+    /** Hears the width once a drag ends, and on each key press. */
+    onWidthChange: (width: number) => void;
+    min: number;
+    /** The widest it goes; a function for a bound that moves with the window. */
+    max: number | (() => number);
+    /** The panel edge the handle sits on. Dragging away from the panel widens it. */
+    side: 'left' | 'right';
+    /** What a double-click restores. */
+    defaultWidth?: number | undefined;
+    /** Names the handle when "Resize panel" doesn't say which panel. */
+    label?: string | undefined;
+}
+export interface Splitter {
+    /** The width to draw: the live one during a drag, the committed one otherwise. */
+    width: number;
+    resizing: boolean;
+    /** Spread on the handle: a focusable window splitter on the panel's edge. */
+    separatorProps: HTMLAttributes<HTMLDivElement>;
+}
+/** A panel edge that a drag, the arrow keys, Home and End resize. The width is
+ *  the caller's state; a drag commits it once, when it ends. */
+export declare function useSplitter({ width, onWidthChange, min, max, side, defaultWidth, label, }: SplitterOptions): Splitter;

package/dist/components/splitter.js

@@ -0,0 +1,69 @@
+import { cx } from "../cx.js";
+import { useStrings } from "./Provider.js";
+import { useRef, useState } from "react";
+//#region src/components/splitter.ts
+var KEYBOARD_STEP_PX = 16;
+/** A panel edge that a drag, the arrow keys, Home and End resize. The width is
+*  the caller's state; a drag commits it once, when it ends. */
+function useSplitter({ width, onWidthChange, min, max, side, defaultWidth, label }) {
+	const t = useStrings().common;
+	const [live, setLive] = useState(null);
+	const drag = useRef(null);
+	const grows = side === "left" ? -1 : 1;
+	const maxWidth = () => typeof max === "function" ? max() : max;
+	const clamp = (px) => Math.round(Math.max(min, Math.min(px, maxWidth())));
+	const shown = live ?? width;
+	const onPointerDown = (e) => {
+		e.preventDefault();
+		e.currentTarget.setPointerCapture?.(e.pointerId);
+		drag.current = {
+			x: e.clientX,
+			width
+		};
+		setLive(width);
+	};
+	const onPointerMove = (e) => {
+		if (drag.current) setLive(clamp(drag.current.width + (e.clientX - drag.current.x) * grows));
+	};
+	const onPointerUp = () => {
+		if (drag.current && live !== null && live !== width) onWidthChange(live);
+		drag.current = null;
+		setLive(null);
+	};
+	const onKeyDown = (e) => {
+		const direction = {
+			ArrowLeft: -1,
+			ArrowRight: 1
+		}[e.key];
+		if (direction !== void 0) onWidthChange(clamp(width + direction * grows * KEYBOARD_STEP_PX));
+		else if (e.key === "Home") onWidthChange(min);
+		else if (e.key === "End") onWidthChange(clamp(Number.POSITIVE_INFINITY));
+		else return;
+		e.preventDefault();
+	};
+	const now = Math.round(shown);
+	const bound = maxWidth();
+	return {
+		width: shown,
+		resizing: live !== null,
+		separatorProps: {
+			role: "separator",
+			"aria-label": label ?? t.resizePanel,
+			"aria-orientation": "vertical",
+			"aria-valuenow": now,
+			"aria-valuemin": min,
+			...Number.isFinite(bound) ? { "aria-valuemax": Math.round(bound) } : {},
+			"aria-valuetext": t.panelWidth(now),
+			tabIndex: 0,
+			onPointerDown,
+			onPointerMove,
+			onPointerUp,
+			onPointerCancel: onPointerUp,
+			onKeyDown,
+			...defaultWidth === void 0 ? {} : { onDoubleClick: () => onWidthChange(defaultWidth) },
+			className: cx("absolute inset-y-0 z-10 w-1.5 cursor-col-resize touch-none transition-colors focus-visible:bg-(--theme-link) focus-visible:outline-none", side === "left" ? "-left-0.75" : "-right-0.75", live === null ? "hover:bg-(--theme-border)" : "bg-(--theme-accent)")
+		}
+	};
+}
+//#endregion
+export { useSplitter };

package/dist/components/tone.d.ts

@@ -0,0 +1,9 @@
+/** How a status reads: its colors come from the theme's tone tokens, so every
+ *  theme, dark ones included, sets them once. */
+export type Tone = 'default' | 'success' | 'warning' | 'error' | 'info' | 'muted';
+/** Text in the tone, for a status line beside a dot or icon. */
+export declare const toneText: Record<Tone, string>;
+/** A tinted surface with a border and text in the tone, for a badge or a callout. */
+export declare const toneSurface: Record<Tone, string>;
+/** A solid fill in the tone, for a dot. */
+export declare const toneFill: Record<Tone, string>;

package/dist/components/tone.js

@@ -0,0 +1,30 @@
+//#region src/components/tone.ts
+/** Text in the tone, for a status line beside a dot or icon. */
+var toneText = {
+	default: "text-(--theme-app)",
+	success: "text-(--theme-success)",
+	warning: "text-(--theme-warning)",
+	error: "text-(--theme-error)",
+	info: "text-(--theme-info)",
+	muted: "text-(--theme-muted-text-color)"
+};
+/** A tinted surface with a border and text in the tone, for a badge or a callout. */
+var toneSurface = {
+	default: "bg-(--theme-muted-panel-bg) text-(--theme-app) border-(--theme-border)",
+	success: "bg-(--theme-success-muted) text-(--theme-success) border-(--theme-success)/25",
+	warning: "bg-(--theme-warning-muted) text-(--theme-warning) border-(--theme-warning)/25",
+	error: "bg-(--theme-error-muted) text-(--theme-error) border-(--theme-error)/25",
+	info: "bg-(--theme-info-muted) text-(--theme-info) border-(--theme-info)/25",
+	muted: "bg-(--theme-muted-panel-bg)/50 text-(--theme-muted-text-color) border-(--theme-border)"
+};
+/** A solid fill in the tone, for a dot. */
+var toneFill = {
+	default: "bg-(--theme-app)",
+	success: "bg-(--theme-success)",
+	warning: "bg-(--theme-warning)",
+	error: "bg-(--theme-error)",
+	info: "bg-(--theme-info)",
+	muted: "bg-(--theme-muted-text-color)"
+};
+//#endregion
+export { toneFill, toneSurface, toneText };

package/dist/components/useCopy.d.ts

@@ -0,0 +1,14 @@
+export interface CopyOptions {
+    /** Names what was copied in the toast, "Copied email address"; without it the
+     *  toast says only that something was copied. */
+    label?: string | undefined;
+    /** No toast on success, for a control that shows its own check. A failure
+     *  still says so. */
+    quiet?: boolean | undefined;
+}
+/** Copies text to the clipboard and says how it went. `copied` stays true for a
+ *  moment after, for a button that turns into a check. */
+export declare function useCopy(): {
+    copy: (text: string, options?: CopyOptions) => Promise<boolean>;
+    copied: boolean;
+};

package/dist/components/useCopy.js

@@ -0,0 +1,31 @@
+import { toast } from "./Toast.js";
+import { useStrings } from "./Provider.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/components/useCopy.ts
+var COPIED_FOR_MS = 2e3;
+/** Copies text to the clipboard and says how it went. `copied` stays true for a
+*  moment after, for a button that turns into a check. */
+function useCopy() {
+	const { common: t } = useStrings();
+	const [copied, setCopied] = useState(false);
+	const reset = useRef(void 0);
+	useEffect(() => () => clearTimeout(reset.current), []);
+	return {
+		copy: useCallback(async (text, { label, quiet = false } = {}) => {
+			try {
+				await navigator.clipboard.writeText(text);
+			} catch {
+				toast.error(label ? t.copyThingFailed(label) : t.copyFailed);
+				return false;
+			}
+			if (!quiet) toast.success(label ? t.copiedThing(label) : t.copiedToClipboard);
+			setCopied(true);
+			clearTimeout(reset.current);
+			reset.current = setTimeout(() => setCopied(false), COPIED_FOR_MS);
+			return true;
+		}, [t]),
+		copied
+	};
+}
+//#endregion
+export { useCopy };

package/dist/components/useCssIsDark.d.ts

@@ -1,3 +1,5 @@
+/** Whether the host's CSS color-scheme reads dark, falling back to the system preference. */
+export declare function readIsDark(): boolean;
 /**
  * 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

package/dist/components/useCssIsDark.js

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 //#region src/components/useCssIsDark.ts
+/** Whether the host's CSS color-scheme reads dark, falling back to the system preference. */
 function readIsDark() {
 	const scheme = getComputedStyle(document.documentElement).colorScheme;
 	const dark = scheme.includes("dark");
@@ -35,4 +36,4 @@ function useCssIsDark() {
 	return isDark;
 }
 //#endregion
-export { useCssIsDark };
+export { readIsDark, useCssIsDark };

package/dist/components/useTheme.d.ts

@@ -0,0 +1,10 @@
+import { type ColorPreference, type Mode, type Theme } from '../theme/index.js';
+/** The mode a preference shows now, following the device while it's `system`. */
+export declare function useColorMode(preference: ColorPreference): Mode;
+/**
+ * Applies a theme's scheme for a mode to an element, the document root by
+ * default, again whenever the theme changes: as a person edits it, the whole
+ * app previews it. It also sets the element's `color-scheme`, which native
+ * controls and `light-dark()` follow.
+ */
+export declare function useApplyTheme(theme: Theme, mode: Mode, element?: HTMLElement | null): void;

package/dist/components/useTheme.js

@@ -0,0 +1,40 @@
+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";
+//#region src/components/useTheme.ts
+var DARK = "(prefers-color-scheme: dark)";
+var prefersDark = () => typeof matchMedia === "function" && matchMedia(DARK).matches;
+/** 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]);
+	return resolveMode(preference, dark);
+}
+/**
+* Applies a theme's scheme for a mode to an element, the document root by
+* default, again whenever the theme changes: as a person edits it, the whole
+* app previews it. It also sets the element's `color-scheme`, which native
+* controls and `light-dark()` follow.
+*/
+function useApplyTheme(theme, mode, element) {
+	useLayoutEffect(() => {
+		const el = element ?? document.documentElement;
+		const scheme = schemeFor(theme, mode);
+		applyTheme(el, generateTheme(scheme, theme.code ? { code: theme.code } : {}));
+		el.style.colorScheme = modeOf(scheme);
+	}, [
+		theme,
+		mode,
+		element
+	]);
+}
+//#endregion
+export { useApplyTheme, useColorMode };

package/dist/cx.d.ts

@@ -0,0 +1,5 @@
+import { type ClassValue } from 'clsx';
+/** Joins class names, letting a later utility replace an earlier one it conflicts
+ *  with, so a caller's `className` wins over a component's own defaults: `w-20`
+ *  narrows a field box that is `w-full` by default. */
+export declare function cx(...inputs: ClassValue[]): string;

package/dist/cx.js

@@ -0,0 +1,11 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+//#region src/cx.ts
+/** Joins class names, letting a later utility replace an earlier one it conflicts
+*  with, so a caller's `className` wins over a component's own defaults: `w-20`
+*  narrows a field box that is `w-full` by default. */
+function cx(...inputs) {
+	return twMerge(clsx(inputs));
+}
+//#endregion
+export { cx };

package/dist/editing.d.ts

@@ -320,7 +320,7 @@ export type SettingsYamlProblem = {
 /** A key or list index on the way down to a YAML node. */
 export type YamlSegment = string | number;
 type UnknownRecord = Record<string, unknown>;
-/** One input a built-in action takes in its step's `with`, labelled in the reader's language. */
+/** One input a built-in action takes in its step's `with`, labeled in the reader's language. */
 export interface WorkflowActionInput {
     key: string;
     kind: 'text' | 'textarea' | 'number' | 'any' | 'list' | 'bool' | 'choice' | 'flags' | 'target';

package/dist/editor/Editor.js

@@ -1,11 +1,11 @@
-import Loader from "../components/Loader.js";
+import { Loader } from "../components/Loader.js";
 import { jsx } from "react/jsx-runtime";
 import { Suspense, lazy } from "react";
 //#region src/editor/Editor.tsx
 var MonacoEditor = lazy(() => import("./Monaco.js"));
 function Editor(props) {
 	return /* @__PURE__ */ jsx(Suspense, {
-		fallback: /* @__PURE__ */ jsx(Loader, { text: "Loading editor..." }),
+		fallback: /* @__PURE__ */ jsx(Loader, {}),
 		children: /* @__PURE__ */ jsx(MonacoEditor, { ...props })
 	});
 }

package/dist/editor/EditorField.js

@@ -1,13 +1,14 @@
-import { FieldWrapper } from "../form/FieldWrapper.js";
+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 { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 import { useMemo, useRef } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
 //#region src/editor/EditorField.tsx
 function EditorField(props) {
-	const { field, label, labelPosition, disabled, onChange, tooltipComponent, spaceCompact } = props;
+	const { field, label, disabled, onChange } = props;
 	const fieldName = field.name ?? "";
 	const [value, change] = useFieldValue(fieldName);
 	const touchedRef = useRef(false);
@@ -26,18 +27,14 @@ function EditorField(props) {
 		const randomKey = Math.random().toString(36).substring(7);
 		return editorKeyPostfix || randomKey;
 	}, [editorKeyPostfix]);
-	return /* @__PURE__ */ jsx(FieldWrapper, {
-		optional: field.optional,
-		label,
-		tooltipComponent,
-		labelPosition,
-		spaceCompact,
+	return /* @__PURE__ */ jsx(Field, {
+		...fieldFrame(props),
 		children: /* @__PURE__ */ jsx(Editor, {
 			ariaLabel: label,
 			height: "200px",
 			path: fieldName,
 			...touchedRef.current || value === void 0 ? {} : { value },
-			className: clsx("bg-(--theme-input-bg) w-11 border focus:border rounded text-[10px] leading-4 pl-[6px]", disabled && "opacity-75"),
+			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"

package/dist/editor/FormCodePanel.js

@@ -1,13 +1,11 @@
-import { FaCheck } from "../icons/fa/FaCheck.js";
-import { FiCopy } from "../icons/fi/FiCopy.js";
-import { LuEye } from "../icons/lu/LuEye.js";
-import { LuEyeOff } from "../icons/lu/LuEyeOff.js";
+import { cx } from "../cx.js";
+import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "../icons.js";
 import { Tooltip } from "../components/Tooltip.js";
-import { useNotify, useStrings, useWorkflowEngine } from "../components/Provider.js";
+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 { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 //#region src/editor/FormCodePanel.tsx
@@ -72,12 +70,10 @@ var populateFiltered = (filteredFields, data) => {
 };
 function FormCodePanel({ formJSON, data, mutate, height = "600px", disabled = false }) {
 	const engine = useWorkflowEngine();
-	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 { copy, copied } = useCopy();
 	const isValidJson = (errors) => {
 		setJsonHasErrors(errors.length > 0);
 	};
@@ -89,23 +85,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 handleCopy = async () => {
-		try {
-			await navigator.clipboard.writeText(json);
-			setCopied(true);
-			clearTimeout(copyResetRef.current);
-			copyResetRef.current = setTimeout(() => setCopied(false), 2e3);
-		} catch {
-			notify.error(t.copyFailed);
-		}
-	};
+	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: clsx("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-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",
+				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, {
 					content: t.showHiddenFieldsHint,
 					children: /* @__PURE__ */ jsxs("label", {
@@ -116,7 +103,7 @@ function FormCodePanel({ formJSON, data, mutate, height = "600px", disabled = fa
 							onCheckedChange: setShowHidden
 						}), /* @__PURE__ */ jsxs("span", {
 							className: "flex items-center gap-1.5",
-							children: [showHidden ? /* @__PURE__ */ jsx(LuEye, {}) : /* @__PURE__ */ jsx(LuEyeOff, {}), t.showHiddenFields]
+							children: [showHidden ? /* @__PURE__ */ jsx(EyeIcon, {}) : /* @__PURE__ */ jsx(EyeOffIcon, {}), t.showHiddenFields]
 						})]
 					})
 				}), /* @__PURE__ */ jsxs("button", {
@@ -124,7 +111,7 @@ 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(FaCheck, { className: "text-green-500" }) : /* @__PURE__ */ jsx(FiCopy, { className: "text-(--theme-muted-text-color)" }), copied ? t.copied : t.copy]
+					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",

package/dist/editor/Monaco.js

@@ -1,13 +1,13 @@
+import { cx } from "../cx.js";
 import { useCssIsDark } from "../components/useCssIsDark.js";
 import { HOST_MARKER_OWNER, LINT_OWNER } from "./lintOwner.js";
 import { lintContext, useLintEditing, useLintSources } from "./lintContext.js";
 import { publishNestedText } from "./nestedText.js";
 import { registerRevealer } from "./reveal.js";
-import { defineEditorThemes, getThemeName } from "./themes.js";
+import { defineEditorThemes, followThemeTokens, getThemeName } from "./themes.js";
 import { setupMonacoWorkers } from "./workers.js";
 import { holdListeners, modelFor } from "./editorModel.js";
 import { ensureYamlLanguage } from "./yamlLanguage.js";
-import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef } from "react";
 import * as monaco from "monaco-editor";
@@ -70,6 +70,8 @@ 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);
@@ -80,6 +82,7 @@ function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop,
 		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;
@@ -116,7 +119,7 @@ function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop,
 			width,
 			height
 		},
-		className: clsx("relative border rounded", className),
+		className: cx("relative border rounded", className),
 		ref: (ref) => {
 			if (ref && !monacoRef.current) {
 				defineEditorThemes(monaco.editor);
@@ -178,7 +181,7 @@ function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop,
 						range: new monaco.Range(start, 1, last, 1),
 						options: {
 							isWholeLine: true,
-							className: "bg-(--theme-element)/20"
+							className: "bg-(--theme-accent)/20"
 						}
 					}]);
 					window.setTimeout(() => flash.clear(), 1500);

package/dist/editor/index.d.ts

@@ -6,6 +6,6 @@ export type { IEditorProps, ISchemaError } 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, getThemeName } from './themes.js';
+export { defineEditorThemes, followThemeTokens, getThemeName } from './themes.js';
 export { setupMonacoWorkers } from './workers.js';
 export { configureEditorYaml } from './yaml.js';

package/dist/editor/index.js

@@ -5,7 +5,7 @@ import EditorField from "./EditorField.js";
 import FormCodePanel from "./FormCodePanel.js";
 import { nestedWorkflowText } from "./nestedText.js";
 import { revealLines } from "./reveal.js";
-import { defineEditorThemes, getThemeName } from "./themes.js";
+import { defineEditorThemes, followThemeTokens, getThemeName } from "./themes.js";
 import { setupMonacoWorkers } from "./workers.js";
 import { configureEditorYaml } from "./yaml.js";
-export { Editor, EditorField, FormCodePanel, HOST_MARKER_OWNER, INPUT_YAML_PATH, JOB_YAML_PATH, LINT_OWNER, SETTINGS_YAML_PATH, STEP_YAML_PATH, configureEditorYaml, defineEditorThemes, getThemeName, nestedWorkflowText, revealLines, settingsSchemas, setupMonacoWorkers };
+export { Editor, EditorField, FormCodePanel, HOST_MARKER_OWNER, INPUT_YAML_PATH, JOB_YAML_PATH, LINT_OWNER, SETTINGS_YAML_PATH, STEP_YAML_PATH, configureEditorYaml, defineEditorThemes, followThemeTokens, getThemeName, nestedWorkflowText, revealLines, settingsSchemas, setupMonacoWorkers };

package/dist/editor/themes.d.ts

@@ -1,4 +1,8 @@
 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. */
+export declare function followThemeTokens(monacoEditor: typeof monaco.editor, current: () => string): () => void;
 export declare function getThemeName(isDark: boolean, disabled?: boolean): string;