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

package/src/components/{FrameContainer/FrameContainer.tsx → FramePanel/FramePanel.tsx}

@@ -11,9 +11,9 @@ import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
 import { createProtoRpcPeer } from '@dxos/rpc';
 import { createIFramePort } from '@dxos/rpc-tunnel';
-import { baseSurface, mx } from '@dxos/ui-theme';
+import { mx } from '@dxos/ui-theme';
 
-export type FrameContainerProps = {
+export type FramePanelProps = {
   containerUrl: string;
   result: BundleResult;
   debug?: boolean;
@@ -22,7 +22,7 @@ export type FrameContainerProps = {
 /**
  * IFrame container for the compiled script.
  */
-export const FrameContainer = ({ containerUrl, result, debug = true }: FrameContainerProps) => {
+export const FramePanel = ({ containerUrl, result, debug = true }: FramePanelProps) => {
   const client = useClient();
   const iframeRef = useRef<HTMLIFrameElement>(null);
   useEffect(() => {
@@ -61,8 +61,7 @@ export const FrameContainer = ({ containerUrl, result, debug = true }: FrameCont
         <div className='relative'>
           <div
             className={mx(
-              baseSurface,
-              'flex absolute right-2 bottom-2 is-[30rem] bs-[200px] ring rounded',
+              'flex absolute right-2 bottom-2 w-[30rem] h-[200px] bg-base-surface ring rounded-sm',
               'z-20 overflow-x-hidden overflow-y-auto',
             )}
           >

package/src/components/{FrameContainer → FramePanel}/index.ts

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

package/src/components/NotebookStack/NotebookCell.tsx

@@ -4,7 +4,7 @@
 
 import React, { useCallback, useMemo } from 'react';
 
-import { Surface } from '@dxos/app-framework/react';
+import { Surface } from '@dxos/app-framework/ui';
 import { type Database, Obj } from '@dxos/echo';
 import { createDocAccessor } from '@dxos/echo-db';
 import { invariant } from '@dxos/invariant';
@@ -30,8 +30,8 @@ import { TypescriptEditor, type TypescriptEditorProps } from '../TypescriptEdito
 
 import { type NotebookMenuProps } from './NotebookMenu';
 
-const editorStyles = 'p-2 pis-3';
-const valueStyles = 'p-1 pis-3';
+const editorStyles = 'p-2 ps-3';
+const valueStyles = 'p-1 ps-3';
 
 export type NotebookCellProps = {
   db?: Database.Database;
@@ -114,17 +114,15 @@ export const NotebookCell = ({ db, graph, dragging, cell, promptResults, env }:
 
       // TODO(burdon): Remove app-framework deps (via render prop).
       return (
-        <div
-          className={mx('bs-full overflow-hidden grid', explorerGraph && !dragging && 'grid-rows-[min-content_1fr]')}
-        >
+        <div className={mx('h-full overflow-hidden grid', explorerGraph && !dragging && 'grid-rows-[min-content_1fr]')}>
           <QueryEditor
             id={cell.id}
-            classNames={[editorStyles, 'border-be border-subduedSeparator']}
+            classNames={[editorStyles, 'border-b border-subdued-separator']}
             db={db}
             value={cell.source.target.content}
             onChange={handleQueryChange}
           />
-          {explorerGraph && !dragging && <Surface role='section' limit={1} data={{ subject: explorerGraph }} />}
+          {explorerGraph && !dragging && <Surface.Surface role='section' limit={1} data={{ subject: explorerGraph }} />}
         </div>
       );
 
@@ -161,13 +159,13 @@ const NotebookCellValue = ({ cell, graph }: NotebookCellProps) => {
   return (
     <div
       className={mx(
-        'flex is-full bg-groupSurface border-bs border-subduedSeparator text-description font-mono',
+        'flex w-full bg-group-surface border-y border-subdued-separator text-description font-mono',
         valueStyles,
       )}
     >
       {name && (
         <>
-          <span className='text-successText'>{name}</span>
+          <span className='text-success-text'>{name}</span>
           <span className='text-description'>&nbsp;=&nbsp;</span>
         </>
       )}
@@ -187,7 +185,7 @@ const NotebookPromptResult = ({ cell, promptResults }: NotebookCellProps) => {
   }
 
   return (
-    <div className={mx('flex is-full bg-groupSurface text-description border-bs border-subduedSeparator', valueStyles)}>
+    <div className={mx('flex w-full bg-group-surface text-description border-y border-subdued-separator', valueStyles)}>
       <NotebookTextEditor readOnly value={value} />
     </div>
   );

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

@@ -17,18 +17,17 @@ import { translations } from '../../translations';
 
 import { NotebookStack } from './NotebookStack';
 
-// TODO(wittjosiah): ECHO objects don't work when passed via Storybook args.
 const NotebookStackStory = () => {
   const notebook = useMemo(() => createNotebook(), []);
   return <NotebookStack notebook={notebook} />;
 };
 
 const meta = {
-  title: 'plugins/plugin-script/NotebookStack',
+  title: 'plugins/plugin-script/components/NotebookStack',
   component: NotebookStackStory,
   decorators: [
-    withTheme,
-    withLayout({ layout: 'column', classNames: 'is-proseMaxWidth' }),
+    withTheme(),
+    withLayout({ layout: 'column', classNames: 'w-document-max-width' }),
     withPluginManager({
       plugins: [
         ...corePlugins(),

package/src/components/NotebookStack/NotebookStack.tsx

@@ -14,7 +14,7 @@ import { type TypescriptEditorProps } from '../TypescriptEditor';
 import { NotebookCell, type NotebookCellProps } from './NotebookCell';
 import { NotebookMenu } from './NotebookMenu';
 
-const minSectionHeight = 'min-bs-[16rem]';
+const minSectionHeight = 'min-h-[16rem]';
 
 export type NotebookStackProps = ThemedClassName<
   {
@@ -51,7 +51,7 @@ const NotebookSection = ({
 
   return (
     <StackItem.Root role='section' item={cell} draggable classNames={resizable && minSectionHeight}>
-      <StackItem.Heading classNames='bs-full p-1 justify-between attention-surface'>
+      <StackItem.Heading classNames='h-full p-1 justify-between dx-attention-surface'>
         <StackItem.DragHandle asChild>
           <IconButton variant='ghost' icon='ph--dots-six-vertical--regular' iconOnly label='Drag handle' />
         </StackItem.DragHandle>
@@ -72,7 +72,7 @@ const NotebookSection = ({
       {/* TODO(burdon): Move drag preview to outer stack (uniformly). */}
       <StackItem.DragPreview>
         {({ item: cell }) => (
-          <StackItem.Content classNames='overflow-visible bg-groupSurface border border-subduedSeparator'>
+          <StackItem.Content classNames='overflow-visible bg-group-surface border border-subdued-separator'>
             <NotebookCell db={db} cell={cell} env={env} dragging />
           </StackItem.Content>
         )}

package/src/components/QueryEditor/QueryEditor.stories.tsx

@@ -8,9 +8,8 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { createDocAccessor } from '@dxos/echo-db';
 import { QuerySandbox } from '@dxos/echo-query';
 import { createObject } from '@dxos/react-client/echo';
-import { Toolbar, useAsyncEffect } from '@dxos/react-ui';
+import { Panel, Toolbar, useAsyncEffect } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { Layout } from '@dxos/react-ui-mosaic';
 import { Json } from '@dxos/react-ui-syntax-highlighter';
 import { createDataExtensions } from '@dxos/ui-editor';
 import { trim } from '@dxos/util';
@@ -18,7 +17,7 @@ import { trim } from '@dxos/util';
 import { QueryEditor, type QueryEditorProps } from './QueryEditor';
 
 const SCRIPT = trim`
-  Query.select(Filter.type('dxos.org/type/Person'))
+  Query.select(Filter.type('org.dxos.type.person'))
 `;
 
 const DefaultStory = (props: QueryEditorProps) => {
@@ -63,30 +62,27 @@ const DefaultStory = (props: QueryEditorProps) => {
   }, [object, sandbox]);
 
   return (
-    <Layout.Main toolbar>
-      {/* <ScriptToolbar script={script} state={{}} /> */}
-      <Toolbar.Root>
-        <Toolbar.Button onClick={handleRun}>Run</Toolbar.Button>
-      </Toolbar.Root>
-      <div role='none' className='grid grid-rows-[1fr_min-content] bs-full overflow-hidden text-sm'>
-        <QueryEditor {...props} initialValue={object.content} extensions={extensions} />
-        <Json data={result} classNames='shrink-0 p-2 border-bs border-subduedSeparator' />
-      </div>
-    </Layout.Main>
+    <Panel.Root>
+      <Panel.Toolbar asChild>
+        <Toolbar.Root>
+          <Toolbar.Button onClick={handleRun}>Run</Toolbar.Button>
+        </Toolbar.Root>
+      </Panel.Toolbar>
+      <Panel.Content>
+        <div role='none' className='grid grid-rows-[1fr_min-content] h-full overflow-hidden text-sm'>
+          <QueryEditor {...props} initialValue={object.content} extensions={extensions} />
+          <Json data={result} classNames='shrink-0 p-2 border-y border-subdued-separator' />
+        </div>
+      </Panel.Content>
+    </Panel.Root>
   );
 };
 
 const meta = {
-  title: 'plugins/plugin-script/QueryEditor',
+  title: 'plugins/plugin-script/components/QueryEditor',
   component: QueryEditor,
   render: DefaultStory,
-  decorators: [
-    withTheme,
-    withLayout({
-      layout: 'column',
-      classNames: 'is-proseMaxWidth',
-    }),
-  ],
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'w-document-max-width' })],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

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

@@ -6,7 +6,7 @@ import { Atom, Registry } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo } from 'react';
 
-import { OperationPlugin } from '@dxos/app-framework';
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Script } from '@dxos/functions';
 import { ClientPlugin } from '@dxos/plugin-client';
@@ -31,7 +31,6 @@ const createMockStore = (initialState: ScriptToolbarState = {}): ScriptToolbarSt
   };
 };
 
-// TODO(wittjosiah): ECHO objects don't work when passed via Storybook args.
 const ScriptToolbarStory = () => {
   const state = useMemo(() => createMockStore(), []);
   const script = useMemo(
@@ -47,14 +46,14 @@ const ScriptToolbarStory = () => {
 };
 
 const meta = {
-  title: 'plugins/plugin-script/Toolbar',
+  title: 'plugins/plugin-script/components/Toolbar',
   component: ScriptToolbarStory,
   // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
   decorators: [
-    withTheme,
-    withLayout({ classNames: 'is-proseMaxWidth' }),
+    withTheme(),
+    withLayout({ classNames: 'w-document-max-width' }),
     withPluginManager({
-      plugins: [OperationPlugin(), ClientPlugin({})],
+      plugins: [OperationPlugin(), RuntimePlugin(), ClientPlugin({})],
     }),
   ],
   parameters: {

package/src/components/ScriptToolbar/ScriptToolbar.tsx

@@ -10,8 +10,8 @@ import { type Script } from '@dxos/functions';
 import { ElevationProvider, useTranslation } from '@dxos/react-ui';
 import {
   type ActionGraphProps,
-  MenuProvider,
-  ToolbarMenu,
+  Menu,
+  type MenuRootProps,
   createGapSeparator,
   useMenuActions,
 } from '@dxos/react-ui-menu';
@@ -26,13 +26,13 @@ import {
 } from '../../hooks';
 import { meta } from '../../meta';
 
-export type ScriptToolbarProps = {
+export type ScriptToolbarProps = Partial<MenuRootProps> & {
   role?: string;
   script: Script.Script;
   state: ScriptToolbarStateStore;
 };
 
-export const ScriptToolbar = ({ script, role, state }: ScriptToolbarProps) => {
+export const ScriptToolbar = ({ script, role, state, ...props }: ScriptToolbarProps) => {
   const { t } = useTranslation(meta.id);
   const options = useDeployDeps({ script });
   const menu = useMemo(() => createToolbarActions({ state, script, t, ...options }), [state, script, options, t]);
@@ -40,9 +40,9 @@ export const ScriptToolbar = ({ script, role, state }: ScriptToolbarProps) => {
 
   return (
     <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
-      <MenuProvider {...actions} attendableId={Obj.getDXN(script).toString()}>
-        <ToolbarMenu />
-      </MenuProvider>
+      <Menu.Root {...props} {...actions} attendableId={Obj.getDXN(script).toString()}>
+        <Menu.Toolbar />
+      </Menu.Root>
     </ElevationProvider>
   );
 };

package/src/components/TestPanel/TestPanel.tsx

@@ -5,9 +5,9 @@
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 
 import { log } from '@dxos/log';
-import { Avatar, Icon, Input, type ThemedClassName, Toolbar, useTranslation } from '@dxos/react-ui';
+import { Avatar, Icon, Input, ScrollArea, type ThemedClassName, Toolbar, useTranslation } from '@dxos/react-ui';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { errorText, mx } from '@dxos/ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { meta } from '../../meta';
 
@@ -174,7 +174,7 @@ export const TestPanel = ({ classNames, functionUrl }: TestPanelProps) => {
   };
 
   return (
-    <div className={mx('flex flex-col bs-full overflow-hidden', classNames)}>
+    <div className={mx('flex flex-col h-full overflow-hidden', classNames)}>
       {/* TODO(burdon): Replace with Thread. */}
       <MessageThread ref={scrollerRef} state={state} result={result} history={history} />
       {/* TODO(burdon): Replace with Form based on the function's input schema. */}
@@ -219,42 +219,44 @@ type MessageThreadProps = {
 const MessageThread = forwardRef<HTMLDivElement, MessageThreadProps>(
   ({ state, history, result }: MessageThreadProps, forwardedRef) => {
     return (
-      <div ref={forwardedRef} className='flex flex-col gap-6 bs-full p-2 overflow-x-hidden overflow-y-auto'>
-        {history.map((message, i) => (
-          <div key={i} className='grid grid-cols-[2rem_1fr_2rem]'>
-            <div className='p-1'>{message.type === 'response' && <RobotAvatar />}</div>
-            <div className='overflow-auto'>
-              <MessageItem message={message} />
+      <ScrollArea.Root orientation='vertical' classNames='h-full' ref={forwardedRef}>
+        <ScrollArea.Viewport classNames='gap-6 p-2'>
+          {history.map((message, i) => (
+            <div key={i} className='grid grid-cols-[2rem_1fr_2rem]'>
+              <div className='p-1'>{message.type === 'response' && <RobotAvatar />}</div>
+              <div className='overflow-auto'>
+                <MessageItem message={message} />
+              </div>
             </div>
-          </div>
-        ))}
-
-        {result?.length > 0 && (
-          <div className='grid grid-cols-[2rem_1fr_2rem]'>
-            <div className='p-1'>
-              {(state === 'pending' && <Icon icon='ph--spinner--regular' size={6} classNames='animate-spin' />) || (
-                <Icon icon='ph--robot--regular' size={6} classNames='animate-[pulse_1s_ease-in-out_infinite]' />
-              )}
+          ))}
+
+          {result?.length > 0 && (
+            <div className='grid grid-cols-[2rem_1fr_2rem]'>
+              <div className='p-1'>
+                {(state === 'pending' && <Icon icon='ph--spinner--regular' size={6} classNames='animate-spin' />) || (
+                  <Icon icon='ph--robot--regular' size={6} classNames='animate-[pulse_1s_ease-in-out_infinite]' />
+                )}
+              </div>
+              <div className='overflow-auto'>
+                <MessageItem message={{ type: 'response', text: result }} />
+              </div>
             </div>
-            <div className='overflow-auto'>
-              <MessageItem message={{ type: 'response', text: result }} />
-            </div>
-          </div>
-        )}
-      </div>
+          )}
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
     );
   },
 );
 
 const MessageItem = ({ classNames, message }: ThemedClassName<{ message: Message }>) => {
   const { type, text, data, error } = message;
-  const wrapper = 'p-1 pli-2 rounded-md bg-hoverSurface overflow-auto';
+  const wrapper = 'p-1 px-2 rounded-md bg-hover-surface overflow-auto';
   return (
     <div className={mx('flex', type === 'request' ? 'ml-[1rem] justify-end' : 'mr-[1rem]', classNames)}>
-      {error && <div className={mx(wrapper, 'whitespace-pre', errorText)}>{String(error)}</div>}
+      {error && <div className={mx(wrapper, 'whitespace-pre text-error-text')}>{String(error)}</div>}
 
       {text !== undefined && (
-        <div className={mx(wrapper, type === 'request' && 'bg-primary-400 dark:bg-primary-600')}>
+        <div className={mx(wrapper, type === 'request' && 'bg-primary-500 dark:bg-primary-600')}>
           {text || '\u00D8'}
         </div>
       )}

package/src/components/TestPanel/index.ts

@@ -2,5 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './TestContainer';
 export * from './TestPanel';

package/src/components/TypescriptEditor/TypescriptEditor.stories.tsx

@@ -7,9 +7,8 @@ import React, { useCallback, useMemo, useState } from 'react';
 
 import { createDocAccessor } from '@dxos/echo-db';
 import { createObject } from '@dxos/react-client/echo';
-import { Toolbar } from '@dxos/react-ui';
+import { Panel, Toolbar } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { Layout } from '@dxos/react-ui-mosaic';
 import { Json } from '@dxos/react-ui-syntax-highlighter';
 import { createDataExtensions } from '@dxos/ui-editor';
 import { trim } from '@dxos/util';
@@ -66,24 +65,27 @@ const DefaultStory = (props: TypescriptEditorProps) => {
   }, [object]);
 
   return (
-    <Layout.Main toolbar>
-      {/* <ScriptToolbar script={script} state={{}} /> */}
-      <Toolbar.Root>
-        <Toolbar.Button onClick={handleRun}>Run</Toolbar.Button>
-      </Toolbar.Root>
-      <div role='none' className='grid grid-rows-[1fr_min-content] bs-full overflow-hidden text-sm'>
-        <TypescriptEditor {...props} initialValue={object.content} extensions={extensions} />
-        <Json data={result} classNames='shrink-0 p-2 border-bs border-subduedSeparator' />
-      </div>
-    </Layout.Main>
+    <Panel.Root>
+      <Panel.Toolbar asChild>
+        <Toolbar.Root>
+          <Toolbar.Button onClick={handleRun}>Run</Toolbar.Button>
+        </Toolbar.Root>
+      </Panel.Toolbar>
+      <Panel.Content>
+        <div role='none' className='grid grid-rows-[1fr_min-content] h-full overflow-hidden text-sm'>
+          <TypescriptEditor {...props} initialValue={object.content} extensions={extensions} />
+          <Json data={result} classNames='shrink-0 p-2 border-y border-subdued-separator' />
+        </div>
+      </Panel.Content>
+    </Panel.Root>
   );
 };
 
 const meta = {
-  title: 'plugins/plugin-script/TypescriptEditor',
+  title: 'plugins/plugin-script/components/TypescriptEditor',
   component: TypescriptEditor,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ layout: 'column', classNames: 'is-proseMaxWidth' })],
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'w-document-max-width' })],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/components/TypescriptEditor/TypescriptEditor.tsx

@@ -129,7 +129,7 @@ const createTooltipRenderer = (themeMode: ThemeMode) => {
       ) ?? [];
     return {
       dom: Domino.of('div')
-        .classNames('xs:max-is-80 max-is-lg p-1 bg-baseSurface rounded border border-separator')
+        .classNames('xs:max-w-80 max-w-lg p-1 bg-base-surface rounded-sm border border-separator')
         .children(...children).root,
     };
   };

package/src/components/index.ts

@@ -2,14 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-import { lazy } from 'react';
-
+export * from './FramePanel';
 export * from './NotebookStack';
-export * from './Settings';
+export * from './QueryEditor';
+export * from './ScriptToolbar';
 export * from './TestPanel';
-
-export { DEPLOYMENT_DIALOG } from './DeploymentDialog';
-
-export const ScriptContainer = lazy(() => import('./ScriptContainer'));
-export const DeploymentDialog = lazy(() => import('./DeploymentDialog'));
-export const NotebookContainer = lazy(() => import('./NotebookContainer'));
+export * from './TypescriptEditor';

package/src/constants.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { meta } from './meta';
+
+export const DEPLOYMENT_DIALOG = `${meta.id}.deployment.dialog`;

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

@@ -5,7 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo } from 'react';
 
-import { OperationPlugin } from '@dxos/app-framework';
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Obj } from '@dxos/echo';
 import { ClientPlugin } from '@dxos/plugin-client';
@@ -17,7 +17,6 @@ import { translations } from '../../translations';
 
 import { DeploymentDialog } from './DeploymentDialog';
 
-// TODO(wittjosiah): ECHO objects don't work when passed via Storybook args.
 const DeploymentDialogStory = () => {
   const accessToken = useMemo(
     () =>
@@ -43,14 +42,14 @@ const DeploymentDialogStory = () => {
 };
 
 const meta = {
-  title: 'plugins/plugin-script/DeploymentDialog',
+  title: 'plugins/plugin-script/containers/DeploymentDialog',
   component: DeploymentDialogStory,
   parameters: { translations },
   // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
   decorators: [
-    withTheme,
+    withTheme(),
     withPluginManager({
-      plugins: [OperationPlugin(), ClientPlugin({})],
+      plugins: [OperationPlugin(), RuntimePlugin(), ClientPlugin({})],
     }),
   ],
 } satisfies Meta<typeof DeploymentDialogStory>;

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

@@ -4,8 +4,8 @@
 
 import React, { useEffect, useMemo } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useOperationInvoker } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import { getSpace } from '@dxos/react-client/echo';
 import { Button, Dialog, IconButton, useTranslation } from '@dxos/react-ui';
 import { type AccessToken } from '@dxos/types';
@@ -14,8 +14,6 @@ import { useCreateAndDeployScriptTemplates } from '../../hooks';
 import { meta } from '../../meta';
 import { type Template } from '../../templates';
 
-export const DEPLOYMENT_DIALOG = `${meta.id}/deployment/dialog`;
-
 // TODO(ZaymonFC):
 //  - Show activity and feedback to the user.
 //  - Only take an array of templateIds and get the name from the data.
@@ -38,20 +36,20 @@ export const DeploymentDialog = ({ accessToken, scriptTemplates }: DeploymentDia
   useEffect(() => {
     if (status === 'success') {
       // TODO(ZaymonFC): We can probably re-use this toast for normal script deployment.
-      void invokePromise(Common.LayoutOperation.AddToast, {
-        id: `${meta.id}/deployment-success`,
+      void invokePromise(LayoutOperation.AddToast, {
+        id: `${meta.id}.deployment-success`,
         icon: 'ph--check--regular',
         duration: Infinity,
         title: ['script deployment toast label', { ns: meta.id, count: scriptTemplates.length }],
         description: ['script deployment toast description', { ns: meta.id, count: scriptTemplates.length }],
         closeLabel: ['script deployment toast close label', { ns: meta.id, count: scriptTemplates.length }],
       });
-      void invokePromise(Common.LayoutOperation.UpdateDialog, { state: false });
+      void invokePromise(LayoutOperation.UpdateDialog, { state: false });
     }
     if (status === 'error') {
-      void invokePromise(Common.LayoutOperation.UpdateDialog, { state: false });
-      void invokePromise(Common.LayoutOperation.AddToast, {
-        id: `${meta.id}/deployment-error`,
+      void invokePromise(LayoutOperation.UpdateDialog, { state: false });
+      void invokePromise(LayoutOperation.AddToast, {
+        id: `${meta.id}.deployment-error`,
         icon: 'ph--warning--regular',
         duration: Infinity,
         title: ['script deployment error toast label', { ns: meta.id, count: scriptTemplates.length }],
@@ -69,14 +67,14 @@ export const DeploymentDialog = ({ accessToken, scriptTemplates }: DeploymentDia
           <IconButton icon='ph--x--regular' size={4} label='Close' iconOnly density='fine' variant='ghost' />
         </Dialog.Close>
       </div>
-      <div role='none' className='plb-4'>
+      <div role='none' className='py-4'>
         {/* TODO: Implement deployment logic and UI. */}
         <p>
           {t('deployment dialog scripts found message', {
             count: scriptTemplates.length,
           })}
         </p>
-        <ul className='pbs-2'>
+        <ul className='pt-2'>
           {scriptTemplates.map((template) => {
             return <li key={template.id}>{template.name}</li>;
           })}
@@ -99,5 +97,3 @@ export const DeploymentDialog = ({ accessToken, scriptTemplates }: DeploymentDia
     </Dialog.Content>
   );
 };
-
-export default DeploymentDialog;

package/src/containers/DeploymentDialog/index.ts

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