[Website] Blueprint bundle editor #2942
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
AsyncWritableFilesystem requires EventTarget methods (addEventListener, removeEventListener, dispatchEvent). The test harness class was missing the EventTarget base class.
Moves the toolbar buttons into the same row as the file path, making better use of horizontal space. The layout wraps responsively on narrow screens.
…rectory type
When saving a temporary site to OPFS, the blueprint bundle is now persisted
alongside the site data. The originalBlueprintSource is set to { type: 'bundle-directory' }
to indicate the bundle should be loaded from the site's storage directory.
On site load, if originalBlueprintSource.type is 'bundle-directory', the
PersistedBlueprintBundle class is used to load the full bundle from OPFS,
allowing access to bundled resources (not just the JSON declaration).
…ly and avoid duplication - Pass originalBlueprintSource directly to JSON.stringify instead of creating a new object - Don't store originalBlueprint when source is bundle-directory (the bundle is stored separately) - This ensures the source type is correctly persisted and we don't duplicate the blueprint data
…compatibility PersistedBlueprintBundle now implements the full FilesystemBackend interface (isDir, fileExists, listFiles, readFileAsBuffer) so it can be used directly with WritableFilesystem in the blueprint editor. When loading a stored site with a persisted bundle, the editor now checks if originalBlueprint is already a filesystem backend and uses it directly instead of trying to populate from blueprint JSON.
Collaborator
Author
|
The remaining CI failure doesn't seem to be related. Let's get it in and continue iterating in smaller, targeted follow-up PRs. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Motivation for the change, related issues
Support editing Blueprint bundles in the Blueprint editor:
CleanShot.2025-11-28.at.22.55.30.mp4
The new Blueprint editor provides a complete editing experience. When you open the editor panel, you
see a file tree on the left showing all the files in your Blueprint bundle — the blueprint.json
declaration plus any bundled resources. Selecting a file opens it in a code editor with syntax
highlighting. For JSON files, you even get autocomplete suggestions based on the Blueprint schema.
The editor autosaves your work to the browser's Origin Private File System (OPFS). If you close the
tab and come back later, Playground will ask if you'd like to restore your previous editing session.
This means you won't lose work if you accidentally close the browser.
When you save the site to OPFS, the Blueprint bundle is saved alongside the site data.
Architecture changes
This work required consolidating filesystem abstractions that had grown organically across packages.
The storage package now provides a unified set of interfaces for working with filesystems, whether
they're backed by OPFS, in-memory storage, or remote URLs. The EventedFilesystem wrapper adds change
event support for UI reactivity, while AsyncWritableFilesystem defines the interface that UI
components expect.
Testing Instructions (or ideally a Blueprint)