@dxos/plugin-script 0.10.0 → 0.11.1

package/dist/lib/components.mjs

@@ -0,0 +1,618 @@
+import { t as Compiler } from "./chunk-compiler.mjs";
+import { arrayMove, isNonNullable } from "@dxos/util";
+import { Obj } from "@dxos/echo";
+import { meta } from "#meta";
+import { log } from "@dxos/log";
+import { forwardRef, useCallback, useId, useMemo, useRef, useState } from "react";
+import { Avatar, DropdownMenu, ElevationProvider, Icon, IconButton, Input, ScrollArea, Toolbar, composable, composableProps, useAsyncEffect, useThemeContext, useTranslation } from "@dxos/react-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Mosaic } from "@dxos/react-ui-mosaic";
+import { mx } from "@dxos/ui-theme";
+import { Surface } from "@dxos/app-framework/ui";
+import { AppSurface } from "@dxos/app-toolkit/ui";
+import { Doc } from "@dxos/echo-doc";
+import { invariant } from "@dxos/invariant";
+import { TemplateEditor } from "@dxos/plugin-routine/components";
+import { QueryEditor as QueryEditor$1 } from "@dxos/react-ui-components";
+import { Editor, useTextEditor } from "@dxos/react-ui-editor";
+import { InputModeExtensions, createBasicExtensions, createDataExtensions, createMarkdownExtensions, createThemeExtensions, decorateMarkdown, defaultStyles } from "@dxos/ui-editor";
+import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
+import { javascript } from "@codemirror/lang-javascript";
+import { HighlightStyle } from "@codemirror/language";
+import { lintKeymap } from "@codemirror/lint";
+import { Prec } from "@codemirror/state";
+import { keymap } from "@codemirror/view";
+import { tags } from "@lezer/highlight";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { continueKeymap } from "@valtown/codemirror-continue";
+import { tsAutocomplete, tsFacet, tsHover, tsLinter, tsSync } from "@valtown/codemirror-ts";
+import { Domino } from "@dxos/ui";
+import { ModuleResolutionKind, ScriptTarget } from "typescript";
+import queryApi from "@dxos/echo-query/api.d.ts?raw";
+import { Atom } from "@effect-atom/atom";
+import { Menu, createGapSeparator, useMenuActions } from "@dxos/react-ui-menu";
+import { createDeploy, createFormat, createTemplateSelect, useDeployDeps } from "#hooks";
+import { JsonHighlighter } from "@dxos/react-ui-syntax-highlighter";
+//#region src/components/NotebookStack/NotebookMenu.tsx
+var NotebookMenu = ({ cell, onCellInsert, onCellDelete }) => {
+	const { t } = useTranslation(meta.profile.key);
+	return /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [/* @__PURE__ */ jsxs(DropdownMenu.Viewport, { children: [
+		/* @__PURE__ */ jsx(DropdownMenu.Item, {
+			onClick: () => onCellInsert?.("script", cell?.id),
+			children: t("notebook-cell-insert-script.label")
+		}),
+		/* @__PURE__ */ jsx(DropdownMenu.Item, {
+			onClick: () => onCellInsert?.("prompt", cell?.id),
+			children: t("notebook-cell-insert-prompt.label")
+		}),
+		/* @__PURE__ */ jsx(DropdownMenu.Item, {
+			onClick: () => onCellInsert?.("query", cell?.id),
+			children: t("notebook-cell-insert-query.label")
+		}),
+		/* @__PURE__ */ jsx(DropdownMenu.Item, {
+			onClick: () => onCellInsert?.("markdown", cell?.id),
+			children: t("notebook-cell-insert-markdown.label")
+		}),
+		cell && onCellDelete && /* @__PURE__ */ jsx(DropdownMenu.Item, {
+			onClick: () => onCellDelete?.(cell.id),
+			children: t("notebook-cell-delete.label")
+		})
+	] }), /* @__PURE__ */ jsx(DropdownMenu.Arrow, {})] }) });
+};
+//#endregion
+//#region src/components/TypescriptEditor/TypescriptEditor.tsx
+var TypescriptEditor = composable(({ classNames, id, role = "article", inputMode = "vscode", env, options, initialValue, extensions, scrollTo, selection, ...props }, forwardedRef) => {
+	const { themeMode } = useThemeContext();
+	const { parentRef, focusAttributes } = useTextEditor(() => ({
+		id,
+		initialValue,
+		selection,
+		scrollTo,
+		extensions: [
+			extensions,
+			createThemeExtensions({
+				monospace: true,
+				themeMode,
+				syntaxHighlighting: true
+			}),
+			createBasicExtensions({
+				highlightActiveLine: true,
+				indentWithTab: true,
+				lineNumbers: true,
+				lineWrapping: false,
+				scrollPastEnd: role === "article",
+				search: true,
+				...options
+			}),
+			InputModeExtensions[inputMode],
+			javascript({ typescript: true }),
+			autocompletion({ override: env ? [tsAutocomplete()] : void 0 }),
+			Prec.high(keymap.of(continueKeymap)),
+			keymap.of(completionKeymap),
+			keymap.of(lintKeymap),
+			env && [
+				tsFacet.of({
+					env,
+					path: `./src/${id}.ts`
+				}),
+				tsSync(),
+				tsLinter(),
+				tsHover({ renderTooltip: createTooltipRenderer(themeMode) })
+			]
+		].filter(isNonNullable)
+	}), [
+		themeMode,
+		id,
+		extensions,
+		inputMode,
+		selection,
+		scrollTo,
+		env
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		...composableProps(props, {
+			classNames,
+			...focusAttributes
+		}),
+		ref: composeRefs(parentRef, forwardedRef)
+	});
+});
+var createTooltipRenderer = (themeMode) => {
+	const theme = HighlightStyle.define(themeMode === "dark" ? defaultStyles.dark : defaultStyles.light);
+	const classFromKind = (_kind) => {
+		const kind = _kind.endsWith("Name") ? "name" : _kind;
+		if (!(kind in tags)) return "";
+		const tag = tags[kind];
+		if (typeof tag === "function") return "";
+		return theme.style([tag]) ?? "";
+	};
+	return (info) => {
+		const children = info.quickInfo?.displayParts?.map(({ kind, text }) => Domino.of("span").classNames(classFromKind(kind)).text(text)) ?? [];
+		return { dom: Domino.of("div").classNames("xs:max-w-80 max-w-lg p-1 dx-base-surface rounded-sm border border-separator").append(...children).root };
+	};
+};
+//#endregion
+//#region src/components/NotebookStack/NotebookCell.tsx
+var __dxlog_file$1 = "/__w/dxos/dxos/packages/plugins/plugin-script/src/components/NotebookStack/NotebookCell.tsx";
+var editorStyles = "p-2 ps-3";
+var valueStyles = "p-1 ps-3";
+var NotebookCell = ({ db, graph, dragging, cell, promptResults, env }) => {
+	const { t } = useTranslation(meta.profile.key);
+	const extensions = useMemo(() => {
+		return cell.source?.target ? [createDataExtensions({
+			id: cell.id,
+			text: Doc.createAccessor(cell.source.target, ["content"])
+		})] : [];
+	}, [cell.source?.target]);
+	const explorerGraph = cell.graph?.target;
+	const handleQueryChange = useCallback((value) => {
+		invariant(cell.source?.target, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file$1,
+			L: 59,
+			S: void 0,
+			A: ["cell.source?.target", ""]
+		});
+		Obj.update(cell.source.target, (obj) => {
+			obj.content = value;
+		});
+	}, [cell]);
+	switch (cell.type) {
+		case "markdown":
+			if (!cell.source?.target) return null;
+			return /* @__PURE__ */ jsx(NotebookTextEditor, {
+				id: cell.id,
+				classNames: editorStyles,
+				initialValue: cell.source.target.content,
+				extensions
+			});
+		case "script":
+			if (!cell.source?.target) return null;
+			return /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col divide-y divide-subdued-separator",
+				children: [/* @__PURE__ */ jsx(TypescriptEditor, {
+					id: cell.id,
+					role: "section",
+					classNames: editorStyles,
+					initialValue: cell.source.target.content,
+					extensions,
+					env,
+					options: {
+						placeholder: t("notebook-cell.placeholder"),
+						highlightActiveLine: false,
+						lineNumbers: false
+					}
+				}), /* @__PURE__ */ jsx(NotebookCellValue, {
+					cell,
+					graph
+				})]
+			});
+		case "query":
+			if (!cell.source?.target) return null;
+			return /* @__PURE__ */ jsxs("div", {
+				className: mx("h-full overflow-hidden grid", explorerGraph && !dragging && "grid-rows-[min-content_1fr]"),
+				children: [/* @__PURE__ */ jsx(QueryEditor$1, {
+					id: cell.id,
+					classNames: editorStyles,
+					db,
+					value: cell.source.target.content,
+					onChange: handleQueryChange
+				}), explorerGraph && !dragging && /* @__PURE__ */ jsx(Surface.Surface, {
+					type: AppSurface.Section,
+					limit: 1,
+					data: {
+						subject: explorerGraph,
+						attendableId: cell.id
+					}
+				})]
+			});
+		case "prompt":
+			if (!cell.prompt?.target) return null;
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TemplateEditor, {
+				id: cell.id,
+				source: cell.prompt.target.text,
+				lineNumbers: false,
+				classNames: editorStyles
+			}), /* @__PURE__ */ jsx(NotebookPromptResult, {
+				cell,
+				promptResults
+			})] });
+		default: return null;
+	}
+};
+var NotebookCellValue = ({ cell, graph }) => {
+	const name = graph?.getExpressions()[cell.id]?.name;
+	const value = graph?.getValue(cell.id);
+	if (value == null) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: mx("flex w-full bg-group-surface text-description font-mono", valueStyles),
+		children: [name && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: "text-success-text",
+			children: name
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-description",
+			children: "\xA0=\xA0"
+		})] }), /* @__PURE__ */ jsx("span", { children: value })]
+	});
+};
+var NotebookPromptResult = ({ cell, promptResults }) => {
+	if (!cell.prompt) return null;
+	const value = promptResults?.[cell.prompt.uri];
+	if (value == null) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: mx("flex w-full dx-group-surface text-description border-y border-subdued-separator", valueStyles),
+		children: /* @__PURE__ */ jsx(NotebookTextEditor, {
+			readOnly: true,
+			value
+		})
+	});
+};
+var NotebookTextEditor = ({ classNames, extensions: extensionsProp, readOnly, ...props }) => {
+	const { t } = useTranslation(meta.profile.key);
+	const { themeMode } = useThemeContext();
+	const extensions = useMemo(() => {
+		return [
+			createThemeExtensions({
+				themeMode,
+				syntaxHighlighting: true
+			}),
+			createBasicExtensions({
+				placeholder: t("notebook-markdown.placeholder"),
+				readOnly
+			}),
+			createMarkdownExtensions(),
+			decorateMarkdown(),
+			extensionsProp
+		].filter(isNonNullable);
+	}, [
+		extensionsProp,
+		readOnly,
+		themeMode,
+		t
+	]);
+	return /* @__PURE__ */ jsx(Editor.Root, { children: /* @__PURE__ */ jsx(Editor.View, {
+		...props,
+		classNames: mx("border focus-within:border-focus-ring-subtle", classNames),
+		extensions,
+		selectionEnd: true
+	}) });
+};
+//#endregion
+//#region src/components/NotebookStack/NotebookStack.tsx
+var minSectionHeight = "min-h-[16rem]";
+var getCellId = (cell) => cell.id;
+var NotebookStack = composable(({ notebook, db, graph, promptResults, onCellInsert, onCellDelete, env, ...props }, forwardedRef) => {
+	const [viewport, setViewport] = useState(null);
+	const Tile = useCallback((tileProps) => /* @__PURE__ */ jsx(NotebookSection, {
+		...tileProps,
+		db,
+		graph,
+		promptResults,
+		onCellInsert,
+		onCellDelete,
+		env
+	}), [
+		db,
+		graph,
+		promptResults,
+		onCellInsert,
+		onCellDelete,
+		env
+	]);
+	const instanceId = useId();
+	const eventHandler = useMemo(() => ({
+		id: `notebook:${notebook?.id ?? "anon"}:${instanceId}`,
+		canDrop: ({ source }) => !!notebook && notebook.cells.some((cell) => cell.id === source.id),
+		onDrop: ({ source, target }) => {
+			if (!notebook || !target) return;
+			const to = target.type === "tile" || target.type === "placeholder" ? target.location : target.type === "container" ? notebook.cells.length : -1;
+			const insertIndex = typeof to === "number" && to >= 0 ? Math.floor(to) : -1;
+			if (insertIndex < 0) return;
+			Obj.update(notebook, (notebook) => {
+				const from = notebook.cells.findIndex((cell) => cell.id === source.id);
+				if (from !== -1) arrayMove(notebook.cells, from, insertIndex);
+			});
+		}
+	}), [notebook, instanceId]);
+	return /* @__PURE__ */ jsx(Mosaic.Container, {
+		asChild: true,
+		orientation: "vertical",
+		autoScroll: viewport,
+		eventHandler,
+		ref: forwardedRef,
+		children: /* @__PURE__ */ jsx(ScrollArea.Root, {
+			orientation: "vertical",
+			padding: true,
+			...composableProps(props),
+			children: /* @__PURE__ */ jsx(ScrollArea.Viewport, {
+				ref: setViewport,
+				children: /* @__PURE__ */ jsx(Mosaic.Stack, {
+					orientation: "vertical",
+					items: notebook?.cells ?? [],
+					getId: getCellId,
+					Tile
+				})
+			})
+		})
+	});
+});
+var NotebookSection = ({ data: cell, db, env, graph, promptResults, onCellInsert, onCellDelete, ...tileProps }) => {
+	const { t } = useTranslation(meta.profile.key);
+	const resizable = cell.type === "query";
+	const [dragHandle, setDragHandle] = useState(null);
+	return /* @__PURE__ */ jsxs(Mosaic.Tile, {
+		...tileProps,
+		data: cell,
+		dragHandle,
+		classNames: mx("grid grid-cols-[min-content_1fr] overflow-visible border border-subdued-separator", resizable && minSectionHeight),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col p-1 border-e border-subdued-separator dx-attention-surface",
+			children: [/* @__PURE__ */ jsx(IconButton, {
+				ref: setDragHandle,
+				variant: "ghost",
+				icon: "ph--dots-six-vertical--regular",
+				iconOnly: true,
+				label: "Drag handle"
+			}), /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [/* @__PURE__ */ jsx(DropdownMenu.Trigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(IconButton, {
+					variant: "ghost",
+					icon: "ph--dots-three--regular",
+					iconOnly: true,
+					label: t("notebook-cell-insert.label")
+				})
+			}), /* @__PURE__ */ jsx(NotebookMenu, {
+				cell,
+				onCellInsert,
+				onCellDelete
+			})] })]
+		}), /* @__PURE__ */ jsx(NotebookCell, {
+			db,
+			cell,
+			env,
+			graph,
+			promptResults
+		})]
+	});
+};
+//#endregion
+//#region src/components/QueryEditor/QueryEditor.tsx
+var GLOBALS = `
+  namespace QueryAPI {
+    ${queryApi}
+  }
+
+  declare global {
+    const Query: typeof QueryAPI.Query;
+    const Filter: typeof QueryAPI.Filter;
+    const Order: typeof QueryAPI.Order;
+  }
+
+  export {};
+`;
+var QueryEditor = (props) => {
+	const [compiler, setCompiler] = useState();
+	useAsyncEffect(async () => {
+		const compiler = new Compiler({
+			lib: ["ES5"],
+			target: ScriptTarget.ES2022,
+			moduleResolution: ModuleResolutionKind.Bundler
+		});
+		await compiler.initialize(GLOBALS);
+		setCompiler(compiler);
+	}, []);
+	if (!compiler) return null;
+	return /* @__PURE__ */ jsx(TypescriptEditor, {
+		...props,
+		env: compiler.environment
+	});
+};
+//#endregion
+//#region src/components/ScriptToolbar/ScriptToolbar.tsx
+var ScriptToolbar = composable(({ script, attendableId, role, state, ...props }, forwardedRef) => {
+	const { t } = useTranslation(meta.profile.key);
+	const options = useDeployDeps({ script });
+	const menuActions = useMenuActions(useMemo(() => createToolbarActions({
+		state,
+		script,
+		t,
+		...options
+	}), [
+		state,
+		script,
+		options,
+		t
+	]));
+	return /* @__PURE__ */ jsx(ElevationProvider, {
+		elevation: role === AppSurface.Section.role ? "positioned" : "base",
+		children: /* @__PURE__ */ jsx(Menu.Root, {
+			...menuActions,
+			attendableId,
+			children: /* @__PURE__ */ jsx(Menu.Toolbar, {
+				...composableProps(props),
+				ref: forwardedRef
+			})
+		})
+	});
+});
+var createToolbarActions = ({ state, script, ...options }) => Atom.make((get) => {
+	get(state.atom);
+	const templateSelect = createTemplateSelect(script);
+	const format = createFormat(script);
+	const gap = createGapSeparator();
+	const deploy = createDeploy({
+		state,
+		script,
+		...options
+	});
+	return {
+		nodes: [
+			...templateSelect.nodes,
+			...format.nodes,
+			...gap.nodes,
+			...deploy.nodes
+		],
+		edges: [
+			...templateSelect.edges,
+			...format.edges,
+			...gap.edges,
+			...deploy.edges
+		]
+	};
+});
+//#endregion
+//#region src/components/TestPanel/TestPanel.tsx
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-script/src/components/TestPanel/TestPanel.tsx";
+var TestPanel = composable(({ classNames, onInvoke, ...props }, forwardedRef) => {
+	const { t } = useTranslation(meta.profile.key);
+	const inputRef = useRef(null);
+	const [input, setInput] = useState("");
+	const [state, setState] = useState(null);
+	const [history, setHistory] = useState([]);
+	const scrollerRef = useRef(null);
+	const handleScroll = () => {
+		if (scrollerRef.current) scrollerRef.current.scrollTop = scrollerRef.current.scrollHeight;
+	};
+	const handleClear = () => {
+		setInput("");
+		setHistory([]);
+		inputRef.current?.focus();
+	};
+	const handleResponse = ({ text, data, error } = {}) => {
+		setHistory((history) => [...history, {
+			type: "response",
+			text,
+			data,
+			error
+		}]);
+		setState(null);
+		handleScroll();
+	};
+	const handleRequest = async (input) => {
+		if (!onInvoke) {
+			handleResponse({ error: /* @__PURE__ */ new Error("Function not deployed") });
+			return;
+		}
+		let data = input;
+		let displayText = input;
+		if (input.charAt(0) === "{") try {
+			const validJsonString = input.replace(/'/g, "\"").replace(/([{,]\s*)([a-zA-Z0-9_]+)(\s*:)/g, "$1\"$2\"$3");
+			data = JSON.parse(validJsonString);
+			displayText = JSON.stringify(data, null, 2);
+		} catch (err) {
+			handleResponse({ error: /* @__PURE__ */ new Error("Invalid JSON input") });
+			return;
+		}
+		try {
+			setState("pending");
+			setInput("");
+			setHistory((history) => [...history, {
+				type: "request",
+				text: displayText
+			}]);
+			setTimeout(handleScroll);
+			const result = await onInvoke(data);
+			if (typeof result === "string") handleResponse({ text: result });
+			else handleResponse({ data: result });
+		} catch (err) {
+			const error = err instanceof Error ? err : new Error(String(err));
+			handleResponse({ error });
+			log.catch(err, void 0, {
+				"~LogMeta": "~LogMeta",
+				F: __dxlog_file,
+				L: 105,
+				S: void 0
+			});
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...composableProps(props, { classNames: ["flex flex-col h-full overflow-hidden", classNames] }),
+		ref: forwardedRef,
+		children: [/* @__PURE__ */ jsx(MessageThread, {
+			ref: scrollerRef,
+			state,
+			history
+		}), /* @__PURE__ */ jsxs(Toolbar.Root, { children: [
+			/* @__PURE__ */ jsx(Input.Root, { children: /* @__PURE__ */ jsx(Input.TextInput, {
+				ref: inputRef,
+				autoFocus: true,
+				placeholder: t("function-request.placeholder"),
+				value: input,
+				onChange: (ev) => setInput(ev.target.value),
+				onKeyDown: (ev) => ev.key === "Enter" && handleRequest(input)
+			}) }),
+			/* @__PURE__ */ jsx(Toolbar.IconButton, {
+				icon: "ph--play--regular",
+				label: "Execute",
+				iconOnly: true,
+				onClick: () => handleRequest(input)
+			}),
+			/* @__PURE__ */ jsx(Toolbar.IconButton, {
+				icon: "ph--trash--regular",
+				label: "Clear",
+				iconOnly: true,
+				onClick: handleClear
+			})
+		] })]
+	});
+});
+var MessageThread = forwardRef(({ state, history }, forwardedRef) => {
+	return /* @__PURE__ */ jsx(ScrollArea.Root, {
+		orientation: "vertical",
+		classNames: "h-full",
+		ref: forwardedRef,
+		children: /* @__PURE__ */ jsxs(ScrollArea.Viewport, {
+			classNames: "gap-6 p-2",
+			children: [history.map((message, i) => /* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-[var(--dx-rail-item)_1fr_var(--dx-rail-item)]",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "p-1",
+					children: message.type === "response" && /* @__PURE__ */ jsx(RobotAvatar, {})
+				}), /* @__PURE__ */ jsx("div", {
+					className: "overflow-auto",
+					children: /* @__PURE__ */ jsx(MessageItem, { message })
+				})]
+			}, i)), state === "pending" && /* @__PURE__ */ jsx("div", {
+				className: "grid grid-cols-[var(--dx-rail-item)_1fr_var(--dx-rail-item)]",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "p-1",
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: "ph--spinner--regular",
+						size: 6,
+						classNames: "animate-spin"
+					})
+				})
+			})]
+		})
+	});
+});
+var MessageItem = ({ classNames, message }) => {
+	const { type, text, data, error } = message;
+	const wrapper = "p-1 px-2 rounded-md bg-hover-surface overflow-auto";
+	return /* @__PURE__ */ jsxs("div", {
+		className: mx("flex", type === "request" ? "ml-[1rem] justify-end" : "mr-[1rem]", classNames),
+		children: [
+			error && /* @__PURE__ */ jsx("div", {
+				className: mx(wrapper, "whitespace-pre text-error-text"),
+				children: String(error)
+			}),
+			text !== void 0 && /* @__PURE__ */ jsx("div", {
+				className: mx(wrapper, type === "request" && "bg-primary-500 dark:bg-primary-600"),
+				children: text || "Ø"
+			}),
+			data && /* @__PURE__ */ jsx(JsonHighlighter, {
+				data,
+				classNames: mx(wrapper, "text-xs")
+			})
+		]
+	});
+};
+var RobotAvatar = () => /* @__PURE__ */ jsx(Avatar.Root, { children: /* @__PURE__ */ jsx(Avatar.Content, {
+	size: 6,
+	variant: "circle",
+	icon: "ph--drone--regular"
+}) });
+//#endregion
+export { NotebookMenu, NotebookStack, QueryEditor, ScriptToolbar, TestPanel, TypescriptEditor };
+
+//# sourceMappingURL=components.mjs.map