@parallelworks/ui 0.51.0 → 0.52.0

package/dist/list/listView.js

@@ -18,7 +18,7 @@ var DEFAULT_ORDER = "__default";
 var FAVORITE_ORDER = "__favorite";
 /** Persisted grouping + column-visibility + field-filter state for a list page,
 * driving the shared Display/Filter menus. */
-function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], defaultGroupBy, orderBys = [], defaultOrderBy, facets = [], actions = [], actionCount, defaultShowColumnHeaders = false, defaultShowActions = true, isFavorite, isOn, createdAt }) {
+function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], defaultGroupBy, orderBys = [], defaultOrderBy, facets = [], actions = [], actionCount, defaultShowColumnHeaders = true, defaultShowActions = true, isFavorite, isOn, createdAt }) {
 	const t = useStrings().list;
 	const tiebreak = orderBys[0]?.compare;
 	const effectiveOrderBys = useMemo(() => {
@@ -136,6 +136,19 @@ function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], def
 		setShowActions
 	]);
 	const toggleOrderDir = useCallback(() => setOrderDir((d) => d === "asc" ? "desc" : "asc"), [setOrderDir]);
+	const sortBy = useCallback((value) => {
+		if (value === orderBy) {
+			toggleOrderDir();
+			return;
+		}
+		setOrderBy(value);
+		setOrderDir("asc");
+	}, [
+		orderBy,
+		toggleOrderDir,
+		setOrderBy,
+		setOrderDir
+	]);
 	const applyOrder = useCallback((rows) => {
 		const opt = effectiveOrderBys.find((o) => o.value === orderBy);
 		if (!opt) return rows;
@@ -190,6 +203,7 @@ function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], def
 		setOrderBy,
 		orderDir,
 		toggleOrderDir,
+		sortBy,
 		applyOrder,
 		facets,
 		filters,

package/dist/logviewer/LogViewer.d.ts

@@ -1,7 +1,9 @@
-export declare function LogViewer({ log, height, width, roundedBottom, lineNumbers, additionalLeftBarComponents, additionalRightBarComponents, additionalBottomLeftBarComponents, additionalBottomRightBarComponents, hideExpand, inline, contentClassName, enableWorkflowCommands: workflowCommandsRequested, onReachTop, loadingTop, endOfLog, prependedSignal, enableTimeRangeFilter, onTimeRangeChange, initialTimeRangeFrom, initialTimeRangeTo, }: {
+export declare function LogViewer({ log, height, width, downloadName, roundedBottom, lineNumbers, additionalLeftBarComponents, additionalRightBarComponents, additionalBottomLeftBarComponents, additionalBottomRightBarComponents, hideExpand, inline, contentClassName, enableWorkflowCommands: workflowCommandsRequested, onReachTop, loadingTop, endOfLog, prependedSignal, enableTimeRangeFilter, onTimeRangeChange, initialTimeRangeFrom, initialTimeRangeTo, }: {
     log: string;
     height?: string | number;
-    width: string | number;
+    width?: string | number | undefined;
+    /** The file name Download saves the log under. */
+    downloadName?: string | undefined;
     roundedBottom?: boolean;
     lineNumbers?: boolean;
     additionalLeftBarComponents?: React.ReactNode;

package/dist/logviewer/LogViewer.js

@@ -1,14 +1,14 @@
 import { cx } from "../cx.js";
-import { ArrowDownIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, ClockIcon, CloseIcon, CopyIcon, DownloadIcon, ExpandIcon, ShrinkIcon } from "../icons.js";
 import { buttonClasses } from "../components/buttonClasses.js";
+import { ArrowDownIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, ClockIcon, CloseIcon, CopyIcon, DownloadIcon, ExpandIcon, ShrinkIcon } from "../icons.js";
 import { Loader } from "../components/Loader.js";
 import { useOptionalWorkflowEngine, useStrings } from "../components/Provider.js";
 import { useCopy } from "../components/useCopy.js";
 import { Button } from "../components/Button.js";
-import { DatePicker } from "../components/DatePicker.js";
 import { IconButton } from "../components/IconButton.js";
 import { Popover } from "../components/Popover.js";
 import { InfoTip } from "../components/InfoTip.js";
+import { DatePicker } from "../components/DatePicker.js";
 import { SearchInput } from "../components/SearchInput.js";
 import { highlightSegments, parseAnsiSegments, plainSegments } from "./segments.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -26,55 +26,51 @@ function LogSegments({ segments }) {
 		children: segment.content
 	}, 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 }) {
+var ANNOTATION_TONES = {
+	error: {
+		label: "text-(--theme-error-text)",
+		row: "bg-(--theme-error-muted)",
+		edge: "border-l-2 border-l-(color:--theme-error)"
+	},
+	warning: {
+		label: "text-(--theme-warning-text)",
+		row: "bg-(--theme-warning-muted)",
+		edge: "border-l-2 border-l-(color:--theme-warning)"
+	},
+	notice: {
+		label: "text-(--theme-info-text)",
+		row: "bg-(--theme-info-muted)",
+		edge: "border-l-2 border-l-(color:--theme-info)"
+	}
+};
+var LogLine = memo(function LogLine({ index, segments, lineNumbers, isSelected, lineHeight, onLineClick, searchTerm, command, groupDepth = 0, isGroupCollapsed, onGroupToggle, annotationLabels, selectLineLabel }) {
+	const annotation = command?.type ? ANNOTATION_TONES[command.type] : void 0;
 	const displaySegments = useMemo(() => highlightSegments(command?.message ? plainSegments(command.message) : segments, searchTerm), [
 		segments,
 		searchTerm,
 		command
 	]);
-	const annotationLabel = useMemo(() => {
-		if (command?.type === "error") return /* @__PURE__ */ jsx("span", {
-			className: "text-red-500 font-semibold mr-1",
-			children: annotationLabels.error
-		});
-		if (command?.type === "warning") return /* @__PURE__ */ jsx("span", {
-			className: "text-yellow-500 font-semibold mr-1",
-			children: annotationLabels.warning
-		});
-		if (command?.type === "notice") return /* @__PURE__ */ jsx("span", {
-			className: "text-blue-500 font-semibold mr-1",
-			children: annotationLabels.notice
-		});
-		return null;
-	}, [command?.type, annotationLabels]);
+	const annotationLabel = annotation && command && /* @__PURE__ */ jsx("span", {
+		className: cx("mr-1 font-semibold", annotation.label),
+		children: annotationLabels[command.type]
+	});
 	const groupToggle = command?.type === "group" && onGroupToggle ? () => {
 		if (window.getSelection()?.isCollapsed === false) return;
 		onGroupToggle(index);
 	} : null;
-	const groupToggleProps = groupToggle ? {
-		role: "button",
-		tabIndex: 0,
-		"aria-expanded": !isGroupCollapsed,
-		onClick: groupToggle,
-		onKeyDown: (e) => {
-			if (e.target !== e.currentTarget) return;
-			if (e.key === "Enter" || e.key === " ") {
-				e.preventDefault();
-				groupToggle();
-			}
-		}
-	} : void 0;
+	const titleId = useId();
 	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"),
+		onClick: groupToggle ?? void 0,
+		className: cx("flex items-start text-sm font-mono group", isSelected ? "bg-(--theme-link)/15" : "hover:bg-(--theme-hover)", "text-(--theme-app)", !isSelected && annotation?.row, command?.type === "debug" && "opacity-60", command?.type === "group" && "bg-(--theme-hover) cursor-pointer"),
 		style: {
 			minHeight: `${lineHeight}px`,
-			lineHeight: `${lineHeight}px`,
-			paddingLeft: groupDepth > 0 ? `${groupDepth * 16}px` : void 0
+			lineHeight: `${lineHeight}px`
 		},
 		children: [lineNumbers && /* @__PURE__ */ jsx("button", {
 			type: "button",
+			"aria-label": selectLineLabel(index + 1),
+			"aria-pressed": isSelected,
 			onClick: (e) => {
 				e.stopPropagation();
 				onLineClick(index + 1, e);
@@ -82,14 +78,28 @@ var LogLine = memo(function LogLine({ index, segments, lineNumbers, isSelected,
 			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)"),
 			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: cx("grow text-left whitespace-pre m-0 py-0.5 pr-2 flex items-center", lineNumbers && "pl-2 border-l border-l-(color:--theme-border)", annotation?.edge, command?.type === "group" && "font-bold"),
+			style: groupDepth > 0 ? { paddingInlineStart: `calc(${lineNumbers ? "0.5rem + " : ""}${groupDepth * 16}px)` } : void 0,
 			children: [
-				command?.type === "group" && /* @__PURE__ */ jsx("span", {
+				command?.type === "group" && (onGroupToggle ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-expanded": !isGroupCollapsed,
+					"aria-labelledby": titleId,
+					onClick: (e) => {
+						e.stopPropagation();
+						onGroupToggle(index);
+					},
+					className: "mr-1 inline-flex shrink-0 cursor-pointer items-center rounded focus-visible:outline-2 focus-visible:outline-(--theme-focus)",
+					children: isGroupCollapsed ? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-3 h-3 rtl:rotate-180" }) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "w-3 h-3" })
+				}) : /* @__PURE__ */ jsx("span", {
 					className: "mr-1 shrink-0 inline-flex items-center",
-					children: isGroupCollapsed ? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "w-3 h-3" })
-				}),
+					children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "w-3 h-3" })
+				})),
 				annotationLabel,
-				/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(LogSegments, { segments: displaySegments }) })
+				/* @__PURE__ */ jsx("span", {
+					id: titleId,
+					children: /* @__PURE__ */ jsx(LogSegments, { segments: displaySegments })
+				})
 			]
 		})]
 	});
