@dxos/plugin-script 0.9.1-main.c7dcc2e112 → 0.10.0

package/src/components/NotebookStack/NotebookStack.tsx

@@ -2,11 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
-import React from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
-import { DropdownMenu, IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { Obj } from '@dxos/echo';
+import { DropdownMenu, IconButton, ScrollArea, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { composable, composableProps } from '@dxos/react-ui';
-import { Stack, StackItem, type StackProps } from '@dxos/react-ui-stack';
+import { Mosaic, type MosaicEventHandler, type MosaicTileProps } from '@dxos/react-ui-mosaic';
+import { mx } from '@dxos/ui-theme';
+import { arrayMove } from '@dxos/util';
 
 import { meta } from '#meta';
 import { type Notebook } from '#types';
@@ -17,55 +20,122 @@ import { NotebookMenu } from './NotebookMenu';
 
 const minSectionHeight = 'min-h-[16rem]';
 
+const getCellId = (cell: Notebook.Cell) => cell.id;
+
 export type NotebookStackProps = ThemedClassName<
   {
     notebook?: Notebook.Notebook;
-    onRearrange?: StackProps['onRearrange'];
   } & (Pick<NotebookSectionProps, 'db' | 'graph' | 'promptResults' | 'onCellInsert' | 'onCellDelete'> &
     Pick<TypescriptEditorProps, 'env'>)
 >;
 
-// TODO(burdon): Option for narrow rail (with compact buttons that align with first button in toolbar).
 export const NotebookStack = composable<HTMLDivElement, NotebookStackProps>(
-  ({ notebook, onRearrange, db, graph, promptResults, onCellInsert, onCellDelete, env, ...props }, forwardedRef) => {
-    const sectionProps = { db, graph, promptResults, onCellInsert, onCellDelete, env };
+  ({ notebook, db, graph, promptResults, onCellInsert, onCellDelete, env, ...props }, forwardedRef) => {
+    const [viewport, setViewport] = useState<HTMLElement | null>(null);
+
+    // Stable Tile identity: an inline component is a new type each render, so Mosaic would unmount and
+    // remount every cell (losing editor state) whenever this component re-renders.
+    const Tile = useCallback(
+      (tileProps: MosaicTileProps<Notebook.Cell>) => (
+        <NotebookSection
+          {...tileProps}
+          db={db}
+          graph={graph}
+          promptResults={promptResults}
+          onCellInsert={onCellInsert}
+          onCellDelete={onCellDelete}
+          env={env}
+        />
+      ),
+      [db, graph, promptResults, onCellInsert, onCellDelete, env],
+    );
+
+    // Reorder cells in place; placeholder/tile locations are 1-based with half-step placeholders between
+    // tiles, so the floor of the drop location is the destination array index (see Mosaic.Stack).
+    const eventHandler = useMemo<MosaicEventHandler<Notebook.Cell>>(
+      () => ({
+        id: notebook?.id ?? 'notebook',
+        // Only the notebook's own cells are droppable; onDrop only reorders within this notebook.
+        canDrop: ({ source }) => !!notebook && notebook.cells.some((cell) => cell.id === source.id),
+        onDrop: ({ source, target }) => {
+          if (!notebook || !target) {
+            return;
+          }
+
+          const to =
+            target.type === 'tile' || target.type === 'placeholder'
+              ? target.location
+              : target.type === 'container'
+                ? notebook.cells.length
+                : -1;
+          const insertIndex = typeof to === 'number' && to >= 0 ? Math.floor(to) : -1;
+          if (insertIndex < 0) {
+            return;
+          }
+
+          Obj.update(notebook, (notebook) => {
+            const from = notebook.cells.findIndex((cell) => cell.id === source.id);
+            if (from !== -1) {
+              arrayMove(notebook.cells, from, insertIndex);
+            }
+          });
+        },
+      }),
+      [notebook],
+    );
+
     return (
-      <Stack
-        {...composableProps(props)}
-        orientation='vertical'
-        size='contain'
-        rail
-        onRearrange={onRearrange}
-        ref={forwardedRef}
-      >
-        {notebook?.cells.map((cell, i) => (
-          <NotebookSection key={i} cell={cell} {...sectionProps} />
-        ))}
-      </Stack>
+      <Mosaic.Root ref={forwardedRef}>
+        <Mosaic.Container asChild orientation='vertical' autoScroll={viewport} eventHandler={eventHandler}>
+          <ScrollArea.Root orientation='vertical' padding {...composableProps(props)}>
+            <ScrollArea.Viewport ref={setViewport}>
+              <Mosaic.Stack orientation='vertical' items={notebook?.cells ?? []} getId={getCellId} Tile={Tile} />
+            </ScrollArea.Viewport>
+          </ScrollArea.Root>
+        </Mosaic.Container>
+      </Mosaic.Root>
     );
   },
 );
 
-type NotebookSectionProps = NotebookCellProps;
+type NotebookSectionProps = MosaicTileProps<Notebook.Cell> &
+  Pick<NotebookCellProps, 'db' | 'graph' | 'promptResults' | 'onCellInsert' | 'onCellDelete' | 'env'>;
 
+// TODO(burdon): Option for narrow rail (with compact buttons that align with first button in toolbar).
+// TODO(burdon): Reinstate a Mosaic-native resize affordance for query cells (currently a fixed min-height).
 const NotebookSection = ({
-  cell,
+  data: cell,
   db,
   env,
+  graph,
   promptResults,
   onCellInsert,
   onCellDelete,
-  ...props
+  ...tileProps
 }: NotebookSectionProps) => {
   const { t } = useTranslation(meta.profile.key);
   const resizable = cell.type === 'query';
+  const [dragHandle, setDragHandle] = useState<HTMLButtonElement | null>(null);
 
   return (
-    <StackItem.Root role='section' item={cell} draggable classNames={resizable && minSectionHeight}>
-      <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>
+    <Mosaic.Tile
+      {...tileProps}
+      data={cell}
+      dragHandle={dragHandle}
+      classNames={mx(
+        'grid grid-cols-[min-content_1fr] overflow-visible border border-subdued-separator',
+        resizable && minSectionHeight,
+      )}
+    >
+      {/* Side rail */}
+      <div className='flex flex-col p-1 border-e border-subdued-separator dx-attention-surface'>
+        <IconButton
+          ref={setDragHandle}
+          variant='ghost'
+          icon='ph--dots-six-vertical--regular'
+          iconOnly
+          label='Drag handle'
+        />
         <DropdownMenu.Root>
           <DropdownMenu.Trigger asChild>
             <IconButton
@@ -77,21 +147,9 @@ const NotebookSection = ({
           </DropdownMenu.Trigger>
           <NotebookMenu cell={cell} onCellInsert={onCellInsert} onCellDelete={onCellDelete} />
         </DropdownMenu.Root>
-        {resizable && <StackItem.ResizeHandle />}
-      </StackItem.Heading>
-
-      {/* TODO(burdon): Move drag preview to outer stack (uniformly). */}
-      <StackItem.DragPreview>
-        {({ item: cell }) => (
-          <StackItem.Content classNames='overflow-visible bg-group-surface border border-subdued-separator'>
-            <NotebookCell db={db} cell={cell} env={env} dragging />
-          </StackItem.Content>
-        )}
-      </StackItem.DragPreview>
-
-      <StackItem.Content classNames='overflow-visible'>
-        <NotebookCell db={db} cell={cell} env={env} promptResults={promptResults} {...props} />
-      </StackItem.Content>
-    </StackItem.Root>
+      </div>
+
+      <NotebookCell db={db} cell={cell} env={env} graph={graph} promptResults={promptResults} />
+    </Mosaic.Tile>
   );
 };

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

@@ -5,7 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { createDocAccessor } from '@dxos/echo-client';
+import { Doc } from '@dxos/echo-doc';
 import { QuerySandbox } from '@dxos/echo-query';
 import { createObject } from '@dxos/react-client/echo';
 import { Panel, Toolbar, useAsyncEffect } from '@dxos/react-ui';
@@ -36,12 +36,7 @@ const DefaultStory = (props: QueryEditorProps) => {
   }, []);
 
   const extensions = useMemo(
-    () => [
-      createDataExtensions({
-        id: object.id,
-        text: createDocAccessor(object, ['content']),
-      }),
-    ],
+    () => [createDataExtensions({ id: object.id, text: Doc.createAccessor(object, ['content']) })],
     [],
   );
 

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

@@ -5,7 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { createDocAccessor } from '@dxos/echo-client';
+import { Doc } from '@dxos/echo-doc';
 import { createObject } from '@dxos/react-client/echo';
 import { Panel, Toolbar } from '@dxos/react-ui';
 import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
@@ -37,7 +37,7 @@ const DefaultStory = (props: TypescriptEditorProps) => {
     () => [
       createDataExtensions({
         id: object.id,
-        text: createDocAccessor(object, ['content']),
+        text: Doc.createAccessor(object, ['content']),
       }),
     ],
     [],

package/src/components/TypescriptEditor/TypescriptEditor.tsx

@@ -15,8 +15,7 @@ import { continueKeymap } from '@valtown/codemirror-continue';
 import { type HoverInfo, tsAutocomplete, tsFacet, tsHover, tsLinter, tsSync } from '@valtown/codemirror-ts';
 import React from 'react';
 
-import { AppSurface } from '@dxos/app-toolkit/ui';
-import { type ThemeMode, type ThemedClassName, useThemeContext } from '@dxos/react-ui';
+import { type ThemedClassName, type ThemeMode, useThemeContext } from '@dxos/react-ui';
 import { composable, composableProps } from '@dxos/react-ui';
 import { type UseTextEditorProps, useTextEditor } from '@dxos/react-ui-editor';
 import { Domino } from '@dxos/ui';
@@ -67,20 +66,20 @@ export const TypescriptEditor = composable<HTMLDivElement, TypescriptEditorProps
         scrollTo,
         extensions: [
           extensions,
+          createThemeExtensions({
+            monospace: true,
+            themeMode,
+            syntaxHighlighting: true,
+          }),
           createBasicExtensions({
             highlightActiveLine: true,
             indentWithTab: true,
             lineNumbers: true,
             lineWrapping: false,
-            scrollPastEnd: role !== AppSurface.Section.role,
+            scrollPastEnd: role === 'article',
             search: true,
             ...options,
           }),
-          createThemeExtensions({
-            monospace: true,
-            themeMode,
-            syntaxHighlighting: true,
-          }),
 
           InputModeExtensions[inputMode],
           javascript({ typescript: true }),

package/src/components/index.ts

@@ -2,12 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type ComponentType, lazy } from 'react';
-
 export * from './NotebookStack';
 export * from './QueryEditor';
 export * from './ScriptToolbar';
 export * from './TestPanel';
 export * from './TypescriptEditor';
-
-export const ScriptPluginSettings: ComponentType<any> = lazy(() => import('./ScriptPluginSettings'));

package/src/containers/NotebookArticle/NotebookArticle.stories.tsx

@@ -9,16 +9,16 @@ import React from 'react';
 import { SERVICES_CONFIG } from '@dxos/ai/testing';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { AppSurface } from '@dxos/app-toolkit/ui';
-import { AgentPrompt } from '@dxos/assistant-toolkit';
+import { RunInstructions } from '@dxos/assistant-toolkit';
 import { Operation } from '@dxos/compute';
 import { Filter } from '@dxos/echo';
 import { AssistantPlugin } from '@dxos/plugin-assistant/testing';
-import { AutomationPlugin } from '@dxos/plugin-automation/testing';
 import { ClientPlugin } from '@dxos/plugin-client/testing';
 import { initializeIdentity } from '@dxos/plugin-client/testing';
 import { ExplorerPlugin } from '@dxos/plugin-explorer/testing';
 import { Markdown } from '@dxos/plugin-markdown';
 import { MarkdownPlugin } from '@dxos/plugin-markdown/testing';
+import { RoutinePlugin } from '@dxos/plugin-routine/testing';
 import { corePlugins } from '@dxos/plugin-testing';
 import { Config, useClient } from '@dxos/react-client';
 import { useQuery } from '@dxos/react-client/echo';
@@ -59,11 +59,11 @@ const meta: Meta<typeof NotebookArticle> = {
 
               personalSpace.db.add(createNotebook());
               personalSpace.db.add(Markdown.make({ content: '# Hello World' }));
-              personalSpace.db.add(Operation.serialize(AgentPrompt));
+              personalSpace.db.add(Operation.serialize(RunInstructions));
             }),
         }),
         AssistantPlugin(),
-        AutomationPlugin(),
+        RoutinePlugin(),
         ExplorerPlugin(),
         MarkdownPlugin(),
       ],

package/src/containers/NotebookArticle/NotebookArticle.tsx

@@ -11,8 +11,8 @@ import React, { useCallback, useContext, useMemo, useState } from 'react';
 
 import { useSpaceCallback } from '@dxos/app-framework/ui';
 import { type AppSurface } from '@dxos/app-toolkit/ui';
-import { AgentPrompt } from '@dxos/assistant-toolkit';
-import { Blueprint, Routine } from '@dxos/compute';
+import { RunInstructions } from '@dxos/assistant-toolkit';
+import { Instructions, Skill } from '@dxos/compute';
 import { Operation } from '@dxos/compute';
 import { Filter, Obj, Query, Ref } from '@dxos/echo';
 import { QueryBuilder } from '@dxos/echo-query';
@@ -30,11 +30,7 @@ import { type Notebook } from '#types';
 
 import { ComputeGraph } from '../../notebook';
 
-const INCLUDE_BLUEPRINTS = [
-  'org.dxos.blueprint.assistant',
-  'org.dxos.blueprint.database',
-  'org.dxos.blueprint.markdown',
-];
+const INCLUDE_SKILLS = ['org.dxos.skill.assistant', 'org.dxos.skill.database', 'org.dxos.skill.markdown'];
 
 // TODO(burdon): Support calling named deployed functions (as with sheet).
 
@@ -43,7 +39,7 @@ export type NotebookArticleProps = AppSurface.ObjectArticleProps<Notebook.Notebo
 export const NotebookArticle = ({ role, subject: notebook, attendableId, env }: NotebookArticleProps) => {
   const { t } = useTranslation(meta.profile.key);
   const registry = useContext(RegistryContext);
-  const db = Obj.getDatabase(notebook);
+  const db = notebook ? Obj.getDatabase(notebook) : undefined;
   const { hasAttention } = useAttention(attendableId);
 
   // TODO(burdon): Consolidate execution and state (with graph).
@@ -99,20 +95,20 @@ export const NotebookArticle = ({ role, subject: notebook, attendableId, env }:
     Effect.fnUntraced(function* () {
       invariant(graph);
 
-      const prompts =
+      const allInstructions =
         notebook?.cells
           .filter((cell) => cell.type === 'prompt')
           .map((cell) => cell.prompt)
           .filter(isNonNullable) ?? [];
 
-      for (const prompt of prompts) {
+      for (const instructions of allInstructions) {
         yield* runPrompt({
-          prompt,
+          instructions,
           input: { ...queryValues, ...graph.getValuesByName() },
           onResult: (result) =>
             setPromptResults((prev) => ({
               ...prev,
-              [prompt.uri]: result,
+              [instructions.uri]: result,
             })),
         });
       }
@@ -128,23 +124,6 @@ export const NotebookArticle = ({ role, subject: notebook, attendableId, env }:
     await handleExecPrompts();
   }, [graph, handleExecQueries, handleExecPrompts]);
 
-  const handleRearrange = useCallback<NonNullable<NotebookStackProps['onRearrange']>>(
-    (source, target) => {
-      invariant(notebook);
-      const from = notebook.cells.findIndex((cell) => cell.id === source.id);
-      const to = notebook.cells.findIndex((cell) => cell.id === target.id);
-      if (from != null && to != null) {
-        Obj.update(notebook, (notebook) => {
-          const cell = notebook.cells.splice(from, 1)[0];
-          if (cell) {
-            notebook.cells.splice(to, 0, cell);
-          }
-        });
-      }
-    },
-    [notebook],
-  );
-
   const handleCellInsert = useCallback<NonNullable<NotebookStackProps['onCellInsert']>>(
     async (type, after) => {
       invariant(notebook);
@@ -159,14 +138,14 @@ export const NotebookArticle = ({ role, subject: notebook, attendableId, env }:
 
         case 'prompt': {
           if (db) {
-            const objects = await db.query(Query.select(Filter.type(Blueprint.Blueprint))).run();
-            const blueprints = objects
-              .filter((blueprint) => {
-                const key = Obj.getMeta(blueprint).key;
-                return key !== undefined && INCLUDE_BLUEPRINTS.includes(key);
+            const objects = await db.query(Query.select(Filter.type(Skill.Skill))).run();
+            const skills = objects
+              .filter((skill) => {
+                const key = Obj.getMeta(skill).key;
+                return key !== undefined && INCLUDE_SKILLS.includes(key);
               })
-              .map((blueprint) => Ref.make(blueprint));
-            cell.prompt = Ref.make(Routine.make({ instructions: '', blueprints }));
+              .map((skill) => Ref.make(skill));
+            cell.prompt = Ref.make(Instructions.make({ text: '', skills }));
           }
           break;
         }
@@ -212,14 +191,13 @@ export const NotebookArticle = ({ role, subject: notebook, attendableId, env }:
           />
         </Toolbar.Root>
       </Panel.Toolbar>
-      <Panel.Content asChild>
+      <Panel.Content>
         <NotebookStack
           db={db}
           notebook={notebook}
           graph={graph}
           env={env}
           promptResults={promptResults}
-          onRearrange={handleRearrange}
           onCellInsert={handleCellInsert}
           onCellDelete={handleCellDelete}
         />
@@ -230,17 +208,17 @@ export const NotebookArticle = ({ role, subject: notebook, attendableId, env }:
 
 // TODO(wittjosiah): Factor out. Copied from PromptArticle in plugin-assistant.
 const runPrompt = Effect.fn(function* ({
-  prompt,
+  instructions,
   input,
   onResult,
 }: {
-  prompt: Ref.Ref<Routine.Routine>;
+  instructions: Ref.Ref<Instructions.Instructions>;
   input: Record<string, any>;
   onResult: (result: string) => void;
 }) {
-  const inputData: Operation.Definition.Input<typeof AgentPrompt> = { prompt, input };
+  const inputData: Operation.Definition.Input<typeof RunInstructions> = { instructions, input };
   // Invoke the function.
-  const result = yield* Operation.invoke(AgentPrompt, inputData).pipe(Effect.orDie, Effect.exit);
+  const result = yield* Operation.invoke(RunInstructions, inputData).pipe(Effect.orDie, Effect.exit);
 
   Exit.match(result, {
     onFailure: (cause) => {

package/src/containers/ScriptArticle/ScriptArticle.stories.tsx

@@ -8,7 +8,7 @@ import React, { useEffect, useState } from 'react';
 
 import { SERVICES_CONFIG } from '@dxos/ai/testing';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { Blueprint } from '@dxos/compute';
+import { Skill } from '@dxos/compute';
 import { Script } from '@dxos/compute';
 import { Operation } from '@dxos/compute';
 import { Filter } from '@dxos/echo';
@@ -25,12 +25,12 @@ import { translations } from '#translations';
 
 import { ScriptArticle } from './ScriptArticle';
 
-type DefaultStoryProps = {};
+type StoryArgs = {};
 
 /**
  * Loads the script source ref so `script.source.target` is available for the editor.
  */
-const DefaultStory = (_: DefaultStoryProps) => {
+const DefaultStory = (_: StoryArgs) => {
   const [space] = useSpaces();
   const [script] = useQuery(space?.db, Filter.type(Script.Script));
   const [sourceReady, setSourceReady] = useState(false);
@@ -80,7 +80,7 @@ const meta = {
               services: SERVICES_CONFIG.REMOTE,
             },
           }),
-          types: [Script.Script, Operation.PersistentOperation, Blueprint.Blueprint, Text.Text],
+          types: [Script.Script, Operation.PersistentOperation, Skill.Skill, Text.Text],
           onClientInitialized: ({ client }) =>
             Effect.gen(function* () {
               yield* initializeIdentity(client);
@@ -98,7 +98,7 @@ const meta = {
     layout: 'fullscreen',
     translations,
   },
-} satisfies Meta<DefaultStoryProps>;
+} satisfies Meta<StoryArgs>;
 
 export default meta;
 

package/src/containers/ScriptArticle/ScriptArticle.tsx

@@ -7,11 +7,11 @@ import React, { useMemo } from 'react';
 import { type AppSurface } from '@dxos/app-toolkit/ui';
 import { type Script } from '@dxos/compute';
 import { Obj } from '@dxos/echo';
-import { createDocAccessor } from '@dxos/echo-client';
+import { Doc } from '@dxos/echo-doc';
 import { getSpace } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { Panel } from '@dxos/react-ui';
-import { createDataExtensions, listener, editorClassNames } from '@dxos/ui-editor';
+import { createDataExtensions, editorClassNames, listener } from '@dxos/ui-editor';
 
 import { ScriptToolbar, TypescriptEditor, type TypescriptEditorProps } from '#components';
 import { useDeployState, useToolbarState } from '#hooks';
@@ -44,7 +44,7 @@ export const ScriptArticle = ({
     return [
       createDataExtensions({
         id: script.id,
-        text: createDocAccessor(script.source.target, ['content']),
+        text: Doc.createAccessor(script.source.target, ['content']),
         messenger: space,
         identity,
       }),

package/src/containers/ScriptProperties/FunctionBinding.tsx

@@ -51,7 +51,7 @@ export const FunctionBinding = ({ object }: FunctionBindingProps) => {
 
   return (
     <div className='flex flex-col'>
-      <Form.Section label={t('remote-function-settings.heading')} />
+      <Form.Section title={t('remote-function-settings.heading')} />
 
       {functionUrl && (
         <Input.Root>

package/src/containers/ScriptProperties/FunctionPublishing.tsx

@@ -95,7 +95,7 @@ export const FunctionPublishing = ({ object }: FunctionPublishingProps) => {
 
   return (
     <div className='flex flex-col'>
-      <Form.Section label={t('script-publish-settings.label')} description={t('script-publish-settings.description')} />
+      <Form.Section title={t('script-publish-settings.label')} description={t('script-publish-settings.description')} />
 
       {!githubToken && (
         <div className='flex flex-col py-form-gap'>

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

@@ -7,7 +7,7 @@ import * as Effect from 'effect/Effect';
 import React from 'react';
 
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { Blueprint } from '@dxos/compute';
+import { Skill } from '@dxos/compute';
 import { Script } from '@dxos/compute';
 import { Operation } from '@dxos/compute';
 import { Filter } from '@dxos/echo';
@@ -24,9 +24,9 @@ import { translations } from '#translations';
 
 import { ScriptProperties } from './ScriptProperties';
 
-type DefaultStoryProps = {};
+type StoryArgs = {};
 
-const DefaultStory = (_: DefaultStoryProps) => {
+const DefaultStory = (_: StoryArgs) => {
   const [space] = useSpaces();
   const [script] = useQuery(space?.db, Filter.type(Script.Script));
   if (!script) {
@@ -50,7 +50,7 @@ const meta = {
       plugins: [
         ...corePlugins(),
         ClientPlugin({
-          types: [Script.Script, Operation.PersistentOperation, Blueprint.Blueprint, Text.Text],
+          types: [Script.Script, Operation.PersistentOperation, Skill.Skill, Text.Text],
           onClientInitialized: ({ client }) =>
             Effect.gen(function* () {
               yield* initializeIdentity(client);
@@ -67,7 +67,7 @@ const meta = {
     layout: 'fullscreen',
     translations,
   },
-} satisfies Meta<DefaultStoryProps>;
+} satisfies Meta<StoryArgs>;
 
 export default meta;
 

package/src/containers/ScriptProperties/ScriptProperties.tsx

@@ -8,9 +8,9 @@ import { type AppSurface } from '@dxos/app-toolkit/ui';
 import { type Script } from '@dxos/compute';
 import { Form } from '@dxos/react-ui-form';
 
-import { BlueprintEditor } from './BlueprintEditor';
 import { FunctionBinding } from './FunctionBinding';
 import { FunctionPublishing } from './FunctionPublishing';
+import { SkillEditor } from './SkillEditor';
 
 export type ScriptPropertiesProps = AppSurface.ObjectPropertiesProps<Script.Script>;
 
@@ -21,7 +21,7 @@ export const ScriptProperties = ({ subject: object }: ScriptPropertiesProps) =>
         <FunctionBinding object={object} />
       </Form.Section>
       <Form.Section>
-        <BlueprintEditor object={object} />
+        <SkillEditor object={object} />
       </Form.Section>
       <Form.Section>
         <FunctionPublishing object={object} />