[Website] IDE-like PHP playground (#2699)

## Motivation for the change, related issues

Introduces a beta version of PHP Playground that has a file explorer and
a built-in terminal with `php`, `wp`, and `composer` commands available:

<img width="3450" height="1988" alt="CleanShot 2025-09-29 at 01 55 42@2x
(1)"
src="https://github.com/user-attachments/assets/a54c85aa-322c-4025-82b6-44c733c90f3f"
/>

It does not replace the existing PHP Playground, only introduces a new
beta version. We won't replace the existing one until a few people
confirm the new one is useful and stable.

After merging and deploying, it will be available at
https://playground.wordpress.net/beta-php-playground.html

This PR supersedes
#2694

## Implementation details

This PR ships mostly new code and updates code unused anywhere else. The
few changes it makes to the shared configuration are non-destructive and
mostly don't affect the existing packages.

### FilePickerTree component

Ships a substantial update to the FilePickerTree component to:

* Accept an asynchronous filesystem 
* Consider asynchronous nature of operations in interactions such as
initial loading, expanding tree nodes, renaming files
* Have contextual menu with delete, rename, create file/dir operations
* Support moving nodes via drag&drop 
* Support "uploading" files from the desktop via drag&drop 

It seems like it breaks the "type to focus" interaction. That's fine,
we'll fix it in a follow-up. That component isn't used anywhere else at
the moment so we're not breaking any other page.

It also ships a few e2e tests to be expanded

### New package

This PR ships an additional `website-extras` package with the beta
version of PHP Playground. Why a new package? Because the `website`
packages is built offline-first. We have manifest.json automations in
place for PWAs so browsers can download and cache most of the built
files. Maintaining a clear separation between required and optional
files is a substantial burden. Hence, this PR takes another approach
entirely and clearly separates the offline-first parts from the parts we
don't need to ask the client to download pre-emptively.

The nx build pipeline will build the `remote` package, the `website`
package, build the list of assets required for offline mode, prepare the
website deployment, and only then it will merge the `website-extras`
into that deployment directory.

## Testing Instructions (or ideally a Blueprint)

Go to http://127.0.0.1:5400/website-extras/beta-php-playground.html and
play with the beta PHP Playground.

Author: adamziel

.eslintrc.json

@@ -29,11 +29,13 @@
 				"no-inner-declarations": 0,
 				"no-use-before-define": "off",
 				"react/prop-types": 0,
+				"react-hooks/exhaustive-deps": 0,
 				"no-console": 1,
 				"no-empty": 0,
 				"no-async-promise-executor": 0,
 				"no-constant-condition": 0,
 				"no-nested-ternary": 0,
+				"jsx-a11y/accessible-emoji": 0,
 				"jsx-a11y/click-events-have-key-events": 0,
 				"jsx-a11y/no-static-element-interactions": 0,
 				"comment-length/limit-single-line-comments": [

package-lock.json

@@ -66,6 +66,18 @@
 	},
 	"private": true,
 	"dependencies": {
+		"@codemirror/autocomplete": "6.19.0",
+		"@codemirror/commands": "6.8.1",
+		"@codemirror/lang-css": "6.3.1",
+		"@codemirror/lang-html": "6.4.10",
+		"@codemirror/lang-javascript": "6.2.4",
+		"@codemirror/lang-json": "6.0.2",
+		"@codemirror/lang-markdown": "6.3.4",
+		"@codemirror/lang-php": "6.0.2",
+		"@codemirror/language": "6.11.3",
+		"@codemirror/search": "6.5.11",
+		"@codemirror/state": "6.5.2",
+		"@codemirror/view": "6.38.3",
 		"@preact/signals-react": "1.3.6",
 		"@reduxjs/toolkit": "2.6.1",
 		"@types/xml2js": "0.4.14",
@@ -87,6 +99,7 @@
 		"react-dom": "18.3.1",
 		"react-hook-form": "7.53.0",
 		"react-redux": "8.1.3",
+		"react-resizable-panels": "3.0.6",
 		"react-transition-group": "4.4.5",
 		"sha.js": "2.4.11",
 		"tmp-promise": "3.0.3",
@@ -183,6 +196,7 @@
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"typescript": "5.4.5",
+		"@playwright/test": "1.47.1",
 		"ws": "^8.18.0"
 	},
 	"workspaces": [

package.json

@@ -3,3 +3,6 @@ export const remoteDevServerPort = 4400;
 
 export const websiteDevServerHost = '127.0.0.1';
 export const websiteDevServerPort = 5400;
+
+export const websiteExtrasDevServerHost = '127.0.0.1';
+export const websiteExtrasDevServerPort = 6400;

packages/playground/build-config.ts

@@ -0,0 +1,56 @@
+import {
+	defineConfig,
+	devices,
+	type PlaywrightTestConfig,
+} from '@playwright/test';
+
+const baseURL =
+	process.env.PLAYWRIGHT_TEST_BASE_URL || 'http://127.0.0.1:5174/';
+
+export const playwrightConfig: PlaywrightTestConfig = {
+	testDir: './tests',
+	/* Run tests in files in parallel */
+	fullyParallel: false,
+	/* Fail the build on CI if you accidentally left test.only in the source code. */
+	forbidOnly: !!process.env.CI,
+	retries: 3,
+	workers: 3,
+
+	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
+	reporter: [['html'], ['list', { printSteps: true }]],
+	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+	use: {
+		/* Base URL to use in actions like `await page.goto('/')`. */
+		baseURL,
+		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+		trace: 'on-first-retry',
+		actionTimeout: 120000,
+		navigationTimeout: 120000,
+	},
+
+	timeout: 300000,
+	expect: { timeout: 60000 },
+
+	/* Configure projects for major browsers */
+	projects: [
+		{
+			name: 'chromium',
+			use: {
+				...devices['Desktop Chrome'],
+			},
+		},
+	],
+
+	/* Run your local dev server before starting the tests */
+	webServer: {
+		command:
+			'npx nx run playground-components:dev -- --host 127.0.0.1 --port 5174',
+		url: 'http://127.0.0.1:5174/',
+		reuseExistingServer: !process.env.CI,
+	},
+};
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig(playwrightConfig);