@parallelworks/ui 0.40.1 → 0.42.0

package/dist/list/UserHoverCard.js

@@ -1,31 +1,11 @@
-import { useLink, useNotify, useStrings } from "../components/Provider.js";
 import { FiCopy } from "../icons/fi/FiCopy.js";
-import "../components/Tooltip.js";
+import { Tooltip } from "../components/Tooltip.js";
+import { useLink, useNotify, useStrings } from "../components/Provider.js";
 import { Avatar } from "../components/Avatar.js";
-import { HoverCardSurface, useHoverCard } from "./HoverCard.js";
-import cx from "classnames";
+import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/list/UserHoverCard.tsx
-/** Opens `card` after a short hover or on focus of `children`. */
-function HoverCardTrigger({ className, children, card }) {
-	const { triggerRef, coords, scheduleOpen, scheduleClose, keepOpen } = useHoverCard();
-	return /* @__PURE__ */ jsxs("span", {
-		ref: triggerRef,
-		role: "none",
-		className,
-		onMouseEnter: scheduleOpen,
-		onMouseLeave: scheduleClose,
-		onFocus: scheduleOpen,
-		onBlur: scheduleClose,
-		children: [children, coords && card({
-			x: coords.x,
-			y: coords.y,
-			onKeepOpen: keepOpen,
-			onLeave: scheduleClose
-		})]
-	});
-}
-function UserHoverCard({ x, y, onKeepOpen, onLeave, username, name, avatarSrc, badge, href, linkComponent, loading = false, relayoutKey, children }) {
+function UserHoverCard({ username, name, avatarSrc, badge, href, linkComponent, loading = false, children }) {
 	const strings = useStrings();
 	const notify = useNotify();
 	const SlotLink = useLink();
@@ -56,30 +36,26 @@ function UserHoverCard({ x, y, onKeepOpen, onLeave, username, name, avatarSrc, b
 	const t = strings.list;
 	const copyLabel = EMAIL.test(username) ? t.labelEmail : t.labelUsername;
 	const onCopy = () => navigator.clipboard?.writeText(username).then(() => notify.success(t.copied(copyLabel)), () => notify.error(t.couldntCopy(copyLabel)));
-	return /* @__PURE__ */ jsxs(HoverCardSurface, {
-		x,
-		y,
-		widthClassName: "w-64",
-		relayoutKey,
-		onKeepOpen,
-		onLeave,
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-64 p-3",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "group/copy flex items-end gap-1",
 			children: [href ? /* @__PURE__ */ jsx(Link, {
-				to: href,
+				href,
 				className: "flex min-w-0 flex-1 items-start gap-3 transition-opacity hover:opacity-80",
 				children: header
 			}) : /* @__PURE__ */ jsx("div", {
 				className: "flex min-w-0 flex-1 items-start gap-3",
 				children: header
-			}), username && /* @__PURE__ */ jsx("button", {
-				type: "button",
-				"aria-label": t.copy(copyLabel),
-				"data-tooltip-id": "global-tooltip",
-				"data-tooltip-content": t.copy(copyLabel),
-				onClick: onCopy,
-				className: cx("shrink-0 cursor-pointer rounded p-0.5 text-(--theme-muted-text-color) opacity-0 transition hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) [&>svg]:h-3.5 [&>svg]:w-3.5", "hover:opacity-100 group-has-[[data-copy-value]:hover]/copy:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--theme-link) pointer-coarse:opacity-100"),
-				children: /* @__PURE__ */ jsx(FiCopy, { "aria-hidden": "true" })
+			}), username && /* @__PURE__ */ jsx(Tooltip, {
+				content: t.copy(copyLabel),
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": t.copy(copyLabel),
+					onClick: onCopy,
+					className: clsx("shrink-0 cursor-pointer rounded p-0.5 text-(--theme-muted-text-color) opacity-0 transition hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) [&>svg]:h-3.5 [&>svg]:w-3.5", "hover:opacity-100 group-has-[[data-copy-value]:hover]/copy:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--theme-link) pointer-coarse:opacity-100"),
+					children: /* @__PURE__ */ jsx(FiCopy, { "aria-hidden": "true" })
+				})
 			})]
 		}), loading ? /* @__PURE__ */ jsxs("div", {
 			role: "status",
@@ -112,10 +88,10 @@ var rowClasses = "flex gap-2 text-(--theme-muted-text-color)";
 function HoverCardRow({ icon, children, title, align = "center", truncate = false, onClick }) {
 	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
-		className: cx("flex shrink-0 items-center [&>svg]:h-3.5 [&>svg]:w-3.5", align === "start" && "mt-0.5"),
+		className: clsx("flex shrink-0 items-center [&>svg]:h-3.5 [&>svg]:w-3.5", align === "start" && "mt-0.5"),
 		children: icon
 	}), /* @__PURE__ */ jsx("span", {
-		className: cx("min-w-0", truncate && "truncate"),
+		className: clsx("min-w-0", truncate && "truncate"),
 		children
 	})] });
 	const alignClass = align === "start" ? "items-start" : "items-center";
