From 8845f5f869f8ff0888c277dcd9ab48bd9611d8ac Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 23 Jul 2025 10:14:37 +0200
Subject: [PATCH 1/9] remove unnecessary postbuild scripts

---
 code/core/build-config.ts                 | 3 ---
 code/lib/cli-storybook/build-config.ts    | 4 ----
 code/lib/create-storybook/build-config.ts | 4 ----
 3 files changed, 11 deletions(-)

diff --git a/code/core/build-config.ts b/code/core/build-config.ts
index 6026c4c276c9..76c21ac6b105 100644
--- a/code/core/build-config.ts
+++ b/code/core/build-config.ts
@@ -20,9 +20,6 @@ const config: BuildEntries = {
       throwOnError: true,
     });
   },
-  postbuild: async (cwd) => {
-    await fs.chmod(path.join(cwd, 'dist', 'bin', 'dispatcher.js'), 0o755);
-  },
   entries: {
     node: [
       {
diff --git a/code/lib/cli-storybook/build-config.ts b/code/lib/cli-storybook/build-config.ts
index f597354439e4..403def7e5b32 100644
--- a/code/lib/cli-storybook/build-config.ts
+++ b/code/lib/cli-storybook/build-config.ts
@@ -11,10 +11,6 @@ const config: BuildEntries = {
       },
     ],
   },
-  postbuild: async (cwd) => {
-    const { chmod } = await import('node:fs/promises');
-    await chmod(join(cwd, 'dist', 'bin', 'index.js'), 0o755);
-  },
 };
 
 export default config;
diff --git a/code/lib/create-storybook/build-config.ts b/code/lib/create-storybook/build-config.ts
index 6b84dacc39c6..ffd06463e796 100644
--- a/code/lib/create-storybook/build-config.ts
+++ b/code/lib/create-storybook/build-config.ts
@@ -16,10 +16,6 @@ const config: BuildEntries = {
       },
     ],
   },
-  postbuild: async (cwd) => {
-    const { chmod } = await import('node:fs/promises');
-    await chmod(join(cwd, 'dist', 'bin', 'index.js'), 0o755);
-  },
 };
 
 export default config;

From 2c4c53eb529b1430ebec00f7cad6ab27b6243eec Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 23 Jul 2025 10:15:40 +0200
Subject: [PATCH 2/9] fix running postbuild scripts, refactor generate bundle
 to support metafile generation in watch mode

---
 scripts/build/utils/entry-utils.ts     |   6 +-
 scripts/build/utils/generate-bundle.ts | 258 +++++++++++++------------
 2 files changed, 141 insertions(+), 123 deletions(-)

diff --git a/scripts/build/utils/entry-utils.ts b/scripts/build/utils/entry-utils.ts
index 33bd87ffcf3b..c1685c67ed89 100644
--- a/scripts/build/utils/entry-utils.ts
+++ b/scripts/build/utils/entry-utils.ts
@@ -3,14 +3,14 @@ import { join } from 'node:path';
 
 import * as esbuild from 'esbuild';
 
+export type EntryType = 'node' | 'browser' | 'runtime' | 'globalizedRuntime';
+
 export type BuildEntry = {
   exportEntries?: ('.' | `./${string}`)[]; // the keys in the package.json's export map, e.g. ["./internal/manager-api", "./manager-api"]
   entryPoint: `./src/${string}`; // the source file to bundle, e.g. "./src/manager-api/index.ts"
   dts?: false; // default to generating d.ts files for all entries, except if set to false
 };
-export type BuildEntriesByPlatform = Partial<
-  Record<'node' | 'browser' | 'runtime' | 'globalizedRuntime', BuildEntry[]>
->;
+export type BuildEntriesByPlatform = Partial<Record<EntryType, BuildEntry[]>>;
 
 export type EsbuildContextOptions = Parameters<(typeof esbuild)['context']>[0];
 
diff --git a/scripts/build/utils/generate-bundle.ts b/scripts/build/utils/generate-bundle.ts
index 585d4afb125b..cc4ee0823adc 100644
--- a/scripts/build/utils/generate-bundle.ts
+++ b/scripts/build/utils/generate-bundle.ts
@@ -15,7 +15,12 @@ import {
   SUPPORTED_FEATURES,
 } from '../../../code/core/src/shared/constants/environments-support';
 import { resolvePackageDir } from '../../../code/core/src/shared/utils/module';
