@parallelworks/ui 0.4.0 → 0.5.1

package/dist/chunks/{Provider-uUHgWOWc.js → Provider-wC9G01Ou.js}

@@ -1,10 +1,11 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useMemo } from "react";
 //#region src/components/Provider.tsx
-var DefaultLink = ({ to, onClick, className, children }) => /* @__PURE__ */ jsx("a", {
+var DefaultLink = ({ to, onClick, className, children, ...rest }) => /* @__PURE__ */ jsx("a", {
 	href: to,
 	onClick,
 	className,
+	...rest,
 	children
 });
 /** The provider's link slot, with a plain anchor fallback. */
@@ -28,11 +29,27 @@ var DEFAULTS = {
 	},
 	strings: {
 		loading: "Loading…",
+		modal: {
+			cancel: "Cancel",
+			close: "Close",
+			create: "Create",
+			creating: "Creating…",
+			addDescription: "Add description…",
+			advanced: "Advanced",
+			favorite: "Favorite",
+			favorited: "Favorited",
+			favoriteHintOn: "Your item will be favorited when it's created",
+			favoriteHintOff: "Favorite your item when it's created",
+			filter: "Filter",
+			noOptions: "No options available"
+		},
 		common: {
 			copy: "Copy",
 			copied: "Copied!",
 			copyFailed: "Failed to copy text to clipboard",
 			showHiddenFields: "Show hidden fields",
+			add: "Add",
+			create: "Create",
 			showHiddenFieldsHint: "Includes fields hidden by default because they're specific to each resource, such as name and group.",
 			jsonHasErrors: "JSON has errors, please fix before saving"
 		},
@@ -386,6 +403,10 @@ function UIProvider({ notify, strings, navigation, data, slots, children }) {
 		},
 		strings: {
 			loading: strings?.loading ?? DEFAULTS.strings.loading,
+			modal: {
+				...DEFAULTS.strings.modal,
+				...strings?.modal
+			},
 			common: {
 				...DEFAULTS.strings.common,
 				...strings?.common

package/dist/chunks/RowContextMenu-D3G3DPQk.js

@@ -0,0 +1,319 @@
+import { CheckIcon, ChevronRightIcon, ClipboardIcon, CopyIcon, IdCardIcon, KeyIcon, LinkIcon, MailIcon, MoreIcon, UserIcon } from "../icons.js";
+import { c as useStrings, i as useNotify, n as useLink } from "./Provider-wC9G01Ou.js";
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+//#region src/list/RowContextMenu.tsx
+/** Converts a single row action to a menu item: a `to` makes it a link, otherwise an action. */
+function toRowMenuItem(action) {
+	if (action.to) return {
+		kind: "link",
+		label: action.label,
+		icon: action.icon,
+		to: action.to,
+		destructive: action.destructive
+	};
+	return {
+		kind: "action",
+		label: action.label,
+		icon: action.icon,
+		onSelect: action.onSelect ?? (() => {}),
+		disabled: action.disabled,
+		destructive: action.destructive
+	};
+}
+/** Bridges a toolbar action (icon component, `onClick`/`href`) onto the shared
+* `RowAction` shape. Typed structurally so any toolbar action shape matching
+* these fields is assignable. */
+function toolbarActionToRowAction(action) {
+	const Icon = action.icon;
+	return {
+		key: action.key,
+		label: action.label,
+		icon: /* @__PURE__ */ jsx(Icon, {}),
+		onSelect: action.onClick,
+		to: action.href,
+		disabled: action.disabled,
+		destructive: action.key === "delete" || action.key === "destroy"
+	};
+}
+/** Assembles a row's context menu in the shared order: leading link(s) → middle
+* actions → extra items → Copy submenu → trailing (destructive) actions last. */
+function assembleRowMenu({ lead = [], actions, exclude, order, trailing = ["delete"], extra = [], copy }) {
+	const trailingSet = new Set(trailing);
+	const excludeSet = new Set(exclude);
+	let middle = actions.filter((a) => !trailingSet.has(a.key) && !excludeSet.has(a.key));
+	if (order) {
+		const byKey = new Map(middle.map((a) => [a.key, a]));
+		middle = order.map((key) => byKey.get(key)).filter((a) => a !== void 0);
+	}
+	const trailingItems = trailing.map((key) => actions.find((a) => a.key === key)).filter((a) => a !== void 0);
+	return [
+		...lead,
+		...middle.map(toRowMenuItem),
+		...extra,
+		...copy ? [copy] : [],
+		...trailingItems.map(toRowMenuItem)
+	];
+}
+function useRowMenu() {
+	const [menu, setMenu] = useState(null);
+	const onCloseRef = useRef(void 0);
+	return {
+		openMenu: useCallback((x, y, items, onClose) => {
+			if (items.length > 0) {
+				onCloseRef.current?.();
+				onCloseRef.current = onClose;
+				setMenu({
+					x,
+					y,
+					items
+				});
+			}
+		}, []),
+		contextMenu: /* @__PURE__ */ jsx(RowContextMenu, {
+			state: menu,
+			onClose: useCallback(() => {
+				onCloseRef.current?.();
+				onCloseRef.current = void 0;
+				setMenu(null);
+			}, [])
+		})
+	};
+}
+/** The full-screen menu overlay drops CSS :hover on the triggering row; wrap openMenu here to substitute a JS-driven `active` highlight. */
+function useRowMenuActive(openMenu) {
+	const [active, setActive] = useState(false);
+	return {
+		active,
+		openMenu: useCallback((x, y, items) => {
+			setActive(true);
+			openMenu(x, y, items, () => setActive(false));
+		}, [openMenu])
+	};
+}
+function rowContextMenuProps(openMenu, items) {
+	return { onContextMenu: (e) => {
+		e.preventDefault();
+		if (items.length > 0) e.stopPropagation();
+		openMenu(e.clientX, e.clientY, items);
+	} };
+}
+function RowContextMenu({ state, onClose }) {
+	const ref = useRef(null);
+	const [pos, setPos] = useState(null);
+	useLayoutEffect(() => {
+		if (!state || !ref.current) {
+			setPos(null);
+			return;
+		}
+		const { width, height } = ref.current.getBoundingClientRect();
+		const pad = 8;
+		const top = height > window.innerHeight - pad - state.y && state.y - height - pad >= 0 ? state.y - height : Math.min(state.y, window.innerHeight - height - pad);
+		setPos({
+			left: Math.max(pad, Math.min(state.x, window.innerWidth - width - pad)),
+			top: Math.max(pad, top)
+		});
+	}, [state]);
+	useEffect(() => {
+		if (!state) return;
+		const close = () => onClose();
+		const onKey = (e) => {
+			if (e.key === "Escape") onClose();
+		};
+		window.addEventListener("scroll", close, true);
+		window.addEventListener("resize", close);
+		window.addEventListener("keydown", onKey);
+		return () => {
+			window.removeEventListener("scroll", close, true);
+			window.removeEventListener("resize", close);
+			window.removeEventListener("keydown", onKey);
+		};
+	}, [state, onClose]);
+	if (!state) return null;
+	const side = (pos?.left ?? state.x) > window.innerWidth * .6 ? "left" : "right";
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		className: "fixed inset-0 z-50",
+		onClick: onClose,
+		onContextMenu: (e) => {
+			e.preventDefault();
+			if (ref.current?.contains(e.target)) {
+				onClose();
+				return;
+			}
+			const { clientX, clientY } = e;
+			const overlay = e.currentTarget;
+			overlay.style.pointerEvents = "none";
+			const under = document.elementFromPoint(clientX, clientY);
+			overlay.style.pointerEvents = "";
+			onClose();
+			under?.dispatchEvent(new MouseEvent("contextmenu", {
+				bubbles: true,
+				cancelable: true,
+				clientX,
+				clientY
+			}));
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			role: "menu",
+			className: "absolute min-w-44 rounded-lg border border-(--theme-border) bg-(--theme-panel-bg) py-1 shadow-lg backdrop-blur-xl",
+			style: {
+				left: pos?.left ?? state.x,
+				top: pos?.top ?? state.y,
+				visibility: pos ? "visible" : "hidden"
+			},
+			onClick: (e) => e.stopPropagation(),
+			children: /* @__PURE__ */ jsx(MenuItemList, {
+				items: state.items,
+				onClose,
+				side
+			})
+		})
+	}), document.body);
+}
+var MENU_ITEM_CLASSES = "flex w-full items-center gap-2.5 px-3 py-1.5 text-left text-[13px] hover:bg-(--theme-muted-panel-bg) transition-colors cursor-pointer [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0";
+function MenuItemList({ items, onClose, side }) {
+	return items.map((item, i) => item.kind === "divider" ? /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		className: "my-1 h-px bg-(--theme-border)"
+	}, `divider-${i}`) : /* @__PURE__ */ jsx(MenuRow, {
+		item,
+		onClose,
+		side
+	}, `${item.label}-${i}`));
+}
+function MenuRow({ item, onClose, side }) {
+	const Link = useLink();
+	const notify = useNotify();
+	const { list: t } = useStrings();
+	const [openSub, setOpenSub] = useState(false);
+	const closeTimer = useRef(void 0);
+	if (item.kind === "submenu") {
+		const open = () => {
+			clearTimeout(closeTimer.current);
+			setOpenSub(true);
+		};
+		const close = () => {
+			closeTimer.current = setTimeout(() => setOpenSub(false), 160);
+		};
+		return /* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			onMouseEnter: open,
+			onMouseLeave: close,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: cx(MENU_ITEM_CLASSES, "justify-between text-(--theme-app)"),
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-2.5",
+					children: [item.icon, item.label]
+				}), /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3 shrink-0 opacity-60" })]
+			}), openSub && /* @__PURE__ */ jsx("div", {
+				className: cx("absolute -top-1 z-10 min-w-44 rounded-lg border border-(--theme-border) bg-(--theme-panel-bg) py-1 shadow-lg", side === "left" ? "right-full" : "left-full"),
+				children: /* @__PURE__ */ jsx(MenuItemList, {
+					items: item.items,
+					onClose,
+					side
+				})
+			})]
+		});
+	}
+	if (item.kind === "link") return /* @__PURE__ */ jsxs(Link, {
+		to: item.to,
+		onClick: onClose,
+		className: cx(MENU_ITEM_CLASSES, item.destructive ? "text-red-500" : "text-(--theme-app)"),
+		children: [item.icon, item.label]
+	});
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		disabled: item.disabled,
+		onClick: () => {
+			if (item.copy) {
+				const { text, label } = item.copy;
+				navigator.clipboard?.writeText(text).then(() => notify.success(t.copied(label)), () => notify.error(t.couldntCopy(label)));
+			}
+			item.onSelect?.();
+			onClose();
+		},
+		className: cx(MENU_ITEM_CLASSES, item.destructive ? "text-red-500" : "text-(--theme-app)", item.disabled && "opacity-40 cursor-not-allowed hover:bg-transparent"),
+		children: [
+			item.icon,
+			item.label,
+			item.selected && /* @__PURE__ */ jsx(CheckIcon, { className: "ml-auto opacity-80" })
+		]
+	});
+}
+/** Builds the Copy submenu entries for whichever fields a row has, in stable
+* order. The menu itself performs the copy and notifies; `t` is an optional
+* host translator for the field labels (falls back to the provider defaults'
+* English). */
+function copySubmenu({ name, nameLabel, email, username, uid, id, url, extra, t }) {
+	const items = [
+		{
+			label: nameLabel ?? (t ? t("rowContextMenu.labelName") : "name"),
+			value: name,
+			icon: /* @__PURE__ */ jsx(CopyIcon, {})
+		},
+		{
+			label: t ? t("rowContextMenu.labelEmail") : "email",
+			value: email,
+			icon: /* @__PURE__ */ jsx(MailIcon, {})
+		},
+		{
+			label: t ? t("rowContextMenu.labelUsername") : "username",
+			value: username,
+			icon: /* @__PURE__ */ jsx(UserIcon, {})
+		},
+		{
+			label: t ? t("rowContextMenu.labelUid") : "UID",
+			value: uid === null || uid === void 0 ? null : String(uid),
+			icon: /* @__PURE__ */ jsx(KeyIcon, {})
+		},
+		{
+			label: t ? t("rowContextMenu.labelId") : "ID",
+			value: id,
+			icon: /* @__PURE__ */ jsx(IdCardIcon, {})
+		},
+		{
+			label: t ? t("rowContextMenu.labelUrl") : "URL",
+			value: url,
+			icon: /* @__PURE__ */ jsx(LinkIcon, {})
+		},
+		...(extra ?? []).map((e) => ({
+			label: e.label,
+			value: e.value,
+			icon: e.icon ?? /* @__PURE__ */ jsx(CopyIcon, {})
+		}))
+	].filter((f) => f.value).map((f) => ({
+		kind: "action",
+		label: t ? t("rowContextMenu.copy", { label: f.label }) : `Copy ${f.label}`,
+		icon: f.icon,
+		copy: {
+			text: f.value,
+			label: f.label
+		}
+	}));
+	return {
+		kind: "submenu",
+		label: t ? t("common.copy") : "Copy",
+		icon: /* @__PURE__ */ jsx(ClipboardIcon, {}),
+		items
+	};
+}
+/** Stays visible while active (menu open) so it doesn't vanish behind the overlay. */
+function MoreButton({ onOpen, active, className }) {
+	const { list: t } = useStrings();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": t.moreActions,
+		onClick: (e) => {
+			e.stopPropagation();
+			const r = e.currentTarget.getBoundingClientRect();
+			onOpen(r.right, r.bottom);
+		},
+		className: cx("rounded p-1 cursor-pointer text-(--theme-muted-text-color) transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) focus-visible:opacity-100", active ? "opacity-100" : "opacity-0 group-hover:opacity-100", className),
+		children: /* @__PURE__ */ jsx(MoreIcon, { className: "h-4 w-4" })
+	});
+}
+//#endregion
+export { toRowMenuItem as a, useRowMenuActive as c, rowContextMenuProps as i, assembleRowMenu as n, toolbarActionToRowAction as o, copySubmenu as r, useRowMenu as s, MoreButton as t };