@@ -123,14 +99,14 @@ function HoverCardRow({ icon, children, title, align = "center", truncate = fals
 		type: "button",
 		title,
 		onClick,
-		className: cx(rowClasses, alignClass, "-mx-1 max-w-full rounded px-1 py-0.5 text-left transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app)"),
+		className: clsx(rowClasses, alignClass, "-mx-1 max-w-full rounded px-1 py-0.5 text-left transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app)"),
 		children: content
 	});
 	return /* @__PURE__ */ jsx("div", {
 		title,
-		className: cx(rowClasses, alignClass),
+		className: clsx(rowClasses, alignClass),
 		children: content
 	});
 }
 //#endregion
-export { HoverCardRow, HoverCardTrigger, UserHoverCard };
+export { HoverCardRow, UserHoverCard };

package/dist/list/index.d.ts

@@ -1,11 +1,10 @@
 export { ActionToolbar, stickyTabsClasses, stickyTabsUnderHeaderClasses, stickyToolbarClasses, type ToolbarAction, ToolbarButton, type ToolbarItem, } from './ActionToolbar.js';
-export { HoverCardSurface, useHoverCard } from './HoverCard.js';
-export { ListColumns, ListPage, type ListPageProps, ListRow, ListRowActionsProvider, type ListSection, type PinnedRowAction, useListNavigate, } from './ListPage.js';
+export { ListColumns, ListPage, type ListPageProps, ListRow, ListRowActionsProvider, type ListSection, useListNavigate, } from './ListPage.js';
 export { LIST_PAGE_SIZES, ListPager } from './ListPager.js';
 export { actionsColumnWidth, GroupRow, ListActionsHeader, ListError, ListSkeleton, listTableFixedProps, listTableProps, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, } from './ListTable.js';
 export { AnchoredPopover, ListDisplayMenu, ListFilterMenu, listControlButtonClasses, } from './ListViewControls.js';
 export { ListCount, type ListSearch, ListSearchControl, useListSearch, } from './listSearch.js';
 export { type ActionDef, type ColumnDef, DEFAULT_ORDER, FAVORITE_ORDER, type FilterFacet, type ListView, type ListViewChrome, type ListViewConfig, type OrderByOption, useListView, } from './listView.js';
-export { assembleRowMenu, type CopyFields, type CopySubmenu, MoreButton, type OpenMenu, type RowAction, type RowMenuItem, rowContextMenuProps, toolbarActionToRowAction, toRowMenuItem, useCopySubmenu, useRowMenu, useRowMenuActive, } from './RowContextMenu.js';
+export { assembleRowMenu, type CopyFields, type CopySubmenu, MoreButton, type RowAction, rowContextMenuProps, useCopySubmenu, useRowMenuActive, } from './rowMenu.js';
 export { isTextEntryContext } from './textEntry.js';
-export { type HoverCardPlacement, HoverCardRow, HoverCardTrigger, UserHoverCard, type UserHoverCardProps, } from './UserHoverCard.js';
+export { HoverCardRow, UserHoverCard, type UserHoverCardProps, } from './UserHoverCard.js';

package/dist/list/index.js

@@ -1,12 +1,11 @@
-import { MoreButton, assembleRowMenu, rowContextMenuProps, toRowMenuItem, toolbarActionToRowAction, useCopySubmenu, useRowMenu, useRowMenuActive } from "./RowContextMenu.js";
 import { ActionToolbar, ToolbarButton, stickyTabsClasses, stickyTabsUnderHeaderClasses, stickyToolbarClasses } from "./ActionToolbar.js";