-import { type BuildEntries, type EsbuildContextOptions, getExternal } from './entry-utils';
+import {
+  type BuildEntries,
+  type EntryType,
+  type EsbuildContextOptions,
+  getExternal,
+} from './entry-utils';
 
 // repo root/bench/esbuild-metafiles/core
 const DIR_METAFILE_BASE = join(
@@ -29,6 +34,25 @@ const DIR_METAFILE_BASE = join(
 );
 export const DIR_CODE = join(import.meta.dirname, '..', '..', '..', 'code');
 
+function metafileWriterPlugin(entryType: EntryType, outputDir: string): esbuild.Plugin {
+  return {
+    name: 'metafile-writer',
+    setup(build) {
+      build.onEnd(async (result) => {
+        if (result.errors.length || !result.metafile) {
+          return;
+        }
+        const outputFile = join(outputDir, `${entryType}.json`);
+        if (existsSync(outputFile)) {
+          await rm(outputFile, { force: true });
+        }
+        await mkdir(outputDir, { recursive: true });
+        await writeFile(outputFile, JSON.stringify(result.metafile, null, 2));
+      });
+    },
+  };
+}
+
 export async function generateBundle({
   cwd,
   entry,
@@ -44,70 +68,55 @@ export async function generateBundle({
 }) {
   const DIR_CWD = cwd;
   const DIR_REL = relative(DIR_CODE, DIR_CWD);
-  const DIR_METAFILE = join(DIR_METAFILE_BASE, name);
   const external = (await getExternal(DIR_CWD)).runtimeExternal;
   const { entries, postbuild } = entry;
 
-  function defineESBuildContext(id: string, ...input: Parameters<typeof esbuild.context>) {
-    const sharedOptions = {
-      format: 'esm',
-      bundle: true,
-      legalComments: 'none',
-      ignoreAnnotations: true,
-      splitting: true,
-      metafile: true,
-      minifyIdentifiers: true,
-      minifySyntax: isProduction,
-      minifyWhitespace: false,
-      keepNames: true, // required to show correct error messages based on class names
-      outbase: 'src',
-      outdir: 'dist',
-      treeShaking: true,
-      color: true,
-      external,
-      define: {
-        /*
-         * We need to disable the default behavior of replacing process.env.NODE_ENV with "development"
-         * Because we have code that reads this value to determine if the code is running in a production environment.
-         * @see 6th bullet in "browser" section in https://esbuild.github.io/api/#platform
-         */
-        'process.env.NODE_ENV': 'process.env.NODE_ENV',
-      },
-    } as const satisfies EsbuildContextOptions;
-
-    const [config, ...rest] = input;
-    const cloned = { ...config };
-
-    if (postbuild) {
-      cloned.plugins = [
-        ...(cloned.plugins ?? []),
-        {
-          name: 'postbuild',
-          setup(build) {
-            build.onEnd(async (result) => {
-              if (result.errors.length) {
-                return;
-              }
-              await postbuild(DIR_CWD);
-            });
-          },
-        },
-      ];
-    }
-
-    return [
-      id,
-      esbuild.context(
-        {
-          ...sharedOptions,
-          ...config,
+  const sharedOptions = {
+    format: 'esm',
+    bundle: true,
+    legalComments: 'none',
+    ignoreAnnotations: true,
+    splitting: true,
+    metafile: true,
+    minifyIdentifiers: true,
+    minifySyntax: isProduction,
+    minifyWhitespace: false,
+    keepNames: true, // required to show correct error messages based on class names
+    outbase: 'src',
+    outdir: 'dist',
+    treeShaking: true,
+    color: true,
+    external,
+    define: {
+      /*
+       * We need to disable the default behavior of replacing process.env.NODE_ENV with "development"
+       * Because we have code that reads this value to determine if the code is running in a production environment.
+       * @see 6th bullet in "browser" section in https://esbuild.github.io/api/#platform
+       */
+      'process.env.NODE_ENV': 'process.env.NODE_ENV',
+    },
+    plugins: [
+      {
+        name: 'postbuild',
+        setup(build) {
+          build.onEnd(async (result) => {
+            if (!postbuild) {
+              return;
+            }
+            if (result.errors.length) {
+              console.log('Errors found, skipping postbuild');
+              return;
+            }
+            console.log('Running postbuild script');
+            await postbuild(DIR_CWD);
+          });
         },
-        ...rest
-      ),
-    ] as const;
-  }
+      },
+    ],
+  } as const satisfies EsbuildContextOptions;
 
   const runtimeOptions = {
+    ...sharedOptions,
     platform: 'browser',
     target: BROWSER_TARGETS,
     supported: SUPPORTED_FEATURES,
@@ -139,87 +148,96 @@ export async function generateBundle({
     },
   } as const satisfies EsbuildContextOptions;
 
-  const contexts = [
-    entries.node &&
-      defineESBuildContext('node', {
+  const contexts: Array<ReturnType<typeof esbuild.context>> = [];
+
+  if (entries.node) {
+    contexts.push(
+      esbuild.context({
+        ...sharedOptions,
         entryPoints: entries.node.map(({ entryPoint }) => entryPoint),
         platform: 'node',
         target: NODE_TARGET,
         chunkNames: '_node-chunks/[name]-[hash]',
         banner: {
           js: dedent`
-            import CJS_COMPAT_NODE_URL from 'node:url';
-            import CJS_COMPAT_NODE_PATH from 'node:path';
-            import CJS_COMPAT_NODE_MODULE from "node:module";
-
-            const __filename = CJS_COMPAT_NODE_URL.fileURLToPath(import.meta.url);
-            const __dirname = CJS_COMPAT_NODE_PATH.dirname(__filename);
-            const require = CJS_COMPAT_NODE_MODULE.createRequire(import.meta.url);
-            // ------------------------------------------------------------
-            // end of CJS compatibility banner, injected by Storybook's esbuild configuration
-            // ------------------------------------------------------------
-            `,
+          import CJS_COMPAT_NODE_URL from 'node:url';
+          import CJS_COMPAT_NODE_PATH from 'node:path';
+          import CJS_COMPAT_NODE_MODULE from "node:module";
+    
+          const __filename = CJS_COMPAT_NODE_URL.fileURLToPath(import.meta.url);
+          const __dirname = CJS_COMPAT_NODE_PATH.dirname(__filename);
+          const require = CJS_COMPAT_NODE_MODULE.createRequire(import.meta.url);
+          // ------------------------------------------------------------
+          // end of CJS compatibility banner, injected by Storybook's esbuild configuration
+          // ------------------------------------------------------------
+          `,
         },
-      }),
-    entries.browser &&
-      defineESBuildContext('browser', {
+        plugins: [
+          ...sharedOptions.plugins,
+          metafileWriterPlugin('node', join(DIR_METAFILE_BASE, name)),
+        ],
+      })
+    );
+  }
+
+  if (entries.browser) {
+    contexts.push(
+      esbuild.context({
+        ...sharedOptions,
         entryPoints: entries.browser.map(({ entryPoint }) => entryPoint),
         platform: 'browser',
         chunkNames: '_browser-chunks/[name]-[hash]',
         target: BROWSER_TARGETS,
         supported: SUPPORTED_FEATURES,
-      }),
-    entries.runtime &&
-      defineESBuildContext('runtime', {
+        plugins: [
+          ...sharedOptions.plugins,
+          metafileWriterPlugin('browser', join(DIR_METAFILE_BASE, name)),
+        ],
+      })
+    );
+  }
+
+  if (entries.runtime) {
+    contexts.push(
+      esbuild.context({
         ...runtimeOptions,
         entryPoints: entries.runtime.map(({ entryPoint }) => entryPoint),
-      }),
-    entries.globalizedRuntime &&
-      defineESBuildContext('globalized-runtime', {
+        plugins: [
+          ...runtimeOptions.plugins,
+          metafileWriterPlugin('runtime', join(DIR_METAFILE_BASE, name)),
+        ],
+      })
+    );
+  }
+
+  if (entries.globalizedRuntime) {
+    contexts.push(
+      esbuild.context({
         ...runtimeOptions,
         entryPoints: entries.globalizedRuntime.map(({ entryPoint }) => entryPoint),
-        plugins: [globalExternals(globalsModuleInfoMap)],
-      }),
-  ].filter(Boolean);
-  const compile = await Promise.all(contexts.map(([, context]) => context));
-
-  if (isWatch) {
-    await Promise.all(
-      compile.map(async (context) => {
-        await context.watch();
-        await context.rebuild();
+        plugins: [
+          ...runtimeOptions.plugins,
+          globalExternals(globalsModuleInfoMap),
+          metafileWriterPlugin('globalizedRuntime', join(DIR_METAFILE_BASE, name)),
+        ],
       })
     );
+  }
 
-    // show a log message when a file is compiled
-    watch(join(DIR_CWD, 'dist'), { recursive: true }, (_event, filename) => {
-      console.log(`compiled ${picocolors.cyan(join(DIR_REL, 'dist', filename))}`);
-    });
-  } else {
-    if (existsSync(DIR_METAFILE)) {
-      await rm(DIR_METAFILE, { recursive: true, force: true });
-    }
-    await mkdir(DIR_METAFILE, { recursive: true });
+  const compile = await Promise.all(contexts);
 
-    const nameByIndex = contexts.map(([id]) => id);
-    const outputs = await Promise.all(
-      compile.map(async (context) => {
-        const output = await context.rebuild();
+  await Promise.all(
+    compile.map(async (context) => {
+      if (isWatch) {
+        await context.watch();
+        // show a log message when a file is compiled
+        watch(join(DIR_CWD, 'dist'), { recursive: true }, (_event, filename) => {
+          console.log(`compiled ${picocolors.cyan(join(DIR_REL, 'dist', filename))}`);
+        });
+      } else {
+        await context.rebuild();
         await context.dispose();
-        return output;
-      })
-    );
-    let index = 0;
-    for (const currentOutput of outputs) {
-      index++;
-      if (!currentOutput.metafile) {
-        return;
       }
-
-      await writeFile(
-        join(DIR_METAFILE, `${nameByIndex[index - 1]}.json`),
-        JSON.stringify(currentOutput.metafile, null, 2)
-      );
-    }
-  }
+    })
+  );
 }

From 31ea1a08ab996db98f9327fe535e058f3b9a348d Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 23 Jul 2025 11:14:13 +0200
Subject: [PATCH 3/9] fix adding storybook config dir to vite config allow list

---
 code/builders/builder-vite/src/vite-config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts
index 520cbabce487..7a4bd5b7d089 100644
--- a/code/builders/builder-vite/src/vite-config.ts
+++ b/code/builders/builder-vite/src/vite-config.ts
@@ -107,7 +107,7 @@ export async function pluginConfig(options: Options) {
         // add storybook specific directories only if there's an allow list so that we don't end up
         // disallowing the root unless root is already disallowed
         if (config?.server?.fs?.allow) {
-          config.server.fs.allow.push('.storybook');
+          config.server.fs.allow.push(options.configDir);
         }
       },
     },

From d4c135f325ba6c2a63f6552ded71b7a89db4ffaf Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 23 Jul 2025 11:14:56 +0200
Subject: [PATCH 4/9] make esbuild analyzer local, support any size of metafile

---
 code/.storybook/bench.stories.tsx             |   94 -
 code/.storybook/bench/bench.stories.tsx       |   61 +
 .../bench/bundle-analyzer/index.css           |  511 ++++
 .../bench/bundle-analyzer/index.html          |   58 +
 .../.storybook/bench/bundle-analyzer/index.js | 2073 +++++++++++++++++
 code/.storybook/main.ts                       |    3 +-
 6 files changed, 2705 insertions(+), 95 deletions(-)
 delete mode 100644 code/.storybook/bench.stories.tsx
 create mode 100644 code/.storybook/bench/bench.stories.tsx
 create mode 100644 code/.storybook/bench/bundle-analyzer/index.css
 create mode 100644 code/.storybook/bench/bundle-analyzer/index.html
 create mode 100644 code/.storybook/bench/bundle-analyzer/index.js

diff --git a/code/.storybook/bench.stories.tsx b/code/.storybook/bench.stories.tsx
deleted file mode 100644
index 83f999fad215..000000000000
--- a/code/.storybook/bench.stories.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import React from 'react';
-
-import type { Meta } from '@storybook/react-vite';
-
-import { safeMetafileArg } from '../../scripts/bench/safe-args';
-
-// @ts-expect-error - TS doesn't know about import.meta.glob from Vite
-const allMetafiles = import.meta.glob(['../bench/esbuild-metafiles/**/*.json']);
-
-export default {
-  title: 'Bench',
-  parameters: {
-    layout: 'fullscreen',
-    chromatic: { disableSnapshot: true },
-  },
-  args: {
-    metafile: safeMetafileArg(Object.keys(allMetafiles)[0]),
-  },
-  argTypes: {
-    metafile: {
-      options: Object.keys(allMetafiles).map(safeMetafileArg).sort(),
-      mapping: Object.fromEntries(
-        Object.keys(allMetafiles).map((path) => [safeMetafileArg(path), path])
-      ),
-      control: {
-        type: 'select',
-        labels: Object.fromEntries(
-          Object.keys(allMetafiles).map((path) => {
-            const [, dirName, subEntry] = /esbuild-metafiles\/(.+)\/(.+).json/.exec(path)!;
-            return [safeMetafileArg(path), `${dirName} - ${subEntry}`];
-          })
-        ),
-      },
-    },
-  },
-  loaders: [
-    async ({ args }) => {
-      if (!args.metafile) {
-        return;
-      }
-      let metafile;
-      try {
-        metafile = await allMetafiles[args.metafile]();
-      } catch (e) {
-        return;
-      }
-      const encodedMetafile = btoa(JSON.stringify(metafile));
-      return { encodedMetafile };
-    },
-  ],
-  render: (args, { loaded }) => {
-    const { encodedMetafile = '' } = loaded ?? {};
-
-    if (encodedMetafile.length > 2020836) {
-      return (
-        <div style={{ padding: '2rem' }}>
-          <h1>Metafile is too large</h1>
-          <p>
-            The metafile <code>{args.metafile}</code> is <strong>too large</strong> to be displayed
-            in the iframe. This is because we base64-encode the contents of the metafile into the
-            URL of the <code>{'<iframe />'}</code> component, and there's a maximum length of{' '}
-            <code>~2MB</code> for the URL.
-          </p>
-          <p>
-            You can visit the{' '}
-            <a href="https://esbuild.github.io/analyze/" target="_blank" rel="noreferrer">
-              esbuild analyzer website
-            </a>{' '}
-            manually to see the metafile.
-          </p>
-          <p>
-            You will have to find the metafile in the{' '}
-            <code>code/bench/esbuild-metafiles/{args.metafile.split('esbuild-metafiles/')[1]}</code>{' '}
-            directory and upload it manually.
-          </p>
-        </div>
-      );
-    }
-
-    return (
-      <iframe
-        // esbuild analyzer has a hidden feature to load a base64-encoded metafile from the the URL hash
-        // see https://github.com/esbuild/esbuild.github.io/blob/ccf70086543a034495834b4135e15e91a3ffceb8/src/analyze/index.ts#L113-L116
-        src={`https://esbuild.github.io/analyze/#${encodedMetafile}`}
-        style={{ border: 'none', width: '100%', height: '100vh' }}
-        key={args.metafile} // force re-render on args change
-      />
-    );
-  },
-} satisfies Meta;
-
-export const ESBuildAnalyzer = {
-  name: 'ESBuild Metafiles',
-};
diff --git a/code/.storybook/bench/bench.stories.tsx b/code/.storybook/bench/bench.stories.tsx
new file mode 100644
index 000000000000..2189f4ac5d62
--- /dev/null
+++ b/code/.storybook/bench/bench.stories.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+
+import type { Meta } from '@storybook/react-vite';
+
+import { safeMetafileArg } from '../../../scripts/bench/safe-args';
+
+// @ts-expect-error - TS doesn't know about import.meta.glob from Vite
+const allMetafiles = import.meta.glob(['../../bench/esbuild-metafiles/**/*.json'], {
+  import: 'default',
+});
+
+export default {
+  title: 'Bench',
+  parameters: {
+    layout: 'fullscreen',
+    chromatic: { disableSnapshot: true },
+  },
+  args: {
+    // default to the storybook/node.json metafile
+    metafile: safeMetafileArg(Object.keys(allMetafiles).find((path) => path.includes('/storybook/node.json'))!),
+  },
+  argTypes: {
+    metafile: {
+      options: Object.keys(allMetafiles).map(safeMetafileArg).sort(),
+      mapping: Object.fromEntries(
+        Object.keys(allMetafiles).map((path) => [safeMetafileArg(path), path])
+      ),
+      control: {
+        type: 'select',
+        labels: Object.fromEntries(
+          Object.keys(allMetafiles).map((path) => {
+            const [, dirName, subEntry] = /esbuild-metafiles\/(.+)\/(.+).json/.exec(path)!;
+            return [safeMetafileArg(path), `${dirName} - ${subEntry}`];
+          })
+        ),
+      },
+    },
+  },
+  beforeEach: async ({ args }) => {
+    if (!args.metafile) {
+      globalThis.metafile = undefined;
+      return;
+    }
+    const metafile = await allMetafiles[args.metafile]();
+    // this is read by the bundle-analyzer iframe via parent.metafile, in bundle-analyzer/index.js
+    globalThis.metafile = JSON.stringify(metafile);
+  },
+  render: (args) => {
+    return (
+      <iframe
+        src="/bundle-analyzer/index.html"
+        style={{ border: 'none', width: '100%', height: '100vh' }}
+        key={args.metafile} // force re-render on args change
+      />
+    );
+  },
+} satisfies Meta;
+
+export const ESBuildAnalyzer = {
+  name: 'ESBuild Metafiles',
+};
diff --git a/code/.storybook/bench/bundle-analyzer/index.css b/code/.storybook/bench/bundle-analyzer/index.css
new file mode 100644
index 000000000000..6dc6724dcec6
--- /dev/null
+++ b/code/.storybook/bench/bundle-analyzer/index.css
@@ -0,0 +1,511 @@
+html:not([data-theme='dark']) {
+  --bg: #fff;
+  --fg-on: #000;
+  --fg: #222;
+  --pre-dim: #777;
+  --pre-val: #870;
+  --pre: #222;
+  --bar-min-width: 1px;
+}
+html[data-theme='dark'] {
+  color-scheme: dark;
+  --bg: #191919;
+  --fg-on: #ddd;
+  --fg: #aaa;
+  --pre-dim: #999;
+  --pre-val: #cb8;
+  --pre: #ccc;
+  --bar-min-width: 3px;
+}
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme='light']) {
+    color-scheme: dark;
+    --bg: #191919;
+    --fg-on: #ddd;
+    --fg: #aaa;
+    --pre-dim: #999;
+    --pre-val: #cb8;
+    --pre: #ccc;
+    --bar-min-width: 3px;
+  }
+}
+body {
+  margin: 50px;
+  background: var(--bg);
+  color: var(--fg);
+  font: 16px/20px sans-serif;
+}
+#startPanel {
+  margin: 10% auto 0;
+}
+#resultsPanel {
+  display: none;
+}
+section {
+  margin: auto;
+  max-width: 600px;
+}
+#logo {
+  display: inline-block;
+  margin-bottom: 10px;
+  text-align: left;
+}
+h1 {
+  margin: 0;
+  color: var(--fg-on);
+  font-size: 80px;
+  line-height: 1em;
+}
+blockquote {
+  margin: 5px 0;
+  font-style: italic;
+  font-size: 29px;
+  line-height: 1em;
+}
+p {
+  margin: 20px 0;
+}
+a,
+b {
+  color: var(--fg-on);
+}
+code {
+  margin-bottom: -2px;
+  border-radius: 3px;
+  background: rgba(127, 127, 127, 0.2);
+  padding: 2px 4px;
+  font:
+    14px/20px Noto Sans Mono,
+    monospace;
+}
+pre {
+  margin: 0;
+  padding: 0;
+  color: var(--pre);
+  font:
+    14px/20px Noto Sans Mono,
+    monospace;
+  white-space: pre-wrap;
+}
+.center {
+  text-align: center;
+}
+.noscript {
+  color: #e24834;
+}
+button {
+  cursor: pointer;
+  border: 1px solid var(--fg);
+  border-radius: 100px;
+  background: none;
+  padding: 5px 30px;
+  color: var(--fg);
+  line-height: 1.5em;
+}
+button:active,
+button:hover {
+  border: 1px solid var(--fg-on);
+  background: rgba(127, 127, 127, 0.2);
+  color: var(--fg-on);
+}
+button:active {
+  background: rgba(0, 0, 0, 0.2);
+  padding: 6px 30px 4px;
+}
+#settingsPanel {
+  text-align: center;
+}
+#settingsPanel .chartSwitcher {
+  display: flex;
+  position: relative;
+  justify-content: center;
+  margin: 50px 0;
+}
+#settingsPanel .chartSwitcher:after {
+  display: block;
+  position: absolute;
+  top: 0.5em;
+  right: 0;
+  left: 0;
+  z-index: -1;
+  border: 1px solid #ffcf00;
+  content: '';
+}
+#settingsPanel .chartSwitcher span {
+  border-left: 2px solid #ffcf00;
+  background: var(--bg);
+  padding: 0 1em;
+}
+#settingsPanel .chartSwitcher span:first-child {
+  border: none;
+}
+#settingsPanel a {
+  color: var(--fg);
+  text-decoration: none;
+}
+#settingsPanel a:hover {
+  text-decoration: underline;
+}
+#settingsPanel a.r {
+  color: var(--fg-on);
+  font-weight: 700;
+}
+.n {
+  display: none;
+  margin: auto;
+  max-width: 600px;
+}
+.p {
+  display: none;
+  position: absolute;
+  z-index: 1;
+  border-radius: 30px;
+  background: black;
+  padding: 0 10px;
+  touch-action: none;
+  pointer-events: none;
+  color: #999;
+  font-size: 14px;
+  line-height: 30px;
+  -webkit-user-select: none;
+  user-select: none;
+  white-space: pre;
+}
+.p b {
+  color: #fff;
+}
+#dragTarget {
+  display: none;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+  box-shadow: inset 0 0 0 10px #ffcf00;
+  touch-action: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+#summaryPanel {
+  text-align: center;
+}
+#summaryPanel table {
+  margin: auto;
+  border-collapse: collapse;
+}
+#summaryPanel td:first-child {
+  text-align: right;
+}
+#summaryPanel h2 {
+  margin: 0;
+  color: var(--fg-on);
+  font-size: 30px;
+  line-height: 1em;
+}
+#summaryPanel .l {
+  padding: 0 30px;
+  font-size: 30px;
+}
+#summaryPanel .o {
+  display: inline-block;
+  margin: 20px auto 0;
+  text-decoration: none;
+  white-space: nowrap;
+}
+#summaryPanel .o:hover .d {
+  text-decoration: underline;
+}
+#summaryPanel .g {
+  display: inline-table;
+  vertical-align: middle;
+  margin: 0 0.8em;
+  border: 1px solid #222;
+}
+#summaryPanel .g > div {
+  display: table-cell;
+  height: 20px;
+}
+#x {
+  padding-left: 1.6em;
+  line-height: 1.1em;
+}
+#x .c {
+  display: inline-block;
+  vertical-align: middle;
+  box-sizing: border-box;
+  margin-right: 0.5em;
+  margin-left: -1.6em;
+  border: 1px solid #222;
+  width: 1.1em;
+  height: 1.1em;
+}
+#x small {
+  display: block;
+  opacity: 0.5;
+  margin-bottom: 1em;
+}
+#s {
+  margin: 0 -50px;
+  padding: 0 50px;
+}
+#s main {
+  position: relative;
+  margin-top: 60px;
+}
+#s canvas {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  margin: auto;
+  padding-bottom: 50px;
+}
+#s section {
+  display: none;
+  margin-top: 30px;
+  min-height: 200px;
+}
+#b {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.6);
+  padding: 50px;
+  overflow-y: auto;
+}
+#b .m {
+  position: relative;
+  box-sizing: border-box;
+  margin: 0 auto;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
+  border-radius: 20px;
+  background: var(--bg);
+  padding: 50px;
+  max-width: 1000px;
+}
+#b .m:focus {
+  outline: none;
+}
+#b .h {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 50px;
+  color: var(--fg);
+  font-size: 30px;
+  line-height: 50px;
+  text-align: center;
+  text-decoration: none;
+}
+#b .h:hover {
+  color: var(--fg-on);
+  font-size: 35px;
+}
+#b .h:active {
+  font-size: 30px;
+}
+#b h2 {
+  margin: 0;
+  border-bottom: 2px solid #ffcf00;
+  padding-bottom: 4px;
+  color: var(--fg-on);
+  font-size: 20px;
+  line-height: 1.2em;
+}
+#b .f {
+  position: relative;
+  margin-top: 10px;
+  border: 1px solid rgba(127, 127, 127, 0.5);
+  border-radius: 10px;
+  padding: 30px 10px 10px;
+  line-height: 22px;
+  white-space: pre-wrap;
+}
+#b .u {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-right: 1px solid rgba(127, 127, 127, 0.5);
+  border-bottom: 1px solid rgba(127, 127, 127, 0.5);
+  border-top-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  background: rgba(127, 127, 127, 0.1);
+  padding: 5px 10px;
+}
+#b pre {
+  padding: 0 0 0 30px;
+}
+#b .v {
+  color: var(--pre-dim);
+}
+#b .w {
+  color: var(--fg-on);
+}
+#b .k {
+  color: var(--pre-val);
+}
+#b .e,
+#b .i {
+  position: relative;
+}
+#b .e:after,
+#b .i:after {
+  position: absolute;
+  top: 0;
+  opacity: 0.5;
+  background: var(--fg);
+  width: 30px;
+  content: '';
+}
+#b .e:after {
+  height: 40px;
+  --icon: url('data:image/svg+xml,<svg width="30" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 26L20.5 35L23 25.5L16.5 26Z"/><path d="M5 7C15 7 19 15 20 30" fill="none" stroke="black"/></svg>');
+  -webkit-mask-image: var(--icon);
+  mask-image: var(--icon);
+}
+#b .i:after {
+  height: 90px;
+  --icon: url('data:image/svg+xml,<svg width="30" height="90" xmlns="http://www.w3.org/2000/svg"><path d="M17 76L20 85L23 76H17Z"/><path d="M5 7C15 7 20 25 20 80" fill="none" stroke="black"/></svg>');
+  -webkit-mask-image: var(--icon);
+  mask-image: var(--icon);
+}
+#y main {
+  display: flex;
+  justify-content: center;
+  margin-top: 50px;
+  margin-bottom: 500px;
+}
+#y .z {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 20px;
+}
+#y canvas {
+  display: block;
+  margin-bottom: 30px;
+}
+#y .F {
+  position: relative;
+  flex: 1;
+  max-width: 800px;
+}
+#y .P {
+  display: flex;
+  margin: 0 10px 20px;
+  font-size: 20px;
+  line-height: 1.2em;
+  white-space: pre;
+}
+#y .P .C {
+  flex: 1;
+  height: 20px;
+}
+#y .P a {
+  opacity: 0.5;
+  text-decoration: none;
+}
+#y .P a[href]:hover {
+  text-decoration: underline;
+}
+#y .P a:last-child {
+  opacity: 1;
+  color: var(--fg-on);
+  font-weight: 700;
+}
+#y .S {
+  width: 100%;
+}
+#y .S .j {
+  display: table-row;
+  color: var(--fg);
+  line-height: 26px;
+  text-decoration: none;
+}
+#y .S .j.a {
+  background: rgba(127, 127, 127, 0.2);
+  color: var(--fg-on);
+}
+#y .S .j.a .t:after {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  bottom: 1px;
+  left: 1px;
+  background: rgba(255, 255, 255, 0.3);
+  content: '';
+}
+#y .S .j > div {
+  display: table-cell;
+}
+#y .S .M {
+  vertical-align: top;
+  padding: 0 10px;
+  white-space: pre;
+}
+#y .S .N {
+  padding-right: 100px;
+  width: 100%;
+}
+#y .S .t {
+  position: relative;
+  margin-bottom: -1px;
+  box-shadow: inset 0 0 0 1px #222;
+  min-width: var(--bar-min-width);
+  height: 27px;
+}
+#y .S .t.q {
+  min-width: 0;
+}
+#y .S .T {
+  position: absolute;
+  right: -10px;
+  width: 0;
+  white-space: nowrap;
+}
+#A main {
+  position: relative;
+  margin-top: 60px;
+}
+#A canvas {
+  position: absolute;
+  top: 0;
+  left: -50px;
+}
+#A section {
+  display: none;
+  margin-top: 30px;
+  min-height: 500px;
+}
+#warningsPanel {
+  margin: auto;
+  max-width: 1000px;
+}
+#warningsPanel .B {
+  margin-top: 20px;
+  text-align: center;
+}
+#warningsPanel .D {
+  display: none;
+}
+#warningsPanel .E {
+  margin: 30px 0;
+  color: var(--fg-on);
+  white-space: pre-wrap;
+}
+#warningsPanel ul {
+  margin: 5px 0 0;
+  color: var(--fg);
+}
+#warningsPanel .G {
+  opacity: 0.5;
+}
+#warningsPanel pre a {
+  text-decoration: none;
+}
+#warningsPanel pre a:hover {
+  text-decoration: underline;
+}
diff --git a/code/.storybook/bench/bundle-analyzer/index.html b/code/.storybook/bench/bundle-analyzer/index.html
new file mode 100644
index 000000000000..460a41301723
--- /dev/null
+++ b/code/.storybook/bench/bundle-analyzer/index.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en" data-theme="null">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
+    <title>esbuild - Bundle Size Analyzer</title>
+    <link rel="stylesheet" href="./index.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+
+  <body>
+    <div id="dragTarget" hidden></div>
+    <div id="startPanel">
+      <section>
+        <div class="center">
+          <div id="logo">
+            <h1>esbuild</h1>
+            <blockquote>Bundle Size Analyzer</blockquote>
+          </div>
+        </div>
+        <p>
+          This is a modified version of the esbuild bundle analyzer, for storybook's purpose we
+          added a postMessage listener to receive the metafile from the parent window.
+        </p>
+        <p>
+          If you see this message, it means that the iframe hasn't received the metafile yet. It can
+          take a little while to load, for large meta-files, but check the browser console for any
+          errors, if it persists.
+        </p>
+        <p class="center" hidden>
+          <button id="importButton">Import your metafile...</button>
+        </p>
+        <p hidden>
+          Or you can <a href="javascript:void 0" id="loadExample">load an example</a> to play around
+          with the visualization.
+        </p>
+        <noscript>
+          <p class="noscript">
+            &#x274C; This page requires JavaScript. Please enable JavaScript and reload the page.
+          </p>
+        </noscript>
+      </section>
+    </div>
+    <div id="resultsPanel">
+      <div id="summaryPanel"></div>
+      <div id="warningsPanel"></div>
+      <div id="settingsPanel">
+        <div class="chartSwitcher">
+          <span><a id="useTreemap" href="javascript:void 0">Treemap Chart</a></span>
+          <span><a id="useSunburst" href="javascript:void 0">Sunburst Chart</a></span>
+          <span><a id="useFlame" href="javascript:void 0">Flame Chart</a></span>
+        </div>
+      </div>
+      <div id="chartPanel"></div>
+    </div>
+    <script src="./index.js"></script>
+  </body>
+</html>
diff --git a/code/.storybook/bench/bundle-analyzer/index.js b/code/.storybook/bench/bundle-analyzer/index.js
new file mode 100644
index 000000000000..9cc641fe6898
--- /dev/null
+++ b/code/.storybook/bench/bundle-analyzer/index.js
@@ -0,0 +1,2073 @@
+'use strict';
+(() => {
+  var m = document,
+    h = Math,
+    ie = requestAnimationFrame,
+    he = localStorage,
+    te = window;
+  var Fe = 'r',
+    Be = 'n',
+    ze = 'p';
+  var Pe = Object.prototype.hasOwnProperty,
+    Vt = Array.prototype.indexOf,
+    gt,
+    Yl = /\.\w+\.map$/,
+    Xl = /^\(disabled\):/,
+    $t = navigator.platform.indexOf('Mac') >= 0,
+    Re = () => (te.performance || Date).now(),
+    rt = (e) => {
+      try {
+        return he.getItem(e);
+      } catch (t) {
+        return null;
+      }
+    },
+    nt = (e, t) => {
+      try {
+        he.setItem(e, t);
+      } catch (i) {}
+    },
+    Te = (e) => Yl.test(e);
+  var Se = (e) => e.replace(Xl, ''),
+    _e = (e) => (gt ? gt.format(e) : e + ''),
+    ht = (e) => {
+      let t = e.toFixed(1).split('.', 2);
+      return _e(+t[0]) + '.' + t[1];
+    },
+    ae = (e) =>
+      e === 1
+        ? '1 byte'
+        : e < 1024
+          ? _e(e) + ' bytes'
+          : e < 1024 * 1024
+            ? ht(e / 1024) + ' kb'
+            : e < 1024 * 1024 * 1024
+              ? ht(e / (1024 * 1024)) + ' mb'
+              : ht(e / (1024 * 1024 * 1024)) + ' gb',
+    z = (e) => e.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'),
+    it = (e) => {
+      let t = 0.6 + 0.4 * h.max(0, h.cos(e)),
+        i = 0.5 + 0.2 * h.max(0, h.cos(e + (h.PI * 2) / 3));
+      return (
+        'hsl(' + (e * 180) / h.PI + 'deg, ' + h.round(100 * t) + '%, ' + h.round(100 * i) + '%)'
+      );
+    },
+    Vl = /\bFirefox\//.test(navigator.userAgent),
+    ot = (e, t, i, p, o, s) => {
+      if (Vl) {
+        let n = e.lineWidth,
+          r = n / 2;
+        (e.fillStyle = t),
+          e.fillRect(i - r, p - r, o + n, n),
+          e.fillRect(i - r, p + r, n, s - n),
+          e.fillRect(i - r, p + s - r, o + n, n),
+          e.fillRect(i + o - r, p + r, n, s - n);
+        return;
+      }
+      (e.strokeStyle = t), e.strokeRect(i, p, o, s);
+    },
+    Tt = (e) => m.createTextNode(e),
+    xt = (e) => {
+      let t = m.createElement('code');
+      return (t.textContent = e), t;
+    },
+    xe = (e, t) => {
+      let i = m.createElement('span');
+      return (i.className = e), (i.textContent = t), i;
+    },
+    We = (e) =>
+      e.startsWith('data:') && e.indexOf(',') >= 0
+        ? ((e = e.slice(0, 65).replace(/\n/g, '\\n')),
+          '<' + (e.length > 64 ? e.slice(0, 64) + '...' : e) + '>')
+        : e,
+    ge = (e) => {
+      if (e.startsWith('data:') && e.indexOf(',') >= 0) {
+        return [e];
+      }
+      let t = e.split('/');
+      return (
+        t.length >= 3 &&
+          t[1] === '' &&
+          t[0].endsWith(':') &&
+          t.splice(0, 3, t.slice(0, 3).join('/')),
+        t
+      );
+    },
+    Ue = (e, t) => {
+      if (e === '') {
+        return [];
+      }
+      let i = ge(e);
+
+      if (!t) {
+        return i;
+      }
+
+      for (let p = 0; p <= i.length; p++) {
+        if (t[p] !== i[p]) {
+          t.length = p;
+          break;
+        }
+      }
+      return t;
+    },
+    Jt = (e, t) => {
+      let i = ge(e);
+
+      if (!t) {
+        return i.reverse();
+      }
+
+      for (let p = 0; p <= i.length; p++) {
+        if (t[p] !== i[i.length - p - 1]) {
+          t.length = p;
+          break;
+        }
+      }
+      return t;
+    },
+    qt = (e) => {
+      let t = e.lastIndexOf('/');
+      return t < 0 ? '.' : e.slice(0, t);
+    },
+    Kt = (e, t) => {
+      let i = e.split('/'),
+        p = t === '.' ? [] : t.split('/'),
+        o = 0;
+
+      for (; o < p.length && i[0] === p[o]; ) {
+        i.shift(), o++;
+      }
+
+      if (o === p.length) {
+        i.unshift('.');
+      } else {
+        for (; o < p.length; ) {
+          i.unshift('..'), o++;
+        }
+      }
+      return i.join('/');
+    },
+    Zt = (e) => {
+      let t = ge(e);
+
+      for (let i = t.length - 1; i >= 0; i--) {
+        if (t[i] === 'node_modules') {
+          return (
+            (t = t.slice(i + 1)),
+            t.length > 1 && /^index\.(?:[jt]sx?)$/.test(t[t.length - 1]) && t.pop(),
+            t.join('/')
+          );
+        }
+      }
+      return null;
+    },
+    He = !1,
+    Yt = matchMedia('(prefers-color-scheme: dark)'),
+    Xt = () => Ge && Ge(),
+    bt = null,
+    yt = null,
+    Ge = null,
+    je = (e) => (bt = e),
+    Ye = (e) => (yt = e),
+    Xe = (e) => (Ge = e);
+  m.addEventListener('keydown', () => (He = !0), { capture: !0 });
+  m.addEventListener('mousedown', () => (He = !1), { capture: !0 });
+  te.addEventListener('wheel', (e) => bt && bt(e), { passive: !1 });
+  te.addEventListener('resize', () => yt && yt());
+  try {
+    Yt.addEventListener('change', Xt);
+  } catch (e) {
+    Yt.addListener(Xt);
+  }
+  try {
+    gt = new Intl.NumberFormat();
+  } catch (e) {}
+  var Et = m.getElementById('dragTarget'),
+    $l = m.getElementById('importButton'),
+    Nt = 0,
+    vt,
+    Qt = (e, t = e.dataTransfer) => t && t.types && Vt.call(t.types, 'Files') !== -1,
+    el = (e) => {
+      if (e.length === 1) {
+        let t = new FileReader();
+        (t.onload = () => et(t.result)), t.readAsText(e[0]);
+      }
+    };
+  m.ondragover = (e) => {
+    e.preventDefault();
+  };
+  m.ondragenter = (e) => {
+    e.preventDefault(), Qt(e) && ((Et.style.display = 'block'), Nt++);
+  };
+  m.ondragleave = (e) => {
+    e.preventDefault(), Qt(e) && --Nt === 0 && (Et.style.display = 'none');
+  };
+  m.ondrop = (e) => {
+    e.preventDefault(),
+      (Et.style.display = 'none'),
+      (Nt = 0),
+      e.dataTransfer && e.dataTransfer.files && el(e.dataTransfer.files);
+  };
+  $l.onclick = function () {
+    vt && m.body.removeChild(vt);
+    let e = m.createElement('input');
+    (e.type = 'file'),
+      (e.style.display = 'none'),
+      m.body.append(e),
+      (vt = e),
+      e.click(),
+      (e.onchange = () => e.files && el(e.files));
+  };
+  m.body.addEventListener('paste', (e) => {
+    e.clipboardData && (e.preventDefault(), et(e.clipboardData.getData('text/plain')));
+  });
+  var tl = 'l',
+    St = 'o',
+    wt = 'd',
+    ll = 'g';
+  var nl = 'x',
+    st = 'c';
+  var ve = (e, t) => t.t - e.t || +(e.e > t.e) - +(e.e < t.e),
+    we = (e, t, i) => {
+      let p = ge(t),
+        o = p.length,
+        s = e,
+        n = '';
+      e.t += i;
+      for (let r = 0; r < o; r++) {
+        let l = p[r],
+          a = s.n,
+          f = a[l],
+          u = l + (r + 1 < o ? '/' : '');
+        (n += u),
+          Pe.call(a, l) || ((f = { r: u, e: n, t: 0, n: {} }), (a[l] = f)),
+          (f.t += i),
+          (s = f);
+      }
+      return o;
+    };
+  var il,
+    ol,
+    al,
+    pt = m.createElement('canvas'),
+    oe = pt.getContext('2d'),
+    be = 1,
+    Mt,
+    Ot,
+    It = 0,
+    dt,
+    Ve = {},
+    Ct = null,
+    $e = (e) => (Ct = e),
+    Je = (e, t, i, p, o) => {
+      let s = Ve[t] || ke;
+      if (s instanceof Array) {
+        let n = te.devicePixelRatio || 1;
+        if (il !== e || ol !== n || al !== o) {
+          let r = h.round(64 * n) / 64,
+            l,
+            a,
+            f;
+          (be = o),
+            (be = h.log2(be)),
+            (be -= h.floor(be)),
+            (l = be),
+            (a = h.min(1, 8 * l)),
+            (be = h.pow(2, be)),
+            (f = (8 * h.SQRT2) / be),
+            (il = e),
+            (ol = n),
+            (al = o),
+            (pt.width = pt.height = h.round(64 * r)),
+            oe.scale(r, r),
+            (oe.fillStyle = s[0]),
+            oe.fillRect(0, 0, 64, 64),
+            (oe.globalAlpha = 0.25),
+            (oe.fillStyle = s[1]),
+            oe.fillRect(0, 0, 64, 64),
+            (oe.globalAlpha = 0.67),
+            (oe.strokeStyle = s[1]),
+            oe.beginPath();
+
+          for (let u = 0; u <= 64; u += 16) {
+            oe.moveTo(u - 32, u + 32), oe.lineTo(u + 32, u - 32);
+          }
+          if (((oe.lineWidth = f * (1 - (a - l) / 2)), oe.stroke(), a + l > 0)) {
+            oe.beginPath();
+
+            for (let u = 8; u < 64; u += 16) {
+              oe.moveTo(u - 32, u + 32), oe.lineTo(u + 32, u - 32);
+            }
+            (oe.lineWidth = (f * (a + l)) / 2), oe.stroke();
+          }
+          (Mt = e.createPattern(pt, 'repeat')), (be /= r);
+        }
+        return (
+          (i /= 64 * be * n),
+          (i -= h.floor(i)),
+          (i *= 64 * be * n),
+          Mt.setTransform(new DOMMatrix([be, 0, 0, be, i, p])),
+          Mt
+        );
+      }
+      return s;
+    },
+    sl = (e) => {
+      let t = Ve[e] || ke;
+      return t instanceof Array
+        ? `url('data:image/svg+xml,<svg width="26" height="26" xmlns="http://www.w3.org/2000/svg"><rect width="26" height="26" fill="${t[0]}"/><rect width="26" height="26" fill="${t[1]}" fill-opacity="25%"/><path d="M22.5 -3.5L-3.5 22.5M35.5 9.5L9.5 35.5" stroke="${t[1]}" stroke-opacity="67%" stroke-width="9.19239"/></svg>')`
+        : t;
+    },
+    dl = (e, t) => {
+      if (Ot !== e) {
+        let i = e.outputs;
+        (Ot = e), (It = 0), (dt = { r: '', e: '', t: 0, n: {} });
+        for (let p in i) {
+          if (Te(p)) {
+            continue;
+          }
+          let s = i[p].inputs;
+
+          for (let n in s) {
+            we(dt, Se(n), s[n].bytesInOutput);
+          }
+        }
+      }
+      It !== t &&
+        ((It = t),
+        (Ve = {}),
+        (Me.innerHTML = ''),
+        t === 1 ? pl(Ve, dt, 0, h.PI * 2) : t === 2 && (ul(Ve, dt), (Me.innerHTML = Ql)),
+        Ct && Ct());
+    },
+    pl = (e, t, i, p) => {
+      let o = t.t,
+        s = t.n,
+        n = [];
+      e[t.e] = it(i + p / 2);
+
+      for (let r in s) {
+        n.push(s[r]);
+      }
+      for (let r of n.sort(ve)) {
+        let l = (r.t / o) * p;
+        pl(e, r, i, l), (i += l);
+      }
+    },
+    qe = it(3.5),
+    Ke = it(1),
+    ke = '#CCC',
+    Kl = [qe, Ke],
+    Zl = (e) => (e ? (e === 1 ? qe : e === 2 ? Ke : Kl) : ke),
+    Ee = (e, t) => {
+      let i = Ve[e] || ke;
+      return i === ke ? '' : i === Ke ? t + 'ESM' : i === qe ? t + 'CJS' : t + 'ESM & CJS';
+    },
+    ul = (e, t) => {
+      let i = t.n,
+        p = 0,
+        o = !1;
+
+      for (let s in i) {
+        (p |= ul(e, i[s])), (o = !0);
+      }
+      if (!o) {
+        let s = Ot.inputs[t.e],
+          n = s && s.format;
+        p = n === 'esm' ? 2 : n === 'cjs' ? 1 : 0;
+      }
+      return (e[t.e] = Zl(p)), p;
+    },
+    Me = m.createElement('div'),
+    Ql =
+      `<span class="${st}" style="background:` +
+      Ke +
+      `"></span>ESM <small>modern, faster, smaller</small><span class="${st}" style="background:` +
+      qe +
+      `"></span>CommonJS <small>legacy, slower, larger</small><span class="${st}" style="background:` +
+      ke +
+      '"></span>Other';
+  Me.id = nl;
+  var fl = m.getElementById('summaryPanel'),
+    ml = (e) => (e === 1 ? 'file' : 'files'),
+    cl = (e, t) => {
+      let i = e.inputs,
+        p = e.outputs,
+        o = 0,
+        s = 0,
+        n = 0,
+        r = 0,
+        l = 0,
+        a = 0,
+        f = 0,
+        u,
+        N,
+        H;
+      for (let x in i) {
+        let P = i[x],
+          I = P.format;
+        I === 'esm' ? (l += P.bytes) : I === 'cjs' ? (a += P.bytes) : (f += P.bytes),
+          o++,
+          (n += P.bytes);
+      }
+
+      for (let x in p) {
+        Te(x) || (s++, (r += p[x].bytes));
+      }
+      (u = h.round((200 * l) / n)),
+        (N = h.round((200 * a) / n)),
+        (fl.innerHTML =
+          '<table><tr><td><h2>' +
+          z(ae(n)) +
+          '</h2>' +
+          z(_e(o)) +
+          ' input ' +
+          ml(o) +
+          `</td><td class="${tl}">&rarr;</td><td><h2>` +
+          z(ae(r)) +
+          '</h2>' +
+          z(_e(s)) +
+          ' output ' +
+          ml(s) +
+          '</td></tr></table>' +
+          (l || a
+            ? `<a href="javascript:void 0" class="${St}"><span class="${wt}">` +
+              _e(h.round((100 * a) / n)) +
+              `% CJS</span><div class="${ll}"><div style="background:` +
+              qe +
+              ';width:' +
+              N +
+              'px"></div><div style="background:#CCC;width:' +
+              (200 - u - N) +
+              'px"></div><div style="background:' +
+              Ke +
+              ';width:' +
+              u +
+              `px"></div></div><span class="${wt}">` +
+              _e(h.round((100 * l) / n)) +
+              '% ESM</span></a>'
+            : '')),
+        (H = fl.querySelector('.' + St)),
+        H && (H.onclick = t);
+    };
+  var hl = 's';
+  var gl = 'b',
+    bl = 'm',
+    yl = 'h',
+    Tl = 'f',
+    xl = 'u';
+  var Lt = 'w',
+    Ae = 'k',
+    vl = 'e',
+    El = 'i';
+  var De = m.createElement('div'),
+    Nl,
+    Pt,
+    ut = null,
+    Sl = /^\w[\w\d]*$/,
+    Ze = () => De.parentElement !== null,
+    tt = () => {
+      De.remove(), ut && (ut.focus(), (ut = null));
+    },
+    rr = (e) => {
+      let t = e.inputs,
+        i = e.outputs,
+        p = {},
+        o = {},
+        s = [],
+        n = {};
+      for (let l in i) {
+        let a = i[l],
+          f = a.entryPoint;
+        if (f) {
+          (p[f] = l), s.push(l);
+
+          for (let u of a.imports) {
+            !u.external && !Pe.call(n, u.path) && (n[u.path] = !0);
+          }
+        }
+      }
+      let r = [];
+      for (let l of s) {
+        let a = i[l].entryPoint;
+        Pe.call(n, l) || ((o[a] = { e: a, h: void 0, o: 'entry-point', s: void 0 }), r.push(a));
+      }
+
+      if (!r.length) {
+        for (let l of s) {
+          let a = i[l].entryPoint;
+          (o[a] = { e: a, h: void 0, o: 'entry-point', s: void 0 }), r.push(a);
+        }
+      }
+      for (; r.length > 0; ) {
+        let l = [];
+        for (let a of r) {
+          let f = t[a];
+
+          for (let u of f.imports) {
+            !u.external &&
+              !Pe.call(o, u.path) &&
+              ((o[u.path] = { e: a, h: u.original, o: u.kind, s: u.with }), l.push(u.path));
+          }
+        }
+        r = l;
+      }
+      return { v: p, E: o };
+    },
+    Oe = (e, t, i) => {
+      let p = e.inputs[t],
+        o = m.activeElement;
+
+      if (!p) {
+        return;
+      }
+      (!Pt || Nl !== e) && ((Nl = e), (Pt = rr(e))),
+        He && o && o.focus && o.tagName === 'A' && (ut = o);
+      let s = m.createElement('div');
+      (s.className = bl),
+        (s.innerHTML =
+          '<h2>' +
+          z(t) +
+          '</h2><p>Original size: <b>' +
+          z(ae(p.bytes)) +
+          '</b>' +
+          (i === null ? '' : '<br>Bundled size: <b>' + z(ae(i)) + '</b>') +
+          (p.format === 'esm'
+            ? '<br>Module format: <b>ESM</b>'
+            : p.format === 'cjs'
+              ? '<br>Module format: <b>CommonJS</b>'
+              : '') +
+          (p.with
+            ? '<br>Import attributes: <b>' +
+              z(
+                Object.entries(p.with)
+                  .map(([r, l]) => (Sl.test(r) ? r : JSON.stringify(r)) + ': ' + JSON.stringify(l))
+                  .join(', ')
+              ) +
+              '</b>'
+            : '') +
+          '</p>'),
+        nr(s, Pt, t);
+      let n = m.createElement('a');
+      (n.className = yl),
+        (n.href = 'javascript:void 0'),
+        (n.onclick = tt),
+        (n.innerHTML = '&times;'),
+        s.append(n),
+        (s.tabIndex = 0),
+        (De.id = gl),
+        (De.innerHTML = ''),
+        De.append(s),
+        (De.onmousedown = (r) => {
+          r.target === De && tt();
+        }),
+        m.body.append(De),
+        s.focus(),
+        (s.onkeydown = (r) => {
+          r.key === 'Escape' &&
+            !r.shiftKey &&
+            !r.metaKey &&
+            !r.ctrlKey &&
+            !r.altKey &&
+            (r.preventDefault(), tt());
+        });
+    },
+    nr = (e, t, i) => {
+      let p = t.E,
+        o = i,
+        s = [{ e: i, x: null }];
+      for (;;) {
+        let a = p[o];
+
+        if (!a) {
+          return;
+        }
+
+        if (o === a.e) {
+          break;
+        }
+        s.push({ e: a.e, x: { e: o, h: a.h, o: a.o, s: a.s } }), (o = a.e);
+      }
+      s.reverse();
+      let n = t.v,
+        r,
+        l = 'Entry point';
+      e.append('This file is included in the bundle because:');
+      for (let a of s) {
+        if (Pe.call(n, a.e)) {
+          let H = m.createElement('div');
+          (r = m.createElement('div')),
+            (r.className = Tl),
+            (H.className = xl),
+            (H.textContent = 'Output file '),
+            H.append(xt(n[a.e])),
+            r.append(H),
+            e.appendChild(r);
+        } else if (!r) {
+          return;
+        }
+        let f = Tt(l + ' '),
+          u = Tt(` is included in the bundle.
+`);
+        r.firstChild &&
+          r.append(`
+`),
+          r.append(f, xt(a.e), u);
+        let N = a.x;
+
+        if (N) {
+          let H = N.h || Zt(N.e) || Kt(N.e, qt(a.e)),
+            x = m.createElement('pre'),
+            P = m.createElement('span');
+          if (((P.className = Pe.call(n, N.e) ? El : vl), N.o === 'import-statement')) {
+            x.append(xe(Lt, 'import '), xe(Ae, JSON.stringify(H))),
+              N.s && (x.append(xe(Lt, ' with ')), Rt(x, N.s)),
+              x.append(';'),
+              (l = 'Imported file');
+          } else if (N.o === 'require-call') {
+            x.append('require(', xe(Ae, JSON.stringify(H)), ');'), (l = 'Required file');
+          } else if (N.o === 'dynamic-import') {
+            x.append('import(', xe(Ae, JSON.stringify(H))),
+              N.s && (x.append(', '), Rt(x, { with: N.s })),
+              x.append(');'),
+              (l = 'Dynamically-imported file');
+          } else if (N.o === 'import-rule') {
+            x.append('@import ', xe(Ae, JSON.stringify(H)), ';'), (l = 'Imported stylesheet');
+          } else if (N.o === 'url-token') {
+            x.append('url(', xe(Ae, JSON.stringify(H)), ')'), (l = 'URL reference');
+          } else {
+            return;
+          }
+          (u.textContent = ` contains:
+`),
+            x.append(
+              P,
+              `
+`
+            ),
+            r.append(x);
+        } else {
+          f.textContent = 'So ' + f.textContent.toLowerCase();
+        }
+      }
+    },
+    Rt = (e, t) => {
+      let i = Object.keys(t);
+      if (i.length === 0) {
+        e.append('{}');
+        return;
+      }
+      e.append('{ ');
+      for (let p = 0; p < i.length; p++) {
+        let o = i[p],
+          s = t[o];
+        p > 0 && e.append(', '),
+          e.append(Sl.test(o) ? o : xe(Ae, JSON.stringify(o)), ': '),
+          typeof s == 'string' ? e.append(xe(Ae, JSON.stringify(s))) : Rt(e, s);
+      }
+      e.append(' }');
+    };
+  var ir = (e) => {
+      let t = e.outputs,
+        i = 0,
+        p = 0,
+        o = [],
+        s,
+        n = (r, l) => {
+          let a = r.n,
+            f = [];
+
+          for (let u in a) {
+            f.push(n(a[u], !1));
+          }
+          return { r: r.r, e: r.e, p: ae(r.t), t: r.t, l: f.sort(ve), g: l };
+        };
+      for (let r in t) {
+        let l = ge(r);
+        l.pop(), (s = Ue(l.join('/'), s));
+      }
+      for (let r in t) {
+        if (Te(r)) {
+          continue;
+        }
+        let a = { r: s ? ge(r).slice(s.length).join('/') : r, e: '', t: 0, n: {} },
+          f = t[r],
+          u = f.inputs,
+          N = f.bytes;
+        for (let H in u) {
+          let x = we(a, Se(H), u[H].bytesInOutput);
+          x > p && (p = x);
+        }
+        (a.t = N), (i += N), o.push(n(a, !0));
+      }
+      e: for (;;) {
+        let r;
+        for (let l of o) {
+          let a = l.l;
+
+          if (!a.length) {
+            continue;
+          }
+
+          if (a.length > 1 || a[0].l.length !== 1) {
+            break e;
+          }
+          let f = a[0].r;
+
+          if (r === void 0) {
+            r = f;
+          } else if (r !== f) {
+            break e;
+          }
+        }
+
+        if (r === void 0) {
+          break;
+        }
+        for (let l of o) {
+          let a = l.l;
+          if (a.length) {
+            a = a[0].l;
+
+            for (let f of a) {
+              f.r = r + f.r;
+            }
+            l.l = a;
+          }
+        }
+        p--;
+      }
+      for (let r of o) {
+        let l = 0;
+
+        for (let a of r.l) {
+          l += a.t;
+        }
+        l < r.t && r.l.push({ r: '(unassigned)', e: '', p: ae(r.t - l), t: r.t - l, l: [], g: !1 });
+      }
+      return o.sort(ve), { u: { r: '', e: '', p: '', t: i, l: o, g: !1 }, b: p + 1 };
+    },
+    Ht = (e, t, i, p, o) => {
+      let s = [],
+        n = (l, a, f, u, N) => {
+          let H = e[l].t * N,
+            x = e[a].t * N;
+          return h.max((f * f * H) / (u * u), (u * u) / (f * f * x));
+        };
+      return (
+        ((l, a, f, u, N) => {
+          for (; l < e.length; ) {
+            let H = 0;
+
+            for (let C = l; C < e.length; C++) {
+              H += e[C].t;
+            }
+            let x = h.min(u, N),
+              P = (u * N) / H,
+              I = l,
+              G = 0,
+              se = 0;
+            for (; I < e.length; ) {
+              let C = e[I].t * P,
+                k = n(l, I, x, G + C, P);
+
+              if (I > l && se < k) {
+                break;
+              }
+              (G += C), (se = k), I++;
+            }
+            let X = h.round(G / x),
+              J = 0;
+            for (let C = l; C < I; C++) {
+              let k = e[C],
+                U = k.t * P,
+                B = h.round((x * J) / G),
+                ee = h.round((x * (J + U)) / G),
+                [D, E, F, j] = u >= N ? [a, f + B, X, ee - B] : [a + B, f, ee - B, X];
+              s.push({
+                f: k,
+                m: [D, E, F, j],
+                n: F > 8 && j > 24 ? Ht(k.l, D + 4, E + 20, F - 8, j - 24) : [],
+              }),
+                (J += U);
+            }
+            (l = I), u >= N ? ((a += X), (u -= X)) : ((f += X), (N -= X));
+          }
+        })(0, t, i, p, o),
+        s
+      );
+    },
+    wl = (e) => {
+      let t = ir(e),
+        i = [],
+        p = m.createElement('div'),
+        o = m.createElement('main'),
+        s = m.createElement('canvas'),
+        n = s.getContext('2d'),
+        r = 0,
+        l = 0,
+        a = null,
+        f = null,
+        u = 0,
+        N = 0,
+        H = '',
+        x = '',
+        P = '14px sans-serif',
+        I = {},
+        G = 'bold ' + P,
+        se = {},
+        X = 0,
+        J = se,
+        C = null,
+        k = null,
+        U = 0,
+        B = 0,
+        ee = 0,
+        D = 1,
+        E = null,
+        F = null,
+        j = () => {
+          if (C) {
+            let [d, c, b, v] = C.m,
+              T = d + b,
+              S = c + v,
+              R = h.round(r / 10),
+              _ = h.round(l / 10),
+              W = r - R - 1,
+              A = l - _ - 1,
+              Q = F ? D : 1 - D,
+              le = h.round(d + (R - d) * Q),
+              pe = h.round(c + (_ - c) * Q),
+              $ = h.round(T + (W - T) * Q),
+              ue = h.round(S + (A - S) * Q),
+              Ne = (jt) => jt - h.floor(jt / 64 - 0.5) * 64;
+            (k = Ht([C.f], le, pe, $ - le, ue - pe)[0]),
+              (U = Ne(-(d + T) / 2) * (1 - Q) + (le + $) / 2),
+              (B = Ne(-(c + S) / 2) * (1 - Q) + (pe + ue) / 2);
+          } else {
+            (k = null), (U = 0), (B = 0);
+          }
+        },
+        Y = () => {
+          let d = r,
+            c = l,
+            b = te.devicePixelRatio || 1;
+          (r = h.min(o.clientWidth, 1600)),
+            (l = h.max(h.round(r / 2), innerHeight - 380)),
+            (s.style.width = r + 'px'),
+            (s.style.height = l + 'px'),
+            (o.style.height = l + 'px'),
+            (s.width = h.round(r * b)),
+            (s.height = h.round(l * b)),
+            n.scale(b, b),
+            (r !== d || l !== c) && ((i = Ht(t.u.l, 0, 0, r - 1, l - 1)), j()),
+            fe();
+        },
+        ce = () => {
+          let d = D,
+            c = C;
+          (D = (Re() - ee) / 350),
+            D < 0 || D > 1
+              ? ((C = F), (D = 1), (a = null))
+              : ((D = 1 - D), (D *= D * D), (D = 1 - D), (a = ie(ce))),
+            (D !== d || C !== c) && j(),
+            fe();
+        },
+        q = () => {
+          a === null && (a = ie(ce));
+        },
+        re = (d) => {
+          let c = J[d];
+          return c === void 0 && ((c = n.measureText(String.fromCharCode(d)).width), (J[d] = c)), c;
+        },
+        K = (d, c) => {
+          if (c < X) {
+            return ['', 0];
+          }
+          let b = 0,
+            v = d.length,
+            T = 0;
+          for (; T < v; ) {
+            let S = re(d.charCodeAt(T));
+
+            if (c < b + X + S) {
+              return [d.slice(0, T) + '...', b + X];
+            }
+            (b += S), T++;
+          }
+          return [d, b];
+        },
+        Z = (d, c) => {
+          let b = d.f,
+            [v, T, S, R] = d.m,
+            _ = (b === f ? 1 : 0) | (d === F ? 2 : 0);
+          if (c === 1 && k) {
+            let [W, A, Q, le] = k.m;
+            v >= W && T >= A && v + S <= W + Q && T + R <= A + le && (c = 2);
+          }
+
+          for (let W of d.n) {
+            _ |= Z(W, c);
+          }
+          return (
+            c !== 2 &&
+              !b.g &&
+              ((n.fillStyle = Je(n, b.e, u, N, 1)),
+              d.n.length
+                ? (n.fillRect(v, T, S, 20),
+                  n.fillRect(v, T + R - 4, S, 4),
+                  n.fillRect(v, T + 20, 4, R - 24),
+                  n.fillRect(v + S - 4, T + 20, 4, R - 24))
+                : n.fillRect(v, T, S, R)),
+            _
+          );
+        },
+        de = (d, c) => {
+          let b = d.f,
+            [v, T, S, R] = d.m,
+            _ = b.g;
+          if (
+            (f === b &&
+              !_ &&
+              (!C || c) &&
+              ((n.fillStyle = 'rgba(255,255,255,0.5)'), n.fillRect(v, T, S, R)),
+            _ || ot(n, '#222', v + 0.5, T + 0.5, S, R),
+            R >= 20)
+          ) {
+            (n.fillStyle = _ ? x : '#000'), _ && ((n.font = G), (J = I), (X = 3 * re(46)));
+            let W = S - 8,
+              A = T + h.round(24 / 2),
+              [Q, le] = K(b.r, W),
+              pe = v + h.round((S - le) / 2);
+            if ((_ && ((n.font = P), (J = se), (X = 3 * re(46))), Q === b.r && b.l.length)) {
+              let $ = ' \u2013 ' + (me === 2 ? Ee(b.e, '') : b.p),
+                [ue, Ne] = K($, W - le);
+              (pe = v + h.round((S - le - Ne) / 2)),
+                (n.globalAlpha = 0.5),
+                n.fillText(ue, pe + le, A),
+                (n.globalAlpha = 1);
+            }
+            if (
+              (_ && ((n.font = G), (J = I), (X = 3 * re(46))),
+              n.fillText(Q, pe, A),
+              _ && ((n.font = P), (J = se), (X = 3 * re(46))),
+              R > 40 && !b.l.length)
+            ) {
+              let $ = me === 2 ? Ee(b.e, '') : b.p,
+                [ue, Ne] = K($, W);
+              (n.globalAlpha = 0.5),
+                n.fillText(ue, v + h.round((S - Ne) / 2), T + 20 + h.round(R - 24) / 2),
+                (n.globalAlpha = 1);
+            }
+
+            for (let $ of d.n) {
+              de($, c);
+            }
+          }
+        },
+        fe = () => {
+          let d = getComputedStyle(m.body);
+          (H = d.getPropertyValue('--bg')),
+            (x = d.getPropertyValue('--fg-on')),
+            (a = null),
+            n.clearRect(0, 0, r, l),
+            (n.textBaseline = 'middle'),
+            (X = n.measureText('...').width);
+          let c = null,
+            b = null,
+            v = k ? (E ? (F ? 1 : 1 - D) : D) : 0;
+          u = N = 0;
+          for (let T of i) {
+            let S = Z(T, 1);
+            S & 1 && (c = T), S & 2 && (b = T);
+          }
+
+          for (let T of i) {
+            if ((de(T, !1), k || (c && T !== c))) {
+              let [S, R, _, W] = T.m;
+              (n.globalAlpha = 0.6 * (!k || (!E && b && T !== b) ? 1 : v)),
+                (n.fillStyle = H),
+                n.fillRect(S, R, _, W),
+                (n.globalAlpha = 1);
+            }
+          }
+          if (k) {
+            let [T, S, R, _] = k.m,
+              W = n.getTransform(),
+              A = h.sqrt(W.a * W.d);
+            n.save(),
+              (n.shadowColor = 'rgba(0,0,0,0.5)'),
+              (n.shadowBlur = A * (30 * v)),
+              (n.shadowOffsetX = A * (2 * r)),
+              (n.shadowOffsetY = A * (2 * l + 15 * v)),
+              n.fillRect(T - 2 * r, S - 2 * l, R, _),
+              n.restore(),
+              (u = U),
+              (N = B),
+              Z(k, 0),
+              de(k, !0);
+          }
+        },
+        ne = m.createElement('div'),
+        Le = (d, c, b) => {
+          (ne.style.display = 'block'),
+            (ne.style.left = d + 'px'),
+            (ne.style.top = c + 'px'),
+            (ne.innerHTML = b);
+          let v = ne.offsetWidth;
+
+          for (let T = ne; T; T = T.offsetParent) {
+            v += T.offsetLeft;
+          }
+          v > r && (ne.style.left = d + r - v + 'px');
+        },
+        y = () => {
+          ne.style.display = 'none';
+        },
+        w = (d) => {
+          let c = (T, S) => {
+              for (let R of T) {
+                let [_, W, A, Q] = R.m;
+
+                if (b >= _ && v >= W && b < _ + A && v < W + Q) {
+                  return c(R.n, !1) || (S ? null : R);
+                }
+              }
+              return null;
+            },
+            b = d.pageX,
+            v = d.pageY;
+
+          for (let T = s; T; T = T.offsetParent) {
+            (b -= T.offsetLeft), (v -= T.offsetTop);
+          }
+          return k ? c([k], !1) : c(i, !0);
+        },
+        L = (d) => {
+          let c = w(d);
+
+          if ((O(c && c.f), c)) {
+            let b = c.f,
+              v = b.r === b.e ? We(b.e) : b.e,
+              T = v.length - b.r.length;
+            (v = z(v.slice(0, T)) + '<b>' + z(v.slice(T)) + '</b>'),
+              (v += me === 2 ? z(Ee(b.e, ' \u2013 ')) : ' \u2013 ' + z(ae(b.t))),
+              Le(d.pageX, d.pageY + 20, v);
+          } else {
+            y();
+          }
+        },
+        O = (d) => {
+          f !== d && ((f = d), (s.style.cursor = d && !d.l.length ? 'pointer' : 'auto'), q());
+        },
+        M = (d, c) => {
+          for (let b of d) {
+            let v = b.f === c ? b : M(b.n, c);
+
+            if (v) {
+              return v;
+            }
+          }
+          return null;
+        },
+        V = (d) => {
+          C !== d && ((D = 0), (ee = Re()), (E = C), (F = d), (C = d || M(i, C.f)), j(), q());
+        };
+      (s.onmousemove = (d) => {
+        L(d);
+      }),
+        (s.onmouseout = (d) => {
+          O(null), y();
+        }),
+        (p.onclick = (d) => {
+          let c = w(d);
+
+          if (c) {
+            let b = c.f;
+            b.l.length ? (c !== k ? (V(c), O(null), y()) : L(d)) : (Oe(e, b.e, b.t), L(d));
+          } else {
+            C && (V(null), L(d));
+          }
+        }),
+        je((d) => {
+          Ze() || L(d);
+        }),
+        Y(),
+        Promise.resolve().then(Y),
+        Xe(fe),
+        $e(fe),
+        Ye(Y),
+        (p.id = hl),
+        (p.innerHTML = `<div class="${Be}"><p>This visualization shows which input files were placed into each output file in the bundle. Click on a node to expand and focus it.</p><p><b>Benefit of this chart type:</b> Makes the most of available screen area.</p></div>`),
+        (ne.className = ze),
+        o.append(s),
+        p.append(o, ne);
+      let g = m.createElement('section');
+      return g.append(Me), p.append(g), p;
+    };
+  var Ml = 'y',
+    Il = 'z',
+    Ol = 'F',
+    Cl = 'P',
+    Ll = 'C',
+    Pl = 'S',
+    At = 'j';
+  var Rl = 't',
+    Dt = 'M',
+    Ft = 'N',
+    Hl = 'q',
+    kl = 'T';
+  var Al = (e, t) => {
+      for (; t; ) {
+        if (t === e) {
+          return !0;
+        }
+        t = t.i;
+      }
+      return !1;
+    },
+    ar = (e) => {
+      let t = e.inputs,
+        i = e.outputs,
+        p = { r: '', e: '', t: 0, n: {} },
+        o = (r) => {
+          let l = r.n,
+            a = [];
+
+          for (let f in l) {
+            a.push(o(l[f]));
+          }
+          return { e: r.e, t: r.t, l: a.sort(ve), i: null };
+        },
+        s = (r, l) => {
+          let a = 0;
+          for (let f of r.l) {
+            let u = s(f, l + 1);
+            (f.i = r), u > a && (a = u);
+          }
+          return a + 1;
+        };
+
+      for (let r in t) {
+        we(p, Se(r), 0);
+      }
+      for (let r in i) {
+        if (Te(r)) {
+          continue;
+        }
+        let a = i[r].inputs;
+
+        for (let f in a) {
+          we(p, Se(f), a[f].bytesInOutput);
+        }
+      }
+      let n = o(p);
+
+      for (; n.l.length === 1; ) {
+        n = n.l[0];
+      }
+      return { u: n, b: s(n, 0) };
+    },
+    _t = (e, t, i) => {
+      if (e === t) {
+        return;
+      }
+      let p = t.i,
+        o = p.t || 1,
+        s = 0;
+      _t(e, p, i);
+      for (let n of p.l) {
+        if (n === t) {
+          (i.y += (i.c * s) / o), (i.c = (n.t / o) * i.c);
+          break;
+        }
+        s += n.t;
+      }
+      i.T += 1;
+    },
+    Qe = (e) => 50 * 8 * h.log(1 + h.log(1 + e / 8)),
+    Dl = (e) => {
+      let t = m.createElement('div'),
+        i = m.createElement('main'),
+        p = ar(e),
+        o = p.u,
+        s = null,
+        n = (x) => {
+          o !== x && ((o = x), u(), H());
+        },
+        r = (x) => {
+          s !== x && ((s = x), u(), H());
+        },
+        l = () => {
+          let x = m.createElement('div'),
+            P = m.createElement('canvas'),
+            I = P.getContext('2d'),
+            G = () => {
+              let g = 2 * h.ceil(Qe(p.b)),
+                d = te.devicePixelRatio || 1;
+              (C = h.min(h.round(innerWidth * 0.4), g)),
+                (k = C),
+                (U = C >> 1),
+                (B = k >> 1),
+                (P.style.width = C + 'px'),
+                (P.style.height = k + 'px'),
+                (P.width = h.round(C * d)),
+                (P.height = h.round(k * d)),
+                I.scale(d, d),
+                X();
+            },
+            se = (g, d, c, b, v, T, S) => {
+              let R = Qe(d + 1);
+
+              if (R > B) {
+                return S;
+              }
+              g === s && (T |= 8);
+              let _ = (c + R) / 2,
+                W = b + v;
+
+              if (W - S < 1.5 / _) {
+                return S;
+              }
+              let A = 2 / _;
+
+              if ((v > A && (A = v), T & 2)) {
+                (I.fillStyle = Je(I, g.e, U, B, 1)),
+                  I.beginPath(),
+                  I.arc(U, B, c, b, b + A, !1),
+                  I.arc(U, B, R, b + A, b, !0),
+                  I.fill(),
+                  s &&
+                    (T & 8 || g.i === s) &&
+                    ((I.fillStyle = 'rgba(255, 255, 255, 0.3)'), I.fill());
+              } else {
+                let ue = A === h.PI * 2,
+                  Ne = T & 4 || ue ? R : c;
+                T & 1 && c > 0 && I.arc(U, B, c, b + A, b, !0),
+                  I.moveTo(U + Ne * h.cos(b), B + Ne * h.sin(b)),
+                  I.arc(U, B, R, b, b + A, !1),
+                  ue || I.lineTo(U + c * h.cos(b + A), B + c * h.sin(b + A));
+              }
+              let Q = g.t,
+                le = T & 10,
+                pe = 0,
+                $ = -1 / 0;
+
+              for (let ue of g.l) {
+                ($ = se(ue, d + 1, R, b + (v * pe) / Q, (ue.t / Q) * v, le, $)),
+                  (pe += ue.t),
+                  (le |= 4);
+              }
+              return W;
+            },
+            X = () => {
+              I.clearRect(0, 0, C, k),
+                se(K, Z, Qe(Z), de, fe, 3, -1 / 0),
+                (I.strokeStyle = '#222'),
+                I.beginPath(),
+                se(K, Z, Qe(Z), de, fe, 1, -1 / 0),
+                I.stroke(),
+                Z === 0 &&
+                  ((I.fillStyle = '#222'),
+                  (I.font = 'bold 16px sans-serif'),
+                  (I.textAlign = 'center'),
+                  (I.textBaseline = 'middle'),
+                  I.fillText(ae(Y.t), U, B));
+            },
+            J = -h.PI / 2,
+            C = 0,
+            k = 0,
+            U = 0,
+            B = 0,
+            ee = null,
+            D = 0,
+            E = 0,
+            F = J,
+            j = h.PI * 2,
+            Y = o,
+            ce = E,
+            q = F,
+            re = j,
+            K = o,
+            Z = E,
+            de = F,
+            fe = j,
+            ne = (g) => {
+              let d = (S, R, _, W, A) => {
+                  let Q = Qe(R + 1);
+
+                  if (Q > B) {
+                    return null;
+                  }
+                  if (v >= _ && v < Q) {
+                    let $ = T - W;
+
+                    if ((($ /= h.PI * 2), ($ -= h.floor($)), ($ *= h.PI * 2), $ < A)) {
+                      return S === K ? S.i : S;
+                    }
+                  }
+                  let le = S.t,
+                    pe = 0;
+                  for (let $ of S.l) {
+                    let ue = d($, R + 1, Q, W + (A * pe) / le, ($.t / le) * A);
+
+                    if (ue) {
+                      return ue;
+                    }
+                    pe += $.t;
+                  }
+                  return null;
+                },
+                c = g.pageX,
+                b = g.pageY;
+
+              for (let S = P; S; S = S.offsetParent) {
+                (c -= S.offsetLeft), (b -= S.offsetTop);
+              }
+              (c -= U), (b -= B);
+              let v = h.sqrt(c * c + b * b),
+                T = h.atan2(b, c);
+              return d(K, Z, Qe(Z), de, fe);
+            },
+            Le = () => {
+              let g = (Re() - D) / 350;
+              g < 0 || g > 1
+                ? ((g = 1), (ee = null), (K = Y), (ce = 0), (q = J), (re = h.PI * 2))
+                : (g < 0.5 ? (g *= 4 * g * g) : ((g = 1 - g), (g *= 4 * g * g), (g = 1 - g)),
+                  (ee = ie(Le))),
+                (Z = E + (ce - E) * g),
+                (de = F + (q - F) * g),
+                (fe = j + (re - j) * g),
+                X();
+            },
+            y = m.createElement('div'),
+            w = (g, d, c) => {
+              (y.style.display = 'block'),
+                (y.style.left = g + 'px'),
+                (y.style.top = d + 'px'),
+                (y.innerHTML = c);
+            },
+            L = () => {
+              y.style.display = 'none';
+            },
+            O = null,
+            M = [],
+            V = (g) => {
+              let d = ne(g);
+
+              if ((r(d), d && d !== K.i)) {
+                let c = d.e;
+                if (d.i && d.i.e !== '') {
+                  let b = d.i.e.length;
+                  c = z(c.slice(0, b)) + '<b>' + z(c.slice(b)) + '</b>';
+                } else {
+                  c = '<b>' + z(We(c)) + '</b>';
+                }
+                me === 2 ? (c += z(Ee(d.e, ' \u2013 '))) : (c += ' \u2013 ' + z(ae(d.t))),
+                  w(g.pageX, g.pageY + 20, c),
+                  (P.style.cursor = 'pointer');
+              } else {
+                L();
+              }
+            };
+          return (
+            G(),
+            Xe(X),
+            Ye(G),
+            je((g) => {
+              Ze() || V(g);
+            }),
+            (P.onmousemove = (g) => {
+              V(g);
+            }),
+            (P.onmouseout = () => {
+              r(null), L();
+            }),
+            (P.onclick = (g) => {
+              let d = ne(g);
+
+              if (!d) {
+                return;
+              }
+              L();
+              let c = [];
+              d !== K.i ? (c = M.concat(o)) : M.length > 0 && ((d = M.pop()), (c = M.slice())),
+                d.l.length > 0 ? (n(d), (M = c)) : (g.preventDefault(), Oe(e, d.e, d.t));
+            }),
+            (x.className = Il),
+            x.append(P, Me),
+            (y.className = ze),
+            i.append(y, x),
+            [
+              X,
+              () => {
+                if (
+                  (O !== s &&
+                    ((O = s), s || ((P.style.cursor = 'auto'), L()), ee === null && (ee = ie(Le))),
+                  Y !== o)
+                ) {
+                  if (((M.length = 0), ee === null && (ee = ie(Le)), (D = Re()), Al(K, o))) {
+                    let g = { T: Z, y: de, c: fe };
+                    _t(K, o, g),
+                      (Z = g.T),
+                      (de = g.y),
+                      (fe = g.c),
+                      (ce = 0),
+                      (q = J),
+                      (re = h.PI * 2),
+                      (K = o);
+                  } else if (Al(o, K)) {
+                    let g = { T: 0, y: J, c: h.PI * 2 };
+                    _t(o, K, g), (ce = g.T), (q = g.y), (re = g.c);
+                  } else {
+                    (D = -1 / 0), (K = o);
+                  }
+                  (E = Z), (F = de), (j = fe), (Y = o);
+                }
+              },
+            ]
+          );
+        },
+        a = () => {
+          let x = m.createElement('div'),
+            P = () => {
+              let C = o.i,
+                k = o.l,
+                U = m.createElement('div'),
+                B = 1;
+              U.className = Pl;
+              for (let E of k) {
+                let F = E.t;
+                F > B && (B = F);
+              }
+              if (((I.length = 0), (G.length = 0), C)) {
+                let E = m.createElement('a');
+                (E.className = At), (E.tabIndex = 0), U.append(E);
+                let F = m.createElement('div');
+                (F.className = Dt), E.append(F);
+                let j = m.createElement('div');
+                (j.className = Ft),
+                  E.append(j),
+                  (E.href = 'javascript:void 0'),
+                  (F.textContent = '../'),
+                  (E.onclick = () => {
+                    n(C), He && G.length > 0 && G[0].focus();
+                  }),
+                  (E.onfocus = E.onmouseover = () => r(C)),
+                  (E.onblur = E.onmouseout = () => r(null)),
+                  I.push(C),
+                  G.push(E);
+              }
+              for (let E of k) {
+                let F = E.e.slice(o.e.length),
+                  j = ae(E.t),
+                  Y = m.createElement('a');
+                (Y.className = At), (Y.tabIndex = 0), U.append(Y);
+                let ce = m.createElement('div');
+                (ce.className = Dt), (ce.innerHTML = z(F === E.e ? We(F) : F)), Y.append(ce);
+                let q = m.createElement('div');
+                (q.className = Ft), Y.append(q);
+                let re = m.createElement('div'),
+                  K = sl(E.e);
+                (re.className = Rl + (E.t ? '' : ' ' + Hl)),
+                  (re.style.background = K),
+                  (re.style.width = (100 * E.t) / B + '%'),
+                  q.append(re);
+                let Z = m.createElement('div');
+                (Z.className = kl),
+                  (Z.textContent = me === 2 ? Ee(E.e, '') : j),
+                  re.append(Z),
+                  (Y.href = 'javascript:void 0'),
+                  (Y.onclick = (de) => {
+                    de.preventDefault(),
+                      E.l.length > 0 ? (n(E), He && G.length > 0 && G[0].focus()) : Oe(e, E.e, E.t);
+                  }),
+                  (Y.onfocus = Y.onmouseover = () => r(E)),
+                  (Y.onblur = Y.onmouseout = () => r(null)),
+                  I.push(E),
+                  G.push(Y);
+              }
+              let ee = m.createElement('div');
+              (ee.className = Cl), (ee.textContent = 'Directory: ');
+              let D = m.createElement('div');
+              (D.className = Ll), ee.append(D);
+              for (let E = o; E; E = E.i) {
+                let F = E.e || '/',
+                  j = m.createElement('a');
+                E.i && (F = F.slice(E.i.e.length)),
+                  (j.textContent = F),
+                  E !== o &&
+                    ((j.href = 'javascript:void 0'),
+                    (j.onclick = (Y) => {
+                      Y.preventDefault(),
+                        n(E),
+                        He && G.length > 0 && G[!I[0] && G.length > 1 ? 1 : 0].focus();
+                    })),
+                  D.insertBefore(j, D.firstChild),
+                  o == p.u && ((j.tabIndex = -1), I.unshift(o), G.unshift(j));
+              }
+              (x.innerHTML = ''), x.append(ee, U);
+            },
+            I = [],
+            G = [],
+            se = o,
+            X = null,
+            J = null;
+          return (
+            (x.className = Ol),
+            i.append(x),
+            P(),
+            [
+              P,
+              () => {
+                if ((se !== o && ((se = o), P()), X !== s)) {
+                  (X = s), J && (J.classList.remove('hover'), (J = null));
+                  for (let C = s; C; C = C.i) {
+                    let k = I.indexOf(C);
+                    if (k >= 0) {
+                      (J = G[k]), J.classList.add('hover');
+                      break;
+                    }
+                  }
+                }
+              },
+            ]
+          );
+        },
+        [f, u] = l(),
+        [N, H] = a();
+      return (
+        $e(() => {
+          f(), N();
+        }),
+        (t.id = Ml),
+        (t.innerHTML = `<div class="${Be}"><p>This visualization shows how much space each input file takes up in the final bundle. Input files that take up 0 bytes have been completely eliminated by tree-shaking.</p><p><b>Benefit of this chart type:</b> Can be navigated with the keyboard.</p></div>`),
+        t.append(i),
+        t
+      );
+    };
+  var Fl = 'A';
+  var pr = (e) => {
+      let t = e.outputs,
+        i = 0,
+        p = 0,
+        o = [],
+        s,
+        n = (l) => ' \u2013 ' + ae(l),
+        r = (l) => {
+          let a = l.n,
+            f = [];
+
+          for (let u in a) {
+            f.push(r(a[u]));
+          }
+          return { r: l.r, e: l.e, p: n(l.t), t: l.t, l: f.sort(ve) };
+        };
+      for (let l in t) {
+        let a = ge(l);
+        a.pop(), (s = Ue(a.join('/'), s));
+      }
+      for (let l in t) {
+        if (Te(l)) {
+          continue;
+        }
+        let f = { r: s ? ge(l).slice(s.length).join('/') : l, e: '', t: 0, n: {} },
+          u = t[l],
+          N = u.inputs,
+          H = u.bytes;
+        for (let x in N) {
+          let P = we(f, Se(x), N[x].bytesInOutput);
+          P > p && (p = P);
+        }
+        (f.t = H), (i += H), o.push(r(f));
+      }
+      e: for (;;) {
+        let l;
+        for (let a of o) {
+          let f = a.l;
+
+          if (!f.length) {
+            continue;
+          }
+
+          if (f.length > 1 || f[0].l.length !== 1) {
+            break e;
+          }
+          let u = f[0].r;
+
+          if (l === void 0) {
+            l = u;
+          } else if (l !== u) {
+            break e;
+          }
+        }
+
+        if (l === void 0) {
+          break;
+        }
+        for (let a of o) {
+          let f = a.l;
+          if (f.length) {
+            f = f[0].l;
+
+            for (let u of f) {
+              u.r = l + u.r;
+            }
+            a.l = f;
+          }
+        }
+        p--;
+      }
+      for (let l of o) {
+        let a = 0;
+
+        for (let f of l.l) {
+          a += f.t;
+        }
+        a < l.t && l.l.push({ r: '(unassigned)', e: '', p: n(l.t - a), t: l.t - a, l: [] });
+      }
+      return o.sort(ve), { u: { r: '', e: '', p: '', t: i, l: o }, b: p + 1 };
+    },
+    _l = (e) => {
+      let t = pr(e),
+        i = t.u.t,
+        p = 0,
+        o = i,
+        s = m.createElement('div'),
+        n = m.createElement('main'),
+        r = m.createElement('canvas'),
+        l = r.getContext('2d'),
+        a = 0,
+        f = 0,
+        u = 0,
+        N = 0,
+        H = 0,
+        x = !1,
+        P = 1,
+        I = null,
+        G = null,
+        se = '',
+        X = '14px sans-serif',
+        J = {},
+        C = 'bold ' + X,
+        k = {},
+        U = 0,
+        B = k,
+        ee = (y) => {
+          G !== y &&
+            ((G = y), (r.style.cursor = y && !y.l.length ? 'pointer' : 'auto'), y || K(), ce());
+        },
+        D = (y) => {
+          let w = B[y];
+          return w === void 0 && ((w = l.measureText(String.fromCharCode(y)).width), (B[y] = w)), w;
+        },
+        E = () => {
+          let y = te.devicePixelRatio || 1;
+          (a = s.clientWidth + 2 * 50),
+            (f = t.b * 24 + 1),
+            (u = (a - 1e3) >> 1),
+            (N = u + 1e3),
+            u < 0 && (u = 0),
+            N > a && (N = a),
+            (N -= u),
+            (P = i / N),
+            (r.style.width = a + 'px'),
+            (r.style.height = f + 'px'),
+            (n.style.height = f + 'px'),
+            (r.width = h.round(a * y)),
+            (r.height = h.round(f * y)),
+            l.scale(y, y),
+            Y();
+        },
+        F = (y, w) => {
+          let L = U,
+            O = y.length,
+            M = 0;
+
+          for (; M < O && ((L += D(y.charCodeAt(M))), !(L > w)); ) {
+            M++;
+          }
+          return y.slice(0, M) + '...';
+        },
+        j = (y, w, L, O, M) => {
+          let V = N / (o - p),
+            g = u + (L - p) * V,
+            d = y.t * V,
+            c = g + d;
+
+          if (c < O + 1.5) {
+            return O;
+          }
+
+          if (g + d < 0 || g > a) {
+            return c;
+          }
+          let b = d < 2 ? 2 : d,
+            v = (g > 0 ? g : 0) + 5,
+            T = w + 24 / 2,
+            S = '',
+            R = '',
+            _,
+            W = 0,
+            A = d + g - v,
+            Q = y.e ? Je(l, y.e, u - p * V, 24, V * P) : ke,
+            le = 'black',
+            pe = -1 / 0;
+          M & 1
+            ? ((le = se), (l.font = C), (B = J), (U = 3 * D(46)))
+            : ((l.fillStyle = Q),
+              l.fillRect(g, w, b, 24),
+              (M & 2 || (G && y.e === G.e)) &&
+                ((l.fillStyle = 'rgba(255, 255, 255, 0.3)'), l.fillRect(g, w, b, 24), (M |= 2))),
+            U < A &&
+              ((S = y.r),
+              (_ = l.measureText(S).width),
+              _ <= A ? (W += _) : ((S = F(S, A)), (W = A)),
+              (l.fillStyle = le),
+              l.fillText(S, v, T)),
+            M & 1 && ((l.font = X), (B = k), (U = 3 * D(46))),
+            W + U < A &&
+              ((R = me === 2 ? Ee(y.e, ' \u2013 ') : y.p),
+              (_ = l.measureText(R).width),
+              W + _ > A && (R = F(R, A - W)),
+              (l.globalAlpha = 0.5),
+              l.fillText(R, v + W, T),
+              (l.globalAlpha = 1));
+
+          for (let $ of y.l) {
+            (pe = j($, w + 24, L, pe, M & -2)), (L += $.t);
+          }
+          return M & 1 || ot(l, '#222', g + 0.5, w + 0.5, b, 24), c;
+        },
+        Y = () => {
+          let y = getComputedStyle(m.body),
+            w = 0,
+            L = -1 / 0;
+          (I = null),
+            (se = y.getPropertyValue('--fg-on')),
+            l.clearRect(0, 0, a, f),
+            (l.textBaseline = 'middle');
+
+          for (let O of t.u.l) {
+            (L = j(O, 0, w, L, 1)), (w += O.t);
+          }
+        },
+        ce = () => {
+          I === null && (I = ie(Y));
+        },
+        q = m.createElement('div'),
+        re = (y, w, L) => {
+          (q.style.display = 'block'),
+            (q.style.left = y + 'px'),
+            (q.style.top = w + 'px'),
+            (q.innerHTML = L);
+          let O = q.offsetWidth;
+
+          for (let M = q; M; M = M.offsetParent) {
+            O += M.offsetLeft;
+          }
+          O > a && (q.style.left = y + a - O + 'px');
+        },
+        K = () => {
+          q.style.display = 'none';
+        },
+        Z = (y) => {
+          let w = (g, d, c) => {
+              if (M >= c && M < c + g.t) {
+                if (O >= d && O < d + 24 && g.e) {
+                  return g;
+                }
+
+                if (O >= d + 24) {
+                  for (let b of g.l) {
+                    let v = w(b, d + 24, c);
+                    if (v) {
+                      return v;
+                    }
+                    c += b.t;
+                  }
+                }
+              }
+              return null;
+            },
+            L = y.pageX,
+            O = y.pageY;
+
+          for (let g = r; g; g = g.offsetParent) {
+            (L -= g.offsetLeft), (O -= g.offsetTop);
+          }
+          let M = p + ((o - p) / N) * (L - u),
+            V = 0;
+          for (let g of t.u.l) {
+            let d = w(g, 0, V);
+
+            if (d) {
+              return d;
+            }
+            V += g.t;
+          }
+          return null;
+        },
+        de = (y, w, L) => {
+          let O = p,
+            M = o,
+            V = 0;
+
+          if (L !== null) {
+            let g = O + ((M - O) / N) * (L - u),
+              d = h.pow(1.01, w);
+            (O = g + (O - g) * d), (M = g + (M - g) * d);
+          } else {
+            V = (y * (M - O)) / N;
+          }
+          O + V < 0 ? (V = -O) : M + V > i && (V = i - M),
+            (O += V),
+            (M += V),
+            O < 0 && (O = 0),
+            M > i && (M = i),
+            (p !== O || o !== M) && ((p = O), (o = M), ce());
+        },
+        fe = (y) => {
+          let w = Z(y);
+
+          if ((ee(w), w)) {
+            let L = w.r === w.e ? We(w.e) : w.e,
+              O = L.length - w.r.length;
+            (L = z(L.slice(0, O)) + '<b>' + z(L.slice(O)) + '</b>'),
+              (L += me === 2 ? z(Ee(w.e, ' \u2013 ')) : ' \u2013 ' + z(ae(w.t))),
+              re(y.pageX, y.pageY + 20, L);
+          } else {
+            K();
+          }
+        },
+        ne = !1;
+      (r.onmousedown = (y) => {
+        if (((ne = !1), y.button !== 2)) {
+          let w = y.pageX,
+            L = (M) => {
+              let V = M.pageX - w;
+              (!ne && h.abs(V) < 3) || ((ne = !0), de(-V, 0, null), (w = M.pageX));
+            },
+            O = () => {
+              m.removeEventListener('mousemove', L), m.removeEventListener('mouseup', O);
+            };
+          y.preventDefault(), m.addEventListener('mousemove', L), m.addEventListener('mouseup', O);
+        }
+      }),
+        (r.onmousemove = (y) => {
+          fe(y);
+        }),
+        (r.onmouseout = (y) => {
+          ee(null);
+        }),
+        (r.onclick = (y) => {
+          if (ne) {
+            return;
+          }
+          let w = Z(y);
+          ee(w), w && !w.l.length && Oe(e, w.e, w.t);
+        }),
+        je((y) => {
+          if (Ze()) {
+            return;
+          }
+          let w = y.deltaX,
+            L = y.deltaY,
+            O = Re(),
+            M = O - H < 50 ? x : y.ctrlKey || y.metaKey;
+          (H = O),
+            (x = M),
+            (M || h.abs(w) >= h.abs(L)) && y.preventDefault(),
+            de(w, L, M ? y.pageX : null),
+            fe(y);
+        }),
+        E(),
+        Promise.resolve().then(E),
+        Xe(Y),
+        $e(Y),
+        Ye(E),
+        (s.id = Fl),
+        (s.innerHTML =
+          `<div class="${Be}"><p>This visualization shows which input files were placed into each output file in the bundle. Use the scroll wheel with the ` +
+          ($t ? 'command' : 'control') +
+          ' key to zoom in and out.</p><p><b>Benefit of this chart type:</b> Best chart for quick mouse navigation.</p></div>'),
+        (q.className = ze),
+        n.append(r),
+        s.append(n, q);
+      let Le = m.createElement('section');
+      return Le.append(Me), s.append(Le), s;
+    };
+  var Wl = 'B',
+    Bl = 'D',
+    zl = 'E',
+    Wt = 'G';
+  var Gl,
+    fr = (e) => {
+      let t = e.inputs,
+        i = {},
+        p = [];
+      for (let o in t) {
+        let s = t[o];
+
+        for (let n of s.imports) {
+          if (n.original && n.original[0] !== '.') {
+            let r = i[n.original] || (i[n.original] = []);
+            r.includes(n.path) || r.push(n.path);
+          }
+        }
+      }
+      for (let o in i) {
+        let s = i[o];
+        if (s.length > 1) {
+          let n = m.createElement('div'),
+            r = m.createElement('ul'),
+            l,
+            a;
+          (n.className = zl),
+            (n.innerHTML =
+              'The import path <code>' +
+              z(o) +
+              '</code> resolves to multiple files in the bundle:');
+
+          for (let f of s) {
+            l = Ue(f, l);
+          }
+          for (let f of s) {
+            let u = ge(f);
+            l && (u = u.slice(l.length)), (a = Jt(u.join('/'), a));
+          }
+          for (let f of s.sort()) {
+            let u = ge(f).map(z),
+              N = m.createElement('li'),
+              H = '<pre><a href="javascript:void 0">',
+              x = '';
+            l &&
+              l.length &&
+              ((H += `<span class="${Wt}">` + u.slice(0, l.length).join('/') + '/</span>'),
+              (u = u.slice(l.length))),
+              a &&
+                a.length &&
+                ((x =
+                  `<span class="${Wt}">` +
+                  (u.length > a.length ? '/' : '') +
+                  u.slice(u.length - a.length).join('/') +
+                  '</span>'),
+                (u.length -= a.length)),
+              (N.innerHTML = H + '<b>' + u.join('/') + '</b>' + x + '</a></pre>'),
+              r.append(N),
+              (N.querySelector('a').onclick = () => {
+                Oe(e, f, null);
+              });
+          }
+          n.append(r), p.push(n);
+        }
+      }
+      return p;
+    },
+    Ul = (e) => {
+      if (Gl === e) {
+        return;
+      }
+      Gl = e;
+      let t = m.getElementById('warningsPanel'),
+        i = fr(e),
+        p = i.length;
+
+      if (p) {
+        t.innerHTML =
+          `<div class="${Wl}">\u26A0\uFE0F This bundle has <b><a href="javascript:void 0">` +
+          p +
+          ' warning' +
+          (p === 1 ? '' : 's') +
+          '</a></b><span>.</span></div>';
+        let o = t.querySelector('span'),
+          s = m.createElement('div');
+        s.className = Bl;
+        for (let n of i) {
+          s.append(n);
+        }
+        t.append(s),
+          (t.querySelector('a').onclick = () => {
+            s.style.display === 'block'
+              ? ((o.textContent = '.'), (s.style.display = 'none'))
+              : ((o.textContent = ':'), (s.style.display = 'block'));
+          });
+      } else {
+        t.innerHTML = '';
+      }
+    };
+  var mr = m.getElementById('startPanel'),
+    cr = m.getElementById('resultsPanel'),
+    mt = m.getElementById('chartPanel'),
+    Bt = m.getElementById('useTreemap'),
+    zt = m.getElementById('useSunburst'),
+    Gt = m.getElementById('useFlame'),
+    Ce = 0,
+    me = 0,
+    Ut = (e) => typeof e == 'object' && e !== null && !(e instanceof Array),
+    et = (e) => {
+      let t = JSON.parse(e),
+        i = (o) => {
+          Ce !== o &&
+            (Ce === 1
+              ? Bt.classList.remove(Fe)
+              : Ce === 2
+                ? zt.classList.remove(Fe)
+                : Ce === 3 && Gt.classList.remove(Fe),
+            (Ce = o),
+            (mt.innerHTML = ''),
+            Ce === 1
+              ? (mt.append(wl(t)), Bt.classList.add(Fe), nt('chart', 'treemap'))
+              : Ce === 2
+                ? (mt.append(Dl(t)), zt.classList.add(Fe), nt('chart', 'sunburst'))
+                : Ce === 3 && (mt.append(_l(t)), Gt.classList.add(Fe), nt('chart', 'flame')));
+        },
+        p = (o) => {
+          me !== o && ((me = o), dl(t, me));
+        };
+
+      if (!Ut(t) || !Ut(t.inputs) || !Ut(t.outputs)) {
+        throw new Error('Invalid metafile format');
+      }
+      (mr.style.display = 'none'),
+        (cr.style.display = 'block'),
+        (Bt.onclick = () => i(1)),
+        (zt.onclick = () => i(2)),
+        (Gt.onclick = () => i(3)),
+        (Ce = 0),
+        (me = 0),
+        cl(t, () => p(me === 1 ? 2 : 1)),
+        Ul(t),
+        tt(),
+        i(rt('chart') === 'flame' ? 3 : rt('chart') === 'sunburst' ? 2 : 1),
+        p(1);
+    },
+    hr = m.documentElement.dataset,
+    jl = () => {
+      (hr.theme = rt('theme') + ''), Ge && Ge();
+    };
+  jl();
+  te.addEventListener('storage', jl);
+  m.getElementById('loadExample').onclick = () => {
+    fetch('example-metafile.json')
+      .then((e) => e.text())
+      .then(et);
+  };
+  if (location.hash !== '') {
+    try {
+      et(atob(location.hash.slice(1)));
+    } catch (e) {}
+    try {
+      history.replaceState({}, '', location.pathname);
+    } catch (e) {}
+  }
+
+  /*
+  Additional code for Storybook to load the metafile from the parent window.
+  The story sets this global variable to the metafile in a beforeEach hook.
+  */
+  if (parent.metafile) {
+    et(parent.metafile);
+  }
+})();
diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts
index ec9d1d9fd85c..fbc3bbe4eeed 100644
--- a/code/.storybook/main.ts
+++ b/code/.storybook/main.ts
@@ -16,7 +16,7 @@ const imageContextPath = join(currentDirPath, '../frameworks/nextjs/src/image-co
 
 const config = defineMain({
   stories: [
-    './*.stories.@(js|jsx|ts|tsx)',
+    './bench/*.stories.@(js|jsx|ts|tsx)',
     {
       directory: '../core/template/stories',
       titlePrefix: 'core',
@@ -137,6 +137,7 @@ const config = defineMain({
   features: {
     developmentModeForBuild: true,
   },
+  staticDirs: [{ from: './bench/bundle-analyzer', to: '/bundle-analyzer' }],
   viteFinal: async (viteConfig, { configType }) => {
     const { mergeConfig } = await import('vite');
 

From 9a0d6b356a403de80368f61566c5f38bdcfe92cd Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 23 Jul 2025 12:16:53 +0200
Subject: [PATCH 5/9] disable eslint for raw index.js analyzer file

---
 code/.storybook/bench/bundle-analyzer/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/code/.storybook/bench/bundle-analyzer/index.js b/code/.storybook/bench/bundle-analyzer/index.js
index 9cc641fe6898..d17ed9518e78 100644
--- a/code/.storybook/bench/bundle-analyzer/index.js
+++ b/code/.storybook/bench/bundle-analyzer/index.js
@@ -1,3 +1,4 @@
+/* eslint-disable */
 'use strict';
 (() => {
   var m = document,

From bd72ec7687a0aef3c691b080f325231e9c92a821 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 23 Jul 2025 13:22:17 +0200
Subject: [PATCH 6/9] really fix lint this time

---
 code/.storybook/bench/bundle-analyzer/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/code/.storybook/bench/bundle-analyzer/index.js b/code/.storybook/bench/bundle-analyzer/index.js
index d17ed9518e78..fbff8a674fba 100644
--- a/code/.storybook/bench/bundle-analyzer/index.js
+++ b/code/.storybook/bench/bundle-analyzer/index.js
@@ -1,3 +1,4 @@
+/* eslint-disable eslint-comments/no-unlimited-disable */
 /* eslint-disable */
 'use strict';
 (() => {

From 0b2ae49b6a7f9df1021501923d0cc9ed4aedc840 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 23 Jul 2025 14:53:44 +0200
Subject: [PATCH 7/9] change metafile output to match pacakge dir name instead
 of package name, so that it matches {projectName} in NX config and is
 correctly calculated as part of the nx output cache

---
 code/.storybook/bench/bench.stories.tsx | 28 +++++++++++++++++++++----
 scripts/bench/safe-args.ts              |  3 +--
 scripts/build/utils/generate-bundle.ts  | 11 +++++-----
 3 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/code/.storybook/bench/bench.stories.tsx b/code/.storybook/bench/bench.stories.tsx
index 2189f4ac5d62..b5b84cacc75f 100644
--- a/code/.storybook/bench/bench.stories.tsx
+++ b/code/.storybook/bench/bench.stories.tsx
@@ -16,8 +16,10 @@ export default {
     chromatic: { disableSnapshot: true },
   },
   args: {
-    // default to the storybook/node.json metafile
-    metafile: safeMetafileArg(Object.keys(allMetafiles).find((path) => path.includes('/storybook/node.json'))!),
+    // default to the core/node.json metafile
+    metafile: safeMetafileArg(
+      Object.keys(allMetafiles).find((path) => path.includes('/core/node.json'))!
+    ),
   },
   argTypes: {
     metafile: {
@@ -29,8 +31,26 @@ export default {
         type: 'select',
         labels: Object.fromEntries(
           Object.keys(allMetafiles).map((path) => {
-            const [, dirName, subEntry] = /esbuild-metafiles\/(.+)\/(.+).json/.exec(path)!;
-            return [safeMetafileArg(path), `${dirName} - ${subEntry}`];
+            const [, dirname, subEntry] = /esbuild-metafiles\/(.+)\/(.+).json/.exec(path)!;
+
+            // most metafile directories are named exactly like their package name within the @storybook scope
+            let packageName = '@storybook/' + dirname;
+
+            // but some are not, so we need to map them to the correct package name
+            switch (dirname) {
+              case 'core': {
+                packageName = 'storybook';
+                break;
+              }
+              case 'eslint-plugin':
+                packageName = 'eslint-plugin-storybook';
+                break;
+              case 'create-storybook':
+              case 'storybook-addon-pseudo-states':
+                packageName = dirname;
+            }
+
+            return [safeMetafileArg(path), `${packageName} - ${subEntry}`];
           })
         ),
       },
diff --git a/scripts/bench/safe-args.ts b/scripts/bench/safe-args.ts
index 07df69454990..e8230ae947ee 100644
--- a/scripts/bench/safe-args.ts
+++ b/scripts/bench/safe-args.ts
@@ -3,7 +3,6 @@ const METAFILES_DIR = 'bench/esbuild-metafiles';
 // allows the metafile path to be used in the URL hash
 export const safeMetafileArg = (path: string) =>
   path
-    .replace(new RegExp(`.*${METAFILES_DIR}`), '')
-    .replaceAll('@', '_at_')
+    .replace(new RegExp(`.*${METAFILES_DIR}/`), '')
     .replaceAll('/', '__')
     .replace(/(\w*).json/, '$1');
diff --git a/scripts/build/utils/generate-bundle.ts b/scripts/build/utils/generate-bundle.ts
index cc4ee0823adc..5b537ab3d63f 100644
--- a/scripts/build/utils/generate-bundle.ts
+++ b/scripts/build/utils/generate-bundle.ts
@@ -4,7 +4,7 @@ import { mkdir, rm, writeFile } from 'node:fs/promises';
 
 import { globalExternals } from '@fal-works/esbuild-plugin-global-externals';
 import * as esbuild from 'esbuild';
-import { join, relative } from 'pathe';
+import { basename, join, relative } from 'pathe';
 import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 
@@ -68,6 +68,7 @@ export async function generateBundle({
 }) {
   const DIR_CWD = cwd;
   const DIR_REL = relative(DIR_CODE, DIR_CWD);
+  const PACKAGE_DIR_NAME = basename(DIR_CWD);
   const external = (await getExternal(DIR_CWD)).runtimeExternal;
   const { entries, postbuild } = entry;
 
@@ -174,7 +175,7 @@ export async function generateBundle({
         },
         plugins: [
           ...sharedOptions.plugins,
-          metafileWriterPlugin('node', join(DIR_METAFILE_BASE, name)),
+          metafileWriterPlugin('node', join(DIR_METAFILE_BASE, PACKAGE_DIR_NAME)),
         ],
       })
     );
@@ -191,7 +192,7 @@ export async function generateBundle({
         supported: SUPPORTED_FEATURES,
         plugins: [
           ...sharedOptions.plugins,
-          metafileWriterPlugin('browser', join(DIR_METAFILE_BASE, name)),
+          metafileWriterPlugin('browser', join(DIR_METAFILE_BASE, PACKAGE_DIR_NAME)),
         ],
       })
     );
@@ -204,7 +205,7 @@ export async function generateBundle({
         entryPoints: entries.runtime.map(({ entryPoint }) => entryPoint),
         plugins: [
           ...runtimeOptions.plugins,
-          metafileWriterPlugin('runtime', join(DIR_METAFILE_BASE, name)),
+          metafileWriterPlugin('runtime', join(DIR_METAFILE_BASE, PACKAGE_DIR_NAME)),
         ],
       })
     );
@@ -218,7 +219,7 @@ export async function generateBundle({
         plugins: [
           ...runtimeOptions.plugins,
           globalExternals(globalsModuleInfoMap),
-          metafileWriterPlugin('globalizedRuntime', join(DIR_METAFILE_BASE, name)),
+          metafileWriterPlugin('globalizedRuntime', join(DIR_METAFILE_BASE, PACKAGE_DIR_NAME)),
         ],
       })
     );

From b194e303a83bf47cffcc82452d57540c834c9237 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 23 Jul 2025 14:54:20 +0200
Subject: [PATCH 8/9] bust nx cache

---
 code/addons/a11y/package.json                      | 2 +-
 code/addons/docs/package.json                      | 2 +-
 code/addons/jest/package.json                      | 2 +-
 code/addons/links/package.json                     | 2 +-
 code/addons/themes/package.json                    | 2 +-
 code/builders/builder-vite/package.json            | 2 +-
 code/builders/builder-webpack5/package.json        | 2 +-
 code/core/package.json                             | 2 +-
 code/frameworks/angular/package.json               | 2 +-
 code/frameworks/ember/package.json                 | 2 +-
 code/frameworks/html-vite/package.json             | 2 +-
 code/frameworks/nextjs-vite/package.json           | 2 +-
 code/frameworks/nextjs/package.json                | 2 +-
 code/frameworks/preact-vite/package.json           | 2 +-
 code/frameworks/react-native-web-vite/package.json | 2 +-
 code/frameworks/react-vite/package.json            | 2 +-
 code/frameworks/react-webpack5/package.json        | 2 +-
 code/frameworks/server-webpack5/package.json       | 2 +-
 code/frameworks/svelte-vite/package.json           | 2 +-
 code/frameworks/sveltekit/package.json             | 2 +-
 code/frameworks/vue3-vite/package.json             | 2 +-
 code/frameworks/web-components-vite/package.json   | 2 +-
 code/lib/cli-sb/package.json                       | 2 +-
 code/lib/cli-storybook/package.json                | 2 +-
 code/lib/codemod/package.json                      | 2 +-
 code/lib/core-webpack/package.json                 | 2 +-
 code/lib/create-storybook/package.json             | 2 +-
 code/lib/csf-plugin/package.json                   | 2 +-
 code/lib/eslint-plugin/package.json                | 2 +-
 code/lib/react-dom-shim/package.json               | 2 +-
 code/presets/create-react-app/package.json         | 2 +-
 code/presets/react-webpack/package.json            | 2 +-
 code/presets/server-webpack/package.json           | 2 +-
 code/renderers/html/package.json                   | 2 +-
 code/renderers/preact/package.json                 | 2 +-
 code/renderers/react/package.json                  | 2 +-
 code/renderers/server/package.json                 | 2 +-
 code/renderers/svelte/package.json                 | 2 +-
 code/renderers/vue3/package.json                   | 2 +-
 code/renderers/web-components/package.json         | 2 +-
 40 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
index ae1ceecdb48d..d58288e7dd89 100644
--- a/code/addons/a11y/package.json
+++ b/code/addons/a11y/package.json
@@ -71,7 +71,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18",
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14",
   "storybook": {
     "displayName": "Accessibility",
     "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",
diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
index 11133ca50536..9657cc46e3cd 100644
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@@ -106,7 +106,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18",
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14",
   "storybook": {
     "displayName": "Docs",
     "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",
diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
index ee8641f23421..e7dce2a0851b 100644
--- a/code/addons/jest/package.json
+++ b/code/addons/jest/package.json
@@ -64,7 +64,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18",
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14",
   "storybook": {
     "displayName": "Jest",
     "icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",
diff --git a/code/addons/links/package.json b/code/addons/links/package.json
index d46f64974af3..65d5420b78ee 100644
--- a/code/addons/links/package.json
+++ b/code/addons/links/package.json
@@ -66,7 +66,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18",
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14",
   "storybook": {
     "displayName": "Links",
     "icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",
diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json
index e5e67215a83d..3eb589f27fbe 100644
--- a/code/addons/themes/package.json
+++ b/code/addons/themes/package.json
@@ -65,7 +65,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18",
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14",
   "storybook": {
     "displayName": "Themes",
     "unsupportedFrameworks": [
diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json
index 6c51b9a78a44..d56905e12090 100644
--- a/code/builders/builder-vite/package.json
+++ b/code/builders/builder-vite/package.json
@@ -61,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json
index 61de5f3bc73b..3e1b61608a9f 100644
--- a/code/builders/builder-webpack5/package.json
+++ b/code/builders/builder-webpack5/package.json
@@ -83,5 +83,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/core/package.json b/code/core/package.json
index ab3dc4568ac8..8ab50726fca1 100644
--- a/code/core/package.json
+++ b/code/core/package.json
@@ -366,5 +366,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
index b02c2adbef1a..8c4606973100 100644
--- a/code/frameworks/angular/package.json
+++ b/code/frameworks/angular/package.json
@@ -120,5 +120,5 @@
     "access": "public"
   },
   "builders": "builders.json",
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json
index edcc4d8f7539..5aab77997dd1 100644
--- a/code/frameworks/ember/package.json
+++ b/code/frameworks/ember/package.json
@@ -64,5 +64,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json
index 92ca29559f6c..131474182e26 100644
--- a/code/frameworks/html-vite/package.json
+++ b/code/frameworks/html-vite/package.json
@@ -58,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/frameworks/nextjs-vite/package.json b/code/frameworks/nextjs-vite/package.json
index 41201567d3c3..99e627600289 100644
--- a/code/frameworks/nextjs-vite/package.json
+++ b/code/frameworks/nextjs-vite/package.json
@@ -101,5 +101,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json
index 4b543b89c0a5..b93a93fd3413 100644
--- a/code/frameworks/nextjs/package.json
+++ b/code/frameworks/nextjs/package.json
@@ -139,5 +139,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json
index 1be1799ae753..44d8f5b62c14 100644
--- a/code/frameworks/preact-vite/package.json
+++ b/code/frameworks/preact-vite/package.json
@@ -61,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json
index 74349c086e50..330531ca8a69 100644
--- a/code/frameworks/react-native-web-vite/package.json
+++ b/code/frameworks/react-native-web-vite/package.json
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json
index 1fa3648c4ef0..1be385b20098 100644
--- a/code/frameworks/react-vite/package.json
+++ b/code/frameworks/react-vite/package.json
@@ -72,5 +72,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json
index d7108a0f6329..b6dca09181f9 100644
--- a/code/frameworks/react-webpack5/package.json
+++ b/code/frameworks/react-webpack5/package.json
@@ -66,5 +66,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json
index edeb96c6c7df..3414c3a06d04 100644
--- a/code/frameworks/server-webpack5/package.json
+++ b/code/frameworks/server-webpack5/package.json
@@ -59,5 +59,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json
index 536185d4e7cd..239312cff6d2 100644
--- a/code/frameworks/svelte-vite/package.json
+++ b/code/frameworks/svelte-vite/package.json
@@ -71,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json
index e2c4690a469a..12b1e441aa1c 100644
--- a/code/frameworks/sveltekit/package.json
+++ b/code/frameworks/sveltekit/package.json
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json
index 2ba76bccc37d..1fc667249f85 100644
--- a/code/frameworks/vue3-vite/package.json
+++ b/code/frameworks/vue3-vite/package.json
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json
index ccdb2503c876..2e5ec5983351 100644
--- a/code/frameworks/web-components-vite/package.json
+++ b/code/frameworks/web-components-vite/package.json
@@ -58,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json
index b57d45539053..e2091527266f 100644
--- a/code/lib/cli-sb/package.json
+++ b/code/lib/cli-sb/package.json
@@ -26,5 +26,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json
index 677eca14a753..df2cbed0af6b 100644
--- a/code/lib/cli-storybook/package.json
+++ b/code/lib/cli-storybook/package.json
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json
index 9d3841674f99..3e55dc13817f 100644
--- a/code/lib/codemod/package.json
+++ b/code/lib/codemod/package.json
@@ -62,5 +62,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json
index a87465f726c5..e9a694a8b58e 100644
--- a/code/lib/core-webpack/package.json
+++ b/code/lib/core-webpack/package.json
@@ -53,5 +53,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/lib/create-storybook/package.json b/code/lib/create-storybook/package.json
index 5f1eb073fc26..1a9debfe75cb 100644
--- a/code/lib/create-storybook/package.json
+++ b/code/lib/create-storybook/package.json
@@ -57,5 +57,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json
index a83013888f55..09a9cd3464e8 100644
--- a/code/lib/csf-plugin/package.json
+++ b/code/lib/csf-plugin/package.json
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/lib/eslint-plugin/package.json b/code/lib/eslint-plugin/package.json
index d36a3a49f290..59d30af2532b 100644
--- a/code/lib/eslint-plugin/package.json
+++ b/code/lib/eslint-plugin/package.json
@@ -68,5 +68,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json
index eb624726e35c..9db6f4055311 100644
--- a/code/lib/react-dom-shim/package.json
+++ b/code/lib/react-dom-shim/package.json
@@ -52,5 +52,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json
index f705e5728f13..d81c6dfc12db 100644
--- a/code/presets/create-react-app/package.json
+++ b/code/presets/create-react-app/package.json
@@ -53,5 +53,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json
index cce5a51ffeb1..3c8356f92fff 100644
--- a/code/presets/react-webpack/package.json
+++ b/code/presets/react-webpack/package.json
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json
index 6ab939b57540..35fce8bf0c95 100644
--- a/code/presets/server-webpack/package.json
+++ b/code/presets/server-webpack/package.json
@@ -56,5 +56,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json
index 751bc01d3760..d068a448948a 100644
--- a/code/renderers/html/package.json
+++ b/code/renderers/html/package.json
@@ -55,5 +55,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json
index 1325008d52db..726ee4f91fab 100644
--- a/code/renderers/preact/package.json
+++ b/code/renderers/preact/package.json
@@ -57,5 +57,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
index 6aec294b4a9f..d89ed9b9eb76 100644
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@@ -91,5 +91,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json
index bb79f199b326..2247b745c494 100644
--- a/code/renderers/server/package.json
+++ b/code/renderers/server/package.json
@@ -55,5 +55,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json
index 0397831ffe32..2b4344c89fd5 100644
--- a/code/renderers/svelte/package.json
+++ b/code/renderers/svelte/package.json
@@ -72,5 +72,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json
index e8c8ebcbe782..6681f193c79b 100644
--- a/code/renderers/vue3/package.json
+++ b/code/renderers/vue3/package.json
@@ -65,5 +65,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }
diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json
index b7e78e278e0e..241b69f26d77 100644
--- a/code/renderers/web-components/package.json
+++ b/code/renderers/web-components/package.json
@@ -68,5 +68,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae18"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }

From 082566775389fda48b65f69b51a065dd27c5dae3 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 23 Jul 2025 20:47:10 +0200
Subject: [PATCH 9/9] add comment about metafile location and nx

---
 scripts/build/utils/generate-bundle.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/scripts/build/utils/generate-bundle.ts b/scripts/build/utils/generate-bundle.ts
index 3159fcfec13c..8a08d5ce8008 100644
--- a/scripts/build/utils/generate-bundle.ts
+++ b/scripts/build/utils/generate-bundle.ts
@@ -34,6 +34,13 @@ const DIR_METAFILE_BASE = join(
 );
 export const DIR_CODE = join(import.meta.dirname, '..', '..', '..', 'code');
 
+/*
+ * This plugin writes the metafile to a file in the output directory.
+ * It is used to analyze the bundle size of the different entry points.
+ * The outputDir must be the package's directory, as that is the projectName in the NX config,
+ * and what will become part of the build output cache. If there is a mismatch,
+ * the metafiles won't be available whenever NX uses its cached results of the build step.
+ */
 function metafileWriterPlugin(entryType: EntryType, outputDir: string): esbuild.Plugin {
   return {
     name: 'metafile-writer',
@@ -56,7 +63,6 @@ function metafileWriterPlugin(entryType: EntryType, outputDir: string): esbuild.
 export async function generateBundle({
   cwd,
   entry,
-  name,
   isWatch,
 }: {
   cwd: string;