@parallelworks/ui 0.51.0 → 0.53.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parallelworks/ui",
-  "version": "0.51.0",
+  "version": "0.53.0",
   "description": "React UI components: a theme contract, icons, brand logos, 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": {
@@ -10,7 +10,9 @@
   },
   "type": "module",
   "sideEffects": [
-    "**/*.css"
+    "**/*.css",
+    "./src/editor/monacoFeatures.ts",
+    "./dist/editor/monacoFeatures.js"
   ],
   "exports": {
     ".": {
@@ -96,6 +98,7 @@
     "clsx": "^2.1.1",
     "css-tree": "^3.2.1",
     "dequal": "^2.0.3",
+    "katex": "^0.16.27",
     "lucide-react": "1.52.0",
     "luxon": "^3.7.2",
     "react-zoom-pan-pinch": "^4.2.0",

package/dist/components/Breadcrumbs.d.ts

@@ -1,37 +0,0 @@
-import React from 'react';
-export interface IBreadcrumbItem {
-    label: string;
-    href?: string;
-    newWindow?: boolean;
-}
-interface BreadcrumbContextType {
-    breadcrumbs: IBreadcrumbItem[];
-    setBreadcrumbs: (breadcrumbs: IBreadcrumbItem[]) => void;
-    rightsideBreadcrumb?: IBreadcrumbItem | null;
-    setRightsideBreadcrumb: (breadcrumb: IBreadcrumbItem | null) => void;
-    hidden: boolean;
-    setHidden: (hidden: boolean) => void;
-    /** Null whenever the breadcrumb strip isn't rendered (classic chrome). */
-    titleActionSlot: HTMLElement | null;
-    setTitleActionSlot: (el: HTMLElement | null) => void;
-    rightActionSlot: HTMLElement | null;
-    setRightActionSlot: (el: HTMLElement | null) => void;
-    /** Pathname whose breadcrumbs a page set itself, so layouts leave it alone. */
-    claimedPath: React.MutableRefObject<string | null>;
-}
-export declare const useBreadcrumb: () => BreadcrumbContextType;
-export declare function BreadcrumbProvider({ children }: {
-    children: React.ReactNode;
-}): React.JSX.Element;
-export declare function useSetBreadcrumbs(getBreadcrumbs: (() => IBreadcrumbItem[]) | IBreadcrumbItem[]): void;
-/**
- * For layout routes that derive breadcrumbs from the URL: applies them only
- * while no page under the layout has set its own for the current path.
- * Without this, a layout re-running its effect (for example when the
- * organization's display name loads) overwrote the page's breadcrumbs.
- */
-export declare function useSetDefaultBreadcrumbs(getBreadcrumbs: (() => IBreadcrumbItem[]) | IBreadcrumbItem[]): void;
-/** For pages that render their own header instead of the breadcrumb strip. */
-export declare function useClearBreadcrumbs(): void;
-export declare function useHideBreadcrumbs(hidden: boolean): void;
-export {};

package/dist/components/Breadcrumbs.js

@@ -1,90 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import React, { createContext, useContext, useEffect, useLayoutEffect, useMemo } from "react";
-//#region src/components/Breadcrumbs.tsx
-var BreadcrumbContext = createContext({
-	breadcrumbs: [],
-	setBreadcrumbs: () => {},
-	rightsideBreadcrumb: null,
-	setRightsideBreadcrumb: () => {},
-	hidden: false,
-	setHidden: () => {},
-	titleActionSlot: null,
-	setTitleActionSlot: () => {},
-	rightActionSlot: null,
-	setRightActionSlot: () => {},
-	claimedPath: { current: null }
-});
-var useBreadcrumb = () => useContext(BreadcrumbContext);
-function BreadcrumbProvider({ children }) {
-	const [breadcrumbs, setBreadcrumbs] = React.useState([]);
-	const [rightsideBreadcrumb, setRightsideBreadcrumb] = React.useState(null);
-	const [hidden, setHidden] = React.useState(false);
-	const [titleActionSlot, setTitleActionSlot] = React.useState(null);
-	const [rightActionSlot, setRightActionSlot] = React.useState(null);
-	const claimedPath = React.useRef(null);
-	const value = useMemo(() => ({
-		breadcrumbs,
-		setBreadcrumbs,
-		rightsideBreadcrumb,
-		setRightsideBreadcrumb,
-		hidden,
-		setHidden,
-		titleActionSlot,
-		setTitleActionSlot,
-		rightActionSlot,
-		setRightActionSlot,
-		claimedPath
-	}), [
-		breadcrumbs,
-		rightsideBreadcrumb,
-		hidden,
-		titleActionSlot,
-		rightActionSlot
-	]);
-	return /* @__PURE__ */ jsx(BreadcrumbContext.Provider, {
-		value,
-		children
-	});
-}
-function useSetBreadcrumbs(getBreadcrumbs) {
-	const { setBreadcrumbs, claimedPath } = useBreadcrumb();
-	useLayoutEffect(() => {
-		claimedPath.current = window.location.pathname;
-		setBreadcrumbs(typeof getBreadcrumbs === "function" ? getBreadcrumbs() : getBreadcrumbs);
-	}, [
-		getBreadcrumbs,
-		setBreadcrumbs,
-		claimedPath
-	]);
-}
-/**
-* For layout routes that derive breadcrumbs from the URL: applies them only
-* while no page under the layout has set its own for the current path.
-* Without this, a layout re-running its effect (for example when the
-* organization's display name loads) overwrote the page's breadcrumbs.
-*/
-function useSetDefaultBreadcrumbs(getBreadcrumbs) {
-	const { setBreadcrumbs, claimedPath } = useBreadcrumb();
-	useLayoutEffect(() => {
-		if (claimedPath.current === window.location.pathname) return;
-		setBreadcrumbs(typeof getBreadcrumbs === "function" ? getBreadcrumbs() : getBreadcrumbs);
-	}, [
-		getBreadcrumbs,
-		setBreadcrumbs,
-		claimedPath
-	]);
-}
-var EMPTY_BREADCRUMBS = [];
-/** For pages that render their own header instead of the breadcrumb strip. */
-function useClearBreadcrumbs() {
-	useSetBreadcrumbs(EMPTY_BREADCRUMBS);
-}
-function useHideBreadcrumbs(hidden) {
-	const { setHidden } = useBreadcrumb();
-	useEffect(() => {
-		setHidden(hidden);
-		return () => setHidden(false);
-	}, [hidden, setHidden]);
-}
-//#endregion
-export { BreadcrumbProvider, useBreadcrumb, useClearBreadcrumbs, useHideBreadcrumbs, useSetBreadcrumbs, useSetDefaultBreadcrumbs };

package/dist/components/CopyToClipboard.d.ts

@@ -1,17 +0,0 @@
-interface ICopyToClipboardProps {
-    as?: 'div' | 'button';
-    text: string;
-    className?: string;
-    children?: React.ReactNode;
-    showIcon?: boolean;
-}
-export default function CopyToClipboard({ as, text, className, children, showIcon, }: ICopyToClipboardProps): import("react").JSX.Element;
-interface CopyCodeBlockProps {
-    textToCopy: string;
-    children: React.ReactNode;
-    secret?: boolean;
-    isRevealed?: boolean;
-    onRevealToggle?: () => void;
-}
-export declare function CopyCodeBlock({ textToCopy, children, secret, isRevealed, onRevealToggle, }: CopyCodeBlockProps): import("react").JSX.Element;
-export {};

package/dist/components/CopyToClipboard.js

@@ -1,66 +0,0 @@
-import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "../icons.js";
-import { useStrings } from "./Provider.js";
-import { useCopy } from "./useCopy.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/CopyToClipboard.tsx
-function CopyToClipboard({ as = "div", text, className, children, showIcon = true }) {
-	const { common } = useStrings();
-	const { copy } = useCopy();
-	const handleCopy = () => void copy(text);
-	return /* @__PURE__ */ jsxs(as, {
-		className,
-		onClick: handleCopy,
-		...as === "button" ? { type: "button" } : {
-			role: "button",
-			"aria-label": common.copy,
-			tabIndex: 0,
-			onKeyDown: (e) => {
-				if (e.key === "Enter" || e.key === " ") {
-					e.preventDefault();
-					handleCopy();
-				}
-			}
-		},
-		children: [showIcon && /* @__PURE__ */ jsx(CopyIcon, {}), children]
-	});
-}
-function CopyCodeBlock({ textToCopy, children, secret = false, isRevealed = false, onRevealToggle }) {
-	const { common } = useStrings();
-	const { copy, copied } = useCopy();
-	const handleCopy = () => {
-		if (!copied) copy(textToCopy);
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: "group relative",
-		role: "none",
-		onClick: handleCopy,
-		children: [/* @__PURE__ */ jsx("pre", {
-			className: `p-4 theme-hover border rounded-lg text-left font-mono text-sm overflow-x-auto ${secret ? "pr-24" : "pr-12"}`,
-			children
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "absolute top-0 right-0 bottom-0 flex items-center gap-1 pl-8 pr-2 bg-gradient-to-l from-[var(--color-panel)] from-70% to-transparent rounded-r-lg",
-			children: [secret && /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: (e) => {
-					e.stopPropagation();
-					onRevealToggle?.();
-				},
-				className: "p-2 rounded-md opacity-0 group-hover:opacity-100 transition-all duration-150",
-				"aria-label": isRevealed ? common.hideValue : common.showValue,
-				title: isRevealed ? common.hideValue : common.showValue,
-				children: isRevealed ? /* @__PURE__ */ jsx(EyeIcon, {}) : /* @__PURE__ */ jsx(EyeOffIcon, {})
-			}), /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: (e) => {
-					e.stopPropagation();
-					handleCopy();
-				},
-				className: "p-2 rounded-md opacity-0 group-hover:opacity-100 transition-all duration-150",
-				"aria-label": copied ? common.copied : common.copyToClipboard,
-				children: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-green-400" }) : /* @__PURE__ */ jsx(CopyIcon, {})
-			})]
-		})]
-	});
-}
-//#endregion
-export { CopyCodeBlock, CopyToClipboard as default };

