diff --git a/imports/check.tsx b/imports/check.tsx
index 9a973b05..4da2d1b9 100644
--- a/imports/check.tsx
+++ b/imports/check.tsx
@@ -1,18 +1,19 @@
 import Debug from 'debug';
 import { gql } from '@apollo/client';
 import forEach from 'lodash/forEach';
+import { Id } from '@deep-foundation/deeplinks/imports/minilinks';
 
 interface Node {
-  from_id?: number; id?: number; to_id?: number; type_id?: number;
+  from_id?: Id; id?: Id; to_id?: Id; type_id?: Id;
   in: Node[]; out: Node[];
 }
 
 interface Marker {
-  id: number; item_id: number; path_item_depth: number; path_item_id: number; root_id: number; position_id: string;
+  id: Id; item_id: Id; path_item_depth: Id; path_item_id: Id; root_id: Id; position_id: string;
   by_position: Marker[];
 }
 
-export const check = async (hash: { [name:string]: number }, client) => {
+export const check = async (hash: { [name:string]: Id }, client) => {
   const fetch = async () => {
     const result = await client.query({ query: gql`query FETCH_FOR_CHECK {
       mp: mp { id item_id path_item_depth path_item_id root_id position_id by_position(order_by: { path_item_depth: asc }) { id item_id path_item_depth path_item_id root_id position_id } }
@@ -28,8 +29,8 @@ export const check = async (hash: { [name:string]: number }, client) => {
     valid = false;
     console.log(...args);
   };
-  const nodesChecked: { [id: number]: boolean; } = {};
-  const markersChecked: { [id: number]: boolean; } = {};
+  const nodesChecked: { [id: Id]: boolean; } = {};
+  const markersChecked: { [id: Id]: boolean; } = {};
   const checkNode = (node: Node) => {
     if (nodesChecked[node.id]) return;
     else nodesChecked[node.id] = true;
diff --git a/imports/client-handler-slate-proxy.tsx b/imports/client-handler-slate-proxy.tsx
index 4a666450..29dc89e8 100644
--- a/imports/client-handler-slate-proxy.tsx
+++ b/imports/client-handler-slate-proxy.tsx
@@ -40,7 +40,7 @@ export const ClientHandlerSlateProxy = ({ children }) => {
     const match = regex.exec(text);
     const firstGroup = match ? match[1] : null;
   
-    return firstGroup ? parseInt(firstGroup, 10) : null;
+    return firstGroup ? parseInt(firstGroup, 10) : undefined;
   }
 
   const text = children?.[0]?.props?.parent?.children?.[0]?.text || '';
@@ -51,13 +51,12 @@ export const ClientHandlerSlateProxy = ({ children }) => {
     },
   });
 
-  console.log('DEEPW', text, linkId, children);
-  // if(linkId) {
+  if(linkId) {
     return (<>
       <ClientHandler handlerId={739} linkId={linkId} ml={ml} />
       {children}
     </>)
-  // } else { 
-  //   return children
-  // }
+  } else { 
+    return null;
+  }
 }
\ No newline at end of file
diff --git a/imports/client-handler.tsx b/imports/client-handler.tsx
index 8669fd4e..8132d7d3 100644
--- a/imports/client-handler.tsx
+++ b/imports/client-handler.tsx
@@ -3,7 +3,7 @@ import * as icons from '@chakra-ui/icons';
 import dynamic from 'next/dynamic';
 import { DeepClient, useDeep, useDeepSubscription } from "@deep-foundation/deeplinks/imports/client";
 import { evalClientHandler as deepclientEvalClientHandler } from '@deep-foundation/deeplinks/imports/client-handler';
-import { useMinilinksFilter, useMinilinksSubscription } from "@deep-foundation/deeplinks/imports/minilinks";
+import { Id, useMinilinksFilter, useMinilinksSubscription } from "@deep-foundation/deeplinks/imports/minilinks";
 import axios from 'axios';
 import * as axiosHooks from 'axios-hooks';
 import * as classnames from 'classnames';
@@ -336,9 +336,9 @@ export const ClientHandlerRenderer = React.memo(function ClientHandlerRenderer({
 });
 
 export interface ClientHandlerProps extends Partial<ClientHandlerRendererProps> {
-  linkId: number;
-  handlerId?: number;
-  context?: number[];
+  linkId: Id;
+  handlerId?: Id;
+  context?: Id[];
   ml?: any;
   error?: any;
   onClose?: () => any,
diff --git a/imports/connector/connector.tsx b/imports/connector/connector.tsx
index 1d1563a3..f9f6b9ca 100644
--- a/imports/connector/connector.tsx
+++ b/imports/connector/connector.tsx
@@ -156,11 +156,11 @@ const TerminalConnect = React.memo(({
         console.log('initializingState2', initializingState)
 
         await delay(2000);
-        setInitLocal(InitializingState.launched);
-        setGqlPath(defaultGqlPath);
-        setGqlSsl(defaultGqlSsl);
+        setInitLocal && setInitLocal(InitializingState.launched);
+        setGqlPath && setGqlPath(defaultGqlPath);
+        setGqlSsl && setGqlSsl(defaultGqlSsl);
         await delay(2000);
-        setPortal(false);
+        setPortal && setPortal(false);
       }, 2000);
     } else if (initializingState == 'removing') {
       console.log('initializingState0-r', initializingState);
@@ -176,10 +176,10 @@ const TerminalConnect = React.memo(({
         // control.start('shrink');
         console.log('initializingState2-r', initializingState);
         await delay(2000);
-        setInitLocal(InitializingState.notInit);
+        setInitLocal && setInitLocal(InitializingState.notInit);
         await delay(1000);
-        setGqlPath('');
-        setGqlSsl(false);
+        setGqlPath && setGqlPath('');
+        setGqlSsl && setGqlSsl(false);
       }, 2000);
     } else if (initializingState == 'launched' || initializingState == 'not init') {
       if (terminalRef.current) terminalRef.current.clear();
@@ -371,7 +371,7 @@ const InputAnimation = React.memo(({
           onClick={() => { 
             const [currentGqlPath, currentGqlSsl] = parseUrl(valueRemoteRoute);
             if(currentGqlPath) {
-              onStartRemoteRoute();
+              onStartRemoteRoute && onStartRemoteRoute();
             }
           }}
           children={
@@ -518,7 +518,7 @@ export const Connector = React.memo(({
   });
 
   // const [ portalOpen, setPortal ] = useState(true); 
-  // const onClosePortal = () => setPortal(false);
+  // const onClosePortal = () => setPortal && setPortal(false);
   
   const [remotesString, setRemotesString] = useLocalStorage('remote-routes', '[]');
   const remotes = JSON.parse(remotesString);
@@ -589,12 +589,12 @@ export const Connector = React.memo(({
     (async () => {
       const status = await checkSystemStatus(defaultServerUrl);
       if (status.result !== undefined) {
-        setInitLocal(InitializingState.notInit);
+        setInitLocal && setInitLocal(InitializingState.notInit);
         await delay(1000);
-        setInitLocal(InitializingState.launched);
+        setInitLocal && setInitLocal(InitializingState.launched);
         if (!gqlPath){
-          setGqlPath(defaultGqlPath);
-          setGqlSsl(defaultGqlSsl);
+          setGqlPath && setGqlPath(defaultGqlPath);
+          setGqlSsl && setGqlSsl(defaultGqlSsl);
         }
       }
     })();
@@ -619,7 +619,7 @@ export const Connector = React.memo(({
 
   return (<ModalWindow onClosePortal={() => {
     if (init == InitializingState.launched){
-      setPortal(false);
+      setPortal && setPortal && setPortal(false);
     }
   }} portalOpen={portalOpen}>
       <Box 
@@ -670,8 +670,8 @@ export const Connector = React.memo(({
                   // setValueRemote={}
                   onDeleteValue={() => {
                     if (gqlPath == rr.value) {
-                      setGqlPath('');
-                      setGqlSsl(false);
+                      setGqlPath && setGqlPath('');
+                      setGqlSsl && setGqlSsl(false);
                     }
                     remove(rr.id)
                     }
@@ -681,9 +681,9 @@ export const Connector = React.memo(({
                       const url = new URL(rr.value);
                       const status = await checkUrlStatus(url);
                       if (status.result !== undefined && !status.error) {
-                        setGqlPath(`${url.hostname}${url.port ? ':' + url.port : ''}${url.pathname}`);
-                        setGqlSsl(url.protocol == 'http:' ? false : true);
-                        setPortal(false);
+                        setGqlPath && setGqlPath(`${url.hostname}${url.port ? ':' + url.port : ''}${url.pathname}`);
+                        setGqlSsl && setGqlSsl(url.protocol == 'http:' ? false : true);
+                        setPortal && setPortal && setPortal(false);
                       } else {
                         console.log('URL error', JSON.stringify(status));
                       }
@@ -735,9 +735,9 @@ export const Connector = React.memo(({
                   initial='initial'
                   variants={initArea}
                   onClick={() => {
-                    setInitLocal(InitializingState.initializing);
+                    setInitLocal && setInitLocal(InitializingState.initializing);
                     // setTimeout(() => {
-                    //   setInitLocal(InitializingState.initialized);
+                    //   setInitLocal && setInitLocal(InitializingState.initialized);
                     // }, 3000)
                   }} 
                 >
@@ -766,7 +766,7 @@ export const Connector = React.memo(({
                   animate={controlInit}
                   initial='initializing'
                   variants={initArea}
-                  // onClick={() => setInitLocal(InitializingState.initialized)} 
+                  // onClick={() => setInitLocal && setInitLocal(InitializingState.initialized)} 
                 >
                   <Loading text="Initializing" 
                     sxFlex={{pt: 2, pb: 2}}
@@ -791,8 +791,8 @@ export const Connector = React.memo(({
                     ariaLabelLeft="go to launched deepcase"
                     ariaLabelRight="launched local deepcase"
                     ComponentRightIcon={BsFillPauseFill}
-                    // onClickLeft={() => setInitLocal(InitializingState.launched)} 
-                    // onClickRight={() => setInitLocal(InitializingState.notInit)} 
+                    // onClickLeft={() => setInitLocal && setInitLocal(InitializingState.launched)} 
+                    // onClickRight={() => setInitLocal && setInitLocal(InitializingState.notInit)} 
                   />
                 </Box>
                 <Box 
@@ -806,7 +806,7 @@ export const Connector = React.memo(({
                   animate={controlLaunch}
                   initial='initializing'
                   variants={initArea}
-                  // onClick={() => setInitLocal(InitializingState.notInit)}
+                  // onClick={() => setInitLocal && setInitLocal(InitializingState.notInit)}
                 >
                   <ButtonTextButton 
                     text='launched'
@@ -814,14 +814,14 @@ export const Connector = React.memo(({
                     ariaLabelRight="delete local deepcase"
                     // ComponentRightIcon={IoStopOutline}
                     onClickLeft={() => {
-                      setGqlPath(defaultGqlPath);
-                      setGqlSsl(defaultGqlSsl);
-                      setPortal(false);
+                      setGqlPath && setGqlPath(defaultGqlPath);
+                      setGqlSsl && setGqlSsl(defaultGqlSsl);
+                      setPortal && setPortal(false);
                     }}
                     leftButtonId="goToDeep"
                     rightButtonId="deleteLocalDeep"
                     onClickRight={() => {
-                      setInitLocal(InitializingState.removing)
+                      setInitLocal && setInitLocal(InitializingState.removing)
                     }} 
                   />
                 </Box>
@@ -853,12 +853,12 @@ export const Connector = React.memo(({
           </Box>
           <TerminalConnect 
             initializingState={init} 
-            setInitLocal={(state)=>setInitLocal(state)}
+            setInitLocal={(state)=>setInitLocal && setInitLocal(state)}
             key={21121}
             serverUrl={defaultServerUrl}
-            setGqlPath={(path) => setGqlPath(path)}
-            setGqlSsl={(ssl) => setGqlSsl(ssl)}
-            setPortal={(state) => setPortal(state)}
+            setGqlPath={(path) => setGqlPath && setGqlPath(path)}
+            setGqlSsl={(ssl) => setGqlSsl && setGqlSsl(ssl)}
+            setPortal={(state) => setPortal && setPortal(state)}
             defaultGqlPath={defaultGqlPath}
             defaultGqlSsl={defaultGqlSsl}
           />
diff --git a/imports/cyto-handler.tsx b/imports/cyto-handler.tsx
index 124686d7..35de306e 100644
--- a/imports/cyto-handler.tsx
+++ b/imports/cyto-handler.tsx
@@ -7,6 +7,7 @@ import { evalClientHandler, r } from './client-handler';
 import { useDebounceCallback } from '@react-hook/debounce';
 import { useCytoHandlersSwitch, useInsertingCytoStore } from './hooks';
 import { useCytoHandlersRules } from './cyto/hooks';
+import { Id } from '@deep-foundation/deeplinks/imports/minilinks';
 const MonacoEditor = dynamic(() => import('@monaco-editor/react').then(m => m.default), { ssr: false });
 
 export interface CytoHandlerRendererProps {
@@ -16,17 +17,17 @@ export interface CytoHandlerRendererProps {
 };
 
 export interface CytoHandlerProps extends Partial<CytoHandlerRendererProps> {
-  linkId: number;
-  handlerId?: number;
-  onChange?: (id: number, handled?: {
-    handlerId?: number;
+  linkId: Id;
+  handlerId?: Id;
+  onChange?: (id: Id, handled?: {
+    handlerId?: Id;
     error?: any;
     elements?: any[];
     stylesheets?: any[];
   }) => void;
   elementsById: { [key: string]: any };
   cy?: any;
-  HandleCyto?: number;
+  HandleCyto?: Id;
 }
 
 export function useCytoHandlers() {
@@ -61,9 +62,10 @@ export function useCytoHandlersApply(cyh, elements, stylesheets, iterator) {
     for (let key in cyh?.cytoHandlersRef?.current) {
       const el = cyh?.cytoHandlersRef?.current[key];
       const cyHandle = deep.minilinks?.byType[HandleCyto]?.find(l => l.from_id === deep.minilinks.byId?.[key]?.type_id);
-      if (el && chr[cyHandle?.id]) {
+      if (el && !!el?.elements?.length && cyHandle && chr[cyHandle?.id]) {
         cyh.drawedCytoHandlers.current[key] = el;
-        addElements.push(...el.elements || []);
+        // @ts-ignore
+        addElements.push(...(el.elements || []));
         stylesheetsByHandler[el?.handlerId] = el.stylesheets || [];
       }
     }
@@ -80,13 +82,13 @@ export const CytoHandlers = React.memo(function CytoHandlers({
   elementsById,
   cy,
 }: {
-  onChange: (id: number, result: any) => void;
-  handled: { [key: string]: number };
+  onChange: (id: Id, result: any) => void;
+  handled: { [key: string]: Id };
   elementsById: { [key: string]: any };
   cy?: any;
 }) {
   const { data: HandleCyto } = useDeepId('@deep-foundation/handle-cyto', 'HandleCyto');
-  const arr = [];
+  const arr: any[] = [];
   for (let key in handled) {
     arr.push(<CytoHandler
       key={+key}
@@ -145,15 +147,15 @@ export const CytoHandler = React.memo(function CytoHandler({
     });
 
     return () => {
-      onChange(linkId);
+      onChange && onChange(linkId);
     };
   }, [file?.value?.value]);
 
   try {
     const r = Component ? Component({ link: ml.byId[linkId], elementsById, cy, ...props }) : {};
-    onChange(linkId, { ...r, handlerId });
+    onChange && onChange(linkId, { ...r, handlerId });
   } catch(error) {
-    onChange(linkId, { error, handlerId })
+    onChange && onChange(linkId, { error, handlerId })
   }
 
   return <></>;
diff --git a/imports/cyto-message-textarea.tsx b/imports/cyto-message-textarea.tsx
index fe983c76..2d95225a 100644
--- a/imports/cyto-message-textarea.tsx
+++ b/imports/cyto-message-textarea.tsx
@@ -23,7 +23,7 @@ export const MessageTextArea = React.memo(() => {
   return (<Popover 
     isLazy
     placement='right-start'
-    initialFocusRef={initialFocusRef}
+    initialFocusRef={initialFocusRef as any}
     colorScheme={colorGrayToWhite}
     // styleConfig={{borderColor: 'none'}}
   >
@@ -46,7 +46,7 @@ export const MessageTextArea = React.memo(() => {
     <PopoverContent color={white}>
       <PopoverBody p={0} color={white}>
         <Textarea
-          ref={initialFocusRef}
+          ref={initialFocusRef as any}
           colorScheme={colorWhiteToGray}
           value={value}
           onChange={handleInputChange}
diff --git a/imports/cyto-react-links-card.tsx b/imports/cyto-react-links-card.tsx
index ec5751f0..181a729d 100644
--- a/imports/cyto-react-links-card.tsx
+++ b/imports/cyto-react-links-card.tsx
@@ -6,22 +6,23 @@ import { BsCheck2, BsDoorClosed, BsGrid3X2Gap, BsListUl, BsSearch } from 'react-
 import { TbPackages } from 'react-icons/tb';
 import { DotsLoader } from './dot-loader';
 import { IPackageProps, PackagesBlock } from './cyto-react-links-packages';
+import { Id } from '@deep-foundation/deeplinks/imports/minilinks';
 
 interface IGridPanel {
-  id?: number;
+  id: Id;
   src?: string;
   alt?: string;
 }
 
 interface IListPanel {
-  id?: number;
-  src?: string;
+  id: Id;
+  src: string;
   linkName?: string;
   containerName?: string;
 }
 
 export interface ITypeIcon {
-  src: string | number;
+  src: Id;
   borderColor?: any;
   borderWidth?: any;
   boxSize?: string;
@@ -88,7 +89,7 @@ export const TypeIcon = React.memo(({
       display='flex' 
       justifyContent='center' 
       alignItems='center'
-      fontSize={typeof(src) === 'string' ? 'sm' : size > 2 ? 'xxs' : 'xs'}
+      fontSize={typeof(src) === 'string' ? 'sm' : size && size > 2 ? 'xxs' : 'xs'}
       {...props}
     >
       {src}
@@ -108,8 +109,8 @@ export const GridPanel = React.memo(({
   borderColor?: string;
   borderColorSelected?: string;
   data: IGridPanel[];
-  selectedLink: number;
-  onSelectLink?: (linkId: number) => any;
+  selectedLink: Id;
+  onSelectLink?: (linkId: Id) => any;
   gridTemplateColumns?: string;
   columnGap?: number;
   rowGap?: number;
@@ -137,7 +138,7 @@ export const GridPanel = React.memo(({
           borderColor: 'primary'
         }}
         onClick={() => { onSelectLink && onSelectLink(d.id); }}
-        src={d.src}
+        src={d.src || ''}
       />))}
     </Box>
   )
@@ -153,13 +154,13 @@ const CytoListItem = React.memo(({
   onSelectLink,
   scrollRef,
 }:{
-  id?: number;
-  src?: string;
+  id: Id;
+  src: string;
   linkName?: string;
   containerName?: string;
   borderColor?: string;
-  selectedLink: number;
-  onSelectLink?: (linkId: number) => any;
+  selectedLink: Id;
+  onSelectLink?: (linkId: Id) => any;
   scrollRef?: any;
 }) => {
 
@@ -195,8 +196,8 @@ const CytoListItem = React.memo(({
       >
         <TypeIcon borderColor={borderColor} src={src} mr={2} ml={2} />
         <Flex direction='column' align='flex-start'>
-          <Text fontSize='xs'>{linkName}</Text>
-          <Text fontSize='xs'>{containerName}</Text>
+          {!!linkName && <Text fontSize='xs'>{linkName}</Text>}
+          {!!containerName && <Text fontSize='xs'>{containerName}</Text>}
         </Flex>
       </Box>
     </Box>
@@ -211,8 +212,8 @@ const ListPanel = React.memo(({
 }: {
   borderColor?: string;
   data: IListPanel[];
-  onSelectLink?: (linkId: number) => any;
-  selectedLink: number;
+  onSelectLink?: (linkId: Id) => any;
+  selectedLink: Id;
 }) => {
   const scrollRef = useRef(null);
 
@@ -244,20 +245,20 @@ export const CytoReactLinksCard = React.memo(({
   selectedLinkId = 0,
 }: {
   elements: {
-    id: number;
-    src?: string;
+    id: Id;
+    src: string;
     linkName: string;
     containerName: string;
   }[];
   packages?: IPackageProps[];
-  onSubmit?: (id: number) => any;
+  onSubmit?: (id: Id) => any;
   onClose?: () => any;
   loading?: boolean;
   noResults?: boolean;
   search?: any;
   onSearch?: any;
   fillSize?: boolean;
-  selectedLinkId?: number;
+  selectedLinkId?: Id;
 }) => {
   const [switchLayout, setSwitchLayout] = useState('grid');
   // const [switchLayout, setSwitchLayout] = useState('packages');
@@ -265,8 +266,8 @@ export const CytoReactLinksCard = React.memo(({
   const inputRef = useRef(null);
 
   useEffect(() => {
-    inputRef.current.focus();
-  })
+    inputRef?.current && inputRef?.current?.focus();
+  });
 
   const selectLink = useCallback((linkId) => {
     setSelectedLink((prevLinkId) => prevLinkId == linkId ? 0 : linkId);
diff --git a/imports/cyto-react-links-packages.tsx b/imports/cyto-react-links-packages.tsx
index 893dc195..59452c5f 100644
--- a/imports/cyto-react-links-packages.tsx
+++ b/imports/cyto-react-links-packages.tsx
@@ -6,6 +6,7 @@ import { DotsLoader } from './dot-loader';
 import { TbArrowRotaryFirstRight, TbBookDownload, TbAtom } from 'react-icons/tb';
 import { GridPanel } from './cyto-react-links-card';
 import _ from 'lodash';
+import { Id } from '@deep-foundation/deeplinks/imports/minilinks';
 
 
 const iconVariants = {
@@ -26,13 +27,13 @@ const iconVariants = {
   }
 };
 export interface IPackage {
-  id?: number;
+  id?: Id;
   src?: string;
   containerName?: string;
   version?: string;
   isActive?: boolean; 
   typeElements?: {
-    id: number;
+    id: Id;
     src?: any;
   }[];
 }
@@ -114,7 +115,7 @@ const PackageItemAccordion = React.memo(({
   isActive,
   typeElements = arrElem,
 }:IPackage) => {
-  const [expanded, setExpanded] = useState<false | number>(false);
+  const [expanded, setExpanded] = useState<false | Id>(false);
   const [selectedLink, setSelectedLink] = useState(id);
   const isOpen = id === expanded;
 
diff --git a/imports/cyto/editor-preview.tsx b/imports/cyto/editor-preview.tsx
index 3754245d..ced4a98d 100644
--- a/imports/cyto/editor-preview.tsx
+++ b/imports/cyto/editor-preview.tsx
@@ -1,27 +1,22 @@
-import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, Button, Box, HStack, Flex, IconButton } from '@chakra-ui/react';
-import { useDeep, useDeepQuery, useDeepSubscription } from '@deep-foundation/deeplinks/imports/client';
-import { Link, MinilinksInstance, MinilinksResult, useMinilinksApply, useMinilinksFilter } from '@deep-foundation/deeplinks/imports/minilinks';
-import { ClientHandlerRenderer, evalClientHandler } from '../client-handler';
+import { Box } from '@chakra-ui/react';
+import { useDeep, useDeepSubscription } from '@deep-foundation/deeplinks/imports/client';
+import { Id, useMinilinksFilter } from '@deep-foundation/deeplinks/imports/minilinks';
 import { useLocalStore } from '@deep-foundation/store/local';
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { useCytoEditor } from './hooks';
-import { CytoReactLinkAvatar } from '../cyto-react-avatar';
+import { useDebounceCallback } from '@react-hook/debounce';
+import json5 from 'json5';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { ClientHandlerRenderer, evalClientHandler } from '../client-handler';
 import { EditorComponentView } from '../editor/editor-component-view';
 import { EditorGrid } from '../editor/editor-grid';
-import { EditorHandler } from '../editor/editor-handler';
-import { EditorHandlers } from '../editor/editor-handlers';
 import { EditorSwitcher } from '../editor/editor-switcher';
-import { CloseButton, EditorTabs } from '../editor/editor-tabs';
 import { EditorTextArea } from '../editor/editor-textarea';
-import json5 from 'json5';
-import { useDebounceCallback } from '@react-hook/debounce';
 import { CatchErrors } from '../react-errors';
 import { CytoEditorHandlers } from './handlers';
-import { VscClearAll } from 'react-icons/vsc';
+import { useCytoEditor } from './hooks';
 
 // global._callClientHandler = callClientHandler;
 export interface EditorTab {
-  id: number;
+  id: Id;
   saved: boolean;
   active?: boolean;
   loading?: boolean;
diff --git a/imports/cyto/editor.tsx b/imports/cyto/editor.tsx
index e9fe71c5..a472e2e6 100644
--- a/imports/cyto/editor.tsx
+++ b/imports/cyto/editor.tsx
@@ -25,7 +25,7 @@ import {
   Portal,
 } from '@chakra-ui/react';
 import { useDeep, useDeepSubscription } from '@deep-foundation/deeplinks/imports/client';
-import { Link, useMinilinksFilter } from '@deep-foundation/deeplinks/imports/minilinks';
+import { Id, Link, useMinilinksFilter } from '@deep-foundation/deeplinks/imports/minilinks';
 import { useLocalStore } from '@deep-foundation/store/local';
 import { useDebounceCallback } from '@react-hook/debounce';
 import json5 from 'json5';
@@ -52,7 +52,7 @@ const MonacoEditor = dynamic(() => import('@monaco-editor/react').then(m => m.de
 
 // global._callClientHandler = callClientHandler;
 export interface EditorTab {
-  id: number;
+  id: Id;
   saved?: boolean;
   active?: boolean;
   loading?: boolean;
@@ -80,7 +80,7 @@ export function useEditorValueSaver(tab) {
 
 export function useEditorTabs() {
   const [tabs, setTabs] = useLocalStore<EditorTab[]>('editor-tabs', []);
-  const [tab, setTab] = useLocalStore<number>('editor-tab', 0);
+  const [tab, setTab] = useLocalStore<Id>('editor-tab', 0);
   const tabsRef = useRef<any>();
   tabsRef.current = tabs;
   return {
@@ -111,11 +111,11 @@ export function useEditorTabs() {
 export function useFindClientHandlerByCode({
   codeLinkId,
 }: {
-  codeLinkId: number;
+  codeLinkId: Id;
 }) {
   const deep = useDeep();
   const [hid, setHid] = useState<any>();
-  const prevCodeLinkId = useRef<number>();
+  const prevCodeLinkId = useRef<Id>();
   useEffect(() => { (async () => {
     if (!codeLinkId || codeLinkId === prevCodeLinkId.current) return;
     const { data: handlers } = await deep.select({
@@ -157,13 +157,13 @@ export const Item = React.memo(function Item({
   addTab,
   isActive = false,
 }: {
-  link: Link<number>;
+  link: Link<Id>;
   openable?: boolean;
   deletable?: boolean;
   children?: any;
   portalRef?: any;
-  closeTab?: (id: number) => void;
-  activeTab?: (id: number) => void;
+  closeTab?: (id: Id) => void;
+  activeTab?: (id: Id) => void;
   addTab?: (tab: any) => void;
   isActive?: boolean;
 }) {
@@ -239,7 +239,7 @@ export const Item = React.memo(function Item({
         </>}
         {/* <Box>{currentSymbol} | {typeSymbol}</Box> */}&nbsp;
         <Editable
-          selectAllOnFocus defaultValue={deep.nameLocal(link.id) == `${link.id}` ? '' : deep.nameLocal(link.id)}
+          selectAllOnFocus defaultValue={`${deep.nameLocal(link.id) == `${link.id}` ? '' : deep.nameLocal(link.id)}`}
           placeholder={link.type_id === deep.idLocal('@deep-foundation/core', 'Package') ? link?.value?.value : link.id} display="inline"
           onSubmit={async (value) => {
             if (deep.minilinks.byId[link.id].inByType[deep.idLocal('@deep-foundation/core', 'Contain')]?.[0]?.value) {
diff --git a/imports/cyto/elements.tsx b/imports/cyto/elements.tsx
index d01344b0..6d9c2687 100644
--- a/imports/cyto/elements.tsx
+++ b/imports/cyto/elements.tsx
@@ -64,10 +64,12 @@ export function useCytoElements(ml, _links, cy, spaceId, cyh) {
       (link?.type_id === deep.idLocal('@deep-foundation/core', 'Contain') && link?.to?.type_id === OpenedHandler && link?.to?.from?.from_id === spaceId && link?.to?.from?.type_id === Opened && link._applies.includes('space'))
     );
 
+    let _id = `${link.id}`;
     let _value = '';
     let _name = '';
     let _type = '';
     let _symbol = '';
+    if (_id.length > 20) _id = _id.slice(0, 11)+'...'+_id.slice(-9, _id.length);
     if (/*labelsConfig?.values && */typeof link?.value?.value !== 'undefined') {
       let json;
       try { json = json5.stringify(link?.value.value); } catch(error) {}
@@ -103,7 +105,7 @@ export function useCytoElements(ml, _links, cy, spaceId, cyh) {
       data: {
         id: `${link.id}`,
         label: (
-          `${link.id}`
+          `${_id}`
           +(_type ? '\n'+`${_type}` : '')
           +(_name ? '\n'+`${_name}` : '')
           +(isValidValue(_value) ? '\n'+`${_value}` : '')
diff --git a/imports/cyto/graph.tsx b/imports/cyto/graph.tsx
index 9d957abc..2e966d28 100644
--- a/imports/cyto/graph.tsx
+++ b/imports/cyto/graph.tsx
@@ -99,7 +99,7 @@ export default function CytoGraph({
   useCytoViewport: _useCytoViewport = useState,
   useSpaceId: _useSpaceId = useSpaceId,
 }: CytoGraphProps){
-  console.log('https://github.com/deep-foundation/deepcase-app/issues/236', 'CytoGraph', 'links', links);
+  // console.log('https://github.com/deep-foundation/deepcase-app/issues/236', 'CytoGraph', 'links', links);
   const deep = useDeep();
   const __cytoViewportRef = useRefstarter<{ pan: { x: number; y: number; }; zoom: number }>();
   const cytoViewportRef = _cytoViewportRef || __cytoViewportRef;
diff --git a/imports/cyto/handlers.tsx b/imports/cyto/handlers.tsx
index a37ec64e..bedb449c 100644
--- a/imports/cyto/handlers.tsx
+++ b/imports/cyto/handlers.tsx
@@ -1,15 +1,11 @@
-import { useSubscription } from '@apollo/client';
 import { ChevronDownIcon } from '@chakra-ui/icons';
-import { Accordion, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, Box, Flex, SimpleGrid, Text, Button, Spacer, useColorMode, InputGroup, Input, InputRightElement, Tag, TagCloseButton, TagLabel, HStack, VStack, Select, Menu, MenuButton, MenuItem, MenuList, IconButton, InputLeftElement } from '@chakra-ui/react';
-import { useDeep, useDeepQuery, useDeepSubscription } from '@deep-foundation/deeplinks/imports/client';
-import { generateQuery, generateQueryData } from '@deep-foundation/deeplinks/imports/gql';
-import { Link, useMinilinksApply, useMinilinksQuery, useMinilinksSubscription } from '@deep-foundation/deeplinks/imports/minilinks';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { CytoReactLinkAvatar } from '../cyto-react-avatar';
-import { EditorHandler } from '../editor/editor-handler';
+import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Button, Flex, IconButton, Input, InputGroup, InputRightElement, Menu, MenuButton, MenuItem, MenuList, Spacer, Tag, TagCloseButton, TagLabel, Text, useColorMode } from '@chakra-ui/react';
+import { useDeep, useDeepSubscription } from '@deep-foundation/deeplinks/imports/client';
+import { Id, Link } from '@deep-foundation/deeplinks/imports/minilinks';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { VscCheck, VscDiffAdded } from 'react-icons/vsc';
 import { useChackraColor } from '../get-color';
 import { useContainer, useSpaceId } from '../hooks';
-import { VscCheck, VscDiffAdded } from 'react-icons/vsc';
 import { FinderPopover } from './hooks';
 
 export const CytoEditorHandlersSupportHandle = React.memo(function CytoEditorHandlersSupport({
@@ -18,9 +14,9 @@ export const CytoEditorHandlersSupportHandle = React.memo(function CytoEditorHan
   handle,
   portalRef,
 }: {
-  support: Link<number>;
-  handler: Link<number>;
-  handle: Link<number>;
+  support: Link<Id>;
+  handler: Link<Id>;
+  handle: Link<Id>;
   portalRef?: any;
 }) {
   const deep = useDeep();
@@ -109,7 +105,7 @@ export const CytoEditorHandlersSupportHandle = React.memo(function CytoEditorHan
 
   const Form = useCallback((
     isLink || isClient
-    ? ({ value, onInsert }: { value: string, onInsert: (id?: number) => void }) => {
+    ? ({ value, onInsert }: { value: string, onInsert: (id?: Id) => void }) => {
       return <InputGroup
         position='absolute' w='100%' 
         size='md' h='100%' left={0} top={0} borderWidth='1px' borderRadius='lg' bgColor='handlersInput'
@@ -165,7 +161,7 @@ export const CytoEditorHandlersSupportHandle = React.memo(function CytoEditorHan
       </InputGroup>;
     }
     : isPort
-    ? ({ value, onInsert }: { value: string, onInsert: (id?: number) => void }) => {
+    ? ({ value, onInsert }: { value: string, onInsert: (id?: Id) => void }) => {
       return <InputGroup
         position='absolute' w='100%' h='100%' left={0} top={0} borderWidth='1px' borderRadius='lg' bgColor='handlersInput'
         onMouseMove={() => {
@@ -197,7 +193,7 @@ export const CytoEditorHandlersSupportHandle = React.memo(function CytoEditorHan
         </InputRightElement> : null}
       </InputGroup>;
     }
-    : ({ value, onInsert }: { value: string, onInsert: (id?: number) => void }) => {
+    : ({ value, onInsert }: { value: string, onInsert: (id?: Id) => void }) => {
       return <InputGroup
         position='absolute' w='100%' h='100%' left={0} top={0} borderWidth='1px' borderRadius='lg' bgColor='handlersInput'
         onMouseMove={() => {
@@ -293,9 +289,9 @@ export const CytoEditorHandlersSupport = React.memo(function CytoEditorHandlersS
   handleredableIds,
   portalRef,
 }: {
-  support: Link<number>;
-  linkId: number;
-  handleredableIds: number[];
+  support: Link<Id>;
+  linkId: Id;
+  handleredableIds: Id[];
   portalRef?: any;
 }) {
   const deep = useDeep();
@@ -377,8 +373,8 @@ export const CytoEditorHandlers = React.memo(function CytoEditorHandlers({
   linkId,
   handleredableIds,
 }: {
-  linkId: number;
-  handleredableIds: number[];
+  linkId: Id;
+  handleredableIds: Id[];
 }) {
   const deep = useDeep();
 
diff --git a/imports/cyto/hooks.tsx b/imports/cyto/hooks.tsx
index 4463205c..6b676fb5 100644
--- a/imports/cyto/hooks.tsx
+++ b/imports/cyto/hooks.tsx
@@ -1,6 +1,6 @@
 import { Alert, AlertIcon, Box, Flex, HStack, IconButton, Popover, PopoverContent, PopoverTrigger, Portal, SlideFade, Spacer, Spinner, useDisclosure, useToast } from "@chakra-ui/react";
 import { useDeep, useDeepId, useDeepQuery, useDeepSubscription } from "@deep-foundation/deeplinks/imports/client";
-import { Link, useMinilinksFilter, useMinilinksHandle, useMinilinksQuery } from "@deep-foundation/deeplinks/imports/minilinks";
+import { Id, Link, useMinilinksFilter, useMinilinksHandle, useMinilinksQuery } from "@deep-foundation/deeplinks/imports/minilinks";
 import { useDebounceCallback } from "@react-hook/debounce";
 import React, { useState, useMemo, useCallback, useEffect, useRef } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
@@ -22,14 +22,14 @@ import { useOpenedMethods } from "./opened";
 
 export interface IInsertedLink {
   position: { x: number; y: number; };
-  from: number; to: number;
-  alterResolve?: (link: Link<number>) => void;
+  from: Id; to: Id;
+  alterResolve?: (link: Link<Id>) => void;
   props?: any;
 };
 
 export interface IUpdatedLink {
   position: { x: number; y: number; };
-  from: number; to: number;
+  from: Id; to: Id;
 };
 
 const delay = (time) => new Promise(res => setTimeout(res, time));
@@ -56,7 +56,7 @@ export const FinderPopover = React.memo(function FinderPopover({
     query = undefined,
     search = undefined,
   }: {
-    link: Link<number>;
+    link: Link<Id>;
     onSubmit: (link) => void;
     onChange?: (link) => void;
     onOpen?: () => void;
@@ -69,7 +69,7 @@ export const FinderPopover = React.memo(function FinderPopover({
     search?: string;
   }) {
   const deep = useDeep();
-  const [selectedLink, setSelectedLink] = useState<Link<number>>();
+  const [selectedLink, setSelectedLink] = useState<Link<Id>>();
   const { onOpen: _onOpen, onClose: _onClose, isOpen: _isOpen } = useDisclosure();
   const { data: Finder } = useDeepId('@deep-foundation/finder', 'Finder');
   return <Popover
@@ -123,7 +123,7 @@ export function CytoReactLinksCardInsertNode({
   const [spaceId, setSpaceId] = useSpaceId();
   const { data: Finder } = useDeepId('@deep-foundation/finder', 'Finder');
 
-  const [selectedLink, setSelectedLink] = useState<Link<number>>();
+  const [selectedLink, setSelectedLink] = useState<Link<Id>>();
 
   return <>
     {!!Finder && <ClientHandler
@@ -312,7 +312,7 @@ export function useLinkInserting(elements = [], reactElements = [], focus, cyRef
     },
     insertingCytoRef,
     insertingCyto,
-    startUpdatingLink: (id: number) => {
+    startUpdatingLink: (id: Id) => {
       const link = ml.byId[id];
       const linkName = link?.inByType?.[deep.idLocal('@deep-foundation/core', 'Contain')]?.[0]?.value?.value || link?.id;
       const Type = link.type;
@@ -335,7 +335,7 @@ export function useLinkInserting(elements = [], reactElements = [], focus, cyRef
       setUpdatingLink(undefined);
       setUpdatingCyto({ id, toast: t });
     },
-    startInsertingOfType: (id: number, From: number, To: number) => {
+    startInsertingOfType: (id: Id, From: Id, To: Id) => {
       const link = ml.byId[id];
       const isNode = !From && !To;
       const isPossibleNode = isNode || (From === To && From === deep.idLocal('@deep-foundation/core', 'Any'));
@@ -529,7 +529,7 @@ export function useLinkReactElements(elements = [], reactElements = [], cy, ml,
     }
   }, [reactElements, Opened]);
 
-  const toggleLinkReactElement = async (id: number) => {
+  const toggleLinkReactElement = async (id: Id) => {
     const cy = cyRef.current;
     // const isEnabling = !linkReactElements[id];
     // if (isEnabling) {
@@ -550,7 +550,7 @@ export function useLinkReactElements(elements = [], reactElements = [], cy, ml,
     //   //   'border-width': 0,
     //   // });
     // }
-    if (await isOpened(id)) {
+    if (isOpened(id)) {
       await close(id);
     } else {
       const { data: handler } = await deep.select({
@@ -570,10 +570,10 @@ export function useLinkReactElements(elements = [], reactElements = [], cy, ml,
   };
 
   const AnyLinkComponent = useMemo(() => {
-    return function AnyLinkComponent({ id }: { id: number }) {
-      const [linkId, setLinkId] = useState(id);
+    return function AnyLinkComponent({ id }: { id: Id }) {
+      const [linkId, setLinkId] = useState<Id>(id);
       const deep = useDeep();
-      const [handlerId, setHandlerId] = useState();
+      const [handlerId, setHandlerId] = useState<Id>();
       const { onOpen, onClose, isOpen } = useDisclosure();
       const [search, setSearch] = useState('');
       const [spaceId] = useSpaceId();
@@ -803,7 +803,7 @@ export function useCyInitializer({
       //   // return element object to be passed to cy.add() for edge
       //   return {};
       // },
-      hoverDelay: 150, // time spent hovering over a target node before it is considered selected
+      hoverDelay: 0, // time spent hovering over a target node before it is considered selected
       snap: true, // when enabled, the edge can be drawn by just moving close to a target node (can be confusing on compound graphs)
       snapThreshold: 0, // the target node must be less than or equal to this many pixels away from the cursor/finger
       snapFrequency: 15, // the number of times per second (Hz) that snap checks done (lower is less expensive)
diff --git a/imports/cyto/menu.tsx b/imports/cyto/menu.tsx
index 74cf8c98..d15385cc 100644
--- a/imports/cyto/menu.tsx
+++ b/imports/cyto/menu.tsx
@@ -4,7 +4,7 @@ import { useDeep, useDeepId, useDeepSubscription } from "@deep-foundation/deepli
 import copy from "copy-to-clipboard";
 import { AnimatePresence, motion, useAnimation, useCycle } from 'framer-motion';
 import React, { useEffect, useState, ChangeEvent } from "react";
-import { HiMenuAlt2, HiCode, HiOutlineEyeOff } from 'react-icons/hi';
+import { HiMenuAlt2, HiCode, HiOutlineEyeOff, HiDatabase, HiDesktopComputer, HiGlobeAlt } from 'react-icons/hi';
 import { SlClose } from 'react-icons/sl';
 import { Appearance } from "../component-appearance";
 import { useAutoFocusOnInsert, useBreadcrumbs, useContainer, useLayout, useMediaQuery, useReserved, useShowExtra, useShowFocus, useShowTypes, useSpaceId, useTraveler, useLayoutAnimation, useAsyncState, useCytoHandlersSwitch, useShowOpened } from "../hooks";
@@ -12,6 +12,7 @@ import { useCytoEditor, useCytoHandlersRules } from "./hooks";
 import { variants, buttonVariant, iconVariants, sideVariants, itemVariants } from "./menu-animation-variants";
 import { TbArrowRotaryFirstRight } from "react-icons/tb";
 import { ClientHandler } from "../client-handler";
+import { Id } from "@deep-foundation/deeplinks/imports/minilinks";
 
 const ListLayout = React.memo(({ 
   currentLayout = 'deep-d3-force',
@@ -223,198 +224,221 @@ export const CytoMenu = React.memo(function CytoMenu({
     from_id: spaceId,
   });
 
-  return (<Box
-    left={0}
-    pos='fixed'>
-    <Button
-      as={motion.button}
-      variants={buttonVariant}
-      animate={control}
-      colorScheme='blue'
-      onClick={() => setTogglePackager(true)}
-      pos='absolute'
-      left={4} top={4}><HiMenuAlt2 /></Button>
-    <Button
-      as={motion.button}
-      variants={buttonVariant}
-      animate={control}
-      colorScheme='blue'
-      onClick={() => setCytoEditor(true)}
-      pos='absolute'
-      left={20} top={4}><HiCode /></Button>
-    <Button
-      as={motion.button}
-      variants={buttonVariant}
-      animate={control}
-      disabled={!focuses?.length}
-      colorScheme={focuses?.length ? 'blue' : 'gray'}
-      onClick={clearFocuses}
-      pos='absolute'
-      left={36} top={4}><HiOutlineEyeOff /></Button>
-    <Appearance
-      toggle={togglePackager}
-      variantsAnimation={variants}
-      styleProps={{overflow: 'uset'}}
-    >
-      <>
-        <Box
-          pt='0.2rem'
-          w='max-content'
-          bg='backgroundModal'
-          borderBottomLeftRadius='0.5rem'
-          borderBottomRightRadius='0.5rem'
-          sx={{
-            borderWidth: 'thin',
-            borderColor: 'borderColor',
-          }}
-        >
-          <VStack spacing='1rem' m='1rem' align={'flex-start'}>
-            <HStack>
-              <IconButton
-                aria-label='menu close'
-                variant='ghost'
-                colorScheme='current'
-                isRound
-                icon={<SlClose />}
-                onClick={() => setTogglePackager(false)}
-              />
-              <ButtonGroup size='sm' isAttached variant='outline' color='text'>
-                <Button disabled borderColor='gray.400' background='buttonBackgroundModal'>auth</Button>
-                <Button borderColor='gray.400' background='buttonBackgroundModal'>{deep.linkId}</Button>
-                <IconButton aria-label='close menu' icon={<CloseIcon />} onClick={async () => {
-                  const guest = await deep.guest();
-                  setSpaceId(guest.linkId);
-                  setContainer(guest.linkId);
-                }} borderColor='gray.400' background='buttonBackgroundModal'/>
-              </ButtonGroup>
-              <ButtonGroup size='sm' isAttached variant='outline' color='text'>
-                <Button disabled borderColor='gray.400' background='buttonBackgroundModal'>space</Button>
-                <Button borderColor='gray.400' background='buttonBackgroundModal'>{spaceId}</Button>
-                <IconButton aria-label='Quit to user space' icon={<CloseIcon />} onClick={() => {
-                  setSpaceId(deep.linkId);
-                  setContainer(deep.linkId);
-                }} borderColor='gray.400' background='buttonBackgroundModal' />
-              </ButtonGroup>
-              <ButtonGroup size='sm' isAttached variant='outline' color='text'>
-                <Button disabled borderColor='gray.400' background='buttonBackgroundModal'>container</Button>
-                <Button borderColor='gray.400' background='buttonBackgroundModal'>{container}</Button>
-                <IconButton aria-label='Quit to user space' icon={<CloseIcon />} onClick={() => {
-                  setContainer(deep.linkId);
-                }} borderColor='gray.400' background='buttonBackgroundModal'/>
-              </ButtonGroup>
-              <ButtonGroup size='sm' isAttached variant='outline' color='text'>
-                <Button onClick={() => {
-                  copy(deep.token);
-                }} borderColor='gray.400' background='buttonBackgroundModal'>copy token</Button>
-                <Button colorScheme={pasteError ? 'red' : valid ? 'blue' : undefined} onClick={async () => {
-                  if (valid) await deep.login({ token: valid });
-                  else {
-                    setPasteError(false);
-                    const token: string = await navigator?.clipboard?.readText();
-                    const { linkId, error } = await deep.jwt({ token });
-                    if (error && !linkId) setPasteError(true);
-                    else if (linkId) setValid(token);
-                  }
-                }} borderColor='gray.400' background='buttonBackgroundModal'>{valid ? 'login token' : 'paste token'}</Button>
-              </ButtonGroup>
-              <ButtonGroup size='sm' isAttached variant='outline' color='text'>
-                <Button borderColor='gray.400' background='buttonBackgroundModal' as='a' href={`http${gqlSsl ? 's' : ''}://${gqlPath}`} target="_blank">gql</Button>
-              </ButtonGroup>
-              <ButtonGroup size='sm' isAttached variant='outline' color='text'>
-                <Button borderColor='gray.400' background='buttonBackgroundModal' onClick={() => setCytoEditor(true)}>editor</Button>
-              </ButtonGroup>
-            </HStack>
-            <HStack spacing={5}>
-              <FormControl display='flex' alignItems='center'>
-                <FormLabel color='text' htmlFor='autofocus-on-insert' mb='0' fontSize='sm' mr='0.25rem'>
-                  autofocus
-                </FormLabel>
-                <DeepSwitch id='autofocus-on-insert' isChecked={autoFocus} onChange={() => setAutoFocus(!autoFocus)} />
-              </FormControl>
-              <FormControl display='flex' alignItems='center'>
-                <FormLabel color='text' htmlFor='show-focus' mb='0' fontSize='sm' mr='0.25rem'>
-                  focus
-                </FormLabel>
-                <DeepSwitch id='show-focus' isChecked={focus} onChange={() => setFocus(!focus)} />
-              </FormControl>
-              <FormControl display='flex' alignItems='center'>
-                <FormLabel color='text' htmlFor='show-opened' mb='0' fontSize='sm' mr='0.25rem'>
-                  opened
-                </FormLabel>
-                <DeepSwitch id='show-opened' isChecked={opened} onChange={() => setOpened(!opened)} />
-              </FormControl>
-              <FormControl display='flex' alignItems='center'>
-                <FormLabel color='text' htmlFor='show-extra-switch' mb='0' fontSize='sm' mr='0.25rem'>
-                  debug
-                </FormLabel>
-                <DeepSwitch id='show-extra-switch' isChecked={extra} onChange={() => setExtra(!extra)} />
-              </FormControl>
-              <FormControl display='flex' alignItems='center'>
-                <FormLabel color='text' htmlFor='show-types-switch' mb='0' fontSize='sm' mr='0.25rem'>
-                  types
-                </FormLabel>
-                <DeepSwitch id='show-types-switch' isChecked={showTypes} onChange={() => setShowTypes(!showTypes)} />
-              </FormControl>
-              <FormControl display='flex' alignItems='center'>
-                <FormLabel color='text' htmlFor='show-traveler-switch' mb='0' fontSize='sm' mr='0.25rem'>
-                  traveler
-                </FormLabel>
-                <DeepSwitch id='show-traveler-switch' isChecked={traveler} onChange={() => setTraveler(!traveler)} />
-              </FormControl>
-              <FormControl display='flex' alignItems='center'>
-                <FormLabel color='text' htmlFor='breadcrumbs-switch' mb='0' fontSize='sm' mr='0.25rem'>
-                  breadcrumbs
-                </FormLabel>
-                <DeepSwitch id='breadcrumbs-switch' isChecked={breadcrumbs} onChange={() => setBreadcrumbs(!breadcrumbs)} />
-              </FormControl>
-              <FormControl display='flex' alignItems='center'>
-                <FormLabel color='text' htmlFor='cytoHandlers-switch' mb='0' fontSize='sm' mr='0.25rem'>
-                  cytoHandlers
-                </FormLabel>
-                <DeepSwitch id='cytoHandlers-switch' isChecked={cytoHandlers} onChange={() => setCytoHandlers(!cytoHandlers)} />
-              </FormControl>
-              <FormControl display='flex' alignItems='center'>
-                <FormLabel htmlFor='animation-layout-switch' mb='0' fontSize='sm' mr='0.25rem'>
-                  animation
-                </FormLabel>
-                <DeepSwitch id='animation-layout-switch' isChecked={layoutAnimation} onChange={() => setLayoutAnimation(!layoutAnimation)}/>
-              </FormControl>
-              <FormControl display='flex' alignItems='center'>
-                <FormLabel mb='0' fontSize='sm' mr='0.55rem'>
-                  layout
-                </FormLabel>
-                <Box width="max-content" margin="0 auto">
-                  {/* <Select onChange={handlerChangeLayout} value={layoutName}>
-                    <option value='cola'>cola</option>
-                    <option value='deep-d3-force'>d3-force</option>
-                  </Select> */}
-                  <ListLayout
-                    currentLayout={layoutName}
-                    setCurrentLayout={handlerChangeLayout}
-                  />
-                </Box>
-              </FormControl>
-              {/* <FormControl display='flex' alignItems='center'>
-                <FormLabel htmlFor='reserved switch' mb='0' fontSize='sm' mr='0.25rem'>
-                reserved
-                </FormLabel>
-                <Switch id='reserved switch' isChecked={reserved} onChange={() => setReserved(!reserved)}/>
-              </FormControl> */}
-            </HStack>
-            <HStack>
-              <MenuSearch cyRef={cyRef} bg='buttonBackgroundModal' />
-              <ButtonGroup size='sm' isAttached variant='outline' color='text'>
-                <Button onClick={clearFocuses} borderColor='gray.400' background='buttonBackgroundModal'>clear focuses</Button>
-              </ButtonGroup>
-              <Travelers/>
-              <CytoHandlersMenu/>
-            </HStack>
-          </VStack>
-          {/* <Button bgColor='primary' color='white' size='sm' w='4rem' mt={10} mr={4} justifySelf='flex-end' rightIcon={<IoExitOutline />} onClick={openPortal}>Exit</Button> */}
-        </Box>
-      </>
-    </Appearance>
-  </Box>);
+  return (<>
+    <HStack spacing='24px' pos='fixed' top={4} left={4}>
+      <Button
+        as={motion.button}
+        variants={buttonVariant}
+        animate={control}
+        colorScheme='blue'
+        onClick={() => setTogglePackager(true)}
+      ><HiMenuAlt2 /></Button>
+      <Button
+        as={motion.button}
+        variants={buttonVariant}
+        animate={control}
+        colorScheme='blue'
+        onClick={() => setCytoEditor(true)}
+      ><HiCode /></Button>
+      <Button
+        as={motion.button}
+        variants={buttonVariant}
+        animate={control}
+        disabled={!focuses?.length}
+        colorScheme={focuses?.length ? 'blue' : 'gray'}
+        onClick={clearFocuses}
+      ><HiOutlineEyeOff /></Button>
+      {/* <Text colorScheme={'gray'}>mode</Text>
+      <ButtonGroup size='md' isAttached variant='outline'>
+        <Button
+          as={motion.button}
+          animate={control}
+          disabled={!focuses?.length}
+          colorScheme={focuses?.length ? 'blue' : 'gray'}
+          onClick={clearFocuses}
+        ><HiDatabase /></Button>
+        <Button
+          as={motion.button}
+          animate={control}
+          disabled={!focuses?.length}
+          colorScheme={focuses?.length ? 'blue' : 'gray'}
+          onClick={clearFocuses}
+        ><HiDesktopComputer /></Button>
+        <Button
+          as={motion.button}
+          animate={control}
+          disabled={!focuses?.length}
+          colorScheme={focuses?.length ? 'blue' : 'gray'}
+          onClick={clearFocuses}
+        ><HiGlobeAlt /></Button>
+      </ButtonGroup> */}
+    </HStack>
+    <div style={{ position: 'fixed', left: 0, top: 0 }}>
+      <Appearance
+        toggle={togglePackager}
+        variantsAnimation={variants}
+        styleProps={{overflow: 'uset'}}
+      >
+        <>
+          <Box
+            pt='0.2rem'
+            w='max-content'
+            bg='backgroundModal'
+            borderBottomLeftRadius='0.5rem'
+            borderBottomRightRadius='0.5rem'
+            sx={{
+              borderWidth: 'thin',
+              borderColor: 'borderColor',
+            }}
+          >
+            <VStack spacing='1rem' m='1rem' align={'flex-start'}>
+              <HStack>
+                <IconButton
+                  aria-label='menu close'
+                  variant='ghost'
+                  colorScheme='current'
+                  isRound
+                  icon={<SlClose />}
+                  onClick={() => setTogglePackager(false)}
+                />
+                <ButtonGroup size='sm' isAttached variant='outline' color='text'>
+                  <Button disabled borderColor='gray.400' background='buttonBackgroundModal'>auth</Button>
+                  <Button borderColor='gray.400' background='buttonBackgroundModal'>{deep.linkId}</Button>
+                  <IconButton aria-label='close menu' icon={<CloseIcon />} onClick={async () => {
+                    const guest = await deep.guest();
+                    setSpaceId(guest.linkId);
+                    setContainer(guest.linkId);
+                  }} borderColor='gray.400' background='buttonBackgroundModal'/>
+                </ButtonGroup>
+                <ButtonGroup size='sm' isAttached variant='outline' color='text'>
+                  <Button disabled borderColor='gray.400' background='buttonBackgroundModal'>space</Button>
+                  <Button borderColor='gray.400' background='buttonBackgroundModal'>{spaceId}</Button>
+                  <IconButton aria-label='Quit to user space' icon={<CloseIcon />} onClick={() => {
+                    setSpaceId(deep.linkId);
+                    setContainer(deep.linkId);
+                  }} borderColor='gray.400' background='buttonBackgroundModal' />
+                </ButtonGroup>
+                <ButtonGroup size='sm' isAttached variant='outline' color='text'>
+                  <Button disabled borderColor='gray.400' background='buttonBackgroundModal'>container</Button>
+                  <Button borderColor='gray.400' background='buttonBackgroundModal'>{container}</Button>
+                  <IconButton aria-label='Quit to user space' icon={<CloseIcon />} onClick={() => {
+                    setContainer(deep.linkId);
+                  }} borderColor='gray.400' background='buttonBackgroundModal'/>
+                </ButtonGroup>
+                <ButtonGroup size='sm' isAttached variant='outline' color='text'>
+                  <Button onClick={() => {
+                    copy(deep.token);
+                  }} borderColor='gray.400' background='buttonBackgroundModal'>copy token</Button>
+                  <Button colorScheme={pasteError ? 'red' : valid ? 'blue' : undefined} onClick={async () => {
+                    if (valid) await deep.login({ token: valid });
+                    else {
+                      setPasteError(false);
+                      const token: string = await navigator?.clipboard?.readText();
+                      const { linkId, error } = await deep.jwt({ token });
+                      if (error && !linkId) setPasteError(true);
+                      else if (linkId) setValid(token);
+                    }
+                  }} borderColor='gray.400' background='buttonBackgroundModal'>{valid ? 'login token' : 'paste token'}</Button>
+                </ButtonGroup>
+                <ButtonGroup size='sm' isAttached variant='outline' color='text'>
+                  <Button borderColor='gray.400' background='buttonBackgroundModal' as='a' href={`http${gqlSsl ? 's' : ''}://${gqlPath}`} target="_blank">gql</Button>
+                </ButtonGroup>
+                <ButtonGroup size='sm' isAttached variant='outline' color='text'>
+                  <Button borderColor='gray.400' background='buttonBackgroundModal' onClick={() => setCytoEditor(true)}>editor</Button>
+                </ButtonGroup>
+              </HStack>
+              <HStack spacing={5}>
+                <FormControl display='flex' alignItems='center'>
+                  <FormLabel color='text' htmlFor='autofocus-on-insert' mb='0' fontSize='sm' mr='0.25rem'>
+                    autofocus
+                  </FormLabel>
+                  <DeepSwitch id='autofocus-on-insert' isChecked={autoFocus} onChange={() => setAutoFocus(!autoFocus)} />
+                </FormControl>
+                <FormControl display='flex' alignItems='center'>
+                  <FormLabel color='text' htmlFor='show-focus' mb='0' fontSize='sm' mr='0.25rem'>
+                    focus
+                  </FormLabel>
+                  <DeepSwitch id='show-focus' isChecked={focus} onChange={() => setFocus(!focus)} />
+                </FormControl>
+                <FormControl display='flex' alignItems='center'>
+                  <FormLabel color='text' htmlFor='show-opened' mb='0' fontSize='sm' mr='0.25rem'>
+                    opened
+                  </FormLabel>
+                  <DeepSwitch id='show-opened' isChecked={opened} onChange={() => setOpened(!opened)} />
+                </FormControl>
+                <FormControl display='flex' alignItems='center'>
+                  <FormLabel color='text' htmlFor='show-extra-switch' mb='0' fontSize='sm' mr='0.25rem'>
+                    debug
+                  </FormLabel>
+                  <DeepSwitch id='show-extra-switch' isChecked={extra} onChange={() => setExtra(!extra)} />
+                </FormControl>
+                <FormControl display='flex' alignItems='center'>
+                  <FormLabel color='text' htmlFor='show-types-switch' mb='0' fontSize='sm' mr='0.25rem'>
+                    types
+                  </FormLabel>
+                  <DeepSwitch id='show-types-switch' isChecked={showTypes} onChange={() => setShowTypes(!showTypes)} />
+                </FormControl>
+                <FormControl display='flex' alignItems='center'>
+                  <FormLabel color='text' htmlFor='show-traveler-switch' mb='0' fontSize='sm' mr='0.25rem'>
+                    traveler
+                  </FormLabel>
+                  <DeepSwitch id='show-traveler-switch' isChecked={traveler} onChange={() => setTraveler(!traveler)} />
+                </FormControl>
+                <FormControl display='flex' alignItems='center'>
+                  <FormLabel color='text' htmlFor='breadcrumbs-switch' mb='0' fontSize='sm' mr='0.25rem'>
+                    breadcrumbs
+                  </FormLabel>
+                  <DeepSwitch id='breadcrumbs-switch' isChecked={breadcrumbs} onChange={() => setBreadcrumbs(!breadcrumbs)} />
+                </FormControl>
+                <FormControl display='flex' alignItems='center'>
+                  <FormLabel color='text' htmlFor='cytoHandlers-switch' mb='0' fontSize='sm' mr='0.25rem'>
+                    cytoHandlers
+                  </FormLabel>
+                  <DeepSwitch id='cytoHandlers-switch' isChecked={cytoHandlers} onChange={() => setCytoHandlers(!cytoHandlers)} />
+                </FormControl>
+                <FormControl display='flex' alignItems='center'>
+                  <FormLabel htmlFor='animation-layout-switch' mb='0' fontSize='sm' mr='0.25rem'>
+                    animation
+                  </FormLabel>
+                  <DeepSwitch id='animation-layout-switch' isChecked={layoutAnimation} onChange={() => setLayoutAnimation(!layoutAnimation)}/>
+                </FormControl>
+                <FormControl display='flex' alignItems='center'>
+                  <FormLabel mb='0' fontSize='sm' mr='0.55rem'>
+                    layout
+                  </FormLabel>
+                  <Box width="max-content" margin="0 auto">
+                    {/* <Select onChange={handlerChangeLayout} value={layoutName}>
+                      <option value='cola'>cola</option>
+                      <option value='deep-d3-force'>d3-force</option>
+                    </Select> */}
+                    <ListLayout 
+                      currentLayout={layoutName}
+                      setCurrentLayout={handlerChangeLayout}
+                    />
+                  </Box>
+                </FormControl>
+                {/* <FormControl display='flex' alignItems='center'>
+                  <FormLabel htmlFor='reserved switch' mb='0' fontSize='sm' mr='0.25rem'>
+                  reserved
+                  </FormLabel>
+                  <Switch id='reserved switch' isChecked={reserved} onChange={() => setReserved(!reserved)}/>
+                </FormControl> */}
+              </HStack>
+              <HStack>
+                <MenuSearch cyRef={cyRef} bg='buttonBackgroundModal' />
+                <ButtonGroup size='sm' isAttached variant='outline' color='text'>
+                  <Button onClick={clearFocuses} borderColor='gray.400' background='buttonBackgroundModal'>clear focuses</Button>
+                </ButtonGroup>
+                <Travelers/>
+                <CytoHandlersMenu/>
+              </HStack>
+            </VStack>
+            {/* <Button bgColor='primary' color='white' size='sm' w='4rem' mt={10} mr={4} justifySelf='flex-end' rightIcon={<IoExitOutline />} onClick={openPortal}>Exit</Button> */}
+          </Box>
+        </>
+      </Appearance>
+    </div>
+  </>);
 }, () => true);
 
 const Travelers = () => {
@@ -539,7 +563,7 @@ export const MenuSearch = React.memo(({ cyRef, bg }: { cyRef?: any; bg?: any; })
   });
   const all = [...byId, ...byValue, ...byContain];
   const [index, setIndex] = useState(-1);
-  const [selected, setSelected] = useState(0);
+  const [selected, setSelected] = useState<Id>(0);
   // useHotkeys('up,right,down,left', e => {
   //   const cy = cyRef?.current;
   //   e.preventDefault();
diff --git a/imports/cyto/opened.tsx b/imports/cyto/opened.tsx
index c4d78b3c..98390c74 100644
--- a/imports/cyto/opened.tsx
+++ b/imports/cyto/opened.tsx
@@ -1,11 +1,12 @@
 import { useDeep, useDeepId } from "@deep-foundation/deeplinks/imports/client";
 import { useRefAutofill, useSpaceId } from "../hooks";
 import { useMemo } from "react";
+import { Id } from "@deep-foundation/deeplinks/imports/minilinks";
 
 export function useOpenedMethods(): {
-  open: (id: number, handlerId: number) => void;
-  close: (id: number) => void;
-  isOpened: (id: number) => Promise<boolean>;
+  open: (id: Id, handlerId: Id) => void;
+  close: (id: Id) => void;
+  isOpened: (id: Id) => boolean;
 } {
   const [spaceId] = useSpaceId();
   const spaceIdRef = useRefAutofill(spaceId);
@@ -17,8 +18,8 @@ export function useOpenedMethods(): {
       OpenedHandler = await deep.id('@deep-foundation/deepcase-opened', 'OpenedHandler');
     })();
     return {
-      isOpened: async (id) => {
-        const q = await deep.select({
+      isOpened: (id) => {
+        const q = deep.minilinks.query({
           type_id: OpenedHandler,
           from: {
             type_id: Opened,
@@ -26,7 +27,7 @@ export function useOpenedMethods(): {
             to_id: id,
           },
         });
-        const openedHandler = q?.data?.[0];
+        const openedHandler = q?.[0];
         return !!openedHandler
       },
       close: async (id) => {
diff --git a/imports/cyto/react.tsx b/imports/cyto/react.tsx
index 30635f67..32fe7004 100644
--- a/imports/cyto/react.tsx
+++ b/imports/cyto/react.tsx
@@ -1,3 +1,4 @@
+import { Id } from "@deep-foundation/deeplinks/imports/minilinks";
 import React, { useEffect, useRef } from "react";
 import ReactResizeDetector from 'react-resize-detector';
 
@@ -39,7 +40,7 @@ export const CytoReactLayout = React.memo(function CytoReactLayout({
   cy: any;
   elements: any[];
   generateId?: (id: string, spaceId: string) => string;
-  spaceId?: number;
+  spaceId?: Id;
 }) {
   const divRef = useRef<HTMLDivElement>();
 
@@ -92,7 +93,7 @@ export const CytoReactLayout = React.memo(function CytoReactLayout({
           stl.msTransform = val;
           stl.transform = val;
         }
-        cy.$(`#id`).style({ });
+        cy.$(`#${id}`).style({ });
       }
     }
 
diff --git a/imports/cyto/traveler.tsx b/imports/cyto/traveler.tsx
index 9d855231..e93fb2a4 100644
--- a/imports/cyto/traveler.tsx
+++ b/imports/cyto/traveler.tsx
@@ -1,3 +1,4 @@
+import { Id } from '@deep-foundation/deeplinks/imports/minilinks';
 import _flatten from 'lodash/flatten';
 import _isEqual from 'lodash/isEqual';
 
@@ -11,7 +12,7 @@ export function initializeTraveler(ncy, deepRef, spaceIdRef) {
       console.log(e, deep.linkId, deep);
     }
   })();
-  const insertTraveler = async (query, linkId: number) => {
+  const insertTraveler = async (query, linkId: Id) => {
     const spaceId = spaceIdRef.current;
     const deep = deepRef.current;
     await deep.insert({
@@ -41,7 +42,7 @@ export function initializeTraveler(ncy, deepRef, spaceIdRef) {
       } },
     });
   };
-  const deleteTraveler = async (query, linkId: number) => {
+  const deleteTraveler = async (query, linkId: Id) => {
     const deep = deepRef.current;
     const travelers = findTravlers(query, linkId);
     if (!travelers?.length) return;
@@ -57,7 +58,7 @@ export function initializeTraveler(ncy, deepRef, spaceIdRef) {
     ]);
   };
 
-  const switchTraveler = async (query, linkId: number) => {
+  const switchTraveler = async (query, linkId: Id) => {
     const travelers = findTravlers(query, linkId);
     if (travelers?.length) {
       await deleteTraveler(query, linkId);
@@ -66,7 +67,7 @@ export function initializeTraveler(ncy, deepRef, spaceIdRef) {
     }
   }
 
-  const findTravlers = (query: any, linkId: number) => {
+  const findTravlers = (query: any, linkId: Id) => {
     const spaceId = spaceIdRef.current;
     const deep = deepRef.current;
     if (!Traveler) return [];
@@ -101,7 +102,8 @@ export function initializeTraveler(ncy, deepRef, spaceIdRef) {
           const id = ele.data('link')?.id;
           if (id) {
             // await switchTraveler(query(id), id);
-            generateMenuByTypes(ele, query(id));
+            if (typeof(id) === 'number') generateMenuByTypes(ele, query(id));
+            else if (typeof(id) === 'string') await switchTraveler(query(id), id);
           }
         }
       }))((id) => ({
@@ -113,7 +115,8 @@ export function initializeTraveler(ncy, deepRef, spaceIdRef) {
           const id = ele.data('link')?.id;
           if (id) {
             // await switchTraveler(query(id), id);
-            generateMenuByTypes(ele, query(id));
+            if (typeof(id) === 'number') generateMenuByTypes(ele, query(id));
+            else if (typeof(id) === 'string') await switchTraveler(query(id), id);
           }
         }
       }))((id) => ({
diff --git a/imports/cyto/types.tsx b/imports/cyto/types.tsx
index a943dfbc..09c296e3 100644
--- a/imports/cyto/types.tsx
+++ b/imports/cyto/types.tsx
@@ -1,7 +1,7 @@
-import { Link, MinilinksResult } from '@deep-foundation/deeplinks/imports/minilinks';
+import { Id, Link, MinilinksResult } from '@deep-foundation/deeplinks/imports/minilinks';
 
 export interface CytoGraphProps {
-  links: Link<number>[];
+  links: Link<Id>[];
   cytoViewportRef?: any;
   cyRef?: any;
   gqlPath: string;
diff --git a/imports/editor/editor-handler.tsx b/imports/editor/editor-handler.tsx
index e9b89239..b0e547c1 100644
--- a/imports/editor/editor-handler.tsx
+++ b/imports/editor/editor-handler.tsx
@@ -2,18 +2,19 @@ import React from 'react';
 import { VscAdd } from 'react-icons/vsc';
 import { CytoReactLinkAvatar } from '../cyto-react-avatar';
 import { Flex, Box, HStack, Text, Divider, VStack, Select, useColorMode, Container, Switch } from '@chakra-ui/react';
+import { Id } from '@deep-foundation/deeplinks/imports/minilinks';
 
 interface IReason {
-  id?: number;
+  id?: Id;
   name?: string;
 }
 
 interface IHandler {
-  id?: number;
+  id?: Id;
   avatarElement?: any;
   title?: string;
   reasons?: IReason[];
-  onChangeReason?: (reasonId?: number) => void;
+  onChangeReason?: (reasonId?: Id) => void;
   sync?: boolean;
   onChangeSync?: (sync?: boolean) => void;
   children?: any;
diff --git a/imports/editor/editor-handlers.tsx b/imports/editor/editor-handlers.tsx
index 00d1b4e2..5109b1b6 100644
--- a/imports/editor/editor-handlers.tsx
+++ b/imports/editor/editor-handlers.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { VscAdd } from 'react-icons/vsc';
 import { Flex, Box, Button, Divider, ButtonGroup, Spacer } from '@chakra-ui/react';
+import { Id } from '@deep-foundation/deeplinks/imports/minilinks';
 
 
 export const EditorHandlers = React.memo(({
@@ -10,7 +11,7 @@ export const EditorHandlers = React.memo(({
   setGenerated,
 }:{
   children?: any;
-  onAddHandler?: (id: number) => void;
+  onAddHandler?: (id: Id) => void;
   generated?: string;
   setGenerated?: (generated: string) => void;
 }) => {
diff --git a/imports/editor/editor-results.tsx b/imports/editor/editor-results.tsx
index f0efb9cf..f25c1486 100644
--- a/imports/editor/editor-results.tsx
+++ b/imports/editor/editor-results.tsx
@@ -2,11 +2,12 @@ import React from 'react';
 import { VscAdd } from 'react-icons/vsc';
 import { Flex, Box, Button, Divider, ButtonGroup, Spacer } from '@chakra-ui/react';
 import { useDeep } from '@deep-foundation/deeplinks/imports/client';
+import { Id } from '@deep-foundation/deeplinks/imports/minilinks';
 
 export const EditorResultsResolvesRejects = React.memo(({
   promiseId
 }: {
-  promiseId: number;
+  promiseId: Id;
 }) => {
   const deep = useDeep();
   const resolves = deep.useMinilinksSubscription({
@@ -30,7 +31,7 @@ export const EditorResultsResolvesRejects = React.memo(({
 export const EditorResults = React.memo(({
   id,
 }:{
-  id: number;
+  id: Id;
 }) => {
   const deep = useDeep();
   deep.useDeepSubscription({
@@ -48,11 +49,11 @@ export const EditorResults = React.memo(({
       from_id: id,
     },
   });
-  const sortedPromises = promises.sort((a,b) => b.id - a.id);
+  // const sortedPromises = promises.sort((a,b) => b.id - a.id);
   return (<Flex direction='column' position="relative">
       <Box position="absolute" width="100%" height="100%" overflowY="scroll">
       <Box>
-        {sortedPromises.map(promise => <Box>
+        {promises.map(promise => <Box>
           {promise.id} Promise
           <Box paddingLeft={4}>
             <EditorResultsResolvesRejects promiseId={promise.id} />
diff --git a/imports/editor/editor-switcher.tsx b/imports/editor/editor-switcher.tsx
index bae98817..85557c0a 100644
--- a/imports/editor/editor-switcher.tsx
+++ b/imports/editor/editor-switcher.tsx
@@ -3,6 +3,7 @@ import { Input, HStack, Button, useColorMode, ButtonGroup, FormControl, FormLabe
 import { FinderPopover } from '../cyto/hooks';
 import { useSpaceId } from '../hooks';
 import { useDeep } from '@deep-foundation/deeplinks/imports/client';
+import { Id } from '@deep-foundation/deeplinks/imports/minilinks';
 
 
 export const EditorSwitcher = React.memo(({
@@ -18,8 +19,8 @@ export const EditorSwitcher = React.memo(({
   area?: string;
   setArea?: (e: any) => any; 
   rightArea?: string;
-  setCurrentLinkId?: (currentLinkId: number) => any;
-  currentLinkId: number;
+  setCurrentLinkId?: (currentLinkId: Id) => any;
+  currentLinkId: Id;
   setFillSize?: (fillSize: boolean) => any;
   fillSize: boolean;
   portalRef?: any;
diff --git a/imports/editor/editor-tabs.tsx b/imports/editor/editor-tabs.tsx
index 06b268da..274417e5 100644
--- a/imports/editor/editor-tabs.tsx
+++ b/imports/editor/editor-tabs.tsx
@@ -5,9 +5,11 @@ import { isAndroid, isIOS } from 'react-device-detect';
 import { VscChromeClose } from 'react-icons/vsc';
 import { useChackraColor } from '../get-color';
 import { useDeep } from '@deep-foundation/deeplinks/imports/client';
+import { Id } from '@deep-foundation/deeplinks/imports/minilinks';
 
 interface ITab {
-  id: number;
+  id: Id;
+  title?: string;
   saved?: boolean;
   loading?: boolean;
   active?: boolean;
diff --git a/imports/gql.tsx b/imports/gql.tsx
index 48af08a6..daff2b58 100644
--- a/imports/gql.tsx
+++ b/imports/gql.tsx
@@ -2,6 +2,7 @@ import gql from 'graphql-tag';
 import { useMutation } from '@apollo/client';
 import { useCallback } from 'react';
 import { generateMutation, generateSerial, ISerialOptions } from '@deep-foundation/deeplinks/imports/gql';
+import { Id } from '@deep-foundation/deeplinks/imports/minilinks';
 
 export const JWT = gql`query JWT($linkId: Int) {
   jwt(input: {linkId: $linkId}) {
@@ -43,7 +44,7 @@ export const DELETE_LINKS = gql`mutation DELETE_LINKS($where: links_bool_exp!) {
 export const INSERT_STRING = gql`mutation INSERT_STRING($objects: [string_insert_input!]!) { insert_string: insert_string(objects: $objects) { returning { id } } }`;
 export const UPDATE_STRING = gql`mutation UPDATE_STRING($set: string_set_input, $where: string_bool_exp!) { update_string: update_string(_set: $set, where: $where) { returning { id } } }`;
 
-export const insertLinks = (links: { from_id?: number; to_id?: number; type_id: number; }[]) => {
+export const insertLinks = (links: { from_id?: Id; to_id?: Id; type_id: Id; }[]) => {
   return generateSerial({
     actions: [
       generateMutation({
@@ -55,7 +56,7 @@ export const insertLinks = (links: { from_id?: number; to_id?: number; type_id:
   });
 }
 
-export const deleteLinks = (ids: number[]) => {
+export const deleteLinks = (ids: Id[]) => {
   return generateSerial({
     actions: [
       generateMutation({
@@ -67,7 +68,7 @@ export const deleteLinks = (ids: number[]) => {
   });
 }
 
-export const insertReserved = (reserved_ids: String[],  userId: Number ) => {
+export const insertReserved = (reserved_ids: String[],  userId: Id ) => {
   return generateSerial({
     actions: [
       generateMutation({
@@ -79,7 +80,7 @@ export const insertReserved = (reserved_ids: String[],  userId: Number ) => {
   });
 }
 
-export const deleteReserveds = (reserveds: number[]) => {
+export const deleteReserveds = (reserveds: Id[]) => {
   return generateSerial({
     actions: [
       generateMutation({
@@ -91,7 +92,7 @@ export const deleteReserveds = (reserveds: number[]) => {
   });
 }
 
-export const insertLink = (link: { from_id?: number; to_id?: number; type_id: number; }) => {
+export const insertLink = (link: { from_id?: Id; to_id?: Id; type_id: Id; }) => {
   return generateSerial({
     actions: [
       generateMutation({
@@ -102,7 +103,7 @@ export const insertLink = (link: { from_id?: number; to_id?: number; type_id: nu
     name: 'INSERT_LINK',
   });
 }
-export const deleteLink = (id: number) => {
+export const deleteLink = (id: Id) => {
   return generateSerial({
     actions: [
       generateMutation({
@@ -114,7 +115,7 @@ export const deleteLink = (id: number) => {
   });
 }
 
-export const insertString = (link_id: number, value: string) => {
+export const insertString = (link_id: Id, value: string) => {
   return generateSerial({
     actions: [
       generateMutation({
@@ -125,7 +126,7 @@ export const insertString = (link_id: number, value: string) => {
     name: 'INSERT_STRING',
   });
 }
-export const updateString = (id: number, value: string) => {
+export const updateString = (id: Id, value: string) => {
   return generateSerial({
     actions: [
       generateMutation({
@@ -136,7 +137,7 @@ export const updateString = (id: number, value: string) => {
     name: 'UPDATE_STRING',
   });
 }
-export const deleteString = (id: number) => {
+export const deleteString = (id: Id) => {
   return generateSerial({
     actions: [
       generateMutation({
@@ -148,7 +149,7 @@ export const deleteString = (id: number) => {
   });
 }
 
-export const insertBoolExp = (link_id: number, value: string) => {
+export const insertBoolExp = (link_id: Id, value: string) => {
   return generateSerial({
     actions: [
       generateMutation({
@@ -159,7 +160,7 @@ export const insertBoolExp = (link_id: number, value: string) => {
     name: 'INSERT_BOOL_EXP',
   });
 }
-export const updateBoolExp = (id: number, value: string) => {
+export const updateBoolExp = (id: Id, value: string) => {
   return generateSerial({
     actions: [
       generateMutation({
@@ -170,7 +171,7 @@ export const updateBoolExp = (id: number, value: string) => {
     name: 'UPDATE_BOOL_EXP',
   });
 }
-export const deleteBoolExp = (id: number) => {
+export const deleteBoolExp = (id: Id) => {
   return generateSerial({
     actions: [
       generateMutation({
diff --git a/imports/hooks.tsx b/imports/hooks.tsx
index 212761df..bc87271d 100644
--- a/imports/hooks.tsx
+++ b/imports/hooks.tsx
@@ -4,7 +4,7 @@ import { useQueryStore } from '@deep-foundation/store/query';
 import React, { useEffect, useRef, useState, useMemo } from 'react';
 import { layouts } from './cyto/layouts';
 import { useMediaQuery as useMediaQueryChakra } from '@chakra-ui/react';
-import { Link } from '@deep-foundation/deeplinks/imports/minilinks';
+import { Id, Link } from '@deep-foundation/deeplinks/imports/minilinks';
 
 export const defaultLeftWidth = 10;
 export const defaultCardWidth = 300;
@@ -36,12 +36,12 @@ export function useForceGraph() {
 export interface IInsertingCytoStore{
   isNode?: boolean;
   isPossibleNode?: boolean;
-  type_id?: number;
+  type_id?: Id;
   toast?: any;
-  From?: number;
-  To?: number;
-  from?: number;
-  to?: number;
+  From?: Id;
+  To?: Id;
+  from?: Id;
+  to?: Id;
   _selfLink?: boolean;
 }
 
@@ -53,11 +53,11 @@ export function useInsertingCytoStore() {
 }
 
 export interface IUpdatingCytoStore{
-  id?: number;
+  id?: Id;
   toast?: any;
   _selfLink?: boolean;
-  from?: number;
-  to?: number;
+  from?: Id;
+  to?: Id;
 }
 
 export function useUpdatingCytoStore() {
@@ -174,10 +174,10 @@ export function useActiveMethods() {
   const deep = useDeep();
   return useMemo(() => {
     return {
-      deactive: async function(id: number) {
+      deactive: async function(id: Id) {
         console.log(await deep.delete({ type_id: deep.idLocal('@deep-foundation/core', 'Active'), from_id: spaceId, to_id: id }));
       },
-      find: async function(id: number) {
+      find: async function(id: Id) {
         const q = await deep.select({
           type_id: deep.idLocal('@deep-foundation/core', 'Active'),
           from_id: spaceId,
@@ -185,7 +185,7 @@ export function useActiveMethods() {
         });
         return q?.data?.[0];
       },
-      active: async function(id: number) {
+      active: async function(id: Id) {
         const active = await this.find(id);
         const { data: [{ id: newId }] } = await deep.insert({
           type_id: deep.idLocal('@deep-foundation/core', 'Active'),
@@ -197,7 +197,7 @@ export function useActiveMethods() {
           } },
         });
       },
-      toggle: async function(id: number) {
+      toggle: async function(id: Id) {
         const active = await this.find(id);
         let oldId = active?.id;
         if (!oldId) await this.active(id);
diff --git a/imports/link-client-handlers/default.tsx b/imports/link-client-handlers/default.tsx
index 88420250..a1f36551 100644
--- a/imports/link-client-handlers/default.tsx
+++ b/imports/link-client-handlers/default.tsx
@@ -1,11 +1,12 @@
 import { Box, useColorModeValue } from "@chakra-ui/react";
 import { useChackraColor, useChackraGlobal } from "../get-color";
+import { Id } from "@deep-foundation/deeplinks/imports/minilinks";
 
 export function LinkClientHandlerDefault({
   id,
   ml,
 }: {
-  id: number;
+  id: Id;
   ml: any;
 }) {
   const globalStyle = useChackraGlobal();
diff --git a/imports/loader.tsx b/imports/loader.tsx
index da8d5293..5937e17f 100644
--- a/imports/loader.tsx
+++ b/imports/loader.tsx
@@ -1,7 +1,7 @@
 import { useQuery, useSubscription } from "@apollo/client";
-import { useDeep, useDeepId } from "@deep-foundation/deeplinks/imports/client";
+import { useDeep, useDeepId, useDeepNamespaces } from "@deep-foundation/deeplinks/imports/client";
 import { generateQuery, generateQueryData } from "@deep-foundation/deeplinks/imports/gql";
-import { Link, useMinilinksFilter } from "@deep-foundation/deeplinks/imports/minilinks";
+import { Id, Link, useMinilinksFilter } from "@deep-foundation/deeplinks/imports/minilinks";
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useBreadcrumbs, useShowOpened } from "./hooks";
 import { CatchErrors } from "./react-errors";
@@ -10,55 +10,59 @@ import _ from 'lodash';
 
 export const DeepLoaderActive = React.memo(function DeepLoaderActive({
   name,
+  mini,
   query: queryLink,
   onChange,
   debounce = 1000,
   subscription = true,
+  deep,
 }: {
   name: string;
+  mini: string;
   query: any;
-  onChange: (results: Link<number>[], query: any) => any;
+  onChange?: (results: Link<Id>[], query: any) => any;
   debounce?: number;
   subscription?: boolean;
+  deep?: any;
 }) {
-  const useApolloLoader = subscription ? useSubscription : useQuery;
-  const deep = useDeep();
-  const subQuery = useMemo(() => {
-    const v = (queryLink?.value?.value);
-    const variables = deep.serializeQuery(v);
-    const where = variables?.where;
-    return generateQuery({
-      operation: subscription ? 'subscription' : 'query',
-      queries: [generateQueryData({
-        tableName: 'links',
-        returning: `
-          id type_id from_id to_id value string { id value } number { id value } object { id value }
-        `,
-        variables: v
-        ? { ...variables, where }
-        : { where: {}, limit: 0 },
-      })],
-      name: name,
-    });
-  }, [queryLink, queryLink?.value?.value]);
-  const subQueryResults = useApolloLoader(subQuery.query, { variables: subQuery.variables });
-  const [sintSubQueryResults, setSintSubQueryResults] = useState<any>(subQueryResults);
-  const subQueryPrimary = subscription ? subQueryResults : sintSubQueryResults || subQueryResults;
+  const useLoader = deep ? subscription ? deep?.useDeepSubscription : deep?.useDeepQuery : (...args) => ({ data: [] });
+  // const subQuery = useMemo(() => {
+  //   const v = (queryLink?.value?.value);
+  //   const variables = deep.serializeQuery(v);
+  //   const where = variables?.where;
+  //   return generateQuery({
+  //     operation: subscription ? 'subscription' : 'query',
+  //     queries: [generateQueryData({
+  //       tableName: 'links',
+  //       returning: `
+  //         id type_id from_id to_id value string { id value } number { id value } object { id value }
+  //       `,
+  //       variables: v
+  //       ? { ...variables, where }
+  //       : { where: {}, limit: 0 },
+  //     })],
+  //     name: name,
+  //   });
+  // }, [queryLink, queryLink?.value?.value]);
+  const subQueryResults = useLoader(queryLink?.value?.value, { name, mini });
+  // const [sintSubQueryResults, setSintSubQueryResults] = useState<any>(subQueryResults);
+  // const subQueryPrimary = subscription ? subQueryResults : sintSubQueryResults || subQueryResults;
 
-  const delayedSubQueryRef = useRef<any>();
-  delayedSubQueryRef.current = subQuery;
-  useDelayedInterval(useCallback(() => new Promise((res, rej) => {
-    if (subscription) rej();
-    // @ts-ignore
-    else subQueryResults?.refetch(delayedSubQueryRef.current.variables).then((r) => {
-      setSintSubQueryResults(r);
-      res(undefined);
-    });
-  }), [queryLink, queryLink?.value?.value]), debounce);
+  // const delayedSubQueryRef = useRef<any>();
+  // delayedSubQueryRef.current = subQuery;
+  // useDelayedInterval(useCallback(() => new Promise((res, rej) => {
+  //   if (subscription) rej();
+  //   // @ts-ignore
+  //   else subQueryResults?.refetch(delayedSubQueryRef.current.variables).then((r) => {
+  //     setSintSubQueryResults(r);
+  //     res(undefined);
+  //   });
+  // }), [queryLink, queryLink?.value?.value]), debounce);
 
   useEffect(() => {
-    if (subQueryPrimary?.data?.q0 && !subQueryPrimary?.loading) onChange && onChange(subQueryPrimary?.data?.q0, queryLink);
-  }, [subQueryPrimary]);
+    // if (subQueryPrimary?.data?.q0 && !subQueryPrimary?.loading) onChange && onChange(subQueryPrimary?.data?.q0, queryLink);
+    if (!subQueryResults.loading) onChange && onChange(subQueryResults?.data, queryLink);
+  }, [subQueryResults]);
 
   useEffect(() => {
     return () => {
@@ -72,10 +76,11 @@ export const DeepLoaderActive = React.memo(function DeepLoaderActive({
 export const DeepLoader = memo(function DeepLoader({
   spaceId,
 }: {
-  spaceId?: number;
+  spaceId?: Id;
 }) {
   const deep = useDeep();
   const userId = deep.linkId;
+  const namespaces = useDeepNamespaces();
   const [breadcrumbs] = useBreadcrumbs();
   const [showOpened, setShowOpened] = useShowOpened();
   const { data: HandleCyto } = useDeepId('@deep-foundation/handle-cyto', 'HandleCyto');
@@ -204,6 +209,7 @@ export const DeepLoader = memo(function DeepLoader({
     deep.minilinks,
     useCallback((l) => !l?._applies?.includes('not-loaded-ends'), []),
     useCallback((l, ml) => (ml.links.filter(l => (
+      l?._namespaces?.includes('remote') &&
       (
         !l._applies.includes('contains_and_symbols')
         &&
@@ -228,6 +234,29 @@ export const DeepLoader = memo(function DeepLoader({
     } } };
   }, [notLoadedEnds]);
 
+  const notLoadedEndsCyber = useMinilinksFilter(
+    deep.minilinks,
+    useCallback((l) => (!l?._applies?.includes('not-loaded-ends-cyber') && l?._namespaces?.includes('cyber')), []),
+    useCallback((l, ml) => (ml.links.filter(l => (
+        l?._namespaces?.includes('cyber')
+        &&
+        (
+          (!!l.from_id && (!l.from || !!l.from._applies.includes('not-loaded-ends-cyber')))
+          ||
+          (!!l.to_id && (!l.to || !!l.to._applies.includes('not-loaded-ends-cyber')))
+        )
+    ))), []),
+    1000,
+  ) || [];
+  const notLoadedEndsCyberQuery = useMemo(() => {
+    return { value: { value: {
+      id: { _in: [
+        ...notLoadedEndsCyber.map(l => l.from_id).filter(id => !!id),
+        ...notLoadedEndsCyber.map(l => l.to_id).filter(id => !!id),
+      ] },
+    } } };
+  }, [notLoadedEndsCyber]);
+
   const treesQuery = useMemo(() => {
     return { value: { value: {
       type_id: deep.idLocal('@deep-foundation/core', 'Tree'),
@@ -238,7 +267,7 @@ export const DeepLoader = memo(function DeepLoader({
     deep.minilinks,
     useCallback((l) => true, []),
     useCallback((l, ml) => {
-      return Object.keys(ml.byType).map(type => parseInt(type));
+      return Object.keys(ml.byType).filter(id => typeof(+id) === 'number' && !Number.isNaN(+id));
     }, []),
     1000,
   ) || [];
@@ -256,15 +285,16 @@ export const DeepLoader = memo(function DeepLoader({
     deep.minilinks,
     useCallback((l) => true, []),
     useCallback((l, ml) => {
-      return Object.keys(ml.byId).map(link => parseInt(link));
+      return Object.keys(ml.byId).filter(id => typeof(+id) === 'number' && !Number.isNaN(+id));
     }, []),
     1000,
   ) || [];
 
+  const queryAndSpaceLoadedIdsFilter = useCallback((l) => !!l?._namespaces?.includes('remote') && (!!l?._applies?.find(a => a.includes('query-') || a.includes('space') || a.includes('client-handlers'))), []);
   const queryAndSpaceLoadedIds = useMinilinksFilter(
     deep.minilinks,
-    useCallback((l) => !!l?._applies?.find(a => a.includes('query-') || a.includes('space')), []),
-    useCallback((l, ml) => (ml.links.filter(l => l._applies?.find(a => a.includes('query-') || a.includes('space') || a.includes('client-handlers'))).map(l => l.id)), []),
+    useCallback(queryAndSpaceLoadedIdsFilter, []),
+    useCallback((l, ml) => (ml.links.filter(queryAndSpaceLoadedIdsFilter).map(l => l.id)), []),
     1000,
   ) || [];
 
@@ -288,7 +318,8 @@ export const DeepLoader = memo(function DeepLoader({
     return { value: { value: {
       down: {
         tree_id: { _eq: deep.idLocal('@deep-foundation/core', 'typesTree') },
-        link_id: { _in: ids }
+        link_id: { _in: ids },
+        parent_id: { _nin: ids },
       },
     } } };
   }, [ids]);
@@ -335,97 +366,81 @@ export const DeepLoader = memo(function DeepLoader({
     } } };
   }, [queryAndSpaceLoadedIds, ids]);
 
-  // console.log('not-loaded-ends render', {
-  //   notLoadedEnds,
-  //   notLoadedEndsQuery,
-  //   actual: deep.minilinks.links.filter(l => (!!l.from_id && !l.from) || (!!l.to_id && !l.to)),
-  //   time: new Date().valueOf(),
-  //   applied: deep.minilinks.links.filter(l => !!l?._applies?.includes('not-loaded-ends')),
-  //   notApplied: deep.minilinks.links.filter(l => !l?._applies?.includes('not-loaded-ends')),
-  // });
-
-  const queryChanged = useCallback((r, q) => {
-    deep.minilinks?.apply(r, `query-${q.id}`);
-  }, []);
-
-  const breadcrumbsChanged = useCallback((r) => {
-    deep.minilinks?.apply(r, 'breadcrumbs');
-  }, []);
-  
-  const containsAndSymbolsChanged = useCallback((r) => {
-    deep.minilinks?.apply(r, 'contains_and_symbols');
-  }, []);
-
-  const valuesChanged = useCallback((r) => {
-    deep.minilinks?.apply(r, 'values');
-  }, []);
-
   return <>
     <><DeepLoaderActive
       key="DEEPCASE_SPACE"
       name="DEEPCASE_SPACE"
+      deep={deep}
       query={spaceQuery}
-      onChange={useCallback((r) => {
-        deep.minilinks?.apply(r, 'space');
-      }, [])}
+      mini={'space'}
     /></>
     <><DeepLoaderActive
       key="DEEPCASE_TREES"
       name="DEEPCASE_TREES"
+      deep={deep}
       query={treesQuery}
-      onChange={useCallback((r) => {
-        deep.minilinks?.apply(r, 'trees');
-      }, [])}
+      mini={'trees'}
     /></>
     <><DeepLoaderActive
       key="DEEPCASE_NOT_LOADED_ENDS"
       name="DEEPCASE_NOT_LOADED_ENDS"
+      deep={deep}
       query={notLoadedEndsQuery}
-      onChange={useCallback((r) => {
-        // console.log('not-loaded-ends onChange', r, notLoadedEnds, notLoadedEndsQuery, 'ml', deep.minilinks.links.filter(l => (!!l.from_id && !l.from) || (!!l.to_id && !l.to)));
-        deep.minilinks?.apply(r, 'not-loaded-ends');
-      }, [])}
+      mini={'not-loaded-ends'}
     /></>
+    {!!namespaces?.cyber && <><DeepLoaderActive
+      key="DEEPCASE_NOT_LOADED_ENDS_CYBER"
+      name="DEEPCASE_NOT_LOADED_ENDS_CYBER"
+      deep={namespaces?.cyber}
+      query={notLoadedEndsCyberQuery}
+      mini={'not-loaded-ends-cyber'}
+    /></>}
     {!!breadcrumbs && <><DeepLoaderActive
       key="DEEPCASE_BREADCRUMBS"
       name="DEEPCASE_BREADCRUMBS"
+      deep={deep}
       query={breadcrumbsQuery}
-      onChange={breadcrumbsChanged}
+      mini={'breadcrumbs'}
     /></>}
     <><DeepLoaderActive
       key="DEEPCASE_CLIENT_HANDLERS"
       name="DEEPCASE_CLIENT_HANDLERS"
+      deep={deep}
       query={clientHandlersQuery}
-      onChange={useCallback((r) => {
-        deep.minilinks?.apply(r, 'client-handlers');
-      }, [])}
+      mini={'client-handlers'}
     /></>
-    {queries?.map((f, i) => (f?.value?.value ? <DeepLoaderActive
-      key={`DEEPCASE_QUERY_${f.id}`}
-      name={`DEEPCASE_QUERY_${f.id}`}
-      query={f}
-      onChange={queryChanged}
-    /> : <React.Fragment key={`DEEPCASE_QUERY_${f.id}`}/>))}
+    {useMemo(() => {
+      return queries?.map((f, i) => (f?.value?.value ? <React.Fragment key={`DEEPCASE_QUERY_${f.id}`}>
+        {Object.values(namespaces).map(deep => <DeepLoaderActive
+          name={`DEEPCASE_QUERY_${deep?.namespace}_${`${f.id}`.replace('-', 'virtual')}`}
+          key={`DEEPCASE_QUERY_${deep?.namespace}_${`${f.id}`.replace('-', 'virtual')}`}
+          deep={deep}
+          query={f}
+          mini={`query-${`${f.id}`.replace('-', 'virtual')}`}
+        />)}
+      </React.Fragment> : <React.Fragment key={`DEEPCASE_QUERY_${`${f.id}`.replace('-', 'virtual')}`}/>));
+    }, [namespaces, queries])}
     <><DeepLoaderActive
       key={`DEEPCASE_TYPES`}
       name={`DEEPCASE_TYPES`}
+      deep={deep}
       query={typesQuery}
-      onChange={useCallback((r) => {
-        deep.minilinks?.apply(r, 'types');
-      }, [])}
+      mini={'types'}
     /></>
     {!!typeIds && <><DeepLoaderActive
       key={`DEEPCASE_CONTAINS_AND_SYMBOLS`}
       name={`DEEPCASE_CONTAINS_AND_SYMBOLS`}
+      deep={deep}
       query={containsAndSymbolsQuery}
       debounce={2000}
-      onChange={containsAndSymbolsChanged}
+      mini={'contains_and_symbols'}
     /></>}
     {!!typeIds && <><DeepLoaderActive
       key={`DEEPCASE_VALUES`}
       name={`DEEPCASE_VALUES`}
+      deep={deep}
       query={valuesQuery}
-      onChange={valuesChanged}
+      mini={'values'}
     /></>}
   </>;
 });
\ No newline at end of file
diff --git a/imports/packager-interface/packager-interface-tabs-content.tsx b/imports/packager-interface/packager-interface-tabs-content.tsx
index c74b1b37..268baf66 100644
--- a/imports/packager-interface/packager-interface-tabs-content.tsx
+++ b/imports/packager-interface/packager-interface-tabs-content.tsx
@@ -12,6 +12,7 @@ import { Loading } from '../loading-motion-bubble';
 
 import { makeUseAxios } from "axios-hooks";
 import axios from "axios";
+import { Id } from '@deep-foundation/deeplinks/imports/minilinks';
 
 const useAxios = makeUseAxios({ axios: axios.create() });
 
@@ -42,14 +43,14 @@ const variantsPackage = {
 };
 
 export interface IPackageInstalledVersion {
-  id: number;
+  id: Id;
   version: string;
-  packageId: number;
+  packageId: Id;
   isActive: boolean; 
 }
 
 export interface IPackage {
-  id: number;
+  id: Id;
   name: string;
   description?: any;
   versions?: IPackageInstalledVersion[];
diff --git a/imports/packager-interface/packager-interface-tabs-menu.tsx b/imports/packager-interface/packager-interface-tabs-menu.tsx
index 5904608e..0dd478c9 100644
--- a/imports/packager-interface/packager-interface-tabs-menu.tsx
+++ b/imports/packager-interface/packager-interface-tabs-menu.tsx
@@ -3,6 +3,7 @@ import { AnimatePresence, motion, useAnimation } from 'framer-motion';
 import React, { useEffect, useState } from 'react';
 import { Install } from "./icons/install";
 import { Uninstall } from './icons/uninstall';
+import { Id } from '@deep-foundation/deeplinks/imports/minilinks';
 
 
 const tabInstall = {
@@ -127,7 +128,7 @@ export const TabsPackages = React.memo(({
   quantityInstall = 0,
   quantityUninstalled = 0,
 }:{
-  selectedTab?: number;
+  selectedTab?: Id;
   onSelectMode?: () => any;
   quantityInstall?: number;
   quantityUninstalled?: number;
diff --git a/imports/packager-interface/packager-interface-tabs.tsx b/imports/packager-interface/packager-interface-tabs.tsx
index e600caca..5db32675 100644
--- a/imports/packager-interface/packager-interface-tabs.tsx
+++ b/imports/packager-interface/packager-interface-tabs.tsx
@@ -3,6 +3,7 @@ import { AnimatePresence, motion, useAnimation } from 'framer-motion';
 import React, { useEffect, useState } from 'react';
 import { Install } from "./icons/install";
 import { Uninstall } from './icons/uninstall';
+import { Id } from '@deep-foundation/deeplinks/imports/minilinks';
 
 
 const tabInstall = {
@@ -107,7 +108,7 @@ export const TabsPackages = React.memo(({
   onClickTab,
 }:{
   // selectedTab?: number;
-  onClickTab?: (selectedTab: number) => any;
+  onClickTab?: (selectedTab: Id) => any;
 }) => {
   const [ selectedTab, setSelectedTab ] = useState(0);
   const controlInstall = useAnimation();
diff --git a/imports/popover-text/popover-text.tsx b/imports/popover-text/popover-text.tsx
index a8cbcc0a..5461ec44 100644
--- a/imports/popover-text/popover-text.tsx
+++ b/imports/popover-text/popover-text.tsx
@@ -1,9 +1,10 @@
 import { Box, Button, chakra, Popover, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverTrigger, Square, Text, useColorModeValue } from '@chakra-ui/react';
 import React, { ReactElement } from 'react';
 import { useChackraColor } from '../get-color';
+import { Id } from '@deep-foundation/deeplinks/imports/minilinks';
 
 export interface ITypeData {
-  id?: number;
+  id?: Id;
   src?: string;
 }
 
diff --git a/imports/text-cursor-tooltip/text-cursor-tooltip.tsx b/imports/text-cursor-tooltip/text-cursor-tooltip.tsx
index 4e583b40..80c8bbb5 100644
--- a/imports/text-cursor-tooltip/text-cursor-tooltip.tsx
+++ b/imports/text-cursor-tooltip/text-cursor-tooltip.tsx
@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { TypeIcon } from '../cyto-react-links-card';
 import { useChackraColor } from '../get-color';
 import { ITypeData } from '../popover-text/popover-text';
+import { Id } from '@deep-foundation/deeplinks/imports/minilinks';
 
 
 const variants = {
@@ -44,7 +45,7 @@ export const TooltipEmoji = React.memo(({
   data,
 }:{
   // children?: any;
-  selectedLinkId?: number;
+  selectedLinkId?: Id;
   data: ITypeData[];
 }) => {
   const whiteAlpha = useChackraColor('whiteAlpha.600');