@parallelworks/ui 0.19.0 → 0.20.0

package/dist/components/Listbox.js

@@ -0,0 +1,123 @@
+import { useStrings } from "./Provider.js";
+import { AngleDownIcon } from "../icons.js";
+import { keyedByContent } from "./keys.js";
+import { focusOnMount } from "./focus.js";
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from "@headlessui/react";
+import cx from "classnames";
+import { useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Listbox.tsx
+function CustomListbox({ options = [], handleOptionSelected, type, allowSearch = false, closeOnSelect = true, className = "", invalid = false, required = false, id, "aria-describedby": describedBy }) {
+	const { dropdown: strings } = useStrings();
+	const [filter, setFilter] = useState("");
+	const [controlledOpen, setControlledOpen] = useState(false);
+	const optionsToShow = options.filter((option) => !option.selected && option.label && option.label.toLowerCase().includes(filter.toLowerCase()));
+	function useOutsideAlerter(ref) {
+		useEffect(() => {
+			function handleClickOutside(event) {
+				if (ref.current && event.target instanceof Node && !ref.current.contains(event.target)) {
+					setControlledOpen(false);
+					setFilter("");
+				}
+			}
+			document.addEventListener("mousedown", handleClickOutside);
+			return () => {
+				document.removeEventListener("mousedown", handleClickOutside);
+			};
+		}, [ref]);
+	}
+	const wrapperRef = useRef(null);
+	useOutsideAlerter(wrapperRef);
+	const optionsElement = /* @__PURE__ */ jsxs(ListboxOptions, {
+		modal: false,
+		static: true,
+		className: "absolute w-full py-1 z-50 theme-input rounded-md",
+		children: [allowSearch && /* @__PURE__ */ jsx("div", {
+			className: "pl-2 pr-4 mb-1",
+			children: /* @__PURE__ */ jsx("input", {
+				autoComplete: "off",
+				type: "search",
+				ref: focusOnMount,
+				onChange: (e) => setFilter(e.target.value),
+				value: filter,
+				className: "w-full p-1 theme-input",
+				onKeyDown: (e) => {
+					if (![
+						"ArrowUp",
+						"ArrowDown",
+						"Enter",
+						"Home",
+						"End",
+						"Escape"
+					].includes(e.key)) e.stopPropagation();
+				}
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "overflow-auto max-h-60 theme-panel",
+			children: optionsToShow.length > 0 ? keyedByContent(optionsToShow, (o) => String(o.value)).map(({ key, item: option }) => /* @__PURE__ */ jsx(ListboxOption, {
+				className: "relative hover:theme-hover select-none pl-2 pr-4",
+				value: option.value,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "w-full flex flex-row",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "w-3/4 py-2 flex items-center",
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: "w-4 h-6 btn btn-info text-xl line-height-0 mr-2",
+								children: "+"
+							}),
+							option.icon && /* @__PURE__ */ jsx("span", {
+								className: "mr-2 flex items-center",
+								children: option.icon
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "mr-2",
+								children: option.label
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "italic",
+								children: option.secondaryLabel
+							})
+						]
+					})
+				})
+			}, key)) : /* @__PURE__ */ jsx("div", {
+				className: "w-full flex flex-row",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "w-3/4 py-2 pl-2 capitalize flex items-center",
+					children: filter === "" ? `All ${type} Added` : `No ${type} Found`
+				})
+			})
+		})]
+	});
+	return /* @__PURE__ */ jsxs(Listbox, {
+		as: "div",
+		className: cx("relative mt-1 theme-input border theme-border rounded-md", className),
+		ref: wrapperRef,
+		onChange: handleOptionSelected,
+		children: [/* @__PURE__ */ jsxs(ListboxButton, {
+			id,
+			"aria-describedby": describedBy,
+			"aria-required": required || void 0,
+			onClick: () => setControlledOpen((prev) => !prev),
+			className: cx("relative w-full py-2 pl-3 text-left", invalid && "border-red-600 focus:border-red-600 focus:ring-red-500"),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "block truncate",
+				children: strings.select(type)
+			}), /* @__PURE__ */ jsx("span", {
+				className: "pointer-events-none absolute inset-y-0 right-0 flex items-center justify-items-center",
+				children: /* @__PURE__ */ jsx(AngleDownIcon, {
+					className: "h-5 w-8",
+					"aria-hidden": "true"
+				})
+			})]
+		}), closeOnSelect ? /* @__PURE__ */ jsx(Transition, {
+			leave: "transition ease-in duration-100",
+			leaveFrom: "opacity-100",
+			leaveTo: "opacity-0",
+			children: optionsElement || null
+		}) : /* @__PURE__ */ jsx(Fragment$1, { children: controlledOpen && optionsElement })]
+	});
+}
+//#endregion
+export { CustomListbox as default };

