@dxos/plugin-script 0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264 → 0.13.0

package/src/containers/ScriptArticle/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export { ScriptArticle as default } from './ScriptArticle';
+export { ScriptArticle as default } from './ScriptArticle.tsx';

package/src/containers/ScriptProperties/FunctionBinding.tsx

@@ -4,22 +4,24 @@
 
 import React, { type ChangeEvent, useCallback } from 'react';
 
-import { getUserFunctionIdInMetadata } from '@dxos/compute-runtime';
-import { getInvocationUrl } from '@dxos/compute-runtime';
+import { getInvocationUrl, getUserFunctionIdInMetadata } from '@dxos/compute-runtime';
 import * as Operation from '@dxos/compute/Operation';
 import type * as Script from '@dxos/compute/Script';
 import { Filter, Obj, Ref } from '@dxos/echo';
 import { useQuery } from '@dxos/echo-react';
 import { useClient } from '@dxos/react-client';
-import { Clipboard, Flex, Input, useControlledState, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
+import * as Field from '@dxos/react-ui/Field';
+import * as Hooks from '@dxos/react-ui/Hooks';
+import * as Input from '@dxos/react-ui/Input';
+import * as SystemButton from '@dxos/react-ui/SystemButton';
 
 import { meta } from '#meta';
 
 export type FunctionBindingProps = { object: Script.Script };
 
 export const FunctionBinding = ({ object }: FunctionBindingProps) => {
-  const { t } = useTranslation(meta.profile.key);
+  const { t } = Hooks.useTranslation(meta.profile.key);
   const client = useClient();
   const db = Obj.getDatabase(object);
 
@@ -31,7 +33,7 @@ export const FunctionBinding = ({ object }: FunctionBindingProps) => {
       spaceId: db?.spaceId,
     });
 
-  const [binding, setBinding] = useControlledState(fn?.binding ?? '');
+  const [binding, setBinding] = Hooks.useControlledState(fn?.binding ?? '');
   const handleBindingChange = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => setBinding(event.target.value),
     [setBinding],
@@ -50,13 +52,11 @@ export const FunctionBinding = ({ object }: FunctionBindingProps) => {
   }
 
   return (
-    <Flex column>
-      <Form.Section title={t('remote-function-settings.heading')} />
-
+    <Form.FieldSet label={t('remote-function-settings.heading')}>
       {functionUrl && (
-        <Input.Root>
-          <Input.Label>{t('function-url.label')}</Input.Label>
-          <Input.TextInput
+        <Field.Root>
+          <Field.Label>{t('function-url.label')}</Field.Label>
+          <Input.Root
             disabled
             value={functionUrl}
             onChange={(event) => {
@@ -65,20 +65,20 @@ export const FunctionBinding = ({ object }: FunctionBindingProps) => {
               });
             }}
           />
-          <Clipboard.IconButton value={functionUrl} />
-        </Input.Root>
+          <SystemButton.Clipboard iconOnly value={functionUrl} />
+        </Field.Root>
       )}
 
-      <Input.Root>
-        <Input.Label>{t('function-binding.label')}</Input.Label>
-        <Input.TextInput
+      <Field.Root>
+        <Field.Label>{t('function-binding.label')}</Field.Label>
+        <Input.Root
           placeholder={t('function-binding.placeholder')}
           value={binding}
           onChange={handleBindingChange}
           onBlur={handleBindingBlur}
         />
-      </Input.Root>
-    </Flex>
+      </Field.Root>
+    </Form.FieldSet>
   );
 };
 

package/src/containers/ScriptProperties/FunctionPublishing.tsx

@@ -5,15 +5,19 @@
 import { Octokit } from '@octokit/core';
 import React, { useCallback, useState } from 'react';
 
