@parallelworks/ui 0.37.0 → 0.38.0

package/dist/graph/ShortcutsButton.js

@@ -0,0 +1,56 @@
+import { LuKeyboard } from "../icons/lu/LuKeyboard.js";
+import { IconButton } from "../components/IconButton.js";
+import { useGraphEditorStrings } from "./editorStrings.js";
+import { ToolbarPopover } from "./ToolbarPopover.js";
+import { Fragment, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/ShortcutsButton.tsx
+var MOD_KEY = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform) ? "⌘" : "Ctrl";
+var ALT_KEY = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform) ? "⌥" : "Alt";
+/** A toolbar button that opens the list of gestures and keys a pane takes. */
+function ShortcutsButton({ groups }) {
+	const t = useGraphEditorStrings();
+	const [open, setOpen] = useState(false);
+	const button = useRef(null);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconButton, {
+		ref: button,
+		icon: /* @__PURE__ */ jsx(LuKeyboard, { className: "h-4 w-4" }),
+		label: t.shortcuts,
+		size: "sm",
+		variant: "ghost",
+		"aria-expanded": open,
+		showTooltip: !open,
+		onClick: () => setOpen((current) => !current)
+	}), open && /* @__PURE__ */ jsxs(ToolbarPopover, {
+		anchor: button,
+		label: t.shortcuts,
+		onClose: () => setOpen(false),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "text-[0.8125rem] font-semibold",
+			children: t.shortcuts
+		}), groups.map((group) => /* @__PURE__ */ jsxs("section", {
+			className: "mt-3",
+			children: [/* @__PURE__ */ jsx("h3", {
+				className: "mb-1.5 text-xs font-semibold theme-muted-text",
+				children: group.title
+			}), /* @__PURE__ */ jsx("dl", {
+				className: "grid grid-cols-[8.5rem_1fr] items-baseline gap-x-3 gap-y-1.5",
+				children: group.shortcuts.map((shortcut) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
+					className: "flex flex-wrap items-center gap-1",
+					children: shortcut.combos.map((keys, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && /* @__PURE__ */ jsx("span", {
+						className: "theme-muted-text",
+						children: "/"
+					}), keys.map((key) => /* @__PURE__ */ jsx("kbd", {
+						className: "rounded border theme-border px-1 py-px text-[11px]",
+						children: key
+					}, key))] }, keys.join("+")))
+				}), /* @__PURE__ */ jsx("dd", {
+					className: "theme-muted-text",
+					children: shortcut.does
+				})] }, shortcut.does))
+			})]
+		}, group.title))]
+	})] });
+}
+//#endregion
+export { ALT_KEY, MOD_KEY, ShortcutsButton };

package/dist/graph/SuggestionInput.js

@@ -0,0 +1,29 @@
+import Dropdown from "../components/Dropdown.js";
+import cx from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/graph/SuggestionInput.tsx
+function suggestionOptions(suggestions) {
+	return suggestions.map(({ value, label }) => label ? {
+		label,
+		value,
+		description: value
+	} : value);
+}
+var FIELD_TEXT_BOX = "py-3 pl-4 rounded-lg text-sm !bg-[var(--theme-muted-panel-bg)]";
+/**
+* The dropdown for a field that takes any typed value as well as the ones it offers. Any of
+* the dropdown's own props can still be passed, such as `allowCustomValue={false}`.
+*/
+function SuggestionInput({ value, onChange, suggestions, allowCustomValue = true, ...props }) {
+	return /* @__PURE__ */ jsx(Dropdown, {
+		showCaret: suggestions.length > 0,
+		...props,
+		textBoxClassName: cx(FIELD_TEXT_BOX, props.textBoxClassName),
+		allowCustomValue,
+		value,
+		options: suggestionOptions(suggestions),
+		onChange: (next) => onChange(next === void 0 ? "" : String(next))
+	});
+}
+//#endregion
+export { FIELD_TEXT_BOX, SuggestionInput, suggestionOptions };

