@dxos/plugin-script 0.7.4 → 0.7.5-labs.a279d8c

package/src/components/ScriptSettingsPanel.tsx

@@ -2,15 +2,22 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type ChangeEvent, useCallback } from 'react';
+import { Octokit } from '@octokit/core';
+import React, { type ChangeEvent, useCallback, useEffect, useState } from 'react';
 
+import { createIntent, SettingsAction, useIntentDispatcher } from '@dxos/app-framework';
+import { FunctionType, type ScriptType, getInvocationUrl, getUserFunctionUrlInMetadata } from '@dxos/functions';
+import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
 import { Filter, getMeta, getSpace, useQuery } from '@dxos/react-client/echo';
-import { Button, Icon, Input, useControlledValue, useTranslation } from '@dxos/react-ui';
+import { Button, Clipboard, Input, Separator, useControlledValue, useTranslation } from '@dxos/react-ui';
+import { AccessTokenType } from '@dxos/schema';
 
-import { getInvocationUrl, getUserFunctionUrlInMetadata } from '../edge';
 import { SCRIPT_PLUGIN } from '../meta';
-import { FunctionType, type ScriptType } from '../types';
+
+// TODO(wittjosiah): Factor out.
+// From https://stackoverflow.com/a/67243723/2804332
+const kebabize = (str: string) => str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());
 
 export type ScriptSettingsPanelProps = {
   script: ScriptType;
@@ -18,16 +25,37 @@ export type ScriptSettingsPanelProps = {
 
 export const ScriptSettingsPanel = ({ script }: ScriptSettingsPanelProps) => {
   const { t } = useTranslation(SCRIPT_PLUGIN);
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const client = useClient();
   const space = getSpace(script);
   const [fn] = useQuery(space, Filter.schema(FunctionType, { source: script }));
+  const [githubToken] = useQuery(space, Filter.schema(AccessTokenType, { source: 'github.com' }));
+  const gistKey = getMeta(script).keys.find(({ source }) => source === 'github.com');
+  const [gistUrl, setGistUrl] = useState<string | undefined>();
 
-  const handleNameChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      script.name = event.target.value;
-    },
-    [script],
-  );
+  useEffect(() => {
+    const token = githubToken?.token;
+    const gistId = gistKey?.id;
+    if (!token || !gistId) {
+      setGistUrl(undefined);
+      return;
+    }
+
+    const timeout = setTimeout(async () => {
+      try {
+        const octokit = new Octokit({ auth: githubToken.token });
+        const response = await octokit.request('GET /gists/{gist_id}', {
+          gist_id: gistId,
+        });
+        setGistUrl(response.data.html_url);
+      } catch (err) {
+        log.catch(err);
+        setGistUrl(undefined);
+      }
+    });
+
+    return () => clearTimeout(timeout);
+  }, [githubToken, gistKey]);
 
   const [binding, setBinding] = useControlledValue(fn?.binding ?? '');
   const handleBindingChange = useCallback(
@@ -47,55 +75,100 @@ export const ScriptSettingsPanel = ({ script }: ScriptSettingsPanelProps) => {
       spaceId: space?.id,
     });
 
-  // TODO(wittjosiah): Use ClipboardProvider.
-  const handleCopy = useCallback(() => functionUrl && navigator.clipboard.writeText(functionUrl), [functionUrl]);
+  const handleOpenTokenManager = useCallback(
+    () => dispatch(createIntent(SettingsAction.Open, { plugin: 'dxos.org/plugin/token-manager' })),
+    [],
+  );
+
+  const [publishing, setPublishing] = useState(false);
+  const handlePublish = useCallback(async () => {
+    setPublishing(true);
+    const octokit = new Octokit({ auth: githubToken.token });
+    const source = await script.source.load();
+    const filename = script.name ? kebabize(script.name) : 'composer-script';
+    const files = { [`${filename}.ts`]: { content: source.content } };
+
+    try {
+      // TODO(wittjosiah): Factor out to intent.
+      const meta = getMeta(script);
+      const githubKey = meta.keys.find(({ source }) => source === 'github.com');
+      const gistId = githubKey?.id;
+      if (gistId) {
+        await octokit.request('PATCH /gists/{gist_id}', {
+          gist_id: gistId,
+          files,
+        });
+      } else {
+        const response = await octokit.request('POST /gists', {
+          public: true,
+          files,
+        });
+        if (response.data.id) {
+          meta.keys.push({ source: 'github.com', id: response.data.id });
+        }
+      }
+    } finally {
+      setPublishing(false);
+    }
+  }, [script, githubToken]);
 
   return (
-    <div role='form' className='flex flex-col w-full p-2 gap-4'>
-      <Input.Root>
-        <div role='none' className='flex flex-col gap-1'>
-          <Input.Label>{t('name label')}</Input.Label>
-          <Input.TextInput
-            placeholder={t('object title placeholder')}
-            value={script.name ?? ''}
-            onChange={handleNameChange}
-          />
-        </div>
-      </Input.Root>
-      {fn && (
+    <>
+      {fn && functionUrl && (
         <>
-          <hr className='border-separator' />
-          <h2>{t('remote function settings heading')}</h2>
-          <Input.Root>
-            <div role='none' className='flex flex-col gap-1'>
-              <Input.Label>{t('function url label')}</Input.Label>
-              <div role='none' className='flex gap-1'>
+          <Separator />
+          <div role='form' className='flex flex-col w-full p-2 gap-4'>
+            <h2>{t('remote function settings heading')}</h2>
+            <Input.Root>
+              <div role='none' className='flex flex-col gap-1'>
+                <Input.Label>{t('function url label')}</Input.Label>
+                <div role='none' className='flex gap-1'>
+                  <Input.TextInput
+                    disabled
+                    value={functionUrl}
+                    onChange={(event) => {
+                      fn.name = event.target.value;
+                    }}
+                  />
+                  <Clipboard.IconButton value={functionUrl} />
+                </div>
+              </div>
+            </Input.Root>
+            <Input.Root>
+              <div role='none' className='flex flex-col gap-1'>
+                <Input.Label>{t('function binding label')}</Input.Label>
                 <Input.TextInput
-                  disabled
-                  value={functionUrl}
-                  onChange={(event) => {
-                    fn.name = event.target.value;
-                  }}
+                  placeholder={t('function binding placeholder')}
+                  value={binding}
+                  onChange={handleBindingChange}
+                  onBlur={handleBindingBlur}
                 />
-                <Button onClick={handleCopy}>
-                  <Icon icon='ph--copy--regular' size={4} />
-                </Button>
               </div>
-            </div>
-          </Input.Root>
-          <Input.Root>
-            <div role='none' className='flex flex-col gap-1'>
-              <Input.Label>{t('function binding label')}</Input.Label>
-              <Input.TextInput
-                placeholder={t('function binding placeholder')}
-                value={binding}
-                onChange={handleBindingChange}
-                onBlur={handleBindingBlur}
-              />
-            </div>
-          </Input.Root>
+            </Input.Root>
+          </div>
         </>
       )}
-    </div>
+      <Separator />
+      <div className='flex flex-col w-full p-2 gap-4'>
+        <div>
+          <h2>{t('script publish settings label')}</h2>
+          <p className='text-description text-sm'>{t('script publish settings description')}</p>
+        </div>
+        {!githubToken && (
+          <div className='flex flex-col items-center justify-center gap-2'>
+            <span>{t('no github token label')}</span>
+            <Button onClick={handleOpenTokenManager}>{t('open token manager label')}</Button>
+          </div>
+        )}
+        {githubToken && (
+          <div className='flex justify-end gap-2'>
+            {gistUrl && <Clipboard.IconButton value={gistUrl} />}
+            <Button disabled={publishing} onClick={handlePublish}>
+              {t(publishing ? 'publishing label' : 'publish label')}
+            </Button>
+          </div>
+        )}
+      </div>
+    </>
   );
 };

package/src/components/{Toolbar/Toolbar.stories.tsx → ScriptToolbar/ScriptToolbar.stories.tsx}

@@ -8,7 +8,7 @@ import { type Meta } from '@storybook/react';
 
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { Toolbar } from './Toolbar';
+import { ScriptToolbar } from './ScriptToolbar';
 import { templates } from '../../templates';
 
 export const Default = {
@@ -23,7 +23,7 @@ export const Default = {
 
 const meta: Meta = {
   title: 'plugins/plugin-script/Toolbar',
-  component: Toolbar,
+  component: ScriptToolbar,
   decorators: [withTheme, withLayout({ tooltips: true })],
 };
 

package/src/components/ScriptToolbar/ScriptToolbar.tsx

@@ -0,0 +1,51 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { type ScriptType } from '@dxos/functions';
+import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { ElevationProvider, type ThemedClassName } from '@dxos/react-ui';
+import { stackItemContentToolbarClassNames } from '@dxos/react-ui-editor';
+import { createGapSeparator, MenuProvider, ToolbarMenu, useMenuActions } from '@dxos/react-ui-menu';
+
+import { createDeploy } from './deploy';
+import { createFormat } from './format';
+import { createTemplateSelect } from './templateSelect';
+import { useToolbarAction } from './useToolbarAction';
+import { type ScriptToolbarState } from './useToolbarState';
+import { createView } from './view';
+
+export type ScriptToolbarProps = ThemedClassName<{
+  role?: string;
+  script: ScriptType;
+  state: ScriptToolbarState;
+}>;
+
+const createToolbar = (state: ScriptToolbarState) => {
+  const templateSelect = createTemplateSelect();
+  const format = createFormat();
+  const gap = createGapSeparator();
+  const deploy = createDeploy(state);
+  const view = createView(state);
+  return {
+    nodes: [...templateSelect.nodes, ...format.nodes, ...gap.nodes, ...deploy.nodes, ...view.nodes],
+    edges: [...templateSelect.edges, ...format.edges, ...gap.edges, ...deploy.edges, ...view.edges],
+  };
+};
+
+export const ScriptToolbar = ({ script, role, state, classNames }: ScriptToolbarProps) => {
+  const handleAction = useToolbarAction({ state, script });
+  const toolbarCreator = useCallback(() => createToolbar(state), [state]);
+  const menu = useMenuActions(toolbarCreator);
+  return (
+    <div role='none' className={stackItemContentToolbarClassNames(role)}>
+      <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
+        <MenuProvider {...menu} onAction={handleAction} attendableId={fullyQualifiedId(script)}>
+          <ToolbarMenu classNames={classNames} />
+        </MenuProvider>
+      </ElevationProvider>
+    </div>
+  );
+};

package/src/components/ScriptToolbar/deploy.ts

@@ -0,0 +1,157 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useCallback, useEffect, useMemo } from 'react';
+
+import {
+  FunctionType,
+  getInvocationUrl,
+  getUserFunctionUrlInMetadata,
+  incrementSemverPatch,
+  type ScriptType,
+  setUserFunctionUrlInMetadata,
+  uploadWorkerFunction,
+} from '@dxos/functions';
+import { log } from '@dxos/log';
+import { useClient } from '@dxos/react-client';
+import { Filter, create, getMeta, getSpace, makeRef, useQuery } from '@dxos/react-client/echo';
+import { useTranslation } from '@dxos/react-ui';
+import { createMenuAction } from '@dxos/react-ui-menu';
+
+import { type ViewState } from './view';
+import { Bundler } from '../../bundler';
+import { SCRIPT_PLUGIN } from '../../meta';
+
+export type DeployActionProperties = { type: 'deploy' } | { type: 'copy' };
+
+export type DeployState = ViewState & {
+  deploying: boolean;
+  deployed: boolean;
+  functionUrl: string;
+  error: string;
+};
+
+export const createDeploy = (state: Partial<DeployState>) => {
+  const errorItem = createMenuAction('error', {
+    label: state.error ?? ['no error label', { ns: SCRIPT_PLUGIN }],
+    icon: 'ph--warning-circle--regular',
+    hidden: !state.error,
+  });
+
+  const deployAction = createMenuAction<DeployActionProperties>('deploy', {
+    type: 'deploy',
+    label: [state.deploying ? 'pending label' : 'deploy label', { ns: SCRIPT_PLUGIN }],
+    icon: state.deploying ? 'ph--spinner-gap--regular' : 'ph--cloud-arrow-up--regular',
+    disabled: state.deploying,
+    classNames: state.deploying ? '[&_svg]:animate-spin' : '',
+  });
+
+  const copyAction = createMenuAction<DeployActionProperties>('copy', {
+    type: 'copy',
+    label: ['copy link label', { ns: SCRIPT_PLUGIN }],
+    icon: 'ph--link--regular',
+    disabled: !state.functionUrl,
+  });
+
+  return {
+    nodes: [errorItem, deployAction, copyAction],
+    edges: [
+      { source: 'root', target: 'error' },
+      { source: 'root', target: 'deploy' },
+      { source: 'root', target: 'copy' },
+    ],
+  };
+};
+
+const useDeployDeps = ({ state, script }: { state: Partial<DeployState>; script: ScriptType }) => {
+  const space = getSpace(script);
+  const [fn] = useQuery(space, Filter.schema(FunctionType, { source: script }));
+  const client = useClient();
+  const existingFunctionUrl = useMemo(() => fn && getUserFunctionUrlInMetadata(getMeta(fn)), [fn]);
+  return { space, fn, client, existingFunctionUrl };
+};
+
+export const useDeployState = ({ state, script }: { state: Partial<DeployState>; script: ScriptType }) => {
+  const { space, client, existingFunctionUrl } = useDeployDeps({ state, script });
+  useEffect(() => {
+    if (!existingFunctionUrl) {
+      return;
+    }
+
+    state.functionUrl = getInvocationUrl(existingFunctionUrl, client.config.values.runtime?.services?.edge?.url ?? '', {
+      spaceId: space?.id,
+    });
+  }, [existingFunctionUrl, space]);
+
+  useEffect(() => {
+    state.deployed = Boolean(existingFunctionUrl) && !script.changed;
+  }, [script.changed, existingFunctionUrl]);
+};
+
+export const useDeployHandler = ({ state, script }: { state: Partial<DeployState>; script: ScriptType }) => {
+  const { space, fn, client, existingFunctionUrl } = useDeployDeps({ state, script });
+  const { t } = useTranslation(SCRIPT_PLUGIN);
+
+  return useCallback(async () => {
+    if (!script.source || !space) {
+      return;
+    }
+
+    state.error = undefined;
+    state.deploying = true;
+
+    try {
+      const existingFunctionId = existingFunctionUrl?.split('/').at(-1);
+
+      const bundler = new Bundler({ platform: 'browser', sandboxedModules: [], remoteModules: {} });
+      const buildResult = await bundler.bundle(script.source.target!.content);
+      if (buildResult.error || !buildResult.bundle) {
+        throw buildResult.error;
+      }
+
+      const { functionId, version, meta } = await uploadWorkerFunction({
+        client,
+        spaceId: space.id,
+        version: fn ? incrementSemverPatch(fn.version) : '0.0.1',
+        functionId: existingFunctionId,
+        source: buildResult.bundle,
+      });
+      if (functionId === undefined || version === undefined) {
+        throw new Error(`Upload didn't return expected data: functionId=${functionId}, version=${version}`);
+      }
+
+      log.info('function uploaded', { functionId, version });
+      if (fn) {
+        fn.version = version;
+      }
+
+      const deployedFunction =
+        fn ?? space.db.add(create(FunctionType, { name: functionId, version, source: makeRef(script) }));
+
+      script.changed = false;
+
+      if (meta.inputSchema) {
+        deployedFunction.inputSchema = meta.inputSchema;
+      } else {
+        log.verbose('no input schema in function metadata', { functionId });
+      }
+
+      setUserFunctionUrlInMetadata(getMeta(deployedFunction), `/${space.id}/${functionId}`);
+
+      state.view = 'split';
+    } catch (err: any) {
+      log.catch(err);
+      state.error = t('upload failed label');
+    }
+    state.deploying = false;
+  }, [fn, client, t, existingFunctionUrl, script, script.name, script.source, space?.id ?? null]);
+};
+
+export const useCopyHandler = ({ state }: { state: Partial<DeployState> }) =>
+  useCallback(async () => {
+    if (!state.functionUrl) {
+      return;
+    }
+    await navigator.clipboard.writeText(state.functionUrl);
+  }, [state.functionUrl]);

package/src/components/ScriptToolbar/format.ts

@@ -0,0 +1,47 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { format } from 'prettier';
+import prettierPluginEstree from 'prettier/plugins/estree';
+import prettierPluginTypescript from 'prettier/plugins/typescript';
+import { useCallback } from 'react';
+
+import { type ScriptType } from '@dxos/functions';
+import { log } from '@dxos/log';
+import { createMenuAction } from '@dxos/react-ui-menu';
+
+import { SCRIPT_PLUGIN } from '../../meta';
+
+export type FormatActionProperties = { type: 'format' };
+
+export const createFormat = () => {
+  const formatAction = createMenuAction('format', {
+    label: ['format label', { ns: SCRIPT_PLUGIN }],
+    icon: 'ph--magic-wand--regular',
+  });
+
+  return {
+    nodes: [formatAction],
+    edges: [{ source: 'root', target: 'format' }],
+  };
+};
+
+export const useFormatHandler = ({ script }: { script: ScriptType }) =>
+  useCallback(async () => {
+    if (!script.source) {
+      return;
+    }
+
+    try {
+      script.source.target!.content = await format(script.source.target!.content, {
+        parser: 'typescript',
+        plugins: [prettierPluginEstree, prettierPluginTypescript],
+        semi: true,
+        singleQuote: true,
+      });
+    } catch (err: any) {
+      // TODO(wittjosiah): Show error in UI.
+      log.catch(err);
+    }
+  }, [script.source]);

package/src/components/{Toolbar → ScriptToolbar}/index.ts

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

package/src/components/ScriptToolbar/templateSelect.ts

@@ -0,0 +1,64 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useCallback } from 'react';
+
+import { FUNCTIONS_PRESET_META_KEY, type ScriptType } from '@dxos/functions';
+import { getMeta } from '@dxos/live-object';
+import { createMenuItemGroup, createMenuAction } from '@dxos/react-ui-menu';
+
+import { SCRIPT_PLUGIN } from '../../meta';
+import { templates } from '../../templates';
+
+export type TemplateActionProperties = { type: 'template'; value: string };
+
+const createTemplateSelectGroup = () => {
+  return createMenuItemGroup('template-select', {
+    label: ['template select group label', { ns: SCRIPT_PLUGIN }],
+    variant: 'dropdownMenu',
+  });
+};
+
+const createTemplateSelectActions = () => {
+  return templates.map((template) => {
+    return createMenuAction<TemplateActionProperties>(`template--${template.id}`, {
+      label: template.name,
+      value: template.id,
+      type: 'template',
+    });
+  });
+};
+
+export const createTemplateSelect = () => {
+  const templateSelectGroup = createTemplateSelectGroup();
+  const templateSelectActions = createTemplateSelectActions();
+  return {
+    nodes: [templateSelectGroup, ...templateSelectActions],
+    edges: [
+      { source: 'root', target: 'template-select' },
+      ...templateSelectActions.map((action) => ({ source: 'template-select', target: action.id })),
+    ],
+  };
+};
+
+export const useTemplateSelectHandler = ({ script }: { script: ScriptType }) => {
+  return useCallback(
+    (templateId: string) => {
+      const template = templates.find((template) => template.id === templateId);
+      if (template) {
+        script.name = template.name;
+        script.source!.target!.content = template.source;
+        const metaKeys = getMeta(script).keys;
+        const oldPresetIndex = metaKeys.findIndex((key) => key.source === FUNCTIONS_PRESET_META_KEY);
+        if (oldPresetIndex >= 0) {
+          metaKeys.splice(oldPresetIndex, 1);
+        }
+        if (template.presetId) {
+          metaKeys.push({ source: FUNCTIONS_PRESET_META_KEY, id: template.presetId });
+        }
+      }
+    },
+    [script],
+  );
+};

package/src/components/ScriptToolbar/useToolbarAction.ts

@@ -0,0 +1,54 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useCallback } from 'react';
+
+import { type ScriptType } from '@dxos/functions';
+import { log } from '@dxos/log';
+import { type MenuAction, type MenuActionHandler } from '@dxos/react-ui-menu';
+
+import { type DeployActionProperties, useDeployHandler, useCopyHandler } from './deploy';
+import { type FormatActionProperties, useFormatHandler } from './format';
+import { type TemplateActionProperties, useTemplateSelectHandler } from './templateSelect';
+import { type ScriptToolbarState } from './useToolbarState';
+import { type ViewActionProperties } from './view';
+
+export type ScriptToolbarActionProperties =
+  | TemplateActionProperties
+  | ViewActionProperties
+  | FormatActionProperties
+  | DeployActionProperties;
+
+export type ScriptToolbarAction = MenuAction<ScriptToolbarActionProperties>;
+
+export const useToolbarAction = (props: { state: ScriptToolbarState; script: ScriptType }) => {
+  const handleTemplateSelect = useTemplateSelectHandler(props);
+  const handleFormat = useFormatHandler(props);
+  const handleDeploy = useDeployHandler(props);
+  const handleCopy = useCopyHandler(props);
+  return useCallback(
+    ((action: ScriptToolbarAction) => {
+      switch (action.properties.type) {
+        case 'template':
+          handleTemplateSelect(action.properties.value);
+          break;
+        case 'view':
+          props.state.view = action.properties.value;
+          break;
+        case 'format':
+          void handleFormat();
+          break;
+        case 'deploy':
+          void handleDeploy();
+          break;
+        case 'copy':
+          void handleCopy();
+          break;
+        default:
+          log.error('Unknown action type', action);
+      }
+    }) as MenuActionHandler,
+    [handleTemplateSelect, handleFormat, handleDeploy, handleCopy],
+  );
+};

package/src/components/ScriptToolbar/useToolbarState.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+import { create } from '@dxos/live-object';
+
+import { type DeployState } from './deploy';
+import { type ViewState } from './view';
+
+export type ScriptToolbarState = Partial<DeployState & ViewState>;
+
+export const useToolbarState = (initialState: ScriptToolbarState = {}) => {
+  return useMemo(() => create<ScriptToolbarState>(initialState), []);
+};

package/src/components/ScriptToolbar/view.ts

@@ -0,0 +1,52 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createMenuAction, createMenuItemGroup } from '@dxos/react-ui-menu';
+
+import { SCRIPT_PLUGIN } from '../../meta';
+
+export type ViewType = 'editor' | 'split' | 'debug';
+
+export type ViewState = { view: ViewType };
+
+export type ViewActionProperties = { type: 'view'; value: ViewType };
+
+const views: Record<ViewType, string> = {
+  editor: 'ph--code--regular',
+  split: 'ph--square-split-vertical--regular',
+  debug: 'ph--bug--regular',
+};
+
+const createViewGroupItem = (state: Partial<ViewState>) => {
+  return createMenuItemGroup('view', {
+    label: ['view group label', { ns: SCRIPT_PLUGIN }],
+    variant: 'dropdownMenu',
+    applyActive: true,
+    value: state.view,
+  });
+};
+
+const createViewActions = (state: Partial<ViewState>) => {
+  return Object.entries(views).map(([viewType, icon]) => {
+    return createMenuAction<ViewActionProperties>(`view--${viewType}`, {
+      type: 'view',
+      value: viewType as ViewType,
+      label: [`view ${viewType} label`, { ns: SCRIPT_PLUGIN }],
+      icon,
+      checked: state.view === viewType,
+    });
+  });
+};
+
+export const createView = (state: Partial<ViewState>) => {
+  const viewGroupItem = createViewGroupItem(state);
+  const viewActions = createViewActions(state);
+  return {
+    nodes: [viewGroupItem, ...viewActions],
+    edges: [
+      { source: 'root', target: 'view' },
+      ...viewActions.map((action) => ({ source: 'view', target: action.id })),
+    ],
+  };
+};