@dxos/plugin-script 0.8.4-main.69d29f4 → 0.8.4-main.6fa680abb7

package/src/{components → containers/NotebookContainer}/NotebookContainer.stories.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 
 import { SERVICES_CONFIG } from '@dxos/ai/testing';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { Agent } from '@dxos/assistant-toolkit';
+import { AgentFunctions } from '@dxos/assistant-toolkit';
 import { Filter } from '@dxos/echo';
 import { Function, serializeFunction } from '@dxos/functions';
 import { AssistantPlugin } from '@dxos/plugin-assistant';
@@ -22,24 +22,24 @@ import { useQuery } from '@dxos/react-client/echo';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { DataTypes } from '@dxos/schema';
 
-import { createNotebook } from '../testing';
-import { translations } from '../translations';
-import { Notebook } from '../types';
+import { createNotebook } from '../../testing';
+import { translations } from '../../translations';
+import { Notebook } from '../../types';
 
 import { NotebookContainer } from './NotebookContainer';
 
 const meta: Meta<typeof NotebookContainer> = {
-  title: 'plugins/plugin-script/NotebookContainer',
+  title: 'plugins/plugin-script/containers/NotebookContainer',
   component: NotebookContainer,
   render: (args) => {
     const client = useClient();
     const space = client.spaces.default;
     const notebooks = useQuery(space?.db, Filter.type(Notebook.Notebook));
-    return <NotebookContainer {...args} subject={notebooks[0]} />;
+    return <NotebookContainer {...args} subject={notebooks[0]} attendableId='test' />;
   },
   decorators: [
-    withTheme,
-    withLayout({ layout: 'column', classNames: 'is-proseMaxWidth' }),
+    withTheme(),
+    withLayout({ layout: 'column', classNames: 'w-prose-max-width' }),
     withPluginManager({
       plugins: [
         ...corePlugins(),
@@ -60,7 +60,7 @@ const meta: Meta<typeof NotebookContainer> = {
 
               space.db.add(createNotebook());
               space.db.add(Markdown.make({ content: '# Hello World' }));
-              space.db.add(serializeFunction(Agent.prompt));
+              space.db.add(serializeFunction(AgentFunctions.Prompt));
             }),
         }),
         AssistantPlugin(),

package/src/{components → containers/NotebookContainer}/NotebookContainer.tsx

@@ -9,8 +9,8 @@ import * as Exit from 'effect/Exit';
 import type * as Types from 'effect/Types';
 import React, { useCallback, useContext, useMemo, useState } from 'react';
 
-import { type SurfaceComponentProps } from '@dxos/app-framework/react';
-import { Agent } from '@dxos/assistant-toolkit';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
+import { AgentFunctions } from '@dxos/assistant-toolkit';
 import { Blueprint, Prompt } from '@dxos/blueprints';
 import { Filter, Obj, Query, Ref } from '@dxos/echo';
 import { QueryBuilder } from '@dxos/echo-query';
@@ -19,30 +19,30 @@ import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 import { useComputeRuntimeCallback } from '@dxos/plugin-automation';
 import { Graph } from '@dxos/plugin-explorer/types';
-import { DropdownMenu, IconButton, Toolbar, useTranslation } from '@dxos/react-ui';
+import { DropdownMenu, IconButton, Panel, Toolbar, useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
-import { Layout } from '@dxos/react-ui-mosaic';
-import { Text, View } from '@dxos/schema';
+import { Text, ViewModel } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
-import { meta } from '../meta';
-import { ComputeGraph } from '../notebook';
-import { type Notebook } from '../types';
+import { NotebookMenu, NotebookStack, type NotebookStackProps, type TypescriptEditorProps } from '../../components';
+import { meta } from '../../meta';
+import { ComputeGraph } from '../../notebook';
+import { type Notebook } from '../../types';
 
-import { NotebookMenu, NotebookStack, type NotebookStackProps } from './NotebookStack';
-import { type TypescriptEditorProps } from './TypescriptEditor';
-
-const INCLUDE_BLUEPRINTS = ['dxos.org/blueprint/assistant', 'dxos.org/blueprint/markdown'];
+const INCLUDE_BLUEPRINTS = [
+  'org.dxos.blueprint.assistant',
+  'org.dxos.blueprint.database',
+  'org.dxos.blueprint.markdown',
+];
 
 // TODO(burdon): Support calling named deployed functions (as with sheet).
 
 export type NotebookContainerProps = SurfaceComponentProps<Notebook.Notebook, Pick<TypescriptEditorProps, 'env'>>;
 
-export const NotebookContainer = ({ role, subject: notebook, env }: NotebookContainerProps) => {
+export const NotebookContainer = ({ role, subject: notebook, attendableId, env }: NotebookContainerProps) => {
   const { t } = useTranslation(meta.id);
   const registry = useContext(RegistryContext);
-  const db = notebook && Obj.getDatabase(notebook);
-  const attendableId = notebook ? Obj.getDXN(notebook).toString() : '';
+  const db = Obj.getDatabase(notebook);
   const { hasAttention } = useAttention(attendableId);
 
   // TODO(burdon): Consolidate execution and state (with graph).
@@ -63,7 +63,7 @@ export const NotebookContainer = ({ role, subject: notebook, env }: NotebookCont
             const ast = Query.select(filter).ast;
             const graph = cell.graph?.target;
             if (!graph) {
-              const { view } = await View.makeFromDatabase({ db });
+              const { view } = await ViewModel.makeFromDatabase({ db });
               const newGraph = Graph.make({ query: { ast }, view });
               Obj.change(notebook!, (n) => {
                 const c = n.cells.find((c) => c.id === cell.id);
@@ -189,25 +189,26 @@ export const NotebookContainer = ({ role, subject: notebook, env }: NotebookCont
   );
 
   return (
-    <Layout.Main role={role} toolbar>
-      <Toolbar.Root disabled={!hasAttention} textBlockWidth>
-        <DropdownMenu.Root>
-          <DropdownMenu.Trigger asChild>
-            <IconButton icon='ph--plus--regular' iconOnly label={t('notebook cell insert label')} />
-          </DropdownMenu.Trigger>
-          <NotebookMenu onCellInsert={handleCellInsert} />
-        </DropdownMenu.Root>
-        <Toolbar.IconButton
-          icon='ph--play--fill'
-          iconOnly
-          label={t('compute label')}
-          classNames='text-green-500'
-          onClick={handleCompute}
-        />
-      </Toolbar.Root>
-      <div role='none' className='flex bs-full overflow-hidden -mis-[1px] -mie-[1px]'>
+    <Panel.Root role={role} className='dx-article'>
+      <Panel.Toolbar asChild>
+        <Toolbar.Root disabled={!hasAttention} textBlockWidth>
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger asChild>
+              <IconButton icon='ph--plus--regular' iconOnly label={t('notebook cell insert label')} />
+            </DropdownMenu.Trigger>
+            <NotebookMenu onCellInsert={handleCellInsert} />
+          </DropdownMenu.Root>
+          <Toolbar.IconButton
+            icon='ph--play--fill'
+            iconOnly
+            label={t('compute label')}
+            classNames='text-success-text'
+            onClick={handleCompute}
+          />
+        </Toolbar.Root>
+      </Panel.Toolbar>
+      <Panel.Content asChild>
         <NotebookStack
-          classNames='container-max-width border-l border-r border-subduedSeparator'
           db={db}
           notebook={notebook}
           graph={graph}
@@ -217,13 +218,11 @@ export const NotebookContainer = ({ role, subject: notebook, env }: NotebookCont
           onCellInsert={handleCellInsert}
           onCellDelete={handleCellDelete}
         />
-      </div>
-    </Layout.Main>
+      </Panel.Content>
+    </Panel.Root>
   );
 };
 
-export default NotebookContainer;
-
 // TODO(wittjosiah): Factor out. Copied from PromptArticle in plugin-assistant.
 const runPrompt = Effect.fn(function* ({
   prompt,
@@ -234,10 +233,7 @@ const runPrompt = Effect.fn(function* ({
   input: Record<string, any>;
   onResult: (result: string) => void;
 }) {
-  const inputData: FunctionDefinition.Input<typeof Agent.prompt> = {
-    prompt,
-    input,
-  };
+  const inputData: FunctionDefinition.Input<typeof AgentFunctions.Prompt> = { prompt, input };
   const tracer = yield* TracingService;
   const trace = yield* tracer.traceInvocationStart({
     target: undefined,
@@ -247,7 +243,7 @@ const runPrompt = Effect.fn(function* ({
   });
 
   // Invoke the function.
-  const result = yield* FunctionInvocationService.invokeFunction(Agent.prompt, inputData).pipe(
+  const result = yield* FunctionInvocationService.invokeFunction(AgentFunctions.Prompt, inputData).pipe(
     Effect.provide(trace.invocationTraceQueue ? TracingService.layerInvocation(trace) : TracingService.layerNoop),
     Effect.exit,
   );

package/src/containers/NotebookContainer/index.ts

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

package/src/{components → containers/ScriptContainer}/ScriptContainer.tsx

@@ -4,20 +4,18 @@
 
 import React, { useMemo } from 'react';
 
-import { type SurfaceComponentProps } from '@dxos/app-framework/react';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
 import { createDocAccessor } from '@dxos/echo-db';
 import { type Script } from '@dxos/functions';
 import { getSpace } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
-import { Layout } from '@dxos/react-ui-mosaic';
+import { Panel } from '@dxos/react-ui';
 import { createDataExtensions, listener, stackItemContentEditorClassNames } from '@dxos/ui-editor';
 
-import { useDeployState, useToolbarState } from '../hooks';
-import { type ScriptSettings } from '../types';
-
-import { ScriptToolbar } from './ScriptToolbar';
-import { TypescriptEditor, type TypescriptEditorProps } from './TypescriptEditor';
+import { ScriptToolbar, TypescriptEditor, type TypescriptEditorProps } from '../../components';
+import { useDeployState, useToolbarState } from '../../hooks';
+import { type ScriptSettings } from '../../types';
 
 export type ScriptEditorProps = SurfaceComponentProps<
   Script.Script,
@@ -66,19 +64,21 @@ export const ScriptContainer = ({
   }
 
   return (
-    <Layout.Main role={role} toolbar>
-      <ScriptToolbar state={state} role={role} script={script} />
-      <TypescriptEditor
-        id={script.id}
-        env={env}
-        initialValue={script.source?.target?.content}
-        extensions={extensions}
-        classNames={stackItemContentEditorClassNames(role)}
-        inputMode={settings.editorInputMode}
-        toolbar
-      />
-    </Layout.Main>
+    <Panel.Root role={role} className='dx-article'>
+      <Panel.Toolbar asChild>
+        <ScriptToolbar state={state} role={role} script={script} />
+      </Panel.Toolbar>
+      <Panel.Content asChild>
+        <TypescriptEditor
+          id={script.id}
+          env={env}
+          initialValue={script.source?.target?.content}
+          extensions={extensions}
+          classNames={stackItemContentEditorClassNames(role)}
+          inputMode={settings.editorInputMode}
+          toolbar
+        />
+      </Panel.Content>
+    </Panel.Root>
   );
 };
-
-export default ScriptContainer;

package/src/containers/ScriptContainer/index.ts

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

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

@@ -6,8 +6,8 @@ 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';
@@ -35,24 +35,6 @@ 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);
@@ -61,7 +43,7 @@ const BlueprintEditor = ({ object }: ScriptObjectSettingsProps) => {
 
   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 () => {
@@ -111,7 +93,7 @@ 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>
         <p className='text-description text-sm'>
@@ -178,7 +160,7 @@ const Binding = ({ object }: ScriptObjectSettingsProps) => {
 
   // TODO(burdon): Use form.
   return (
-    <div role='form' className='flex flex-col gap-2 mlb-cardSpacingBlock'>
+    <div role='form' className='flex flex-col gap-2 my-form-padding'>
       <h2>{t('remote function settings heading')}</h2>
       <Input.Root>
         <div role='none' className='flex flex-col gap-1'>
@@ -244,7 +226,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,7 +267,7 @@ 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>

package/src/containers/ScriptObjectSettings/index.ts

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

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

@@ -6,7 +6,7 @@ import React from 'react';
 
 import { useClient } from '@dxos/react-client';
 import { Button, Select, useTranslation } from '@dxos/react-ui';
-import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
+import { Settings } from '@dxos/react-ui-form';
 import { type EditorInputMode, EditorInputModes } from '@dxos/ui-editor';
 
 import { meta } from '../../meta';
@@ -29,15 +29,15 @@ export const ScriptPluginSettings = ({ settings, onSettingsChange }: ScriptPlugi
   };
 
   return (
-    <ControlPage>
-      <ControlSection title={t('settings title', { ns: meta.id })}>
-        <ControlGroup>
+    <Settings.Root>
+      <Settings.Section title={t('settings title', { ns: meta.id })}>
+        <Settings.Group>
           {/* TODO(wittjosiah): Hide outside of dev environments. */}
-          <ControlItemInput title={t('authenticate action label')}>
+          <Settings.ItemInput title={t('authenticate action label')}>
             <Button onClick={handleAuthenticate}>{t('authenticate button label')}</Button>
-          </ControlItemInput>
+          </Settings.ItemInput>
 
-          <ControlItemInput title={t('editor input mode label')}>
+          <Settings.ItemInput title={t('editor input mode label')}>
             <Select.Root
               value={settings.editorInputMode ?? 'default'}
               onValueChange={(value) => {
@@ -58,9 +58,9 @@ export const ScriptPluginSettings = ({ settings, onSettingsChange }: ScriptPlugi
                 </Select.Content>
               </Select.Portal>
             </Select.Root>
-          </ControlItemInput>
-        </ControlGroup>
-      </ControlSection>
-    </ControlPage>
+          </Settings.ItemInput>
+        </Settings.Group>
+      </Settings.Section>
+    </Settings.Root>
   );
 };

package/src/containers/ScriptPluginSettings/index.ts

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

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, (o) => {
+            o.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/{components/TestPanel → containers/TestContainer}/TestContainer.tsx

@@ -5,12 +5,11 @@
 import React from 'react';
 
 import { type Script } from '@dxos/functions';
-import { Layout } from '@dxos/react-ui-mosaic';
+import { Panel } from '@dxos/react-ui';
 
+import { TestPanel } from '../../components';
 import { useDeployState, useToolbarState } from '../../hooks';
 
-import { TestPanel } from './TestPanel';
-
 export type TestContainerProps = {
   role: string;
   script: Script.Script;
@@ -20,8 +19,10 @@ export const TestContainer = ({ role, script }: TestContainerProps) => {
   const state = useToolbarState();
   useDeployState({ state, script });
   return (
-    <Layout.Main role={role}>
-      <TestPanel functionUrl={state.value.functionUrl} />
-    </Layout.Main>
+    <Panel.Root role={role} className='dx-article'>
+      <Panel.Content asChild>
+        <TestPanel functionUrl={state.value.functionUrl} />
+      </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,13 @@
+//
+// 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 ScriptPluginSettings: ComponentType<any> = lazy(() => import('./ScriptPluginSettings'));
+export const ScriptProperties: ComponentType<any> = lazy(() => import('./ScriptProperties'));
+export const TestContainer: ComponentType<any> = lazy(() => import('./TestContainer'));

package/src/e2e/deploy.test.ts

@@ -50,7 +50,7 @@ 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));
 

package/src/hooks/deploy.ts

@@ -11,7 +11,7 @@ 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 { deployScript, getFunctionUrl, isScriptDeployed } from '../util';
@@ -45,7 +45,7 @@ export const createDeploy = ({ state, script, space, fn, client, existingFunctio
     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>(
@@ -94,9 +94,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' },
     ],
   };
 };

package/src/hooks/format.ts

@@ -50,6 +50,7 @@ export const createFormat = (script: Script.Script) => {
       {
         source: 'root',
         target: 'format',
+        relation: 'child',
       },
     ],
   };

package/src/hooks/template.ts

@@ -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,7 +2,7 @@
 // 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';
 

package/src/hooks/useCreateAndDeployScriptTemplates.ts

@@ -4,7 +4,7 @@
 
 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';

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';