@@ -127,7 +137,7 @@ var TopPaginationBanner = memo(function TopPaginationBanner({ endOfLog, loadingT
 		children: t.loadOlderEntries
 	});
 });
-function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNumbers = true, additionalLeftBarComponents = null, additionalRightBarComponents = null, additionalBottomLeftBarComponents = null, additionalBottomRightBarComponents = null, hideExpand = false, inline = false, contentClassName, enableWorkflowCommands: workflowCommandsRequested = false, onReachTop, loadingTop = false, endOfLog = false, prependedSignal = 0, enableTimeRangeFilter = false, onTimeRangeChange, initialTimeRangeFrom = "", initialTimeRangeTo = "" }) {
+function LogViewer({ log, height = "unset", width, downloadName = "log.txt", roundedBottom = false, lineNumbers = true, additionalLeftBarComponents = null, additionalRightBarComponents = null, additionalBottomLeftBarComponents = null, additionalBottomRightBarComponents = null, hideExpand = false, inline = false, contentClassName, enableWorkflowCommands: workflowCommandsRequested = false, onReachTop, loadingTop = false, endOfLog = false, prependedSignal = 0, enableTimeRangeFilter = false, onTimeRangeChange, initialTimeRangeFrom = "", initialTimeRangeTo = "" }) {
 	const engine = useOptionalWorkflowEngine(workflowCommandsRequested);
 	const enableWorkflowCommands = workflowCommandsRequested && engine !== void 0;
 	const { common, logviewer: t } = useStrings();
@@ -143,7 +153,6 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 		followRef.current = value;
 		_setFollow(value);
 	}, []);
