@parallelworks/ui 0.41.0 → 0.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parallelworks/ui",
-  "version": "0.41.0",
+  "version": "0.42.0",
   "description": "React UI components: a theme contract, icons, primitives, lists, forms, a job graph, a code editor, a log viewer, a file explorer and an AI chat, each on its own subpath",
   "license": "Apache-2.0",
   "repository": {
@@ -75,31 +75,25 @@
     "dist"
   ],
   "peerDependencies": {
-    "formik": "^2.4.9",
     "monaco-editor": "^0.57.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.90.0"
   },
   "dependencies": {
-    "@headlessui/react": "^2.2.10",
+    "@base-ui/react": "^1.9.0",
     "@streamdown/code": "^2.0.0",
     "@streamdown/math": "^1.0.3",
     "@streamdown/mermaid": "^1.0.3",
     "@tanstack/react-virtual": "^3.14.13",
     "@types/luxon": "^3.7.6",
     "anser": "^2.3.5",
-    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
     "css-tree": "^3.2.1",
-    "fast-deep-equal": "^3.1.3",
-    "framer-motion": "^14.0.0",
+    "dequal": "^2.0.3",
     "luxon": "^3.7.2",
     "re-resizable": "^6.11.2",
-    "react-animate-height": "^3.2.4",
     "react-icons": "5.7.0",
-    "react-loading-skeleton": "^3.5.0",
-    "react-number-format": "^5.4.5",
-    "react-popper": "^2.3.0",
-    "react-tooltip": "^6.0.8",
     "react-zoom-pan-pinch": "^4.2.0",
     "shiki": "^4.5.0",
     "streamdown": "^2.7.0",
@@ -120,7 +114,6 @@
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "@vitejs/plugin-react": "^6.1.1",
-    "formik": "^2.4.9",
     "jsdom": "^30.1.1",
     "monaco-editor": "^0.57.0",
     "path-browserify": "^1.0.1",
@@ -128,6 +121,7 @@
     "publint": "^0.3.25",
     "react": "19.3.0",
     "react-dom": "19.3.0",
+    "react-hook-form": "^7.90.0",
     "storybook": "10.6.1",
     "tailwindcss": "^4.3.3",
     "typescript": "^7.0.2",

package/dist/ai/ui/Dropdown.d.ts

@@ -1,31 +0,0 @@
-import { type ReactNode } from 'react';
-export interface DropdownOption {
-    label: string;
-    value: string;
-    /** A second line under the label, for choices that need explaining. */
-    description?: string;
-    /** Rendered as a plain option; the trailing checkmark and bold never apply. */
-    muted?: boolean;
-}
-interface DropdownProps {
-    options: DropdownOption[];
-    value: string;
-    onChange: (value: string) => void;
-    placeholder?: string;
-    disabled?: boolean;
-    /** 'bare' drops the input background and text colour, for a trigger that
-     *  reads as a chip or as toolbar text. */
-    variant?: 'default' | 'bare';
-    /** Leading content in the trigger, before the label. */
-    icon?: ReactNode;
-    /** Shown in the trigger instead of the selected option's label. */
-    valueLabel?: string;
-    ariaLabel?: string;
-    /** Tooltip on the closed trigger. */
-    hint?: string;
-    wrapperClassName?: string;
-    textBoxClassName?: string;
-    listClassName?: string;
-}
-export default function Dropdown({ options, value, onChange, placeholder, disabled, variant, icon, valueLabel, ariaLabel, hint, wrapperClassName, textBoxClassName, listClassName, }: DropdownProps): import("react").JSX.Element;
-export {};

package/dist/ai/ui/Dropdown.js

@@ -1,110 +0,0 @@
-import { FaChevronDown } from "../../icons/fa/FaChevronDown.js";
-import { TOOLTIP_ID } from "../../components/Tooltip.js";
-import cx from "classnames";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { createPortal } from "react-dom";
-//#region src/ai/ui/Dropdown.tsx
-/** Matches the list's max-h-60, so the flip decision matches what renders. */
-var MAX_LIST_HEIGHT_PX = 240;
-function Dropdown({ options, value, onChange, placeholder = "", disabled = false, variant = "default", icon, valueLabel, ariaLabel, hint, wrapperClassName, textBoxClassName, listClassName }) {
-	const [open, setOpen] = useState(false);
-	const wrapperRef = useRef(null);
-	const listRef = useRef(null);
-	const [position, setPosition] = useState({
-		top: 0,
-		bottom: 0,
-		left: 0,
-		width: 0,
-		flipped: false
-	});
-	const updatePosition = useCallback(() => {
-		const rect = wrapperRef.current?.getBoundingClientRect();
-		if (!rect) return;
-		const below = window.innerHeight - rect.bottom;
-		const flipped = below < MAX_LIST_HEIGHT_PX && rect.top > below;
-		setPosition({
-			top: rect.bottom + 4,
-			bottom: window.innerHeight - rect.top + 4,
-			left: rect.left,
-			width: rect.width,
-			flipped
-		});
-	}, []);
-	useEffect(() => {
-		if (!open) return;
-		updatePosition();
-		const onPointerDown = (e) => {
-			const target = e.target;
-			if (!wrapperRef.current?.contains(target) && !listRef.current?.contains(target)) setOpen(false);
-		};
-		const onKey = (e) => {
-			if (e.key === "Escape") setOpen(false);
-		};
-		window.addEventListener("mousedown", onPointerDown);
-		window.addEventListener("keydown", onKey);
-		window.addEventListener("scroll", updatePosition, true);
-		window.addEventListener("resize", updatePosition);
-		return () => {
-			window.removeEventListener("mousedown", onPointerDown);
-			window.removeEventListener("keydown", onKey);
-			window.removeEventListener("scroll", updatePosition, true);
-			window.removeEventListener("resize", updatePosition);
-		};
-	}, [open, updatePosition]);
-	const selected = options.find((o) => o.value === value);
-	const shown = valueLabel ?? selected?.label;
-	const tooltip = hint && !open ? {
-		"data-tooltip-id": TOOLTIP_ID,
-		"data-tooltip-content": hint
-	} : {};
-	return /* @__PURE__ */ jsxs("div", {
-		ref: wrapperRef,
-		className: cx("relative", wrapperClassName),
-		children: [/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			disabled,
-			onClick: () => setOpen((o) => !o),
-			"aria-haspopup": "listbox",
-			"aria-expanded": open,
-			"aria-label": ariaLabel,
-			...tooltip,
-			className: cx("flex items-center justify-between gap-2 cursor-pointer", variant === "default" && "bg-(--theme-input-bg,#f9fafb) text-(--theme-input,#000000)", "disabled:opacity-50 disabled:cursor-not-allowed", textBoxClassName || "text-sm border border-(--theme-border,#d1d5db) rounded px-2 py-1.5 w-full"),
-			children: [
-				icon,
-				/* @__PURE__ */ jsx("span", {
-					className: cx("truncate", !shown && "text-(--theme-muted-text-color,#6c757d)"),
-					children: shown || placeholder
-				}),
-				/* @__PURE__ */ jsx(FaChevronDown, { className: "h-3 w-3 shrink-0 opacity-60" })
-			]
-		}), open && createPortal(/* @__PURE__ */ jsx("ul", {
-			ref: listRef,
-			style: {
-				position: "fixed",
-				...position.flipped ? { bottom: position.bottom } : { top: position.top },
-				left: position.left,
-				minWidth: position.width,
-				zIndex: 300
-			},
-			className: cx("max-h-60 overflow-auto rounded-md border border-(--theme-border,#e5e7eb) bg-(--theme-panel-bg,#ffffff) py-1 shadow-lg", listClassName),
-			children: options.map((option) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
-				type: "button",
-				onClick: () => {
-					onChange(option.value);
-					setOpen(false);
-				},
-				className: cx("w-full cursor-pointer px-3 py-1.5 text-left text-sm hover:bg-(--theme-hover,#f3f4f6)", option.muted ? "text-(--theme-muted-text-color,#6c757d)" : "text-(--theme-panel,#000000)", option.value === value && !option.muted && "font-semibold"),
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "block truncate",
-					children: option.label
-				}), option.description && /* @__PURE__ */ jsx("span", {
-					className: "mt-0.5 block text-xs font-normal leading-snug text-(--theme-muted-text-color,#6c757d)",
-					children: option.description
-				})]
-			}) }, option.value))
-		}), document.body)]
-	});
-}
-//#endregion
-export { Dropdown as default };

