npm - @dxos/plugin-script - Versions diffs - 0.8.4-main.c4373fc → 0.8.4-main.c85a9c8dae - Mend

@dxos/plugin-script 0.8.4-main.c4373fc → 0.8.4-main.c85a9c8dae

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (512) hide show

package/src/capabilities/settings/settings.ts ADDED Viewed

@@ -0,0 +1,33 @@
+//
+// Copyright 2025 DXOS.org
+//
+import * as Effect from 'effect/Effect';
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { createKvsStore } from '@dxos/effect';
+import { meta } from '../../meta';
+import { ScriptCapabilities, ScriptSettings } from '../../types';
+export default Capability.makeModule(() =>
+  Effect.sync(() => {
+    const settingsAtom = createKvsStore({
+      key: meta.id,
+      schema: ScriptSettings,
+      defaultValue: () => ({
+        editorInputMode: 'vscode' as const,
+      }),
+    });
+    return [
+      Capability.contributes(ScriptCapabilities.Settings, settingsAtom),
+      Capability.contributes(AppCapabilities.Settings, {
+        prefix: meta.id,
+        schema: ScriptSettings,
+        atom: settingsAtom,
+      }),
+    ];
+  }),
+);

package/src/compiler/compiler.ts CHANGED Viewed

@@ -12,6 +12,8 @@ import ts from 'typescript';
 import { invariant } from '@dxos/invariant';
