Function StudioHeader

packages/studio/src/components/StudioHeader.tsx:184–325

({
  captureFrameHref,
  captureFrameFilename,
  handleCaptureFrameClick,
  refreshCaptureFrameTime,
  inspectorButtonActive,
  inspectorPanelActive,
  onExport,
}: StudioHeaderProps)

// fallow-ignore-next-line complexity
export function StudioHeader({
  captureFrameHref,
  captureFrameFilename,
  handleCaptureFrameClick,
  refreshCaptureFrameTime,
  inspectorButtonActive,
  inspectorPanelActive,
  onExport,
}: StudioHeaderProps) {
  const { projectId, editHistory, handleUndo, handleRedo } = useStudioShellContext();
  const { rightCollapsed, setRightCollapsed, setRightPanelTab } = usePanelLayoutContext();

  return (
    <div className="flex items-center justify-between h-10 px-3 bg-neutral-900 border-b border-neutral-800 flex-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>
        <span className="text-[11px] font-medium text-neutral-300">{projectId}</span>
      </div>
      {/* Center: storyboard / preview toggle */}
      <ViewModeToggle />
      {/* Right: toolbar buttons */}
      <div className="flex items-center gap-1.5">
        <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 ${
            editHistory.canUndo
              ? "text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800"
              : "text-neutral-700 cursor-default"
          }`}
          title={
            editHistory.undoLabel
              ? `Undo ${editHistory.undoLabel} (${getHistoryShortcutLabel("undo")})`
              : `Undo (${getHistoryShortcutLabel("undo")})`
          }
          aria-label="Undo"
        >
          <RotateCcw size={14} />
        </button>
        <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 ${
            editHistory.canRedo
              ? "text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800"
              : "text-neutral-700 cursor-default"