Add mobile layout mode for timeline editor

[smcga]

Motivation

• Provide a touch-friendly, mobile-first editor layout option so the timeline can be edited on phones without changing the existing desktop editor UX.
• Keep desktop editor behavior unchanged by making mobile editing opt-in and pluggable.
• Allow quick entry for QA/development via query param or debug overlay control for easier testing on devices.

Description

• Add optional layoutMode?: "desktop" | "mobile" to EditorInit and a helper getEditorLayoutClass that returns "editor editor--mobile" for mobile mode and "editor" otherwise.
• Apply getEditorLayoutClass(init.layoutMode) to the editor container and keep the editor HTML generation unchanged so timeline logic and desktop layout are preserved.
• Add a debug overlay Editor layout selector in index.html and wire ?editorLayout=mobile query param handling and runtime layout switching in src/main.ts that re-initializes the editor with the chosen layout.
• Add mobile-specific CSS under .editor--mobile to stack workspace/scenes/inspector and improve preview sizing, update README.md to document the new entry points, and add a unit test for the layout-class helper in src/editor/EditorRoot.test.ts.

Testing

• Ran unit tests for the editor module with npm test -- src/editor/EditorRoot.test.ts, which passed (66 tests, all green).
• No timeline files were modified, so sacred musical anchors and timeline timings were not affected.

---

Codex Task

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
codexperimental	Ready	Preview, Comment	Apr 29, 2026 11:50am