package/dist/{chunks/Loader-BXoXTZGc.js → components/Loader.js}

@@ -44,4 +44,4 @@ function Loader({ size = 48, text, textSize = 12, full = true, color = "", loade
 	});
 }
 //#endregion
-export { Loader as t };
+export { Loader as default };

package/dist/components/Markdown.js

@@ -0,0 +1,15 @@
+import { Suspense, lazy } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Markdown.tsx
+var MarkdownImpl = lazy(() => import("./MarkdownImpl.js"));
+function Markdown(props) {
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx("div", {
+			className: "markdown whitespace-pre-wrap text-start w-full",
+			children: props.children
+		}),
+		children: /* @__PURE__ */ jsx(MarkdownImpl, { ...props })
+	});
+}
+//#endregion
+export { Markdown as default };

package/dist/components/MultiSelect.js

@@ -0,0 +1,171 @@
+import { useStrings } from "./Provider.js";
+import { keyedByContent } from "./keys.js";
+import { DropdownCaret, filterOption, flattenOptions, isCategory, isOption } from "./dropdownUtils.js";
+import { focusOnMount } from "./focus.js";
+import { Combobox, ComboboxButton, ComboboxOption, ComboboxOptions } from "@headlessui/react";
+import cx from "classnames";
+import { useCallback, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { usePopper } from "react-popper";
+//#region src/components/MultiSelect.tsx
+function MultiSelectDropdown({ options, value, onChange, id, "aria-labelledby": labelledBy, "aria-describedby": describedBy, required, className, wrapperClassName = "w-full", textBoxClassName, disabled = false, placeholder, loading = false, searchable = true, maxTagCount = 2, compareBy }) {
+	const strings = useStrings();
+	const [query, setQuery] = useState("");
+	const [referenceEl, setReferenceEl] = useState(null);
+	const [popperEl, setPopperEl] = useState(null);
+	const { styles, attributes } = usePopper(referenceEl, popperEl, {
+		placement: "bottom-start",
+		modifiers: [{
+			name: "offset",
+			options: { offset: [0, 4] }
+		}]
+	});
+	const allOptions = useMemo(() => flattenOptions(options), [options]);
+	const compare = compareBy ?? ((a, b) => a === b);
+	const selectedOptions = useMemo(() => {
+		const result = [];
+		for (const val of value) {
+			const found = allOptions.find((opt) => isOption(opt) && compare(opt.value, val));
+			if (found) result.push(found);
+		}
+		return result;
+	}, [
+		value,
+		allOptions,
+		compare
+	]);
+	const filteredOptions = useMemo(() => {
+		if (!searchable || query.trim() === "") return allOptions;
+		const result = [];
+		for (const opt of allOptions) if (isCategory(opt)) {
+			const matchedChildren = (Array.isArray(opt.options) ? opt.options : []).filter((o) => filterOption(o, query));
+			if (matchedChildren.length > 0) result.push(opt, ...matchedChildren);
+		} else if (isOption(opt) && filterOption(opt, query)) result.push(opt);
+		return result;
+	}, [
+		allOptions,
+		query,
+		searchable
+	]);
+	const display = useMemo(() => {
+		const shown = selectedOptions.slice(0, maxTagCount);
+		return {
+			label: shown.map((o) => o.label).join(", "),
+			overflow: selectedOptions.length - shown.length
+		};
+	}, [selectedOptions, maxTagCount]);
+	const handleChange = useCallback((newValues) => {
+		if (!Array.isArray(newValues)) return;
+		onChange(newValues);
+	}, [onChange]);
+	const isDisabled = disabled || loading;
+	const isEmpty = filteredOptions.length === 0;
+	return /* @__PURE__ */ jsx(Combobox, {
+		multiple: true,
+		value: Array.isArray(value) ? value : [],
+		onChange: handleChange,
+		disabled: isDisabled,
+		onClose: () => setQuery(""),
+		by: compare,
+		children: ({ open }) => /* @__PURE__ */ jsxs("div", {
+			ref: setReferenceEl,
+			className: cx("relative", wrapperClassName),
+			children: [
+				/* @__PURE__ */ jsx(ComboboxButton, {
+					as: "div",
+					id,
+					"aria-labelledby": labelledBy,
+					"aria-describedby": describedBy,
+					"aria-required": required || void 0,
+					className: cx("theme-input flex items-center cursor-pointer rounded border text-[14px] w-full px-2 pr-8 py-1 min-h-[30px] overflow-hidden", isDisabled && "opacity-50 cursor-not-allowed", textBoxClassName, className),
+					children: loading ? /* @__PURE__ */ jsx("span", {
+						className: "theme-muted-text",
+						children: strings.loading
+					}) : selectedOptions.length > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 truncate",
+						children: display.label
+					}), display.overflow > 0 && /* @__PURE__ */ jsxs("span", {
+						className: "ml-1 shrink-0 theme-muted-text",
+						children: ["+", display.overflow]
+					})] }) : /* @__PURE__ */ jsx("span", {
+						className: "theme-muted-text truncate",
+						children: placeholder
+					})
+				}),
+				/* @__PURE__ */ jsx(DropdownCaret, {}),
+				open && /* @__PURE__ */ jsxs(ComboboxOptions, {
+					modal: false,
+					ref: setPopperEl,
+					static: true,
+					"data-testid": "msd-list",
+					style: styles["popper"],
+					...attributes["popper"],
+					className: "theme-panel z-10 max-h-60 w-full overflow-auto rounded-md shadow-lg focus:outline-none",
+					children: [searchable && /* @__PURE__ */ jsx("div", {
+						className: "sticky top-0 theme-panel p-2 border-b z-10",
+						children: /* @__PURE__ */ jsx("input", {
+							placeholder,
+							"data-1p-ignore": true,
+							autoComplete: "off",
+							type: "text",
+							className: "theme-input w-full",
+							value: query,
+							onChange: (e) => setQuery(e.target.value),
+							onKeyDown: (e) => e.stopPropagation(),
+							ref: focusOnMount
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						className: "py-1",
+						children: isEmpty ? /* @__PURE__ */ jsx("div", {
+							className: "px-4 py-2 text-sm theme-muted-text",
+							children: strings.dropdown.noOptionsFound
+						}) : keyedByContent(filteredOptions, (o) => isCategory(o) ? `category-${o.category ?? "uncat"}` : `option-${String(o.value)}`).map(({ key, item: opt }) => {
+							if (isCategory(opt)) return /* @__PURE__ */ jsx("li", {
+								role: "presentation",
+								className: "px-4 py-2 text-sm font-bold theme-muted-text",
+								children: opt.category
+							}, key);
+							const option = opt;
+							return /* @__PURE__ */ jsx(ComboboxOption, {
+								value: option.value,
+								disabled: option.disabled ?? false,
+								"data-testid": `msd-option-${String(option.value)}`,
+								className: ({ focus }) => cx("relative cursor-pointer select-none py-2 pl-10 pr-4 text-sm", focus && "theme-hover", option.disabled && "cursor-not-allowed opacity-50"),
+								children: ({ selected }) => /* @__PURE__ */ jsxs("div", {
+									className: "flex items-center",
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											className: "absolute inset-y-0 left-0 flex items-center pl-3",
+											children: /* @__PURE__ */ jsx("input", {
+												autoComplete: "off",
+												type: "checkbox",
+												checked: selected,
+												readOnly: true,
+												tabIndex: -1,
+												className: "h-4 w-4 cursor-pointer",
+												"aria-hidden": "true"
+											})
+										}),
+										option.icon && /* @__PURE__ */ jsx("span", {
+											className: "mr-2 flex items-center",
+											children: option.icon
+										}),
+										/* @__PURE__ */ jsx("div", {
+											className: "flex flex-col",
+											children: /* @__PURE__ */ jsx("span", {
+												className: "block truncate",
+												children: option.label
+											})
+										})
+									]
+								})
+							}, key);
+						})
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { MultiSelectDropdown as default };

package/dist/components/Overview.js

@@ -0,0 +1,39 @@
+import cx from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Skeleton from "react-loading-skeleton";
+//#region src/components/Overview.tsx
+function Overview({ Icon, name, type, children, right, className, loading, iconSize = 75 }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("flex items-center w-full", className),
+		children: [
+			loading ? /* @__PURE__ */ jsx(Skeleton, {
+				width: iconSize,
+				height: iconSize,
+				circle: true
+			}) : Icon,
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-col min-w-0 flex-1",
+				children: loading ? /* @__PURE__ */ jsx(Skeleton, {
+					count: 2,
+					height: 12
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "font-semibold text-xl tracking-tight",
+						children: name
+					}),
+					type && /* @__PURE__ */ jsx("p", { children: type }),
+					/* @__PURE__ */ jsx("div", {
+						className: "flex flex-row gap-x-2",
+						children
+					})
+				] })
+			}),
+			right && /* @__PURE__ */ jsx("div", {
+				className: "shrink-0 self-center",
+				children: right
+			})
+		]
+	});
+}
+//#endregion
+export { Overview };

