@hyperframes/studio 0.8.51 → 0.8.52

package/src/components/StudioHeader.tsx

@@ -1,10 +1,9 @@
 import type { MouseEvent } from "react";
-import { RotateCcw, RotateCw, Camera } from "../icons/SystemIcons";
-import { getHistoryShortcutLabel } from "../utils/studioHelpers";
+import { Camera } from "../icons/SystemIcons";
 import { useStudioShellContext } from "../contexts/StudioContext";
 import { usePanelLayoutContext } from "../contexts/PanelLayoutContext";
 import { trackStudioEvent } from "../utils/studioTelemetry";
-import { Tooltip } from "./ui";
+import { Button, buttonBase, buttonSizes, buttonVariants, cn, Tooltip } from "./ui";
 
 export interface StudioHeaderProps {
   captureFrameHref: string;
@@ -40,8 +39,8 @@ function HyperframesLogo() {
           y2="37.482"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stopColor="#06E3FA" />
-          <stop offset="1" stopColor="#4FDB5E" />
+          <stop stopColor="var(--color-brand-gradient-from)" />
+          <stop offset="1" stopColor="var(--color-brand-gradient-to)" />
         </linearGradient>
         <linearGradient
           id="hf-g1"
@@ -51,8 +50,8 @@ function HyperframesLogo() {
           y2="6.303"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stopColor="#06E3FA" />
-          <stop offset="1" stopColor="#4FDB5E" />
+          <stop stopColor="var(--color-brand-gradient-from)" />
+          <stop offset="1" stopColor="var(--color-brand-gradient-to)" />
         </linearGradient>
       </defs>
       {/* heygen label */}
@@ -164,7 +163,7 @@ export function StudioHeader({
   inspectorPanelActive,
   onExport,
 }: StudioHeaderProps) {
-  const { projectId, editHistory, handleUndo, handleRedo, renderQueue } = useStudioShellContext();
+  const { projectId, renderQueue } = useStudioShellContext();
   // effectiveRightCollapsed, not the raw intent: in the auto-railed state the
   // intent is still "open" while the panel is hidden, so branching on intent
   // made this button write rightCollapsed=true — and that value is synced into
@@ -174,153 +173,114 @@ export function StudioHeader({
   const ffmpegMissing = renderQueue.ffmpegMissing;
 
   return (
-    <div className="flex items-center justify-between h-10 px-3 bg-neutral-900 border-b border-neutral-800 shrink-0">
+    <div className="flex items-center justify-between h-10 px-3 bg-surface border-b border-border-strong shrink-0">
       {/* Left: logo + project name */}
       <div className="flex items-center gap-3">
         <HyperframesLogo />
-        <span className="text-neutral-700 select-none" aria-hidden="true">
+        <span className="text-text-5 select-none" aria-hidden="true">
           |
         </span>
-        <span className="text-[11px] font-medium text-neutral-300">{projectId}</span>
+        <span className="text-step-11 font-medium text-text-1">{projectId}</span>
       </div>
       {/* Right: toolbar buttons */}
-      <div className="flex items-center gap-1.5">
-        <Tooltip
-          label={
-            editHistory.undoLabel
-              ? `Undo ${editHistory.undoLabel} (${getHistoryShortcutLabel("undo")})`
-              : `Undo (${getHistoryShortcutLabel("undo")})`
-          }
-          side="bottom"
-        >
-          <button
-            type="button"
-            onClick={() => {
-              trackStudioEvent("toolbar_action", { action: "undo" });
-              void handleUndo();
-            }}
-            disabled={!editHistory.canUndo}
-            className={`h-7 w-7 flex items-center justify-center rounded-md transition-colors active:scale-[0.98] ${
-              editHistory.canUndo
-                ? "text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800"
-                : "text-neutral-700 cursor-default"
-            }`}
-            aria-label="Undo"
-          >
-            <RotateCcw size={14} />
-          </button>
-        </Tooltip>
-        <Tooltip
-          label={
-            editHistory.redoLabel
-              ? `Redo ${editHistory.redoLabel} (${getHistoryShortcutLabel("redo")})`
-              : `Redo (${getHistoryShortcutLabel("redo")})`
-          }
-          side="bottom"
-        >
-          <button
-            type="button"
-            onClick={() => {
-              trackStudioEvent("toolbar_action", { action: "redo" });
-              void handleRedo();
-            }}
-            disabled={!editHistory.canRedo}
-            className={`h-7 w-7 flex items-center justify-center rounded-md transition-colors active:scale-[0.98] ${
-              editHistory.canRedo
-                ? "text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800"
-                : "text-neutral-700 cursor-default"
-            }`}
-            aria-label="Redo"
-          >
-            <RotateCw size={14} />
-          </button>
-        </Tooltip>
-        <Tooltip label={capturing ? "Capturing frame…" : "Capture current frame"} side="bottom">
-          <a
-            href={captureFrameHref}
-            download={captureFrameFilename}
-            onClick={(e) => {
-              if (capturing) {
-                e.preventDefault();
-                return;
-              }
-              trackStudioEvent("toolbar_action", { action: "capture_frame" });
-              handleCaptureFrameClick(e);
-            }}
-            onFocus={refreshCaptureFrameTime}
-            onPointerDown={refreshCaptureFrameTime}
-            aria-disabled={capturing || undefined}
-            className={`h-7 flex items-center gap-1.5 px-2.5 rounded-md text-[11px] font-medium transition-colors ${
-              capturing
-                ? "text-neutral-600 cursor-default"
-                : "text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800 active:scale-[0.98]"
-            }`}
-            aria-label={capturing ? "Capturing frame" : "Capture current frame"}
-          >
-            {capturing ? (
-              <svg
-                className="animate-spin motion-reduce:animate-none h-3.5 w-3.5"
-                viewBox="0 0 24 24"
-                fill="none"
-                aria-hidden="true"
-              >
-                <circle
-                  className="opacity-25"
-                  cx="12"
-                  cy="12"
-                  r="10"
+      <div className="flex items-center gap-3">
+        <div className="flex h-ctl items-center divide-x divide-border-strong overflow-hidden rounded-md border border-border-strong bg-bg-2">
+          <Tooltip label={capturing ? "Capturing frame…" : "Capture current frame"} side="bottom">
+            {/* A real download link, so it wears Button's recipe rather than being
+              one: `download` on an <a> is what saves the frame, and no <button>
+              can do that. `enabled:` never matches a link, so the ghost
+              variant's hover look is repeated unprefixed here. */}
+            <a
+              href={captureFrameHref}
+              download={captureFrameFilename}
+              onClick={(e) => {
+                if (capturing) {
+                  e.preventDefault();
+                  return;
+                }
+                trackStudioEvent("toolbar_action", { action: "capture_frame" });
+                handleCaptureFrameClick(e);
+              }}
+              onFocus={refreshCaptureFrameTime}
+              onPointerDown={refreshCaptureFrameTime}
+              aria-disabled={capturing || undefined}
+              className={cn(
+                buttonBase,
+                buttonVariants.ghost,
+                buttonSizes.md,
+                "h-full rounded-none max-[1000px]:px-2",
+                capturing
+                  ? "text-text-4 cursor-default"
+                  : "hover:bg-hover hover:text-text-0 active:scale-[0.98]",
+              )}
+              aria-label={capturing ? "Capturing frame" : "Capture current frame"}
+            >
+              {capturing ? (
+                <svg
+                  className="animate-spin motion-reduce:animate-none h-3.5 w-3.5"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  aria-hidden="true"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  />
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                  />
+                </svg>
+              ) : (
+                <Camera size={14} />
+              )}
+              <span className="max-[1000px]:hidden">{capturing ? "Capturing…" : "Capture"}</span>
+            </a>
+          </Tooltip>
+          <Tooltip label="Inspector" side="bottom">
+            <Button
+              variant="ghost"
+              aria-label="Inspector"
+              aria-pressed={inspectorButtonActive}
+              className={cn(
+                "h-full rounded-none",
+                inspectorButtonActive && "bg-hover text-accent enabled:hover:text-accent",
+              )}
+              icon={
+                <svg
+                  width="12"
+                  height="12"
+                  viewBox="0 0 24 24"
+                  fill="none"
                   stroke="currentColor"
-                  strokeWidth="4"
-                />
-                <path
-                  className="opacity-75"
-                  fill="currentColor"
-                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-                />
-              </svg>
-            ) : (
-              <Camera size={14} />
-            )}
-            <span>{capturing ? "Capturing…" : "Capture"}</span>
-          </a>
-        </Tooltip>
-        <Tooltip label="Inspector" side="bottom">
-          <button
-            type="button"
-            onClick={() => {
-              if (shouldOpenInspector(effectiveRightCollapsed, inspectorPanelActive)) {
-                trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: false });
-                setRightPanelTab("design");
-                setRightCollapsed(false);
-                return;
+                  strokeWidth="2"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <polygon points="10 8 16 12 10 16" fill="currentColor" stroke="none" />
+                </svg>
               }
-              trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: true });
-              // Keep the current selection when collapsing the Inspector — closing
-              // the panel shouldn't deselect the element.
-              setRightCollapsed(true);
-            }}
-            aria-pressed={inspectorButtonActive}
-            className={`h-7 flex items-center gap-1.5 px-2.5 rounded-md text-[11px] font-medium border transition-colors active:scale-[0.98] ${
-              inspectorButtonActive
-                ? "text-studio-accent bg-studio-accent/10 border-studio-accent/30"
-                : "text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800 border-transparent"
-            }`}
-            aria-label="Inspector"
-          >
-            <svg
-              width="12"
-              height="12"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
+              onClick={() => {
+                if (shouldOpenInspector(effectiveRightCollapsed, inspectorPanelActive)) {
+                  trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: false });
+                  setRightPanelTab("design");
+                  setRightCollapsed(false);
+                  return;
+                }
+                trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: true });
+                // Keep the current selection when collapsing the Inspector — closing
+                // the panel shouldn't deselect the element.
+                setRightCollapsed(true);
+              }}
             >
