From b3f5dac7d265be3034675e33cb067ec3ee598f7f Mon Sep 17 00:00:00 2001
From: bryzZz <nikita.tebloev@polyus-nt.ru>
Date: Wed, 6 Mar 2024 19:25:02 +0800
Subject: [PATCH 1/6] start

---
 resources/tutorial.json                       |   9 ++
 src/renderer/index.html                       |   4 +
 .../components/ComponentFormFieldLabel.tsx    |   2 +-
 .../MainContainer/MainContainer.tsx           |  20 ++++
 .../Sidebar/Explorer/ComponentsList.tsx       |  30 +++--
 .../components/Sidebar/Explorer/Explorer.tsx  |  27 +++--
 src/renderer/src/components/Sidebar/Menus.tsx |   2 +-
 src/renderer/src/components/TutorialItem.tsx  | 104 ++++++++++++++++++
 src/renderer/src/components/UI/WithHint.tsx   |  50 +++++----
 src/renderer/src/components/index.ts          |   1 +
 src/renderer/src/hooks/index.ts               |   1 +
 .../src/hooks/useIsVisibleFloating.ts         |  76 +++++++++++++
 src/renderer/src/store/useTutorial.ts         |  44 ++++++++
 13 files changed, 328 insertions(+), 42 deletions(-)
 create mode 100644 resources/tutorial.json
 create mode 100644 src/renderer/src/components/TutorialItem.tsx
 create mode 100644 src/renderer/src/hooks/useIsVisibleFloating.ts
 create mode 100644 src/renderer/src/store/useTutorial.ts
diff --git a/resources/tutorial.json b/resources/tutorial.json
new file mode 100644
index 000000000..9ca1c8dff
--- /dev/null
+++ b/resources/tutorial.json
@@ -0,0 +1,9 @@
+{
+  "items": [
+    {
+      "id": "1",
+      "title": "Пример",
+      "content": "Попробуй добавить новый компонент"
+    }
+  ]
+}
diff --git a/src/renderer/index.html b/src/renderer/index.html
index c5b6d542d..0b3abaa1b 100644
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -13,12 +13,16 @@
 
   <body>
     <div id="root"></div>
+
+    <div id="tutorial" style="z-index: 100; position: relative"></div>
+
     <div id="loading-overlay" class="loading-overlay">
       <div class="loading-spinner">
         <span>🐾</span>
         <div class="half-spinner"></div>
       </div>
     </div>
