[experiments] Fully featured Menu + common infra

docs/src/app/(private)/experiments/[...slug]/page.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { type Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import glob from 'fast-glob';
+import { Sidebar } from '../infra/Sidebar';
+import classes from '../page.module.css';
+
+const currentDirectory = dirname(fileURLToPath(import.meta.url));
+const experimentsRootDirectory = resolve(currentDirectory, '..');
+
+interface Props {
+  params: Promise<{
+    slug: string[];
+  }>;
+}
+
+export default async function Page(props: Props) {
+  const { slug } = await props.params;
+
+  const fullPath = resolve(currentDirectory, `../${slug.join('/')}.tsx`);
+
+  try {
+    const Experiment = (await import(`../${slug.join('/')}.tsx`)).default;
+    return (
+      <React.Fragment>
+        <Sidebar experimentPath={fullPath} />
+        <main className={classes.main}>
+          <Experiment />
+        </main>
+      </React.Fragment>
+    );
+  } catch (error) {
+    notFound();
+  }
+}
+
+export async function generateStaticParams() {
+  const files = glob.globSync(
+    ['**/*.tsx', '!infra/**/*', '!**/page.tsx', '!**/layout.tsx'],
+    { cwd: experimentsRootDirectory },
+  );
+
+  return files.map((file) => {
+    return {
+      slug: file.replace(/\.tsx$/, '').split('/'),
+    };
+  });
+}
+
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params;
+  const { slug } = params;
+
+  return {
+    title: `${slug[slug.length - 1]} - Experiments`,
+  };
+}

docs/src/app/(private)/experiments/infra/EditPanel.module.css

@@ -0,0 +1,15 @@
+.linkButton {
+  all: unset;
+  display: block;
+  width: calc(100% + 8px);
+  box-sizing: border-box;
+  color: var(--color-foreground);
+  padding: 4px 8px;
+  border-radius: var(--radius-md);
+  margin-left: -8px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--color-gray-100);
+  }
+}

docs/src/app/(private)/experiments/infra/EditPanel.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { getDependencyFiles } from 'docs/src/components/Demo/DemoLoader';
+import { SandboxLink } from './SandboxLink';
+import classes from './EditPanel.module.css';
+
+export async function EditPanel(props: EditPanelProps) {
+  const { experimentPath, ...otherProps } = props;
+
+  const dependencies = await getDependencyFiles([experimentPath], true);
+
+  return (
+    <div {...otherProps}>
+      <h2>Edit</h2>
+      <SandboxLink files={dependencies} className={classes.linkButton}>
+        Open in CodeSandbox ({experimentPath})
+      </SandboxLink>
+    </div>
+  );
+}
+
+interface EditPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  experimentPath: string;
+}

docs/src/app/(private)/experiments/infra/ExperimentsList.module.css

@@ -0,0 +1,29 @@
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+
+  & a {
+    display: block;
+    text-decoration: none;
+    color: var(--color-foreground);
+    padding: 4px 8px;
+    border-radius: var(--radius-md);
+    margin-left: -8px;
+
+    &:hover {
+      background-color: var(--color-gray-100);
+    }
+  }
+
+  & h3 {
+    font-weight: 500;
+    color: var(--color-gray-500);
+    margin-top: 2px;
+  }
+}
+
+.groupItems {
+  margin-left: 8px;
+  margin-bottom: 0.75em;
+}

docs/src/app/(private)/experiments/infra/ExperimentsList.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import glob from 'fast-glob';
+import Link from 'next/link';
+import clsx from 'clsx';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { camelToSentenceCase } from 'docs/src/utils/camelToSentenceCase';
+import classes from './ExperimentsList.module.css';
+
+const currentDirectory = dirname(fileURLToPath(import.meta.url));
+const experimentsRootDirectory = resolve(currentDirectory, '..');
+
+const allExperimentFiles = glob.globSync(
+  ['**/*.tsx', '!infra/**/*', '!**/page.tsx', '!**/layout.tsx'],
+  { cwd: experimentsRootDirectory },
+);
+
+const groups: Record<string, { name: string; path: string }[]> = {};
+
+for (const key of allExperimentFiles) {
+  const segments = key.split('/');
+  let group: string;
+  let name: string;
+
+  if (segments.length === 1) {
+    group = '*';
+    name = segments[0];
+  } else {
+    group = camelToSentenceCase(segments[0]);
+    name =
+      segments[1].toLowerCase().startsWith(`${group.toLowerCase()}-`) &&
+      segments[1].length > group.length
+        ? segments[1].slice(group.length + 1).trim()
+        : segments[1].trim();
+  }
+
+  if (!groups[group]) {
+    groups[group] = [];
+  }
+
+  groups[group].push({
+    name: camelToSentenceCase(name.replace('.tsx', '').replace(/-/g, ' ')),
+    path: key.replace('.tsx', ''),
+  });
+}
+
+export function ExperimentsList(props: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div {...props} className={clsx(classes.list, props.className)}>
+      <h2>All experiments</h2>
+      {Object.keys(groups)
+        .sort()
+        .filter((key) => key !== '*')
+        .map((group: string) => {
+          return (
+            <div key={group}>
+              <h3>{group}</h3>
+              <ul className={classes.groupItems}>
+                {groups[group]
+                  .sort((a, b) => a.name.localeCompare(b.name))
+                  .map((experiment) => (
+                    <li key={experiment.path}>
+                      <Link href={`/experiments/${experiment.path}`}>
+                        {experiment.name}
+                      </Link>
+                    </li>
+                  ))}
+              </ul>
+            </div>
+          );
+        })}
+      {groups['*'] && (
+        <div>
+          <h3>Other</h3>
+          <ul className={classes.groupItems}>
+            {groups['*']
+              .sort((a, b) => a.name.localeCompare(b.name))
+              .map((experiment) => (
+                <li key={experiment.path}>
+                  <Link href={`/experiments/${experiment.path}`}>
+                    {experiment.name}
+                  </Link>
+                </li>
+              ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

docs/src/app/(private)/experiments/infra/SandboxLink.tsx

@@ -0,0 +1,35 @@
+'use client';
+import * as React from 'react';
+import { createCodeSandbox } from 'docs/src/blocks/createCodeSandbox/createCodeSandbox';
+import { DemoFile } from 'docs/src/blocks/Demo';
+
+export function SandboxLink(props: SandboxLinkProps) {
+  const { files, ...otherProps } = props;
+
+  const handleClick = React.useCallback(() => {
+    createCodeSandbox({
+      demoFiles: files,
+      demoLanguage: 'ts',
+      title: 'Base UI experiment',
+      dependencies: {
+        react: '^19',
+        'react-dom': '^19',
+      },
+      devDependencies: {
+        '@types/react': '^19',
+        '@types/react-dom': '^19',
+        'react-scripts': 'latest',
+      },
+    });
+  }, [files]);
+
+  return (
+    <button type="button" {...otherProps} onClick={handleClick}>
+      Open in CodeSandbox
+    </button>
+  );
+}
+
+interface SandboxLinkProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  files: DemoFile[];
+}