@parallelworks/ui 0.36.0 → 0.37.0

package/dist/graph/ToolbarPopover.js

@@ -0,0 +1,71 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/graph/ToolbarPopover.tsx
+var GAP = 8;
+var PANEL_WIDTH = 384;
+function placeBy(anchor, width) {
+	const rect = anchor.getBoundingClientRect();
+	const above = rect.top - 16;
+	const below = window.innerHeight - rect.bottom - 16;
+	const right = Math.max(GAP, Math.min(window.innerWidth - rect.right, window.innerWidth - GAP - width));
+	return above >= below ? {
+		right,
+		bottom: window.innerHeight - rect.top + GAP,
+		maxHeight: above
+	} : {
+		right,
+		top: rect.bottom + GAP,
+		maxHeight: below
+	};
+}
+/** A toolbar button's panel, drawn over the page so the pane it sits in can't clip it. */
+function ToolbarPopover({ anchor, label, onClose, children }) {
+	const panel = useRef(null);
+	const [place, setPlace] = useState(null);
+	const close = useRef(onClose);
+	close.current = onClose;
+	useLayoutEffect(() => {
+		const update = () => {
+			if (anchor.current) setPlace(placeBy(anchor.current, panel.current?.offsetWidth || PANEL_WIDTH));
+		};
+		update();
+		window.addEventListener("resize", update);
+		window.addEventListener("scroll", update, true);
+		return () => {
+			window.removeEventListener("resize", update);
+			window.removeEventListener("scroll", update, true);
+		};
+	}, [anchor]);
+	useEffect(() => {
+		panel.current?.focus({ preventScroll: true });
+		const away = (e) => {
+			const target = e.target;
+			if (!panel.current?.contains(target) && !anchor.current?.contains(target)) close.current();
+		};
+		const onEscape = (e) => {
+			if (e.key === "Escape") {
+				e.stopPropagation();
+				close.current();
+				anchor.current?.focus({ preventScroll: true });
+			}
+		};
+		window.addEventListener("pointerdown", away, true);
+		window.addEventListener("keydown", onEscape, true);
+		return () => {
+			window.removeEventListener("pointerdown", away, true);
+			window.removeEventListener("keydown", onEscape, true);
+		};
+	}, [anchor]);
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		ref: panel,
+		role: "dialog",
+		"aria-label": label,
+		tabIndex: -1,
+		className: "fixed z-50 w-96 max-w-[calc(100vw-16px)] overflow-y-auto rounded-md border theme-border bg-(--theme-panel-bg) p-3 text-xs text-(--theme-app) shadow-lg outline-none",
+		style: place ?? { visibility: "hidden" },
+		children
+	}), document.body);
+}
+//#endregion
+export { ToolbarPopover };

package/dist/graph/editorApi.d.ts

@@ -0,0 +1,51 @@
+import type { GraphEdit, GraphEditResult } from '../editing.js';
+import type { Box } from './editorPrimitives.js';
+import type { ListedProblem } from './ProblemsButton.js';
+import type { SettingsView } from './settingsViews.js';
+export type { Box };
+export interface EditorProblem {
+    message: string;
+    line: number;
+    job?: string;
+    step?: number;
+    input?: string[];
+    /** In a workflow-level setting the settings dialog edits. */
+    setting?: boolean;
+}
+/** What to show in the YAML beside the graph: a job, one of its steps, or a line. */
+export type RevealTarget = {
+    job: string;
+    step?: number;
+} | {
+    line: number;
+};
+/** Build-page callbacks that turn the dependency graph into an editor. */
+export interface DependencyGraphEditor {
+    onEdit: (edit: GraphEdit) => GraphEditResult | undefined;
+    canUndo: boolean;
+    canRedo: boolean;
+    onUndo: () => void;
+    onRedo: () => void;
+    /** `uses` values offered in the step editor, such as the user's own workflows. */
+    usesSuggestions?: string[];
+    /** Opens the workflow-level settings: env, permissions, sessions and more. */
+    onOpenSettings?: () => void;
+    /** The YAML the edits apply to, for editing a job or step as text. */
+    readSource?: () => string;
+    /** The view the job, step and input dialogs open in; YAML when not given. */
+    settingsView?: SettingsView;
+    onSettingsViewChange?: (view: SettingsView) => void;
+    /** False adds a new job, step or input with its defaults, without opening its dialog. */
+    openOnAdd?: boolean;
+    onOpenOnAddChange?: (open: boolean) => void;
+    /** Problems in the workflow, marked on the jobs, steps and inputs they're in. */
+    problems?: EditorProblem[];
+    /** The problems this pane's toolbar counts and lists. */
+    listedProblems?: ListedProblem[];
+    /** Hands the page this pane's way to bring a problem into view, false where it can't; returns its undo. */
+    registerShow?: (show: (problem: EditorProblem) => boolean) => () => void;
+    /** Shows a job's, step's or line's YAML, when the YAML editor is beside the graph. */
+    onReveal?: (target: RevealTarget) => void;
+}
+export declare const typing: (target: EventTarget | null) => boolean;
+export declare function overlaps(rect: DOMRect, box: Box): boolean;

