@parallelworks/ui 0.52.0 → 0.53.0

package/README.md

@@ -11,7 +11,7 @@ so an application ships only what it imports:
 | `./list` | list pages, tables, row menus and list controls |
 | `./form` | `DynamicForm` and its field registry |
 | `./graph` | job dependency graph and tree view, and the visual workflow editor: the graph, the run form as an inputs editor, and their dialogs |
-| `./editor` | Monaco editor (`monaco-editor` is an optional peer); YAML validation, completion and hover run in a bundled worker |
+| `./editor` | Monaco editor (`monaco-editor` is an optional peer), loaded on first mount with the languages it needs; YAML validation, completion and hover run in a bundled worker |
 | `./logviewer` | log viewer with ANSI color and search |
 | `./file-explorer` | object storage explorer over a host-supplied provider |
 | `./ai`, `./ai/openai`, `./ai/mock` | chat interface and adapters |
@@ -73,7 +73,7 @@ Each need has one component. Reach for it before styling markup by hand.
 | Views of one thing | `Tabs` |
 | A list of actions | `ActionMenu`; `useContextMenu` for a right-click or a row's menu |
 | A panel of controls anchored to a trigger | `Popover` |
-| A hint for a control | `Tooltip`; `InfoTip` for help everyone must reach |
+| A hint for a control | `Tooltip`; a `Field`'s `help` for more about a field, which its control reads and which opens as Tab reaches it; `InfoTip` for help about anything else |
 | A preview of what a link leads to | `HoverCard` |
 | A task that blocks the page | `Modal`, laid out with `title`, `description` and `footer` as a `Drawer` is; `ConfirmModal` to confirm one action; `CreateModal` to name and create one thing |
 | A panel beside the page | `Drawer` |
@@ -434,6 +434,7 @@ where it opens elsewhere, and renders it through `AppLink`:
 | A list row | `ListRow` `href` with a `NameCell` of the same `href`: the name's link covers the row |
 | A toast's action | `action: { label, href }` |
 | `SidebarRailItem` | `href`; `onSelect` then runs only on a plain click |
+| `FileExplorer` rows, tree, trail and "Open folder" | `pathHref(path)`; `onPathChange` is then optional, and the explorer's own moves go to `navigation.goTo` |
 | `EmptyState`, `SettingsCard` actions | a `Button` with `href` |
 
 `AppLink` routes in-app URLs through the provider's `link` slot, so a host
@@ -611,6 +612,38 @@ Text that comes back unchanged leaves the cursor alone, and a reset from outside
 and scroll where they were. Each editor has a model of its own unless it is given a `path`, and it
 is named `UIStrings.common.codeEditor` unless given an `ariaLabel`.
 
+Monaco comes from the host's own `monaco-editor` through its bundler, never from a CDN, and loads
+when the first editor mounts, so it stays out of the host's first bundle. Its workers are files in
+the package that the host's bundler copies, started with `new Worker(url)`: a CSP needs
+`worker-src 'self'` and no `blob:`. The YAML language server starts with the first YAML model.
+
+The editor colors every language Monaco has, Bash among them (as shell), and fetches each
+language's coloring only when an editor shows it. It validates and formats JSON. The TypeScript,
+CSS and HTML language services are left out, as each runs in a worker of megabytes; their text is
+still colored. `addEditorLanguages` adds a language service and its workers, by the label Monaco
+asks for, or a language of the host's own. It loads with the next editor to mount; call it once
+at startup. With Vite:
+
+```ts
+import { addEditorLanguages } from '@parallelworks/ui/editor'
+
+const tsWorker = () =>
+  new Worker(new URL('monaco-editor/language/typescript/ts.worker.js', import.meta.url), {
+    type: 'module',
+  })
+// The TypeScript service checks JavaScript too, and asks for a worker under each label.
+addEditorLanguages({
+  load: () => import('monaco-editor/languages/features/typescript/register'),
+  workers: { typescript: tsWorker, javascript: tsWorker },
+})
+```
+
+`readOnly` makes it a view of code to read, such as a file's contents: the text stays selectable,
+copyable and reachable by keyboard and is announced read-only, while the cursor, current line and
+quick fixes are hidden, the view ends at the last line, and the wheel scrolls the page once the text
+has scrolled to its end. Any of these can be set otherwise with Monaco's own options. `disabled`
+greys the text out as well, as a disabled field does.
+
 ## AI chat
 
 `@parallelworks/ui/ai` is a chat interface (thread, composer, streaming,
@@ -674,6 +707,12 @@ animations) and streamdown's classes next to the theme contract:
 
 The prebuilt `@parallelworks/ui/styles.css` already includes both.
 
