FE-223, H-5780, H-6227: Setup Petrinaut inside HASH + Build with Vite 8 and TypeScript 7

.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

@@ -158,7 +158,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",
@@ -217,6 +219,20 @@ export default withSentryConfig(
         // eslint-disable-next-line no-param-reassign
         webpackConfig.resolve.alias.canvas = false;
 
+        if (!isServer) {
+          // Stub Node.js built-ins for browser — needed by `typescript` (used by
+          // @hashintel/petrinaut's in-browser language service)
+          // eslint-disable-next-line no-param-reassign
+          webpackConfig.resolve.fallback = {
+            ...webpackConfig.resolve.fallback,
+            module: false,
+            fs: false,
+            path: false,
+            os: false,
+            perf_hooks: false,
+          };
+        }
+
         webpackConfig.plugins.push(
           new DefinePlugin({
             __SENTRY_DEBUG__: false,

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": "workspace:*",
     "@hashintel/design-system": "workspace:*",
-    "@hashintel/petrinaut-old": "workspace:*",
+    "@hashintel/ds-components": "workspace:*",
+    "@hashintel/ds-helpers": "workspace:*",
+    "@hashintel/petrinaut": "workspace:*",
     "@hashintel/query-editor": "workspace:*",
     "@hashintel/type-editor": "workspace:*",
     "@lit-labs/react": "1.2.1",

apps/hash-frontend/src/lib/csp.ts

@@ -24,13 +24,19 @@ export const buildCspHeader = (nonce: string): string => {
       "https://apis.google.com",
       // Vercel toolbar / live preview widget
       "https://vercel.live",
+      // @todo FE-488 will make this unnecessary
+      // Monaco Editor loaded from CDN by @monaco-editor/react (used by petrinaut)
+      "https://cdn.jsdelivr.net",
     ],
 
     "style-src": [
       "'self'",
       // Required for Emotion/MUI CSS-in-JS inline style injection.
       // @todo Use nonce-based approach via Emotion's cache `nonce` option.
       "'unsafe-inline'",
+      // @todo FE-488 will make this unnecessary
+      // Monaco Editor stylesheet loaded from CDN by @monaco-editor/react (used by petrinaut)
+      "https://cdn.jsdelivr.net",
     ],
 
     "img-src": [
@@ -45,7 +51,12 @@ export const buildCspHeader = (nonce: string): string => {
       ...(process.env.NODE_ENV === "development" ? ["http:"] : []),
     ],
 
-    "font-src": ["'self'"],
+    "font-src": [
+      "'self'",
+      // @todo FE-488 will make this unnecessary
+      // Monaco Editor CSS embeds the Codicon icon font as an inline base64 data URI
+      "data:",
+    ],
 
     "connect-src": [
       "'self'",

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}
         />