@parallelworks/ui 0.19.0 → 0.20.0

package/dist/list/listView.js

@@ -0,0 +1,210 @@
+import { usePersistedState, useStrings } from "../components/Provider.js";
+import { actionsColumnWidth } from "./ListTable.js";
+import { useCallback, useMemo } from "react";
+//#region src/list/listView.tsx
+var PRIORITY_SHOW_CLASS = {
+	low: "hidden @[52rem]:table-cell",
+	medium: "hidden @[36rem]:table-cell"
+};
+function columnResponsiveClass(col) {
+	return col.priority ? PRIORITY_SHOW_CLASS[col.priority] : "";
+}
+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 }) {
+	const t = useStrings().list;
+	const tiebreak = orderBys[0]?.compare;
+	const effectiveOrderBys = useMemo(() => {
+		if (!isFavorite) return orderBys;
+		const favoriteRank = (row) => isFavorite(row) ? 0 : 1;
+		const onRank = (row) => isOn?.(row) ? 0 : 1;
+		const createdMs = (row) => {
+			const v = createdAt?.(row);
+			return v === null || v === void 0 || Number.isNaN(v) ? 0 : v;
+		};
+		const newestFirst = (a, b) => createdMs(b) - createdMs(a);
+		return [...[{
+			value: DEFAULT_ORDER,
+			label: t.orderDefault,
+			compare: (a, b) => onRank(a) - onRank(b) || favoriteRank(a) - favoriteRank(b) || newestFirst(a, b) || (tiebreak?.(a, b) ?? 0)
+		}, {
+			value: FAVORITE_ORDER,
+			label: t.orderFavorites,
+			compare: (a, b) => favoriteRank(a) - favoriteRank(b) || (tiebreak?.(a, b) ?? 0)
+		}], ...orderBys];
+	}, [
+		orderBys,
+		isFavorite,
+		isOn,
+		createdAt,
+		tiebreak,
+		t
+	]);
+	const defaultGroupByValue = defaultGroupBy ?? groupBys[0]?.value ?? "";
+	const defaultOrderByValue = isFavorite ? DEFAULT_ORDER : defaultOrderBy ?? orderBys[0]?.value ?? "";
+	const defaultHiddenKeys = useMemo(() => columns.filter((c) => c.defaultHidden && !c.alwaysVisible).map((c) => c.key), [columns]);
+	const defaultPinnedKeys = useMemo(() => actions.filter((a) => a.defaultPinned).map((a) => a.key), [actions]);
+	const [hiddenKeys, setHiddenKeys] = usePersistedState(`${storageKey}:hiddenColumns`, defaultHiddenKeys);
+	const [pinnedKeys, setPinnedKeys] = usePersistedState(`${storageKey}:pinnedActions`, defaultPinnedKeys);
+	const [groupBy, setGroupBy] = usePersistedState(`${storageKey}:groupBy`, defaultGroupByValue);
+	const [showColumnHeaders, setShowColumnHeaders] = usePersistedState(`${storageKey}:showColumnHeaders`, defaultShowColumnHeaders);
+	const [showActions, setShowActions] = usePersistedState(`${storageKey}:showActions`, defaultShowActions);
+	const [alwaysShowActions, setAlwaysShowActions] = usePersistedState(`${storageKey}:alwaysShowActions`, false);
+	const [orderBy, setOrderBy] = usePersistedState(`${storageKey}:orderBy`, defaultOrderByValue);
+	const [orderDir, setOrderDir] = usePersistedState(`${storageKey}:orderDir`, "asc");
+	const [localFilters, setLocalFilters] = usePersistedState(`${storageKey}:filters`, {});
+	const [sharedFilters, setSharedFilters] = usePersistedState(`${sharedFiltersKey ?? storageKey}:sharedFilters`, {});
+	const sharedKeys = useMemo(() => new Set(facets.filter((f) => f.shared).map((f) => f.key)), [facets]);
+	const filters = useMemo(() => {
+		if (sharedKeys.size === 0) return localFilters;
+		const merged = {};
+		for (const [key, values] of Object.entries(localFilters)) if (!sharedKeys.has(key)) merged[key] = values;
+		for (const key of sharedKeys) {
+			const values = sharedFilters[key];
+			if (values?.length) merged[key] = values;
+		}
+		return merged;
+	}, [
+		localFilters,
+		sharedFilters,
+		sharedKeys
+	]);
+	const pinnedCount = actionCount ?? pinnedKeys.filter((key) => actions.some((action) => action.key === key)).length;
+	const effectiveShowActions = showActions || alwaysShowActions;
+	const actionsWidth = effectiveShowActions ? actionsColumnWidth(pinnedCount) : 0;
+	const isVisible = useCallback((key) => {
+		const col = columns.find((c) => c.key === key);
+		return Boolean(col?.alwaysVisible) || !hiddenKeys.includes(key);
+	}, [columns, hiddenKeys]);
+	const visibleColumns = useMemo(() => columns.filter((c) => !c.inline && (c.alwaysVisible || !hiddenKeys.includes(c.key))), [columns, hiddenKeys]);
+	const columnClasses = useMemo(() => visibleColumns.map(columnResponsiveClass), [visibleColumns]);
+	const toggleColumn = useCallback((key) => setHiddenKeys((prev) => prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]), [setHiddenKeys]);
+	const setFacetValues = useCallback((key, values) => {
+		const update = (prev) => {
+			const next = { ...prev };
+			if (values.length) next[key] = values;
+			else delete next[key];
+			return next;
+		};
+		if (sharedKeys.has(key)) setSharedFilters(update);
+		else setLocalFilters(update);
+	}, [
+		setLocalFilters,
+		setSharedFilters,
+		sharedKeys
+	]);
+	const clearFilters = useCallback(() => {
+		setLocalFilters({});
+		if (sharedKeys.size > 0) setSharedFilters((prev) => {
+			const next = { ...prev };
+			for (const key of sharedKeys) delete next[key];
+			return next;
+		});
+	}, [
+		setLocalFilters,
+		setSharedFilters,
+		sharedKeys
+	]);
+	const isPinned = useCallback((key) => pinnedKeys.includes(key), [pinnedKeys]);
+	const togglePinned = useCallback((key) => setPinnedKeys((prev) => prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]), [setPinnedKeys]);
+	const toggleColumnHeaders = useCallback(() => setShowColumnHeaders((prev) => !prev), [setShowColumnHeaders]);
+	const toggleShowActions = useCallback(() => {
+		if (effectiveShowActions) {
+			setShowActions(false);
+			setAlwaysShowActions(false);
+		} else setShowActions(true);
+	}, [
+		effectiveShowActions,
+		setShowActions,
+		setAlwaysShowActions
+	]);
+	const toggleAlwaysShowActions = useCallback(() => {
+		const next = !alwaysShowActions;
+		setAlwaysShowActions(next);
+		if (next) setShowActions(true);
+	}, [
+		alwaysShowActions,
+		setAlwaysShowActions,
+		setShowActions
+	]);
+	const toggleOrderDir = useCallback(() => setOrderDir((d) => d === "asc" ? "desc" : "asc"), [setOrderDir]);
+	const applyOrder = useCallback((rows) => {
+		const opt = effectiveOrderBys.find((o) => o.value === orderBy);
+		if (!opt) return rows;
+		const sign = orderDir === "asc" ? 1 : -1;
+		return [...rows].sort((a, b) => opt.compare(a, b) * sign);
+	}, [
+		effectiveOrderBys,
+		orderBy,
+		orderDir
+	]);
+	const sameKeys = (a, b) => a.length === b.length && a.every((k) => b.includes(k));
+	const isDisplayDefault = groupBy === defaultGroupByValue && orderBy === defaultOrderByValue && orderDir === "asc" && showColumnHeaders === defaultShowColumnHeaders && showActions === defaultShowActions && alwaysShowActions === false && sameKeys(hiddenKeys, defaultHiddenKeys) && sameKeys(pinnedKeys, defaultPinnedKeys);
+	const resetDisplay = useCallback(() => {
+		setGroupBy(defaultGroupByValue);
+		setOrderBy(defaultOrderByValue);
+		setOrderDir("asc");
+		setShowColumnHeaders(defaultShowColumnHeaders);
+		setShowActions(defaultShowActions);
+		setAlwaysShowActions(false);
+		setHiddenKeys(defaultHiddenKeys);
+		setPinnedKeys(defaultPinnedKeys);
+	}, [
+		setGroupBy,
+		setOrderBy,
+		setOrderDir,
+		defaultOrderByValue,
+		setShowColumnHeaders,
+		setShowActions,
+		setAlwaysShowActions,
+		setHiddenKeys,
+		setPinnedKeys,
+		defaultGroupByValue,
+		defaultHiddenKeys,
+		defaultPinnedKeys,
+		defaultShowColumnHeaders,
+		defaultShowActions
+	]);
+	return {
+		columns,
+		visibleColumns,
+		columnClasses,
+		isVisible,
+		pinnedCount,
+		actionsWidth,
+		toggleColumn,
+		groupBys,
+		groupBy,
+		setGroupBy,
+		orderBys: effectiveOrderBys,
+		orderBy,
+		setOrderBy,
+		orderDir,
+		toggleOrderDir,
+		applyOrder,
+		facets,
+		filters,
+		setFacetValues,
+		clearFilters,
+		activeFilterCount: useMemo(() => Object.values(filters).filter((v) => v && v.length > 0).length, [filters]),
+		applyFilters: useCallback((rows) => rows.filter((row) => facets.every((f) => {
+			const selected = filters[f.key];
+			return !selected || selected.length === 0 ? true : f.matches(row, selected);
+		})), [facets, filters]),
+		actions,
+		isPinned,
+		togglePinned,
+		showColumnHeaders,
+		toggleColumnHeaders,
+		showActions: effectiveShowActions,
+		toggleShowActions,
+		alwaysShowActions,
+		toggleAlwaysShowActions,
+		isDisplayDefault,
+		resetDisplay
+	};
+}
+//#endregion
+export { DEFAULT_ORDER, FAVORITE_ORDER, useListView };