package/dist/components/Sort.d.ts

@@ -1,9 +0,0 @@
-export type TDirection = 'ascending' | 'descending' | 'unsorted';
-declare function Sort<T extends string>({ currentlySorted, name, setCurrentDirection, setCurrentlySorted, currentDirection, }: {
-    currentlySorted: T | null;
-    name: NoInfer<T>;
-    setCurrentDirection: (direction: TDirection) => void;
-    setCurrentlySorted: (value: NoInfer<T> | '') => void;
-    currentDirection: TDirection;
-}): import("react").JSX.Element;
-export default Sort;

package/dist/components/Sort.js

@@ -1,42 +0,0 @@
-import { SortDownIcon, SortUnsortedIcon, SortUpIcon } from "../icons.js";
-import { useStrings } from "./Provider.js";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/Sort.tsx
-var SortIcon = ({ currentlySorted, currentDirection, name }) => {
-	const style = { transform: "translateY(2px)" };
-	if (currentlySorted === name) {
-		if (currentDirection === "ascending") return /* @__PURE__ */ jsx(SortDownIcon, { style });
-		else if (currentDirection === "descending") return /* @__PURE__ */ jsx(SortUpIcon, { style });
-	} else return /* @__PURE__ */ jsx(SortUnsortedIcon, { style });
-	return null;
-};
-function Sort({ currentlySorted, name, setCurrentDirection, setCurrentlySorted, currentDirection }) {
-	const t = useStrings().common;
-	const sort = (sorted, direction) => {
-		if (sorted === name) {
-			if (direction === "ascending") setCurrentDirection("descending");
-			else if (direction === "descending") {
-				setCurrentDirection("unsorted");
-				setCurrentlySorted("");
-			}
-		} else {
-			setCurrentDirection("ascending");
-			setCurrentlySorted(name);
-		}
-	};
-	return /* @__PURE__ */ jsx("div", {
-		className: "inline",
-		children: /* @__PURE__ */ jsx("button", {
-			type: "button",
-			"aria-label": t.sort,
-			onClick: () => sort(currentlySorted, currentDirection),
-			children: /* @__PURE__ */ jsx(SortIcon, {
-				currentDirection,
-				currentlySorted,
-				name
-			})
-		})
-	});
-}
-//#endregion
-export { Sort as default };