package/dist/components/PageHeader.js

@@ -0,0 +1,194 @@
+import { useLink, useSlots, useStrings } from "./Provider.js";
+import { AddIcon, ChevronRightIcon, EditIcon, MoreIcon } from "../icons.js";
+import { keyedByContent } from "./keys.js";
+import { TOOLTIP_ID } from "./Tooltip.js";
+import { AddMenu } from "./AddMenu.js";
+import { useBreadcrumb } from "./Breadcrumbs.js";
+import { useRowMenu } from "../list/RowContextMenu.js";
+import cx from "classnames";
+import { Fragment, useLayoutEffect } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/components/PageHeader.tsx
+var headerActionButtonClasses = "flex items-center justify-center w-6 h-6 rounded-md shrink-0 cursor-pointer text-(--theme-muted-text-color) hover:text-(--theme-app) hover:bg-(--theme-muted-panel-bg) transition-colors";
+var headerAddButtonClasses = "inline-flex h-[26px] shrink-0 items-center gap-1.5 rounded-md border border-(--theme-border) px-2 text-xs font-medium cursor-pointer text-(--theme-muted-text-color) hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) transition-colors";
+/** With menu, the plus opens a chooser; otherwise navigates to or calls the
+* single action. `word` is the visible verb; `label` stays the full action for
+* the tooltip and screen readers. */
+function HeaderAddButton({ to, onClick, label, word = "add", menu, disabled = false, disabledHint }) {
+	const { common } = useStrings();
+	const Link = useLink();
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AddIcon, { className: "w-3 h-3" }), /* @__PURE__ */ jsx("span", { children: word === "create" ? common.create : common.add })] });
+	if (menu) return /* @__PURE__ */ jsx(AddMenu, {
+		items: menu,
+		label,
+		buttonClassName: headerAddButtonClasses,
+		children: content
+	});
+	if (to) return /* @__PURE__ */ jsx(Link, {
+		to,
+		"aria-label": label,
+		title: label,
+		className: headerAddButtonClasses,
+		children: content
+	});
+	const hint = disabled ? disabledHint : void 0;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: disabled ? void 0 : onClick,
+		"aria-label": hint ? `${label}. ${hint}` : label,
+		"aria-disabled": disabled || void 0,
+		...hint ? {
+			"data-tooltip-id": TOOLTIP_ID,
+			"data-tooltip-content": hint
+		} : { title: label },
+		className: cx(headerAddButtonClasses, "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:hover:bg-transparent aria-disabled:hover:text-(--theme-muted-text-color)"),
+		children: content
+	});
+}
+function HeaderActionMenu({ items, label = "Actions" }) {
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx(AddMenu, {
+		items,
+		label,
+		buttonClassName: headerActionButtonClasses,
+		children: /* @__PURE__ */ jsx(MoreIcon, { className: "w-3.5 h-3.5" })
+	});
+}
+/** The header "…" trigger for a RowMenuItem menu — same rendering (submenus,
+* destructive styling) as the list pages' right-click context menus. */
+function HeaderRowMenu({ items, label = "Actions" }) {
+	const { openMenu, contextMenu } = useRowMenu();
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": label,
+		title: label,
+		className: headerActionButtonClasses,
+		onClick: (e) => {
+			const r = e.currentTarget.getBoundingClientRect();
+			openMenu(r.left, r.bottom + 4, items);
+		},
+		children: /* @__PURE__ */ jsx(MoreIcon, { className: "w-3.5 h-3.5" })
+	}), contextMenu] });
+}
+function HeaderEditButton({ to, onClick, label = "Edit", disabled, tooltip }) {
+	const Link = useLink();
+	const tooltipProps = tooltip ? {
+		"data-tooltip-id": TOOLTIP_ID,
+		"data-tooltip-content": tooltip
+	} : {};
+	if (to && !disabled) return /* @__PURE__ */ jsx(Link, {
+		to,
+		"aria-label": label,
+		...tooltip ? {} : { title: label },
+		className: headerActionButtonClasses,
+		...tooltipProps,
+		children: /* @__PURE__ */ jsx(EditIcon, { className: "w-3 h-3" })
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		disabled,
+		"aria-label": label,
+		title: tooltip ? void 0 : label,
+		className: cx(headerActionButtonClasses, disabled && "opacity-50 cursor-not-allowed hover:bg-transparent"),
+		...tooltipProps,
+		children: /* @__PURE__ */ jsx(EditIcon, { className: "w-3 h-3" })
+	});
+}
+/** Renders nothing when the modern breadcrumb strip isn't mounted (classic chrome or self-headered pages). */
+function BreadcrumbsTitleAction({ children }) {
+	const { titleActionSlot } = useBreadcrumb();
+	if (!titleActionSlot) return null;
+	return createPortal(children, titleActionSlot);
+}
+function BreadcrumbsRightAction({ children }) {
+	const { rightActionSlot } = useBreadcrumb();
+	if (!rightActionSlot) return null;
+	return createPortal(children, rightActionSlot);
+}
+var breadcrumbsActionClasses = "flex items-center gap-1 link text-xs whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed";
+function BreadcrumbsActionButton({ icon: Icon, label, ariaLabel, to, onClick, disabled, tooltip }) {
+	const Link = useLink();
+	const tip = tooltip ? {
+		"data-tooltip-id": TOOLTIP_ID,
+		"data-tooltip-content": tooltip
+	} : {};
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Icon, { className: "w-3 h-3" }), label] });
+	if (to && !disabled) return /* @__PURE__ */ jsx(Link, {
+		to,
+		className: breadcrumbsActionClasses,
+		...ariaLabel ? { "aria-label": ariaLabel } : {},
+		...tip,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		disabled,
+		className: breadcrumbsActionClasses,
+		...ariaLabel ? { "aria-label": ariaLabel } : {},
+		...tip,
+		children: content
+	});
+}
+function PageHeader({ breadcrumbs, title, titleAction, actions, toolbar, className, sticky = true, stickyTopClassName = "top-0" }) {
+	const { setHidden } = useBreadcrumb();
+	const Link = useLink();
+	const { breadcrumbPin, navToggle } = useSlots();
+	useLayoutEffect(() => {
+		setHidden(true);
+		return () => setHidden(false);
+	}, [setHidden]);
+	const crumbs = [...breadcrumbs ?? []];
+	const lastLabel = crumbs[crumbs.length - 1]?.label;
+	if (title !== null && title !== void 0 && title !== lastLabel) crumbs.push({ label: title });
+	const crumbRow = crumbs.length > 0 && /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1.5 min-w-0",
+		children: [
+			/* @__PURE__ */ jsx("nav", {
+				"aria-label": "Breadcrumb",
+				className: "flex items-center gap-2 min-w-0 text-[13px]",
+				children: keyedByContent(crumbs, (c) => c.href ?? (typeof c.label === "string" ? c.label : "crumb")).map(({ key, item: crumb }, idx) => {
+					if (idx === crumbs.length - 1) return /* @__PURE__ */ jsx("h1", {
+						className: "m-0 text-[13px] font-medium leading-none text-(--theme-app) truncate",
+						children: crumb.label
+					}, key);
+					return /* @__PURE__ */ jsxs(Fragment, { children: [crumb.href ? /* @__PURE__ */ jsx(Link, {
+						to: crumb.href,
+						className: "text-(--theme-muted-text-color) hover:text-(--theme-app) transition-colors cursor-pointer whitespace-nowrap",
+						children: crumb.label
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "text-(--theme-muted-text-color) whitespace-nowrap",
+						children: crumb.label
+					}), /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-3 h-3 opacity-60 shrink-0 text-(--theme-muted-text-color)" })] }, key);
+				})
+			}),
+			titleAction,
+			breadcrumbPin?.({ crumbs })
+		]
+	});
+	const actionCluster = actions && /* @__PURE__ */ jsx("div", {
+		className: "flex items-center gap-1.5 shrink-0",
+		children: actions
+	});
+	const toggle = navToggle?.();
+	const hasLeading = !!crumbRow || !!toggle;
+	const leading = hasLeading ? /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2 min-w-0",
+		children: [toggle, crumbRow]
+	}) : /* @__PURE__ */ jsx("div", {});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(sticky && cx("sticky z-20", stickyTopClassName), "w-full bg-(--theme-app-bg)", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx("flex items-center justify-between gap-6 px-4 h-11", hasLeading && "border-b border-(--theme-border)"),
+			children: [leading, actionCluster]
+		}), toolbar && /* @__PURE__ */ jsx("div", {
+			className: "px-4",
+			children: toolbar
+		})]
+	});
+}
+//#endregion
+export { BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction, HeaderActionMenu, HeaderAddButton, HeaderEditButton, HeaderRowMenu, PageHeader, headerActionButtonClasses };

