[Website] Use the shared file explorer in the Blueprint editor

[adamziel]

What it does

Uses the shared FileExplorerSidebar in the Blueprint editor, so Blueprint bundles get the same recursive local-directory import and read-only behavior as the reusable file editor surface.

The Blueprint editor's private 512-line explorer and 89-line stylesheet are deleted. currentPath now drives tree selection directly, so the parallel treeFocusPath state is gone as well.

The shared toolbar uses three consistently sized icon buttons, keeping the actions on one line in the narrow Blueprint sidebar. Each button retains an accessible name and browser tooltip.

This PR does not change Site Manager persistence, OPFS lifecycle behavior, or editor ownership. Those concerns do not belong in a component-wiring change.

Rationale

There is no useful distinction between the two explorers. The private Blueprint copy duplicated uploads, previews, selection, and styling, and that duplication is exactly why local directories worked in one editor but not the other.

The shared explorer from #3973 provides the required import and read-only contracts. This PR replaces the duplicate caller and keeps its controls usable at the Blueprint sidebar width.

Testing instructions

npm exec nx -- run-many -t typecheck,lint \
  --projects=playground-components,playground-website
npm exec nx -- run playground-components:build
npm exec nx -- run playground-website:e2e:playwright -- \
  --project chromium \
  --grep 'should edit a blueprint in the blueprint editor and recreate the playground'

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Replaces the Blueprint editor’s bespoke file explorer with the shared FileExplorerSidebar / FilePickerTree implementation so Blueprint bundles get the same recursive directory import and read-only behavior as the reusable file editor surface.

Changes:

• Delete Blueprint editor–specific file explorer component + CSS and wire the editor to the shared components
• Extend shared explorer/tree to support read-only mode and unified background drop + file-input upload importing
• Add/adjust Playwright coverage to validate the shared upload/import surface appears and supports nested directory drops

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/playground/website/src/components/blueprint-editor/file-explorer.module.css	Deleted duplicated Blueprint explorer styles (now using shared explorer surface).
packages/playground/website/src/components/blueprint-editor/file-explorer-sidebar.tsx	Deleted duplicated Blueprint explorer implementation (replaced by shared component).
packages/playground/website/src/components/blueprint-editor/BlueprintBundleEditor.tsx	Switched Blueprint editor to shared FileExplorerSidebar and removed treeFocusPath state.
packages/playground/website/playwright/e2e/website-ui.spec.ts	Added assertion that the shared “Upload files” action is visible in Blueprint editor.
packages/playground/components/src/PlaygroundFileEditor/file-explorer-sidebar.tsx	Added upload UI + background drop handling and read-only plumbing; sync tree selection with currentPath.
packages/playground/components/src/FilePickerTree/index.tsx	Added readOnly mode, exposed import APIs, improved path normalization and CSS selector escaping, and refactored drop import flow.
packages/playground/components/e2e/tests/playground-file-picker.spec.ts	Added e2e coverage for renaming with backslashes/spaces.
packages/playground/components/e2e/tests/playground-file-editor.spec.ts	Added e2e coverage for dropping a nested host directory onto the explorer background.

Comments suppressed due to low confidence (2)

packages/playground/components/src/FilePickerTree/index.tsx:681

• The previous logic rejected dropping a node onto itself (destinationDir === sourcePath) in addition to rejecting descendant drops. After switching to isParentOf(...), the self-drop check is gone, which can allow attempting to move a folder into itself (e.g., drop /a onto /a → move to /a/a), typically resulting in a failing/undefined filesystem move. Add an explicit destinationDir === sourcePath guard (or ensure isParentOf treats equality as invalid) before allowing the drop.

		if (!destinationDir) {
			return { allowed: false, state: 'invalid', destination: null };
		}
		if (sourcePath) {
			if (isParentOf(sourcePath, destinationDir)) {
				return { allowed: false, state: 'invalid', destination: null };
			}
		}
		return { allowed: true, state: 'valid', destination: destinationDir };

packages/playground/components/src/PlaygroundFileEditor/file-explorer-sidebar.tsx:1

• This <button> is missing an explicit type=\"button\". If this sidebar is ever rendered inside a <form>, the default type=\"submit\" can trigger unintended submissions. Set type=\"button\" on the create-file and create-folder buttons (the upload button already does this).

import React, {

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.