-import { useOperationInvoker } from '@dxos/app-framework/ui';
+import * as Hooks from '@dxos/app-framework/Hooks';
 import * as SettingsOperation from '@dxos/app-toolkit/SettingsOperation';
 import type * as Script from '@dxos/compute/Script';
 import { Filter, Obj } from '@dxos/echo';
 import { useQuery } from '@dxos/echo-react';
 import { AccessToken } from '@dxos/link';
 import { log } from '@dxos/log';
-import { Banner, Button, Clipboard, Flex, useAsyncEffect, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
+import * as Banner from '@dxos/react-ui/Banner';
+import * as Button from '@dxos/react-ui/Button';
+import * as UiHooks from '@dxos/react-ui/Hooks';
+import * as Layout from '@dxos/react-ui/Layout';
+import * as SystemButton from '@dxos/react-ui/SystemButton';
 import { kebabize } from '@dxos/util';
 
 import { meta } from '#meta';
@@ -22,15 +26,15 @@ export type FunctionPublishingProps = { object: Script.Script };
 
 // TODO(burdon): Move to separate tab?
 export const FunctionPublishing = ({ object }: FunctionPublishingProps) => {
-  const { t } = useTranslation(meta.profile.key);
-  const { invokePromise } = useOperationInvoker();
+  const { t } = UiHooks.useTranslation(meta.profile.key);
+  const { invokePromise } = Hooks.useOperationInvoker();
   const db = Obj.getDatabase(object);
 
   const [githubToken] = useQuery(db, Filter.type(AccessToken.AccessToken, { source: 'github.com' }));
   const gistKey = Obj.getMeta(object).keys.find(({ source }) => source === 'github.com');
   const [gistUrl, setGistUrl] = useState<string | undefined>();
 
-  useAsyncEffect(async () => {
+  UiHooks.useAsyncEffect(async () => {
     const token = githubToken?.token;
     const gistId = gistKey?.id;
     if (!token || !gistId) {
@@ -94,31 +98,27 @@ export const FunctionPublishing = ({ object }: FunctionPublishingProps) => {
   }, [object, githubToken]);
 
   return (
-    <Flex column>
-      <Form.Section title={t('script-publish-settings.label')} description={t('script-publish-settings.description')} />
-
+    <Form.FieldSet label={t('script-publish-settings.label')} description={t('script-publish-settings.description')}>
       {!githubToken && (
-        <Flex column classNames='py-form-gap'>
+        <Layout.Flex column classNames='py-form-gap'>
           <Banner.Root valence='info'>
-            <Banner.Content>
-              <Banner.Title>{t('no-github-token.label')}</Banner.Title>
-            </Banner.Content>
+            <Banner.Title>{t('no-github-token.label')}</Banner.Title>
           </Banner.Root>
-          <Flex classNames='pt-form-gap'>
-            <Button onClick={handleOpenTokenManager}>{t('open-token-manager.label')}</Button>
-          </Flex>
-        </Flex>
+          <Layout.Flex classNames='pt-form-gap'>
+            <Button.Root onClick={handleOpenTokenManager}>{t('open-token-manager.label')}</Button.Root>
+          </Layout.Flex>
+        </Layout.Flex>
       )}
 
       {githubToken && (
-        <Flex gap='sm' justify='end'>
-          {gistUrl && <Clipboard.IconButton value={gistUrl} />}
-          <Button disabled={publishing} onClick={handlePublish}>
+        <Layout.Flex gap='sm' justify='end'>
+          {gistUrl && <SystemButton.Clipboard iconOnly value={gistUrl} />}
+          <Button.Root disabled={publishing} onClick={handlePublish}>
             {t('publish.label')}
-          </Button>
-        </Flex>
+          </Button.Root>
+        </Layout.Flex>
       )}
-    </Flex>
+    </Form.FieldSet>
   );
 };
 

package/src/containers/ScriptProperties/ScriptProperties.stories.tsx

@@ -14,7 +14,7 @@ import { Filter } from '@dxos/echo';
 import { useQuery } from '@dxos/echo-react';
 import { ClientPlugin } from '@dxos/plugin-client/testing';
 import { initializeIdentity } from '@dxos/plugin-client/testing';
-import { corePlugins } from '@dxos/plugin-testing';
+import * as CorePlugins from '@dxos/plugin-testing/CorePlugins';
 import * as StorybookPlugin from '@dxos/plugin-testing/StorybookPlugin';
 import { useSpaces } from '@dxos/react-client/echo';
 import { ObjectProperties } from '@dxos/react-ui-form';
@@ -24,7 +24,7 @@ import { Text } from '@dxos/schema';
 import { createScript } from '#testing';
 import { translations } from '#translations';
 
-import { ScriptProperties } from './ScriptProperties';
+import { ScriptProperties } from './ScriptProperties.tsx';
 
 type StoryArgs = {};
 
@@ -50,7 +50,7 @@ const meta = {
     withLayout({ layout: 'column' }),
     withPluginManager({
       plugins: [
-        ...corePlugins(),
+        ...CorePlugins.make(),
         ClientPlugin.make({
           types: [Script.Script, Operation.PersistentOperation, Skill.Skill, Text.Text],
           onClientInitialized: ({ client }) =>

package/src/containers/ScriptProperties/ScriptProperties.tsx

@@ -4,28 +4,28 @@
 
 import React from 'react';
 
-import { type AppSurface } from '@dxos/app-toolkit/ui';
+import type * as AppSurface from '@dxos/app-toolkit/AppSurface';
 import type * as Script from '@dxos/compute/Script';
 import { Form } from '@dxos/react-ui-form';
 
-import { FunctionBinding } from './FunctionBinding';
-import { FunctionPublishing } from './FunctionPublishing';
-import { SkillEditor } from './SkillEditor';
+import { FunctionBinding } from './FunctionBinding.tsx';
+import { FunctionPublishing } from './FunctionPublishing.tsx';
+import { SkillEditor } from './SkillEditor.tsx';
 
 export type ScriptPropertiesProps = AppSurface.ObjectPropertiesProps<Script.Script>;
 
 export const ScriptProperties = ({ subject: object }: ScriptPropertiesProps) => {
   return (
     <>
-      <Form.Section>
+      <Form.FieldSet>
         <FunctionBinding object={object} />
-      </Form.Section>
-      <Form.Section>
+      </Form.FieldSet>
+      <Form.FieldSet>
         <SkillEditor object={object} />
-      </Form.Section>
-      <Form.Section>
+      </Form.FieldSet>
+      <Form.FieldSet>
         <FunctionPublishing object={object} />
-      </Form.Section>
+      </Form.FieldSet>
     </>
   );
 };

package/src/containers/ScriptProperties/SkillEditor.tsx

@@ -11,8 +11,11 @@ import * as Skill from '@dxos/compute/Skill';
 import * as Template from '@dxos/compute/Template';
 import { Filter, Obj, Ref } from '@dxos/echo';
 import { useQuery } from '@dxos/echo-react';
-import { Button, Flex, Input, useAsyncEffect, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
+import * as Button from '@dxos/react-ui/Button';
+import * as Field from '@dxos/react-ui/Field';
+import * as Hooks from '@dxos/react-ui/Hooks';
+import * as Input from '@dxos/react-ui/Input';
 import { kebabize } from '@dxos/util';
 
 import { meta } from '#meta';
@@ -20,7 +23,7 @@ import { meta } from '#meta';
 export type SkillEditorProps = { object: Script.Script };
 
 export const SkillEditor = ({ object }: SkillEditorProps) => {
-  const { t } = useTranslation(meta.profile.key);
+  const { t } = Hooks.useTranslation(meta.profile.key);
   const db = Obj.getDatabase(object);
   const [fn] = useQuery(db, Filter.type(Operation.PersistentOperation, { source: Ref.make(object) }));
   const skills = useQuery(db, Filter.type(Skill.Skill));
@@ -32,7 +35,7 @@ export const SkillEditor = ({ object }: SkillEditorProps) => {
   const existingSkill = skills.find((bp) => Obj.getMeta(bp).key === skillKey);
   const fnKey = fn ? Obj.getMeta(fn).key : undefined;
 
-  useAsyncEffect(async () => {
+  Hooks.useAsyncEffect(async () => {
     if (!existingSkill) {
       return;
     }
@@ -58,7 +61,8 @@ export const SkillEditor = ({ object }: SkillEditorProps) => {
           const toolId = ToolId.make(fnKey);
           if (!existingSkill.tools?.includes(toolId)) {
             Obj.update(existingSkill, (existingSkill) => {
-              existingSkill.tools = [...(existingSkill.tools ?? []), toolId];
+              existingSkill.tools ??= [];
+              existingSkill.tools.push(toolId);
             });
           }
         }
@@ -79,26 +83,24 @@ export const SkillEditor = ({ object }: SkillEditorProps) => {
   }, [db, existingSkill, fnKey, skillKey, object.name, instructions]);
 
   return (
-    <Flex column>
-      <Form.Section title={t('skill-editor.label')} description={t('skill-editor.description')} />
-
-      <Input.Root>
-        <Input.Label>{t('skill-instructions.label')}</Input.Label>
-        <Input.TextArea
+    <Form.FieldSet label={t('skill-editor.label')} description={t('skill-editor.description')}>
+      <Field.Root>
+        <Field.Label>{t('skill-instructions.label')}</Field.Label>
+        <Input.Textarea
           placeholder={t('skill-instructions.placeholder')}
           rows={6}
           value={instructions}
           onChange={(event) => setInstructions(event.target.value)}
           classNames='resize-y'
         />
-      </Input.Root>
+      </Field.Root>
 
       <div className='pt-2'>
-        <Button disabled={(!existingSkill && !fnKey) || creating} onClick={handleSave}>
+        <Button.Root disabled={(!existingSkill && !fnKey) || creating} onClick={handleSave}>
           {t(existingSkill ? 'update-skill.label' : 'create-skill.label')}
-        </Button>
+        </Button.Root>
       </div>
-    </Flex>
+    </Form.FieldSet>
   );
 };
 

package/src/containers/ScriptProperties/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export { ScriptProperties as default } from './ScriptProperties';
+export { ScriptProperties as default } from './ScriptProperties.tsx';

package/src/containers/ScriptSettings/ScriptSettings.stories.tsx

@@ -8,7 +8,7 @@ import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '#translations';
 
-import { ScriptSettings } from './ScriptSettings';
+import { ScriptSettings } from './ScriptSettings.tsx';
 
 const meta = {
   title: 'plugins/plugin-script/containers/ScriptSettings',

package/src/containers/ScriptSettings/ScriptSettings.tsx

@@ -4,9 +4,10 @@
 
 import React from 'react';
 
-import { type AppSurface } from '@dxos/app-toolkit/ui';
-import { Button, useTranslation } from '@dxos/react-ui';
+import type * as AppSurface from '@dxos/app-toolkit/AppSurface';
 import { Form } from '@dxos/react-ui-form';
+import * as Button from '@dxos/react-ui/Button';
+import * as Hooks from '@dxos/react-ui/Hooks';
 
 import { meta } from '#meta';
 import { Settings } from '#types';
@@ -18,8 +19,8 @@ export type ScriptSettingsProps = AppSurface.SettingsProps<
   }
 >;
 
-export const ScriptSettings = ({ settings, onSettingsChange, onAuthenticate }: ScriptSettingsProps) => {
-  const { t } = useTranslation(meta.profile.key);
+export const ScriptSettings = ({ settings, onSettingsChange, scope, onAuthenticate }: ScriptSettingsProps) => {
+  const { t } = Hooks.useTranslation(meta.profile.key);
 
   return (
     <Form.Root
@@ -31,15 +32,19 @@ export const ScriptSettings = ({ settings, onSettingsChange, onAuthenticate }: S
     >
       <Form.Viewport scroll>
         <Form.Content>
-          <Form.Section title={meta.profile.name ?? meta.profile.key}>
+          <Form.FieldSet label={meta.profile.name ?? meta.profile.key} actions={scope}>
             {/* TODO(wittjosiah): Hide outside of dev environments. */}
-            <Form.Row label={t('authenticate-action.label')} description={t('authenticate-action.description')}>
-              <Button disabled={!onSettingsChange} onClick={onAuthenticate}>
+            <Form.Field
+              standalone
+              label={t('authenticate-action.label')}
+              description={t('authenticate-action.description')}
+            >
+              <Button.Root disabled={!onSettingsChange} onClick={onAuthenticate}>
                 {t('authenticate-button.label')}
-              </Button>
-            </Form.Row>
-            <Form.FieldSet />
-          </Form.Section>
+              </Button.Root>
+            </Form.Field>
+            <Form.Fields />
+          </Form.FieldSet>
         </Form.Content>
       </Form.Viewport>
     </Form.Root>

package/src/containers/ScriptSettings/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export { ScriptSettings as default } from './ScriptSettings';
+export { ScriptSettings as default } from './ScriptSettings.tsx';

package/src/containers/TestContainer/TestContainer.tsx

@@ -8,7 +8,7 @@ import type * as Script from '@dxos/compute/Script';
 import { Context } from '@dxos/context';
 import { Obj } from '@dxos/echo';
 import { FunctionsServiceClient } from '@dxos/edge-compute';
-import { Panel } from '@dxos/react-ui';
+import * as Panel from '@dxos/react-ui/Panel';
 
 import { TestPanel } from '#components';
 import { useDeployDeps } from '#hooks';
@@ -35,10 +35,10 @@ export const TestContainer = ({ role, script }: TestContainerProps) => {
   );
 
   return (
-    <Panel.Root role={role} classNames='dx-document'>
-      <Panel.Content asChild>
+    <Panel.Root role={role} width='document'>
+      <Panel.Body asChild>
         <TestPanel onInvoke={existingFunctionId ? handleInvoke : undefined} />
-      </Panel.Content>
+      </Panel.Body>
     </Panel.Root>
   );
 };

package/src/containers/TestContainer/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export { TestContainer as default } from './TestContainer';
+export { TestContainer as default } from './TestContainer.tsx';

package/src/containers/index.ts

@@ -4,9 +4,9 @@
 
 import { type ComponentType, lazy } from 'react';
 
-export const DeploymentDialog: ComponentType<any> = lazy(() => import('./DeploymentDialog'));
-export const NotebookArticle: ComponentType<any> = lazy(() => import('./NotebookArticle'));
-export const ScriptArticle: ComponentType<any> = lazy(() => import('./ScriptArticle'));
-export const ScriptProperties: ComponentType<any> = lazy(() => import('./ScriptProperties'));
-export const ScriptSettings: ComponentType<any> = lazy(() => import('./ScriptSettings'));
-export const TestContainer: ComponentType<any> = lazy(() => import('./TestContainer'));
+export const DeploymentDialog: ComponentType<any> = lazy(() => import('./DeploymentDialog/index.ts'));
+export const NotebookArticle: ComponentType<any> = lazy(() => import('./NotebookArticle/index.ts'));
+export const ScriptArticle: ComponentType<any> = lazy(() => import('./ScriptArticle/index.ts'));
+export const ScriptProperties: ComponentType<any> = lazy(() => import('./ScriptProperties/index.ts'));
+export const ScriptSettings: ComponentType<any> = lazy(() => import('./ScriptSettings/index.ts'));
+export const TestContainer: ComponentType<any> = lazy(() => import('./TestContainer/index.ts'));

package/src/e2e/ai.test.ts

@@ -14,7 +14,7 @@ import { FunctionsServiceClient } from '@dxos/edge-compute';
 import { bundleFunction } from '@dxos/edge-compute/native';
 import { failedInvariant } from '@dxos/invariant';
 import { FunctionRuntimeKind } from '@dxos/protocols';
-import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
+import { EdgeReplicationSetting } from '@dxos/protocols/buf/dxos/echo/metadata_pb';
 
 // To heavy to run in CI.
 describe.skip('Function', { tags: ['functions-e2e'] }, () => {

package/src/hooks/deploy.ts

@@ -11,13 +11,13 @@ import { type Database, Obj, Query, Ref } from '@dxos/echo';
 import { useQuery } from '@dxos/echo-react';
 import { log } from '@dxos/log';
 import { type Client, useClient } from '@dxos/react-client';
-import { type TFunction } from '@dxos/react-ui';
 import { type ActionGraphProps, createMenuAction } from '@dxos/react-ui-menu';
+import type * as Theme from '@dxos/react-ui/Theme';
 import { messageValence } from '@dxos/ui-theme';
 
 import { meta } from '#meta';
 
-import { deployScript, getFunctionUrl, isScriptDeployed } from '../util';
+import { deployScript, getFunctionUrl, isScriptDeployed } from '../util/index.ts';
 
 export type DeployActionProperties = { type: 'deploy' } | { type: 'copy' };
 
@@ -28,7 +28,7 @@ export type DeployState = {
   error: string;
 };
 
-import { type ScriptToolbarStateStore } from './useToolbarState';
+import { type ScriptToolbarStateStore } from './useToolbarState.ts';
 
 export type CreateDeployOptions = {
   state: ScriptToolbarStateStore;
@@ -37,7 +37,7 @@ export type CreateDeployOptions = {
   db?: Database.Database;
   existingFunctionId?: string;
   client: Client;
-  t: TFunction;
+  t: Theme.TFunction;
 };
 
 export const createDeploy = ({
@@ -69,7 +69,14 @@ export const createDeploy = ({
       state.set('error', undefined);
       state.set('deploying', true);
 
-      const result = await deployScript({ script, client, db, fn, existingFunctionId });
+      const result = await deployScript({
+        script,
+        getEdgeHttpClient: () => client.edge.http,
+        ownerDid: client.halo.identity.get()?.did,
+        db,
+        fn,
+        existingFunctionId,
+      });
 
       if (!result.success) {
         log.catch(result.error);

package/src/hooks/index.ts

@@ -2,10 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './deploy';
-export * from './format';
-export * from './template';
+export * from './deploy.ts';
+export * from './format.ts';
+export * from './template.ts';
 
-export * from './useCreateAndDeployScriptTemplates';
-export * from './useToolbarState';
-export * from './useCompiler';
+export * from './useCreateAndDeployScriptTemplates.ts';
+export * from './useToolbarState.ts';
+export * from './useCompiler.ts';

package/src/hooks/template.ts

@@ -7,7 +7,7 @@ import * as Script from '@dxos/compute/Script';
 import { Obj } from '@dxos/echo';
 import { type ActionGraphProps, createMenuAction } from '@dxos/react-ui-menu';
 
-import { templates } from '../templates';
+import { templates } from '../templates/index.ts';
 
 export type TemplateActionProperties = { type: 'template'; value: string };
 

package/src/hooks/useCompiler.ts

@@ -2,23 +2,24 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useCapabilities, usePluginManager } from '@dxos/app-framework/ui';
-import { EffectEx } from '@dxos/effect';
-import { useAsyncEffect } from '@dxos/react-ui';
+import * as Hooks from '@dxos/app-framework/Hooks';
+import * as PluginManagerProvider from '@dxos/app-framework/PluginManagerProvider';
+import * as EffectEx from '@dxos/effect/EffectEx';
+import * as UiHooks from '@dxos/react-ui/Hooks';
 
 import { ScriptCapabilities, ScriptEvents } from '#types';
 
-import type { Compiler } from '../compiler';
+import type { Compiler } from '../compiler/index.ts';
 
 /**
  * Asynchronously sets up the compiler and returns it.
  * @returns The compiler instance or undefined if it is not ready.
  */
 export const useCompiler = (): Compiler | undefined => {
-  const manager = usePluginManager();
-  useAsyncEffect(async () => {
+  const manager = PluginManagerProvider.usePluginManager();
+  UiHooks.useAsyncEffect(async () => {
     await manager.activate(ScriptEvents.SetupCompiler).pipe(EffectEx.runAndForwardErrors);
   }, [manager]);
-  const [compiler] = useCapabilities(ScriptCapabilities.Compiler);
+  const [compiler] = Hooks.useCapabilities(ScriptCapabilities.Compiler);
   return compiler;
 };

package/src/hooks/useCreateAndDeployScriptTemplates.ts

@@ -4,7 +4,7 @@
 
 import { useCallback, useState } from 'react';
 
-import { useOperationInvoker } from '@dxos/app-framework/ui';
+import * as Hooks from '@dxos/app-framework/Hooks';
 import * as Script from '@dxos/compute/Script';
 import { type Database, Obj } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
@@ -13,8 +13,8 @@ import { useClient } from '@dxos/react-client';
 
 import { ScriptOperation } from '#types';
 
-import { type Template } from '../templates';
-import { deployScript } from '../util';
+import { type Template } from '../templates/index.ts';
+import { deployScript } from '../util/index.ts';
 
 type DeploymentStatus = 'idle' | 'pending' | 'success' | 'error';
 
@@ -26,7 +26,7 @@ type DeploymentStatus = 'idle' | 'pending' | 'success' | 'error';
  * All creation / deployment operations run concurrently for improved performance.
  */
 export const useCreateAndDeployScriptTemplates = (db: Database.Database | undefined, scriptTemplates: Template[]) => {
-  const { invokePromise } = useOperationInvoker();
+  const { invokePromise } = Hooks.useOperationInvoker();
   const client = useClient();
   const [status, setStatus] = useState<DeploymentStatus>('idle');
   const [error, setError] = useState<Error | undefined>(undefined);
@@ -45,7 +45,12 @@ export const useCreateAndDeployScriptTemplates = (db: Database.Database | undefi
         invariant(Obj.instanceOf(Script.Script, createResult.data?.object));
         await invokePromise(SpaceOperation.AddObject, { object: createResult.data.object }, { spaceId: db.spaceId });
 
-        return deployScript({ db, client, script: createResult.data.object });
+        return deployScript({
+          db,
+          getEdgeHttpClient: () => client.edge.http,
+          ownerDid: client.halo.identity.get()?.did,
+          script: createResult.data.object,
+        });
       }),
     );
 

package/src/hooks/useToolbarState.ts

@@ -2,13 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import * as Atom from 'effect/unstable/reactivity/Atom';
+import * as Atom from 'effect/reactivity/Atom';
 import { useMemo } from 'react';
 
 import * as Capabilities from '@dxos/app-framework/Capabilities';
-import { useCapability } from '@dxos/app-framework/ui';
+import * as Hooks from '@dxos/app-framework/Hooks';
 
-import { type DeployState } from './deploy';
+import { type DeployState } from './deploy.ts';
 
 export type ScriptToolbarState = Partial<DeployState>;
 
@@ -20,7 +20,7 @@ export type ScriptToolbarStateStore = {
 };
 
 export const useToolbarState = (initialState: ScriptToolbarState = {}): ScriptToolbarStateStore => {
-  const registry = useCapability(Capabilities.AtomRegistry);
+  const registry = Hooks.useCapability(Capabilities.AtomRegistry);
   const atom = useMemo(() => Atom.make<ScriptToolbarState>(initialState), []);
 
   return useMemo(

package/src/index.ts

@@ -2,7 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-export * as ScriptPlugin from './ScriptPlugin';
-export * from '#meta';
+export * as ScriptPlugin from './ScriptPlugin.ts';
 export * from '#types';
-export * from './util';
+export * as ScriptFunction from './ScriptFunction.ts';
+export * as Templates from './Templates.ts';
+export * from '#operations';
+export * from '#skills';