-import { HoverCardSurface, useHoverCard } from "./HoverCard.js";
 import { GroupRow, ListActionsHeader, ListError, ListSkeleton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, actionsColumnWidth, listTableFixedProps, listTableProps } from "./ListTable.js";
+import { MoreButton, assembleRowMenu, rowContextMenuProps, useCopySubmenu, useRowMenuActive } from "./rowMenu.js";
 import { ListColumns, ListPage, ListRow, ListRowActionsProvider, useListNavigate } from "./ListPage.js";
 import { isTextEntryContext } from "./textEntry.js";
 import { AnchoredPopover, ListDisplayMenu, ListFilterMenu, listControlButtonClasses } from "./ListViewControls.js";
 import { LIST_PAGE_SIZES, ListPager } from "./ListPager.js";
 import { ListCount, ListSearchControl, useListSearch } from "./listSearch.js";
 import { DEFAULT_ORDER, FAVORITE_ORDER, useListView } from "./listView.js";
-import { HoverCardRow, HoverCardTrigger, UserHoverCard } from "./UserHoverCard.js";
-export { ActionToolbar, AnchoredPopover, DEFAULT_ORDER, FAVORITE_ORDER, GroupRow, HoverCardRow, HoverCardSurface, HoverCardTrigger, LIST_PAGE_SIZES, ListActionsHeader, ListColumns, ListCount, ListDisplayMenu, ListError, ListFilterMenu, ListPage, ListPager, ListRow, ListRowActionsProvider, ListSearchControl, ListSkeleton, MoreButton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, ToolbarButton, UserHoverCard, actionsColumnWidth, assembleRowMenu, isTextEntryContext, listControlButtonClasses, listTableFixedProps, listTableProps, rowContextMenuProps, stickyTabsClasses, stickyTabsUnderHeaderClasses, stickyToolbarClasses, toRowMenuItem, toolbarActionToRowAction, useCopySubmenu, useHoverCard, useListNavigate, useListSearch, useListView, useRowMenu, useRowMenuActive };
+import { HoverCardRow, UserHoverCard } from "./UserHoverCard.js";
+export { ActionToolbar, AnchoredPopover, DEFAULT_ORDER, FAVORITE_ORDER, GroupRow, HoverCardRow, LIST_PAGE_SIZES, ListActionsHeader, ListColumns, ListCount, ListDisplayMenu, ListError, ListFilterMenu, ListPage, ListPager, ListRow, ListRowActionsProvider, ListSearchControl, ListSkeleton, MoreButton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, ToolbarButton, UserHoverCard, actionsColumnWidth, assembleRowMenu, isTextEntryContext, listControlButtonClasses, listTableFixedProps, listTableProps, rowContextMenuProps, stickyTabsClasses, stickyTabsUnderHeaderClasses, stickyToolbarClasses, useCopySubmenu, useListNavigate, useListSearch, useListView, useRowMenuActive };

package/dist/list/listSearch.js

@@ -1,11 +1,11 @@
 import { FaSearch } from "../icons/fa/FaSearch.js";
 import { FiX } from "../icons/fi/FiX.js";
-import { TOOLTIP_ID } from "../components/Tooltip.js";
+import { Tooltip } from "../components/Tooltip.js";
 import { isTextEntryContext } from "./textEntry.js";
 import { listControlButtonClasses } from "./ListViewControls.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useLocalStorage } from "usehooks-ts";
-import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/list/listSearch.tsx
 var NO_TERMS = [];
 /** Pass `enabled: false` to suspend the global ⌘F/`/` hijack (e.g. when search isn't shown and browser Find should stay active). */