+
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/src/renderer/src/components/ComponentFormFieldLabel.tsx b/src/renderer/src/components/ComponentFormFieldLabel.tsx
index 051f1cb82..2b7e5db56 100644
--- a/src/renderer/src/components/ComponentFormFieldLabel.tsx
+++ b/src/renderer/src/components/ComponentFormFieldLabel.tsx
@@ -22,7 +22,7 @@ export const ComponentFormFieldLabel: React.FC<ComponentFormFieldLabelProps> = (
   return (
     <div>
       <label className="grid grid-cols-[max-content,1fr] items-center justify-start gap-2">
-        <div className="min-w-28 flex items-center gap-1">
+        <div className="flex min-w-28 items-center gap-1">
           <span>{label}</span>
           {hint && (
             <WithHint hint={hint}>
diff --git a/src/renderer/src/components/MainContainer/MainContainer.tsx b/src/renderer/src/components/MainContainer/MainContainer.tsx
index 4017de307..5af45d87c 100644
--- a/src/renderer/src/components/MainContainer/MainContainer.tsx
+++ b/src/renderer/src/components/MainContainer/MainContainer.tsx
@@ -24,6 +24,7 @@ import {
 } from '@renderer/lib/data/PlatformLoader';
 import { preloadPicto } from '@renderer/lib/drawable/Picto';
 import { useEditorContext } from '@renderer/store/EditorContext';
+import { useTutorial } from '@renderer/store/useTutorial';
 
 import { NotInitialized } from './NotInitialized';
 import { Tabs } from './Tabs';
@@ -47,6 +48,7 @@ export const MainContainer: React.FC = () => {
   });
 
   useAppTitle();
+  const setTutorialItems = useTutorial((state) => state.setItems);
 
   const onDrop = useCallback(
     (acceptedFiles: File[]) => {
@@ -76,6 +78,24 @@ export const MainContainer: React.FC = () => {
         openPlatformError(errs);
       }
     });
+
+    // TODO(bryzZz) Подгрузка туториала из файла
+    const tutorial = {
+      items: [
+        {
+          id: '1',
+          title: 'Пример',
+          content: 'Попробуй добавить новый компонент',
+        },
+        {
+          id: '2',
+          title: 'Иерархия состояний',
+          content: 'Иерархия состояний позволяет посмотреть компоненты схемы ввиде списка',
+        },
+      ],
+    };
+
+    setTutorialItems(tutorial.items);
   }, []);
 
   return (
diff --git a/src/renderer/src/components/Sidebar/Explorer/ComponentsList.tsx b/src/renderer/src/components/Sidebar/Explorer/ComponentsList.tsx
index e4cbdaab7..4a25690a0 100644
--- a/src/renderer/src/components/Sidebar/Explorer/ComponentsList.tsx
+++ b/src/renderer/src/components/Sidebar/Explorer/ComponentsList.tsx
@@ -3,7 +3,12 @@ import React, { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import { ReactComponent as AddIcon } from '@renderer/assets/icons/new transition.svg';
-import { ComponentEditModal, ComponentAddModal, ComponentDeleteModal } from '@renderer/components';
+import {
+  ComponentEditModal,
+  ComponentAddModal,
+  ComponentDeleteModal,
+  TutorialItem,
+} from '@renderer/components';
 import { ScrollableList } from '@renderer/components/ScrollableList';
 import { WithHint } from '@renderer/components/UI';
 import { useComponents } from '@renderer/hooks';
@@ -82,15 +87,20 @@ export const ComponentsList: React.FC = () => {
 
   return (
     <>
-      <button
-        type="button"
-        className="btn-primary mb-2 flex w-full items-center justify-center gap-3"
-        disabled={!isInitialized}
-        onClick={onRequestAddComponent}
-      >
-        <AddIcon className="shrink-0" />
-        Добавить...
-      </button>
+      <TutorialItem id="1">
+        {(props) => (
+          <button
+            type="button"
+            className="btn-primary mb-2 flex w-full items-center justify-center gap-3"
+            disabled={!isInitialized}
+            onClick={onRequestAddComponent}
+            {...props}
+          >
+            <AddIcon className="shrink-0" />
+            Добавить...
+          </button>
+        )}
+      </TutorialItem>
 
       <ScrollableList
         containerProps={{ onClick: (e) => e.stopPropagation() }}
diff --git a/src/renderer/src/components/Sidebar/Explorer/Explorer.tsx b/src/renderer/src/components/Sidebar/Explorer/Explorer.tsx
index da7026b2b..4e276f7e7 100644
--- a/src/renderer/src/components/Sidebar/Explorer/Explorer.tsx
+++ b/src/renderer/src/components/Sidebar/Explorer/Explorer.tsx
@@ -9,6 +9,7 @@ import {
 import { twMerge } from 'tailwind-merge';
 
 import { ReactComponent as ArrowIcon } from '@renderer/assets/icons/arrow-down.svg';
+import { TutorialItem } from '@renderer/components';
 import { Hierarchy } from '@renderer/components/Hierarchy';
 import { useEditorContext } from '@renderer/store/EditorContext';
 
@@ -79,15 +80,23 @@ export const Explorer: React.FC = () => {
           onExpand={forceUpdate}
           className="px-4"
         >
-          <button className="mb-3 flex items-center" onClick={() => togglePanel(hierarchyPanelRef)}>
-            <ArrowIcon
-              className={twMerge(
-                'rotate-0 transition-transform',
-                hierarchyPanelRef.current?.isCollapsed() && '-rotate-90'
-              )}
-            />
-            <h3 className="font-semibold">Иерархия состояний</h3>
-          </button>
+          <TutorialItem id="2">
+            {(props) => (
+              <button
+                className="mb-3 flex items-center"
+                onClick={() => togglePanel(hierarchyPanelRef)}
+                {...props}
+              >
+                <ArrowIcon
+                  className={twMerge(
+                    'rotate-0 transition-transform',
+                    hierarchyPanelRef.current?.isCollapsed() && '-rotate-90'
+                  )}
+                />
+                <h3 className="font-semibold">Иерархия состояний</h3>
+              </button>
+            )}
+          </TutorialItem>
 
           {isMounted ? <Hierarchy /> : 'Недоступно до открытия схемы'}
         </Panel>
diff --git a/src/renderer/src/components/Sidebar/Menus.tsx b/src/renderer/src/components/Sidebar/Menus.tsx
index 698f5d6e8..9e1d8e9fb 100644
--- a/src/renderer/src/components/Sidebar/Menus.tsx
+++ b/src/renderer/src/components/Sidebar/Menus.tsx
@@ -52,7 +52,7 @@ export const Menus: React.FC<MenusProps> = ({ items }) => {
       maxWidth={maxWidth}
       onResize={handleResize}
       onResizeStop={handleResizeStop}
-      className="z-50 overflow-hidden border-r border-border-primary bg-bg-secondary"
+      className="overflow-hidden border-r border-border-primary bg-bg-secondary"
     >
       <div
         className={twMerge(
diff --git a/src/renderer/src/components/TutorialItem.tsx b/src/renderer/src/components/TutorialItem.tsx
new file mode 100644
index 000000000..48f3fd205
--- /dev/null
+++ b/src/renderer/src/components/TutorialItem.tsx
@@ -0,0 +1,104 @@
+import React, { useRef, useState } from 'react';
+
+import {
+  useFloating,
+  FloatingPortal,
+  useInteractions,
+  offset as offsetMiddleware,
+  flip,
+  shift,
+  FloatingArrow,
+  arrow,
+  useTransitionStyles,
+} from '@floating-ui/react';
+
+import { Checkbox } from '@renderer/components/UI';
+import { useIsVisibleFloating } from '@renderer/hooks';
+import { getColor } from '@renderer/theme';
+
+const tutorial = {
+  items: [
+    {
+      id: '1',
+      title: 'Пример',
+      content: 'Попробуй добавить новый компонент',
+    },
+    {
+      id: '2',
+      title: 'Иерархия состояний',
+      content: 'Иерархия состояний позволяет посмотреть компоненты схемы ввиде списка',
+    },
+  ],
+};
+
+interface TutorialItemProps {
+  children: (props: Record<string, any>) => React.ReactNode;
+  id: string;
+}
+
+export const TutorialItem: React.FC<TutorialItemProps> = ({ children, id }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const arrowRef = useRef<SVGSVGElement | null>(null);
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: 'right',
+    middleware: [
+      offsetMiddleware(10),
+      flip(),
+      shift({ padding: 5 }),
+      arrow({
+        element: arrowRef,
+      }),
+    ],
+  });
+
+  const isVisible = useIsVisibleFloating(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([isVisible]);
+
+  const { isMounted, styles } = useTransitionStyles(context, {
+    initial: {
+      transform: 'translateX(2px)',
+      opacity: 0,
+    },
+  });
+
+  const tutorialItem = tutorial.items.find((item) => item.id === id);
+
+  return (
+    <>
+      {children({
+        ref: refs.setReference,
+        ...getReferenceProps(),
+      })}
+
+      {isMounted && tutorialItem && (
+        <FloatingPortal>
+          <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>
+            <div
+              className="max-w-sm whitespace-pre-wrap rounded-sm border border-border-primary bg-bg-secondary px-4 py-2 shadow-xl"
+              style={styles}
+            >
+              <h3 className="text-lg">{tutorialItem.title}</h3>
+
+              <p className="mb-2 text-base">{tutorialItem.content}</p>
+
+              <p className="flex items-center justify-end gap-2 text-sm">
+                Больше не показывать подсказки <Checkbox />
+              </p>
+
+              <FloatingArrow
+                className="fill-bg-secondary"
+                ref={arrowRef}
+                context={context}
+                stroke={getColor('border-primary')}
+                strokeWidth={0.5}
+              />
+            </div>
+          </div>
+        </FloatingPortal>
+      )}
+    </>
+  );
+};
diff --git a/src/renderer/src/components/UI/WithHint.tsx b/src/renderer/src/components/UI/WithHint.tsx
index 2b5228614..31be612f1 100644
--- a/src/renderer/src/components/UI/WithHint.tsx
+++ b/src/renderer/src/components/UI/WithHint.tsx
@@ -3,6 +3,7 @@ import React, { useRef, useState } from 'react';
 import {
   useFloating,
   useHover,
+  FloatingPortal,
   useInteractions,
   offset as offsetMiddleware,
   flip,
@@ -11,8 +12,8 @@ import {
   arrow,
   Placement,
   OffsetOptions,
+  useTransitionStyles,
 } from '@floating-ui/react';
-import { createPortal } from 'react-dom';
 
 import { getColor } from '@renderer/theme';
 
@@ -52,6 +53,13 @@ export const WithHint: React.FC<WithHintProps> = ({
   });
   const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
 
+  const { isMounted, styles } = useTransitionStyles(context, {
+    initial: {
+      transform: 'translateX(2px)',
+      opacity: 0,
+    },
+  });
+
   return (
     <>
       {children({
@@ -59,26 +67,26 @@ export const WithHint: React.FC<WithHintProps> = ({
         ...getReferenceProps(),
         'data-with-hint': true,
       })}
-      {isOpen &&
-        hint &&
-        createPortal(
-          <div
-            className="z-[100] max-w-sm whitespace-pre-wrap rounded-sm border border-border-primary bg-bg-secondary px-2 py-1 shadow-xl transition-opacity"
-            ref={refs.setFloating}
-            style={floatingStyles}
-            {...getFloatingProps()}
-          >
-            <FloatingArrow
-              className="fill-bg-secondary"
-              ref={arrowRef}
-              context={context}
-              stroke={getColor('border-primary')}
-              strokeWidth={0.5}
-            />
-            {hint}
-          </div>,
-          document.body
-        )}
+
+      {isMounted && hint && (
+        <FloatingPortal>
+          <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>
+            <div
+              className="max-w-sm whitespace-pre-wrap rounded-sm border border-border-primary bg-bg-secondary px-2 py-1 shadow-xl"
+              style={styles}
+            >
+              {hint}
+              <FloatingArrow
+                className="fill-bg-secondary"
+                ref={arrowRef}
+                context={context}
+                stroke={getColor('border-primary')}
+                strokeWidth={0.5}
+              />
+            </div>
+          </div>
+        </FloatingPortal>
+      )}
     </>
   );
 };
diff --git a/src/renderer/src/components/index.ts b/src/renderer/src/components/index.ts
index 79708ef37..681756815 100644
--- a/src/renderer/src/components/index.ts
+++ b/src/renderer/src/components/index.ts
@@ -15,3 +15,4 @@ export * from './ComponentDeleteModal';
 export * from './Scale';
 export * from './UpdateModal';
 export * from './DiagramContextMenu';
+export * from './TutorialItem';
diff --git a/src/renderer/src/hooks/index.ts b/src/renderer/src/hooks/index.ts
index 34bc91500..ee245dd8f 100644
--- a/src/renderer/src/hooks/index.ts
+++ b/src/renderer/src/hooks/index.ts
@@ -5,3 +5,4 @@ export * from './useComponents';
 export * from './useErrorModal';
 export * from './useFileOperations';
 export * from './useCreateModalCondition';
+export * from './useIsVisibleFloating';
diff --git a/src/renderer/src/hooks/useIsVisibleFloating.ts b/src/renderer/src/hooks/useIsVisibleFloating.ts
new file mode 100644
index 000000000..a4c7d81b8
--- /dev/null
+++ b/src/renderer/src/hooks/useIsVisibleFloating.ts
@@ -0,0 +1,76 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+
+import { FloatingContext, ElementProps } from '@floating-ui/react';
+
+interface UseIsVisibleFloating {
+  closeDelay?: number;
+  openDelay?: number;
+}
+
+export const useIsVisibleFloating = (
+  context: FloatingContext,
+  props?: UseIsVisibleFloating
+): ElementProps => {
+  const {
+    elements: { domReference },
+    events,
+    onOpenChange,
+  } = context;
+
+  const { closeDelay = 3000, openDelay = 200 } = props ?? {};
+
+  const openTimeoutRef = useRef<NodeJS.Timeout>();
+  const closeTimeoutRef = useRef<NodeJS.Timeout>();
+
+  const closeWithDelay = useCallback(() => {
+    closeTimeoutRef.current = setTimeout(() => {
+      onOpenChange(false);
+    }, closeDelay);
+  }, [closeDelay, onOpenChange]);
+
+  const observer = useMemo(
+    () =>
+      new IntersectionObserver(([entry]) => {
+        if (!entry.isIntersecting) return;
+
+        openTimeoutRef.current = setTimeout(() => {
+          onOpenChange(true);
+
+          closeWithDelay();
+        }, openDelay);
+      }),
+    [closeWithDelay, onOpenChange, openDelay]
+  );
+
+  useEffect(() => {
+    function onOpenChange({ open }: { open: boolean }) {
+      if (!open) {
+        clearTimeout(openTimeoutRef.current);
+        clearTimeout(closeTimeoutRef.current);
+      }
+    }
+
+    events.on('openchange', onOpenChange);
+    return () => {
+      events.off('openchange', onOpenChange);
+    };
+  }, [events]);
+
+  useEffect(() => {
+    if (!domReference) return;
+
+    observer.observe(domReference);
+    return () => observer.disconnect();
+  }, [domReference, observer]);
+
+  return {
+    floating: {
+      onMouseEnter() {
+        clearTimeout(closeTimeoutRef.current);
+      },
+      onMouseLeave() {
+        closeWithDelay();
+      },
+    },
+  };
+};
diff --git a/src/renderer/src/store/useTutorial.ts b/src/renderer/src/store/useTutorial.ts
new file mode 100644
index 000000000..9255deab9
--- /dev/null
+++ b/src/renderer/src/store/useTutorial.ts
@@ -0,0 +1,44 @@
+import { create } from 'zustand';
+
+interface TutorialItem {
+  id: string;
+  title: string;
+  content: string;
+}
+
+interface TutorialState {
+  disabled: boolean;
+  setDisabled: (disabled: boolean) => void;
+
+  items: TutorialItem[];
+  currentItemId: string | null;
+  setItems: (items: TutorialItem[]) => void;
+
+  next: () => void;
+}
+
+export const useTutorial = create<TutorialState>((set) => ({
+  disabled: false,
+  setDisabled: (disabled) => set({ disabled }),
+
+  items: [],
+  currentItemId: null,
+  setItems: (items) => set({ items }),
+
+  next: () =>
+    set(({ currentItemId, items }) => {
+      const currentItemIndex = items.findIndex((item) => item.id === currentItemId);
+
+      if (currentItemIndex === -1 || currentItemIndex === items.length - 1) {
+        return {
+          currentItemId: null,
+        };
+      }
+
+      const nextItemIndex = currentItemIndex + 1;
+
+      return {
+        currentItemId: items[nextItemIndex]?.id,
+      };
+    }),
+}));

From ee0785a24eb39e494e9ad0bb32a39c251910e1b6 Mon Sep 17 00:00:00 2001
From: bryzZz <tebloev.nikita@mail.ru>
Date: Wed, 13 Mar 2024 12:41:43 +0800
Subject: [PATCH 2/6] many changes

---
 package.json                                  |   4 +-
 src/renderer/src/App.tsx                      |   7 +-
 .../MainContainer/MainContainer.tsx           |  20 ---
 .../components/TutorialItem/TutorialItem.tsx  | 121 +++++++++++++++++
 .../TutorialItemWithTutorial.tsx}             |  27 +---
 .../src/components/TutorialItem/index.ts      |   1 +
 .../TutorialItem}/useIsVisibleFloating.ts     |  56 +++++---
 src/renderer/src/hooks/index.ts               |   1 -
 src/renderer/src/store/ThemeContext.ts        |  15 --
 src/renderer/src/store/Tutorial.ts            | 128 ++++++++++++++++++
 src/renderer/src/store/TutorialContext.ts     |  15 ++
 src/renderer/src/store/useTutorial.ts         |  16 ++-
 12 files changed, 331 insertions(+), 80 deletions(-)
 create mode 100644 src/renderer/src/components/TutorialItem/TutorialItem.tsx
 rename src/renderer/src/components/{TutorialItem.tsx => TutorialItem/TutorialItemWithTutorial.tsx} (75%)
 create mode 100644 src/renderer/src/components/TutorialItem/index.ts
 rename src/renderer/src/{hooks => components/TutorialItem}/useIsVisibleFloating.ts (52%)
 delete mode 100644 src/renderer/src/store/ThemeContext.ts
 create mode 100644 src/renderer/src/store/Tutorial.ts
 create mode 100644 src/renderer/src/store/TutorialContext.ts

diff --git a/package.json b/package.json
index 0bb1a54c0..0b32b02e6 100644
--- a/package.json
+++ b/package.json
@@ -34,8 +34,8 @@
     "@codemirror/lang-xml": "^6.0.2",
     "@electron-toolkit/preload": "^2.0.0",
     "@electron-toolkit/utils": "^1.0.2",
-    "@floating-ui/react": "^0.24.8",
-    "@floating-ui/react-dom": "^2.0.1",
+    "@floating-ui/react": "^0.26.9",
+    "@floating-ui/react-dom": "^2.0.8",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@types/ws": "^8.5.10",
     "@uiw/react-codemirror": "^4.21.21",
diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 59525fb52..17a053efc 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -4,14 +4,19 @@ import { MainContainer } from '@renderer/components';
 import { CanvasEditor } from '@renderer/lib/CanvasEditor';
 
 import { EditorContext } from './store/EditorContext';
+import { Tutorial } from './store/Tutorial';
+import { TutorialContext } from './store/TutorialContext';
 
 // TODO: а если у нас будет несколько редакторов?
 export const App: React.FC = () => {
   const { current: editor } = useRef(new CanvasEditor());
+  const { current: tutorial } = useRef(new Tutorial());
 
   return (
     <EditorContext.Provider value={editor}>
-      <MainContainer />
+      <TutorialContext.Provider value={tutorial}>
+        <MainContainer />
+      </TutorialContext.Provider>
     </EditorContext.Provider>
   );
 };
diff --git a/src/renderer/src/components/MainContainer/MainContainer.tsx b/src/renderer/src/components/MainContainer/MainContainer.tsx
index 5af45d87c..4017de307 100644
--- a/src/renderer/src/components/MainContainer/MainContainer.tsx
+++ b/src/renderer/src/components/MainContainer/MainContainer.tsx
@@ -24,7 +24,6 @@ import {
 } from '@renderer/lib/data/PlatformLoader';
 import { preloadPicto } from '@renderer/lib/drawable/Picto';
 import { useEditorContext } from '@renderer/store/EditorContext';
-import { useTutorial } from '@renderer/store/useTutorial';
 
 import { NotInitialized } from './NotInitialized';
 import { Tabs } from './Tabs';
@@ -48,7 +47,6 @@ export const MainContainer: React.FC = () => {
   });
 
   useAppTitle();
-  const setTutorialItems = useTutorial((state) => state.setItems);
 
   const onDrop = useCallback(
     (acceptedFiles: File[]) => {
@@ -78,24 +76,6 @@ export const MainContainer: React.FC = () => {
         openPlatformError(errs);
       }
     });
-
-    // TODO(bryzZz) Подгрузка туториала из файла
-    const tutorial = {
-      items: [
-        {
-          id: '1',
-          title: 'Пример',
-          content: 'Попробуй добавить новый компонент',
-        },
-        {
-          id: '2',
-          title: 'Иерархия состояний',
-          content: 'Иерархия состояний позволяет посмотреть компоненты схемы ввиде списка',
-        },
-      ],
-    };
-
-    setTutorialItems(tutorial.items);
   }, []);
 
   return (
diff --git a/src/renderer/src/components/TutorialItem/TutorialItem.tsx b/src/renderer/src/components/TutorialItem/TutorialItem.tsx
new file mode 100644
index 000000000..33b816cc3
--- /dev/null
+++ b/src/renderer/src/components/TutorialItem/TutorialItem.tsx
@@ -0,0 +1,121 @@
+import React, { useRef, useState } from 'react';
+
+import {
+  useFloating,
+  FloatingPortal,
+  useInteractions,
+  offset as offsetMiddleware,
+  flip,
+  shift,
+  FloatingArrow,
+  arrow,
+  useTransitionStyles,
+} from '@floating-ui/react';
+
+import { ReactComponent as Close } from '@renderer/assets/icons/close.svg';
+import { Checkbox } from '@renderer/components/UI';
+import { Tutorial, TutorialItem as TutorialItemType } from '@renderer/store/Tutorial';
+import { useTutorialContext } from '@renderer/store/TutorialContext';
+import { getColor } from '@renderer/theme';
+
+import { useIsVisibleFloating } from './useIsVisibleFloating';
+
+interface TutorialItemProps {
+  children: (props: Record<string, any>) => React.ReactNode;
+  id: string;
+}
+
+interface TutorialItemWithTutorialProps extends TutorialItemProps {
+  tutorial: Tutorial;
+  tutorialItem: TutorialItemType;
+}
+
+export const TutorialItemWithTutorial: React.FC<TutorialItemWithTutorialProps> = (props) => {
+  const { children, id, tutorial, tutorialItem } = props;
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const arrowRef = useRef<SVGSVGElement | null>(null);
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: 'right',
+    middleware: [
+      offsetMiddleware(10),
+      flip(),
+      shift({ padding: 5 }),
+      arrow({
+        element: arrowRef,
+      }),
+    ],
+  });
+
+  const isVisible = useIsVisibleFloating(context, { tutorial, id });
+  const { getReferenceProps, getFloatingProps } = useInteractions([isVisible]);
+
+  const { isMounted, styles } = useTransitionStyles(context, {
+    initial: {
+      transform: 'translateX(2px)',
+      opacity: 0,
+    },
+  });
+
+  return (
+    <>
+      {children({
+        ref: refs.setReference,
+        ...getReferenceProps(),
+      })}
+
+      {isMounted && tutorialItem && (
+        <FloatingPortal>
+          <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>
+            <div
+              className="max-w-sm whitespace-pre-wrap rounded-sm border border-border-primary bg-bg-secondary py-2 shadow-xl"
+              style={styles}
+            >
+              <div className="flex justify-between pl-4 pr-2">
+                <h3 className="text-lg">{tutorialItem.title}</h3>
+
+                <button
+                  className="rounded-full p-2 transition-colors hover:bg-bg-hover active:bg-bg-active"
+                  onClick={() => context.onOpenChange(false)}
+                >
+                  <Close width="1rem" height="1rem" />
+                </button>
+              </div>
+
+              <div className="px-4">
+                <p className="mb-2 text-base">{tutorialItem.content}</p>
+
+                <p className="flex items-center justify-end gap-2 text-sm">
+                  Больше не показывать подсказки <Checkbox />
+                </p>
+              </div>
+
+              <FloatingArrow
+                className="fill-bg-secondary"
+                ref={arrowRef}
+                context={context}
+                stroke={getColor('border-primary')}
+                strokeWidth={0.5}
+              />
+            </div>
+          </div>
+        </FloatingPortal>
+      )}
+    </>
+  );
+};
+
+export const TutorialItem: React.FC<TutorialItemProps> = (props) => {
+  const tutorial = useTutorialContext();
+
+  const tutorialItem = tutorial.useGetItem(props.id);
+
+  if (tutorialItem && !tutorialItem.showed) {
+    return <TutorialItemWithTutorial {...props} tutorial={tutorial} tutorialItem={tutorialItem} />;
+  }
+
+  return props.children({});
+};
diff --git a/src/renderer/src/components/TutorialItem.tsx b/src/renderer/src/components/TutorialItem/TutorialItemWithTutorial.tsx
similarity index 75%
rename from src/renderer/src/components/TutorialItem.tsx
rename to src/renderer/src/components/TutorialItem/TutorialItemWithTutorial.tsx
index 48f3fd205..9c4485092 100644
--- a/src/renderer/src/components/TutorialItem.tsx
+++ b/src/renderer/src/components/TutorialItem/TutorialItemWithTutorial.tsx
@@ -13,30 +13,17 @@ import {
 } from '@floating-ui/react';
 
 import { Checkbox } from '@renderer/components/UI';
-import { useIsVisibleFloating } from '@renderer/hooks';
 import { getColor } from '@renderer/theme';
 
-const tutorial = {
-  items: [
-    {
-      id: '1',
-      title: 'Пример',
-      content: 'Попробуй добавить новый компонент',
-    },
-    {
-      id: '2',
-      title: 'Иерархия состояний',
-      content: 'Иерархия состояний позволяет посмотреть компоненты схемы ввиде списка',
-    },
-  ],
-};
-
-interface TutorialItemProps {
+interface TutorialItemWithTutorialProps {
   children: (props: Record<string, any>) => React.ReactNode;
   id: string;
 }
 
-export const TutorialItem: React.FC<TutorialItemProps> = ({ children, id }) => {
+export const TutorialItemWithTutorial: React.FC<TutorialItemWithTutorialProps> = ({
+  children,
+  id,
+}) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const arrowRef = useRef<SVGSVGElement | null>(null);
@@ -54,7 +41,7 @@ export const TutorialItem: React.FC<TutorialItemProps> = ({ children, id }) => {
     ],
   });
 
-  const isVisible = useIsVisibleFloating(context);
+  const isVisible = useIsVisibleFloating(context, { tutorial, id, disabled: tutorialItem?.showed });
   const { getReferenceProps, getFloatingProps } = useInteractions([isVisible]);
 
   const { isMounted, styles } = useTransitionStyles(context, {
@@ -64,8 +51,6 @@ export const TutorialItem: React.FC<TutorialItemProps> = ({ children, id }) => {
     },
   });
 
-  const tutorialItem = tutorial.items.find((item) => item.id === id);
-
   return (
     <>
       {children({
diff --git a/src/renderer/src/components/TutorialItem/index.ts b/src/renderer/src/components/TutorialItem/index.ts
new file mode 100644
index 000000000..2a4d5b033
--- /dev/null
+++ b/src/renderer/src/components/TutorialItem/index.ts
@@ -0,0 +1 @@
+export * from './TutorialItem';
diff --git a/src/renderer/src/hooks/useIsVisibleFloating.ts b/src/renderer/src/components/TutorialItem/useIsVisibleFloating.ts
similarity index 52%
rename from src/renderer/src/hooks/useIsVisibleFloating.ts
rename to src/renderer/src/components/TutorialItem/useIsVisibleFloating.ts
index a4c7d81b8..6b028f543 100644
--- a/src/renderer/src/hooks/useIsVisibleFloating.ts
+++ b/src/renderer/src/components/TutorialItem/useIsVisibleFloating.ts
@@ -2,14 +2,19 @@ import { useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { FloatingContext, ElementProps } from '@floating-ui/react';
 
+import { Tutorial } from '@renderer/store/Tutorial';
+
 interface UseIsVisibleFloating {
+  tutorial: Tutorial;
+  id: string;
+
   closeDelay?: number;
   openDelay?: number;
 }
 
 export const useIsVisibleFloating = (
   context: FloatingContext,
-  props?: UseIsVisibleFloating
+  props: UseIsVisibleFloating
 ): ElementProps => {
   const {
     elements: { domReference },
@@ -17,7 +22,7 @@ export const useIsVisibleFloating = (
     onOpenChange,
   } = context;
 
-  const { closeDelay = 3000, openDelay = 200 } = props ?? {};
+  const { tutorial, id, closeDelay = 3000, openDelay = 200 } = props;
 
   const openTimeoutRef = useRef<NodeJS.Timeout>();
   const closeTimeoutRef = useRef<NodeJS.Timeout>();
@@ -28,33 +33,28 @@ export const useIsVisibleFloating = (
     }, closeDelay);
   }, [closeDelay, onOpenChange]);
 
-  const observer = useMemo(
-    () =>
-      new IntersectionObserver(([entry]) => {
-        if (!entry.isIntersecting) return;
+  const observer = useMemo(() => {
+    return new IntersectionObserver(([entry]) => {
+      if (!entry.isIntersecting) return tutorial.cancelShow(id);
 
-        openTimeoutRef.current = setTimeout(() => {
-          onOpenChange(true);
-
-          closeWithDelay();
-        }, openDelay);
-      }),
-    [closeWithDelay, onOpenChange, openDelay]
-  );
+      tutorial.requestShow(id);
+    });
+  }, [id, tutorial]);
 
   useEffect(() => {
-    function onOpenChange({ open }: { open: boolean }) {
+    const handleOpenChange = ({ open }: { open: boolean }) => {
       if (!open) {
         clearTimeout(openTimeoutRef.current);
         clearTimeout(closeTimeoutRef.current);
+        tutorial.onClose(id);
       }
-    }
+    };
 
-    events.on('openchange', onOpenChange);
+    events.on('openchange', handleOpenChange);
     return () => {
-      events.off('openchange', onOpenChange);
+      events.off('openchange', handleOpenChange);
     };
-  }, [events]);
+  }, [events, id, tutorial]);
 
   useEffect(() => {
     if (!domReference) return;
@@ -63,6 +63,18 @@ export const useIsVisibleFloating = (
     return () => observer.disconnect();
   }, [domReference, observer]);
 
+  useEffect(() => {
+    const unsubscribe = tutorial.onAvailableToShow(id, () => {
+      openTimeoutRef.current = setTimeout(() => {
+        onOpenChange(true);
+
+        closeWithDelay();
+      }, openDelay);
+    });
+
+    return () => unsubscribe();
+  }, [closeWithDelay, id, onOpenChange, openDelay, tutorial]);
+
   return {
     floating: {
       onMouseEnter() {
@@ -71,6 +83,12 @@ export const useIsVisibleFloating = (
       onMouseLeave() {
         closeWithDelay();
       },
+      onFocus() {
+        clearTimeout(closeTimeoutRef.current);
+      },
+      onBlur() {
+        closeWithDelay();
+      },
     },
   };
 };
diff --git a/src/renderer/src/hooks/index.ts b/src/renderer/src/hooks/index.ts
index 96b00ab19..a422dceaf 100644
--- a/src/renderer/src/hooks/index.ts
+++ b/src/renderer/src/hooks/index.ts
@@ -5,5 +5,4 @@ export * from './useComponents';
 export * from './useErrorModal';
 export * from './useFileOperations';
 export * from './useCreateModalCondition';
-export * from './useIsVisibleFloating';
 export * from './useSettings';
diff --git a/src/renderer/src/store/ThemeContext.ts b/src/renderer/src/store/ThemeContext.ts
deleted file mode 100644
index 58559d103..000000000
--- a/src/renderer/src/store/ThemeContext.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { createContext, useContext } from 'react';
-
-import { ThemeContextValue } from '@renderer/types/theme';
-
-export const ThemeContext = createContext<ThemeContextValue | null>(null);
-
-export const useThemeContext = () => {
-  const value = useContext(ThemeContext);
-
-  if (value === null) {
-    throw new Error('There must be a value!');
-  }
-
-  return value;
-};
diff --git a/src/renderer/src/store/Tutorial.ts b/src/renderer/src/store/Tutorial.ts
new file mode 100644
index 000000000..7ed573733
--- /dev/null
+++ b/src/renderer/src/store/Tutorial.ts
@@ -0,0 +1,128 @@
+import { useSyncExternalStore } from 'react';
+
+export type TutorialItem = { title: string; content: string; showed: boolean };
+type TutorialItems = Record<string, TutorialItem>;
+
+/**
+ * (bryzZz)
+ * Класс отвечающий за показ контекстной справки к элементам
+ */
+export class Tutorial {
+  private items: TutorialItems = {};
+
+  private pendingQueue: string[] = [];
+  private subscribers = new Map<string, () => void>();
+
+  private reactDataListeners = new Map<string, Array<() => void>>(); //! Подписчиков обнулять нельзя, react сам разбирается
+
+  constructor() {
+    // TODO(bryzZz) Подгрузка туториала из файла
+    const data = {
+      items: {
+        '1': {
+          title: 'Пример',
+          content: 'Попробуй добавить новый компонент',
+          showed: false,
+        },
+        '2': {
+          title: 'Иерархия состояний',
+          content: 'Иерархия состояний позволяет посмотреть компоненты схемы ввиде списка',
+          showed: false,
+        },
+      },
+    };
+
+    this.setItems(data.items);
+  }
+
+  setItems = (items: TutorialItems) => {
+    this.items = items;
+  };
+
+  private subscribe = (id: string) => (listener: () => void) => {
+    if (!this.reactDataListeners.has(id)) {
+      this.reactDataListeners.set(id, [listener]);
+    } else {
+      this.reactDataListeners.get(id)?.push(listener);
+    }
+
+    return () => {
+      const listeners = this.reactDataListeners.get(id) ?? [];
+
+      if (listeners?.length === 0) {
+        return this.reactDataListeners.delete(id);
+      }
+
+      return this.reactDataListeners.set(
+        id,
+        listeners.filter((l) => l !== listener)
+      );
+    };
+  };
+
+  /**
+   * (bryzZz)
+   * Подписка на отдельный эдемент в react.
+   * Нужно для того чтобы после просмотра части туториала react обновлял компонент и уже не вызывал кучу кода отвечающего за показ.
+   */
+  useGetItem = (id: string) => {
+    const getSnapshot = () => {
+      return this.items[id];
+    };
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useSyncExternalStore(this.subscribe(id), getSnapshot);
+  };
+
+  private emitShow = (itemId: string) => {
+    this.subscribers.get(itemId)?.();
+  };
+
+  /**
+   * (bryzZz)
+   * Запрос на показ части туториала (когда нужный эдемент попадает в поле видимости)
+   */
+  requestShow = (itemId: string) => {
+    this.pendingQueue.push(itemId);
+
+    if (this.pendingQueue.length === 1) {
+      this.emitShow(itemId);
+    }
+  };
+
+  /**
+   * (bryzZz)
+   * Отмена запроса на показ части туториала (если нужный элемент вышел из поля видимости не успев показать туториал)
+   */
+  cancelShow = (itemId: string) => {
+    this.pendingQueue = this.pendingQueue.filter((id) => id !== itemId);
+  };
+
+  /**
+   * (bryzZz)
+   * Подписка на показ части туториала.
+   * Нужна чтобы уведомить нужную часть что можно показывать
+   */
+  onAvailableToShow = (itemId: string, subscriber: () => void) => {
+    this.subscribers.set(itemId, subscriber);
+
+    return () => {
+      this.subscribers.delete(itemId);
+    };
+  };
+
+  /**
+   * (bryzZz)
+   * Эта функция когда часть туториала была показана
+   */
+  onClose = (itemId: string) => {
+    this.pendingQueue = this.pendingQueue.filter((id) => id !== itemId);
+
+    this.items[itemId] = { ...this.items[itemId], showed: true };
+    this.reactDataListeners.get(itemId)?.forEach((l) => l());
+
+    if (this.pendingQueue.length > 0) {
+      this.emitShow(this.pendingQueue[0]);
+    }
+  };
+}
diff --git a/src/renderer/src/store/TutorialContext.ts b/src/renderer/src/store/TutorialContext.ts
new file mode 100644
index 000000000..d010afdc3
--- /dev/null
+++ b/src/renderer/src/store/TutorialContext.ts
@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+import { Tutorial } from '@renderer/store/Tutorial';
+
+export const TutorialContext = createContext<Tutorial | null>(null);
+
+export const useTutorialContext = () => {
+  const value = useContext(TutorialContext);
+
+  if (value === null) {
+    throw new Error('There must be a value!');
+  }
+
+  return value;
+};
diff --git a/src/renderer/src/store/useTutorial.ts b/src/renderer/src/store/useTutorial.ts
index 9255deab9..fef5ea1cd 100644
--- a/src/renderer/src/store/useTutorial.ts
+++ b/src/renderer/src/store/useTutorial.ts
@@ -6,15 +6,26 @@ interface TutorialItem {
   content: string;
 }
 
+type Subscriber = () => void;
+type Unsubscribe = () => void;
+
 interface TutorialState {
   disabled: boolean;
   setDisabled: (disabled: boolean) => void;
 
   items: TutorialItem[];
-  currentItemId: string | null;
   setItems: (items: TutorialItem[]) => void;
 
+  requestShow: (itemId: string) => void;
+  onAvailableToShow: (itemId: string, subscriber: Subscriber) => Unsubscribe;
+  onClose: (itemId: string) => void;
+
+  pendingQueue: string[];
+  currentItemId: string | null;
+
   next: () => void;
+
+  availableToShow: (itemId: string) => boolean;
 }
 
 export const useTutorial = create<TutorialState>((set) => ({
@@ -22,6 +33,7 @@ export const useTutorial = create<TutorialState>((set) => ({
   setDisabled: (disabled) => set({ disabled }),
 
   items: [],
+  pendingQueue: [],
   currentItemId: null,
   setItems: (items) => set({ items }),
 
@@ -41,4 +53,6 @@ export const useTutorial = create<TutorialState>((set) => ({
         currentItemId: items[nextItemIndex]?.id,
       };
     }),
+
+  availableToShow: (itemId) => true,
 }));

From 5416bdfd044ca7d4ead0c0c6f78151102bdc98df Mon Sep 17 00:00:00 2001
From: bryzZz <tebloev.nikita@mail.ru>
Date: Wed, 13 Mar 2024 12:53:14 +0800
Subject: [PATCH 3/6] fix typecheck

---
 .../src/components/DiagramContextMenu.tsx     |  2 +-
 .../TutorialItem/TutorialItemWithTutorial.tsx | 89 -------------------
 src/renderer/src/store/useTutorial.ts         | 58 ------------
 3 files changed, 1 insertion(+), 148 deletions(-)
 delete mode 100644 src/renderer/src/components/TutorialItem/TutorialItemWithTutorial.tsx
 delete mode 100644 src/renderer/src/store/useTutorial.ts

diff --git a/src/renderer/src/components/DiagramContextMenu.tsx b/src/renderer/src/components/DiagramContextMenu.tsx
index f193809ce..20b712ab9 100644
--- a/src/renderer/src/components/DiagramContextMenu.tsx
+++ b/src/renderer/src/components/DiagramContextMenu.tsx
@@ -29,7 +29,7 @@ export const DiagramContextMenu: React.FC = () => {
   const { refs, floatingStyles } = useFloating({
     placement: 'bottom',
     elements: {
-      reference: getVirtualElement(position),
+      reference: getVirtualElement(position) as Element,
     },
     middleware: [offset(), flip(), shift({ padding: 5 })],
   });
diff --git a/src/renderer/src/components/TutorialItem/TutorialItemWithTutorial.tsx b/src/renderer/src/components/TutorialItem/TutorialItemWithTutorial.tsx
deleted file mode 100644
index 9c4485092..000000000
--- a/src/renderer/src/components/TutorialItem/TutorialItemWithTutorial.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { useRef, useState } from 'react';
-
-import {
-  useFloating,
-  FloatingPortal,
-  useInteractions,
-  offset as offsetMiddleware,
-  flip,
-  shift,
-  FloatingArrow,
-  arrow,
-  useTransitionStyles,
-} from '@floating-ui/react';
-
-import { Checkbox } from '@renderer/components/UI';
-import { getColor } from '@renderer/theme';
-
-interface TutorialItemWithTutorialProps {
-  children: (props: Record<string, any>) => React.ReactNode;
-  id: string;
-}
-
-export const TutorialItemWithTutorial: React.FC<TutorialItemWithTutorialProps> = ({
-  children,
-  id,
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const arrowRef = useRef<SVGSVGElement | null>(null);
-  const { refs, floatingStyles, context } = useFloating({
-    open: isOpen,
-    onOpenChange: setIsOpen,
-    placement: 'right',
-    middleware: [
-      offsetMiddleware(10),
-      flip(),
-      shift({ padding: 5 }),
-      arrow({
-        element: arrowRef,
-      }),
-    ],
-  });
-
-  const isVisible = useIsVisibleFloating(context, { tutorial, id, disabled: tutorialItem?.showed });
-  const { getReferenceProps, getFloatingProps } = useInteractions([isVisible]);
-
-  const { isMounted, styles } = useTransitionStyles(context, {
-    initial: {
-      transform: 'translateX(2px)',
-      opacity: 0,
-    },
-  });
-
-  return (
-    <>
-      {children({
-        ref: refs.setReference,
-        ...getReferenceProps(),
-      })}
-
-      {isMounted && tutorialItem && (
-        <FloatingPortal>
-          <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>
-            <div
-              className="max-w-sm whitespace-pre-wrap rounded-sm border border-border-primary bg-bg-secondary px-4 py-2 shadow-xl"
-              style={styles}
-            >
-              <h3 className="text-lg">{tutorialItem.title}</h3>
-
-              <p className="mb-2 text-base">{tutorialItem.content}</p>
-
-              <p className="flex items-center justify-end gap-2 text-sm">
-                Больше не показывать подсказки <Checkbox />
-              </p>
-
-              <FloatingArrow
-                className="fill-bg-secondary"
-                ref={arrowRef}
-                context={context}
-                stroke={getColor('border-primary')}
-                strokeWidth={0.5}
-              />
-            </div>
-          </div>
-        </FloatingPortal>
-      )}
-    </>
-  );
-};
diff --git a/src/renderer/src/store/useTutorial.ts b/src/renderer/src/store/useTutorial.ts
deleted file mode 100644
index fef5ea1cd..000000000
--- a/src/renderer/src/store/useTutorial.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { create } from 'zustand';
-
-interface TutorialItem {
-  id: string;
-  title: string;
-  content: string;
-}
-
-type Subscriber = () => void;
-type Unsubscribe = () => void;
-
-interface TutorialState {
-  disabled: boolean;
-  setDisabled: (disabled: boolean) => void;
-
-  items: TutorialItem[];
-  setItems: (items: TutorialItem[]) => void;
-
-  requestShow: (itemId: string) => void;
-  onAvailableToShow: (itemId: string, subscriber: Subscriber) => Unsubscribe;
-  onClose: (itemId: string) => void;
-
-  pendingQueue: string[];
-  currentItemId: string | null;
-
-  next: () => void;
-
-  availableToShow: (itemId: string) => boolean;
-}
-
-export const useTutorial = create<TutorialState>((set) => ({
-  disabled: false,
-  setDisabled: (disabled) => set({ disabled }),
-
-  items: [],
-  pendingQueue: [],
-  currentItemId: null,
-  setItems: (items) => set({ items }),
-
-  next: () =>
-    set(({ currentItemId, items }) => {
-      const currentItemIndex = items.findIndex((item) => item.id === currentItemId);
-
-      if (currentItemIndex === -1 || currentItemIndex === items.length - 1) {
-        return {
-          currentItemId: null,
-        };
-      }
-
-      const nextItemIndex = currentItemIndex + 1;
-
-      return {
-        currentItemId: items[nextItemIndex]?.id,
-      };
-    }),
-
-  availableToShow: (itemId) => true,
-}));

From 7493477a53dacb37dfa42f30c3dfb2dd3719b4db Mon Sep 17 00:00:00 2001
From: bryzZz <tebloev.nikita@mail.ru>
Date: Wed, 13 Mar 2024 12:56:00 +0800
Subject: [PATCH 4/6] update package.lock file

---
 package-lock.json | 74 +++++++++++++++--------------------------------
 1 file changed, 24 insertions(+), 50 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 908337ed7..ef18eca47 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,8 +14,8 @@
         "@codemirror/lang-xml": "^6.0.2",
         "@electron-toolkit/preload": "^2.0.0",
         "@electron-toolkit/utils": "^1.0.2",
-        "@floating-ui/react": "^0.24.8",
-        "@floating-ui/react-dom": "^2.0.1",
+        "@floating-ui/react": "^0.26.9",
+        "@floating-ui/react-dom": "^2.0.8",
         "@radix-ui/react-checkbox": "^1.0.4",
         "@types/ws": "^8.5.10",
         "@uiw/react-codemirror": "^4.21.21",
@@ -82,6 +82,9 @@
         "typescript": "^5.1.6",
         "vite": "^4.3.9",
         "vitest": "^0.34.6"
+      },
+      "optionalDependencies": {
+        "dmg-license": "^1.0.11"
       }
     },
     "node_modules/@75lb/deep-merge": {
@@ -1439,12 +1442,12 @@
       }
     },
     "node_modules/@floating-ui/react": {
-      "version": "0.24.8",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.24.8.tgz",
-      "integrity": "sha512-AuYeDoaR8jtUlUXtZ1IJ/6jtBkGnSpJXbGNzokBL87VDJ8opMq1Bgrc0szhK482ReQY6KZsMoZCVSb4xwalkBA==",
+      "version": "0.26.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.9.tgz",
+      "integrity": "sha512-p86wynZJVEkEq2BBjY/8p2g3biQ6TlgT4o/3KgFKyTWoJLU1GZ8wpctwRqtkEl2tseYA+kw7dBAIDFcednfI5w==",
       "dependencies": {
-        "@floating-ui/react-dom": "^2.0.1",
-        "aria-hidden": "^1.2.3",
+        "@floating-ui/react-dom": "^2.0.8",
+        "@floating-ui/utils": "^0.2.1",
         "tabbable": "^6.0.1"
       },
       "peerDependencies": {
@@ -2566,7 +2569,6 @@
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@types/plist/-/plist-3.0.5.tgz",
       "integrity": "sha512-E6OCaRmAe4WDmWNsL/9RMqdkkzDCY1etutkflWk4c+AcjDU07Pcz1fQwTX0TQz+Pxqn9i4L1TU3UFpjnrcDgxA==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "@types/node": "*",
@@ -2643,7 +2645,6 @@
       "version": "1.10.9",
       "resolved": "https://registry.npmjs.org/@types/verror/-/verror-1.10.9.tgz",
       "integrity": "sha512-MLx9Z+9lGzwEuW16ubGeNkpBDE84RpB/NyGgg6z2BTpWzKkGU451cAY3UkUzZEp72RHF585oJ3V8JVNqIplcAQ==",
-      "dev": true,
       "optional": true
     },
     "node_modules/@types/ws": {
@@ -3026,7 +3027,7 @@
       "version": "0.8.10",
       "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
       "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=10.0.0"
       }
@@ -3102,7 +3103,7 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -3127,7 +3128,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=8"
       }
@@ -3261,17 +3262,6 @@
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
-    "node_modules/aria-hidden": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz",
-      "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==",
-      "dependencies": {
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/array-back": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/array-back/-/array-back-3.1.0.tgz",
@@ -3415,7 +3405,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
       "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
-      "dev": true,
       "optional": true,
       "engines": {
         "node": ">=0.8"
@@ -3434,7 +3423,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
       "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
-      "dev": true,
       "optional": true,
       "engines": {
         "node": ">=8"
@@ -4132,7 +4120,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.1.0.tgz",
       "integrity": "sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "slice-ansi": "^3.0.0",
@@ -4376,7 +4363,6 @@
       "version": "3.8.0",
       "resolved": "https://registry.npmjs.org/crc/-/crc-3.8.0.tgz",
       "integrity": "sha512-iX3mfgcTMIq3ZKLIsVFAbv7+Mc10kxabAGQb8HvjA1o3T1PIYprbakQ65d3I+2HGHt6nSKkM9PYjgoJO2KcFBQ==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "buffer": "^5.1.0"
@@ -4386,7 +4372,6 @@
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
       "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -4720,7 +4705,6 @@
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/dmg-license/-/dmg-license-1.0.11.tgz",
       "integrity": "sha512-ZdzmqwKmECOWJpqefloC5OJy1+WZBBse5+MR88z9g9Zn4VY+WYUkAyojmhzJckH5YbbZGcYIuGAkY5/Ys5OM2Q==",
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -5101,7 +5085,7 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/end-of-stream": {
       "version": "1.4.4",
@@ -5974,7 +5958,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.4.1.tgz",
       "integrity": "sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA==",
-      "dev": true,
       "engines": [
         "node >=0.6.0"
       ],
@@ -5984,7 +5967,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/fast-diff": {
       "version": "1.3.0",
@@ -6024,7 +6007,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/fast-levenshtein": {
       "version": "2.0.6",
@@ -6764,7 +6747,6 @@
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/iconv-corefoundation/-/iconv-corefoundation-1.1.7.tgz",
       "integrity": "sha512-T10qvkw0zz4wnm560lOEg0PovVqUXuOFhhHAkixw8/sycy7TJt7v/RrkEKEQnAw2viPSJu6iAkErxnzR0g8PpQ==",
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -7022,7 +7004,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=8"
       }
@@ -7517,7 +7499,7 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -8020,7 +8002,6 @@
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-1.7.2.tgz",
       "integrity": "sha512-ibPK3iA+vaY1eEjESkQkM0BbCqFOaZMiXRTtdB0u7b4djtY6JnsjvPdUHVMg6xQt3B8fpTTWHI9A+ADjM9frzg==",
-      "dev": true,
       "optional": true
     },
     "node_modules/node-fetch": {
@@ -8478,7 +8459,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/plist/-/plist-3.1.0.tgz",
       "integrity": "sha512-uysumyrvkUX0rX/dEVqt8gC3sTBzd4zoWfLeS29nb53imdaXVvLINYXTI2GNqzaMuvacNx4uJQ8+b3zXR0pkgQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@xmldom/xmldom": "^0.8.8",
         "base64-js": "^1.5.1",
@@ -8865,7 +8846,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6"
       }
@@ -9865,7 +9846,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz",
       "integrity": "sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
@@ -9880,7 +9860,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -9896,7 +9875,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "color-name": "~1.1.4"
@@ -9909,14 +9887,12 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
       "optional": true
     },
     "node_modules/smart-buffer": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
       "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
-      "dev": true,
       "optional": true,
       "engines": {
         "node": ">= 6.0.0",
@@ -10053,7 +10029,7 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -10147,7 +10123,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -11027,7 +11003,7 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "punycode": "^2.1.0"
       }
@@ -11090,7 +11066,6 @@
       "version": "1.10.1",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.1.tgz",
       "integrity": "sha512-veufcmxri4e3XSrT0xwfUR7kguIkaxBeosDg00yDWhk49wdwkSUrvvsm7nc75e1PUyvIeZj6nS8VQRYz2/S4Xg==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "assert-plus": "^1.0.0",
@@ -11105,7 +11080,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
       "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
-      "dev": true,
       "optional": true
     },
     "node_modules/vite": {
@@ -11621,7 +11595,7 @@
       "version": "15.1.1",
       "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-15.1.1.tgz",
       "integrity": "sha512-yMqGBqtXyeN1e3TGYvgNgDVZ3j84W4cwkOXQswghol6APgZWaff9lnbvN7MHYJOiXsvGPXtjTYJEiC9J2wv9Eg==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=8.0"
       }

From 7a8a34831820a1572dc6209514d9dd8499c77c95 Mon Sep 17 00:00:00 2001
From: bryzZz <tebloev.nikita@mail.ru>
Date: Wed, 13 Mar 2024 18:25:19 +0800
Subject: [PATCH 5/6] loading tutorial from file

---
 resources/tutorial.json                       | 15 ++++++----
 src/main/file-handlers/index.ts               |  5 ++++
 src/main/{ => file-handlers}/templates.ts     |  4 +--
 src/main/file-handlers/tutorial.ts            | 18 ++++++++++++
 src/main/index.ts                             |  5 ----
 src/preload/preload.d.ts                      |  2 ++
 .../components/TutorialItem/TutorialItem.tsx  |  4 +--
 .../TutorialItem/useIsVisibleFloating.ts      | 11 +++++--
 .../lib/data/EditorManager/FilesManager.ts    |  8 ++---
 src/renderer/src/store/Tutorial.ts            | 29 +++++++------------
 10 files changed, 61 insertions(+), 40 deletions(-)
 rename src/main/{ => file-handlers}/templates.ts (94%)
 create mode 100644 src/main/file-handlers/tutorial.ts

diff --git a/resources/tutorial.json b/resources/tutorial.json
index 9ca1c8dff..d22dea305 100644
--- a/resources/tutorial.json
+++ b/resources/tutorial.json
@@ -1,9 +1,14 @@
 {
-  "items": [
-    {
-      "id": "1",
+  "items": {
+    "1": {
       "title": "Пример",
-      "content": "Попробуй добавить новый компонент"
+      "content": "Попробуй добавить новый компонент",
+      "showed": false
+    },
+    "2": {
+      "title": "Иерархия состояний",
+      "content": "Иерархия состояний позволяет посмотреть компоненты схемы ввиде списка",
+      "showed": false
     }
-  ]
+  }
 }
diff --git a/src/main/file-handlers/index.ts b/src/main/file-handlers/index.ts
index 829db8d23..d1378d9a3 100644
--- a/src/main/file-handlers/index.ts
+++ b/src/main/file-handlers/index.ts
@@ -10,6 +10,8 @@ import {
   handleOpenPlatformFile,
   handleGetFileMetadata,
 } from './handlers';
+import { getAllTemplates, getTemplate } from './templates';
+import { getTutorial } from './tutorial';
 
 /**
  * В этом файле происходит типизация IPC
@@ -26,6 +28,9 @@ const handlers = {
   getPlatforms: searchPlatforms,
   openPlatformFile: handleOpenPlatformFile,
   getMetadata: handleGetFileMetadata,
+  getAllTemplates,
+  getTemplate,
+  getTutorial,
 };
 
 /**
diff --git a/src/main/templates.ts b/src/main/file-handlers/templates.ts
similarity index 94%
rename from src/main/templates.ts
rename to src/main/file-handlers/templates.ts
index 1e70bdd70..10f922d8d 100644
--- a/src/main/templates.ts
+++ b/src/main/file-handlers/templates.ts
@@ -16,7 +16,7 @@ export const getAllTemplates = async () => {
     const dirs = (await readdir(templatesPath, { withFileTypes: true }))
       .filter((dirent) => dirent.isDirectory())
       .map((dir) => dir.name);
-    const result = {};
+    const result: Record<string, string[]> = {};
 
     for (const dirName of dirs) {
       result[dirName] = (await readdir(path.join(templatesPath, dirName))).map(removeExtension);
@@ -24,7 +24,7 @@ export const getAllTemplates = async () => {
 
     return result;
   } catch (error) {
-    return [];
+    return {};
   }
 };
 
diff --git a/src/main/file-handlers/tutorial.ts b/src/main/file-handlers/tutorial.ts
new file mode 100644
index 000000000..7c04515d1
--- /dev/null
+++ b/src/main/file-handlers/tutorial.ts
@@ -0,0 +1,18 @@
+import { readFile } from 'fs/promises';
+import path from 'path';
+
+const basePath = path.join(__dirname, '../../resources').replace('app.asar', 'app.asar.unpacked');
+
+type TutorialItem = { title: string; content: string; showed: boolean };
+type TutorialItems = Record<string, TutorialItem>;
+export type Tutorial = { items: TutorialItems };
+
+export const getTutorial = async (): Promise<Tutorial> => {
+  try {
+    const text = await readFile(path.join(basePath + '/tutorial.json'), 'utf-8');
+    return JSON.parse(text);
+  } catch (error) {
+    console.error(error);
+    return { items: {} };
+  }
+};
diff --git a/src/main/index.ts b/src/main/index.ts
index db72882d1..22898657a 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -9,7 +9,6 @@ import { initFileHandlersIPC } from './file-handlers';
 import { findFreePort } from './modules/freePortFinder';
 import { ModuleName, ModuleManager } from './modules/ModuleManager';
 import { initSettings } from './settings';
-import { getAllTemplates, getTemplate } from './templates';
 
 import icon from '../../resources/icon.png?asset';
 
@@ -112,10 +111,6 @@ app.whenReady().then(() => {
 
   ipcMain.handle('appVersion', app.getVersion);
 
-  ipcMain.handle('getAllTemplates', getAllTemplates);
-
-  ipcMain.handle('getTemplateData', (_, type: string, name: string) => getTemplate(type, name));
-
   ipcMain.handle('checkForUpdates', checkForUpdates(app.getVersion()));
 
   // Горячие клавиши для режима разрабочика:
diff --git a/src/preload/preload.d.ts b/src/preload/preload.d.ts
index 440795a7b..32ef77f21 100644
--- a/src/preload/preload.d.ts
+++ b/src/preload/preload.d.ts
@@ -1,5 +1,6 @@
 import { ElectronAPI } from '@electron-toolkit/preload';
 
+import { Tutorial } from '../main/file-handlers/tutorial';
 import { Settings } from '../main/settings';
 
 import type { API } from './index';
@@ -12,5 +13,6 @@ declare global {
   //! Это только тип, значения тут нет
   interface Main {
     settings: Settings;
+    tutorial: Tutorial;
   }
 }
diff --git a/src/renderer/src/components/TutorialItem/TutorialItem.tsx b/src/renderer/src/components/TutorialItem/TutorialItem.tsx
index 33b816cc3..bcf06d13d 100644
--- a/src/renderer/src/components/TutorialItem/TutorialItem.tsx
+++ b/src/renderer/src/components/TutorialItem/TutorialItem.tsx
@@ -14,7 +14,7 @@ import {
 
 import { ReactComponent as Close } from '@renderer/assets/icons/close.svg';
 import { Checkbox } from '@renderer/components/UI';
-import { Tutorial, TutorialItem as TutorialItemType } from '@renderer/store/Tutorial';
+import { Tutorial } from '@renderer/store/Tutorial';
 import { useTutorialContext } from '@renderer/store/TutorialContext';
 import { getColor } from '@renderer/theme';
 
@@ -27,7 +27,7 @@ interface TutorialItemProps {
 
 interface TutorialItemWithTutorialProps extends TutorialItemProps {
   tutorial: Tutorial;
-  tutorialItem: TutorialItemType;
+  tutorialItem: Main['tutorial']['items'][string];
 }
 
 export const TutorialItemWithTutorial: React.FC<TutorialItemWithTutorialProps> = (props) => {
diff --git a/src/renderer/src/components/TutorialItem/useIsVisibleFloating.ts b/src/renderer/src/components/TutorialItem/useIsVisibleFloating.ts
index 6b028f543..f4133b46d 100644
--- a/src/renderer/src/components/TutorialItem/useIsVisibleFloating.ts
+++ b/src/renderer/src/components/TutorialItem/useIsVisibleFloating.ts
@@ -20,6 +20,7 @@ export const useIsVisibleFloating = (
     elements: { domReference },
     events,
     onOpenChange,
+    open,
   } = context;
 
   const { tutorial, id, closeDelay = 3000, openDelay = 200 } = props;
@@ -35,11 +36,17 @@ export const useIsVisibleFloating = (
 
   const observer = useMemo(() => {
     return new IntersectionObserver(([entry]) => {
-      if (!entry.isIntersecting) return tutorial.cancelShow(id);
+      if (!entry.isIntersecting) {
+        if (open) {
+          onOpenChange(false);
+        }
+
+        return tutorial.cancelShow(id);
+      }
 
       tutorial.requestShow(id);
     });
-  }, [id, tutorial]);
+  }, [id, onOpenChange, open, tutorial]);
 
   useEffect(() => {
     const handleOpenChange = ({ open }: { open: boolean }) => {
diff --git a/src/renderer/src/lib/data/EditorManager/FilesManager.ts b/src/renderer/src/lib/data/EditorManager/FilesManager.ts
index ea6446b9e..306a3a73d 100644
--- a/src/renderer/src/lib/data/EditorManager/FilesManager.ts
+++ b/src/renderer/src/lib/data/EditorManager/FilesManager.ts
@@ -171,15 +171,11 @@ export class FilesManager {
   }
 
   async getAllTemplates() {
-    return (await window.electron.ipcRenderer.invoke('getAllTemplates')) as TemplatesList;
+    return window.api.fileHandlers.getAllTemplates();
   }
 
   async createFromTemplate(type: string, name: string, openImportError: (error: string) => void) {
-    const templateData = await window.electron.ipcRenderer.invoke(
-      'getTemplateData',
-      type,
-      name + '.graphml'
-    );
+    const templateData = await window.api.fileHandlers.getTemplate(type, name + '.graphml');
 
     const data = importGraphml(templateData, openImportError);
 
diff --git a/src/renderer/src/store/Tutorial.ts b/src/renderer/src/store/Tutorial.ts
index 7ed573733..024d759ba 100644
--- a/src/renderer/src/store/Tutorial.ts
+++ b/src/renderer/src/store/Tutorial.ts
@@ -1,7 +1,6 @@
 import { useSyncExternalStore } from 'react';
 
-export type TutorialItem = { title: string; content: string; showed: boolean };
-type TutorialItems = Record<string, TutorialItem>;
+type TutorialItems = Main['tutorial']['items'];
 
 /**
  * (bryzZz)
@@ -16,24 +15,18 @@ export class Tutorial {
   private reactDataListeners = new Map<string, Array<() => void>>(); //! Подписчиков обнулять нельзя, react сам разбирается
 
   constructor() {
-    // TODO(bryzZz) Подгрузка туториала из файла
-    const data = {
-      items: {
-        '1': {
-          title: 'Пример',
-          content: 'Попробуй добавить новый компонент',
-          showed: false,
-        },
-        '2': {
-          title: 'Иерархия состояний',
-          content: 'Иерархия состояний позволяет посмотреть компоненты схемы ввиде списка',
-          showed: false,
-        },
-      },
-    };
+    this.load();
+  }
+
+  /**
+   * (bryzZz)
+   * Загрузка туториала из файла
+   */
+  private load = async () => {
+    const data = await window.api.fileHandlers.getTutorial();
 
     this.setItems(data.items);
-  }
+  };
 
   setItems = (items: TutorialItems) => {
     this.items = items;

From e1133ad6529162db32d26390ec7f0a5b6ba575fa Mon Sep 17 00:00:00 2001
From: bryzZz <tebloev.nikita@mail.ru>
Date: Thu, 14 Mar 2024 10:59:52 +0800
Subject: [PATCH 6/6] add marking as shown

---
 resources/tutorial.json                        | 15 +--------------
 src/main/file-handlers/index.ts                |  3 ++-
 src/main/file-handlers/tutorial.ts             | 18 +++++++++++++++++-
 .../components/TutorialItem/TutorialItem.tsx   | 11 +++++++++--
 src/renderer/src/components/UI/Checkbox.tsx    |  2 +-
 src/renderer/src/store/Tutorial.ts             |  6 ++++--
 6 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/resources/tutorial.json b/resources/tutorial.json
index d22dea305..66a18b39c 100644
--- a/resources/tutorial.json
+++ b/resources/tutorial.json
@@ -1,14 +1 @@
-{
-  "items": {
-    "1": {
-      "title": "Пример",
-      "content": "Попробуй добавить новый компонент",
-      "showed": false
-    },
-    "2": {
-      "title": "Иерархия состояний",
-      "content": "Иерархия состояний позволяет посмотреть компоненты схемы ввиде списка",
-      "showed": false
-    }
-  }
-}
+{"items":{"1":{"title":"Пример","content":"Попробуй добавить новый компонент","showed":true},"2":{"title":"Иерархия состояний","content":"Иерархия состояний позволяет посмотреть компоненты схемы ввиде списка","showed":true}}}
\ No newline at end of file
diff --git a/src/main/file-handlers/index.ts b/src/main/file-handlers/index.ts
index d1378d9a3..b6e91a0ce 100644
--- a/src/main/file-handlers/index.ts
+++ b/src/main/file-handlers/index.ts
@@ -11,7 +11,7 @@ import {
   handleGetFileMetadata,
 } from './handlers';
 import { getAllTemplates, getTemplate } from './templates';
-import { getTutorial } from './tutorial';
+import { getTutorial, markTutorialItemAsShowed } from './tutorial';
 
 /**
  * В этом файле происходит типизация IPC
@@ -31,6 +31,7 @@ const handlers = {
   getAllTemplates,
   getTemplate,
   getTutorial,
+  markTutorialItemAsShowed,
 };
 
 /**
diff --git a/src/main/file-handlers/tutorial.ts b/src/main/file-handlers/tutorial.ts
index 7c04515d1..7e2c7a36e 100644
--- a/src/main/file-handlers/tutorial.ts
+++ b/src/main/file-handlers/tutorial.ts
@@ -1,4 +1,4 @@
-import { readFile } from 'fs/promises';
+import { readFile, writeFile } from 'fs/promises';
 import path from 'path';
 
 const basePath = path.join(__dirname, '../../resources').replace('app.asar', 'app.asar.unpacked');
@@ -16,3 +16,19 @@ export const getTutorial = async (): Promise<Tutorial> => {
     return { items: {} };
   }
 };
+
+export const markTutorialItemAsShowed = async (itemId: string) => {
+  try {
+    const tutorial = await getTutorial();
+
+    if (!(itemId in tutorial.items)) {
+      return;
+    }
+
+    tutorial.items[itemId].showed = true;
+
+    writeFile(path.join(basePath + '/tutorial.json'), JSON.stringify(tutorial));
+  } catch (reason) {
+    console.error(reason);
+  }
+};
diff --git a/src/renderer/src/components/TutorialItem/TutorialItem.tsx b/src/renderer/src/components/TutorialItem/TutorialItem.tsx
index bcf06d13d..4981f9386 100644
--- a/src/renderer/src/components/TutorialItem/TutorialItem.tsx
+++ b/src/renderer/src/components/TutorialItem/TutorialItem.tsx
@@ -88,9 +88,16 @@ export const TutorialItemWithTutorial: React.FC<TutorialItemWithTutorialProps> =
               <div className="px-4">
                 <p className="mb-2 text-base">{tutorialItem.content}</p>
 
-                <p className="flex items-center justify-end gap-2 text-sm">
+                <button
+                  className="btn-primary mb-2 ml-auto block"
+                  onClick={() => context.onOpenChange(false)}
+                >
+                  Ок
+                </button>
+
+                <label className="flex cursor-pointer items-center justify-end gap-2 text-sm">
                   Больше не показывать подсказки <Checkbox />
-                </p>
+                </label>
               </div>
 
               <FloatingArrow
diff --git a/src/renderer/src/components/UI/Checkbox.tsx b/src/renderer/src/components/UI/Checkbox.tsx
index 393fcd9e1..71fcc2880 100644
--- a/src/renderer/src/components/UI/Checkbox.tsx
+++ b/src/renderer/src/components/UI/Checkbox.tsx
@@ -9,7 +9,7 @@ export const Checkbox: React.FC<RCheckbox.CheckboxProps> = ({ className, ...prop
   return (
     <RCheckbox.Root
       className={twMerge(
-        'min-w-5 flex h-5 w-5 appearance-none items-center justify-center rounded border border-border-primary outline-none',
+        'flex h-5 w-5 min-w-5 appearance-none items-center justify-center rounded border border-border-primary outline-none',
         className
       )}
       {...props}
diff --git a/src/renderer/src/store/Tutorial.ts b/src/renderer/src/store/Tutorial.ts
index 024d759ba..c56bc6203 100644
--- a/src/renderer/src/store/Tutorial.ts
+++ b/src/renderer/src/store/Tutorial.ts
@@ -106,11 +106,13 @@ export class Tutorial {
 
   /**
    * (bryzZz)
-   * Эта функция когда часть туториала была показана
+   * Эта функция вызывается когда часть туториала была показана
    */
-  onClose = (itemId: string) => {
+  onClose = async (itemId: string) => {
     this.pendingQueue = this.pendingQueue.filter((id) => id !== itemId);
 
+    await window.api.fileHandlers.markTutorialItemAsShowed(itemId);
+
     this.items[itemId] = { ...this.items[itemId], showed: true };
     this.reactDataListeners.get(itemId)?.forEach((l) => l());
 