package/dist/components/AddMenu.d.ts

@@ -1,18 +0,0 @@
-import type { ReactNode } from 'react';
-export interface HeaderAddMenuItem {
-    label: string;
-    icon?: ReactNode;
-    to?: string;
-    onSelect?: () => void;
-    disabled?: boolean;
-    hint?: string | undefined;
-    separatorAbove?: boolean;
-}
-export declare function AddMenu({ items, label, buttonClassName, zClassName, children, }: {
-    items: HeaderAddMenuItem[];
-    label: string;
-    buttonClassName?: string;
-    /** Raise above modals when needed (e.g. z-[9999]). */
-    zClassName?: string;
-    children: ReactNode;
-}): import("react").JSX.Element;

package/dist/components/AddMenu.js

@@ -1,46 +0,0 @@
-import { useLink } from "./Provider.js";
-import { TOOLTIP_ID } from "./Tooltip.js";
-import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
-import cx from "classnames";
-import { Fragment } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/AddMenu.tsx
-var addMenuItemClasses = "flex w-full items-center gap-2 px-3 py-1.5 text-[13px] text-(--theme-app) data-[focus]:bg-(--theme-muted-panel-bg) cursor-pointer";
-function itemButtonProps(item) {
-	if (!item.disabled) return { onClick: item.onSelect };
-	return {
-		"aria-disabled": true,
-		...item.hint ? {
-			"aria-label": `${item.label}. ${item.hint}`,
-			"data-tooltip-id": TOOLTIP_ID,
-			"data-tooltip-content": item.hint
-		} : {}
-	};
-}
-function AddMenu({ items, label, buttonClassName, zClassName = "z-50", children }) {
-	const Link = useLink();
-	return /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuButton, {
-		"aria-label": label,
-		title: label,
-		className: buttonClassName,
-		children
-	}), /* @__PURE__ */ jsx(MenuItems, {
-		anchor: "bottom start",
-		className: cx("mt-1 min-w-52 rounded-lg border border-(--theme-border) bg-(--theme-app-bg) py-1 shadow-lg focus:outline-none", zClassName),
-		children: items.map((item) => /* @__PURE__ */ jsxs(Fragment, { children: [item.separatorAbove && /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-(--theme-border)" }), /* @__PURE__ */ jsx(MenuItem, {
-			disabled: item.disabled ?? false,
-			children: item.to && !item.disabled ? /* @__PURE__ */ jsxs(Link, {
-				to: item.to,
-				className: addMenuItemClasses,
-				children: [item.icon, item.label]
-			}) : /* @__PURE__ */ jsxs("button", {
-				type: "button",
-				...itemButtonProps(item),
-				className: cx(addMenuItemClasses, item.disabled && "opacity-50 cursor-not-allowed"),
-				children: [item.icon, item.label]
-			})
-		})] }, item.label))
-	})] });
-}
-//#endregion
-export { AddMenu };