@@ -114,15 +114,16 @@ function ListSearchControl({ search, placeholder, label = "Search" }) {
 			})
 		]
 	});
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		onClick: search.openSearch,
-		"aria-label": label,
-		"data-tooltip-id": TOOLTIP_ID,
-		"data-tooltip-content": label,
-		"data-tooltip-shortcut": "⌘+F",
-		className: listControlButtonClasses,
-		children: /* @__PURE__ */ jsx(FaSearch, { className: "w-3.5 h-3.5" })
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: label,
+		shortcut: "⌘+F",
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: search.openSearch,
+			"aria-label": label,
+			className: listControlButtonClasses,
+			children: /* @__PURE__ */ jsx(FaSearch, { className: "w-3.5 h-3.5" })
+		})
 	});
 }
 function ListCount({ total, matches, filterActive, noun, nounPlural }) {

package/dist/list/rowMenu.d.ts

@@ -0,0 +1,63 @@
+import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
+import type { OpenMenu } from '../components/ContextMenu.js';
+import type { MenuAction, MenuEntry, MenuSubmenu } from '../components/MenuEntries.js';
+/** An action on a row, which its menu lists and its pinned buttons show, named by `key`. */
+export interface RowAction extends MenuAction {
+    key: string;
+}
+/** Assembles a row's context menu in the shared order: leading link(s) → middle
+ * actions → extra items → Copy submenu → trailing (destructive) actions last. */
+export declare function assembleRowMenu({ lead, actions, exclude, order, trailing, extra, copy, }: {
+    /** Pre-built leading link(s), e.g. "View details". */
+    lead?: MenuEntry[];
+    /** The row's full action list. */
+    actions: RowAction[];
+    /** Keys already rendered in `lead`/`extra`; dropped from the middle. */
+    exclude?: string[];
+    /** Explicit middle order; keys absent from `actions` are skipped, keys absent from `order` are dropped. */
+    order?: string[];
+    /** Keys rendered last, in this order (default `['delete']`). */
+    trailing?: string[];
+    /** Items inserted after the middle actions and before Copy, e.g. a marketplace link. */
+    extra?: MenuEntry[];
+    /** The Copy submenu from `useCopySubmenu()`. */
+    copy?: MenuSubmenu | undefined;
+}): MenuEntry[];
+/** The pointer leaves a row for its menu, dropping CSS :hover; wrap openMenu here
+ *  for an `active` flag that keeps the row lit while its menu is open. */
+export declare function useRowMenuActive(openMenu: OpenMenu): {
+    active: boolean;
+    openMenu: OpenMenu;
+};
+/** Opens the row's menu on a right-click. Pass a function to build a large
+ *  list's menus only when one opens, not on every render. */
+export declare function rowContextMenuProps(openMenu: OpenMenu, entries: MenuEntry[] | (() => MenuEntry[])): {
+    onContextMenu: (e: ReactMouseEvent) => void;
+};
+export interface CopyFields {
+    name?: string | null | undefined;
+    /** Overrides the "name" label (raw, pre-translated) for entities whose primary field isn't a name, e.g. "domain". */
+    nameLabel?: string;
+    email?: string | null | undefined;
+    username?: string | null | undefined;
+    uid?: string | number | null | undefined;
+    id?: string | null | undefined;
+    url?: string | null | undefined;
+    extra?: {
+        label: string;
+        value?: string | null | undefined;
+        icon?: ReactNode;
+    }[] | undefined;
+}
+export type CopySubmenu = (fields: CopyFields) => MenuSubmenu;
+/** Returns a builder for the Copy submenu, labeled from the provider's strings. */
+export declare function useCopySubmenu(): CopySubmenu;
+/** Opens a row's menu under itself. Shows on the row's hover or focus, and
+ *  stays while its menu is `open`, though the pointer has left the row. */
+export declare function MoreButton({ onOpen, open, visible, className, }: {
+    onOpen: (button: HTMLElement) => void;
+    open?: boolean;
+    /** Shows at rest too. */
+    visible?: boolean;
+    className?: string | undefined;
+}): import("react").JSX.Element;

package/dist/list/rowMenu.js

@@ -0,0 +1,134 @@
+import { BsThreeDots } from "../icons/bs/BsThreeDots.js";
+import { FaKey } from "../icons/fa/FaKey.js";
+import { FaLink } from "../icons/fa/FaLink.js";
+import { FaUser } from "../icons/fa/FaUser.js";
+import { FiCopy } from "../icons/fi/FiCopy.js";
+import { HiOutlineClipboardCopy } from "../icons/hi/HiOutlineClipboardCopy.js";
+import { LuIdCard } from "../icons/lu/LuIdCard.js";
+import { LuMail } from "../icons/lu/LuMail.js";
+import { useStrings } from "../components/Provider.js";
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+//#region src/list/rowMenu.tsx
+/** 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,
+		...extra,
+		...copy ? [copy] : [],
+		...trailingItems
+	];
+}
+/** The pointer leaves a row for its menu, dropping CSS :hover; wrap openMenu here
+*  for an `active` flag that keeps the row lit while its menu is open. */
+function useRowMenuActive(openMenu) {
+	const [active, setActive] = useState(false);
+	return {
+		active,
+		openMenu: useCallback((at, items, options) => {
+			setActive(true);
+			openMenu(at, items, {
+				...options,
+				onClose: () => {
+					setActive(false);
+					options?.onClose?.();
+				}
+			});
+		}, [openMenu])
+	};
+}
+/** Opens the row's menu on a right-click. Pass a function to build a large
+*  list's menus only when one opens, not on every render. */
+function rowContextMenuProps(openMenu, entries) {
+	return { onContextMenu: (e) => {
+		const items = typeof entries === "function" ? entries() : entries;
+		e.preventDefault();
+		if (items.length > 0) e.stopPropagation();
+		openMenu(e, items);
+	} };
+}
+/** Returns a builder for the Copy submenu, labeled from the provider's strings. */
+function useCopySubmenu() {
+	const { list: t } = useStrings();
+	return useCallback(({ name, nameLabel, email, username, uid, id, url, extra }) => {
+		const fields = [
+			{
+				label: nameLabel ?? t.labelName,
+				value: name,
+				icon: /* @__PURE__ */ jsx(FiCopy, {})
+			},
+			{
+				label: t.labelEmail,
+				value: email,
+				icon: /* @__PURE__ */ jsx(LuMail, {})
+			},
+			{
+				label: t.labelUsername,
+				value: username,
+				icon: /* @__PURE__ */ jsx(FaUser, {})
+			},
+			{
+				label: t.labelUid,
+				value: uid === null || uid === void 0 ? null : String(uid),
+				icon: /* @__PURE__ */ jsx(FaKey, {})
+			},
+			{
+				label: t.labelId,
+				value: id,
+				icon: /* @__PURE__ */ jsx(LuIdCard, {})
+			},
+			{
+				label: t.labelUrl,
+				value: url,
+				icon: /* @__PURE__ */ jsx(FaLink, {})
+			},
+			...(extra ?? []).map((e) => ({
+				label: e.label,
+				value: e.value,
+				icon: e.icon ?? /* @__PURE__ */ jsx(FiCopy, {})
+			}))
+		];
+		return {
+			label: t.copyMenu,
+			icon: /* @__PURE__ */ jsx(HiOutlineClipboardCopy, {}),
+			items: fields.flatMap(({ label, value, icon }) => value ? [{
+				label: t.copy(label),
+				icon,
+				copy: {
+					text: value,
+					label
+				}
+			}] : [])
+		};
+	}, [t]);
+}
+/** Opens a row's menu under itself. Shows on the row's hover or focus, and
+*  stays while its menu is `open`, though the pointer has left the row. */
+function MoreButton({ onOpen, open = false, visible = open, className }) {
+	const { list: t } = useStrings();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": t.moreActions,
+		"aria-haspopup": "menu",
+		"aria-expanded": open,
+		onClick: (e) => {
+			e.stopPropagation();
+			onOpen(e.currentTarget);
+		},
+		className: clsx("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", visible ? "opacity-100" : "opacity-0 group-hover:opacity-100", className),
+		children: /* @__PURE__ */ jsx(BsThreeDots, { className: "h-4 w-4" })
+	});
+}
+//#endregion
+export { MoreButton, assembleRowMenu, rowContextMenuProps, useCopySubmenu, useRowMenuActive };

