From dd0abaf87ce4783d87192c3de8b46d80f7c93efe Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Fri, 19 Jul 2024 15:16:00 +0200
Subject: [PATCH 01/23] webcontainers to run generated app on docs

---
 docs/next.config.mjs                          |  16 +++
 docs/package.json                             |   2 +
 docs/pages/toolpad/builder.tsx                | 126 ++++++++++++++++++
 docs/public/_headers                          |   5 +
 packages/create-toolpad-app/package.json      |   6 +
 packages/create-toolpad-app/src/api.ts        |   1 +
 .../create-toolpad-app/src/generateProject.ts |   4 +-
 packages/create-toolpad-app/tsup.config.ts    |   4 +-
 pnpm-lock.yaml                                |  11 ++
 9 files changed, 171 insertions(+), 4 deletions(-)
 create mode 100644 docs/pages/toolpad/builder.tsx
 create mode 100644 packages/create-toolpad-app/src/api.ts

diff --git a/docs/next.config.mjs b/docs/next.config.mjs
index 278d3f70fe7..04fda67e7fb 100644
--- a/docs/next.config.mjs
+++ b/docs/next.config.mjs
@@ -2,6 +2,7 @@
 import * as path from 'path';
 import * as url from 'url';
 import { createRequire } from 'module';
+import { headers } from 'next/headers.js';
 import { LANGUAGES, LANGUAGES_IGNORE_PAGES, LANGUAGES_IN_PROGRESS } from './config.js';
 
 const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url));
@@ -164,5 +165,20 @@ export default withDocsInfra({
             permanent: false,
           },
         ],
+        headers: async () => [
+          {
+            source: '/toolpad/builder',
+            headers: [
+              {
+                key: 'Cross-Origin-Embedder-Policy',
+                value: 'require-corp',
+              },
+              {
+                key: 'Cross-Origin-Opener-Policy',
+                value: 'same-origin',
+              },
+            ],
+          },
+        ],
       }),
 });
diff --git a/docs/package.json b/docs/package.json
index 612af60517b..c92f337db31 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -42,6 +42,7 @@
     "@trendmicro/react-interpolate": "0.5.5",
     "@types/lodash": "4.17.6",
     "@types/react-router-dom": "5.3.3",
+    "@webcontainer/api": "1.3.0-internal.1",
     "ast-types": "0.14.2",
     "autoprefixer": "10.4.19",
     "babel-plugin-module-resolver": "5.0.2",
@@ -53,6 +54,7 @@
     "clipboard-copy": "4.0.1",
     "clsx": "2.1.1",
     "core-js": "2.6.12",
+    "create-toolpad-app": "workspace:*",
     "cross-env": "7.0.3",
     "date-fns-jalali": "2.29.3-0",
     "dayjs": "1.11.11",