-	const [logUrl, setLogUrl] = useState("");
 	const [fullParsedLog, setFullParsedLog] = useState([]);
 	const [processedLines, setProcessedLines] = useState([]);
 	const [rawLines, setRawLines] = useState([]);
@@ -329,10 +338,6 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 		setFullParsedLog(processed);
 		if (enableWorkflowCommands && engine) setProcessedLines(engine.processLogLines(processed, cleanedLines));
 		if (followRef.current && isAppending) requestAnimationFrame(scrollToEnd);
-		const file = new Blob([log], { type: "text/plaintext" });
-		const url = URL.createObjectURL(file);
-		setLogUrl(url);
-		return () => URL.revokeObjectURL(url);
 	}, [
 		log,
 		scrollToEnd,
@@ -363,6 +368,22 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 	useLayoutEffect(() => {
 		if (logContainerRef.current) prevScrollHeightRef.current = logContainerRef.current.scrollHeight;
 	});
+	const downloadLog = () => {
+		const url = URL.createObjectURL(new Blob([log], { type: "text/plain" }));
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = downloadName;
+		a.click();
+		setTimeout(() => URL.revokeObjectURL(url));
+	};
+	useEffect(() => {
+		if (!fullscreen) return;
+		const onKey = (e) => {
+			if (e.key === "Escape" && !e.defaultPrevented) setFullscreen(false);
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [fullscreen]);
 	const handleFilterChange = (newFilter) => {
 		setFilter(newFilter);
 		updateFollow(false);
@@ -421,27 +442,24 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 									children: follow ? t.following : t.follow
 								})] }),
 								selectedLines.size > 0 ? /* @__PURE__ */ jsxs("div", {
-									className: "relative flex items-center h-full",
+									className: "flex items-center gap-1",
 									children: [/* @__PURE__ */ jsx(Button, {
 										variant: "secondary",
 										size: "sm",
-										icon: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-green-500" }) : /* @__PURE__ */ jsx(CopyIcon, {}),
+										icon: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-(--theme-success)" }) : /* @__PURE__ */ jsx(CopyIcon, {}),
 										onClick: copySelectedLines,
 										children: copied ? common.copied : t.copyLines(selectedLines.size)
-									}), /* @__PURE__ */ jsx("span", {
-										className: "absolute -top-2 -right-2 z-10 rounded-md shadow-sm",
-										children: /* @__PURE__ */ jsx(IconButton, {
-											variant: "secondary",
-											size: "xs",
-											label: t.clearSelection,
-											icon: /* @__PURE__ */ jsx(CloseIcon, {}),
-											onClick: () => setSelectedLines(/* @__PURE__ */ new Set())
-										})
+									}), /* @__PURE__ */ jsx(IconButton, {
+										variant: "ghost",
+										size: "sm",
+										label: t.clearSelection,
+										icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+										onClick: () => setSelectedLines(/* @__PURE__ */ new Set())
 									})]
 								}) : /* @__PURE__ */ jsx(Button, {
 									variant: "secondary",
 									size: "sm",
-									icon: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-green-500" }) : /* @__PURE__ */ jsx(CopyIcon, {}),
+									icon: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-(--theme-success)" }) : /* @__PURE__ */ jsx(CopyIcon, {}),
 									onClick: copyAllLogs,
 									children: copied ? common.copied : t.copyAll
 								}),
