@parallelworks/ui 0.52.0 → 0.54.0

package/dist/components/Provider.d.ts

@@ -1,4 +1,5 @@
 import type { Dispatch, ReactNode, SetStateAction } from 'react';
+import type { AccessText } from '../access/strings.js';
 import type { WorkflowAction, WorkflowEditing } from '../editing.js';
 import type { WorkflowEngine } from '../engine.js';
 import type { GraphEditorText, InputsEditorText } from '../graph/editorStrings.js';
@@ -14,6 +15,8 @@ export interface UIStrings {
         favoriteHintOff: string;
     };
     common: {
+        /** Returns to the view a drawer or panel showed before. */
+        back: string;
         cancel: string;
         close: string;
         save: string;
@@ -110,6 +113,8 @@ export interface UIStrings {
     dropdown: {
         select: (type: string) => string;
         noOptionsFound: string;
+        /** While a search for options is under way. */
+        searching: string;
         showOptions: string;
         /** The row that adds typed text as a new value. */
         add: (text: string) => string;
@@ -259,6 +264,8 @@ export interface UIStrings {
     };
     /** The visual editor's text a host translates; the editor fills in the rest in English. */
     graphEditor: Partial<GraphEditorText>;
+    /** The access drawer's text, over its English defaults. */
+    access: Partial<AccessText>;
     inputsEditor: Partial<InputsEditorText>;
     fileExplorer: {
         preview: {
@@ -268,6 +275,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

@@ -41,6 +41,7 @@ var DEFAULTS = {
 			favoriteHintOff: "Favorite your item when it's created"
 		},
 		common: {
+			back: "Back",
 			cancel: "Cancel",
 			close: "Close",
 			save: "Save",
@@ -125,6 +126,7 @@ var DEFAULTS = {
 		dropdown: {
 			select: (type) => `Select ${type}`,
 			noOptionsFound: "No options found",
+			searching: "Searching…",
 			showOptions: "Show options",
 			add: (text) => `Add “${text}”`,
 			limitReached: (max) => `Up to ${max}`,
@@ -276,6 +278,7 @@ var DEFAULTS = {
 			openInNewGraph: "Open in new graph"
 		},
 		graphEditor: {},
+		access: {},
 		inputsEditor: {},
 		fileExplorer: {
 			preview: {
@@ -285,6 +288,7 @@ var DEFAULTS = {
 				select: (name) => `Select ${name}`,
 				viewDetails: "View details",
 				openFolder: "Open folder",
+				link: "link",
 				detailsTab: "Details",
 				previewTab: "Preview",
 				preview: "Preview",

package/dist/components/Select.js

@@ -3,7 +3,8 @@ import { CheckIcon, ChevronDownIcon } from "../icons.js";
 import { panelClassName, positionerClassName } from "./floating.js";
 import { Tooltip } from "./Tooltip.js";
 import { fieldBox } from "./fieldBox.js";
-import { pickerItemClassName } from "./comboboxItems.js";
+import { optionNaming, pickerItemClassName } from "./comboboxItems.js";
+import { OptionDescription } from "./OptionDescription.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { Select } from "@base-ui/react/select";
@@ -52,12 +53,11 @@ function Select$1({ items, placeholder, className, "aria-label": ariaLabel, "ari
 			children: /* @__PURE__ */ jsx(Select.Popup, {
 				className: cx("min-w-(--anchor-width) max-w-[min(20rem,var(--available-width))]", panelClassName),
 				children: /* @__PURE__ */ jsx(Select.List, {
-					className: "max-h-[min(15rem,var(--available-height))] overflow-y-auto py-1",
+					className: cx("max-h-[min(15rem,var(--available-height))] overflow-y-auto", "p-1"),
 					children: items.map((item, index) => /* @__PURE__ */ jsxs(Select.Item, {
 						value: item.value,
 						disabled: item.disabled,
-						"aria-labelledby": `${uid}${index}label`,
-						"aria-describedby": item.description && `${uid}${index}description`,
+						...optionNaming(`${uid}${index}`, item),
 						onFocus: onItemHighlighted && (() => onItemHighlighted(item.value)),
 						className: pickerItemClassName,
 						children: [
@@ -67,14 +67,16 @@ function Select$1({ items, placeholder, className, "aria-label": ariaLabel, "ari
 							}),
 							/* @__PURE__ */ jsxs("span", {
 								className: "flex min-w-0 flex-col",
-								children: [/* @__PURE__ */ jsx(Select.ItemText, {
-									id: `${uid}${index}label`,
-									className: "truncate",
-									children: item.label
-								}), item.description && /* @__PURE__ */ jsx("span", {
+								children: [/* @__PURE__ */ jsxs("span", {
+									className: "flex min-w-0 items-center gap-2",
+									children: [/* @__PURE__ */ jsx(Select.ItemText, {
+										id: `${uid}${index}label`,
+										className: "truncate",
+										children: item.label
+									}), item.badge]
+								}), /* @__PURE__ */ jsx(OptionDescription, {
 									id: `${uid}${index}description`,
-									className: "text-xs leading-snug text-(--theme-muted-text-color)",
-									children: item.description
+									item
 								})]
 							}),
 							/* @__PURE__ */ jsx(Select.ItemIndicator, {

package/dist/components/comboboxItems.d.ts

@@ -7,7 +7,12 @@ export interface ComboboxItem<Value = string> {
     value: Value;
     label: string;
     description?: string | undefined;
+    /** Read after the label in place of `description`, for what the row shows in more than
+     *  words, such as a count and a status: "24 members, synced". */
+    accessibleDescription?: string | undefined;
     icon?: ReactNode;
+    /** Beside the label, such as a tag that marks the option out. */
+    badge?: ReactNode;
     disabled?: boolean | undefined;
 }
 export interface ComboboxGroup<Value = string> {
@@ -23,6 +28,11 @@ export interface ComboboxGroup<Value = string> {
 export type ComboboxLeaf<Value = string> = ComboboxItem<Value> | (Value & string);
 /** Items, groups under headings, or both: items between groups list where they sit, without a heading. */
 export type ComboboxItems<Value = string> = readonly (ComboboxLeaf<Value> | ComboboxGroup<Value>)[];
+/** How an option is named and described: by its label, with its description read after it. */
+export declare function optionNaming(id: string, item: Pick<ComboboxItem<unknown>, 'description' | 'accessibleDescription'>): {
+    'aria-labelledby': string;
+    'aria-describedby': string | undefined;
+};
 export declare function isComboboxGroup<Value>(item: ComboboxLeaf<Value> | ComboboxGroup<Value>): item is ComboboxGroup<Value>;
 /** Every item, out of their groups. */
 export declare function comboboxLeaves<Value>(items: ComboboxItems<Value>): ComboboxLeaf<Value>[];

package/dist/components/comboboxItems.js

@@ -4,6 +4,13 @@ import { panelItemClassName } from "./floating.js";
 /** An option's row in a Select's or a Combobox's list, so both lists look alike: the icon, the
 *  label over its description, and the check at the end. */
 var pickerItemClassName = cx(panelItemClassName, "data-selected:font-medium");
+/** How an option is named and described: by its label, with its description read after it. */
+function optionNaming(id, item) {
+	return {
+		"aria-labelledby": `${id}label`,
+		"aria-describedby": item.accessibleDescription || item.description ? `${id}description` : void 0
+	};
+}
 function isComboboxGroup(item) {
 	return typeof item === "object" && "items" in item;
 }
@@ -12,4 +19,4 @@ function comboboxLeaves(items) {
 	return items.flatMap((item) => isComboboxGroup(item) ? item.items : [item]);
 }
 //#endregion
-export { comboboxLeaves, isComboboxGroup, pickerItemClassName };
+export { comboboxLeaves, isComboboxGroup, optionNaming, pickerItemClassName };

package/dist/components/floating.d.ts

@@ -2,8 +2,11 @@
 export declare const positionerClassName = "z-(--layer-popover) outline-none data-anchor-hidden:invisible";
 /** A panel of choices: a menu, a select's list, a combobox's list. */
 export declare const panelClassName = "rounded-lg border border-(--theme-border) bg-(--theme-app-bg) text-sm text-(--theme-app) shadow-(--theme-shadow-lg) outline-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100";
-/** A row in a panel. */
-export declare const panelItemClassName = "flex w-full cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-left outline-none data-highlighted:bg-(--theme-hover) data-highlighted:text-(--theme-app) data-disabled:cursor-not-allowed data-disabled:opacity-50";
+/** A panel's rows inset by the same gutter on every side, so a highlighted first or last row
+ *  keeps the margin it has at its sides rather than leaving a strip against the border. */
+export declare const panelListClassName = "p-1";
+/** A row in a panel, inside its `panelListClassName` gutter; its text lines up with a field's. */
+export declare const panelItemClassName = "flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-left outline-none data-highlighted:bg-(--theme-hover) data-highlighted:text-(--theme-app) data-disabled:cursor-not-allowed data-disabled:opacity-50";
 /** A tooltip's or infotip's small inverted surface. */
 export declare const tipClassName = "rounded-md bg-(--theme-app) px-2 py-1 text-xs text-(--theme-app-bg) shadow-(--theme-shadow) whitespace-pre-line break-words data-instant:transition-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100";
 export declare const tipArrowClassName = "size-2 rotate-45 bg-(--theme-app) data-[side=top]:-bottom-1 data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1";

package/dist/components/floating.js

@@ -4,8 +4,8 @@ var positionerClassName = "z-(--layer-popover) outline-none data-anchor-hidden:i
 var enterExit = "origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100";
 /** A panel of choices: a menu, a select's list, a combobox's list. */
 var panelClassName = `rounded-lg border border-(--theme-border) bg-(--theme-app-bg) text-sm text-(--theme-app) shadow-(--theme-shadow-lg) outline-none ${enterExit}`;
-/** A row in a panel. */
-var panelItemClassName = "flex w-full cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-left outline-none data-highlighted:bg-(--theme-hover) data-highlighted:text-(--theme-app) data-disabled:cursor-not-allowed data-disabled:opacity-50";
+/** A row in a panel, inside its `panelListClassName` gutter; its text lines up with a field's. */
+var panelItemClassName = "flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-left outline-none data-highlighted:bg-(--theme-hover) data-highlighted:text-(--theme-app) data-disabled:cursor-not-allowed data-disabled:opacity-50";
 /** A tooltip's or infotip's small inverted surface. */
 var tipClassName = `rounded-md bg-(--theme-app) px-2 py-1 text-xs text-(--theme-app-bg) shadow-(--theme-shadow) whitespace-pre-line break-words data-instant:transition-none ${enterExit}`;
 var tipArrowClassName = "size-2 rotate-45 bg-(--theme-app) data-[side=top]:-bottom-1 data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1";

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

package/dist/editor/themes.d.ts

@@ -1,5 +1,10 @@
 import type * as monaco from 'monaco-editor';
+import { type Mode } from '../theme/index.js';
 export declare function expandShorthandHex(color: string): string;
+/** The arm of a `light-dark()` value for a mode, or the value itself. A token the host leaves to
+ *  theme.css reads as `light-dark(light, dark)`, which CSS resolves by the color-scheme of where it
+ *  is used; Monaco takes one color per theme, so each theme takes its own mode's arm. */
+export declare function forMode(value: string, mode: Mode): string;
 /**
  * Defines the light and dark Monaco themes from the document's tokens. Call it again after the
  * host applies other tokens; it returns whether anything changed.

package/dist/editor/themes.js

@@ -6,11 +6,26 @@ function expandShorthandHex(color) {
 	return /^#([0-9a-fA-F]{3,4})$/.test(color) ? "#" + color.slice(1).split("").map((c) => c + c).join("") : color;
 }
 var fallbacks = {};
+/** The arm of a `light-dark()` value for a mode, or the value itself. A token the host leaves to
+*  theme.css reads as `light-dark(light, dark)`, which CSS resolves by the color-scheme of where it
+*  is used; Monaco takes one color per theme, so each theme takes its own mode's arm. */
+function forMode(value, mode) {
+	const inner = /^light-dark\((.*)\)$/s.exec(value.trim())?.[1];
+	if (inner === void 0) return value;
+	let depth = 0;
+	for (let i = 0; i < inner.length; i++) {
+		const ch = inner[i];
+		if (ch === "(") depth++;
+		else if (ch === ")") depth--;
+		else if (ch === "," && depth === 0) return (mode === "light" ? inner.slice(0, i) : inner.slice(i + 1)).trim();
+	}
+	return value;
+}
 /** A token as Monaco takes it: a 6-digit hex. Monaco can't read display-p3, so
 *  a wide-gamut value is mapped back into sRGB; the default theme fills in for
 *  a host that sets no tokens. */
 function token(style, name, mode) {
-	const color = parseColor(expandShorthandHex(style?.getPropertyValue(name).trim() ?? ""));
+	const color = parseColor(expandShorthandHex(forMode(style?.getPropertyValue(name) ?? "", mode).trim()));
 	if (color) return toHex(color);
 	fallbacks[mode] ??= deriveTheme(schemeFor(DEFAULT_THEME, mode));
 	return fallbacks[mode][name];
@@ -54,8 +69,13 @@ function editorTheme(style, mode) {
 			"editor.lineHighlightBackground": c("--theme-hover"),
 			"editorLineNumber.foreground": c("--theme-placeholder"),
 			"editorLineNumber.activeForeground": c("--theme-muted-text-color"),
-			"editor.selectionBackground": c("--theme-accent-subtle"),
-			"editor.inactiveSelectionBackground": c("--theme-hover")
+			...mode === "dark" ? {
+				"editor.selectionBackground": `${c("--theme-accent")}66`,
+				"editor.inactiveSelectionBackground": `${c("--theme-accent")}40`
+			} : {
+				"editor.selectionBackground": c("--theme-accent-subtle"),
+				"editor.inactiveSelectionBackground": c("--theme-hover")
+			}
 		}
 	};
 }
@@ -115,4 +135,4 @@ function getThemeName(isDark) {
 	return `app-${isDark ? "dark" : "light"}`;
 }
 //#endregion
-export { defineEditorThemes, expandShorthandHex, followThemeTokens, getThemeName };
+export { defineEditorThemes, expandShorthandHex, followThemeTokens, forMode, getThemeName };

package/dist/editor/workers.d.ts

@@ -1,7 +1,7 @@
 /**
- * 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.
+ * Points window.MonacoEnvironment at the bundled workers and those a host added with
+ * `addEditorLanguages`. Idempotent, and a host that already configured its own
+ * MonacoEnvironment wins — the editor calls this on first load only when nothing is configured.
  */
 export declare function setupMonacoWorkers(): void;
 /**

package/dist/editor/workers.js

@@ -1,20 +1,24 @@
+import { hostEditorWorker } from "./languages.js";
 //#region src/editor/workers.ts
 var monacoEnvironment = { getWorker(_moduleId, label) {
+	const host = hostEditorWorker(label);
+	if (host) return host();
 	if (label === "json") return new Worker(new URL(
 		/* @vite-ignore */
 		new URL("../assets/json.worker-BKkHJbNB.js", import.meta.url).href,
 		"" + import.meta.url
 	), { type: "module" });
-	return new Worker(new URL(
+	if (label === "editorWorkerService") return new Worker(new URL(
 		/* @vite-ignore */
 		new URL("../assets/editor.worker-Cc3TfJ_-.js", import.meta.url).href,
 		"" + import.meta.url
 	), { type: "module" });
+	throw new Error(`The editor has no worker for Monaco's "${label}" service: pass one to addEditorLanguages.`);
 } };
 /**
-* 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.
+* Points window.MonacoEnvironment at the bundled workers and those a host added with
+* `addEditorLanguages`. 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;