package/dist/chunks/{SwitchToggle-BqD0dE-L.js → SwitchToggle-CkYT1isd.js}

@@ -1,5 +1,5 @@
 import { AngleDownIcon, AngleRightIcon, CaretDownIcon } from "../icons.js";
-import { c as useStrings } from "./Provider-uUHgWOWc.js";
+import { c as useStrings } from "./Provider-wC9G01Ou.js";
 import { n as TOOLTIP_ID } from "./Tooltip-WgbiC_nd.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/chunks/{Table-C5z6qWjM.js → Table-ByziK93x.js}

@@ -1,4 +1,4 @@
-import { t as Loader } from "./Loader-DQiZ75fa.js";
+import { t as Loader } from "./Loader-BXoXTZGc.js";
 import cx from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";

package/dist/chunks/{editor-CdQbKtYO.js → editor-DbDUZn8w.js}

@@ -1,15 +1,15 @@
 import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "../icons.js";
-import { c as useStrings, i as useNotify } from "./Provider-uUHgWOWc.js";
-import { t as Loader } from "./Loader-DQiZ75fa.js";
+import { c as useStrings, i as useNotify } from "./Provider-wC9G01Ou.js";
+import { t as Loader } from "./Loader-BXoXTZGc.js";
 import { t as SwitchToggleSmall } from "./SwitchToggleSmall-FcsaYSTs.js";
 import { c as FieldWrapper, n as flattenGroups, r as impureSetValueFromPath } from "./lib-DTgL8klR.js";
 import cx from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Suspense, lazy, useEffect, useMemo, useRef, useState } from "react";
