Json editor (#86)

* working panel. still buggy

* more accurate validations

* use zod

* Use zod source of truth accross app

* adjust default json

package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.3.0",
+    "@monaco-editor/react": "^4.6.0",
     "@types/d3": "^7.4.3",
     "@types/html2canvas": "^0.5.35",
     "@types/lz-string": "^1.5.0",
@@ -40,7 +41,9 @@
     "react-dom": "^18.2.0",
     "react-icons": "^5.3.0",
     "react-router-dom": "^7.0.1",
-    "tone": "^15.0.4"
+    "tone": "^15.0.4",
+    "zod": "^3.24.1",
+    "zod-validation-error": "^3.4.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",

src/components/GravitySimulator/GravitySimulator.tsx

@@ -50,6 +50,7 @@ import { useInteractionHandlers } from "../../hooks/useInteractionHandlers";
 import { useSimulatorState } from "../../hooks/useSimulatorState";
 import { useParticleSystem } from "../../hooks/useParticleSystem";
 import { useScreenshot } from "../../hooks/useScreenshot";
+import { JsonScenarioPanel } from "../JsonScenarioPanel/JsonScenarioPanel";
 
 export interface GravitySimulatorProps {
   gravityRef: React.RefObject<HTMLDivElement>;
@@ -315,6 +316,12 @@ export const GravitySimulator: React.FC<GravitySimulatorProps> = ({
     saveScenario,
   });
 
+  const [isJsonPanelOpen, setIsJsonPanelOpen] = useState(false);
+
+  const handleJsonPanelToggle = useCallback(() => {
+    setIsJsonPanelOpen((prev) => !prev);
+  }, []);
+
   // Audio files definition
   const audioFiles = useMemo(
     () => [
@@ -546,6 +553,7 @@ export const GravitySimulator: React.FC<GravitySimulatorProps> = ({
             onScreenshot={handleScreenshot}
             onScenarioPanel={handleScenarioPanelToggle}
             onSettingsPanel={handleSettingsPanelToggle}
+            onJsonPanel={handleJsonPanelToggle}
             isPaused={isPaused}
             isFullscreen={isFullscreen}
             isAudioPlaying={isAudioPlaying}
@@ -599,6 +607,12 @@ export const GravitySimulator: React.FC<GravitySimulatorProps> = ({
               onSelectScenario={onSelectScenario}
             />
 
+            <JsonScenarioPanel
+              isOpen={isJsonPanelOpen}
+              onClose={() => setIsJsonPanelOpen(false)}
+              onApplyScenario={handleSelectScenario}
+            />
+
             <SaveScenarioModal
               isOpen={isSaveModalOpen}
               onClose={() => setIsSaveModalOpen(false)}