package/dist/graph/editorChrome.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode, PointerEvent as ReactPointerEvent } from 'react';
+import type { DependencyGraphEditor } from './editorApi.js';
+import type { Point } from './editorPrimitives.js';
+import { type ShortcutGroup } from './ShortcutsButton.js';
+/** What a drag carries, beside the pointer at `at` in its layer's coordinates. */
+export declare function DragLabel({ at, text, refused, }: {
+    at: Point;
+    text: string;
+    refused?: boolean;
+}): import("react").JSX.Element;
+export declare function BarDivider(): import("react").JSX.Element;
+/** A toolbar chip that adds something: click to add it, or, given `onPointerDown`, drag it to where it goes. */
+export declare function AddChip({ icon, label, hint, className, onPointerDown, onClick, }: {
+    icon: ReactNode;
+    label: string;
+    hint: string;
+    className?: string;
+    onPointerDown?: (e: ReactPointerEvent<HTMLButtonElement>) => void;
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}): import("react").JSX.Element;
+/** The bar both editors draw: problems, undo and redo, the editor's own controls, settings, shortcuts. */
+export declare function EditorBar({ editor, groups, className, children, }: {
+    editor: DependencyGraphEditor;
+    groups: ShortcutGroup[];
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/graph/editorFields.d.ts

@@ -0,0 +1,180 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { Textarea } from '../components/Input.js';
+import type { FieldPatch } from '../editing.js';
+import { type GraphEditorStrings } from './editorStrings.js';
+import { type Json } from './records.js';
+export { asRecord, type Json } from './records.js';
+export type Strings = GraphEditorStrings;
+export declare const EXPRESSION: RegExp;
+export declare const ENV_KEY: RegExp;
+export declare const DURATION: RegExp;
+export declare function withoutUndefined(value: Json): Json;
+export declare function text(value: unknown): string;
+export declare function isScalar(value: unknown): boolean;
+export declare function parseScalar(value: string): unknown;
+export declare function sameValue(a: unknown, b: unknown): boolean;
+/** Keys whose value changed: undefined removes a key, anything else writes it. */
+export declare function diffPatch(original: Json, next: Json): Required<FieldPatch>;
+export declare function isEmptyPatch(patch: Required<FieldPatch>): boolean;
+export declare function conditionText(value: unknown): string;
+export declare function parseCondition(value: string): unknown;
+export declare function durationError(value: string, t: Strings, pattern?: RegExp): string | undefined;
+export declare function expressionError(value: string, t: Strings): string | undefined;
+export declare function orUndefined(value: string): string | undefined;
+export declare function countError(value: string, min: number, message: string): string | undefined;
+export declare function parseCount(value: string): unknown;
+export declare function parseJson(value: string): {
+    ok: boolean;
+    value?: unknown;
+};
+/** A key/value row; nested values are edited as JSON. */
+export interface Row {
+    key: string;
+    value: string;
+    nested?: boolean;
+    /** What the row was read from; while its text is unchanged a save writes this back as it was. */
+    original?: unknown;
+}
+export declare function unchangedValue(text: string, original: unknown, nested?: boolean): boolean;
+/** Rows for a map; with `nested` false a non-scalar is shown as its JSON text and saved as a string. */
+export declare function rowsFrom(value: unknown, nested?: boolean): Row[];
+export declare function rowsTo(rows: Row[], parse: (value: string) => unknown): Json | undefined;
+export declare function rowsError(rows: Row[], keyPattern: RegExp, keyMessage: string, t: Strings, valueError?: (value: string) => string | undefined): string | undefined;
+/** A switch that may instead hold a `${{ }}` expression. */
+export type Flag = boolean | string | undefined;
+export declare function flagOf(value: unknown): Flag;
+export declare function flagError(value: Flag, t: Strings): string | undefined;
+export declare function flagValue(checked: boolean, fallback: boolean, original: unknown): Flag;
+/** Whether each section of a dialog is open, kept while the dialog is up so switching views keeps it. */
+export declare const SectionMemory: import("react").Context<Map<string, boolean> | null>;
+export declare function useSectionMemory(): Map<string, boolean>;
+export declare function Section({ title, description, open, alert, children, }: {
+    title: string;
+    description?: string;
+    /** Whether it starts open; read once, when its dialog first shows it. */
+    open?: boolean;
+    /** A problem inside, which opens it so a folded section can't hide why Save is off. */
+    alert?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function FieldError({ message }: {
+    message: string | undefined;
+}): import("react").JSX.Element | null;
+/** The YAML key a field sets, beside its name; left out where the name already says it. */
+export declare function KeyHint({ label, yamlKey }: {
+    label: string;
+    yamlKey: string;
+}): import("react").JSX.Element | null;
+/** Label props for an Input or Textarea that sets `yamlKey`. */
+export declare function labelled(label: string, yamlKey: string): {
+    label: string;
+    labelHint: import("react").JSX.Element;
+};
+/** A field's name and help text, for controls without their own label; `actions` sit at its right. */
+export declare function FieldLabel({ label, yamlKey, description, htmlFor, descriptionId, actions, }: {
+    label: string;
+    yamlKey?: string | undefined;
+    description: string;
+    htmlFor?: string;
+    descriptionId?: string;
+    actions?: ReactNode;
+}): import("react").JSX.Element;
+/** A field's label and description above the editor that sets it. */
+export declare function LabelledField({ children, ...label }: ComponentProps<typeof FieldLabel> & {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * 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.
+ */
+export declare function ExpressionToggle({ active, onChange, }: {
+    active: boolean;
+    onChange: (active: boolean) => void;
+}): import("react").JSX.Element;
+export declare function ToggleField({ label, yamlKey, description, checked, onChange, disabled, }: {
+    label: string;
+    yamlKey?: string;
+    description: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+export declare function ChoiceButtons<T extends string>({ options, value, onChange, }: {
+    options: {
+        value: T;
+        label: string;
+    }[];
+    value: T;
+    onChange: (value: T) => void;
+}): import("react").JSX.Element;
+export declare function AddRowButton({ label, onClick }: {
+    label: string;
+    onClick: () => void;
+}): import("react").JSX.Element;
+export declare function KeyValueEditor({ rows, onChange, error, valuePlaceholder, keyPlaceholder, addLabel, valueSuggestions, lint, }: {
+    rows: Row[];
+    onChange: (rows: Row[]) => void;
+    error: string | undefined;
+    valuePlaceholder?: string;
+    keyPlaceholder?: string;
+    addLabel?: string;
+    /** Offered on each value, such as references to the workflow's inputs. */
+    valueSuggestions?: string[];
+    /** Whether each row shows the problems at its key, inside the caller's LintScope. */
+    lint?: boolean;
+}): import("react").JSX.Element;
+export declare function updateAt<T>(items: T[], index: number, item: T): T[];
+export declare function removeAt<T>(items: T[], index: number): T[];
+/** A list of single values, such as permissions or variable names. */
+export declare function StringListEditor({ label, values, onChange, addLabel, placeholder, error, suggestions, }: {
+    /** The list's name, which names each of its rows. */
+    label: string;
+    values: string[];
+    onChange: (values: string[]) => void;
+    addLabel: string;
+    placeholder?: string;
+    error?: string | undefined;
+    /** Offered on each row; any other value can still be typed. */
+    suggestions?: string[];
+}): import("react").JSX.Element;
+export declare function SuggestedInput({ label, yamlKey, description, value, onChange, suggestions, error, placeholder, }: {
+    label: string;
+    yamlKey?: string;
+    description?: string;
+    value: string;
+    onChange: (value: string) => void;
+    suggestions: string[];
+    error?: string | undefined;
+    placeholder?: string;
+}): import("react").JSX.Element;
+/** A text area that starts one line tall and grows with its text. */
+export declare function useGrowingArea(value: string): import("react").RefObject<HTMLTextAreaElement | null>;
+export declare const GROWING_AREA = "!min-h-0 !resize-none overflow-hidden";
+export declare function GrowingTextarea(props: Omit<ComponentProps<typeof Textarea>, 'rows'> & {
+    value: string;
+}): import("react").JSX.Element;
+/** Whether adding a job, step or input opens its dialog first; any of those dialogs sets it. */
+export interface OpenOnAdd {
+    open: boolean;
+    onChange: (open: boolean) => void;
+}
+/** The dialogs' "open when adding" switch, when the host keeps the setting. */
+export declare function openOnAddOf(editor: {
+    openOnAdd?: boolean;
+    onOpenOnAddChange?: (open: boolean) => void;
+} | undefined): OpenOnAdd | undefined;
+export interface DialogShellProps {
+    title: string;
+    onClose: () => void;
+    onSubmit: () => void;
+    saveDisabled: boolean;
+    dirty: boolean;
+    /** A dialog opened on top of this one owns Escape and outside clicks. */
+    locked?: boolean;
+    footerStart?: ReactNode;
+    /** Controls beside the title, such as a switch between views. */
+    headerEnd?: ReactNode;
+    openOnAdd?: OpenOnAdd | undefined;
+    children: ReactNode;
+}
+export declare function DialogShell({ title, onClose, onSubmit, saveDisabled, dirty, locked, footerStart, headerEnd, openOnAdd, children, }: DialogShellProps): import("react").JSX.Element;

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,59 @@
+import "classnames";
+import "react";
+import "react/jsx-runtime";
+//#region src/graph/editorPrimitives.tsx
+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);
+}
+//#endregion
+export { trackDrag };