fix: improve studio timeline discoverability (#431)

packages/studio/src/player/components/PlayerControls.tsx

@@ -1,5 +1,9 @@
 import { useRef, useState, useCallback, useEffect, memo } from "react";
 import { useMountEffect } from "../../hooks/useMountEffect";
+import {
+  TIMELINE_TOGGLE_SHORTCUT_LABEL,
+  getTimelineToggleTitle,
+} from "../../utils/timelineDiscovery";
 import { formatTime } from "../lib/time";
 import { usePlayerStore, liveTime } from "../store/playerStore";
 
@@ -328,13 +332,15 @@ export const PlayerControls = memo(function PlayerControls({
       {/* Timeline toggle */}
       {onToggleTimeline !== undefined && (
         <button
+          type="button"
           onClick={onToggleTimeline}
-          className={`w-7 h-7 flex items-center justify-center rounded-md border transition-colors ${
+          className={`h-7 flex items-center gap-1.5 rounded-md border px-2.5 text-[11px] font-medium transition-colors ${
             timelineVisible
               ? "text-studio-accent bg-studio-accent/10 border-studio-accent/30"
-              : "border-neutral-700 text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800"
+              : "border-neutral-700 text-neutral-300 hover:border-neutral-500 hover:bg-neutral-800"
           }`}
-          title={timelineVisible ? "Hide timeline" : "Show timeline"}
+          title={getTimelineToggleTitle(Boolean(timelineVisible))}
+          aria-label={timelineVisible ? "Hide timeline editor" : "Show timeline editor"}
         >
           <svg
             width="13"
@@ -349,6 +355,10 @@ export const PlayerControls = memo(function PlayerControls({
             <line x1="3" y1="9" x2="21" y2="9" />
             <line x1="3" y1="5" x2="21" y2="5" />
           </svg>
+          <span>Timeline</span>
+          <span className="hidden md:inline rounded bg-black/20 px-1 py-0.5 text-[9px] font-mono opacity-70">
+            {TIMELINE_TOGGLE_SHORTCUT_LABEL}
+          </span>
         </button>
       )}
     </div>