package/dist/components/BareModal.d.ts

@@ -1,17 +0,0 @@
-import type { KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent, ReactNode } from 'react';
-/** Omit when the content supplies its own panel styling. */
-export declare const modalPanelClasses = "rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-2xl";
-export declare function BareModal({ open, onClose, ariaLabel, className, onPanelKeyDown, onPanelMouseDown, align, preventClose, children, }: {
-    open: boolean;
-    onClose: () => void;
-    ariaLabel?: string;
-    className?: string;
-    onPanelKeyDown?: (e: ReactKeyboardEvent<HTMLDivElement>) => void;
-    onPanelMouseDown?: (e: ReactMouseEvent<HTMLDivElement>) => void;
-    /** Vertical placement of the panel. Defaults to the ds top-anchored position. */
-    align?: 'top' | 'center';
-    /** Block the accidental-dismiss paths (backdrop click, Escape) so typed
-     * input isn't lost. The explicit close controls still work. */
-    preventClose?: boolean;
-    children: ReactNode;
-}): import("react").ReactPortal | null;

package/dist/components/BareModal.js

@@ -1,77 +0,0 @@
-import cx from "classnames";
-import { useCallback, useEffect, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
-import { createPortal } from "react-dom";
-//#region src/components/BareModal.tsx
-/** Omit when the content supplies its own panel styling. */
-var modalPanelClasses = "rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-2xl";
-var FOCUSABLE = "a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex=\"-1\"])";
-function BareModal({ open, onClose, ariaLabel, className, onPanelKeyDown, onPanelMouseDown, align = "top", preventClose = false, children }) {
-	const panelRef = useRef(null);
-	useEffect(() => {
-		if (!open || preventClose) return;
-		const onKeyDown = (e) => {
-			if (e.key === "Escape") onClose();
-		};
-		document.addEventListener("keydown", onKeyDown);
-		return () => document.removeEventListener("keydown", onKeyDown);
-	}, [
-		open,
-		onClose,
-		preventClose
-	]);
-	useEffect(() => {
-		if (!open) return;
-		const previouslyFocused = document.activeElement;
-		const previousOverflow = document.body.style.overflow;
-		document.body.style.overflow = "hidden";
-		return () => {
-			document.body.style.overflow = previousOverflow;
-			previouslyFocused?.focus?.();
-		};
-	}, [open]);
-	const trapFocus = useCallback((e) => {
-		const panel = panelRef.current;
-		if (e.key !== "Tab" || !panel || !panel.contains(document.activeElement)) {
-			onPanelKeyDown?.(e);
-			return;
-		}
-		const focusable = panel.querySelectorAll(FOCUSABLE);
-		const first = focusable[0];
-		const last = focusable[focusable.length - 1];
-		if (!first || !last) {
-			e.preventDefault();
-			onPanelKeyDown?.(e);
-			return;
-		}
-		if (e.shiftKey && document.activeElement === first) {
-			e.preventDefault();
-			last.focus();
-		} else if (!e.shiftKey && document.activeElement === last) {
-			e.preventDefault();
-			first.focus();
-		}
-		onPanelKeyDown?.(e);
-	}, [onPanelKeyDown]);
-	if (!open) return null;
-	return createPortal(/* @__PURE__ */ jsx("div", {
-		"data-testid": "modal-backdrop",
-		role: "none",
-		className: cx("fixed inset-0 z-[9990] flex justify-center px-4 pb-8", align === "center" ? "items-center" : "items-start pt-[14vh]"),
-		style: { backgroundColor: "rgba(0, 0, 0, 0.4)" },
-		onClick: preventClose ? void 0 : onClose,
-		children: /* @__PURE__ */ jsx("div", {
-			ref: panelRef,
-			role: "dialog",
-			"aria-modal": "true",
-			"aria-label": ariaLabel,
-			className,
-			onClick: (e) => e.stopPropagation(),
-			onKeyDown: trapFocus,
-			onMouseDown: onPanelMouseDown,
-			children
-		})
-	}), document.body);
-}
-//#endregion
-export { BareModal, modalPanelClasses };

package/dist/components/CollapsiblePanel.d.ts

@@ -1,27 +0,0 @@
-import React from 'react';
-interface IControlledCollapsiblePanelProps {
-    title?: string | React.ReactNode | ((open: boolean, setOpen: React.Dispatch<React.SetStateAction<boolean>>) => React.ReactNode);
-    children: React.ReactNode;
-    open: boolean | undefined;
-    setOpen?: React.Dispatch<React.SetStateAction<boolean>>;
-    onClick?: (() => void) | undefined;
-    wrapperElement?: React.ElementType | undefined;
-    customizedButton?: React.ReactNode;
-    /** Rendered right after the title, outside the toggle button. */
-    titleAction?: React.ReactNode;
-    className?: string | undefined;
-}
-export declare function ControlledCollapsiblePanel({ title, children, open, setOpen, onClick, wrapperElement, customizedButton, titleAction, className, }: IControlledCollapsiblePanelProps): React.JSX.Element;
-export declare function UncontrolledCollapsiblePanel({ title, children, onClick, wrapperElement, initialState, className, customizedButton, titleAction, }: Omit<IControlledCollapsiblePanelProps, 'setOpen' | 'open'> & {
-    initialState?: boolean | undefined;
-}): React.JSX.Element;
-type MaybeCollapsibleProps = {
-    className?: string;
-    initialState?: boolean;
-    children: React.ReactNode;
-    title?: React.ReactNode;
-    customizedButton?: React.ReactNode;
-    collapsible?: boolean | undefined;
-};
-export declare function MaybeCollapsible({ className, initialState, children, title, customizedButton, collapsible, }: MaybeCollapsibleProps): React.JSX.Element;
-export {};

package/dist/components/CollapsiblePanel.js

@@ -1,77 +0,0 @@
-import { FaAngleRight } from "../icons/fa/FaAngleRight.js";
-import cx from "classnames";
-import React, { useCallback } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import AnimateHeight from "react-animate-height";
-//#region src/components/CollapsiblePanel.tsx
-function ControlledCollapsiblePanel({ title = "", children, open, setOpen, onClick, wrapperElement, customizedButton = null, titleAction, className }) {
-	const toggleOpen = useCallback(() => {
-		onClick?.();
-		setOpen?.((open) => !open);
-	}, [setOpen, onClick]);
-	const contentId = React.useId();
-	const Wrapper = wrapperElement ?? React.Fragment;
-	return React.isValidElement(title) ? /* @__PURE__ */ jsxs(Fragment$1, { children: [title, /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(AnimateHeight, {
-		duration: 300,
-		height: open ? "auto" : 0,
-		children
-	}) })] }) : /* @__PURE__ */ jsxs("div", {
-		className: cx("border border-solid rounded-2xl border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-panel) mb-1 w-full", className),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: cx(!open && "text-(--theme-muted-text-color)", "w-full flex items-center transform ease-in transition text-sm py-3 px-2 cursor-pointer"),
-			children: [
-				/* @__PURE__ */ jsxs("button", {
-					type: "button",
-					"aria-expanded": !!open,
-					"aria-controls": contentId,
-					className: cx("flex items-center text-left cursor-pointer", !titleAction && "w-full"),
-					onClick: toggleOpen,
-					children: [/* @__PURE__ */ jsx(FaAngleRight, { className: cx(open && "transform rotate-90", "px-1 ml-1 text-[1.25rem] transition ease-in") }), /* @__PURE__ */ jsx("span", {
-						className: "px-2 font-bold select-none",
-						children: title?.toString()
-					})]
-				}),
-				titleAction,
-				/* @__PURE__ */ jsx("div", {
-					className: "ml-auto",
-					children: customizedButton
-				})
-			]
-		}), /* @__PURE__ */ jsx(AnimateHeight, {
-			id: contentId,
-			duration: 300,
-			height: open ? "auto" : 0,
-			children
-		})]
-	});
-}
-function UncontrolledCollapsiblePanel({ title, children, onClick, wrapperElement, initialState = true, className, customizedButton = null, titleAction }) {
-	const [open, setOpen] = React.useState(initialState);
-	const passTitle = typeof title === "function" ? title(open, setOpen) : title;
-	return /* @__PURE__ */ jsx(ControlledCollapsiblePanel, {
-		title: passTitle,
-		open,
-		setOpen,
-		onClick,
-		wrapperElement,
-		className,
-		customizedButton,
-		titleAction,
-		children
-	});
-}
-function MaybeCollapsible({ className, initialState, children, title, customizedButton, collapsible }) {
-	if (collapsible) return /* @__PURE__ */ jsx(UncontrolledCollapsiblePanel, {
-		className,
-		initialState,
-		title,
-		customizedButton,
-		children
-	});
-	return /* @__PURE__ */ jsx("div", {
-		className,
-		children
-	});
-}
-//#endregion
-export { ControlledCollapsiblePanel, MaybeCollapsible, UncontrolledCollapsiblePanel };

