@dxos/plugin-script 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6

package/src/{components/Settings → containers/ScriptObjectSettings}/ScriptObjectSettings.tsx

@@ -6,11 +6,12 @@ import { Octokit } from '@octokit/core';
 import React, { type ChangeEvent, useCallback, useState } from 'react';
 
 import { ToolId } from '@dxos/ai';
-import { SettingsOperation } from '@dxos/app-framework';
-import { useOperationInvoker } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { SettingsOperation } from '@dxos/app-toolkit';
 import { Blueprint, Template } from '@dxos/blueprints';
 import { Filter, Obj, Ref } from '@dxos/echo';
-import { Function, type Script, getUserFunctionIdInMetadata } from '@dxos/functions';
+import { type Script, getUserFunctionIdInMetadata } from '@dxos/functions';
+import { Operation } from '@dxos/operation';
 import { getInvocationUrl } from '@dxos/functions-runtime';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
@@ -19,7 +20,7 @@ import { Button, Clipboard, Input, useAsyncEffect, useControlledState, useTransl
 import { AccessToken } from '@dxos/types';
 import { kebabize } from '@dxos/util';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
 export type ScriptObjectSettingsProps = {
   object: Script.Script;
@@ -35,33 +36,15 @@ export const ScriptObjectSettings = ({ object }: ScriptObjectSettingsProps) => {
   );
 };
 
-export const ScriptProperties = ({ object }: ScriptObjectSettingsProps) => {
-  const { t } = useTranslation(meta.id);
-  return (
-    <Input.Root>
-      <Input.Label>{t('description label')}</Input.Label>
-      <Input.TextInput
-        placeholder={t('description placeholder')}
-        value={object.description ?? ''}
-        onChange={(event) => {
-          Obj.change(object, (o) => {
-            o.description = event.target.value;
-          });
-        }}
-      />
-    </Input.Root>
-  );
-};
-
 const BlueprintEditor = ({ object }: ScriptObjectSettingsProps) => {
   const { t } = useTranslation(meta.id);
   const db = Obj.getDatabase(object);
-  const [fn] = useQuery(db, Filter.type(Function.Function, { source: Ref.make(object) }));
+  const [fn] = useQuery(db, Filter.type(Operation.PersistentOperation, { source: Ref.make(object) }));
   const blueprints = useQuery(db, Filter.type(Blueprint.Blueprint));
 
   const [creating, setCreating] = useState(false);
   const [instructions, setInstructions] = useState<string>(`You can run the script "${object.name ?? 'script'}".`);
-  const blueprintKey = `dxos.org/blueprint/${kebabize(object.name ?? 'script')}`;
+  const blueprintKey = `org.dxos.blueprint.${kebabize(object.name ?? 'script')}`;
   const existingBlueprint = blueprints.find((bp) => bp.key === blueprintKey);
 
   useAsyncEffect(async () => {
@@ -81,14 +64,14 @@ const BlueprintEditor = ({ object }: ScriptObjectSettingsProps) => {
     try {
       if (existingBlueprint) {
         const text = await existingBlueprint.instructions.source.load();
-        Obj.change(text, (t) => {
-          t.content = instructions;
+        Obj.change(text, (obj) => {
+          obj.content = instructions;
         });
         if (fn?.key) {
           const toolId = ToolId.make(fn.key);
           if (!existingBlueprint.tools?.includes(toolId)) {
-            Obj.change(existingBlueprint, (b) => {
-              b.tools = [...(b.tools ?? []), toolId];
+            Obj.change(existingBlueprint, (obj) => {
+              obj.tools = [...(obj.tools ?? []), toolId];
             });
           }
         }
@@ -111,20 +94,20 @@ const BlueprintEditor = ({ object }: ScriptObjectSettingsProps) => {
   }, [db, existingBlueprint, fn, blueprintKey, object.name, instructions]);
 
   return (
-    <div className='flex flex-col gap-4 mlb-cardSpacingBlock'>
+    <div className='flex flex-col gap-4 my-form-padding'>
       <div>
-        <h2>{t('blueprint editor label', { default: 'Blueprint' })}</h2>
+        <h2>{t('blueprint-editor.label', { default: 'Blueprint' })}</h2>
         <p className='text-description text-sm'>
-          {t('blueprint editor description', {
+          {t('blueprint-editor.description', {
             default: 'Create a blueprint that exposes this script as a tool.',
           })}
         </p>
       </div>
       <Input.Root>
         <div role='none' className='flex flex-col gap-1'>
-          <Input.Label>{t('blueprint instructions label', { default: 'Instructions' })}</Input.Label>
+          <Input.Label>{t('blueprint-instructions.label', { default: 'Instructions' })}</Input.Label>
           <Input.TextArea
-            placeholder={t('blueprint instructions placeholder', {
+            placeholder={t('blueprint-instructions.placeholder', {
               default: 'Describe how this tool should be used.',
             })}
             rows={6}
@@ -149,7 +132,7 @@ const Binding = ({ object }: ScriptObjectSettingsProps) => {
   const { t } = useTranslation(meta.id);
   const client = useClient();
   const db = Obj.getDatabase(object);
-  const [fn] = useQuery(db, Filter.type(Function.Function, { source: Ref.make(object) }));
+  const [fn] = useQuery(db, Filter.type(Operation.PersistentOperation, { source: Ref.make(object) }));
 
   const functionId = fn && getUserFunctionIdInMetadata(Obj.getMeta(fn));
   const functionUrl =
@@ -167,41 +150,44 @@ const Binding = ({ object }: ScriptObjectSettingsProps) => {
   );
 
   const handleBindingBlur = useCallback(() => {
-    Obj.change(fn, (f) => {
-      f.binding = binding;
-    });
+    if (fn) {
+      Obj.change(fn, (obj) => {
+        obj.binding = binding;
+      });
+    }
   }, [fn, binding]);
 
-  if (!fn || !functionUrl) {
+  if (!fn) {
     return null;
   }
 
-  // TODO(burdon): Use form.
   return (
-    <div role='form' className='flex flex-col gap-2 mlb-cardSpacingBlock'>
-      <h2>{t('remote function settings heading')}</h2>
-      <Input.Root>
-        <div role='none' className='flex flex-col gap-1'>
-          <Input.Label>{t('function url label')}</Input.Label>
-          <div role='none' className='flex gap-1'>
-            <Input.TextInput
-              disabled
-              value={functionUrl}
-              onChange={(event) => {
-                Obj.change(fn, (f) => {
-                  f.name = event.target.value;
-                });
-              }}
-            />
-            <Clipboard.IconButton value={functionUrl} />
+    <div role='form' className='flex flex-col gap-2 my-form-padding'>
+      <h2>{t('remote-function-settings.heading')}</h2>
+      {functionUrl && (
+        <Input.Root>
+          <div role='none' className='flex flex-col gap-1'>
+            <Input.Label>{t('function-url.label')}</Input.Label>
+            <div role='none' className='flex gap-1'>
+              <Input.TextInput
+                disabled
+                value={functionUrl}
+                onChange={(event) => {
+                  Obj.change(fn, (obj) => {
+                    obj.name = event.target.value;
+                  });
+                }}
+              />
+              <Clipboard.IconButton value={functionUrl} />
+            </div>
           </div>
-        </div>
-      </Input.Root>
+        </Input.Root>
+      )}
       <Input.Root>
         <div role='none' className='flex flex-col gap-1'>
-          <Input.Label>{t('function binding label')}</Input.Label>
+          <Input.Label>{t('function-binding.label')}</Input.Label>
           <Input.TextInput
-            placeholder={t('function binding placeholder')}
+            placeholder={t('function-binding.placeholder')}
             value={binding}
             onChange={handleBindingChange}
             onBlur={handleBindingBlur}
@@ -244,7 +230,7 @@ const Publishing = ({ object }: ScriptObjectSettingsProps) => {
   const handleOpenTokenManager = useCallback(
     () =>
       invokePromise(SettingsOperation.Open, {
-        plugin: 'dxos.org/plugin/token-manager',
+        plugin: 'org.dxos.plugin.token-manager',
       }),
     [invokePromise],
   );
@@ -285,15 +271,15 @@ const Publishing = ({ object }: ScriptObjectSettingsProps) => {
   }, [object, githubToken]);
 
   return (
-    <div className='flex flex-col gap-4 mlb-cardSpacingBlock'>
+    <div className='flex flex-col gap-4 my-form-padding'>
       <div>
-        <h2>{t('script publish settings label')}</h2>
-        <p className='text-description text-sm'>{t('script publish settings description')}</p>
+        <h2>{t('script-publish-settings.label')}</h2>
+        <p className='text-description text-sm'>{t('script-publish-settings.description')}</p>
       </div>
       {!githubToken && (
         <div className='flex flex-col gap-2'>
-          <span>{t('no github token label')}</span>
-          <Button onClick={handleOpenTokenManager}>{t('open token manager label')}</Button>
+          <span>{t('no-github-token.label')}</span>
+          <Button onClick={handleOpenTokenManager}>{t('open-token-manager.label')}</Button>
         </div>
       )}
       {githubToken && (

package/src/containers/ScriptObjectSettings/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { ScriptObjectSettings } from './ScriptObjectSettings';
+
+export default ScriptObjectSettings;

package/src/containers/ScriptProperties/ScriptProperties.tsx

@@ -0,0 +1,33 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { Obj } from '@dxos/echo';
+import { type Script } from '@dxos/functions';
+import { Input, useTranslation } from '@dxos/react-ui';
+
+import { meta } from '#meta';
+
+export type ScriptPropertiesProps = {
+  object: Script.Script;
+};
+
+export const ScriptProperties = ({ object }: ScriptPropertiesProps) => {
+  const { t } = useTranslation(meta.id);
+  return (
+    <Input.Root>
+      <Input.Label>{t('description.label')}</Input.Label>
+      <Input.TextInput
+        placeholder={t('description.placeholder')}
+        value={object.description ?? ''}
+        onChange={(event) => {
+          Obj.change(object, (obj) => {
+            obj.description = event.target.value;
+          });
+        }}
+      />
+    </Input.Root>
+  );
+};

package/src/containers/ScriptProperties/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { ScriptProperties } from './ScriptProperties';
+
+export default ScriptProperties;

package/src/containers/TestContainer/TestContainer.tsx

@@ -0,0 +1,45 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useMemo } from 'react';
+
+import { Context } from '@dxos/context';
+
+import { type Script } from '@dxos/functions';
+import { FunctionsServiceClient } from '@dxos/functions-runtime/edge';
+import { Panel } from '@dxos/react-ui';
+import { getSpace } from '@dxos/react-client/echo';
+
+import { TestPanel } from '#components';
+import { useDeployDeps } from '#hooks';
+
+export type TestContainerProps = {
+  role: string;
+  script: Script.Script;
+};
+
+export const TestContainer = ({ role, script }: TestContainerProps) => {
+  const { client, fn, existingFunctionId } = useDeployDeps({ script });
+  const space = getSpace(script);
+
+  const functionsClient = useMemo(() => FunctionsServiceClient.fromClient(client), [client]);
+
+  const handleInvoke = useCallback(
+    async (input: unknown) => {
+      if (!fn) {
+        throw new Error('Function not deployed');
+      }
+      return functionsClient.invoke(Context.default(), fn, input, { spaceId: space?.id });
+    },
+    [fn, functionsClient, space?.id],
+  );
+
+  return (
+    <Panel.Root role={role} className='dx-document'>
+      <Panel.Content asChild>
+        <TestPanel onInvoke={existingFunctionId ? handleInvoke : undefined} />
+      </Panel.Content>
+    </Panel.Root>
+  );
+};

package/src/containers/TestContainer/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { TestContainer } from './TestContainer';
+
+export default TestContainer;

package/src/containers/index.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+export const DeploymentDialog: ComponentType<any> = lazy(() => import('./DeploymentDialog'));
+export const NotebookContainer: ComponentType<any> = lazy(() => import('./NotebookContainer'));
+export const ScriptContainer: ComponentType<any> = lazy(() => import('./ScriptContainer'));
+export const ScriptObjectSettings: ComponentType<any> = lazy(() => import('./ScriptObjectSettings'));
+export const ScriptProperties: ComponentType<any> = lazy(() => import('./ScriptProperties'));
+export const TestContainer: ComponentType<any> = lazy(() => import('./TestContainer'));

package/src/e2e/ai.test.ts

@@ -8,7 +8,8 @@ import { test } from 'vitest';
 import { Client } from '@dxos/client';
 import { type Space } from '@dxos/client-protocol';
 import { configPreset } from '@dxos/config';
-import { Function } from '@dxos/functions';
+import { Context } from '@dxos/context';
+import { Operation } from '@dxos/operation';
 import { FunctionsServiceClient } from '@dxos/functions-runtime/edge';
 import { bundleFunction } from '@dxos/functions-runtime/native';
 import { FunctionRuntimeKind } from '@dxos/protocols';
@@ -47,14 +48,14 @@ describe.runIf(process.env.DX_TEST_TAGS?.includes('functions-e2e')).skip('Functi
       new URL('../templates/anthropic.ts', import.meta.url).pathname,
     );
 
-    const result = await functionsServiceClient.invoke(func, {
+    const result = await functionsServiceClient.invoke(Context.default(), func, {
       message: 'Hello, world!',
     });
     console.log(result);
   });
 
   const setup = async () => {
-    const client = await new Client({ config, types: [Function.Function] }).initialize();
+    const client = await new Client({ config, types: [Operation.PersistentOperation] }).initialize();
     await client.halo.createIdentity();
 
     const space = await client.spaces.create();
@@ -66,7 +67,7 @@ describe.runIf(process.env.DX_TEST_TAGS?.includes('functions-e2e')).skip('Functi
   };
 
   const sync = async (space: Space) => {
-    await space.db.flush({ indexes: true });
+    await space.db.flush();
     await space.internal.syncToEdge({
       onProgress: (state) =>
         console.log(state ? `${state.unsyncedDocumentCount} documents syncing...` : 'connecting to edge...'),
@@ -78,7 +79,7 @@ describe.runIf(process.env.DX_TEST_TAGS?.includes('functions-e2e')).skip('Functi
       entryPoint,
       verbose: true,
     });
-    const func = await functionsServiceClient.deploy({
+    const func = await functionsServiceClient.deploy(Context.default(), {
       version: '0.0.1',
       ownerPublicKey: space.key,
       entryPoint: artifact.entryPoint,

package/src/e2e/deploy.test.ts

@@ -9,6 +9,7 @@ import { describe, expect, test } from 'vitest';
 import { Client, type Config } from '@dxos/client';
 import { createEdgeIdentity } from '@dxos/client/edge';
 import { configPreset } from '@dxos/config';
+import { Context } from '@dxos/context';
 import { bundleFunction } from '@dxos/functions-runtime/bundler';
 import { FunctionsServiceClient } from '@dxos/functions-runtime/edge';
 import { invariant } from '@dxos/invariant';
@@ -42,7 +43,7 @@ describe.runIf(process.env.DX_TEST_TAGS?.includes('functions-e2e'))('Functions d
     }
     const functionsServiceClient = FunctionsServiceClient.fromClient(client);
 
-    const func = await functionsServiceClient.deploy({
+    const func = await functionsServiceClient.deploy(Context.default(), {
       ownerPublicKey: space.key,
       version: '0.0.1',
       entryPoint: buildResult.entryPoint,
@@ -50,12 +51,12 @@ describe.runIf(process.env.DX_TEST_TAGS?.includes('functions-e2e'))('Functions d
     });
 
     // Invoke deployed function via EDGE directly.
-    const edgeClient = client.edge;
+    const edgeClient = client.edge.http;
     invariant(edgeClient, 'edgeClient is required');
     edgeClient.setIdentity(createEdgeIdentity(client));
 
     const input = { from: 'USD', to: 'EUR' };
-    const result = await functionsServiceClient.invoke(func, input);
+    const result = await functionsServiceClient.invoke(Context.default(), func, input);
     log.info('>>> result', { result, func });
     const resultNumber = Number(result);
     expect(resultNumber).toBeGreaterThan(0);

package/src/hooks/deploy.ts

@@ -5,15 +5,16 @@
 import { useEffect, useMemo } from 'react';
 
 import { Obj, Query, Ref } from '@dxos/echo';
-import { Function, type Script, getUserFunctionIdInMetadata } from '@dxos/functions';
+import { type Script, getUserFunctionIdInMetadata } from '@dxos/functions';
+import { Operation } from '@dxos/operation';
 import { log } from '@dxos/log';
 import { type Client, useClient } from '@dxos/react-client';
 import { type Space, getSpace, useQuery } from '@dxos/react-client/echo';
 import { type TFunction } from '@dxos/react-ui';
 import { createMenuAction } from '@dxos/react-ui-menu';
-import { errorMessageColors } from '@dxos/ui-theme';
+import { messageValence } from '@dxos/ui-theme';
 
-import { meta } from '../meta';
+import { meta } from '#meta';
 import { deployScript, getFunctionUrl, isScriptDeployed } from '../util';
 
 export type DeployActionProperties = { type: 'deploy' } | { type: 'copy' };
@@ -30,7 +31,7 @@ import { type ScriptToolbarStateStore } from './useToolbarState';
 export type CreateDeployOptions = {
   state: ScriptToolbarStateStore;
   script: Script.Script;
-  fn: Function.Function;
+  fn: Operation.PersistentOperation;
   space?: Space;
   existingFunctionId?: string;
   client: Client;
@@ -42,10 +43,10 @@ export const createDeploy = ({ state, script, space, fn, client, existingFunctio
 
   // TODO(wittjosiah): Should this be an action?
   const errorItem = createMenuAction('error', () => {}, {
-    label: value.error ?? ['no error label', { ns: meta.id }],
+    label: value.error ?? ['no-error.label', { ns: meta.id }],
     icon: 'ph--warning-circle--regular',
     hidden: !value.error,
-    classNames: value.error && errorMessageColors,
+    classNames: value.error && messageValence('error'),
   });
 
   const deployAction = createMenuAction<DeployActionProperties>(
@@ -62,14 +63,14 @@ export const createDeploy = ({ state, script, space, fn, client, existingFunctio
 
       if (!result.success) {
         log.catch(result.error);
-        state.set('error', t('upload failed label'));
+        state.set('error', t('upload-failed.label'));
       }
 
       state.set('deploying', false);
     },
     {
       type: 'deploy',
-      label: [value.deploying ? 'publishing label' : 'deploy label', { ns: meta.id }],
+      label: [value.deploying ? 'publishing.label' : 'deploy.label', { ns: meta.id }],
       icon: value.deploying ? 'ph--spinner-gap--regular' : 'ph--cloud-arrow-up--regular',
       disabled: value.deploying,
       classNames: value.deploying ? '[&_svg]:animate-spin' : '',
@@ -85,7 +86,7 @@ export const createDeploy = ({ state, script, space, fn, client, existingFunctio
     },
     {
       type: 'copy',
-      label: ['copy link label', { ns: meta.id }],
+      label: ['copy-link.label', { ns: meta.id }],
       icon: 'ph--link--regular',
       disabled: !value.functionUrl,
     },
@@ -94,9 +95,9 @@ export const createDeploy = ({ state, script, space, fn, client, existingFunctio
   return {
     nodes: [errorItem, deployAction, copyAction],
     edges: [
-      { source: 'root', target: 'error' },
-      { source: 'root', target: 'deploy' },
-      { source: 'root', target: 'copy' },
+      { source: 'root', target: 'error', relation: 'child' },
+      { source: 'root', target: 'deploy', relation: 'child' },
+      { source: 'root', target: 'copy', relation: 'child' },
     ],
   };
 };
@@ -126,7 +127,7 @@ export const useDeployState = ({ state, script }: { state: ScriptToolbarStateSto
 export const useDeployDeps = ({ script }: { script: Script.Script }) => {
   const client = useClient();
   const space = getSpace(script);
-  const [fn] = useQuery(space?.db, Query.type(Function.Function, { source: Ref.make(script) }));
+  const [fn] = useQuery(space?.db, Query.type(Operation.PersistentOperation, { source: Ref.make(script) }));
   const existingFunctionId = useMemo(() => fn && getUserFunctionIdInMetadata(Obj.getMeta(fn)), [fn]);
   return { client, space, fn, existingFunctionId };
 };

package/src/hooks/format.ts

@@ -11,7 +11,7 @@ import { type Script } from '@dxos/functions';
 import { log } from '@dxos/log';
 import { createMenuAction } from '@dxos/react-ui-menu';
 
-import { meta } from '../meta';
+import { meta } from '#meta';
 
 export type FormatActionProperties = { type: 'format' };
 
@@ -30,8 +30,8 @@ export const createFormat = (script: Script.Script) => {
           semi: true,
           singleQuote: true,
         });
-        Obj.change(script.source.target!, (s) => {
-          s.content = formatted;
+        Obj.change(script.source.target!, (obj) => {
+          obj.content = formatted;
         });
       } catch (err: any) {
         // TODO(wittjosiah): Show error in UI.
@@ -39,7 +39,7 @@ export const createFormat = (script: Script.Script) => {
       }
     },
     {
-      label: ['format label', { ns: meta.id }],
+      label: ['format.label', { ns: meta.id }],
       icon: 'ph--magic-wand--regular',
     },
   );
@@ -50,6 +50,7 @@ export const createFormat = (script: Script.Script) => {
       {
         source: 'root',
         target: 'format',
+        relation: 'child',
       },
     ],
   };

package/src/hooks/template.ts

@@ -15,9 +15,9 @@ const createTemplateSelectActions = (script: Script.Script) => {
     return createMenuAction<TemplateActionProperties>(
       `template--${template.id}`,
       () => {
-        Obj.change(script, (s) => {
-          s.name = template.name;
-          const meta = Obj.getMeta(s);
+        Obj.change(script, (obj) => {
+          obj.name = template.name;
+          const meta = Obj.getMeta(obj);
           const oldPresetIndex = meta.keys.findIndex((key) => key.source === FUNCTIONS_PRESET_META_KEY);
           if (oldPresetIndex >= 0) {
             meta.keys.splice(oldPresetIndex, 1);
@@ -27,8 +27,8 @@ const createTemplateSelectActions = (script: Script.Script) => {
           }
         });
         if (script.source?.target) {
-          Obj.change(script.source.target, (s) => {
-            s.content = template.source;
+          Obj.change(script.source.target, (obj) => {
+            obj.content = template.source;
           });
         }
       },
@@ -46,8 +46,8 @@ export const createTemplateSelect = (script: Script.Script) => {
   return {
     nodes: [...templateSelectActions],
     edges: [
-      { source: 'root', target: 'template-select' },
-      ...templateSelectActions.map((action) => ({ source: 'template-select', target: action.id })),
+      { source: 'root', target: 'template-select', relation: 'child' },
+      ...templateSelectActions.map((action) => ({ source: 'template-select', target: action.id, relation: 'child' })),
     ],
   };
 };

package/src/hooks/useCompiler.ts

@@ -2,13 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useCapabilities, usePluginManager } from '@dxos/app-framework/react';
+import { useCapabilities, usePluginManager } from '@dxos/app-framework/ui';
 import { runAndForwardErrors } from '@dxos/effect';
 import { useAsyncEffect } from '@dxos/react-ui';
 
 import type { Compiler } from '../compiler';
-import { ScriptEvents } from '../types';
-import { ScriptCapabilities } from '../types';
+import { ScriptEvents } from '#types';
+import { ScriptCapabilities } from '#types';
 
 /**
  * Asynchronously sets up the compiler and returns it.

package/src/hooks/useCreateAndDeployScriptTemplates.ts

@@ -4,16 +4,16 @@
 
 import { useCallback, useState } from 'react';
 
-import { useOperationInvoker } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { Obj } from '@dxos/echo';
 import { Script } from '@dxos/functions';
 import { invariant } from '@dxos/invariant';
-import { SpaceOperation } from '@dxos/plugin-space/types';
+import { SpaceOperation } from '@dxos/plugin-space/operations';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
 
 import { type Template } from '../templates';
-import { ScriptOperation } from '../types';
+import { ScriptOperation } from '#operations';
 import { deployScript } from '../util';
 
 type DeploymentStatus = 'idle' | 'pending' | 'success' | 'error';

package/src/hooks/useToolbarState.ts

@@ -2,8 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Atom, RegistryContext, useAtomValue } from '@effect-atom/atom-react';
-import { useContext, useMemo } from 'react';
+import { Atom } from '@effect-atom/atom-react';
+import { useMemo } from 'react';
+
+import { Capabilities } from '@dxos/app-framework';
+import { useCapability } from '@dxos/app-framework/ui';
 
 import { type DeployState } from './deploy';
 
@@ -16,11 +19,9 @@ export type ScriptToolbarStateStore = {
   set: <K extends keyof ScriptToolbarState>(key: K, value: ScriptToolbarState[K]) => void;
 };
 
-// TODO(burdon): Replace with context provider?
 export const useToolbarState = (initialState: ScriptToolbarState = {}): ScriptToolbarStateStore => {
-  const registry = useContext(RegistryContext);
+  const registry = useCapability(Capabilities.AtomRegistry);
   const atom = useMemo(() => Atom.make<ScriptToolbarState>(initialState), []);
-  const value = useAtomValue(atom);
 
   return useMemo(
     () => ({
@@ -35,6 +36,6 @@ export const useToolbarState = (initialState: ScriptToolbarState = {}): ScriptTo
         registry.set(atom, { ...registry.get(atom), [key]: v });
       },
     }),
-    [atom, registry, value],
+    [atom, registry],
   );
 };

package/src/index.ts

@@ -4,6 +4,7 @@
 
 export { ScriptCapabilities, ScriptEvents } from './types';
 export * from './components';
+export * from './containers';
 export * from './meta';
 export * from './util';