# SciFi-XZBT Modular Architecture & Repackaging

## Directory Overview

```text
SciFi-XZBT/
├── index.html                  # Clean entry point (368 lines)
├── css/
│   └── style.css               # LCARS styling, CRT effects, theme colors (2,317 lines)
├── js/
│   ├── audio.js                # Web Audio synthesis, oscillators, sound engines (2,258 lines)
│   ├── config.js               # Starship presets, Universe registry & palettes (1,039 lines)
│   ├── visualizer.js           # Audio spectrum & Warp Core canvas rendering (643 lines)
│   ├── observation-bezels.js   # Procedural SVG Viewport bezels (TOS, Voyager, TNG, etc.) (271 lines)
│   ├── observation-engine.js   # Full observation mode canvas and simulation engine (2,784 lines)
│   └── app.js                  # DOM bindings, hotkeys, UI controllers & loop (3,962 lines)
├── dist/
│   └── SciFiAmbientDisplay_v4.html  # Standalone, single-file offline build
└── tools/
    ├── package.ps1             # 1-click script to build the standalone single-file HTML
    └── extract.ps1             # Original extraction script for reference
```

---

## Development Workflow

1. **Developing Modularly**:
   - Edit the specific CSS or JS files directly.
   - For audio or synthesizer logic, focus exclusively on `js/audio.js`.
   - For viewscreen bezels and framing, edit `js/observation-bezels.js`.
   - For observation celestial mechanics and canvases, edit `js/observation-engine.js`.
   - For presets and sound matrix tables, edit `js/config.js`.

2. **Repackaging to Single-File**:
   Run the packaging script from PowerShell:
   ```powershell
   powershell -ExecutionPolicy Bypass -File .\tools\package.ps1
   ```
   This immediately produces `dist\SciFiAmbientDisplay_v4.html`, combining all CSS and JS back into a self-contained, double-clickable offline file.