package/dist/components/Dropdown.d.ts

@@ -1,28 +0,0 @@
-import { type SetStateAction } from 'react';
-import { type ICategory, type IOptions } from './dropdownUtils.js';
-export interface IProps {
-    options: (ICategory | IOptions | string)[];
-    onActiveChange?: (option: unknown) => void;
-    onChange: React.Dispatch<SetStateAction<unknown>>;
-    value: IOptions | string | Record<string, unknown>;
-    id?: string | undefined;
-    ariaLabel?: string | undefined;
-    'aria-describedby'?: string | undefined;
-    required?: boolean | undefined;
-    className?: string;
-    wrapperClassName?: string;
-    textBoxClassName?: string;
-    disabled?: boolean;
-    placeholder?: string | undefined;
-    loading?: boolean;
-    allowCustomValue?: boolean;
-    customValueLabel?: string | undefined;
-    /** Label for the toggle row hiding a category's collapsible options. */
-    collapsedLabel?: (count: number) => string;
-    portalEl?: HTMLElement;
-    /** Smaller option rows and text, for dense toolbars. */
-    compact?: boolean | undefined;
-    /** False hides the caret, for a field that has nothing to pick from yet. */
-    showCaret?: boolean | undefined;
-}
-export default function Dropdown(props: IProps): import("react").JSX.Element;