NO-CODE: Speculative Petrinaut import graph refactor

apps/hash-frontend/next.config.js

@@ -164,7 +164,6 @@ export default withSentryConfig(
         "@emotion/server",
         "@hashintel/block-design-system",
         "@hashintel/design-system",
-        "@hashintel/petrinaut",
         "@hashintel/ds-components",
         "@hashintel/ds-helpers",
         "@hashintel/type-editor",

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

@@ -1,4 +1,4 @@
-import "@hashintel/petrinaut/dist/main.css";
+import "@hashintel/petrinaut/styles.css";
 
 import type { EntityId } from "@blockprotocol/type-system";
 import { AlertModal } from "@hashintel/design-system";

libs/@hashintel/petrinaut/package.json

@@ -24,21 +24,28 @@
   ],
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/main.d.ts",
+      "import": "./dist/main.js"
+    },
+    "./styles.css": "./dist/main.css",
+    "./package.json": "./package.json"
+  },
   "scripts": {
     "build": "vite build",
     "dev": "storybook dev",
     "lint:tsc": "tsgo --noEmit",
     "lint:eslint": "oxlint --type-aware --report-unused-disable-directives-severity=error .",
     "fix:eslint": "oxlint --fix --type-aware --report-unused-disable-directives-severity=error .",
     "prepublishOnly": "turbo run build",
+    "check:bundle": "node scripts/characterize-build-output.mjs --skip-build --skip-watch --guard",
+    "profile:build": "node scripts/characterize-build-output.mjs",
     "test:unit": "vitest"
   },
   "dependencies": {
     "@ark-ui/react": "5.26.2",
     "@babel/standalone": "7.28.5",
-    "@fontsource-variable/inter": "5.2.8",
-    "@fontsource-variable/inter-tight": "5.2.7",
-    "@fontsource-variable/jetbrains-mono": "5.2.8",
     "@hashintel/ds-components": "workspace:^",
     "@hashintel/ds-helpers": "workspace:^",
     "@hashintel/refractive": "workspace:^",

libs/@hashintel/petrinaut/panda.config.shared.test.ts

@@ -37,14 +37,25 @@ describe("resolveDsComponentsBuildInfoPath", () => {
 });
 
 describe("createPetrinautPandaConfig", () => {
-  it("includes the shipped build-info file instead of ds-components source globs", () => {
+  it("includes library source and shipped build-info without Storybook globs", () => {
     const config = createPetrinautPandaConfig(
       "/virtual/ds-components/panda.buildinfo.json",
     );
 
+    expect(config.include).toContain("./src/**/*.{js,jsx,ts,tsx}");
     expect(config.include).toContain(
       "/virtual/ds-components/panda.buildinfo.json",
     );
+    expect(config.include).not.toContain("./.storybook/**/*.{js,jsx,ts,tsx}");
     expect(config.include).not.toContain("../ds-components/src/**/*.{ts,tsx}");
   });
+
+  it("includes Storybook globs only for the Storybook config mode", () => {
+    const config = createPetrinautPandaConfig(
+      "/virtual/ds-components/panda.buildinfo.json",
+      { includeStorybook: true },
+    );
+
+    expect(config.include).toContain("./.storybook/**/*.{js,jsx,ts,tsx}");
+  });
 });

libs/@hashintel/petrinaut/panda.config.shared.ts

@@ -3,11 +3,15 @@ import { createRequire } from "node:module";
 import { defineConfig } from "@pandacss/dev";
 import { scopedThemeConfig } from "@hashintel/ds-components/preset";
 
-import { CODE_FONT_FAMILY } from "./src/constants/ui";
-
 export const DS_COMPONENTS_BUILD_INFO_SUBPATH =
   "@hashintel/ds-components/panda.buildinfo.json";
 
+const CODE_FONT_FAMILY = "'JetBrains Mono Variable', monospace";
+
+type PetrinautPandaConfigOptions = {
+  includeStorybook?: boolean;
+};
+
 export const createNodeSpecifierResolver = (moduleLocation: string | URL) => {
   const require = createRequire(moduleLocation);
 
@@ -18,14 +22,19 @@ export const resolveDsComponentsBuildInfoPath = (
   resolve: (specifier: string) => string,
 ) => resolve(DS_COMPONENTS_BUILD_INFO_SUBPATH);
 
-export const createPetrinautPandaConfig = (dsComponentsBuildInfoPath: string) =>
+export const createPetrinautPandaConfig = (
+  dsComponentsBuildInfoPath: string,
+  options: PetrinautPandaConfigOptions = {},
+) =>
   defineConfig({
     ...scopedThemeConfig(".petrinaut-root"),
 
     include: [
       "./src/**/*.{js,jsx,ts,tsx}",
       dsComponentsBuildInfoPath,
-      "./.storybook/**/*.{js,jsx,ts,tsx}",
+      ...(options.includeStorybook
+        ? ["./.storybook/**/*.{js,jsx,ts,tsx}"]
+        : []),
     ],
 
     exclude: [],

libs/@hashintel/petrinaut/panda.storybook.config.ts

@@ -0,0 +1,13 @@
+import {
+  createNodeSpecifierResolver,
+  createPetrinautPandaConfig,
+  resolveDsComponentsBuildInfoPath,
+} from "./panda.config.shared";
+
+export default createPetrinautPandaConfig(
+  resolveDsComponentsBuildInfoPath(
+    /** Panda evaluates this config through CJS, so `__filename` is available here. */
+    createNodeSpecifierResolver(__filename),
+  ),
+  { includeStorybook: true },
+);

libs/@hashintel/petrinaut/postcss.config.cjs

@@ -1,5 +1,9 @@
+const isStorybook = process.env.npm_lifecycle_event === "dev";
+
 module.exports = {
   plugins: {
-    "@pandacss/dev/postcss": {},
+    "@pandacss/dev/postcss": {
+      configPath: isStorybook ? "panda.storybook.config.ts" : "panda.config.ts",
+    },
   },
 };