H-5780: Remove petrinaut-old and fix Petrinaut CSS scoping for HASH embedding

.changeset/config.json

@@ -11,7 +11,6 @@
     "@local/*",
     "@rust/*",
     "@tests/*",
-    "@hashintel/petrinaut-old",
     "@hashintel/block-design-system",
     "@hashintel/design-system",
     "@hashintel/query-editor",

apps/hash-frontend/next.config.js

@@ -155,7 +155,9 @@ export default withSentryConfig(
         "@emotion/server",
         "@hashintel/block-design-system",
         "@hashintel/design-system",
-        "@hashintel/petrinaut-old",
+        "@hashintel/petrinaut",
+        "@hashintel/ds-components",
+        "@hashintel/ds-helpers",
         "@hashintel/type-editor",
         "echarts",
         "zrender",

apps/hash-frontend/package.json

@@ -36,7 +36,9 @@
     "@glideapps/glide-data-grid": "patch:@glideapps/glide-data-grid@npm%3A6.0.3#~/.yarn/patches/@glideapps-glide-data-grid-npm-6.0.3-f71d586425.patch",
     "@hashintel/block-design-system": "0.0.6",
     "@hashintel/design-system": "0.0.9",
-    "@hashintel/petrinaut-old": "0.0.5",
+    "@hashintel/ds-components": "0.0.4",
+    "@hashintel/ds-helpers": "0.0.4",
+    "@hashintel/petrinaut": "0.0.8",
     "@hashintel/query-editor": "0.0.4",
     "@hashintel/type-editor": "0.0.26",
     "@lit-labs/react": "1.2.1",

apps/hash-frontend/src/pages/process.page.tsx

@@ -1,6 +1,17 @@
+import dynamic from "next/dynamic";
+
 import type { NextPageWithLayout } from "../shared/layout";
 import { getLayoutWithSidebar } from "../shared/layout";
-import { ProcessEditorWrapper } from "./process.page/process-editor-wrapper";
+
+// Petrinaut uses Web Workers, Canvas, Monaco Editor, and the TypeScript compiler
+// which all require browser APIs — must not be server-rendered.
+const ProcessEditorWrapper = dynamic(
+  () =>
+    import("./process.page/process-editor-wrapper").then((mod) => ({
+      default: mod.ProcessEditorWrapper,
+    })),
+  { ssr: false },
+);
 
 const ProcessPage: NextPageWithLayout = () => {
   return <ProcessEditorWrapper />;

apps/hash-frontend/src/pages/process.page/process-editor-wrapper.tsx

@@ -1,7 +1,9 @@
+import "@hashintel/petrinaut/dist/main.css";
+
 import type { EntityId } from "@blockprotocol/type-system";
 import { AlertModal } from "@hashintel/design-system";
-import type { PetriNetDefinitionObject } from "@hashintel/petrinaut-old";
-import { defaultTokenTypes, Petrinaut } from "@hashintel/petrinaut-old";
+import type { SDCPN } from "@hashintel/petrinaut";
+import { Petrinaut } from "@hashintel/petrinaut";
 import { Box, Stack } from "@mui/material";
 import { produce } from "immer";
 import { useCallback, useMemo, useState } from "react";
@@ -15,22 +17,17 @@ import {
 export const ProcessEditorWrapper = () => {
   const [selectedNetId, setSelectedNetId] = useState<EntityId | null>(null);
   const [title, setTitle] = useState<string>("Process");
-  const [parentNet, setParentNet] = useState<{
-    parentNetId: EntityId;
-    title: string;
-  } | null>(null);
-
-  const [petriNetDefinition, setPetriNetDefinition] =
-    useState<PetriNetDefinitionObject>({
-      arcs: [],
-      nodes: [],
-      tokenTypes: defaultTokenTypes,
-    });
+
+  const [petriNetDefinition, setPetriNetDefinition] = useState<SDCPN>({
+    places: [],
+    transitions: [],
+    types: [],
+    differentialEquations: [],
+    parameters: [],
+  });
 
   const mutatePetriNetDefinition = useCallback(
-    (
-      mutationFn: (petriNetDefinition: PetriNetDefinitionObject) => undefined,
-    ) => {
+    (mutationFn: (petriNetDefinition: SDCPN) => void) => {
       setPetriNetDefinition((netDefinition) => {
         const updatedNetDefinition = produce(netDefinition, (draft) => {
           mutationFn(draft);
@@ -55,10 +52,8 @@ export const ProcessEditorWrapper = () => {
     userEditable,
     setUserEditable,
   } = useProcessSaveAndLoad({
-    parentNet,
     petriNet: petriNetDefinition,
     selectedNetId,
-    setParentNet,
     setPetriNet: setPetriNetDefinition,
     setSelectedNetId,
     setTitle,
@@ -70,17 +65,16 @@ export const ProcessEditorWrapper = () => {
       petriNetDefinition: newPetriNetDefinition,
       title: newTitle,
     }: {
-      petriNetDefinition: PetriNetDefinitionObject;
+      petriNetDefinition: SDCPN;
       title: string;
     }) => {
       setPetriNetDefinition(newPetriNetDefinition);
 
       setSelectedNetId(null);
-      setParentNet(null);
       setUserEditable(true);
       setTitle(newTitle);
     },
-    [setParentNet, setSelectedNetId, setUserEditable, setTitle],
+    [setSelectedNetId, setUserEditable, setTitle],
   );
 
   const loadNetFromId = useCallback(
@@ -100,7 +94,7 @@ export const ProcessEditorWrapper = () => {
     [isDirty, loadPersistedNet, persistedNets],
   );
 
-  const childProcessOptions = useMemo(() => {
+  const existingNetOptions = useMemo(() => {
     return persistedNets
       .filter((net) => net.userEditable && net.entityId !== selectedNetId)
       .map((net) => ({
@@ -140,13 +134,13 @@ export const ProcessEditorWrapper = () => {
       <Box sx={{ height: "100%" }}>
         <Petrinaut
           createNewNet={createNewNet}
-          existingNets={childProcessOptions}
+          existingNets={existingNetOptions}
           hideNetManagementControls={false}
           loadPetriNet={(id) => loadNetFromId(id as EntityId)}
-          parentNet={parentNet}
           petriNetDefinition={petriNetDefinition}
           petriNetId={selectedNetId}
           mutatePetriNetDefinition={mutatePetriNetDefinition}
+          readonly={!userEditable}
           setTitle={setTitle}
           title={title}
         />