Refactor code structure and remove redundant code blocks for improved readability and maintainability

app/src/components/layout/scenes/ComparisonScene.tsx

@@ -1,6 +1,5 @@
 import { useProductContext } from '../../../modules/simulation/products/productContext'
 import RegularDropDown from '../../ui/inputs/RegularDropDown';
-import { useProductStore } from '../../../store/simulation/useProductStore';
 import { useCompareProductDataStore, useLoadingProgress, useSaveVersion } from '../../../store/builder/store';
 import useModuleStore from '../../../store/useModuleStore';
 import CompareLayOut from '../../ui/compareVersion/CompareLayOut';
@@ -10,10 +9,12 @@ import { usePlayButtonStore } from '../../../store/usePlayButtonStore';
 import { useEffect, useState } from 'react';
 import { useVersionHistoryStore } from '../../../store/builder/useVersionHistoryStore';
 import { useVersionContext } from '../../../modules/builder/version/versionContext';
+import { useSceneContext } from '../../../modules/scene/sceneContext';
 
 function ComparisonScene() {
     const { isPlaying } = usePlayButtonStore();
-    const { products } = useProductStore();
+    const { productStore } = useSceneContext();
+    const { products } = productStore();
     const { isVersionSaved } = useSaveVersion();
     const { activeModule } = useModuleStore();
     const { selectedProductStore } = useProductContext();
@@ -25,20 +26,27 @@ function ComparisonScene() {
     const [shouldShowComparisonResult, setShouldShowComparisonResult] = useState(false);
     const { versionHistory } = useVersionHistoryStore();
     const { selectedVersionStore } = useVersionContext();
-    const { setSelectedVersion } = selectedVersionStore();
+    const { selectedVersion, setSelectedVersion } = selectedVersionStore();
 
-    const handleSelectLayout = (option: string) => {
+    const handleSelectVersion = (option: string) => {
+        const version = versionHistory.find((version) => version.versionName === option);
+        if (version) {
+            setSelectedVersion(version);
+        }
+    };
+
+    const handleSelectProduct = (option: string) => {
         const product = products.find((product) => product.productName === option);
         if (product) {
             setComparisonProduct(product.productUuid, product.productName);
         }
     };
 
-    useEffect(() => {
+    // useEffect(() => {
-        if (versionHistory.length > 0) {
+    //     if (versionHistory.length > 0) {
-            setSelectedVersion(versionHistory[0])
+    //         setSelectedVersion(versionHistory[0])
-        }
+    //     }
-    }, [versionHistory])
+    // }, [versionHistory])
 
     // useEffect(() => {
     //     setCompareProductsData([
@@ -69,7 +77,7 @@ function ComparisonScene() {
     //             }
     //         }
     //     ])
-    // }, []); // ✅ Runs only once on mount
+    // }, []);
 
 
     useEffect(() => {
@@ -91,12 +99,19 @@ function ComparisonScene() {
         <>
             {isVersionSaved && activeModule === "simulation" && selectedProduct && (
                 <>
-                    {comparisonProduct && !isPlaying &&
+                    {selectedVersion && !isPlaying &&
                         <div className="initial-selectLayout-wrapper">
+                            <RegularDropDown
+                                header={selectedVersion.versionName}
+                                options={versionHistory.map((v) => v.versionName)} // Pass layout names as options
+                                onSelect={handleSelectVersion}
+                                search={false}
+                            />
+                            <br />
                             <RegularDropDown
                                 header={selectedProduct.productName}
                                 options={products.map((l) => l.productName)} // Pass layout names as options
-                                onSelect={handleSelectLayout}
+                                onSelect={handleSelectProduct}
                                 search={false}
                             />
                         </div>

app/src/components/layout/scenes/MainScene.tsx

@@ -30,7 +30,6 @@ import {
   useMainProduct,
 } from "../../../store/simulation/useSimulationStore";
 import { useProductContext } from "../../../modules/simulation/products/productContext";
-import { useProductStore } from "../../../store/simulation/useProductStore";
 import RegularDropDown from "../../ui/inputs/RegularDropDown";
 import RenameTooltip from "../../ui/features/RenameTooltip";
 import { setAssetsApi } from "../../../services/factoryBuilder/assest/floorAsset/setAssetsApi";
@@ -42,7 +41,6 @@ import VersionSaved from "../sidebarRight/versionHisory/VersionSaved";
 import Footer from "../../footer/Footer";
 
 function MainScene() {
-  const { products } = useProductStore();
   const { setMainProduct } = useMainProduct();
   const { selectedProductStore } = useProductContext();
   const { selectedProduct } = selectedProductStore();
@@ -58,13 +56,14 @@ function MainScene() {
   const { setFloatingWidget } = useFloatingWidget();
   const { clearComparisonProduct } = useComparisonProduct();
   const { selectedFloorItem, setSelectedFloorItem } = useSelectedFloorItem();
-  const { assetStore } = useSceneContext();
+  const { assetStore, productStore } = useSceneContext();
+  const { products } = productStore();
   const { setName } = assetStore();
   const { projectId } = useParams()
   const { isRenameMode, setIsRenameMode } = useRenameModeStore();
   const { versionHistory } = useVersionHistoryStore();
   const { selectedVersionStore } = useVersionContext();
-  const { setSelectedVersion } = selectedVersionStore();
+  const { selectedVersion, setSelectedVersion } = selectedVersionStore();
 
   useEffect(() => {
     if (activeModule !== 'simulation') {
@@ -79,7 +78,14 @@ function MainScene() {
     }
   }, [versionHistory])
 
-  const handleSelectLayout = (option: string) => {
+  const handleSelectVersion = (option: string) => {
+    const version = versionHistory.find((version) => version.versionName === option);
+    if (version) {
+      setSelectedVersion(version);
+    }
+  };
+
+  const handleSelectProduct = (option: string) => {
     const product = products.find((product) => product.productName === option);
     if (product) {
       setMainProduct(product.productUuid, product.productName);
@@ -157,12 +163,19 @@ function MainScene() {
         <Scene layout="Main Layout" />
       </div>
 
-      {selectedProduct && isVersionSaved && !isPlaying && activeModule === "simulation" && (
+      {selectedProduct && selectedVersion && isVersionSaved && !isPlaying && activeModule === "simulation" && (
         <div className="selectLayout-wrapper">
+          <RegularDropDown
+            header={selectedVersion.versionName}
+            options={versionHistory.map((v) => v.versionName)} // Pass layout names as options
+            onSelect={handleSelectVersion}
+            search={false}
+          />
+          <br />
           <RegularDropDown
             header={selectedProduct.productName}
             options={products.map((l) => l.productName)} // Pass layout names as options
-            onSelect={handleSelectLayout}
+            onSelect={handleSelectProduct}
             search={false}
           />
         </div>

app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx

@@ -3,7 +3,6 @@ import {
   useSelectedEventData,
   useSelectedEventSphere,
 } from "../../../../../store/simulation/useSimulationStore";
-import { useProductStore } from "../../../../../store/simulation/useProductStore";
 import ConveyorMechanics from "./mechanics/conveyorMechanics";
 import VehicleMechanics from "./mechanics/vehicleMechanics";
 import RoboticArmMechanics from "./mechanics/roboticArmMechanics";
@@ -11,21 +10,19 @@ import MachineMechanics from "./mechanics/machineMechanics";
 import StorageMechanics from "./mechanics/storageMechanics";
 import { AddIcon } from "../../../../icons/ExportCommonIcons";
 import { handleAddEventToProduct } from "../../../../../modules/simulation/events/points/functions/handleAddEventToProduct";
-import { useEventsStore } from "../../../../../store/simulation/useEventsStore";
 import { useProductContext } from "../../../../../modules/simulation/products/productContext";
 import { useParams } from "react-router-dom";
 import { useVersionContext } from "../../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../../modules/scene/sceneContext";
 
 const EventProperties: React.FC = () => {
   const { selectedEventData } = useSelectedEventData();
-  const { getEventByModelUuid } = useProductStore();
   const { selectedProductStore } = useProductContext();
+  const { eventStore, productStore } = useSceneContext();
   const { selectedProduct } = selectedProductStore();
-  const [currentEventData, setCurrentEventData] = useState<EventsSchema | null>(
+  const [currentEventData, setCurrentEventData] = useState<EventsSchema | null>(null);
-    null
-  );
   const [assetType, setAssetType] = useState<string | null>(null);
-  const { products, addEvent } = useProductStore();
+  const { products, addEvent, getEventByModelUuid } = productStore();
   const { selectedEventSphere } = useSelectedEventSphere();
   const { selectedVersionStore } = useVersionContext();
   const { selectedVersion } = selectedVersionStore();
@@ -105,7 +102,7 @@ const EventProperties: React.FC = () => {
                   onClick={() => {
                     if (selectedEventData) {
                       handleAddEventToProduct({
-                        event: useEventsStore
+                        event: eventStore
                           .getState()
                           .getEventByModelUuid(
                             selectedEventData?.data.modelUuid

app/src/components/layout/sidebarRight/properties/eventProperties/components/ActionsList.tsx

@@ -9,11 +9,11 @@ import { handleResize } from "../../../../../../functions/handleResizePannel";
 import {
   useSelectedAction,
 } from "../../../../../../store/simulation/useSimulationStore";
-import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/products/UpsertProductOrEventApi";
 import { useProductContext } from "../../../../../../modules/simulation/products/productContext";
 import { useParams } from "react-router-dom";
 import { useVersionContext } from "../../../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../../../modules/scene/sceneContext";
 
 interface ActionsListProps {
   selectedPointData: any;
@@ -31,7 +31,9 @@ const ActionsList: React.FC<ActionsListProps> = ({
   const actionsContainerRef = useRef<HTMLDivElement>(null);
 
   // store
-  const { renameAction } = useProductStore();
+
+  const { productStore } = useSceneContext();
+  const { renameAction } = productStore();
   const { selectedProductStore } = useProductContext();
   const { selectedProduct } = selectedProductStore();
   const { selectedAction, setSelectedAction } = useSelectedAction();

app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx

@@ -9,18 +9,19 @@ import SpawnAction from "../actions/SpawnAction";
 import DefaultAction from "../actions/DefaultAction";
 import Trigger from "../trigger/Trigger";
 import { useSelectedAction, useSelectedEventData } from "../../../../../../store/simulation/useSimulationStore";
-import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import ActionsList from "../components/ActionsList";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/products/UpsertProductOrEventApi";
 import { useProductContext } from "../../../../../../modules/simulation/products/productContext";
 import { useParams } from "react-router-dom";
 import { useVersionContext } from "../../../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../../../modules/scene/sceneContext";
 
 function ConveyorMechanics() {
     const [activeOption, setActiveOption] = useState<"default" | "spawn" | "swap" | "delay" | "despawn">("default");
     const [selectedPointData, setSelectedPointData] = useState<ConveyorPointSchema | undefined>();
     const { selectedEventData } = useSelectedEventData();
-    const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } = useProductStore();
+    const { productStore } = useSceneContext();
+    const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } = productStore();
     const { selectedProductStore } = useProductContext();
     const { selectedProduct } = selectedProductStore();
     const { setSelectedAction, clearSelectedAction } = useSelectedAction();

app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx

@@ -3,19 +3,20 @@ import RenameInput from "../../../../../ui/inputs/RenameInput";
 import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
 import Trigger from "../trigger/Trigger";
 import { useSelectedAction, useSelectedEventData } from "../../../../../../store/simulation/useSimulationStore";
-import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import ProcessAction from "../actions/ProcessAction";
 import ActionsList from "../components/ActionsList";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/products/UpsertProductOrEventApi";
 import { useProductContext } from "../../../../../../modules/simulation/products/productContext";
 import { useParams } from "react-router-dom";
 import { useVersionContext } from "../../../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../../../modules/scene/sceneContext";
 
 function MachineMechanics() {
     const [activeOption, setActiveOption] = useState<"default" | "process">("default");
     const [selectedPointData, setSelectedPointData] = useState<MachinePointSchema | undefined>();
     const { selectedEventData } = useSelectedEventData();
-    const { getPointByUuid, updateAction } = useProductStore();
+    const { productStore } = useSceneContext();
+    const { getPointByUuid, updateAction } = productStore();
     const { selectedProductStore } = useProductContext();
     const { selectedProduct } = selectedProductStore();
     const { setSelectedAction, clearSelectedAction } = useSelectedAction();

app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx

@@ -5,19 +5,20 @@ import RenameInput from "../../../../../ui/inputs/RenameInput";
 import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
 import Trigger from "../trigger/Trigger";
 import { useSelectedEventData, useSelectedAction } from "../../../../../../store/simulation/useSimulationStore";
-import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import PickAndPlaceAction from "../actions/PickAndPlaceAction";
 import ActionsList from "../components/ActionsList";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/products/UpsertProductOrEventApi";
 import { useProductContext } from "../../../../../../modules/simulation/products/productContext";
 import { useParams } from "react-router-dom";
 import { useVersionContext } from "../../../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../../../modules/scene/sceneContext";
 
 function RoboticArmMechanics() {
     const [activeOption, setActiveOption] = useState<"default" | "pickAndPlace">("default");
     const [selectedPointData, setSelectedPointData] = useState<RoboticArmPointSchema | undefined>();
     const { selectedEventData } = useSelectedEventData();
-    const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction, addAction, removeAction, } = useProductStore();
+    const { productStore } = useSceneContext();
+    const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction, addAction, removeAction, } = productStore();
     const { selectedProductStore } = useProductContext();
     const { selectedProduct } = selectedProductStore();
     const { selectedAction, setSelectedAction, clearSelectedAction } = useSelectedAction();

app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx

@@ -5,18 +5,19 @@ import Trigger from "../trigger/Trigger";
 import StorageAction from "../actions/StorageAction";
 import ActionsList from "../components/ActionsList";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/products/UpsertProductOrEventApi";
-import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import { useSelectedAction, useSelectedEventData } from "../../../../../../store/simulation/useSimulationStore";
 import * as THREE from 'three';
 import { useProductContext } from "../../../../../../modules/simulation/products/productContext";
 import { useParams } from "react-router-dom";
 import { useVersionContext } from "../../../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../../../modules/scene/sceneContext";
 
 function StorageMechanics() {
     const [activeOption, setActiveOption] = useState<"default" | "store" | "spawn">("default");
     const [selectedPointData, setSelectedPointData] = useState<StoragePointSchema | undefined>();
     const { selectedEventData } = useSelectedEventData();
-    const { getPointByUuid, updateAction } = useProductStore();
+    const { productStore } = useSceneContext();
+    const { getPointByUuid, updateAction } = productStore();
     const { selectedProductStore } = useProductContext();
     const { selectedProduct } = selectedProductStore();
     const { setSelectedAction, clearSelectedAction } = useSelectedAction();

app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx

@@ -7,19 +7,20 @@ import {
     useSelectedAction,
     useSelectedEventData,
 } from "../../../../../../store/simulation/useSimulationStore";
-import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import TravelAction from "../actions/TravelAction";
 import ActionsList from "../components/ActionsList";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/products/UpsertProductOrEventApi";
 import { useProductContext } from "../../../../../../modules/simulation/products/productContext";
 import { useParams } from "react-router-dom";
 import { useVersionContext } from "../../../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../../../modules/scene/sceneContext";
 
 function VehicleMechanics() {
     const [activeOption, setActiveOption] = useState<"default" | "travel">("default");
     const [selectedPointData, setSelectedPointData] = useState<VehiclePointSchema | undefined>();
     const { selectedEventData } = useSelectedEventData();
-    const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } = useProductStore();
+    const { productStore } = useSceneContext();
+    const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } = productStore();
     const { selectedProductStore } = useProductContext();
     const { selectedProduct } = selectedProductStore();
     const { setSelectedAction, clearSelectedAction } = useSelectedAction();

app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx

@@ -4,12 +4,12 @@ import { AddIcon, RemoveIcon, ResizeHeightIcon } from "../../../../../icons/Expo
 import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
 import RenameInput from "../../../../../ui/inputs/RenameInput";
 import { handleResize } from "../../../../../../functions/handleResizePannel";
-import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import { useSelectedAction } from "../../../../../../store/simulation/useSimulationStore";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/products/UpsertProductOrEventApi";
 import { useProductContext } from "../../../../../../modules/simulation/products/productContext";
 import { useParams } from "react-router-dom";
 import { useVersionContext } from "../../../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../../../modules/scene/sceneContext";
 
 type TriggerProps = {
     selectedPointData?: PointsScheme | undefined;
@@ -20,7 +20,8 @@ const Trigger = ({ selectedPointData, type }: TriggerProps) => {
     const [currentAction, setCurrentAction] = useState<string | undefined>();
     const { selectedProductStore } = useProductContext();
     const { selectedProduct } = selectedProductStore();
-    const { getActionByUuid, getEventByModelUuid, getPointByUuid, getTriggerByUuid, addTrigger, removeTrigger, updateTrigger, renameTrigger, getProductById, } = useProductStore();
+    const { productStore } = useSceneContext();
+    const { getActionByUuid, getEventByModelUuid, getPointByUuid, getTriggerByUuid, addTrigger, removeTrigger, updateTrigger, renameTrigger, getProductById, } = productStore();
     const [triggers, setTriggers] = useState<TriggerSchema[]>([]);
     const [selectedTrigger, setSelectedTrigger] = useState<TriggerSchema | undefined>();
     const [activeOption, setActiveOption] = useState<"onComplete" | "onStart" | "onStop" | "delay" | "onError">("onComplete");

app/src/components/layout/sidebarRight/simulation/Simulations.tsx

@@ -3,12 +3,10 @@ import { AddIcon, ArrowIcon, RemoveIcon, ResizeHeightIcon, } from "../../../icon
 import RenameInput from "../../../ui/inputs/RenameInput";
 import { handleResize } from "../../../../functions/handleResizePannel";
 import { useMainProduct, useSelectedAsset } from "../../../../store/simulation/useSimulationStore";
-import { useProductStore } from "../../../../store/simulation/useProductStore";
 import { generateUUID } from "three/src/math/MathUtils";
 import RenderOverlay from "../../../templates/Overlay";
 import EditWidgetOption from "../../../ui/menu/EditWidgetOption";
 import { handleAddEventToProduct } from "../../../../modules/simulation/events/points/functions/handleAddEventToProduct";
-import { useEventsStore } from "../../../../store/simulation/useEventsStore";
 import { deleteEventDataApi } from "../../../../services/simulation/products/deleteEventDataApi";
 import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi";
 import { deleteProductApi } from "../../../../services/simulation/products/deleteProductApi";
@@ -20,6 +18,7 @@ import { useToggleStore } from "../../../../store/useUIToggleStore";
 import { useProductContext } from "../../../../modules/simulation/products/productContext";
 import { useParams } from "react-router-dom";
 import { useVersionContext } from "../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../modules/scene/sceneContext";
 
 interface Event {
     modelName: string;
@@ -40,10 +39,11 @@ const List: React.FC<ListProps> = ({ val }) => {
 
 const Simulations: React.FC = () => {
     const productsContainerRef = useRef<HTMLDivElement>(null);
-    const { products, addProduct, removeProduct, renameProduct, addEvent, removeEvent, getProductById, } = useProductStore();
+    const { eventStore, productStore } = useSceneContext();
+    const { products, addProduct, removeProduct, renameProduct, addEvent, removeEvent, getProductById, } = productStore();
     const { selectedProductStore } = useProductContext();
     const { selectedProduct, setSelectedProduct } = selectedProductStore();
-    const { getEventByModelUuid } = useEventsStore();
+    const { getEventByModelUuid } = eventStore();
     const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
     const [openObjects, setOpenObjects] = useState(true);
     const [processes, setProcesses] = useState<Event[][]>();

app/src/components/ui/compareVersion/CompareLayOut.tsx

@@ -10,15 +10,22 @@ import {
 } from "../../../store/builder/store";
 import Search from "../inputs/Search";
 import OuterClick from "../../../utils/outerClick";
-import { useProductStore } from "../../../store/simulation/useProductStore";
 import Scene from "../../../modules/scene/scene";
 import { useComparisonProduct } from "../../../store/simulation/useSimulationStore";
-import { usePauseButtonStore, usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import { useVersionHistoryStore } from "../../../store/builder/useVersionHistoryStore";
+import { useVersionContext } from "../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../modules/scene/sceneContext";
+import { getAllProductsApi } from "../../../services/simulation/products/getallProductsApi";
+import { useParams } from "react-router-dom";
 
 const CompareLayOut = () => {
-  const { comparisonProduct, setComparisonProduct, clearComparisonProduct } =
+  const { clearComparisonProduct, comparisonProduct, setComparisonProduct } = useComparisonProduct();
-    useComparisonProduct();
+  const { productStore } = useSceneContext();
-  const { products } = useProductStore();
+  const { products } = productStore();
+  const { versionHistory } = useVersionHistoryStore();
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion, setSelectedVersion, clearSelectedVersion } = selectedVersionStore();
   const { setLoadingProgress } = useLoadingProgress();
   const [width, setWidth] = useState("50vw");
   const [isResizing, setIsResizing] = useState(false);
@@ -29,7 +36,13 @@ const CompareLayOut = () => {
   const { setIsVersionSaved } = useSaveVersion();
   const { loadingProgress } = useLoadingProgress();
   const { setIsPlaying } = usePlayButtonStore();
-  const { setIsPaused } = usePauseButtonStore();
+  const { projectId } = useParams();
+
+  useEffect(() => {
+    if (!comparisonProduct) {
+      clearSelectedVersion();
+    }
+  }, [comparisonProduct])
 
   OuterClick({
     contextClassName: ["displayLayouts-container", "selectLayout"],
@@ -113,12 +126,14 @@ const CompareLayOut = () => {
     return () => window.removeEventListener("resize", handleResize);
   }, [isResizing]);
 
-  const handleSelectLayout = (option: string) => {
+  const handleSelectLayout = (version: Version) => {
-    const product = products.find((product) => product.productName === option);
+    getAllProductsApi(projectId || '', version.versionId || '').then((data) => {
-    if (product) {
+      if (data && data.length > 0) {
-      setComparisonProduct(product.productUuid, product.productName);
+        setSelectedVersion(version);
-      setLoadingProgress(1);
+        setComparisonProduct(data[0].productUuid, data[0].productName);
-    }
+        setLoadingProgress(1);
+      }
+    })
   };
 
   return (
@@ -127,7 +142,7 @@ const CompareLayOut = () => {
       ref={wrapperRef}
       style={{ width }}
     >
-      {loadingProgress == 0 && comparisonProduct?.productUuid && (
+      {loadingProgress == 0 && selectedVersion?.versionId && (
         <button
           title="resize-canvas"
           id="compare-resize-slider-btn"
@@ -138,7 +153,7 @@ const CompareLayOut = () => {
         </button>
       )}
       <div className="chooseLayout-container">
-        {comparisonProduct && (
+        {selectedVersion?.versionId && (
           <div className="compare-layout-canvas-container">
             <Suspense fallback={null}>
               <Scene layout="Comparison Layout" />
@@ -147,35 +162,35 @@ const CompareLayOut = () => {
         )}
 
         {width !== "0px" &&
-          !comparisonProduct && ( // Show only if no layout selected
+          !selectedVersion?.versionId && ( // Show only if no layout selected
             <div className="chooseLayout-wrapper">
               <div className="icon">
                 <CompareLayoutIcon />
               </div>
-              <div className="value">Choose Layout to compare</div>
+              <div className="value">Choose Version to compare</div>
               <button
                 className="selectLayout"
                 onClick={() => setShowLayoutDropdown(!showLayoutDropdown)}
               >
-                Select Layout
+                Select Version
               </button>
 
               {showLayoutDropdown && (
                 <div className="displayLayouts-container">
-                  <div className="header">Layouts</div>
+                  <div className="header">Versions</div>
                   <Search onChange={() => { }} />
                   <div className="layouts-container">
-                    {products.map((layout) => (
+                    {versionHistory.map((version) => (
                       <button
-                        key={layout.productUuid}
+                        key={version.versionId}
                         className="layout-wrapper"
                         onClick={() => {
-                          handleSelectLayout(layout.productName);
+                          handleSelectLayout(version);
                           setShowLayoutDropdown(false);
                         }}
                       >
                         <LayoutIcon />
-                        <div className="layout">{layout.productName}</div>
+                        <div className="layout">{version.versionName}</div>
                       </button>
                     ))}
                   </div>

app/src/modules/builder/aisle/Instances/aisleInstances.tsx

@@ -1,13 +1,14 @@
 import React, { useEffect, useMemo } from 'react';
-import { useAisleStore } from '../../../../store/builder/useAisleStore';
 import { useToggleView } from '../../../../store/builder/store';
 import AisleInstance from './instance/aisleInstance';
 import Point from '../../point/point';
 import { Html } from '@react-three/drei';
 import { Vector3 } from 'three';
+import { useSceneContext } from '../../../scene/sceneContext';
 
 function AisleInstances() {
-    const { aisles } = useAisleStore();
+    const { aisleStore } = useSceneContext();
+    const { aisles } = aisleStore();
     const { toggleView } = useToggleView();
 
     const allPoints = useMemo(() => {
@@ -26,8 +27,6 @@ function AisleInstances() {
         return points;
     }, [aisles]);
 
-
-
     return (
         <>
             {toggleView &&

app/src/modules/builder/aisle/aisleCreator/aisleCreator.tsx

@@ -2,13 +2,13 @@ import * as THREE from 'three'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useThree } from '@react-three/fiber';
 import { useActiveLayer, useSocketStore, useToggleView, useToolMode } from '../../../../store/builder/store';
-import { useAisleStore } from '../../../../store/builder/useAisleStore';
 import ReferenceAisle from './referenceAisle';
 import { useBuilderStore } from '../../../../store/builder/useBuilderStore';
 import ReferencePoint from '../../point/reference/referencePoint';
 import { createAisleApi } from '../../../../services/factoryBuilder/aisle/createAisleApi';
 import { useParams } from 'react-router-dom';
 import { useVersionContext } from '../../version/versionContext';
+import { useSceneContext } from '../../../scene/sceneContext';
 
 function AisleCreator() {
     const { scene, camera, raycaster, gl, pointer } = useThree();
@@ -17,7 +17,8 @@ function AisleCreator() {
     const { toolMode } = useToolMode();
     const { activeLayer } = useActiveLayer();
     const { socket } = useSocketStore();
-    const { addAisle, getAislePointById } = useAisleStore();
+    const { aisleStore } = useSceneContext();
+    const { addAisle, getAislePointById } = aisleStore();
     const drag = useRef(false);
     const isLeftMouseDown = useRef(false);
     const { selectedVersionStore } = useVersionContext();

app/src/modules/builder/aisle/aislesGroup.tsx

@@ -3,21 +3,22 @@ import AisleCreator from './aisleCreator/aisleCreator'
 import AisleInstances from './Instances/aisleInstances'
 import { useParams } from 'react-router-dom';
 import { getAisleApi } from '../../../services/factoryBuilder/aisle/getAisleApi';
-import { useAisleStore } from '../../../store/builder/useAisleStore';
 import { useVersionContext } from '../version/versionContext';
+import { useSceneContext } from '../../scene/sceneContext';
 
 function AislesGroup() {
     const { selectedVersionStore } = useVersionContext();
     const { selectedVersion } = selectedVersionStore();
+    const { aisleStore } = useSceneContext();
+    const { setAisles } = aisleStore();
     const { projectId } = useParams();
-    const { setAisles } = useAisleStore();
 
     useEffect(() => {
         if (projectId) {
             getAisleApi(projectId, selectedVersion?.versionId || '').then((aisles) => {
                 if (aisles && aisles.length > 0) {
                     setAisles(aisles);
-                }else{
+                } else {
                     setAisles([]);
                 }
             }).catch((err) => {

app/src/modules/builder/asset/assetsGroup.tsx

@@ -5,7 +5,6 @@ import { useLoadingProgress, useRenameModeStore, useSelectedFloorItem, useSelect
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
 import { FloorItems, RefGroup, RefMesh } from "../../../types/world/worldTypes";
-import { useEventsStore } from "../../../store/simulation/useEventsStore";
 import Models from "./models/models";
 import useModuleStore from "../../../store/useModuleStore";
 import { useThree } from "@react-three/fiber";
@@ -29,11 +28,11 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea
     const { socket } = useSocketStore();
     const { controls, gl, pointer, camera, raycaster } = useThree();
     const { setLoadingProgress } = useLoadingProgress();
-    const { assetStore } = useSceneContext();
+    const { assetStore, eventStore } = useSceneContext();
     const { selectedVersionStore } = useVersionContext();
     const { selectedVersion } = selectedVersionStore();
     const { setAssets, addAsset, clearAssets } = assetStore();
-    const { addEvent } = useEventsStore();
+    const { addEvent, clearEvents } = eventStore();
     const { setSelectedFloorItem } = useSelectedFloorItem();
     const { selectedItem, setSelectedItem } = useSelectedItem();
     const { projectId } = useParams();
@@ -52,6 +51,7 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea
 
     useEffect(() => {
         if (!projectId || !selectedVersion) return;
+        clearEvents();
 
         let totalAssets = 0;
         let loadedAssets = 0;

app/src/modules/builder/asset/models/model/model.tsx

@@ -7,8 +7,6 @@ import { ThreeEvent, useFrame, useThree } from '@react-three/fiber';
 import { useActiveTool, useDeletableFloorItem, useRenderDistance, useSelectedFloorItem, useSocketStore, useToggleView, useToolMode } from '../../../../../store/builder/store';
 import { AssetBoundingBox } from '../../functions/assetBoundingBox';
 import { CameraControls } from '@react-three/drei';
-import { useEventsStore } from "../../../../../store/simulation/useEventsStore";
-import { useProductStore } from "../../../../../store/simulation/useProductStore";
 import useModuleStore, { useSubModuleStore } from '../../../../../store/useModuleStore';
 import { useLeftData, useTopData } from '../../../../../store/visualization/useZone3DWidgetStore';
 import { useSelectedAsset } from '../../../../../store/simulation/useSimulationStore';
@@ -24,12 +22,12 @@ function Model({ asset }: { readonly asset: Asset }) {
     const { toggleView } = useToggleView();
     const { subModule } = useSubModuleStore();
     const { activeModule } = useModuleStore();
-    const { assetStore } = useSceneContext();
+    const { assetStore, eventStore, productStore } = useSceneContext();
     const { removeAsset } = assetStore();
     const { setTop } = useTopData();
     const { setLeft } = useLeftData();
-    const { getIsEventInProduct } = useProductStore();
+    const { getIsEventInProduct } = productStore();
-    const { getEventByModelUuid } = useEventsStore();
+    const { getEventByModelUuid } = eventStore();
     const { selectedProductStore } = useProductContext();
     const { selectedProduct } = selectedProductStore();
     const { setSelectedAsset, clearSelectedAsset } = useSelectedAsset();
@@ -188,8 +186,8 @@ function Model({ asset }: { readonly asset: Asset }) {
 
             const response = socket.emit('v1:model-asset:delete', data)
 
-            useEventsStore.getState().removeEvent(asset.modelUuid);
+            eventStore.getState().removeEvent(asset.modelUuid);
-            useProductStore.getState().deleteEvent(asset.modelUuid);
+            productStore.getState().deleteEvent(asset.modelUuid);
 
             if (response) {
 

app/src/modules/builder/groups/floorPlanGroup.tsx

@@ -50,13 +50,10 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin
 
     useEffect(() => {
 
-        // Load data from localStorage if available
         getLines(organization, projectId, selectedVersion?.versionId || '').then((data) => {
 
             const Lines: Types.Lines = objectLinesToArray(data);
 
-            // const data = localStorage.getItem("Lines");
-
             if (Lines) {
                 lines.current = Lines;
                 loadInitialPoint(lines, floorPlanGroupPoint, currentLayerPoint, dragPointControls);

app/src/modules/builder/point/helpers/usePointSnapping.tsx

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 import { useCallback } from 'react';
-import { useAisleStore } from '../../../../store/builder/useAisleStore';
 import { useWallStore } from '../../../../store/builder/useWallStore';
+import { useSceneContext } from '../../../scene/sceneContext';
 
 const POINT_SNAP_THRESHOLD = 0.5; // Distance threshold for snapping in meters
 
@@ -12,7 +12,8 @@ const ANGLE_SNAP_DISTANCE_THRESHOLD = 0.5;  // Distance threshold for snapping i
 const CAN_ANGLE_SNAP = true; // Whether snapping is enabled or not
 
 export const usePointSnapping = (currentPoint: { uuid: string, pointType: string, position: [number, number, number] } | null) => {
-    const { aisles, getConnectedPoints: getConnectedAislePoints } = useAisleStore();
+    const { aisleStore } = useSceneContext();
+    const { aisles, getConnectedPoints: getConnectedAislePoints } = aisleStore();
     const { walls, getConnectedPoints: getConnectedWallPoints } = useWallStore();
 
     // Wall Snapping

app/src/modules/builder/point/point.tsx

@@ -3,7 +3,6 @@ import * as Constants from '../../../types/world/worldConstants';
 import { useRef, useState, useEffect, useMemo } from 'react';
 import { useToolMode } from '../../../store/builder/store';
 import { DragControls } from '@react-three/drei';
-import { useAisleStore } from '../../../store/builder/useAisleStore';
 import { useThree } from '@react-three/fiber';
 import { useBuilderStore } from '../../../store/builder/useBuilderStore';
 import { usePointSnapping } from './helpers/usePointSnapping';
@@ -12,6 +11,7 @@ import { deleteAisleApi } from '../../../services/factoryBuilder/aisle/deleteAis
 import { useParams } from 'react-router-dom';
 import { createAisleApi } from '../../../services/factoryBuilder/aisle/createAisleApi';
 import { useVersionContext } from '../version/versionContext';
+import { useSceneContext } from '../../scene/sceneContext';
 
 function Point({ point }: { readonly point: Point }) {
     const materialRef = useRef<THREE.ShaderMaterial>(null);
@@ -19,7 +19,8 @@ function Point({ point }: { readonly point: Point }) {
     const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
     const [isHovered, setIsHovered] = useState(false);
     const { toolMode } = useToolMode();
-    const { setPosition: setAislePosition, removePoint: removeAislePoint, getAislesByPointId } = useAisleStore();
+    const { aisleStore } = useSceneContext();
+    const { setPosition: setAislePosition, removePoint: removeAislePoint, getAislesByPointId } = aisleStore();
     const { setPosition: setWallPosition, removePoint: removeWallPoint } = useWallStore();
     const { snapAislePoint, snapAisleAngle, snapWallPoint, snapWallAngle } = usePointSnapping({ uuid: point.pointUuid, pointType: point.pointType, position: point.position });
     const { hoveredPoint, setHoveredPoint } = useBuilderStore();

app/src/modules/collaboration/socket/socketResponses.dev.tsx

@@ -32,8 +32,6 @@ import Layer2DVisibility from "../../builder/geomentries/layers/layer2DVisibilit
 import { retrieveGLTF, storeGLTF } from "../../../utils/indexDB/idbUtils";
 import { getZonesApi } from "../../../services/factoryBuilder/zones/getZonesApi";
 import { useParams } from "react-router-dom";
-import { useEventsStore } from "../../../store/simulation/useEventsStore";
-import { useProductStore } from "../../../store/simulation/useProductStore";
 import { getUserData } from "../../../functions/getUserData";
 import { useSceneContext } from "../../scene/sceneContext";
 import { useVersionContext } from "../../builder/version/versionContext";
@@ -62,7 +60,7 @@ export default function SocketResponses({
     const { selectedVersionStore } = useVersionContext();
     const { selectedVersion } = selectedVersionStore();
     const { projectId } = useParams();
-    const { assetStore } = useSceneContext();
+    const { assetStore, eventStore, productStore } = useSceneContext();
     const { addAsset, updateAsset, removeAsset } = assetStore();
     const { organization } = getUserData();
 
@@ -158,8 +156,8 @@ export default function SocketResponses({
                 try {
                     const deletedUUID = data.data.modelUuid;
 
-                    useEventsStore.getState().removeEvent(deletedUUID);
+                    eventStore.getState().removeEvent(deletedUUID);
-                    useProductStore.getState().deleteEvent(deletedUUID);
+                    productStore.getState().deleteEvent(deletedUUID);
 
                     removeAsset(deletedUUID);
 

app/src/modules/scene/controls/selectionControls/copyPasteControls.tsx

@@ -5,7 +5,6 @@ import { useSelectedAssets, useSocketStore, useToggleView } from "../../../../st
 // import { setAssetsApi } from '../../../../services/factoryBuilder/assest/floorAsset/setAssetsApi';
 import * as Types from "../../../../types/world/worldTypes";
 import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
-import { useEventsStore } from "../../../../store/simulation/useEventsStore";
 import { useParams } from "react-router-dom";
 import { getUserData } from "../../../../functions/getUserData";
 import { useSceneContext } from "../../sceneContext";
@@ -29,9 +28,9 @@ const CopyPasteControls = ({
     const { selectedAssets, setSelectedAssets } = useSelectedAssets();
     const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
     const { socket } = useSocketStore();
-    const { addEvent } = useEventsStore();
+    const { assetStore, eventStore } = useSceneContext();
+    const { addEvent } = eventStore();
     const { projectId } = useParams();
-    const { assetStore } = useSceneContext();
     const { assets, addAsset } = assetStore();
     const { selectedVersionStore } = useVersionContext();
     const { selectedVersion } = selectedVersionStore();

app/src/modules/scene/controls/selectionControls/duplicationControls.tsx

@@ -5,7 +5,6 @@ import { useSelectedAssets, useSocketStore, useToggleView } from "../../../../st
 // import { setAssetsApi } from '../../../../services/factoryBuilder/assest/floorAsset/setAssetsApi';
 import * as Types from "../../../../types/world/worldTypes";
 import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
-import { useEventsStore } from "../../../../store/simulation/useEventsStore";
 import { useParams } from "react-router-dom";
 import { getUserData } from "../../../../functions/getUserData";
 import { useSceneContext } from "../../sceneContext";
@@ -27,9 +26,9 @@ const DuplicationControls = ({
     const { selectedAssets, setSelectedAssets } = useSelectedAssets();
     const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
     const { socket } = useSocketStore();
-    const { addEvent } = useEventsStore();
+    const { assetStore, eventStore } = useSceneContext();
+    const { addEvent } = eventStore();
     const { projectId } = useParams();
-    const { assetStore } = useSceneContext();
     const { assets, addAsset } = assetStore();
     const { selectedVersionStore } = useVersionContext();
     const { selectedVersion } = selectedVersionStore();

app/src/modules/scene/controls/selectionControls/moveControls.tsx

@@ -5,8 +5,6 @@ import { useSelectedAssets, useSocketStore, useToggleView, } from "../../../../s
 // import { setAssetsApi } from '../../../../services/factoryBuilder/assest/floorAsset/setAssetsApi';
 import * as Types from "../../../../types/world/worldTypes";
 import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
-import { useEventsStore } from "../../../../store/simulation/useEventsStore";
-import { useProductStore } from "../../../../store/simulation/useProductStore";
 import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi";
 import { snapControls } from "../../../../utils/handleSnap";
 import DistanceFindingControls from "./distanceFindingControls";
@@ -39,7 +37,7 @@ function MoveControls({
     const [keyEvent, setKeyEvent] = useState<"Ctrl" | "Shift" | "Ctrl+Shift" | "">("");
     const { userId, organization } = getUserData();
     const { projectId } = useParams();
-    const { assetStore } = useSceneContext();
+    const { assetStore, eventStore, productStore } = useSceneContext();
     const { updateAsset } = assetStore();
     const AssetGroup = useRef<THREE.Group | undefined>(undefined);
     const { selectedVersionStore } = useVersionContext();
@@ -249,18 +247,18 @@ function MoveControls({
                 };
 
                 if (obj.userData.eventData) {
-                    const eventData = useEventsStore.getState().getEventByModelUuid(obj.userData.modelUuid);
+                    const eventData = eventStore.getState().getEventByModelUuid(obj.userData.modelUuid);
-                    const productData = useProductStore.getState().getEventByModelUuid(selectedProduct.productUuid, obj.userData.modelUuid);
+                    const productData = productStore.getState().getEventByModelUuid(selectedProduct.productUuid, obj.userData.modelUuid);
 
                     if (eventData) {
-                        useEventsStore.getState().updateEvent(obj.userData.modelUuid, {
+                        eventStore.getState().updateEvent(obj.userData.modelUuid, {
                             position: [worldPosition.x, worldPosition.y, worldPosition.z],
                             rotation: [obj.rotation.x, obj.rotation.y, obj.rotation.z],
                         });
                     }
 
                     if (productData) {
-                        const event = useProductStore
+                        const event = productStore
                             .getState()
                             .updateEvent(
                                 selectedProduct.productUuid,

app/src/modules/scene/controls/selectionControls/rotateControls.tsx

@@ -4,8 +4,6 @@ import { useFrame, useThree } from "@react-three/fiber";
 import { useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/builder/store";
 // import { setAssetsApi } from '../../../../services/factoryBuilder/assest/floorAsset/setAssetsApi';
 import * as Types from "../../../../types/world/worldTypes";
-import { useEventsStore } from "../../../../store/simulation/useEventsStore";
-import { useProductStore } from "../../../../store/simulation/useProductStore";
 import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi";
 import { useParams } from "react-router-dom";
 import { useProductContext } from "../../../simulation/products/productContext";
@@ -35,7 +33,7 @@ function RotateControls({
     const { socket } = useSocketStore();
     const { userId, organization } = getUserData();
     const { projectId } = useParams();
-    const { assetStore } = useSceneContext();
+    const { assetStore, eventStore, productStore } = useSceneContext();
     const { updateAsset } = assetStore();
     const AssetGroup = useRef<THREE.Group | undefined>(undefined);
     const { selectedVersionStore } = useVersionContext();
@@ -214,17 +212,17 @@ function RotateControls({
                 };
 
                 if (obj.userData.eventData) {
-                    const eventData = useEventsStore.getState().getEventByModelUuid(obj.userData.modelUuid);
+                    const eventData = eventStore.getState().getEventByModelUuid(obj.userData.modelUuid);
-                    const productData = useProductStore.getState().getEventByModelUuid(selectedProductStore.getState().selectedProduct.productUuid, obj.userData.modelUuid);
+                    const productData = productStore.getState().getEventByModelUuid(selectedProductStore.getState().selectedProduct.productUuid, obj.userData.modelUuid);
 
                     if (eventData) {
-                        useEventsStore.getState().updateEvent(obj.userData.modelUuid, {
+                        eventStore.getState().updateEvent(obj.userData.modelUuid, {
                             position: [worldPosition.x, worldPosition.y, worldPosition.z],
                             rotation: [obj.rotation.x, obj.rotation.y, obj.rotation.z],
                         })
                     }
                     if (productData) {
-                        const event = useProductStore.getState().updateEvent(selectedProductStore.getState().selectedProduct.productUuid, obj.userData.modelUuid, {
+                        const event = productStore.getState().updateEvent(selectedProductStore.getState().selectedProduct.productUuid, obj.userData.modelUuid, {
                             position: [worldPosition.x, worldPosition.y, worldPosition.z],
                             rotation: [obj.rotation.x, obj.rotation.y, obj.rotation.z],
                         })

app/src/modules/scene/controls/selectionControls/selectionControls.tsx

@@ -13,8 +13,6 @@ import CopyPasteControls from "./copyPasteControls";
 import MoveControls from "./moveControls";
 import RotateControls from "./rotateControls";
 import useModuleStore from "../../../../store/useModuleStore";
-import { useEventsStore } from "../../../../store/simulation/useEventsStore";
-import { useProductStore } from "../../../../store/simulation/useProductStore";
 import { useParams } from "react-router-dom";
 import { getUserData } from "../../../../functions/getUserData";
 import { useSceneContext } from "../../sceneContext";
@@ -33,7 +31,7 @@ const SelectionControls: React.FC = () => {
     const boundingBoxRef = useRef<THREE.Mesh>();
     const { activeModule } = useModuleStore();
     const { socket } = useSocketStore();
-    const { assetStore } = useSceneContext();
+    const { assetStore, eventStore, productStore } = useSceneContext();
     const { removeAsset } = assetStore();
     const selectionBox = useMemo(() => new SelectionBox(camera, scene), [camera, scene]);
     const { toolMode } = useToolMode();
@@ -285,8 +283,8 @@ const SelectionControls: React.FC = () => {
 
                 const response = socket.emit("v1:model-asset:delete", data);
 
-                useEventsStore.getState().removeEvent(selectedMesh.uuid);
+                eventStore.getState().removeEvent(selectedMesh.uuid);
-                useProductStore.getState().deleteEvent(selectedMesh.uuid);
+                productStore.getState().deleteEvent(selectedMesh.uuid);
 
                 if (response) {
 

app/src/modules/scene/controls/transformControls/transformControls.tsx

@@ -5,8 +5,6 @@ import { useThree } from "@react-three/fiber";
 
 import { useEffect, useState } from "react";
 import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
-import { useEventsStore } from "../../../../store/simulation/useEventsStore";
-import { useProductStore } from "../../../../store/simulation/useProductStore";
 import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi";
 // import { setAssetsApi } from "../../../../services/factoryBuilder/assest/floorAsset/setAssetsApi";
 import { useParams } from "react-router-dom";
@@ -25,7 +23,7 @@ export default function TransformControl() {
     const { socket } = useSocketStore();
     const { selectedProductStore } = useProductContext();
     const { selectedProduct } = selectedProductStore();
-    const { assetStore } = useSceneContext();
+    const { assetStore, eventStore, productStore } = useSceneContext();
     const { updateAsset, getAssetById } = assetStore();
     const { userId, organization } = getUserData();
     const { selectedVersionStore } = useVersionContext();
@@ -70,18 +68,18 @@ export default function TransformControl() {
         const asset = getAssetById(selectedFloorItem?.uuid);
         if (asset) {
             if (asset.eventData) {
-                const eventData = useEventsStore.getState().getEventByModelUuid(asset.modelUuid);
+                const eventData = eventStore.getState().getEventByModelUuid(asset.modelUuid);
-                const productData = useProductStore.getState().getEventByModelUuid(selectedProduct.productUuid, asset.modelUuid);
+                const productData = productStore.getState().getEventByModelUuid(selectedProduct.productUuid, asset.modelUuid);
 
                 if (eventData) {
-                    useEventsStore.getState().updateEvent(asset.modelUuid, {
+                    eventStore.getState().updateEvent(asset.modelUuid, {
                         position: [selectedFloorItem.position.x, 0, selectedFloorItem.position.z] as [number, number, number],
                         rotation: [selectedFloorItem.rotation.x, selectedFloorItem.rotation.y, selectedFloorItem.rotation.z] as [number, number, number],
                     });
                 }
 
                 if (productData) {
-                    const event = useProductStore
+                    const event = productStore
                         .getState()
                         .updateEvent(
                             selectedProduct.productUuid,

app/src/modules/scene/sceneContext.tsx

@@ -1,6 +1,10 @@
 import { createContext, useContext, useMemo } from 'react';
 
 import { createAssetStore, AssetStoreType } from '../../store/builder/useAssetStore';
+import { createAisleStore, AisleStoreType } from '../../store/builder/useAisleStore';
+
+import { createEventStore, EventStoreType } from '../../store/simulation/useEventsStore';
+import { createProductStore, ProductStoreType } from '../../store/simulation/useProductStore';
 
 import { createMaterialStore, MaterialStoreType } from '../../store/simulation/useMaterialStore';
 import { createArmBotStore, ArmBotStoreType } from '../../store/simulation/useArmBotStore';
@@ -12,6 +16,10 @@ import { createStorageUnitStore, StorageUnitStoreType } from '../../store/simula
 type SceneContextValue = {
 
     assetStore: AssetStoreType,
+    aisleStore: AisleStoreType,
+
+    eventStore: EventStoreType,
+    productStore: ProductStoreType,
 
     materialStore: MaterialStoreType;
     armBotStore: ArmBotStoreType;
@@ -19,6 +27,7 @@ type SceneContextValue = {
     conveyorStore: ConveyorStoreType;
     vehicleStore: VehicleStoreType;
     storageUnitStore: StorageUnitStoreType;
+
     layout: 'Main Layout' | 'Comparison Layout';
 };
 
@@ -33,6 +42,10 @@ export function SceneProvider({
 }) {
 
     const assetStore = useMemo(() => createAssetStore(), []);
+    const aisleStore = useMemo(() => createAisleStore(), []);
+
+    const eventStore = useMemo(() => createEventStore(), []);
+    const productStore = useMemo(() => createProductStore(), []);
 
     const materialStore = useMemo(() => createMaterialStore(), []);
     const armBotStore = useMemo(() => createArmBotStore(), []);
@@ -48,6 +61,9 @@ export function SceneProvider({
     const contextValue = useMemo(() => (
         {
             assetStore,
+            aisleStore,
+            eventStore,
+            productStore,
             materialStore,
             armBotStore,
             machineStore,
@@ -57,7 +73,7 @@ export function SceneProvider({
             clearStores,
             layout
         }
-    ), [assetStore, materialStore, armBotStore, machineStore, conveyorStore, vehicleStore, storageUnitStore, clearStores, layout]);
+    ), [assetStore, aisleStore, eventStore, productStore, materialStore, armBotStore, machineStore, conveyorStore, vehicleStore, storageUnitStore, clearStores, layout]);
 
     return (
         <SceneContext.Provider value={contextValue}>

app/src/modules/simulation/actions/conveyor/actionHandler/useSpawnHandler.ts

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 import * as THREE from 'three';
 import { useFrame } from "@react-three/fiber";
-import { useProductStore } from "../../../../../store/simulation/useProductStore";
 import { usePlayButtonStore, useAnimationPlaySpeed, usePauseButtonStore, useResetButtonStore } from "../../../../../store/usePlayButtonStore";
 import { useSceneContext } from "../../../../scene/sceneContext";
 import { useProductContext } from "../../../products/productContext";
@@ -22,10 +21,10 @@ interface SpawnInstance {
 }
 
 export function useSpawnHandler() {
-    const { materialStore, conveyorStore } = useSceneContext();
+    const { materialStore, conveyorStore, productStore } = useSceneContext();
     const { addMaterial } = materialStore();
     const { getConveyorById } = conveyorStore();
-    const { getModelUuidByActionUuid, getPointUuidByActionUuid } = useProductStore();
+    const { getModelUuidByActionUuid, getPointUuidByActionUuid } = productStore();
     const { isPlaying } = usePlayButtonStore();
     const { isPaused } = usePauseButtonStore();
     const { speed } = useAnimationPlaySpeed();

app/src/modules/simulation/actions/machine/actionHandler/useProcessHandler.ts

@@ -1,14 +1,13 @@
 import { useCallback } from "react";
-import { useProductStore } from "../../../../../store/simulation/useProductStore";
 import { useSceneContext } from "../../../../scene/sceneContext";
 import { useProductContext } from "../../../products/productContext";
 
 export function useProcessHandler() {
-    const { materialStore, machineStore } = useSceneContext();
+    const { materialStore, machineStore, productStore } = useSceneContext();
     const { selectedProductStore } = useProductContext();
     const { getMaterialById, setMaterial } = materialStore();
     const { addCurrentAction } = machineStore();
-    const { getModelUuidByActionUuid } = useProductStore();
+    const { getModelUuidByActionUuid } = productStore();
     const { selectedProduct } = selectedProductStore();
 
     const processLogStatus = (materialUuid: string, status: string) => {

app/src/modules/simulation/actions/roboticArm/actionHandler/usePickAndPlaceHandler.ts

@@ -1,14 +1,13 @@
 import { useCallback } from "react";
-import { useProductStore } from "../../../../../store/simulation/useProductStore";
 import { useSceneContext } from "../../../../scene/sceneContext";
 import { useProductContext } from "../../../products/productContext";
 
 export function usePickAndPlaceHandler() {
-    const { materialStore, armBotStore } = useSceneContext();
+    const { materialStore, armBotStore, productStore } = useSceneContext();
     const { selectedProductStore } = useProductContext();
     const { getMaterialById } = materialStore();
     const { addCurrentAction } = armBotStore();
-    const { getModelUuidByActionUuid } = useProductStore();
+    const { getModelUuidByActionUuid } = productStore();
     const { selectedProduct } = selectedProductStore();
 
     const pickAndPlaceLogStatus = (materialUuid: string, status: string) => {

app/src/modules/simulation/actions/storageUnit/actionHandler/useRetrieveHandler.ts

@@ -1,15 +1,14 @@
 import { useCallback, useState, useEffect, useRef } from "react";
 import { useFrame } from "@react-three/fiber";
-import { useProductStore } from "../../../../../store/simulation/useProductStore";
 import { usePlayButtonStore, usePauseButtonStore, useResetButtonStore, useAnimationPlaySpeed } from "../../../../../store/usePlayButtonStore";
 import { useSceneContext } from "../../../../scene/sceneContext";
 import { useProductContext } from "../../../products/productContext";
 
 export function useRetrieveHandler() {
-    const { materialStore, armBotStore, vehicleStore, storageUnitStore } = useSceneContext();
+    const { materialStore, armBotStore, vehicleStore, storageUnitStore, productStore } = useSceneContext();
     const { selectedProductStore } = useProductContext();
     const { addMaterial } = materialStore();
-    const { getModelUuidByActionUuid, getPointUuidByActionUuid, getEventByModelUuid, getActionByUuid } = useProductStore();
+    const { getModelUuidByActionUuid, getPointUuidByActionUuid, getEventByModelUuid, getActionByUuid } = productStore();
     const { getStorageUnitById, getLastMaterial, updateCurrentLoad, removeLastMaterial } = storageUnitStore();
     const { getVehicleById, incrementVehicleLoad, addCurrentMaterial } = vehicleStore();
     const { selectedProduct } = selectedProductStore();

app/src/modules/simulation/actions/storageUnit/actionHandler/useStoreHandler.ts

@@ -1,13 +1,12 @@
 import { useCallback } from "react";
-import { useProductStore } from "../../../../../store/simulation/useProductStore";
 import { useSceneContext } from "../../../../scene/sceneContext";
 import { useProductContext } from "../../../products/productContext";
 
 export function useStoreHandler() {
-    const { materialStore, storageUnitStore } = useSceneContext();
+    const { materialStore, storageUnitStore, productStore } = useSceneContext();
     const { getMaterialById, removeMaterial, setEndTime } = materialStore();
     const { addCurrentMaterial, updateCurrentLoad } = storageUnitStore();
-    const { getModelUuidByActionUuid } = useProductStore();
+    const { getModelUuidByActionUuid } = productStore();
     const { selectedProductStore } = useProductContext();
     const { selectedProduct } = selectedProductStore();
 

app/src/modules/simulation/actions/vehicle/actionHandler/useTravelHandler.ts

@@ -1,13 +1,12 @@
 import { useCallback } from "react";
-import { useProductStore } from "../../../../../store/simulation/useProductStore";
 import { useSceneContext } from "../../../../scene/sceneContext";
 import { useProductContext } from "../../../products/productContext";
 
 export function useTravelHandler() {
-    const { materialStore, vehicleStore } = useSceneContext();
+    const { materialStore, vehicleStore, productStore } = useSceneContext();
     const { selectedProductStore } = useProductContext();
     const { getMaterialById } = materialStore();
-    const { getModelUuidByActionUuid } = useProductStore();
+    const { getModelUuidByActionUuid } = productStore();
     const { selectedProduct } = selectedProductStore();
     const { incrementVehicleLoad, addCurrentMaterial } = vehicleStore();
 

app/src/modules/simulation/analysis/ROI/roiData.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react'
 import { CompareProduct, useCompareProductDataStore, useInputValues, useMachineDowntime, useMachineUptime, useProductionCapacityData, useROISummaryData, useThroughPutData } from '../../../../store/builder/store';
 import { usePlayButtonStore } from '../../../../store/usePlayButtonStore';
 import { useProductContext } from '../../products/productContext';
-import { useProductStore } from '../../../../store/simulation/useProductStore';
+import { useSceneContext } from '../../../scene/sceneContext';
 
 export default function ROIData() {
     const { selectedProductStore } = useProductContext();
@@ -11,10 +11,11 @@ export default function ROIData() {
     const { selectedProduct } = selectedProductStore();
     const { isPlaying } = usePlayButtonStore();
     const { setRoiSummaryData } = useROISummaryData();
-    const { products, getProductById } = useProductStore();
+    const { productStore } = useSceneContext();
+    const { getProductById } = productStore();
     const { compareProductsData, setCompareProductsData } = useCompareProductDataStore();
-    const { machineActiveTime, setMachineActiveTime } = useMachineUptime();
+    const { machineActiveTime } = useMachineUptime();
-    const { machineIdleTime, setMachineIdleTime } = useMachineDowntime();
+    const { machineIdleTime } = useMachineDowntime();
     const { throughputData } = useThroughPutData()
 
     useEffect(() => {

app/src/modules/simulation/analysis/throughPut/throughPutData.tsx

@@ -1,17 +1,15 @@
 import { useEffect } from 'react';
-import { useProductStore } from '../../../../store/simulation/useProductStore';
 import { determineExecutionMachineSequences } from '../../simulator/functions/determineExecutionMachineSequences';
 import { useInputValues, useMachineCount, useMachineDowntime, useMachineUptime, useMaterialCycle, useProcessBar, useThroughPutData } from '../../../../store/builder/store';
 import { usePlayButtonStore } from '../../../../store/usePlayButtonStore';
 import { useSceneContext } from '../../../scene/sceneContext';
 import { useProductContext } from '../../products/productContext';
-import { set } from 'immer/dist/internal';
 
 export default function ThroughPutData() {
-    const { materialStore, armBotStore, machineStore, conveyorStore, vehicleStore, storageUnitStore } = useSceneContext();
+    const { materialStore, armBotStore, machineStore, conveyorStore, vehicleStore, storageUnitStore, productStore } = useSceneContext();
     const { selectedProductStore } = useProductContext();
     const { selectedProduct } = selectedProductStore();
-    const { products, getProductById } = useProductStore();
+    const { products, getProductById } = productStore();
     const { armBots } = armBotStore();
     const { vehicles } = vehicleStore();
     const { machines } = machineStore();

app/src/modules/simulation/conveyor/instances/conveyorInstance/conveyorInstance.tsx

@@ -1,15 +1,14 @@
 import { useEffect } from 'react'
 import { useResetButtonStore } from '../../../../../store/usePlayButtonStore';
-import { useProductStore } from '../../../../../store/simulation/useProductStore';
 import { useSceneContext } from '../../../../scene/sceneContext';
 import { useProductContext } from '../../../products/productContext';
 // import { findConveyorSubsequence } from '../../../simulator/functions/getConveyorSequencesInProduct';
 
 function ConveyorInstance({ conveyor }: { readonly conveyor: ConveyorStatus }) {
-    const { getProductById } = useProductStore();
+    const { materialStore, conveyorStore, productStore } = useSceneContext();
+    const { getProductById } = productStore();
     const { selectedProductStore } = useProductContext();
     const { selectedProduct } = selectedProductStore();
-    const { materialStore, conveyorStore } = useSceneContext();
     const { getMaterialsByCurrentModelUuid, materials } = materialStore();
     const { isReset } = useResetButtonStore();
     const { setConveyorPaused } = conveyorStore();

app/src/modules/simulation/events/points/creator/pointsCreator.tsx

@@ -1,7 +1,5 @@
 import { useEffect, useRef, useState } from "react";
 import * as THREE from "three";
-import { useEventsStore } from "../../../../../store/simulation/useEventsStore";
-import { useProductStore } from "../../../../../store/simulation/useProductStore";
 import useModuleStore, { useSubModuleStore } from "../../../../../store/useModuleStore";
 import { TransformControls } from "@react-three/drei";
 import { detectModifierKeys } from "../../../../../utils/shortcutkeys/detectModifierKeys";
@@ -13,13 +11,15 @@ import { useProductContext } from "../../../products/productContext";
 import { useParams } from "react-router-dom";
 import { useToolMode } from "../../../../../store/builder/store";
 import { useVersionContext } from "../../../../builder/version/versionContext";
+import { useSceneContext } from "../../../../scene/sceneContext";
 
 function PointsCreator() {
     const { gl, raycaster, scene, pointer, camera } = useThree();
     const { subModule } = useSubModuleStore();
     const { selectedProductStore } = useProductContext();
-    const { events, updatePoint, getPointByUuid, getEventByModelUuid } = useEventsStore();
+    const { eventStore, productStore } = useSceneContext();
-    const { getEventByModelUuid: getEventByModelUuidFromProduct, updatePoint: updatePointFromProduct, getEventByModelUuid: getEventByModelUuidFromProduct2, getPointByUuid: getPointByUuidFromProduct } = useProductStore();
+    const { events, updatePoint, getPointByUuid, getEventByModelUuid } = eventStore();
+    const { getEventByModelUuid: getEventByModelUuidFromProduct, updatePoint: updatePointFromProduct, getEventByModelUuid: getEventByModelUuidFromProduct2, getPointByUuid: getPointByUuidFromProduct } = productStore();
     const { selectedProduct } = selectedProductStore();
     const { activeModule } = useModuleStore();
     const transformRef = useRef<any>(null);

app/src/modules/simulation/events/points/functions/handleAddEventToProduct.ts

@@ -17,7 +17,8 @@ export const handleAddEventToProduct = ({
     addEvent,
     selectedProduct,
     clearSelectedAsset,
-    projectId
+    projectId,
+    versionId
 }: HandleAddEventToProductParams) => {
     if (event && selectedProduct.productUuid) {
         addEvent(selectedProduct.productUuid, event);
@@ -25,7 +26,8 @@ export const handleAddEventToProduct = ({
         upsertProductOrEventApi({
             productName: selectedProduct.productName,
             productUuid: selectedProduct.productUuid,
-            projectId: projectId ||'',
+            versionId,
+            projectId: projectId || '',
             eventDatas: event
         }).then((data) => {
             // console.log(data);

app/src/modules/simulation/events/triggerConnections/triggerConnector.tsx

@@ -3,8 +3,6 @@ import { useFrame, useThree } from "@react-three/fiber";
 import * as THREE from "three";
 import { useSubModuleStore } from "../../../../store/useModuleStore";
 import { useSelectedAction, useSelectedAsset } from "../../../../store/simulation/useSimulationStore";
-import { useProductStore } from "../../../../store/simulation/useProductStore";
-import { useEventsStore } from "../../../../store/simulation/useEventsStore";
 import { handleAddEventToProduct } from "../points/functions/handleAddEventToProduct";
 import { QuadraticBezierLine } from "@react-three/drei";
 import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi";
@@ -14,6 +12,7 @@ import { useProductContext } from "../../products/productContext";
 import { useParams } from "react-router-dom";
 import { useToolMode } from "../../../../store/builder/store";
 import { useVersionContext } from "../../../builder/version/versionContext";
+import { useSceneContext } from "../../../scene/sceneContext";
 
 interface ConnectionLine {
     id: string;
@@ -26,7 +25,8 @@ function TriggerConnector() {
     const { gl, raycaster, scene, pointer, camera } = useThree();
     const { subModule } = useSubModuleStore();
     const { selectedProductStore } = useProductContext();
-    const { products, getPointByUuid, getIsEventInProduct, getActionByUuid, addTrigger, removeTrigger, addEvent, getEventByModelUuid, getPointUuidByActionUuid, getProductById } = useProductStore();
+    const { eventStore, productStore } = useSceneContext();
+    const { products, getPointByUuid, getIsEventInProduct, getActionByUuid, addTrigger, removeTrigger, addEvent, getEventByModelUuid, getPointUuidByActionUuid, getProductById } = productStore();
     const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
     const { selectedProduct } = selectedProductStore();
     const [hoveredLineKey, setHoveredLineKey] = useState<string | null>(null);
@@ -283,7 +283,7 @@ function TriggerConnector() {
                 }
             } else if (!getIsEventInProduct(selectedProduct.productUuid, modelUuid) && firstSelectedPoint) {
                 handleAddEventToProduct({
-                    event: useEventsStore.getState().getEventByModelUuid(modelUuid),
+                    event: eventStore.getState().getEventByModelUuid(modelUuid),
                     addEvent,
                     selectedProduct,
                     projectId: projectId || '',

app/src/modules/simulation/machine/instances/machineInstance/machineInstance.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { useAnimationPlaySpeed, usePauseButtonStore, usePlayButtonStore } from '../../../../../store/usePlayButtonStore';
 import MachineAnimator from '../animator/machineAnimator';
-import { useProductStore } from '../../../../../store/simulation/useProductStore';
 import { useTriggerHandler } from '../../../triggers/triggerHandler/useTriggerHandler';
 import { useSceneContext } from '../../../../scene/sceneContext';
 import { useProductContext } from '../../../products/productContext';
@@ -16,11 +15,11 @@ function MachineInstance({ machineDetail }: { readonly machineDetail: MachineSta
     const isSpeedRef = useRef<number>(0);
     const isPausedRef = useRef<boolean>(false);
     const { isPlaying } = usePlayButtonStore();
-    const { machineStore } = useSceneContext();
+    const { machineStore, productStore } = useSceneContext();
     const { selectedProductStore } = useProductContext();
     const { machines, setMachineState, setMachineActive, incrementIdleTime, incrementActiveTime, resetTime } = machineStore();
     const { selectedProduct } = selectedProductStore();
-    const { getActionByUuid } = useProductStore();
+    const { getActionByUuid } = productStore();
     const { triggerPointActions } = useTriggerHandler();
     const { speed } = useAnimationPlaySpeed();
     const { isPaused } = usePauseButtonStore();

app/src/modules/simulation/materials/instances/instance/materialInstance.tsx

@@ -1,18 +1,19 @@
 import { useMemo, useRef } from 'react'
 import * as THREE from 'three';
 import MaterialAnimator from '../animator/materialAnimator';
-import { useProductStore } from '../../../../../store/simulation/useProductStore';
 import { MaterialModel } from '../material/materialModel';
 import { useThree } from '@react-three/fiber';
 import { useAnimationPlaySpeed } from '../../../../../store/usePlayButtonStore';
 import { useTriggerHandler } from '../../../triggers/triggerHandler/useTriggerHandler';
 import { useProductContext } from '../../../products/productContext';
+import { useSceneContext } from '../../../../scene/sceneContext';
 
 function MaterialInstance({ material }: { readonly material: MaterialSchema }) {
     const matRef: any = useRef();
     const { scene } = useThree();
     const { selectedProductStore } = useProductContext();
-    const { getModelUuidByPointUuid, getPointByUuid, getEventByModelUuid, getActionByUuid, getTriggerByUuid, getActionByPointUuid } = useProductStore();
+    const { productStore } = useSceneContext();
+    const { getModelUuidByPointUuid, getPointByUuid, getEventByModelUuid, getActionByPointUuid } = productStore();
     const { selectedProduct } = selectedProductStore();
     const { speed } = useAnimationPlaySpeed();
     const { triggerPointActions } = useTriggerHandler();

app/src/modules/simulation/products/products.tsx

@@ -1,6 +1,5 @@
 import * as THREE from 'three';
 import { useEffect } from 'react';
-import { useProductStore } from '../../../store/simulation/useProductStore';
 import { upsertProductOrEventApi } from '../../../services/simulation/products/UpsertProductOrEventApi';
 import { getAllProductsApi } from '../../../services/simulation/products/getallProductsApi';
 import { usePlayButtonStore, useResetButtonStore } from '../../../store/usePlayButtonStore';
@@ -11,8 +10,8 @@ import { useParams } from 'react-router-dom';
 import { useVersionContext } from '../../builder/version/versionContext';
 
 function Products() {
-    const { armBotStore, machineStore, conveyorStore, vehicleStore, storageUnitStore, layout } = useSceneContext();
+    const { armBotStore, machineStore, conveyorStore, vehicleStore, storageUnitStore, layout, productStore } = useSceneContext();
-    const { products, getProductById, addProduct, setProducts } = useProductStore();
+    const { products, getProductById, addProduct, setProducts } = productStore();
     const { selectedProductStore } = useProductContext();
     const { setMainProduct } = useMainProduct();
     const { selectedProduct, setSelectedProduct } = selectedProductStore();
@@ -64,7 +63,7 @@ function Products() {
                     setMainProduct(data[0].productUuid, data[0].productName);
                 }
             }
-        }).catch((err)=>{
+        }).catch((err) => {
             console.error(err);
         })
     }, [selectedVersion?.versionId])

app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx

@@ -6,14 +6,11 @@ import RoboticArmAnimator from '../animator/roboticArmAnimator';
 import MaterialAnimator from '../animator/materialAnimator';
 import armModel from "../../../../../assets/gltf-glb/rigged/ik_arm_1.glb";
 import { useAnimationPlaySpeed, usePauseButtonStore, usePlayButtonStore, useResetButtonStore } from '../../../../../store/usePlayButtonStore';
-import { useProductStore } from '../../../../../store/simulation/useProductStore';
 import { useTriggerHandler } from '../../../triggers/triggerHandler/useTriggerHandler';
 import { useSceneContext } from '../../../../scene/sceneContext';
 import { useProductContext } from '../../../products/productContext';
-import { Preload } from '@react-three/drei';
 
 function RoboticArmInstance({ armBot }: { readonly armBot: ArmBotStatus }) {
-
     const [currentPhase, setCurrentPhase] = useState<(string)>("init");
     const [path, setPath] = useState<[number, number, number][]>([]);
     const [ikSolver, setIkSolver] = useState<any>(null);
@@ -27,13 +24,13 @@ function RoboticArmInstance({ armBot }: { readonly armBot: ArmBotStatus }) {
     let startTime: number;
 
     const { selectedProductStore } = useProductContext();
-    const { materialStore, armBotStore, vehicleStore, storageUnitStore } = useSceneContext();
+    const { materialStore, armBotStore, vehicleStore, storageUnitStore, productStore } = useSceneContext();
     const { setArmBotActive, setArmBotState, removeCurrentAction, incrementActiveTime, incrementIdleTime } = armBotStore();
     const { decrementVehicleLoad, removeLastMaterial } = vehicleStore();
     const { removeLastMaterial: removeLastStorageMaterial, updateCurrentLoad } = storageUnitStore();
-    const { getMaterialById, setIsVisible, setIsPaused } = materialStore();
+    const { getMaterialById, setIsVisible } = materialStore();
     const { selectedProduct } = selectedProductStore();
-    const { getActionByUuid, getEventByActionUuid, getEventByModelUuid } = useProductStore();
+    const { getActionByUuid, getEventByActionUuid, getEventByModelUuid } = productStore();
     const { triggerPointActions } = useTriggerHandler();
     const { isPlaying } = usePlayButtonStore();
     const { isReset } = useResetButtonStore();

app/src/modules/simulation/simulation.tsx

@@ -1,6 +1,4 @@
 import React, { useEffect } from 'react';
-import { useEventsStore } from '../../store/simulation/useEventsStore';
-import { useProductStore } from '../../store/simulation/useProductStore';
 import Vehicles from './vehicle/vehicles';
 import Points from './events/points/points';
 import Conveyor from './conveyor/conveyor';
@@ -13,11 +11,13 @@ import Products from './products/products';
 import Trigger from './triggers/trigger';
 import useModuleStore from '../../store/useModuleStore';
 import SimulationAnalysis from './analysis/simulationAnalysis';
+import { useSceneContext } from '../scene/sceneContext';
 
 function Simulation() {
     const { activeModule } = useModuleStore();
-    const { events } = useEventsStore();
+    const { eventStore, productStore } = useSceneContext();
-    const { products } = useProductStore();
+    const { events } = eventStore();
+    const { products } = productStore();
 
     useEffect(() => {
         // console.log('events: ', events);

app/src/modules/simulation/simulator/simulator.tsx

@@ -1,13 +1,15 @@
 import { useEffect } from 'react';
-import { useProductStore } from '../../../store/simulation/useProductStore';
 import { useActionHandler } from '../actions/useActionHandler';
 import { usePlayButtonStore, useResetButtonStore } from '../../../store/usePlayButtonStore';
 import { determineExecutionOrder } from './functions/determineExecutionOrder';
 import { useProductContext } from '../products/productContext';
+import { useSceneContext } from '../../scene/sceneContext';
+import { useCompareProductDataStore } from '../../../store/builder/store';
 
 function Simulator() {
     const { selectedProductStore } = useProductContext();
-    const { products, getProductById } = useProductStore();
+    const { productStore } = useSceneContext();
+    const { products, getProductById } = productStore();
     const { handleAction } = useActionHandler();
     const { selectedProduct } = selectedProductStore();
     const { isPlaying } = usePlayButtonStore();

app/src/modules/simulation/spatialUI/arm/armBotUI.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { useSelectedAction, useSelectedEventSphere } from '../../../../store/simulation/useSimulationStore';
 import { useGLTF } from '@react-three/drei';
 import { useThree } from '@react-three/fiber';
-import { useProductStore } from '../../../../store/simulation/useProductStore';
 import PickDropPoints from './PickDropPoints';
 import useDraggableGLTF from './useDraggableGLTF';
 import * as THREE from 'three';
@@ -22,13 +21,13 @@ type Positions = {
 };
 
 const ArmBotUI = () => {
-    const { getEventByModelUuid, updateAction, getActionByUuid } = useProductStore();
+    const { armBotStore, productStore } = useSceneContext();
+    const { getEventByModelUuid, updateAction, getActionByUuid } = productStore();
     const { selectedEventSphere } = useSelectedEventSphere();
     const { selectedProductStore } = useProductContext();
     const { selectedProduct } = selectedProductStore();
     const { scene } = useThree();
     const { selectedAction } = useSelectedAction();
-    const { armBotStore } = useSceneContext();
     const { armBots } = armBotStore();
     const { selectedVersionStore } = useVersionContext();
     const { selectedVersion } = selectedVersionStore();

app/src/modules/simulation/spatialUI/arm/useDraggableGLTF.ts

@@ -1,16 +1,17 @@
 import { useRef, useState } from "react";
 import * as THREE from "three";
 import { ThreeEvent, useThree } from "@react-three/fiber";
-import { useProductStore } from "../../../../store/simulation/useProductStore";
 import {
     useSelectedEventData,
 } from "../../../../store/simulation/useSimulationStore";
 import { useProductContext } from "../../products/productContext";
+import { useSceneContext } from "../../../scene/sceneContext";
 
 type OnUpdateCallback = (object: THREE.Object3D) => void;
 
 export default function useDraggableGLTF(onUpdate: OnUpdateCallback) {
-    const { getEventByModelUuid } = useProductStore();
+    const { productStore } = useSceneContext();
+    const { getEventByModelUuid } = productStore();
     const { selectedEventData } = useSelectedEventData();
     const { selectedProductStore } = useProductContext();
     const { selectedProduct } = selectedProductStore();

app/src/modules/simulation/spatialUI/vehicle/vehicleUI.tsx

@@ -3,7 +3,6 @@ import * as Types from "../../../../types/world/worldTypes";
 import { useGLTF } from "@react-three/drei";
 import { useFrame, useThree } from "@react-three/fiber";
 import { useSelectedEventSphere, useIsDragging, useIsRotating, } from "../../../../store/simulation/useSimulationStore";
-import { useProductStore } from "../../../../store/simulation/useProductStore";
 import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi";
 import { DoubleSide, Group, Plane, Vector3 } from "three";
 
@@ -22,10 +21,10 @@ const VehicleUI = () => {
     const prevMousePos = useRef({ x: 0, y: 0 });
     const { selectedEventSphere } = useSelectedEventSphere();
     const { selectedProductStore } = useProductContext();
-    const { vehicleStore } = useSceneContext();
+    const { vehicleStore, productStore } = useSceneContext();
     const { selectedProduct } = selectedProductStore();
     const { vehicles, getVehicleById } = vehicleStore();
-    const { updateEvent } = useProductStore();
+    const { updateEvent } = productStore();
     const [startPosition, setStartPosition] = useState<[number, number, number]>([0, 1, 0,]);
 
     const [endPosition, setEndPosition] = useState<[number, number, number]>([0, 1, 0,]);

app/src/modules/simulation/triggers/triggerHandler/useTriggerHandler.ts

@@ -1,6 +1,5 @@
 import { useCallback } from 'react';
 import { useActionHandler } from '../../actions/useActionHandler';
-import { useProductStore } from '../../../../store/simulation/useProductStore';
 import { useArmBotEventManager } from '../../roboticArm/eventManager/useArmBotEventManager';
 import { useConveyorEventManager } from '../../conveyor/eventManager/useConveyorEventManager';
 import { useVehicleEventManager } from '../../vehicle/eventManager/useVehicleEventManager';
@@ -9,11 +8,11 @@ import { useSceneContext } from '../../../scene/sceneContext';
 import { useProductContext } from '../../products/productContext';
 
 export function useTriggerHandler() {
-    const { materialStore, armBotStore, machineStore, conveyorStore, vehicleStore, storageUnitStore } = useSceneContext();
+    const { materialStore, armBotStore, machineStore, conveyorStore, vehicleStore, storageUnitStore, productStore } = useSceneContext();
     const { selectedProductStore } = useProductContext();
     const { handleAction } = useActionHandler();
     const { selectedProduct } = selectedProductStore();
-    const { getEventByTriggerUuid, getEventByModelUuid, getActionByUuid, getModelUuidByActionUuid } = useProductStore();
+    const { getEventByTriggerUuid, getEventByModelUuid, getActionByUuid, getModelUuidByActionUuid } = productStore();
     const { getArmBotById } = armBotStore();
     const { getConveyorById } = conveyorStore();
     const { addArmBotToMonitor } = useArmBotEventManager();

app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx

@@ -4,7 +4,6 @@ import * as THREE from 'three';
 import { NavMeshQuery } from '@recast-navigation/core';
 import { useNavMesh } from '../../../../../store/builder/store';
 import { useAnimationPlaySpeed, usePauseButtonStore, usePlayButtonStore } from '../../../../../store/usePlayButtonStore';
-import { useProductStore } from '../../../../../store/simulation/useProductStore';
 import { useTriggerHandler } from '../../../triggers/triggerHandler/useTriggerHandler';
 import MaterialAnimator from '../animator/materialAnimator';
 import { useSceneContext } from '../../../../scene/sceneContext';
@@ -13,13 +12,13 @@ import { useProductContext } from '../../../products/productContext';
 function VehicleInstance({ agvDetail }: Readonly<{ agvDetail: VehicleStatus }>) {
     const { navMesh } = useNavMesh();
     const { isPlaying } = usePlayButtonStore();
-    const { materialStore, armBotStore, conveyorStore, vehicleStore, storageUnitStore } = useSceneContext();
+    const { materialStore, armBotStore, conveyorStore, vehicleStore, storageUnitStore, productStore } = useSceneContext();
     const { removeMaterial, setEndTime } = materialStore();
     const { getStorageUnitById } = storageUnitStore();
     const { getArmBotById } = armBotStore();
     const { getConveyorById } = conveyorStore();
     const { triggerPointActions } = useTriggerHandler();
-    const { getActionByUuid, getEventByModelUuid, getTriggerByUuid } = useProductStore();
+    const { getActionByUuid, getEventByModelUuid, getTriggerByUuid } = productStore();
     const { selectedProductStore } = useProductContext();
     const { selectedProduct } = selectedProductStore();
     const { vehicles, setVehicleActive, setVehicleState, setVehiclePicking, clearCurrentMaterials, setVehicleLoad, decrementVehicleLoad, removeLastMaterial, getLastMaterial, incrementIdleTime, incrementActiveTime, resetTime } = vehicleStore();

app/src/modules/simulation/vehicle/navMesh/polygonGenerator.tsx

@@ -3,9 +3,8 @@ import { useEffect } from "react";
 import * as turf from "@turf/turf";
 import * as Types from "../../../../types/world/worldTypes";
 import arrayLinesToObject from "../../../builder/geomentries/lines/lineConvertions/arrayLinesToObject";
-import { useAisleStore } from "../../../../store/builder/useAisleStore";
 import { useThree } from "@react-three/fiber";
-import { clone } from "chart.js/dist/helpers/helpers.core";
+import { useSceneContext } from "../../../scene/sceneContext";
 
 interface PolygonGeneratorProps {
     groupRef: React.MutableRefObject<THREE.Group | null>;
@@ -16,7 +15,8 @@ export default function PolygonGenerator({
     groupRef,
     lines,
 }: PolygonGeneratorProps) {
-    const { aisles } = useAisleStore();
+    const { aisleStore } = useSceneContext();
+    const { aisles } = aisleStore();
     const { scene } = useThree();
 
     useEffect(() => {

app/src/pages/Dashboard.tsx

@@ -8,20 +8,11 @@ import DashboardTrash from "../components/Dashboard/DashboardTrash";
 import { getUserData } from "../functions/getUserData";
 import SidePannel from "../components/Dashboard/SidePannel";
 import DashboardTutorial from "../components/Dashboard/DashboardTutorial";
-import { useProductStore } from "../store/simulation/useProductStore";
-import { useEventsStore } from "../store/simulation/useEventsStore";
 
 const Dashboard: React.FC = () => {
   const [activeTab, setActiveTab] = useState<string>("Home");
   const { socket } = useSocketStore();
   const { organization, email } = getUserData();
-  const { clearProducts } = useProductStore();
-  const { clearEvents } = useEventsStore();
-
-  useEffect(() => {
-    clearEvents();
-    clearProducts();
-  }, [])
 
   useEffect(() => {
     const token = localStorage.getItem("token");

app/src/pages/Project.tsx

@@ -20,7 +20,6 @@ import { useLogger } from "../components/ui/log/LoggerContext";
 import RenderOverlay from "../components/templates/Overlay";
 import LogList from "../components/ui/log/LogList";
 import { useToggleStore } from "../store/useUIToggleStore";
-import { useProductStore } from "../store/simulation/useProductStore";
 import { getAllProjects } from "../services/dashboard/getAllProjects";
 import { viewProject } from "../services/dashboard/viewProject";
 import ComparisonSceneProvider from "../components/layout/scenes/ComparisonSceneProvider";
@@ -42,14 +41,13 @@ const Project: React.FC = () => {
 	const { setWallItems } = useWallItems();
 	const { setZones } = useZones();
 	const { isVersionSaved } = useSaveVersion();
-	const { setProducts } = useProductStore();
 	const { projectId } = useParams();
 	const { setProjectName } = useProjectName();
 	const { userId, email, organization, userName } = getUserData();
 	const { selectedUser } = useSelectedUserStore();
 	const { isLogListVisible } = useLogger();
 	const { setVersions } = useVersionHistoryStore();
-	const { selectedComment, setSelectedComment, commentPositionState } = useSelectedComment();
+	const { selectedComment, commentPositionState } = useSelectedComment();
 
 	useEffect(() => {
 		if (!email || !userId) {
@@ -94,7 +92,6 @@ const Project: React.FC = () => {
 	useEffect(() => {
 		setWallItems([]);
 		setZones([]);
-		setProducts([]);
 		setActiveModule("builder");
 		if (email) {
 			const token = localStorage.getItem("token");

app/src/store/builder/useAisleStore.ts

@@ -2,246 +2,250 @@ import { create } from "zustand";
 import { immer } from "zustand/middleware/immer";
 
 interface AisleStore {
-  aisles: Aisles;
+    aisles: Aisles;
-  setAisles: (aisles: Aisles) => void;
+    setAisles: (aisles: Aisles) => void;
-  addAisle: (aisle: Aisle) => void;
+    addAisle: (aisle: Aisle) => void;
-  updateAisle: (uuid: string, updated: Partial<Aisle>) => void;
+    updateAisle: (uuid: string, updated: Partial<Aisle>) => void;
-  removeAisle: (uuid: string) => void;
+    removeAisle: (uuid: string) => void;
-  removePoint: (uuid: string) => Aisles;
+    removePoint: (uuid: string) => Aisles;
-  setPosition: (
+    setPosition: (
-    pointUuid: string,
+        pointUuid: string,
-    position: [number, number, number]
+        position: [number, number, number]
-  ) => Aisle | undefined;
+    ) => Aisle | undefined;
-  setLayer: (pointUuid: string, layer: number) => void;
+    setLayer: (pointUuid: string, layer: number) => void;
-  setColor: (aisleUuid: string, color: AisleColors) => void;
+    setColor: (aisleUuid: string, color: AisleColors) => void;
 
-  // Type-specific setters
+    // Type-specific setters
-  setSolidAisleWidth: (aisleUuid: string, width: number) => void;
+    setSolidAisleWidth: (aisleUuid: string, width: number) => void;
-  setDashedAisleProperties: (
+    setDashedAisleProperties: (
-    aisleUuid: string,
+        aisleUuid: string,
-    props: { aisleWidth?: number; dashLength?: number; gapLength?: number }
+        props: { aisleWidth?: number; dashLength?: number; gapLength?: number }
-  ) => void;
+    ) => void;
-  setDottedAisleProperties: (
+    setDottedAisleProperties: (
-    aisleUuid: string,
+        aisleUuid: string,
-    props: { dotRadius?: number; gapLength?: number }
+        props: { dotRadius?: number; gapLength?: number }
-  ) => void;
+    ) => void;
-  setArrowAisleWidth: (aisleUuid: string, width: number) => void;
+    setArrowAisleWidth: (aisleUuid: string, width: number) => void;
-  setArrowsAisleProperties: (
+    setArrowsAisleProperties: (
-    aisleUuid: string,
+        aisleUuid: string,
-    props: { aisleWidth?: number; aisleLength?: number; gapLength?: number }
+        props: { aisleWidth?: number; aisleLength?: number; gapLength?: number }
-  ) => void;
+    ) => void;
-  setArcAisleWidth: (
+    setArcAisleWidth: (
-    aisleUuid: string,
+        aisleUuid: string,
-    props: { aisleWidth?: number; isFlipped: boolean }
+        props: { aisleWidth?: number; isFlipped: boolean }
-  ) => void;
+    ) => void;
-  setCircleAisleWidth: (aisleUuid: string, width: number) => void;
+    setCircleAisleWidth: (aisleUuid: string, width: number) => void;
-  setJunctionAisleProperties: (
+    setJunctionAisleProperties: (
-    aisleUuid: string,
+        aisleUuid: string,
-    props: { aisleWidth?: number; isFlipped: boolean }
+        props: { aisleWidth?: number; isFlipped: boolean }
-  ) => void;
+    ) => void;
 
-  getAisleById: (uuid: string) => Aisle | undefined;
+    getAisleById: (uuid: string) => Aisle | undefined;
-  getAislesByPointId: (uuid: string) => Aisle[] | [];
+    getAislesByPointId: (uuid: string) => Aisle[] | [];
-  getAislePointById: (uuid: string) => Point | undefined;
+    getAislePointById: (uuid: string) => Point | undefined;
-  getConnectedPoints: (uuid: string) => Point[] | [];
+    getConnectedPoints: (uuid: string) => Point[] | [];
-  getAisleType: <T extends AisleType>(uuid: string) => T | undefined;
+    getAisleType: <T extends AisleType>(uuid: string) => T | undefined;
 }
 
-export const useAisleStore = create<AisleStore>()(
+export const createAisleStore = () => {
-  immer((set, get) => ({
+    return create<AisleStore>()(
-    aisles: [],
+        immer((set, get) => ({
+            aisles: [],
 
-    setAisles: (aisles) =>
+            setAisles: (aisles) =>
-      set((state) => {
+                set((state) => {
-        state.aisles = aisles;
+                    state.aisles = aisles;
-      }),
+                }),
 
-    addAisle: (aisle) =>
+            addAisle: (aisle) =>
-      set((state) => {
+                set((state) => {
-        state.aisles.push(aisle);
+                    state.aisles.push(aisle);
-      }),
+                }),
 
-    updateAisle: (uuid, updated) =>
+            updateAisle: (uuid, updated) =>
-      set((state) => {
+                set((state) => {
-        const aisle = state.aisles.find((a) => a.aisleUuid === uuid);
+                    const aisle = state.aisles.find((a) => a.aisleUuid === uuid);
-        if (aisle) {
+                    if (aisle) {
-          Object.assign(aisle, updated);
+                        Object.assign(aisle, updated);
-        }
+                    }
-      }),
+                }),
 
-    removeAisle: (uuid) =>
+            removeAisle: (uuid) =>
-      set((state) => {
+                set((state) => {
-        state.aisles = state.aisles.filter((a) => a.aisleUuid !== uuid);
+                    state.aisles = state.aisles.filter((a) => a.aisleUuid !== uuid);
-      }),
+                }),
 
-    removePoint: (uuid) => {
+            removePoint: (uuid) => {
-      const removedAisles: Aisle[] = [];
+                const removedAisles: Aisle[] = [];
-      set((state) => {
+                set((state) => {
-        state.aisles = state.aisles.filter((aisle) => {
+                    state.aisles = state.aisles.filter((aisle) => {
-          const hasPoint = aisle.points.some(
+                        const hasPoint = aisle.points.some(
-            (point) => point.pointUuid === uuid
+                            (point) => point.pointUuid === uuid
-          );
+                        );
-          if (hasPoint) {
+                        if (hasPoint) {
-            removedAisles.push(JSON.parse(JSON.stringify(aisle)));
+                            removedAisles.push(JSON.parse(JSON.stringify(aisle)));
-            return false;
+                            return false;
-          }
+                        }
-          return true;
+                        return true;
-        });
+                    });
-      });
+                });
-      return removedAisles;
+                return removedAisles;
-    },
+            },
 
-    setPosition: (pointUuid, position) => {
+            setPosition: (pointUuid, position) => {
-      let updatedAisle: Aisle | undefined;
+                let updatedAisle: Aisle | undefined;
-      set((state) => {
+                set((state) => {
-        for (const aisle of state.aisles) {
+                    for (const aisle of state.aisles) {
-          const point = aisle.points.find((p) => p.pointUuid === pointUuid);
+                        const point = aisle.points.find((p) => p.pointUuid === pointUuid);
-          if (point) {
+                        if (point) {
-            point.position = position;
+                            point.position = position;
-            updatedAisle = JSON.parse(JSON.stringify(aisle));
+                            updatedAisle = JSON.parse(JSON.stringify(aisle));
-          }
+                        }
-        }
+                    }
-      });
+                });
-      return updatedAisle;
+                return updatedAisle;
-    },
+            },
 
-    setLayer: (pointUuid, layer) =>
+            setLayer: (pointUuid, layer) =>
-      set((state) => {
+                set((state) => {
-        for (const aisle of state.aisles) {
+                    for (const aisle of state.aisles) {
-          const point = aisle.points.find((p) => p.pointUuid === pointUuid);
+                        const point = aisle.points.find((p) => p.pointUuid === pointUuid);
-          if (point) {
+                        if (point) {
-            point.layer = layer;
+                            point.layer = layer;
-          }
+                        }
-        }
+                    }
-      }),
+                }),
 
-    setColor: (aisleUuid, color) =>
+            setColor: (aisleUuid, color) =>
-      set((state) => {
+                set((state) => {
-        const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
+                    const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
-        if (aisle) {
+                    if (aisle) {
-          aisle.type.aisleColor = color;
+                        aisle.type.aisleColor = color;
-        }
+                    }
-      }),
+                }),
 
-    // Type-specific property setters
+            // Type-specific property setters
-    setSolidAisleWidth: (aisleUuid, width) =>
+            setSolidAisleWidth: (aisleUuid, width) =>
-      set((state) => {
+                set((state) => {
-        const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
+                    const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
-        if (aisle && aisle.type.aisleType === "solid-aisle") {
+                    if (aisle && aisle.type.aisleType === "solid-aisle") {
-          aisle.type.aisleWidth = width;
+                        aisle.type.aisleWidth = width;
-        }
+                    }
-      }),
+                }),
 
-    setDashedAisleProperties: (aisleUuid, props) =>
+            setDashedAisleProperties: (aisleUuid, props) =>
-      set((state) => {
+                set((state) => {
-        const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
+                    const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
-        if (aisle && aisle.type.aisleType === "dashed-aisle") {
+                    if (aisle && aisle.type.aisleType === "dashed-aisle") {
-          if (props.aisleWidth !== undefined)
+                        if (props.aisleWidth !== undefined)
-            aisle.type.aisleWidth = props.aisleWidth;
+                            aisle.type.aisleWidth = props.aisleWidth;
-          if (props.dashLength !== undefined)
+                        if (props.dashLength !== undefined)
-            aisle.type.dashLength = props.dashLength;
+                            aisle.type.dashLength = props.dashLength;
-          if (props.gapLength !== undefined)
+                        if (props.gapLength !== undefined)
-            aisle.type.gapLength = props.gapLength;
+                            aisle.type.gapLength = props.gapLength;
-        }
+                    }
-      }),
+                }),
 
-    setDottedAisleProperties: (aisleUuid, props) =>
+            setDottedAisleProperties: (aisleUuid, props) =>
-      set((state) => {
+                set((state) => {
-        const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
+                    const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
-        if (aisle && aisle.type.aisleType === "dotted-aisle") {
+                    if (aisle && aisle.type.aisleType === "dotted-aisle") {
-          if (props.dotRadius !== undefined)
+                        if (props.dotRadius !== undefined)
-            aisle.type.dotRadius = props.dotRadius;
+                            aisle.type.dotRadius = props.dotRadius;
-          if (props.gapLength !== undefined)
+                        if (props.gapLength !== undefined)
-            aisle.type.gapLength = props.gapLength;
+                            aisle.type.gapLength = props.gapLength;
-        }
+                    }
-      }),
+                }),
 
-    setArrowAisleWidth: (aisleUuid, width) =>
+            setArrowAisleWidth: (aisleUuid, width) =>
-      set((state) => {
+                set((state) => {
-        const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
+                    const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
-        if (aisle && aisle.type.aisleType === "arrow-aisle") {
+                    if (aisle && aisle.type.aisleType === "arrow-aisle") {
-          aisle.type.aisleWidth = width;
+                        aisle.type.aisleWidth = width;
-        }
+                    }
-      }),
+                }),
 
-    setArrowsAisleProperties: (aisleUuid, props) =>
+            setArrowsAisleProperties: (aisleUuid, props) =>
-      set((state) => {
+                set((state) => {
-        const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
+                    const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
-        if (aisle && aisle.type.aisleType === "arrows-aisle") {
+                    if (aisle && aisle.type.aisleType === "arrows-aisle") {
-          if (props.aisleWidth !== undefined)
+                        if (props.aisleWidth !== undefined)
-            aisle.type.aisleWidth = props.aisleWidth;
+                            aisle.type.aisleWidth = props.aisleWidth;
-          if (props.aisleLength !== undefined)
+                        if (props.aisleLength !== undefined)
-            aisle.type.aisleLength = props.aisleLength;
+                            aisle.type.aisleLength = props.aisleLength;
-          if (props.gapLength !== undefined)
+                        if (props.gapLength !== undefined)
-            aisle.type.gapLength = props.gapLength;
+                            aisle.type.gapLength = props.gapLength;
-        }
+                    }
-      }),
+                }),
 
-    setArcAisleWidth: (aisleUuid, props) =>
+            setArcAisleWidth: (aisleUuid, props) =>
-      set((state) => {
+                set((state) => {
-        const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
+                    const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
-        if (aisle && aisle.type.aisleType === "arc-aisle") {
+                    if (aisle && aisle.type.aisleType === "arc-aisle") {
-          if (props.aisleWidth !== undefined)
+                        if (props.aisleWidth !== undefined)
-            aisle.type.aisleWidth = props.aisleWidth;
+                            aisle.type.aisleWidth = props.aisleWidth;
-          if (props.isFlipped !== undefined)
+                        if (props.isFlipped !== undefined)
-            aisle.type.isFlipped = props.isFlipped;
+                            aisle.type.isFlipped = props.isFlipped;
-        }
+                    }
-      }),
+                }),
 
-    setCircleAisleWidth: (aisleUuid, width) =>
+            setCircleAisleWidth: (aisleUuid, width) =>
-      set((state) => {
+                set((state) => {
-        const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
+                    const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
-        if (aisle && aisle.type.aisleType === "circle-aisle") {
+                    if (aisle && aisle.type.aisleType === "circle-aisle") {
-          aisle.type.aisleWidth = width;
+                        aisle.type.aisleWidth = width;
-        }
+                    }
-      }),
+                }),
 
-    setJunctionAisleProperties: (aisleUuid, props) =>
+            setJunctionAisleProperties: (aisleUuid, props) =>
-      set((state) => {
+                set((state) => {
-        const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
+                    const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
-        if (aisle && aisle.type.aisleType === "junction-aisle") {
+                    if (aisle && aisle.type.aisleType === "junction-aisle") {
-          if (props.aisleWidth !== undefined)
+                        if (props.aisleWidth !== undefined)
-            aisle.type.aisleWidth = props.aisleWidth;
+                            aisle.type.aisleWidth = props.aisleWidth;
-          if (props.isFlipped !== undefined)
+                        if (props.isFlipped !== undefined)
-            aisle.type.isFlipped = props.isFlipped;
+                            aisle.type.isFlipped = props.isFlipped;
-        }
+                    }
-      }),
+                }),
 
-    getAisleById: (uuid) => {
+            getAisleById: (uuid) => {
-      return get().aisles.find((a) => a.aisleUuid === uuid);
+                return get().aisles.find((a) => a.aisleUuid === uuid);
-    },
+            },
 
-    getAislesByPointId: (uuid) => {
+            getAislesByPointId: (uuid) => {
-      return get().aisles.filter((a) => {
+                return get().aisles.filter((a) => {
-        return a.points.some((p) => p.pointUuid === uuid);
+                    return a.points.some((p) => p.pointUuid === uuid);
-      })
+                })
-    },
+            },
 
-    getAislePointById: (uuid) => {
+            getAislePointById: (uuid) => {
-      for (const aisle of get().aisles) {
+                for (const aisle of get().aisles) {
-        const point = aisle.points.find((p) => p.pointUuid === uuid);
+                    const point = aisle.points.find((p) => p.pointUuid === uuid);
-        if (point) {
+                    if (point) {
-          return point;
+                        return point;
-        }
+                    }
-      }
+                }
-      return undefined;
+                return undefined;
-    },
+            },
 
-    getConnectedPoints: (uuid) => {
+            getConnectedPoints: (uuid) => {
-      const connected: Point[] = [];
+                const connected: Point[] = [];
-      for (const aisle of get().aisles) {
+                for (const aisle of get().aisles) {
-        for (const point of aisle.points) {
+                    for (const point of aisle.points) {
-          if (point.pointUuid === uuid) {
+                        if (point.pointUuid === uuid) {
-            connected.push(...aisle.points.filter((p) => p.pointUuid !== uuid));
+                            connected.push(...aisle.points.filter((p) => p.pointUuid !== uuid));
-          }
+                        }
-        }
+                    }
-      }
+                }
-      return connected;
+                return connected;
-    },
+            },
 
-    getAisleType: <T extends AisleType>(uuid: string) => {
+            getAisleType: <T extends AisleType>(uuid: string) => {
-      const aisle = get().aisles.find((a) => a.aisleUuid === uuid);
+                const aisle = get().aisles.find((a) => a.aisleUuid === uuid);
-      return aisle?.type as T | undefined;
+                return aisle?.type as T | undefined;
-    },
+            },
-  }))
+        }))
-);
+    )
+}
+
+export type AisleStoreType = ReturnType<typeof createAisleStore>;

app/src/store/simulation/useEventsStore.ts

@@ -43,315 +43,319 @@ type EventsStore = {
     getTriggerByUuid: (triggerUuid: string) => TriggerSchema | undefined;
 };
 
-export const useEventsStore = create<EventsStore>()(
+export const createEventStore = () => {
-    immer((set, get) => ({
+    return create<EventsStore>()(
-        events: [],
+        immer((set, get) => ({
+            events: [],
 
-        // Event-level actions
+            // Event-level actions
-        addEvent: (event) => {
+            addEvent: (event) => {
-            set((state) => {
+                set((state) => {
-                if (!state.events.some(e => 'modelUuid' in e && e.modelUuid === event.modelUuid)) {
+                    if (!state.events.some(e => 'modelUuid' in e && e.modelUuid === event.modelUuid)) {
-                    state.events.push(event);
+                        state.events.push(event);
-                }
-            });
-        },
-
-        removeEvent: (modelUuid) => {
-            set((state) => {
-                state.events = state.events.filter(e => 'modelUuid' in e && e.modelUuid !== modelUuid);
-            });
-        },
-
-        clearEvents: () => {
-            set((state) => {
-                state.events = [];
-            });
-        },
-
-        updateEvent: (modelUuid, updates) => {
-            let updatedEvent: EventsSchema | undefined;
-            set((state) => {
-                const event = state.events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
-                if (event) {
-                    Object.assign(event, updates);
-                    updatedEvent = JSON.parse(JSON.stringify(event));
-                }
-            });
-            return updatedEvent;
-        },
-
-        // Point-level actions
-        addPoint: (modelUuid, point) => {
-            set((state) => {
-                const event = state.events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
-                if (event && 'points' in event) {
-                    const existingPoint = (event as ConveyorEventSchema).points.find(p => p.uuid === point.uuid);
-                    if (!existingPoint) {
-                        (event as ConveyorEventSchema).points.push(point as ConveyorPointSchema);
                     }
-                } else if (event && 'point' in event) {
+                });
-                    if (!(event as any).point || (event as any).point.uuid !== point.uuid) {
+            },
-                        (event as VehicleEventSchema | RoboticArmEventSchema | MachineEventSchema | StorageEventSchema).point = point as any;
-                    }
-                }
-            });
-        },
 
-        removePoint: (modelUuid, pointUuid) => {
+            removeEvent: (modelUuid) => {
-            set((state) => {
+                set((state) => {
-                const event = state.events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
+                    state.events = state.events.filter(e => 'modelUuid' in e && e.modelUuid !== modelUuid);
-                if (event && 'points' in event) {
+                });
-                    (event as ConveyorEventSchema).points = (event as ConveyorEventSchema).points.filter(p => p.uuid !== pointUuid);
+            },
-                }
-                // For single-point events, you might want to handle differently
-            });
-        },
 
-        updatePoint: (modelUuid, pointUuid, updates) => {
+            clearEvents: () => {
-            let updatedEvent: EventsSchema | undefined;
+                set((state) => {
-            set((state) => {
+                    state.events = [];
-                const event = state.events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
+                });
-                if (event && 'points' in event) {
+            },
-                    const point = (event as ConveyorEventSchema).points.find(p => p.uuid === pointUuid);
+
-                    if (point) {
+            updateEvent: (modelUuid, updates) => {
-                        Object.assign(point, updates);
+                let updatedEvent: EventsSchema | undefined;
+                set((state) => {
+                    const event = state.events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
+                    if (event) {
+                        Object.assign(event, updates);
                         updatedEvent = JSON.parse(JSON.stringify(event));
                     }
-                } else if (event && 'point' in event && (event as any).point.uuid === pointUuid) {
+                });
-                    Object.assign((event as any).point, updates);
+                return updatedEvent;
-                    updatedEvent = JSON.parse(JSON.stringify(event));
+            },
-                }
-            });
-            return updatedEvent;
-        },
 
-        // Action-level actions
+            // Point-level actions
-        addAction: (modelUuid, pointUuid, action) => {
+            addPoint: (modelUuid, point) => {
-            set((state) => {
+                set((state) => {
-                const event = state.events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
+                    const event = state.events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
-                if (event && 'points' in event) {
+                    if (event && 'points' in event) {
-                    const point = (event as ConveyorEventSchema).points.find(p => p.uuid === pointUuid);
+                        const existingPoint = (event as ConveyorEventSchema).points.find(p => p.uuid === point.uuid);
-                    if (point && (!point.action || point.action.actionUuid !== action.actionUuid)) {
+                        if (!existingPoint) {
-                        point.action = action as any;
+                            (event as ConveyorEventSchema).points.push(point as ConveyorPointSchema);
-                    }
-                } else if (event && 'point' in event && (event as any).point.uuid === pointUuid) {
-                    const point = (event as any).point;
-                    if ('action' in point && (!point.action || point.action.actionUuid !== action.actionUuid)) {
-                        point.action = action;
-                    } else if ('actions' in point && !point.actions.some((a: any) => a.actionUuid === action.actionUuid)) {
-                        point.actions.push(action);
-                    }
-                }
-            });
-        },
-
-        removeAction: (actionUuid) => {
-            set((state) => {
-                for (const event of state.events) {
-                    if ('points' in event) {
-                        for (const point of (event as ConveyorEventSchema).points) {
-                            if (point.action && point.action.actionUuid === actionUuid) {
-                                // Handle removal for single action points
-                            }
                         }
-                    } else if ('point' in event) {
+                    } else if (event && 'point' in event) {
+                        if (!(event as any).point || (event as any).point.uuid !== point.uuid) {
+                            (event as VehicleEventSchema | RoboticArmEventSchema | MachineEventSchema | StorageEventSchema).point = point as any;
+                        }
+                    }
+                });
+            },
+
+            removePoint: (modelUuid, pointUuid) => {
+                set((state) => {
+                    const event = state.events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
+                    if (event && 'points' in event) {
+                        (event as ConveyorEventSchema).points = (event as ConveyorEventSchema).points.filter(p => p.uuid !== pointUuid);
+                    }
+                    // For single-point events, you might want to handle differently
+                });
+            },
+
+            updatePoint: (modelUuid, pointUuid, updates) => {
+                let updatedEvent: EventsSchema | undefined;
+                set((state) => {
+                    const event = state.events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
+                    if (event && 'points' in event) {
+                        const point = (event as ConveyorEventSchema).points.find(p => p.uuid === pointUuid);
+                        if (point) {
+                            Object.assign(point, updates);
+                            updatedEvent = JSON.parse(JSON.stringify(event));
+                        }
+                    } else if (event && 'point' in event && (event as any).point.uuid === pointUuid) {
+                        Object.assign((event as any).point, updates);
+                        updatedEvent = JSON.parse(JSON.stringify(event));
+                    }
+                });
+                return updatedEvent;
+            },
+
+            // Action-level actions
+            addAction: (modelUuid, pointUuid, action) => {
+                set((state) => {
+                    const event = state.events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
+                    if (event && 'points' in event) {
+                        const point = (event as ConveyorEventSchema).points.find(p => p.uuid === pointUuid);
+                        if (point && (!point.action || point.action.actionUuid !== action.actionUuid)) {
+                            point.action = action as any;
+                        }
+                    } else if (event && 'point' in event && (event as any).point.uuid === pointUuid) {
                         const point = (event as any).point;
-                        if (event.type === "roboticArm") {
+                        if ('action' in point && (!point.action || point.action.actionUuid !== action.actionUuid)) {
-                            if ('actions' in point) {
+                            point.action = action;
-                                point.actions = point.actions.filter((a: any) => a.actionUuid !== actionUuid);
+                        } else if ('actions' in point && !point.actions.some((a: any) => a.actionUuid === action.actionUuid)) {
-                            }
+                            point.actions.push(action);
-                        } else if ('action' in point && point.action?.actionUuid === actionUuid) {
-                            // Handle single action
                         }
                     }
-                }
+                });
-            });
+            },
-        },
 
-        updateAction: (actionUuid, updates) => {
+            removeAction: (actionUuid) => {
-            set((state) => {
+                set((state) => {
-                for (const event of state.events) {
+                    for (const event of state.events) {
-                    if ('points' in event) {
+                        if ('points' in event) {
-                        for (const point of (event as ConveyorEventSchema).points) {
+                            for (const point of (event as ConveyorEventSchema).points) {
-                            if (point.action && point.action.actionUuid === actionUuid) {
+                                if (point.action && point.action.actionUuid === actionUuid) {
+                                    // Handle removal for single action points
+                                }
+                            }
+                        } else if ('point' in event) {
+                            const point = (event as any).point;
+                            if (event.type === "roboticArm") {
+                                if ('actions' in point) {
+                                    point.actions = point.actions.filter((a: any) => a.actionUuid !== actionUuid);
+                                }
+                            } else if ('action' in point && point.action?.actionUuid === actionUuid) {
+                                // Handle single action
+                            }
+                        }
+                    }
+                });
+            },
+
+            updateAction: (actionUuid, updates) => {
+                set((state) => {
+                    for (const event of state.events) {
+                        if ('points' in event) {
+                            for (const point of (event as ConveyorEventSchema).points) {
+                                if (point.action && point.action.actionUuid === actionUuid) {
+                                    Object.assign(point.action, updates);
+                                    return;
+                                }
+                            }
+                        } else if ('point' in event) {
+                            const point = (event as any).point;
+                            if ('action' in point && point.action.actionUuid === actionUuid) {
                                 Object.assign(point.action, updates);
                                 return;
-                            }
+                            } else if ('actions' in point) {
-                        }
+                                const action = point.actions.find((a: any) => a.actionUuid === actionUuid);
-                    } else if ('point' in event) {
+                                if (action) {
-                        const point = (event as any).point;
+                                    Object.assign(action, updates);
-                        if ('action' in point && point.action.actionUuid === actionUuid) {
-                            Object.assign(point.action, updates);
-                            return;
-                        } else if ('actions' in point) {
-                            const action = point.actions.find((a: any) => a.actionUuid === actionUuid);
-                            if (action) {
-                                Object.assign(action, updates);
-                                return;
-                            }
-                        }
-                    }
-                }
-            });
-        },
-
-        // Trigger-level actions
-        addTrigger: (actionUuid, trigger) => {
-            set((state) => {
-                for (const event of state.events) {
-                    if ('points' in event) {
-                        for (const point of (event as ConveyorEventSchema).points) {
-                            if (point.action && point.action.actionUuid === actionUuid) {
-                                if (!point.action.triggers.some(t => t.triggerUuid === trigger.triggerUuid)) {
-                                    point.action.triggers.push(trigger);
-                                }
-                                return;
-                            }
-                        }
-                    } else if ('point' in event) {
-                        const point: MachinePointSchema | VehiclePointSchema = (event as any).point;
-                        if ('action' in point && point.action.actionUuid === actionUuid) {
-                            if (!point.action.triggers.some(t => t.triggerUuid === trigger.triggerUuid)) {
-                                point.action.triggers.push(trigger);
-                            }
-                            return;
-                        } else if ('actions' in point) {
-                            const action = (point as RoboticArmPointSchema).actions.find((a) => a.actionUuid === actionUuid);
-                            if (action && !action.triggers.some(t => t.triggerUuid === trigger.triggerUuid)) {
-                                action.triggers.push(trigger);
-                                return;
-                            }
-                        }
-                    }
-                }
-            });
-        },
-
-        removeTrigger: (triggerUuid) => {
-            set((state) => {
-                for (const event of state.events) {
-                    if ('points' in event) {
-                        for (const point of (event as ConveyorEventSchema).points) {
-                            if (point.action && 'triggers' in point.action) {
-                                point.action.triggers = point.action.triggers.filter(t => t.triggerUuid !== triggerUuid);
-                            }
-                        }
-                    } else if ('point' in event) {
-                        const point = (event as any).point;
-                        if ('action' in point && 'triggers' in point.action) {
-                            point.action.triggers = point.action.triggers.filter((t: any) => t.triggerUuid !== triggerUuid);
-                        } else if ('actions' in point) {
-                            for (const action of point.actions) {
-                                if ('triggers' in action) {
-                                    action.triggers = action.triggers.filter((t: any) => t.triggerUuid !== triggerUuid);
-                                }
-                            }
-                        }
-                    }
-                }
-            });
-        },
-
-        updateTrigger: (triggerUuid, updates) => {
-            set((state) => {
-                for (const event of state.events) {
-                    if ('points' in event) {
-                        for (const point of (event as ConveyorEventSchema).points) {
-                            if (point.action && 'triggers' in point.action) {
-                                const trigger = point.action.triggers.find(t => t.triggerUuid === triggerUuid);
-                                if (trigger) {
-                                    Object.assign(trigger, updates);
                                     return;
                                 }
                             }
                         }
-                    } else if ('point' in event) {
+                    }
-                        const point = (event as any).point;
+                });
-                        if ('action' in point && 'triggers' in point.action) {
+            },
-                            const trigger = point.action.triggers.find((t: any) => t.triggerUuid === triggerUuid);
+
-                            if (trigger) {
+            // Trigger-level actions
-                                Object.assign(trigger, updates);
+            addTrigger: (actionUuid, trigger) => {
-                                return;
+                set((state) => {
+                    for (const event of state.events) {
+                        if ('points' in event) {
+                            for (const point of (event as ConveyorEventSchema).points) {
+                                if (point.action && point.action.actionUuid === actionUuid) {
+                                    if (!point.action.triggers.some(t => t.triggerUuid === trigger.triggerUuid)) {
+                                        point.action.triggers.push(trigger);
+                                    }
+                                    return;
+                                }
                             }
-                        } else if ('actions' in point) {
+                        } else if ('point' in event) {
-                            for (const action of point.actions) {
+                            const point: MachinePointSchema | VehiclePointSchema = (event as any).point;
-                                if ('triggers' in action) {
+                            if ('action' in point && point.action.actionUuid === actionUuid) {
-                                    const trigger = action.triggers.find((t: any) => t.triggerUuid === triggerUuid);
+                                if (!point.action.triggers.some(t => t.triggerUuid === trigger.triggerUuid)) {
+                                    point.action.triggers.push(trigger);
+                                }
+                                return;
+                            } else if ('actions' in point) {
+                                const action = (point as RoboticArmPointSchema).actions.find((a) => a.actionUuid === actionUuid);
+                                if (action && !action.triggers.some(t => t.triggerUuid === trigger.triggerUuid)) {
+                                    action.triggers.push(trigger);
+                                    return;
+                                }
+                            }
+                        }
+                    }
+                });
+            },
+
+            removeTrigger: (triggerUuid) => {
+                set((state) => {
+                    for (const event of state.events) {
+                        if ('points' in event) {
+                            for (const point of (event as ConveyorEventSchema).points) {
+                                if (point.action && 'triggers' in point.action) {
+                                    point.action.triggers = point.action.triggers.filter(t => t.triggerUuid !== triggerUuid);
+                                }
+                            }
+                        } else if ('point' in event) {
+                            const point = (event as any).point;
+                            if ('action' in point && 'triggers' in point.action) {
+                                point.action.triggers = point.action.triggers.filter((t: any) => t.triggerUuid !== triggerUuid);
+                            } else if ('actions' in point) {
+                                for (const action of point.actions) {
+                                    if ('triggers' in action) {
+                                        action.triggers = action.triggers.filter((t: any) => t.triggerUuid !== triggerUuid);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                });
+            },
+
+            updateTrigger: (triggerUuid, updates) => {
+                set((state) => {
+                    for (const event of state.events) {
+                        if ('points' in event) {
+                            for (const point of (event as ConveyorEventSchema).points) {
+                                if (point.action && 'triggers' in point.action) {
+                                    const trigger = point.action.triggers.find(t => t.triggerUuid === triggerUuid);
                                     if (trigger) {
                                         Object.assign(trigger, updates);
                                         return;
                                     }
                                 }
                             }
+                        } else if ('point' in event) {
+                            const point = (event as any).point;
+                            if ('action' in point && 'triggers' in point.action) {
+                                const trigger = point.action.triggers.find((t: any) => t.triggerUuid === triggerUuid);
+                                if (trigger) {
+                                    Object.assign(trigger, updates);
+                                    return;
+                                }
+                            } else if ('actions' in point) {
+                                for (const action of point.actions) {
+                                    if ('triggers' in action) {
+                                        const trigger = action.triggers.find((t: any) => t.triggerUuid === triggerUuid);
+                                        if (trigger) {
+                                            Object.assign(trigger, updates);
+                                            return;
+                                        }
+                                    }
+                                }
+                            }
                         }
                     }
+                });
+            },
+
+            // Helper functions
+            getEventByModelUuid: (modelUuid) => {
+                return get().events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
+            },
+
+            getPointByUuid: (modelUuid, pointUuid) => {
+                const event = get().events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
+                if (event && 'points' in event) {
+                    return (event as ConveyorEventSchema).points.find(p => p.uuid === pointUuid);
+                } else if (event && 'point' in event && (event as any).point.uuid === pointUuid) {
+                    return (event as any).point;
                 }
-            });
+                return undefined;
-        },
+            },
 
-        // Helper functions
+            getActionByUuid: (actionUuid) => {
-        getEventByModelUuid: (modelUuid) => {
+                const state = get();
-            return get().events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
+                for (const event of state.events) {
-        },
+                    if ('points' in event) {
-
+                        for (const point of (event as ConveyorEventSchema).points) {
-        getPointByUuid: (modelUuid, pointUuid) => {
+                            if (point.action && point.action.actionUuid === actionUuid) {
-            const event = get().events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
+                                return point.action;
-            if (event && 'points' in event) {
+                            }
-                return (event as ConveyorEventSchema).points.find(p => p.uuid === pointUuid);
+                        }
-            } else if (event && 'point' in event && (event as any).point.uuid === pointUuid) {
+                    } else if ('point' in event) {
-                return (event as any).point;
+                        const point = (event as any).point;
-            }
+                        if ('action' in point && point.action.actionUuid === actionUuid) {
-            return undefined;
-        },
-
-        getActionByUuid: (actionUuid) => {
-            const state = get();
-            for (const event of state.events) {
-                if ('points' in event) {
-                    for (const point of (event as ConveyorEventSchema).points) {
-                        if (point.action && point.action.actionUuid === actionUuid) {
                             return point.action;
+                        } else if ('actions' in point) {
+                            const action = point.actions.find((a: any) => a.actionUuid === actionUuid);
+                            if (action) return action;
                         }
                     }
-                } else if ('point' in event) {
-                    const point = (event as any).point;
-                    if ('action' in point && point.action.actionUuid === actionUuid) {
-                        return point.action;
-                    } else if ('actions' in point) {
-                        const action = point.actions.find((a: any) => a.actionUuid === actionUuid);
-                        if (action) return action;
-                    }
                 }
-            }
+                return undefined;
-            return undefined;
+            },
-        },
 
-        getTriggerByUuid: (triggerUuid) => {
+            getTriggerByUuid: (triggerUuid) => {
-            const state = get();
+                const state = get();
-            for (const event of state.events) {
+                for (const event of state.events) {
-                if ('points' in event) {
+                    if ('points' in event) {
-                    for (const point of (event as ConveyorEventSchema).points) {
+                        for (const point of (event as ConveyorEventSchema).points) {
-                        if (point.action && 'triggers' in point.action) {
+                            if (point.action && 'triggers' in point.action) {
-                            const trigger = point.action.triggers.find(t => t.triggerUuid === triggerUuid);
+                                const trigger = point.action.triggers.find(t => t.triggerUuid === triggerUuid);
-                            if (trigger) return trigger;
-                        }
-                    }
-                } else if ('point' in event) {
-                    const point = (event as any).point;
-                    if ('action' in point && 'triggers' in point.action) {
-                        const trigger = point.action.triggers.find((t: any) => t.triggerUuid === triggerUuid);
-                        if (trigger) return trigger;
-                    } else if ('actions' in point) {
-                        for (const action of point.actions) {
-                            if ('triggers' in action) {
-                                const trigger = action.triggers.find((t: any) => t.triggerUuid === triggerUuid);
                                 if (trigger) return trigger;
                             }
                         }
+                    } else if ('point' in event) {
+                        const point = (event as any).point;
+                        if ('action' in point && 'triggers' in point.action) {
+                            const trigger = point.action.triggers.find((t: any) => t.triggerUuid === triggerUuid);
+                            if (trigger) return trigger;
+                        } else if ('actions' in point) {
+                            for (const action of point.actions) {
+                                if ('triggers' in action) {
+                                    const trigger = action.triggers.find((t: any) => t.triggerUuid === triggerUuid);
+                                    if (trigger) return trigger;
+                                }
+                            }
+                        }
                     }
                 }
+                return undefined;
             }
-            return undefined;
+        }))
-        }
+    )
-    }))
+}
-);
+
+export type EventStoreType = ReturnType<typeof createEventStore>;