feat(studio): a host can put its own controls before the timeline's thumbnails toggle (#4973)

* feat(studio): a host can put its own controls before the timeline's thumbnails toggle

* fix(studio): keep the toolbar under the comment ratchet

packages/studio/src/components/TimelineToolbar.test.tsx

@@ -422,3 +422,17 @@ describe("TimelineToolbar Linked Selection", () => {
     act(() => useLinkedClipPreferences.getState().setSyncIndicatorsVisible(true));
   });
 });
+
+describe("TimelineToolbar — host right actions", () => {
+  it("draws the host's controls immediately before the thumbnails toggle", () => {
+    const { host, root } = renderToolbar(undefined, {
+      rightActions: <button type="button">Script</button>,
+    });
+    const buttons = [...host.querySelectorAll("button")];
+    const script = buttons.findIndex((b) => b.textContent === "Script");
+    const thumbs = buttons.findIndex((b) => b.getAttribute("aria-label")?.includes("thumbnails"));
+    expect(script).toBeGreaterThan(-1);
+    expect(thumbs).toBe(script + 1);
+    act(() => root.unmount());
+  });
+});

packages/studio/src/components/TimelineToolbar.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect, useRef } from "react";
+import { memo, useEffect, useRef, type ReactNode } from "react";
 import {
   ArrowsOutLineHorizontal,
   Image,
@@ -50,6 +50,7 @@ export interface TimelineToolbarProps {
   showAddBeat?: boolean;
   /** Hides Add keyframe and auto-record, and turns off auto-record and the K shortcut with them. */
   showKeyframes?: boolean;
+  rightActions?: ReactNode;
 }
 
 interface KeyframeToggleState {
@@ -149,6 +150,7 @@ export const TimelineToolbar = memo(function TimelineToolbar({
   showSelectAroundPlayhead = true,
   showAddBeat = true,
   showKeyframes = true,
+  rightActions,
 }: TimelineToolbarProps) {
   const timelineSnapEnabled = usePlayerStore((s) => s.timelineSnapEnabled);
   const setTimelineSnapEnabled = usePlayerStore((s) => s.setTimelineSnapEnabled);
@@ -460,6 +462,7 @@ export const TimelineToolbar = memo(function TimelineToolbar({
           })()}
         </div>
         <div className="flex items-center gap-0.5">
+          {rightActions}
           <Tooltip
             label={
               thumbnailsVisible