package/dist/logviewer/LogViewer.js

@@ -1,4 +1,3 @@
-import { useNotify, useOptionalWorkflowEngine, useStrings } from "../components/Provider.js";
 import { FaArrowDown } from "../icons/fa/FaArrowDown.js";
 import { FaArrowUp } from "../icons/fa/FaArrowUp.js";
 import { FaCheck } from "../icons/fa/FaCheck.js";
@@ -10,21 +9,22 @@ import { FiClock } from "../icons/fi/FiClock.js";
 import { FiCopy } from "../icons/fi/FiCopy.js";
 import { FiX } from "../icons/fi/FiX.js";
 import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
-import { TooltipInfo } from "../components/Tooltip.js";
+import { useNotify, useOptionalWorkflowEngine, useStrings } from "../components/Provider.js";
+import { InfoTip } from "../components/InfoTip.js";
 import { highlightSegments, parseAnsiSegments, plainSegments } from "./segments.js";
-import cx from "classnames";
-import { Fragment, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { DateTime } from "luxon";
 //#region src/logviewer/LogViewer.tsx
 function LogSegments({ segments }) {
 	return segments.map((segment, i) => segment.highlighted ? /* @__PURE__ */ jsx("mark", {
-		className: cx("search-highlight", segment.className),
+		className: clsx("search-highlight", segment.className),
 		children: segment.content
 	}, i) : segment.className ? /* @__PURE__ */ jsx("span", {
 		className: segment.className,
 		children: segment.content
-	}, i) : /* @__PURE__ */ jsx(Fragment, { children: segment.content }, i));
+	}, i) : /* @__PURE__ */ jsx(Fragment$1, { children: segment.content }, i));
 }
 var LogLine = memo(function LogLine({ index, segments, lineNumbers, isSelected, lineHeight, onLineClick, searchTerm, command, groupDepth = 0, isGroupCollapsed, onGroupToggle, annotationLabels }) {
 	const displaySegments = useMemo(() => highlightSegments(command?.message ? plainSegments(command.message) : segments, searchTerm), [
@@ -67,7 +67,7 @@ var LogLine = memo(function LogLine({ index, segments, lineNumbers, isSelected,
 	return /* @__PURE__ */ jsxs("div", {
 		"data-line-number": index + 1,
 		...groupToggleProps,
-		className: cx("flex items-start text-sm font-mono group", isSelected ? "bg-(--theme-link)/15" : "hover:bg-(--theme-hover)", "text-(--theme-app)", command?.type === "error" && "bg-red-500/10", command?.type === "warning" && "bg-yellow-500/10", command?.type === "notice" && "bg-blue-500/10", command?.type === "debug" && "opacity-60", command?.type === "group" && "bg-(--theme-hover) cursor-pointer"),
+		className: clsx("flex items-start text-sm font-mono group", isSelected ? "bg-(--theme-link)/15" : "hover:bg-(--theme-hover)", "text-(--theme-app)", command?.type === "error" && "bg-red-500/10", command?.type === "warning" && "bg-yellow-500/10", command?.type === "notice" && "bg-blue-500/10", command?.type === "debug" && "opacity-60", command?.type === "group" && "bg-(--theme-hover) cursor-pointer"),
 		style: {
 			minHeight: `${lineHeight}px`,
 			lineHeight: `${lineHeight}px`,
@@ -79,10 +79,10 @@ var LogLine = memo(function LogLine({ index, segments, lineNumbers, isSelected,
 				e.stopPropagation();
 				onLineClick(index + 1, e);
 			},
-			className: cx("inline-flex items-center justify-end w-14 pr-3 shrink-0 cursor-pointer select-none", "hover:underline hover:text-(--theme-link) transition-colors", "text-(--theme-muted-text-color)", isSelected && "text-(--theme-link)"),
+			className: clsx("inline-flex items-center justify-end w-14 pr-3 shrink-0 cursor-pointer select-none", "hover:underline hover:text-(--theme-link) transition-colors", "text-(--theme-muted-text-color)", isSelected && "text-(--theme-link)"),
 			children: index + 1
 		}), /* @__PURE__ */ jsxs("pre", {
-			className: cx("grow text-left whitespace-pre m-0 py-0.5 pr-2 flex items-center", lineNumbers && "pl-2 border-l border-(--theme-border)", command?.type === "error" && "border-l-red-500 border-l-2", command?.type === "warning" && "border-l-yellow-500 border-l-2", command?.type === "notice" && "border-l-blue-500 border-l-2", command?.type === "group" && "font-bold"),
+			className: clsx("grow text-left whitespace-pre m-0 py-0.5 pr-2 flex items-center", lineNumbers && "pl-2 border-l border-(--theme-border)", command?.type === "error" && "border-l-red-500 border-l-2", command?.type === "warning" && "border-l-yellow-500 border-l-2", command?.type === "notice" && "border-l-blue-500 border-l-2", command?.type === "group" && "font-bold"),
 			children: [
 				command?.type === "group" && /* @__PURE__ */ jsx("span", {
 					className: "mr-1 shrink-0 inline-flex items-center",
@@ -106,9 +106,9 @@ function validateTimeRange(from, to) {
 }
 var TopPaginationBanner = memo(function TopPaginationBanner({ endOfLog, loadingTop, onLoadOlder }) {
 	const { logviewer: t } = useStrings();
-	const baseCx = cx("flex items-center justify-center gap-2 h-7 text-xs font-mono select-none", "text-[var(--theme-muted-text-color)]", "border-b border-[var(--theme-border)]");
+	const baseCx = clsx("flex items-center justify-center gap-2 h-7 text-xs font-mono select-none", "text-[var(--theme-muted-text-color)]", "border-b border-[var(--theme-border)]");
 	if (endOfLog) return /* @__PURE__ */ jsx("div", {
-		className: cx(baseCx, "opacity-70"),
+		className: clsx(baseCx, "opacity-70"),
 		children: t.beginningOfLog
 	});
 	if (loadingTop) return /* @__PURE__ */ jsxs("div", {
@@ -121,7 +121,7 @@ var TopPaginationBanner = memo(function TopPaginationBanner({ endOfLog, loadingT
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		onClick: onLoadOlder,
-		className: cx(baseCx, "w-full hover:text-[var(--theme-app)] hover:bg-[var(--theme-hover)] transition-colors"),
+		className: clsx(baseCx, "w-full hover:text-[var(--theme-app)] hover:bg-[var(--theme-hover)] transition-colors"),
 		children: t.loadOlderEntries
 	});
 });
@@ -516,7 +516,7 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 	const visibleLogs = inline ? parsedLog : parsedLog.slice(visibleStart, Math.min(parsedLog.length, visibleEnd));
 	return /* @__PURE__ */ jsxs("div", {
 		"data-testid": "logviewer-container",
-		className: cx("flex flex-col grow", roundedBottom && "rounded-lg"),
+		className: clsx("flex flex-col grow", roundedBottom && "rounded-lg"),
 		style: !fullscreen ? {
 			height,
 			width
@@ -530,14 +530,14 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 		},
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: cx("flex select-none items-center gap-x-2 p-2", inline ? "bg-[var(--theme-panel-bg)] border-b border-[var(--theme-border)]" : "theme-panel"),
+				className: clsx("flex select-none items-center gap-x-2 p-2", inline ? "bg-[var(--theme-panel-bg)] border-b border-[var(--theme-border)]" : "theme-panel"),
 				children: [/* @__PURE__ */ jsxs("div", {
-					className: cx("w-full flex flex-row gap-x-2 items-center", hideExpand && "justify-between"),
+					className: clsx("w-full flex flex-row gap-x-2 items-center", hideExpand && "justify-between"),
 					children: [
 						/* @__PURE__ */ jsxs("div", {
 							className: "flex gap-x-2 w-full",
 							children: [
-								!inline && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
+								!inline && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
 									type: "button",
 									className: "btn btn-neutral",
 									onClick: () => {
@@ -583,7 +583,7 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 								additionalLeftBarComponents,
 								enableWorkflowCommands && /* @__PURE__ */ jsx("button", {
 									type: "button",
-									className: cx("btn btn-neutral", showDebug && "btn-active"),
+									className: clsx("btn btn-neutral", showDebug && "btn-active"),
 									onClick: () => setShowDebug((prev) => !prev),
 									children: /* @__PURE__ */ jsx("span", { children: showDebug ? t.hideDebug : t.showDebug })
 								}),
@@ -605,14 +605,14 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 										]
 									}), timeRangeOpen && /* @__PURE__ */ jsxs("div", {
 										ref: timeRangePopoverRef,
-										className: cx("absolute top-full left-0 mt-1 z-50 w-80 p-3 rounded-lg shadow-lg", "border border-[var(--theme-border)] bg-[var(--theme-panel-bg)]", "flex flex-col gap-y-3"),
+										className: clsx("absolute top-full left-0 mt-1 z-50 w-80 p-3 rounded-lg shadow-lg", "border border-[var(--theme-border)] bg-[var(--theme-panel-bg)]", "flex flex-col gap-y-3"),
 										children: [
 											/* @__PURE__ */ jsxs("div", {
 												className: "flex items-center gap-x-1.5",
 												children: [/* @__PURE__ */ jsx("span", {
 													className: "text-xs font-semibold text-[var(--theme-app)]",
 													children: t.filterByTimeRange
-												}), /* @__PURE__ */ jsx(TooltipInfo, { text: t.timeRangeHelp })]
+												}), /* @__PURE__ */ jsx(InfoTip, { text: t.timeRangeHelp })]
 											}),
 											/* @__PURE__ */ jsxs("label", {
 												className: "flex flex-col gap-y-1",
@@ -678,13 +678,13 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 						}),
 						/* @__PURE__ */ jsxs("a", {
 							href: logUrl,
-							className: cx(!logUrl && "disabled", "btn btn-neutral"),
+							className: clsx(!logUrl && "disabled", "btn btn-neutral"),
 							download: true,
 							children: [/* @__PURE__ */ jsx(FaCloudDownloadAlt, {}), /* @__PURE__ */ jsx("span", { children: t.download })]
 						}),
 						/* @__PURE__ */ jsxs("button", {
 							type: "button",
-							className: cx("btn btn-neutral", hideExpand && "hidden"),
+							className: clsx("btn btn-neutral", hideExpand && "hidden"),
 							onClick: () => setFullscreen((prev) => !prev),
 							children: [/* @__PURE__ */ jsx(ExpandButtonIcon, {}), /* @__PURE__ */ jsx("span", { children: expandButtonText })]
 						})
@@ -694,7 +694,7 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 			/* @__PURE__ */ jsxs("div", {
 				"data-testid": "logviewer",
 				role: "none",
-				className: cx(roundedBottom && "rounded-b-lg", "w-full overflow-x-auto", !inline && "h-full grow overflow-y-auto", !inline && "bg-(--theme-muted-panel-bg)", contentClassName),
+				className: clsx(roundedBottom && "rounded-b-lg", "w-full overflow-x-auto", !inline && "h-full grow overflow-y-auto", !inline && "bg-(--theme-muted-panel-bg)", contentClassName),
 				style: inline ? void 0 : {
 					overflowY: "auto",
 					position: "relative",
@@ -732,19 +732,19 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 			highlightCopyPosition && highlightedText && /* @__PURE__ */ jsx("button", {
 				type: "button",
 				"data-highlight-copy-button": true,
-				className: cx("fixed z-[10000] flex items-center gap-1 px-2 py-1.5 text-xs font-medium", "rounded-md shadow-lg border cursor-pointer transition-colors duration-150", "bg-(--theme-panel-bg) border-(--theme-border) hover:bg-(--theme-hover) text-(--theme-app)"),
+				className: clsx("fixed z-[10000] flex items-center gap-1 px-2 py-1.5 text-xs font-medium", "rounded-md shadow-lg border cursor-pointer transition-colors duration-150", "bg-(--theme-panel-bg) border-(--theme-border) hover:bg-(--theme-hover) text-(--theme-app)"),
 				style: {
 					left: highlightCopyPosition.x,
 					top: highlightCopyPosition.y + 8,
 					transform: "translateX(-50%)"
 				},
 				onClick: copyHighlightedText,
-				children: copied ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FaCheck, { className: "text-green-500 w-3.5 h-3.5" }), /* @__PURE__ */ jsx("span", { children: tCommon.copied })] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FiCopy, { className: "w-3.5 h-3.5" }), /* @__PURE__ */ jsx("span", { children: tCommon.copy })] })
+				children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FaCheck, { className: "text-green-500 w-3.5 h-3.5" }), /* @__PURE__ */ jsx("span", { children: tCommon.copied })] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FiCopy, { className: "w-3.5 h-3.5" }), /* @__PURE__ */ jsx("span", { children: tCommon.copy })] })
 			}),
 			(additionalBottomLeftBarComponents || additionalBottomRightBarComponents) && /* @__PURE__ */ jsxs("div", {
 				className: "flex theme-panel select-none items-center gap-x-2 p-2",
 				children: [/* @__PURE__ */ jsx("div", {
-					className: cx("w-full flex flex-row gap-x-2 items-center", hideExpand && "justify-between"),
+					className: clsx("w-full flex flex-row gap-x-2 items-center", hideExpand && "justify-between"),
 					children: /* @__PURE__ */ jsx("div", {
 						className: "flex gap-x-2 w-full",
 						children: additionalBottomLeftBarComponents