diff --git a/docs/pages/toolpad/builder.tsx b/docs/pages/toolpad/builder.tsx
new file mode 100644
index 00000000000..3ca5e9aa2f5
--- /dev/null
+++ b/docs/pages/toolpad/builder.tsx
@@ -0,0 +1,126 @@
+import * as React from 'react';
+import { WebContainer } from '@webcontainer/api';
+import { generateProject } from 'create-toolpad-app';
+import { Box, CircularProgress, CssBaseline, GlobalStyles } from '@mui/material';
+
+const files = {};
+
+function ensureFolder(folders: string[], containingFolder: Record<string, any>) {
+  if (folders.length <= 0) {
+    return containingFolder;
+  }
+  const [first, ...rest] = folders;
+  let folder = containingFolder[first];
+  if (!folder) {
+    folder = { directory: {} };
+    containingFolder[first] = folder;
+  }
+  return ensureFolder(rest, folder.directory);
+}
+
+for (const [name, { content }] of generateProject({ name: 'demo' })) {
+  const segments = name.split('/');
+  const folders = segments.slice(0, segments.length - 1);
+  const folder = ensureFolder(folders, files);
+  const file = segments[segments.length - 1];
+  folder[file] = { file: { contents: content } };
+}
+
+async function installDependencies(instance: WebContainer) {
+  // Install dependencies
+  const installProcess = await instance.spawn('npm', ['install']);
+  installProcess.output.pipeTo(
+    new WritableStream({
+      write(data) {
+        // eslint-disable-next-line no-console
+        console.log(data);
+      },
+    }),
+  );
+  // Wait for install command to exit
+  return installProcess.exit;
+}
+
+export default function Builder() {
+  const frameRef = React.useRef<HTMLIFrameElement>(null);
+  const webcontainerPromiseRef = React.useRef<Promise<WebContainer> | null>(null);
+
+  React.useEffect(() => {
+    if (!frameRef.current) {
+      throw new Error('Frame not found');
+    }
+
+    if (webcontainerPromiseRef.current) {
+      return;
+    }
+
+    const frame = frameRef.current;
+
+    const webcontainerPromise = webcontainerPromiseRef.current ?? WebContainer.boot();
+    webcontainerPromiseRef.current = webcontainerPromise;
+
+    webcontainerPromise.then(async (instance) => {
+      if (webcontainerPromiseRef.current !== webcontainerPromise) {
+        return;
+      }
+
+      await instance.mount(files);
+
+      const exitCode = await installDependencies(instance);
+      if (exitCode !== 0) {
+        throw new Error('Installation failed');
+      }
+
+      // Run `npm run dev` to start the next.js dev server
+      const devProcess = await instance.spawn('npm', ['run', 'dev']);
+      devProcess.output.pipeTo(
+        new WritableStream({
+          write(data) {
+            // eslint-disable-next-line no-console
+            console.log(data);
+          },
+        }),
+      );
+
+      // Wait for `server-ready` event
+      instance.on('server-ready', (port, url) => {
+        frame.src = url;
+      });
+    });
+
+    return () => {
+      // webcontainerPromise.then((instance) => instance.teardown());
+    };
+  }, []);
+
+  const [loading, setLoading] = React.useState(true);
+
+  return (
+    <Box sx={{ position: 'relative', width: '100%', height: '100%', padding: 2 }}>
+      <CssBaseline />
+      <GlobalStyles styles={{ 'html, body, #__next': { width: '100%', height: '100%' } }} />
+      {loading ? (
+        <Box
+          sx={{
+            position: 'absolute',
+            inset: '0 0 0 0',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <CircularProgress />
+        </Box>
+      ) : null}
+
+      <iframe
+        ref={frameRef}
+        title="Application"
+        style={{ display: 'block', width: '100%', height: '100%' }}
+        onLoad={() => {
+          setLoading(false);
+        }}
+      />
+    </Box>
+  );
+}
diff --git a/docs/public/_headers b/docs/public/_headers
index d4afc703021..08c8f1376ae 100644
--- a/docs/public/_headers
+++ b/docs/public/_headers
@@ -7,6 +7,11 @@
 /favicon.ico
   Content-Type: image/x-icon
 
+/toolpad/builder
+  # https://webcontainers.io/guides/configuring-headers
+  Cross-Origin-Embedder-Policy: require-corp
+  Cross-Origin-Opener-Policy: same-origin
+
 /*
   Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
   # Block usage in iframes.
diff --git a/packages/create-toolpad-app/package.json b/packages/create-toolpad-app/package.json
index 6e86e05b7cb..8444ac6dbfe 100644
--- a/packages/create-toolpad-app/package.json
+++ b/packages/create-toolpad-app/package.json
@@ -17,6 +17,12 @@
   "bin": {
     "create-toolpad-app": "./dist/index.js"
   },
+  "exports": {
+    ".": {
+      "import": "./dist/api.mjs",
+      "require": "./dist/api.js"
+    }
+  },
   "files": [
     "dist"
   ],
diff --git a/packages/create-toolpad-app/src/api.ts b/packages/create-toolpad-app/src/api.ts
new file mode 100644
index 00000000000..eb08babc6fd
--- /dev/null
+++ b/packages/create-toolpad-app/src/api.ts
@@ -0,0 +1 @@
+export { default as generateProject } from './generateProject';
diff --git a/packages/create-toolpad-app/src/generateProject.ts b/packages/create-toolpad-app/src/generateProject.ts
index a06fe9ac40d..cb072c9da57 100644
--- a/packages/create-toolpad-app/src/generateProject.ts
+++ b/packages/create-toolpad-app/src/generateProject.ts
@@ -430,8 +430,8 @@ export default function generateProject(
 
   // Define all files to be created up front
   return new Map([
-    ['app/api/auth/[...nextAuth]/route.ts', { content: '' }],
-    ['app/auth/[...path]/page.tsx', { content: '' }],
+    ['app/api/auth/[...nextAuth]/route.ts', { content: 'export {}' }],
+    ['app/auth/[...path]/page.tsx', { content: 'export {}' }],
     ['app/(dashboard)/page/page.tsx', { content: dashboardPageContent }],
     ['app/(dashboard)/layout.tsx', { content: dashboardLayoutContent }],
     ['app/layout.tsx', { content: rootLayoutContent }],
diff --git a/packages/create-toolpad-app/tsup.config.ts b/packages/create-toolpad-app/tsup.config.ts
index b44fc5db1dc..7912b1e5d20 100644
--- a/packages/create-toolpad-app/tsup.config.ts
+++ b/packages/create-toolpad-app/tsup.config.ts
@@ -1,11 +1,11 @@
 import { defineConfig } from 'tsup';
 
 export default defineConfig({
-  entry: ['./src/index.ts'],
+  entry: ['./src/index.ts', './src/api.ts'],
   silent: true,
   noExternal: ['chalk', 'execa', 'inquirer'],
   clean: true,
-  format: 'cjs',
+  format: ['cjs', 'esm'],
   async onSuccess() {
     // eslint-disable-next-line no-console
     console.log('cli: build successful');
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0c2fd4c53bd..de4a22d474c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -336,6 +336,9 @@ importers:
       '@types/react-router-dom':
         specifier: 5.3.3
         version: 5.3.3
+      '@webcontainer/api':
+        specifier: 1.3.0-internal.1
+        version: 1.3.0-internal.1
       ast-types:
         specifier: 0.14.2
         version: 0.14.2
@@ -369,6 +372,9 @@ importers:
       core-js:
         specifier: 2.6.12
         version: 2.6.12
+      create-toolpad-app:
+        specifier: workspace:*
+        version: link:../packages/create-toolpad-app
       cross-env:
         specifier: 7.0.3
         version: 7.0.3
@@ -4168,6 +4174,9 @@ packages:
   '@webassemblyjs/wast-printer@1.12.1':
     resolution: {integrity: sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==}
 
+  '@webcontainer/api@1.3.0-internal.1':
+    resolution: {integrity: sha512-XHveAaZgZItLWieict8xTteBbPLeAwCJLuc80Zq6Mmk0LEWTw8yYZep0dTKbet6bd9MPTQ1+vjPAsEtD0H1fOA==}
+
   '@webcontainer/env@1.1.1':
     resolution: {integrity: sha512-6aN99yL695Hi9SuIk1oC88l9o0gmxL1nGWWQ/kNy81HigJ0FoaoTXpytCj6ItzgyCEwA9kF1wixsTuv5cjsgng==}
 
@@ -13376,6 +13385,8 @@ snapshots:
       '@webassemblyjs/ast': 1.12.1
       '@xtuc/long': 4.2.2
 
+  '@webcontainer/api@1.3.0-internal.1': {}
+
   '@webcontainer/env@1.1.1': {}
 
   '@xtuc/ieee754@1.2.0': {}

From 57376cd6f811d29759c33914bcb700c4b5c316ac Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Fri, 19 Jul 2024 15:24:50 +0200
Subject: [PATCH 02/23] Update builder.tsx

---
 docs/pages/toolpad/builder.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/pages/toolpad/builder.tsx b/docs/pages/toolpad/builder.tsx
index 3ca5e9aa2f5..6f50ebf715a 100644
--- a/docs/pages/toolpad/builder.tsx
+++ b/docs/pages/toolpad/builder.tsx
@@ -84,10 +84,11 @@ export default function Builder() {
 
       // Wait for `server-ready` event
       instance.on('server-ready', (port, url) => {
-        frame.src = url;
+        frame.src = `${url}/page`;
       });
     });
 
+    // eslint-disable-next-line consistent-return
     return () => {
       // webcontainerPromise.then((instance) => instance.teardown());
     };

From 77a5abe5b328e9cac49b763a362c88c9ab61e6f7 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Fri, 19 Jul 2024 16:56:21 +0200
Subject: [PATCH 03/23] fixes

---
 docs/next.config.mjs           |  4 ++++
 docs/pages/toolpad/builder.tsx | 19 +++++++++----------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/docs/next.config.mjs b/docs/next.config.mjs
index 04fda67e7fb..8b83dfc3466 100644
--- a/docs/next.config.mjs
+++ b/docs/next.config.mjs
@@ -71,6 +71,10 @@ export default withDocsInfra({
           ),
           '@toolpad/utils': path.resolve(currentDirectory, '../packages/toolpad-utils/src'),
           '@toolpad/core': path.resolve(currentDirectory, '../packages/toolpad-core/src'),
+          'create-toolpad-app': path.resolve(
+            currentDirectory,
+            '../packages/create-toolpad-app/src/api.ts',
+          ),
         },
       },
       module: {
diff --git a/docs/pages/toolpad/builder.tsx b/docs/pages/toolpad/builder.tsx
index 6f50ebf715a..7fe452d7ee2 100644
--- a/docs/pages/toolpad/builder.tsx
+++ b/docs/pages/toolpad/builder.tsx
@@ -50,13 +50,17 @@ export default function Builder() {
       throw new Error('Frame not found');
     }
 
-    if (webcontainerPromiseRef.current) {
-      return;
-    }
-
     const frame = frameRef.current;
 
-    const webcontainerPromise = webcontainerPromiseRef.current ?? WebContainer.boot();
+    const webcontainerPromise = Promise.resolve(webcontainerPromiseRef.current).then(
+      async (maybeInstance) => {
+        if (maybeInstance) {
+          await maybeInstance.teardown();
+        }
+        return WebContainer.boot();
+      },
+    );
+
     webcontainerPromiseRef.current = webcontainerPromise;
 
     webcontainerPromise.then(async (instance) => {
@@ -87,11 +91,6 @@ export default function Builder() {
         frame.src = `${url}/page`;
       });
     });
-
-    // eslint-disable-next-line consistent-return
-    return () => {
-      // webcontainerPromise.then((instance) => instance.teardown());
-    };
   }, []);
 
   const [loading, setLoading] = React.useState(true);

From ff8fea642efb5d52dfc11a42e4bdc5d812502cb9 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Fri, 19 Jul 2024 17:21:48 +0200
Subject: [PATCH 04/23] WIP

---
 docs/pages/toolpad/builder.tsx                | 138 +++++++++++++-----
 .../create-toolpad-app/src/generateProject.ts |   9 +-
 2 files changed, 111 insertions(+), 36 deletions(-)

diff --git a/docs/pages/toolpad/builder.tsx b/docs/pages/toolpad/builder.tsx
index 7fe452d7ee2..5b5819d389d 100644
--- a/docs/pages/toolpad/builder.tsx
+++ b/docs/pages/toolpad/builder.tsx
@@ -1,9 +1,23 @@
 import * as React from 'react';
 import { WebContainer } from '@webcontainer/api';
 import { generateProject } from 'create-toolpad-app';
-import { Box, CircularProgress, CssBaseline, GlobalStyles } from '@mui/material';
-
-const files = {};
+import {
+  Box,
+  Button,
+  CircularProgress,
+  CssBaseline,
+  GlobalStyles,
+  TextField,
+  styled,
+} from '@mui/material';
+
+const AppFrame = styled('iframe')(({ theme }) => ({
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: theme.shape.borderRadius,
+  overflow: 'hidden',
+  width: '100%',
+  height: '100%',
+}));
 
 function ensureFolder(folders: string[], containingFolder: Record<string, any>) {
   if (folders.length <= 0) {
@@ -18,12 +32,17 @@ function ensureFolder(folders: string[], containingFolder: Record<string, any>)
   return ensureFolder(rest, folder.directory);
 }
 
-for (const [name, { content }] of generateProject({ name: 'demo' })) {
-  const segments = name.split('/');
-  const folders = segments.slice(0, segments.length - 1);
-  const folder = ensureFolder(folders, files);
-  const file = segments[segments.length - 1];
-  folder[file] = { file: { contents: content } };
+// TODO: generate types for create-toolpad-app API
+function createFiles(options: any) {
+  const files = {};
+  for (const [name, { content }] of generateProject(options)) {
+    const segments = name.split('/');
+    const folders = segments.slice(0, segments.length - 1);
+    const folder = ensureFolder(folders, files);
+    const file = segments[segments.length - 1];
+    folder[file] = { file: { contents: content } };
+  }
+  return files;
 }
 
 async function installDependencies(instance: WebContainer) {
@@ -45,6 +64,29 @@ export default function Builder() {
   const frameRef = React.useRef<HTMLIFrameElement>(null);
   const webcontainerPromiseRef = React.useRef<Promise<WebContainer> | null>(null);
 
+  const [optionsInput, setOptionsInput] = React.useState({
+    name: 'demo',
+    title: 'Toolpad',
+  });
+
+  const [optionsValue, setOptionsValue] = React.useState(optionsInput);
+
+  const handleNewOptions: React.Dispatch<React.SetStateAction<any>> = (newoptions) => {
+    setOptionsValue(typeof newoptions === 'function' ? newoptions(optionsValue) : newoptions);
+
+    Promise.resolve(webcontainerPromiseRef.current).then(async (instance) => {
+      if (instance) {
+        instance.mount(createFiles(newoptions));
+      }
+    });
+  };
+
+  const files = React.useMemo(() => createFiles(optionsValue), [optionsValue]);
+
+  // Stable vale for initial files, do not modify unless you want to reboot the web container
+  // e.g. to load a different runtime
+  const [bootFiles] = React.useState(files);
+
   React.useEffect(() => {
     if (!frameRef.current) {
       throw new Error('Frame not found');
@@ -68,7 +110,7 @@ export default function Builder() {
         return;
       }
 
-      await instance.mount(files);
+      await instance.mount(bootFiles);
 
       const exitCode = await installDependencies(instance);
       if (exitCode !== 0) {
@@ -91,36 +133,64 @@ export default function Builder() {
         frame.src = `${url}/page`;
       });
     });
-  }, []);
+  }, [bootFiles]);
 
   const [loading, setLoading] = React.useState(true);
 
   return (
-    <Box sx={{ position: 'relative', width: '100%', height: '100%', padding: 2 }}>
+    <React.Fragment>
       <CssBaseline />
       <GlobalStyles styles={{ 'html, body, #__next': { width: '100%', height: '100%' } }} />
-      {loading ? (
-        <Box
-          sx={{
-            position: 'absolute',
-            inset: '0 0 0 0',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
-          <CircularProgress />
-        </Box>
-      ) : null}
-
-      <iframe
-        ref={frameRef}
-        title="Application"
-        style={{ display: 'block', width: '100%', height: '100%' }}
-        onLoad={() => {
-          setLoading(false);
+      <Box
+        sx={{
+          width: '100%',
+          height: '100%',
+          padding: 2,
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'stretch',
         }}
-      />
-    </Box>
+      >
+        <Box sx={{ width: 250 }}>
+          <TextField
+            label="Project title"
+            value={optionsInput.title}
+            onChange={(event) =>
+              setOptionsInput((prev) => ({ ...prev, title: event.target.value }))
+            }
+          />
+          <Button
+            onClick={() => handleNewOptions(optionsInput)}
+            disabled={optionsInput === optionsValue}
+          >
+            Apply Changes
+          </Button>
+        </Box>
+        <Box sx={{ position: 'relative', flex: 1 }}>
+          {loading ? (
+            <Box
+              sx={{
+                position: 'absolute',
+                inset: '0 0 0 0',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <CircularProgress />
+            </Box>
+          ) : null}
+
+          <AppFrame
+            ref={frameRef}
+            title="Application"
+            style={{ display: 'block', width: '100%', height: '100%' }}
+            onLoad={() => {
+              setLoading(false);
+            }}
+          />
+        </Box>
+      </Box>
+    </React.Fragment>
   );
 }
diff --git a/packages/create-toolpad-app/src/generateProject.ts b/packages/create-toolpad-app/src/generateProject.ts
index 65a8e56b889..014ea1de682 100644
--- a/packages/create-toolpad-app/src/generateProject.ts
+++ b/packages/create-toolpad-app/src/generateProject.ts
@@ -3,6 +3,7 @@ import { PackageJson } from './packageType';
 
 interface GenerateProjectOptions {
   name: string;
+  title?: string;
 }
 
 export default function generateProject(
@@ -12,9 +13,13 @@ export default function generateProject(
   import { AppProvider } from "@toolpad/core/nextjs";
   import DashboardIcon from "@mui/icons-material/Dashboard";
   import { AppRouterCacheProvider } from "@mui/material-nextjs/v14-appRouter";
-  import type { Navigation } from "@toolpad/core";
+  import type { Navigation, Branding } from "@toolpad/core";
   import theme from '../theme';
 
+  const BRANDING: Branding = {
+    title: ${JSON.stringify(options.title ?? 'My Project')},
+  };
+
   const NAVIGATION: Navigation = [
     {
       kind: 'header',
@@ -32,7 +37,7 @@ export default function generateProject(
       <html lang="en" data-mui-color-scheme="light">
         <body>
           <AppRouterCacheProvider options={{ enableCssLayer: true }}>
-            <AppProvider theme={theme} navigation={NAVIGATION}>
+            <AppProvider theme={theme} branding={BRANDING} navigation={NAVIGATION}>
               {children}
             </AppProvider>
           </AppRouterCacheProvider>

From 385608ff7ded1717e752a96daef17021711777f1 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Fri, 19 Jul 2024 18:10:48 +0200
Subject: [PATCH 05/23] Update

---
 docs/pages/toolpad/builder.tsx                | 70 +++++++++++++------
 .../create-toolpad-app/src/generateProject.ts |  6 +-
 2 files changed, 52 insertions(+), 24 deletions(-)

diff --git a/docs/pages/toolpad/builder.tsx b/docs/pages/toolpad/builder.tsx
index 5b5819d389d..5c0bf768660 100644
--- a/docs/pages/toolpad/builder.tsx
+++ b/docs/pages/toolpad/builder.tsx
@@ -8,6 +8,7 @@ import {
   CssBaseline,
   GlobalStyles,
   TextField,
+  Typography,
   styled,
 } from '@mui/material';
 
@@ -32,9 +33,14 @@ function ensureFolder(folders: string[], containingFolder: Record<string, any>)
   return ensureFolder(rest, folder.directory);
 }
 
+type Folder = Record<
+  string,
+  { directory: Folder; file?: undefined } | { directory?: undefined; file: { contents: string } }
+>;
+
 // TODO: generate types for create-toolpad-app API
-function createFiles(options: any) {
-  const files = {};
+function createFiles(options: any): Folder {
+  const files: Folder = {};
   for (const [name, { content }] of generateProject(options)) {
     const segments = name.split('/');
     const folders = segments.slice(0, segments.length - 1);
@@ -47,7 +53,7 @@ function createFiles(options: any) {
 
 async function installDependencies(instance: WebContainer) {
   // Install dependencies
-  const installProcess = await instance.spawn('npm', ['install']);
+  const installProcess = await instance.spawn('npm', ['install', '--force']);
   installProcess.output.pipeTo(
     new WritableStream({
       write(data) {
@@ -63,6 +69,8 @@ async function installDependencies(instance: WebContainer) {
 export default function Builder() {
   const frameRef = React.useRef<HTMLIFrameElement>(null);
   const webcontainerPromiseRef = React.useRef<Promise<WebContainer> | null>(null);
+  const [loading, setLoading] = React.useState(true);
+  const [rebuilding, setRebuilding] = React.useState(false);
 
   const [optionsInput, setOptionsInput] = React.useState({
     name: 'demo',
@@ -76,16 +84,23 @@ export default function Builder() {
 
     Promise.resolve(webcontainerPromiseRef.current).then(async (instance) => {
       if (instance) {
-        instance.mount(createFiles(newoptions));
+        const newFiles = createFiles(newoptions);
+        const newLayoutContent = newFiles.app.directory?.['layout.tsx'].file?.contents;
+        if (!newLayoutContent) {
+          throw new Error('Layout file not found');
+        }
+        instance.fs.writeFile('/app/layout.tsx', newLayoutContent);
+        setRebuilding(true);
       }
     });
   };
 
   const files = React.useMemo(() => createFiles(optionsValue), [optionsValue]);
 
-  // Stable vale for initial files, do not modify unless you want to reboot the web container
-  // e.g. to load a different runtime
-  const [bootFiles] = React.useState(files);
+  const bootFilesref = React.useRef(files);
+  React.useEffect(() => {
+    bootFilesref.current = files;
+  }, [files]);
 
   React.useEffect(() => {
     if (!frameRef.current) {
@@ -94,14 +109,10 @@ export default function Builder() {
 
     const frame = frameRef.current;
 
-    const webcontainerPromise = Promise.resolve(webcontainerPromiseRef.current).then(
-      async (maybeInstance) => {
-        if (maybeInstance) {
-          await maybeInstance.teardown();
-        }
-        return WebContainer.boot();
-      },
+    const webcontainerPromise = Promise.resolve(webcontainerPromiseRef.current).then(async () =>
+      WebContainer.boot(),
     );
+    setLoading(true);
 
     webcontainerPromiseRef.current = webcontainerPromise;
 
@@ -110,7 +121,7 @@ export default function Builder() {
         return;
       }
 
-      await instance.mount(bootFiles);
+      await instance.mount(bootFilesref.current);
 
       const exitCode = await installDependencies(instance);
       if (exitCode !== 0) {
@@ -119,11 +130,18 @@ export default function Builder() {
 
       // Run `npm run dev` to start the next.js dev server
       const devProcess = await instance.spawn('npm', ['run', 'dev']);
+
       devProcess.output.pipeTo(
         new WritableStream({
           write(data) {
             // eslint-disable-next-line no-console
             console.log(data);
+            if (data.includes('Compiled /page')) {
+              setLoading(false);
+            }
+            if (rebuilding && data.includes('Compiled in')) {
+              setRebuilding(false);
+            }
           },
         }),
       );
@@ -133,9 +151,16 @@ export default function Builder() {
         frame.src = `${url}/page`;
       });
     });
-  }, [bootFiles]);
 
-  const [loading, setLoading] = React.useState(true);
+    return () => {
+      if (!webcontainerPromiseRef.current) {
+        return;
+      }
+      webcontainerPromiseRef.current.then((instance) => {
+        instance.teardown();
+      });
+    };
+  }, []);
 
   return (
     <React.Fragment>
@@ -149,10 +174,13 @@ export default function Builder() {
           display: 'flex',
           flexDirection: 'row',
           alignItems: 'stretch',
+          gap: 2,
         }}
       >
         <Box sx={{ width: 250 }}>
           <TextField
+            size="small"
+            fullWidth
             label="Project title"
             value={optionsInput.title}
             onChange={(event) =>
@@ -167,17 +195,20 @@ export default function Builder() {
           </Button>
         </Box>
         <Box sx={{ position: 'relative', flex: 1 }}>
-          {loading ? (
+          {loading || rebuilding ? (
             <Box
               sx={{
                 position: 'absolute',
                 inset: '0 0 0 0',
                 display: 'flex',
+                flexDirection: 'column',
+                gap: 2,
                 alignItems: 'center',
                 justifyContent: 'center',
               }}
             >
               <CircularProgress />
+              <Typography>TODO: show progress. (check the console)</Typography>
             </Box>
           ) : null}
 
@@ -185,9 +216,6 @@ export default function Builder() {
             ref={frameRef}
             title="Application"
             style={{ display: 'block', width: '100%', height: '100%' }}
-            onLoad={() => {
-              setLoading(false);
-            }}
           />
         </Box>
       </Box>
diff --git a/packages/create-toolpad-app/src/generateProject.ts b/packages/create-toolpad-app/src/generateProject.ts
index 014ea1de682..61edfdcb542 100644
--- a/packages/create-toolpad-app/src/generateProject.ts
+++ b/packages/create-toolpad-app/src/generateProject.ts
@@ -199,9 +199,9 @@ export default function generateProject(
       'react-dom': '^18',
       next: '^14',
       '@toolpad/core': 'latest',
-      '@mui/material': '^6',
-      '@mui/material-nextjs': '^5',
-      '@mui/icons-material': '^6',
+      '@mui/material': 'next',
+      '@mui/material-nextjs': 'next',
+      '@mui/icons-material': 'next',
       '@emotion/react': '^11',
       '@emotion/styled': '^11',
       '@emotion/cache': '^11',

From 9362d20e7ebed7ec60ba58a81a95ead11ccdeb7e Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Fri, 19 Jul 2024 18:19:20 +0200
Subject: [PATCH 06/23] Update builder.tsx

---
 docs/pages/toolpad/builder.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/pages/toolpad/builder.tsx b/docs/pages/toolpad/builder.tsx
index 5c0bf768660..0994971f519 100644
--- a/docs/pages/toolpad/builder.tsx
+++ b/docs/pages/toolpad/builder.tsx
@@ -71,6 +71,10 @@ export default function Builder() {
   const webcontainerPromiseRef = React.useRef<Promise<WebContainer> | null>(null);
   const [loading, setLoading] = React.useState(true);
   const [rebuilding, setRebuilding] = React.useState(false);
+  const isRebuildingRef = React.useRef(rebuilding);
+  React.useEffect(() => {
+    isRebuildingRef.current = rebuilding;
+  }, [rebuilding]);
 
   const [optionsInput, setOptionsInput] = React.useState({
     name: 'demo',
@@ -139,7 +143,7 @@ export default function Builder() {
             if (data.includes('Compiled /page')) {
               setLoading(false);
             }
-            if (rebuilding && data.includes('Compiled in')) {
+            if (isRebuildingRef.current && data.includes('Compiled in')) {
               setRebuilding(false);
             }
           },

From 84c395b79461f37c9eb83b8b42abab195e302cd5 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Fri, 19 Jul 2024 18:23:50 +0200
Subject: [PATCH 07/23] Update builder.tsx

---
 docs/pages/toolpad/builder.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/docs/pages/toolpad/builder.tsx b/docs/pages/toolpad/builder.tsx
index 0994971f519..a63c41f1673 100644
--- a/docs/pages/toolpad/builder.tsx
+++ b/docs/pages/toolpad/builder.tsx
@@ -7,6 +7,7 @@ import {
   CircularProgress,
   CssBaseline,
   GlobalStyles,
+  Stack,
   TextField,
   Typography,
   styled,
@@ -181,7 +182,7 @@ export default function Builder() {
           gap: 2,
         }}
       >
-        <Box sx={{ width: 250 }}>
+        <Stack sx={{ width: 250, gap: 1 }}>
           <TextField
             size="small"
             fullWidth
@@ -191,13 +192,22 @@ export default function Builder() {
               setOptionsInput((prev) => ({ ...prev, title: event.target.value }))
             }
           />
+          <Typography> {'// TODO: branding icon...'}</Typography>
+          <Typography> {'// TODO: theme colors...'}</Typography>
+          <Typography> {'// TODO: pages...'}</Typography>
           <Button
             onClick={() => handleNewOptions(optionsInput)}
             disabled={optionsInput === optionsValue}
           >
             Apply Changes
           </Button>
-        </Box>
+          <Button
+            // eslint-disable-next-line no-alert
+            onClick={() => window.alert('// TODO: package files and download')}
+          >
+            Download project
+          </Button>
+        </Stack>
         <Box sx={{ position: 'relative', flex: 1 }}>
           {loading || rebuilding ? (
             <Box
@@ -212,7 +222,7 @@ export default function Builder() {
               }}
             >
               <CircularProgress />
-              <Typography>TODO: show progress. (check the console)</Typography>
+              <Typography>{'// TODO: show progress. (check the console for now)'}</Typography>
             </Box>
           ) : null}
 

From 97258422753af9c0b8b19beb98a15a367edc3441 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Fri, 19 Jul 2024 18:26:38 +0200
Subject: [PATCH 08/23] ewr

---
 docs/next.config.mjs                      | 2 +-
 docs/pages/toolpad/{ => core}/builder.tsx | 0
 docs/public/_headers                      | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename docs/pages/toolpad/{ => core}/builder.tsx (100%)

diff --git a/docs/next.config.mjs b/docs/next.config.mjs
index 8b83dfc3466..c3eb3004a0a 100644
--- a/docs/next.config.mjs
+++ b/docs/next.config.mjs
@@ -171,7 +171,7 @@ export default withDocsInfra({
         ],
         headers: async () => [
           {
-            source: '/toolpad/builder',
+            source: '/toolpad/core/builder',
             headers: [
               {
                 key: 'Cross-Origin-Embedder-Policy',
diff --git a/docs/pages/toolpad/builder.tsx b/docs/pages/toolpad/core/builder.tsx
similarity index 100%
rename from docs/pages/toolpad/builder.tsx
rename to docs/pages/toolpad/core/builder.tsx
diff --git a/docs/public/_headers b/docs/public/_headers
index 08c8f1376ae..b5ee30a6f31 100644
--- a/docs/public/_headers
+++ b/docs/public/_headers
@@ -7,7 +7,7 @@
 /favicon.ico
   Content-Type: image/x-icon
 
-/toolpad/builder
+/toolpad/core/builder
   # https://webcontainers.io/guides/configuring-headers
   Cross-Origin-Embedder-Policy: require-corp
   Cross-Origin-Opener-Policy: same-origin

From e96540c1e135445c4876bed795d2dca938dc7c9c Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Fri, 19 Jul 2024 18:50:16 +0200
Subject: [PATCH 09/23] Update find.js

---
 docs/src/modules/utils/find.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/modules/utils/find.js b/docs/src/modules/utils/find.js
index 9a789f6e3ff..43c8e4c0b7a 100644
--- a/docs/src/modules/utils/find.js
+++ b/docs/src/modules/utils/find.js
@@ -87,7 +87,7 @@ function findPages(
     const pathname = itemPath
       .replace(new RegExp(`\\${path.sep}`, 'g'), '/')
       .replace(/^.*\/pages/, '')
-      .replace('.js', '')
+      .replace(/\.(j|t)sx?$/, '')
       .replace(/^\/index$/, '/') // Replace `index` by `/`.
       .replace(/\/index$/, '');
 

From 9e1ab05923193a5f3c28e83da9816e977bbdfbf2 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Fri, 19 Jul 2024 19:05:40 +0200
Subject: [PATCH 10/23] Update find.js

---
 docs/src/modules/utils/find.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/modules/utils/find.js b/docs/src/modules/utils/find.js
index 43c8e4c0b7a..6cbe95ee430 100644
--- a/docs/src/modules/utils/find.js
+++ b/docs/src/modules/utils/find.js
@@ -71,7 +71,7 @@ function findComponents(directory, components = []) {
   return components;
 }
 
-const jsRegex = /\.js$/;
+const jsRegex = /\.(j|t)sx?$/;
 const blackList = ['/.eslintrc', '/_document', '/_app'];
 
 // Returns the Next.js pages available in a nested format.

From 7b71658bdfecd73e6b2dbc019312b1e8f61ea4c9 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Fri, 19 Jul 2024 19:25:58 +0200
Subject: [PATCH 11/23] Update builder.tsx

---
 docs/pages/toolpad/core/builder.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/docs/pages/toolpad/core/builder.tsx b/docs/pages/toolpad/core/builder.tsx
index a63c41f1673..546be2a4a11 100644
--- a/docs/pages/toolpad/core/builder.tsx
+++ b/docs/pages/toolpad/core/builder.tsx
@@ -203,10 +203,16 @@ export default function Builder() {
           </Button>
           <Button
             // eslint-disable-next-line no-alert
-            onClick={() => window.alert('// TODO: package files and download')}
+            onClick={() => window.alert('// TODO: package files into zip and download')}
           >
             Download project
           </Button>
+          <Button
+            // eslint-disable-next-line no-alert
+            onClick={() => window.alert('// TODO: Show code files in code editor (read only)')}
+          >
+            Code view
+          </Button>
         </Stack>
         <Box sx={{ position: 'relative', flex: 1 }}>
           {loading || rebuilding ? (

From 30718729455b79ac2eb9b99452555b08a2bd2966 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Fri, 19 Jul 2024 19:46:29 +0200
Subject: [PATCH 12/23] Update builder.tsx

---
 docs/pages/toolpad/core/builder.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/pages/toolpad/core/builder.tsx b/docs/pages/toolpad/core/builder.tsx
index 546be2a4a11..043d4013b91 100644
--- a/docs/pages/toolpad/core/builder.tsx
+++ b/docs/pages/toolpad/core/builder.tsx
@@ -90,6 +90,8 @@ export default function Builder() {
     Promise.resolve(webcontainerPromiseRef.current).then(async (instance) => {
       if (instance) {
         const newFiles = createFiles(newoptions);
+
+        // TODO: generalize this for all files
         const newLayoutContent = newFiles.app.directory?.['layout.tsx'].file?.contents;
         if (!newLayoutContent) {
           throw new Error('Layout file not found');

From b927d4c717230aedf81c93d7099adbfc412121e8 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Sat, 20 Jul 2024 05:09:16 +0200
Subject: [PATCH 13/23] chrome

---
 docs/pages/toolpad/core/builder.tsx           | 271 +++---------------
 .../src/components/builder/CorePlayground.tsx | 245 ++++++++++++++++
 package.json                                  |   1 +
 packages/create-toolpad-app/tsconfig.json     |   4 +-
 packages/create-toolpad-app/tsup.config.ts    |   4 +-
 pnpm-lock.yaml                                | 217 +++++++++++++-
 tsconfig.json                                 |   1 +
 7 files changed, 499 insertions(+), 244 deletions(-)
 create mode 100644 docs/src/components/builder/CorePlayground.tsx

diff --git a/docs/pages/toolpad/core/builder.tsx b/docs/pages/toolpad/core/builder.tsx
index 043d4013b91..59c39af7bc2 100644
--- a/docs/pages/toolpad/core/builder.tsx
+++ b/docs/pages/toolpad/core/builder.tsx
@@ -1,246 +1,39 @@
 import * as React from 'react';
-import { WebContainer } from '@webcontainer/api';
-import { generateProject } from 'create-toolpad-app';
-import {
-  Box,
-  Button,
-  CircularProgress,
-  CssBaseline,
-  GlobalStyles,
-  Stack,
-  TextField,
-  Typography,
-  styled,
-} from '@mui/material';
-
-const AppFrame = styled('iframe')(({ theme }) => ({
-  border: `1px solid ${theme.palette.divider}`,
-  borderRadius: theme.shape.borderRadius,
-  overflow: 'hidden',
-  width: '100%',
-  height: '100%',
-}));
-
-function ensureFolder(folders: string[], containingFolder: Record<string, any>) {
-  if (folders.length <= 0) {
-    return containingFolder;
-  }
-  const [first, ...rest] = folders;
-  let folder = containingFolder[first];
-  if (!folder) {
-    folder = { directory: {} };
-    containingFolder[first] = folder;
-  }
-  return ensureFolder(rest, folder.directory);
-}
-
-type Folder = Record<
-  string,
-  { directory: Folder; file?: undefined } | { directory?: undefined; file: { contents: string } }
->;
-
-// TODO: generate types for create-toolpad-app API
-function createFiles(options: any): Folder {
-  const files: Folder = {};
-  for (const [name, { content }] of generateProject(options)) {
-    const segments = name.split('/');
-    const folders = segments.slice(0, segments.length - 1);
-    const folder = ensureFolder(folders, files);
-    const file = segments[segments.length - 1];
-    folder[file] = { file: { contents: content } };
-  }
-  return files;
-}
-
-async function installDependencies(instance: WebContainer) {
-  // Install dependencies
-  const installProcess = await instance.spawn('npm', ['install', '--force']);
-  installProcess.output.pipeTo(
-    new WritableStream({
-      write(data) {
-        // eslint-disable-next-line no-console
-        console.log(data);
-      },
-    }),
-  );
-  // Wait for install command to exit
-  return installProcess.exit;
-}
+import NoSsr from '@mui/material/NoSsr';
+import Head from 'docs/src/modules/components/Head';
+import CssBaseline from '@mui/material/CssBaseline';
+import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
+import AppHeader from 'docs/src/layouts/AppHeader';
+import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
+import GlobalStyles from '@mui/material/GlobalStyles';
+import { Box, styled } from '@mui/material';
+import CorePlayground from '../../../src/components/builder/CorePlayground';
+import SignUpToast from '../../../src/components/landing/SignUpToast';
+
+const Main = styled('main')({
+  flex: 1,
+});
 
 export default function Builder() {
-  const frameRef = React.useRef<HTMLIFrameElement>(null);
-  const webcontainerPromiseRef = React.useRef<Promise<WebContainer> | null>(null);
-  const [loading, setLoading] = React.useState(true);
-  const [rebuilding, setRebuilding] = React.useState(false);
-  const isRebuildingRef = React.useRef(rebuilding);
-  React.useEffect(() => {
-    isRebuildingRef.current = rebuilding;
-  }, [rebuilding]);
-
-  const [optionsInput, setOptionsInput] = React.useState({
-    name: 'demo',
-    title: 'Toolpad',
-  });
-
-  const [optionsValue, setOptionsValue] = React.useState(optionsInput);
-
-  const handleNewOptions: React.Dispatch<React.SetStateAction<any>> = (newoptions) => {
-    setOptionsValue(typeof newoptions === 'function' ? newoptions(optionsValue) : newoptions);
-
-    Promise.resolve(webcontainerPromiseRef.current).then(async (instance) => {
-      if (instance) {
-        const newFiles = createFiles(newoptions);
-
-        // TODO: generalize this for all files
-        const newLayoutContent = newFiles.app.directory?.['layout.tsx'].file?.contents;
-        if (!newLayoutContent) {
-          throw new Error('Layout file not found');
-        }
-        instance.fs.writeFile('/app/layout.tsx', newLayoutContent);
-        setRebuilding(true);
-      }
-    });
-  };
-
-  const files = React.useMemo(() => createFiles(optionsValue), [optionsValue]);
-
-  const bootFilesref = React.useRef(files);
-  React.useEffect(() => {
-    bootFilesref.current = files;
-  }, [files]);
-
-  React.useEffect(() => {
-    if (!frameRef.current) {
-      throw new Error('Frame not found');
-    }
-
-    const frame = frameRef.current;
-
-    const webcontainerPromise = Promise.resolve(webcontainerPromiseRef.current).then(async () =>
-      WebContainer.boot(),
-    );
-    setLoading(true);
-
-    webcontainerPromiseRef.current = webcontainerPromise;
-
-    webcontainerPromise.then(async (instance) => {
-      if (webcontainerPromiseRef.current !== webcontainerPromise) {
-        return;
-      }
-
-      await instance.mount(bootFilesref.current);
-
-      const exitCode = await installDependencies(instance);
-      if (exitCode !== 0) {
-        throw new Error('Installation failed');
-      }
-
-      // Run `npm run dev` to start the next.js dev server
-      const devProcess = await instance.spawn('npm', ['run', 'dev']);
-
-      devProcess.output.pipeTo(
-        new WritableStream({
-          write(data) {
-            // eslint-disable-next-line no-console
-            console.log(data);
-            if (data.includes('Compiled /page')) {
-              setLoading(false);
-            }
-            if (isRebuildingRef.current && data.includes('Compiled in')) {
-              setRebuilding(false);
-            }
-          },
-        }),
-      );
-
-      // Wait for `server-ready` event
-      instance.on('server-ready', (port, url) => {
-        frame.src = `${url}/page`;
-      });
-    });
-
-    return () => {
-      if (!webcontainerPromiseRef.current) {
-        return;
-      }
-      webcontainerPromiseRef.current.then((instance) => {
-        instance.teardown();
-      });
-    };
-  }, []);
-
   return (
-    <React.Fragment>
-      <CssBaseline />
-      <GlobalStyles styles={{ 'html, body, #__next': { width: '100%', height: '100%' } }} />
-      <Box
-        sx={{
-          width: '100%',
-          height: '100%',
-          padding: 2,
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'stretch',
-          gap: 2,
-        }}
-      >
-        <Stack sx={{ width: 250, gap: 1 }}>
-          <TextField
-            size="small"
-            fullWidth
-            label="Project title"
-            value={optionsInput.title}
-            onChange={(event) =>
-              setOptionsInput((prev) => ({ ...prev, title: event.target.value }))
-            }
-          />
-          <Typography> {'// TODO: branding icon...'}</Typography>
-          <Typography> {'// TODO: theme colors...'}</Typography>
-          <Typography> {'// TODO: pages...'}</Typography>
-          <Button
-            onClick={() => handleNewOptions(optionsInput)}
-            disabled={optionsInput === optionsValue}
-          >
-            Apply Changes
-          </Button>
-          <Button
-            // eslint-disable-next-line no-alert
-            onClick={() => window.alert('// TODO: package files into zip and download')}
-          >
-            Download project
-          </Button>
-          <Button
-            // eslint-disable-next-line no-alert
-            onClick={() => window.alert('// TODO: Show code files in code editor (read only)')}
-          >
-            Code view
-          </Button>
-        </Stack>
-        <Box sx={{ position: 'relative', flex: 1 }}>
-          {loading || rebuilding ? (
-            <Box
-              sx={{
-                position: 'absolute',
-                inset: '0 0 0 0',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: 2,
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-            >
-              <CircularProgress />
-              <Typography>{'// TODO: show progress. (check the console for now)'}</Typography>
-            </Box>
-          ) : null}
-
-          <AppFrame
-            ref={frameRef}
-            title="Application"
-            style={{ display: 'block', width: '100%', height: '100%' }}
-          />
-        </Box>
+    <BrandingCssVarsProvider>
+      <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+        <Head
+          title="Toolpad: Low-code admin builder"
+          description="Build apps with Material UI components, connect to data sources, APIs and build your internal tools 10x faster. Open-source and powered by MUI."
+          card="/static/toolpad/marketing/toolpad-og.jpg"
+        />
+        <NoSsr>
+          <SignUpToast />
+        </NoSsr>
+        <CssBaseline />
+        <GlobalStyles styles={{ 'html, body, #__next': { width: '100%', height: '100%' } }} />
+        <AppHeaderBanner />
+        <AppHeader gitHubRepository="https://github.com/mui/mui-toolpad" />
+        <Main id="main-content">
+          <CorePlayground />
+        </Main>
       </Box>
-    </React.Fragment>
+    </BrandingCssVarsProvider>
   );
 }
diff --git a/docs/src/components/builder/CorePlayground.tsx b/docs/src/components/builder/CorePlayground.tsx
new file mode 100644
index 00000000000..ed289ae8378
--- /dev/null
+++ b/docs/src/components/builder/CorePlayground.tsx
@@ -0,0 +1,245 @@
+import * as React from 'react';
+import { WebContainer } from '@webcontainer/api';
+import { generateProject } from 'create-toolpad-app';
+import {
+  Box,
+  Button,
+  CircularProgress,
+  CssBaseline,
+  Stack,
+  TextField,
+  Typography,
+  styled,
+} from '@mui/material';
+
+const AppFrame = styled('iframe')(({ theme }) => ({
+  border: `1px solid ${theme.vars.palette.divider}`,
+  borderRadius: theme.shape.borderRadius,
+  overflow: 'hidden',
+
+  width: '100%',
+  height: '100%',
+}));
+
+function ensureFolder(folders: string[], containingFolder: Record<string, any>) {
+  if (folders.length <= 0) {
+    return containingFolder;
+  }
+  const [first, ...rest] = folders;
+  let folder = containingFolder[first];
+  if (!folder) {
+    folder = { directory: {} };
+    containingFolder[first] = folder;
+  }
+  return ensureFolder(rest, folder.directory);
+}
+
+type Folder = Record<
+  string,
+  { directory: Folder; file?: undefined } | { directory?: undefined; file: { contents: string } }
+>;
+
+// TODO: generate types for create-toolpad-app API
+function createFiles(options: any): Folder {
+  const files: Folder = {};
+  for (const [name, { content }] of generateProject(options)) {
+    const segments = name.split('/');
+    const folders = segments.slice(0, segments.length - 1);
+    const folder = ensureFolder(folders, files);
+    const file = segments[segments.length - 1];
+    folder[file] = { file: { contents: content } };
+  }
+  return files;
+}
+
+async function installDependencies(instance: WebContainer) {
+  // Install dependencies
+  const installProcess = await instance.spawn('npm', ['install', '--force']);
+  installProcess.output.pipeTo(
+    new WritableStream({
+      write(data) {
+        // eslint-disable-next-line no-console
+        console.log(data);
+      },
+    }),
+  );
+  // Wait for install command to exit
+  return installProcess.exit;
+}
+
+export default function CorePlayground() {
+  const frameRef = React.useRef<HTMLIFrameElement>(null);
+  const webcontainerPromiseRef = React.useRef<Promise<WebContainer> | null>(null);
+  const [loading, setLoading] = React.useState(true);
+  const [rebuilding, setRebuilding] = React.useState(false);
+  const isRebuildingRef = React.useRef(rebuilding);
+  React.useEffect(() => {
+    isRebuildingRef.current = rebuilding;
+  }, [rebuilding]);
+
+  const [optionsInput, setOptionsInput] = React.useState({
+    name: 'demo',
+    title: 'Toolpad',
+  });
+
+  const [optionsValue, setOptionsValue] = React.useState(optionsInput);
+
+  const handleNewOptions: React.Dispatch<React.SetStateAction<any>> = (newoptions) => {
+    setOptionsValue(typeof newoptions === 'function' ? newoptions(optionsValue) : newoptions);
+
+    Promise.resolve(webcontainerPromiseRef.current).then(async (instance) => {
+      if (instance) {
+        const newFiles = createFiles(newoptions);
+
+        // TODO: generalize this for all files
+        const newLayoutContent = newFiles.app.directory?.['layout.tsx'].file?.contents;
+        if (!newLayoutContent) {
+          throw new Error('Layout file not found');
+        }
+        instance.fs.writeFile('/app/layout.tsx', newLayoutContent);
+        setRebuilding(true);
+      }
+    });
+  };
+
+  const files = React.useMemo(() => createFiles(optionsValue), [optionsValue]);
+
+  const bootFilesref = React.useRef(files);
+  React.useEffect(() => {
+    bootFilesref.current = files;
+  }, [files]);
+
+  React.useEffect(() => {
+    if (!frameRef.current) {
+      throw new Error('Frame not found');
+    }
+
+    const frame = frameRef.current;
+
+    const webcontainerPromise = Promise.resolve(webcontainerPromiseRef.current).then(async () =>
+      WebContainer.boot(),
+    );
+    setLoading(true);
+
+    webcontainerPromiseRef.current = webcontainerPromise;
+
+    webcontainerPromise.then(async (instance) => {
+      if (webcontainerPromiseRef.current !== webcontainerPromise) {
+        return;
+      }
+
+      await instance.mount(bootFilesref.current);
+
+      const exitCode = await installDependencies(instance);
+      if (exitCode !== 0) {
+        throw new Error('Installation failed');
+      }
+
+      // Run `npm run dev` to start the next.js dev server
+      const devProcess = await instance.spawn('npm', ['run', 'dev']);
+
+      devProcess.output.pipeTo(
+        new WritableStream({
+          write(data) {
+            // eslint-disable-next-line no-console
+            console.log(data);
+            if (data.includes('Compiled /page')) {
+              setLoading(false);
+            }
+            if (isRebuildingRef.current && data.includes('Compiled in')) {
+              setRebuilding(false);
+            }
+          },
+        }),
+      );
+
+      // Wait for `server-ready` event
+      instance.on('server-ready', (port, url) => {
+        frame.src = `${url}/page`;
+      });
+    });
+
+    return () => {
+      if (!webcontainerPromiseRef.current) {
+        return;
+      }
+      webcontainerPromiseRef.current.then((instance) => {
+        instance.teardown();
+      });
+    };
+  }, []);
+
+  return (
+    <React.Fragment>
+      <CssBaseline />
+      <Box
+        sx={{
+          width: '100%',
+          height: '100%',
+          padding: 2,
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'stretch',
+          gap: 2,
+        }}
+      >
+        <Stack sx={{ width: 250, gap: 1 }}>
+          <TextField
+            size="small"
+            fullWidth
+            label="Project title"
+            value={optionsInput.title}
+            onChange={(event) =>
+              setOptionsInput((prev) => ({ ...prev, title: event.target.value }))
+            }
+          />
+          <Typography> {'// TODO: branding icon...'}</Typography>
+          <Typography> {'// TODO: theme colors...'}</Typography>
+          <Typography> {'// TODO: pages...'}</Typography>
+          <Button
+            onClick={() => handleNewOptions(optionsInput)}
+            disabled={optionsInput === optionsValue}
+          >
+            Apply Changes
+          </Button>
+          <Button
+            // eslint-disable-next-line no-alert
+            onClick={() => window.alert('// TODO: package files into zip and download')}
+          >
+            Download project
+          </Button>
+          <Button
+            // eslint-disable-next-line no-alert
+            onClick={() => window.alert('// TODO: Show code files in code editor (read only)')}
+          >
+            Code view
+          </Button>
+        </Stack>
+        <Box sx={{ position: 'relative', flex: 1 }}>
+          {loading || rebuilding ? (
+            <Box
+              sx={{
+                position: 'absolute',
+                inset: '0 0 0 0',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 2,
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <CircularProgress />
+              <Typography>{'// TODO: show progress. (check the console for now)'}</Typography>
+            </Box>
+          ) : null}
+
+          <AppFrame
+            ref={frameRef}
+            title="Application"
+            style={{ display: 'block', width: '100%', height: '100%' }}
+          />
+        </Box>
+      </Box>
+    </React.Fragment>
+  );
+}
diff --git a/package.json b/package.json
index 89d90ef182b..6168b399605 100644
--- a/package.json
+++ b/package.json
@@ -111,6 +111,7 @@
     "vitest-fail-on-console": "0.7.0"
   },
   "dependencies": {
+    "@microsoft/api-extractor": "^7.47.2",
     "@types/lodash": "4.17.6",
     "@vitest/browser": "beta",
     "archiver": "7.0.1",
diff --git a/packages/create-toolpad-app/tsconfig.json b/packages/create-toolpad-app/tsconfig.json
index d9174a843c2..15061f5d616 100644
--- a/packages/create-toolpad-app/tsconfig.json
+++ b/packages/create-toolpad-app/tsconfig.json
@@ -12,9 +12,9 @@
     "esModuleInterop": true,
     "skipLibCheck": true,
     "noEmit": false,
-    "outDir": "./dist",
     "pretty": true,
-    "rootDir": "src",
+    "rootDir": "./src",
+    "outDir": "./dist",
     "preserveWatchOutput": true,
     "types": ["node"]
   },
diff --git a/packages/create-toolpad-app/tsup.config.ts b/packages/create-toolpad-app/tsup.config.ts
index 7912b1e5d20..44700e597f7 100644
--- a/packages/create-toolpad-app/tsup.config.ts
+++ b/packages/create-toolpad-app/tsup.config.ts
@@ -8,7 +8,9 @@ export default defineConfig({
   format: ['cjs', 'esm'],
   async onSuccess() {
     // eslint-disable-next-line no-console
-    console.log('cli: build successful');
+    console.log('create-toolpad-app: build successful');
   },
+  experimentalDts: true,
+  tsconfig: './tsconfig.json',
   publicDir: './public',
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index aa9c80fd6cd..63100412d2c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
 
   .:
     dependencies:
+      '@microsoft/api-extractor':
+        specifier: ^7.47.2
+        version: 7.47.2(@types/node@20.14.10)
       '@types/lodash':
         specifier: 4.17.6
         version: 4.17.6
@@ -43,7 +46,7 @@ importers:
         version: 7.6.2
       tsup:
         specifier: 8.1.0
-        version: 8.1.0(postcss@8.4.39)(typescript@5.5.3)
+        version: 8.1.0(@microsoft/api-extractor@7.47.2(@types/node@20.14.10))(postcss@8.4.39)(typescript@5.5.3)
       tsx:
         specifier: 4.16.2
         version: 4.16.2
@@ -2556,6 +2559,19 @@ packages:
     resolution: {integrity: sha512-z7CjDSWFKS6cqydxP2XDrnmp1MYavSk2sU70ku1uo/38SZvFeUlEAkV6evxc2QJOqWQFsGKOO26zX2DBnQ45YQ==}
     engines: {node: '>=18.0.0'}
 
+  '@microsoft/api-extractor-model@7.29.3':
+    resolution: {integrity: sha512-kEWjLr2ygL3ku9EGyjeTnL2S5IxyH9NaF1k1UoI0Nzwr4xEJBSWCVsWuF2+0lPUrRPA6mTY95fR264SJ5ETKQA==}
+
+  '@microsoft/api-extractor@7.47.2':
+    resolution: {integrity: sha512-YWE2HGrSTZaPPSr7xiNizSuViZpC7Jsa7+DwRW5rYVgrMXNbfX/PpBOoSkl5uaz9I2sv2JKLJ75kVNt64BvS3g==}
+    hasBin: true
+
+  '@microsoft/tsdoc-config@0.17.0':
+    resolution: {integrity: sha512-v/EYRXnCAIHxOHW+Plb6OWuUoMotxTN0GLatnpOb1xq0KuTNw/WI3pamJx/UbsoJP5k9MCw1QxvvhPcF9pH3Zg==}
+
+  '@microsoft/tsdoc@0.15.0':
+    resolution: {integrity: sha512-HZpPoABogPvjeJOdzCOSJsXeL/SMCBgBZMVC3X3d7YYp2gf31MfxhUoYUNwf1ERPJOnQc0wkFn9trqI6ZEdZuA==}
+
   '@mswjs/cookies@1.1.1':
     resolution: {integrity: sha512-W68qOHEjx1iD+4VjQudlx26CPIoxmIAtK4ZCexU0/UJBG6jYhcuyzKJx+Iw8uhBIGd9eba64XgWVgo20it1qwA==}
     engines: {node: '>=18'}
@@ -3518,6 +3534,28 @@ packages:
   '@rushstack/eslint-patch@1.10.3':
     resolution: {integrity: sha512-qC/xYId4NMebE6w/V33Fh9gWxLgURiNYgVNObbJl2LZv0GUUItCcCqC5axQSwRaAgaxl2mELq1rMzlswaQ0Zxg==}
 
+  '@rushstack/node-core-library@5.5.0':
+    resolution: {integrity: sha512-Cl3MYQ74Je5Y/EngMxcA3SpHjGZ/022nKbAO1aycGfQ+7eKyNCBu0oywj5B1f367GCzuHBgy+3BlVLKysHkXZw==}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@rushstack/rig-package@0.5.2':
+    resolution: {integrity: sha512-mUDecIJeH3yYGZs2a48k+pbhM6JYwWlgjs2Ca5f2n1G2/kgdgP9D/07oglEGf6mRyXEnazhEENeYTSNDRCwdqA==}
+
+  '@rushstack/terminal@0.13.2':
+    resolution: {integrity: sha512-t8i0PsGvBHmFBY8pryO3badqFlxQsm2rw3KYrzjcmVkG/WGklKg1qVkr9beAS1Oe8XWDRgj6SkoHkpNjs7aaNw==}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@rushstack/ts-command-line@4.22.2':
+    resolution: {integrity: sha512-xkvrGd6D9dPlI3I401Thc640WNsEPB1sGEmy12a2VJaPQPwhE6Ik0gEVPZJ/2G1w213eaCAdxUY1xpiTulsmpA==}
+
   '@sec-ant/readable-stream@0.4.1':
     resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
 
@@ -3684,6 +3722,9 @@ packages:
   '@types/archiver@6.0.2':
     resolution: {integrity: sha512-KmROQqbQzKGuaAbmK+ZcytkJ51+YqDa7NmbXjmtC5YBLSyQYo21YaUnQ3HbaPFKL1ooo6RQ6OPYPIDyxfpDDXw==}
 
+  '@types/argparse@1.0.38':
+    resolution: {integrity: sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==}
+
   '@types/aria-query@5.0.4':
     resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
 
@@ -4278,6 +4319,22 @@ packages:
     resolution: {integrity: sha512-0poP0T7el6Vq3rstR8Mn4V/IQrpBLO6POkUSrN7RhyY+GF/InCFShQzsQ39T25gkHhLgSLByyAz+Kjb+c2L98w==}
     engines: {node: '>=12'}
 
+  ajv-draft-04@1.0.0:
+    resolution: {integrity: sha512-mv00Te6nmYbRp5DCwclxtt7yV/joXJPGS7nM+97GdxvuttCOfgI3K4U25zboyeX0O+myI8ERluxQe5wljMmVIw==}
+    peerDependencies:
+      ajv: ^8.5.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+
+  ajv-formats@3.0.1:
+    resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
+    peerDependencies:
+      ajv: ^8.0.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+
   ajv-keywords@3.5.2:
     resolution: {integrity: sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==}
     peerDependencies:
@@ -4286,6 +4343,12 @@ packages:
   ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
 
+  ajv@8.12.0:
+    resolution: {integrity: sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==}
+
+  ajv@8.13.0:
+    resolution: {integrity: sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==}
+
   ajv@8.16.0:
     resolution: {integrity: sha512-F0twR8U1ZU67JIEtekUcLkXkoO5mMMmgGD8sK/xUFzJ805jxHQl92hImFAqqXMyMYjSPOyUPAwHYhB72g5sTXw==}
 
@@ -5943,6 +6006,10 @@ packages:
     resolution: {integrity: sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==}
     engines: {node: '>=14.14'}
 
+  fs-extra@7.0.1:
+    resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
+    engines: {node: '>=6 <7 || >=8'}
+
   fs-extra@9.1.0:
     resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==}
     engines: {node: '>=10'}
@@ -6340,6 +6407,10 @@ packages:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
 
+  import-lazy@4.0.0:
+    resolution: {integrity: sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==}
+    engines: {node: '>=8'}
+
   import-local@3.1.0:
     resolution: {integrity: sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==}
     engines: {node: '>=8'}
@@ -6713,6 +6784,9 @@ packages:
     resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
     engines: {node: '>= 10.13.0'}
 
+  jju@1.4.0:
+    resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
+
   jose@5.6.2:
     resolution: {integrity: sha512-F1t1/WZJ4JdmCE/XoMYw1dPOW5g8JF0xGm6Ox2fwaCAPlCzt+4Bh0EWP59iQuZNHHauDkCdjx+kCZSh5z/PGow==}
 
@@ -6804,6 +6878,9 @@ packages:
   jsonc-parser@3.2.1:
     resolution: {integrity: sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==}
 
+  jsonfile@4.0.0:
+    resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
+
   jsonfile@6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
 
@@ -8694,6 +8771,11 @@ packages:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
 
+  semver@7.5.4:
+    resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   semver@7.6.2:
     resolution: {integrity: sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==}
     engines: {node: '>=10'}
@@ -8918,6 +9000,10 @@ packages:
   strict-event-emitter@0.5.1:
     resolution: {integrity: sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==}
 
+  string-argv@0.3.2:
+    resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
+    engines: {node: '>=0.6.19'}
+
   string-at@1.1.0:
     resolution: {integrity: sha512-jCpPowWKBn0NFdvtmK2qxK40Ol4jPcgCt8qYnKpPx6B5eDwHMDhRvq9MCsDEgsOTNtbXY6beAMHMRT2qPJXllA==}
     engines: {node: '>= 0.4'}
@@ -9399,6 +9485,11 @@ packages:
     engines: {node: '>=4.2.0'}
     hasBin: true
 
+  typescript@5.4.2:
+    resolution: {integrity: sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
   typescript@5.5.3:
     resolution: {integrity: sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==}
     engines: {node: '>=14.17'}
@@ -9464,6 +9555,10 @@ packages:
   universal-user-agent@6.0.1:
     resolution: {integrity: sha512-yCzhz6FN2wU1NiiQRogkTQszlQSlpWaw8SvVegAc+bDxbzHgh1vX8uIe8OYyMH6DwH+sdTJsgMl36+mSMdRJIQ==}
 
+  universalify@0.1.2:
+    resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
+    engines: {node: '>= 4.0.0'}
+
   universalify@0.2.0:
     resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
     engines: {node: '>= 4.0.0'}
@@ -11458,6 +11553,41 @@ snapshots:
       - supports-color
       - typescript
 
+  '@microsoft/api-extractor-model@7.29.3(@types/node@20.14.10)':
+    dependencies:
+      '@microsoft/tsdoc': 0.15.0
+      '@microsoft/tsdoc-config': 0.17.0
+      '@rushstack/node-core-library': 5.5.0(@types/node@20.14.10)
+    transitivePeerDependencies:
+      - '@types/node'
+
+  '@microsoft/api-extractor@7.47.2(@types/node@20.14.10)':
+    dependencies:
+      '@microsoft/api-extractor-model': 7.29.3(@types/node@20.14.10)
+      '@microsoft/tsdoc': 0.15.0
+      '@microsoft/tsdoc-config': 0.17.0
+      '@rushstack/node-core-library': 5.5.0(@types/node@20.14.10)
+      '@rushstack/rig-package': 0.5.2
+      '@rushstack/terminal': 0.13.2(@types/node@20.14.10)
+      '@rushstack/ts-command-line': 4.22.2(@types/node@20.14.10)
+      lodash: 4.17.21
+      minimatch: 3.0.5
+      resolve: 1.22.8
+      semver: 7.5.4
+      source-map: 0.6.1
+      typescript: 5.4.2
+    transitivePeerDependencies:
+      - '@types/node'
+
+  '@microsoft/tsdoc-config@0.17.0':
+    dependencies:
+      '@microsoft/tsdoc': 0.15.0
+      ajv: 8.12.0
+      jju: 1.4.0
+      resolve: 1.22.8
+
+  '@microsoft/tsdoc@0.15.0': {}
+
   '@mswjs/cookies@1.1.1': {}
 
   '@mswjs/interceptors@0.29.1':
@@ -12548,6 +12678,40 @@ snapshots:
 
   '@rushstack/eslint-patch@1.10.3': {}
 
+  '@rushstack/node-core-library@5.5.0(@types/node@20.14.10)':
+    dependencies:
+      ajv: 8.13.0
+      ajv-draft-04: 1.0.0(ajv@8.13.0)
+      ajv-formats: 3.0.1(ajv@8.13.0)
+      fs-extra: 7.0.1
+      import-lazy: 4.0.0
+      jju: 1.4.0
+      resolve: 1.22.8
+      semver: 7.5.4
+    optionalDependencies:
+      '@types/node': 20.14.10
+
+  '@rushstack/rig-package@0.5.2':
+    dependencies:
+      resolve: 1.22.8
+      strip-json-comments: 3.1.1
+
+  '@rushstack/terminal@0.13.2(@types/node@20.14.10)':
+    dependencies:
+      '@rushstack/node-core-library': 5.5.0(@types/node@20.14.10)
+      supports-color: 8.1.1
+    optionalDependencies:
+      '@types/node': 20.14.10
+
+  '@rushstack/ts-command-line@4.22.2(@types/node@20.14.10)':
+    dependencies:
+      '@rushstack/terminal': 0.13.2(@types/node@20.14.10)
+      '@types/argparse': 1.0.38
+      argparse: 1.0.10
+      string-argv: 0.3.2
+    transitivePeerDependencies:
+      - '@types/node'
+
   '@sec-ant/readable-stream@0.4.1': {}
 
   '@sigstore/bundle@2.3.2':
@@ -12759,6 +12923,8 @@ snapshots:
     dependencies:
       '@types/readdir-glob': 1.1.5
 
+  '@types/argparse@1.0.38': {}
+
   '@types/aria-query@5.0.4': {}
 
   '@types/babel__code-frame@7.0.6': {}
@@ -13517,6 +13683,14 @@ snapshots:
       clean-stack: 4.2.0
       indent-string: 5.0.0
 
+  ajv-draft-04@1.0.0(ajv@8.13.0):
+    optionalDependencies:
+      ajv: 8.13.0
+
+  ajv-formats@3.0.1(ajv@8.13.0):
+    optionalDependencies:
+      ajv: 8.13.0
+
   ajv-keywords@3.5.2(ajv@6.12.6):
     dependencies:
       ajv: 6.12.6
@@ -13528,6 +13702,20 @@ snapshots:
       json-schema-traverse: 0.4.1
       uri-js: 4.4.1
 
+  ajv@8.12.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+      uri-js: 4.4.1
+
+  ajv@8.13.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+      uri-js: 4.4.1
+
   ajv@8.16.0:
     dependencies:
       fast-deep-equal: 3.1.3
@@ -15627,6 +15815,12 @@ snapshots:
       jsonfile: 6.1.0
       universalify: 2.0.1
 
+  fs-extra@7.0.1:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 4.0.0
+      universalify: 0.1.2
+
   fs-extra@9.1.0:
     dependencies:
       at-least-node: 1.0.0
@@ -16098,6 +16292,8 @@ snapshots:
       parent-module: 1.0.1
       resolve-from: 4.0.0
 
+  import-lazy@4.0.0: {}
+
   import-local@3.1.0:
     dependencies:
       pkg-dir: 4.2.0
@@ -16452,6 +16648,8 @@ snapshots:
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
+  jju@1.4.0: {}
+
   jose@5.6.2: {}
 
   joycon@3.1.1: {}
@@ -16541,6 +16739,10 @@ snapshots:
 
   jsonc-parser@3.2.1: {}
 
+  jsonfile@4.0.0:
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
   jsonfile@6.1.0:
     dependencies:
       universalify: 2.0.1
@@ -18680,6 +18882,10 @@ snapshots:
 
   semver@6.3.1: {}
 
+  semver@7.5.4:
+    dependencies:
+      lru-cache: 6.0.0
+
   semver@7.6.2: {}
 
   send@0.18.0:
@@ -18940,6 +19146,8 @@ snapshots:
 
   strict-event-emitter@0.5.1: {}
 
+  string-argv@0.3.2: {}
+
   string-at@1.1.0:
     dependencies:
       define-properties: 1.2.1
@@ -19330,7 +19538,7 @@ snapshots:
 
   tsscmp@1.0.6: {}
 
-  tsup@8.1.0(postcss@8.4.39)(typescript@5.5.3):
+  tsup@8.1.0(@microsoft/api-extractor@7.47.2(@types/node@20.14.10))(postcss@8.4.39)(typescript@5.5.3):
     dependencies:
       bundle-require: 4.2.1(esbuild@0.21.5)
       cac: 6.7.14
@@ -19347,6 +19555,7 @@ snapshots:
       sucrase: 3.35.0
       tree-kill: 1.2.2
     optionalDependencies:
+      '@microsoft/api-extractor': 7.47.2(@types/node@20.14.10)
       postcss: 8.4.39
       typescript: 5.5.3
     transitivePeerDependencies:
@@ -19450,6 +19659,8 @@ snapshots:
 
   typescript@3.8.3: {}
 
+  typescript@5.4.2: {}
+
   typescript@5.5.3: {}
 
   uc.micro@2.1.0: {}
@@ -19516,6 +19727,8 @@ snapshots:
 
   universal-user-agent@6.0.1: {}
 
+  universalify@0.1.2: {}
+
   universalify@0.2.0: {}
 
   universalify@2.0.1: {}
diff --git a/tsconfig.json b/tsconfig.json
index 5384765ab94..6ebe00158d8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,6 +21,7 @@
       "@toolpad/core": ["./packages/toolpad-core/src"],
       "@toolpad/core/*": ["./packages/toolpad-core/src/*"],
       "docs-toolpad/*": ["./docs/*"],
+      "docs/*": ["./node_modules/@mui/monorepo/docs/*"],
       "@mui-internal/api-docs-builder": ["./node_modules/@mui/monorepo/packages/api-docs-builder"],
       "@mui-internal/api-docs-builder/*": [
         "./node_modules/@mui/monorepo/packages/api-docs-builder/*"

From 6a5ed2a38fa94326d5d590269ddea1bf8e4f1fc1 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Sat, 20 Jul 2024 05:16:40 +0200
Subject: [PATCH 14/23] Update CorePlayground.tsx

---
 docs/src/components/builder/CorePlayground.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/docs/src/components/builder/CorePlayground.tsx b/docs/src/components/builder/CorePlayground.tsx
index ed289ae8378..097bd696f61 100644
--- a/docs/src/components/builder/CorePlayground.tsx
+++ b/docs/src/components/builder/CorePlayground.tsx
@@ -14,9 +14,8 @@ import {
 
 const AppFrame = styled('iframe')(({ theme }) => ({
   border: `1px solid ${theme.vars.palette.divider}`,
-  borderRadius: theme.shape.borderRadius,
+  borderRadius: theme.vars.shape.borderRadius,
   overflow: 'hidden',
-
   width: '100%',
   height: '100%',
 }));

From 65798aa5112db35416c6a1d19efc32a66d0e8c37 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Sat, 20 Jul 2024 05:30:30 +0200
Subject: [PATCH 15/23] dewe

---
 .../src/components/builder/CorePlayground.tsx | 21 +++++++++++-------
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 22 +++++++++----------
 tsconfig.json                                 |  3 ++-
 4 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/docs/src/components/builder/CorePlayground.tsx b/docs/src/components/builder/CorePlayground.tsx
index 097bd696f61..d49d8312852 100644
--- a/docs/src/components/builder/CorePlayground.tsx
+++ b/docs/src/components/builder/CorePlayground.tsx
@@ -39,9 +39,9 @@ type Folder = Record<
 >;
 
 // TODO: generate types for create-toolpad-app API
-function createFiles(options: any): Folder {
+function createWebcontainerFiles(flatFiles: Map<string, { content: string }>): Folder {
   const files: Folder = {};
-  for (const [name, { content }] of generateProject(options)) {
+  for (const [name, { content }] of flatFiles) {
     const segments = name.split('/');
     const folders = segments.slice(0, segments.length - 1);
     const folder = ensureFolder(folders, files);
@@ -88,10 +88,10 @@ export default function CorePlayground() {
 
     Promise.resolve(webcontainerPromiseRef.current).then(async (instance) => {
       if (instance) {
-        const newFiles = createFiles(newoptions);
+        const newFiles = generateProject(newoptions);
 
         // TODO: generalize this for all files
-        const newLayoutContent = newFiles.app.directory?.['layout.tsx'].file?.contents;
+        const newLayoutContent = newFiles.get('app/layout.tsx')?.content;
         if (!newLayoutContent) {
           throw new Error('Layout file not found');
         }
@@ -101,12 +101,17 @@ export default function CorePlayground() {
     });
   };
 
-  const files = React.useMemo(() => createFiles(optionsValue), [optionsValue]);
+  const projectFiles = React.useMemo(() => generateProject(optionsValue), [optionsValue]);
 
-  const bootFilesref = React.useRef(files);
+  const webcontainerFiles = React.useMemo(
+    () => createWebcontainerFiles(projectFiles),
+    [projectFiles],
+  );
+
+  const bootFilesref = React.useRef(webcontainerFiles);
   React.useEffect(() => {
-    bootFilesref.current = files;
-  }, [files]);
+    bootFilesref.current = webcontainerFiles;
+  }, [webcontainerFiles]);
 
   React.useEffect(() => {
     if (!frameRef.current) {
diff --git a/package.json b/package.json
index 4fd4db7559b..5a772845272 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "@mui/internal-docs-utils": "1.0.8",
     "@mui/internal-markdown": "1.0.8",
     "@mui/internal-scripts": "1.0.13",
-    "@mui/monorepo": "github:mui/material-ui#5fa1deb1eabf08b1821667665bf1a0be136c1c10",
+    "@mui/monorepo": "github:mui/material-ui#3aec5b59c66a8c4c1d1d36d30c1cec6e21ba00a4",
     "@mui/x-charts": "7.11.0",
     "@next/eslint-plugin-next": "14.2.5",
     "@playwright/test": "1.45.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5f433bf2fbb..4bf69223d0b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -103,8 +103,8 @@ importers:
         specifier: 1.0.13
         version: 1.0.13
       '@mui/monorepo':
-        specifier: github:mui/material-ui#5fa1deb1eabf08b1821667665bf1a0be136c1c10
-        version: https://codeload.github.com/mui/material-ui/tar.gz/5fa1deb1eabf08b1821667665bf1a0be136c1c10(encoding@0.1.13)
+        specifier: github:mui/material-ui#3aec5b59c66a8c4c1d1d36d30c1cec6e21ba00a4
+        version: https://codeload.github.com/mui/material-ui/tar.gz/3aec5b59c66a8c4c1d1d36d30c1cec6e21ba00a4(encoding@0.1.13)
       '@mui/x-charts':
         specifier: 7.11.0
         version: 7.11.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -2373,8 +2373,8 @@ packages:
     resolution: {integrity: sha512-HW6/2oThc4X086mGkZxpdP4P+aHpYbjHa6wr9l1F/R+snpk6G8/EuRXEcTkgQUl2t/NdNz3lj8re0AQBG5faSA==}
     engines: {node: '>=12.0.0'}
 
-  '@googleapis/sheets@8.0.0':
-    resolution: {integrity: sha512-EwLC+bMLTz3n2EDJMhMdrNR+aTxDBPpcq3k6Ibc4eKrp8UbytNAEB0VgfQFOGJN7+BTCcjiojt08O/cwn+YnHg==}
+  '@googleapis/sheets@5.0.5':
+    resolution: {integrity: sha512-XMoONmgAJm2jYeTYHX4054VcEkElxlgqmnHvt0wAurzEHoGJLdUHhTAJXGPLgSs4WVMPtgU8HLrmk7/U+Qlw7A==}
     engines: {node: '>=12.0.0'}
 
   '@googleapis/sheets@9.0.0':
@@ -2806,9 +2806,9 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/monorepo@https://codeload.github.com/mui/material-ui/tar.gz/5fa1deb1eabf08b1821667665bf1a0be136c1c10':
-    resolution: {tarball: https://codeload.github.com/mui/material-ui/tar.gz/5fa1deb1eabf08b1821667665bf1a0be136c1c10}
-    version: 6.0.0-beta.0
+  '@mui/monorepo@https://codeload.github.com/mui/material-ui/tar.gz/3aec5b59c66a8c4c1d1d36d30c1cec6e21ba00a4':
+    resolution: {tarball: https://codeload.github.com/mui/material-ui/tar.gz/3aec5b59c66a8c4c1d1d36d30c1cec6e21ba00a4}
+    version: 5.16.4
     engines: {pnpm: 9.4.0}
 
   '@mui/private-theming@5.16.4':
@@ -11348,7 +11348,7 @@ snapshots:
       - encoding
       - supports-color
 
-  '@googleapis/sheets@8.0.0(encoding@0.1.13)':
+  '@googleapis/sheets@5.0.5(encoding@0.1.13)':
     dependencies:
       googleapis-common: 7.2.0(encoding@0.1.13)
     transitivePeerDependencies:
@@ -11887,12 +11887,12 @@ snapshots:
       '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       '@types/react': 18.3.3
 
-  '@mui/monorepo@https://codeload.github.com/mui/material-ui/tar.gz/5fa1deb1eabf08b1821667665bf1a0be136c1c10(encoding@0.1.13)':
+  '@mui/monorepo@https://codeload.github.com/mui/material-ui/tar.gz/3aec5b59c66a8c4c1d1d36d30c1cec6e21ba00a4(encoding@0.1.13)':
     dependencies:
-      '@googleapis/sheets': 8.0.0(encoding@0.1.13)
+      '@googleapis/sheets': 5.0.5(encoding@0.1.13)
       '@netlify/functions': 2.8.1
       '@slack/bolt': 3.19.0
-      execa: 9.3.0
+      execa: 8.0.1
       google-auth-library: 9.11.0(encoding@0.1.13)
     transitivePeerDependencies:
       - bufferutil
diff --git a/tsconfig.json b/tsconfig.json
index 6ebe00158d8..1d7774bc0bd 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -25,7 +25,8 @@
       "@mui-internal/api-docs-builder": ["./node_modules/@mui/monorepo/packages/api-docs-builder"],
       "@mui-internal/api-docs-builder/*": [
         "./node_modules/@mui/monorepo/packages/api-docs-builder/*"
-      ]
+      ],
+      "@mui/docs/*": ["./node_modules/@mui/monorepo/packages/docs/*"]
     }
   },
   "include": ["./test", "packages/toolpad-utils/src/http.ts"]

From 3b417c0b79b69a977c0c1ae7818e923247b27d67 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Sat, 20 Jul 2024 06:00:09 +0200
Subject: [PATCH 16/23] wferfwrf

---
 package.json   |  2 +-
 pnpm-lock.yaml | 44 +++++++++++++++++++++++++++++++++-----------
 2 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 5a772845272..4fd4db7559b 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "@mui/internal-docs-utils": "1.0.8",
     "@mui/internal-markdown": "1.0.8",
     "@mui/internal-scripts": "1.0.13",
-    "@mui/monorepo": "github:mui/material-ui#3aec5b59c66a8c4c1d1d36d30c1cec6e21ba00a4",
+    "@mui/monorepo": "github:mui/material-ui#5fa1deb1eabf08b1821667665bf1a0be136c1c10",
     "@mui/x-charts": "7.11.0",
     "@next/eslint-plugin-next": "14.2.5",
     "@playwright/test": "1.45.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4bf69223d0b..e60a635b20b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -103,8 +103,8 @@ importers:
         specifier: 1.0.13
         version: 1.0.13
       '@mui/monorepo':
-        specifier: github:mui/material-ui#3aec5b59c66a8c4c1d1d36d30c1cec6e21ba00a4
-        version: https://codeload.github.com/mui/material-ui/tar.gz/3aec5b59c66a8c4c1d1d36d30c1cec6e21ba00a4(encoding@0.1.13)
+        specifier: github:mui/material-ui#5fa1deb1eabf08b1821667665bf1a0be136c1c10
+        version: https://codeload.github.com/mui/material-ui/tar.gz/5fa1deb1eabf08b1821667665bf1a0be136c1c10(encoding@0.1.13)
       '@mui/x-charts':
         specifier: 7.11.0
         version: 7.11.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -330,6 +330,9 @@ importers:
       '@mui/x-license':
         specifier: 7.11.0
         version: 7.11.0(@types/react@18.3.3)(react@18.3.1)
+      '@mui/x-tree-view':
+        specifier: 7.11.0
+        version: 7.11.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@toolpad/core':
         specifier: workspace:*
         version: link:../packages/toolpad-core
@@ -2373,8 +2376,8 @@ packages:
     resolution: {integrity: sha512-HW6/2oThc4X086mGkZxpdP4P+aHpYbjHa6wr9l1F/R+snpk6G8/EuRXEcTkgQUl2t/NdNz3lj8re0AQBG5faSA==}
     engines: {node: '>=12.0.0'}
 
-  '@googleapis/sheets@5.0.5':
-    resolution: {integrity: sha512-XMoONmgAJm2jYeTYHX4054VcEkElxlgqmnHvt0wAurzEHoGJLdUHhTAJXGPLgSs4WVMPtgU8HLrmk7/U+Qlw7A==}
+  '@googleapis/sheets@8.0.0':
+    resolution: {integrity: sha512-EwLC+bMLTz3n2EDJMhMdrNR+aTxDBPpcq3k6Ibc4eKrp8UbytNAEB0VgfQFOGJN7+BTCcjiojt08O/cwn+YnHg==}
     engines: {node: '>=12.0.0'}
 
   '@googleapis/sheets@9.0.0':
@@ -2806,9 +2809,9 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/monorepo@https://codeload.github.com/mui/material-ui/tar.gz/3aec5b59c66a8c4c1d1d36d30c1cec6e21ba00a4':
-    resolution: {tarball: https://codeload.github.com/mui/material-ui/tar.gz/3aec5b59c66a8c4c1d1d36d30c1cec6e21ba00a4}
-    version: 5.16.4
+  '@mui/monorepo@https://codeload.github.com/mui/material-ui/tar.gz/5fa1deb1eabf08b1821667665bf1a0be136c1c10':
+    resolution: {tarball: https://codeload.github.com/mui/material-ui/tar.gz/5fa1deb1eabf08b1821667665bf1a0be136c1c10}
+    version: 6.0.0-beta.0
     engines: {pnpm: 9.4.0}
 
   '@mui/private-theming@5.16.4':
@@ -11348,7 +11351,7 @@ snapshots:
       - encoding
       - supports-color
 
-  '@googleapis/sheets@5.0.5(encoding@0.1.13)':
+  '@googleapis/sheets@8.0.0(encoding@0.1.13)':
     dependencies:
       googleapis-common: 7.2.0(encoding@0.1.13)
     transitivePeerDependencies:
@@ -11887,12 +11890,12 @@ snapshots:
       '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       '@types/react': 18.3.3
 
-  '@mui/monorepo@https://codeload.github.com/mui/material-ui/tar.gz/3aec5b59c66a8c4c1d1d36d30c1cec6e21ba00a4(encoding@0.1.13)':
+  '@mui/monorepo@https://codeload.github.com/mui/material-ui/tar.gz/5fa1deb1eabf08b1821667665bf1a0be136c1c10(encoding@0.1.13)':
     dependencies:
-      '@googleapis/sheets': 5.0.5(encoding@0.1.13)
+      '@googleapis/sheets': 8.0.0(encoding@0.1.13)
       '@netlify/functions': 2.8.1
       '@slack/bolt': 3.19.0
-      execa: 8.0.1
+      execa: 9.3.0
       google-auth-library: 9.11.0(encoding@0.1.13)
     transitivePeerDependencies:
       - bufferutil
@@ -12275,6 +12278,25 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
+  '@mui/x-tree-view@7.11.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.8
+      '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1)
+      '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
+      '@mui/base': 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mui/material': 6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mui/system': 5.16.4(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
+      '@mui/utils': 5.16.4(@types/react@18.3.3)(react@18.3.1)
+      '@mui/x-internals': 7.11.0(@types/react@18.3.3)(react@18.3.1)
+      '@types/react-transition-group': 4.4.10
+      clsx: 2.1.1
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+
   '@netlify/functions@2.8.1':
     dependencies:
       '@netlify/serverless-functions-api': 1.19.1

From 0b2a1a7d3b8420c26362da3b3aacac1d7f11e575 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Sat, 20 Jul 2024 06:23:30 +0200
Subject: [PATCH 17/23] dewwe

---
 docs/package.json                             |   1 +
 docs/src/components/builder/AppViewer.tsx     | 198 ++++++++++++++++++
 .../src/components/builder/CorePlayground.tsx | 185 +---------------
 packages/create-toolpad-app/package.json      |   1 +
 packages/create-toolpad-app/src/api.ts        |   1 +
 .../create-toolpad-app/src/generateProject.ts |   8 +-
 packages/create-toolpad-app/tsup.config.ts    |   2 +-
 7 files changed, 209 insertions(+), 187 deletions(-)
 create mode 100644 docs/src/components/builder/AppViewer.tsx

diff --git a/docs/package.json b/docs/package.json
index 7c4dbc95a1b..c0ad4a56dde 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -37,6 +37,7 @@
     "@mui/utils": "next",
     "@mui/x-date-pickers": "7.11.0",
     "@mui/x-license": "7.11.0",
+    "@mui/x-tree-view": "7.11.0",
     "@toolpad/core": "workspace:*",
     "@toolpad/studio": "workspace:*",
     "@trendmicro/react-interpolate": "0.5.5",
diff --git a/docs/src/components/builder/AppViewer.tsx b/docs/src/components/builder/AppViewer.tsx
new file mode 100644
index 00000000000..2758f55f879
--- /dev/null
+++ b/docs/src/components/builder/AppViewer.tsx
@@ -0,0 +1,198 @@
+import * as React from 'react';
+import { WebContainer } from '@webcontainer/api';
+import { Box, CircularProgress, Typography, styled } from '@mui/material';
+import { Files } from 'create-toolpad-app';
+
+const AppFrame = styled('iframe')(({ theme }) => ({
+  border: `1px solid ${theme.vars.palette.divider}`,
+  borderRadius: theme.vars.shape.borderRadius,
+  overflow: 'hidden',
+  width: '100%',
+  height: '100%',
+}));
+
+function ensureFolder(folders: string[], containingFolder: Record<string, any>) {
+  if (folders.length <= 0) {
+    return containingFolder;
+  }
+  const [first, ...rest] = folders;
+  let folder = containingFolder[first];
+  if (!folder) {
+    folder = { directory: {} };
+    containingFolder[first] = folder;
+  }
+  return ensureFolder(rest, folder.directory);
+}
+
+type WebcontainerFolder = Record<
+  string,
+  | { directory: WebcontainerFolder; file?: undefined }
+  | { directory?: undefined; file: { contents: string } }
+>;
+
+// TODO: generate types for create-toolpad-app API
+function createWebcontainerFiles(flatFiles: Files): WebcontainerFolder {
+  const files: WebcontainerFolder = {};
+  for (const [name, { content }] of flatFiles) {
+    const segments = name.split('/');
+    const folders = segments.slice(0, segments.length - 1);
+    const folder = ensureFolder(folders, files);
+    const file = segments[segments.length - 1];
+    folder[file] = { file: { contents: content } };
+  }
+  return files;
+}
+
+async function installDependencies(instance: WebContainer) {
+  // Install dependencies
+  const installProcess = await instance.spawn('npm', ['install', '--force']);
+  installProcess.output.pipeTo(
+    new WritableStream({
+      write(data) {
+        // eslint-disable-next-line no-console
+        console.log(data);
+      },
+    }),
+  );
+  // Wait for install command to exit
+  return installProcess.exit;
+}
+
+export interface AppViewerProps {
+  sx?: React.CSSProperties;
+  files?: Files;
+}
+
+export default function AppViewer({ sx, files = new Map() }: AppViewerProps) {
+  const frameRef = React.useRef<HTMLIFrameElement>(null);
+  const webcontainerPromiseRef = React.useRef<Promise<WebContainer> | null>(null);
+  const [loading, setLoading] = React.useState(true);
+  const [rebuilding, setRebuilding] = React.useState(false);
+  const isRebuildingRef = React.useRef(rebuilding);
+  React.useEffect(() => {
+    isRebuildingRef.current = rebuilding;
+  }, [rebuilding]);
+
+  const webcontainerFiles = React.useMemo(() => createWebcontainerFiles(files), [files]);
+
+  const bootFilesref = React.useRef(webcontainerFiles);
+  React.useEffect(() => {
+    bootFilesref.current = webcontainerFiles;
+  }, [webcontainerFiles]);
+
+  React.useEffect(() => {
+    if (!frameRef.current) {
+      throw new Error('Frame not found');
+    }
+
+    const frame = frameRef.current;
+
+    const webcontainerPromise = Promise.resolve(webcontainerPromiseRef.current).then(async () =>
+      WebContainer.boot(),
+    );
+    setLoading(true);
+
+    webcontainerPromiseRef.current = webcontainerPromise;
+
+    webcontainerPromise.then(async (instance) => {
+      if (webcontainerPromiseRef.current !== webcontainerPromise) {
+        return;
+      }
+
+      await instance.mount(bootFilesref.current);
+
+      const exitCode = await installDependencies(instance);
+      if (exitCode !== 0) {
+        throw new Error('Installation failed');
+      }
+
+      // Run `npm run dev` to start the next.js dev server
+      const devProcess = await instance.spawn('npm', ['run', 'dev']);
+
+      devProcess.output.pipeTo(
+        new WritableStream({
+          write(data) {
+            // eslint-disable-next-line no-console
+            console.log(data);
+            if (data.includes('Compiled /page')) {
+              setLoading(false);
+            }
+            if (isRebuildingRef.current && data.includes('Compiled in')) {
+              setRebuilding(false);
+            }
+          },
+        }),
+      );
+
+      // Wait for `server-ready` event
+      instance.on('server-ready', (port, url) => {
+        frame.src = `${url}/page`;
+      });
+    });
+
+    return () => {
+      if (!webcontainerPromiseRef.current) {
+        return;
+      }
+      webcontainerPromiseRef.current.then((instance) => {
+        instance.teardown();
+      });
+    };
+  }, []);
+
+  const prevFiles = React.useRef(files);
+  React.useEffect(() => {
+    const changes = new Map();
+
+    for (const [name, { content }] of files) {
+      if (prevFiles.current.get(name)?.content !== content) {
+        changes.set(name, { content });
+      }
+    }
+
+    prevFiles.current = files;
+
+    if (changes.size <= 0) {
+      return;
+    }
+
+    Promise.resolve(webcontainerPromiseRef.current).then(async (instance) => {
+      if (!instance) {
+        throw new Error('Instance not found');
+      }
+
+      for (const [name, { content }] of changes) {
+        instance.fs.writeFile(name, content);
+      }
+
+      setRebuilding(true);
+    });
+  }, [files]);
+
+  return (
+    <Box sx={sx}>
+      {loading || rebuilding ? (
+        <Box
+          sx={{
+            position: 'absolute',
+            inset: '0 0 0 0',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <CircularProgress />
+          <Typography>{'// TODO: show progress. (check the console for now)'}</Typography>
+        </Box>
+      ) : null}
+
+      <AppFrame
+        ref={frameRef}
+        title="Application"
+        style={{ display: 'block', width: '100%', height: '100%' }}
+      />
+    </Box>
+  );
+}
diff --git a/docs/src/components/builder/CorePlayground.tsx b/docs/src/components/builder/CorePlayground.tsx
index d49d8312852..0b833bb4180 100644
--- a/docs/src/components/builder/CorePlayground.tsx
+++ b/docs/src/components/builder/CorePlayground.tsx
@@ -1,81 +1,9 @@
 import * as React from 'react';
-import { WebContainer } from '@webcontainer/api';
 import { generateProject } from 'create-toolpad-app';
-import {
-  Box,
-  Button,
-  CircularProgress,
-  CssBaseline,
-  Stack,
-  TextField,
-  Typography,
-  styled,
-} from '@mui/material';
-
-const AppFrame = styled('iframe')(({ theme }) => ({
-  border: `1px solid ${theme.vars.palette.divider}`,
-  borderRadius: theme.vars.shape.borderRadius,
-  overflow: 'hidden',
-  width: '100%',
-  height: '100%',
-}));
-
-function ensureFolder(folders: string[], containingFolder: Record<string, any>) {
-  if (folders.length <= 0) {
-    return containingFolder;
-  }
-  const [first, ...rest] = folders;
-  let folder = containingFolder[first];
-  if (!folder) {
-    folder = { directory: {} };
-    containingFolder[first] = folder;
-  }
-  return ensureFolder(rest, folder.directory);
-}
-
-type Folder = Record<
-  string,
-  { directory: Folder; file?: undefined } | { directory?: undefined; file: { contents: string } }
->;
-
-// TODO: generate types for create-toolpad-app API
-function createWebcontainerFiles(flatFiles: Map<string, { content: string }>): Folder {
-  const files: Folder = {};
-  for (const [name, { content }] of flatFiles) {
-    const segments = name.split('/');
-    const folders = segments.slice(0, segments.length - 1);
-    const folder = ensureFolder(folders, files);
-    const file = segments[segments.length - 1];
-    folder[file] = { file: { contents: content } };
-  }
-  return files;
-}
-
-async function installDependencies(instance: WebContainer) {
-  // Install dependencies
-  const installProcess = await instance.spawn('npm', ['install', '--force']);
-  installProcess.output.pipeTo(
-    new WritableStream({
-      write(data) {
-        // eslint-disable-next-line no-console
-        console.log(data);
-      },
-    }),
-  );
-  // Wait for install command to exit
-  return installProcess.exit;
-}
+import { Box, Button, CssBaseline, Stack, TextField, Typography } from '@mui/material';
+import AppViewer from './AppViewer';
 
 export default function CorePlayground() {
-  const frameRef = React.useRef<HTMLIFrameElement>(null);
-  const webcontainerPromiseRef = React.useRef<Promise<WebContainer> | null>(null);
-  const [loading, setLoading] = React.useState(true);
-  const [rebuilding, setRebuilding] = React.useState(false);
-  const isRebuildingRef = React.useRef(rebuilding);
-  React.useEffect(() => {
-    isRebuildingRef.current = rebuilding;
-  }, [rebuilding]);
-
   const [optionsInput, setOptionsInput] = React.useState({
     name: 'demo',
     title: 'Toolpad',
@@ -85,94 +13,10 @@ export default function CorePlayground() {
 
   const handleNewOptions: React.Dispatch<React.SetStateAction<any>> = (newoptions) => {
     setOptionsValue(typeof newoptions === 'function' ? newoptions(optionsValue) : newoptions);
-
-    Promise.resolve(webcontainerPromiseRef.current).then(async (instance) => {
-      if (instance) {
-        const newFiles = generateProject(newoptions);
-
-        // TODO: generalize this for all files
-        const newLayoutContent = newFiles.get('app/layout.tsx')?.content;
-        if (!newLayoutContent) {
-          throw new Error('Layout file not found');
-        }
-        instance.fs.writeFile('/app/layout.tsx', newLayoutContent);
-        setRebuilding(true);
-      }
-    });
   };
 
   const projectFiles = React.useMemo(() => generateProject(optionsValue), [optionsValue]);
 
-  const webcontainerFiles = React.useMemo(
-    () => createWebcontainerFiles(projectFiles),
-    [projectFiles],
-  );
-
-  const bootFilesref = React.useRef(webcontainerFiles);
-  React.useEffect(() => {
-    bootFilesref.current = webcontainerFiles;
-  }, [webcontainerFiles]);
-
-  React.useEffect(() => {
-    if (!frameRef.current) {
-      throw new Error('Frame not found');
-    }
-
-    const frame = frameRef.current;
-
-    const webcontainerPromise = Promise.resolve(webcontainerPromiseRef.current).then(async () =>
-      WebContainer.boot(),
-    );
-    setLoading(true);
-
-    webcontainerPromiseRef.current = webcontainerPromise;
-
-    webcontainerPromise.then(async (instance) => {
-      if (webcontainerPromiseRef.current !== webcontainerPromise) {
-        return;
-      }
-
-      await instance.mount(bootFilesref.current);
-
-      const exitCode = await installDependencies(instance);
-      if (exitCode !== 0) {
-        throw new Error('Installation failed');
-      }
-
-      // Run `npm run dev` to start the next.js dev server
-      const devProcess = await instance.spawn('npm', ['run', 'dev']);
-
-      devProcess.output.pipeTo(
-        new WritableStream({
-          write(data) {
-            // eslint-disable-next-line no-console
-            console.log(data);
-            if (data.includes('Compiled /page')) {
-              setLoading(false);
-            }
-            if (isRebuildingRef.current && data.includes('Compiled in')) {
-              setRebuilding(false);
-            }
-          },
-        }),
-      );
-
-      // Wait for `server-ready` event
-      instance.on('server-ready', (port, url) => {
-        frame.src = `${url}/page`;
-      });
-    });
-
-    return () => {
-      if (!webcontainerPromiseRef.current) {
-        return;
-      }
-      webcontainerPromiseRef.current.then((instance) => {
-        instance.teardown();
-      });
-    };
-  }, []);
-
   return (
     <React.Fragment>
       <CssBaseline />
@@ -219,30 +63,7 @@ export default function CorePlayground() {
             Code view
           </Button>
         </Stack>
-        <Box sx={{ position: 'relative', flex: 1 }}>
-          {loading || rebuilding ? (
-            <Box
-              sx={{
-                position: 'absolute',
-                inset: '0 0 0 0',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: 2,
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-            >
-              <CircularProgress />
-              <Typography>{'// TODO: show progress. (check the console for now)'}</Typography>
-            </Box>
-          ) : null}
-
-          <AppFrame
-            ref={frameRef}
-            title="Application"
-            style={{ display: 'block', width: '100%', height: '100%' }}
-          />
-        </Box>
+        <AppViewer sx={{ position: 'relative', flex: 1 }} files={projectFiles} />
       </Box>
     </React.Fragment>
   );
diff --git a/packages/create-toolpad-app/package.json b/packages/create-toolpad-app/package.json
index d362638f0ec..d64821181c1 100644
--- a/packages/create-toolpad-app/package.json
+++ b/packages/create-toolpad-app/package.json
@@ -19,6 +19,7 @@
   },
   "exports": {
     ".": {
+      "types": "./dist/api.d.ts",
       "import": "./dist/api.mjs",
       "require": "./dist/api.js"
     }
diff --git a/packages/create-toolpad-app/src/api.ts b/packages/create-toolpad-app/src/api.ts
index eb08babc6fd..9f75ed65c30 100644
--- a/packages/create-toolpad-app/src/api.ts
+++ b/packages/create-toolpad-app/src/api.ts
@@ -1 +1,2 @@
 export { default as generateProject } from './generateProject';
+export * from './generateProject';
diff --git a/packages/create-toolpad-app/src/generateProject.ts b/packages/create-toolpad-app/src/generateProject.ts
index 61edfdcb542..e21fad3b63e 100644
--- a/packages/create-toolpad-app/src/generateProject.ts
+++ b/packages/create-toolpad-app/src/generateProject.ts
@@ -1,14 +1,14 @@
 import path from 'path';
 import { PackageJson } from './packageType';
 
-interface GenerateProjectOptions {
+export interface GenerateProjectOptions {
   name: string;
   title?: string;
 }
 
-export default function generateProject(
-  options: GenerateProjectOptions,
-): Map<string, { content: string }> {
+export type Files = Map<string, { content: string }>;
+
+export default function generateProject(options: GenerateProjectOptions): Files {
   const rootLayoutContent = `  
   import { AppProvider } from "@toolpad/core/nextjs";
   import DashboardIcon from "@mui/icons-material/Dashboard";
diff --git a/packages/create-toolpad-app/tsup.config.ts b/packages/create-toolpad-app/tsup.config.ts
index 44700e597f7..e4cdf1ebea4 100644
--- a/packages/create-toolpad-app/tsup.config.ts
+++ b/packages/create-toolpad-app/tsup.config.ts
@@ -1,7 +1,7 @@
 import { defineConfig } from 'tsup';
 
 export default defineConfig({
-  entry: ['./src/index.ts', './src/api.ts'],
+  entry: ['./src/api.ts', './src/index.ts'],
   silent: true,
   noExternal: ['chalk', 'execa', 'inquirer'],
   clean: true,

From ad1074901e18f0d1bd7ef9ae553191ac9777cedc Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Sat, 20 Jul 2024 06:55:04 +0200
Subject: [PATCH 18/23] Code viewer

---
 docs/src/components/builder/AppViewer.tsx     | 14 +++-
 docs/src/components/builder/CodeViewer.tsx    | 81 +++++++++++++++++++
 .../src/components/builder/CorePlayground.tsx | 17 ++--
 .../create-toolpad-app/src/generateProject.ts |  1 +
 4 files changed, 102 insertions(+), 11 deletions(-)
 create mode 100644 docs/src/components/builder/CodeViewer.tsx

diff --git a/docs/src/components/builder/AppViewer.tsx b/docs/src/components/builder/AppViewer.tsx
index 2758f55f879..060fdbb648f 100644
--- a/docs/src/components/builder/AppViewer.tsx
+++ b/docs/src/components/builder/AppViewer.tsx
@@ -1,8 +1,14 @@
 import * as React from 'react';
 import { WebContainer } from '@webcontainer/api';
-import { Box, CircularProgress, Typography, styled } from '@mui/material';
+import { Box, CircularProgress, SxProps, Typography, styled } from '@mui/material';
 import { Files } from 'create-toolpad-app';
 
+const Root = styled('div')({
+  width: '100%',
+  height: '100%',
+  position: 'relative',
+});
+
 const AppFrame = styled('iframe')(({ theme }) => ({
   border: `1px solid ${theme.vars.palette.divider}`,
   borderRadius: theme.vars.shape.borderRadius,
@@ -59,7 +65,7 @@ async function installDependencies(instance: WebContainer) {
 }
 
 export interface AppViewerProps {
-  sx?: React.CSSProperties;
+  sx?: SxProps;
   files?: Files;
 }
 
@@ -170,7 +176,7 @@ export default function AppViewer({ sx, files = new Map() }: AppViewerProps) {
   }, [files]);
 
   return (
-    <Box sx={sx}>
+    <Root sx={sx}>
       {loading || rebuilding ? (
         <Box
           sx={{
@@ -193,6 +199,6 @@ export default function AppViewer({ sx, files = new Map() }: AppViewerProps) {
         title="Application"
         style={{ display: 'block', width: '100%', height: '100%' }}
       />
-    </Box>
+    </Root>
   );
 }
diff --git a/docs/src/components/builder/CodeViewer.tsx b/docs/src/components/builder/CodeViewer.tsx
new file mode 100644
index 00000000000..75e2f4a5ae1
--- /dev/null
+++ b/docs/src/components/builder/CodeViewer.tsx
@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import Box from '@mui/material/Box';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
+import { Files } from 'create-toolpad-app';
+import { styled, SxProps } from '@mui/material';
+
+const Root = styled('div')(({ theme }) => ({
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'stretch',
+  background: theme.vars.palette.background.default,
+  borderRadius: theme.vars.shape.borderRadius,
+  overflow: 'hidden',
+  gap: theme.spacing(1),
+}));
+
+interface CodeViewerProps {
+  sx?: SxProps;
+  files?: Files;
+}
+
+interface TreeNode {
+  path: string;
+  label: string;
+  children: TreeNode[];
+}
+
+function placePathInTree(tree: TreeNode[], item: string, prefix = '') {
+  const [first, ...rest] = item.split('/');
+
+  const path = `${prefix}${first}`;
+
+  if (rest.length <= 0) {
+    tree.push({ path, label: first, children: [] });
+  } else {
+    const node = tree.find((n) => n.label === first);
+    if (node) {
+      placePathInTree(node.children, rest.join('/'), `${path}/`);
+    } else {
+      tree.push({ path, label: first, children: [] });
+    }
+  }
+}
+
+function createTree(files: Files) {
+  const tree: TreeNode[] = [];
+
+  for (const [name] of files) {
+    placePathInTree(tree, name);
+  }
+
+  return tree;
+}
+
+const getItemId = (item: TreeNode) => item.path;
+
+export default function CodeViewer({ sx, files = new Map() }: CodeViewerProps) {
+  const fileTree = React.useMemo(() => createTree(files), [files]);
+  const [selectedPath, setSelectePath] = React.useState<string | null>(null);
+
+  const contents = selectedPath ? files.get(selectedPath)?.content : null;
+
+  return (
+    <Root sx={sx}>
+      <RichTreeView
+        sx={{ width: 200, overflow: 'auto' }}
+        items={fileTree}
+        getItemId={getItemId}
+        selectedItems={selectedPath}
+        onSelectedItemsChange={(event, item) => setSelectePath(item)}
+      />
+
+      <Box sx={{ flex: 1, height: '100%', overflow: 'auto' }}>
+        <HighlightedCode plainStyle copyButtonHidden language={'js'} code={contents ?? ''} />
+      </Box>
+    </Root>
+  );
+}
diff --git a/docs/src/components/builder/CorePlayground.tsx b/docs/src/components/builder/CorePlayground.tsx
index 0b833bb4180..bf8962577d1 100644
--- a/docs/src/components/builder/CorePlayground.tsx
+++ b/docs/src/components/builder/CorePlayground.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { generateProject } from 'create-toolpad-app';
 import { Box, Button, CssBaseline, Stack, TextField, Typography } from '@mui/material';
 import AppViewer from './AppViewer';
+import CodeViewer from './CodeViewer';
 
 export default function CorePlayground() {
   const [optionsInput, setOptionsInput] = React.useState({
@@ -17,6 +18,8 @@ export default function CorePlayground() {
 
   const projectFiles = React.useMemo(() => generateProject(optionsValue), [optionsValue]);
 
+  const [showCode, setShowCode] = React.useState(false);
+
   return (
     <React.Fragment>
       <CssBaseline />
@@ -56,14 +59,14 @@ export default function CorePlayground() {
           >
             Download project
           </Button>
-          <Button
-            // eslint-disable-next-line no-alert
-            onClick={() => window.alert('// TODO: Show code files in code editor (read only)')}
-          >
-            Code view
-          </Button>
+          <Button onClick={() => setShowCode((prev) => !prev)}>Code view</Button>
         </Stack>
-        <AppViewer sx={{ position: 'relative', flex: 1 }} files={projectFiles} />
+        <Box sx={{ position: 'relative', flex: 1 }}>
+          <AppViewer files={projectFiles} />
+          {showCode ? (
+            <CodeViewer sx={{ position: 'absolute', inset: '0 0 0 0' }} files={projectFiles} />
+          ) : null}
+        </Box>
       </Box>
     </React.Fragment>
   );
diff --git a/packages/create-toolpad-app/src/generateProject.ts b/packages/create-toolpad-app/src/generateProject.ts
index e21fad3b63e..6e6396de88c 100644
--- a/packages/create-toolpad-app/src/generateProject.ts
+++ b/packages/create-toolpad-app/src/generateProject.ts
@@ -4,6 +4,7 @@ import { PackageJson } from './packageType';
 export interface GenerateProjectOptions {
   name: string;
   title?: string;
+  prefix?: string;
 }
 
 export type Files = Map<string, { content: string }>;

From 82c24b7b12090e2b7ed5598e0c514683e0e3e4b7 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Sat, 20 Jul 2024 06:58:20 +0200
Subject: [PATCH 19/23] dew

---
 docs/tsconfig.json | 5 ++++-
 tsconfig.json      | 1 -
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index e4db4377baf..1f5882478dc 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -12,7 +12,10 @@
     "types": ["react", "node"],
     "incremental": true,
     "noImplicitAny": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "paths": {
+      "docs/*": ["./node_modules/@mui/monorepo/docs/*"]
+    }
   },
   "include": ["docs-env.d.ts", "pages/**/*", "src/**/*", "data/**/*", "next.config.mjs"],
   "exclude": ["docs/.next", "docs/export"]
diff --git a/tsconfig.json b/tsconfig.json
index 1d7774bc0bd..0811eb6c133 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,7 +21,6 @@
       "@toolpad/core": ["./packages/toolpad-core/src"],
       "@toolpad/core/*": ["./packages/toolpad-core/src/*"],
       "docs-toolpad/*": ["./docs/*"],
-      "docs/*": ["./node_modules/@mui/monorepo/docs/*"],
       "@mui-internal/api-docs-builder": ["./node_modules/@mui/monorepo/packages/api-docs-builder"],
       "@mui-internal/api-docs-builder/*": [
         "./node_modules/@mui/monorepo/packages/api-docs-builder/*"

From a51e6d5bebe21412ff96324e8c878efefa464acd Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Sat, 20 Jul 2024 07:02:59 +0200
Subject: [PATCH 20/23] Update tsconfig.json

---
 docs/tsconfig.json | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index 1f5882478dc..e4db4377baf 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -12,10 +12,7 @@
     "types": ["react", "node"],
     "incremental": true,
     "noImplicitAny": true,
-    "jsx": "preserve",
-    "paths": {
-      "docs/*": ["./node_modules/@mui/monorepo/docs/*"]
-    }
+    "jsx": "preserve"
   },
   "include": ["docs-env.d.ts", "pages/**/*", "src/**/*", "data/**/*", "next.config.mjs"],
   "exclude": ["docs/.next", "docs/export"]

From 9e9c74d05030305e52b45376f7942fb7709e262d Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Sat, 20 Jul 2024 07:27:48 +0200
Subject: [PATCH 21/23] Update CodeViewer.tsx

---
 docs/src/components/builder/CodeViewer.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/docs/src/components/builder/CodeViewer.tsx b/docs/src/components/builder/CodeViewer.tsx
index 75e2f4a5ae1..f98e5f58a5e 100644
--- a/docs/src/components/builder/CodeViewer.tsx
+++ b/docs/src/components/builder/CodeViewer.tsx
@@ -4,6 +4,9 @@ import Box from '@mui/material/Box';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import { Files } from 'create-toolpad-app';
 import { styled, SxProps } from '@mui/material';
+import FolderIcon from '@mui/icons-material/Folder';
+import FolderOpenIcon from '@mui/icons-material/FolderOpen';
+import CodeIcon from '@mui/icons-material/Code';
 
 const Root = styled('div')(({ theme }) => ({
   width: '100%',
@@ -12,6 +15,7 @@ const Root = styled('div')(({ theme }) => ({
   flexDirection: 'row',
   alignItems: 'stretch',
   background: theme.vars.palette.background.default,
+  border: `1px solid ${theme.vars.palette.divider}`,
   borderRadius: theme.vars.shape.borderRadius,
   overflow: 'hidden',
   gap: theme.spacing(1),
@@ -66,7 +70,12 @@ export default function CodeViewer({ sx, files = new Map() }: CodeViewerProps) {
   return (
     <Root sx={sx}>
       <RichTreeView
-        sx={{ width: 200, overflow: 'auto' }}
+        sx={{ width: 200, overflow: 'auto', m: 1 }}
+        slots={{
+          expandIcon: FolderIcon,
+          collapseIcon: FolderOpenIcon,
+          endIcon: CodeIcon,
+        }}
         items={fileTree}
         getItemId={getItemId}
         selectedItems={selectedPath}

From 64582b96c6e7be030e549c782a8d3891fa7c07c0 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Sat, 20 Jul 2024 08:35:59 +0200
Subject: [PATCH 22/23] Update generateProject.ts

---
 packages/create-toolpad-app/src/generateProject.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/create-toolpad-app/src/generateProject.ts b/packages/create-toolpad-app/src/generateProject.ts
index 6e6396de88c..00230aa5749 100644
--- a/packages/create-toolpad-app/src/generateProject.ts
+++ b/packages/create-toolpad-app/src/generateProject.ts
@@ -97,7 +97,7 @@ export default function generateProject(options: GenerateProjectOptions): Files
   export default function Home() {
     return (
       <main>
-        <Container sx={{ mx: 4 }}>
+        <Container sx={{ my: 4 }}>
           <Typography variant="h6" color="grey.800">
             Dashboard content!
           </Typography>

From 7d1d0ee5f48a278e2d12bd841c2b7a57fcbfd2b0 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Sat, 20 Jul 2024 22:39:57 +0200
Subject: [PATCH 23/23] csbci

---
 docs/src/components/builder/CorePlayground.tsx     | 14 ++++++++++++++
 packages/create-toolpad-app/src/generateProject.ts |  3 ++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/docs/src/components/builder/CorePlayground.tsx b/docs/src/components/builder/CorePlayground.tsx
index bf8962577d1..afbe4aa4b01 100644
--- a/docs/src/components/builder/CorePlayground.tsx
+++ b/docs/src/components/builder/CorePlayground.tsx
@@ -4,10 +4,24 @@ import { Box, Button, CssBaseline, Stack, TextField, Typography } from '@mui/mat
 import AppViewer from './AppViewer';
 import CodeViewer from './CodeViewer';
 
+function getPackageVersion(packageName: string) {
+  const commitRef = process.env.PULL_REQUEST_ID ? process.env.COMMIT_REF : undefined;
+
+  if (commitRef === undefined) {
+    // #default-branch-switch
+    // Use the "latest" npm tag for the master git branch
+    // Use the "next" npm tag for the next git branch
+    return 'latest';
+  }
+  const shortSha = commitRef.slice(0, 8);
+  return `https://pkg.csb.dev/mui/mui-toolpad/commit/${shortSha}/${packageName}`;
+}
+
 export default function CorePlayground() {
   const [optionsInput, setOptionsInput] = React.useState({
     name: 'demo',
     title: 'Toolpad',
+    toolpadCoreVersion: getPackageVersion('@toolpad/core'),
   });
 
   const [optionsValue, setOptionsValue] = React.useState(optionsInput);
diff --git a/packages/create-toolpad-app/src/generateProject.ts b/packages/create-toolpad-app/src/generateProject.ts
index 00230aa5749..bba3dc1b02b 100644
--- a/packages/create-toolpad-app/src/generateProject.ts
+++ b/packages/create-toolpad-app/src/generateProject.ts
@@ -5,6 +5,7 @@ export interface GenerateProjectOptions {
   name: string;
   title?: string;
   prefix?: string;
+  toolpadCoreVersion?: string;
 }
 
 export type Files = Map<string, { content: string }>;
@@ -199,7 +200,7 @@ export default function generateProject(options: GenerateProjectOptions): Files
       react: '^18',
       'react-dom': '^18',
       next: '^14',
-      '@toolpad/core': 'latest',
+      '@toolpad/core': options.toolpadCoreVersion ?? 'latest',
       '@mui/material': 'next',
       '@mui/material-nextjs': 'next',
       '@mui/icons-material': 'next',