+import { Suspense, lazy, useMemo, useRef, useState } from "react";
 import { convertToDynamicForm, parseStringsOfObj, parseStringsOfObjReady } from "@parallelworks/workflow-parser";
 import { useField, useFormikContext } from "formik";
 //#region src/editor/Editor.tsx
-var MonacoEditor = lazy(() => import("./Monaco-BEj--GTx.js"));
+var MonacoEditor = lazy(() => import("./Monaco-FlGHL7zR.js"));
 function Editor({ ...props }) {
 	return /* @__PURE__ */ jsx(Suspense, {
 		fallback: /* @__PURE__ */ jsx(Loader, { text: "Loading editor..." }),
@@ -333,40 +333,4 @@ function setupMonacoWorkers() {
 	window.MonacoEnvironment = monacoEnvironment;
 }
 //#endregion
-//#region src/editor/useCssIsDark.ts
-function readIsDark() {
-	const scheme = getComputedStyle(document.documentElement).colorScheme;
-	const dark = scheme.includes("dark");
-	if (dark !== scheme.includes("light")) return dark;
-	if (typeof window.matchMedia !== "function") return false;
-	return window.matchMedia("(prefers-color-scheme: dark)").matches;
-}
-/**
-* Follows the host's CSS color-scheme, the same signal the log viewer's
-* light-dark() palette uses — no provider API involved. For the rare concrete
-* pick (editor themes, image variants) the tokens cannot express.
-*/
-function useCssIsDark() {
-	const [isDark, setIsDark] = useState(readIsDark);
-	useEffect(() => {
-		const update = () => setIsDark(readIsDark());
-		const media = typeof window.matchMedia === "function" ? window.matchMedia("(prefers-color-scheme: dark)") : void 0;
-		media?.addEventListener("change", update);
-		const observer = new MutationObserver(update);
-		observer.observe(document.documentElement, {
-			attributes: true,
-			attributeFilter: [
-				"style",
-				"class",
-				"data-theme"
-			]
-		});
-		return () => {
-			media?.removeEventListener("change", update);
-			observer.disconnect();
-		};
-	}, []);
-	return isDark;
-}
-//#endregion
-export { FormCodePanel as a, getThemeName as i, setupMonacoWorkers as n, EditorField as o, defineEditorThemes as r, Editor as s, useCssIsDark as t };
+export { EditorField as a, FormCodePanel as i, defineEditorThemes as n, Editor as o, getThemeName as r, setupMonacoWorkers as t };