package/dist/graph/editorApi.js

@@ -0,0 +1,8 @@
+//#region src/graph/editorApi.ts
+var TEXT_INPUT = "input, textarea, select, [contenteditable=\"true\"]";
+var typing = (target) => target instanceof Element && !!target.closest(TEXT_INPUT);
+function overlaps(rect, box) {
+	return rect.left <= box.right && rect.right >= box.left && rect.top <= box.bottom && rect.bottom >= box.top;
+}
+//#endregion
+export { overlaps, typing };

package/dist/graph/editorChrome.js

@@ -0,0 +1,75 @@
+import { BiRedo } from "../icons/bi/BiRedo.js";
+import { BiUndo } from "../icons/bi/BiUndo.js";
+import { IoSettingsOutline } from "../icons/io5/IoSettingsOutline.js";
+import { TOOLTIP_ID } from "../components/Tooltip.js";
+import { IconButton } from "../components/IconButton.js";
+import { useGraphEditorStrings } from "./editorStrings.js";
+import { ProblemsButton } from "./ProblemsButton.js";
+import { ShortcutsButton } from "./ShortcutsButton.js";
+import cx from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/editorChrome.tsx
+/** What a drag carries, beside the pointer at `at` in its layer's coordinates. */
+function DragLabel({ at, text, refused = false }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("pointer-events-none absolute z-30 rounded-md border bg-(--theme-panel-bg) px-2 py-1 text-xs shadow", refused ? "border-(--theme-error) text-(--theme-error)" : "theme-border"),
+		style: {
+			left: at.x + 12,
+			top: at.y + 12
+		},
+		children: text
+	});
+}
+function BarDivider() {
+	return /* @__PURE__ */ jsx("div", { className: "mx-0.5 h-5 w-px bg-(--theme-border)" });
+}
+/** A toolbar chip that adds something: click to add it, or, given `onPointerDown`, drag it to where it goes. */
+function AddChip({ icon, label, hint, className, onPointerDown, onClick }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: cx("flex h-7 items-center gap-1 whitespace-nowrap rounded px-2 text-xs theme-hover", onPointerDown ? "cursor-grab" : "cursor-pointer", className),
+		"data-tooltip-id": TOOLTIP_ID,
+		"data-tooltip-content": hint,
+		onPointerDown,
+		onClick,
+		children: [icon, label]
+	});
+}
+/** The bar both editors draw: problems, undo and redo, the editor's own controls, settings, shortcuts. */
+function EditorBar({ editor, groups, className, children }) {
+	const t = useGraphEditorStrings();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("flex max-w-full flex-wrap items-center justify-end gap-0.5 rounded-md border theme-border bg-(--theme-panel-bg) p-0.5", className),
+		children: [
+			!!editor.listedProblems?.length && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ProblemsButton, { problems: editor.listedProblems }), /* @__PURE__ */ jsx(BarDivider, {})] }),
+			/* @__PURE__ */ jsx(IconButton, {
+				icon: /* @__PURE__ */ jsx(BiUndo, { className: "h-4 w-4" }),
+				label: t.undo,
+				size: "sm",
+				variant: "ghost",
+				disabled: !editor.canUndo,
+				onClick: editor.onUndo
+			}),
+			/* @__PURE__ */ jsx(IconButton, {
+				icon: /* @__PURE__ */ jsx(BiRedo, { className: "h-4 w-4" }),
+				label: t.redo,
+				size: "sm",
+				variant: "ghost",
+				disabled: !editor.canRedo,
+				onClick: editor.onRedo
+			}),
+			/* @__PURE__ */ jsx(BarDivider, {}),
+			children,
+			editor.onOpenSettings && /* @__PURE__ */ jsx(IconButton, {
+				icon: /* @__PURE__ */ jsx(IoSettingsOutline, { className: "h-4 w-4" }),
+				label: t.workflowSettings,
+				size: "sm",
+				variant: "ghost",
+				onClick: editor.onOpenSettings
+			}),
+			/* @__PURE__ */ jsx(ShortcutsButton, { groups })
+		]
+	});
+}
+//#endregion
+export { AddChip, BarDivider, DragLabel, EditorBar };

