Remove Zustand and use simple React Contexts

libs/@hashintel/petrinaut/demo-site/sentry/sentry-error-tracker-provider.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-no-constructed-context-values */
 import * as Sentry from "@sentry/react";
 
 import { ErrorTrackerContext } from "../../src/error-tracker/error-tracker.context";

libs/@hashintel/petrinaut/eslint.config.js

@@ -36,6 +36,7 @@ export default [
     rules: {
       // Disabled because React Compiler handles optimization automatically
       "react/jsx-no-bind": "off",
+      "react/jsx-no-constructed-context-values": "off",
       "no-restricted-imports": [
         "error",
         {

libs/@hashintel/petrinaut/package.json

@@ -45,8 +45,7 @@
     "reactflow": "11.11.4",
     "typescript": "5.9.3",
     "uuid": "13.0.0",
-    "web-worker": "1.4.1",
-    "zustand": "5.0.8"
+    "web-worker": "1.4.1"
   },
   "devDependencies": {
     "@hashintel/ds-helpers": "0.0.1-b",

libs/@hashintel/petrinaut/src/hooks/use-default-parameter-values.ts

@@ -1,7 +1,7 @@
-import { useMemo } from "react";
+import { use, useMemo } from "react";
 
 import type { Parameter } from "../core/types/sdcpn";
-import { useSDCPNContext } from "../state/sdcpn-provider";
+import { SDCPNContext } from "../state/sdcpn-context";
 
 /**
  * A type-safe representation of parameter values that can be used in the simulation.
@@ -72,7 +72,7 @@ export function mergeParameterValues(
 export function useDefaultParameterValues(): DefaultParameterValues {
   const {
     petriNetDefinition: { parameters },
-  } = useSDCPNContext();
+  } = use(SDCPNContext);
 
   return useMemo(() => {
     return deriveDefaultParameterValues(parameters);

libs/@hashintel/petrinaut/src/hooks/use-monaco-global-typings.ts

@@ -1,6 +1,6 @@
 import { loader } from "@monaco-editor/react";
 import type * as Monaco from "monaco-editor";
-import { useEffect, useState } from "react";
+import { use, useEffect, useState } from "react";
 
 import type {
   Color,
@@ -9,8 +9,8 @@ import type {
   Place,
   Transition,
 } from "../core/types/sdcpn";
-import { useEditorStore } from "../state/editor-provider";
-import { useSDCPNContext } from "../state/sdcpn-provider";
+import { EditorContext } from "../state/editor-context";
+import { SDCPNContext } from "../state/sdcpn-context";
 
 interface ReactTypeDefinitions {
   react: string;
@@ -301,11 +301,9 @@ export function useMonacoGlobalTypings() {
       places,
       differentialEquations,
     },
-  } = useSDCPNContext();
+  } = use(SDCPNContext);
 
-  const currentlySelectedItemId = useEditorStore(
-    (state) => state.selectedResourceId,
-  );
+  const { selectedResourceId: currentlySelectedItemId } = use(EditorContext);
 
   const [reactTypes, setReactTypes] = useState<ReactTypeDefinitions | null>(
     null,

libs/@hashintel/petrinaut/src/notifications/notifications-context.ts

@@ -1,4 +1,4 @@
-import { createContext, useContext } from "react";
+import { createContext, use } from "react";
 
 export interface NotifyOptions {
   message: string;
@@ -13,7 +13,7 @@ export const NotificationsContext =
   createContext<NotificationsContextValue | null>(null);
 
 export const useNotifications = (): NotificationsContextValue => {
-  const context = useContext(NotificationsContext);
+  const context = use(NotificationsContext);
 
   if (!context) {
     throw new Error(

libs/@hashintel/petrinaut/src/state/checker-context.ts

@@ -0,0 +1,24 @@
+import { createContext } from "react";
+
+import type { SDCPNCheckResult } from "../core/checker/checker";
+
+export type CheckResult = SDCPNCheckResult;
+
+export interface CheckerContextValue {
+  /** The result of the last SDCPN check */
+  checkResult: SDCPNCheckResult;
+  /** Total count of all diagnostics across all items */
+  totalDiagnosticsCount: number;
+}
+
+const DEFAULT_CONTEXT_VALUE: CheckerContextValue = {
+  checkResult: {
+    isValid: true,
+    itemDiagnostics: [],
+  },
+  totalDiagnosticsCount: 0,
+};
+
+export const CheckerContext = createContext<CheckerContextValue>(
+  DEFAULT_CONTEXT_VALUE,
+);

libs/@hashintel/petrinaut/src/state/checker-provider.tsx

@@ -1,62 +1,29 @@
-import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { use } from "react";
 
-import { checkSDCPN, type SDCPNCheckResult } from "../core/checker/checker";
-import { useSDCPNContext } from "./sdcpn-provider";
-
-export type CheckResult = SDCPNCheckResult;
-
-interface CheckerContextValue {
-  /** The result of the last SDCPN check */
-  checkResult: SDCPNCheckResult;
-  /** Total count of all diagnostics across all items */
-  totalDiagnosticsCount: number;
-}
-
-const CheckerContext = createContext<CheckerContextValue | null>(null);
+import { checkSDCPN } from "../core/checker/checker";
+import { CheckerContext } from "./checker-context";
+import { SDCPNContext } from "./sdcpn-context";
 
 export const CheckerProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
-  const { petriNetDefinition } = useSDCPNContext();
-
-  const [checkResult, setCheckResult] = useState<SDCPNCheckResult>(() =>
-    checkSDCPN(petriNetDefinition),
-  );
+  const { petriNetDefinition } = use(SDCPNContext);
 
-  // Re-run checker whenever the SDCPN changes
-  useEffect(() => {
-    const result = checkSDCPN(petriNetDefinition);
-    setCheckResult(result);
-  }, [petriNetDefinition]);
+  const checkResult = checkSDCPN(petriNetDefinition);
 
-  const totalDiagnosticsCount = useMemo(
-    () =>
-      checkResult.itemDiagnostics.reduce(
-        (sum, item) => sum + item.diagnostics.length,
-        0,
-      ),
-    [checkResult],
-  );
-
-  const value = useMemo<CheckerContextValue>(
-    () => ({
-      checkResult,
-      totalDiagnosticsCount,
-    }),
-    [checkResult, totalDiagnosticsCount],
+  const totalDiagnosticsCount = checkResult.itemDiagnostics.reduce(
+    (sum, item) => sum + item.diagnostics.length,
+    0,
   );
 
   return (
-    <CheckerContext.Provider value={value}>{children}</CheckerContext.Provider>
+    <CheckerContext.Provider
+      value={{
+        checkResult,
+        totalDiagnosticsCount,
+      }}
+    >
+      {children}
+    </CheckerContext.Provider>
   );
 };
-
-export function useCheckerContext(): CheckerContextValue {
-  const context = useContext(CheckerContext);
-
-  if (!context) {
-    throw new Error("useCheckerContext must be used within CheckerProvider");
-  }
-
-  return context;
-}

libs/@hashintel/petrinaut/src/state/editor-context.ts

@@ -0,0 +1,110 @@
+import { createContext } from "react";
+
+import {
+  DEFAULT_BOTTOM_PANEL_HEIGHT,
+  DEFAULT_LEFT_SIDEBAR_WIDTH,
+  DEFAULT_PROPERTIES_PANEL_WIDTH,
+} from "../constants/ui";
+
+export type DraggingStateByNodeId = Record<
+  string,
+  { dragging: boolean; position: { x: number; y: number } }
+>;
+
+type EditorGlobalMode = "edit" | "simulate";
+type EditorEditionMode = "select" | "pan" | "add-place" | "add-transition";
+export type BottomPanelTab =
+  | "diagnostics"
+  | "simulation-settings"
+  | "simulation-timeline";
+
+export type TimelineChartType = "run" | "stacked";
+
+/**
+ * The state values for the editor.
+ */
+export type EditorState = {
+  globalMode: EditorGlobalMode;
+  editionMode: EditorEditionMode;
+  isLeftSidebarOpen: boolean;
+  leftSidebarWidth: number;
+  propertiesPanelWidth: number;
+  isBottomPanelOpen: boolean;
+  bottomPanelHeight: number;
+  activeBottomPanelTab: BottomPanelTab;
+  selectedResourceId: string | null;
+  selectedItemIds: Set<string>;
+  draggingStateByNodeId: DraggingStateByNodeId;
+  timelineChartType: TimelineChartType;
+};
+
+/**
+ * The action functions for the editor.
+ */
+export type EditorActions = {
+  setGlobalMode: (mode: EditorGlobalMode) => void;
+  setEditionMode: (mode: EditorEditionMode) => void;
+  setLeftSidebarOpen: (isOpen: boolean) => void;
+  setLeftSidebarWidth: (width: number) => void;
+  setPropertiesPanelWidth: (width: number) => void;
+  setBottomPanelOpen: (isOpen: boolean) => void;
+  toggleBottomPanel: () => void;
+  setBottomPanelHeight: (height: number) => void;
+  setActiveBottomPanelTab: (tab: BottomPanelTab) => void;
+  setSelectedResourceId: (id: string | null) => void;
+  setSelectedItemIds: (ids: Set<string>) => void;
+  addSelectedItemId: (id: string) => void;
+  removeSelectedItemId: (id: string) => void;
+  clearSelection: () => void;
+  setDraggingStateByNodeId: (state: DraggingStateByNodeId) => void;
+  updateDraggingStateByNodeId: (
+    updater: (state: DraggingStateByNodeId) => DraggingStateByNodeId,
+  ) => void;
+  resetDraggingState: () => void;
+  setTimelineChartType: (chartType: TimelineChartType) => void;
+  __reinitialize: () => void;
+};
+
+export type EditorContextValue = EditorState & EditorActions;
+
+export const initialEditorState: EditorState = {
+  globalMode: "edit",
+  editionMode: "select",
+  isLeftSidebarOpen: true,
+  leftSidebarWidth: DEFAULT_LEFT_SIDEBAR_WIDTH,
+  propertiesPanelWidth: DEFAULT_PROPERTIES_PANEL_WIDTH,
+  isBottomPanelOpen: false,
+  bottomPanelHeight: DEFAULT_BOTTOM_PANEL_HEIGHT,
+  activeBottomPanelTab: "diagnostics",
+  selectedResourceId: null,
+  selectedItemIds: new Set(),
+  draggingStateByNodeId: {},
+  timelineChartType: "run",
+};
+
+const DEFAULT_CONTEXT_VALUE: EditorContextValue = {
+  ...initialEditorState,
+  setGlobalMode: () => {},
+  setEditionMode: () => {},
+  setLeftSidebarOpen: () => {},
+  setLeftSidebarWidth: () => {},
+  setPropertiesPanelWidth: () => {},
+  setBottomPanelOpen: () => {},
+  toggleBottomPanel: () => {},
+  setBottomPanelHeight: () => {},
+  setActiveBottomPanelTab: () => {},
+  setSelectedResourceId: () => {},
+  setSelectedItemIds: () => {},
+  addSelectedItemId: () => {},
+  removeSelectedItemId: () => {},
+  clearSelection: () => {},
+  setDraggingStateByNodeId: () => {},
+  updateDraggingStateByNodeId: () => {},
+  resetDraggingState: () => {},
+  setTimelineChartType: () => {},
+  __reinitialize: () => {},
+};
+
+export const EditorContext = createContext<EditorContextValue>(
+  DEFAULT_CONTEXT_VALUE,
+);