+const GLOBALS = 'globals.d.ts';
 const defaultOptions: ts.CompilerOptions = {
   lib: ['DOM', 'es2022'],
   target: ts.ScriptTarget.ES2022,
@@ -23,16 +25,21 @@ export class Compiler {
   constructor(private readonly _options: ts.CompilerOptions = defaultOptions) {}
-  async initialize(): Promise<void> {
+  async initialize(globals?: string): Promise<void> {
     if (this._env) {
       return;
     }
     // TODO(wittjosiah): Figure out how to get workers working in plugin packages.
     //   https://github.com/val-town/codemirror-ts?tab=readme-ov-file#setup-worker
-    this._fsMap = await createDefaultMapFromCDN(this._options, '5.5.4', true, ts);
+    this._fsMap = await createDefaultMapFromCDN(this._options, '5.7.2', true, ts);
+    if (globals) {
+      this._fsMap.set(GLOBALS, globals);
+    }
+    const rootFiles = globals ? [GLOBALS] : [];
     const system = createSystem(this._fsMap);
-    this._env = createVirtualTypeScriptEnvironment(system, [], ts, this._options);
+    this._env = createVirtualTypeScriptEnvironment(system, rootFiles, ts, this._options);
   }
   get environment() {

package/src/components/FrameContainer/FrameContainer.tsx CHANGED Viewed

@@ -5,13 +5,13 @@
 import React, { useEffect, useRef } from 'react';
 import { clientServiceBundle } from '@dxos/client-protocol';
-import { type BundleResult } from '@dxos/functions/bundler';
+import { type BundleResult } from '@dxos/functions-runtime/bundler';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
-import { baseSurface, mx } from '@dxos/react-ui-theme';
 import { createProtoRpcPeer } from '@dxos/rpc';
 import { createIFramePort } from '@dxos/rpc-tunnel';
+import { mx } from '@dxos/ui-theme';
 export type FrameContainerProps = {
   containerUrl: string;
@@ -49,7 +49,9 @@ export const FrameContainer = ({ containerUrl, result, debug = true }: FrameCont
   invariant(result.sourceHash, 'Source hash is required.');
   const sourceHash = Buffer.from(result.sourceHash).toString('hex');
   const src =
-    'bundle' in result ? `${containerUrl}?ts=${sourceHash}#code=${encodeURIComponent(result.bundle)}` : undefined;
+    'bundle' in result
+      ? `${containerUrl}?ts=${sourceHash}#code=${encodeURIComponent(new TextDecoder().decode(Object.values(result.bundle as any)[0] as Uint8Array))}`
+      : undefined;
   return (
     <>
@@ -59,8 +61,7 @@ export const FrameContainer = ({ containerUrl, result, debug = true }: FrameCont
         <div className='relative'>
           <div
             className={mx(
-              baseSurface,
-              'flex absolute right-2 bottom-2 w-[30rem] h-[200px] ring rounded',
+              'flex absolute right-2 bottom-2 w-[30rem] h-[200px] bg-base-surface ring rounded-sm',
               'z-20 overflow-x-hidden overflow-y-auto',
             )}
           >

package/src/components/FrameContainer/frame.html CHANGED Viewed

@@ -1,25 +1,25 @@
 <html>
-<head>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script type="importmap">
-    __IMPORT_MAP__
-  </script>
+  <head>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script type="importmap">
+      __IMPORT_MAP__
+    </script>
-  <script type="module">
-    import RefreshRuntime from '/@react-refresh';
-    RefreshRuntime.injectIntoGlobalHook(window);
-    window.$RefreshReg$ = () => {};
-    window.$RefreshSig$ = () => (type) => type;
-    window.__vite_plugin_react_preamble_installed__ = true;
-  </script>
-  <script type="module" src="/@vite/client"></script>
-</head>
-<body>
-  <div id="root"></div>
+    <script type="module">
+      import RefreshRuntime from '/@react-refresh';
+      RefreshRuntime.injectIntoGlobalHook(window);
+      window.$RefreshReg$ = () => {};
+      window.$RefreshSig$ = () => (type) => type;
+      window.__vite_plugin_react_preamble_installed__ = true;
+    </script>
+    <script type="module" src="/@vite/client"></script>
+  </head>
+  <body>
+    <div id="root"></div>
-  <!-- Prevent vite from compiling this. -->
-  <script type="module">
-    eval('import("@frame/main")');
-  </script>
-</body>
+    <!-- Prevent vite from compiling this. -->
+    <script type="module">
+      eval('import("@frame/main")');
+    </script>
+  </body>
 </html>

package/src/components/NotebookStack/NotebookCell.tsx ADDED Viewed

@@ -0,0 +1,215 @@
+//
+// Copyright 2025 DXOS.org
+//
+import React, { useCallback, useMemo } from 'react';
+import { Surface } from '@dxos/app-framework/ui';
+import { type Database, Obj } from '@dxos/echo';
+import { createDocAccessor } from '@dxos/echo-db';
+import { invariant } from '@dxos/invariant';
+import { TemplateEditor } from '@dxos/plugin-assistant';
+import { useThemeContext, useTranslation } from '@dxos/react-ui';
+import { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-components';
+import { EditorContent, type EditorContentProps } from '@dxos/react-ui-editor';
+import {
+  type BasicExtensionsOptions,
+  createBasicExtensions,
+  createDataExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
+  decorateMarkdown,
+} from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
+import { isNonNullable } from '@dxos/util';
+import { meta } from '../../meta';
+import { type ComputeGraph } from '../../notebook';
+import { type Notebook } from '../../types';
+import { TypescriptEditor, type TypescriptEditorProps } from '../TypescriptEditor';
+import { type NotebookMenuProps } from './NotebookMenu';
+const editorStyles = 'p-2 ps-3';
+const valueStyles = 'p-1 ps-3';
+export type NotebookCellProps = {
+  db?: Database.Database;
+  graph?: ComputeGraph;
+  dragging?: boolean;
+  cell: Notebook.Cell;
+  promptResults?: Record<string, string>;
+} & (Pick<NotebookMenuProps, 'onCellInsert' | 'onCellDelete'> & Pick<TypescriptEditorProps, 'env'>);
+// TODO(burdon): Show evaluation errors.
+export const NotebookCell = ({ db, graph, dragging, cell, promptResults, env }: NotebookCellProps) => {
+  const { t } = useTranslation(meta.id);
+  const extensions = useMemo(() => {
+    return cell.source?.target
+      ? [
+          createDataExtensions({
+            id: cell.id,
+            text: createDocAccessor(cell.source.target, ['content']),
+          }),
+        ].filter(isNonNullable)
+      : [];
+  }, [cell.source?.target]);
+  const explorerGraph = cell.graph?.target;
+  const handleQueryChange = useCallback<NonNullable<QueryEditorProps['onChange']>>(
+    (value: string) => {
+      invariant(cell.source?.target);
+      Obj.change(cell.source.target, (s) => {
+        s.content = value;
+      });
+    },
+    [cell],
+  );
+  switch (cell.type) {
+    case 'markdown':
+      if (!cell.source?.target) {
+        return null;
+      }
+      return (
+        <NotebookTextEditor
+          id={cell.id}
+          classNames={editorStyles}
+          initialValue={cell.source.target.content}
+          extensions={extensions}
+        />
+      );
+    case 'script':
+      if (!cell.source?.target) {
+        return null;
+      }
+      return (
+        <>
+          <TypescriptEditor
+            id={cell.id}
+            role='section'
+            classNames={editorStyles}
+            initialValue={cell.source.target.content}
+            extensions={extensions}
+            env={env}
+            options={{
+              placeholder: t('notebook cell placeholder'),
+              highlightActiveLine: false,
+              lineNumbers: false,
+            }}
+          />
+          <NotebookCellValue cell={cell} graph={graph} />
+        </>
+      );
+    case 'query':
+      if (!cell.source?.target) {
+        return null;
+      }
+      // TODO(burdon): Remove app-framework deps (via render prop).
+      return (
+        <div className={mx('h-full overflow-hidden grid', explorerGraph && !dragging && 'grid-rows-[min-content_1fr]')}>
+          <QueryEditor
+            id={cell.id}
+            classNames={[editorStyles, 'border-b border-subdued-separator']}
+            db={db}
+            value={cell.source.target.content}
+            onChange={handleQueryChange}
+          />
+          {explorerGraph && !dragging && <Surface.Surface role='section' limit={1} data={{ subject: explorerGraph }} />}
+        </div>
+      );
+    // TODO(burdon): Use streaming response from Chat.
+    case 'prompt':
+      if (!cell.prompt?.target) {
+        return null;
+      }
+      return (
+        <>
+          <TemplateEditor
+            id={cell.id}
+            template={cell.prompt.target.instructions}
+            lineNumbers={false}
+            classNames={editorStyles}
+          />
+          <NotebookPromptResult cell={cell} promptResults={promptResults} />
+        </>
+      );
+    default:
+      return null;
+  }
+};
+const NotebookCellValue = ({ cell, graph }: NotebookCellProps) => {
+  const name = graph?.getExpressions()[cell.id]?.name;
+  const value = graph?.getValue(cell.id);
+  if (value == null) {
+    return null;
+  }
+  return (
+    <div
+      className={mx(
+        'flex w-full bg-group-surface border-y border-subdued-separator text-description font-mono',
+        valueStyles,
+      )}
+    >
+      {name && (
+        <>
+          <span className='text-success-text'>{name}</span>
+          <span className='text-description'>&nbsp;=&nbsp;</span>
+        </>
+      )}
+      <span>{value}</span>
+    </div>
+  );
+};
+const NotebookPromptResult = ({ cell, promptResults }: NotebookCellProps) => {
+  if (!cell.prompt) {
+    return null;
+  }
+  const value = promptResults?.[cell.prompt.dxn.toString()];
+  if (value == null) {
+    return null;
+  }
+  return (
+    <div className={mx('flex w-full bg-group-surface text-description border-y border-subdued-separator', valueStyles)}>
+      <NotebookTextEditor readOnly value={value} />
+    </div>
+  );
+};
+const NotebookTextEditor = ({
+  extensions: extensionsProp,
+  readOnly,
+  ...props
+}: EditorContentProps & Pick<BasicExtensionsOptions, 'readOnly'>) => {
+  const { t } = useTranslation(meta.id);
+  const { themeMode } = useThemeContext();
+  const extensions = useMemo(() => {
+    return [
+      createBasicExtensions({
+        placeholder: t('notebook markdown placeholder'),
+        readOnly,
+      }),
+      createThemeExtensions({ themeMode, syntaxHighlighting: true }),
+      createMarkdownExtensions(),
+      decorateMarkdown(),
+      extensionsProp,
+    ].filter(isNonNullable);
+  }, [extensionsProp]);
+  return <EditorContent {...props} extensions={extensions} selectionEnd />;
+};

package/src/components/NotebookStack/NotebookMenu.tsx ADDED Viewed

@@ -0,0 +1,47 @@
+//
+// Copyright 2025 DXOS.org
+//
+import React from 'react';
+import { DropdownMenu, useTranslation } from '@dxos/react-ui';
+import { meta } from '../../meta';
+import { type Notebook } from '../../types';
+export type NotebookMenuProps = {
+  cell?: Notebook.Cell;
+  onCellInsert?: (type: Notebook.CellType, after: string | undefined) => void;
+  onCellDelete?: (id: string) => void;
+};
+// TODO(burdon): Better way to organize menu?
+export const NotebookMenu = ({ cell, onCellInsert, onCellDelete }: NotebookMenuProps) => {
+  const { t } = useTranslation(meta.id);
+  return (
+    <DropdownMenu.Portal>
+      <DropdownMenu.Content>
+        <DropdownMenu.Viewport>
+          <DropdownMenu.Item onClick={() => onCellInsert?.('script', cell?.id)}>
+            {t('notebook cell insert script label')}
+          </DropdownMenu.Item>
+          <DropdownMenu.Item onClick={() => onCellInsert?.('prompt', cell?.id)}>
+            {t('notebook cell insert prompt label')}
+          </DropdownMenu.Item>
+          <DropdownMenu.Item onClick={() => onCellInsert?.('query', cell?.id)}>
+            {t('notebook cell insert query label')}
+          </DropdownMenu.Item>
+          <DropdownMenu.Item onClick={() => onCellInsert?.('markdown', cell?.id)}>
+            {t('notebook cell insert markdown label')}
+          </DropdownMenu.Item>
+          {cell && onCellDelete && (
+            <DropdownMenu.Item onClick={() => onCellDelete?.(cell.id)}>
+              {t('notebook cell delete label')}
+            </DropdownMenu.Item>
+          )}
+        </DropdownMenu.Viewport>
+        <DropdownMenu.Arrow />
+      </DropdownMenu.Content>
+    </DropdownMenu.Portal>
+  );
+};

package/src/components/NotebookStack/NotebookStack.stories.tsx CHANGED Viewed

@@ -3,34 +3,52 @@
 //
 import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React, { useMemo } from 'react';
-import { withClientProvider } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { AutomationPlugin } from '@dxos/plugin-automation';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { corePlugins } from '@dxos/plugin-testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { createNotebook } from '../../testing';
 import { translations } from '../../translations';
 import { NotebookStack } from './NotebookStack';
+const NotebookStackStory = () => {
+  const notebook = useMemo(() => createNotebook(), []);
+  return <NotebookStack notebook={notebook} />;
+};
 const meta = {
-  title: 'plugins/plugin-script/NotebookStack',
-  component: NotebookStack,
-  decorators: [withTheme, withClientProvider()],
+  title: 'plugins/plugin-script/components/NotebookStack',
+  component: NotebookStackStory,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'column', classNames: 'w-prose-max-width' }),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        ClientPlugin({
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* Effect.promise(() => client.halo.createIdentity());
+              yield* Effect.promise(() => client.spaces.waitUntilReady());
+            }),
+        }),
+        AutomationPlugin(),
+      ],
+    }),
+  ],
   parameters: {
-    layout: {
-      type: 'column',
-      className: 'is-prose',
-    },
     translations,
   },
-} satisfies Meta<typeof NotebookStack>;
+} satisfies Meta<typeof NotebookStackStory>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export const Default: Story = {
-  args: {
-    notebook: createNotebook(),
-  },
-};
+export const Default: Story = {};