package/dist/components/Pagination.js

@@ -0,0 +1,35 @@
+import { useStrings } from "./Provider.js";
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Pagination.tsx
+function Pagination({ endingNumber, endingTime, nextCallback, prevCallback, roundedBottom, startingNumber, startingTime, nextDisabled, prevDisabled, name, useTimeRange = false }) {
+	const t = useStrings().list;
+	return /* @__PURE__ */ jsxs("nav", {
+		className: cx(roundedBottom && "rounded-b-2xl", "theme-muted-panel flex items-center justify-between border-t theme-border  px-4 py-1 sm:px-6"),
+		"aria-label": "Pagination",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cx("hidden", (startingNumber !== void 0 && startingNumber !== null && endingNumber !== void 0 && endingNumber !== null || startingTime && endingTime) && "sm:block"),
+			children: /* @__PURE__ */ jsx("p", {
+				className: "text-sm whitespace-nowrap",
+				children: useTimeRange && startingTime && endingTime ? t.paginationShowingTimeRange(name ?? "", startingTime, endingTime) : t.paginationShowing(name ?? "", startingNumber ?? "", endingNumber ?? "")
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-1 justify-between sm:justify-end gap-x-2",
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled: prevDisabled,
+				onClick: prevCallback,
+				className: cx("link text-sm", prevDisabled && "disabled"),
+				children: t.paginationPrevious
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled: nextDisabled,
+				onClick: nextCallback,
+				className: cx("link text-sm", nextDisabled && "disabled"),
+				children: t.paginationNext
+			})]
+		})]
+	});
+}
+//#endregion
+export { Pagination };