package/dist/list/textEntry.js

@@ -0,0 +1,10 @@
+//#region src/list/textEntry.ts
+/** Guards list-page shortcuts from firing inside inputs, terminals, editors, and dialogs. */
+function isTextEntryContext(target) {
+	const el = target;
+	if (!el) return false;
+	if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.isContentEditable) return true;
+	return Boolean(el.closest?.(".xterm, .monaco-editor, .cm-editor, [role=\"dialog\"]"));
+}
+//#endregion
+export { isTextEntryContext };

package/dist/{chunks/logviewer-BTKuQWzw.js → logviewer/LogViewer.js}

@@ -1,89 +1,11 @@
-import { a as useOptionalWorkflowEngine, i as useNotify, u as useStrings } from "./Provider-CDYurraE.js";
+import { useNotify, useOptionalWorkflowEngine, useStrings } from "../components/Provider.js";
 import { ArrowDownIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, ClockIcon, CopyIcon, DownloadIcon, ExpandIcon, ShrinkIcon, XIcon } from "../icons.js";
-import { r as TooltipInfo } from "./Tooltip-K5HJr4_p.js";
+import { TooltipInfo } from "../components/Tooltip.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 { DateTime } from "luxon";
-import Anser from "anser";
-//#region src/logviewer/segments.ts
-function segmentClassName(chunk) {
-	const classes = [];
-	if (chunk.fg) classes.push(`${chunk.fg}-fg`);
-	if (chunk.bg) classes.push(`${chunk.bg}-bg`);
-	for (const decoration of chunk.decorations) classes.push(`ansi-${decoration}`);
-	return classes.join(" ");
-}
-function parseAnsiSegments(line) {
-	return Anser.ansiToJson(line, {
-		use_classes: true,
-		remove_empty: true
-	}).map((chunk) => ({
-		content: chunk.content,
-		className: segmentClassName(chunk)
-	}));
-}
-function plainSegments(text) {
-	return [{
-		content: text,
-		className: ""
-	}];
-}
-/**
-* Matches are located on the concatenated line text so a term straddling an
-* ANSI colour boundary still highlights, then sliced back onto the segments it
-* covers.
-*/
-function highlightSegments(segments, searchTerm) {
-	if (!searchTerm) return segments;
-	const haystack = segments.map((segment) => segment.content).join("").toLowerCase();
-	const needle = searchTerm.toLowerCase();
-	if (!haystack.includes(needle)) return segments;
-	const matchStarts = [];
-	let found = haystack.indexOf(needle);
-	while (found !== -1) {
-		matchStarts.push(found);
-		found = haystack.indexOf(needle, found + needle.length);
-	}
-	const result = [];
-	let matchIndex = 0;
-	let offset = 0;
-	for (const segment of segments) {
-		const segmentEnd = offset + segment.content.length;
-		let cursor = offset;
-		while (cursor < segmentEnd) {
-			let matchStart = matchStarts[matchIndex];
-			while (matchStart !== void 0 && matchStart + needle.length <= cursor) {
-				matchIndex++;
-				matchStart = matchStarts[matchIndex];
-			}
-			if (matchStart === void 0 || matchStart >= segmentEnd) {
-				result.push({
-					...segment,
-					content: segment.content.slice(cursor - offset)
-				});
-				break;
-			}
-			if (matchStart > cursor) {
-				result.push({
-					...segment,
-					content: segment.content.slice(cursor - offset, matchStart - offset)
-				});
-				cursor = matchStart;
-			}
-			const matchEnd = Math.min(matchStart + needle.length, segmentEnd);
-			result.push({
-				...segment,
-				content: segment.content.slice(cursor - offset, matchEnd - offset),
-				highlighted: true
-			});
-			cursor = matchEnd;
-		}
-		offset = segmentEnd;
-	}
-	return result;
-}
-//#endregion
 //#region src/logviewer/LogViewer.tsx
 function LogSegments({ segments }) {
 	return segments.map((segment, i) => segment.highlighted ? /* @__PURE__ */ jsx("mark", {
@@ -825,4 +747,4 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 	});
 }
 //#endregion
-export { plainSegments as i, highlightSegments as n, parseAnsiSegments as r, LogViewer as t };
+export { LogViewer };

package/dist/logviewer/index.js

@@ -1,2 +1,3 @@
-import { i as plainSegments, n as highlightSegments, r as parseAnsiSegments, t as LogViewer } from "../chunks/logviewer-BTKuQWzw.js";
+import { highlightSegments, parseAnsiSegments, plainSegments } from "./segments.js";
+import { LogViewer } from "./LogViewer.js";
 export { LogViewer, highlightSegments, parseAnsiSegments, plainSegments };

package/dist/logviewer/segments.js

@@ -0,0 +1,80 @@
+import Anser from "anser";
+//#region src/logviewer/segments.ts
+function segmentClassName(chunk) {
+	const classes = [];
+	if (chunk.fg) classes.push(`${chunk.fg}-fg`);
+	if (chunk.bg) classes.push(`${chunk.bg}-bg`);
+	for (const decoration of chunk.decorations) classes.push(`ansi-${decoration}`);
+	return classes.join(" ");
+}
+function parseAnsiSegments(line) {
+	return Anser.ansiToJson(line, {
+		use_classes: true,
+		remove_empty: true
+	}).map((chunk) => ({
+		content: chunk.content,
+		className: segmentClassName(chunk)
+	}));
+}
+function plainSegments(text) {
+	return [{
+		content: text,
+		className: ""
+	}];
+}
+/**
+* Matches are located on the concatenated line text so a term straddling an
+* ANSI colour boundary still highlights, then sliced back onto the segments it
+* covers.
+*/
+function highlightSegments(segments, searchTerm) {
+	if (!searchTerm) return segments;
+	const haystack = segments.map((segment) => segment.content).join("").toLowerCase();
+	const needle = searchTerm.toLowerCase();
+	if (!haystack.includes(needle)) return segments;
+	const matchStarts = [];
+	let found = haystack.indexOf(needle);
+	while (found !== -1) {
+		matchStarts.push(found);
+		found = haystack.indexOf(needle, found + needle.length);
+	}
+	const result = [];
+	let matchIndex = 0;
+	let offset = 0;
+	for (const segment of segments) {
+		const segmentEnd = offset + segment.content.length;
+		let cursor = offset;
+		while (cursor < segmentEnd) {
+			let matchStart = matchStarts[matchIndex];
+			while (matchStart !== void 0 && matchStart + needle.length <= cursor) {
+				matchIndex++;
+				matchStart = matchStarts[matchIndex];
+			}
+			if (matchStart === void 0 || matchStart >= segmentEnd) {
+				result.push({
+					...segment,
+					content: segment.content.slice(cursor - offset)
+				});
+				break;
+			}
+			if (matchStart > cursor) {
+				result.push({
+					...segment,
+					content: segment.content.slice(cursor - offset, matchStart - offset)
+				});
+				cursor = matchStart;
+			}
+			const matchEnd = Math.min(matchStart + needle.length, segmentEnd);
+			result.push({
+				...segment,
+				content: segment.content.slice(cursor - offset, matchEnd - offset),
+				highlighted: true
+			});
+			cursor = matchEnd;
+		}
+		offset = segmentEnd;
+	}
+	return result;
+}
+//#endregion
+export { highlightSegments, parseAnsiSegments, plainSegments };

package/dist/safeUrl.d.ts

@@ -0,0 +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
+ * 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

@@ -0,0 +1,22 @@
+//#region src/safeUrl.ts
+var SAFE_PROTOCOLS = /* @__PURE__ */ new Set([
+	"http:",
+	"https:",
+	"blob:"
+]);
+/**
+* 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
+* URLs, so a javascript: URL from either would otherwise run when clicked.
+*/
+function safeUrl(url) {
+	if (!url) return;
+	try {
+		const { protocol } = new URL(url, "https://relative.invalid");
+		return SAFE_PROTOCOLS.has(protocol) ? url : void 0;
+	} catch {
+		return;
+	}
+}
+//#endregion
+export { safeUrl };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parallelworks/ui",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "description": "React UI components: a theme contract, icons, primitives, lists, forms, a job graph, a code editor, a log viewer, a file explorer and an AI chat, each on its own subpath",
   "license": "Apache-2.0",
   "repository": {
@@ -76,8 +76,7 @@
   ],
   "peerDependencies": {
     "formik": "^2.4.9",
-    "monaco-editor": "^0.55.1",
-    "monaco-yaml": "^5.5.1",
+    "monaco-editor": "^0.57.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
@@ -123,23 +122,22 @@
     "@vitejs/plugin-react": "^6.0.2",
     "formik": "^2.4.9",
     "jsdom": "^26.1.0",
-    "monaco-editor": "^0.55.1",
-    "monaco-yaml": "^5.5.1",
+    "monaco-editor": "^0.57.0",
+    "path-browserify": "^1.0.1",
     "publint": "^0.3.14",
     "react": "19.3.0",
     "react-dom": "19.3.0",
     "storybook": "10.5.8",
     "tailwindcss": "^4.3.0",
     "typescript": "^7.0.0",
+    "url": "^0.11.4",
     "vite": "^8.0.16",
-    "vitest": "^4.1.8"
+    "vitest": "^4.1.8",
+    "yaml-language-server": "^1.24.0"
   },
   "peerDependenciesMeta": {
     "monaco-editor": {
       "optional": true
-    },
-    "monaco-yaml": {
-      "optional": true
     }
   },
   "scripts": {