From 850ff9301fe20d8f67e0dbfa2f37f7c7096938fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Thu, 21 May 2026 21:34:35 -0400
Subject: [PATCH] feat(studio): add tooltips to studio controls and tabs

Add title attributes to interactive elements that were missing them:
- PlayerControls: Play/Pause, playback speed, shortcuts panel, clear
  in/out-point buttons, and jump-to-frame Go button
- StudioRightPanel: Design, Layers, Motion, and Renders tab buttons
---
 packages/studio/src/components/StudioRightPanel.tsx      | 4 ++++
 packages/studio/src/player/components/PlayerControls.tsx | 6 ++++++
 2 files changed, 10 insertions(+)

diff --git a/packages/studio/src/components/StudioRightPanel.tsx b/packages/studio/src/components/StudioRightPanel.tsx
index 4f36db4401..90b72920e6 100644
--- a/packages/studio/src/components/StudioRightPanel.tsx
+++ b/packages/studio/src/components/StudioRightPanel.tsx
@@ -109,6 +109,7 @@ export function StudioRightPanel({
                   <button
                     type="button"
                     onClick={() => setRightPanelTab("design")}
+                    title="Design"
                     className={`h-8 rounded-xl px-3 text-[11px] font-medium transition-colors ${
                       rightPanelTab === "design"
                         ? "bg-neutral-800 text-white"
@@ -120,6 +121,7 @@ export function StudioRightPanel({
                   <button
                     type="button"
                     onClick={() => setRightPanelTab("layers")}
+                    title="Layers"
                     className={`h-8 rounded-xl px-3 text-[11px] font-medium transition-colors ${
                       rightPanelTab === "layers"
                         ? "bg-neutral-800 text-white"
@@ -132,6 +134,7 @@ export function StudioRightPanel({
                     <button
                       type="button"
                       onClick={() => setRightPanelTab("motion")}
+                      title="Motion"
                       className={`h-8 rounded-xl px-3 text-[11px] font-medium transition-colors ${
                         rightPanelTab === "motion"
                           ? "bg-neutral-800 text-white"
@@ -146,6 +149,7 @@ export function StudioRightPanel({
               <button
                 type="button"
                 onClick={() => setRightPanelTab("renders")}
+                title="Renders"
                 className={`h-8 rounded-xl px-3 text-[11px] font-medium transition-colors ${
                   rightPanelTab === "renders"
                     ? "bg-neutral-800 text-white"
diff --git a/packages/studio/src/player/components/PlayerControls.tsx b/packages/studio/src/player/components/PlayerControls.tsx
index 9d33bb9e2c..f277c13f6f 100644
--- a/packages/studio/src/player/components/PlayerControls.tsx
+++ b/packages/studio/src/player/components/PlayerControls.tsx
@@ -342,6 +342,7 @@ export const PlayerControls = memo(function PlayerControls({
       {/* Play/Pause button */}
       <button
         type="button"
+        title={isPlaying ? "Pause" : "Play"}
         aria-label={isPlaying ? "Pause" : "Play"}
         onClick={() => {
           trackStudioEvent("playback", { action: isPlaying ? "pause" : "play" });
@@ -528,6 +529,7 @@ export const PlayerControls = memo(function PlayerControls({
           type="button"
           onClick={() => setShowSpeedMenu((v) => !v)}
           disabled={disabled}
+          title="Playback speed"
           className="w-10 px-2 py-1 rounded-md text-[10px] font-mono tabular-nums transition-colors"
           style={{ color: "#71717A", background: "rgba(255,255,255,0.04)" }}
         >
@@ -664,6 +666,7 @@ export const PlayerControls = memo(function PlayerControls({
               ? "border-neutral-600 text-neutral-200 bg-neutral-800"
               : "border-neutral-800 text-neutral-600 hover:text-neutral-300 hover:border-neutral-600"
           }`}
+          title="Shortcuts and tools"
           aria-label="Shortcuts and tools"
           aria-expanded={showShortcuts}
         >
@@ -712,6 +715,7 @@ export const PlayerControls = memo(function PlayerControls({
                 <button
                   type="submit"
                   disabled={disabled}
+                  title="Jump to frame"
                   className="h-6 px-2 rounded border border-neutral-700 text-[10px] text-neutral-300 transition-colors hover:border-neutral-500 hover:bg-neutral-800 disabled:opacity-40"
                 >
                   Go
@@ -745,6 +749,7 @@ export const PlayerControls = memo(function PlayerControls({
                           type="button"
                           onClick={() => setInPoint(null)}
                           className="w-4 h-4 flex items-center justify-center rounded text-neutral-500 hover:text-neutral-200 transition-colors"
+                          title="Clear in-point"
                           aria-label="Clear in-point"
                         >
                           <svg
@@ -784,6 +789,7 @@ export const PlayerControls = memo(function PlayerControls({
                           type="button"
                           onClick={() => setOutPoint(null)}
                           className="w-4 h-4 flex items-center justify-center rounded text-neutral-500 hover:text-neutral-200 transition-colors"
+                          title="Clear out-point"
                           aria-label="Clear out-point"
                         >
                           <svg