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

package/src/capabilities/gen/workerd.ts

@@ -11,7 +11,7 @@ import * as AppCapability from '@dxos/app-toolkit/AppCapability';
 import { translations } from '#translations';
 import { ScriptCapabilities, ScriptEvents } from '#types';
 
-export const Schema = AppCapability.schema(() => import('../schema'));
+export const Schema = AppCapability.schema(() => import('../schema.ts'));
 
 export const Compiler = Capability.lazyModule(
   'Compiler',
@@ -20,14 +20,14 @@ export const Compiler = Capability.lazyModule(
     // Genuine runtime event: the compiler is only loaded on demand (`hooks/useCompiler.ts`), not at startup.
     activatesOn: ScriptEvents.SetupCompiler,
   },
-  () => import('../compiler'),
+  () => import('../compiler.ts'),
 );
 
-export const OperationHandler = AppCapability.operationHandler(() => import('../operation-handler'), {
+export const OperationHandler = AppCapability.operationHandler(() => import('../operation-handler.ts'), {
   activatesOn: ActivationEvents.Idle,
 });
 
-export const ScriptSettings = AppCapability.settings(() => import('../settings'), {
+export const ScriptSettings = AppCapability.settings(() => import('../settings.ts'), {
   activatesOn: ActivationEvents.Idle,
   provides: [ScriptCapabilities.Settings],
 });

package/src/capabilities/index.ts

@@ -14,15 +14,15 @@ import { ScriptCapabilities, ScriptEvents } from '#types';
 // eslint-disable-next-line import/no-relative-packages
 import pluginSpec from '../../PLUGIN.mdl?raw';
 
-export const AppGraphBuilder = AppCapability.appGraphBuilder(() => import('./app-graph-builder'), {
-  environments: ['node'],
+export const AppGraphBuilder = AppCapability.appGraphBuilder(() => import('./app-graph-builder.ts'), {
+  environments: ['browser', 'node', 'tauri'],
 });
-export const Schema = AppCapability.schema(() => import('./schema'));
-export const SkillDefinition = AppCapability.skillDefinition(() => import('./skill-definition'), {
-  environments: ['node'],
+export const Schema = AppCapability.schema(() => import('./schema.ts'));
+export const SkillDefinition = AppCapability.skillDefinition(() => import('./skill-definition.ts'), {
+  environments: ['browser', 'node', 'tauri'],
 });
-export const CreateObject = SpaceCapability.createObject(() => import('./create-object'), {
-  environments: ['node'],
+export const CreateObject = SpaceCapability.createObject(() => import('./create-object.ts'), {
+  environments: ['browser', 'node', 'tauri'],
 });
 export const Compiler = Capability.lazyModule(
   'Compiler',
@@ -31,15 +31,15 @@ export const Compiler = Capability.lazyModule(
     // Genuine runtime event: the compiler is only loaded on demand (`hooks/useCompiler.ts`), not at startup.
     activatesOn: ScriptEvents.SetupCompiler,
   },
-  () => import('./compiler'),
+  () => import('./compiler.ts'),
 );
-export const OperationHandler = AppCapability.operationHandler(() => import('./operation-handler'), {
+export const OperationHandler = AppCapability.operationHandler(() => import('./operation-handler.ts'), {
   activatesOn: ActivationEvents.Idle,
 });
-export const ReactSurface = AppCapability.surface(() => import('./react-surface'), {
+export const ReactSurface = AppCapability.surface(() => import('./react-surface.ts'), {
   roles: ['org.dxos.role.article', 'org.dxos.role.dialog', 'org.dxos.role.objectProperties', 'org.dxos.role.section'],
 });
-export const ScriptSettings = AppCapability.settings(() => import('./settings'), {
+export const ScriptSettings = AppCapability.settings(() => import('./settings.ts'), {
   activatesOn: ActivationEvents.Idle,
   provides: [ScriptCapabilities.Settings],
 });

package/src/capabilities/operation-handler.ts

@@ -10,7 +10,7 @@ import * as OperationHandlerSet from '@dxos/compute/OperationHandlerSet';
 
 import { ScriptOperationHandlerSet } from '#operations';
 
-import { ScriptHandlers } from '../skills/functions';
+import { ScriptHandlers } from '../skills/functions/index.ts';
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {

package/src/capabilities/react-surface.ts

@@ -7,21 +7,21 @@ import { type ComponentProps } from 'react';
 
 import * as Capabilities from '@dxos/app-framework/Capabilities';
 import * as Capability from '@dxos/app-framework/Capability';
-import { Surface } from '@dxos/app-framework/ui';
-import { AppSurface } from '@dxos/app-toolkit/ui';
+import * as Surface from '@dxos/app-framework/Surface';
+import * as AppSurface from '@dxos/app-toolkit/AppSurface';
 import * as Script from '@dxos/compute/Script';
 
 import { DeploymentDialog, ScriptProperties, TestContainer } from '#containers';
 import { meta } from '#meta';
 import { Notebook } from '#types';
 
-import { DEPLOYMENT_DIALOG } from '../constants';
+import { DEPLOYMENT_DIALOG } from '../constants.ts';
 import {
   NotebookArticleSurface,
   ScriptArticleSurface,
   ScriptLogsSurface,
   ScriptSettingsSurface,
-} from './ScriptSurfaces';
+} from './ScriptSurfaces.tsx';
 
 export default Capability.makeModule(() =>
   Effect.succeed(

package/src/capabilities/settings.ts

@@ -6,14 +6,14 @@ import * as Effect from 'effect/Effect';
 
 import * as Capability from '@dxos/app-framework/Capability';
 import * as AppCapabilities from '@dxos/app-toolkit/AppCapabilities';
-import { createKvsStore } from '@dxos/effect';
+import * as KvsStore from '@dxos/effect/KvsStore';
 
 import { meta } from '#meta';
 import { ScriptCapabilities, Settings } from '#types';
 
 export default Capability.makeModule(() =>
   Effect.sync(() => {
-    const settingsAtom = createKvsStore({
+    const settingsAtom = KvsStore.make({
       key: meta.profile.key,
       schema: Settings.Settings,
       defaultValue: () => ({

package/src/compiler/compiler.browser.test.ts

@@ -4,7 +4,7 @@
 
 import { describe, expect, test } from 'vitest';
 
-import { Compiler } from './compiler';
+import { Compiler } from './compiler.ts';
 
 describe('Compiler', () => {
   test('Basic', async () => {

package/src/compiler/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './compiler';
+export * from './compiler.ts';

package/src/components/NotebookStack/NotebookCell.tsx

@@ -4,15 +4,16 @@
 
 import React, { useCallback, useMemo } from 'react';
 
-import { Surface } from '@dxos/app-framework/ui';
-import { AppSurface } from '@dxos/app-toolkit/ui';
+import * as Surface from '@dxos/app-framework/Surface';
+import * as AppSurface from '@dxos/app-toolkit/AppSurface';
 import { type Database, Obj } from '@dxos/echo';
 import { Doc } from '@dxos/echo-doc';
+import { useResolveRef } from '@dxos/echo-react';
 import { invariant } from '@dxos/invariant';
-import { TemplateEditor } from '@dxos/plugin-routine/components';
-import { useThemeContext, useTranslation } from '@dxos/react-ui';
-import { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-components';
+import * as TemplateEditor from '@dxos/plugin-routine/TemplateEditor';
 import { Editor, type EditorViewProps } from '@dxos/react-ui-editor';
+import { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-query';
+import * as Hooks from '@dxos/react-ui/Hooks';
 import {
   type BasicExtensionsOptions,
   createBasicExtensions,
@@ -27,9 +28,9 @@ import { isNonNullable } from '@dxos/util';
 import { meta } from '#meta';
 import { Notebook } from '#types';
 
-import { type ComputeGraph } from '../../notebook';
-import { TypescriptEditor, type TypescriptEditorProps } from '../TypescriptEditor';
-import { type NotebookMenuProps } from './NotebookMenu';
+import { type ComputeGraph } from '../../notebook/index.ts';
+import { TypescriptEditor, type TypescriptEditorProps } from '../TypescriptEditor/index.ts';
+import { type NotebookMenuProps } from './NotebookMenu.tsx';
 
 const editorStyles = 'p-2 ps-3';
 const valueStyles = 'p-1 ps-3';
@@ -44,15 +45,15 @@ export type NotebookCellProps = {
 
 // TODO(burdon): Show evaluation errors.
 export const NotebookCell = ({ db, graph, dragging, cell, promptResults, env }: NotebookCellProps) => {
-  const { t } = useTranslation(meta.profile.key);
+  const { t } = Hooks.useTranslation(meta.profile.key);
 
-  const extensions = useMemo(() => {
-    return cell.source?.target
-      ? [createDataExtensions({ id: cell.id, text: Doc.createAccessor(cell.source.target, ['content']) })]
-      : [];
-  }, [cell.source?.target]);
+  const source = useResolveRef(cell.source);
+  const prompt = useResolveRef(cell.prompt);
+  const explorerGraph = useResolveRef(cell.graph);
 
-  const explorerGraph = cell.graph?.target;
+  const extensions = useMemo(() => {
+    return source ? [createDataExtensions({ id: cell.id, text: Doc.createAccessor(source, ['content']) })] : [];
+  }, [source]);
 
   const handleQueryChange = useCallback<NonNullable<QueryEditorProps['onChange']>>(
     (value: string) => {
@@ -66,7 +67,7 @@ export const NotebookCell = ({ db, graph, dragging, cell, promptResults, env }:
 
   switch (cell.type) {
     case 'markdown':
-      if (!cell.source?.target) {
+      if (!source) {
         return null;
       }
 
@@ -74,23 +75,23 @@ export const NotebookCell = ({ db, graph, dragging, cell, promptResults, env }:
         <NotebookTextEditor
           id={cell.id}
           classNames={editorStyles}
-          initialValue={cell.source.target.content}
+          initialValue={source.content}
           extensions={extensions}
         />
       );
 
     case 'script':
-      if (!cell.source?.target) {
+      if (!source) {
         return null;
       }
 
       return (
-        <div className='flex flex-col divide-y divide-subdued-separator'>
+        <div className='flex flex-col divide-y divide-separator-subtle'>
           <TypescriptEditor
             id={cell.id}
             role='section'
             classNames={editorStyles}
-            initialValue={cell.source.target.content}
+            initialValue={source.content}
             extensions={extensions}
             env={env}
             options={{
@@ -104,7 +105,7 @@ export const NotebookCell = ({ db, graph, dragging, cell, promptResults, env }:
       );
 
     case 'query':
-      if (!cell.source?.target) {
+      if (!source) {
         return null;
       }
 
@@ -115,7 +116,7 @@ export const NotebookCell = ({ db, graph, dragging, cell, promptResults, env }:
             id={cell.id}
             classNames={editorStyles}
             db={db}
-            value={cell.source.target.content}
+            value={source.content}
             onChange={handleQueryChange}
           />
           {explorerGraph && !dragging && (
@@ -130,13 +131,18 @@ export const NotebookCell = ({ db, graph, dragging, cell, promptResults, env }:
 
     // TODO(burdon): Use streaming response from Chat.
     case 'prompt':
-      if (!cell.prompt?.target) {
+      if (!prompt) {
         return null;
       }
 
       return (
         <>
-          <TemplateEditor id={cell.id} source={cell.prompt.target.text} lineNumbers={false} classNames={editorStyles} />
+          <TemplateEditor.TemplateEditor
+            id={cell.id}
+            source={prompt.text}
+            lineNumbers={false}
+            classNames={editorStyles}
+          />
           <NotebookPromptResult cell={cell} promptResults={promptResults} />
         </>
       );
@@ -154,11 +160,11 @@ const NotebookCellValue = ({ cell, graph }: NotebookCellProps) => {
   }
 
   return (
-    <div className={mx('flex w-full bg-group-surface text-description font-mono', valueStyles)}>
+    <div className={mx('flex w-full bg-group-surface text-fg-muted font-mono', valueStyles)}>
       {name && (
         <>
           <span className='text-success-text'>{name}</span>
-          <span className='text-description'>&nbsp;=&nbsp;</span>
+          <span className='text-fg-muted'>&nbsp;=&nbsp;</span>
         </>
       )}
       <span>{value}</span>
@@ -177,7 +183,7 @@ const NotebookPromptResult = ({ cell, promptResults }: NotebookCellProps) => {
   }
 
   return (
-    <div className={mx('flex w-full dx-group-surface text-description border-y border-subdued-separator', valueStyles)}>
+    <div className={mx('flex w-full dx-group-surface text-fg-muted border-y border-separator-subtle', valueStyles)}>
       <NotebookTextEditor readOnly value={value} />
     </div>
   );
@@ -189,8 +195,8 @@ const NotebookTextEditor = ({
   readOnly,
   ...props
 }: EditorViewProps & Pick<BasicExtensionsOptions, 'readOnly'>) => {
-  const { t } = useTranslation(meta.profile.key);
-  const { themeMode } = useThemeContext();
+  const { t } = Hooks.useTranslation(meta.profile.key);
+  const themeMode = Hooks.useThemeMode();
   const extensions = useMemo(() => {
     return [
       createThemeExtensions({ themeMode, syntaxHighlighting: true }),

package/src/components/NotebookStack/NotebookMenu.tsx

@@ -4,7 +4,8 @@
 
 import React from 'react';
 
-import { DropdownMenu, useTranslation } from '@dxos/react-ui';
+import * as Hooks from '@dxos/react-ui/Hooks';
+import * as Menu from '@dxos/react-ui/Menu';
 
 import { meta } from '#meta';
 import { Notebook } from '#types';
@@ -17,31 +18,31 @@ export type NotebookMenuProps = {
 
 // TODO(burdon): Better way to organize menu?
 export const NotebookMenu = ({ cell, onCellInsert, onCellDelete }: NotebookMenuProps) => {
-  const { t } = useTranslation(meta.profile.key);
+  const { t } = Hooks.useTranslation(meta.profile.key);
   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>
+    <Menu.Content>
+      <Menu.Item
+        onClick={() => onCellInsert?.('script', cell?.id)}
+        item={{ value: t('notebook-cell-insert-script.label'), label: t('notebook-cell-insert-script.label') }}
+      />
+      <Menu.Item
+        onClick={() => onCellInsert?.('prompt', cell?.id)}
+        item={{ value: t('notebook-cell-insert-prompt.label'), label: t('notebook-cell-insert-prompt.label') }}
+      />
+      <Menu.Item
+        onClick={() => onCellInsert?.('query', cell?.id)}
+        item={{ value: t('notebook-cell-insert-query.label'), label: t('notebook-cell-insert-query.label') }}
+      />
+      <Menu.Item
+        onClick={() => onCellInsert?.('markdown', cell?.id)}
+        item={{ value: t('notebook-cell-insert-markdown.label'), label: t('notebook-cell-insert-markdown.label') }}
+      />
+      {cell && onCellDelete && (
+        <Menu.Item
+          onClick={() => onCellDelete?.(cell.id)}
+          item={{ value: t('notebook-cell-delete.label'), label: t('notebook-cell-delete.label') }}
+        />
+      )}
+    </Menu.Content>
   );
 };

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

@@ -10,14 +10,14 @@ import { withPluginManager } from '@dxos/app-framework/testing';
 import { ClientPlugin } from '@dxos/plugin-client/testing';
 import { initializeIdentity } from '@dxos/plugin-client/testing';
 import { RoutinePlugin } from '@dxos/plugin-routine/testing';
-import { corePlugins } from '@dxos/plugin-testing';
+import * as CorePlugins from '@dxos/plugin-testing/CorePlugins';
 import { withMosaic } from '@dxos/react-ui-mosaic/testing';
 import { withLayout } from '@dxos/react-ui/testing';
 
 import { createNotebook } from '#testing';
 import { translations } from '#translations';
 
-import { NotebookStack } from './NotebookStack';
+import { NotebookStack } from './NotebookStack.tsx';
 
 const NotebookStackStory = () => {
   const notebook = useMemo(() => createNotebook(), []);
@@ -32,7 +32,7 @@ const meta = {
     withLayout({ layout: 'column', classNames: 'dx-document' }),
     withPluginManager({
       plugins: [
-        ...corePlugins(),
+        ...CorePlugins.make(),
         ClientPlugin.make({
           onClientInitialized: ({ client }) =>
             Effect.gen(function* () {

package/src/components/NotebookStack/NotebookStack.tsx

@@ -5,32 +5,35 @@
 import React, { useCallback, useId, useMemo, useState } from 'react';
 
 import { Obj } from '@dxos/echo';
-import { DropdownMenu, IconButton, ScrollArea, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { composable, composableProps } from '@dxos/react-ui';
 import { type DndContainerHandler } from '@dxos/react-ui-dnd';
 import { Mosaic, type MosaicTileProps } from '@dxos/react-ui-mosaic';
+import * as Button from '@dxos/react-ui/Button';
+import * as Hooks from '@dxos/react-ui/Hooks';
+import * as Menu from '@dxos/react-ui/Menu';
+import * as ScrollArea from '@dxos/react-ui/ScrollArea';
+import * as Util from '@dxos/react-ui/Util';
 import { mx } from '@dxos/ui-theme';
 import { arrayMove } from '@dxos/util';
 
 import { meta } from '#meta';
 import { Notebook } from '#types';
 
-import { type TypescriptEditorProps } from '../TypescriptEditor';
-import { NotebookCell, type NotebookCellProps } from './NotebookCell';
-import { NotebookMenu } from './NotebookMenu';
+import { type TypescriptEditorProps } from '../TypescriptEditor/index.ts';
+import { NotebookCell, type NotebookCellProps } from './NotebookCell.tsx';
+import { NotebookMenu } from './NotebookMenu.tsx';
 
 const minSectionHeight = 'min-h-[16rem]';
 
 const getCellId = (cell: Notebook.Cell) => cell.id;
 
-export type NotebookStackProps = ThemedClassName<
+export type NotebookStackProps = Util.ThemedClassName<
   {
     notebook?: Notebook.Notebook;
   } & (Pick<NotebookSectionProps, 'db' | 'graph' | 'promptResults' | 'onCellInsert' | 'onCellDelete'> &
     Pick<TypescriptEditorProps, 'env'>)
 >;
 
-export const NotebookStack = composable<HTMLDivElement, NotebookStackProps>(
+export const NotebookStack = Util.composable<HTMLDivElement, NotebookStackProps>(
   ({ notebook, db, graph, promptResults, onCellInsert, onCellDelete, env, ...props }, forwardedRef) => {
     const [viewport, setViewport] = useState<HTMLElement | null>(null);
 
@@ -96,7 +99,7 @@ export const NotebookStack = composable<HTMLDivElement, NotebookStackProps>(
         eventHandler={eventHandler}
         ref={forwardedRef}
       >
-        <ScrollArea.Root orientation='vertical' padding {...composableProps(props)}>
+        <ScrollArea.Root orientation='vertical' {...Util.composableProps(props)}>
           <ScrollArea.Viewport ref={setViewport}>
             <Mosaic.Stack orientation='vertical' items={notebook?.cells ?? []} getId={getCellId} Tile={Tile} />
           </ScrollArea.Viewport>
@@ -121,7 +124,7 @@ const NotebookSection = ({
   onCellDelete,
   ...tileProps
 }: NotebookSectionProps) => {
-  const { t } = useTranslation(meta.profile.key);
+  const { t } = Hooks.useTranslation(meta.profile.key);
   const resizable = cell.type === 'query';
   const [dragHandle, setDragHandle] = useState<HTMLButtonElement | null>(null);
 
@@ -131,30 +134,30 @@ const NotebookSection = ({
       data={cell}
       dragHandle={dragHandle}
       classNames={mx(
-        'grid grid-cols-[min-content_1fr] overflow-visible border border-subdued-separator',
+        'grid grid-cols-[min-content_1fr] overflow-visible border border-separator-subtle',
         resizable && minSectionHeight,
       )}
     >
       {/* Side rail */}
-      <div className='flex flex-col p-1 border-e border-subdued-separator dx-attention-surface'>
-        <IconButton
+      <div className='flex flex-col p-1 border-e border-separator-subtle dx-attention-surface'>
+        <Button.Root
           ref={setDragHandle}
           variant='ghost'
           icon='ph--dots-six-vertical--regular'
           iconOnly
           label='Drag handle'
         />
-        <DropdownMenu.Root>
-          <DropdownMenu.Trigger asChild>
-            <IconButton
+        <Menu.Root>
+          <Menu.Trigger asChild>
+            <Button.Root
               variant='ghost'
               icon='ph--dots-three--regular'
               iconOnly
               label={t('notebook-cell-insert.label')}
             />
-          </DropdownMenu.Trigger>
+          </Menu.Trigger>
           <NotebookMenu cell={cell} onCellInsert={onCellInsert} onCellDelete={onCellDelete} />
-        </DropdownMenu.Root>
+        </Menu.Root>
       </div>
 
       <NotebookCell db={db} cell={cell} env={env} graph={graph} promptResults={promptResults} />

package/src/components/NotebookStack/index.ts

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

package/src/components/ScriptToolbar/ScriptToolbar.stories.tsx

@@ -3,11 +3,11 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import * as Atom from 'effect/unstable/reactivity/Atom';
-import * as Registry from 'effect/unstable/reactivity/AtomRegistry';
+import * as Atom from 'effect/reactivity/Atom';
+import * as Registry from 'effect/reactivity/AtomRegistry';
 import React, { useMemo } from 'react';
 
-import { ProcessManagerPlugin } from '@dxos/app-framework';
+import * as ProcessManagerPlugin from '@dxos/app-framework/ProcessManagerPlugin';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import * as Script from '@dxos/compute/Script';
 import { ClientPlugin } from '@dxos/plugin-client/testing';
@@ -16,7 +16,7 @@ import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { type ScriptToolbarState, type ScriptToolbarStateStore } from '#hooks';
 import { translations } from '#translations';
 
-import { ScriptToolbar } from './ScriptToolbar';
+import { ScriptToolbar } from './ScriptToolbar.tsx';
 
 // Create a mock store for stories.
 const createMockStore = (initialState: ScriptToolbarState = {}): ScriptToolbarStateStore => {
@@ -54,7 +54,7 @@ const meta = {
     withTheme(),
     withLayout({ classNames: 'w-document-max-width' }),
     withPluginManager({
-      plugins: [ProcessManagerPlugin(), ClientPlugin.make({})],
+      plugins: [ProcessManagerPlugin.make(), ClientPlugin.make({})],
     }),
   ],
   parameters: {

package/src/components/ScriptToolbar/ScriptToolbar.tsx

@@ -2,14 +2,19 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Atom from 'effect/unstable/reactivity/Atom';
+import * as Atom from 'effect/reactivity/Atom';
 import React, { useMemo } from 'react';
 
-import { AppSurface } from '@dxos/app-toolkit/ui';
 import type * as Script from '@dxos/compute/Script';
-import { ElevationProvider, useTranslation } from '@dxos/react-ui';
-import { composable, composableProps } from '@dxos/react-ui';
-import { type ActionGraphProps, Menu, MenuRootProps, createGapSeparator, useMenuActions } from '@dxos/react-ui-menu';
+import {
+  type ActionGraphProps,
+  ActionToolbar,
+  type ActionToolbarProps,
+  createGapSeparator,
+  useMenuActions,
+} from '@dxos/react-ui-menu';
+import * as Hooks from '@dxos/react-ui/Hooks';
+import * as Util from '@dxos/react-ui/Util';
 
 import {
   type CreateDeployOptions,
@@ -21,14 +26,14 @@ import {
 } from '#hooks';
 import { meta } from '#meta';
 
-export type ScriptToolbarProps = Pick<MenuRootProps, 'attendableId'> & {
+export type ScriptToolbarProps = Pick<ActionToolbarProps, 'attendableId'> & {
   script: Script.Script;
   state: ScriptToolbarStateStore;
 };
 
-export const ScriptToolbar = composable<HTMLDivElement, ScriptToolbarProps>(
+export const ScriptToolbar = Util.composable<HTMLDivElement, ScriptToolbarProps>(
   ({ script, attendableId, role, state, ...props }, forwardedRef) => {
-    const { t } = useTranslation(meta.profile.key);
+    const { t } = Hooks.useTranslation(meta.profile.key);
     const options = useDeployDeps({ script });
     const menuCreator = useMemo(
       () => createToolbarActions({ state, script, t, ...options }),
@@ -37,13 +42,7 @@ export const ScriptToolbar = composable<HTMLDivElement, ScriptToolbarProps>(
     const menuActions = useMenuActions(menuCreator);
 
     return (
-      <ElevationProvider elevation={role === AppSurface.Section.role ? 'positioned' : 'base'}>
-        <Menu.Root {...menuActions} attendableId={attendableId}>
-          <Menu.Toolbar {...composableProps(props)} ref={forwardedRef}>
-            <Menu.Items />
-          </Menu.Toolbar>
-        </Menu.Root>
-      </ElevationProvider>
+      <ActionToolbar {...menuActions} attendableId={attendableId} {...Util.composableProps(props)} ref={forwardedRef} />
     );
   },
 );

package/src/components/ScriptToolbar/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './ScriptToolbar';
+export * from './ScriptToolbar.tsx';