@parallelworks/ui 0.36.0 → 0.38.0

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.d.ts

@@ -0,0 +1,60 @@
+import type { OpenMenu } from '../list/RowContextMenu.js';
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface Box {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+/** A small store for an editor's view state, so a change redraws only what reads it. */
+export declare function createStore<T extends object>(initial: T): {
+    get: () => T;
+    set(patch: Partial<T>): void;
+    subscribe(listener: () => void): () => void;
+};
+export type Store<T extends object> = ReturnType<typeof createStore<T>>;
+export declare function useStore<T extends object, V>(store: Store<T>, select: (state: T) => V): V;
+/**
+ * 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.
+ */
+export declare function reclaimFocus(container: HTMLElement | null | undefined): void;
+/** Reclaims focus for the editor's container each time its dialog closes. */
+export declare function useFocusAfterDialog<T extends {
+    dialog: unknown;
+}>(store: Store<T>, container: () => HTMLElement | null): void;
+/** `openMenu` whose menus reclaim focus for the editor when they close. */
+export declare function returningFocus(openMenu: OpenMenu, container: () => HTMLElement | null): OpenMenu;
+interface DragOptions {
+    /** Each move, once the pointer has gone past the threshold. */
+    onMove?: (client: Point) => void;
+    /** The release; `dragged` tells a drag from a click. */
+    onEnd?: (client: Point, dragged: boolean) => void;
+    /** A cancelled pointer, or Escape when `escape` is on. */
+    onCancel?: (dragged: boolean) => void;
+    /** Escape cancels the press, and goes no further. */
+    escape?: boolean;
+    /** Keeps the page's text from selecting: from the press, or once it is a drag. */
+    holdText?: 'press' | 'drag';
+    /** The click after the release: swallowed always, only after a drag, or never. */
+    swallowClick?: 'always' | 'drag' | 'never';
+}
+/** Follows a press from `start` until it's released or cancelled. */
+export declare function trackDrag(start: Point, { onMove, onEnd, onCancel, escape: cancelOnEscape, holdText, swallowClick, }: DragOptions): void;
+export declare function place(box: Box): {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+/** The box a shift + drag draws, in its layer's coordinates. */
+export declare function MarqueeBox({ box, className }: {
+    box: Box;
+    className?: string;
+}): import("react").JSX.Element;
+/** Calls `clear` when a press lands outside the editor and everything it has open. */
+export declare function usePressOutside(container: () => HTMLElement | null, clear: () => void): void;
+export {};

package/dist/graph/editorPrimitives.js

@@ -0,0 +1,150 @@
+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) => {
+		e.stopPropagation();
+		e.preventDefault();
+		window.removeEventListener("click", swallow, true);
+	};
+	window.addEventListener("click", swallow, true);
+	setTimeout(() => window.removeEventListener("click", swallow, true), 0);
+}
+/** Follows a press from `start` until it's released or cancelled. */
+function trackDrag(start, { onMove, onEnd, onCancel, escape: cancelOnEscape = false, holdText, swallowClick = "never" }) {
+	let dragged = false;
+	const cleanup = () => {
+		window.removeEventListener("pointermove", move);
+		window.removeEventListener("pointerup", up);
+		window.removeEventListener("pointercancel", cancel);
+		window.removeEventListener("keydown", key, true);
+		if (holdText) document.body.style.userSelect = "";
+	};
+	const move = (ev) => {
+		if (!dragged && Math.hypot(ev.clientX - start.x, ev.clientY - start.y) < DRAG_THRESHOLD) return;
+		if (!dragged && holdText === "drag") document.body.style.userSelect = "none";
+		dragged = true;
+		onMove?.({
+			x: ev.clientX,
+			y: ev.clientY
+		});
+	};
+	const up = (ev) => {
+		cleanup();
+		if (swallowClick === "always" || swallowClick === "drag" && dragged) suppressNextClick();
+		onEnd?.({
+			x: ev.clientX,
+			y: ev.clientY
+		}, dragged);
+	};
+	const cancel = () => {
+		cleanup();
+		onCancel?.(dragged);
+	};
+	const key = (ev) => {
+		if (ev.key !== "Escape") return;
+		ev.stopPropagation();
+		if (dragged && swallowClick !== "never") suppressNextClick();
+		cancel();
+	};
+	if (holdText === "press") document.body.style.userSelect = "none";
+	window.addEventListener("pointermove", move);
+	window.addEventListener("pointerup", up);
+	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 { MarqueeBox, createStore, place, reclaimFocus, returningFocus, trackDrag, useFocusAfterDialog, usePressOutside, useStore };