feat(sandbox): add standalone interactive test sandbox with prototype overrides - #431
feat(sandbox): add standalone interactive test sandbox with prototype overrides#43110tribu wants to merge 1 commit into
Conversation
… overrides
Introduce a self-contained developer sandbox under `sandbox/` to test and
preview the Helios custom card locally with simulated Home Assistant states,
without modifying any production files in `src/` or `dist/`.
### What this adds:
1. **Interactive Sandbox Environment (`sandbox/`)**:
- `sandbox/index.html`: Responsive preview stage (Desktop, Tablet, Mobile)
with collapsible sidebar controls.
- `sandbox/sandbox.css`: Theme-aware styling (dark / light toggle).
- `sandbox/mock-hass.ts`: Realistic HassMock state manager simulating solar PV,
battery SoC/power, grid import/export, and weather conditions.
- `sandbox/sandbox-app.ts`: Orchestrator with Card Settings, Live Simulation,
and YAML editor tabs.
2. **Experimental Prototype Overrides (Non-intrusive)**:
All features are implemented as runtime overrides in `sandbox-app.ts`
leaving `src/` and `dist/` 100% untouched:
- `arc-zoom`: Dynamic scaling of the sun/moon arc radius ([0.25, 2.0]).
- Continuous `scene-zoom`: Smooth continuous zoom ([0.25, 2.0]).
- `battery-above-arc`: Shadow DOM CSS elevation of chips/pills over the 3D arc.
- Miniature tilt-shift / vignette overlay.
- `sandbox/git-changes.patch`: Reference patch showing direct `src/` implementation.
### How to test:
1. Run `npm run dev`
2. Open `http://localhost:5173/sandbox/`
|
Hi Christophe, Well, it's a big PR! I went through the whole thing this evening, the sandbox and the patch you put next to it, and I want to give you a proper answer rather than a quick one, because there is real work in there and a couple of things I genuinely want to keep. Let me start with the one that made me smile: you found a bug. Now the honest part. I can't merge the PR as it stands, and I'd rather explain why than leave you guessing :/ The first reason is that the interesting content lives in The second is that the patch mixes things of very different nature. The shadow keys are a fix. And there is one I have to say no to, and I want to be clear about the reason because it's a principle rather than a taste. About the sandbox itself. You may not have seen it because it lives in another repository (my website), but the website already has one: So, concretely, two ways forward, and you pick. Either you split this into three: a PR with the shadow keys fix plus a test, one issue per proposed option so I can look at each on its own, and, if you want, a slimmed-down sandbox PR along the lines above. Or, if you'd rather not spend more evenings on it, I do the split myself: I take the shadow fix into 2026.9.5 right away and open the issues from your descriptions, and every piece that comes from your work is credited to you, in the commit and in the changelog, as the contributor it came from. Just tell me which you prefer :) Either way, thank you very much for digging into the card that deeply, it's a incredible work. Cheers ;) ReikanYsora / Jérôme |
Introduce a self-contained developer sandbox under
sandbox/to test andpreview the Helios custom card locally with simulated Home Assistant states,
without modifying any production files in
src/ordist/.What this adds:
Interactive Sandbox Environment (
sandbox/):sandbox/index.html: Responsive preview stage (Desktop, Tablet, Mobile)with collapsible sidebar controls.
sandbox/sandbox.css: Theme-aware styling (dark / light toggle).sandbox/mock-hass.ts: Realistic HassMock state manager simulating solar PV,battery SoC/power, grid import/export, and weather conditions.
sandbox/sandbox-app.ts: Orchestrator with Card Settings, Live Simulation,and YAML editor tabs.
Experimental Prototype Overrides (Non-intrusive):
All features are implemented as runtime overrides in
sandbox-app.tsleaving
src/anddist/100% untouched:arc-zoom: Dynamic scaling of the sun/moon arc radius ([0.25, 2.0]).scene-zoom: Smooth continuous zoom ([0.25, 2.0]).battery-above-arc: Shadow DOM CSS elevation of chips/pills over the 3D arc.sandbox/git-changes.patch: Reference patch showing directsrc/implementation.How to test:
npm run devhttp://localhost:5173/sandbox/