Merge pull request #16 from hothsys/playwright-fixes

Short refactor and Playwright fixes

Author: hgosalia

CLAUDE.md

@@ -0,0 +1,65 @@
+---
+name: matrix-project
+description: CLAUDE.md for the Matrix project - local-first travel photo mapping app
+metadata:
+  project_type: travel-photo-mapping
+  test_framework: playwright
+---
+
+# Matrix Project
+
+A local-first travel photo mapping app. Runs entirely in the browser with no account needed.
+
+## Running the App
+
+```bash
+# Start server (default port 8765)
+python3 serve.py
+
+# Start on custom port
+python3 serve.py 8080
+```
+
+## Running Tests
+
+```bash
+python3 serve.py --run-tests
+```
+
+## Project Structure
+
+```
+matrix/
+├── assets/                # Images/gifs for README
+├── css/                   # Stylesheets
+├── js/                    # JavaScript modules
+├── tests/
+│   └── fixtures/          # Test images (tokyo.jpg, paris.jpg, nyc.jpg, etc.)
+├── vendor/                # Downloaded dependencies (maplibre-gl, fonts, etc.)
+├── serve.py               # Local server with auto-save
+├── index.html             # Main app
+├── sw.js                  # Service worker for tile caching
+├── dependencies.json      # Vendor dependency manifest
+└── matrix-data.json      # Auto-save backup (runtime)
+```
+
+## Runtime Directories
+
+- `matrix-photos/` - Full-size images and thumbnails
+- `matrix-tiles/` - Cached map tiles
+
+## Dependencies
+
+Vendor dependencies defined in `dependencies.json`:
+- `maplibre-gl` - Map visualization library
+- `supercluster` - Clustering library
+- `exif-js` - EXIF metadata extraction
+
+## Testing
+
+Test images are stored in `tests/fixtures/`:
+- `tokyo.jpg`
+- `paris.jpg`
+- `nyc.jpg`
+- `noexif.jpg`
+- `nogps.jpg`

README.md

@@ -204,6 +204,15 @@ The satellite and 3D Terrain views use separate raster tile sources unrelated to
 
 Everything stays **100% local**. No data is sent anywhere except OpenStreetMap/Nominatim for place lookups. No login required.
 
+## Demo Mode
+
+The app includes two automated demos you can trigger with keyboard shortcuts:
+
+| Shortcut | Description |
+|---|---|
+| **Ctrl+Shift+D** | App walkthrough — automated demo with fake cursor that flies around the map, pins locations, switches tabs, and opens photos in lightbox. Demo pins are automatically cleaned up when the demo ends. |
+| **Ctrl+Shift+G** | Globe rotation — switches to globe view and spins it 3 times along the equator. Uses GPU-rendered dots instead of DOM markers for smooth animation without jitter. Press again to stop early. |
+
 ---
 
 Built with [Claude Code](https://claude.ai/claude-code) using Claude Opus 4.6  

index.html

@@ -200,6 +200,9 @@
 <script src="js/albums.js"></script>
 <script src="js/modals.js"></script>
 <script src="js/search.js"></script>
+<script src="js/lightbox.js"></script>
+<script src="js/playback.js"></script>
+<script src="js/export.js"></script>
 <script src="js/media.js"></script>
 <script src="js/data.js"></script>
 <script src="js/demo.js"></script>