From 01feecf31a513141a03af63a7a9515e427f05fd5 Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Wed, 19 Aug 2026 20:19:45 -0700
Subject: [PATCH] style(studio): match the group caret to the property panel's
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The group row's disclosure was an 11px `▸` rotated 90° when open. The
property panel's preset runs disclose the same way and draw it at 13px in
the mono family, swapping `▸`/`▾` rather than rotating
(`hf-fx-preset-run-caret`). Same gesture, so the same glyph at the same
size instead of a smaller one unique to this row.

Swapped rather than rotated for a second reason: `▸` is not square, so
rotating it leaves the glyph off-centre in its 24px box.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../src/player/components/TimelineGroupHeader.tsx     | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/studio/src/player/components/TimelineGroupHeader.tsx b/packages/studio/src/player/components/TimelineGroupHeader.tsx
index d8890ce09..b36fdd7ea 100644
--- a/packages/studio/src/player/components/TimelineGroupHeader.tsx
+++ b/packages/studio/src/player/components/TimelineGroupHeader.tsx
@@ -116,7 +116,10 @@ export function TimelineGroupHeader({
           aria-expanded={isExpanded}
           aria-label={`${isExpanded ? "Hide" : "Show"} ${label} tracks`}
           title={`${isExpanded ? "Hide" : "Show"} tracks`}
-          className={`flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 text-[11px] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC] ${
+          // 13px mono, matching the property panel's preset-run caret
+          // (`hf-fx-preset-run-caret`) — the same disclosure, so the same glyph
+          // at the same size rather than a smaller one unique to this row.
+          className={`flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 font-mono text-[13px] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC] ${
             isExpanded ? "text-white" : "text-white/55 hover:text-white"
           }`}
           onPointerDown={(event) => event.stopPropagation()}
@@ -125,9 +128,9 @@ export function TimelineGroupHeader({
             onToggleExpanded();
           }}
         >
-          <span aria-hidden="true" style={{ transform: isExpanded ? "rotate(90deg)" : undefined }}>
-            ▸
-          </span>
+          {/* Swapped, not rotated: the panel's caret swaps too, and a rotated
+              ▸ sits off-centre in its box because the glyph is not square. */}
+          <span aria-hidden="true">{isExpanded ? "▾" : "▸"}</span>
         </button>
         <GroupNameButton label={label} memberCount={memberCount} onOpenFxRack={onOpenFxRack} />
       </div>