package/dist/graph/editorFields.js

@@ -0,0 +1,394 @@
+import { FaPlus } from "../icons/fa/FaPlus.js";
+import { IoMdClose } from "../icons/io/IoMdClose.js";
+import { LuBraces } from "../icons/lu/LuBraces.js";
+import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
+import { withPositionKeys } from "../components/keys.js";
+import { TOOLTIP_ID } from "../components/Tooltip.js";
+import { BareModal, modalPanelClasses } from "../components/BareModal.js";
+import { Button } from "../components/Button.js";
+import { ghostButtonClasses, primaryButtonClasses } from "../components/ghostButton.js";
+import { FilterPill } from "../components/FilterPill.js";
+import { IconButton } from "../components/IconButton.js";
+import { Textarea } from "../components/Input.js";
+import { Toggle } from "../components/Toggle.js";
+import { useGraphEditorStrings } from "./editorStrings.js";
+import { useFieldLint } from "./fieldProblems.js";
+import { asRecord } from "./records.js";
+import { SuggestionInput } from "./SuggestionInput.js";
+import cx from "classnames";
+import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/editorFields.tsx
+var EXPRESSION = /^\$\{\{.*\}\}$/;
+var EMPTY_EXPRESSION = /^\$\{\{\s*\}\}$/;
+function withoutUndefined(value) {
+	return Object.fromEntries(Object.entries(value).filter(([, item]) => item !== void 0));
+}
+function text(value) {
+	return value === void 0 || value === null ? "" : String(value);
+}
+function isScalar(value) {
+	return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+}
+function parseScalar(value) {
+	if (/^-?\d+(\.\d+)?$/.test(value) && String(Number(value)) === value) return Number(value);
+	if (value === "true" || value === "false") return value === "true";
+	return value;
+}
+function sameValue(a, b) {
+	if (Array.isArray(a) || Array.isArray(b)) return Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((item, i) => sameValue(item, b[i]));
+	if (typeof a === "object" && typeof b === "object" && a !== null && b !== null) {
+		const ak = Object.keys(a);
+		const bk = Object.keys(b);
+		return ak.length === bk.length && ak.every((k) => sameValue(a[k], b[k]));
+	}
+	return a === b;
+}
+/** Keys whose value changed: undefined removes a key, anything else writes it. */
+function diffPatch(original, next) {
+	const set = {};
+	const unset = [];
+	for (const [key, value] of Object.entries(next)) if (value === void 0) {
+		if (Object.hasOwn(original, key)) unset.push(key);
+	} else if (!sameValue(original[key], value)) set[key] = value;
+	return {
+		set,
+		unset
+	};
+}
+function isEmptyPatch(patch) {
+	return Object.keys(patch.set).length === 0 && patch.unset.length === 0;
+}
+function expressionError(value, t) {
+	const trimmed = value.trim();
+	return !trimmed || EXPRESSION.test(trimmed) && !EMPTY_EXPRESSION.test(trimmed) ? void 0 : t.invalidExpressionValue;
+}
+function parseJson(value) {
+	try {
+		return {
+			ok: true,
+			value: JSON.parse(value)
+		};
+	} catch {
+		return { ok: false };
+	}
+}
+function unchangedValue(text, original, nested = false) {
+	return original !== void 0 && text === (nested ? JSON.stringify(original) : String(original));
+}
+function flagError(value, t) {
+	return typeof value === "string" ? expressionError(value, t) : void 0;
+}
+function flagValue(checked, fallback, original) {
+	if (checked !== fallback) return checked;
+	return original === checked ? checked : void 0;
+}
+/** Whether each section of a dialog is open, kept while the dialog is up so switching views keeps it. */
+var SectionMemory = createContext(null);
+function useSectionMemory() {
+	return useState(() => /* @__PURE__ */ new Map())[0];
+}
+function Section({ title, description, open = false, alert = false, children }) {
+	const memory = useContext(SectionMemory);
+	const [initial] = useState(() => {
+		const decided = memory?.get(title) ?? open;
+		memory?.set(title, decided);
+		return decided;
+	});
+	const details = useRef(null);
+	useEffect(() => {
+		if (alert && details.current && !details.current.open) details.current.open = true;
+	}, [alert]);
+	return /* @__PURE__ */ jsxs("details", {
+		ref: details,
+		open: initial,
+		onToggle: (e) => memory?.set(title, e.currentTarget.open),
+		className: "group border-t theme-border",
+		children: [/* @__PURE__ */ jsxs("summary", {
+			className: "flex cursor-pointer select-none list-none items-center gap-1.5 py-2.5 text-sm font-semibold [&::-webkit-details-marker]:hidden",
+			children: [/* @__PURE__ */ jsx(LuChevronRight, {
+				"aria-hidden": "true",
+				className: "h-3.5 w-3.5 shrink-0 theme-muted-text transition-transform group-open:rotate-90 motion-reduce:transition-none"
+			}), title]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3 pb-4",
+			children: [description && /* @__PURE__ */ jsx("div", {
+				className: "text-xs theme-muted-text",
+				children: description
+			}), children]
+		})]
+	});
+}
+function FieldError({ message }) {
+	return message ? /* @__PURE__ */ jsx("div", {
+		className: "text-xs text-(--theme-error)",
+		children: message
+	}) : null;
+}
+/** The YAML key a field sets, beside its name; left out where the name already says it. */
+function KeyHint({ label, yamlKey }) {
+	return label.trim().toLowerCase() === yamlKey.toLowerCase() ? null : /* @__PURE__ */ jsx("code", {
+		"aria-hidden": "true",
+		className: "font-mono text-xs theme-muted-text",
+		children: yamlKey
+	});
+}
+/** Label props for an Input or Textarea that sets `yamlKey`. */
+function labelled(label, yamlKey) {
+	return {
+		label,
+		labelHint: /* @__PURE__ */ jsx(KeyHint, {
+			label,
+			yamlKey
+		})
+	};
+}
+/** A field's name and help text, for controls without their own label; `actions` sit at its right. */
+function FieldLabel({ label, yamlKey, description, htmlFor, descriptionId, actions }) {
+	const nameClass = "text-[0.8125rem] font-medium";
+	const text = /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-col",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-baseline gap-x-1.5",
+			children: [htmlFor ? /* @__PURE__ */ jsx("label", {
+				htmlFor,
+				className: nameClass,
+				children: label
+			}) : /* @__PURE__ */ jsx("span", {
+				className: nameClass,
+				children: label
+			}), yamlKey && /* @__PURE__ */ jsx(KeyHint, {
+				label,
+				yamlKey
+			})]
+		}), /* @__PURE__ */ jsx("span", {
+			id: descriptionId,
+			className: "text-xs theme-muted-text",
+			children: description
+		})]
+	});
+	return actions ? /* @__PURE__ */ jsxs("div", {
+		className: "flex items-start justify-between gap-3",
+		children: [text, /* @__PURE__ */ jsx("div", {
+			className: "flex shrink-0 items-center gap-1",
+			children: actions
+		})]
+	}) : text;
+}
+/** A field's label and description above the editor that sets it. */
+function LabelledField({ children, ...label }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [/* @__PURE__ */ jsx(FieldLabel, { ...label }), children]
+	});
+}
+/**
+* Switches a field between its own control and a typed expression, where the schema takes one. Its
+* name says what pressing it does, so it isn't also announced as pressed.
+*/
+function ExpressionToggle({ active, onChange }) {
+	const t = useGraphEditorStrings();
+	return /* @__PURE__ */ jsx(IconButton, {
+		icon: /* @__PURE__ */ jsx(LuBraces, { className: "h-4 w-4" }),
+		label: active ? t.stopExpression : t.useExpression,
+		size: "sm",
+		variant: "ghost",
+		active,
+		onClick: () => onChange(!active)
+	});
+}
+function ToggleField({ label, yamlKey, description, checked, onChange, disabled }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between gap-3",
+		children: [/* @__PURE__ */ jsx(FieldLabel, {
+			label,
+			yamlKey,
+			description
+		}), /* @__PURE__ */ jsx(Toggle, {
+			checked,
+			onChange,
+			label,
+			...disabled ? { disabled } : {}
+		})]
+	});
+}
+function ChoiceButtons({ options, value, onChange }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-wrap gap-1",
+		children: options.map((option) => /* @__PURE__ */ jsx(FilterPill, {
+			active: value === option.value,
+			onClick: () => onChange(option.value),
+			children: option.label
+		}, option.value))
+	});
+}
+function AddRowButton({ label, onClick }) {
+	return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "ghost",
+		size: "sm",
+		fullWidth: false,
+		icon: /* @__PURE__ */ jsx(FaPlus, { className: "h-3 w-3" }),
+		iconPosition: "left",
+		onClick,
+		children: label
+	}) });
+}
+function updateAt(items, index, item) {
+	return items.map((current, i) => i === index ? item : current);
+}
+function removeAt(items, index) {
+	return items.filter((_, i) => i !== index);
+}
+/** A list of single values, such as permissions or variable names. */
+function StringListEditor({ label, values, onChange, addLabel, placeholder, error, suggestions = [] }) {
+	const t = useGraphEditorStrings();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [
+			withPositionKeys(values).map(({ key, item: value }, i) => /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex-1",
+					children: /* @__PURE__ */ jsx(SuggestionInput, {
+						ariaLabel: t.listItem(label, i + 1),
+						value,
+						placeholder,
+						suggestions: suggestions.map((option) => ({ value: option })),
+						onChange: (next) => onChange(updateAt(values, i, next))
+					})
+				}), /* @__PURE__ */ jsx(IconButton, {
+					icon: /* @__PURE__ */ jsx(IoMdClose, { className: "h-4 w-4" }),
+					label: t.removeRow,
+					variant: "ghost",
+					size: "sm",
+					onClick: () => onChange(removeAt(values, i))
+				})]
+			}, key)),
+			/* @__PURE__ */ jsx(FieldError, { message: error }),
+			/* @__PURE__ */ jsx(AddRowButton, {
+				label: addLabel,
+				onClick: () => onChange([...values, ""])
+			})
+		]
+	});
+}
+function SuggestedInput({ label, yamlKey, description, value, onChange, suggestions, error, placeholder }) {
+	const id = useId();
+	const lint = useFieldLint(yamlKey, id, value, onChange);
+	return /* @__PURE__ */ jsxs(LabelledField, {
+		label,
+		yamlKey,
+		description: description ?? "",
+		htmlFor: id,
+		...description ? { descriptionId: `${id}-help` } : {},
+		children: [
+			/* @__PURE__ */ jsx(SuggestionInput, {
+				id,
+				"aria-describedby": description ? `${id}-help` : void 0,
+				value,
+				placeholder,
+				suggestions: suggestions.map((option) => ({ value: option })),
+				onChange
+			}),
+			/* @__PURE__ */ jsx(FieldError, { message: error ?? lint.message }),
+			lint.fixes
+		]
+	});
+}
+/** A text area that starts one line tall and grows with its text. */
+function useGrowingArea(value) {
+	const ref = useRef(null);
+	useLayoutEffect(() => {
+		const area = ref.current;
+		if (area) {
+			area.style.height = "auto";
+			area.style.height = `${area.scrollHeight + area.offsetHeight - area.clientHeight}px`;
+		}
+	}, [value]);
+	return ref;
+}
+var GROWING_AREA = "!min-h-0 !resize-none overflow-hidden";
+function GrowingTextarea(props) {
+	const ref = useGrowingArea(props.value);
+	return /* @__PURE__ */ jsx(Textarea, {
+		...props,
+		ref,
+		rows: 1,
+		className: GROWING_AREA
+	});
+}
+/** The dialogs' "open when adding" switch, when the host keeps the setting. */
+function openOnAddOf(editor) {
+	return editor?.onOpenOnAddChange ? {
+		open: editor.openOnAdd !== false,
+		onChange: editor.onOpenOnAddChange
+	} : void 0;
+}
+function OpenOnAddSwitch({ open, onChange }) {
+	const t = useGraphEditorStrings();
+	return /* @__PURE__ */ jsxs("label", {
+		className: "flex cursor-pointer items-center gap-2 text-xs theme-muted-text",
+		"data-tooltip-id": TOOLTIP_ID,
+		"data-tooltip-content": t.openOnAddHelp,
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "checkbox",
+			className: "h-4 w-4 cursor-pointer accent-(--theme-element)",
+			checked: open,
+			onChange: (e) => onChange(e.target.checked)
+		}), t.openOnAdd]
+	});
+}
+function DialogShell({ title, onClose, onSubmit, saveDisabled, dirty, locked = false, footerStart, headerEnd, openOnAdd, children }) {
+	const t = useGraphEditorStrings();
+	const submit = () => {
+		if (!saveDisabled) onSubmit();
+	};
+	return /* @__PURE__ */ jsx(BareModal, {
+		open: true,
+		onClose,
+		ariaLabel: title,
+		align: "center",
+		preventClose: dirty || locked,
+		className: cx(modalPanelClasses, "flex max-h-[85vh] w-full max-w-2xl flex-col"),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex min-h-0 flex-col",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-3 border-b theme-border px-5 py-4",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "flex-1 text-[1rem] font-semibold",
+						children: title
+					}), headerEnd]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex min-h-0 flex-col gap-3 overflow-y-auto px-5 py-4",
+					children
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 border-t theme-border px-5 py-3",
+					children: [
+						footerStart,
+						openOnAdd && /* @__PURE__ */ jsx(OpenOnAddSwitch, { ...openOnAdd }),
+						/* @__PURE__ */ jsx("div", { className: "flex-1" }),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: ghostButtonClasses,
+							onClick: onClose,
+							children: t.cancel
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							disabled: saveDisabled,
+							onClick: submit,
+							className: cx(primaryButtonClasses, "disabled:cursor-not-allowed disabled:opacity-50"),
+							children: t.save
+						})
+					]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { AddRowButton, ChoiceButtons, DialogShell, EXPRESSION, ExpressionToggle, FieldError, FieldLabel, GROWING_AREA, GrowingTextarea, KeyHint, LabelledField, Section, SectionMemory, StringListEditor, SuggestedInput, ToggleField, asRecord, diffPatch, expressionError, flagError, flagValue, isEmptyPatch, isScalar, labelled, openOnAddOf, parseJson, parseScalar, removeAt, sameValue, text, unchangedValue, updateAt, useGrowingArea, useSectionMemory, withoutUndefined };

