chore: updated documentation for playground"

Author: norberttech

web/landing/docs/playground/playground-tabs.md

@@ -0,0 +1,55 @@
+# playground_tabs_controller.js
+
+Manages tabbed interface for switching between code editor and file preview.
+
+## Outlets
+- `wasm` - PHP WASM runtime for reading files
+- `code-editor` - Code editor instance
+
+## Targets
+- `tabBar` - Container for tab buttons
+- `codeTab` - Code editor tab button
+- `previewTab` - Preview tab button
+- `previewTabName` - Span showing preview file name
+- `codePanel` - Code editor container
+- `previewPanel` - Preview content container
+- `downloadBtn` - Download button for preview file
+
+## Values
+- `activeTab` (String, default: 'code') - Currently active tab ('code' or 'preview')
+- `previewFile` (String, default: '') - Path of currently previewed file
+
+## Public Methods
+
+### `switchToCode(event?: Event): void`
+Switches to code editor tab.
+
+### `switchToPreview(event?: Event): void`
+Switches to preview tab (only if a file is being previewed).
+
+### `openFile(event: Event): Promise<void>`
+Opens a file from the workspace in the preview tab.
+
+**Parameters:**
+- `event.currentTarget.dataset.filePath` - Path relative to `/workspace/`
+
+Special case: If filePath is `/code.php`, switches to code tab instead of opening preview.
+
+### `openFileFromDropdown(event: Event): void`
+Opens a file selected from the mobile dropdown. Resets dropdown selection after opening.
+
+### `closePreview(event?: Event): void`
+Closes the preview tab and switches to code tab.
+
+### `downloadPreviewFile(event?: Event): void`
+Downloads the currently previewed file to the user's computer.
+
+## Syntax Highlighting
+
+Uses CodeMirror 6 for read-only preview with syntax highlighting:
+- `.php`, `.phar` - PHP syntax
+- `.json` - JSON syntax
+- `.xml` - XML syntax
+- Other extensions - Plain text
+
+## File: `playground_tabs_controller.js`

web/landing/docs/playground/playground-workspace.md

@@ -7,6 +7,11 @@ Display and navigate the WASM virtual filesystem.
 - `code-editor` - Code editor
 - `playground` - Main playground controller
 
+## Targets
+- `tree` - Container for the file tree (desktop view)
+- `dropdown` - Select element for file selection (mobile view)
+- `emptyState` - Empty state message when no files
+
 ## Public Methods
 
 ### `refreshTree(): Promise<void>`
@@ -60,11 +65,6 @@ Returns promise that resolves when tree is rendered for first time.
 **Payload:** `{ fileCount: number }`
 **Bubbles:** Yes
 
-### `playground-workspace:file-selected`
-**Trigger:** User clicks file in tree
-**Payload:** `{ path: string, content: string }`
-**Bubbles:** Yes
-
 ## Value Configuration
 
 - `rootPath` - Root directory to display (default: `/workspace`)
@@ -75,8 +75,9 @@ Returns promise that resolves when tree is rendered for first time.
 
 - Files sorted alphabetically
 - Folders displayed before files
-- Clicking file previews it via `playground#previewFile()`
-- Tree auto-refreshes on filesystem changes
+- Clicking file in tree opens it via `playground-tabs#openFile()`
+- Selecting file in dropdown (mobile) opens it via `playground-tabs#openFileFromDropdown()`
+- Tree and dropdown auto-refresh on filesystem changes
 - Shows empty state when no files present
 
 ## File: `playground_workspace_controller.js`

web/landing/docs/playground/playground.md

@@ -7,6 +7,7 @@ Main orchestrator and event hub for the playground.
 - `code-editor` - Code editor
 - `turnstile` - CAPTCHA widget
 - `playground-output` - Output display
+- `playground-tabs` - Tab navigation between code editor and file preview
 
 ## Public Methods
 
@@ -22,17 +23,11 @@ Displays loading progress with message and percentage.
 ### `hideLoading(): void`
 Hides loading indicators and shows main UI.
 
-### `previewFile(event: Event): Promise<void>`
-Preview file from workspace. Reads file via WASM, applies syntax highlighting with Prism, and displays in preview panel.
+### `onActionStarted(): void`
+Called when any action button is pressed. Disables action buttons, shows spinner, and switches to code tab.
 
-**Parameters:**
-- `event.currentTarget.dataset.filePath` - Path relative to `/workspace/`
-
-### `closeFilePreview(event?: Event): void`
-Closes the file preview panel.
-
-### `downloadPreviewFile(event?: Event): void`
-Downloads currently previewed file to user's computer.
+### `onActionFinished(): void`
+Called when action completes. Re-enables action buttons and hides spinner.
 
 ## Events Listened