package/dist/{chunks/Provider-CDYurraE.js → components/Provider.js}

@@ -1,9 +1,10 @@
+import { safeUrl } from "../safeUrl.js";
 import { createContext, use, useCallback, useContext, useEffect, useMemo } from "react";
 import { useLocalStorage } from "usehooks-ts";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Provider.tsx
 var DefaultLink = ({ to, onClick, className, children, ...rest }) => /* @__PURE__ */ jsx("a", {
-	href: to,
+	href: safeUrl(to),
 	onClick,
 	className,
 	...rest,
@@ -399,11 +400,18 @@ var DEFAULTS = {
 		}
 	},
 	navigation: {
-		goTo: (to) => window.location.assign(to),
+		goTo: (to) => {
+			const url = safeUrl(to);
+			if (url) window.location.assign(url);
+		},
 		openStepSource: (_uses, sourceUrl) => {
-			if (sourceUrl) window.open(sourceUrl, "_blank");
+			const url = safeUrl(sourceUrl);
+			if (url) window.open(url, "_blank");
 		},
-		openExternal: (href) => window.open(href, "_blank")
+		openExternal: (href) => {
+			const url = safeUrl(href);
+			if (url) window.open(url, "_blank");
+		}
 	},
 	data: {
 		useRunFile: defaultUseRunFile,
@@ -548,4 +556,4 @@ function UIProvider({ notify, strings, navigation, data, slots, engine, children
 	});
 }
 //#endregion
-export { useOptionalWorkflowEngine as a, useRunFile as c, useWorkflowEngine as d, useWorkflowEngineLoader as f, useNotify as i, useSlots as l, useLink as n, usePersistedState as o, useNavigation as r, useProvisionCorsRules as s, UIProvider as t, useStrings as u };
+export { UIProvider, useLink, useNavigation, useNotify, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRunFile, useSlots, useStrings, useWorkflowEngine, useWorkflowEngineLoader };

package/dist/{chunks/RequiredMark-DfLdYbYZ.js → components/RequiredMark.js}

@@ -8,4 +8,4 @@ function RequiredMark() {
 	});
 }
 //#endregion
-export { RequiredMark as t };
+export { RequiredMark };

package/dist/components/SectionHeader.js

@@ -0,0 +1,11 @@
+import cx from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/SectionHeader.tsx
+function SectionHeader({ children, className = "", size = "md" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("w-full font-semibold", size === "sm" ? "mb-2 text-sm theme-text" : "text-lg", className),
+		children
+	});
+}
+//#endregion
+export { SectionHeader as default };