package/dist/graph/editorPrimitives.js

@@ -1,7 +1,61 @@
-import "classnames";
-import "react";
-import "react/jsx-runtime";
+import cx from "classnames";
+import { useEffect, useRef, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/graph/editorPrimitives.tsx
+/** A small store for an editor's view state, so a change redraws only what reads it. */
+function createStore(initial) {
+	let state = initial;
+	const listeners = /* @__PURE__ */ new Set();
+	return {
+		get: () => state,
+		set(patch) {
+			state = {
+				...state,
+				...patch
+			};
+			for (const listener of listeners) listener();
+		},
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		}
+	};
+}
+function useStore(store, select) {
+	return useSyncExternalStore(store.subscribe, () => select(store.get()));
+}
+/**
+* Gives `container` focus back once it has fallen to the page, as when the row, menu or dialog
+* holding it goes away, so the editor's shortcuts, Cmd+Z among them, keep reaching it.
+*/
+function reclaimFocus(container) {
+	window.setTimeout(() => {
+		const active = document.activeElement;
+		if (container?.isConnected && (!active || active === document.body)) container.focus({ preventScroll: true });
+	});
+}
+/** Reclaims focus for the editor's container each time its dialog closes. */
+function useFocusAfterDialog(store, container) {
+	const latest = useRef(container);
+	latest.current = container;
+	useEffect(() => {
+		let open = store.get().dialog !== null;
+		return store.subscribe(() => {
+			const now = store.get().dialog !== null;
+			if (open && !now) reclaimFocus(latest.current());
+			open = now;
+		});
+	}, [store]);
+}
+/** `openMenu` whose menus reclaim focus for the editor when they close. */
+function returningFocus(openMenu, container) {
+	return (x, y, items, onClose, search) => openMenu(x, y, items, () => {
+		onClose?.();
+		reclaimFocus(container());
+	}, search);
+}
 var DRAG_THRESHOLD = 4;
 function suppressNextClick() {
 	const swallow = (e) => {
@@ -55,5 +109,42 @@ function trackDrag(start, { onMove, onEnd, onCancel, escape: cancelOnEscape = fa
 	window.addEventListener("pointercancel", cancel);
 	if (cancelOnEscape) window.addEventListener("keydown", key, true);
 }
+function place(box) {
+	return {
+		left: box.left,
+		top: box.top,
+		width: box.right - box.left,
+		height: box.bottom - box.top
+	};
+}
+/** The box a shift + drag draws, in its layer's coordinates. */
+function MarqueeBox({ box, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("absolute rounded-md border-2 border-dashed border-(--theme-element) bg-(--theme-element)/10", className),
+		style: place(box)
+	});
+}
+var OPENED = "[role=\"menu\"], [role=\"dialog\"], [role=\"listbox\"]";
+/** Calls `clear` when a press lands outside the editor and everything it has open. */
+function usePressOutside(container, clear) {
+	const latest = useRef({
+		container,
+		clear
+	});
+	latest.current = {
+		container,
+		clear
+	};
+	useEffect(() => {
+		const onDown = (e) => {
+			const root = latest.current.container();
+			const target = e.target;
+			if (!root || !(target instanceof Element) || root.contains(target) || target.closest(OPENED) || target.querySelector(`:scope > :is(${OPENED})`)) return;
+			latest.current.clear();
+		};
+		document.addEventListener("pointerdown", onDown, true);
+		return () => document.removeEventListener("pointerdown", onDown, true);
+	}, []);
+}
 //#endregion
-export { trackDrag };
+export { MarqueeBox, createStore, place, reclaimFocus, returningFocus, trackDrag, useFocusAfterDialog, usePressOutside, useStore };

package/dist/graph/editorStrings.js

@@ -695,5 +695,13 @@ function useGraphEditorStrings() {
 		...overrides
 	}), [overrides]);
 }
+/** The input form editor's strings: the host's translations over the English defaults. */
+function useInputsEditorStrings() {
+	const overrides = useStrings().inputsEditor;
+	return useMemo(() => ({
+		...INPUTS_EDITOR_STRINGS,
+		...overrides
+	}), [overrides]);
+}
 //#endregion
-export { GRAPH_EDITOR_STRINGS, INPUTS_EDITOR_STRINGS, useGraphEditorStrings };
+export { GRAPH_EDITOR_STRINGS, INPUTS_EDITOR_STRINGS, useGraphEditorStrings, useInputsEditorStrings };