@@ -510,7 +528,8 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 											})]
 										}),
 										timeRangeError !== "" && /* @__PURE__ */ jsx("span", {
-											className: "text-[11px] text-red-500",
+											role: "alert",
+											className: "text-[11px] text-(--theme-error-text)",
 											children: t[timeRangeError]
 										}),
 										/* @__PURE__ */ jsxs("div", {
@@ -548,15 +567,13 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 							onValueChange: handleFilterChange,
 							className: "w-48"
 						}),
-						/* @__PURE__ */ jsxs("a", {
-							href: logUrl || void 0,
-							"aria-disabled": !logUrl || void 0,
-							className: buttonClasses({
-								variant: "secondary",
-								size: "sm"
-							}),
-							download: true,
-							children: [/* @__PURE__ */ jsx(DownloadIcon, {}), common.download]
+						/* @__PURE__ */ jsx(Button, {
+							variant: "secondary",
+							size: "sm",
+							icon: /* @__PURE__ */ jsx(DownloadIcon, {}),
+							disabled: !log,
+							onClick: downloadLog,
+							children: common.download
 						}),
 						!hideExpand && /* @__PURE__ */ jsx(Button, {
 							variant: "secondary",
@@ -606,7 +623,8 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 								groupDepth: enableWorkflowCommands ? item.groupDepth : 0,
 								isGroupCollapsed: enableWorkflowCommands && item.command?.type === "group" ? collapsedGroups.has(item.index) : void 0,
 								onGroupToggle: enableWorkflowCommands ? handleGroupToggle : void 0,
-								annotationLabels
+								annotationLabels,
+								selectLineLabel: t.selectLine
 							})
 						}, item.index))
 					})

