@dxos/plugin-script 0.9.0 → 0.9.1-staging.ee54ba693a

package/dist/lib/neutral/components/index.mjs

@@ -3,15 +3,12 @@ import {
 } from "../chunk-2REUEDUA.mjs";
 import "../chunk-J5LGTIGS.mjs";
 
-// src/components/index.ts
-import { lazy } from "react";
-
 // src/components/NotebookStack/NotebookMenu.tsx
 import React from "react";
 import { DropdownMenu, useTranslation } from "@dxos/react-ui";
 import { meta } from "#meta";
 var NotebookMenu = ({ cell, onCellInsert, onCellDelete }) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   return /* @__PURE__ */ React.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React.createElement(DropdownMenu.Viewport, null, /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
     onClick: () => onCellInsert?.("script", cell?.id)
   }, t("notebook-cell-insert-script.label")), /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
@@ -26,10 +23,13 @@ var NotebookMenu = ({ cell, onCellInsert, onCellDelete }) => {
 };
 
 // src/components/NotebookStack/NotebookStack.tsx
-import React4 from "react";
-import { DropdownMenu as DropdownMenu2, IconButton, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import React4, { useCallback as useCallback2, useMemo as useMemo2, useState } from "react";
+import { Obj as Obj2 } from "@dxos/echo";
+import { DropdownMenu as DropdownMenu2, IconButton, ScrollArea, useTranslation as useTranslation3 } from "@dxos/react-ui";
 import { composable as composable2, composableProps as composableProps2 } from "@dxos/react-ui";
-import { Stack, StackItem } from "@dxos/react-ui-stack";
+import { Mosaic } from "@dxos/react-ui-mosaic";
+import { mx as mx2 } from "@dxos/ui-theme";
+import { arrayMove } from "@dxos/util";
 import { meta as meta3 } from "#meta";
 
 // src/components/NotebookStack/NotebookCell.tsx
@@ -37,9 +37,9 @@ import React3, { useCallback, useMemo } from "react";
 import { Surface } from "@dxos/app-framework/ui";
 import { AppSurface } from "@dxos/app-toolkit/ui";
 import { Obj } from "@dxos/echo";
-import { createDocAccessor } from "@dxos/echo-client";
+import { Doc } from "@dxos/echo-doc";
 import { invariant } from "@dxos/invariant";
-import { TemplateEditor } from "@dxos/plugin-assistant/components";
+import { TemplateEditor } from "@dxos/plugin-routine/components";
 import { useThemeContext as useThemeContext2, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { QueryEditor } from "@dxos/react-ui-components";
 import { Editor } from "@dxos/react-ui-editor";
@@ -75,20 +75,20 @@ var TypescriptEditor = composable(({ classNames, id, role = "article", inputMode
     scrollTo,
     extensions: [
       extensions,
+      createThemeExtensions({
+        monospace: true,
+        themeMode,
+        syntaxHighlighting: true
+      }),
       createBasicExtensions({
         highlightActiveLine: true,
         indentWithTab: true,
         lineNumbers: true,
         lineWrapping: false,
-        scrollPastEnd: role !== "section",
+        scrollPastEnd: role === "article",
         search: true,
         ...options
       }),
-      createThemeExtensions({
-        monospace: true,
-        themeMode,
-        syntaxHighlighting: true
-      }),
       InputModeExtensions[inputMode],
       javascript({
         typescript: true
@@ -162,16 +162,16 @@ var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-script/src/components
 var editorStyles = "p-2 ps-3";
 var valueStyles = "p-1 ps-3";
 var NotebookCell = ({ db, graph, dragging, cell, promptResults, env }) => {
-  const { t } = useTranslation2(meta2.id);
+  const { t } = useTranslation2(meta2.profile.key);
   const extensions = useMemo(() => {
     return cell.source?.target ? [
       createDataExtensions({
         id: cell.id,
-        text: createDocAccessor(cell.source.target, [
+        text: Doc.createAccessor(cell.source.target, [
           "content"
         ])
       })
-    ].filter(isNonNullable2) : [];
+    ] : [];
   }, [
     cell.source?.target
   ]);
@@ -199,7 +199,9 @@ var NotebookCell = ({ db, graph, dragging, cell, promptResults, env }) => {
       if (!cell.source?.target) {
         return null;
       }
-      return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(TypescriptEditor, {
+      return /* @__PURE__ */ React3.createElement("div", {
+        className: "flex flex-col divide-y divide-subdued-separator"
+      }, /* @__PURE__ */ React3.createElement(TypescriptEditor, {
         id: cell.id,
         role: "section",
         classNames: editorStyles,
@@ -223,10 +225,7 @@ var NotebookCell = ({ db, graph, dragging, cell, promptResults, env }) => {
         className: mx("h-full overflow-hidden grid", explorerGraph && !dragging && "grid-rows-[min-content_1fr]")
       }, /* @__PURE__ */ React3.createElement(QueryEditor, {
         id: cell.id,
-        classNames: [
-          editorStyles,
-          "border-b border-subdued-separator"
-        ],
+        classNames: editorStyles,
         db,
         value: cell.source.target.content,
         onChange: handleQueryChange
@@ -245,7 +244,7 @@ var NotebookCell = ({ db, graph, dragging, cell, promptResults, env }) => {
       }
       return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(TemplateEditor, {
         id: cell.id,
-        source: cell.prompt.target.instructions,
+        source: cell.prompt.target.text,
         lineNumbers: false,
         classNames: editorStyles
       }), /* @__PURE__ */ React3.createElement(NotebookPromptResult, {
@@ -263,7 +262,7 @@ var NotebookCellValue = ({ cell, graph }) => {
     return null;
   }
   return /* @__PURE__ */ React3.createElement("div", {
-    className: mx("flex w-full bg-group-surface border-y border-subdued-separator text-description font-mono", valueStyles)
+    className: mx("flex w-full bg-group-surface text-description font-mono", valueStyles)
   }, name && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("span", {
     className: "text-success-text"
   }, name), /* @__PURE__ */ React3.createElement("span", {
@@ -286,26 +285,30 @@ var NotebookPromptResult = ({ cell, promptResults }) => {
   }));
 };
 var NotebookTextEditor = ({ extensions: extensionsProp, readOnly, ...props }) => {
-  const { t } = useTranslation2(meta2.id);
+  const { t } = useTranslation2(meta2.profile.key);
   const { themeMode } = useThemeContext2();
   const extensions = useMemo(() => {
     return [
-      createBasicExtensions2({
-        placeholder: t("notebook-markdown.placeholder"),
-        readOnly
-      }),
       createThemeExtensions2({
         themeMode,
         syntaxHighlighting: true
       }),
+      createBasicExtensions2({
+        placeholder: t("notebook-markdown.placeholder"),
+        readOnly
+      }),
       createMarkdownExtensions(),
       decorateMarkdown(),
       extensionsProp
     ].filter(isNonNullable2);
   }, [
-    extensionsProp
+    extensionsProp,
+    readOnly,
+    themeMode,
+    t
   ]);
   return /* @__PURE__ */ React3.createElement(Editor.Root, null, /* @__PURE__ */ React3.createElement(Editor.View, {
+    classNames: "border",
     ...props,
     extensions,
     selectionEnd: true
@@ -314,46 +317,86 @@ var NotebookTextEditor = ({ extensions: extensionsProp, readOnly, ...props }) =>
 
 // src/components/NotebookStack/NotebookStack.tsx
 var minSectionHeight = "min-h-[16rem]";
-var NotebookStack = composable2(({ notebook, onRearrange, db, graph, promptResults, onCellInsert, onCellDelete, env, ...props }, forwardedRef) => {
-  const sectionProps = {
+var getCellId = (cell) => cell.id;
+var NotebookStack = composable2(({ notebook, db, graph, promptResults, onCellInsert, onCellDelete, env, ...props }, forwardedRef) => {
+  const [viewport, setViewport] = useState(null);
+  const Tile = useCallback2((tileProps) => /* @__PURE__ */ React4.createElement(NotebookSection, {
+    ...tileProps,
     db,
     graph,
     promptResults,
     onCellInsert,
     onCellDelete,
     env
-  };
-  return /* @__PURE__ */ React4.createElement(Stack, {
-    ...composableProps2(props),
-    orientation: "vertical",
-    size: "contain",
-    rail: true,
-    onRearrange,
+  }), [
+    db,
+    graph,
+    promptResults,
+    onCellInsert,
+    onCellDelete,
+    env
+  ]);
+  const eventHandler = useMemo2(() => ({
+    id: notebook?.id ?? "notebook",
+    // Only the notebook's own cells are droppable; onDrop only reorders within this notebook.
+    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;
+      }
+      Obj2.update(notebook, (notebook2) => {
+        const from = notebook2.cells.findIndex((cell) => cell.id === source.id);
+        if (from !== -1) {
+          arrayMove(notebook2.cells, from, insertIndex);
+        }
+      });
+    }
+  }), [
+    notebook
+  ]);
+  return /* @__PURE__ */ React4.createElement(Mosaic.Root, {
     ref: forwardedRef
-  }, notebook?.cells.map((cell, i) => /* @__PURE__ */ React4.createElement(NotebookSection, {
-    key: i,
-    cell,
-    ...sectionProps
-  })));
+  }, /* @__PURE__ */ React4.createElement(Mosaic.Container, {
+    asChild: true,
+    orientation: "vertical",
+    autoScroll: viewport,
+    eventHandler
+  }, /* @__PURE__ */ React4.createElement(ScrollArea.Root, {
+    orientation: "vertical",
+    padding: true,
+    ...composableProps2(props)
+  }, /* @__PURE__ */ React4.createElement(ScrollArea.Viewport, {
+    ref: setViewport
+  }, /* @__PURE__ */ React4.createElement(Mosaic.Stack, {
+    orientation: "vertical",
+    items: notebook?.cells ?? [],
+    getId: getCellId,
+    Tile
+  })))));
 });
-var NotebookSection = ({ cell, db, env, promptResults, onCellInsert, onCellDelete, ...props }) => {
-  const { t } = useTranslation3(meta3.id);
+var NotebookSection = ({ data: cell, db, env, graph, promptResults, onCellInsert, onCellDelete, ...tileProps }) => {
+  const { t } = useTranslation3(meta3.profile.key);
   const resizable = cell.type === "query";
-  return /* @__PURE__ */ React4.createElement(StackItem.Root, {
-    role: "section",
-    item: cell,
-    draggable: true,
-    classNames: resizable && minSectionHeight
-  }, /* @__PURE__ */ React4.createElement(StackItem.Heading, {
-    classNames: "h-full p-1 justify-between dx-attention-surface"
-  }, /* @__PURE__ */ React4.createElement(StackItem.DragHandle, {
-    asChild: true
+  const [dragHandle, setDragHandle] = useState(null);
+  return /* @__PURE__ */ React4.createElement(Mosaic.Tile, {
+    ...tileProps,
+    data: cell,
+    dragHandle,
+    classNames: mx2("grid grid-cols-[min-content_1fr] overflow-visible border border-subdued-separator", resizable && minSectionHeight)
+  }, /* @__PURE__ */ React4.createElement("div", {
+    className: "flex flex-col p-1 border-e border-subdued-separator dx-attention-surface"
   }, /* @__PURE__ */ React4.createElement(IconButton, {
+    ref: setDragHandle,
     variant: "ghost",
     icon: "ph--dots-six-vertical--regular",
     iconOnly: true,
     label: "Drag handle"
-  })), /* @__PURE__ */ React4.createElement(DropdownMenu2.Root, null, /* @__PURE__ */ React4.createElement(DropdownMenu2.Trigger, {
+  }), /* @__PURE__ */ React4.createElement(DropdownMenu2.Root, null, /* @__PURE__ */ React4.createElement(DropdownMenu2.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React4.createElement(IconButton, {
     variant: "ghost",
@@ -364,26 +407,17 @@ var NotebookSection = ({ cell, db, env, promptResults, onCellInsert, onCellDelet
     cell,
     onCellInsert,
     onCellDelete
-  })), resizable && /* @__PURE__ */ React4.createElement(StackItem.ResizeHandle, null)), /* @__PURE__ */ React4.createElement(StackItem.DragPreview, null, ({ item: cell2 }) => /* @__PURE__ */ React4.createElement(StackItem.Content, {
-    classNames: "overflow-visible bg-group-surface border border-subdued-separator"
-  }, /* @__PURE__ */ React4.createElement(NotebookCell, {
-    db,
-    cell: cell2,
-    env,
-    dragging: true
-  }))), /* @__PURE__ */ React4.createElement(StackItem.Content, {
-    classNames: "overflow-visible"
-  }, /* @__PURE__ */ React4.createElement(NotebookCell, {
+  }))), /* @__PURE__ */ React4.createElement(NotebookCell, {
     db,
     cell,
     env,
-    promptResults,
-    ...props
-  })));
+    graph,
+    promptResults
+  }));
 };
 
 // src/components/QueryEditor/QueryEditor.tsx
-import React5, { useState } from "react";
+import React5, { useState as useState2 } from "react";
 import { ModuleResolutionKind, ScriptTarget } from "typescript";
 import queryApi from "@dxos/echo-query/api.d.ts?raw";
 import { useAsyncEffect } from "@dxos/react-ui";
@@ -401,7 +435,7 @@ var GLOBALS = `
   export {};
 `;
 var QueryEditor2 = (props) => {
-  const [compiler, setCompiler] = useState();
+  const [compiler, setCompiler] = useState2();
   useAsyncEffect(async () => {
     const compiler2 = new Compiler({
       lib: [
@@ -425,18 +459,19 @@ var QueryEditor2 = (props) => {
 
 // src/components/ScriptToolbar/ScriptToolbar.tsx
 import { Atom } from "@effect-atom/atom-react";
-import React6, { useMemo as useMemo2 } from "react";
+import React6, { useMemo as useMemo3 } from "react";
+import { AppSurface as AppSurface2 } from "@dxos/app-toolkit/ui";
 import { ElevationProvider, useTranslation as useTranslation4 } from "@dxos/react-ui";
 import { composable as composable3, composableProps as composableProps3 } from "@dxos/react-ui";
 import { Menu, createGapSeparator, useMenuActions } from "@dxos/react-ui-menu";
 import { createDeploy, createFormat, createTemplateSelect, useDeployDeps } from "#hooks";
 import { meta as meta4 } from "#meta";
 var ScriptToolbar = composable3(({ script, attendableId, role, state, ...props }, forwardedRef) => {
-  const { t } = useTranslation4(meta4.id);
+  const { t } = useTranslation4(meta4.profile.key);
   const options = useDeployDeps({
     script
   });
-  const menuCreator = useMemo2(() => createToolbarActions({
+  const menuCreator = useMemo3(() => createToolbarActions({
     state,
     script,
     t,
@@ -449,7 +484,7 @@ var ScriptToolbar = composable3(({ script, attendableId, role, state, ...props }
   ]);
   const menuActions = useMenuActions(menuCreator);
   return /* @__PURE__ */ React6.createElement(ElevationProvider, {
-    elevation: role === "section" ? "positioned" : "base"
+    elevation: role === AppSurface2.Section.role ? "positioned" : "base"
   }, /* @__PURE__ */ React6.createElement(Menu.Root, {
     ...menuActions,
     attendableId
@@ -485,20 +520,20 @@ var createToolbarActions = ({ state, script, ...options }) => Atom.make((get) =>
 });
 
 // src/components/TestPanel/TestPanel.tsx
-import React7, { forwardRef, useRef, useState as useState2 } from "react";
+import React7, { forwardRef, useRef, useState as useState3 } from "react";
 import { log } from "@dxos/log";
-import { Avatar, Icon, Input, ScrollArea, Toolbar, useTranslation as useTranslation5 } from "@dxos/react-ui";
+import { Avatar, Icon, Input, ScrollArea as ScrollArea2, Toolbar, useTranslation as useTranslation5 } from "@dxos/react-ui";
 import { composable as composable4, composableProps as composableProps4 } from "@dxos/react-ui";
 import { JsonHighlighter } from "@dxos/react-ui-syntax-highlighter";
-import { mx as mx2 } from "@dxos/ui-theme";
+import { mx as mx3 } from "@dxos/ui-theme";
 import { meta as meta5 } from "#meta";
 var __dxlog_file2 = "/__w/dxos/dxos/packages/plugins/plugin-script/src/components/TestPanel/TestPanel.tsx";
 var TestPanel = composable4(({ classNames, onInvoke, ...props }, forwardedRef) => {
-  const { t } = useTranslation5(meta5.id);
+  const { t } = useTranslation5(meta5.profile.key);
   const inputRef = useRef(null);
-  const [input, setInput] = useState2("");
-  const [state, setState] = useState2(null);
-  const [history, setHistory] = useState2([]);
+  const [input, setInput] = useState3("");
+  const [state, setState] = useState3(null);
+  const [history, setHistory] = useState3([]);
   const scrollerRef = useRef(null);
   const handleScroll = () => {
     if (scrollerRef.current) {
@@ -605,11 +640,11 @@ var TestPanel = composable4(({ classNames, onInvoke, ...props }, forwardedRef) =
   })));
 });
 var MessageThread = /* @__PURE__ */ forwardRef(({ state, history }, forwardedRef) => {
-  return /* @__PURE__ */ React7.createElement(ScrollArea.Root, {
+  return /* @__PURE__ */ React7.createElement(ScrollArea2.Root, {
     orientation: "vertical",
     classNames: "h-full",
     ref: forwardedRef
-  }, /* @__PURE__ */ React7.createElement(ScrollArea.Viewport, {
+  }, /* @__PURE__ */ React7.createElement(ScrollArea2.Viewport, {
     classNames: "gap-6 p-2"
   }, history.map((message, i) => /* @__PURE__ */ React7.createElement("div", {
     key: i,
@@ -634,14 +669,14 @@ 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__ */ React7.createElement("div", {
-    className: mx2("flex", type === "request" ? "ml-[1rem] justify-end" : "mr-[1rem]", classNames)
+    className: mx3("flex", type === "request" ? "ml-[1rem] justify-end" : "mr-[1rem]", classNames)
   }, error && /* @__PURE__ */ React7.createElement("div", {
-    className: mx2(wrapper, "whitespace-pre text-error-text")
+    className: mx3(wrapper, "whitespace-pre text-error-text")
   }, String(error)), text !== void 0 && /* @__PURE__ */ React7.createElement("div", {
-    className: mx2(wrapper, type === "request" && "bg-primary-500 dark:bg-primary-600")
+    className: mx3(wrapper, type === "request" && "bg-primary-500 dark:bg-primary-600")
   }, text || "\xD8"), data && /* @__PURE__ */ React7.createElement(JsonHighlighter, {
     data,
-    classNames: mx2(wrapper, "text-xs")
+    classNames: mx3(wrapper, "text-xs")
   }));
 };
 var RobotAvatar = () => /* @__PURE__ */ React7.createElement(Avatar.Root, null, /* @__PURE__ */ React7.createElement(Avatar.Content, {
@@ -649,14 +684,10 @@ var RobotAvatar = () => /* @__PURE__ */ React7.createElement(Avatar.Root, null,
   variant: "circle",
   icon: "ph--drone--regular"
 }));
-
-// src/components/index.ts
-var ScriptPluginSettings = lazy(() => import("../ScriptPluginSettings-T4JMUSHN.mjs"));
 export {
   NotebookMenu,
   NotebookStack,
   QueryEditor2 as QueryEditor,
-  ScriptPluginSettings,
   ScriptToolbar,
   TestPanel,
   TypescriptEditor