-              <circle cx="12" cy="12" r="10" />
-              <polygon points="10 8 16 12 10 16" fill="currentColor" stroke="none" />
-            </svg>
-            Inspector
-          </button>
-        </Tooltip>
+              Inspector
+            </Button>
+          </Tooltip>
+        </div>
         <Tooltip
           label={
             ffmpegMissing
@@ -331,8 +291,9 @@ export function StudioHeader({
           }
           side="bottom"
         >
-          <button
-            type="button"
+          <Button
+            variant="primary"
+            data-testid="header-export"
             disabled={isRendering}
             onClick={() => {
               if (isRendering) return;
@@ -346,10 +307,9 @@ export function StudioHeader({
               if (ffmpegMissing) return;
               onExport?.();
             }}
-            className="h-7 flex items-center gap-1.5 px-3 rounded-md text-[11px] font-semibold bg-studio-accent text-[#09090B] enabled:hover:brightness-110 transition-[filter,transform] enabled:active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed"
           >
             {isRendering ? "Rendering…" : "Export"}
-          </button>
+          </Button>
         </Tooltip>
       </div>
     </div>

package/src/components/StudioRightPanel.tsx

@@ -9,7 +9,7 @@ import { BlockParamsPanel } from "./editor/BlockParamsPanel";
 import { RenderQueuePanel } from "./renders/RenderQueuePanel";
 import { SlideshowPanel } from "./panels/SlideshowPanel";
 import { VariablesPanel } from "./panels/VariablesPanel";
-import { PanelTabButton } from "./PanelTabButton";
+import { RightPanelTabs, type RightPanelTabDescriptor } from "./RightPanelTabs";
 import type { RenderJob } from "./renders/useRenderQueue";
 import { STUDIO_FLAT_INSPECTOR_ENABLED } from "./editor/manualEditingAvailability";
 import { useSlideshowPersist } from "../hooks/useSlideshowPersist";
@@ -339,6 +339,51 @@ export function StudioRightPanel({
 
   const renderQueuePanel = <RenderQueuePanel />;
 
+  // Slideshow appears only for a slideshow composition, so the strip is built
+  // rather than written out: a tab that is not in this list is not reachable by
+  // an arrow key either.
+  const inspectorTabs: RightPanelTabDescriptor[] = [
+    {
+      id: "design",
+      label: "Design",
+      tooltip: "Element styles and properties",
+      active: designPaneOpen,
+      onSelect: () => handleInspectorPaneButtonClick("design"),
+    },
+    {
+      id: "layers",
+      label: "Layers",
+      tooltip: "Composition layer stack",
+      active: layersPaneOpen,
+      onSelect: () => handleInspectorPaneButtonClick("layers"),
+    },
+    {
+      id: "renders",
+      label: renderJobs.length > 0 ? `Renders (${renderJobs.length})` : "Renders",
+      tooltip: "Render queue and exports",
+      active: rightPanelTab === "renders",
+      onSelect: () => setRightPanelTab("renders"),
+    },
+    ...(isSlideshowComposition
+      ? [
+          {
+            id: "slideshow",
+            label: "Slideshow",
+            tooltip: "Slideshow branching editor",
+            active: rightPanelTab === "slideshow",
+            onSelect: () => setRightPanelTab("slideshow"),
+          },
+        ]
+      : []),
+    {
+      id: "variables",
+      label: "Variables",
+      tooltip: "Template variables — declare, preview with values",
+      active: rightPanelTab === "variables",
+      onSelect: () => setRightPanelTab("variables"),
+    },
+  ];
+
   return (
     <>
       {/* Vertical resize divider: 3px visible seam, 13px hit zone via the inner div. */}
@@ -376,40 +421,7 @@ export function StudioRightPanel({
           <CaptionPropertyPanel iframeRef={previewIframeRef} />
         ) : (
           <>
-            <div className="flex min-w-0 items-center gap-1 overflow-hidden border-b border-neutral-800 px-3 py-2">
-              <PanelTabButton
-                label="Design"
-                tooltip="Element styles and properties"
-                active={designPaneOpen}
-                onClick={() => handleInspectorPaneButtonClick("design")}
-              />
-              <PanelTabButton
-                label="Layers"
-                tooltip="Composition layer stack"
-                active={layersPaneOpen}
-                onClick={() => handleInspectorPaneButtonClick("layers")}
-              />
-              <PanelTabButton
-                label={renderJobs.length > 0 ? `Renders (${renderJobs.length})` : "Renders"}
-                tooltip="Render queue and exports"
-                active={rightPanelTab === "renders"}
-                onClick={() => setRightPanelTab("renders")}
-              />
-              {isSlideshowComposition && (
-                <PanelTabButton
-                  label="Slideshow"
-                  tooltip="Slideshow branching editor"
-                  active={rightPanelTab === "slideshow"}
-                  onClick={() => setRightPanelTab("slideshow")}
-                />
-              )}
-              <PanelTabButton
-                label="Variables"
-                tooltip="Template variables — declare, preview with values"
-                active={rightPanelTab === "variables"}
-                onClick={() => setRightPanelTab("variables")}
-              />
-            </div>
+            <RightPanelTabs tabs={inspectorTabs} activateOnFocus={STUDIO_FLAT_INSPECTOR_ENABLED} />
             <div className="min-h-0 min-w-0 flex-1 overflow-hidden">
               {rightPanelTab === "block-params" && activeBlockParams ? (
                 <BlockParamsPanel

package/src/components/TimelineHistoryButtons.dom.test.tsx

@@ -0,0 +1,117 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { cleanupMounted, mountHost } from "./ui/mountHost.testHelpers";
+import { isTypingTarget } from "../utils/typingTarget";
+import { shouldIgnorePlaybackShortcutTarget } from "../player/lib/playbackShortcuts";
+
+const editHistory = {
+  canUndo: false,
+  canRedo: false,
+  undoLabel: undefined as string | undefined,
+  redoLabel: undefined as string | undefined,
+};
+const handleUndo = vi.fn();
+const handleRedo = vi.fn();
+const trackStudioEvent = vi.fn();
+
+vi.mock("../contexts/StudioContext", () => ({
+  useStudioShellContext: () => ({ editHistory, handleUndo, handleRedo }),
+}));
+vi.mock("../utils/studioTelemetry", () => ({ trackStudioEvent }));
+
+const { TimelineHistoryButtons } = await import("./TimelineHistoryButtons");
+const { TimelineToolbar } = await import("./TimelineToolbar");
+
+beforeEach(() => {
+  Object.assign(editHistory, {
+    canUndo: false,
+    canRedo: false,
+    undoLabel: undefined,
+    redoLabel: undefined,
+  });
+  vi.clearAllMocks();
+});
+
+afterEach(cleanupMounted);
+
+const mount = mountHost;
+
+function button(host: HTMLElement, label: string): HTMLButtonElement {
+  const el = host.querySelector<HTMLButtonElement>(`button[aria-label="${label}"]`);
+  if (!el) throw new Error(`not rendered: ${label}`);
+  return el;
+}
+
+function click(el: HTMLElement): void {
+  act(() => {
+    el.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+  });
+}
+
+it("calls handleUndo once and tracks the event when Undo is enabled", () => {
+  editHistory.canUndo = true;
+  const host = mount(<TimelineHistoryButtons />);
+
+  click(button(host, "Undo"));
+
+  expect(handleUndo).toHaveBeenCalledTimes(1);
+  expect(handleRedo).not.toHaveBeenCalled();
+  expect(trackStudioEvent).toHaveBeenCalledWith("toolbar_action", { action: "undo" });
+});
+
+it("calls handleRedo once and tracks the event when Redo is enabled", () => {
+  editHistory.canRedo = true;
+  const host = mount(<TimelineHistoryButtons />);
+
+  click(button(host, "Redo"));
+
+  expect(handleRedo).toHaveBeenCalledTimes(1);
+  expect(trackStudioEvent).toHaveBeenCalledWith("toolbar_action", { action: "redo" });
+});
+
+it("disables both buttons and ignores clicks on an empty history", () => {
+  const host = mount(<TimelineHistoryButtons />);
+
+  for (const label of ["Undo", "Redo"]) {
+    const el = button(host, label);
+    expect(el.disabled).toBe(true);
+    expect(el.className).toContain("cursor-not-allowed");
+    click(el);
+  }
+  expect(handleUndo).not.toHaveBeenCalled();
+  expect(handleRedo).not.toHaveBeenCalled();
+  expect(trackStudioEvent).not.toHaveBeenCalled();
+});
+
+it("leaves enabled buttons without the disabled attribute", () => {
+  editHistory.canUndo = true;
+  const el = button(mount(<TimelineHistoryButtons />), "Undo");
+
+  expect(el.disabled).toBe(false);
+  expect(el.className).not.toContain("cursor-not-allowed");
+});
+
+it("orders the toolbar Undo, Redo, Select, Razor", () => {
+  const host = mount(<TimelineToolbar />);
+  const labels = Array.from(host.querySelectorAll("button"))
+    .map((b) => b.getAttribute("aria-label"))
+    .filter((l) => l !== null)
+    .slice(0, 4);
+
+  expect(labels).toEqual(["Undo", "Redo", "Selection tool", "Razor tool"]);
+});
+
+it("classifies Undo and Redo for the hotkey filters at their new location (KTD13)", () => {
+  // The header's own version of this check dropped Undo/Redo when they moved
+  // here; a <button> is never a typing target and is always claimed by the
+  // playback filter, same as every other toolbar tool.
+  const host = mount(<TimelineHistoryButtons />);
+
+  for (const label of ["Undo", "Redo"]) {
+    const el = button(host, label);
+    expect(isTypingTarget(el), label).toBe(false);
+    expect(shouldIgnorePlaybackShortcutTarget(el), label).toBe(true);
+  }
+});

package/src/components/TimelineHistoryButtons.tsx

@@ -0,0 +1,54 @@
+import { useStudioShellContext } from "../contexts/StudioContext";
+import { RotateCcw, RotateCw } from "../icons/SystemIcons";
+import { trackStudioEvent } from "../utils/studioTelemetry";
+import { historyTooltipLabel } from "../utils/studioHelpers";
+import { flatDisabled, flatIdle } from "./timelineToolbarStyles";
+import { Tooltip } from "./ui";
+
+interface HistoryButtonProps {
+  action: "undo" | "redo";
+  enabled: boolean;
+  label: string | undefined;
+  onClick: () => Promise<void> | void;
+}
+
+function HistoryButton({ action, enabled, label, onClick }: HistoryButtonProps) {
+  const Icon = action === "undo" ? RotateCcw : RotateCw;
+  return (
+    <Tooltip label={historyTooltipLabel(action, label)}>
+      <button
+        type="button"
+        aria-label={action === "undo" ? "Undo" : "Redo"}
+        disabled={!enabled}
+        className={enabled ? flatIdle : flatDisabled}
+        onClick={() => {
+          trackStudioEvent("toolbar_action", { action });
+          void onClick();
+        }}
+      >
+        <Icon size={16} />
+      </button>
+    </Tooltip>
+  );
+}
+
+/** Undo and Redo, on the one edit-history path the shell already owns. */
+export function TimelineHistoryButtons() {
+  const { editHistory, handleUndo, handleRedo } = useStudioShellContext();
+  return (
+    <>
+      <HistoryButton
+        action="undo"
+        enabled={editHistory.canUndo}
+        label={editHistory.undoLabel}
+        onClick={handleUndo}
+      />
+      <HistoryButton
+        action="redo"
+        enabled={editHistory.canRedo}
+        label={editHistory.redoLabel}
+        onClick={handleRedo}
+      />
+    </>
+  );
+}

package/src/components/TimelineToolbar.test.tsx

@@ -8,6 +8,14 @@ import { usePlayerStore } from "../player/store/playerStore";
 import { makeSelection } from "../hooks/domSelectionTestHarness";
 import { TimelineToolbar } from "./TimelineToolbar";
 
+vi.mock("../contexts/StudioContext", () => ({
+  useStudioShellContext: () => ({
+    editHistory: { canUndo: false, canRedo: false },
+    handleUndo: vi.fn(),
+    handleRedo: vi.fn(),
+  }),
+}));
+
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 afterEach(() => {

package/src/components/TimelineToolbar.tsx

@@ -22,6 +22,8 @@ import {
 import { useTimelineZoom } from "../player/components/useTimelineZoom";
 import { usePlayerStore, type TimelineElement } from "../player";
 import { Tooltip } from "./ui";
+import { flatActive, flatBtn, flatDisabled, flatIdle } from "./timelineToolbarStyles";
+import { TimelineHistoryButtons } from "./TimelineHistoryButtons";
 import { Scissors } from "../icons/SystemIcons";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "./editor/domEditingTypes";
@@ -186,19 +188,13 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
     return () => window.removeEventListener("keydown", onKeyDown);
   }, []);
 
-  // CapCut-flat icon buttons: no per-button border/box chrome — a transparent
-  // 28px hit area with a subtle rounded hover wash, consistent 16px glyphs.
-  const flatBtn = "flex h-7 w-7 items-center justify-center rounded-md transition-colors";
-  const flatIdle = `${flatBtn} text-neutral-400 hover:bg-white/6 hover:text-neutral-200 active:scale-[0.98]`;
-  const flatActive = `${flatBtn} bg-white/8 text-neutral-100 active:scale-[0.98]`;
-  const flatDisabled = `${flatBtn} text-neutral-700 cursor-not-allowed`;
-
   return (
     // The "TIMELINE" label is dropped for CapCut-like density — the pane's
     // position (tracks right below) makes it self-evident.
     <div className="border-b border-neutral-800/60">
       <div className="flex items-center justify-between px-2 py-0.5">
         <div className="flex items-center gap-0.5">
+          <TimelineHistoryButtons />
           <Tooltip label="Selection tool (V)">
             <button
               type="button"