feat(core,react,html): add generic menu view navigation

[sampotts]

Summary

Adds PR 3 of the menu system: generic in-place menu view navigation for nested
menus across core, React, HTML, and the sandbox examples.

This keeps the public composition model as nested Menu.Root / nested
<media-menu>, but moves the transition internals away from submenu-specific
slide assumptions. Core now exposes generic menu view lifecycle hooks that CSS
can use for slide, fade, scale, crossfade, or no animation.

What changed

• Added generic core menu view transition helpers:
  createMenuViewTransition(), getMenuViewTransitionAttrs(), and
  syncMenuViewTransition().
• Added root/child view state hooks with data-menu-view,
  data-menu-view-state, data-direction, data-starting-style, and
  data-ending-style.
• Replaced data-submenu-active with generic root view state via
  data-menu-view-state="inactive".
• Added shared viewport sizing for menu view changes through
  --media-menu-width and --media-menu-height.
• Added React Menu.View and Menu.Back, with nested Menu.Content portaled
  into the parent viewport.
• Added HTML <media-menu-view> and <media-menu-back>, with nested
  <media-menu> linked by commandfor.
• Updated React and HTML sandbox templates so animation styling stays in
  Tailwind/CSS data-attribute classes.
• Updated the menu design doc and implementation plan to describe Menu.View
  as an in-place shared-viewport view boundary, not a requirement for future
  flyout submenus.

Notes

• Traditional flyout submenus are intentionally out of scope for this PR.
• The current default nested menu behavior remains the video-player settings
  style: in-place view navigation inside a shared viewport.
• Core still owns measurement and sizing variables; authored motion styling
  stays in CSS.

Validation

• pnpm -F @videojs/core test src/dom/ui/menu/tests/menu-viewport-transition.test.ts src/dom/ui/menu/tests/create-menu-view-transition.test.ts src/dom/ui/menu/tests/create-menu.test.ts
• pnpm -F @videojs/react test src/ui/menu/tests/menu.test.tsx
• pnpm -F @videojs/html test src/ui/menu/tests/menu-element.test.ts
• pnpm -F @videojs/core build
• pnpm -F @videojs/react build
• pnpm -F @videojs/html build
• pnpm typecheck
• pnpm check:workspace
• Browser checked React and HTML sandbox submenu transitions with slowed
  animation timing.

---

Note

Medium Risk
Adds a new submenu/navigation state machine with view transitions, focus restoration, and viewport sizing across core/React/HTML; regressions are possible in keyboard handling and menu open/close behavior. Risk is moderate due to broad surface-area changes but remains UI-scoped (no auth/data).

Overview
Enables generic in-place view navigation for nested menus by introducing a shared menu-viewport model (root view + child views) driven by new data-menu-view* attributes, data-direction, and transition lifecycle hooks.

Core createMenu() now tracks a submenu stack via navigationInput and exposes push/pop, plus a new createMenuViewTransition() and menu-viewport-transition to coordinate enter/exit phases, focus restoration, and --media-menu-width/height sizing during view changes.

React and HTML menu implementations adopt this model: React adds Menu.View and Menu.Back, updates nested Menu.Root/Trigger/Content to operate in submenu mode (including portaling nested content into the parent viewport) and to pop on selection; HTML adds <media-menu-view> and <media-menu-back>, implements commandfor-linked submenus, and updates event/escape handling to respect defaultPrevented. Sandboxes and docs are updated to demonstrate and describe the new navigation pattern.

^{Reviewed by Cursor Bugbot for commit 9e83021. Bugbot is set up for automated code reviews on this repo. Configure here.}

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
v10-sandbox	Ready	Preview, Comment	May 5, 2026 4:31am

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 6d316e4. Configure here.}

[luwes]

👍