package/src/components/NotebookStack/NotebookStack.tsx CHANGED Viewed

@@ -2,28 +2,32 @@
 // Copyright 2025 DXOS.org
 //
-import React, { useMemo } from 'react';
+import React from 'react';
-import { createDocAccessor } from '@dxos/react-client/echo';
-import { DropdownMenu, Icon, useTranslation } from '@dxos/react-ui';
-import { createDataExtensions } from '@dxos/react-ui-editor';
-import { Stack, StackItem } from '@dxos/react-ui-stack';
+import { DropdownMenu, IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { Stack, StackItem, type StackProps } from '@dxos/react-ui-stack';
 import { meta } from '../../meta';
-import { type ComputeGraph } from '../../notebook';
 import { type Notebook } from '../../types';
-import { TypescriptEditor } from '../TypescriptEditor';
 import { type TypescriptEditorProps } from '../TypescriptEditor';
-export type NotebookStackProps = {
-  notebook?: Notebook.Notebook;
-} & Pick<NotebookSectionProps, 'graph' | 'onCellInsert' | 'onCellDelete'> &
-  Pick<TypescriptEditorProps, 'env'>;
+import { NotebookCell, type NotebookCellProps } from './NotebookCell';
+import { NotebookMenu } from './NotebookMenu';
+const minSectionHeight = 'min-h-[16rem]';
+export type NotebookStackProps = ThemedClassName<
+  {
+    notebook?: Notebook.Notebook;
+    onRearrange?: StackProps['onRearrange'];
+  } & (Pick<NotebookSectionProps, 'db' | 'graph' | 'promptResults' | 'onCellInsert' | 'onCellDelete'> &
+    Pick<TypescriptEditorProps, 'env'>)
+>;
 // TODO(burdon): Option for narrow rail (with compact buttons that align with first button in toolbar).
-export const NotebookStack = ({ notebook, ...props }: NotebookStackProps) => {
+export const NotebookStack = ({ classNames, notebook, onRearrange, ...props }: NotebookStackProps) => {
   return (
-    <Stack orientation='vertical' size='contain' rail>
+    <Stack classNames={classNames} orientation='vertical' size='contain' rail onRearrange={onRearrange}>
       {notebook?.cells.map((cell, i) => (
         <NotebookSection key={i} cell={cell} {...props} />
       ))}
@@ -31,82 +35,51 @@ export const NotebookStack = ({ notebook, ...props }: NotebookStackProps) => {
   );
 };
-// TODO(burdon): Support calling named deployed functions (as with sheet).
-// TODO(burdon): Different section types (value, query, expression, prompt).
-// TODO(burdon): Display errors.
-// TODO(burdon): Allow moving cursor between sections (CMD Up/Down).
-type NotebookSectionProps = {
-  cell: Notebook.Cell;
-  graph?: ComputeGraph;
-  onCellInsert?: (after: string | undefined) => void;
-  onCellDelete?: (id: string) => void;
-} & Pick<TypescriptEditorProps, 'env'>;
+type NotebookSectionProps = NotebookCellProps;
-const NotebookSection = ({ cell, graph, env, onCellInsert, onCellDelete }: NotebookSectionProps) => {
+const NotebookSection = ({
+  cell,
+  db,
+  env,
+  promptResults,
+  onCellInsert,
+  onCellDelete,
+  ...props
+}: NotebookSectionProps) => {
   const { t } = useTranslation(meta.id);
-  const extensions = useMemo(() => {
-    return cell.script.target
-      ? [createDataExtensions({ id: cell.id, text: createDocAccessor(cell.script.target, ['content']) })]
-      : [];
-  }, [cell.script.target]);
-  const name = graph?.expressions.value[cell.id]?.name;
-  const value = graph?.values.value[cell.id];
+  const resizable = cell.type === 'query';
   return (
-    <StackItem.Root role='section' item={cell}>
-      <StackItem.Heading classNames='attention-surface'>
-        <StackItem.HeadingStickyContent>
-          <DropdownMenu.Root>
-            <DropdownMenu.Trigger asChild>
-              <StackItem.SigilButton>
-                <Icon icon='ph--list--regular' size={5} />
-              </StackItem.SigilButton>
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Portal>
-              <DropdownMenu.Content>
-                <DropdownMenu.Viewport>
-                  <DropdownMenu.Item onClick={() => onCellInsert?.(cell.id)}>
-                    {t('notebook cell insert label')}
-                  </DropdownMenu.Item>
-                  <DropdownMenu.Item onClick={() => onCellDelete?.(cell.id)}>
-                    {t('notebook cell delete label')}
-                  </DropdownMenu.Item>
-                </DropdownMenu.Viewport>
-                <DropdownMenu.Arrow />
-              </DropdownMenu.Content>
-            </DropdownMenu.Portal>
-          </DropdownMenu.Root>
-        </StackItem.HeadingStickyContent>
+    <StackItem.Root role='section' item={cell} draggable classNames={resizable && minSectionHeight}>
+      <StackItem.Heading classNames='h-full p-1 justify-between dx-attention-surface'>
+        <StackItem.DragHandle asChild>
+          <IconButton variant='ghost' icon='ph--dots-six-vertical--regular' iconOnly label='Drag handle' />
+        </StackItem.DragHandle>
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger asChild>
+            <IconButton
+              variant='ghost'
+              icon='ph--dots-three--regular'
+              iconOnly
+              label={t('notebook cell insert label')}
+            />
+          </DropdownMenu.Trigger>
+          <NotebookMenu cell={cell} onCellInsert={onCellInsert} onCellDelete={onCellDelete} />
+        </DropdownMenu.Root>
+        {resizable && <StackItem.ResizeHandle />}
       </StackItem.Heading>
-      <StackItem.Content>
-        <TypescriptEditor
-          id={cell.id}
-          role='section'
-          initialValue={cell.script.target?.content}
-          extensions={extensions}
-          env={env}
-          options={{
-            placeholder: t('notebook cell placeholder'),
-            highlightActiveLine: false,
-            lineNumbers: false,
-          }}
-          classNames='p-2 pbs-3'
-        />
-        {value != null && (
-          <div className='flex p-2 bg-groupSurface border-t border-subduedSeparator text-description font-mono'>
-            {name && (
-              <>
-                <span className='text-successText'>{name}</span>
-                <span className='text-description'>&nbsp;=&nbsp;</span>
-              </>
-            )}
-            <span>{value}</span>
-          </div>
+      {/* TODO(burdon): Move drag preview to outer stack (uniformly). */}
+      <StackItem.DragPreview>
+        {({ item: cell }) => (
+          <StackItem.Content classNames='overflow-visible bg-group-surface border border-subdued-separator'>
+            <NotebookCell db={db} cell={cell} env={env} dragging />
+          </StackItem.Content>
         )}
+      </StackItem.DragPreview>
+      <StackItem.Content classNames='overflow-visible'>
+        <NotebookCell db={db} cell={cell} env={env} promptResults={promptResults} {...props} />
       </StackItem.Content>
     </StackItem.Root>
   );

package/src/components/NotebookStack/index.ts CHANGED Viewed

@@ -2,4 +2,5 @@
 // Copyright 2025 DXOS.org
 //
+export * from './NotebookMenu';
 export * from './NotebookStack';