package/dist/file-explorer/FilePreview/CodePreviewEditor.d.ts

@@ -1,6 +0,0 @@
-interface CodePreviewEditorProps {
-    value: string;
-    language: string;
-}
-export default function CodePreviewEditor({ value, language }: CodePreviewEditorProps): import("react").JSX.Element;
-export {};

package/dist/file-explorer/FilePreview/CodePreviewEditor.js

@@ -1,64 +0,0 @@
-import { useCssIsDark } from "../../components/useCssIsDark.js";
-import { defineEditorThemes, followThemeTokens, getThemeName } from "../../editor/themes.js";
-import { setupMonacoWorkers } from "../../editor/workers.js";
-import { jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
-import * as monaco from "monaco-editor";
-//#region src/file-explorer/FilePreview/CodePreviewEditor.tsx
-var OPTIONS = {
-	readOnly: true,
-	domReadOnly: true,
-	automaticLayout: true,
-	minimap: { enabled: false },
-	scrollBeyondLastLine: false,
-	renderLineHighlight: "none",
-	overviewRulerLanes: 0,
-	hideCursorInOverviewRuler: true,
-	lineNumbers: "on",
-	wordWrap: "off",
-	fontSize: 12,
-	scrollbar: { alwaysConsumeMouseWheel: false }
-};
-setupMonacoWorkers();
-function CodePreviewEditor({ value, language }) {
-	const isDark = useCssIsDark();
-	const editorRef = useRef(null);
-	useEffect(() => {
-		return () => {
-			editorRef.current?.getModel()?.dispose();
-			editorRef.current?.dispose();
-			editorRef.current = null;
-		};
-	}, []);
-	useEffect(() => {
-		const model = editorRef.current?.getModel();
-		if (model && model.getValue() !== value) model.setValue(value);
-	}, [value]);
-	useEffect(() => {
-		const model = editorRef.current?.getModel();
-		if (model) monaco.editor.setModelLanguage(model, language);
-	}, [language]);
-	useEffect(() => {
-		if (editorRef.current) {
-			defineEditorThemes(monaco.editor);
-			monaco.editor.setTheme(getThemeName(isDark));
-		}
-		return followThemeTokens(monaco.editor, () => getThemeName(isDark));
-	}, [isDark]);
-	return /* @__PURE__ */ jsx("div", {
-		className: "h-full w-full",
-		ref: (container) => {
-			if (container && !editorRef.current) {
-				defineEditorThemes(monaco.editor);
-				const model = monaco.editor.createModel(value, language);
-				editorRef.current = monaco.editor.create(container, {
-					...OPTIONS,
-					model
-				});
-				monaco.editor.setTheme(getThemeName(isDark));
-			}
-		}
-	});
-}
-//#endregion
-export { CodePreviewEditor as default };