+Math needs nothing from the host: `Markdown` imports KaTeX's stylesheet
+itself, from the `katex` package, so the host's bundler loads it and its fonts
+with the markdown renderer's lazy chunk. The bundler must accept CSS imported
+from JavaScript, as the editor's Monaco also requires. Inline math takes `$$`
+within a sentence; a single `$` stays text, so prices are never read as math.
+
 ## Form state
 
 `DynamicForm` keeps its values in react-hook-form, a peer dependency, so the
@@ -775,7 +814,7 @@ controls. A label that wraps to two lines sits at the foot of a label row the
 fields in that row share, so its control stays level with its neighbors'.
 Set `align: rows` when every immediate child is a
 section. Adjacent sections then share a header row and one row per direct child.
-A description, help text, or validation message increases the shared row height,
+A description or validation message increases the shared row height,
 so the following rows stay aligned. A nested grid counts as one child row.
 The grid's gap controls shared row spacing. Hidden children retain their row slot
 while a neighboring section uses it; empty sections disappear. When the configured

package/dist/ai/ai.css

@@ -71,13 +71,15 @@
   color: inherit;
 }
 
-/* KaTeX overrides */
-.katex-display {
+/* KaTeX overrides. Its own sheet loads with the markdown renderer, after
+ * this one, so these need the extra class to win. A wide display formula
+ * scrolls instead of widening the answer. */
+.markdown .katex-display {
   margin: 1em 0;
   overflow-x: auto;
   overflow-y: hidden;
 }
-.katex {
+.markdown .katex {
   font-size: 1.1em;
 }
 

package/dist/ai/components/agent/AgentMessageParts.js

@@ -4,6 +4,7 @@ import { Loader } from "../../../components/Loader.js";
 import { toneSurface } from "../../../components/tone.js";
 import { useStrings } from "../../../components/Provider.js";
 import { fieldBox } from "../../../components/fieldBox.js";
+import { focusOnMount } from "../../../components/focus.js";
 import { Disclosure } from "../../../components/Disclosure.js";
 import { formatDuration } from "../../../format.js";
 import { LogViewer } from "../../../logviewer/LogViewer.js";
@@ -12,7 +13,6 @@ import { computeEditDiff, computeWriteRows, editSummary, isEditDiffTool, parseEd
 import { languageForPath, tokenizeDiffLines } from "../../agent/diffHighlight.js";
 import { thinkingHeading } from "../../agent/transcript.js";
 import { useChatConfig } from "../../core/config.js";
-import { focusOnMount } from "../../../components/focus.js";
 import Markdown from "../../ui/Markdown.js";
 import { chatProseClasses } from "../../ui/prose.js";
 import { Reasoning, ReasoningBody } from "../Reasoning.js";

package/dist/ai/strings.js

@@ -93,7 +93,6 @@ var defaultChatStrings = {
 			"Manifesting",
 			"Moseying",
 			"Musing",
-			"Percussing",
 			"Reticulating",
 			"Schlepping",
 			"Stewing",

package/dist/ai/ui/sidebar.js

@@ -4,9 +4,9 @@ import { Tooltip } from "../../components/Tooltip.js";
 import { AppLink, isPlainClick } from "../../components/AppLink.js";
 import { IconButton } from "../../components/IconButton.js";
 import { fieldBox } from "../../components/fieldBox.js";
+import { focusOnMount } from "../../components/focus.js";
 import { ConfirmModal } from "../../components/ConfirmModal.js";
 import { MoreButton, rowContextMenuProps, useRowMenuActive } from "../../list/rowMenu.js";
-import { focusOnMount } from "../../components/focus.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 //#region src/ai/ui/sidebar.tsx

package/dist/components/Field.d.ts

@@ -26,10 +26,11 @@ export interface FieldProps {
     /** Beside the label and outside it, so it stays out of the control's name, such as a count. For
      *  help text, use `help`. */
     hint?: ReactNode;
-    /** More about the field, behind a ? beside the label that opens on hover or press. It is read
-     *  with the control as part of its description, so the ? stays out of the Tab order, and it shows
-     *  under the control while the control has keyboard focus. `[text](url)` links and line breaks
-     *  show as such. */
+    /** More about the field, behind a ? beside the label. It is read with the control as part of
+     *  its description, so the ? is hidden from assistive technology and Tab passes over it. It
+     *  opens on hover or press of the ?, and while the control has keyboard focus, until Escape.
+     *  `[text](url)` links and line breaks show as such; a link keeps the ? in the Tab order, as
+     *  the keyboard's way to it. */
     help?: string | undefined;
     /** Buttons at the far end of the label's row that act on the field, such as one that
      *  switches its control to a typed expression. */

package/dist/components/Field.js

@@ -1,10 +1,11 @@
 import { cx } from "../cx.js";
 import { EyeIcon, EyeOffIcon, WarningIcon } from "../icons.js";
 import { useStrings } from "./Provider.js";
+import { focusCameFromKeyboard, trackFocusModality } from "./focus.js";
 import { InfoTip, formatInfoTipContent } from "./InfoTip.js";
 import { RequiredMark } from "./RequiredMark.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createContext, use, useId } from "react";
+import { createContext, use, useEffect, useId, useState } from "react";
 import { Field } from "@base-ui/react/field";
 import { Fieldset } from "@base-ui/react/fieldset";
 //#region src/components/Field.tsx
@@ -81,10 +82,31 @@ function Field$1({ label, hint, help, actions, description, error, invalid, requ
 	const inline = layout === "inline";
 	const inRow = use(FieldRowContext) && !inline && !group;
 	const labelSize = labelSizes[size];
+	const [helpOpen, setHelpOpen] = useState(false);
+	useEffect(() => {
+		if (help) trackFocusModality();
+	}, [help]);
 	const helpTip = help && /* @__PURE__ */ jsx(InfoTip, {
 		text: help,
-		tabIndex: -1
+		describesControl: true,
+		open: Boolean(helpOpen),
+		onOpenChange: (open) => setHelpOpen(open && "pointer"),
+		keepSide: helpOpen === "focus"
 	});
+	const helpFocus = help ? {
+		onFocus: () => {
+			if (focusCameFromKeyboard()) setHelpOpen("focus");
+		},
+		onBlur: (event) => {
+			if (!event.currentTarget.contains(event.relatedTarget)) setHelpOpen(false);
+		},
+		onKeyDown: (event) => {
+			if (event.key === "Escape" && helpOpen) {
+				event.stopPropagation();
+				setHelpOpen(false);
+			}
+		}
+	} : {};
 	const labelBox = cx(labelClassName, labelSize.text, inline && cx(labelSize.inlineHeight, "shrink-0", compact ? "mr-2 w-fit" : "w-52 pr-3"), inRow && "row-start-1 self-end");
 	const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsxs("span", { children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})] }),
@@ -98,6 +120,7 @@ function Field$1({ label, hint, help, actions, description, error, invalid, requ
 	const placed = typeof children === "function" ? children(control) : children;
 	const body = /* @__PURE__ */ jsxs("div", {
 		className: cx("flex w-full min-w-0 flex-col gap-1", inRow && "row-start-2"),
+		...helpFocus,
 		children: [
 			/* @__PURE__ */ jsx(FieldRowContext, {
 				value: false,
@@ -116,7 +139,7 @@ function Field$1({ label, hint, help, actions, description, error, invalid, requ
 			}),
 			help && /* @__PURE__ */ jsx(Field.Description, {
 				id: helpId,
-				className: "hidden text-xs leading-relaxed text-(--theme-muted-text-color) group-has-[:focus-visible]/field:block [&_a]:underline",
+				hidden: true,
 				children: formatInfoTipContent(help)
 			}),
 			error && /* @__PURE__ */ jsxs(Field.Error, {
@@ -131,7 +154,7 @@ function Field$1({ label, hint, help, actions, description, error, invalid, requ
 			})
 		]
 	});
-	const frame = inRow ? cx("group/field contents", className) : cx("group/field flex w-full", inline ? "items-start" : cx("flex-col", labelSize.stackGap), className);
+	const frame = inRow ? cx("contents", className) : cx("flex w-full", inline ? "items-start" : cx("flex-col", labelSize.stackGap), className);
 	if (group) return /* @__PURE__ */ jsx(Field.Root, {
 		invalid: isInvalid,
 		disabled,

package/dist/components/InfoTip.d.ts

@@ -8,11 +8,19 @@ interface InfoTipProps {
     className?: string | undefined;
     /** Replaces the info icon as the trigger, such as a status label the text explains. */
     children?: ReactNode;
-    /** -1 takes the trigger out of the Tab order, for help that is also read another way, such as
-     *  a Field's, which its control is described by. */
-    tabIndex?: number | undefined;
+    /** The text is also a control's description, which assistive technology reads with the
+     *  control, so the ? is hidden from it and skipped by Tab rather than offering the text twice.
+     *  Text with a link keeps the ? reachable, as the only way to the link from the keyboard. */
+    describesControl?: boolean | undefined;
+    /** Opens it from outside as well as on hover and press, such as while the described control
+     *  has keyboard focus. Pair it with `onOpenChange`. */
+    open?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /** Stays on `side` rather than flipping where it doesn't fit, as while the control it
+     *  describes is typed in, which a flipped tip would cover. */
+    keepSide?: boolean | undefined;
 }
 /** Extra detail behind an info trigger. A popover that also opens on hover, so
  *  touch and screen reader users can reach it and its links. */
-export declare function InfoTip({ text, side, className, children, tabIndex }: InfoTipProps): import("react").JSX.Element | null;
+export declare function InfoTip({ text, side, className, children, describesControl, open, onOpenChange, keepSide, }: InfoTipProps): import("react").JSX.Element | null;
 export {};

package/dist/components/InfoTip.js

@@ -28,22 +28,32 @@ function formatInfoTipContent(content) {
 	if (!content) return null;
 	return keyedByContent(content.split(/<br\s*\/?>|\n/i), (l) => l).map(({ key, item: line }, idx) => /* @__PURE__ */ jsxs(Fragment$1, { children: [idx > 0 && /* @__PURE__ */ jsx("br", {}), formatLine(line)] }, key));
 }
+var hasLink = (content) => new RegExp(linkRegex.source).test(content);
 /** Extra detail behind an info trigger. A popover that also opens on hover, so
 *  touch and screen reader users can reach it and its links. */
-function InfoTip({ text, side = "top", className, children, tabIndex }) {
+function InfoTip({ text, side = "top", className, children, describesControl = false, open, onOpenChange, keepSide = false }) {
 	const t = useStrings().common;
 	if (!text) return children ? /* @__PURE__ */ jsx("span", {
 		className,
 		children
 	}) : null;
+	const hidden = describesControl && !hasLink(text);
 	return /* @__PURE__ */ jsx(Popover, {
 		variant: "tip",
 		openOnHover: true,
 		side,
+		keepSide,
+		...open === void 0 ? {} : { open },
+		...onOpenChange ? { onOpenChange } : {},
+		...describesControl && { initialFocus: "none" },
+		...hidden && { finalFocus: false },
 		trigger: /* @__PURE__ */ jsx("button", {
 			type: "button",
-			tabIndex,
-			"aria-label": children ? void 0 : t.moreInfo,
+			...hidden && {
+				tabIndex: -1,
+				"aria-hidden": true
+			},
+			"aria-label": children || hidden ? void 0 : t.moreInfo,
 			className: cx("inline-flex items-center cursor-help", !children && "tooltip", className),
 			children: children ?? /* @__PURE__ */ jsx(HelpIcon, { "aria-hidden": "true" })
 		}),

package/dist/components/MarkdownImpl.d.ts

@@ -1,2 +1,3 @@
+import 'katex/dist/katex.min.css';
 import type { MarkdownProps } from './Markdown.js';
 export default function MarkdownImpl({ children, isStreaming, controls, components, }: MarkdownProps): import("react").JSX.Element;

package/dist/components/MarkdownImpl.js

@@ -7,6 +7,7 @@ import { jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { code } from "@streamdown/code";
 import { math } from "@streamdown/math";
+import "katex/dist/katex.min.css";
 import { Streamdown, defaultRehypePlugins } from "streamdown";
 //#region src/components/MarkdownImpl.tsx
 var basePlugins = {

package/dist/components/Popover.d.ts

@@ -33,6 +33,9 @@ export interface PopoverOptions extends Omit<BasePopover.Popup.Props, 'className
      *  a list read before one item in it is picked, or nowhere, for a popover that
      *  offers an action on what the reader is doing, such as copying a selection. */
     initialFocus?: 'first-control' | 'popup' | 'none';
+    /** Stays on `side` where it doesn't fit rather than flipping to the other, for a popup that
+     *  must not cover what is there, such as the control a tip describes while it is typed in. */
+    keepSide?: boolean | undefined;
     /** `panel` holds controls or a list; `tip` is a tooltip-sized note with an arrow. */
     variant?: 'panel' | 'tip';
     /** On the popup: its width, padding or text size. */
@@ -43,5 +46,5 @@ export interface PopoverOptions extends Omit<BasePopover.Popup.Props, 'className
  *  flips and shifts to stay on screen, closes on Escape or a press outside, and
  *  returns focus to the trigger. Use a Menu for a list of actions, and a
  *  HoverCard for a preview a link already leads to. */
-export declare function Popover({ trigger, at, title, open, defaultOpen, onOpenChange, side, align, openOnHover, initialFocus, variant, className, children, ...popupProps }: PopoverProps): import("react").JSX.Element;
+export declare function Popover({ trigger, at, title, open, defaultOpen, onOpenChange, side, align, openOnHover, initialFocus, keepSide, variant, className, children, ...popupProps }: PopoverProps): import("react").JSX.Element;
 export {};

package/dist/components/Popover.js

@@ -16,7 +16,7 @@ function useClosePopover() {
 *  flips and shifts to stay on screen, closes on Escape or a press outside, and
 *  returns focus to the trigger. Use a Menu for a list of actions, and a
 *  HoverCard for a preview a link already leads to. */
-function Popover$1({ trigger, at, title, open, defaultOpen, onOpenChange, side = "bottom", align = "center", openOnHover = false, initialFocus = "first-control", variant = "panel", className, children, ...popupProps }) {
+function Popover$1({ trigger, at, title, open, defaultOpen, onOpenChange, side = "bottom", align = "center", openOnHover = false, initialFocus = "first-control", keepSide = false, variant = "panel", className, children, ...popupProps }) {
 	const tip = variant === "tip";
 	const popup = useRef(null);
 	const actions = useRef(null);
@@ -38,6 +38,7 @@ function Popover$1({ trigger, at, title, open, defaultOpen, onOpenChange, side =
 			align,
 			sideOffset: tip ? 8 : 6,
 			collisionPadding: 8,
+			...keepSide && { collisionAvoidance: { side: "none" } },
 			...at ? { anchor: toPositionerAnchor(at) } : {},
 			className: positionerClassName,
 			children: /* @__PURE__ */ jsxs(Popover.Popup, {

package/dist/components/Provider.d.ts

@@ -268,6 +268,8 @@ export interface UIStrings {
             select: (name: string) => string;
             viewDetails: string;
             openFolder: string;
+            /** A path's page in the app, as in "Copy link". */
+            link: string;
             detailsTab: string;
             previewTab: string;
             preview: string;

package/dist/components/Provider.js

@@ -285,6 +285,7 @@ var DEFAULTS = {
 				select: (name) => `Select ${name}`,
 				viewDetails: "View details",
 				openFolder: "Open folder",
+				link: "link",
 				detailsTab: "Details",
 				previewTab: "Preview",
 				preview: "Preview",

package/dist/components/focus.d.ts

@@ -1,2 +1,7 @@
 /** A ref that focuses a field once, when it mounts; stable so re-renders never move focus back. */
 export declare function focusOnMount(element: HTMLElement | null): void;
+/** Starts telling keyboard focus from pointer focus, for `focusCameFromKeyboard`. Call it once
+ *  something needs to know, such as when a component that asks mounts. */
+export declare function trackFocusModality(): void;
+/** Whether the focus that just landed came from the keyboard rather than a press. */
+export declare function focusCameFromKeyboard(): boolean;

package/dist/components/focus.js

@@ -3,5 +3,25 @@
 function focusOnMount(element) {
 	element?.focus();
 }
+var fromKeyboard = false;
+var listening = false;
+function onKeyDown(event) {
+	if (!event.metaKey && !event.ctrlKey && !event.altKey) fromKeyboard = true;
+}
+function onPointerDown() {
+	fromKeyboard = false;
+}
+/** Starts telling keyboard focus from pointer focus, for `focusCameFromKeyboard`. Call it once
+*  something needs to know, such as when a component that asks mounts. */
+function trackFocusModality() {
+	if (listening || typeof document === "undefined") return;
+	listening = true;
+	document.addEventListener("keydown", onKeyDown, true);
+	document.addEventListener("pointerdown", onPointerDown, true);
+}
+/** Whether the focus that just landed came from the keyboard rather than a press. */
+function focusCameFromKeyboard() {
+	return fromKeyboard;
+}
 //#endregion
-export { focusOnMount };
+export { focusCameFromKeyboard, focusOnMount, trackFocusModality };

package/dist/editor/Editor.js

@@ -1,8 +1,18 @@
 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;
@@ -15,7 +25,7 @@ function Editor(props) {
 			className: "flex items-center justify-center",
 			children: /* @__PURE__ */ jsx(Loader, {})
 		}),
-		children: /* @__PURE__ */ jsx(MonacoEditor, { ...props })
+		children: /* @__PURE__ */ jsx(LoadedEditor, { ...props })
 	});
 }
 //#endregion

package/dist/editor/Monaco.d.ts

@@ -1,5 +1,6 @@
-import * as monaco from 'monaco-editor';
+import * as monaco from 'monaco-editor/editor/editor.api';
 import { type NestedWorkflowText } from './nestedText.js';
+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. */
@@ -11,6 +12,12 @@ export interface EditorProps extends monaco.editor.IStandaloneEditorConstruction
     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;
     /** Every marker on the text, each time they change: the schema's, the lint's and the host's. */

package/dist/editor/Monaco.js

@@ -8,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, useId, useLayoutEffect, useRef } from "react";
-import * as monaco from "monaco-editor";
+import * as monaco from "monaco-editor/editor/editor.api";
 //#region src/editor/Monaco.tsx
 setupMonacoWorkers();
 var SCHEMA_UNREADABLE = "768";
@@ -86,9 +87,17 @@ function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop,
 	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 ?? "line"
+		renderLineHighlight: disabled ? "none" : options.renderLineHighlight ?? (readOnly ? "none" : "line")
 	};
 	const optionsKey = JSON.stringify(editorOptions);
 	const optionsRef = useRef(editorOptions);
@@ -192,6 +201,9 @@ function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop,
 		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]);
@@ -240,7 +252,8 @@ function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop,
 			height
 		},
 		"data-disabled": disabled ? "" : void 0,
-		className: cx("relative rounded border border-(--theme-border)", "focus-within:border-(--theme-accent) focus-within:ring-1 focus-within:ring-(--theme-accent)", "data-disabled:[&_.cursors-layer]:hidden data-disabled:[&_.view-lines]:opacity-60", className)
+		"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`. */

package/dist/editor/index.d.ts

@@ -1,6 +1,7 @@
 export { Editor } from './Editor.js';
 export { EditorField, type IEditorField } from './EditorField.js';
 export { FormCodePanel, type FormCodePanelProps } from './FormCodePanel.js';
+export { addEditorLanguages, type EditorLanguages } from './languages.js';
 export { HOST_MARKER_OWNER, LINT_OWNER } from './lintOwner.js';
 export type { EditorMarker, EditorProps, ValidationMarker } from './Monaco.js';
 export { type NestedWorkflowText, nestedWorkflowText } from './nestedText.js';

package/dist/editor/index.js

@@ -1,5 +1,6 @@
 import { HOST_MARKER_OWNER, LINT_OWNER } from "./lintOwner.js";
 import { INPUT_YAML_PATH, JOB_YAML_PATH, SETTINGS_YAML_PATH, STEP_YAML_PATH, settingsSchemas } from "./settingsYaml.js";
+import { addEditorLanguages } from "./languages.js";
 import { Editor } from "./Editor.js";
 import { EditorField } from "./EditorField.js";
 import { FormCodePanel } from "./FormCodePanel.js";
@@ -8,4 +9,4 @@ import { revealLines } from "./reveal.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, followThemeTokens, 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, addEditorLanguages, configureEditorYaml, defineEditorThemes, followThemeTokens, getThemeName, nestedWorkflowText, revealLines, settingsSchemas, setupMonacoWorkers };

package/dist/editor/languages.d.ts

@@ -0,0 +1,24 @@
+/** Languages a host adds to the ones the editor carries. */
+export interface EditorLanguages {
+    /**
+     * Imports Monaco's registration for the languages, such as
+     * `() => import('monaco-editor/languages/definitions/ruby/register')`. It runs when the next
+     * editor mounts, so Monaco still loads only once an editor needs it.
+     */
+    load: () => Promise<unknown>;
+    /**
+     * A worker for each language service the registration brings, by the label Monaco asks for,
+     * such as `typescript` and `javascript`. Basic languages color text on the page and need none.
+     */
+    workers?: Record<string, () => Worker>;
+}
+/**
+ * Adds language services with their workers, such as TypeScript's, or languages of the host's
+ * own, to the coloring the editor has for every Monaco language. Call it once at startup, before
+ * the first editor mounts; an editor that mounts while they load waits for them.
+ */
+export declare function addEditorLanguages({ load, workers: added }: EditorLanguages): void;
+/** The languages still loading, starting any added since, or undefined once all have. */
+export declare function editorLanguagesLoading(): Promise<unknown> | undefined;
+/** The host's worker for a Monaco worker label, if it added one. */
+export declare function hostEditorWorker(label: string): (() => Worker) | undefined;

package/dist/editor/languages.js

@@ -0,0 +1,31 @@
+//#region src/editor/languages.ts
+var workers = /* @__PURE__ */ new Map();
+var waiting = [];
+var loading;
+/**
+* Adds language services with their workers, such as TypeScript's, or languages of the host's
+* own, to the coloring the editor has for every Monaco language. Call it once at startup, before
+* the first editor mounts; an editor that mounts while they load waits for them.
+*/
+function addEditorLanguages({ load, workers: added = {} }) {
+	for (const [label, create] of Object.entries(added)) workers.set(label, create);
+	waiting.push(load);
+}
+/** The languages still loading, starting any added since, or undefined once all have. */
+function editorLanguagesLoading() {
+	if (waiting.length > 0) {
+		const loads = waiting;
+		waiting = [];
+		const started = Promise.all([loading, ...loads.map((load) => load().catch((error) => console.error("An editor language failed to load", error)))]).finally(() => {
+			if (loading === started) loading = void 0;
+		});
+		loading = started;
+	}
+	return loading;
+}
+/** The host's worker for a Monaco worker label, if it added one. */
+function hostEditorWorker(label) {
+	return workers.get(label);
+}
+//#endregion
+export { addEditorLanguages, editorLanguagesLoading, hostEditorWorker };

package/dist/editor/monacoFeatures.d.ts

@@ -0,0 +1,7 @@
+import 'monaco-editor/features/register.all';
+import 'monaco-editor/editor/contrib/caretOperations/browser/caretOperations';
+import 'monaco-editor/editor/contrib/dropOrPasteInto/browser/copyPasteContribution';
+import 'monaco-editor/editor/contrib/gotoError/browser/markerSelectionStatus';
+import 'monaco-editor/editor/contrib/semanticTokens/browser/documentSemanticTokens';
+import 'monaco-editor/languages/definitions/register.all';
+import 'monaco-editor/languages/features/json/register';

package/dist/editor/monacoFeatures.js

@@ -0,0 +1,19 @@
+import { languages } from "monaco-editor/editor/editor.api";
+import "monaco-editor/features/register.all";
+import "monaco-editor/editor/contrib/caretOperations/browser/caretOperations";
+import "monaco-editor/editor/contrib/dropOrPasteInto/browser/copyPasteContribution";
+import "monaco-editor/editor/contrib/gotoError/browser/markerSelectionStatus";
+import "monaco-editor/editor/contrib/semanticTokens/browser/documentSemanticTokens";
+import "monaco-editor/languages/definitions/register.all";
+import "monaco-editor/languages/features/json/register";
+//#region src/editor/monacoFeatures.ts
+var shell = () => import("monaco-editor/languages/definitions/shell/shell");
+languages.register({
+	id: "bash",
+	aliases: ["Bash", "bash"]
+});
+languages.registerTokensProviderFactory("bash", { create: async () => (await shell()).language });
+languages.onLanguageEncountered("bash", async () => {
+	languages.setLanguageConfiguration("bash", (await shell()).conf);
+});
+//#endregion