Implement unified menu authoring interface#23
Merged
ScottMorris merged 32 commits intomainfrom Apr 8, 2026
Merged
Conversation
- Add the initial Concept 1 mockup for the menu editor, exploring a scene-first approach. - Help the team visualize an editor that feels more like a composition tool than a property sheet.
- Add the second menu editor mockup concept, focusing on component reuse. - Explore how a library-driven approach might speed up authoring for complex discs.
- Add a new concept mockup focusing on the multi-menu navigation map. - Provide a bird's-eye view of how menus and titles connect to help users understand disc flow.
- Add a mockup exploring a timeline-focused interface for motion menus. - Ensure the architecture can handle time-based events and transitions gracefully.
- Add a mockup for the compile preview and diagnostics overlay. - Help users visualize how their Blu-ray designs will degrade on DVD hardware before compiling.
- Update styling across multiple mockups to remove all-caps text treatments. - Improve readability and adhere to the project's calm computing aesthetic.
- Relocate Yuli's initial mockups into a dedicated `mockups/yuli` directory. - Update all CSS references and create an index page to keep the workspace organized.
- Move the first set of mockups into a `set-1` subfolder. - Prepare the directory structure for iterative design sets.
A complete four-pane workspace inspired by airport terminals: layers/components on the left, adaptive inspector on the right, central canvas with mode switcher (Design/Bind/Route/Compile), and a collapsible motion timeline at the bottom. Includes the shared `design-system.css` for set-2 mockups. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
A growth-oriented editor where beginners choose a seed template (Classic Main Menu, Chapter Grid, Audio Setup, etc.) and progressively unlock customisation steps: Theme, Layout, Bind Actions, Motion, Compile. Each step reveals new options as the design matures. Generated content stays editable. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
A bird's-eye transit-map view of the entire disc's menu system. All menus shown as thumbnail cards with SVG connection lines visualising showMenu, playTitle, and return routes. Click any menu to see its details in the right panel. Supports VMGM/VTS domain badges, auto-pagination indicators, and full diagnostics per menu. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
A side-by-side triple-canvas view showing Normal, Focus, and Activate states for each button. Left panel exposes the DVD 4-colour CLUT palette. Right inspector lets users edit per-state visual treatments and shows exactly how authored styles compile down to DVD subpicture overlays. Includes highlight animation keyframe editor for motion menus. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
**What** - Add a shared visual system for Yuli set 3 menu editor explorations. - Add the set index plus the Concourse, Atelier, and Observatory concepts. - Frame the concepts around scene authoring, routing clarity, motion awareness, and compile honesty. **Why** - Establish a coherent foundation for comparing multiple full-featured menu editor directions. - Ground the mockups in the current Spindle menu-system spec and the calm-computing direction used across Liminal HQ.
**What** - Add the Atlas concept for multi-menu orchestration, pagination, and titleset-aware wayfinding. - Add the Screening Room concept for authored-versus-compiled review, motion timing, and downgrade transparency. - Complete the five-mockup set with stronger coverage of generation, routing, and compile trust. **Why** - Round out the concept set so it covers both early authoring and late-stage verification needs. - Give Spindle a broader range of calm, user-friendly menu editor directions to compare.
**What** - Add a set-3a support stylesheet that imports the live Spindle app design system and extends it for mockup layouts. - Add the set index plus the Dockyard, Rail, and Signal concepts. - Keep the concepts grounded in the current app shell, surfaces, typography, and accent colours. **Why** - Explore menu editor alternatives that feel shippable within today’s Spindle visual system. - Give the team grounded variants to compare without requiring a full design-language reset.
**What** - Add the Foundry concept for generated menu families, pagination, and titleset-aware preset workflows. - Add the Booth concept for app-native compile review, motion timing, and actionable DVD diagnostics. - Complete the set-3a series with concepts that cover both generation and final verification. **Why** - Round out the app-aligned concept set so it supports both upstream authoring and downstream compile trust. - Give the team grounded alternatives that can inform near-term product decisions.
**What** - Add a smaller set-3b exploration with three app-native menu editor concepts. - Remove separate Bind and Remote views from the concepts and fold those behaviours into the main editor through trays, contextual peeks, and inline interaction rails. - Add an index and support stylesheet for the Harbour, Lantern, and Junction variants. **Why** - Explore whether Spindle can keep users in one primary scene-editing surface without hiding route logic or semantic actions. - Give the team more opinionated, lower-mode-overhead directions to compare against the earlier sets.
**What** - Add a new `set-2m` folder with a merged Greenhouse and Cartographer concept. - Combine the left-side menu and template rail with a content-area editor that can switch between Design Studio and Menu Map views. - Reframe templates as optional seeds while preserving full manual control over menu layout and linking. **Why** - Capture the strongest parts of concepts 2 and 3 in a more practical editor direction. - Keep menu switching fast inside the editor while giving users a clear way to inspect how menus connect.
A visual wiring board for connecting buttons to actions across all menus. Left panel lists all interactive nodes grouped by menu. Central viewport shows source-to-target wires with colour-coded action types (playTitle, showMenu, setAudio, sequence). Right inspector provides action builder with sequence chaining for setup menus, navigation grid, and live DVD command preview showing compiled VM instructions. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Links to all 5 concepts with descriptions, feature tags, and navigation back to set-1. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Content-area-only editor blending Concept 2's template-first approach with Concept 3's navigation map into a unified workspace. Features: - Left panel: scope-grouped menu list with thumbnails, mini navigation map showing menu connections, and collapsible template picker - Canvas viewport with draggable button nodes, resize handles, safe area guides, and floating tool palette (Select/Text/Button/Image) - Mode switcher: Design / Bind / Route / Compile with route overlay - Toggleable inspector: transform, visual states (Normal/Focus/Activate), action binding, navigation directions, diagnostics - Full JavaScript interactivity: drag-to-move with live inspector sync, keyboard shortcuts (V/T/B/I/S/Escape), state chip feedback on canvas Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Links to the blended Greenhouse + Cartographer menu editor with description of the blending philosophy and feature overview. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
… map Refines set-2a by removing Bind and Route as separate modes: - Action binding is now an always-visible inspector section with inline type/target selects and action badges on canvas buttons - Navigation arrows are a canvas toggle (N key) instead of a mode - Compile becomes a Preview overlay showing DVD output stats (button count, CLUT usage, action resolution, safe area compliance) - Left nav menu items show incoming/outgoing connection counts; inspector has a Connections section with click-to-jump links - Editor/Map toggle provides a full bird's-eye navigation map view with colour-coded connection lines (`showMenu`, `playTitle`, `return`, `setAudio`) and a connection-focused inspector - Double-click map cards to jump into the editor for that menu Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Three key additions and one fix: - **Mini navigation map restored** in the left nav between menu list and template picker (was present in 2a but missing in 2b). Shows menu nodes with connection lines and an "Expand" button to switch to the full map view. - **Map view arrows fixed** — SVG connection paths now route cleanly between card edge midpoints using gentle cubic beziers. Cards laid out with VMGM on the left, VTS stacked on the right, title targets below. No more overlapping or looping curves. - **Auto Navigation** — toolbar button (`Auto Nav`) and inspector section button (`Recalculate from positions`) that compute geometric Up/Down/Left/Right navigation for all buttons, mirroring the current `autoCalculateNavigation()` in Spindle. Auto/Manual toggle badge in the Navigation inspector section header. - **Comprehensive HTML comments** throughout for implementation planning: architecture overview, section markers, data model notes, card layout coordinate reference for SVG paths, JS section index, and implementation hints per feature area. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
**Map SVG connections now dynamic** — Lines are computed from actual card DOM positions via `getCardEdge()` + `drawMapConnections()`. Bezier curves route cleanly between edge midpoints at any viewport size. Redraws on view switch, resize, and inspector toggle. **Background editing** — New inspector section with Solid/Image/Video mode chips. Solid: colour swatch + hex input. Image: asset picker + fit mode. Video: asset, duration, audio source, loop count — ties into the motion menu spec's `motionDurationSecs`, `motionAudioAssetId`, and `motionLoopCount` fields. **Auto-generate menus** (GitHub issue #20) — "Generate Menus" section in the left nav creates data-driven menus from project metadata: - Chapter Grid: auto-paginated from title chapters (12-18 per page) - Audio Setup: from title audio streams - Subtitle Setup: from subtitle streams Pre-wires navigation and actions per the issue spec. **Bug fixes:** - Canvas now re-centres when inspector is toggled (removed CSS `transition` on `grid-template-columns` that blocked reflow; added explicit `.inspector { display: none }` in no-inspector state) - Map toolbar now has inspector toggle button matching the editor - Map inspector can be shown/hidden independently with SVG redraw Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Extract inline CSS to `menu-editor.css` (1476 lines) and inline JS to `menu-editor.js` (601 lines), leaving `menu-editor.html` as a clean structural shell (1064 lines). Each concern is now independently editable, making the growing mockup easier to work with. No functional changes — the same HTML, CSS, and JS content, just separated into their own files with external `<link>` and `<script src>` references. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Inspector enhancements: - All sections independently collapsible with chevron toggles - Expand All / Collapse All buttons in inspector header - Button Style section: per-state (Normal/Focus/Activate) controls for background fill, border colour/width/radius, padding, shadow/glow - Text Style section: font family, size, weight, italic, colour, alignment, letter-spacing, text-shadow — for text nodes and button labels Background and motion menus: - Audio-only background mode for still menus with background music - Audio track sub-section on image backgrounds - Video segment markers: intro/loop regions with visual timeline bar and timecode inputs for intro start/duration and loop start/duration Missing features from codebase audit: - CLUT palette editor: DVD 4-colour subpicture (BG, E1, E2, Anti-alias) - Highlight mode: static vs animated with keyframe/easing controls - Layer order panel: z-index list with type icons and visibility toggles - Shape tool (`R` shortcut) in floating canvas palette - 8-directional resize handles (4 corners + 4 edge midpoint strips) matching `SceneCanvas.tsx` pattern Implementation notes added: - Transform section: snap guide and alignment toolbar comments referencing `getSnapTargets()`, `snapValue()`, `MenusPage.css` - Minimap: shared renderer comment (one `<NavigationMap />` component rendered at full size and minimap scale) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The `#editorView` wrapper div had no CSS, so `editor-body`'s `flex: 1` had no flex parent to grow into. The grid row height was set by the inspector's content height (which grew large after adding many sections), centering the 480px canvas far below the visible area. Fix: - `#editorView`: add `flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0` to properly participate in the `editor-area` flex layout and give `editor-body` a flex parent - `editor-body`: add `grid-template-rows: 1fr; min-height: 0` so the single grid row fills the flex space and can shrink - `canvas-viewport`, `.inspector`, `.nav-map-view`: add `min-height: 0` so they can shrink within their grid/flex cells without overflow Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…r Set 2b - Adopt Blu-ray (HDMV/IG) as primary authoring ceiling with graceful degradation for DVD. - Outline expectations for seamless branching (timecode jumping) and SPRM management. - Update Edward's memory to reflect the new format strategy and technical boundaries. - Add supplemental spec document and link it to the Set 2b review. - Create handoff messages for Franklin (architecture rollout) and Yuli (UI welcome).
- Record the decision to adopt Yuli's Set 2b menu editor design in Franklin's memory. - Document the new architectural constraints (Blu-ray ceiling, seamless branching, SPRM requirements) so they persist across sessions.
ScottMorris
changed the title
ScottMorris
added
enhancement
- Run Prettier across all HTML and CSS files in the mockups directory. - Resolve CI formatting failures and ensure consistent code style.
- Link the format scaling supplemental document directly in the `menu-editor-set-2b-spec.md` sources section. - Ensure all agents reviewing the spec are aware of the hardware constraints and degradation paths.
ScottMorris
force-pushed
the
yuli-menu-editor-concepts
branch
2 times, most recently
from
09ddfe6 to
762a12d
Compare
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.
Summary
User-facing changes
Architecture
Test plan