Studio should support Remotion/NLE-style playback controls #527

Problem

HyperFrames Studio currently makes frame-accurate timing review harder than Remotion Studio or common video editors.

Observed gaps:

• No loop playback toggle in Studio
• Space play/pause only works when document.body has focus
• Time display is m:ss only, with no frame display mode
• No current-frame input or jump-to-frame control
• No standard NLE-style J/K/L shuttle controls

Also request standard NLE-style J/K/L playback controls:

• J: play backward
• K: pause / stop
• L: play forward
• Repeated J or L: increase shuttle speed, e.g. 1x → 2x → 4x
• K + J / K + L, or equivalent: step backward / forward by one frame
• These shortcuts should work when the preview area is focused, not only when document.body has focus

Rationale:
J/K/L controls are standard in video editing tools such as Premiere Pro, DaVinci Resolve, Final Cut Pro, and Avid. For animation timing work, especially short UI motion videos, authors need to scrub, reverse, pause, loop, and frame-step without reaching for the mouse.

Proposed solution

Add a Studio playback control layer for precise animation review:

• Loop playback toggle
• Space play/pause that works when the preview area is focused
• Frame display mode, e.g. current frame / total frames
• Jump-to-frame input
• ArrowLeft / ArrowRight frame-step controls
• Shift + ArrowLeft / ArrowRight larger step controls
• J/K/L shuttle controls:
  • J: play backward
  • K: pause / stop
  • L: play forward
  • Repeated J or L: increase shuttle speed, e.g. 1x → 2x → 4x
  • K + J / K + L, or equivalent: step backward / forward by one frame
• Visible shortcut hints in the Studio UI

Alternatives considered

Using the mouse scrubber or editing timeline seconds directly works for rough previews, but it is too slow for repeated frame-accurate timing checks. Remotion Studio and NLEs make this workflow much faster with loop, frame display, frame stepping, and J/K/L controls.

Additional context

No response