Embed the xNet DevTools in every demo (and flag it on /demos) - #506
Merged
Conversation
All three demos (and therefore both iframes on the site's /demos page) now ship the real DevTools inspector — the floating wrench (or Ctrl/Cmd+ Shift+D) opens the Data/Changes/Logs/Performance panels against the demo's live store and sync. Tailwind is added scoped to the devtools/ui sources only (preflight off; demos stay plain CSS), design tokens come from @xnetjs/ui, an html.dark class tracks prefers-color-scheme, and workers build as ES modules (the devtools pull in the canvas layout worker). Signed-off-by: xNet Test <test@xnet.dev>
Signed-off-by: xNet Test <test@xnet.dev>
Signed-off-by: xNet Test <test@xnet.dev>
Contributor
|
Preview removed for PR #506. |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Follow-up to #494/#502/#504, user request: the real xNet DevTools inspector now ships in all three hosted demos — cursor party, Connect Four, collab todo — and therefore in both paired iframes on the /demos page, which also gained a hint line pointing at the wrench/⌘⇧D.
How:
XNetDevToolsProvider(same as the workbench) wraps each demo inside its per-roomXNetProvider. The demos app gains Tailwind scoped to the devtools/ui sources only (preflight off — the demos' own plain CSS is untouched),@xnetjs/uidesign tokens, anhtml.darkclass synced toprefers-color-scheme, and ES-format workers (the devtools pull in the canvas layout worker).Verified on a locally-assembled Pages tree: the wrench FAB renders
position:fixedin all demos and in both /demos iframes; the panel opens with Data/Changes/Logs/Performance against the live store (screenshot in session: room node visible in the Data panel, store+sync connected).🤖 Generated with Claude Code