package/dist/logviewer/logviewer.css

@@ -1,6 +1,7 @@
-/* Log viewer search highlighting */
+/* A match the filter found: the theme's warning shade, the usual find-in-page
+ * yellow, mixed toward the surface so the text keeps its own color. */
 mark.search-highlight {
-  background-color: rgba(251, 191, 36, 0.4);
+  background-color: color-mix(in oklab, var(--theme-warning) 35%, transparent);
   color: inherit;
   padding: 0 2px;
   border-radius: 2px;

package/dist/reducedMotion.d.ts

@@ -0,0 +1,5 @@
+/** Whether the person asked for less motion, read once where it is needed, such as before a scroll. */
+export declare function prefersReducedMotion(): boolean;
+/** Whether the person asked for less motion, following the setting as it changes. For motion a
+ *  `motion-reduce:` class can't reach, such as a transition a component waits on. */
+export declare function useReducedMotion(): boolean;

package/dist/reducedMotion.js

@@ -0,0 +1,20 @@
+import { useSyncExternalStore } from "react";
+//#region src/reducedMotion.ts
+var QUERY = "(prefers-reduced-motion: reduce)";
+/** Whether the person asked for less motion, read once where it is needed, such as before a scroll. */
+function prefersReducedMotion() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(QUERY).matches : false;
+}
+function subscribe(onChange) {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {};
+	const media = window.matchMedia(QUERY);
+	media.addEventListener("change", onChange);
+	return () => media.removeEventListener("change", onChange);
+}
+/** Whether the person asked for less motion, following the setting as it changes. For motion a
+*  `motion-reduce:` class can't reach, such as a transition a component waits on. */
+function useReducedMotion() {
+	return useSyncExternalStore(subscribe, prefersReducedMotion, () => false);
+}
+//#endregion
+export { prefersReducedMotion, useReducedMotion };

package/dist/safeUrl.d.ts

@@ -1,6 +1,6 @@
 /**
  * Returns url when following it cannot run script in the app's origin: a
- * relative path or an http, https or blob URL. Hosts and servers supply these
+ * relative path, an http, https or blob URL, or a mailto: or tel: link. Hosts and servers supply these
  * URLs, so a javascript: URL from either would otherwise run when clicked.
  */
 export declare function safeUrl(url: string | null | undefined): string | undefined;

package/dist/safeUrl.js

@@ -2,11 +2,13 @@
 var SAFE_PROTOCOLS = /* @__PURE__ */ new Set([
 	"http:",
 	"https:",
-	"blob:"
+	"blob:",
+	"mailto:",
+	"tel:"
 ]);
 /**
 * Returns url when following it cannot run script in the app's origin: a
-* relative path or an http, https or blob URL. Hosts and servers supply these
+* relative path, an http, https or blob URL, or a mailto: or tel: link. Hosts and servers supply these
 * URLs, so a javascript: URL from either would otherwise run when clicked.
 */
 function safeUrl(url) {